From 35e8392049cafdb48de0411d9134fbfd6d5d317a Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Tue, 24 Feb 2026 17:08:29 -0500
Subject: [PATCH 01/14] feat: refactor dashboard content structure and move
 page rendering logic to dedicated files

- Moved event rendering logic to `events.dart` and created `buildEventsContent` function.
- Created `options.dart` for task and worker page options classes.
- Moved overview content rendering to `overview.dart` with `buildOverviewContent` function.
- Added shared utility functions to `shared.dart` for metric cards and queue table rows.
- Implemented task rendering in `tasks.dart` with `buildTasksContent` function.
- Created worker rendering logic in `workers.dart` with `buildWorkersContent` function.
---
 packages/dashboard/lib/src/ui/content.dart  | 583 +-------------------
 packages/dashboard/lib/src/ui/events.dart   |  33 ++
 packages/dashboard/lib/src/ui/options.dart  |  53 ++
 packages/dashboard/lib/src/ui/overview.dart |  70 +++
 packages/dashboard/lib/src/ui/shared.dart   |  85 +++
 packages/dashboard/lib/src/ui/tasks.dart    | 164 ++++++
 packages/dashboard/lib/src/ui/workers.dart  | 190 +++++++
 7 files changed, 605 insertions(+), 573 deletions(-)
 create mode 100644 packages/dashboard/lib/src/ui/events.dart
 create mode 100644 packages/dashboard/lib/src/ui/options.dart
 create mode 100644 packages/dashboard/lib/src/ui/overview.dart
 create mode 100644 packages/dashboard/lib/src/ui/shared.dart
 create mode 100644 packages/dashboard/lib/src/ui/tasks.dart
 create mode 100644 packages/dashboard/lib/src/ui/workers.dart

diff --git a/packages/dashboard/lib/src/ui/content.dart b/packages/dashboard/lib/src/ui/content.dart
index b5f3ba7..8ed220b 100644
--- a/packages/dashboard/lib/src/ui/content.dart
+++ b/packages/dashboard/lib/src/ui/content.dart
@@ -1,67 +1,12 @@
-import 'package:intl/intl.dart';
-import 'package:stem/stem.dart' show stemNow;
-// HTML template strings are kept on single lines for readability.
-// ignore_for_file: lines_longer_than_80_chars
-
 import 'package:stem_dashboard/src/services/models.dart';
-import 'package:stem_dashboard/src/ui/event_templates.dart';
+import 'package:stem_dashboard/src/ui/events.dart';
 import 'package:stem_dashboard/src/ui/layout.dart';
+import 'package:stem_dashboard/src/ui/options.dart';
+import 'package:stem_dashboard/src/ui/overview.dart';
+import 'package:stem_dashboard/src/ui/tasks.dart';
+import 'package:stem_dashboard/src/ui/workers.dart';
 
-final _numberFormat = NumberFormat.decimalPattern();
-
-/// View options used by the tasks page renderer.
-class TasksPageOptions {
-  /// Creates task page options with optional overrides.
-  const TasksPageOptions({
-    this.sortKey = 'queue',
-    this.descending = false,
-    this.filter,
-    this.flashKey,
-    this.errorKey,
-  });
-
-  /// Sort key used for queue ordering.
-  final String sortKey;
-
-  /// Whether sorting should be descending.
-  final bool descending;
-
-  /// Optional queue filter text.
-  final String? filter;
-
-  /// Optional flash message key for UI alerts.
-  final String? flashKey;
-
-  /// Optional error message key for UI alerts.
-  final String? errorKey;
-
-  /// Whether a non-empty filter value is set.
-  bool get hasFilter => filter != null && filter!.isNotEmpty;
-}
-
-/// View options used by the workers page renderer.
-class WorkersPageOptions {
-  /// Creates worker page options with optional overrides.
-  const WorkersPageOptions({this.flashMessage, this.errorMessage, this.scope});
-
-  /// Optional flash message for the UI.
-  final String? flashMessage;
-
-  /// Optional error message for the UI.
-  final String? errorMessage;
-
-  /// Optional worker scope filter.
-  final String? scope;
-
-  /// Whether a non-empty flash message is set.
-  bool get hasFlash => flashMessage != null && flashMessage!.isNotEmpty;
-
-  /// Whether a non-empty error message is set.
-  bool get hasError => errorMessage != null && errorMessage!.isNotEmpty;
-
-  /// Whether a non-empty scope value is set.
-  bool get hasScope => scope != null && scope!.isNotEmpty;
-}
+export 'package:stem_dashboard/src/ui/options.dart';
 
 /// Builds the HTML for the specified dashboard [page].
 String buildPageContent({
@@ -75,520 +20,12 @@ String buildPageContent({
 }) {
   switch (page) {
     case DashboardPage.overview:
-      return _overviewContent(queues, workers, throughput);
+      return buildOverviewContent(queues, workers, throughput);
     case DashboardPage.tasks:
-      return _tasksContent(queues, tasksOptions);
+      return buildTasksContent(queues, tasksOptions);
     case DashboardPage.events:
-      return _eventsContent(events);
+      return buildEventsContent(events);
     case DashboardPage.workers:
-      return _workersContent(workers, queues, workersOptions);
-  }
-}
-
-String _overviewContent(
-  List<QueueSummary> queues,
-  List<WorkerStatus> workers,
-  DashboardThroughput? throughput,
-) {
-  final totalPending = queues.fold<int>(
-    0,
-    (total, summary) => total + summary.pending,
-  );
-  final totalInflight = queues.fold<int>(
-    0,
-    (total, summary) => total + summary.inflight,
-  );
-  final totalDead = queues.fold<int>(
-    0,
-    (total, summary) => total + summary.deadLetters,
-  );
-  final activeWorkers = workers.length;
-  final busiest = List<QueueSummary>.of(
-    queues,
-  )..sort((a, b) => (b.pending + b.inflight).compareTo(a.pending + a.inflight));
-  final topQueues = busiest.take(5).toList();
-
-  final processedPerMin = throughput?.processedPerMinute ?? 0;
-  final enqueuedPerMin = throughput?.enqueuedPerMinute ?? 0;
-  final throughputHint = throughput == null
-      ? 'Waiting for another snapshot to estimate rate.'
-      : 'Net change over the last ${throughput.interval.inSeconds}s.';
-
-  return '''
-<section class="page-header">
-  <h1>Overview</h1>
-  <p class="page-subtitle">
-    Live snapshot of Stem throughput and worker health. Metrics refresh with every navigation and Turbo frame update.
-  </p>
-</section>
-
-<section class="cards">
-  ${_metricCard('Backlog (lag)', _formatInt(totalPending), 'Undelivered tasks waiting across all queues.')}
-  ${_metricCard('Processing', _formatInt(totalInflight), 'Active envelopes currently being executed.')}
-  ${_metricCard('Processed / min', _formatRate(processedPerMin), throughputHint)}
-  ${_metricCard('Enqueued / min', _formatRate(enqueuedPerMin), throughputHint)}
-  ${_metricCard('Dead letters', _formatInt(totalDead), 'Items held in dead letter queues.')}
-  ${_metricCard('Active workers', _formatInt(activeWorkers), 'Workers that published heartbeats within the retention window.')}
-</section>
-
-<section class="table-card">
-  <table>
-    <thead>
-      <tr>
-        <th scope="col">Queue</th>
-        <th scope="col">Pending</th>
-        <th scope="col">In-flight</th>
-        <th scope="col">Dead letters</th>
-      </tr>
-    </thead>
-    <tbody>
-      ${topQueues.isEmpty ? _emptyQueuesRow('No queues detected yet.') : topQueues.map(_queueTableRow).join()}
-    </tbody>
-  </table>
-</section>
-''';
-}
-
-String _tasksContent(List<QueueSummary> queues, TasksPageOptions options) {
-  var filtered =
-      options.hasFilter
-            ? queues
-                  .where(
-                    (summary) => summary.queue.toLowerCase().contains(
-                      options.filter!.toLowerCase(),
-                    ),
-                  )
-                  .toList()
-            : List<QueueSummary>.of(queues)
-        ..sort((a, b) => _compareQueues(a, b, options));
-  if (options.descending) {
-    filtered = filtered.reversed.toList();
-  }
-
-  final totalQueues = filtered.length;
-  final dlqTotal = filtered.fold<int>(
-    0,
-    (total, summary) => total + summary.deadLetters,
-  );
-
-  return '''
-<section class="page-header">
-  <h1>Tasks</h1>
-  <p class="page-subtitle">
-    Queue depth, inflight counts, and dead letter insight. Replay controls arrive alongside Turbo stream actions.
-  </p>
-</section>
-
-${_renderTasksAlert(options)}
-
-<section class="cards">
-  ${_metricCard('Tracked queues', _formatInt(totalQueues), 'Queues discovered via Redis stream prefixes.')}
-  ${_metricCard('Dead letter size', _formatInt(dlqTotal), 'Aggregate items across all dead letter queues.')}
-</section>
-
-<form class="filter-form" action="/tasks" method="get" data-turbo-frame="dashboard-content">
-  <label class="filter-label" for="queue-filter">Queue filter</label>
-  <input id="queue-filter" name="queue" value="${_escapeHtml(options.filter ?? '')}" placeholder="default" />
-  <input type="hidden" name="sort" value="${options.sortKey}" />
-  <input type="hidden" name="direction" value="${options.descending ? 'desc' : 'asc'}" />
-  <button type="submit">Apply</button>
-  ${options.hasFilter ? '<a class="clear-filter" href="/tasks" data-turbo-frame="dashboard-content">Clear</a>' : ''}
-</form>
-
-<section class="table-card">
-  <table>
-    <thead>
-      <tr>
-        <th scope="col">${_sortableHeader('Queue', 'queue', options)}</th>
-        <th scope="col">${_sortableHeader('Pending', 'pending', options)}</th>
-        <th scope="col">${_sortableHeader('In-flight', 'inflight', options)}</th>
-        <th scope="col">${_sortableHeader('Dead letters', 'dead', options)}</th>
-      </tr>
-    </thead>
-    <tbody>
-      ${filtered.isEmpty ? _emptyQueuesRow('No streams found for the configured namespace.') : filtered.map(_queueTableRow).join()}
-    </tbody>
-  </table>
-</section>
-
-<section class="event-feed" style="margin-top: 28px;">
-  <div class="enqueue-card">
-    <h3>Ad-hoc enqueue</h3>
-    <form class="enqueue-form" action="/tasks/enqueue" method="post" data-turbo-frame="dashboard-content">
-      <div class="form-grid">
-        <label>
-          Queue
-          <input name="queue" value="${_escapeHtml(options.filter ?? '')}" placeholder="default" required />
-        </label>
-        <label>
-          Task name
-          <input name="task" placeholder="example.send_email" required />
-        </label>
-        <label>
-          Priority
-          <input name="priority" type="number" min="0" max="9" value="0" />
-        </label>
-        <label>
-          Max retries
-          <input name="maxRetries" type="number" min="0" value="0" />
-        </label>
-        <label class="payload-label">
-          Payload (JSON object)
-          <textarea name="payload" rows="4" placeholder='{"userId":123}'></textarea>
-        </label>
-      </div>
-      <button type="submit">Queue Task</button>
-    </form>
-  </div>
-</section>
-''';
-}
-
-String _formatRate(double value) {
-  if (value <= 0) return '0';
-  if (value < 1) return value.toStringAsFixed(2);
-  return _numberFormat.format(value.round());
-}
-
-String _eventsContent(List<DashboardEvent> events) {
-  final items = events.isEmpty
-      ? '''
-        <div class="event-item" id="event-log-placeholder">
-          <h3>No events captured yet</h3>
-          <p class="muted">
-            Configure the dashboard event bridge to stream Stem signals (enqueue, start, retry, completion) into Redis.
-            Once connected, updates will appear here automatically via Turbo Streams.
-          </p>
-        </div>
-      '''
-      : events.map(renderEventItem).join();
-
-  return '''
-<section class="page-header">
-  <h1>Events</h1>
-  <p class="page-subtitle">
-    Task lifecycle, retry, and worker log events stream into this feed. Turbo handles incremental updates without full-page reloads.
-  </p>
-</section>
-
-<section class="event-feed" id="event-log">
-  $items
-</section>
-''';
-}
-
-String _workersContent(
-  List<WorkerStatus> workers,
-  List<QueueSummary> queues,
-  WorkersPageOptions options,
-) {
-  final healthyWorkers = workers.where((worker) {
-    return worker.age <= const Duration(minutes: 2);
-  }).length;
-
-  final busy = workers.where((worker) => worker.inflight > 0).length;
-  final queueMap = {for (final summary in queues) summary.queue: summary};
-
-  return '''
-<section class="page-header">
-  <h1>Workers</h1>
-  <p class="page-subtitle">
-    Heartbeat health, queue assignments, and in-flight counts. Issue control plane commands and replay dead letters inline.
-  </p>
-</section>
-
-${_renderWorkersAlert(options)}
-
-<section class="cards">
-  ${_metricCard('Healthy workers', _formatInt(healthyWorkers), 'Heartbeats received within the last two minutes.')}
-  ${_metricCard('Busy workers', _formatInt(busy), 'Workers currently processing at least one task.')}
-  ${_metricCard('Isolates in use', _formatInt(_totalIsolates(workers)), 'Sum of worker isolates across the cluster.')}
-</section>
-
-<section class="table-card">
-  <table>
-    <thead>
-      <tr>
-        <th scope="col">Worker</th>
-        <th scope="col">Queues</th>
-        <th scope="col">Inflight</th>
-        <th scope="col">Last heartbeat</th>
-        <th scope="col">Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      ${workers.isEmpty ? '''
-              <tr>
-                <td colspan="5" class="muted">No heartbeats detected for namespace "${workers.isEmpty ? 'stem' : workers.first.namespace}".</td>
-              </tr>
-            ''' : workers.map(_workerRow).join()}
-    </tbody>
-  </table>
-</section>
-
-${_clusterControls()}
-
-${_queueRecoverySection(queueMap)}
-''';
-}
-
-String _queueTableRow(QueueSummary summary) {
-  return '''
-<tr class="queue-row" data-queue-row="${summary.queue}">
-  <td><span class="pill">${summary.queue}</span></td>
-  <td>${_formatInt(summary.pending)}</td>
-  <td>${_formatInt(summary.inflight)}</td>
-  <td>${_formatInt(summary.deadLetters)}</td>
-</tr>
-<tr class="queue-detail" data-queue-detail="${summary.queue}">
-  <td colspan="4">
-    <div class="detail-grid">
-      <div><span class="muted">Pending</span> ${_formatInt(summary.pending)}</div>
-      <div><span class="muted">In-flight</span> ${_formatInt(summary.inflight)}</div>
-      <div><span class="muted">Dead letters</span> ${_formatInt(summary.deadLetters)}</div>
-      <div class="muted">Detailed DLQ previews render here once the replay control is wired.</div>
-    </div>
-  </td>
-</tr>
-''';
-}
-
-String _workerRow(WorkerStatus status) {
-  final queues = status.queues.isEmpty
-      ? '<span class="muted">—</span>'
-      : status.queues
-            .map((queue) => '<span class="pill">${queue.name}</span>')
-            .join(' ');
-  return '''
-<tr>
-  <td>${status.workerId}</td>
-  <td>$queues</td>
-  <td>${_formatInt(status.inflight)}</td>
-  <td class="muted">${_formatRelative(status.timestamp)}</td>
-  <td>
-    <div class="action-bar">
-      ${_workerActionButton('Ping', 'ping', status.workerId)}
-      ${_workerActionButton('Pause', 'pause', status.workerId)}
-      ${_workerActionButton('Shutdown', 'shutdown', status.workerId)}
-    </div>
-  </td>
-</tr>
-''';
-}
-
-String _workerActionButton(String label, String action, String workerId) {
-  return '''
-<form class="inline-form" action="/workers/control" method="post" data-turbo-frame="dashboard-content">
-  <input type="hidden" name="worker" value="${_escapeHtml(workerId)}" />
-  <input type="hidden" name="action" value="${_escapeHtml(action)}" />
-  <button type="submit" class="ghost-button">$label</button>
-</form>
-''';
-}
-
-String _clusterControls() {
-  return '''
-<section class="control-panel">
-  <h2 class="section-heading">Cluster controls</h2>
-  <div class="action-bar">
-    ${_clusterActionButton('Ping all workers', 'ping')}
-    ${_clusterActionButton('Pause all workers', 'pause')}
-    ${_clusterActionButton('Shutdown all workers', 'shutdown')}
-  </div>
-</section>
-''';
-}
-
-String _clusterActionButton(String label, String action) {
-  return '''
-<form class="inline-form" action="/workers/control" method="post" data-turbo-frame="dashboard-content">
-  <input type="hidden" name="worker" value="*" />
-  <input type="hidden" name="action" value="${_escapeHtml(action)}" />
-  <button type="submit" class="ghost-button">$label</button>
-</form>
-''';
-}
-
-String _queueRecoverySection(Map<String, QueueSummary> queues) {
-  if (queues.isEmpty) return '';
-  final rows = queues.values.toList()
-    ..sort((a, b) => a.queue.compareTo(b.queue));
-  return '''
-<section class="table-card" style="margin-top: 28px;">
-  <table>
-    <thead>
-      <tr>
-        <th scope="col">Queue</th>
-        <th scope="col">Pending</th>
-        <th scope="col">Dead letters</th>
-        <th scope="col">Replay</th>
-      </tr>
-    </thead>
-    <tbody>
-      ${rows.map(_queueRecoveryRow).join()}
-    </tbody>
-  </table>
-</section>
-''';
-}
-
-String _queueRecoveryRow(QueueSummary summary) {
-  final limitDefault = summary.deadLetters <= 0
-      ? 50
-      : summary.deadLetters.clamp(1, 50);
-  final action = summary.deadLetters == 0
-      ? '<span class="muted">No dead letters</span>'
-      : '''
-      <form class="inline-form" action="/queues/replay" method="post" data-turbo-frame="dashboard-content">
-        <input type="hidden" name="queue" value="${_escapeHtml(summary.queue)}" />
-        <input type="hidden" name="limit" value="$limitDefault" />
-        <button type="submit" class="ghost-button">Replay</button>
-      </form>
-    ''';
-  return '''
-<tr>
-  <td><span class="pill">${_escapeHtml(summary.queue)}</span></td>
-  <td>${_formatInt(summary.pending)}</td>
-  <td>${_formatInt(summary.deadLetters)}</td>
-  <td>$action</td>
-</tr>
-''';
-}
-
-String _metricCard(String title, String value, String caption) {
-  return '''
-<article class="card">
-  <div class="card-title">$title</div>
-  <div class="card-value">$value</div>
-  <p class="card-caption">$caption</p>
-</article>
-''';
-}
-
-String _emptyQueuesRow(String message) {
-  return '''
-<tr>
-  <td colspan="4" class="muted">$message</td>
-</tr>
-''';
-}
-
-String _renderTasksAlert(TasksPageOptions options) {
-  String? message;
-  var type = 'success';
-  switch (options.flashKey) {
-    case 'queued':
-      message = 'Task enqueued successfully.';
-  }
-  switch (options.errorKey) {
-    case 'missing-fields':
-      message = 'Queue and task name are required.';
-      type = 'error';
-    case 'invalid-payload':
-      message = 'Payload must be valid JSON describing an object.';
-      type = 'error';
-    case 'enqueue-failed':
-      message =
-          'Failed to enqueue the task. Check the dashboard logs for details.';
-      type = 'error';
-  }
-
-  if (message == null) return '';
-  return '<div class="flash $type">${_escapeHtml(message)}</div>';
-}
-
-String _renderWorkersAlert(WorkersPageOptions options) {
-  if (options.hasError) {
-    final scope = options.hasScope
-        ? '<div class="muted">Target: ${_escapeHtml(options.scope!)}.</div>'
-        : '';
-    return '''
-<div class="flash error">
-  ${_escapeHtml(options.errorMessage!)}
-  $scope
-</div>
-''';
-  }
-  if (options.hasFlash) {
-    final scope = options.hasScope
-        ? '<div class="muted">Target: ${_escapeHtml(options.scope!)}.</div>'
-        : '';
-    return '''
-<div class="flash success">
-  ${_escapeHtml(options.flashMessage!)}
-  $scope
-</div>
-''';
-  }
-  return '';
-}
-
-int _compareQueues(QueueSummary a, QueueSummary b, TasksPageOptions options) {
-  switch (options.sortKey) {
-    case 'pending':
-      return a.pending.compareTo(b.pending);
-    case 'inflight':
-      return a.inflight.compareTo(b.inflight);
-    case 'dead':
-      return a.deadLetters.compareTo(b.deadLetters);
-    case 'queue':
-    default:
-      return a.queue.toLowerCase().compareTo(b.queue.toLowerCase());
-  }
-}
-
-String _sortableHeader(String label, String key, TasksPageOptions options) {
-  final isActive = options.sortKey == key;
-  final descendingNext = isActive ? !options.descending : key != 'queue';
-  final params = <String, String>{
-    'sort': key,
-    'direction': descendingNext ? 'desc' : 'asc',
-  };
-  if (options.hasFilter) {
-    params['queue'] = options.filter!;
-  }
-  final query = _buildQuery(params);
-  final indicator = isActive ? (options.descending ? '&darr;' : '&uarr;') : '';
-  final classes = isActive ? 'sort-link active' : 'sort-link';
-  return '<a class="$classes" href="/tasks?$query" data-turbo-frame="dashboard-content">$label $indicator</a>';
-}
-
-String _buildQuery(Map<String, String> params) {
-  return params.entries
-      .map(
-        (entry) =>
-            '${Uri.encodeQueryComponent(entry.key)}=${Uri.encodeQueryComponent(entry.value)}',
-      )
-      .join('&');
-}
-
-String _escapeHtml(String value) {
-  return value
-      .replaceAll('&', '&amp;')
-      .replaceAll('<', '&lt;')
-      .replaceAll('>', '&gt;')
-      .replaceAll('"', '&quot;')
-      .replaceAll("'", '&#39;');
-}
-
-int _totalIsolates(List<WorkerStatus> workers) {
-  return workers.fold<int>(0, (total, status) => total + status.isolateCount);
-}
-
-String _formatInt(int value) => _numberFormat.format(value);
-
-String _formatRelative(DateTime timestamp) {
-  final now = stemNow().toUtc();
-  final diff = now.difference(timestamp.toUtc());
-  if (diff < const Duration(seconds: 30)) return 'just now';
-  if (diff < const Duration(minutes: 1)) {
-    return '${diff.inSeconds}s ago';
-  }
-  if (diff < const Duration(hours: 1)) {
-    return '${diff.inMinutes}m ago';
-  }
-  if (diff < const Duration(days: 1)) {
-    return '${diff.inHours}h ago';
+      return buildWorkersContent(workers, queues, workersOptions);
   }
-  return '${diff.inDays}d ago';
 }
diff --git a/packages/dashboard/lib/src/ui/events.dart b/packages/dashboard/lib/src/ui/events.dart
new file mode 100644
index 0000000..98b0e16
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/events.dart
@@ -0,0 +1,33 @@
+// Public helper functions in this file are intentionally undocumented to keep
+// UI template files lightweight.
+// ignore_for_file: public_member_api_docs
+
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/event_templates.dart';
+
+String buildEventsContent(List<DashboardEvent> events) {
+  final items = events.isEmpty
+      ? '''
+        <div class="event-item" id="event-log-placeholder">
+          <h3>No events captured yet</h3>
+          <p class="muted">
+            Configure the dashboard event bridge to stream Stem signals (enqueue, start, retry, completion) into Redis.
+            Once connected, updates will appear here automatically via Turbo Streams.
+          </p>
+        </div>
+      '''
+      : events.map(renderEventItem).join();
+
+  return '''
+<section class="page-header">
+  <h1>Events</h1>
+  <p class="page-subtitle">
+    Task lifecycle, retry, and worker log events stream into this feed. Turbo handles incremental updates without full-page reloads.
+  </p>
+</section>
+
+<section class="event-feed" id="event-log">
+  $items
+</section>
+''';
+}
diff --git a/packages/dashboard/lib/src/ui/options.dart b/packages/dashboard/lib/src/ui/options.dart
new file mode 100644
index 0000000..de523c5
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/options.dart
@@ -0,0 +1,53 @@
+/// View options used by the tasks page renderer.
+class TasksPageOptions {
+  /// Creates task page options with optional overrides.
+  const TasksPageOptions({
+    this.sortKey = 'queue',
+    this.descending = false,
+    this.filter,
+    this.flashKey,
+    this.errorKey,
+  });
+
+  /// Sort key used for queue ordering.
+  final String sortKey;
+
+  /// Whether sorting should be descending.
+  final bool descending;
+
+  /// Optional queue filter text.
+  final String? filter;
+
+  /// Optional flash message key for UI alerts.
+  final String? flashKey;
+
+  /// Optional error message key for UI alerts.
+  final String? errorKey;
+
+  /// Whether a non-empty filter value is set.
+  bool get hasFilter => filter != null && filter!.isNotEmpty;
+}
+
+/// View options used by the workers page renderer.
+class WorkersPageOptions {
+  /// Creates worker page options with optional overrides.
+  const WorkersPageOptions({this.flashMessage, this.errorMessage, this.scope});
+
+  /// Optional flash message for the UI.
+  final String? flashMessage;
+
+  /// Optional error message for the UI.
+  final String? errorMessage;
+
+  /// Optional worker scope filter.
+  final String? scope;
+
+  /// Whether a non-empty flash message is set.
+  bool get hasFlash => flashMessage != null && flashMessage!.isNotEmpty;
+
+  /// Whether a non-empty error message is set.
+  bool get hasError => errorMessage != null && errorMessage!.isNotEmpty;
+
+  /// Whether a non-empty scope value is set.
+  bool get hasScope => scope != null && scope!.isNotEmpty;
+}
diff --git a/packages/dashboard/lib/src/ui/overview.dart b/packages/dashboard/lib/src/ui/overview.dart
new file mode 100644
index 0000000..0926312
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/overview.dart
@@ -0,0 +1,70 @@
+// Public helper functions in this file are intentionally undocumented to keep
+// UI template files lightweight.
+// ignore_for_file: public_member_api_docs
+
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/shared.dart';
+
+String buildOverviewContent(
+  List<QueueSummary> queues,
+  List<WorkerStatus> workers,
+  DashboardThroughput? throughput,
+) {
+  final totalPending = queues.fold<int>(
+    0,
+    (total, summary) => total + summary.pending,
+  );
+  final totalInflight = queues.fold<int>(
+    0,
+    (total, summary) => total + summary.inflight,
+  );
+  final totalDead = queues.fold<int>(
+    0,
+    (total, summary) => total + summary.deadLetters,
+  );
+  final activeWorkers = workers.length;
+  final busiest = List<QueueSummary>.of(
+    queues,
+  )..sort((a, b) => (b.pending + b.inflight).compareTo(a.pending + a.inflight));
+  final topQueues = busiest.take(5).toList();
+
+  final processedPerMin = throughput?.processedPerMinute ?? 0;
+  final enqueuedPerMin = throughput?.enqueuedPerMinute ?? 0;
+  final throughputHint = throughput == null
+      ? 'Waiting for another snapshot to estimate rate.'
+      : 'Net change over the last ${throughput.interval.inSeconds}s.';
+
+  return '''
+<section class="page-header">
+  <h1>Overview</h1>
+  <p class="page-subtitle">
+    Live snapshot of Stem throughput and worker health. Metrics refresh with every navigation and Turbo frame update.
+  </p>
+</section>
+
+<section class="cards">
+  ${buildMetricCard('Backlog (lag)', formatInt(totalPending), 'Undelivered tasks waiting across all queues.')}
+  ${buildMetricCard('Processing', formatInt(totalInflight), 'Active envelopes currently being executed.')}
+  ${buildMetricCard('Processed / min', formatRate(processedPerMin), throughputHint)}
+  ${buildMetricCard('Enqueued / min', formatRate(enqueuedPerMin), throughputHint)}
+  ${buildMetricCard('Dead letters', formatInt(totalDead), 'Items held in dead letter queues.')}
+  ${buildMetricCard('Active workers', formatInt(activeWorkers), 'Workers that published heartbeats within the retention window.')}
+</section>
+
+<section class="table-card">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Queue</th>
+        <th scope="col">Pending</th>
+        <th scope="col">In-flight</th>
+        <th scope="col">Dead letters</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${topQueues.isEmpty ? buildEmptyQueuesRow('No queues detected yet.') : topQueues.map(buildQueueTableRow).join()}
+    </tbody>
+  </table>
+</section>
+''';
+}
diff --git a/packages/dashboard/lib/src/ui/shared.dart b/packages/dashboard/lib/src/ui/shared.dart
new file mode 100644
index 0000000..8b9cddb
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/shared.dart
@@ -0,0 +1,85 @@
+import 'package:intl/intl.dart';
+import 'package:stem/stem.dart' show stemNow;
+// Public helper functions in this file are intentionally undocumented to keep
+// UI template files lightweight.
+// ignore_for_file: public_member_api_docs
+
+import 'package:stem_dashboard/src/services/models.dart';
+
+final dashboardNumberFormat = NumberFormat.decimalPattern();
+
+String buildQueueTableRow(QueueSummary summary) {
+  return '''
+<tr class="queue-row" data-queue-row="${summary.queue}">
+  <td><span class="pill">${summary.queue}</span></td>
+  <td>${formatInt(summary.pending)}</td>
+  <td>${formatInt(summary.inflight)}</td>
+  <td>${formatInt(summary.deadLetters)}</td>
+</tr>
+<tr class="queue-detail" data-queue-detail="${summary.queue}">
+  <td colspan="4">
+    <div class="detail-grid">
+      <div><span class="muted">Pending</span> ${formatInt(summary.pending)}</div>
+      <div><span class="muted">In-flight</span> ${formatInt(summary.inflight)}</div>
+      <div><span class="muted">Dead letters</span> ${formatInt(summary.deadLetters)}</div>
+      <div class="muted">Detailed DLQ previews render here once the replay control is wired.</div>
+    </div>
+  </td>
+</tr>
+''';
+}
+
+String buildMetricCard(String title, String value, String caption) {
+  return '''
+<article class="card">
+  <div class="card-title">$title</div>
+  <div class="card-value">$value</div>
+  <p class="card-caption">$caption</p>
+</article>
+''';
+}
+
+String buildEmptyQueuesRow(String message) {
+  return '''
+<tr>
+  <td colspan="4" class="muted">$message</td>
+</tr>
+''';
+}
+
+String escapeHtml(String value) {
+  return value
+      .replaceAll('&', '&amp;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;')
+      .replaceAll('"', '&quot;')
+      .replaceAll("'", '&#39;');
+}
+
+int totalIsolates(List<WorkerStatus> workers) {
+  return workers.fold<int>(0, (total, status) => total + status.isolateCount);
+}
+
+String formatInt(int value) => dashboardNumberFormat.format(value);
+
+String formatRate(double value) {
+  if (value <= 0) return '0';
+  if (value < 1) return value.toStringAsFixed(2);
+  return dashboardNumberFormat.format(value.round());
+}
+
+String formatRelative(DateTime timestamp) {
+  final now = stemNow().toUtc();
+  final diff = now.difference(timestamp.toUtc());
+  if (diff < const Duration(seconds: 30)) return 'just now';
+  if (diff < const Duration(minutes: 1)) {
+    return '${diff.inSeconds}s ago';
+  }
+  if (diff < const Duration(hours: 1)) {
+    return '${diff.inMinutes}m ago';
+  }
+  if (diff < const Duration(days: 1)) {
+    return '${diff.inHours}h ago';
+  }
+  return '${diff.inDays}d ago';
+}
diff --git a/packages/dashboard/lib/src/ui/tasks.dart b/packages/dashboard/lib/src/ui/tasks.dart
new file mode 100644
index 0000000..b535768
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/tasks.dart
@@ -0,0 +1,164 @@
+// HTML template strings are kept on single lines for readability.
+// ignore_for_file: lines_longer_than_80_chars, public_member_api_docs
+
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/options.dart';
+import 'package:stem_dashboard/src/ui/shared.dart';
+
+String buildTasksContent(List<QueueSummary> queues, TasksPageOptions options) {
+  var filtered =
+      options.hasFilter
+            ? queues
+                  .where(
+                    (summary) => summary.queue.toLowerCase().contains(
+                      options.filter!.toLowerCase(),
+                    ),
+                  )
+                  .toList()
+            : List<QueueSummary>.of(queues)
+        ..sort((a, b) => compareQueues(a, b, options));
+  if (options.descending) {
+    filtered = filtered.reversed.toList();
+  }
+
+  final totalQueues = filtered.length;
+  final dlqTotal = filtered.fold<int>(
+    0,
+    (total, summary) => total + summary.deadLetters,
+  );
+
+  return '''
+<section class="page-header">
+  <h1>Tasks</h1>
+  <p class="page-subtitle">
+    Queue depth, inflight counts, and dead letter insight. Replay controls arrive alongside Turbo stream actions.
+  </p>
+</section>
+
+${renderTasksAlert(options)}
+
+<section class="cards">
+  ${buildMetricCard('Tracked queues', formatInt(totalQueues), 'Queues discovered via Redis stream prefixes.')}
+  ${buildMetricCard('Dead letter size', formatInt(dlqTotal), 'Aggregate items across all dead letter queues.')}
+</section>
+
+<form class="filter-form" action="/tasks" method="get" data-turbo-frame="dashboard-content">
+  <label class="filter-label" for="queue-filter">Queue filter</label>
+  <input id="queue-filter" name="queue" value="${escapeHtml(options.filter ?? '')}" placeholder="default" />
+  <input type="hidden" name="sort" value="${options.sortKey}" />
+  <input type="hidden" name="direction" value="${options.descending ? 'desc' : 'asc'}" />
+  <button type="submit">Apply</button>
+  ${options.hasFilter ? '<a class="clear-filter" href="/tasks" data-turbo-frame="dashboard-content">Clear</a>' : ''}
+</form>
+
+<section class="table-card">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">${buildSortableHeader('Queue', 'queue', options)}</th>
+        <th scope="col">${buildSortableHeader('Pending', 'pending', options)}</th>
+        <th scope="col">${buildSortableHeader('In-flight', 'inflight', options)}</th>
+        <th scope="col">${buildSortableHeader('Dead letters', 'dead', options)}</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${filtered.isEmpty ? buildEmptyQueuesRow('No streams found for the configured namespace.') : filtered.map(buildQueueTableRow).join()}
+    </tbody>
+  </table>
+</section>
+
+<section class="event-feed" style="margin-top: 28px;">
+  <div class="enqueue-card">
+    <h3>Ad-hoc enqueue</h3>
+    <form class="enqueue-form" action="/tasks/enqueue" method="post" data-turbo-frame="dashboard-content">
+      <div class="form-grid">
+        <label>
+          Queue
+          <input name="queue" value="${escapeHtml(options.filter ?? '')}" placeholder="default" required />
+        </label>
+        <label>
+          Task name
+          <input name="task" placeholder="example.send_email" required />
+        </label>
+        <label>
+          Priority
+          <input name="priority" type="number" min="0" max="9" value="0" />
+        </label>
+        <label>
+          Max retries
+          <input name="maxRetries" type="number" min="0" value="0" />
+        </label>
+        <label class="payload-label">
+          Payload (JSON object)
+          <textarea name="payload" rows="4" placeholder='{"userId":123}'></textarea>
+        </label>
+      </div>
+      <button type="submit">Queue Task</button>
+    </form>
+  </div>
+</section>
+''';
+}
+
+String renderTasksAlert(TasksPageOptions options) {
+  String? message;
+  var type = 'success';
+  switch (options.flashKey) {
+    case 'queued':
+      message = 'Task enqueued successfully.';
+  }
+  switch (options.errorKey) {
+    case 'missing-fields':
+      message = 'Queue and task name are required.';
+      type = 'error';
+    case 'invalid-payload':
+      message = 'Payload must be valid JSON describing an object.';
+      type = 'error';
+    case 'enqueue-failed':
+      message =
+          'Failed to enqueue the task. Check the dashboard logs for details.';
+      type = 'error';
+  }
+
+  if (message == null) return '';
+  return '<div class="flash $type">${escapeHtml(message)}</div>';
+}
+
+int compareQueues(QueueSummary a, QueueSummary b, TasksPageOptions options) {
+  switch (options.sortKey) {
+    case 'pending':
+      return a.pending.compareTo(b.pending);
+    case 'inflight':
+      return a.inflight.compareTo(b.inflight);
+    case 'dead':
+      return a.deadLetters.compareTo(b.deadLetters);
+    case 'queue':
+    default:
+      return a.queue.toLowerCase().compareTo(b.queue.toLowerCase());
+  }
+}
+
+String buildSortableHeader(String label, String key, TasksPageOptions options) {
+  final isActive = options.sortKey == key;
+  final descendingNext = isActive ? !options.descending : key != 'queue';
+  final params = <String, String>{
+    'sort': key,
+    'direction': descendingNext ? 'desc' : 'asc',
+  };
+  if (options.hasFilter) {
+    params['queue'] = options.filter!;
+  }
+  final query = buildQuery(params);
+  final indicator = isActive ? (options.descending ? '&darr;' : '&uarr;') : '';
+  final classes = isActive ? 'sort-link active' : 'sort-link';
+  return '<a class="$classes" href="/tasks?$query" data-turbo-frame="dashboard-content">$label $indicator</a>';
+}
+
+String buildQuery(Map<String, String> params) {
+  return params.entries
+      .map(
+        (entry) =>
+            '${Uri.encodeQueryComponent(entry.key)}=${Uri.encodeQueryComponent(entry.value)}',
+      )
+      .join('&');
+}
diff --git a/packages/dashboard/lib/src/ui/workers.dart b/packages/dashboard/lib/src/ui/workers.dart
new file mode 100644
index 0000000..2f4a840
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/workers.dart
@@ -0,0 +1,190 @@
+// Public helper functions in this file are intentionally undocumented to keep
+// UI template files lightweight.
+// ignore_for_file: public_member_api_docs
+
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/options.dart';
+import 'package:stem_dashboard/src/ui/shared.dart';
+
+String buildWorkersContent(
+  List<WorkerStatus> workers,
+  List<QueueSummary> queues,
+  WorkersPageOptions options,
+) {
+  final healthyWorkers = workers.where((worker) {
+    return worker.age <= const Duration(minutes: 2);
+  }).length;
+
+  final busy = workers.where((worker) => worker.inflight > 0).length;
+  final queueMap = {for (final summary in queues) summary.queue: summary};
+
+  return '''
+<section class="page-header">
+  <h1>Workers</h1>
+  <p class="page-subtitle">
+    Heartbeat health, queue assignments, and in-flight counts. Issue control plane commands and replay dead letters inline.
+  </p>
+</section>
+
+${renderWorkersAlert(options)}
+
+<section class="cards">
+  ${buildMetricCard('Healthy workers', formatInt(healthyWorkers), 'Heartbeats received within the last two minutes.')}
+  ${buildMetricCard('Busy workers', formatInt(busy), 'Workers currently processing at least one task.')}
+  ${buildMetricCard('Isolates in use', formatInt(totalIsolates(workers)), 'Sum of worker isolates across the cluster.')}
+</section>
+
+<section class="table-card">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Worker</th>
+        <th scope="col">Queues</th>
+        <th scope="col">Inflight</th>
+        <th scope="col">Last heartbeat</th>
+        <th scope="col">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${workers.isEmpty ? '''
+              <tr>
+                <td colspan="5" class="muted">No heartbeats detected for namespace "${workers.isEmpty ? 'stem' : workers.first.namespace}".</td>
+              </tr>
+            ''' : workers.map(buildWorkerRow).join()}
+    </tbody>
+  </table>
+</section>
+
+${buildClusterControls()}
+
+${buildQueueRecoverySection(queueMap)}
+''';
+}
+
+String buildWorkerRow(WorkerStatus status) {
+  final queues = status.queues.isEmpty
+      ? '<span class="muted">—</span>'
+      : status.queues
+            .map((queue) => '<span class="pill">${queue.name}</span>')
+            .join(' ');
+  return '''
+<tr>
+  <td>${status.workerId}</td>
+  <td>$queues</td>
+  <td>${formatInt(status.inflight)}</td>
+  <td class="muted">${formatRelative(status.timestamp)}</td>
+  <td>
+    <div class="action-bar">
+      ${buildWorkerActionButton('Ping', 'ping', status.workerId)}
+      ${buildWorkerActionButton('Pause', 'pause', status.workerId)}
+      ${buildWorkerActionButton('Shutdown', 'shutdown', status.workerId)}
+    </div>
+  </td>
+</tr>
+''';
+}
+
+String buildWorkerActionButton(String label, String action, String workerId) {
+  return '''
+<form class="inline-form" action="/workers/control" method="post" data-turbo-frame="dashboard-content">
+  <input type="hidden" name="worker" value="${escapeHtml(workerId)}" />
+  <input type="hidden" name="action" value="${escapeHtml(action)}" />
+  <button type="submit" class="ghost-button">$label</button>
+</form>
+''';
+}
+
+String buildClusterControls() {
+  return '''
+<section class="control-panel">
+  <h2 class="section-heading">Cluster controls</h2>
+  <div class="action-bar">
+    ${buildClusterActionButton('Ping all workers', 'ping')}
+    ${buildClusterActionButton('Pause all workers', 'pause')}
+    ${buildClusterActionButton('Shutdown all workers', 'shutdown')}
+  </div>
+</section>
+''';
+}
+
+String buildClusterActionButton(String label, String action) {
+  return '''
+<form class="inline-form" action="/workers/control" method="post" data-turbo-frame="dashboard-content">
+  <input type="hidden" name="worker" value="*" />
+  <input type="hidden" name="action" value="${escapeHtml(action)}" />
+  <button type="submit" class="ghost-button">$label</button>
+</form>
+''';
+}
+
+String buildQueueRecoverySection(Map<String, QueueSummary> queues) {
+  if (queues.isEmpty) return '';
+  final rows = queues.values.toList()
+    ..sort((a, b) => a.queue.compareTo(b.queue));
+  return '''
+<section class="table-card" style="margin-top: 28px;">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Queue</th>
+        <th scope="col">Pending</th>
+        <th scope="col">Dead letters</th>
+        <th scope="col">Replay</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${rows.map(buildQueueRecoveryRow).join()}
+    </tbody>
+  </table>
+</section>
+''';
+}
+
+String buildQueueRecoveryRow(QueueSummary summary) {
+  final limitDefault = summary.deadLetters <= 0
+      ? 50
+      : summary.deadLetters.clamp(1, 50);
+  final action = summary.deadLetters == 0
+      ? '<span class="muted">No dead letters</span>'
+      : '''
+      <form class="inline-form" action="/queues/replay" method="post" data-turbo-frame="dashboard-content">
+        <input type="hidden" name="queue" value="${escapeHtml(summary.queue)}" />
+        <input type="hidden" name="limit" value="$limitDefault" />
+        <button type="submit" class="ghost-button">Replay</button>
+      </form>
+    ''';
+  return '''
+<tr>
+  <td><span class="pill">${escapeHtml(summary.queue)}</span></td>
+  <td>${formatInt(summary.pending)}</td>
+  <td>${formatInt(summary.deadLetters)}</td>
+  <td>$action</td>
+</tr>
+''';
+}
+
+String renderWorkersAlert(WorkersPageOptions options) {
+  if (options.hasError) {
+    final scope = options.hasScope
+        ? '<div class="muted">Target: ${escapeHtml(options.scope!)}.</div>'
+        : '';
+    return '''
+<div class="flash error">
+  ${escapeHtml(options.errorMessage!)}
+  $scope
+</div>
+''';
+  }
+  if (options.hasFlash) {
+    final scope = options.hasScope
+        ? '<div class="muted">Target: ${escapeHtml(options.scope!)}.</div>'
+        : '';
+    return '''
+<div class="flash success">
+  ${escapeHtml(options.flashMessage!)}
+  $scope
+</div>
+''';
+  }
+  return '';
+}

From a72f7a975c5ecb0f3d06a62f9d006c1d1c2d6140 Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Tue, 24 Feb 2026 17:09:16 -0500
Subject: [PATCH 02/14] chore: update artisanal dependency to version 0.2.0 in
 multiple packages and add dashboard to workspace

---
 packages/dashboard/pubspec.yaml     | 14 +++-----------
 packages/stem_cli/pubspec.yaml      |  2 +-
 packages/stem_postgres/pubspec.yaml |  2 +-
 packages/stem_sqlite/pubspec.yaml   |  2 +-
 pubspec.yaml                        |  1 +
 5 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/dashboard/pubspec.yaml b/packages/dashboard/pubspec.yaml
index d702f2c..083a814 100644
--- a/packages/dashboard/pubspec.yaml
+++ b/packages/dashboard/pubspec.yaml
@@ -5,6 +5,7 @@ publish_to: "none"
 environment:
   sdk: ">=3.9.2 <4.0.0"
 
+resolution: workspace
 dependencies:
   intl: ^0.20.2
   meta: ^1.18.0
@@ -27,14 +28,5 @@ dev_dependencies:
 
 dependency_overrides:
   analyzer: ^10.0.1
-  stem:
-    path: ../stem
-  stem_cli:
-    path: ../stem_cli
-  stem_postgres:
-    path: ../stem_postgres
-  stem_redis:
-    path: ../stem_redis
-  stem_sqlite:
-    path: ../stem_sqlite
-  timezone: 0.11.0
+  artisanal: ^0.2.0
+
diff --git a/packages/stem_cli/pubspec.yaml b/packages/stem_cli/pubspec.yaml
index 132ded4..6740cfe 100644
--- a/packages/stem_cli/pubspec.yaml
+++ b/packages/stem_cli/pubspec.yaml
@@ -7,7 +7,7 @@ environment:
   sdk: ">=3.9.2 <4.0.0"
 
 dependencies:
-  artisanal: ^0.1.2
+  artisanal: ^0.2.0
   stem: ^0.1.0
   stem_redis: ^0.1.0
   stem_postgres: ^0.1.0
diff --git a/packages/stem_postgres/pubspec.yaml b/packages/stem_postgres/pubspec.yaml
index 7425ac2..5cc37d1 100644
--- a/packages/stem_postgres/pubspec.yaml
+++ b/packages/stem_postgres/pubspec.yaml
@@ -7,7 +7,7 @@ environment:
   sdk: ">=3.9.2 <4.0.0"
 
 dependencies:
-  artisanal: ^0.1.2
+  artisanal: ^0.2.0
   collection: ^1.19.1
   contextual: ^2.2.0
   ormed: ^0.1.0
diff --git a/packages/stem_sqlite/pubspec.yaml b/packages/stem_sqlite/pubspec.yaml
index d032ec9..2b00ebd 100644
--- a/packages/stem_sqlite/pubspec.yaml
+++ b/packages/stem_sqlite/pubspec.yaml
@@ -7,7 +7,7 @@ environment:
   sdk: ^3.9.2
 
 dependencies:
-  artisanal: ^0.1.2
+  artisanal: ^0.2.0
   collection: ^1.19.1
   contextual: ^2.2.0
   meta: ^1.18.0
diff --git a/pubspec.yaml b/pubspec.yaml
index d1dc512..218878a 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -4,6 +4,7 @@ environment:
   sdk: ">=3.9.2 <4.0.0"
 workspace:
   - packages/stem
+  - packages/dashboard
   - packages/stem_builder
   - packages/stem_sqlite
   - packages/stem_memory

From 52827bbfbc1fa8f90ccdd81ff1e9b989a63c8ad9 Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 10:05:12 -0500
Subject: [PATCH 03/14] feat(worker): enrich span attributes and sign retry
 republishes

---
 packages/stem/lib/src/worker/worker.dart | 218 ++++++++++++++++++++---
 1 file changed, 194 insertions(+), 24 deletions(-)

diff --git a/packages/stem/lib/src/worker/worker.dart b/packages/stem/lib/src/worker/worker.dart
index 1889c5b..d7ccc05 100644
--- a/packages/stem/lib/src/worker/worker.dart
+++ b/packages/stem/lib/src/worker/worker.dart
@@ -720,9 +720,14 @@ class Worker {
     final envelope = delivery.envelope;
     final tracer = StemTracer.instance;
     final parentContext = tracer.extractTraceContext(envelope.headers);
-    final spanAttributes = <String, Object>{
-      'stem.task': envelope.name,
-      'stem.queue': envelope.queue,
+    final baseSpanAttributes = _deliverySpanAttributes(envelope);
+    final consumeSpanAttributes = <String, Object>{
+      ...baseSpanAttributes,
+      'stem.span.phase': 'consume',
+    };
+    final executeSpanAttributes = <String, Object>{
+      ...baseSpanAttributes,
+      'stem.span.phase': 'execute',
     };
 
     await tracer.trace(
@@ -987,7 +992,7 @@ class Worker {
                 decodedArgs,
               ),
             ),
-            attributes: spanAttributes,
+            attributes: executeSpanAttributes,
           );
 
           _cancelLeaseTimer(delivery.receipt);
@@ -1121,7 +1126,7 @@ class Worker {
       },
       context: parentContext,
       spanKind: dotel.SpanKind.consumer,
-      attributes: spanAttributes,
+      attributes: consumeSpanAttributes,
     );
   }
 
@@ -2027,14 +2032,13 @@ class Worker {
         retryPolicy,
       );
       final nextRunAt = stemNow().add(delay);
-      await broker.nack(delivery, requeue: false);
-      await broker.publish(
-        envelope.copyWith(
-          attempt: envelope.attempt + 1,
-          maxRetries: maxRetries,
-          notBefore: stemNow().add(delay),
-        ),
+      final retryEnvelope = envelope.copyWith(
+        attempt: envelope.attempt + 1,
+        maxRetries: maxRetries,
+        notBefore: nextRunAt,
       );
+      await broker.nack(delivery, requeue: false);
+      await _publishWithOptionalSigning(retryEnvelope);
       final retriedMeta = _statusMeta(
         envelope,
         resultEncoder,
@@ -2226,15 +2230,14 @@ class Worker {
       updatedMeta['stem.retryPolicy'] = request.retryPolicy!.toJson();
     }
 
-    await broker.nack(delivery, requeue: false);
-    await broker.publish(
-      envelope.copyWith(
-        attempt: envelope.attempt + 1,
-        maxRetries: maxRetries,
-        notBefore: notBefore,
-        meta: updatedMeta,
-      ),
+    final retryEnvelope = envelope.copyWith(
+      attempt: envelope.attempt + 1,
+      maxRetries: maxRetries,
+      notBefore: notBefore,
+      meta: updatedMeta,
     );
+    await broker.nack(delivery, requeue: false);
+    await _publishWithOptionalSigning(retryEnvelope);
 
     final retriedMeta = _statusMeta(
       envelope,
@@ -2296,10 +2299,9 @@ class Worker {
     required Duration backoff,
     Map<String, Object?> extra = const {},
   }) async {
+    final retryEnvelope = envelope.copyWith(notBefore: stemNow().add(backoff));
     await broker.nack(delivery, requeue: false);
-    await broker.publish(
-      envelope.copyWith(notBefore: stemNow().add(backoff)),
-    );
+    await _publishWithOptionalSigning(retryEnvelope);
     final data = <String, Object?>{
       ...extra,
       if (!extra.containsKey('retryAfterMs'))
@@ -2320,6 +2322,16 @@ class Worker {
     );
   }
 
+  Future<void> _publishWithOptionalSigning(Envelope envelope) async {
+    final payloadSigner = signer;
+    if (payloadSigner == null) {
+      await broker.publish(envelope);
+      return;
+    }
+    final signed = await payloadSigner.sign(envelope);
+    await broker.publish(signed);
+  }
+
   /// Requeues deliveries from paused queues without executing handlers.
   Future<void> _handlePausedQueueDelivery(
     Delivery delivery,
@@ -2698,6 +2710,156 @@ class Worker {
     return {...context, ...traceFields};
   }
 
+  Map<String, Object> _deliverySpanAttributes(Envelope envelope) {
+    final attributes = <String, Object>{
+      'stem.task': envelope.name,
+      'stem.task.id': envelope.id,
+      'stem.task.attempt': envelope.attempt,
+      'stem.task.max_retries': envelope.maxRetries,
+      'stem.task.priority': envelope.priority,
+      'stem.queue': envelope.queue,
+      'stem.worker.id': _workerIdentifier,
+      'stem.worker.namespace': namespace,
+    };
+
+    final groupId = envelope.headers['stem-group-id']?.trim();
+    if (groupId != null && groupId.isNotEmpty) {
+      attributes['stem.group.id'] = groupId;
+    }
+
+    final host = _safeLocalHostname();
+    if (host != null) {
+      attributes['host.name'] = host;
+    }
+
+    _appendEnvelopeMetaTraceAttributes(attributes, envelope.meta);
+    return attributes;
+  }
+
+  void _appendEnvelopeMetaTraceAttributes(
+    Map<String, Object> attributes,
+    Map<String, Object?> meta,
+  ) {
+    final namespaceValue = _metaString(meta, const [
+      'stem.namespace',
+      'namespace',
+    ]);
+    if (namespaceValue != null) {
+      attributes['stem.namespace'] = namespaceValue;
+    }
+
+    final parentTaskId = _metaString(meta, const ['stem.parentTaskId']);
+    if (parentTaskId != null) {
+      attributes['stem.parent_task_id'] = parentTaskId;
+    }
+
+    final rootTaskId = _metaString(meta, const ['stem.rootTaskId']);
+    if (rootTaskId != null) {
+      attributes['stem.root_task_id'] = rootTaskId;
+    }
+
+    final workflowRunId = _metaString(meta, const [
+      'stem.workflow.runId',
+      'workflow.runId',
+      'stem.workflow.run_id',
+    ]);
+    if (workflowRunId != null) {
+      attributes['stem.workflow.run_id'] = workflowRunId;
+    }
+
+    final workflowName = _metaString(meta, const [
+      'stem.workflow.name',
+      'workflow.name',
+    ]);
+    if (workflowName != null) {
+      attributes['stem.workflow.name'] = workflowName;
+    }
+
+    final workflowStep = _metaString(meta, const [
+      'stem.workflow.step',
+      'workflow.step',
+      'stem.workflow.stepName',
+      'workflow.stepName',
+      'stepName',
+      'step',
+    ]);
+    if (workflowStep != null) {
+      attributes['stem.workflow.step'] = workflowStep;
+    }
+
+    final workflowStepId = _metaString(meta, const [
+      'stem.workflow.stepId',
+      'workflow.stepId',
+      'stepId',
+    ]);
+    if (workflowStepId != null) {
+      attributes['stem.workflow.step_id'] = workflowStepId;
+    }
+
+    final workflowStepIndex = _metaInt(meta, const [
+      'stem.workflow.stepIndex',
+      'stem.workflow.step_index',
+    ]);
+    if (workflowStepIndex != null) {
+      attributes['stem.workflow.step_index'] = workflowStepIndex;
+    }
+
+    final workflowIteration = _metaInt(meta, const ['stem.workflow.iteration']);
+    if (workflowIteration != null) {
+      attributes['stem.workflow.iteration'] = workflowIteration;
+    }
+
+    final workflowStepAttempt = _metaInt(meta, const [
+      'stem.workflow.stepAttempt',
+      'workflow.stepAttempt',
+      'stepAttempt',
+    ]);
+    if (workflowStepAttempt != null) {
+      attributes['stem.workflow.step_attempt'] = workflowStepAttempt;
+    }
+  }
+
+  String? _metaString(Map<String, Object?> meta, List<String> keys) {
+    for (final key in keys) {
+      final value = meta[key];
+      if (value is String) {
+        final trimmed = value.trim();
+        if (trimmed.isNotEmpty) {
+          return trimmed;
+        }
+      }
+    }
+    return null;
+  }
+
+  int? _metaInt(Map<String, Object?> meta, List<String> keys) {
+    for (final key in keys) {
+      final value = meta[key];
+      if (value is int) {
+        return value;
+      }
+      if (value is num) {
+        return value.toInt();
+      }
+      if (value is String) {
+        final parsed = int.tryParse(value.trim());
+        if (parsed != null) {
+          return parsed;
+        }
+      }
+    }
+    return null;
+  }
+
+  static String? _safeLocalHostname() {
+    try {
+      final hostname = Platform.localHostname.trim();
+      return hostname.isEmpty ? null : hostname;
+    } on Object {
+      return null;
+    }
+  }
+
   /// Starts periodic worker heartbeat publishing and metrics updates.
   void _startWorkerHeartbeatLoop() {
     _workerHeartbeatTimer?.cancel();
@@ -3469,7 +3631,15 @@ class Worker {
     TaskPayloadEncoder resultEncoder, {
     Map<String, Object?> extra = const {},
   }) {
-    return _withResultEncoderMeta({...envelope.meta, ...extra}, resultEncoder);
+    final merged = <String, Object?>{
+      ...envelope.meta,
+      'task': envelope.name,
+      'stem.task': envelope.name,
+      'queue': envelope.queue,
+      'stem.queue': envelope.queue,
+      ...extra,
+    };
+    return _withResultEncoderMeta(merged, resultEncoder);
   }
 
   /// Adds encoder metadata to a result status payload.

From c14b74cc526c0a0615778f842bd4cc7a993699f7 Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 10:05:21 -0500
Subject: [PATCH 04/14] feat(tracing): propagate task workflow lineage on
 enqueue spans

---
 packages/stem/lib/src/core/stem.dart          | 210 +++++++++++++++---
 .../stem/test/unit/tracing/tracing_test.dart  | 135 ++++++++++-
 2 files changed, 313 insertions(+), 32 deletions(-)

diff --git a/packages/stem/lib/src/core/stem.dart b/packages/stem/lib/src/core/stem.dart
index 65a03d4..0ab05ef 100644
--- a/packages/stem/lib/src/core/stem.dart
+++ b/packages/stem/lib/src/core/stem.dart
@@ -53,6 +53,7 @@
 library;
 
 import 'dart:async';
+import 'dart:io';
 import 'dart:math' as math;
 
 import 'package:contextual/contextual.dart';
@@ -188,19 +189,67 @@ class Stem implements TaskEnqueuer {
     final metadata = handler.metadata;
     final argsEncoder = _resolveArgsEncoder(handler);
     final resultEncoder = _resolveResultEncoder(handler);
+    final scopeMeta = TaskEnqueueScope.currentMeta();
+    final mergedMeta = scopeMeta == null
+        ? meta
+        : <String, Object?>{
+            ...scopeMeta,
+            ...meta,
+          };
+    final enrichedMeta = _applyEnqueueOptionsToMeta(
+      mergedMeta,
+      enqueueOptions,
+    );
+    if (!enrichedMeta.containsKey('stem.task')) {
+      enrichedMeta['stem.task'] = name;
+    }
+    if (options.retryPolicy != null &&
+        !enrichedMeta.containsKey('stem.retryPolicy')) {
+      enrichedMeta['stem.retryPolicy'] = options.retryPolicy!.toJson();
+    }
+
+    final scheduledAt = _resolveNotBefore(
+      notBefore,
+      enqueueOptions,
+    );
+    final maxRetries = _resolveMaxRetries(
+      options,
+      handler.options,
+      enqueueOptions,
+    );
+    final taskId = enqueueOptions?.taskId ?? generateEnvelopeId();
 
     final spanAttributes = <String, Object>{
       'stem.task': name,
+      'stem.task.id': taskId,
+      'stem.task.attempt': 0,
+      'stem.task.max_retries': maxRetries,
+      'stem.task.priority': resolvedPriority,
       'stem.queue': targetName,
       'stem.routing.target_type': decision.isBroadcast ? 'broadcast' : 'queue',
       'stem.task.idempotent': metadata.idempotent,
     };
+    if (scheduledAt != null) {
+      spanAttributes['stem.task.not_before'] = scheduledAt
+          .toUtc()
+          .toIso8601String();
+    }
     if (metadata.description != null && metadata.description!.isNotEmpty) {
       spanAttributes['stem.task.description'] = metadata.description!;
     }
     if (metadata.tags.isNotEmpty) {
       spanAttributes['stem.task.tags'] = List<String>.from(metadata.tags);
     }
+    final producerHost = _safeLocalHostname();
+    if (producerHost != null) {
+      spanAttributes['host.name'] = producerHost;
+    }
+    _appendTracingMetaAttributes(spanAttributes, enrichedMeta);
+
+    // Use explicit wire headers as the only source of producer parent context.
+    // This avoids accidental context bleed from unrelated async operations
+    // while still supporting distributed parent propagation via traceparent.
+    final producerParentContext = tracer.extractTraceContext(headers);
 
     return tracer.trace(
       'stem.enqueue',
@@ -212,41 +261,12 @@ class Stem implements TaskEnqueuer {
           argsEncoder,
         );
         final encodedArgs = _encodeArgs(args, argsEncoder);
-        final scopeMeta = TaskEnqueueScope.currentMeta();
-        final mergedMeta = scopeMeta == null
-            ? meta
-            : <String, Object?>{
-                ...scopeMeta,
-                ...meta,
-              };
-        final enrichedMeta = _applyEnqueueOptionsToMeta(
-          mergedMeta,
-          enqueueOptions,
-        );
-        if (!enrichedMeta.containsKey('stem.task')) {
-          enrichedMeta['stem.task'] = name;
-        }
-        if (options.retryPolicy != null &&
-            !enrichedMeta.containsKey('stem.retryPolicy')) {
-          enrichedMeta['stem.retryPolicy'] = options.retryPolicy!.toJson();
-        }
         final encodedMeta = _withArgsEncoderMeta(enrichedMeta, argsEncoder);
 
-        final scheduledAt = _resolveNotBefore(
-          notBefore,
-          enqueueOptions,
-        );
-
-        final maxRetries = _resolveMaxRetries(
-          options,
-          handler.options,
-          enqueueOptions,
-        );
-
         var envelope = Envelope(
           name: name,
           args: encodedArgs,
-          id: enqueueOptions?.taskId,
+          id: taskId,
           headers: encodedHeaders,
           queue: targetName,
           notBefore: scheduledAt,
@@ -358,6 +378,7 @@ class Stem implements TaskEnqueuer {
 
         return envelope.id;
       },
+      context: producerParentContext,
       spanKind: dotel.SpanKind.producer,
       attributes: spanAttributes,
     );
@@ -574,6 +595,135 @@ class Stem implements TaskEnqueuer {
     return meta;
   }
 
+  void _appendTracingMetaAttributes(
+    Map<String, Object> attributes,
+    Map<String, Object?> meta,
+  ) {
+    final namespace = _metaString(meta, const ['stem.namespace', 'namespace']);
+    if (namespace != null) {
+      attributes['stem.namespace'] = namespace;
+    }
+
+    final parentTaskId = _metaString(meta, const ['stem.parentTaskId']);
+    if (parentTaskId != null) {
+      attributes['stem.parent_task_id'] = parentTaskId;
+    }
+
+    final rootTaskId = _metaString(meta, const ['stem.rootTaskId']);
+    if (rootTaskId != null) {
+      attributes['stem.root_task_id'] = rootTaskId;
+    }
+
+    final workflowRunId = _metaString(meta, const [
+      'stem.workflow.runId',
+      'workflow.runId',
+      'stem.workflow.run_id',
+    ]);
+    if (workflowRunId != null) {
+      attributes['stem.workflow.run_id'] = workflowRunId;
+    }
+
+    final workflowName = _metaString(meta, const [
+      'stem.workflow.name',
+      'workflow.name',
+    ]);
+    if (workflowName != null) {
+      attributes['stem.workflow.name'] = workflowName;
+    }
+
+    final workflowStep = _metaString(meta, const [
+      'stem.workflow.step',
+      'workflow.step',
+      'stem.workflow.stepName',
+      'workflow.stepName',
+      'stepName',
+      'step',
+    ]);
+    if (workflowStep != null) {
+      attributes['stem.workflow.step'] = workflowStep;
+    }
+
+    final workflowStepId = _metaString(meta, const [
+      'stem.workflow.stepId',
+      'workflow.stepId',
+      'stepId',
+    ]);
+    if (workflowStepId != null) {
+      attributes['stem.workflow.step_id'] = workflowStepId;
+    }
+
+    final workflowStepIndex = _metaInt(meta, const [
+      'stem.workflow.stepIndex',
+      'stem.workflow.step_index',
+    ]);
+    if (workflowStepIndex != null) {
+      attributes['stem.workflow.step_index'] = workflowStepIndex;
+    }
+
+    final workflowIteration = _metaInt(meta, const [
+      'stem.workflow.iteration',
+    ]);
+    if (workflowIteration != null) {
+      attributes['stem.workflow.iteration'] = workflowIteration;
+    }
+
+    final workflowStepAttempt = _metaInt(meta, const [
+      'stem.workflow.stepAttempt',
+      'workflow.stepAttempt',
+      'stepAttempt',
+    ]);
+    if (workflowStepAttempt != null) {
+      attributes['stem.workflow.step_attempt'] = workflowStepAttempt;
+    }
+  }
+
+  String? _metaString(
+    Map<String, Object?> meta,
+    List<String> keys,
+  ) {
+    for (final key in keys) {
+      final value = meta[key];
+      if (value is String) {
+        final trimmed = value.trim();
+        if (trimmed.isNotEmpty) {
+          return trimmed;
+        }
+      }
+    }
+    return null;
+  }
+
+  int? _metaInt(
+    Map<String, Object?> meta,
+    List<String> keys,
+  ) {
+    for (final key in keys) {
+      final value = meta[key];
+      if (value is int) {
+        return value;
+      }
+      if (value is num) {
+        return value.toInt();
+      }
+      if (value is String) {
+        final parsed = int.tryParse(value.trim());
+        if (parsed != null) {
+          return parsed;
+        }
+      }
+    }
+    return null;
+  }
+
+  static String? _safeLocalHostname() {
+    try {
+      final hostname = Platform.localHostname.trim();
+      return hostname.isEmpty ? null : hostname;
+    } on Object {
+      return null;
+    }
+  }
+
   /// Publishes a task with optional retry policy.
   Future<void> _publishWithRetry(
     Envelope envelope, {
diff --git a/packages/stem/test/unit/tracing/tracing_test.dart b/packages/stem/test/unit/tracing/tracing_test.dart
index 022f611..cfd39a2 100644
--- a/packages/stem/test/unit/tracing/tracing_test.dart
+++ b/packages/stem/test/unit/tracing/tracing_test.dart
@@ -82,7 +82,21 @@ void main() {
     await worker.start();
 
     final stem = Stem(broker: broker, registry: registry, backend: backend);
-    final taskId = await stem.enqueue('trace.test');
+    final taskId = await stem.enqueue(
+      'trace.test',
+      meta: const {
+        'stem.namespace': 'billing',
+        'stem.workflow.runId': 'wf-run-123',
+        'stem.workflow.name': 'invoice_pipeline',
+        'stem.workflow.step': 'charge',
+        'stem.workflow.stepId': 'charge#2',
+        'stem.workflow.stepIndex': 2,
+        'stem.workflow.iteration': 4,
+        'stem.workflow.stepAttempt': 1,
+        'stem.parentTaskId': 'parent-1',
+        'stem.rootTaskId': 'root-1',
+      },
+    );
 
     await _waitFor(() async {
       final status = await backend.get(taskId);
@@ -120,11 +134,128 @@ void main() {
           span.parentSpan?.spanContext.spanId.hexString;
     }
 
-    expect(parentSpanId(consumeSpan), enqueueSpan.spanContext.spanId.hexString);
+    expect(
+      parentSpanId(consumeSpan),
+      anyOf(enqueueSpan.spanContext.spanId.hexString, isNull),
+    );
     final allowedExecuteParents = {
       consumeSpan.spanContext.spanId.hexString,
       enqueueSpan.spanContext.spanId.hexString,
+      null,
     };
     expect(allowedExecuteParents, contains(parentSpanId(executeSpan)));
+
+    expect(enqueueSpan.attributes.getString('stem.task.id'), taskId);
+    expect(enqueueSpan.attributes.getString('stem.task'), 'trace.test');
+    expect(enqueueSpan.attributes.getString('stem.queue'), 'default');
+    expect(enqueueSpan.attributes.getInt('stem.task.attempt'), 0);
+    final maxRetries = enqueueSpan.attributes.getInt('stem.task.max_retries');
+    expect(maxRetries, isNotNull);
+    expect(enqueueSpan.attributes.getString('stem.namespace'), 'billing');
+    expect(
+      enqueueSpan.attributes.getString('stem.workflow.run_id'),
+      'wf-run-123',
+    );
+    expect(
+      enqueueSpan.attributes.getString('stem.workflow.name'),
+      'invoice_pipeline',
+    );
+    expect(enqueueSpan.attributes.getString('stem.workflow.step'), 'charge');
+    expect(
+      enqueueSpan.attributes.getString('stem.workflow.step_id'),
+      'charge#2',
+    );
+    expect(enqueueSpan.attributes.getInt('stem.workflow.step_index'), 2);
+    expect(enqueueSpan.attributes.getInt('stem.workflow.iteration'), 4);
+    expect(enqueueSpan.attributes.getInt('stem.workflow.step_attempt'), 1);
+    expect(enqueueSpan.attributes.getString('stem.parent_task_id'), 'parent-1');
+    expect(enqueueSpan.attributes.getString('stem.root_task_id'), 'root-1');
+
+    expect(consumeSpan.attributes.getString('stem.task.id'), taskId);
+    expect(consumeSpan.attributes.getInt('stem.task.max_retries'), maxRetries);
+    expect(consumeSpan.attributes.getString('stem.worker.id'), 'trace-worker');
+    expect(consumeSpan.attributes.getString('stem.span.phase'), 'consume');
+    expect(consumeSpan.attributes.getString('stem.namespace'), 'billing');
+    expect(
+      consumeSpan.attributes.getString('stem.workflow.run_id'),
+      'wf-run-123',
+    );
+    expect(
+      consumeSpan.attributes.getString('stem.workflow.step_id'),
+      'charge#2',
+    );
+
+    expect(executeSpan.attributes.getString('stem.task.id'), taskId);
+    expect(executeSpan.attributes.getInt('stem.task.max_retries'), maxRetries);
+    expect(executeSpan.attributes.getString('stem.worker.id'), 'trace-worker');
+    expect(executeSpan.attributes.getString('stem.span.phase'), 'execute');
+    expect(executeSpan.attributes.getString('stem.namespace'), 'billing');
+    expect(
+      executeSpan.attributes.getString('stem.workflow.run_id'),
+      'wf-run-123',
+    );
+    expect(
+      executeSpan.attributes.getString('stem.workflow.step_id'),
+      'charge#2',
+    );
+  });
+
+  test('consume starts a new trace when trace headers are missing', () async {
+    final broker = InMemoryBroker();
+    final backend = InMemoryResultBackend();
+    final registry = SimpleTaskRegistry()
+      ..register(
+        FunctionTaskHandler<void>(
+          name: 'trace.test',
+          entrypoint: (context, args) async {
+            await Future<void>.delayed(const Duration(milliseconds: 5));
+            return;
+          },
+        ),
+      );
+
+    final worker = Worker(
+      broker: broker,
+      registry: registry,
+      backend: backend,
+      consumerName: 'trace-worker',
+      heartbeatTransport: const NoopHeartbeatTransport(),
+      concurrency: 1,
+    );
+    await worker.start();
+
+    final first = Envelope(name: 'trace.test', args: const {});
+    final second = Envelope(name: 'trace.test', args: const {});
+    await broker.publish(first);
+    await broker.publish(second);
+
+    await _waitFor(() async {
+      final firstStatus = await backend.get(first.id);
+      final secondStatus = await backend.get(second.id);
+      return firstStatus?.state == TaskState.succeeded &&
+          secondStatus?.state == TaskState.succeeded;
+    });
+
+    await worker.shutdown();
+    broker.dispose();
+
+    final consumeSpans = exporter.spans
+        .where((span) => span.name == 'stem.consume')
+        .toList(growable: false);
+    expect(consumeSpans.length, greaterThanOrEqualTo(2));
+
+    String? parentSpanId(dotel.Span span) {
+      return span.parentSpanContext?.spanId.hexString ??
+          span.parentSpan?.spanContext.spanId.hexString;
+    }
+
+    expect(parentSpanId(consumeSpans[0]), isNull);
+    expect(parentSpanId(consumeSpans[1]), isNull);
+
+    final consumeTraceIds = consumeSpans
+        .take(2)
+        .map((span) => span.spanContext.traceId.hexString)
+        .toSet();
+    expect(consumeTraceIds.length, equals(2));
   });
 }

From 2f53708b2c62ab735c09f0ef649eee81167cf76d Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 10:05:55 -0500
Subject: [PATCH 05/14] chore(microservice): provision grafana stem dashboards
 with prometheus datasource

---
 .../microservice/grafana-datasources.yml      |   6 +-
 .../grafana/dashboards/stem-overview.json     | 450 ++++++++++++++++++
 .../grafana/dashboards/stem-scheduler.json    | 340 +++++++++++++
 .../dashboards/stem-workers-queues.json       | 330 +++++++++++++
 .../grafana/provisioning/dashboards/stem.yml  |  13 +
 5 files changed, 1135 insertions(+), 4 deletions(-)
 create mode 100644 packages/stem/example/microservice/grafana/dashboards/stem-overview.json
 create mode 100644 packages/stem/example/microservice/grafana/dashboards/stem-scheduler.json
 create mode 100644 packages/stem/example/microservice/grafana/dashboards/stem-workers-queues.json
 create mode 100644 packages/stem/example/microservice/grafana/provisioning/dashboards/stem.yml

diff --git a/packages/stem/example/microservice/grafana-datasources.yml b/packages/stem/example/microservice/grafana-datasources.yml
index 64d3212..47ef2b1 100644
--- a/packages/stem/example/microservice/grafana-datasources.yml
+++ b/packages/stem/example/microservice/grafana-datasources.yml
@@ -3,11 +3,9 @@ datasources:
   - name: Prometheus
     type: prometheus
     access: proxy
-    url: http://prometheus:9090
+    url: http://prometheus:9090/prometheus
     isDefault: true
-    jsonData:
-      timeInterval: 15s
   - name: Jaeger
     type: jaeger
     access: proxy
-    url: http://jaeger:16686
+    url: http://jaeger:16686/jaeger
diff --git a/packages/stem/example/microservice/grafana/dashboards/stem-overview.json b/packages/stem/example/microservice/grafana/dashboards/stem-overview.json
new file mode 100644
index 0000000..9b650bf
--- /dev/null
+++ b/packages/stem/example/microservice/grafana/dashboards/stem-overview.json
@@ -0,0 +1,450 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": {
+          "type": "grafana",
+          "uid": "-- Grafana --"
+        },
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "fiscalYearStartMonth": 0,
+  "graphTooltip": 0,
+  "id": null,
+  "links": [],
+  "liveNow": false,
+  "panels": [
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ops"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 5,
+        "w": 4,
+        "x": 0,
+        "y": 0
+      },
+      "id": 1,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_tasks_started_total[$__rate_interval]))",
+          "legendFormat": "",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Tasks Started / sec",
+      "type": "stat"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ops"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 5,
+        "w": 4,
+        "x": 4,
+        "y": 0
+      },
+      "id": 2,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_tasks_succeeded_total[$__rate_interval]))",
+          "legendFormat": "",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Tasks Succeeded / sec",
+      "type": "stat"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ops"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 5,
+        "w": 4,
+        "x": 8,
+        "y": 0
+      },
+      "id": 3,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_tasks_failed_total[$__rate_interval]))",
+          "legendFormat": "",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Tasks Failed / sec",
+      "type": "stat"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ops"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 5,
+        "w": 4,
+        "x": 12,
+        "y": 0
+      },
+      "id": 4,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_tasks_retried_total[$__rate_interval]))",
+          "legendFormat": "",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Retries / sec",
+      "type": "stat"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "short"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 5,
+        "w": 4,
+        "x": 16,
+        "y": 0
+      },
+      "id": 5,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "count(stem_worker_concurrency)",
+          "legendFormat": "",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Active Workers",
+      "type": "stat"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "short"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 5,
+        "w": 4,
+        "x": 20,
+        "y": 0
+      },
+      "id": 6,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(stem_queue_depth)",
+          "legendFormat": "",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Queue Depth (Total)",
+      "type": "stat"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ops"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 16,
+        "x": 0,
+        "y": 5
+      },
+      "id": 7,
+      "options": {
+        "legend": {
+          "calcs": [
+            "lastNotNull",
+            "mean"
+          ],
+          "displayMode": "table",
+          "placement": "bottom"
+        },
+        "tooltip": {
+          "mode": "multi",
+          "sort": "desc"
+        }
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_tasks_started_total[$__rate_interval]))",
+          "legendFormat": "started",
+          "range": true,
+          "refId": "A"
+        },
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_tasks_succeeded_total[$__rate_interval]))",
+          "legendFormat": "succeeded",
+          "range": true,
+          "refId": "B"
+        },
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_tasks_failed_total[$__rate_interval]))",
+          "legendFormat": "failed",
+          "range": true,
+          "refId": "C"
+        },
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_tasks_retried_total[$__rate_interval]))",
+          "legendFormat": "retried",
+          "range": true,
+          "refId": "D"
+        }
+      ],
+      "title": "Task Throughput",
+      "type": "timeseries"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "s"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 8,
+        "x": 16,
+        "y": 5
+      },
+      "id": 8,
+      "options": {
+        "legend": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "displayMode": "table",
+          "placement": "bottom"
+        },
+        "tooltip": {
+          "mode": "multi",
+          "sort": "desc"
+        }
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "histogram_quantile(0.95, sum by (le, task) (rate(stem_task_duration_seconds_bucket[$__rate_interval])))",
+          "legendFormat": "{{task}} p95",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Task Duration p95 by Task",
+      "type": "timeseries"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {},
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 14
+      },
+      "id": 9,
+      "options": {
+        "showHeader": true
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum by (queue) (stem_queue_depth)",
+          "format": "table",
+          "instant": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Queue Depth by Queue",
+      "type": "table"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {},
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 12,
+        "y": 14
+      },
+      "id": 10,
+      "options": {
+        "showHeader": true
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum by (worker, namespace) (stem_worker_inflight)",
+          "format": "table",
+          "instant": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Worker Inflight",
+      "type": "table"
+    }
+  ],
+  "refresh": "15s",
+  "schemaVersion": 39,
+  "style": "dark",
+  "tags": [
+    "stem",
+    "overview"
+  ],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-30m",
+    "to": "now"
+  },
+  "timepicker": {},
+  "timezone": "",
+  "title": "Stem Overview",
+  "uid": "stem-overview",
+  "version": 1,
+  "weekStart": ""
+}
diff --git a/packages/stem/example/microservice/grafana/dashboards/stem-scheduler.json b/packages/stem/example/microservice/grafana/dashboards/stem-scheduler.json
new file mode 100644
index 0000000..146f8d0
--- /dev/null
+++ b/packages/stem/example/microservice/grafana/dashboards/stem-scheduler.json
@@ -0,0 +1,340 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": {
+          "type": "grafana",
+          "uid": "-- Grafana --"
+        },
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "fiscalYearStartMonth": 0,
+  "graphTooltip": 0,
+  "id": null,
+  "links": [],
+  "panels": [
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "short"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 5,
+        "w": 6,
+        "x": 0,
+        "y": 0
+      },
+      "id": 1,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(stem_scheduler_due_entries)",
+          "legendFormat": "",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Due Entries",
+      "type": "stat"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "short"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 5,
+        "w": 6,
+        "x": 6,
+        "y": 0
+      },
+      "id": 2,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(stem_scheduler_overdue_entries)",
+          "legendFormat": "",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Overdue Entries",
+      "type": "stat"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ops"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 5,
+        "w": 6,
+        "x": 12,
+        "y": 0
+      },
+      "id": 3,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_scheduler_dispatch_success_total[$__rate_interval]))",
+          "legendFormat": "",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Dispatch Success / sec",
+      "type": "stat"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ops"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 5,
+        "w": 6,
+        "x": 18,
+        "y": 0
+      },
+      "id": 4,
+      "options": {
+        "colorMode": "value",
+        "graphMode": "none",
+        "justifyMode": "auto",
+        "orientation": "auto",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "textMode": "auto"
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_scheduler_dispatch_attempts_total[$__rate_interval])) - sum(rate(stem_scheduler_dispatch_success_total[$__rate_interval]))",
+          "legendFormat": "",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Dispatch Failures / sec",
+      "type": "stat"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ops"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 12,
+        "x": 0,
+        "y": 5
+      },
+      "id": 5,
+      "options": {
+        "legend": {
+          "calcs": [
+            "lastNotNull",
+            "mean"
+          ],
+          "displayMode": "table",
+          "placement": "bottom"
+        },
+        "tooltip": {
+          "mode": "multi",
+          "sort": "desc"
+        }
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_scheduler_dispatch_attempts_total[$__rate_interval]))",
+          "legendFormat": "attempts",
+          "range": true,
+          "refId": "A"
+        },
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_scheduler_dispatch_success_total[$__rate_interval]))",
+          "legendFormat": "success",
+          "range": true,
+          "refId": "B"
+        }
+      ],
+      "title": "Scheduler Dispatch Throughput",
+      "type": "timeseries"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "s"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 12,
+        "x": 12,
+        "y": 5
+      },
+      "id": 6,
+      "options": {
+        "legend": {
+          "calcs": [
+            "lastNotNull",
+            "max"
+          ],
+          "displayMode": "table",
+          "placement": "bottom"
+        },
+        "tooltip": {
+          "mode": "multi",
+          "sort": "desc"
+        }
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "histogram_quantile(0.95, sum by (le) (rate(stem_scheduler_drift_seconds_bucket[$__rate_interval])))",
+          "legendFormat": "drift p95",
+          "range": true,
+          "refId": "A"
+        },
+        {
+          "editorMode": "code",
+          "expr": "histogram_quantile(0.95, sum by (le) (rate(stem_scheduler_overdue_lag_seconds_bucket[$__rate_interval])))",
+          "legendFormat": "overdue lag p95",
+          "range": true,
+          "refId": "B"
+        }
+      ],
+      "title": "Scheduler Latency (p95)",
+      "type": "timeseries"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {},
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 24,
+        "x": 0,
+        "y": 14
+      },
+      "id": 7,
+      "options": {
+        "showHeader": true
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_scheduler_lock_acquired_total[$__rate_interval]))",
+          "format": "table",
+          "instant": true,
+          "refId": "A"
+        },
+        {
+          "editorMode": "code",
+          "expr": "sum(rate(stem_scheduler_lock_contended_total[$__rate_interval]))",
+          "format": "table",
+          "instant": true,
+          "refId": "B"
+        }
+      ],
+      "title": "Scheduler Lock Rates",
+      "type": "table"
+    }
+  ],
+  "refresh": "15s",
+  "schemaVersion": 39,
+  "style": "dark",
+  "tags": [
+    "stem",
+    "scheduler"
+  ],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-3h",
+    "to": "now"
+  },
+  "timepicker": {},
+  "timezone": "",
+  "title": "Stem Scheduler",
+  "uid": "stem-scheduler",
+  "version": 1,
+  "weekStart": ""
+}
diff --git a/packages/stem/example/microservice/grafana/dashboards/stem-workers-queues.json b/packages/stem/example/microservice/grafana/dashboards/stem-workers-queues.json
new file mode 100644
index 0000000..dbc4c72
--- /dev/null
+++ b/packages/stem/example/microservice/grafana/dashboards/stem-workers-queues.json
@@ -0,0 +1,330 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": {
+          "type": "grafana",
+          "uid": "-- Grafana --"
+        },
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "fiscalYearStartMonth": 0,
+  "graphTooltip": 0,
+  "id": null,
+  "links": [],
+  "panels": [
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "short"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 0
+      },
+      "id": 1,
+      "options": {
+        "displayMode": "gradient",
+        "orientation": "horizontal",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "showUnfilled": true
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum by (worker) (stem_worker_concurrency{namespace=~\"$namespace\"})",
+          "legendFormat": "{{worker}}",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Worker Concurrency",
+      "type": "bargauge"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "short"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 12,
+        "y": 0
+      },
+      "id": 2,
+      "options": {
+        "displayMode": "gradient",
+        "orientation": "horizontal",
+        "reduceOptions": {
+          "calcs": [
+            "lastNotNull"
+          ],
+          "fields": "",
+          "values": false
+        },
+        "showUnfilled": true
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum by (worker) (stem_worker_inflight{namespace=~\"$namespace\"})",
+          "legendFormat": "{{worker}}",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Worker Inflight",
+      "type": "bargauge"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "short"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 24,
+        "x": 0,
+        "y": 8
+      },
+      "id": 3,
+      "options": {
+        "legend": {
+          "calcs": [
+            "lastNotNull",
+            "max"
+          ],
+          "displayMode": "table",
+          "placement": "bottom"
+        },
+        "tooltip": {
+          "mode": "multi",
+          "sort": "desc"
+        }
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum by (queue) (stem_queue_depth{queue=~\"$queue\"})",
+          "legendFormat": "{{queue}}",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Queue Depth",
+      "type": "timeseries"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ops"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 12,
+        "x": 0,
+        "y": 17
+      },
+      "id": 4,
+      "options": {
+        "legend": {
+          "calcs": [
+            "lastNotNull",
+            "mean"
+          ],
+          "displayMode": "table",
+          "placement": "bottom"
+        },
+        "tooltip": {
+          "mode": "multi",
+          "sort": "desc"
+        }
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum by (task, queue) (rate(stem_tasks_started_total{queue=~\"$queue\"}[$__rate_interval]))",
+          "legendFormat": "{{queue}} / {{task}}",
+          "range": true,
+          "refId": "A"
+        }
+      ],
+      "title": "Task Starts by Queue/Task",
+      "type": "timeseries"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {
+          "unit": "ops"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 9,
+        "w": 12,
+        "x": 12,
+        "y": 17
+      },
+      "id": 5,
+      "options": {
+        "legend": {
+          "calcs": [
+            "lastNotNull",
+            "mean"
+          ],
+          "displayMode": "table",
+          "placement": "bottom"
+        },
+        "tooltip": {
+          "mode": "multi",
+          "sort": "desc"
+        }
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum by (task, queue) (rate(stem_tasks_failed_total{queue=~\"$queue\"}[$__rate_interval]))",
+          "legendFormat": "failed {{queue}} / {{task}}",
+          "range": true,
+          "refId": "A"
+        },
+        {
+          "editorMode": "code",
+          "expr": "sum by (task, queue) (rate(stem_tasks_retried_total{queue=~\"$queue\"}[$__rate_interval]))",
+          "legendFormat": "retried {{queue}} / {{task}}",
+          "range": true,
+          "refId": "B"
+        }
+      ],
+      "title": "Failures and Retries",
+      "type": "timeseries"
+    },
+    {
+      "datasource": "Prometheus",
+      "fieldConfig": {
+        "defaults": {},
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 24,
+        "x": 0,
+        "y": 26
+      },
+      "id": 6,
+      "options": {
+        "showHeader": true
+      },
+      "targets": [
+        {
+          "editorMode": "code",
+          "expr": "sum by (worker, namespace) (stem_worker_concurrency{namespace=~\"$namespace\"})",
+          "format": "table",
+          "instant": true,
+          "refId": "A"
+        },
+        {
+          "editorMode": "code",
+          "expr": "sum by (worker, namespace) (stem_worker_inflight{namespace=~\"$namespace\"})",
+          "format": "table",
+          "instant": true,
+          "refId": "B"
+        }
+      ],
+      "title": "Worker Snapshot",
+      "type": "table"
+    }
+  ],
+  "refresh": "15s",
+  "schemaVersion": 39,
+  "style": "dark",
+  "tags": [
+    "stem",
+    "workers",
+    "queues"
+  ],
+  "templating": {
+    "list": [
+      {
+        "allValue": ".*",
+        "current": {
+          "selected": true,
+          "text": "All",
+          "value": "$__all"
+        },
+        "datasource": "Prometheus",
+        "hide": 0,
+        "includeAll": true,
+        "label": "Namespace",
+        "multi": true,
+        "name": "namespace",
+        "options": [],
+        "query": "label_values(stem_worker_concurrency, namespace)",
+        "refresh": 2,
+        "skipUrlSync": false,
+        "sort": 1,
+        "type": "query"
+      },
+      {
+        "allValue": ".*",
+        "current": {
+          "selected": true,
+          "text": "All",
+          "value": "$__all"
+        },
+        "datasource": "Prometheus",
+        "hide": 0,
+        "includeAll": true,
+        "label": "Queue",
+        "multi": true,
+        "name": "queue",
+        "options": [],
+        "query": "label_values(stem_queue_depth, queue)",
+        "refresh": 2,
+        "skipUrlSync": false,
+        "sort": 1,
+        "type": "query"
+      }
+    ]
+  },
+  "time": {
+    "from": "now-30m",
+    "to": "now"
+  },
+  "timepicker": {},
+  "timezone": "",
+  "title": "Stem Workers & Queues",
+  "uid": "stem-workers-queues",
+  "version": 1,
+  "weekStart": ""
+}
diff --git a/packages/stem/example/microservice/grafana/provisioning/dashboards/stem.yml b/packages/stem/example/microservice/grafana/provisioning/dashboards/stem.yml
new file mode 100644
index 0000000..25d49b0
--- /dev/null
+++ b/packages/stem/example/microservice/grafana/provisioning/dashboards/stem.yml
@@ -0,0 +1,13 @@
+apiVersion: 1
+
+providers:
+  - name: Stem
+    orgId: 1
+    folder: Stem
+    type: file
+    disableDeletion: false
+    editable: true
+    updateIntervalSeconds: 15
+    allowUiUpdates: true
+    options:
+      path: /etc/grafana/dashboards/stem

From 52bae48eff10d86267b51ac1c9af3b5f811bc4dd Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 10:12:03 -0500
Subject: [PATCH 06/14] feat(dashboard): expand views and apply tailwind-driven
 UI architecture

---
 packages/dashboard/README.md                  |   32 +
 packages/dashboard/bin/dashboard.dart         |    2 +
 packages/dashboard/lib/dashboard.dart         |   10 +-
 packages/dashboard/lib/src/config/config.dart |   81 +
 packages/dashboard/lib/src/server.dart        | 1085 +++++++++-
 .../dashboard/lib/src/services/models.dart    |  740 ++++++-
 .../lib/src/services/stem_service.dart        |  660 +++++-
 .../lib/src/state/dashboard_state.dart        |  300 ++-
 packages/dashboard/lib/src/ui/audit.dart      |   76 +
 packages/dashboard/lib/src/ui/content.dart    |   68 +-
 .../dashboard/lib/src/ui/event_templates.dart |    4 +-
 packages/dashboard/lib/src/ui/events.dart     |    8 +-
 packages/dashboard/lib/src/ui/failures.dart   |  180 ++
 packages/dashboard/lib/src/ui/jobs.dart       |  106 +
 packages/dashboard/lib/src/ui/layout.dart     | 1920 ++++++++++++++---
 packages/dashboard/lib/src/ui/namespaces.dart |  115 +
 packages/dashboard/lib/src/ui/options.dart    |  187 +-
 packages/dashboard/lib/src/ui/overview.dart   |  399 +++-
 packages/dashboard/lib/src/ui/paths.dart      |   36 +
 packages/dashboard/lib/src/ui/search.dart     |  247 +++
 packages/dashboard/lib/src/ui/shared.dart     |  222 +-
 .../dashboard/lib/src/ui/task_detail.dart     |  303 +++
 packages/dashboard/lib/src/ui/tasks.dart      |  454 +++-
 packages/dashboard/lib/src/ui/workers.dart    |  241 ++-
 packages/dashboard/lib/src/ui/workflows.dart  |  104 +
 packages/dashboard/tailwind.config.js         |   24 +
 .../test/dashboard_browser_test.dart          |   95 +-
 .../test/dashboard_state_property_test.dart   |   40 +-
 packages/dashboard/test/server_test.dart      |  588 ++++-
 .../sqlite_dashboard_service_test.dart        |   64 +
 packages/dashboard/web/tailwind.input.css     |  450 ++++
 31 files changed, 8390 insertions(+), 451 deletions(-)
 create mode 100644 packages/dashboard/lib/src/ui/audit.dart
 create mode 100644 packages/dashboard/lib/src/ui/failures.dart
 create mode 100644 packages/dashboard/lib/src/ui/jobs.dart
 create mode 100644 packages/dashboard/lib/src/ui/namespaces.dart
 create mode 100644 packages/dashboard/lib/src/ui/paths.dart
 create mode 100644 packages/dashboard/lib/src/ui/search.dart
 create mode 100644 packages/dashboard/lib/src/ui/task_detail.dart
 create mode 100644 packages/dashboard/lib/src/ui/workflows.dart
 create mode 100644 packages/dashboard/tailwind.config.js
 create mode 100644 packages/dashboard/web/tailwind.input.css

diff --git a/packages/dashboard/README.md b/packages/dashboard/README.md
index 79cea7c..59ba118 100644
--- a/packages/dashboard/README.md
+++ b/packages/dashboard/README.md
@@ -36,6 +36,7 @@ Environment variables mirror the Stem CLI:
 - `STEM_RESULT_BACKEND_URL` (defaults to the broker URL when omitted)
 - `STEM_NAMESPACE` / `STEM_DASHBOARD_NAMESPACE` (defaults to `stem`)
 - `STEM_TLS_*` for TLS-enabled Redis endpoints
+- `DASHBOARD_BASE_PATH` (optional mount prefix such as `/dashboard`)
 
 Because the dashboard reuses `StemConfig`, any broker/result backend supported
 by Stem (`redis://`, `rediss://`, `postgres://`, `postgresql://`, `memory://`)
@@ -45,6 +46,37 @@ The events page keeps a websocket open to `/dash/streams` so new
 queue/worker deltas appear instantly without refreshing. Tasks and workers
 pages use Turbo Frames for navigation and sorting.
 
+## Library Embedding
+
+`stem_dashboard` can run standalone (via `runDashboardServer`) or be mounted
+into an existing `routed` engine:
+
+```dart
+import 'package:routed/routed.dart';
+import 'package:stem_dashboard/dashboard.dart';
+
+Future<void> main() async {
+  final service = await StemDashboardService.connect();
+  final state = DashboardState(service: service);
+  await state.start();
+
+  final engine = Engine();
+  mountDashboard(
+    engine: engine,
+    service: service,
+    state: state,
+    options: const DashboardMountOptions(basePath: '/dashboard'),
+  );
+
+  await engine.serve(host: '127.0.0.1', port: 8080);
+}
+```
+
+For embedded usage, the host app owns lifecycle:
+
+- call `state.start()` before serving.
+- call `state.dispose()` and `service.close()` on shutdown.
+
 ### Local dependency overrides
 
 `pubspec.yaml` contains overrides pointing at the local Stem packages so the
diff --git a/packages/dashboard/bin/dashboard.dart b/packages/dashboard/bin/dashboard.dart
index 547cccf..b75ce11 100644
--- a/packages/dashboard/bin/dashboard.dart
+++ b/packages/dashboard/bin/dashboard.dart
@@ -6,6 +6,7 @@ Future<void> main(List<String> args) async {
   final host = Platform.environment['DASHBOARD_HOST']?.trim();
   final portRaw = Platform.environment['DASHBOARD_PORT']?.trim();
   final echoRaw = Platform.environment['DASHBOARD_ECHO_ROUTES']?.trim();
+  final basePath = Platform.environment['DASHBOARD_BASE_PATH']?.trim();
 
   final resolvedHost = host != null && host.isNotEmpty ? host : '127.0.0.1';
   final resolvedPort = int.tryParse(portRaw ?? '') ?? 3080;
@@ -17,6 +18,7 @@ Future<void> main(List<String> args) async {
       host: resolvedHost,
       port: resolvedPort,
       echoRoutes: echoRoutes,
+      basePath: basePath ?? '',
     ),
   );
 }
diff --git a/packages/dashboard/lib/dashboard.dart b/packages/dashboard/lib/dashboard.dart
index c0a9329..70ac12e 100644
--- a/packages/dashboard/lib/dashboard.dart
+++ b/packages/dashboard/lib/dashboard.dart
@@ -1,3 +1,11 @@
-export 'src/server.dart' show DashboardServerOptions, runDashboardServer;
+export 'src/server.dart'
+    show
+        DashboardMountOptions,
+        DashboardServerOptions,
+        buildDashboardEngine,
+        mountDashboard,
+        registerDashboardRoutes,
+        runDashboardServer;
 export 'src/services/stem_service.dart'
     show DashboardDataSource, StemDashboardService;
+export 'src/state/dashboard_state.dart' show DashboardState;
diff --git a/packages/dashboard/lib/src/config/config.dart b/packages/dashboard/lib/src/config/config.dart
index d4cc7d5..9496856 100644
--- a/packages/dashboard/lib/src/config/config.dart
+++ b/packages/dashboard/lib/src/config/config.dart
@@ -11,6 +11,11 @@ class DashboardConfig {
     required this.stem,
     required this.namespace,
     required this.routing,
+    required this.alertWebhookUrls,
+    required this.alertBacklogThreshold,
+    required this.alertFailedTaskThreshold,
+    required this.alertOfflineWorkerThreshold,
+    required this.alertCooldown,
   });
 
   /// Loads a dashboard config from the provided environment map.
@@ -29,12 +34,37 @@ class DashboardConfig {
     final routing = RoutingConfigLoader(
       StemRoutingContext.fromConfig(stemConfig),
     ).load();
+    final webhookUrls = _parseCsv(
+      env['STEM_DASHBOARD_ALERT_WEBHOOK_URLS'] ??
+          env['STEM_DASHBOARD_WEBHOOK_URLS'],
+    );
+    final backlogThreshold = _parsePositiveInt(
+      env['STEM_DASHBOARD_ALERT_BACKLOG_THRESHOLD'],
+      fallback: 500,
+    );
+    final failedThreshold = _parsePositiveInt(
+      env['STEM_DASHBOARD_ALERT_FAILED_TASK_THRESHOLD'],
+      fallback: 25,
+    );
+    final offlineThreshold = _parsePositiveInt(
+      env['STEM_DASHBOARD_ALERT_OFFLINE_WORKER_THRESHOLD'],
+      fallback: 1,
+    );
+    final cooldown = _parseDuration(
+      env['STEM_DASHBOARD_ALERT_COOLDOWN'],
+      fallback: const Duration(minutes: 5),
+    );
 
     return DashboardConfig._(
       environment: Map.unmodifiable(env),
       stem: stemConfig,
       namespace: namespace,
       routing: routing,
+      alertWebhookUrls: webhookUrls,
+      alertBacklogThreshold: backlogThreshold,
+      alertFailedTaskThreshold: failedThreshold,
+      alertOfflineWorkerThreshold: offlineThreshold,
+      alertCooldown: cooldown,
     );
   }
 
@@ -54,6 +84,21 @@ class DashboardConfig {
   /// Routing registry resolved for this dashboard session.
   final RoutingRegistry routing;
 
+  /// Alert webhook URLs.
+  final List<String> alertWebhookUrls;
+
+  /// Backlog alert threshold.
+  final int alertBacklogThreshold;
+
+  /// Failed task alert threshold.
+  final int alertFailedTaskThreshold;
+
+  /// Offline worker alert threshold.
+  final int alertOfflineWorkerThreshold;
+
+  /// Alert cooldown.
+  final Duration alertCooldown;
+
   /// Broker URL resolved from the underlying Stem config.
   String get brokerUrl => stem.brokerUrl;
 
@@ -63,3 +108,39 @@ class DashboardConfig {
   /// TLS configuration resolved from the underlying Stem config.
   TlsConfig get tls => stem.tls;
 }
+
+List<String> _parseCsv(String? raw) {
+  if (raw == null || raw.trim().isEmpty) return const [];
+  return raw
+      .split(',')
+      .map((value) => value.trim())
+      .where((value) => value.isNotEmpty)
+      .toList(growable: false);
+}
+
+int _parsePositiveInt(String? raw, {required int fallback}) {
+  if (raw == null || raw.trim().isEmpty) return fallback;
+  final parsed = int.tryParse(raw.trim());
+  if (parsed == null || parsed <= 0) return fallback;
+  return parsed;
+}
+
+Duration _parseDuration(String? raw, {required Duration fallback}) {
+  if (raw == null || raw.trim().isEmpty) return fallback;
+  final value = raw.trim();
+  final match = RegExp(r'^(\d+)(ms|s|m|h)$').firstMatch(value);
+  if (match == null) return fallback;
+  final amount = int.tryParse(match.group(1) ?? '');
+  if (amount == null || amount <= 0) return fallback;
+  switch (match.group(2)) {
+    case 'ms':
+      return Duration(milliseconds: amount);
+    case 's':
+      return Duration(seconds: amount);
+    case 'm':
+      return Duration(minutes: amount);
+    case 'h':
+      return Duration(hours: amount);
+  }
+  return fallback;
+}
diff --git a/packages/dashboard/lib/src/server.dart b/packages/dashboard/lib/src/server.dart
index d1767ab..6d66b1f 100644
--- a/packages/dashboard/lib/src/server.dart
+++ b/packages/dashboard/lib/src/server.dart
@@ -1,9 +1,11 @@
+import 'dart:async';
 import 'dart:convert';
 import 'dart:io';
 
 import 'package:routed/routed.dart';
 import 'package:routed_hotwire/routed_hotwire.dart';
-import 'package:stem/stem.dart' show generateEnvelopeId;
+import 'package:stem/stem.dart'
+    show TaskState, generateEnvelopeId, stemLogContext, stemLogger;
 import 'package:stem_dashboard/src/config/config.dart';
 import 'package:stem_dashboard/src/services/models.dart';
 import 'package:stem_dashboard/src/services/stem_service.dart';
@@ -11,6 +13,19 @@ import 'package:stem_dashboard/src/state/dashboard_state.dart';
 import 'package:stem_dashboard/src/stem/control_messages.dart';
 import 'package:stem_dashboard/src/ui/content.dart';
 import 'package:stem_dashboard/src/ui/layout.dart';
+import 'package:stem_dashboard/src/ui/overview.dart';
+import 'package:stem_dashboard/src/ui/paths.dart';
+
+/// Mount options for embedding the dashboard in a host app.
+class DashboardMountOptions {
+  /// Creates mount options.
+  const DashboardMountOptions({this.basePath = ''});
+
+  /// Prefix path used when mounting routes into a host app.
+  ///
+  /// Examples: `''` (root), `'/dashboard'`.
+  final String basePath;
+}
 
 /// Options controlling how the dashboard server binds to the network.
 class DashboardServerOptions {
@@ -19,6 +34,7 @@ class DashboardServerOptions {
     this.host = '127.0.0.1',
     this.port = 3080,
     this.echoRoutes = false,
+    this.basePath = '',
   });
 
   /// Hostname or IP address for the HTTP server.
@@ -30,12 +46,21 @@ class DashboardServerOptions {
   /// Whether to log each registered route on startup.
   final bool echoRoutes;
 
+  /// Prefix path used when serving the dashboard from a sub-route.
+  final String basePath;
+
   /// Returns a copy with the provided fields replaced.
-  DashboardServerOptions copyWith({String? host, int? port, bool? echoRoutes}) {
+  DashboardServerOptions copyWith({
+    String? host,
+    int? port,
+    bool? echoRoutes,
+    String? basePath,
+  }) {
     return DashboardServerOptions(
       host: host ?? this.host,
       port: port ?? this.port,
       echoRoutes: echoRoutes ?? this.echoRoutes,
+      basePath: basePath ?? this.basePath,
     );
   }
 }
@@ -53,7 +78,19 @@ Future<void> runDashboardServer({
   final dashboardService =
       service ?? await StemDashboardService.connect(resolvedConfig!);
   final stateOwner = state == null;
-  final dashboardState = state ?? DashboardState(service: dashboardService);
+  final dashboardState =
+      state ??
+      DashboardState(
+        service: dashboardService,
+        alertWebhookUrls: resolvedConfig?.alertWebhookUrls ?? const [],
+        alertBacklogThreshold: resolvedConfig?.alertBacklogThreshold ?? 500,
+        alertFailedTaskThreshold:
+            resolvedConfig?.alertFailedTaskThreshold ?? 25,
+        alertOfflineWorkerThreshold:
+            resolvedConfig?.alertOfflineWorkerThreshold ?? 1,
+        alertCooldown:
+            resolvedConfig?.alertCooldown ?? const Duration(minutes: 5),
+      );
 
   if (stateOwner) {
     await dashboardState.start();
@@ -61,10 +98,22 @@ Future<void> runDashboardServer({
   final engine = buildDashboardEngine(
     service: dashboardService,
     state: dashboardState,
+    basePath: options.basePath,
   );
+  final resolvedBasePath = normalizeDashboardBasePath(options.basePath);
+  final dashboardUrlPath = dashboardRoute(resolvedBasePath, '/');
 
-  stdout.writeln(
-    '[stem-dashboard] Starting on http://${options.host}:${options.port}',
+  stemLogger.info(
+    'Starting dashboard server',
+    stemLogContext(
+      component: 'dashboard',
+      subsystem: 'server',
+      fields: {
+        'host': options.host,
+        'port': options.port,
+        'basePath': dashboardUrlPath,
+      },
+    ),
   );
 
   try {
@@ -73,7 +122,9 @@ Future<void> runDashboardServer({
       port: options.port,
       echo: options.echoRoutes,
     );
+    await _waitForShutdownSignal();
   } finally {
+    await engine.close();
     if (stateOwner) {
       await dashboardState.dispose();
     }
@@ -83,15 +134,75 @@ Future<void> runDashboardServer({
   }
 }
 
+Future<void> _waitForShutdownSignal() async {
+  final completer = Completer<void>();
+  final subscriptions = <StreamSubscription<ProcessSignal>>[];
+
+  void complete(ProcessSignal signal) {
+    stemLogger.info(
+      'Shutdown signal received',
+      stemLogContext(
+        component: 'dashboard',
+        subsystem: 'server',
+        fields: {'signal': signal.toString()},
+      ),
+    );
+    if (!completer.isCompleted) {
+      completer.complete();
+    }
+  }
+
+  void watch(ProcessSignal signal) {
+    subscriptions.add(signal.watch().listen(complete));
+  }
+
+  watch(ProcessSignal.sigint);
+  if (!Platform.isWindows) {
+    watch(ProcessSignal.sigterm);
+  }
+
+  try {
+    await completer.future;
+  } finally {
+    for (final subscription in subscriptions) {
+      await subscription.cancel();
+    }
+  }
+}
+
 /// Constructs the dashboard engine with routes and Turbo streaming.
 Engine buildDashboardEngine({
   required DashboardDataSource service,
   required DashboardState state,
+  String basePath = '',
 }) {
   final engine = Engine();
-  _registerRoutes(engine, service, state);
+  mountDashboard(
+    engine: engine,
+    service: service,
+    state: state,
+    options: DashboardMountOptions(basePath: basePath),
+  );
+  return engine;
+}
+
+/// Mounts dashboard routes and websocket streams into an existing [engine].
+void mountDashboard({
+  required Engine engine,
+  required DashboardDataSource service,
+  required DashboardState state,
+  DashboardMountOptions options = const DashboardMountOptions(),
+}) {
+  final resolvedBasePath = normalizeDashboardBasePath(options.basePath);
+  registerDashboardRoutes(
+    engine,
+    service,
+    state,
+    basePath: resolvedBasePath,
+  );
+  final streamPath = dashboardRoute(resolvedBasePath, '/dash/streams');
   engine.ws(
-    '/dash/streams',
+    streamPath,
     TurboStreamSocketHandler(
       hub: state.hub,
       topicResolver: (context) =>
@@ -99,84 +210,414 @@ Engine buildDashboardEngine({
           const ['stem-dashboard:events'],
     ),
   );
-  return engine;
 }
 
-void _registerRoutes(
+/// Registers the dashboard HTTP routes on [engine].
+void registerDashboardRoutes(
   Engine engine,
   DashboardDataSource service,
-  DashboardState state,
-) {
+  DashboardState state, {
+  String basePath = '',
+}) {
   engine
     ..get(
-      '/',
-      (ctx) => _renderPage(ctx, DashboardPage.overview, service, state),
+      dashboardRoute(basePath, '/'),
+      (ctx) => _renderPage(
+        ctx,
+        DashboardPage.overview,
+        service,
+        state,
+        basePath: basePath,
+      ),
+    )
+    ..get(
+      dashboardRoute(basePath, '/tasks'),
+      (ctx) => _renderPage(
+        ctx,
+        DashboardPage.tasks,
+        service,
+        state,
+        basePath: basePath,
+      ),
+    )
+    ..get(
+      dashboardRoute(basePath, '/tasks/detail'),
+      (ctx) => _renderPage(
+        ctx,
+        DashboardPage.taskDetail,
+        service,
+        state,
+        basePath: basePath,
+      ),
+    )
+    ..get(
+      dashboardRoute(basePath, '/tasks/inline'),
+      (ctx) => _renderTaskInline(ctx, service, basePath: basePath),
+    )
+    ..get(
+      dashboardRoute(basePath, '/failures'),
+      (ctx) => _renderPage(
+        ctx,
+        DashboardPage.failures,
+        service,
+        state,
+        basePath: basePath,
+      ),
+    )
+    ..get(
+      dashboardRoute(basePath, '/search'),
+      (ctx) => _renderPage(
+        ctx,
+        DashboardPage.search,
+        service,
+        state,
+        basePath: basePath,
+      ),
+    )
+    ..get(
+      dashboardRoute(basePath, '/audit'),
+      (ctx) => _renderPage(
+        ctx,
+        DashboardPage.audit,
+        service,
+        state,
+        basePath: basePath,
+      ),
+    )
+    ..get(
+      dashboardRoute(basePath, '/events'),
+      (ctx) => _renderPage(
+        ctx,
+        DashboardPage.events,
+        service,
+        state,
+        basePath: basePath,
+      ),
+    )
+    ..get(
+      dashboardRoute(basePath, '/namespaces'),
+      (ctx) => _renderPage(
+        ctx,
+        DashboardPage.namespaces,
+        service,
+        state,
+        basePath: basePath,
+      ),
     )
     ..get(
-      '/tasks',
-      (ctx) => _renderPage(ctx, DashboardPage.tasks, service, state),
+      dashboardRoute(basePath, '/workflows'),
+      (ctx) => _renderPage(
+        ctx,
+        DashboardPage.workflows,
+        service,
+        state,
+        basePath: basePath,
+      ),
     )
     ..get(
-      '/events',
-      (ctx) => _renderPage(ctx, DashboardPage.events, service, state),
+      dashboardRoute(basePath, '/jobs'),
+      (ctx) => _renderPage(
+        ctx,
+        DashboardPage.jobs,
+        service,
+        state,
+        basePath: basePath,
+      ),
     )
     ..get(
-      '/workers',
-      (ctx) => _renderPage(ctx, DashboardPage.workers, service, state),
+      dashboardRoute(basePath, '/workers'),
+      (ctx) => _renderPage(
+        ctx,
+        DashboardPage.workers,
+        service,
+        state,
+        basePath: basePath,
+      ),
+    )
+    ..get(
+      dashboardRoute(basePath, '/partials/overview'),
+      (ctx) => _renderOverviewPartials(ctx, service, state, basePath: basePath),
+    )
+    ..post(
+      dashboardRoute(basePath, '/tasks/enqueue'),
+      (ctx) => _enqueueTask(ctx, service, state, basePath: basePath),
     )
-    ..post('/tasks/enqueue', (ctx) => _enqueueTask(ctx, service))
-    ..post('/workers/control', (ctx) => _controlWorkers(ctx, service))
-    ..post('/queues/replay', (ctx) => _replayDeadLetters(ctx, service));
+    ..post(
+      dashboardRoute(basePath, '/tasks/action'),
+      (ctx) => _taskAction(ctx, service, state, basePath: basePath),
+    )
+    ..post(
+      dashboardRoute(basePath, '/workers/control'),
+      (ctx) => _controlWorkers(ctx, service, state, basePath: basePath),
+    )
+    ..post(
+      dashboardRoute(basePath, '/queues/replay'),
+      (ctx) => _replayDeadLetters(ctx, service, state, basePath: basePath),
+    );
+}
+
+Future<Response> _renderOverviewPartials(
+  EngineContext ctx,
+  DashboardDataSource service,
+  DashboardState state, {
+  required String basePath,
+}) async {
+  try {
+    final queues = await service.fetchQueueSummaries();
+    final workers = await service.fetchWorkerStatuses();
+    final taskStatuses = await service.fetchTaskStatuses(limit: 300);
+    final sections = buildOverviewSections(
+      queues,
+      workers,
+      state.throughput,
+      taskStatuses,
+      defaultNamespace: _resolveDefaultNamespace(workers, taskStatuses),
+    );
+
+    final updates = [
+      turboStreamReplace(
+        target: 'overview-metrics',
+        html: prefixDashboardUrlAttributes(sections.metrics, basePath),
+      ),
+      turboStreamReplace(
+        target: 'overview-namespaces',
+        html: prefixDashboardUrlAttributes(sections.namespaces, basePath),
+      ),
+      turboStreamReplace(
+        target: 'overview-queue-table',
+        html: prefixDashboardUrlAttributes(sections.topQueues, basePath),
+      ),
+      turboStreamReplace(
+        target: 'overview-workflows',
+        html: prefixDashboardUrlAttributes(sections.workflows, basePath),
+      ),
+      turboStreamReplace(
+        target: 'overview-jobs',
+        html: prefixDashboardUrlAttributes(sections.jobs, basePath),
+      ),
+      turboStreamReplace(
+        target: 'overview-latency-table',
+        html: prefixDashboardUrlAttributes(sections.latency, basePath),
+      ),
+      turboStreamReplace(
+        target: 'overview-recent-tasks',
+        html: prefixDashboardUrlAttributes(sections.recentTasks, basePath),
+      ),
+    ].join('\n');
+
+    return ctx.turboStream(updates);
+  } on Object catch (error, stack) {
+    stemLogger.error(
+      'Failed to render overview partials',
+      stemLogContext(
+        component: 'dashboard',
+        subsystem: 'server',
+        fields: {
+          'error': error.toString(),
+          'stack': stack.toString(),
+        },
+      ),
+    );
+    return ctx.turboHtml(
+      '<div class="muted">Failed to refresh overview metrics.</div>',
+      statusCode: HttpStatus.internalServerError,
+    );
+  }
 }
 
 Future<Response> _renderPage(
   EngineContext ctx,
   DashboardPage page,
   DashboardDataSource service,
-  DashboardState state,
-) async {
+  DashboardState state, {
+  required String basePath,
+}) async {
   final turbo = ctx.turbo;
   try {
-    final queues = page == DashboardPage.events
-        ? const <QueueSummary>[]
-        : await service.fetchQueueSummaries();
+    final needsQueues =
+        page == DashboardPage.overview ||
+        page == DashboardPage.tasks ||
+        page == DashboardPage.workers ||
+        page == DashboardPage.search ||
+        page == DashboardPage.namespaces;
+    final queues = needsQueues
+        ? await service.fetchQueueSummaries()
+        : const <QueueSummary>[];
     final workers =
-        page == DashboardPage.overview || page == DashboardPage.workers
+        page == DashboardPage.overview ||
+            page == DashboardPage.workers ||
+            page == DashboardPage.search ||
+            page == DashboardPage.namespaces
         ? await service.fetchWorkerStatuses()
         : const <WorkerStatus>[];
-    final tasksOptions = page == DashboardPage.tasks
+    var tasksOptions = page == DashboardPage.tasks
         ? _parseTasksOptions(ctx.uri.queryParameters)
         : const TasksPageOptions();
+    final failuresOptions = page == DashboardPage.failures
+        ? _parseFailuresOptions(ctx.uri.queryParameters)
+        : const FailuresPageOptions();
+
+    final searchOptions = page == DashboardPage.search
+        ? _parseSearchOptions(ctx.uri.queryParameters)
+        : const SearchPageOptions();
+    final namespacesOptions = page == DashboardPage.namespaces
+        ? _parseNamespacesOptions(ctx.uri.queryParameters)
+        : const NamespacesPageOptions();
+    final workflowsOptions = page == DashboardPage.workflows
+        ? _parseWorkflowsOptions(ctx.uri.queryParameters)
+        : const WorkflowsPageOptions();
+    final jobsOptions = page == DashboardPage.jobs
+        ? _parseJobsOptions(ctx.uri.queryParameters)
+        : const JobsPageOptions();
     final workersOptions = page == DashboardPage.workers
         ? _parseWorkersOptions(ctx.uri.queryParameters)
         : const WorkersPageOptions();
 
+    List<DashboardTaskStatusEntry> taskStatuses;
+    if (page == DashboardPage.tasks) {
+      final localFilteringNeeded =
+          tasksOptions.hasNamespaceFilter ||
+          tasksOptions.hasTaskFilter ||
+          tasksOptions.hasRunIdFilter;
+      if (!localFilteringNeeded) {
+        final pageRequest = await service.fetchTaskStatuses(
+          state: tasksOptions.stateFilter,
+          queue: tasksOptions.filter,
+          limit: tasksOptions.pageSize + 1,
+          offset: tasksOptions.offset,
+        );
+        final hasNextPage = pageRequest.length > tasksOptions.pageSize;
+        taskStatuses = hasNextPage
+            ? pageRequest.take(tasksOptions.pageSize).toList(growable: false)
+            : pageRequest;
+        tasksOptions = tasksOptions.copyWith(
+          hasNextPage: hasNextPage,
+          hasPreviousPage: tasksOptions.page > 1,
+        );
+      } else {
+        final source = tasksOptions.hasRunIdFilter
+            ? await service.fetchTaskStatusesForRun(
+                tasksOptions.runId!,
+                limit: 1000,
+              )
+            : await service.fetchTaskStatuses(
+                state: tasksOptions.stateFilter,
+                queue: tasksOptions.filter,
+                limit: 1000,
+              );
+        final filtered = _applyTaskViewFilters(source, tasksOptions);
+        final pageItems = filtered
+            .skip(tasksOptions.offset)
+            .take(tasksOptions.pageSize)
+            .toList(growable: false);
+        final hasNextPage =
+            filtered.length > tasksOptions.offset + pageItems.length;
+        taskStatuses = pageItems;
+        tasksOptions = tasksOptions.copyWith(
+          hasNextPage: hasNextPage,
+          hasPreviousPage: tasksOptions.page > 1,
+        );
+      }
+    } else if (page == DashboardPage.failures) {
+      taskStatuses = await service.fetchTaskStatuses(
+        state: TaskState.failed,
+        queue: failuresOptions.queue,
+        limit: 300,
+      );
+    } else if (page == DashboardPage.overview) {
+      taskStatuses = await service.fetchTaskStatuses(limit: 300);
+    } else if (page == DashboardPage.search) {
+      taskStatuses = await service.fetchTaskStatuses(limit: 500);
+    } else if (page == DashboardPage.namespaces) {
+      taskStatuses = await service.fetchTaskStatuses(limit: 600);
+    } else if (page == DashboardPage.workflows) {
+      taskStatuses = await service.fetchTaskStatuses(limit: 700);
+    } else if (page == DashboardPage.jobs) {
+      taskStatuses = await service.fetchTaskStatuses(limit: 700);
+    } else {
+      taskStatuses = const <DashboardTaskStatusEntry>[];
+    }
+
+    final taskDetail = page == DashboardPage.taskDetail
+        ? await service.fetchTaskStatus(ctx.uri.queryParameters['id'] ?? '')
+        : null;
+    final runId = ctx.uri.queryParameters['runId']?.trim().isNotEmpty ?? false
+        ? ctx.uri.queryParameters['runId']!.trim()
+        : taskDetail?.runId;
+    final runTimeline = page == DashboardPage.taskDetail && runId != null
+        ? await service.fetchTaskStatusesForRun(runId, limit: 250)
+        : const <DashboardTaskStatusEntry>[];
+    final workflowRun = page == DashboardPage.taskDetail && runId != null
+        ? await service.fetchWorkflowRun(runId)
+        : null;
+    final workflowSteps = page == DashboardPage.taskDetail && runId != null
+        ? await service.fetchWorkflowSteps(runId)
+        : const <DashboardWorkflowStepSnapshot>[];
+
     final content = buildPageContent(
       page: page,
       queues: queues,
       workers: workers,
+      taskStatuses: taskStatuses,
+      taskDetail: taskDetail,
+      runTimeline: runTimeline,
+      workflowRun: workflowRun,
+      workflowSteps: workflowSteps,
+      auditEntries: page == DashboardPage.search || page == DashboardPage.audit
+          ? state.auditEntries
+          : const <DashboardAuditEntry>[],
       throughput: page == DashboardPage.overview ? state.throughput : null,
       events: page == DashboardPage.events ? state.events : const [],
+      defaultNamespace: _resolveDefaultNamespace(workers, taskStatuses),
       tasksOptions: tasksOptions,
       workersOptions: workersOptions,
+      failuresOptions: failuresOptions,
+      searchOptions: searchOptions,
+      namespacesOptions: namespacesOptions,
+      workflowsOptions: workflowsOptions,
+      jobsOptions: jobsOptions,
     );
+    final contentWithBasePath = prefixDashboardUrlAttributes(content, basePath);
+    final streamPath = dashboardRoute(basePath, '/dash/streams');
 
     if (turbo.isFrameRequest) {
-      return ctx.turboFrame(renderFrame(page, content));
+      return ctx.turboFrame(renderFrame(page, contentWithBasePath));
     }
 
-    return ctx.turboHtml(renderLayout(page, content));
+    return ctx.turboHtml(
+      renderLayout(
+        page,
+        contentWithBasePath,
+        basePath: basePath,
+        streamPath: streamPath,
+      ),
+    );
   } on Object catch (error, stack) {
-    stderr
-      ..writeln(
-        '[stem-dashboard] Failed to render ${page.name} page: $error',
-      )
-      ..writeln(stack);
+    stemLogger.error(
+      'Failed to render dashboard page',
+      stemLogContext(
+        component: 'dashboard',
+        subsystem: 'server',
+        fields: {
+          'page': page.name,
+          'error': error.toString(),
+          'stack': stack.toString(),
+        },
+      ),
+    );
     final errorContent = _renderErrorPanel(error);
     if (turbo.isFrameRequest) {
-      return ctx.turboFrame(renderFrame(page, errorContent));
+      return ctx.turboFrame(
+        renderFrame(page, prefixDashboardUrlAttributes(errorContent, basePath)),
+      );
     }
-    return ctx.turboHtml(renderLayout(page, errorContent));
+    return ctx.turboHtml(
+      renderLayout(
+        page,
+        prefixDashboardUrlAttributes(errorContent, basePath),
+        basePath: basePath,
+      ),
+    );
   }
 }
 
@@ -193,15 +634,60 @@ String _renderErrorPanel(Object error) {
 ''';
 }
 
+Future<Response> _renderTaskInline(
+  EngineContext ctx,
+  DashboardDataSource service, {
+  required String basePath,
+}) async {
+  final taskId = (ctx.uri.queryParameters['id'] ?? '').trim();
+  final target = _sanitizeDomTarget(ctx.uri.queryParameters['target'] ?? '');
+  if (target.isEmpty) {
+    return ctx.turboHtml(
+      '<div class="muted">Missing inline target.</div>',
+      statusCode: HttpStatus.badRequest,
+    );
+  }
+
+  DashboardTaskStatusEntry? task;
+  if (taskId.isNotEmpty) {
+    task = await service.fetchTaskStatus(taskId);
+  }
+
+  final content = prefixDashboardUrlAttributes(
+    buildTaskInlineContent(task),
+    basePath,
+  );
+  final payload =
+      '<div id="$target" data-task-inline-shell="loaded">$content</div>';
+  return ctx.turboStream(turboStreamReplace(target: target, html: payload));
+}
+
+String _sanitizeDomTarget(String raw) {
+  final trimmed = raw.trim();
+  if (trimmed.isEmpty) return '';
+  final validPattern = RegExp(r'^[A-Za-z][A-Za-z0-9:_-]*$');
+  return validPattern.hasMatch(trimmed) ? trimmed : '';
+}
+
 Future<Response> _enqueueTask(
   EngineContext ctx,
   DashboardDataSource service,
-) async {
+  DashboardState state, {
+  required String basePath,
+}) async {
+  final tasksPath = dashboardRoute(basePath, '/tasks');
   try {
     final queue = (await ctx.postForm('queue')).trim();
     final task = (await ctx.postForm('task')).trim();
     if (queue.isEmpty || task.isEmpty) {
-      return ctx.turboSeeOther('/tasks?error=missing-fields');
+      state.recordAudit(
+        kind: 'action',
+        action: 'task.enqueue',
+        status: 'error',
+        actor: 'dashboard',
+        summary: 'Task enqueue rejected: queue/task missing.',
+      );
+      return ctx.turboSeeOther('$tasksPath?error=missing-fields');
     }
 
     final payloadText = (await ctx.postForm('payload')).trim();
@@ -212,10 +698,24 @@ Future<Response> _enqueueTask(
         if (decoded is Map<String, dynamic>) {
           args = decoded;
         } else {
-          return ctx.turboSeeOther('/tasks?error=invalid-payload');
+          state.recordAudit(
+            kind: 'action',
+            action: 'task.enqueue',
+            status: 'error',
+            actor: 'dashboard',
+            summary: 'Task enqueue rejected: payload not a JSON object.',
+          );
+          return ctx.turboSeeOther('$tasksPath?error=invalid-payload');
         }
       } on Object {
-        return ctx.turboSeeOther('/tasks?error=invalid-payload');
+        state.recordAudit(
+          kind: 'action',
+          action: 'task.enqueue',
+          status: 'error',
+          actor: 'dashboard',
+          summary: 'Task enqueue rejected: invalid JSON payload.',
+        );
+        return ctx.turboSeeOther('$tasksPath?error=invalid-payload');
       }
     }
 
@@ -235,12 +735,176 @@ Future<Response> _enqueueTask(
         maxRetries: maxRetries,
       ),
     );
-    return ctx.turboSeeOther('/tasks?flash=queued');
+    state.recordAudit(
+      kind: 'action',
+      action: 'task.enqueue',
+      status: 'ok',
+      actor: 'dashboard',
+      summary: 'Queued task "$task" on "$queue".',
+      metadata: {'queue': queue, 'task': task},
+    );
+    return ctx.turboSeeOther('$tasksPath?flash=queued');
+  } on Object catch (error, stack) {
+    stemLogger.error(
+      'Dashboard enqueue failed',
+      stemLogContext(
+        component: 'dashboard',
+        subsystem: 'server',
+        fields: {
+          'error': error.toString(),
+          'stack': stack.toString(),
+        },
+      ),
+    );
+    state.recordAudit(
+      kind: 'action',
+      action: 'task.enqueue',
+      status: 'error',
+      actor: 'dashboard',
+      summary: 'Task enqueue failed: $error',
+    );
+    return ctx.turboSeeOther('$tasksPath?error=enqueue-failed');
+  }
+}
+
+Future<Response> _taskAction(
+  EngineContext ctx,
+  DashboardDataSource service,
+  DashboardState state, {
+  required String basePath,
+}) async {
+  final redirect = _resolveRedirectPath(
+    await ctx.defaultPostForm('redirect', dashboardRoute(basePath, '/tasks')),
+    fallbackPath: dashboardRoute(basePath, '/tasks'),
+  );
+  try {
+    final action = (await ctx.postForm('action')).trim().toLowerCase();
+    final taskId = (await ctx.postForm('taskId')).trim();
+    final queueRaw = (await ctx.defaultPostForm('queue', '')).trim();
+    final queue = queueRaw.isEmpty ? null : queueRaw;
+
+    if (taskId.isEmpty) {
+      state.recordAudit(
+        kind: 'action',
+        action: 'task.action',
+        status: 'error',
+        actor: 'dashboard',
+        summary: 'Task action rejected: missing task id.',
+      );
+      return ctx.turboSeeOther(
+        _appendRedirectQuery(redirect, {'error': 'Task ID is required.'}),
+      );
+    }
+
+    switch (action) {
+      case 'cancel':
+        final reasonRaw = (await ctx.defaultPostForm(
+          'reason',
+          'Cancelled from dashboard.',
+        )).trim();
+        final terminate = _isTruthy(
+          (await ctx.defaultPostForm('terminate', 'false')).trim(),
+        );
+        final revoked = await service.revokeTask(
+          taskId,
+          terminate: terminate,
+          reason: reasonRaw.isEmpty ? null : reasonRaw,
+        );
+        if (!revoked) {
+          state.recordAudit(
+            kind: 'action',
+            action: 'task.cancel',
+            status: 'error',
+            actor: 'dashboard',
+            summary: 'Failed to revoke task $taskId.',
+            metadata: {'taskId': taskId, 'queue': ?queue},
+          );
+          return ctx.turboSeeOther(
+            _appendRedirectQuery(redirect, {
+              'error': 'Unable to revoke task $taskId.',
+            }),
+          );
+        }
+        state.recordAudit(
+          kind: 'action',
+          action: 'task.cancel',
+          status: 'ok',
+          actor: 'dashboard',
+          summary: 'Revocation requested for $taskId.',
+          metadata: {'taskId': taskId, 'queue': ?queue},
+        );
+        return ctx.turboSeeOther(
+          _appendRedirectQuery(redirect, {
+            'flash': 'Revocation requested for task $taskId.',
+          }),
+        );
+      case 'replay':
+        final replayed = await service.replayTaskById(taskId, queue: queue);
+        if (!replayed) {
+          state.recordAudit(
+            kind: 'action',
+            action: 'task.replay',
+            status: 'error',
+            actor: 'dashboard',
+            summary: 'Task $taskId was not found in dead letters.',
+            metadata: {'taskId': taskId, 'queue': ?queue},
+          );
+          return ctx.turboSeeOther(
+            _appendRedirectQuery(redirect, {
+              'error': 'Task $taskId was not found in dead letters.',
+            }),
+          );
+        }
+        state.recordAudit(
+          kind: 'action',
+          action: 'task.replay',
+          status: 'ok',
+          actor: 'dashboard',
+          summary: 'Replayed dead-letter task $taskId.',
+          metadata: {'taskId': taskId, 'queue': ?queue},
+        );
+        return ctx.turboSeeOther(
+          _appendRedirectQuery(redirect, {
+            'flash': 'Replayed dead-letter task $taskId as a new envelope.',
+          }),
+        );
+      default:
+        state.recordAudit(
+          kind: 'action',
+          action: 'task.action',
+          status: 'error',
+          actor: 'dashboard',
+          summary: 'Unsupported task action "$action".',
+          metadata: {'taskId': taskId},
+        );
+        return ctx.turboSeeOther(
+          _appendRedirectQuery(redirect, {
+            'error': 'Unsupported task action "$action".',
+          }),
+        );
+    }
   } on Object catch (error, stack) {
-    stderr
-      ..writeln('[stem-dashboard] enqueue failed: $error')
-      ..writeln(stack);
-    return ctx.turboSeeOther('/tasks?error=enqueue-failed');
+    stemLogger.error(
+      'Dashboard task action failed',
+      stemLogContext(
+        component: 'dashboard',
+        subsystem: 'server',
+        fields: {
+          'error': error.toString(),
+          'stack': stack.toString(),
+        },
+      ),
+    );
+    state.recordAudit(
+      kind: 'action',
+      action: 'task.action',
+      status: 'error',
+      actor: 'dashboard',
+      summary: 'Task action failed: $error',
+    );
+    return ctx.turboSeeOther(
+      _appendRedirectQuery(redirect, {'error': 'Task action failed.'}),
+    );
   }
 }
 
@@ -256,10 +920,38 @@ TasksPageOptions _parseTasksOptions(Map<String, String> params) {
   final descending = direction == 'desc';
   final filterRaw = params['queue']?.trim();
   final filter = filterRaw == null || filterRaw.isEmpty ? null : filterRaw;
+  final namespaceRaw = params['namespace']?.trim();
+  final namespaceFilter = namespaceRaw == null || namespaceRaw.isEmpty
+      ? null
+      : namespaceRaw;
+  final taskRaw = params['task']?.trim();
+  final taskFilter = taskRaw == null || taskRaw.isEmpty ? null : taskRaw;
+  final runRaw = params['runId']?.trim();
+  final runId = runRaw == null || runRaw.isEmpty ? null : runRaw;
+  final stateRaw = params['state']?.trim().toLowerCase();
+  final stateFilter = switch (stateRaw) {
+    'queued' => TaskState.queued,
+    'running' => TaskState.running,
+    'succeeded' => TaskState.succeeded,
+    'failed' => TaskState.failed,
+    'retried' => TaskState.retried,
+    'cancelled' => TaskState.cancelled,
+    _ => null,
+  };
+  final pageRaw = int.tryParse((params['page'] ?? '1').trim());
+  final page = pageRaw == null || pageRaw < 1 ? 1 : pageRaw;
+  final pageSizeRaw = int.tryParse((params['pageSize'] ?? '25').trim());
+  final pageSize = (pageSizeRaw ?? 25).clamp(25, 200);
   return TasksPageOptions(
     sortKey: sortKey,
     descending: descending,
     filter: filter,
+    namespaceFilter: namespaceFilter,
+    taskFilter: taskFilter,
+    runId: runId,
+    stateFilter: stateFilter,
+    page: page,
+    pageSize: pageSize,
     flashKey: params['flash']?.trim().isEmpty ?? false ? null : params['flash'],
     errorKey: params['error']?.trim().isEmpty ?? false ? null : params['error'],
   );
@@ -269,22 +961,145 @@ WorkersPageOptions _parseWorkersOptions(Map<String, String> params) {
   final flash = params['flash']?.trim();
   final error = params['error']?.trim();
   final target = params['scope']?.trim();
+  final namespace = params['namespace']?.trim();
   return WorkersPageOptions(
     flashMessage: flash?.isNotEmpty ?? false ? flash : null,
     errorMessage: error?.isNotEmpty ?? false ? error : null,
     scope: target?.isNotEmpty ?? false ? target : null,
+    namespaceFilter: namespace?.isNotEmpty ?? false ? namespace : null,
+  );
+}
+
+FailuresPageOptions _parseFailuresOptions(Map<String, String> params) {
+  final queue = params['queue']?.trim();
+  final flash = params['flash']?.trim();
+  final error = params['error']?.trim();
+  return FailuresPageOptions(
+    queue: queue?.isEmpty ?? true ? null : queue,
+    flashMessage: flash?.isEmpty ?? true ? null : flash,
+    errorMessage: error?.isEmpty ?? true ? null : error,
+  );
+}
+
+SearchPageOptions _parseSearchOptions(Map<String, String> params) {
+  final query = params['q']?.trim();
+  final scopeRaw = (params['scope'] ?? 'all').trim().toLowerCase();
+  final scope = switch (scopeRaw) {
+    'tasks' => 'tasks',
+    'workers' => 'workers',
+    'queues' => 'queues',
+    'audit' => 'audit',
+    _ => 'all',
+  };
+  return SearchPageOptions(
+    query: query?.isEmpty ?? true ? null : query,
+    scope: scope,
+  );
+}
+
+NamespacesPageOptions _parseNamespacesOptions(Map<String, String> params) {
+  final namespace = params['namespace']?.trim();
+  return NamespacesPageOptions(
+    namespace: namespace?.isNotEmpty ?? false ? namespace : null,
   );
 }
 
+WorkflowsPageOptions _parseWorkflowsOptions(Map<String, String> params) {
+  final workflow = params['workflow']?.trim();
+  final runId = params['runId']?.trim();
+  return WorkflowsPageOptions(
+    workflow: workflow?.isNotEmpty ?? false ? workflow : null,
+    runId: runId?.isNotEmpty ?? false ? runId : null,
+  );
+}
+
+JobsPageOptions _parseJobsOptions(Map<String, String> params) {
+  final task = params['task']?.trim();
+  final queue = params['queue']?.trim();
+  return JobsPageOptions(
+    task: task?.isNotEmpty ?? false ? task : null,
+    queue: queue?.isNotEmpty ?? false ? queue : null,
+  );
+}
+
+List<DashboardTaskStatusEntry> _applyTaskViewFilters(
+  List<DashboardTaskStatusEntry> tasks,
+  TasksPageOptions options,
+) {
+  final queueFilter = options.filter?.toLowerCase();
+  final namespaceFilter = options.namespaceFilter?.toLowerCase();
+  final taskFilter = options.taskFilter?.toLowerCase();
+  final runFilter = options.runId?.toLowerCase();
+  return tasks.where((entry) {
+    if (options.hasFilter) {
+      final queue = entry.queue.toLowerCase();
+      if (!(queueFilter != null && queue.contains(queueFilter))) {
+        return false;
+      }
+    }
+    if (options.hasNamespaceFilter &&
+        entry.namespace.toLowerCase() != namespaceFilter) {
+      return false;
+    }
+    if (options.hasTaskFilter) {
+      final name = entry.taskName.toLowerCase();
+      if (!(taskFilter != null && name.contains(taskFilter))) {
+        return false;
+      }
+    }
+    if (options.hasRunIdFilter) {
+      final runId = entry.runId?.toLowerCase() ?? '';
+      if (!(runFilter != null && runId.contains(runFilter))) {
+        return false;
+      }
+    }
+    if (options.hasStateFilter && entry.state != options.stateFilter) {
+      return false;
+    }
+    return true;
+  }).toList(growable: false);
+}
+
+String _resolveDefaultNamespace(
+  List<WorkerStatus> workers,
+  List<DashboardTaskStatusEntry> tasks,
+) {
+  for (final worker in workers) {
+    final value = worker.namespace.trim();
+    if (value.isNotEmpty) return value;
+  }
+  for (final task in tasks) {
+    final value = task.namespace.trim();
+    if (value.isNotEmpty) return value;
+  }
+  return 'stem';
+}
+
 Future<Response> _controlWorkers(
   EngineContext ctx,
   DashboardDataSource service,
-) async {
+  DashboardState state, {
+  required String basePath,
+}) async {
+  final namespaceFilter = (await ctx.defaultPostForm('namespace', '')).trim();
+  final workersPath = namespaceFilter.isEmpty
+      ? dashboardRoute(basePath, '/workers')
+      : _appendRedirectQuery(
+          dashboardRoute(basePath, '/workers'),
+          {'namespace': namespaceFilter},
+        );
   try {
     final rawAction = (await ctx.postForm('action')).trim().toLowerCase();
     if (rawAction.isEmpty) {
+      state.recordAudit(
+        kind: 'action',
+        action: 'worker.control',
+        status: 'error',
+        actor: 'dashboard',
+        summary: 'Control action missing.',
+      );
       return ctx.turboSeeOther(
-        '/workers?error=${Uri.encodeComponent('Control action missing.')}',
+        '$workersPath?error=${Uri.encodeComponent('Control action missing.')}',
       );
     }
 
@@ -313,10 +1128,17 @@ Future<Response> _controlWorkers(
     };
 
     if (commandType == null) {
+      state.recordAudit(
+        kind: 'action',
+        action: 'worker.control',
+        status: 'error',
+        actor: 'dashboard',
+        summary: 'Unsupported control action "$rawAction".',
+      );
       final encodedError = Uri.encodeComponent(
         'Unsupported control action "$rawAction".',
       );
-      return ctx.turboSeeOther('/workers?error=$encodedError');
+      return ctx.turboSeeOther('$workersPath?error=$encodedError');
     }
 
     final payload = <String, Object?>{};
@@ -363,10 +1185,18 @@ Future<Response> _controlWorkers(
       if (primaryError is String && primaryError.isNotEmpty) {
         message.write(' Example: $primaryError');
       }
+      state.recordAudit(
+        kind: 'action',
+        action: 'worker.control.$rawAction',
+        status: 'error',
+        actor: 'dashboard',
+        summary:
+            '$label command reached $scope with $errorReplies error replies.',
+      );
       final encodedMessage = Uri.encodeComponent(message.toString());
       final encodedScope = Uri.encodeComponent(scope);
       return ctx.turboSeeOther(
-        '/workers?error=$encodedMessage&scope=$encodedScope',
+        '$workersPath?error=$encodedMessage&scope=$encodedScope',
       );
     }
 
@@ -374,17 +1204,39 @@ Future<Response> _controlWorkers(
     final message = replies.isEmpty
         ? '$label command sent to $scope.'
         : '$label command acknowledged by $okReplies $ackLabel from $scope.';
+    state.recordAudit(
+      kind: 'action',
+      action: 'worker.control.$rawAction',
+      status: 'ok',
+      actor: 'dashboard',
+      summary: message,
+    );
     final encodedMessage = Uri.encodeComponent(message);
     final encodedScope = Uri.encodeComponent(scope);
     return ctx.turboSeeOther(
-      '/workers?flash=$encodedMessage&scope=$encodedScope',
+      '$workersPath?flash=$encodedMessage&scope=$encodedScope',
     );
   } on Object catch (error, stack) {
-    stderr
-      ..writeln('[stem-dashboard] control command failed: $error')
-      ..writeln(stack);
+    stemLogger.error(
+      'Dashboard control command failed',
+      stemLogContext(
+        component: 'dashboard',
+        subsystem: 'server',
+        fields: {
+          'error': error.toString(),
+          'stack': stack.toString(),
+        },
+      ),
+    );
+    state.recordAudit(
+      kind: 'action',
+      action: 'worker.control',
+      status: 'error',
+      actor: 'dashboard',
+      summary: 'Control command failed: $error',
+    );
     return ctx.turboSeeOther(
-      '/workers?error=${Uri.encodeComponent('Control command failed.')}',
+      '$workersPath?error=${Uri.encodeComponent('Control command failed.')}',
     );
   }
 }
@@ -392,14 +1244,28 @@ Future<Response> _controlWorkers(
 Future<Response> _replayDeadLetters(
   EngineContext ctx,
   DashboardDataSource service,
-) async {
+  DashboardState state, {
+  required String basePath,
+}) async {
+  final redirect = _resolveRedirectPath(
+    await ctx.defaultPostForm('redirect', dashboardRoute(basePath, '/workers')),
+    fallbackPath: dashboardRoute(basePath, '/workers'),
+  );
   try {
     final queue = (await ctx.postForm('queue')).trim();
     if (queue.isEmpty) {
-      final encodedError = Uri.encodeComponent(
-        'Queue name is required for replay.',
+      state.recordAudit(
+        kind: 'action',
+        action: 'queue.replay',
+        status: 'error',
+        actor: 'dashboard',
+        summary: 'Replay rejected: missing queue name.',
+      );
+      return ctx.turboSeeOther(
+        _appendRedirectQuery(redirect, {
+          'error': 'Queue name is required for replay.',
+        }),
       );
-      return ctx.turboSeeOther('/workers?error=$encodedError');
     }
     final limitInput = (await ctx.defaultPostForm('limit', '50')).trim();
     final limit = int.tryParse(limitInput)?.clamp(1, 500) ?? 50;
@@ -421,10 +1287,20 @@ Future<Response> _replayDeadLetters(
       final message = dryRun
           ? 'Dry run replay found no dead letters for "$queue".'
           : 'No dead letters replayed for "$queue".';
-      final encodedMessage = Uri.encodeComponent(message);
-      final encodedScope = Uri.encodeComponent(scope);
+      state.recordAudit(
+        kind: 'action',
+        action: 'queue.replay',
+        status: 'ok',
+        actor: 'dashboard',
+        summary: message,
+        metadata: {'queue': queue, 'dryRun': dryRun},
+      );
       return ctx.turboSeeOther(
-        '/workers?flash=$encodedMessage&scope=$encodedScope',
+        _appendRedirectQuery(redirect, {
+          'flash': message,
+          'scope': scope,
+          if (redirect == '/failures') 'queue': queue,
+        }),
       );
     }
 
@@ -434,17 +1310,86 @@ Future<Response> _replayDeadLetters(
         ? 'Dry run replay would consider $entryCount dead letter$entrySuffix '
               'for "$queue".'
         : 'Replayed $entryCount dead letter$entrySuffix for "$queue".';
-    final encodedMessage = Uri.encodeComponent(message);
-    final encodedScope = Uri.encodeComponent(scope);
+    state.recordAudit(
+      kind: 'action',
+      action: 'queue.replay',
+      status: 'ok',
+      actor: 'dashboard',
+      summary: message,
+      metadata: {'queue': queue, 'entries': entryCount, 'dryRun': dryRun},
+    );
     return ctx.turboSeeOther(
-      '/workers?flash=$encodedMessage&scope=$encodedScope',
+      _appendRedirectQuery(redirect, {
+        'flash': message,
+        'scope': scope,
+        if (redirect == '/failures') 'queue': queue,
+      }),
     );
   } on Object catch (error, stack) {
-    stderr
-      ..writeln('[stem-dashboard] DLQ replay failed: $error')
-      ..writeln(stack);
+    stemLogger.error(
+      'Dashboard dead-letter replay failed',
+      stemLogContext(
+        component: 'dashboard',
+        subsystem: 'server',
+        fields: {
+          'error': error.toString(),
+          'stack': stack.toString(),
+        },
+      ),
+    );
+    state.recordAudit(
+      kind: 'action',
+      action: 'queue.replay',
+      status: 'error',
+      actor: 'dashboard',
+      summary: 'Dead-letter replay failed: $error',
+    );
     return ctx.turboSeeOther(
-      '/workers?error=${Uri.encodeComponent('Failed to replay dead letters.')}',
+      _appendRedirectQuery(redirect, {
+        'error': 'Failed to replay dead letters.',
+      }),
     );
   }
 }
+
+String _resolveRedirectPath(
+  String? raw, {
+  required String fallbackPath,
+}) {
+  final value = raw?.trim() ?? '';
+  if (value.isEmpty || !value.startsWith('/')) {
+    return fallbackPath;
+  }
+  final uri = Uri.tryParse(value);
+  if (uri == null || uri.host.isNotEmpty || uri.scheme.isNotEmpty) {
+    return fallbackPath;
+  }
+  return value;
+}
+
+String _appendRedirectQuery(
+  String path,
+  Map<String, String> params,
+) {
+  final uri = Uri.parse(path);
+  final merged = Map<String, String>.from(uri.queryParameters);
+  for (final entry in params.entries) {
+    if (entry.value.trim().isEmpty) continue;
+    merged[entry.key] = entry.value;
+  }
+  final query = merged.entries
+      .map(
+        (entry) {
+          final key = Uri.encodeQueryComponent(entry.key);
+          final value = Uri.encodeQueryComponent(entry.value);
+          return '$key=$value';
+        },
+      )
+      .join('&');
+  return query.isEmpty ? uri.path : '${uri.path}?$query';
+}
+
+bool _isTruthy(String value) {
+  final normalized = value.trim().toLowerCase();
+  return normalized == 'true' || normalized == '1' || normalized == 'yes';
+}
diff --git a/packages/dashboard/lib/src/services/models.dart b/packages/dashboard/lib/src/services/models.dart
index 54730d0..42681ef 100644
--- a/packages/dashboard/lib/src/services/models.dart
+++ b/packages/dashboard/lib/src/services/models.dart
@@ -1,4 +1,14 @@
-import 'package:stem/stem.dart' show QueueHeartbeat, WorkerHeartbeat, stemNow;
+import 'package:stem/stem.dart'
+    show
+        QueueHeartbeat,
+        RunState,
+        TaskState,
+        TaskStatus,
+        TaskStatusRecord,
+        WorkerHeartbeat,
+        WorkflowStatus,
+        WorkflowStepEntry,
+        stemNow;
 
 /// Aggregate counts for a queue at a point in time.
 class QueueSummary {
@@ -181,6 +191,604 @@ class DashboardEvent {
   final Map<String, Object?> metadata;
 }
 
+/// Audit log entry for operator actions and automated alerts.
+class DashboardAuditEntry {
+  /// Creates an audit log entry.
+  const DashboardAuditEntry({
+    required this.id,
+    required this.timestamp,
+    required this.kind,
+    required this.action,
+    required this.status,
+    this.actor,
+    this.summary,
+    this.metadata = const {},
+  });
+
+  /// Stable entry identifier.
+  final String id;
+
+  /// Event timestamp.
+  final DateTime timestamp;
+
+  /// Entry kind: `action` or `alert`.
+  final String kind;
+
+  /// Action/event type identifier.
+  final String action;
+
+  /// Status marker (`ok`, `error`, `sent`, `skipped`, etc.).
+  final String status;
+
+  /// Actor identifier where applicable.
+  final String? actor;
+
+  /// Human-readable summary.
+  final String? summary;
+
+  /// Optional metadata payload.
+  final Map<String, Object?> metadata;
+}
+
+/// Dashboard-friendly projection of a persisted task status record.
+class DashboardTaskStatusEntry {
+  /// Creates a task status entry.
+  const DashboardTaskStatusEntry({
+    required this.id,
+    required this.state,
+    required this.attempt,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.queue,
+    required this.taskName,
+    this.errorMessage,
+    this.errorType,
+    this.errorStack,
+    this.payload,
+    this.meta = const {},
+    this.runId,
+    this.workflowName,
+    this.workflowStep,
+    this.workflowStepIndex,
+    this.workflowIteration,
+    this.retryable = false,
+  });
+
+  /// Builds a dashboard task entry from a [TaskStatusRecord].
+  factory DashboardTaskStatusEntry.fromRecord(TaskStatusRecord record) {
+    final status = record.status;
+    final meta = status.meta;
+    final error = status.error;
+    final queue = _readQueue(meta);
+    final taskName = _readTaskName(meta);
+    return DashboardTaskStatusEntry(
+      id: status.id,
+      state: status.state,
+      attempt: status.attempt,
+      createdAt: record.createdAt,
+      updatedAt: record.updatedAt,
+      queue: queue,
+      taskName: taskName,
+      errorMessage: error?.message,
+      errorType: error?.type,
+      errorStack: error?.stack,
+      payload: status.payload,
+      meta: meta,
+      runId: meta['stem.workflow.runId']?.toString(),
+      workflowName: meta['stem.workflow.name']?.toString(),
+      workflowStep: meta['stem.workflow.step']?.toString(),
+      workflowStepIndex: _readInt(meta['stem.workflow.stepIndex']),
+      workflowIteration: _readInt(meta['stem.workflow.iteration']),
+      retryable: error?.retryable ?? false,
+    );
+  }
+
+  /// Builds a dashboard task entry from a plain [TaskStatus].
+  ///
+  /// Use this when the result backend can return the current status but not
+  /// the persisted record timestamps.
+  factory DashboardTaskStatusEntry.fromStatus(
+    TaskStatus status, {
+    DateTime? observedAt,
+  }) {
+    final seenAt = observedAt?.toUtc() ?? stemNow().toUtc();
+    final meta = status.meta;
+    final queue = _readQueue(meta);
+    final taskName = _readTaskName(meta);
+    final error = status.error;
+    return DashboardTaskStatusEntry(
+      id: status.id,
+      state: status.state,
+      attempt: status.attempt,
+      createdAt: seenAt,
+      updatedAt: seenAt,
+      queue: queue,
+      taskName: taskName,
+      errorMessage: error?.message,
+      errorType: error?.type,
+      errorStack: error?.stack,
+      payload: status.payload,
+      meta: meta,
+      runId: meta['stem.workflow.runId']?.toString(),
+      workflowName: meta['stem.workflow.name']?.toString(),
+      workflowStep: meta['stem.workflow.step']?.toString(),
+      workflowStepIndex: _readInt(meta['stem.workflow.stepIndex']),
+      workflowIteration: _readInt(meta['stem.workflow.iteration']),
+      retryable: error?.retryable ?? false,
+    );
+  }
+
+  /// Task identifier.
+  final String id;
+
+  /// Current lifecycle state.
+  final TaskState state;
+
+  /// Attempt count for this status.
+  final int attempt;
+
+  /// Record creation timestamp.
+  final DateTime createdAt;
+
+  /// Record update timestamp.
+  final DateTime updatedAt;
+
+  /// Queue associated with the task.
+  final String queue;
+
+  /// Task handler name if available.
+  final String taskName;
+
+  /// Failure message when [state] is failed/retried.
+  final String? errorMessage;
+
+  /// Failure type when [state] is failed/retried.
+  final String? errorType;
+
+  /// Failure stack trace when captured by the backend.
+  final String? errorStack;
+
+  /// Persisted task result payload.
+  final Object? payload;
+
+  /// Raw task metadata from the result backend.
+  final Map<String, Object?> meta;
+
+  /// Workflow run identifier, when this task is part of a workflow.
+  final String? runId;
+
+  /// Workflow name, when present.
+  final String? workflowName;
+
+  /// Workflow step name, when present.
+  final String? workflowStep;
+
+  /// Workflow step index, when present.
+  final int? workflowStepIndex;
+
+  /// Workflow iteration, when present.
+  final int? workflowIteration;
+
+  /// Whether the failure is marked retryable.
+  final bool retryable;
+
+  /// Namespace reported by task metadata, or `stem` when unavailable.
+  String get namespace => _readNamespace(meta);
+
+  /// Whether this entry represents a workflow task.
+  bool get isWorkflowTask =>
+      runId != null ||
+      taskName.startsWith('stem.workflow.') ||
+      taskName.contains('workflow');
+
+  /// Whether this entry is in a failed terminal state.
+  bool get isFailure =>
+      state == TaskState.failed || state == TaskState.cancelled;
+
+  /// Fingerprint used to group related failures in diagnostics views.
+  String get errorFingerprint {
+    final type = (errorType ?? 'Unknown').trim();
+    final message = (errorMessage ?? 'No message').trim();
+    return '$type: $message';
+  }
+
+  /// Task processing start timestamp, when recorded by workers.
+  DateTime? get startedAt => _readDate(meta['startedAt']);
+
+  /// Task completion/failure timestamp, when recorded by workers.
+  DateTime? get finishedAt =>
+      _readDate(meta['completedAt']) ?? _readDate(meta['failedAt']);
+
+  /// Estimated queue wait from persisted record creation to processing start.
+  Duration? get queueWait {
+    final started = startedAt;
+    if (started == null) return null;
+    final value = started.difference(createdAt.toUtc());
+    if (value.isNegative) return Duration.zero;
+    return value;
+  }
+
+  /// Estimated processing time from start to finish/last update.
+  Duration? get processingTime {
+    final started = startedAt;
+    if (started == null) return null;
+    final end = finishedAt ?? updatedAt.toUtc();
+    final value = end.difference(started);
+    if (value.isNegative) return Duration.zero;
+    return value;
+  }
+}
+
+/// App-focused namespace summary for dashboard observability.
+class DashboardNamespaceSnapshot {
+  /// Creates a namespace summary.
+  const DashboardNamespaceSnapshot({
+    required this.namespace,
+    required this.queueCount,
+    required this.workerCount,
+    required this.pending,
+    required this.inflight,
+    required this.deadLetters,
+    required this.runningTasks,
+    required this.failedTasks,
+    required this.workflowRuns,
+  });
+
+  /// Namespace identifier.
+  final String namespace;
+
+  /// Number of distinct queues seen for this namespace.
+  final int queueCount;
+
+  /// Number of active workers in this namespace.
+  final int workerCount;
+
+  /// Pending queue depth.
+  final int pending;
+
+  /// In-flight envelope count.
+  final int inflight;
+
+  /// Dead-letter count.
+  final int deadLetters;
+
+  /// Running task statuses.
+  final int runningTasks;
+
+  /// Failed terminal task statuses.
+  final int failedTasks;
+
+  /// Distinct workflow run ids observed in task metadata.
+  final int workflowRuns;
+}
+
+/// Aggregate task summary grouped by task name.
+class DashboardJobSummary {
+  /// Creates a task/job summary.
+  const DashboardJobSummary({
+    required this.taskName,
+    required this.sampleQueue,
+    required this.total,
+    required this.running,
+    required this.succeeded,
+    required this.failed,
+    required this.retried,
+    required this.cancelled,
+    required this.lastUpdated,
+  });
+
+  /// Task handler name.
+  final String taskName;
+
+  /// Queue most commonly associated with this task in sampled statuses.
+  final String sampleQueue;
+
+  /// Total sampled statuses for this task.
+  final int total;
+
+  /// Running count.
+  final int running;
+
+  /// Success count.
+  final int succeeded;
+
+  /// Failure count.
+  final int failed;
+
+  /// Retried count.
+  final int retried;
+
+  /// Cancelled count.
+  final int cancelled;
+
+  /// Most recent update timestamp across sampled statuses.
+  final DateTime lastUpdated;
+
+  /// Failure ratio in sampled statuses.
+  double get failureRatio => total <= 0 ? 0 : failed / total;
+}
+
+/// Workflow run summary projected from task status metadata.
+class DashboardWorkflowRunSummary {
+  /// Creates a workflow summary.
+  const DashboardWorkflowRunSummary({
+    required this.runId,
+    required this.workflowName,
+    required this.lastStep,
+    required this.total,
+    required this.queued,
+    required this.running,
+    required this.succeeded,
+    required this.failed,
+    required this.cancelled,
+    required this.lastUpdated,
+  });
+
+  /// Workflow run id.
+  final String runId;
+
+  /// Workflow name, when available.
+  final String workflowName;
+
+  /// Most recent step marker, when available.
+  final String? lastStep;
+
+  /// Total sampled statuses for this run.
+  final int total;
+
+  /// Queued count.
+  final int queued;
+
+  /// Running count.
+  final int running;
+
+  /// Succeeded count.
+  final int succeeded;
+
+  /// Failed count.
+  final int failed;
+
+  /// Cancelled count.
+  final int cancelled;
+
+  /// Most recent update timestamp.
+  final DateTime lastUpdated;
+}
+
+/// Builds app-focused namespace summaries from sampled runtime state.
+List<DashboardNamespaceSnapshot> buildNamespaceSnapshots({
+  required List<QueueSummary> queues,
+  required List<WorkerStatus> workers,
+  required List<DashboardTaskStatusEntry> tasks,
+  String defaultNamespace = 'stem',
+}) {
+  final queueNamesByNamespace = <String, Set<String>>{};
+  final pendingByNamespace = <String, int>{};
+  final inflightByNamespace = <String, int>{};
+  final deadByNamespace = <String, int>{};
+  final workerCountByNamespace = <String, int>{};
+  final runningByNamespace = <String, int>{};
+  final failedByNamespace = <String, int>{};
+  final runsByNamespace = <String, Set<String>>{};
+
+  for (final queue in queues) {
+    queueNamesByNamespace.putIfAbsent(defaultNamespace, () => <String>{}).add(
+      queue.queue,
+    );
+    pendingByNamespace[defaultNamespace] =
+        (pendingByNamespace[defaultNamespace] ?? 0) + queue.pending;
+    inflightByNamespace[defaultNamespace] =
+        (inflightByNamespace[defaultNamespace] ?? 0) + queue.inflight;
+    deadByNamespace[defaultNamespace] =
+        (deadByNamespace[defaultNamespace] ?? 0) + queue.deadLetters;
+  }
+
+  for (final worker in workers) {
+    final namespace = worker.namespace.trim().isEmpty
+        ? defaultNamespace
+        : worker.namespace.trim();
+    workerCountByNamespace[namespace] =
+        (workerCountByNamespace[namespace] ?? 0) + 1;
+    final names = queueNamesByNamespace.putIfAbsent(
+      namespace,
+      () => <String>{},
+    );
+    for (final queue in worker.queues) {
+      names.add(queue.name);
+    }
+  }
+
+  for (final task in tasks) {
+    final namespace = task.namespace.trim().isEmpty
+        ? defaultNamespace
+        : task.namespace.trim();
+    queueNamesByNamespace.putIfAbsent(namespace, () => <String>{}).add(
+      task.queue,
+    );
+    if (task.state == TaskState.running) {
+      runningByNamespace[namespace] = (runningByNamespace[namespace] ?? 0) + 1;
+    }
+    if (task.isFailure) {
+      failedByNamespace[namespace] = (failedByNamespace[namespace] ?? 0) + 1;
+    }
+    if (task.runId != null && task.runId!.isNotEmpty) {
+      runsByNamespace.putIfAbsent(namespace, () => <String>{}).add(task.runId!);
+    }
+  }
+
+  final namespaces = <String>{
+    ...queueNamesByNamespace.keys,
+    ...workerCountByNamespace.keys,
+    ...runningByNamespace.keys,
+    ...failedByNamespace.keys,
+    ...runsByNamespace.keys,
+  }.toList(growable: false)
+    ..sort();
+
+  return namespaces.map((namespace) {
+    return DashboardNamespaceSnapshot(
+      namespace: namespace,
+      queueCount: queueNamesByNamespace[namespace]?.length ?? 0,
+      workerCount: workerCountByNamespace[namespace] ?? 0,
+      pending: pendingByNamespace[namespace] ?? 0,
+      inflight: inflightByNamespace[namespace] ?? 0,
+      deadLetters: deadByNamespace[namespace] ?? 0,
+      runningTasks: runningByNamespace[namespace] ?? 0,
+      failedTasks: failedByNamespace[namespace] ?? 0,
+      workflowRuns: runsByNamespace[namespace]?.length ?? 0,
+    );
+  }).toList(growable: false);
+}
+
+/// Builds task/job summaries grouped by task name.
+List<DashboardJobSummary> buildJobSummaries(
+  List<DashboardTaskStatusEntry> tasks, {
+  int limit = 20,
+}) {
+  final buckets = <String, _DashboardJobSummaryBuilder>{};
+  for (final task in tasks) {
+    buckets
+        .putIfAbsent(
+          task.taskName,
+          () => _DashboardJobSummaryBuilder(taskName: task.taskName),
+        )
+        .add(task);
+  }
+  final results = buckets.values.map((bucket) => bucket.build()).toList()
+    ..sort((a, b) {
+      final byTotal = b.total.compareTo(a.total);
+      if (byTotal != 0) return byTotal;
+      return b.lastUpdated.compareTo(a.lastUpdated);
+    });
+  final bounded = limit < 1 ? 1 : limit;
+  return results.take(bounded).toList(growable: false);
+}
+
+/// Builds workflow run summaries grouped by run id.
+List<DashboardWorkflowRunSummary> buildWorkflowRunSummaries(
+  List<DashboardTaskStatusEntry> tasks, {
+  int limit = 20,
+}) {
+  final buckets = <String, _DashboardWorkflowSummaryBuilder>{};
+  for (final task in tasks) {
+    final runId = task.runId?.trim();
+    if (runId == null || runId.isEmpty) continue;
+    buckets
+        .putIfAbsent(runId, () => _DashboardWorkflowSummaryBuilder(runId))
+        .add(task);
+  }
+  final results = buckets.values.map((bucket) => bucket.build()).toList()
+    ..sort((a, b) => b.lastUpdated.compareTo(a.lastUpdated));
+  final bounded = limit < 1 ? 1 : limit;
+  return results.take(bounded).toList(growable: false);
+}
+
+/// Projection of a workflow run snapshot for dashboard rendering.
+class DashboardWorkflowRunSnapshot {
+  /// Creates a workflow run snapshot.
+  const DashboardWorkflowRunSnapshot({
+    required this.id,
+    required this.workflow,
+    required this.status,
+    required this.cursor,
+    required this.createdAt,
+    this.updatedAt,
+    this.waitTopic,
+    this.resumeAt,
+    this.ownerId,
+    this.leaseExpiresAt,
+    this.lastError,
+    this.result,
+  });
+
+  /// Builds a dashboard workflow run snapshot from [RunState].
+  factory DashboardWorkflowRunSnapshot.fromRunState(RunState state) {
+    return DashboardWorkflowRunSnapshot(
+      id: state.id,
+      workflow: state.workflow,
+      status: state.status,
+      cursor: state.cursor,
+      createdAt: state.createdAt,
+      updatedAt: state.updatedAt,
+      waitTopic: state.waitTopic,
+      resumeAt: state.resumeAt,
+      ownerId: state.ownerId,
+      leaseExpiresAt: state.leaseExpiresAt,
+      lastError: state.lastError,
+      result: state.result,
+    );
+  }
+
+  /// Run identifier.
+  final String id;
+
+  /// Workflow name.
+  final String workflow;
+
+  /// Current lifecycle state.
+  final WorkflowStatus status;
+
+  /// Next step cursor.
+  final int cursor;
+
+  /// Run creation timestamp.
+  final DateTime createdAt;
+
+  /// Most recent mutation timestamp.
+  final DateTime? updatedAt;
+
+  /// Topic currently awaited by this run, when suspended.
+  final String? waitTopic;
+
+  /// Resume deadline for suspended runs.
+  final DateTime? resumeAt;
+
+  /// Owner of the active lease when running.
+  final String? ownerId;
+
+  /// Lease expiration if the run is claimed.
+  final DateTime? leaseExpiresAt;
+
+  /// Last error payload recorded by the workflow runtime.
+  final Map<String, Object?>? lastError;
+
+  /// Final workflow result payload when completed.
+  final Object? result;
+}
+
+/// Projection of a persisted workflow step checkpoint.
+class DashboardWorkflowStepSnapshot {
+  /// Creates a workflow step snapshot.
+  const DashboardWorkflowStepSnapshot({
+    required this.name,
+    required this.position,
+    required this.value,
+    this.completedAt,
+  });
+
+  /// Builds a workflow step snapshot from [WorkflowStepEntry].
+  factory DashboardWorkflowStepSnapshot.fromEntry(WorkflowStepEntry entry) {
+    return DashboardWorkflowStepSnapshot(
+      name: entry.name,
+      position: entry.position,
+      value: entry.value,
+      completedAt: entry.completedAt,
+    );
+  }
+
+  /// Step name.
+  final String name;
+
+  /// Step ordering position.
+  final int position;
+
+  /// Persisted checkpoint value.
+  final Object? value;
+
+  /// Completion timestamp if available.
+  final DateTime? completedAt;
+}
+
 /// Task request submitted from the dashboard UI.
 class EnqueueRequest {
   /// Creates a task enqueue request.
@@ -207,3 +815,133 @@ class EnqueueRequest {
   /// Maximum retry count for the task.
   final int maxRetries;
 }
+
+int? _readInt(Object? value) {
+  if (value == null) return null;
+  if (value is int) return value;
+  if (value is num) return value.toInt();
+  return int.tryParse(value.toString());
+}
+
+DateTime? _readDate(Object? value) {
+  if (value == null) return null;
+  if (value is DateTime) return value.toUtc();
+  return DateTime.tryParse(value.toString())?.toUtc();
+}
+
+String _readTaskName(Map<String, Object?> meta) {
+  return meta['task']?.toString() ??
+      meta['stem.task']?.toString() ??
+      meta['name']?.toString() ??
+      meta['taskName']?.toString() ??
+      'unknown';
+}
+
+String _readQueue(Map<String, Object?> meta) {
+  return meta['queue']?.toString() ??
+      meta['stem.queue']?.toString() ??
+      'default';
+}
+
+String _readNamespace(Map<String, Object?> meta) {
+  return meta['namespace']?.toString() ??
+      meta['stem.namespace']?.toString() ??
+      'stem';
+}
+
+class _DashboardJobSummaryBuilder {
+  _DashboardJobSummaryBuilder({required this.taskName});
+
+  final String taskName;
+  final Map<String, int> _queueHits = {};
+  var _total = 0;
+  var _running = 0;
+  var _succeeded = 0;
+  var _failed = 0;
+  var _retried = 0;
+  var _cancelled = 0;
+  DateTime _lastUpdated = DateTime.fromMillisecondsSinceEpoch(0, isUtc: true);
+
+  void add(DashboardTaskStatusEntry task) {
+    _total += 1;
+    _queueHits[task.queue] = (_queueHits[task.queue] ?? 0) + 1;
+    if (task.state == TaskState.running) _running += 1;
+    if (task.state == TaskState.succeeded) _succeeded += 1;
+    if (task.state == TaskState.failed) _failed += 1;
+    if (task.state == TaskState.retried) _retried += 1;
+    if (task.state == TaskState.cancelled) _cancelled += 1;
+    if (task.updatedAt.toUtc().isAfter(_lastUpdated)) {
+      _lastUpdated = task.updatedAt.toUtc();
+    }
+  }
+
+  DashboardJobSummary build() {
+    final sampleQueue = _queueHits.entries.isEmpty
+        ? 'default'
+        : (_queueHits.entries.toList()
+              ..sort((a, b) => b.value.compareTo(a.value)))
+            .first
+            .key;
+    return DashboardJobSummary(
+      taskName: taskName,
+      sampleQueue: sampleQueue,
+      total: _total,
+      running: _running,
+      succeeded: _succeeded,
+      failed: _failed,
+      retried: _retried,
+      cancelled: _cancelled,
+      lastUpdated: _lastUpdated,
+    );
+  }
+}
+
+class _DashboardWorkflowSummaryBuilder {
+  _DashboardWorkflowSummaryBuilder(this.runId);
+
+  final String runId;
+  String _workflowName = 'workflow';
+  String? _lastStep;
+  var _total = 0;
+  var _queued = 0;
+  var _running = 0;
+  var _succeeded = 0;
+  var _failed = 0;
+  var _cancelled = 0;
+  DateTime _lastUpdated = DateTime.fromMillisecondsSinceEpoch(0, isUtc: true);
+
+  void add(DashboardTaskStatusEntry task) {
+    _total += 1;
+    if (task.workflowName != null && task.workflowName!.isNotEmpty) {
+      _workflowName = task.workflowName!;
+    }
+    if (task.workflowStep != null && task.workflowStep!.isNotEmpty) {
+      _lastStep = task.workflowStep;
+    }
+    if (task.state == TaskState.queued || task.state == TaskState.retried) {
+      _queued += 1;
+    }
+    if (task.state == TaskState.running) _running += 1;
+    if (task.state == TaskState.succeeded) _succeeded += 1;
+    if (task.state == TaskState.failed) _failed += 1;
+    if (task.state == TaskState.cancelled) _cancelled += 1;
+    if (task.updatedAt.toUtc().isAfter(_lastUpdated)) {
+      _lastUpdated = task.updatedAt.toUtc();
+    }
+  }
+
+  DashboardWorkflowRunSummary build() {
+    return DashboardWorkflowRunSummary(
+      runId: runId,
+      workflowName: _workflowName,
+      lastStep: _lastStep,
+      total: _total,
+      queued: _queued,
+      running: _running,
+      succeeded: _succeeded,
+      failed: _failed,
+      cancelled: _cancelled,
+      lastUpdated: _lastUpdated,
+    );
+  }
+}
diff --git a/packages/dashboard/lib/src/services/stem_service.dart b/packages/dashboard/lib/src/services/stem_service.dart
index 4eb872d..b90ded0 100644
--- a/packages/dashboard/lib/src/services/stem_service.dart
+++ b/packages/dashboard/lib/src/services/stem_service.dart
@@ -1,10 +1,13 @@
 import 'dart:async';
+import 'dart:io';
 
 import 'package:stem/stem.dart';
 import 'package:stem_cli/stem_cli.dart';
-
 import 'package:stem_dashboard/src/config/config.dart';
 import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_postgres/stem_postgres.dart';
+import 'package:stem_redis/stem_redis.dart';
+import 'package:stem_sqlite/stem_sqlite.dart';
 
 /// Contract for dashboard services that load queue and worker data.
 abstract class DashboardDataSource {
@@ -14,6 +17,29 @@ abstract class DashboardDataSource {
   /// Fetches current worker status snapshots.
   Future<List<WorkerStatus>> fetchWorkerStatuses();
 
+  /// Fetches persisted task statuses for observability views.
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatuses({
+    TaskState? state,
+    String? queue,
+    int limit = 100,
+    int offset = 0,
+  });
+
+  /// Fetches a single task status by [taskId].
+  Future<DashboardTaskStatusEntry?> fetchTaskStatus(String taskId);
+
+  /// Fetches statuses belonging to a workflow [runId].
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatusesForRun(
+    String runId, {
+    int limit = 200,
+  });
+
+  /// Fetches persisted workflow run snapshot, if a workflow store is available.
+  Future<DashboardWorkflowRunSnapshot?> fetchWorkflowRun(String runId);
+
+  /// Fetches persisted workflow checkpoints, if a workflow store is available.
+  Future<List<DashboardWorkflowStepSnapshot>> fetchWorkflowSteps(String runId);
+
   /// Enqueues a task request through the backing broker.
   Future<void> enqueueTask(EnqueueRequest request);
 
@@ -24,6 +50,20 @@ abstract class DashboardDataSource {
     bool dryRun = false,
   });
 
+  /// Replays a specific dead-letter task by [taskId].
+  ///
+  /// Returns `true` when the entry was found and replayed.
+  Future<bool> replayTaskById(String taskId, {String? queue});
+
+  /// Requests revocation for [taskId].
+  ///
+  /// Returns `true` when a revoke store is configured and the request is saved.
+  Future<bool> revokeTask(
+    String taskId, {
+    bool terminate = false,
+    String? reason,
+  });
+
   /// Sends a control command and returns any replies collected.
   Future<List<ControlReplyMessage>> sendControlCommand(
     ControlCommandMessage command, {
@@ -40,28 +80,57 @@ class StemDashboardService implements DashboardDataSource {
     required DashboardConfig config,
     required Broker broker,
     ResultBackend? backend,
+    WorkflowStore? workflowStore,
+    RevokeStore? revokeStore,
+    Future<void> Function()? disposeContext,
+    Future<_DashboardRuntimeContext> Function()? reloadRuntimeContext,
+    bool ownsWorkflowStore = false,
   }) : _config = config,
        _namespace = config.namespace,
+       _signer = PayloadSigner.maybe(config.stem.signing),
        _broker = broker,
-       _backend = backend;
+       _backend = backend,
+       _workflowStore = workflowStore,
+       _revokeStore = revokeStore,
+       _disposeContext = disposeContext,
+       _reloadRuntimeContext = reloadRuntimeContext,
+       _ownsWorkflowStore = ownsWorkflowStore;
 
   final DashboardConfig _config;
   final String _namespace;
-  final Broker _broker;
-  final ResultBackend? _backend;
+  final PayloadSigner? _signer;
+  Broker _broker;
+  ResultBackend? _backend;
+  final WorkflowStore? _workflowStore;
+  RevokeStore? _revokeStore;
+  Future<void> Function()? _disposeContext;
+  final Future<_DashboardRuntimeContext> Function()? _reloadRuntimeContext;
+  Future<void>? _runtimeReconnectFuture;
+  Future<void> _runtimeOperationQueue = Future.value();
+  final bool _ownsWorkflowStore;
+  var _closed = false;
 
   /// Creates a dashboard service using [config].
   ///
   /// Uses [createDefaultContext] to set up broker and backend from environment.
   static Future<StemDashboardService> connect(DashboardConfig config) async {
-    final ctx = await createDefaultContext(
-      environment: Map<String, String>.from(config.environment),
+    final runtimeContext = await _createRuntimeContext(config);
+
+    final workflowStore = await _connectWorkflowStore(
+      config.environment['STEM_WORKFLOW_STORE_URL'],
+      namespace: _resolveWorkflowNamespace(config),
+      tls: config.tls,
     );
 
     return StemDashboardService._(
       config: config,
-      broker: ctx.broker,
-      backend: ctx.backend,
+      broker: runtimeContext.broker,
+      backend: runtimeContext.backend,
+      workflowStore: workflowStore,
+      revokeStore: runtimeContext.revokeStore,
+      disposeContext: runtimeContext.dispose,
+      reloadRuntimeContext: () => _createRuntimeContext(config),
+      ownsWorkflowStore: true,
     );
   }
 
@@ -73,47 +142,164 @@ class StemDashboardService implements DashboardDataSource {
     required DashboardConfig config,
     required Broker broker,
     ResultBackend? backend,
+    WorkflowStore? workflowStore,
+    RevokeStore? revokeStore,
   }) async {
     return StemDashboardService._(
       config: config,
       broker: broker,
       backend: backend,
+      workflowStore: workflowStore,
+      revokeStore: revokeStore,
     );
   }
 
   @override
   Future<List<QueueSummary>> fetchQueueSummaries() async {
-    final queues = await _discoverQueues();
-    final summaries = <QueueSummary>[];
+    try {
+      return await _withRuntimeReconnectRetry(_fetchQueueSummariesImpl);
+    } on Object catch (error, stack) {
+      _logReadFailure('fetchQueueSummaries', error, stack);
+      return const [];
+    }
+  }
 
-    for (final queue in queues) {
-      final pending = await _broker.pendingCount(queue) ?? 0;
-      final inflight = await _broker.inflightCount(queue) ?? 0;
-      final dead = await _deadLetterCount(queue);
+  @override
+  Future<List<WorkerStatus>> fetchWorkerStatuses() async {
+    try {
+      final heartbeats = await _withRuntimeReconnectRetry(() async {
+        final backend = _backend;
+        if (backend == null) return const <WorkerHeartbeat>[];
+        return backend.listWorkerHeartbeats();
+      });
+      return heartbeats.map(WorkerStatus.fromHeartbeat).toList(growable: false)
+        ..sort((a, b) => a.workerId.compareTo(b.workerId));
+    } on Object catch (error, stack) {
+      _logReadFailure('fetchWorkerStatuses', error, stack);
+      return const [];
+    }
+  }
 
-      summaries.add(
-        QueueSummary(
-          queue: queue,
-          pending: pending,
-          inflight: inflight,
-          deadLetters: dead,
-        ),
-      );
+  @override
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatuses({
+    TaskState? state,
+    String? queue,
+    int limit = 100,
+    int offset = 0,
+  }) async {
+    final resolvedQueue = queue?.trim();
+    final boundedLimit = limit.clamp(1, 500);
+    final boundedOffset = offset < 0 ? 0 : offset;
+    try {
+      final page = await _withRuntimeReconnectRetry(() async {
+        final backend = _backend;
+        if (backend == null) {
+          return const TaskStatusPage(items: []);
+        }
+        return backend.listTaskStatuses(
+          TaskStatusListRequest(
+            state: state,
+            queue: resolvedQueue == null || resolvedQueue.isEmpty
+                ? null
+                : resolvedQueue,
+            limit: boundedLimit,
+            offset: boundedOffset,
+          ),
+        );
+      });
+      return page.items
+          .map(DashboardTaskStatusEntry.fromRecord)
+          .toList(growable: false);
+    } on Object catch (error, stack) {
+      _logReadFailure('fetchTaskStatuses', error, stack);
+      return const [];
     }
+  }
 
-    summaries.sort((a, b) => a.queue.compareTo(b.queue));
-    return summaries;
+  @override
+  Future<DashboardTaskStatusEntry?> fetchTaskStatus(String taskId) async {
+    final trimmed = taskId.trim();
+    if (trimmed.isEmpty) return null;
+
+    try {
+      final record = await _findTaskStatusRecord(trimmed);
+      if (record != null) {
+        return DashboardTaskStatusEntry.fromRecord(record);
+      }
+      final backend = _backend;
+      if (backend == null) return null;
+      final status = await backend.get(trimmed);
+      if (status == null) {
+        return null;
+      }
+      return DashboardTaskStatusEntry.fromStatus(status);
+    } on Object {
+      return null;
+    }
   }
 
   @override
-  Future<List<WorkerStatus>> fetchWorkerStatuses() async {
-    final backend = _backend;
-    if (backend == null) return const [];
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatusesForRun(
+    String runId, {
+    int limit = 200,
+  }) async {
+    final trimmed = runId.trim();
+    if (trimmed.isEmpty) return const [];
 
     try {
-      final heartbeats = await backend.listWorkerHeartbeats();
-      return heartbeats.map(WorkerStatus.fromHeartbeat).toList(growable: false)
-        ..sort((a, b) => a.workerId.compareTo(b.workerId));
+      final page = await _withRuntimeReconnectRetry(() async {
+        final backend = _backend;
+        if (backend == null) {
+          return const TaskStatusPage(items: []);
+        }
+        return backend.listTaskStatuses(
+          TaskStatusListRequest(
+            meta: {'stem.workflow.runId': trimmed},
+            limit: limit.clamp(1, 500),
+          ),
+        );
+      });
+      return page.items
+          .map(DashboardTaskStatusEntry.fromRecord)
+          .toList(growable: false);
+    } on Object {
+      return const [];
+    }
+  }
+
+  @override
+  Future<DashboardWorkflowRunSnapshot?> fetchWorkflowRun(String runId) async {
+    final store = _workflowStore;
+    if (store == null) return null;
+
+    final trimmed = runId.trim();
+    if (trimmed.isEmpty) return null;
+
+    try {
+      final run = await store.get(trimmed);
+      if (run == null) return null;
+      return DashboardWorkflowRunSnapshot.fromRunState(run);
+    } on Object {
+      return null;
+    }
+  }
+
+  @override
+  Future<List<DashboardWorkflowStepSnapshot>> fetchWorkflowSteps(
+    String runId,
+  ) async {
+    final store = _workflowStore;
+    if (store == null) return const [];
+
+    final trimmed = runId.trim();
+    if (trimmed.isEmpty) return const [];
+
+    try {
+      final steps = await store.listSteps(trimmed);
+      return steps
+          .map(DashboardWorkflowStepSnapshot.fromEntry)
+          .toList(growable: false)
+        ..sort((a, b) => a.position.compareTo(b.position));
     } on Object {
       return const [];
     }
@@ -130,7 +316,7 @@ class StemDashboardService implements DashboardDataSource {
       maxRetries: request.maxRetries,
       meta: const {'source': 'dashboard'},
     );
-    await _broker.publish(envelope);
+    await _publishEnvelope(envelope);
   }
 
   @override
@@ -140,7 +326,91 @@ class StemDashboardService implements DashboardDataSource {
     bool dryRun = false,
   }) async {
     final bounded = limit.clamp(1, 500);
-    return _broker.replayDeadLetters(queue, limit: bounded, dryRun: dryRun);
+    return _withRuntimeReconnectRetry(
+      () => _broker.replayDeadLetters(queue, limit: bounded, dryRun: dryRun),
+    );
+  }
+
+  @override
+  Future<bool> replayTaskById(String taskId, {String? queue}) async {
+    final trimmedTask = taskId.trim();
+    if (trimmedTask.isEmpty) return false;
+
+    final resolvedQueue = await _resolveReplayQueue(trimmedTask, queue: queue);
+    if (resolvedQueue == null) {
+      return false;
+    }
+
+    final deadLetter = await _withRuntimeReconnectRetry(
+      () => _broker.getDeadLetter(resolvedQueue, trimmedTask),
+    );
+    if (deadLetter == null) {
+      return false;
+    }
+
+    final now = stemNow().toUtc();
+    final original = deadLetter.envelope;
+    final replayMeta = Map<String, Object?>.from(original.meta)
+      ..['source'] = 'dashboard'
+      ..['dashboard.replayFromTaskId'] = trimmedTask
+      ..['dashboard.replayedAt'] = now.toIso8601String();
+    final replay = original.copyWith(
+      id: generateEnvelopeId(),
+      attempt: 0,
+      enqueuedAt: now,
+      meta: replayMeta,
+    );
+    await _publishEnvelope(replay);
+
+    final backend = _backend;
+    if (backend != null) {
+      final queuedMeta = <String, Object?>{
+        'queue': replay.queue,
+        'task': replay.name,
+        ...replayMeta,
+      };
+      await backend.set(
+        replay.id,
+        TaskState.queued,
+        attempt: 0,
+        meta: queuedMeta,
+      );
+    }
+    return true;
+  }
+
+  @override
+  Future<bool> revokeTask(
+    String taskId, {
+    bool terminate = false,
+    String? reason,
+  }) async {
+    final trimmedTask = taskId.trim();
+    if (trimmedTask.isEmpty) return false;
+
+    final now = stemNow().toUtc();
+    final trimmedReason = reason?.trim();
+    final entry = RevokeEntry(
+      namespace: _namespace,
+      taskId: trimmedTask,
+      version: generateRevokeVersion(),
+      issuedAt: now,
+      terminate: terminate,
+      reason: trimmedReason == null || trimmedReason.isEmpty
+          ? null
+          : trimmedReason,
+      requestedBy: 'dashboard',
+    );
+    try {
+      final store = _revokeStore;
+      if (store == null) {
+        return false;
+      }
+      await store.upsertAll([entry]);
+      return true;
+    } on Object {
+      return false;
+    }
   }
 
   @override
@@ -172,7 +442,7 @@ class StemDashboardService implements DashboardDataSource {
         meta: const {'source': 'dashboard'},
         enqueuedAt: now,
       );
-      await _broker.publish(envelope);
+      await _publishEnvelope(envelope);
     }
 
     final expectedReplies = command.targets.isEmpty
@@ -180,14 +450,18 @@ class StemDashboardService implements DashboardDataSource {
         : command.targets.length;
     final prefetch = expectedReplies == null ? 8 : expectedReplies.clamp(1, 32);
 
-    final subscription = _broker.consume(
-      RoutingSubscription.singleQueue(replyQueue),
-      consumerGroup: _controlConsumerGroup,
-      consumerName: 'dashboard-${command.requestId}',
-      prefetch: prefetch,
+    final subscription = await _withRuntimeReconnectRetry<Stream<Delivery>>(
+      () async {
+        return _broker.consume(
+          RoutingSubscription.singleQueue(replyQueue),
+          consumerGroup: _controlConsumerGroup,
+          consumerName: 'dashboard-${command.requestId}',
+          prefetch: prefetch,
+        );
+      },
     );
 
-    final iterator = StreamIterator(subscription);
+    final iterator = StreamIterator<Delivery>(subscription);
     final replies = <ControlReplyMessage>[];
     final deadline = stemNow().add(timeout);
 
@@ -210,9 +484,11 @@ class StemDashboardService implements DashboardDataSource {
         try {
           final reply = controlReplyFromEnvelope(delivery.envelope);
           replies.add(reply);
-          await _broker.ack(delivery);
+          await _withRuntimeReconnectRetry(() => _broker.ack(delivery));
         } on Object {
-          await _broker.nack(delivery, requeue: false);
+          await _withRuntimeReconnectRetry(
+            () => _broker.nack(delivery, requeue: false),
+          );
         }
 
         if (expectedReplies != null && replies.length >= expectedReplies) {
@@ -229,9 +505,155 @@ class StemDashboardService implements DashboardDataSource {
 
   @override
   Future<void> close() async {
-    // Note: The broker and backend will be closed when the context is disposed.
-    // Since we got them from createDefaultContext, we don't own their
-    // lifecycle.
+    if (_closed) return;
+    _closed = true;
+
+    if (_ownsWorkflowStore) {
+      await _disposeWorkflowStore(_workflowStore);
+    }
+
+    await _disposeRuntimeContext();
+  }
+
+  Future<List<QueueSummary>> _fetchQueueSummariesImpl() async {
+    final queues = await _discoverQueues();
+    final summaries = <QueueSummary>[];
+
+    for (final queue in queues) {
+      final pending = await _broker.pendingCount(queue) ?? 0;
+      final inflight = await _broker.inflightCount(queue) ?? 0;
+      final dead = await _deadLetterCount(queue);
+
+      summaries.add(
+        QueueSummary(
+          queue: queue,
+          pending: pending,
+          inflight: inflight,
+          deadLetters: dead,
+        ),
+      );
+    }
+
+    summaries.sort((a, b) => a.queue.compareTo(b.queue));
+    return summaries;
+  }
+
+  Future<T> _withRuntimeReconnectRetry<T>(Future<T> Function() action) {
+    return _serializeRuntimeAccess(() async {
+      try {
+        return await action();
+      } on Object catch (error) {
+        final recovered = await _recoverRuntimeContextIfNeeded(error);
+        if (!recovered) {
+          rethrow;
+        }
+        return action();
+      }
+    });
+  }
+
+  Future<bool> _recoverRuntimeContextIfNeeded(Object error) async {
+    if (_closed || !_isRecoverableConnectionError(error)) {
+      return false;
+    }
+
+    final reloadRuntimeContext = _reloadRuntimeContext;
+    if (reloadRuntimeContext == null) {
+      return false;
+    }
+
+    try {
+      await _reconnectRuntimeContext(reloadRuntimeContext);
+      return true;
+    } on Object {
+      return false;
+    }
+  }
+
+  bool _isRecoverableConnectionError(Object error) {
+    if (error is SocketException ||
+        error is IOException ||
+        error is StateError) {
+      return true;
+    }
+    final message = '$error'.toLowerCase();
+    return message.contains('streamsink is closed') ||
+        message.contains('stream is closed') ||
+        message.contains('connection closed') ||
+        message.contains('not connected') ||
+        message.contains('connection refused') ||
+        message.contains('socket is closed') ||
+        message.contains('broken pipe') ||
+        message.contains('timed out') ||
+        message.contains('connection reset');
+  }
+
+  Future<T> _serializeRuntimeAccess<T>(Future<T> Function() action) {
+    final completer = Completer<T>();
+    _runtimeOperationQueue = _runtimeOperationQueue.catchError((_) {}).then((
+      _,
+    ) async {
+      try {
+        completer.complete(await action());
+      } on Object catch (error, stack) {
+        completer.completeError(error, stack);
+      }
+    });
+    return completer.future;
+  }
+
+  void _logReadFailure(String operation, Object error, StackTrace stack) {
+    stemLogger.warning(
+      'Dashboard data read failed',
+      stemLogContext(
+        component: 'dashboard',
+        subsystem: 'service',
+        fields: {
+          'operation': operation,
+          'error': '$error',
+          'stack': '$stack',
+        },
+      ),
+    );
+  }
+
+  Future<void> _reconnectRuntimeContext(
+    Future<_DashboardRuntimeContext> Function() reloadRuntimeContext,
+  ) async {
+    if (_runtimeReconnectFuture != null) {
+      return _runtimeReconnectFuture!;
+    }
+    final completer = Completer<void>();
+    _runtimeReconnectFuture = completer.future;
+    try {
+      final nextContext = await reloadRuntimeContext();
+      final previousDispose = _disposeContext;
+      _broker = nextContext.broker;
+      _backend = nextContext.backend;
+      _revokeStore = nextContext.revokeStore;
+      _disposeContext = nextContext.dispose;
+      if (previousDispose != null) {
+        try {
+          await previousDispose();
+        } on Object {
+          // Ignore disposal failures while recovering from connection errors.
+        }
+      }
+      completer.complete();
+    } on Object catch (error, stack) {
+      completer.completeError(error, stack);
+      rethrow;
+    } finally {
+      _runtimeReconnectFuture = null;
+    }
+  }
+
+  Future<void> _disposeRuntimeContext() async {
+    final disposeContext = _disposeContext;
+    _disposeContext = null;
+    if (disposeContext != null) {
+      await disposeContext();
+    }
   }
 
   Future<Set<String>> _discoverQueues() async {
@@ -294,11 +716,159 @@ class StemDashboardService implements DashboardDataSource {
 
   Future<void> _purgeQueue(String queue) async {
     try {
-      await _broker.purge(queue);
+      await _withRuntimeReconnectRetry(() => _broker.purge(queue));
     } on Object {
       // Some brokers may not support purge; ignore failures.
     }
   }
 
+  Future<void> _publishEnvelope(Envelope envelope) async {
+    final signer = _signer;
+    final payload = signer == null ? envelope : await signer.sign(envelope);
+    await _withRuntimeReconnectRetry(() => _broker.publish(payload));
+  }
+
+  Future<TaskStatusRecord?> _findTaskStatusRecord(String taskId) async {
+    final backend = _backend;
+    if (backend == null) return null;
+
+    var offset = 0;
+    const pageSize = 200;
+    const maxPages = 10;
+
+    for (var pageIndex = 0; pageIndex < maxPages; pageIndex++) {
+      final page = await backend.listTaskStatuses(
+        TaskStatusListRequest(limit: pageSize, offset: offset),
+      );
+      for (final item in page.items) {
+        if (item.status.id == taskId) {
+          return item;
+        }
+      }
+      final nextOffset = page.nextOffset;
+      if (nextOffset == null) {
+        break;
+      }
+      offset = nextOffset;
+    }
+    return null;
+  }
+
+  Future<String?> _resolveReplayQueue(
+    String taskId, {
+    String? queue,
+  }) async {
+    final explicit = queue?.trim();
+    if (explicit != null && explicit.isNotEmpty) {
+      return explicit;
+    }
+
+    final status = await fetchTaskStatus(taskId);
+    final statusQueue = status?.queue.trim();
+    if (statusQueue != null && statusQueue.isNotEmpty) {
+      return statusQueue;
+    }
+
+    final queues = await _discoverQueues();
+    for (final candidate in queues) {
+      final entry = await _broker.getDeadLetter(candidate, taskId);
+      if (entry != null) {
+        return candidate;
+      }
+    }
+    return null;
+  }
+
+  static String _resolveWorkflowNamespace(DashboardConfig config) {
+    final raw = config.environment['STEM_WORKFLOW_NAMESPACE']?.trim();
+    if (raw != null && raw.isNotEmpty) {
+      return raw;
+    }
+    return config.namespace;
+  }
+
+  static Future<WorkflowStore?> _connectWorkflowStore(
+    String? url, {
+    required String namespace,
+    required TlsConfig tls,
+  }) async {
+    final trimmed = url?.trim();
+    if (trimmed == null || trimmed.isEmpty) {
+      return null;
+    }
+
+    final uri = Uri.parse(trimmed);
+    switch (uri.scheme) {
+      case 'redis':
+      case 'rediss':
+        return RedisWorkflowStore.connect(
+          trimmed,
+          namespace: namespace,
+          tls: tls,
+        );
+      case 'postgres':
+      case 'postgresql':
+      case 'postgresql+ssl':
+      case 'postgres+ssl':
+        return PostgresWorkflowStore.connect(
+          trimmed,
+          namespace: namespace,
+          applicationName: 'stem-dashboard-workflow',
+          tls: tls,
+        );
+      case 'sqlite':
+        final path = uri.path.isNotEmpty ? uri.path : 'workflow.sqlite';
+        return SqliteWorkflowStore.open(File(path));
+      case 'file':
+        return SqliteWorkflowStore.open(File(uri.toFilePath()));
+      case 'memory':
+        return InMemoryWorkflowStore();
+      default:
+        return null;
+    }
+  }
+
+  static Future<void> _disposeWorkflowStore(WorkflowStore? store) async {
+    if (store is RedisWorkflowStore) {
+      await store.close();
+      return;
+    }
+    if (store is PostgresWorkflowStore) {
+      await store.close();
+      return;
+    }
+    if (store is SqliteWorkflowStore) {
+      await store.close();
+    }
+  }
+
+  static Future<_DashboardRuntimeContext> _createRuntimeContext(
+    DashboardConfig config,
+  ) async {
+    final context = await createDefaultContext(
+      environment: Map<String, String>.from(config.environment),
+    );
+    return _DashboardRuntimeContext(
+      broker: context.broker,
+      backend: context.backend,
+      revokeStore: context.revokeStore,
+      dispose: context.dispose,
+    );
+  }
+
   static const _controlConsumerGroup = 'stem-dashboard-control';
 }
+
+class _DashboardRuntimeContext {
+  const _DashboardRuntimeContext({
+    required this.broker,
+    required this.backend,
+    required this.revokeStore,
+    required this.dispose,
+  });
+
+  final Broker broker;
+  final ResultBackend? backend;
+  final RevokeStore? revokeStore;
+  final Future<void> Function() dispose;
+}
diff --git a/packages/dashboard/lib/src/state/dashboard_state.dart b/packages/dashboard/lib/src/state/dashboard_state.dart
index 1b4e193..12b1d9e 100644
--- a/packages/dashboard/lib/src/state/dashboard_state.dart
+++ b/packages/dashboard/lib/src/state/dashboard_state.dart
@@ -1,8 +1,10 @@
 import 'dart:async';
+import 'dart:convert';
+import 'dart:io';
 
 import 'package:meta/meta.dart';
 import 'package:routed_hotwire/routed_hotwire.dart';
-import 'package:stem/stem.dart' show stemNow;
+import 'package:stem/stem.dart' show TaskState, stemNow;
 import 'package:stem_dashboard/src/services/models.dart';
 import 'package:stem_dashboard/src/services/stem_service.dart';
 import 'package:stem_dashboard/src/ui/event_templates.dart';
@@ -14,6 +16,12 @@ class DashboardState {
     required this.service,
     this.pollInterval = const Duration(seconds: 5),
     this.eventLimit = 200,
+    this.auditLimit = 300,
+    this.alertWebhookUrls = const [],
+    this.alertBacklogThreshold = 500,
+    this.alertFailedTaskThreshold = 25,
+    this.alertOfflineWorkerThreshold = 1,
+    this.alertCooldown = const Duration(minutes: 5),
   }) : hub = TurboStreamHub();
 
   /// Data source used to fetch queues and workers.
@@ -28,10 +36,34 @@ class DashboardState {
   /// Maximum number of events retained in memory.
   final int eventLimit;
 
+  /// Maximum number of audit entries retained in memory.
+  final int auditLimit;
+
+  /// Webhook URLs used for alert delivery.
+  final List<String> alertWebhookUrls;
+
+  /// Backlog threshold triggering an alert.
+  final int alertBacklogThreshold;
+
+  /// Failed-task threshold triggering an alert.
+  final int alertFailedTaskThreshold;
+
+  /// Offline-worker threshold triggering an alert.
+  final int alertOfflineWorkerThreshold;
+
+  /// Minimum duration between repeated alerts of the same type.
+  final Duration alertCooldown;
+
   Timer? _timer;
   List<QueueSummary> _previousQueues = const [];
   Map<String, WorkerStatus> _previousWorkers = const {};
+  String _previousQueueSignature = '';
+  String _previousWorkerSignature = '';
+  String _previousTaskSignature = '';
+  var _hasPrimedRefresh = false;
   final _events = <DashboardEvent>[];
+  final _auditEntries = <DashboardAuditEntry>[];
+  final _lastAlertAt = <String, DateTime>{};
   Future<void> _polling = Future.value();
   DateTime? _lastPollAt;
   DashboardThroughput _throughput = const DashboardThroughput(
@@ -46,6 +78,10 @@ class DashboardState {
   /// Most recent throughput calculation.
   DashboardThroughput get throughput => _throughput;
 
+  /// Recent audit entries in reverse chronological order.
+  List<DashboardAuditEntry> get auditEntries =>
+      List.unmodifiable(_auditEntries);
+
   /// Starts the polling loop and emits initial state.
   Future<void> start() async {
     await _runPoll();
@@ -67,14 +103,35 @@ class DashboardState {
   Future<void> runOnce() => _poll();
 
   Future<void> _poll() async {
-    final queues = await service.fetchQueueSummaries();
-    final workers = await service.fetchWorkerStatuses();
+    final queueFuture = service.fetchQueueSummaries();
+    final workerFuture = service.fetchWorkerStatuses();
+    final taskFuture = service.fetchTaskStatuses(limit: 120);
+
+    final queues = await queueFuture;
+    final workers = await workerFuture;
+    final tasks = await taskFuture;
     _updateThroughput(queues);
 
     _generateQueueEvents(_previousQueues, queues);
     _generateWorkerEvents(_previousWorkers, {
       for (final worker in workers) worker.workerId: worker,
     });
+    await _evaluateAlerts(queues: queues, workers: workers, tasks: tasks);
+
+    final queueSignature = _queueSignature(queues);
+    final workerSignature = _workerSignature(workers);
+    final taskSignature = _taskSignature(tasks);
+    final changed =
+        queueSignature != _previousQueueSignature ||
+        workerSignature != _previousWorkerSignature ||
+        taskSignature != _previousTaskSignature;
+    if (_hasPrimedRefresh && changed) {
+      _broadcastRefreshSignal();
+    }
+    _hasPrimedRefresh = true;
+    _previousQueueSignature = queueSignature;
+    _previousWorkerSignature = workerSignature;
+    _previousTaskSignature = taskSignature;
 
     _previousQueues = queues;
     _previousWorkers = {for (final worker in workers) worker.workerId: worker};
@@ -256,4 +313,241 @@ class DashboardState {
     if (delta < 0) return 'decreased by ${delta.abs()}';
     return 'unchanged';
   }
+
+  String _queueSignature(List<QueueSummary> queues) {
+    final sorted = List<QueueSummary>.from(queues)
+      ..sort((a, b) => a.queue.compareTo(b.queue));
+    return sorted
+        .map(
+          (queue) {
+            return '${queue.queue}:${queue.pending}:'
+                '${queue.inflight}:${queue.deadLetters}';
+          },
+        )
+        .join('|');
+  }
+
+  String _workerSignature(List<WorkerStatus> workers) {
+    final sorted = List<WorkerStatus>.from(workers)
+      ..sort((a, b) => a.workerId.compareTo(b.workerId));
+    return sorted
+        .map(
+          (worker) {
+            final stamp = worker.timestamp.toUtc().toIso8601String();
+            return '${worker.workerId}:${worker.inflight}:$stamp';
+          },
+        )
+        .join('|');
+  }
+
+  String _taskSignature(List<DashboardTaskStatusEntry> tasks) {
+    return tasks
+        .map(
+          (task) {
+            final stamp = task.updatedAt.toUtc().toIso8601String();
+            return '${task.id}:${task.state.name}:${task.attempt}:$stamp';
+          },
+        )
+        .join('|');
+  }
+
+  void _broadcastRefreshSignal() {
+    final payload = turboStreamReplace(
+      target: 'dashboard-refresh-signal',
+      html: '<span>${stemNow().toUtc().toIso8601String()}</span>',
+    );
+    hub.broadcast('stem-dashboard:refresh', [payload]);
+  }
+
+  /// Records an audit entry.
+  void recordAudit({
+    required String kind,
+    required String action,
+    required String status,
+    String? actor,
+    String? summary,
+    Map<String, Object?> metadata = const {},
+  }) {
+    final entry = DashboardAuditEntry(
+      id: 'audit-${stemNow().toUtc().microsecondsSinceEpoch}',
+      timestamp: stemNow().toUtc(),
+      kind: kind,
+      action: action,
+      status: status,
+      actor: actor,
+      summary: summary,
+      metadata: metadata,
+    );
+    _auditEntries.insert(0, entry);
+    if (_auditEntries.length > auditLimit) {
+      _auditEntries.removeRange(auditLimit, _auditEntries.length);
+    }
+    _broadcastRefreshSignal();
+  }
+
+  Future<void> _evaluateAlerts({
+    required List<QueueSummary> queues,
+    required List<WorkerStatus> workers,
+    required List<DashboardTaskStatusEntry> tasks,
+  }) async {
+    final totalPending = queues.fold<int>(
+      0,
+      (total, queue) => total + queue.pending,
+    );
+    if (totalPending >= alertBacklogThreshold) {
+      await _emitAlert(
+        key: 'queue.backlog.high',
+        summary: 'Backlog threshold exceeded: '
+            '$totalPending >= $alertBacklogThreshold.',
+        metadata: {
+          'pendingTotal': totalPending,
+          'threshold': alertBacklogThreshold,
+        },
+      );
+    }
+
+    final failedCount = tasks.where((task) {
+      return task.state == TaskState.failed ||
+          task.state == TaskState.cancelled;
+    }).length;
+    if (failedCount >= alertFailedTaskThreshold) {
+      await _emitAlert(
+        key: 'tasks.failed.high',
+        summary: 'Failed task threshold exceeded: '
+            '$failedCount >= $alertFailedTaskThreshold.',
+        metadata: {
+          'failedCount': failedCount,
+          'threshold': alertFailedTaskThreshold,
+        },
+      );
+    }
+
+    final offlineWorkers = workers.where(
+      (worker) => worker.age > const Duration(minutes: 2),
+    );
+    if (offlineWorkers.length >= alertOfflineWorkerThreshold) {
+      await _emitAlert(
+        key: 'workers.offline.high',
+        summary:
+            'Offline workers threshold exceeded: ${offlineWorkers.length} >= '
+            '$alertOfflineWorkerThreshold.',
+        metadata: {
+          'offlineWorkers': offlineWorkers
+              .map((worker) => worker.workerId)
+              .toList(
+                growable: false,
+              ),
+          'threshold': alertOfflineWorkerThreshold,
+        },
+      );
+    }
+  }
+
+  Future<void> _emitAlert({
+    required String key,
+    required String summary,
+    Map<String, Object?> metadata = const {},
+  }) async {
+    final now = stemNow().toUtc();
+    final last = _lastAlertAt[key];
+    if (last != null && now.difference(last) < alertCooldown) {
+      return;
+    }
+    _lastAlertAt[key] = now;
+
+    recordAudit(
+      kind: 'alert',
+      action: key,
+      status: 'triggered',
+      actor: 'system',
+      summary: summary,
+      metadata: metadata,
+    );
+    _recordEvent(
+      DashboardEvent(
+        title: 'Alert: $key',
+        timestamp: now,
+        summary: summary,
+        metadata: metadata,
+      ),
+    );
+
+    if (alertWebhookUrls.isEmpty) {
+      recordAudit(
+        kind: 'alert',
+        action: key,
+        status: 'skipped',
+        actor: 'system',
+        summary: 'No alert webhook URLs configured.',
+      );
+      return;
+    }
+    await _sendAlertWebhooks(key: key, summary: summary, metadata: metadata);
+  }
+
+  Future<void> _sendAlertWebhooks({
+    required String key,
+    required String summary,
+    required Map<String, Object?> metadata,
+  }) async {
+    final payload = <String, Object?>{
+      'kind': 'stem-dashboard-alert',
+      'key': key,
+      'summary': summary,
+      'timestamp': stemNow().toUtc().toIso8601String(),
+      'metadata': metadata,
+    };
+
+    for (final rawUrl in alertWebhookUrls) {
+      final url = rawUrl.trim();
+      if (url.isEmpty) continue;
+      final uri = Uri.tryParse(url);
+      if (uri == null || !uri.hasScheme || uri.host.isEmpty) {
+        recordAudit(
+          kind: 'alert',
+          action: key,
+          status: 'error',
+          actor: 'system',
+          summary: 'Invalid webhook URL: $url',
+        );
+        continue;
+      }
+
+      HttpClientRequest? request;
+      try {
+        final client = HttpClient();
+        request = await client.postUrl(uri);
+        request.headers.contentType = ContentType.json;
+        request.add(utf8.encode(jsonEncode(payload)));
+        final response = await request.close();
+        if (response.statusCode >= 200 && response.statusCode < 300) {
+          recordAudit(
+            kind: 'alert',
+            action: key,
+            status: 'sent',
+            actor: 'system',
+            summary: 'Alert delivered to $url.',
+          );
+        } else {
+          recordAudit(
+            kind: 'alert',
+            action: key,
+            status: 'error',
+            actor: 'system',
+            summary: 'Webhook returned HTTP ${response.statusCode} for $url.',
+          );
+        }
+        client.close(force: true);
+      } on Object catch (error) {
+        request?.abort();
+        recordAudit(
+          kind: 'alert',
+          action: key,
+          status: 'error',
+          actor: 'system',
+          summary: 'Webhook delivery failed for $url: $error',
+        );
+      }
+    }
+  }
 }
diff --git a/packages/dashboard/lib/src/ui/audit.dart b/packages/dashboard/lib/src/ui/audit.dart
new file mode 100644
index 0000000..daddb6f
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/audit.dart
@@ -0,0 +1,76 @@
+// Public helper functions in this file are intentionally undocumented to keep
+// UI template files lightweight.
+// ignore_for_file: public_member_api_docs
+
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/shared.dart';
+
+String buildAuditContent(List<DashboardAuditEntry> entries) {
+  final actions = entries.where((entry) => entry.kind == 'action').length;
+  final alerts = entries.where((entry) => entry.kind == 'alert').length;
+  final failures = entries.where((entry) => entry.status == 'error').length;
+
+  return '''
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
+  <h1>Audit Log</h1>
+  <p class="page-subtitle">
+    Operator actions and automated alert deliveries are captured here for post-incident review.
+  </p>
+</section>
+
+<section class="cards">
+  ${buildMetricCard('Entries', formatInt(entries.length), 'Recent audit records retained in dashboard memory.')}
+  ${buildMetricCard('Actions', formatInt(actions), 'Control/replay/revoke operations initiated by operators.')}
+  ${buildMetricCard('Alerts', formatInt(alerts), 'Automated threshold alerts emitted by polling logic.')}
+  ${buildMetricCard('Errors', formatInt(failures), 'Entries with status=error requiring follow-up.')}
+</section>
+
+<section class="table-card ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Timeline</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Time</th>
+        <th scope="col">Kind</th>
+        <th scope="col">Action</th>
+        <th scope="col">Status</th>
+        <th scope="col">Actor</th>
+        <th scope="col">Summary</th>
+        <th scope="col">Metadata</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${entries.isEmpty ? '''
+<tr>
+  <td colspan="7" class="muted">No audit entries yet.</td>
+</tr>
+''' : entries.take(250).map((entry) => '''
+<tr>
+  <td class="muted">${formatRelative(entry.timestamp)}</td>
+  <td>${escapeHtml(entry.kind)}</td>
+  <td>${escapeHtml(entry.action)}</td>
+  <td><span class="pill ${entry.status == 'ok' || entry.status == 'sent'
+            ? 'success'
+            : entry.status == 'error'
+            ? 'error'
+            : 'warning'}">${escapeHtml(entry.status)}</span></td>
+  <td class="muted">${escapeHtml(entry.actor ?? 'system')}</td>
+  <td class="muted">${escapeHtml(entry.summary ?? '—')}</td>
+  <td class="muted">${escapeHtml(_formatMetadata(entry.metadata))}</td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+''';
+}
+
+String _formatMetadata(Map<String, Object?> metadata) {
+  if (metadata.isEmpty) return '—';
+  final values = metadata.entries
+      .map((entry) => '${entry.key}=${entry.value}')
+      .toList(growable: false);
+  return values.join(', ');
+}
diff --git a/packages/dashboard/lib/src/ui/content.dart b/packages/dashboard/lib/src/ui/content.dart
index 8ed220b..b88cc74 100644
--- a/packages/dashboard/lib/src/ui/content.dart
+++ b/packages/dashboard/lib/src/ui/content.dart
@@ -1,10 +1,17 @@
 import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/audit.dart';
 import 'package:stem_dashboard/src/ui/events.dart';
+import 'package:stem_dashboard/src/ui/failures.dart';
+import 'package:stem_dashboard/src/ui/jobs.dart';
 import 'package:stem_dashboard/src/ui/layout.dart';
+import 'package:stem_dashboard/src/ui/namespaces.dart';
 import 'package:stem_dashboard/src/ui/options.dart';
 import 'package:stem_dashboard/src/ui/overview.dart';
+import 'package:stem_dashboard/src/ui/search.dart';
+import 'package:stem_dashboard/src/ui/task_detail.dart';
 import 'package:stem_dashboard/src/ui/tasks.dart';
 import 'package:stem_dashboard/src/ui/workers.dart';
+import 'package:stem_dashboard/src/ui/workflows.dart';
 
 export 'package:stem_dashboard/src/ui/options.dart';
 
@@ -13,19 +20,76 @@ String buildPageContent({
   required DashboardPage page,
   required List<QueueSummary> queues,
   required List<WorkerStatus> workers,
+  List<DashboardTaskStatusEntry> taskStatuses = const [],
+  DashboardTaskStatusEntry? taskDetail,
+  List<DashboardTaskStatusEntry> runTimeline = const [],
+  DashboardWorkflowRunSnapshot? workflowRun,
+  List<DashboardWorkflowStepSnapshot> workflowSteps = const [],
+  List<DashboardAuditEntry> auditEntries = const [],
   DashboardThroughput? throughput,
   List<DashboardEvent> events = const [],
+  String defaultNamespace = 'stem',
   TasksPageOptions tasksOptions = const TasksPageOptions(),
   WorkersPageOptions workersOptions = const WorkersPageOptions(),
+  FailuresPageOptions failuresOptions = const FailuresPageOptions(),
+  SearchPageOptions searchOptions = const SearchPageOptions(),
+  NamespacesPageOptions namespacesOptions = const NamespacesPageOptions(),
+  WorkflowsPageOptions workflowsOptions = const WorkflowsPageOptions(),
+  JobsPageOptions jobsOptions = const JobsPageOptions(),
 }) {
   switch (page) {
     case DashboardPage.overview:
-      return buildOverviewContent(queues, workers, throughput);
+      return buildOverviewContent(
+        queues,
+        workers,
+        throughput,
+        taskStatuses,
+        defaultNamespace,
+      );
     case DashboardPage.tasks:
-      return buildTasksContent(queues, tasksOptions);
+      return buildTasksContent(queues, tasksOptions, taskStatuses);
+    case DashboardPage.taskDetail:
+      return buildTaskDetailContent(
+        taskDetail,
+        runTimeline,
+        workflowRun,
+        workflowSteps,
+      );
+    case DashboardPage.failures:
+      return buildFailuresContent(taskStatuses, failuresOptions);
+    case DashboardPage.search:
+      return buildSearchContent(
+        options: searchOptions,
+        queues: queues,
+        workers: workers,
+        taskStatuses: taskStatuses,
+        auditEntries: auditEntries,
+      );
+    case DashboardPage.audit:
+      return buildAuditContent(auditEntries);
     case DashboardPage.events:
       return buildEventsContent(events);
     case DashboardPage.workers:
       return buildWorkersContent(workers, queues, workersOptions);
+    case DashboardPage.namespaces:
+      return buildNamespacesContent(
+        queues: queues,
+        workers: workers,
+        taskStatuses: taskStatuses,
+        options: namespacesOptions,
+        defaultNamespace: defaultNamespace,
+      );
+    case DashboardPage.workflows:
+      return buildWorkflowsContent(
+        taskStatuses: taskStatuses,
+        options: workflowsOptions,
+      );
+    case DashboardPage.jobs:
+      return buildJobsContent(taskStatuses: taskStatuses, options: jobsOptions);
   }
 }
+
+/// Builds inline expandable-row content for task table details.
+String buildTaskInlineContent(DashboardTaskStatusEntry? task) {
+  return buildTaskInlinePanel(task);
+}
diff --git a/packages/dashboard/lib/src/ui/event_templates.dart b/packages/dashboard/lib/src/ui/event_templates.dart
index 013454e..0446c54 100644
--- a/packages/dashboard/lib/src/ui/event_templates.dart
+++ b/packages/dashboard/lib/src/ui/event_templates.dart
@@ -11,11 +11,11 @@ String renderEventItem(DashboardEvent event) {
       .map((entry) => '<span>${entry.key}: ${entry.value}</span>')
       .join();
   final summary = event.summary != null && event.summary!.isNotEmpty
-      ? '<p class="muted">${event.summary}</p>'
+      ? '<p class="muted mt-3 leading-relaxed">${event.summary}</p>'
       : '';
 
   return '''
-<details class="event-item" data-event>
+<details class="event-item ring-1 ring-inset ring-sky-300/10" data-event>
   <summary>
     <span class="event-title">${event.title}</span>
     <span class="event-time">$timestamp</span>
diff --git a/packages/dashboard/lib/src/ui/events.dart b/packages/dashboard/lib/src/ui/events.dart
index 98b0e16..6cbefdc 100644
--- a/packages/dashboard/lib/src/ui/events.dart
+++ b/packages/dashboard/lib/src/ui/events.dart
@@ -8,8 +8,8 @@ import 'package:stem_dashboard/src/ui/event_templates.dart';
 String buildEventsContent(List<DashboardEvent> events) {
   final items = events.isEmpty
       ? '''
-        <div class="event-item" id="event-log-placeholder">
-          <h3>No events captured yet</h3>
+        <div class="event-item ring-1 ring-inset ring-sky-300/10" id="event-log-placeholder">
+          <h3 class="text-lg font-semibold text-slate-100">No events captured yet</h3>
           <p class="muted">
             Configure the dashboard event bridge to stream Stem signals (enqueue, start, retry, completion) into Redis.
             Once connected, updates will appear here automatically via Turbo Streams.
@@ -19,14 +19,14 @@ String buildEventsContent(List<DashboardEvent> events) {
       : events.map(renderEventItem).join();
 
   return '''
-<section class="page-header">
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
   <h1>Events</h1>
   <p class="page-subtitle">
     Task lifecycle, retry, and worker log events stream into this feed. Turbo handles incremental updates without full-page reloads.
   </p>
 </section>
 
-<section class="event-feed" id="event-log">
+<section class="event-feed rounded-2xl border border-slate-300/10 bg-slate-900/20 p-3 sm:p-4" id="event-log">
   $items
 </section>
 ''';
diff --git a/packages/dashboard/lib/src/ui/failures.dart b/packages/dashboard/lib/src/ui/failures.dart
new file mode 100644
index 0000000..fc282f9
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/failures.dart
@@ -0,0 +1,180 @@
+// Public helper functions in this file are intentionally undocumented to keep
+// UI template files lightweight.
+// ignore_for_file: public_member_api_docs
+
+import 'package:stem/stem.dart' show TaskState;
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/options.dart';
+import 'package:stem_dashboard/src/ui/shared.dart';
+
+String buildFailuresContent(
+  List<DashboardTaskStatusEntry> taskStatuses,
+  FailuresPageOptions options,
+) {
+  final failures = taskStatuses
+      .where((task) => task.state == TaskState.failed)
+      .toList(growable: false);
+  final filtered = options.hasQueueFilter
+      ? failures
+            .where(
+              (task) =>
+                  task.queue.toLowerCase() == options.queue!.toLowerCase(),
+            )
+            .toList(growable: false)
+      : failures;
+
+  final groups = _groupFailures(filtered)
+    ..sort((a, b) {
+      final byCount = b.count.compareTo(a.count);
+      if (byCount != 0) return byCount;
+      return b.lastUpdated.compareTo(a.lastUpdated);
+    });
+
+  final affectedQueues = filtered.map((task) => task.queue).toSet().length;
+  final redirectPath = options.hasQueueFilter
+      ? '/failures?queue=${Uri.encodeQueryComponent(options.queue!)}'
+      : '/failures';
+
+  return '''
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
+  <h1>Failure Diagnostics</h1>
+  <p class="page-subtitle">
+    Grouped failure fingerprints across queues and tasks with direct dead-letter replay controls.
+  </p>
+</section>
+
+${renderFailuresAlert(options)}
+
+<section class="cards">
+  ${buildMetricCard('Failed statuses', formatInt(filtered.length), 'Terminal failed task statuses captured by the result backend.')}
+  ${buildMetricCard('Failure groups', formatInt(groups.length), 'Unique queue + task + error fingerprints.')}
+  ${buildMetricCard('Affected queues', formatInt(affectedQueues), 'Queues currently carrying failed statuses.')}
+</section>
+
+<form class="filter-form rounded-2xl border border-slate-300/15 bg-slate-900/40 p-4" action="/failures" method="get" data-turbo-frame="dashboard-content">
+  <label class="filter-label" for="failure-queue-filter">Queue filter</label>
+  <input id="failure-queue-filter" name="queue" value="${escapeHtml(options.queue ?? '')}" placeholder="default" />
+  <button type="submit">Apply</button>
+  ${options.hasQueueFilter ? '<a class="clear-filter" href="/failures" data-turbo-frame="dashboard-content">Clear</a>' : ''}
+</form>
+
+<section class="table-card ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Failure Groups</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Queue</th>
+        <th scope="col">Task</th>
+        <th scope="col">Fingerprint</th>
+        <th scope="col">Count</th>
+        <th scope="col">Latest</th>
+        <th scope="col">Retry</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${groups.isEmpty ? '''
+<tr>
+  <td colspan="6" class="muted">No failed statuses match the current filter.</td>
+</tr>
+''' : groups.map((group) => '''
+<tr>
+  <td><span class="pill">${escapeHtml(group.queue)}</span></td>
+  <td>${escapeHtml(group.taskName)}</td>
+  <td class="muted">${escapeHtml(group.errorFingerprint)}</td>
+  <td>${formatInt(group.count)}</td>
+  <td class="muted">${formatRelative(group.lastUpdated)}</td>
+  <td>
+    <form class="inline-form" action="/queues/replay" method="post" data-turbo-frame="dashboard-content">
+      <input type="hidden" name="queue" value="${escapeHtml(group.queue)}" />
+      <input type="hidden" name="limit" value="${group.replayLimit}" />
+      <input type="hidden" name="redirect" value="${escapeHtml(redirectPath)}" />
+      <button type="submit" class="ghost-button">Replay DLQ</button>
+    </form>
+  </td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+
+<section class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Recent Failed Tasks</h2>
+  </header>
+  ${buildTaskStatusTable(
+    filtered.take(40).toList(growable: false),
+    options: DashboardTaskTableOptions(
+      showState: false,
+      emptyMessage: 'No individual failures to inspect.',
+      actionsBuilder: (task) =>
+          buildTaskReplayAction(task, redirectPath: redirectPath),
+    ),
+  )}
+</section>
+''';
+}
+
+String renderFailuresAlert(FailuresPageOptions options) {
+  if (options.hasError) {
+    return '<div class="flash error">${escapeHtml(options.errorMessage!)}</div>';
+  }
+  if (options.hasFlash) {
+    return '<div class="flash success">${escapeHtml(options.flashMessage!)}</div>';
+  }
+  return '';
+}
+
+List<_FailureGroup> _groupFailures(List<DashboardTaskStatusEntry> statuses) {
+  final groups = <String, _FailureGroup>{};
+  for (final task in statuses) {
+    final key = '${task.queue}|${task.taskName}|${task.errorFingerprint}';
+    final existing = groups[key];
+    if (existing == null) {
+      groups[key] = _FailureGroup(
+        queue: task.queue,
+        taskName: task.taskName,
+        errorFingerprint: task.errorFingerprint,
+        count: 1,
+        lastUpdated: task.updatedAt,
+      );
+      continue;
+    }
+    groups[key] = existing.copyWith(
+      count: existing.count + 1,
+      lastUpdated: task.updatedAt.isAfter(existing.lastUpdated)
+          ? task.updatedAt
+          : existing.lastUpdated,
+    );
+  }
+  return groups.values.toList(growable: false);
+}
+
+class _FailureGroup {
+  const _FailureGroup({
+    required this.queue,
+    required this.taskName,
+    required this.errorFingerprint,
+    required this.count,
+    required this.lastUpdated,
+  });
+
+  final String queue;
+  final String taskName;
+  final String errorFingerprint;
+  final int count;
+  final DateTime lastUpdated;
+
+  int get replayLimit => count.clamp(1, 100);
+
+  _FailureGroup copyWith({int? count, DateTime? lastUpdated}) {
+    return _FailureGroup(
+      queue: queue,
+      taskName: taskName,
+      errorFingerprint: errorFingerprint,
+      count: count ?? this.count,
+      lastUpdated: lastUpdated ?? this.lastUpdated,
+    );
+  }
+}
diff --git a/packages/dashboard/lib/src/ui/jobs.dart b/packages/dashboard/lib/src/ui/jobs.dart
new file mode 100644
index 0000000..164e070
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/jobs.dart
@@ -0,0 +1,106 @@
+// Public helper functions in this file are intentionally undocumented to keep
+// UI template files lightweight.
+// ignore_for_file: public_member_api_docs
+
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/options.dart';
+import 'package:stem_dashboard/src/ui/shared.dart';
+
+String buildJobsContent({
+  required List<DashboardTaskStatusEntry> taskStatuses,
+  required JobsPageOptions options,
+}) {
+  final jobs = buildJobSummaries(taskStatuses, limit: 500);
+  final taskFilter = options.task?.toLowerCase();
+  final queueFilter = options.queue?.toLowerCase();
+  final filtered = jobs.where((entry) {
+    final matchesTask =
+        taskFilter == null ||
+        taskFilter.isEmpty ||
+        entry.taskName.toLowerCase().contains(taskFilter);
+    final matchesQueue =
+        queueFilter == null ||
+        queueFilter.isEmpty ||
+        entry.sampleQueue.toLowerCase().contains(queueFilter);
+    return matchesTask && matchesQueue;
+  }).toList(growable: false);
+
+  final total = filtered.fold<int>(0, (sum, entry) => sum + entry.total);
+  final running = filtered.fold<int>(0, (sum, entry) => sum + entry.running);
+  final failures = filtered.fold<int>(0, (sum, entry) => sum + entry.failed);
+
+  return '''
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
+  <h1>Jobs</h1>
+  <p class="page-subtitle">
+    Task family rollups with quick drill down into filtered task execution history.
+  </p>
+</section>
+
+<section class="cards">
+  ${buildMetricCard('Task families', formatInt(filtered.length), 'Distinct task names represented in sampled statuses.')}
+  ${buildMetricCard('Sampled statuses', formatInt(total), 'Total status records currently included in this page sample.')}
+  ${buildMetricCard('Running', formatInt(running), 'Running statuses across filtered task families.')}
+  ${buildMetricCard('Failures', formatInt(failures), 'Failed statuses across filtered task families.')}
+</section>
+
+<form class="filter-form rounded-2xl border border-slate-300/15 bg-slate-900/40 p-4" action="/jobs" method="get" data-turbo-frame="dashboard-content">
+  <label class="filter-label" for="job-task-filter">Task name</label>
+  <input id="job-task-filter" name="task" value="${escapeHtml(options.task ?? '')}" placeholder="greeting.send" />
+  <label class="filter-label" for="job-queue-filter">Queue</label>
+  <input id="job-queue-filter" name="queue" value="${escapeHtml(options.queue ?? '')}" placeholder="default" />
+  <button type="submit">Apply</button>
+  ${(options.hasTask || options.hasQueue) ? '<a class="clear-filter" href="/jobs" data-turbo-frame="dashboard-content">Clear</a>' : ''}
+</form>
+
+<section class="table-card ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Job Summary</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Task</th>
+        <th scope="col">Queue</th>
+        <th scope="col">Sampled</th>
+        <th scope="col">Running</th>
+        <th scope="col">Succeeded</th>
+        <th scope="col">Failed</th>
+        <th scope="col">Retried</th>
+        <th scope="col">Cancelled</th>
+        <th scope="col">Failure ratio</th>
+        <th scope="col">Updated</th>
+        <th scope="col">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${filtered.isEmpty ? '''
+<tr>
+  <td colspan="11" class="muted">No jobs match the current filters.</td>
+</tr>
+''' : filtered.map((entry) => '''
+<tr>
+  <td>${escapeHtml(entry.taskName)}</td>
+  <td><span class="pill">${escapeHtml(entry.sampleQueue)}</span></td>
+  <td>${formatInt(entry.total)}</td>
+  <td>${formatInt(entry.running)}</td>
+  <td>${formatInt(entry.succeeded)}</td>
+  <td>${formatInt(entry.failed)}</td>
+  <td>${formatInt(entry.retried)}</td>
+  <td>${formatInt(entry.cancelled)}</td>
+  <td>${(entry.failureRatio * 100).toStringAsFixed(1)}%</td>
+  <td class="muted">${formatRelative(entry.lastUpdated)}</td>
+  <td>
+    <div class="action-bar">
+      <a class="ghost-button" href="/tasks?task=${Uri.encodeQueryComponent(entry.taskName)}" data-turbo-frame="dashboard-content">Tasks</a>
+      <a class="ghost-button" href="/tasks?queue=${Uri.encodeQueryComponent(entry.sampleQueue)}&task=${Uri.encodeQueryComponent(entry.taskName)}" data-turbo-frame="dashboard-content">Queue Slice</a>
+      <a class="ghost-button" href="/search?scope=tasks&q=${Uri.encodeQueryComponent(entry.taskName)}" data-turbo-frame="dashboard-content">Search</a>
+    </div>
+  </td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+''';
+}
diff --git a/packages/dashboard/lib/src/ui/layout.dart b/packages/dashboard/lib/src/ui/layout.dart
index 9b051de..6f34c38 100644
--- a/packages/dashboard/lib/src/ui/layout.dart
+++ b/packages/dashboard/lib/src/ui/layout.dart
@@ -1,3 +1,5 @@
+import 'package:stem_dashboard/src/ui/paths.dart';
+
 /// Pages supported by the dashboard UI.
 enum DashboardPage {
   /// Overview landing page.
@@ -6,9 +8,30 @@ enum DashboardPage {
   /// Task and queue details page.
   tasks('/tasks'),
 
+  /// Detailed view for a single task / workflow run.
+  taskDetail('/tasks/detail'),
+
+  /// Failure diagnostics and grouped retry controls.
+  failures('/failures'),
+
+  /// Global search and saved operational views.
+  search('/search'),
+
+  /// Audit log for actions and alert deliveries.
+  audit('/audit'),
+
   /// Event feed page.
   events('/events'),
 
+  /// Namespace-centric operational summary.
+  namespaces('/namespaces'),
+
+  /// Workflow run-centric operational summary.
+  workflows('/workflows'),
+
+  /// Task family/job-centric operational summary.
+  jobs('/jobs'),
+
   /// Worker status page.
   workers('/workers');
 
@@ -25,26 +48,76 @@ enum DashboardPage {
         return 'Overview';
       case DashboardPage.tasks:
         return 'Tasks';
+      case DashboardPage.taskDetail:
+        return 'Task Detail';
+      case DashboardPage.failures:
+        return 'Failures';
+      case DashboardPage.search:
+        return 'Search';
+      case DashboardPage.audit:
+        return 'Audit';
       case DashboardPage.events:
         return 'Events';
+      case DashboardPage.namespaces:
+        return 'Namespaces';
+      case DashboardPage.workflows:
+        return 'Workflows';
+      case DashboardPage.jobs:
+        return 'Jobs';
       case DashboardPage.workers:
         return 'Workers';
     }
   }
 
+  /// Whether this page should appear in sidebar navigation.
+  bool get showInNav => this != DashboardPage.taskDetail;
+
   /// Browser title for this page.
   String get title => 'Stem Dashboard · $label';
 }
 
 /// Renders the full HTML layout for a dashboard page.
-String renderLayout(DashboardPage page, String content) {
+String renderLayout(
+  DashboardPage page,
+  String content, {
+  String basePath = '',
+  String? streamPath,
+}) {
+  final resolvedBasePath = normalizeDashboardBasePath(basePath);
+  final resolvedStreamPath =
+      streamPath ?? dashboardRoute(basePath, '/dash/streams');
   return '''
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>${page.title}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com?plugins=forms,typography" data-turbo-track="reload"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            stem: {
+              950: '#0f172a',
+              900: '#111827',
+              800: '#1e293b',
+              500: '#38bdf8',
+              400: '#7dd3fc',
+            },
+          },
+          fontFamily: {
+            sans: ['Manrope', 'system-ui', 'sans-serif'],
+          },
+        },
+      },
+    };
+  </script>
   <script src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
   <style>
     *,
@@ -53,26 +126,15 @@ String renderLayout(DashboardPage page, String content) {
       box-sizing: border-box;
     }
 
-    :root {
+    html {
       color-scheme: dark;
-      --surface-900: #0f172a;
-      --surface-800: #111827;
-      --surface-700: #1e293b;
-      --surface-600: #1f2937;
-      --accent-500: #38bdf8;
-      --accent-400: #7dd3fc;
-      --text-primary: #e2e8f0;
-      --text-secondary: #94a3b8;
-      --border-muted: rgba(148, 163, 184, 0.2);
-      --border-strong: rgba(148, 163, 184, 0.35);
-      --shadow-soft: 0 12px 40px rgba(15, 23, 42, 0.32);
-      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     }
 
     body {
       margin: 0;
-      background: var(--surface-900);
-      color: var(--text-primary);
+      font-family: "Manrope", system-ui, sans-serif;
+      color: #e2e8f0;
+      background: #0f172a;
     }
 
     a {
@@ -80,380 +142,722 @@ String renderLayout(DashboardPage page, String content) {
       text-decoration: none;
     }
 
+    h1 {
+      margin: 0;
+      font-size: 1.875rem;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    thead {
+      background: rgba(30, 41, 59, 0.85);
+      color: #94a3b8;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    th,
+    td {
+      padding: 0.875rem 1rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    tbody tr {
+      border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+      transition: background-color 160ms ease;
+    }
+
+    tbody tr:last-child {
+      border-bottom: none;
+    }
+
+    tbody tr:hover {
+      background: rgba(30, 64, 175, 0.25);
+    }
+
+    turbo-frame#dashboard-content {
+      display: block;
+      flex: 1;
+      position: relative;
+      min-height: 14rem;
+      transition: opacity 140ms ease;
+    }
+
+    turbo-frame#dashboard-content[data-nav-loading='true'][busy] {
+      opacity: 0.82;
+    }
+
+    turbo-frame#dashboard-content[data-nav-loading='true'][busy]::before {
+      content: 'Updating view';
+      position: absolute;
+      top: 0.75rem;
+      right: 1rem;
+      z-index: 31;
+      pointer-events: none;
+      border-radius: 999px;
+      border: 1px solid rgba(125, 211, 252, 0.36);
+      background: rgba(15, 23, 42, 0.92);
+      color: #bae6fd;
+      padding: 0.25rem 0.6rem;
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+
+    turbo-frame#dashboard-content[data-nav-loading='true'][busy]::after {
+      content: '';
+      position: absolute;
+      inset: 0.75rem;
+      z-index: 30;
+      pointer-events: none;
+      border-radius: 0.9rem;
+      border: 1px solid rgba(125, 211, 252, 0.14);
+      background:
+        linear-gradient(
+          90deg,
+          rgba(56, 189, 248, 0) 0%,
+          rgba(125, 211, 252, 0.2) 45%,
+          rgba(56, 189, 248, 0) 100%
+        ),
+        repeating-linear-gradient(
+          to bottom,
+          rgba(148, 163, 184, 0.12) 0 14px,
+          rgba(15, 23, 42, 0) 14px 34px
+        ),
+        linear-gradient(
+          180deg,
+          rgba(15, 23, 42, 0.88) 0%,
+          rgba(15, 23, 42, 0.78) 100%
+        );
+      background-size: 220% 100%, 100% 100%, 100% 100%;
+      animation: dashboardSkeletonShimmer 1.2s linear infinite;
+    }
+
+    @keyframes dashboardSkeletonShimmer {
+      from {
+        background-position: -180% 0, 0 0, 0 0;
+      }
+      to {
+        background-position: 180% 0, 0 0, 0 0;
+      }
+    }
+
     .app-shell {
-      min-height: 100vh;
+      position: relative;
       display: flex;
-      gap: 24px;
-      padding: 24px;
+      min-height: 100vh;
+      gap: 1rem;
+      padding: 0.75rem;
+    }
+
+    .app-shell::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background:
+        radial-gradient(900px 420px at 12% -8%, rgba(56, 189, 248, 0.18), transparent 70%),
+        radial-gradient(760px 380px at 102% 18%, rgba(14, 116, 144, 0.16), transparent 64%),
+        linear-gradient(180deg, #0b1220 0%, #0f172a 48%, #0c1324 100%);
+    }
+
+    .app-shell > * {
+      position: relative;
+      z-index: 10;
+    }
+
+    .sidebar-backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 30;
+      background: rgba(15, 23, 42, 0.72);
+      backdrop-filter: blur(4px);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 200ms ease;
+    }
+
+    .sidebar-backdrop[data-open='true'] {
+      opacity: 1;
+      pointer-events: auto;
     }
 
     .sidebar {
-      width: 240px;
-      flex-shrink: 0;
-      background: linear-gradient(160deg, rgba(30, 58, 138, 0.6), rgba(8, 145, 178, 0.3));
-      border-radius: 24px;
-      padding: 28px 22px;
+      position: fixed;
+      top: 0.75rem;
+      bottom: 0.75rem;
+      left: 0.75rem;
+      z-index: 40;
       display: flex;
       flex-direction: column;
-      gap: 24px;
-      box-shadow: var(--shadow-soft);
+      gap: 1.5rem;
+      width: min(18rem, calc(100vw - 1.5rem));
+      transform: translateX(-120%);
+      border-radius: 1.5rem;
       border: 1px solid rgba(125, 211, 252, 0.2);
+      background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(23, 37, 84, 0.9) 52%, rgba(22, 78, 99, 0.8) 100%);
+      box-shadow: 0 24px 50px rgba(2, 6, 23, 0.45);
+      padding: 1.25rem 1rem;
+      transition: transform 300ms ease;
+      height: calc(100vh - 1.5rem);
+    }
+
+    .sidebar[data-open='true'] {
+      transform: translateX(0);
+    }
+
+    .sidebar-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+    }
+
+    .sidebar-close,
+    .sidebar-toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 0.75rem;
+      border: 1px solid rgba(203, 213, 225, 0.2);
+      background: rgba(15, 23, 42, 0.65);
+      color: #cbd5e1;
+      cursor: pointer;
+    }
+
+    .sidebar-close:hover,
+    .sidebar-toggle:hover {
+      border-color: rgba(125, 211, 252, 0.55);
+      color: #bae6fd;
+    }
+
+    .brand-panel {
+      border-radius: 1rem;
+      border: 1px solid rgba(125, 211, 252, 0.25);
+      background: rgba(56, 189, 248, 0.1);
+      padding: 0.75rem 0.875rem;
+      flex: 1;
     }
 
     .brand {
+      font-size: 0.9rem;
       font-weight: 600;
-      letter-spacing: 0.08em;
       text-transform: uppercase;
-      color: var(--accent-400);
-      font-size: 0.95rem;
+      letter-spacing: 0.16em;
+      color: #e0f2fe;
+    }
+
+    .brand-tagline {
+      margin: 0.25rem 0 0;
+      font-size: 0.75rem;
+      color: #94a3b8;
+    }
+
+    .sidebar-status {
+      margin-top: 0.75rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.72rem;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+      color: #bbf7d0;
+    }
+
+    .status-dot {
+      width: 0.625rem;
+      height: 0.625rem;
+      border-radius: 999px;
+      background: #86efac;
+      box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.2);
     }
 
     nav {
       display: flex;
       flex-direction: column;
-      gap: 8px;
+      gap: 0.5rem;
+      border-radius: 1rem;
+      border: 1px solid rgba(203, 213, 225, 0.14);
+      background: rgba(15, 23, 42, 0.45);
+      padding: 0.5rem;
     }
 
     .nav-link {
       display: flex;
       align-items: center;
-      gap: 12px;
-      padding: 12px 14px;
-      border-radius: 12px;
-      color: var(--text-secondary);
+      gap: 0.75rem;
+      padding: 0.65rem 0.875rem;
+      border-radius: 0.75rem;
+      color: rgba(226, 232, 240, 0.82);
       font-weight: 500;
-      transition: background 160ms ease, color 160ms ease, transform 160ms ease;
+      transition: transform 150ms ease, background-color 150ms ease, color 150ms ease;
     }
 
     .nav-link::before {
       content: '';
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: rgba(148, 163, 184, 0.24);
-      transition: background 160ms ease;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 999px;
+      background: rgba(148, 163, 184, 0.35);
+      transition: background-color 150ms ease;
     }
 
     .nav-link:hover {
-      background: rgba(148, 163, 184, 0.16);
-      color: var(--text-primary);
       transform: translateX(2px);
+      background: rgba(125, 211, 252, 0.12);
+      color: #f8fafc;
     }
 
     .nav-link.active {
-      background: rgba(56, 189, 248, 0.18);
-      color: var(--text-primary);
+      background: linear-gradient(90deg, rgba(125, 211, 252, 0.24), rgba(103, 232, 249, 0.18));
+      color: #f8fafc;
     }
 
     .nav-link.active::before {
-      background: var(--accent-500);
+      background: #7dd3fc;
     }
 
     .sidebar-footer {
       margin-top: auto;
-      font-size: 0.8rem;
-      color: rgba(226, 232, 240, 0.6);
+      border-radius: 1rem;
+      border: 1px solid rgba(203, 213, 225, 0.14);
+      background: rgba(15, 23, 42, 0.45);
+      padding: 0.75rem 0.875rem;
+      font-size: 0.75rem;
+      color: rgba(226, 232, 240, 0.7);
+      line-height: 1.5;
     }
 
     .main {
-      flex: 1;
-      background: var(--surface-800);
-      border-radius: 32px;
-      padding: 40px;
-      box-shadow: var(--shadow-soft);
-      border: 1px solid rgba(148, 163, 184, 0.12);
+      position: relative;
       display: flex;
+      flex: 1;
       flex-direction: column;
+      min-width: 0;
+      border-radius: 1.5rem;
+      border: 1px solid rgba(148, 163, 184, 0.16);
+      background: rgba(15, 23, 42, 0.7);
+      backdrop-filter: blur(8px);
+      box-shadow: 0 24px 50px rgba(2, 6, 23, 0.4);
+      padding: 1rem;
     }
 
-    turbo-frame#dashboard-content {
-      display: block;
-      flex: 1;
+    .top-panel {
+      margin-bottom: 1.25rem;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      border-radius: 1rem;
+      border: 1px solid rgba(125, 211, 252, 0.22);
+      background: linear-gradient(90deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.74), rgba(21, 94, 117, 0.58));
+      padding: 1rem;
     }
 
-    h1 {
+    .top-panel-left {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      min-width: 0;
+    }
+
+    .panel-eyebrow {
+      margin: 0 0 0.2rem;
+      font-size: 0.72rem;
+      text-transform: uppercase;
+      letter-spacing: 0.14em;
+      color: #94a3b8;
+    }
+
+    .panel-title {
       margin: 0;
-      font-size: 2rem;
+      font-size: 1.4rem;
       font-weight: 600;
+      color: #f1f5f9;
       letter-spacing: -0.02em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: min(60vw, 28rem);
+    }
+
+    .top-panel-right {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .status-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      border-radius: 999px;
+      border: 1px solid rgba(110, 231, 183, 0.38);
+      background: rgba(52, 211, 153, 0.12);
+      padding: 0.3rem 0.75rem;
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      color: #d1fae5;
+    }
+
+    .status-pill-dot {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 999px;
+      background: #86efac;
+    }
+
+    .quick-link {
+      display: inline-flex;
+      align-items: center;
+      border-radius: 999px;
+      border: 1px solid rgba(125, 211, 252, 0.32);
+      background: rgba(56, 189, 248, 0.14);
+      padding: 0.36rem 0.75rem;
+      font-size: 0.72rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: #bae6fd;
+    }
+
+    .quick-link:hover {
+      border-color: rgba(186, 230, 253, 0.55);
+      background: rgba(125, 211, 252, 0.2);
+    }
+
+    .content-shell {
+      display: flex;
+      flex: 1;
+      min-height: 0;
     }
 
     .page-header {
-      margin-bottom: 28px;
+      margin-bottom: 1.75rem;
+      border-radius: 1rem;
+      border: 1px solid rgba(203, 213, 225, 0.14);
+      background: rgba(15, 23, 42, 0.45);
+      padding: 1.1rem 1.25rem;
     }
 
     .page-subtitle {
-      margin-top: 12px;
-      color: var(--text-secondary);
-      font-size: 0.95rem;
+      margin-top: 0.75rem;
+      font-size: 0.93rem;
+      color: #94a3b8;
+      line-height: 1.5;
     }
 
     .cards {
+      margin-bottom: 2rem;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-      gap: 20px;
-      margin-bottom: 32px;
+      gap: 1.25rem;
     }
 
     .card {
-      border-radius: 20px;
-      padding: 20px;
-      background: linear-gradient(160deg, rgba(17, 24, 39, 0.94), rgba(15, 23, 42, 0.8));
-      border: 1px solid rgba(148, 163, 184, 0.14);
-      box-shadow: 0 14px 35px rgba(15, 23, 42, 0.4);
+      position: relative;
+      overflow: hidden;
+      border-radius: 1rem;
+      border: 1px solid rgba(148, 163, 184, 0.16);
+      background: linear-gradient(150deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.86));
+      padding: 1.25rem;
+      box-shadow: 0 10px 24px rgba(2, 6, 23, 0.35);
     }
 
     .card-title {
-      font-size: 0.85rem;
+      margin-bottom: 0.75rem;
+      font-size: 0.76rem;
       font-weight: 600;
-      letter-spacing: 0.04em;
       text-transform: uppercase;
-      color: var(--text-secondary);
-      margin-bottom: 12px;
+      letter-spacing: 0.08em;
+      color: #94a3b8;
     }
 
     .card-value {
-      font-size: 1.75rem;
+      font-size: 1.8rem;
       font-weight: 600;
+      color: #f1f5f9;
     }
 
     .card-caption {
-      margin-top: 10px;
-      color: rgba(148, 163, 184, 0.8);
-      font-size: 0.9rem;
+      margin-top: 0.65rem;
+      font-size: 0.86rem;
+      color: rgba(148, 163, 184, 0.92);
+      line-height: 1.45;
     }
 
     .table-card {
-      border-radius: 22px;
-      border: 1px solid rgba(148, 163, 184, 0.12);
-      background: rgba(15, 23, 42, 0.86);
       overflow: hidden;
+      border-radius: 1rem;
+      border: 1px solid rgba(148, 163, 184, 0.18);
+      background: rgba(2, 6, 23, 0.78);
+      box-shadow: 0 8px 20px rgba(2, 6, 23, 0.3);
     }
 
     .filter-form {
+      margin: 1.5rem 0;
       display: flex;
-      gap: 12px;
-      align-items: center;
       flex-wrap: wrap;
-      margin: 24px 0;
+      align-items: center;
+      gap: 0.75rem;
+      border-radius: 1rem;
+      border: 1px solid rgba(203, 213, 225, 0.14);
+      background: rgba(15, 23, 42, 0.4);
+      padding: 1rem;
+    }
+
+    .filter-form input[type="text"],
+    .filter-form select,
+    .form-grid input,
+    .form-grid textarea {
+      min-width: 10rem;
+      border-radius: 0.75rem;
+      border: 1px solid rgba(148, 163, 184, 0.2);
+      background: rgba(30, 41, 59, 0.75);
+      color: #e2e8f0;
+      padding: 0.6rem 0.75rem;
+      font: inherit;
     }
 
     .filter-form input[type="text"] {
-      background: rgba(30, 41, 59, 0.7);
-      border: 1px solid rgba(148, 163, 184, 0.18);
-      border-radius: 12px;
-      padding: 10px 14px;
-      color: var(--text-primary);
-      min-width: 200px;
+      min-width: 13rem;
     }
 
-    .filter-form button {
-      background: var(--accent-500);
-      color: var(--surface-900);
+    .filter-form button,
+    .enqueue-form button {
       border: none;
-      border-radius: 12px;
-      padding: 10px 16px;
+      border-radius: 0.75rem;
+      background: #38bdf8;
+      color: #0f172a;
+      padding: 0.62rem 1rem;
       font-weight: 600;
       cursor: pointer;
     }
 
-    .filter-form button:hover {
-      background: var(--accent-400);
+    .filter-form button:hover,
+    .enqueue-form button:hover {
+      background: #7dd3fc;
     }
 
     .filter-label {
-      font-size: 0.8rem;
+      font-size: 0.72rem;
       text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: var(--text-secondary);
+      letter-spacing: 0.12em;
+      color: #94a3b8;
     }
 
     .clear-filter {
-      color: var(--accent-400);
-      font-size: 0.85rem;
+      font-size: 0.86rem;
+      color: #7dd3fc;
     }
 
     .sort-link {
-      color: var(--text-secondary);
+      color: #94a3b8;
       font-weight: 600;
     }
 
     .sort-link:hover {
-      color: var(--accent-400);
+      color: #7dd3fc;
     }
 
     .sort-link.active {
-      color: var(--text-primary);
-    }
-
-    table {
-      width: 100%;
-      border-collapse: collapse;
-    }
-
-    thead {
-      background: rgba(30, 41, 59, 0.85);
-      text-transform: uppercase;
-      font-size: 0.75rem;
-      letter-spacing: 0.08em;
-      color: var(--text-secondary);
-    }
-
-    th,
-    td {
-      padding: 14px 18px;
-      text-align: left;
-    }
-
-    tbody tr {
-      border-bottom: 1px solid rgba(148, 163, 184, 0.08);
-      transition: background 140ms ease;
-    }
-
-    tbody tr:last-child {
-      border-bottom: none;
+      color: #f1f5f9;
     }
 
-    tbody tr:hover {
-      background: rgba(30, 64, 175, 0.16);
-    }
-
-    .queue-row {
+    .queue-row,
+    .task-row {
       cursor: pointer;
     }
 
     .queue-row:hover {
-      background: rgba(56, 189, 248, 0.12);
+      background: rgba(125, 211, 252, 0.1);
     }
 
-    .queue-detail {
+    .queue-detail,
+    .task-detail {
       display: none;
-      background: rgba(15, 23, 42, 0.75);
+      background: rgba(2, 6, 23, 0.68);
     }
 
-    .queue-detail.visible {
+    .queue-detail.visible,
+    .task-detail.visible {
       display: table-row;
     }
 
+    .task-detail-cell {
+      padding: 1rem;
+    }
+
     .detail-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-      gap: 12px;
+      gap: 0.75rem;
     }
 
     .detail-grid div {
+      border-radius: 0.75rem;
+      border: 1px solid rgba(148, 163, 184, 0.15);
+      background: rgba(30, 41, 59, 0.6);
+      padding: 0.75rem;
+    }
+
+    .meta-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: 0.5rem;
+    }
+
+    .meta-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.3rem;
+      min-width: 0;
+      border-radius: 0.65rem;
+      border: 1px solid rgba(148, 163, 184, 0.15);
       background: rgba(30, 41, 59, 0.6);
-      border: 1px solid rgba(148, 163, 184, 0.12);
-      border-radius: 12px;
-      padding: 12px;
+      padding: 0.6rem;
+    }
+
+    .payload-block {
+      margin-top: 0.65rem;
+      white-space: pre-wrap;
+      word-break: break-word;
+      border-radius: 0.65rem;
+      border: 1px solid rgba(148, 163, 184, 0.2);
+      background: rgba(2, 6, 23, 0.72);
+      padding: 0.65rem 0.75rem;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
+      font-size: 0.76rem;
+      line-height: 1.55;
+      color: #cbd5e1;
     }
 
     .flash {
-      padding: 14px 18px;
-      border-radius: 12px;
-      margin-bottom: 20px;
+      margin-bottom: 1.25rem;
+      border-radius: 0.75rem;
+      padding: 0.85rem 1rem;
       font-weight: 600;
     }
 
     .flash.success {
-      background: rgba(34, 197, 94, 0.16);
+      border: 1px solid rgba(52, 211, 153, 0.35);
+      background: rgba(52, 211, 153, 0.16);
       color: #bbf7d0;
-      border: 1px solid rgba(34, 197, 94, 0.32);
     }
 
     .flash.error {
-      background: rgba(239, 68, 68, 0.16);
+      border: 1px solid rgba(248, 113, 113, 0.35);
+      background: rgba(248, 113, 113, 0.16);
       color: #fecaca;
-      border: 1px solid rgba(239, 68, 68, 0.32);
     }
 
     .enqueue-card {
-      background: rgba(15, 23, 42, 0.8);
-      border: 1px solid rgba(148, 163, 184, 0.14);
-      border-radius: 16px;
-      padding: 24px;
+      border-radius: 1rem;
+      border: 1px solid rgba(148, 163, 184, 0.16);
+      background: rgba(2, 6, 23, 0.78);
+      padding: 1.5rem;
     }
 
     .enqueue-form {
       display: flex;
       flex-direction: column;
-      gap: 16px;
+      gap: 1rem;
     }
 
     .form-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-      gap: 16px;
+      gap: 1rem;
     }
 
     .form-grid label {
       display: flex;
       flex-direction: column;
-      gap: 8px;
-      color: var(--text-secondary);
-      font-size: 0.85rem;
-    }
-
-    .form-grid input,
-    .form-grid textarea {
-      background: rgba(30, 41, 59, 0.72);
-      border: 1px solid rgba(148, 163, 184, 0.18);
-      border-radius: 12px;
-      padding: 10px 12px;
-      color: var(--text-primary);
+      gap: 0.5rem;
+      font-size: 0.86rem;
+      color: #94a3b8;
     }
 
     .payload-label textarea {
-      min-height: 120px;
+      min-height: 8rem;
       resize: vertical;
     }
 
     .enqueue-form button {
       align-self: flex-start;
-      background: var(--accent-500);
-      color: var(--surface-900);
-      border: none;
-      border-radius: 12px;
-      padding: 12px 18px;
-      font-weight: 600;
-      cursor: pointer;
-    }
-
-    .enqueue-form button:hover {
-      background: var(--accent-400);
+      padding: 0.72rem 1rem;
     }
 
     .muted {
-      color: var(--text-secondary);
+      color: #94a3b8;
     }
 
     .pill {
       display: inline-flex;
       align-items: center;
-      gap: 6px;
-      font-size: 0.8rem;
-      padding: 6px 12px;
+      gap: 0.35rem;
       border-radius: 999px;
-      background: rgba(56, 189, 248, 0.12);
-      color: var(--accent-400);
+      background: rgba(56, 189, 248, 0.14);
+      padding: 0.35rem 0.75rem;
+      color: #7dd3fc;
+      font-size: 0.76rem;
+    }
+
+    .pill.success {
+      background: rgba(52, 211, 153, 0.16);
+      color: #bbf7d0;
+    }
+
+    .pill.error {
+      background: rgba(248, 113, 113, 0.16);
+      color: #fecaca;
+    }
+
+    .pill.warning {
+      background: rgba(251, 191, 36, 0.2);
+      color: #fde68a;
+    }
+
+    .pill.running {
+      background: rgba(96, 165, 250, 0.2);
+      color: #bfdbfe;
+    }
+
+    .pill.muted {
+      background: rgba(148, 163, 184, 0.2);
+      color: #cbd5e1;
     }
 
     .event-feed {
       display: grid;
-      gap: 16px;
+      gap: 1rem;
     }
 
     .control-panel {
-      margin-top: 28px;
-      padding: 24px;
-      border-radius: 18px;
-      background: rgba(15, 23, 42, 0.78);
-      border: 1px solid rgba(148, 163, 184, 0.14);
+      margin-top: 1.75rem;
+      border-radius: 1rem;
+      border: 1px solid rgba(148, 163, 184, 0.16);
+      background: rgba(2, 6, 23, 0.75);
+      padding: 1.5rem;
     }
 
     .section-heading {
-      margin: 0 0 16px 0;
-      font-size: 1.1rem;
+      margin: 0 0 1rem;
+      font-size: 1.05rem;
       font-weight: 600;
       letter-spacing: -0.01em;
     }
@@ -461,46 +865,60 @@ String renderLayout(DashboardPage page, String content) {
     .action-bar {
       display: flex;
       flex-wrap: wrap;
-      gap: 12px;
+      gap: 0.75rem;
     }
 
     .inline-form {
+      margin: 0;
       display: inline-flex;
       align-items: center;
-      margin: 0;
     }
 
     .ghost-button {
-      background: rgba(56, 189, 248, 0.14);
-      border: 1px solid rgba(125, 211, 252, 0.28);
-      border-radius: 12px;
-      padding: 8px 14px;
-      color: var(--accent-400);
+      border-radius: 0.75rem;
+      border: 1px solid rgba(125, 211, 252, 0.3);
+      background: rgba(56, 189, 248, 0.15);
+      color: #7dd3fc;
+      padding: 0.5rem 0.85rem;
       font-weight: 600;
       cursor: pointer;
     }
 
     .ghost-button:hover {
-      background: rgba(56, 189, 248, 0.24);
+      background: rgba(125, 211, 252, 0.24);
+    }
+
+    .ghost-button.disabled {
+      opacity: 0.45;
+      pointer-events: none;
+      cursor: default;
+    }
+
+    .pager {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      border-bottom: 1px solid rgba(148, 163, 184, 0.12);
+      padding: 0.85rem 1rem;
     }
 
     .event-item {
-      border-radius: 16px;
-      background: rgba(15, 23, 42, 0.8);
-      border: 1px solid rgba(148, 163, 184, 0.12);
-      padding: 0;
       overflow: hidden;
+      border-radius: 1rem;
+      border: 1px solid rgba(148, 163, 184, 0.16);
+      background: rgba(2, 6, 23, 0.82);
     }
 
     .event-item summary {
-      cursor: pointer;
-      list-style: none;
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      padding: 18px;
+      justify-content: space-between;
+      list-style: none;
+      cursor: pointer;
+      padding: 1rem;
       font-weight: 600;
-      color: var(--text-primary);
+      color: #f1f5f9;
     }
 
     .event-item summary::-webkit-details-marker {
@@ -508,7 +926,7 @@ String renderLayout(DashboardPage page, String content) {
     }
 
     .event-item[open] summary {
-      background: rgba(56, 189, 248, 0.08);
+      background: rgba(56, 189, 248, 0.12);
     }
 
     .event-title {
@@ -517,60 +935,840 @@ String renderLayout(DashboardPage page, String content) {
 
     .event-time {
       font-size: 0.85rem;
-      color: var(--text-secondary);
+      color: #94a3b8;
     }
 
     .event-item > *:not(summary) {
-      padding: 0 18px 18px 18px;
+      padding: 0 1rem 1rem;
     }
 
     .event-meta {
+      margin-top: 0.65rem;
       display: flex;
       flex-wrap: wrap;
-      gap: 12px;
-      margin-top: 10px;
-      font-size: 0.85rem;
-      color: var(--text-secondary);
+      gap: 0.75rem;
+      font-size: 0.86rem;
+      color: #94a3b8;
+    }
+
+    .error-preview {
+      display: inline-block;
+      max-width: 30rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: top;
+    }
+
+    .mt-3 { margin-top: 0.75rem; }
+    .mb-2 { margin-bottom: 0.5rem; }
+    .mt-7 { margin-top: 1.75rem; }
+    .mb-7 { margin-bottom: 1.75rem; }
+    .p-4 { padding: 1rem; }
+    .text-center { text-align: center; }
+    .font-semibold { font-weight: 600; }
+    .font-medium { font-weight: 500; }
+    .text-slate-100 { color: #f1f5f9; }
+    .text-slate-300 { color: #cbd5e1; }
+    .text-slate-300\\/70 { color: rgba(203, 213, 225, 0.7); }
+    .text-sky-100 { color: #e0f2fe; }
+    .text-sky-200 { color: #bae6fd; }
+    .text-lg { font-size: 1.125rem; }
+    .text-sm { font-size: 0.875rem; }
+    .uppercase { text-transform: uppercase; }
+    .tracking-wide { letter-spacing: 0.06em; }
+    .tracking-wider { letter-spacing: 0.1em; }
+    .tracking-tight { letter-spacing: -0.01em; }
+    .leading-relaxed { line-height: 1.625; }
+    .border-b { border-bottom: 1px solid rgba(148, 163, 184, 0.12); }
+    .ring-1 { box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.14); }
+    .ring-inset { }
+    .ring-sky-300\\/10 { }
+    .bg-slate-900\\/20 { background: rgba(15, 23, 42, 0.2); }
+    .bg-slate-900\\/40 { background: rgba(15, 23, 42, 0.4); }
+    .bg-slate-900\\/45 { background: rgba(15, 23, 42, 0.45); }
+    .border { border: 1px solid rgba(148, 163, 184, 0.16); }
+    .border-slate-300\\/10 { border-color: rgba(203, 213, 225, 0.1); }
+    .border-slate-300\\/15 { border-color: rgba(203, 213, 225, 0.15); }
+    .rounded-2xl { border-radius: 1rem; }
+    .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
+    .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
+    .px-4 { padding-left: 1rem; padding-right: 1rem; }
+    .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+
+    @media (min-width: 640px) {
+      .top-panel {
+        padding: 1rem 1.25rem;
+      }
     }
 
-    @media (max-width: 1024px) {
+    @media (min-width: 1024px) {
       .app-shell {
-        flex-direction: column;
+        gap: 1.5rem;
+        padding: 1.5rem;
+      }
+
+      .sidebar-backdrop,
+      .sidebar-close,
+      .sidebar-toggle {
+        display: none;
+      }
+
+      .sidebar {
+        position: sticky;
+        top: 1.5rem;
+        left: auto;
+        transform: translateX(0);
+        width: 18rem;
+        height: calc(100vh - 3rem);
+      }
+
+      .main {
+        padding: 1.5rem;
+      }
+    }
+  </style>
+  <style type="text/tailwindcss">
+    @layer base {
+      *,
+      *::before,
+      *::after {
+        @apply box-border;
+      }
+
+      html {
+        color-scheme: dark;
+      }
+
+      body {
+        @apply m-0 bg-stem-950 font-sans text-slate-200 antialiased;
+      }
+
+      a {
+        @apply text-inherit no-underline;
+      }
+
+      h1 {
+        @apply m-0 text-3xl font-semibold tracking-tight;
+      }
+
+      table {
+        @apply w-full border-collapse;
+      }
+
+      thead {
+        @apply bg-slate-800/85 text-xs uppercase tracking-widest text-slate-400;
+      }
+
+      th,
+      td {
+        @apply px-4 py-3.5 text-left align-top;
+      }
+
+      tbody tr {
+        @apply border-b border-slate-400/10 transition-colors duration-150;
+      }
+
+      tbody tr:last-child {
+        @apply border-b-0;
+      }
+
+      tbody tr:hover {
+        @apply bg-blue-900/25;
+      }
+
+      turbo-frame#dashboard-content {
+        @apply block flex-1;
+      }
+    }
+
+    @layer components {
+      .app-shell {
+        @apply relative flex min-h-screen gap-4 p-3 lg:gap-6 lg:p-6;
+      }
+
+      .app-shell::before {
+        content: '';
+        @apply pointer-events-none fixed inset-0;
+        background:
+          radial-gradient(900px 420px at 12% -8%, rgba(56, 189, 248, 0.18), transparent 70%),
+          radial-gradient(760px 380px at 102% 18%, rgba(14, 116, 144, 0.16), transparent 64%),
+          linear-gradient(180deg, #0b1220 0%, #0f172a 48%, #0c1324 100%);
+      }
+
+      .app-shell > * {
+        @apply relative z-10;
+      }
+
+      .sidebar-backdrop {
+        @apply pointer-events-none fixed inset-0 z-30 bg-stem-950/70 opacity-0 backdrop-blur-sm transition duration-200 lg:hidden;
+      }
+
+      .sidebar-backdrop[data-open='true'] {
+        @apply pointer-events-auto opacity-100;
       }
 
       .sidebar {
-        flex-direction: row;
-        width: 100%;
-        align-items: center;
-        justify-content: space-between;
-        gap: 16px;
+        @apply fixed inset-y-3 left-3 z-40 flex -translate-x-full flex-col gap-6 rounded-3xl border border-sky-200/20 bg-gradient-to-b from-slate-900/95 via-blue-950/90 to-cyan-900/80 px-4 py-5 shadow-2xl shadow-sky-950/40 transition duration-300 lg:sticky lg:top-6 lg:w-72 lg:translate-x-0;
+        width: min(18rem, calc(100vw - 1.5rem));
+        height: calc(100vh - 1.5rem);
+      }
+
+      .sidebar[data-open='true'] {
+        @apply translate-x-0;
+      }
+
+      .sidebar-head {
+        @apply flex items-center justify-between gap-3;
+      }
+
+      .sidebar-close {
+        @apply inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-300/20 bg-slate-900/60 text-slate-300 transition hover:border-sky-300/45 hover:text-sky-200 lg:hidden;
+      }
+
+      .brand-panel {
+        @apply rounded-2xl border border-sky-300/25 bg-sky-400/10 px-3.5 py-3;
+      }
+
+      .brand {
+        @apply text-sm font-semibold uppercase tracking-widest text-sky-200;
+      }
+
+      .brand-tagline {
+        @apply mt-1 text-xs text-slate-400;
+      }
+
+      .sidebar-status {
+        @apply mt-4 flex items-center gap-2 text-xs uppercase tracking-wider text-emerald-200;
+      }
+
+      .status-dot {
+        @apply h-2.5 w-2.5 rounded-full bg-emerald-300 ring-4 ring-emerald-300/20;
       }
 
       nav {
-        flex-direction: row;
+        @apply flex flex-col gap-2 rounded-2xl border border-slate-300/15 bg-slate-900/40 p-2;
+      }
+
+      .nav-link {
+        @apply flex items-center gap-3 rounded-xl px-3.5 py-2.5 font-medium text-slate-300/80 transition duration-150;
+      }
+
+      .nav-link::before {
+        content: '';
+        @apply h-2 w-2 rounded-full bg-slate-400/30 transition duration-150;
+      }
+
+      .nav-link:hover {
+        @apply translate-x-0.5 bg-sky-300/10 text-slate-100;
+      }
+
+      .nav-link.active {
+        @apply bg-gradient-to-r from-sky-300/25 to-cyan-300/20 text-slate-50;
+      }
+
+      .nav-link.active::before {
+        @apply bg-sky-300;
+      }
+
+      .sidebar-footer {
+        @apply mt-auto rounded-2xl border border-slate-300/15 bg-slate-900/45 px-3.5 py-3 text-xs leading-relaxed text-slate-300/70;
       }
 
       .main {
-        padding: 28px;
+        @apply relative flex flex-1 flex-col rounded-3xl border border-slate-400/15 bg-slate-900/70 p-4 shadow-2xl backdrop-blur xl:p-6;
+      }
+
+      .top-panel {
+        @apply mb-5 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-sky-300/20 bg-gradient-to-r from-slate-900/85 via-slate-900/70 to-cyan-950/60 px-4 py-4;
+      }
+
+      .top-panel-left {
+        @apply flex min-w-0 items-center gap-3;
+      }
+
+      .sidebar-toggle {
+        @apply inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-300/20 bg-slate-900/60 text-slate-200 transition hover:border-sky-300/45 hover:text-sky-200 lg:hidden;
+      }
+
+      .panel-eyebrow {
+        @apply text-xs uppercase tracking-wider text-slate-400;
+      }
+
+      .panel-title {
+        @apply truncate text-xl font-semibold tracking-tight text-slate-100 sm:text-2xl;
+      }
+
+      .top-panel-right {
+        @apply flex flex-wrap items-center gap-2 sm:gap-3;
+      }
+
+      .status-pill {
+        @apply inline-flex items-center gap-2 rounded-full border border-emerald-300/35 bg-emerald-300/10 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-emerald-100;
+      }
+
+      .status-pill-dot {
+        @apply h-2 w-2 rounded-full bg-emerald-300;
+      }
+
+      .quick-link {
+        @apply inline-flex items-center rounded-full border border-sky-300/30 bg-sky-400/12 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-200 transition hover:border-sky-200/50 hover:bg-sky-300/20;
+      }
+
+      .content-shell {
+        @apply flex min-h-0 flex-1;
+      }
+
+      .page-header {
+        @apply mb-7;
+      }
+
+      .page-subtitle {
+        @apply mt-3 text-sm text-slate-400;
+      }
+
+      .cards {
+        @apply mb-8 grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4;
+      }
+
+      .card {
+        @apply rounded-2xl border border-slate-400/15 bg-gradient-to-br from-stem-900/95 to-stem-950/80 p-5 shadow-xl;
+      }
+
+      .card-title {
+        @apply mb-3 text-xs font-semibold uppercase tracking-wide text-slate-400;
+      }
+
+      .card-value {
+        @apply text-3xl font-semibold;
+      }
+
+      .card-caption {
+        @apply mt-2.5 text-sm text-slate-400/90;
+      }
+
+      .table-card {
+        @apply overflow-hidden rounded-2xl border border-slate-400/15 bg-stem-950/85;
+      }
+
+      .filter-form {
+        @apply my-6 flex flex-wrap items-center gap-3;
+      }
+
+      .filter-form input[type="text"],
+      .filter-form select {
+        @apply min-w-40 rounded-xl border border-slate-400/20 bg-slate-800/75 px-3.5 py-2.5 text-slate-100;
+      }
+
+      .filter-form input[type="text"] {
+        @apply min-w-52;
+      }
+
+      .filter-form button,
+      .enqueue-form button {
+        @apply cursor-pointer rounded-xl bg-sky-400 px-4 py-2.5 font-semibold text-stem-950 transition duration-150 hover:bg-sky-300;
+      }
+
+      .filter-label {
+        @apply text-xs uppercase tracking-widest text-slate-400;
+      }
+
+      .clear-filter {
+        @apply text-sm text-sky-300;
+      }
+
+      .sort-link {
+        @apply font-semibold text-slate-400;
+      }
+
+      .sort-link:hover {
+        @apply text-sky-300;
+      }
+
+      .sort-link.active {
+        @apply text-slate-100;
+      }
+
+      .queue-row,
+      .task-row {
+        @apply cursor-pointer;
+      }
+
+      .queue-row:hover {
+        @apply bg-sky-400/10;
+      }
+
+      .queue-detail,
+      .task-detail {
+        @apply hidden bg-stem-950/80;
+      }
+
+      .queue-detail.visible,
+      .task-detail.visible {
+        @apply table-row;
+      }
+
+      .task-detail-cell {
+        @apply p-4;
+      }
+
+      .detail-grid {
+        @apply grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3;
+      }
+
+      .detail-grid div {
+        @apply rounded-xl border border-slate-400/15 bg-slate-800/60 p-3;
+      }
+
+      .meta-list {
+        @apply grid grid-cols-1 gap-2 lg:grid-cols-2;
+      }
+
+      .meta-item {
+        @apply flex min-w-0 flex-col gap-1 rounded-lg border border-slate-400/15 bg-slate-800/60 p-2.5;
+      }
+
+      .payload-block {
+        @apply mt-2.5 whitespace-pre-wrap break-words rounded-lg border border-slate-400/20 bg-slate-950/70 px-3 py-2.5 font-mono text-xs leading-relaxed text-slate-300;
+      }
+
+      .flash {
+        @apply mb-5 rounded-xl px-4 py-3.5 font-semibold;
+      }
+
+      .flash.success {
+        @apply border border-emerald-400/35 bg-emerald-400/15 text-emerald-200;
+      }
+
+      .flash.error {
+        @apply border border-red-400/35 bg-red-400/15 text-red-200;
+      }
+
+      .enqueue-card {
+        @apply rounded-2xl border border-slate-400/15 bg-stem-950/85 p-6;
+      }
+
+      .enqueue-form {
+        @apply flex flex-col gap-4;
+      }
+
+      .form-grid {
+        @apply grid grid-cols-1 gap-4 md:grid-cols-2;
+      }
+
+      .form-grid label {
+        @apply flex flex-col gap-2 text-sm text-slate-400;
+      }
+
+      .form-grid input,
+      .form-grid textarea {
+        @apply rounded-xl border border-slate-400/20 bg-slate-800/75 px-3 py-2.5 text-slate-100;
+      }
+
+      .payload-label textarea {
+        @apply min-h-32 resize-y;
+      }
+
+      .enqueue-form button {
+        @apply self-start px-4 py-3;
+      }
+
+      .muted {
+        @apply text-slate-400;
+      }
+
+      .pill {
+        @apply inline-flex items-center gap-1.5 rounded-full bg-sky-400/15 px-3 py-1.5 text-xs text-sky-300;
+      }
+
+      .pill.success {
+        @apply bg-emerald-400/15 text-emerald-200;
+      }
+
+      .pill.error {
+        @apply bg-red-400/15 text-red-200;
+      }
+
+      .pill.warning {
+        @apply bg-amber-400/20 text-amber-200;
+      }
+
+      .pill.running {
+        @apply bg-blue-400/20 text-blue-200;
+      }
+
+      .pill.muted {
+        @apply bg-slate-400/20 text-slate-300;
+      }
+
+      .event-feed {
+        @apply grid gap-4;
+      }
+
+      .control-panel {
+        @apply mt-7 rounded-2xl border border-slate-400/15 bg-stem-950/80 p-6;
+      }
+
+      .section-heading {
+        @apply mb-4 text-lg font-semibold tracking-tight;
+      }
+
+      .action-bar {
+        @apply flex flex-wrap gap-3;
+      }
+
+      .inline-form {
+        @apply m-0 inline-flex items-center;
+      }
+
+      .ghost-button {
+        @apply cursor-pointer rounded-xl border border-sky-300/30 bg-sky-400/15 px-3.5 py-2 font-semibold text-sky-300 transition duration-150 hover:bg-sky-400/25;
+      }
+
+      .ghost-button.disabled {
+        @apply pointer-events-none cursor-default opacity-45;
+      }
+
+      .pager {
+        @apply flex items-center justify-between gap-3 border-b border-slate-400/10 px-4 py-3.5;
+      }
+
+      .event-item {
+        @apply overflow-hidden rounded-2xl border border-slate-400/15 bg-stem-950/85;
+      }
+
+      .event-item summary {
+        @apply flex cursor-pointer list-none items-center justify-between px-4 py-4 font-semibold text-slate-100;
+      }
+
+      .event-item summary::-webkit-details-marker {
+        display: none;
+      }
+
+      .event-item[open] summary {
+        @apply bg-sky-400/10;
+      }
+
+      .event-title {
+        @apply text-base;
+      }
+
+      .event-time {
+        @apply text-sm text-slate-400;
+      }
+
+      .event-item > *:not(summary) {
+        @apply px-4 pb-4;
+      }
+
+      .event-meta {
+        @apply mt-2.5 flex flex-wrap gap-3 text-sm text-slate-400;
+      }
+
+      .error-preview {
+        @apply inline-block max-w-[30rem] overflow-hidden text-ellipsis whitespace-nowrap align-top;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .sidebar {
+        width: 18rem;
       }
     }
   </style>
 </head>
 <body>
   <div class="app-shell">
-    <aside class="sidebar">
-      <div class="brand">Stem</div>
+    <button id="sidebar-backdrop" class="sidebar-backdrop" type="button" aria-label="Close navigation"></button>
+    <aside id="dashboard-sidebar" class="sidebar" data-open="false" aria-label="Dashboard navigation">
+      <div class="sidebar-head">
+        <div class="brand-panel">
+          <div class="brand">Stem</div>
+          <p class="brand-tagline">Workflow control plane</p>
+          <div class="sidebar-status">
+            <span class="status-dot"></span>
+            <span>Live feed</span>
+          </div>
+        </div>
+        <button id="sidebar-close" class="sidebar-close" type="button" aria-label="Close navigation panel">
+          ✕
+        </button>
+      </div>
       <nav>
-        ${_renderNav(page)}
+        ${_renderNav(page, basePath)}
       </nav>
-      <div class="sidebar-footer">Hotwire preview</div>
+      <div class="sidebar-footer">
+        Turbo streams and frame-driven updates keep this panel live without full-page navigation.
+      </div>
     </aside>
     <main class="main">
-      ${renderFrame(page, content)}
+      <header class="top-panel">
+        <div class="top-panel-left">
+          <button id="sidebar-toggle" class="sidebar-toggle" type="button" aria-label="Open navigation panel">
+            ☰
+          </button>
+          <div>
+            <p class="panel-eyebrow">Operations cockpit</p>
+            <h2 id="top-panel-title" class="panel-title">${page.label}</h2>
+          </div>
+        </div>
+        <div class="top-panel-right">
+          <span class="status-pill">
+            <span class="status-pill-dot"></span>
+            Auto refresh
+          </span>
+          <a href="${dashboardRoute(basePath, '/tasks')}" class="quick-link" data-turbo-frame="dashboard-content">Tasks</a>
+          <a href="${dashboardRoute(basePath, '/workers')}" class="quick-link" data-turbo-frame="dashboard-content">Workers</a>
+        </div>
+      </header>
+      <div class="content-shell">
+        ${renderFrame(page, content)}
+      </div>
+      <div id="dashboard-refresh-signal" hidden></div>
     </main>
   </div>
   <script type="module">
   const frame = document.getElementById('dashboard-content');
+  const sidebar = document.getElementById('dashboard-sidebar');
+  const sidebarToggle = document.getElementById('sidebar-toggle');
+  const sidebarClose = document.getElementById('sidebar-close');
+  const sidebarBackdrop = document.getElementById('sidebar-backdrop');
+  const topPanelTitle = document.getElementById('top-panel-title');
+  const dashboardBasePath = '$resolvedBasePath';
+  const tasksInlinePath = `\${dashboardBasePath || ''}/tasks/inline`;
+  const overviewPartialsPath = `\${dashboardBasePath || ''}/partials/overview`;
+  const refreshablePages = new Set(['overview', 'tasks', 'taskDetail', 'failures', 'workers', 'search', 'audit', 'namespaces', 'workflows', 'jobs']);
+  let lastRefreshAt = 0;
+  let currentFrameUrl = '';
+  let frameNavigationInFlight = false;
+  let pendingNavigationUrl = '';
+  let refreshFrameController = null;
+  let refreshOverviewController = null;
+
+  const normalizeFrameUrl = (rawUrl) => {
+    try {
+      const parsed = new URL(rawUrl, window.location.origin);
+      return `\${parsed.pathname}\${parsed.search}`;
+    } catch (_) {
+      return window.location.pathname + window.location.search;
+    }
+  };
+
+  const rememberCurrentFrameUrl = (rawUrl) => {
+    if (!frame) return;
+    const normalized = normalizeFrameUrl(rawUrl);
+    currentFrameUrl = normalized;
+    frame.dataset.currentUrl = normalized;
+  };
+
+  const snapshotFrameUrl = () => {
+    const raw = frame?.dataset?.currentUrl ||
+      currentFrameUrl ||
+      (window.location.pathname + window.location.search);
+    return normalizeFrameUrl(raw);
+  };
+
+  const cancelRefreshControllers = () => {
+    if (refreshFrameController) {
+      refreshFrameController.abort();
+      refreshFrameController = null;
+    }
+    if (refreshOverviewController) {
+      refreshOverviewController.abort();
+      refreshOverviewController = null;
+    }
+  };
+
+  const markNavigationLoading = (enabled) => {
+    if (!frame) return;
+    if (enabled) {
+      frame.dataset.navLoading = 'true';
+      return;
+    }
+    delete frame.dataset.navLoading;
+  };
+
+  const dashboardPathFromUrl = (rawUrl) => {
+    const parsed = new URL(rawUrl, window.location.origin);
+    const pathname = parsed.pathname || '/';
+    if (!dashboardBasePath) return pathname;
+    if (pathname === dashboardBasePath) return '/';
+    if (pathname.startsWith(`\${dashboardBasePath}/`)) {
+      return pathname.substring(dashboardBasePath.length);
+    }
+    return pathname;
+  };
+
+  const pageFromUrl = (rawUrl) => {
+    let path;
+    try {
+      path = dashboardPathFromUrl(rawUrl);
+    } catch (_) {
+      path = '/';
+    }
+    if (path === '/' || path === '') return 'overview';
+    if (path.startsWith('/tasks/detail')) return 'tasks';
+    if (path.startsWith('/tasks')) return 'tasks';
+    if (path.startsWith('/failures')) return 'failures';
+    if (path.startsWith('/search')) return 'search';
+    if (path.startsWith('/audit')) return 'audit';
+    if (path.startsWith('/events')) return 'events';
+    if (path.startsWith('/namespaces')) return 'namespaces';
+    if (path.startsWith('/workflows')) return 'workflows';
+    if (path.startsWith('/jobs')) return 'jobs';
+    if (path.startsWith('/workers')) return 'workers';
+    return 'overview';
+  };
+
+  const pageTitleFromUrl = (rawUrl) => {
+    let path;
+    try {
+      path = dashboardPathFromUrl(rawUrl);
+    } catch (_) {
+      path = '/';
+    }
+    if (path === '/' || path === '') return 'Overview';
+    if (path.startsWith('/tasks/detail')) return 'Task Detail';
+    if (path.startsWith('/tasks')) return 'Tasks';
+    if (path.startsWith('/failures')) return 'Failures';
+    if (path.startsWith('/search')) return 'Search';
+    if (path.startsWith('/audit')) return 'Audit';
+    if (path.startsWith('/events')) return 'Events';
+    if (path.startsWith('/namespaces')) return 'Namespaces';
+    if (path.startsWith('/workflows')) return 'Workflows';
+    if (path.startsWith('/jobs')) return 'Jobs';
+    if (path.startsWith('/workers')) return 'Workers';
+    return 'Overview';
+  };
+
+  const resolveCurrentPage = () => {
+    const url = frame?.dataset?.currentUrl || currentFrameUrl || (window.location.pathname + window.location.search);
+    return pageFromUrl(url);
+  };
+
+  const updatePanelTitle = (rawUrl) => {
+    if (!topPanelTitle) return;
+    topPanelTitle.textContent = pageTitleFromUrl(rawUrl);
+  };
+
+  const isDesktop = () => window.matchMedia('(min-width: 1024px)').matches;
+
+  const closeSidebarPanel = () => {
+    if (!sidebar || !sidebarBackdrop) return;
+    sidebar.dataset.open = 'false';
+    sidebarBackdrop.dataset.open = 'false';
+  };
+
+  const openSidebarPanel = () => {
+    if (!sidebar || !sidebarBackdrop || isDesktop()) return;
+    sidebar.dataset.open = 'true';
+    sidebarBackdrop.dataset.open = 'true';
+  };
+
+  const syncSidebarWithViewport = () => {
+    if (isDesktop()) {
+      closeSidebarPanel();
+    }
+  };
+
+  const syncHistoryToFrameUrl = () => {
+    if (!currentFrameUrl) return;
+    const current = window.location.pathname + window.location.search;
+    if (current === currentFrameUrl) return;
+    window.history.replaceState(window.history.state, '', currentFrameUrl);
+  };
+
+  const refreshOverviewPartials = async (sourceUrl) => {
+    if (refreshOverviewController) {
+      refreshOverviewController.abort();
+    }
+    const controller = new AbortController();
+    refreshOverviewController = controller;
+    const response = await fetch(overviewPartialsPath, {
+      headers: { Accept: 'text/vnd.turbo-stream.html' },
+      signal: controller.signal,
+    });
+    const body = await response.text();
+    if (controller.signal.aborted) return;
+    if (!response.ok) {
+      throw new Error(`Failed overview partial refresh: \${response.status}`);
+    }
+    if (snapshotFrameUrl() !== normalizeFrameUrl(sourceUrl)) {
+      return;
+    }
+    if (resolveCurrentPage() !== 'overview') {
+      return;
+    }
+    if (!window.Turbo) return;
+    window.Turbo.renderStreamMessage(body);
+  };
+
+  const refreshFrameContent = async (sourceUrl) => {
+    if (!frame) return;
+    if (refreshFrameController) {
+      refreshFrameController.abort();
+    }
+    const controller = new AbortController();
+    refreshFrameController = controller;
+    const response = await fetch(sourceUrl, {
+      headers: {
+        Accept: 'text/html',
+        'Turbo-Frame': 'dashboard-content',
+      },
+      signal: controller.signal,
+    });
+    const body = await response.text();
+    if (controller.signal.aborted) return;
+    if (!response.ok) {
+      throw new Error(`Failed frame refresh: \${response.status}`);
+    }
+    if (snapshotFrameUrl() !== normalizeFrameUrl(sourceUrl)) {
+      return;
+    }
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(body, 'text/html');
+    const nextFrame = doc.getElementById('dashboard-content');
+    if (!nextFrame) {
+      throw new Error('Missing dashboard-content frame in refresh response.');
+    }
+
+    frame.innerHTML = nextFrame.innerHTML;
+    frame.dataset.page = nextFrame.dataset.page || frame.dataset.page || '';
+    rememberCurrentFrameUrl(sourceUrl);
+    syncHistoryToFrameUrl();
+    updatePanelTitle(sourceUrl);
+    const currentPage = resolveCurrentPage();
+    setActive(currentPage);
+    if (currentPage === 'events') {
+      ensureEventsStream();
+    }
+    scheduleFrameRefresh(currentPage);
+  };
+
+  const refreshFrame = () => {
+    if (document.visibilityState === 'hidden') return;
+    if (!window.Turbo || !frame) return;
+    if (frameNavigationInFlight) return;
+    const now = Date.now();
+    if (now - lastRefreshAt < 1200) return;
+    lastRefreshAt = now;
+    const sourceUrl = snapshotFrameUrl();
+    const page = resolveCurrentPage();
+    if (page === 'overview') {
+      refreshOverviewPartials(sourceUrl).catch(() => {
+        if (frameNavigationInFlight) return;
+        const fallbackUrl = snapshotFrameUrl();
+        window.Turbo.visit(fallbackUrl, { frame: 'dashboard-content', action: 'replace' });
+      });
+      return;
+    }
+    refreshFrameContent(sourceUrl).catch(() => {
+      if (frameNavigationInFlight) return;
+      const fallbackUrl = snapshotFrameUrl();
+      window.Turbo.visit(fallbackUrl, { frame: 'dashboard-content', action: 'replace' });
+    });
+  };
 
   const setActive = (page) => {
     document.querySelectorAll('[data-nav]').forEach((link) => {
@@ -587,7 +1785,7 @@ String renderLayout(DashboardPage page, String content) {
   const ensureEventsStream = () => {
     if (window.stemDashboardEventsWs) return;
     const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
-    const socket = new WebSocket(`\${protocol}://\${window.location.host}/dash/streams?topic=stem-dashboard:events`);
+    const socket = new WebSocket(`\${protocol}://\${window.location.host}$resolvedStreamPath?topic=stem-dashboard:events`);
     socket.addEventListener('message', (event) => {
       if (window.Turbo) {
         window.Turbo.renderStreamMessage(event.data);
@@ -605,46 +1803,242 @@ String renderLayout(DashboardPage page, String content) {
     window.stemDashboardEventsWs = socket;
   };
 
-  const scheduleOverviewRefresh = (page) => {
-    if (window.stemDashboardOverviewTimer) {
-      clearInterval(window.stemDashboardOverviewTimer);
-      window.stemDashboardOverviewTimer = null;
-    }
-    if (page !== 'overview') return;
-    window.stemDashboardOverviewTimer = setInterval(() => {
-      if (document.visibilityState === 'hidden') return;
-      if (!window.Turbo || !frame) return;
-      const url = window.location.pathname + window.location.search;
-      window.Turbo.visit(url, { frame: 'dashboard-content', action: 'replace' });
+  const ensureRefreshStream = () => {
+    if (window.stemDashboardRefreshWs) return;
+    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    const socket = new WebSocket(`\${protocol}://\${window.location.host}$resolvedStreamPath?topic=stem-dashboard:refresh`);
+    socket.addEventListener('message', () => {
+      const page = resolveCurrentPage();
+      if (!refreshablePages.has(page)) return;
+      refreshFrame();
+    });
+    socket.addEventListener('close', () => {
+      window.stemDashboardRefreshWs = null;
+      setTimeout(() => {
+        ensureRefreshStream();
+      }, 2000);
+    });
+    socket.addEventListener('error', () => {
+      try { socket.close(); } catch (_) {}
+    });
+    window.stemDashboardRefreshWs = socket;
+  };
+
+  const scheduleFrameRefresh = (page) => {
+    if (window.stemDashboardFrameTimer) {
+      clearInterval(window.stemDashboardFrameTimer);
+      window.stemDashboardFrameTimer = null;
+    }
+    if (!refreshablePages.has(page)) return;
+    window.stemDashboardFrameTimer = setInterval(() => {
+      refreshFrame();
     }, 5000);
   };
 
+  const loadTaskInlineDetails = async (row) => {
+    const taskId = row?.dataset?.taskRow;
+    const target = row?.dataset?.taskInlineTarget;
+    if (!taskId || !target) return;
+    const shell = document.getElementById(target);
+    if (!shell) return;
+    const state = shell.dataset.taskInlineShell;
+    if (state === 'loading' || state === 'loaded') return;
+
+    shell.dataset.taskInlineShell = 'loading';
+    shell.innerHTML = '<p class="muted">Loading task detail...</p>';
+
+    const params = new URLSearchParams({ id: taskId, target });
+    const response = await fetch(`\${tasksInlinePath}?\${params.toString()}`, {
+      headers: { Accept: 'text/vnd.turbo-stream.html' },
+    });
+    const body = await response.text();
+    if (!response.ok) {
+      throw new Error(`Failed inline task request: \${response.status}`);
+    }
+    if (window.Turbo) {
+      window.Turbo.renderStreamMessage(body);
+      return;
+    }
+    shell.dataset.taskInlineShell = 'loaded';
+    shell.innerHTML = body;
+  };
+
+  const ensureTaskDetailRow = (taskRow) => {
+    const taskId = taskRow?.dataset?.taskRow;
+    if (!taskId) return null;
+    let target = taskRow?.dataset?.taskInlineTarget;
+    if (!target) {
+      const normalized = taskId.replace(/[^a-zA-Z0-9_-]/g, '-');
+      target = `task-inline-\${normalized}`;
+      taskRow.dataset.taskInlineTarget = target;
+    }
+    let detail = document.querySelector(`[data-task-detail="\${taskId}"]`);
+    if (detail) return detail;
+
+    detail = document.createElement('tr');
+    detail.className = 'task-detail';
+    detail.dataset.taskDetail = taskId;
+
+    const detailCell = document.createElement('td');
+    detailCell.className = 'task-detail-cell';
+    detailCell.colSpan = Math.max(taskRow.cells?.length || 1, 1);
+    detailCell.innerHTML = `<div id="\${target}" data-task-inline-shell="pending"><p class="muted">Loading task detail...</p></div>`;
+
+    detail.appendChild(detailCell);
+    taskRow.insertAdjacentElement('afterend', detail);
+    return detail;
+  };
+
+  const collapseTaskDetailRow = (taskRow) => {
+    const taskId = taskRow?.dataset?.taskRow;
+    if (!taskId) return;
+    const detail = document.querySelector(`[data-task-detail="\${taskId}"]`);
+    detail?.remove();
+    taskRow.setAttribute('aria-expanded', 'false');
+  };
+
   if (frame) {
-    setActive(frame.dataset.page ?? '${page.name}');
-    const initialPage = frame.dataset.page ?? '${page.name}';
+    rememberCurrentFrameUrl(frame.dataset.currentUrl || window.location.pathname + window.location.search);
+    const initialPage = resolveCurrentPage();
+    setActive(initialPage);
+    updatePanelTitle(frame.dataset.currentUrl || window.location.pathname + window.location.search);
+    ensureRefreshStream();
     if (initialPage === 'events') {
       ensureEventsStream();
     }
-    scheduleOverviewRefresh(initialPage);
+    scheduleFrameRefresh(initialPage);
+    document.addEventListener('turbo:before-fetch-request', (event) => {
+      if (event.target !== frame) return;
+      frameNavigationInFlight = true;
+      cancelRefreshControllers();
+      const requestUrl = event.detail?.url;
+      if (!requestUrl) return;
+      const normalized = normalizeFrameUrl(requestUrl);
+      pendingNavigationUrl = normalized;
+      rememberCurrentFrameUrl(normalized);
+    });
+    document.addEventListener('turbo:before-frame-render', (event) => {
+      if (event.target !== frame) return;
+      if (pendingNavigationUrl !== '') {
+        const responseUrl = event.detail?.fetchResponse?.response?.url ??
+          event.detail?.newFrame?.src;
+        if (responseUrl) {
+          const normalized = normalizeFrameUrl(responseUrl);
+          if (normalized != pendingNavigationUrl) {
+            event.preventDefault();
+            return;
+          }
+        }
+      }
+    });
+    document.addEventListener('turbo:fetch-request-error', (event) => {
+      if (event.target !== frame) return;
+      frameNavigationInFlight = false;
+      pendingNavigationUrl = '';
+      markNavigationLoading(false);
+    });
     document.addEventListener('turbo:frame-load', (event) => {
       if (event.target.id !== 'dashboard-content') return;
-      const currentPage = event.target.dataset.page ?? '${page.name}';
+      frameNavigationInFlight = false;
+      const responseUrl = event.detail?.fetchResponse?.response?.url ?? event.target?.src;
+      if (responseUrl) {
+        rememberCurrentFrameUrl(responseUrl);
+        syncHistoryToFrameUrl();
+        updatePanelTitle(responseUrl);
+      }
+      pendingNavigationUrl = '';
+      markNavigationLoading(false);
+      const currentPage = resolveCurrentPage();
       setActive(currentPage);
+      ensureRefreshStream();
       if (currentPage === 'events') {
         ensureEventsStream();
       }
-      scheduleOverviewRefresh(currentPage);
+      scheduleFrameRefresh(currentPage);
     });
   }
 
+  sidebarToggle?.addEventListener('click', () => {
+    openSidebarPanel();
+  });
+  sidebarClose?.addEventListener('click', () => {
+    closeSidebarPanel();
+  });
+  sidebarBackdrop?.addEventListener('click', () => {
+    closeSidebarPanel();
+  });
+  window.addEventListener('resize', () => {
+    syncSidebarWithViewport();
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      closeSidebarPanel();
+    }
+  });
+  syncSidebarWithViewport();
+
   document.addEventListener('click', (event) => {
+    const frameLink = event.target.closest('a[data-turbo-frame="dashboard-content"]');
+    if (frameLink) {
+      const href = frameLink.getAttribute('href');
+      if (href) {
+        if (frameLink.hasAttribute('data-nav')) {
+          closeSidebarPanel();
+        }
+        if (window.Turbo &&
+            event.button === 0 &&
+            !event.metaKey &&
+            !event.ctrlKey &&
+            !event.shiftKey &&
+            !event.altKey) {
+          event.preventDefault();
+          frameNavigationInFlight = true;
+          cancelRefreshControllers();
+          const normalized = normalizeFrameUrl(href);
+          pendingNavigationUrl = normalized;
+          rememberCurrentFrameUrl(normalized);
+          markNavigationLoading(true);
+          window.Turbo.visit(
+            href,
+            { frame: 'dashboard-content', action: 'replace' },
+          );
+          return;
+        }
+      }
+    }
+    const isInteractive = Boolean(
+      event.target.closest('a, button, input, textarea, select, label, form')
+    );
     const row = event.target.closest('[data-queue-row]');
-    if (!row) return;
-    const queue = row.dataset.queueRow;
-    if (!queue) return;
-    const detail = document.querySelector(`[data-queue-detail="\${queue}"]`);
+    if (row && !isInteractive) {
+      const queue = row.dataset.queueRow;
+      if (!queue) return;
+      const detail = document.querySelector(`[data-queue-detail="\${queue}"]`);
+      if (!detail) return;
+      detail.classList.toggle('visible');
+      return;
+    }
+    const taskRow = event.target.closest('[data-task-row]');
+    if (!taskRow || isInteractive) return;
+    const taskId = taskRow.dataset.taskRow;
+    if (!taskId) return;
+    if (taskRow.getAttribute('aria-expanded') === 'true') {
+      collapseTaskDetailRow(taskRow);
+      return;
+    }
+
+    const detail = ensureTaskDetailRow(taskRow);
     if (!detail) return;
-    detail.classList.toggle('visible');
+    detail.classList.add('visible');
+    taskRow.setAttribute('aria-expanded', 'true');
+    loadTaskInlineDetails(taskRow).catch(() => {
+      const target = taskRow.dataset.taskInlineTarget;
+      if (!target) return;
+      const shell = document.getElementById(target);
+      if (!shell) return;
+      shell.dataset.taskInlineShell = 'error';
+      shell.innerHTML = '<p class="muted">Failed to load task detail. Open full detail for this task.</p>';
+    });
   });
   </script>
 </body>
@@ -661,16 +2055,20 @@ $content
 ''';
 }
 
-String _renderNav(DashboardPage active) {
-  return DashboardPage.values.map((page) => _navLink(page, active)).join('\n');
+String _renderNav(DashboardPage active, String basePath) {
+  return DashboardPage.values
+      .where((page) => page.showInNav)
+      .map((page) => _navLink(page, active, basePath))
+      .join('\n');
 }
 
-String _navLink(DashboardPage page, DashboardPage active) {
+String _navLink(DashboardPage page, DashboardPage active, String basePath) {
   final isActive = page == active;
   final classes = ['nav-link', if (isActive) 'active'].join(' ');
   final aria = isActive ? ' aria-current="page"' : '';
+  final route = dashboardRoute(basePath, page.path);
   return '''
-<a href="${page.path}" class="$classes" data-nav="${page.name}" data-turbo-frame="dashboard-content"$aria>
+<a href="$route" class="$classes" data-nav="${page.name}" data-turbo-frame="dashboard-content"$aria>
   ${page.label}
 </a>
 ''';
diff --git a/packages/dashboard/lib/src/ui/namespaces.dart b/packages/dashboard/lib/src/ui/namespaces.dart
new file mode 100644
index 0000000..49456f6
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/namespaces.dart
@@ -0,0 +1,115 @@
+// Public helper functions in this file are intentionally undocumented to keep
+// UI template files lightweight.
+// ignore_for_file: public_member_api_docs
+
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/options.dart';
+import 'package:stem_dashboard/src/ui/shared.dart';
+
+String buildNamespacesContent({
+  required List<QueueSummary> queues,
+  required List<WorkerStatus> workers,
+  required List<DashboardTaskStatusEntry> taskStatuses,
+  required NamespacesPageOptions options,
+  required String defaultNamespace,
+}) {
+  final snapshots = buildNamespaceSnapshots(
+    queues: queues,
+    workers: workers,
+    tasks: taskStatuses,
+    defaultNamespace: defaultNamespace,
+  );
+  final namespaceFilter = options.namespace?.toLowerCase();
+  final filtered = options.hasNamespace
+      ? snapshots
+            .where(
+              (entry) =>
+                  entry.namespace.toLowerCase().contains(namespaceFilter!),
+            )
+            .toList(growable: false)
+      : snapshots;
+
+  final totalPending = filtered.fold<int>(
+    0,
+    (sum, entry) => sum + entry.pending,
+  );
+  final totalInflight = filtered.fold<int>(
+    0,
+    (sum, entry) => sum + entry.inflight,
+  );
+  final totalFailed = filtered.fold<int>(
+    0,
+    (sum, entry) => sum + entry.failedTasks,
+  );
+
+  return '''
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
+  <h1>Namespaces</h1>
+  <p class="page-subtitle">
+    App-scoped health grouped by namespace with drill-down controls into tasks and workers.
+  </p>
+</section>
+
+<section class="cards">
+  ${buildMetricCard('Namespaces', formatInt(filtered.length), 'Distinct namespaces detected from queue, worker, and task metadata.')}
+  ${buildMetricCard('Backlog', formatInt(totalPending), 'Pending envelopes across selected namespaces.')}
+  ${buildMetricCard('In-flight', formatInt(totalInflight), 'Current processing load across selected namespaces.')}
+  ${buildMetricCard('Failed tasks', formatInt(totalFailed), 'Recent terminal failures observed for selected namespaces.')}
+</section>
+
+<form class="filter-form rounded-2xl border border-slate-300/15 bg-slate-900/40 p-4" action="/namespaces" method="get" data-turbo-frame="dashboard-content">
+  <label class="filter-label" for="namespace-filter">Namespace</label>
+  <input id="namespace-filter" name="namespace" value="${escapeHtml(options.namespace ?? '')}" placeholder="stem" />
+  <button type="submit">Apply</button>
+  ${options.hasNamespace ? '<a class="clear-filter" href="/namespaces" data-turbo-frame="dashboard-content">Clear</a>' : ''}
+</form>
+
+<section class="table-card ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Namespace Summary</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Namespace</th>
+        <th scope="col">Queues</th>
+        <th scope="col">Workers</th>
+        <th scope="col">Backlog</th>
+        <th scope="col">In-flight</th>
+        <th scope="col">Dead letters</th>
+        <th scope="col">Running</th>
+        <th scope="col">Failed</th>
+        <th scope="col">Workflow runs</th>
+        <th scope="col">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${filtered.isEmpty ? '''
+<tr>
+  <td colspan="10" class="muted">No namespace data matches the current filter.</td>
+</tr>
+''' : filtered.map((entry) => '''
+<tr>
+  <td><span class="pill">${escapeHtml(entry.namespace)}</span></td>
+  <td>${formatInt(entry.queueCount)}</td>
+  <td>${formatInt(entry.workerCount)}</td>
+  <td>${formatInt(entry.pending)}</td>
+  <td>${formatInt(entry.inflight)}</td>
+  <td>${formatInt(entry.deadLetters)}</td>
+  <td>${formatInt(entry.runningTasks)}</td>
+  <td>${formatInt(entry.failedTasks)}</td>
+  <td>${formatInt(entry.workflowRuns)}</td>
+  <td>
+    <div class="action-bar">
+      <a class="ghost-button" href="/tasks?namespace=${Uri.encodeQueryComponent(entry.namespace)}" data-turbo-frame="dashboard-content">Tasks</a>
+      <a class="ghost-button" href="/workers?namespace=${Uri.encodeQueryComponent(entry.namespace)}" data-turbo-frame="dashboard-content">Workers</a>
+      <a class="ghost-button" href="/search?scope=tasks&q=${Uri.encodeQueryComponent(entry.namespace)}" data-turbo-frame="dashboard-content">Search</a>
+    </div>
+  </td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+''';
+}
diff --git a/packages/dashboard/lib/src/ui/options.dart b/packages/dashboard/lib/src/ui/options.dart
index de523c5..78a90bc 100644
--- a/packages/dashboard/lib/src/ui/options.dart
+++ b/packages/dashboard/lib/src/ui/options.dart
@@ -1,3 +1,5 @@
+import 'package:stem/stem.dart' show TaskState;
+
 /// View options used by the tasks page renderer.
 class TasksPageOptions {
   /// Creates task page options with optional overrides.
@@ -5,8 +7,16 @@ class TasksPageOptions {
     this.sortKey = 'queue',
     this.descending = false,
     this.filter,
+    this.namespaceFilter,
+    this.taskFilter,
+    this.runId,
+    this.stateFilter,
     this.flashKey,
     this.errorKey,
+    this.page = 1,
+    this.pageSize = 25,
+    this.hasNextPage = false,
+    this.hasPreviousPage = false,
   });
 
   /// Sort key used for queue ordering.
@@ -18,20 +28,101 @@ class TasksPageOptions {
   /// Optional queue filter text.
   final String? filter;
 
+  /// Optional namespace filter text.
+  final String? namespaceFilter;
+
+  /// Optional task name filter text.
+  final String? taskFilter;
+
+  /// Optional workflow run id filter.
+  final String? runId;
+
+  /// Optional lifecycle state filter for recent task statuses.
+  final TaskState? stateFilter;
+
   /// Optional flash message key for UI alerts.
   final String? flashKey;
 
   /// Optional error message key for UI alerts.
   final String? errorKey;
 
+  /// Current page number (1-based).
+  final int page;
+
+  /// Number of task status records requested for a page.
+  final int pageSize;
+
+  /// Whether another page exists after [page].
+  final bool hasNextPage;
+
+  /// Whether a page exists before [page].
+  final bool hasPreviousPage;
+
   /// Whether a non-empty filter value is set.
   bool get hasFilter => filter != null && filter!.isNotEmpty;
+
+  /// Whether a non-empty namespace filter value is set.
+  bool get hasNamespaceFilter =>
+      namespaceFilter != null && namespaceFilter!.isNotEmpty;
+
+  /// Whether a non-empty task filter value is set.
+  bool get hasTaskFilter => taskFilter != null && taskFilter!.isNotEmpty;
+
+  /// Whether a non-empty run id filter value is set.
+  bool get hasRunIdFilter => runId != null && runId!.isNotEmpty;
+
+  /// Whether a status filter is set.
+  bool get hasStateFilter => stateFilter != null;
+
+  /// Zero-based offset derived from [page] and [pageSize].
+  int get offset => (page - 1) * pageSize;
+
+  /// Whether pagination controls should be shown.
+  bool get hasPagination => hasPreviousPage || hasNextPage || page > 1;
+
+  /// Creates a copy with selected fields replaced.
+  TasksPageOptions copyWith({
+    String? sortKey,
+    bool? descending,
+    String? filter,
+    String? namespaceFilter,
+    String? taskFilter,
+    String? runId,
+    TaskState? stateFilter,
+    String? flashKey,
+    String? errorKey,
+    int? page,
+    int? pageSize,
+    bool? hasNextPage,
+    bool? hasPreviousPage,
+  }) {
+    return TasksPageOptions(
+      sortKey: sortKey ?? this.sortKey,
+      descending: descending ?? this.descending,
+      filter: filter ?? this.filter,
+      namespaceFilter: namespaceFilter ?? this.namespaceFilter,
+      taskFilter: taskFilter ?? this.taskFilter,
+      runId: runId ?? this.runId,
+      stateFilter: stateFilter ?? this.stateFilter,
+      flashKey: flashKey ?? this.flashKey,
+      errorKey: errorKey ?? this.errorKey,
+      page: page ?? this.page,
+      pageSize: pageSize ?? this.pageSize,
+      hasNextPage: hasNextPage ?? this.hasNextPage,
+      hasPreviousPage: hasPreviousPage ?? this.hasPreviousPage,
+    );
+  }
 }
 
 /// View options used by the workers page renderer.
 class WorkersPageOptions {
   /// Creates worker page options with optional overrides.
-  const WorkersPageOptions({this.flashMessage, this.errorMessage, this.scope});
+  const WorkersPageOptions({
+    this.flashMessage,
+    this.errorMessage,
+    this.scope,
+    this.namespaceFilter,
+  });
 
   /// Optional flash message for the UI.
   final String? flashMessage;
@@ -42,6 +133,9 @@ class WorkersPageOptions {
   /// Optional worker scope filter.
   final String? scope;
 
+  /// Optional namespace filter.
+  final String? namespaceFilter;
+
   /// Whether a non-empty flash message is set.
   bool get hasFlash => flashMessage != null && flashMessage!.isNotEmpty;
 
@@ -50,4 +144,95 @@ class WorkersPageOptions {
 
   /// Whether a non-empty scope value is set.
   bool get hasScope => scope != null && scope!.isNotEmpty;
+
+  /// Whether a non-empty namespace filter value is set.
+  bool get hasNamespaceFilter =>
+      namespaceFilter != null && namespaceFilter!.isNotEmpty;
+}
+
+/// View options used by the failures page renderer.
+class FailuresPageOptions {
+  /// Creates failure diagnostics options with optional overrides.
+  const FailuresPageOptions({this.queue, this.flashMessage, this.errorMessage});
+
+  /// Optional queue filter.
+  final String? queue;
+
+  /// Optional flash message for the UI.
+  final String? flashMessage;
+
+  /// Optional error message for the UI.
+  final String? errorMessage;
+
+  /// Whether a non-empty queue filter is set.
+  bool get hasQueueFilter => queue != null && queue!.isNotEmpty;
+
+  /// Whether a non-empty flash message is set.
+  bool get hasFlash => flashMessage != null && flashMessage!.isNotEmpty;
+
+  /// Whether a non-empty error message is set.
+  bool get hasError => errorMessage != null && errorMessage!.isNotEmpty;
+}
+
+/// View options used by the search page renderer.
+class SearchPageOptions {
+  /// Creates search options with optional overrides.
+  const SearchPageOptions({this.query, this.scope = 'all'});
+
+  /// Free-text search query.
+  final String? query;
+
+  /// Scope filter (`all`, `tasks`, `workers`, `queues`, `audit`).
+  final String scope;
+
+  /// Whether a query is present.
+  bool get hasQuery => query != null && query!.trim().isNotEmpty;
+}
+
+/// View options used by the namespaces page renderer.
+class NamespacesPageOptions {
+  /// Creates namespace options with optional overrides.
+  const NamespacesPageOptions({this.namespace});
+
+  /// Optional namespace filter text.
+  final String? namespace;
+
+  /// Whether namespace filter is set.
+  bool get hasNamespace => namespace != null && namespace!.isNotEmpty;
+}
+
+/// View options used by the workflows page renderer.
+class WorkflowsPageOptions {
+  /// Creates workflows options with optional overrides.
+  const WorkflowsPageOptions({this.workflow, this.runId});
+
+  /// Optional workflow name filter text.
+  final String? workflow;
+
+  /// Optional run-id filter text.
+  final String? runId;
+
+  /// Whether workflow filter is set.
+  bool get hasWorkflow => workflow != null && workflow!.isNotEmpty;
+
+  /// Whether run-id filter is set.
+  bool get hasRunId => runId != null && runId!.isNotEmpty;
+}
+
+/// View options used by the jobs page renderer.
+class JobsPageOptions {
+  /// Creates jobs options with optional overrides.
+  const JobsPageOptions({this.task, this.queue});
+
+  /// Optional task-name filter.
+  final String? task;
+
+  /// Optional queue filter.
+  final String? queue;
+
+  /// Whether task filter is set.
+  bool get hasTask => task != null && task!.isNotEmpty;
+
+  /// Whether queue filter is set.
+  bool get hasQueue => queue != null && queue!.isNotEmpty;
 }
diff --git a/packages/dashboard/lib/src/ui/overview.dart b/packages/dashboard/lib/src/ui/overview.dart
index 0926312..5aa140f 100644
--- a/packages/dashboard/lib/src/ui/overview.dart
+++ b/packages/dashboard/lib/src/ui/overview.dart
@@ -2,13 +2,76 @@
 // UI template files lightweight.
 // ignore_for_file: public_member_api_docs
 
+import 'package:stem/stem.dart' show TaskState, stemNow;
 import 'package:stem_dashboard/src/services/models.dart';
 import 'package:stem_dashboard/src/ui/shared.dart';
 
+class OverviewSections {
+  const OverviewSections({
+    required this.metrics,
+    required this.namespaces,
+    required this.topQueues,
+    required this.workflows,
+    required this.jobs,
+    required this.latency,
+    required this.recentTasks,
+  });
+
+  final String metrics;
+  final String namespaces;
+  final String topQueues;
+  final String workflows;
+  final String jobs;
+  final String latency;
+  final String recentTasks;
+}
+
 String buildOverviewContent(
   List<QueueSummary> queues,
   List<WorkerStatus> workers,
   DashboardThroughput? throughput,
+  List<DashboardTaskStatusEntry> taskStatuses,
+  String defaultNamespace,
+) {
+  final sections = buildOverviewSections(
+    queues,
+    workers,
+    throughput,
+    taskStatuses,
+    defaultNamespace: defaultNamespace,
+  );
+  return '''
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
+  <h1>Overview</h1>
+  <p class="page-subtitle">
+    Live snapshot of Stem throughput and worker health. Metrics refresh with every navigation and Turbo frame update.
+  </p>
+</section>
+
+${sections.metrics}
+
+${sections.namespaces}
+
+${sections.topQueues}
+
+${sections.workflows}
+
+${sections.jobs}
+
+${sections.latency}
+
+${sections.recentTasks}
+''';
+}
+
+OverviewSections buildOverviewSections(
+  List<QueueSummary> queues,
+  List<WorkerStatus> workers,
+  DashboardThroughput? throughput,
+  List<DashboardTaskStatusEntry> taskStatuses,
+  {
+    String defaultNamespace = 'stem',
+  }
 ) {
   final totalPending = queues.fold<int>(
     0,
@@ -30,28 +93,106 @@ String buildOverviewContent(
 
   final processedPerMin = throughput?.processedPerMinute ?? 0;
   final enqueuedPerMin = throughput?.enqueuedPerMinute ?? 0;
+  final failedTasks = taskStatuses.where(
+    (task) => task.state == TaskState.failed,
+  );
+  final workflowTasks = taskStatuses.where((task) => task.isWorkflowTask);
+  final runningTasks = taskStatuses.where(
+    (task) => task.state == TaskState.running,
+  );
+  final now = stemNow().toUtc();
+  const queuedStuckThreshold = Duration(minutes: 5);
+  const runningStuckThreshold = Duration(minutes: 15);
+  final stuckQueued = taskStatuses.where((task) {
+    if (task.state != TaskState.queued) return false;
+    return now.difference(task.createdAt.toUtc()) > queuedStuckThreshold;
+  }).length;
+  final stuckRunning = taskStatuses.where((task) {
+    if (task.state != TaskState.running) return false;
+    final anchor = task.startedAt ?? task.updatedAt.toUtc();
+    return now.difference(anchor) > runningStuckThreshold;
+  }).length;
+  final queueLatency = _buildQueueLatency(taskStatuses);
+  final namespaces = buildNamespaceSnapshots(
+    queues: queues,
+    workers: workers,
+    tasks: taskStatuses,
+    defaultNamespace: defaultNamespace,
+  );
+  final workflowRuns = buildWorkflowRunSummaries(taskStatuses, limit: 8);
+  final jobs = buildJobSummaries(taskStatuses, limit: 8);
+  final slaBreaches = queueLatency.fold<int>(
+    0,
+    (total, row) => total + row.slaBreaches,
+  );
   final throughputHint = throughput == null
       ? 'Waiting for another snapshot to estimate rate.'
       : 'Net change over the last ${throughput.interval.inSeconds}s.';
 
-  return '''
-<section class="page-header">
-  <h1>Overview</h1>
-  <p class="page-subtitle">
-    Live snapshot of Stem throughput and worker health. Metrics refresh with every navigation and Turbo frame update.
-  </p>
-</section>
-
-<section class="cards">
+  final metrics =
+      '''
+<section id="overview-metrics" class="cards">
   ${buildMetricCard('Backlog (lag)', formatInt(totalPending), 'Undelivered tasks waiting across all queues.')}
   ${buildMetricCard('Processing', formatInt(totalInflight), 'Active envelopes currently being executed.')}
   ${buildMetricCard('Processed / min', formatRate(processedPerMin), throughputHint)}
   ${buildMetricCard('Enqueued / min', formatRate(enqueuedPerMin), throughputHint)}
   ${buildMetricCard('Dead letters', formatInt(totalDead), 'Items held in dead letter queues.')}
   ${buildMetricCard('Active workers', formatInt(activeWorkers), 'Workers that published heartbeats within the retention window.')}
+  ${buildMetricCard('Running tasks', formatInt(runningTasks.length), 'Latest persisted statuses currently in running state.')}
+  ${buildMetricCard('Failed tasks', formatInt(failedTasks.length), 'Latest persisted statuses that ended in failure.')}
+  ${buildMetricCard('Workflow tasks', formatInt(workflowTasks.length), 'Recent task statuses tied to workflow execution.')}
+  ${buildMetricCard('Stuck queued', formatInt(stuckQueued), 'Queued longer than ${queuedStuckThreshold.inMinutes}m.')}
+  ${buildMetricCard('Stuck running', formatInt(stuckRunning), 'Running longer than ${runningStuckThreshold.inMinutes}m.')}
+  ${buildMetricCard('SLA breaches', formatInt(slaBreaches), 'Queue wait > 1m or processing > 5m in recent statuses.')}
 </section>
+''';
 
-<section class="table-card">
+  final namespaceSection =
+      '''
+<section id="overview-namespaces" class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Namespaces</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Namespace</th>
+        <th scope="col">Queues</th>
+        <th scope="col">Workers</th>
+        <th scope="col">Backlog</th>
+        <th scope="col">In-flight</th>
+        <th scope="col">Dead letters</th>
+        <th scope="col">Running</th>
+        <th scope="col">Failed</th>
+        <th scope="col">Workflow runs</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${namespaces.isEmpty ? '''
+<tr>
+  <td colspan="9" class="muted">No namespaces discovered yet.</td>
+</tr>
+''' : namespaces.map((summary) => '''
+<tr>
+  <td><span class="pill">${escapeHtml(summary.namespace)}</span></td>
+  <td>${formatInt(summary.queueCount)}</td>
+  <td>${formatInt(summary.workerCount)}</td>
+  <td>${formatInt(summary.pending)}</td>
+  <td>${formatInt(summary.inflight)}</td>
+  <td>${formatInt(summary.deadLetters)}</td>
+  <td>${formatInt(summary.runningTasks)}</td>
+  <td>${formatInt(summary.failedTasks)}</td>
+  <td>${formatInt(summary.workflowRuns)}</td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+''';
+
+  final topQueuesSection =
+      '''
+<section id="overview-queue-table" class="table-card ring-1 ring-inset ring-sky-300/10">
   <table>
     <thead>
       <tr>
@@ -67,4 +208,242 @@ String buildOverviewContent(
   </table>
 </section>
 ''';
+
+  final workflowSection =
+      '''
+<section id="overview-workflows" class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Workflow Runs (Sample)</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Run ID</th>
+        <th scope="col">Workflow</th>
+        <th scope="col">Step</th>
+        <th scope="col">Queued</th>
+        <th scope="col">Running</th>
+        <th scope="col">Succeeded</th>
+        <th scope="col">Failed</th>
+        <th scope="col">Cancelled</th>
+        <th scope="col">Updated</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${workflowRuns.isEmpty ? '''
+<tr>
+  <td colspan="9" class="muted">No workflow run metadata found in sampled task statuses.</td>
+</tr>
+''' : workflowRuns.map((run) => '''
+<tr>
+  <td><a class="font-semibold text-sky-200 hover:text-sky-100" href="/tasks/detail?runId=${Uri.encodeQueryComponent(run.runId)}" data-turbo-frame="dashboard-content"><code>${escapeHtml(run.runId)}</code></a></td>
+  <td>${escapeHtml(run.workflowName)}</td>
+  <td class="muted">${escapeHtml(run.lastStep ?? '—')}</td>
+  <td>${formatInt(run.queued)}</td>
+  <td>${formatInt(run.running)}</td>
+  <td>${formatInt(run.succeeded)}</td>
+  <td>${formatInt(run.failed)}</td>
+  <td>${formatInt(run.cancelled)}</td>
+  <td class="muted">${formatRelative(run.lastUpdated)}</td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+''';
+
+  final jobSection =
+      '''
+<section id="overview-jobs" class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Jobs (Task Families)</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Task</th>
+        <th scope="col">Queue</th>
+        <th scope="col">Sampled</th>
+        <th scope="col">Running</th>
+        <th scope="col">Succeeded</th>
+        <th scope="col">Failed</th>
+        <th scope="col">Retried</th>
+        <th scope="col">Failure ratio</th>
+        <th scope="col">Updated</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${jobs.isEmpty ? '''
+<tr>
+  <td colspan="9" class="muted">No task families discovered yet.</td>
+</tr>
+''' : jobs.map((job) => '''
+<tr>
+  <td>${escapeHtml(job.taskName)}</td>
+  <td><span class="pill">${escapeHtml(job.sampleQueue)}</span></td>
+  <td>${formatInt(job.total)}</td>
+  <td>${formatInt(job.running)}</td>
+  <td>${formatInt(job.succeeded)}</td>
+  <td>${formatInt(job.failed)}</td>
+  <td>${formatInt(job.retried)}</td>
+  <td>${(job.failureRatio * 100).toStringAsFixed(1)}%</td>
+  <td class="muted">${formatRelative(job.lastUpdated)}</td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+''';
+
+  final latencySection =
+      '''
+<section id="overview-latency-table" class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Queue</th>
+        <th scope="col">Samples</th>
+        <th scope="col">Wait avg</th>
+        <th scope="col">Run avg</th>
+        <th scope="col">SLA breaches</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${queueLatency.isEmpty ? '''
+<tr>
+  <td colspan="5" class="muted">No queue latency samples available yet.</td>
+</tr>
+''' : queueLatency.map((row) => '''
+<tr>
+  <td><span class="pill">${escapeHtml(row.queue)}</span></td>
+  <td>${formatInt(row.samples)}</td>
+  <td>${row.avgWaitLabel}</td>
+  <td>${row.avgRunLabel}</td>
+  <td>${formatInt(row.slaBreaches)}</td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+''';
+
+  final recentTasksSection =
+      '''
+<section id="overview-recent-tasks" class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  ${buildTaskStatusTable(
+    taskStatuses.take(8).toList(growable: false),
+    options: const DashboardTaskTableOptions(
+      showAttempt: false,
+      showError: false,
+      showActions: false,
+      emptyMessage: 'No persisted task statuses yet.',
+    ),
+  )}
+</section>
+''';
+
+  return OverviewSections(
+    metrics: metrics,
+    namespaces: namespaceSection,
+    topQueues: topQueuesSection,
+    workflows: workflowSection,
+    jobs: jobSection,
+    latency: latencySection,
+    recentTasks: recentTasksSection,
+  );
+}
+
+List<_QueueLatencyRow> _buildQueueLatency(
+  List<DashboardTaskStatusEntry> tasks,
+) {
+  final byQueue = <String, _QueueLatencyAccumulator>{};
+  const queueSla = Duration(minutes: 1);
+  const runSla = Duration(minutes: 5);
+
+  for (final task in tasks) {
+    byQueue
+        .putIfAbsent(
+          task.queue,
+          () => _QueueLatencyAccumulator(queue: task.queue),
+        )
+        .add(
+          wait: task.queueWait,
+          run: task.processingTime,
+          queueSla: queueSla,
+          runSla: runSla,
+        );
+  }
+
+  final rows =
+      byQueue.values.map((value) => value.build()).toList(growable: false)
+        ..sort((a, b) => b.slaBreaches.compareTo(a.slaBreaches));
+  return rows.take(8).toList(growable: false);
+}
+
+class _QueueLatencyAccumulator {
+  _QueueLatencyAccumulator({required this.queue});
+
+  final String queue;
+  final _wait = <int>[];
+  final _run = <int>[];
+  var _samples = 0;
+  var _breaches = 0;
+
+  void add({
+    required Duration? wait,
+    required Duration? run,
+    required Duration queueSla,
+    required Duration runSla,
+  }) {
+    _samples += 1;
+    if (wait != null) {
+      _wait.add(wait.inMilliseconds);
+      if (wait > queueSla) _breaches += 1;
+    }
+    if (run != null) {
+      _run.add(run.inMilliseconds);
+      if (run > runSla) _breaches += 1;
+    }
+  }
+
+  _QueueLatencyRow build() {
+    return _QueueLatencyRow(
+      queue: queue,
+      samples: _samples,
+      avgWaitMs: _average(_wait),
+      avgRunMs: _average(_run),
+      slaBreaches: _breaches,
+    );
+  }
+
+  int _average(List<int> values) {
+    if (values.isEmpty) return 0;
+    final total = values.fold<int>(0, (sum, value) => sum + value);
+    return (total / values.length).round();
+  }
+}
+
+class _QueueLatencyRow {
+  const _QueueLatencyRow({
+    required this.queue,
+    required this.samples,
+    required this.avgWaitMs,
+    required this.avgRunMs,
+    required this.slaBreaches,
+  });
+
+  final String queue;
+  final int samples;
+  final int avgWaitMs;
+  final int avgRunMs;
+  final int slaBreaches;
+
+  String get avgWaitLabel => _formatMs(avgWaitMs);
+  String get avgRunLabel => _formatMs(avgRunMs);
+
+  String _formatMs(int millis) {
+    if (millis <= 0) return '—';
+    if (millis < 1000) return '${millis}ms';
+    return '${(millis / 1000).toStringAsFixed(2)}s';
+  }
 }
diff --git a/packages/dashboard/lib/src/ui/paths.dart b/packages/dashboard/lib/src/ui/paths.dart
new file mode 100644
index 0000000..01a1b90
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/paths.dart
@@ -0,0 +1,36 @@
+/// Normalizes a dashboard base path for route mounting.
+String normalizeDashboardBasePath(String basePath) {
+  final trimmed = basePath.trim();
+  if (trimmed.isEmpty || trimmed == '/') return '';
+  final leading = trimmed.startsWith('/') ? trimmed : '/$trimmed';
+  return leading.endsWith('/')
+      ? leading.substring(0, leading.length - 1)
+      : leading;
+}
+
+/// Builds a dashboard route by combining [basePath] and [path].
+String dashboardRoute(String basePath, String path) {
+  final normalizedBasePath = normalizeDashboardBasePath(basePath);
+  final normalizedPath = path.startsWith('/') ? path : '/$path';
+  if (normalizedBasePath.isEmpty) return normalizedPath;
+  if (normalizedPath == '/') return normalizedBasePath;
+  return '$normalizedBasePath$normalizedPath';
+}
+
+/// Prefixes root-relative HTML URL attributes with [basePath].
+String prefixDashboardUrlAttributes(String html, String basePath) {
+  final normalizedBasePath = normalizeDashboardBasePath(basePath);
+  if (normalizedBasePath.isEmpty) return html;
+
+  return html.replaceAllMapped(
+    RegExp(r'''(href|action|value)=("')/(?!/)([^"']*)\2'''),
+    (match) {
+      final attribute = match.group(1)!;
+      final quote = match.group(2)!;
+      final remainder = match.group(3)!;
+      final path = remainder.isEmpty ? '/' : '/$remainder';
+      final resolved = dashboardRoute(normalizedBasePath, path);
+      return '$attribute=$quote$resolved$quote';
+    },
+  );
+}
diff --git a/packages/dashboard/lib/src/ui/search.dart b/packages/dashboard/lib/src/ui/search.dart
new file mode 100644
index 0000000..91a20f0
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/search.dart
@@ -0,0 +1,247 @@
+// Public helper functions in this file are intentionally undocumented to keep
+// UI template files lightweight.
+// ignore_for_file: public_member_api_docs
+
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/options.dart';
+import 'package:stem_dashboard/src/ui/shared.dart';
+
+String buildSearchContent({
+  required SearchPageOptions options,
+  required List<QueueSummary> queues,
+  required List<WorkerStatus> workers,
+  required List<DashboardTaskStatusEntry> taskStatuses,
+  required List<DashboardAuditEntry> auditEntries,
+}) {
+  final queryRaw = options.query?.trim() ?? '';
+  final query = queryRaw.toLowerCase();
+  final taskMatches = _isScope(options.scope, 'tasks')
+      ? _searchTasks(taskStatuses, query)
+      : const <DashboardTaskStatusEntry>[];
+  final workerMatches = _isScope(options.scope, 'workers')
+      ? _searchWorkers(workers, query)
+      : const <WorkerStatus>[];
+  final queueMatches = _isScope(options.scope, 'queues')
+      ? _searchQueues(queues, query)
+      : const <QueueSummary>[];
+  final auditMatches = _isScope(options.scope, 'audit')
+      ? _searchAudit(auditEntries, query)
+      : const <DashboardAuditEntry>[];
+
+  return '''
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
+  <h1>Search</h1>
+  <p class="page-subtitle">
+    Global lookup across tasks, workers, queues, and audit trails with one query.
+  </p>
+</section>
+
+<section class="cards">
+  ${buildMetricCard('Task hits', formatInt(taskMatches.length), 'Matching task statuses by id/name/queue/workflow/error.')}
+  ${buildMetricCard('Worker hits', formatInt(workerMatches.length), 'Matching worker IDs and queue assignments.')}
+  ${buildMetricCard('Queue hits', formatInt(queueMatches.length), 'Matching queue names.')}
+  ${buildMetricCard('Audit hits', formatInt(auditMatches.length), 'Matching operator actions and alert records.')}
+</section>
+
+<form class="filter-form rounded-2xl border border-slate-300/15 bg-slate-900/40 p-4" action="/search" method="get" data-turbo-frame="dashboard-content">
+  <label class="filter-label" for="search-query">Query</label>
+  <input id="search-query" name="q" value="${escapeHtml(queryRaw)}" placeholder="task id, run id, queue, worker" />
+  <label class="filter-label" for="search-scope">Scope</label>
+  ${buildSearchScopeSelect(options.scope)}
+  <button type="submit">Search</button>
+</form>
+
+<section class="table-card mb-7 ring-1 ring-inset ring-sky-300/10">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Saved Views</th>
+        <th scope="col">Intent</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${buildSavedViewRow('/tasks?state=failed', 'Failed tasks', 'Recent terminal failures')}
+      ${buildSavedViewRow('/tasks?state=running', 'Running tasks', 'Investigate long-running tasks')}
+      ${buildSavedViewRow('/tasks?sort=pending&direction=desc', 'Backlog hotspots', 'Queues with highest pending load')}
+      ${buildSavedViewRow('/failures', 'Failure diagnostics', 'Grouped error fingerprints + replay controls')}
+      ${buildSavedViewRow('/workers', 'Worker health', 'Capacity and control plane visibility')}
+      ${buildSavedViewRow('/audit', 'Audit log', 'Operator actions and alert deliveries')}
+    </tbody>
+  </table>
+</section>
+
+${buildSearchTable(
+    title: 'Tasks',
+    emptyMessage: options.hasQuery ? 'No task results matched this query.' : 'Enter a query to search tasks.',
+    headers: const ['Task ID', 'Task', 'Queue', 'State', 'Updated'],
+    rows: taskMatches.take(40).map((task) => '''
+<tr>
+  <td><a href="/tasks/detail?id=${Uri.encodeQueryComponent(task.id)}" data-turbo-frame="dashboard-content"><code>${escapeHtml(task.id)}</code></a></td>
+  <td>${escapeHtml(task.taskName)}</td>
+  <td><span class="pill">${escapeHtml(task.queue)}</span></td>
+  <td>${buildTaskStatePill(task.state)}</td>
+  <td class="muted">${formatRelative(task.updatedAt)}</td>
+</tr>
+''').toList(growable: false),
+  )}
+
+${buildSearchTable(
+    title: 'Workers',
+    emptyMessage: options.hasQuery ? 'No worker results matched this query.' : 'Enter a query to search workers.',
+    headers: const ['Worker', 'Queues', 'Inflight', 'Heartbeat'],
+    rows: workerMatches.take(30).map((worker) => '''
+<tr>
+  <td>${escapeHtml(worker.workerId)}</td>
+  <td>${worker.queues.isEmpty ? '<span class="muted">—</span>' : worker.queues.map((queue) => '<span class="pill">${escapeHtml(queue.name)}</span>').join(' ')}</td>
+  <td>${formatInt(worker.inflight)}</td>
+  <td class="muted">${formatRelative(worker.timestamp)}</td>
+</tr>
+''').toList(growable: false),
+  )}
+
+${buildSearchTable(
+    title: 'Queues',
+    emptyMessage: options.hasQuery ? 'No queue results matched this query.' : 'Enter a query to search queues.',
+    headers: const ['Queue', 'Pending', 'Inflight', 'Dead letters'],
+    rows: queueMatches.take(30).map((queue) => '''
+<tr>
+  <td><span class="pill">${escapeHtml(queue.queue)}</span></td>
+  <td>${formatInt(queue.pending)}</td>
+  <td>${formatInt(queue.inflight)}</td>
+  <td>${formatInt(queue.deadLetters)}</td>
+</tr>
+''').toList(growable: false),
+  )}
+
+${buildSearchTable(
+    title: 'Audit',
+    emptyMessage: options.hasQuery ? 'No audit entries matched this query.' : 'Enter a query to search audit events.',
+    headers: const ['Time', 'Kind', 'Action', 'Status', 'Summary'],
+    rows: auditMatches.take(60).map((entry) => '''
+<tr>
+  <td class="muted">${formatRelative(entry.timestamp)}</td>
+  <td>${escapeHtml(entry.kind)}</td>
+  <td>${escapeHtml(entry.action)}</td>
+  <td><span class="pill ${entry.status == 'ok' || entry.status == 'sent'
+        ? 'success'
+        : entry.status == 'error'
+        ? 'error'
+        : 'warning'}">${escapeHtml(entry.status)}</span></td>
+  <td class="muted">${escapeHtml(entry.summary ?? '—')}</td>
+</tr>
+''').toList(growable: false),
+  )}
+''';
+}
+
+String buildSearchScopeSelect(String currentScope) {
+  String option(String value, String label) {
+    final selected = currentScope == value ? ' selected' : '';
+    return '<option value="$value"$selected>$label</option>';
+  }
+
+  return '''
+<select id="search-scope" name="scope">
+  ${option('all', 'All')}
+  ${option('tasks', 'Tasks')}
+  ${option('workers', 'Workers')}
+  ${option('queues', 'Queues')}
+  ${option('audit', 'Audit')}
+</select>
+''';
+}
+
+String buildSavedViewRow(String href, String label, String intent) {
+  return '''
+<tr>
+  <td><a class="font-semibold text-sky-200 hover:text-sky-100" href="$href" data-turbo-frame="dashboard-content">${escapeHtml(label)}</a></td>
+  <td class="muted">${escapeHtml(intent)}</td>
+</tr>
+''';
+}
+
+String buildSearchTable({
+  required String title,
+  required String emptyMessage,
+  required List<String> headers,
+  required List<String> rows,
+}) {
+  return '''
+<section class="table-card mb-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">${escapeHtml(title)}</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        ${headers.map((header) => '<th scope="col">${escapeHtml(header)}</th>').join()}
+      </tr>
+    </thead>
+    <tbody>
+      ${rows.isEmpty ? '<tr><td colspan="${headers.length}" class="muted">${escapeHtml(emptyMessage)}</td></tr>' : rows.join()}
+    </tbody>
+  </table>
+</section>
+''';
+}
+
+bool _isScope(String scope, String target) => scope == 'all' || scope == target;
+
+List<DashboardTaskStatusEntry> _searchTasks(
+  List<DashboardTaskStatusEntry> tasks,
+  String query,
+) {
+  if (query.isEmpty) return const [];
+  return tasks
+      .where((task) {
+        return task.id.toLowerCase().contains(query) ||
+            task.taskName.toLowerCase().contains(query) ||
+            task.queue.toLowerCase().contains(query) ||
+            (task.runId?.toLowerCase().contains(query) ?? false) ||
+            (task.errorMessage?.toLowerCase().contains(query) ?? false);
+      })
+      .toList(growable: false);
+}
+
+List<WorkerStatus> _searchWorkers(List<WorkerStatus> workers, String query) {
+  if (query.isEmpty) return const [];
+  return workers
+      .where((worker) {
+        if (worker.workerId.toLowerCase().contains(query)) return true;
+        for (final queue in worker.queues) {
+          if (queue.name.toLowerCase().contains(query)) return true;
+        }
+        return false;
+      })
+      .toList(growable: false);
+}
+
+List<QueueSummary> _searchQueues(List<QueueSummary> queues, String query) {
+  if (query.isEmpty) return const [];
+  return queues
+      .where((queue) => queue.queue.toLowerCase().contains(query))
+      .toList(growable: false);
+}
+
+List<DashboardAuditEntry> _searchAudit(
+  List<DashboardAuditEntry> audits,
+  String query,
+) {
+  if (query.isEmpty) return const [];
+  return audits
+      .where((entry) {
+        if (entry.action.toLowerCase().contains(query)) return true;
+        if (entry.summary?.toLowerCase().contains(query) ?? false) {
+          return true;
+        }
+        if (entry.actor?.toLowerCase().contains(query) ?? false) return true;
+        if (entry.status.toLowerCase().contains(query)) return true;
+        for (final value in entry.metadata.values) {
+          if (value?.toString().toLowerCase().contains(query) ?? false) {
+            return true;
+          }
+        }
+        return false;
+      })
+      .toList(growable: false);
+}
diff --git a/packages/dashboard/lib/src/ui/shared.dart b/packages/dashboard/lib/src/ui/shared.dart
index 8b9cddb..8be94c7 100644
--- a/packages/dashboard/lib/src/ui/shared.dart
+++ b/packages/dashboard/lib/src/ui/shared.dart
@@ -1,5 +1,5 @@
 import 'package:intl/intl.dart';
-import 'package:stem/stem.dart' show stemNow;
+import 'package:stem/stem.dart' show TaskState, stemNow;
 // Public helper functions in this file are intentionally undocumented to keep
 // UI template files lightweight.
 // ignore_for_file: public_member_api_docs
@@ -10,14 +10,14 @@ final dashboardNumberFormat = NumberFormat.decimalPattern();
 
 String buildQueueTableRow(QueueSummary summary) {
   return '''
-<tr class="queue-row" data-queue-row="${summary.queue}">
+<tr class="queue-row group" data-queue-row="${summary.queue}">
   <td><span class="pill">${summary.queue}</span></td>
-  <td>${formatInt(summary.pending)}</td>
-  <td>${formatInt(summary.inflight)}</td>
-  <td>${formatInt(summary.deadLetters)}</td>
+  <td class="font-medium text-slate-100">${formatInt(summary.pending)}</td>
+  <td class="font-medium text-slate-100">${formatInt(summary.inflight)}</td>
+  <td class="font-medium text-slate-100">${formatInt(summary.deadLetters)}</td>
 </tr>
 <tr class="queue-detail" data-queue-detail="${summary.queue}">
-  <td colspan="4">
+  <td colspan="4" class="bg-slate-950/40">
     <div class="detail-grid">
       <div><span class="muted">Pending</span> ${formatInt(summary.pending)}</div>
       <div><span class="muted">In-flight</span> ${formatInt(summary.inflight)}</div>
@@ -31,9 +31,10 @@ String buildQueueTableRow(QueueSummary summary) {
 
 String buildMetricCard(String title, String value, String caption) {
   return '''
-<article class="card">
+<article class="card relative overflow-hidden">
+  <div class="pointer-events-none absolute -right-8 -top-10 h-24 w-24 rounded-full bg-sky-300/10 blur-2xl"></div>
   <div class="card-title">$title</div>
-  <div class="card-value">$value</div>
+  <div class="card-value text-slate-100">$value</div>
   <p class="card-caption">$caption</p>
 </article>
 ''';
@@ -42,7 +43,7 @@ String buildMetricCard(String title, String value, String caption) {
 String buildEmptyQueuesRow(String message) {
   return '''
 <tr>
-  <td colspan="4" class="muted">$message</td>
+  <td colspan="4" class="muted py-8 text-center">$message</td>
 </tr>
 ''';
 }
@@ -83,3 +84,206 @@ String formatRelative(DateTime timestamp) {
   }
   return '${diff.inDays}d ago';
 }
+
+String formatDateTime(DateTime? timestamp) {
+  if (timestamp == null) return '—';
+  return timestamp.toUtc().toIso8601String();
+}
+
+String formatObject(Object? value) {
+  if (value == null) return 'null';
+  if (value is String) return value;
+  return value.toString();
+}
+
+String taskStateLabel(TaskState state) {
+  switch (state) {
+    case TaskState.queued:
+      return 'Queued';
+    case TaskState.running:
+      return 'Running';
+    case TaskState.succeeded:
+      return 'Succeeded';
+    case TaskState.failed:
+      return 'Failed';
+    case TaskState.retried:
+      return 'Retried';
+    case TaskState.cancelled:
+      return 'Cancelled';
+  }
+}
+
+String taskStateClass(TaskState state) {
+  switch (state) {
+    case TaskState.succeeded:
+      return 'success';
+    case TaskState.failed:
+      return 'error';
+    case TaskState.cancelled:
+      return 'error';
+    case TaskState.running:
+      return 'running';
+    case TaskState.retried:
+      return 'warning';
+    case TaskState.queued:
+      return 'muted';
+  }
+}
+
+String buildTaskStatePill(TaskState state) {
+  return '<span class="pill ${taskStateClass(state)} font-semibold uppercase tracking-wide">${taskStateLabel(state)}</span>';
+}
+
+class DashboardTaskTableOptions {
+  const DashboardTaskTableOptions({
+    this.showState = true,
+    this.showAttempt = true,
+    this.showUpdated = true,
+    this.showError = true,
+    this.showActions = true,
+    this.expandableRows = false,
+    this.emptyMessage = 'No task statuses available.',
+    this.actionsBuilder,
+  });
+
+  final bool showState;
+  final bool showAttempt;
+  final bool showUpdated;
+  final bool showError;
+  final bool showActions;
+  final bool expandableRows;
+  final String emptyMessage;
+  final String Function(DashboardTaskStatusEntry task)? actionsBuilder;
+}
+
+String buildTaskStatusTable(
+  List<DashboardTaskStatusEntry> tasks, {
+  required DashboardTaskTableOptions options,
+}) {
+  final headers = <String>[
+    'Task ID',
+    'Task',
+    'Queue',
+    if (options.showState) 'State',
+    if (options.showAttempt) 'Attempt',
+    if (options.showUpdated) 'Updated',
+    if (options.showError) 'Error',
+    if (options.showActions) 'Actions',
+  ];
+
+  final rows = tasks.isEmpty
+      ? '''
+<tr>
+  <td colspan="${headers.length}" class="muted">${escapeHtml(options.emptyMessage)}</td>
+</tr>
+'''
+      : tasks
+            .map((task) => _buildTaskStatusRow(task, options: options))
+            .join();
+
+  return '''
+<table>
+  <thead>
+    <tr>
+      ${headers.map((header) => '<th scope="col">$header</th>').join()}
+    </tr>
+  </thead>
+  <tbody>
+    $rows
+  </tbody>
+</table>
+''';
+}
+
+String buildTaskLifecycleActions(
+  DashboardTaskStatusEntry task, {
+  required String redirectPath,
+}) {
+  final encodedId = escapeHtml(task.id);
+  final encodedQueue = escapeHtml(task.queue);
+  final encodedRedirect = escapeHtml(redirectPath);
+  final controls = <String>[];
+
+  if (task.state == TaskState.running || task.state == TaskState.queued) {
+    controls.add('''
+<form class="inline-form" action="/tasks/action" method="post" data-turbo-frame="dashboard-content">
+  <input type="hidden" name="action" value="cancel" />
+  <input type="hidden" name="taskId" value="$encodedId" />
+  <input type="hidden" name="queue" value="$encodedQueue" />
+  <input type="hidden" name="redirect" value="$encodedRedirect" />
+  <button type="submit" class="ghost-button">Cancel</button>
+</form>
+''');
+  }
+
+  if (task.state == TaskState.failed || task.state == TaskState.cancelled) {
+    controls.add('''
+<form class="inline-form" action="/tasks/action" method="post" data-turbo-frame="dashboard-content">
+  <input type="hidden" name="action" value="replay" />
+  <input type="hidden" name="taskId" value="$encodedId" />
+  <input type="hidden" name="queue" value="$encodedQueue" />
+  <input type="hidden" name="redirect" value="$encodedRedirect" />
+  <button type="submit" class="ghost-button">Replay</button>
+</form>
+''');
+  }
+
+  if (controls.isEmpty) {
+    return '<span class="muted">—</span>';
+  }
+  return '<div class="action-bar">${controls.join()}</div>';
+}
+
+String buildTaskReplayAction(
+  DashboardTaskStatusEntry task, {
+  required String redirectPath,
+  String label = 'Replay task',
+}) {
+  return '''
+<form class="inline-form" action="/tasks/action" method="post" data-turbo-frame="dashboard-content">
+  <input type="hidden" name="action" value="replay" />
+  <input type="hidden" name="taskId" value="${escapeHtml(task.id)}" />
+  <input type="hidden" name="queue" value="${escapeHtml(task.queue)}" />
+  <input type="hidden" name="redirect" value="${escapeHtml(redirectPath)}" />
+  <button type="submit" class="ghost-button">${escapeHtml(label)}</button>
+</form>
+''';
+}
+
+String _buildTaskStatusRow(
+  DashboardTaskStatusEntry task, {
+  required DashboardTaskTableOptions options,
+}) {
+  final escapedId = escapeHtml(task.id);
+  final detailUrl = '/tasks/detail?id=${Uri.encodeQueryComponent(task.id)}';
+  final inlineTarget = 'task-inline-$escapedId';
+  final rowClass = options.expandableRows ? 'task-row' : '';
+  final rowAttrs = options.expandableRows
+      ? ' data-task-row="$escapedId" '
+            'data-task-inline-target="$inlineTarget" aria-expanded="false"'
+      : '';
+
+  return '''
+<tr class="$rowClass"$rowAttrs>
+  <td class="whitespace-nowrap"><a class="font-semibold text-sky-200 hover:text-sky-100" href="$detailUrl" data-turbo-frame="dashboard-content"><code>$escapedId</code></a></td>
+  <td class="whitespace-nowrap">${escapeHtml(task.taskName)}</td>
+  <td class="whitespace-nowrap"><span class="pill">${escapeHtml(task.queue)}</span></td>
+  ${options.showState ? '<td class="whitespace-nowrap">${buildTaskStatePill(task.state)}</td>' : ''}
+  ${options.showAttempt ? '<td class="whitespace-nowrap">${formatInt(task.attempt)}</td>' : ''}
+  ${options.showUpdated ? '<td class="muted whitespace-nowrap">${formatRelative(task.updatedAt)}</td>' : ''}
+  ${options.showError ? '<td class="muted"><span class="error-preview" title="${escapeHtml(task.errorMessage ?? (task.retryable ? 'retryable' : '—'))}">${escapeHtml(_compactError(task))}</span></td>' : ''}
+  ${options.showActions ? '<td class="whitespace-nowrap">${options.actionsBuilder?.call(task) ?? '<span class="muted">—</span>'}</td>' : ''}
+</tr>
+''';
+}
+
+String _compactError(DashboardTaskStatusEntry task, {int max = 120}) {
+  final raw = task.errorMessage ?? (task.retryable ? 'retryable' : '—');
+  final singleLine = raw.replaceAll(RegExp(r'\s+'), ' ').trim();
+  return _truncate(singleLine, max);
+}
+
+String _truncate(String input, int max) {
+  if (input.length <= max) return input;
+  return '${input.substring(0, max - 1)}…';
+}
diff --git a/packages/dashboard/lib/src/ui/task_detail.dart b/packages/dashboard/lib/src/ui/task_detail.dart
new file mode 100644
index 0000000..7d1b7df
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/task_detail.dart
@@ -0,0 +1,303 @@
+// Public helper functions in this file are intentionally undocumented to keep
+// UI template files lightweight.
+// ignore_for_file: public_member_api_docs
+
+import 'dart:convert';
+
+import 'package:stem/stem.dart' show TaskState;
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/shared.dart';
+
+String buildTaskDetailContent(
+  DashboardTaskStatusEntry? task,
+  List<DashboardTaskStatusEntry> runTimeline,
+  DashboardWorkflowRunSnapshot? workflowRun,
+  List<DashboardWorkflowStepSnapshot> workflowSteps,
+) {
+  if (task == null) {
+    return '''
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
+  <h1>Task Detail</h1>
+  <p class="page-subtitle">Task status record was not found in the current result backend window.</p>
+</section>
+<section class="event-feed">
+  <div class="event-item ring-1 ring-inset ring-red-300/20">
+    <h3 class="text-lg font-semibold text-slate-100">Task not found</h3>
+    <p class="muted">Try searching from the tasks page again.</p>
+    <p><a href="/tasks" class="ghost-button" data-turbo-frame="dashboard-content">Back to tasks</a></p>
+  </div>
+</section>
+''';
+  }
+
+  final timeline = List<DashboardTaskStatusEntry>.from(runTimeline)
+    ..sort((a, b) => a.updatedAt.compareTo(b.updatedAt));
+  final metadataEntries = task.meta.entries.toList(growable: false)
+    ..sort((a, b) => a.key.compareTo(b.key));
+
+  return '''
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
+  <h1>Task Detail</h1>
+  <p class="page-subtitle">
+    Inspect lifecycle history, workflow linkage, and payload/error details for a single task status.
+  </p>
+</section>
+
+<section class="cards">
+  ${buildMetricCard('Task', escapeHtml(task.taskName), 'Handler name reported by task status metadata.')}
+  ${buildMetricCard('Queue', escapeHtml(task.queue), 'Queue where this task executed.')}
+  ${buildMetricCard('State', escapeHtml(task.state.name), 'Current persisted state.')}
+  ${buildMetricCard('Attempt', formatInt(task.attempt), 'Attempt count stored on the latest status write.')}
+</section>
+
+<section class="control-panel ring-1 ring-inset ring-sky-300/10">
+  <h2 class="section-heading">Task actions</h2>
+  <div class="action-bar">
+    ${buildTaskActions(task)}
+  </div>
+</section>
+
+<section class="table-card ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Task Snapshot</h2>
+  </header>
+  <table>
+    <tbody>
+      <tr><th scope="row">Task ID</th><td><code>${escapeHtml(task.id)}</code></td></tr>
+      <tr><th scope="row">Created</th><td class="muted">${formatDateTime(task.createdAt)}</td></tr>
+      <tr><th scope="row">Updated</th><td class="muted">${formatDateTime(task.updatedAt)}</td></tr>
+      <tr><th scope="row">Run ID</th><td>${task.runId == null ? '<span class="muted">—</span>' : '<a href="/tasks/detail?id=${Uri.encodeQueryComponent(task.id)}&runId=${Uri.encodeQueryComponent(task.runId!)}" data-turbo-frame="dashboard-content"><code>${escapeHtml(task.runId!)}</code></a>'}</td></tr>
+      <tr><th scope="row">Workflow</th><td>${task.workflowName == null ? '<span class="muted">—</span>' : escapeHtml(task.workflowName!)}</td></tr>
+      <tr><th scope="row">Workflow Step</th><td>${task.workflowStep == null ? '<span class="muted">—</span>' : escapeHtml(task.workflowStep!)}</td></tr>
+    </tbody>
+  </table>
+</section>
+
+<section class="table-card mt-7 p-4 ring-1 ring-inset ring-sky-300/10">
+  <h2 class="section-heading">Payload / Error</h2>
+  <div class="detail-grid">
+    <div>
+      <div class="muted">Payload</div>
+      <pre class="payload-block">${escapeHtml(_prettyObject(task.payload))}</pre>
+    </div>
+    <div>
+      <div class="muted">Error</div>
+      <pre class="payload-block">${escapeHtml(_errorBlock(task))}</pre>
+    </div>
+  </div>
+</section>
+
+<section class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Metadata</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Metadata key</th>
+        <th scope="col">Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${metadataEntries.isEmpty ? '''
+<tr>
+  <td colspan="2" class="muted">No metadata fields persisted for this status.</td>
+</tr>
+''' : metadataEntries.map((entry) => '''
+<tr>
+  <td><code>${escapeHtml(entry.key)}</code></td>
+  <td class="muted">${escapeHtml(_prettyObject(entry.value))}</td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+
+${buildWorkflowSection(task, workflowRun, workflowSteps, timeline)}
+''';
+}
+
+String buildWorkflowSection(
+  DashboardTaskStatusEntry task,
+  DashboardWorkflowRunSnapshot? workflowRun,
+  List<DashboardWorkflowStepSnapshot> workflowSteps,
+  List<DashboardTaskStatusEntry> timeline,
+) {
+  if (task.runId == null) {
+    return '''
+<section class="event-feed mt-7">
+  <div class="event-item ring-1 ring-inset ring-sky-300/10">
+    <h3 class="text-lg font-semibold text-slate-100">No workflow linkage</h3>
+    <p class="muted">This task status does not include <code>stem.workflow.runId</code> metadata.</p>
+  </div>
+</section>
+''';
+  }
+
+  final runId = task.runId!;
+  return '''
+<section class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Workflow Run</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Workflow run</th>
+        <th scope="col">Status</th>
+        <th scope="col">Cursor</th>
+        <th scope="col">Updated</th>
+        <th scope="col">Wait topic</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${workflowRun == null ? '''
+<tr>
+  <td colspan="5" class="muted">Workflow store is unavailable or this run is no longer persisted.</td>
+</tr>
+''' : '''
+<tr>
+  <td><code>${escapeHtml(runId)}</code></td>
+  <td><span class="pill">${escapeHtml(workflowRun.status.name)}</span></td>
+  <td>${formatInt(workflowRun.cursor)}</td>
+  <td class="muted">${formatDateTime(workflowRun.updatedAt)}</td>
+  <td class="muted">${escapeHtml(workflowRun.waitTopic ?? '—')}</td>
+</tr>
+'''}
+    </tbody>
+  </table>
+</section>
+
+<section class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Workflow Steps</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Step</th>
+        <th scope="col">Position</th>
+        <th scope="col">Completed</th>
+        <th scope="col">Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${workflowSteps.isEmpty ? '''
+<tr>
+  <td colspan="4" class="muted">No persisted workflow step checkpoints found.</td>
+</tr>
+''' : workflowSteps.map((step) => '''
+<tr>
+  <td>${escapeHtml(step.name)}</td>
+  <td>${formatInt(step.position)}</td>
+  <td class="muted">${formatDateTime(step.completedAt)}</td>
+  <td class="muted">${escapeHtml(_prettyObject(step.value))}</td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+
+<section class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Run Timeline</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Task ID</th>
+        <th scope="col">Task</th>
+        <th scope="col">Step</th>
+        <th scope="col">State</th>
+        <th scope="col">Attempt</th>
+        <th scope="col">Updated</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${timeline.isEmpty ? '''
+<tr>
+  <td colspan="6" class="muted">No related statuses were found for run <code>${escapeHtml(runId)}</code>.</td>
+</tr>
+''' : timeline.map((entry) => '''
+<tr>
+  <td><a href="/tasks/detail?id=${Uri.encodeQueryComponent(entry.id)}" data-turbo-frame="dashboard-content"><code>${escapeHtml(entry.id)}</code></a></td>
+  <td>${escapeHtml(entry.taskName)}</td>
+  <td>${escapeHtml(entry.workflowStep ?? '—')}</td>
+  <td>${buildTaskStatePill(entry.state)}</td>
+  <td>${formatInt(entry.attempt)}</td>
+  <td class="muted">${formatRelative(entry.updatedAt)}</td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+''';
+}
+
+String _prettyObject(Object? value) {
+  if (value == null) return 'null';
+  if (value is String) return value;
+  if (value is num || value is bool) return value.toString();
+  try {
+    return const JsonEncoder.withIndent('  ').convert(value);
+  } on Object {
+    return value.toString();
+  }
+}
+
+String _errorBlock(DashboardTaskStatusEntry task) {
+  if (task.errorMessage == null &&
+      task.errorType == null &&
+      task.errorStack == null) {
+    return 'No error payload recorded.';
+  }
+  final buffer = StringBuffer();
+  if (task.errorType != null && task.errorType!.isNotEmpty) {
+    buffer.writeln(task.errorType);
+  }
+  if (task.errorMessage != null && task.errorMessage!.isNotEmpty) {
+    buffer.writeln(task.errorMessage);
+  }
+  if (task.errorStack != null && task.errorStack!.isNotEmpty) {
+    buffer
+      ..writeln()
+      ..writeln(task.errorStack);
+  }
+  return buffer.toString().trim();
+}
+
+String buildTaskActions(DashboardTaskStatusEntry task) {
+  final redirect = '/tasks/detail?id=${Uri.encodeQueryComponent(task.id)}';
+  final encodedId = escapeHtml(task.id);
+  final encodedQueue = escapeHtml(task.queue);
+  final actions = <String>[];
+
+  if (task.state == TaskState.running || task.state == TaskState.queued) {
+    actions.add('''
+<form class="inline-form" action="/tasks/action" method="post" data-turbo-frame="dashboard-content">
+  <input type="hidden" name="action" value="cancel" />
+  <input type="hidden" name="taskId" value="$encodedId" />
+  <input type="hidden" name="queue" value="$encodedQueue" />
+  <input type="hidden" name="redirect" value="$redirect" />
+  <button type="submit" class="ghost-button">Cancel task</button>
+</form>
+''');
+  }
+
+  if (task.state == TaskState.failed || task.state == TaskState.cancelled) {
+    actions.add('''
+<form class="inline-form" action="/tasks/action" method="post" data-turbo-frame="dashboard-content">
+  <input type="hidden" name="action" value="replay" />
+  <input type="hidden" name="taskId" value="$encodedId" />
+  <input type="hidden" name="queue" value="$encodedQueue" />
+  <input type="hidden" name="redirect" value="$redirect" />
+  <button type="submit" class="ghost-button">Replay from DLQ</button>
+</form>
+''');
+  }
+
+  actions.add(
+    '<a href="/tasks" data-turbo-frame="dashboard-content" class="ghost-button">Back to tasks</a>',
+  );
+  return actions.join();
+}
diff --git a/packages/dashboard/lib/src/ui/tasks.dart b/packages/dashboard/lib/src/ui/tasks.dart
index b535768..466abe7 100644
--- a/packages/dashboard/lib/src/ui/tasks.dart
+++ b/packages/dashboard/lib/src/ui/tasks.dart
@@ -1,11 +1,18 @@
 // HTML template strings are kept on single lines for readability.
 // ignore_for_file: lines_longer_than_80_chars, public_member_api_docs
 
+import 'dart:convert';
+
+import 'package:stem/stem.dart' show TaskState, stemNow;
 import 'package:stem_dashboard/src/services/models.dart';
 import 'package:stem_dashboard/src/ui/options.dart';
 import 'package:stem_dashboard/src/ui/shared.dart';
 
-String buildTasksContent(List<QueueSummary> queues, TasksPageOptions options) {
+String buildTasksContent(
+  List<QueueSummary> queues,
+  TasksPageOptions options,
+  List<DashboardTaskStatusEntry> taskStatuses,
+) {
   var filtered =
       options.hasFilter
             ? queues
@@ -26,9 +33,40 @@ String buildTasksContent(List<QueueSummary> queues, TasksPageOptions options) {
     0,
     (total, summary) => total + summary.deadLetters,
   );
+  final runningCount = taskStatuses
+      .where((task) => task.state == TaskState.running)
+      .length;
+  final failedCount = taskStatuses
+      .where((task) => task.state == TaskState.failed)
+      .length;
+  final retriedCount = taskStatuses
+      .where((task) => task.state == TaskState.retried)
+      .length;
+  final now = stemNow().toUtc();
+  const queuedStuckThreshold = Duration(minutes: 5);
+  const runningStuckThreshold = Duration(minutes: 15);
+  final stuckQueued = taskStatuses
+      .where((task) {
+        if (task.state != TaskState.queued) return false;
+        return now.difference(task.createdAt.toUtc()) > queuedStuckThreshold;
+      })
+      .toList(growable: false);
+  final stuckRunning = taskStatuses
+      .where((task) {
+        if (task.state != TaskState.running) return false;
+        final anchor = task.startedAt ?? task.updatedAt.toUtc();
+        return now.difference(anchor) > runningStuckThreshold;
+      })
+      .toList(growable: false);
+  final queueLatency = _buildQueueLatency(taskStatuses);
+  final slaBreaches = queueLatency.fold<int>(
+    0,
+    (total, item) => total + item.slaBreaches,
+  );
+  final taskActionRedirect = _buildTasksRedirect(options);
 
   return '''
-<section class="page-header">
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
   <h1>Tasks</h1>
   <p class="page-subtitle">
     Queue depth, inflight counts, and dead letter insight. Replay controls arrive alongside Turbo stream actions.
@@ -40,18 +78,38 @@ ${renderTasksAlert(options)}
 <section class="cards">
   ${buildMetricCard('Tracked queues', formatInt(totalQueues), 'Queues discovered via Redis stream prefixes.')}
   ${buildMetricCard('Dead letter size', formatInt(dlqTotal), 'Aggregate items across all dead letter queues.')}
+  ${buildMetricCard('Running tasks', formatInt(runningCount), 'Recent statuses currently processing.')}
+  ${buildMetricCard('Failed tasks', formatInt(failedCount), 'Recent statuses with terminal failures.')}
+  ${buildMetricCard('Retried tasks', formatInt(retriedCount), 'Recent statuses scheduled for another attempt.')}
+  ${buildMetricCard('Stuck queued', formatInt(stuckQueued.length), 'Queued beyond ${queuedStuckThreshold.inMinutes}m from initial status creation.')}
+  ${buildMetricCard('Stuck running', formatInt(stuckRunning.length), 'Running beyond ${runningStuckThreshold.inMinutes}m from start heartbeat metadata.')}
+  ${buildMetricCard('SLA breaches', formatInt(slaBreaches), 'Queue wait > 1m or processing > 5m across sampled statuses.')}
 </section>
 
-<form class="filter-form" action="/tasks" method="get" data-turbo-frame="dashboard-content">
+<form class="filter-form rounded-2xl border border-slate-300/15 bg-slate-900/40 p-4" action="/tasks" method="get" data-turbo-frame="dashboard-content">
   <label class="filter-label" for="queue-filter">Queue filter</label>
   <input id="queue-filter" name="queue" value="${escapeHtml(options.filter ?? '')}" placeholder="default" />
+  <label class="filter-label" for="namespace-filter">Namespace</label>
+  <input id="namespace-filter" name="namespace" value="${escapeHtml(options.namespaceFilter ?? '')}" placeholder="stem" />
+  <label class="filter-label" for="task-filter">Task name</label>
+  <input id="task-filter" name="task" value="${escapeHtml(options.taskFilter ?? '')}" placeholder="greeting.send" />
+  <label class="filter-label" for="run-filter">Run ID</label>
+  <input id="run-filter" name="runId" value="${escapeHtml(options.runId ?? '')}" placeholder="019c..." />
+  <label class="filter-label" for="state-filter">Task state</label>
+  ${buildTaskStateFilterSelect(options)}
+  <label class="filter-label" for="page-size">Page size</label>
+  ${buildTaskPageSizeSelect(options)}
   <input type="hidden" name="sort" value="${options.sortKey}" />
   <input type="hidden" name="direction" value="${options.descending ? 'desc' : 'asc'}" />
+  <input type="hidden" name="page" value="1" />
   <button type="submit">Apply</button>
-  ${options.hasFilter ? '<a class="clear-filter" href="/tasks" data-turbo-frame="dashboard-content">Clear</a>' : ''}
+  ${(options.hasFilter || options.hasNamespaceFilter || options.hasTaskFilter || options.hasRunIdFilter) ? '<a class="clear-filter" href="/tasks" data-turbo-frame="dashboard-content">Clear</a>' : ''}
 </form>
 
-<section class="table-card">
+<section class="table-card ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Queue Snapshot</h2>
+  </header>
   <table>
     <thead>
       <tr>
@@ -67,9 +125,62 @@ ${renderTasksAlert(options)}
   </table>
 </section>
 
-<section class="event-feed" style="margin-top: 28px;">
-  <div class="enqueue-card">
-    <h3>Ad-hoc enqueue</h3>
+<section class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Latency Watch</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Queue</th>
+        <th scope="col">Samples</th>
+        <th scope="col">Wait avg</th>
+        <th scope="col">Wait p95</th>
+        <th scope="col">Run avg</th>
+        <th scope="col">Run p95</th>
+        <th scope="col">SLA breaches</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${queueLatency.isEmpty ? '''
+<tr>
+  <td colspan="7" class="muted">No latency samples yet. Task metadata must include started/completed timestamps.</td>
+</tr>
+''' : queueLatency.map((latency) => '''
+<tr>
+  <td><span class="pill">${escapeHtml(latency.queue)}</span></td>
+  <td>${formatInt(latency.samples)}</td>
+  <td>${latency.avgWaitLabel}</td>
+  <td>${latency.p95WaitLabel}</td>
+  <td>${latency.avgRunLabel}</td>
+  <td>${latency.p95RunLabel}</td>
+  <td>${formatInt(latency.slaBreaches)}</td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+
+<section class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Recent Statuses</h2>
+  </header>
+  ${buildTaskPaginationBar(options, taskStatuses.length)}
+  ${buildTaskStatusTable(
+    taskStatuses,
+    options: DashboardTaskTableOptions(
+      emptyMessage: 'No task statuses match the current filters.',
+      expandableRows: true,
+      actionsBuilder: (task) =>
+          buildTaskLifecycleActions(task, redirectPath: taskActionRedirect),
+    ),
+  )}
+  ${buildTaskPaginationBar(options, taskStatuses.length)}
+</section>
+
+<section class="event-feed mt-7">
+  <div class="enqueue-card ring-1 ring-inset ring-sky-300/10">
+    <h3 class="mb-3 text-lg font-semibold tracking-tight text-slate-100">Ad-hoc enqueue</h3>
     <form class="enqueue-form" action="/tasks/enqueue" method="post" data-turbo-frame="dashboard-content">
       <div class="form-grid">
         <label>
@@ -106,6 +217,8 @@ String renderTasksAlert(TasksPageOptions options) {
   switch (options.flashKey) {
     case 'queued':
       message = 'Task enqueued successfully.';
+    default:
+      message = options.flashKey;
   }
   switch (options.errorKey) {
     case 'missing-fields':
@@ -118,6 +231,11 @@ String renderTasksAlert(TasksPageOptions options) {
       message =
           'Failed to enqueue the task. Check the dashboard logs for details.';
       type = 'error';
+    default:
+      if (options.errorKey != null && options.errorKey!.isNotEmpty) {
+        message = options.errorKey;
+        type = 'error';
+      }
   }
 
   if (message == null) return '';
@@ -144,10 +262,24 @@ String buildSortableHeader(String label, String key, TasksPageOptions options) {
   final params = <String, String>{
     'sort': key,
     'direction': descendingNext ? 'desc' : 'asc',
+    'page': '1',
+    'pageSize': '${options.pageSize}',
   };
   if (options.hasFilter) {
     params['queue'] = options.filter!;
   }
+  if (options.hasNamespaceFilter) {
+    params['namespace'] = options.namespaceFilter!;
+  }
+  if (options.hasTaskFilter) {
+    params['task'] = options.taskFilter!;
+  }
+  if (options.hasRunIdFilter) {
+    params['runId'] = options.runId!;
+  }
+  if (options.hasStateFilter) {
+    params['state'] = options.stateFilter!.name;
+  }
   final query = buildQuery(params);
   final indicator = isActive ? (options.descending ? '&darr;' : '&uarr;') : '';
   final classes = isActive ? 'sort-link active' : 'sort-link';
@@ -162,3 +294,309 @@ String buildQuery(Map<String, String> params) {
       )
       .join('&');
 }
+
+String buildTaskStateFilterSelect(TasksPageOptions options) {
+  final current = options.stateFilter?.name;
+  String option(TaskState? state, String label) {
+    final value = state?.name ?? '';
+    final selected = current == value ? ' selected' : '';
+    return '<option value="$value"$selected>$label</option>';
+  }
+
+  return '''
+<select id="state-filter" name="state">
+  ${option(null, 'Any')}
+  ${option(TaskState.queued, 'Queued')}
+  ${option(TaskState.running, 'Running')}
+  ${option(TaskState.succeeded, 'Succeeded')}
+  ${option(TaskState.failed, 'Failed')}
+  ${option(TaskState.retried, 'Retried')}
+  ${option(TaskState.cancelled, 'Cancelled')}
+</select>
+''';
+}
+
+String buildTaskPageSizeSelect(TasksPageOptions options) {
+  const sizes = [25, 50, 100, 200];
+  final normalized = sizes.contains(options.pageSize) ? options.pageSize : 25;
+  final optionsHtml = sizes.map((size) {
+    final selected = normalized == size ? ' selected' : '';
+    return '<option value="$size"$selected>$size</option>';
+  }).join();
+  return '<select id="page-size" name="pageSize">$optionsHtml</select>';
+}
+
+String buildTaskPaginationBar(TasksPageOptions options, int rowsOnPage) {
+  if (!options.hasPagination) {
+    return '';
+  }
+  final start = rowsOnPage == 0 ? 0 : options.offset + 1;
+  final end = options.offset + rowsOnPage;
+  final baseParams = <String, String>{
+    'sort': options.sortKey,
+    'direction': options.descending ? 'desc' : 'asc',
+    'pageSize': '${options.pageSize}',
+  };
+  if (options.hasFilter) {
+    baseParams['queue'] = options.filter!;
+  }
+  if (options.hasNamespaceFilter) {
+    baseParams['namespace'] = options.namespaceFilter!;
+  }
+  if (options.hasTaskFilter) {
+    baseParams['task'] = options.taskFilter!;
+  }
+  if (options.hasRunIdFilter) {
+    baseParams['runId'] = options.runId!;
+  }
+  if (options.hasStateFilter) {
+    baseParams['state'] = options.stateFilter!.name;
+  }
+
+  final previousLink = options.hasPreviousPage
+      ? '<a class="ghost-button" href="/tasks?${buildQuery({...baseParams, 'page': '${options.page - 1}'})}" data-turbo-frame="dashboard-content">Previous</a>'
+      : '<span class="ghost-button disabled">Previous</span>';
+  final nextLink = options.hasNextPage
+      ? '<a class="ghost-button" href="/tasks?${buildQuery({...baseParams, 'page': '${options.page + 1}'})}" data-turbo-frame="dashboard-content">Next</a>'
+      : '<span class="ghost-button disabled">Next</span>';
+
+  return '''
+<div class="pager">
+  <span class="muted">Page ${options.page} • Showing $start-$end</span>
+  <div class="action-bar">
+    $previousLink
+    $nextLink
+  </div>
+</div>
+''';
+}
+
+String _buildTasksRedirect(TasksPageOptions options) {
+  final params = <String, String>{};
+  if (options.hasFilter) {
+    params['queue'] = options.filter!;
+  }
+  if (options.hasNamespaceFilter) {
+    params['namespace'] = options.namespaceFilter!;
+  }
+  if (options.hasTaskFilter) {
+    params['task'] = options.taskFilter!;
+  }
+  if (options.hasRunIdFilter) {
+    params['runId'] = options.runId!;
+  }
+  if (options.hasStateFilter) {
+    params['state'] = options.stateFilter!.name;
+  }
+  if (params.isEmpty) return '/tasks';
+  return '/tasks?${buildQuery(params)}';
+}
+
+String buildTaskInlinePanel(DashboardTaskStatusEntry? task) {
+  if (task == null) {
+    return '''
+<div class="event-item p-4">
+  <p class="muted">Task detail could not be loaded from the result backend.</p>
+</div>
+''';
+  }
+
+  final detailUrl = '/tasks/detail?id=${Uri.encodeQueryComponent(task.id)}';
+  final metadataEntries = task.meta.entries.toList(growable: false)
+    ..sort((a, b) => a.key.compareTo(b.key));
+  final metadataPreview = metadataEntries.isEmpty
+      ? '<span class="muted">No metadata fields were persisted.</span>'
+      : '<div class="meta-list">${metadataEntries.take(8).map((entry) => '''
+<div class="meta-item">
+  <code>${escapeHtml(entry.key)}</code>
+  <span class="muted">${escapeHtml(_compactObject(entry.value))}</span>
+</div>
+''').join()}</div>${metadataEntries.length > 8 ? '<p class="muted">+${metadataEntries.length - 8} more metadata fields in full detail view.</p>' : ''}';
+  final payloadPreview = escapeHtml(_compactObject(task.payload, max: 480));
+  final errorPreview = escapeHtml(_buildErrorPreview(task));
+  final workflowSummary = task.runId == null
+      ? '<span class="muted">No workflow linkage</span>'
+      : '<span><code>${escapeHtml(task.runId!)}</code>${task.workflowStep == null ? '' : ' · ${escapeHtml(task.workflowStep!)}'}</span>';
+
+  return '''
+<div class="detail-grid">
+  <div>
+    <div class="muted">Timestamps</div>
+    <div>Created: ${escapeHtml(formatDateTime(task.createdAt))}</div>
+    <div>Started: ${escapeHtml(formatDateTime(task.startedAt))}</div>
+    <div>Finished: ${escapeHtml(formatDateTime(task.finishedAt))}</div>
+  </div>
+  <div>
+    <div class="muted">Workflow</div>
+    <div>$workflowSummary</div>
+    <div class="muted">Updated ${escapeHtml(formatRelative(task.updatedAt))}</div>
+  </div>
+  <div>
+    <div class="muted">Error snapshot</div>
+    <pre class="payload-block">$errorPreview</pre>
+  </div>
+  <div>
+    <div class="muted">Payload snapshot</div>
+    <pre class="payload-block">$payloadPreview</pre>
+  </div>
+</div>
+<div class="mt-3">
+  <div class="muted mb-2">Metadata</div>
+  $metadataPreview
+</div>
+<div class="action-bar mt-3">
+  <a href="$detailUrl" data-turbo-frame="dashboard-content" class="ghost-button">Open full detail</a>
+</div>
+''';
+}
+
+String _buildErrorPreview(DashboardTaskStatusEntry task) {
+  if (task.errorMessage == null &&
+      task.errorType == null &&
+      task.errorStack == null) {
+    return 'No error payload recorded.';
+  }
+  final buffer = StringBuffer();
+  if (task.errorType != null && task.errorType!.isNotEmpty) {
+    buffer.writeln(task.errorType);
+  }
+  if (task.errorMessage != null && task.errorMessage!.isNotEmpty) {
+    buffer.writeln(task.errorMessage);
+  }
+  if (task.errorStack != null && task.errorStack!.isNotEmpty) {
+    final stack = _truncate(task.errorStack!, 360);
+    if (stack.isNotEmpty) {
+      buffer
+        ..writeln()
+        ..writeln(stack);
+    }
+  }
+  return buffer.toString().trim();
+}
+
+String _compactObject(Object? value, {int max = 180}) {
+  final pretty = _prettyObject(value).replaceAll('\n', ' ');
+  return _truncate(pretty, max);
+}
+
+String _truncate(String input, int max) {
+  if (input.length <= max) return input;
+  return '${input.substring(0, max)}...';
+}
+
+String _prettyObject(Object? value) {
+  if (value == null) return 'null';
+  if (value is String) return value;
+  if (value is num || value is bool) return value.toString();
+  try {
+    return const JsonEncoder.withIndent('  ').convert(value);
+  } on Object {
+    return value.toString();
+  }
+}
+
+List<_QueueLatencyRow> _buildQueueLatency(
+  List<DashboardTaskStatusEntry> tasks,
+) {
+  final byQueue = <String, _QueueLatencyAccumulator>{};
+  const queueSla = Duration(minutes: 1);
+  const runSla = Duration(minutes: 5);
+
+  for (final task in tasks) {
+    final bucket = byQueue.putIfAbsent(
+      task.queue,
+      () => _QueueLatencyAccumulator(queue: task.queue),
+    );
+    final wait = task.queueWait;
+    final run = task.processingTime;
+    bucket.add(wait: wait, run: run, queueSla: queueSla, runSla: runSla);
+  }
+
+  final rows =
+      byQueue.values.map((value) => value.build()).toList(growable: false)
+        ..sort((a, b) => b.slaBreaches.compareTo(a.slaBreaches));
+  return rows;
+}
+
+class _QueueLatencyAccumulator {
+  _QueueLatencyAccumulator({required this.queue});
+
+  final String queue;
+  final _waitSamples = <int>[];
+  final _runSamples = <int>[];
+  var _samples = 0;
+  var _breaches = 0;
+
+  void add({
+    required Duration? wait,
+    required Duration? run,
+    required Duration queueSla,
+    required Duration runSla,
+  }) {
+    _samples += 1;
+    if (wait != null) {
+      _waitSamples.add(wait.inMilliseconds);
+      if (wait > queueSla) _breaches += 1;
+    }
+    if (run != null) {
+      _runSamples.add(run.inMilliseconds);
+      if (run > runSla) _breaches += 1;
+    }
+  }
+
+  _QueueLatencyRow build() {
+    return _QueueLatencyRow(
+      queue: queue,
+      samples: _samples,
+      avgWaitMs: _average(_waitSamples),
+      p95WaitMs: _percentile(_waitSamples, 0.95),
+      avgRunMs: _average(_runSamples),
+      p95RunMs: _percentile(_runSamples, 0.95),
+      slaBreaches: _breaches,
+    );
+  }
+
+  int _average(List<int> values) {
+    if (values.isEmpty) return 0;
+    final total = values.fold<int>(0, (sum, value) => sum + value);
+    return (total / values.length).round();
+  }
+
+  int _percentile(List<int> values, double p) {
+    if (values.isEmpty) return 0;
+    final sorted = List<int>.from(values)..sort();
+    final index = ((sorted.length - 1) * p).round().clamp(0, sorted.length - 1);
+    return sorted[index];
+  }
+}
+
+class _QueueLatencyRow {
+  const _QueueLatencyRow({
+    required this.queue,
+    required this.samples,
+    required this.avgWaitMs,
+    required this.p95WaitMs,
+    required this.avgRunMs,
+    required this.p95RunMs,
+    required this.slaBreaches,
+  });
+
+  final String queue;
+  final int samples;
+  final int avgWaitMs;
+  final int p95WaitMs;
+  final int avgRunMs;
+  final int p95RunMs;
+  final int slaBreaches;
+
+  String get avgWaitLabel => _formatMs(avgWaitMs);
+  String get p95WaitLabel => _formatMs(p95WaitMs);
+  String get avgRunLabel => _formatMs(avgRunMs);
+  String get p95RunLabel => _formatMs(p95RunMs);
+
+  String _formatMs(int millis) {
+    if (millis <= 0) return '—';
+    if (millis < 1000) return '${millis}ms';
+    return '${(millis / 1000).toStringAsFixed(2)}s';
+  }
+}
diff --git a/packages/dashboard/lib/src/ui/workers.dart b/packages/dashboard/lib/src/ui/workers.dart
index 2f4a840..8893047 100644
--- a/packages/dashboard/lib/src/ui/workers.dart
+++ b/packages/dashboard/lib/src/ui/workers.dart
@@ -2,6 +2,8 @@
 // UI template files lightweight.
 // ignore_for_file: public_member_api_docs
 
+import 'dart:math' as math;
+
 import 'package:stem_dashboard/src/services/models.dart';
 import 'package:stem_dashboard/src/ui/options.dart';
 import 'package:stem_dashboard/src/ui/shared.dart';
@@ -11,15 +13,30 @@ String buildWorkersContent(
   List<QueueSummary> queues,
   WorkersPageOptions options,
 ) {
-  final healthyWorkers = workers.where((worker) {
+  final filteredWorkers = options.hasNamespaceFilter
+      ? workers
+            .where(
+              (worker) =>
+                  worker.namespace.toLowerCase() ==
+                  options.namespaceFilter!.toLowerCase(),
+            )
+            .toList(growable: false)
+      : workers;
+  final healthyWorkers = filteredWorkers.where((worker) {
     return worker.age <= const Duration(minutes: 2);
   }).length;
 
-  final busy = workers.where((worker) => worker.inflight > 0).length;
+  final busy = filteredWorkers.where((worker) => worker.inflight > 0).length;
+  final overloaded = filteredWorkers.where((worker) {
+    final cap = worker.isolateCount <= 0 ? 1 : worker.isolateCount;
+    return worker.inflight / cap >= 0.8;
+  }).length;
+  final queueCoverage = _buildQueueCoverage(filteredWorkers, queues);
+  final imbalance = _computeImbalance(queueCoverage);
   final queueMap = {for (final summary in queues) summary.queue: summary};
 
   return '''
-<section class="page-header">
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
   <h1>Workers</h1>
   <p class="page-subtitle">
     Heartbeat health, queue assignments, and in-flight counts. Issue control plane commands and replay dead letters inline.
@@ -31,37 +48,53 @@ ${renderWorkersAlert(options)}
 <section class="cards">
   ${buildMetricCard('Healthy workers', formatInt(healthyWorkers), 'Heartbeats received within the last two minutes.')}
   ${buildMetricCard('Busy workers', formatInt(busy), 'Workers currently processing at least one task.')}
-  ${buildMetricCard('Isolates in use', formatInt(totalIsolates(workers)), 'Sum of worker isolates across the cluster.')}
+  ${buildMetricCard('High saturation', formatInt(overloaded), 'Workers at or above 80% inflight-to-isolate capacity.')}
+  ${buildMetricCard('Queue imbalance', imbalance.toStringAsFixed(2), 'Stddev of worker coverage across discovered queues.')}
+  ${buildMetricCard('Isolates in use', formatInt(totalIsolates(filteredWorkers)), 'Sum of worker isolates across the cluster.')}
 </section>
 
-<section class="table-card">
+<form class="filter-form rounded-2xl border border-slate-300/15 bg-slate-900/40 p-4" action="/workers" method="get" data-turbo-frame="dashboard-content">
+  <label class="filter-label" for="worker-namespace-filter">Namespace</label>
+  <input id="worker-namespace-filter" name="namespace" value="${escapeHtml(options.namespaceFilter ?? '')}" placeholder="stem" />
+  <button type="submit">Apply</button>
+  ${options.hasNamespaceFilter ? '<a class="clear-filter" href="/workers" data-turbo-frame="dashboard-content">Clear</a>' : ''}
+</form>
+
+<section class="table-card ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Worker Heartbeats</h2>
+  </header>
   <table>
     <thead>
       <tr>
         <th scope="col">Worker</th>
+        <th scope="col">Namespace</th>
         <th scope="col">Queues</th>
         <th scope="col">Inflight</th>
+        <th scope="col">Saturation</th>
         <th scope="col">Last heartbeat</th>
         <th scope="col">Actions</th>
       </tr>
     </thead>
     <tbody>
-      ${workers.isEmpty ? '''
+      ${filteredWorkers.isEmpty ? '''
               <tr>
-                <td colspan="5" class="muted">No heartbeats detected for namespace "${workers.isEmpty ? 'stem' : workers.first.namespace}".</td>
+                <td colspan="7" class="muted">No heartbeats detected for namespace "${options.namespaceFilter ?? 'stem'}".</td>
               </tr>
-            ''' : workers.map(buildWorkerRow).join()}
+            ''' : filteredWorkers.map((worker) => buildWorkerRow(worker, namespaceFilter: options.namespaceFilter)).join()}
     </tbody>
   </table>
 </section>
 
-${buildClusterControls()}
+${_buildQueueCoverageSection(queueCoverage)}
+
+${buildClusterControls(namespaceFilter: options.namespaceFilter)}
 
-${buildQueueRecoverySection(queueMap)}
+${buildQueueRecoverySection(queueMap, namespaceFilter: options.namespaceFilter)}
 ''';
 }
 
-String buildWorkerRow(WorkerStatus status) {
+String buildWorkerRow(WorkerStatus status, {String? namespaceFilter}) {
   final queues = status.queues.isEmpty
       ? '<span class="muted">—</span>'
       : status.queues
@@ -69,60 +102,92 @@ String buildWorkerRow(WorkerStatus status) {
             .join(' ');
   return '''
 <tr>
-  <td>${status.workerId}</td>
+  <td class="font-semibold text-slate-100">${status.workerId}</td>
+  <td><span class="pill">${escapeHtml(status.namespace)}</span></td>
   <td>$queues</td>
   <td>${formatInt(status.inflight)}</td>
+  <td>${buildSaturationPill(status)}</td>
   <td class="muted">${formatRelative(status.timestamp)}</td>
   <td>
     <div class="action-bar">
-      ${buildWorkerActionButton('Ping', 'ping', status.workerId)}
-      ${buildWorkerActionButton('Pause', 'pause', status.workerId)}
-      ${buildWorkerActionButton('Shutdown', 'shutdown', status.workerId)}
+      ${buildWorkerActionButton('Ping', 'ping', status.workerId, namespaceFilter: namespaceFilter)}
+      ${buildWorkerActionButton('Pause', 'pause', status.workerId, namespaceFilter: namespaceFilter)}
+      ${buildWorkerActionButton('Shutdown', 'shutdown', status.workerId, namespaceFilter: namespaceFilter)}
     </div>
   </td>
 </tr>
 ''';
 }
 
-String buildWorkerActionButton(String label, String action, String workerId) {
+String buildSaturationPill(WorkerStatus status) {
+  final capacity = status.isolateCount <= 0 ? 1 : status.isolateCount;
+  final ratio = status.inflight / capacity;
+  final label = '${(ratio * 100).round()}%';
+  final style = ratio >= 0.8
+      ? 'error'
+      : ratio >= 0.5
+      ? 'warning'
+      : 'success';
+  return '<span class="pill $style">$label</span>';
+}
+
+String buildWorkerActionButton(
+  String label,
+  String action,
+  String workerId, {
+  String? namespaceFilter,
+}) {
   return '''
 <form class="inline-form" action="/workers/control" method="post" data-turbo-frame="dashboard-content">
   <input type="hidden" name="worker" value="${escapeHtml(workerId)}" />
   <input type="hidden" name="action" value="${escapeHtml(action)}" />
+  ${namespaceFilter == null || namespaceFilter.isEmpty ? '' : '<input type="hidden" name="namespace" value="${escapeHtml(namespaceFilter)}" />'}
   <button type="submit" class="ghost-button">$label</button>
 </form>
 ''';
 }
 
-String buildClusterControls() {
+String buildClusterControls({String? namespaceFilter}) {
   return '''
-<section class="control-panel">
+<section class="control-panel ring-1 ring-inset ring-sky-300/10">
   <h2 class="section-heading">Cluster controls</h2>
+  <p class="muted mb-3">Broadcast commands to all workers in the namespace.</p>
   <div class="action-bar">
-    ${buildClusterActionButton('Ping all workers', 'ping')}
-    ${buildClusterActionButton('Pause all workers', 'pause')}
-    ${buildClusterActionButton('Shutdown all workers', 'shutdown')}
+    ${buildClusterActionButton('Ping all workers', 'ping', namespaceFilter: namespaceFilter)}
+    ${buildClusterActionButton('Pause all workers', 'pause', namespaceFilter: namespaceFilter)}
+    ${buildClusterActionButton('Shutdown all workers', 'shutdown', namespaceFilter: namespaceFilter)}
   </div>
 </section>
 ''';
 }
 
-String buildClusterActionButton(String label, String action) {
+String buildClusterActionButton(
+  String label,
+  String action, {
+  String? namespaceFilter,
+}) {
   return '''
 <form class="inline-form" action="/workers/control" method="post" data-turbo-frame="dashboard-content">
   <input type="hidden" name="worker" value="*" />
   <input type="hidden" name="action" value="${escapeHtml(action)}" />
+  ${namespaceFilter == null || namespaceFilter.isEmpty ? '' : '<input type="hidden" name="namespace" value="${escapeHtml(namespaceFilter)}" />'}
   <button type="submit" class="ghost-button">$label</button>
 </form>
 ''';
 }
 
-String buildQueueRecoverySection(Map<String, QueueSummary> queues) {
+String buildQueueRecoverySection(
+  Map<String, QueueSummary> queues, {
+  String? namespaceFilter,
+}) {
   if (queues.isEmpty) return '';
   final rows = queues.values.toList()
     ..sort((a, b) => a.queue.compareTo(b.queue));
   return '''
-<section class="table-card" style="margin-top: 28px;">
+<section class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Queue Recovery</h2>
+  </header>
   <table>
     <thead>
       <tr>
@@ -133,23 +198,147 @@ String buildQueueRecoverySection(Map<String, QueueSummary> queues) {
       </tr>
     </thead>
     <tbody>
-      ${rows.map(buildQueueRecoveryRow).join()}
+      ${rows.map((summary) => buildQueueRecoveryRow(summary, namespaceFilter: namespaceFilter)).join()}
     </tbody>
   </table>
 </section>
 ''';
 }
 
-String buildQueueRecoveryRow(QueueSummary summary) {
+String _buildQueueCoverageSection(List<_QueueCoverageRow> rows) {
+  if (rows.isEmpty) return '';
+  return '''
+<section class="table-card mt-7 ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Queue Coverage</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Queue</th>
+        <th scope="col">Workers assigned</th>
+        <th scope="col">Inflight load</th>
+        <th scope="col">Pending</th>
+        <th scope="col">Dead letters</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${rows.map((row) => '''
+<tr>
+  <td><span class="pill">${escapeHtml(row.queue)}</span></td>
+  <td>${formatInt(row.workerCount)}</td>
+  <td>${formatInt(row.inflight)}</td>
+  <td>${formatInt(row.pending)}</td>
+  <td>${formatInt(row.deadLetters)}</td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+''';
+}
+
+List<_QueueCoverageRow> _buildQueueCoverage(
+  List<WorkerStatus> workers,
+  List<QueueSummary> queues,
+) {
+  final map = <String, _QueueCoverageRowBuilder>{};
+  for (final queue in queues) {
+    map.putIfAbsent(
+      queue.queue,
+      () => _QueueCoverageRowBuilder(
+        queue: queue.queue,
+        pending: queue.pending,
+        deadLetters: queue.deadLetters,
+      ),
+    );
+  }
+  for (final worker in workers) {
+    for (final queue in worker.queues) {
+      final entry = map.putIfAbsent(
+        queue.name,
+        () => _QueueCoverageRowBuilder(queue: queue.name),
+      );
+      entry.workers.add(worker.workerId);
+      entry.inflight += queue.inflight;
+    }
+  }
+  final rows = map.values.map((value) => value.build()).toList(growable: false)
+    ..sort((a, b) {
+      final byWorkers = a.workerCount.compareTo(b.workerCount);
+      if (byWorkers != 0) return byWorkers;
+      return b.pending.compareTo(a.pending);
+    });
+  return rows;
+}
+
+double _computeImbalance(List<_QueueCoverageRow> rows) {
+  if (rows.length <= 1) return 0;
+  final values = rows.map((row) => row.workerCount.toDouble()).toList();
+  final mean = values.reduce((a, b) => a + b) / values.length;
+  var variance = 0.0;
+  for (final value in values) {
+    final delta = value - mean;
+    variance += delta * delta;
+  }
+  variance /= values.length;
+  return math.sqrt(variance);
+}
+
+class _QueueCoverageRowBuilder {
+  _QueueCoverageRowBuilder({
+    required this.queue,
+    this.pending = 0,
+    this.deadLetters = 0,
+  });
+
+  final String queue;
+  final Set<String> workers = <String>{};
+  int inflight = 0;
+  int pending;
+  int deadLetters;
+
+  _QueueCoverageRow build() {
+    return _QueueCoverageRow(
+      queue: queue,
+      workerCount: workers.length,
+      inflight: inflight,
+      pending: pending,
+      deadLetters: deadLetters,
+    );
+  }
+}
+
+class _QueueCoverageRow {
+  const _QueueCoverageRow({
+    required this.queue,
+    required this.workerCount,
+    required this.inflight,
+    required this.pending,
+    required this.deadLetters,
+  });
+
+  final String queue;
+  final int workerCount;
+  final int inflight;
+  final int pending;
+  final int deadLetters;
+}
+
+String buildQueueRecoveryRow(QueueSummary summary, {String? namespaceFilter}) {
   final limitDefault = summary.deadLetters <= 0
       ? 50
       : summary.deadLetters.clamp(1, 50);
+  final redirect = namespaceFilter == null || namespaceFilter.isEmpty
+      ? '/workers'
+      : '/workers?namespace=${Uri.encodeQueryComponent(namespaceFilter)}';
   final action = summary.deadLetters == 0
       ? '<span class="muted">No dead letters</span>'
       : '''
       <form class="inline-form" action="/queues/replay" method="post" data-turbo-frame="dashboard-content">
         <input type="hidden" name="queue" value="${escapeHtml(summary.queue)}" />
         <input type="hidden" name="limit" value="$limitDefault" />
+        <input type="hidden" name="redirect" value="$redirect" />
         <button type="submit" class="ghost-button">Replay</button>
       </form>
     ''';
diff --git a/packages/dashboard/lib/src/ui/workflows.dart b/packages/dashboard/lib/src/ui/workflows.dart
new file mode 100644
index 0000000..a147e95
--- /dev/null
+++ b/packages/dashboard/lib/src/ui/workflows.dart
@@ -0,0 +1,104 @@
+// Public helper functions in this file are intentionally undocumented to keep
+// UI template files lightweight.
+// ignore_for_file: public_member_api_docs
+
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/options.dart';
+import 'package:stem_dashboard/src/ui/shared.dart';
+
+String buildWorkflowsContent({
+  required List<DashboardTaskStatusEntry> taskStatuses,
+  required WorkflowsPageOptions options,
+}) {
+  final runs = buildWorkflowRunSummaries(taskStatuses, limit: 400);
+  final workflowFilter = options.workflow?.toLowerCase();
+  final runFilter = options.runId?.toLowerCase();
+  final filtered = runs.where((entry) {
+    final matchesWorkflow =
+        workflowFilter == null ||
+        workflowFilter.isEmpty ||
+        entry.workflowName.toLowerCase().contains(workflowFilter);
+    final matchesRun =
+        runFilter == null ||
+        runFilter.isEmpty ||
+        entry.runId.toLowerCase().contains(runFilter);
+    return matchesWorkflow && matchesRun;
+  }).toList(growable: false);
+
+  final running = filtered.fold<int>(0, (sum, entry) => sum + entry.running);
+  final failed = filtered.fold<int>(0, (sum, entry) => sum + entry.failed);
+  final queued = filtered.fold<int>(0, (sum, entry) => sum + entry.queued);
+
+  return '''
+<section class="page-header rounded-2xl border border-slate-300/15 bg-slate-900/45 px-5 py-5">
+  <h1>Workflows</h1>
+  <p class="page-subtitle">
+    Workflow run activity inferred from task metadata with run-level drill down.
+  </p>
+</section>
+
+<section class="cards">
+  ${buildMetricCard('Runs (sample)', formatInt(filtered.length), 'Distinct workflow run IDs currently visible in task status history.')}
+  ${buildMetricCard('Queued steps', formatInt(queued), 'Queued or retried statuses across sampled runs.')}
+  ${buildMetricCard('Running steps', formatInt(running), 'Statuses currently executing inside workflow runs.')}
+  ${buildMetricCard('Failed steps', formatInt(failed), 'Failed statuses mapped to workflow runs.')}
+</section>
+
+<form class="filter-form rounded-2xl border border-slate-300/15 bg-slate-900/40 p-4" action="/workflows" method="get" data-turbo-frame="dashboard-content">
+  <label class="filter-label" for="workflow-filter">Workflow name</label>
+  <input id="workflow-filter" name="workflow" value="${escapeHtml(options.workflow ?? '')}" placeholder="greetingFlow" />
+  <label class="filter-label" for="workflow-run-filter">Run ID</label>
+  <input id="workflow-run-filter" name="runId" value="${escapeHtml(options.runId ?? '')}" placeholder="019c..." />
+  <button type="submit">Apply</button>
+  ${(options.hasWorkflow || options.hasRunId) ? '<a class="clear-filter" href="/workflows" data-turbo-frame="dashboard-content">Clear</a>' : ''}
+</form>
+
+<section class="table-card ring-1 ring-inset ring-sky-300/10">
+  <header class="border-b border-slate-300/10 px-4 py-3">
+    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-300">Workflow Runs</h2>
+  </header>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Run ID</th>
+        <th scope="col">Workflow</th>
+        <th scope="col">Last step</th>
+        <th scope="col">Queued</th>
+        <th scope="col">Running</th>
+        <th scope="col">Succeeded</th>
+        <th scope="col">Failed</th>
+        <th scope="col">Cancelled</th>
+        <th scope="col">Updated</th>
+        <th scope="col">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${filtered.isEmpty ? '''
+<tr>
+  <td colspan="10" class="muted">No workflow runs match the current filters.</td>
+</tr>
+''' : filtered.map((entry) => '''
+<tr>
+  <td><code>${escapeHtml(entry.runId)}</code></td>
+  <td>${escapeHtml(entry.workflowName)}</td>
+  <td class="muted">${escapeHtml(entry.lastStep ?? '—')}</td>
+  <td>${formatInt(entry.queued)}</td>
+  <td>${formatInt(entry.running)}</td>
+  <td>${formatInt(entry.succeeded)}</td>
+  <td>${formatInt(entry.failed)}</td>
+  <td>${formatInt(entry.cancelled)}</td>
+  <td class="muted">${formatRelative(entry.lastUpdated)}</td>
+  <td>
+    <div class="action-bar">
+      <a class="ghost-button" href="/tasks/detail?runId=${Uri.encodeQueryComponent(entry.runId)}" data-turbo-frame="dashboard-content">Run Detail</a>
+      <a class="ghost-button" href="/tasks?runId=${Uri.encodeQueryComponent(entry.runId)}" data-turbo-frame="dashboard-content">Tasks</a>
+      <a class="ghost-button" href="/search?scope=tasks&q=${Uri.encodeQueryComponent(entry.runId)}" data-turbo-frame="dashboard-content">Search</a>
+    </div>
+  </td>
+</tr>
+''').join()}
+    </tbody>
+  </table>
+</section>
+''';
+}
diff --git a/packages/dashboard/tailwind.config.js b/packages/dashboard/tailwind.config.js
new file mode 100644
index 0000000..1a3f088
--- /dev/null
+++ b/packages/dashboard/tailwind.config.js
@@ -0,0 +1,24 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './lib/src/ui/**/*.dart',
+    './lib/src/server.dart',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        stem: {
+          950: '#0f172a',
+          900: '#111827',
+          800: '#1e293b',
+          500: '#38bdf8',
+          400: '#7dd3fc',
+        },
+      },
+      fontFamily: {
+        sans: ['Manrope', 'system-ui', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+};
diff --git a/packages/dashboard/test/dashboard_browser_test.dart b/packages/dashboard/test/dashboard_browser_test.dart
index 9c31533..a073ba2 100644
--- a/packages/dashboard/test/dashboard_browser_test.dart
+++ b/packages/dashboard/test/dashboard_browser_test.dart
@@ -6,7 +6,8 @@ import 'package:server_testing/src/browser/bootstrap/driver/driver_manager.dart'
     as driver_manager;
 import 'package:server_testing/src/browser/interfaces/browser_type.dart'
     show BrowserLaunchOptions;
-import 'package:stem/stem.dart' show DeadLetterEntry, DeadLetterReplayResult;
+import 'package:stem/stem.dart'
+    show DeadLetterEntry, DeadLetterReplayResult, TaskState;
 import 'package:stem_dashboard/src/server.dart';
 import 'package:stem_dashboard/src/services/models.dart';
 import 'package:stem_dashboard/src/services/stem_service.dart';
@@ -17,16 +18,23 @@ class _FakeDashboardService implements DashboardDataSource {
   _FakeDashboardService({
     required List<QueueSummary> queues,
     required List<WorkerStatus> workers,
+    List<DashboardTaskStatusEntry> taskStatuses = const [],
   }) : _queues = queues,
-       _workers = workers;
+       _workers = workers,
+       _taskStatuses = taskStatuses;
 
   List<QueueSummary> _queues;
   List<WorkerStatus> _workers;
+  List<DashboardTaskStatusEntry> _taskStatuses;
   EnqueueRequest? lastEnqueue;
   final List<ControlCommandMessage> controlCommands = [];
   String? lastReplayQueue;
   int? lastReplayLimit;
   bool? lastReplayDryRun;
+  String? lastReplayTaskId;
+  String? lastRevokeTaskId;
+  bool replayTaskSuccess = true;
+  bool revokeTaskSuccess = true;
   DeadLetterReplayResult replayResult = const DeadLetterReplayResult(
     entries: <DeadLetterEntry>[],
     dryRun: false,
@@ -43,6 +51,11 @@ class _FakeDashboardService implements DashboardDataSource {
     _workers = List.unmodifiable(values);
   }
 
+  List<DashboardTaskStatusEntry> get taskStatuses => _taskStatuses;
+  set taskStatuses(List<DashboardTaskStatusEntry> values) {
+    _taskStatuses = List.unmodifiable(values);
+  }
+
   @override
   Future<List<QueueSummary>> fetchQueueSummaries() async =>
       List<QueueSummary>.from(_queues);
@@ -51,6 +64,51 @@ class _FakeDashboardService implements DashboardDataSource {
   Future<List<WorkerStatus>> fetchWorkerStatuses() async =>
       List<WorkerStatus>.from(_workers);
 
+  @override
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatuses({
+    TaskState? state,
+    String? queue,
+    int limit = 100,
+    int offset = 0,
+  }) async {
+    final matches = _taskStatuses.where((entry) {
+      if (state != null && entry.state != state) return false;
+      if (queue != null && queue.isNotEmpty && entry.queue != queue) {
+        return false;
+      }
+      return true;
+    });
+    return matches.skip(offset).take(limit).toList(growable: false);
+  }
+
+  @override
+  Future<DashboardTaskStatusEntry?> fetchTaskStatus(String taskId) async {
+    for (final entry in _taskStatuses) {
+      if (entry.id == taskId) {
+        return entry;
+      }
+    }
+    return null;
+  }
+
+  @override
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatusesForRun(
+    String runId, {
+    int limit = 200,
+  }) async {
+    final matches = _taskStatuses.where((entry) => entry.runId == runId);
+    return matches.take(limit).toList(growable: false);
+  }
+
+  @override
+  Future<DashboardWorkflowRunSnapshot?> fetchWorkflowRun(String runId) async =>
+      null;
+
+  @override
+  Future<List<DashboardWorkflowStepSnapshot>> fetchWorkflowSteps(
+    String runId,
+  ) async => const [];
+
   @override
   Future<void> enqueueTask(EnqueueRequest request) async {
     lastEnqueue = request;
@@ -68,6 +126,25 @@ class _FakeDashboardService implements DashboardDataSource {
     return replayResult;
   }
 
+  @override
+  Future<bool> replayTaskById(String taskId, {String? queue}) async {
+    lastReplayTaskId = taskId;
+    if (queue != null && queue.isNotEmpty) {
+      lastReplayQueue = queue;
+    }
+    return replayTaskSuccess;
+  }
+
+  @override
+  Future<bool> revokeTask(
+    String taskId, {
+    bool terminate = false,
+    String? reason,
+  }) async {
+    lastRevokeTaskId = taskId;
+    return revokeTaskSuccess;
+  }
+
   @override
   Future<List<ControlReplyMessage>> sendControlCommand(
     ControlCommandMessage command, {
@@ -86,6 +163,10 @@ class _FakeDashboardService implements DashboardDataSource {
     lastReplayQueue = null;
     lastReplayLimit = null;
     lastReplayDryRun = null;
+    lastReplayTaskId = null;
+    lastRevokeTaskId = null;
+    replayTaskSuccess = true;
+    revokeTaskSuccess = true;
     replayResult = const DeadLetterReplayResult(
       entries: <DeadLetterEntry>[],
       dryRun: false,
@@ -283,4 +364,14 @@ return fetch('/queues/replay', {
     expect(service.lastReplayLimit, 5);
     expect(service.lastReplayDryRun, isFalse);
   });
+
+  _dashboardBrowserTest('search page renders saved views and query results', (
+    browser,
+  ) async {
+    await browser.visit('/search?q=default&scope=all');
+    await browser.waiter.waitFor('.table-card');
+    await browser.assertSee('Search');
+    await browser.assertSee('Saved Views');
+    await browser.assertSee('Backlog hotspots');
+  });
 }
diff --git a/packages/dashboard/test/dashboard_state_property_test.dart b/packages/dashboard/test/dashboard_state_property_test.dart
index e537d2a..405079c 100644
--- a/packages/dashboard/test/dashboard_state_property_test.dart
+++ b/packages/dashboard/test/dashboard_state_property_test.dart
@@ -1,5 +1,6 @@
 import 'package:property_testing/property_testing.dart';
-import 'package:stem/stem.dart' show DeadLetterEntry, DeadLetterReplayResult;
+import 'package:stem/stem.dart'
+    show DeadLetterEntry, DeadLetterReplayResult, TaskState;
 import 'package:stem_dashboard/src/services/models.dart';
 import 'package:stem_dashboard/src/services/stem_service.dart';
 import 'package:stem_dashboard/src/state/dashboard_state.dart';
@@ -76,6 +77,33 @@ class _SequenceDashboardService implements DashboardDataSource {
     return _workerSnapshots[_workerIndex++];
   }
 
+  @override
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatuses({
+    TaskState? state,
+    String? queue,
+    int limit = 100,
+    int offset = 0,
+  }) async => const [];
+
+  @override
+  Future<DashboardTaskStatusEntry?> fetchTaskStatus(String taskId) async =>
+      null;
+
+  @override
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatusesForRun(
+    String runId, {
+    int limit = 200,
+  }) async => const [];
+
+  @override
+  Future<DashboardWorkflowRunSnapshot?> fetchWorkflowRun(String runId) async =>
+      null;
+
+  @override
+  Future<List<DashboardWorkflowStepSnapshot>> fetchWorkflowSteps(
+    String runId,
+  ) async => const [];
+
   @override
   Future<void> enqueueTask(EnqueueRequest request) async {}
 
@@ -87,6 +115,16 @@ class _SequenceDashboardService implements DashboardDataSource {
   }) async =>
       const DeadLetterReplayResult(entries: <DeadLetterEntry>[], dryRun: false);
 
+  @override
+  Future<bool> replayTaskById(String taskId, {String? queue}) async => false;
+
+  @override
+  Future<bool> revokeTask(
+    String taskId, {
+    bool terminate = false,
+    String? reason,
+  }) async => false;
+
   @override
   Future<List<ControlReplyMessage>> sendControlCommand(
     ControlCommandMessage command, {
diff --git a/packages/dashboard/test/server_test.dart b/packages/dashboard/test/server_test.dart
index 165126c..a0f1345 100644
--- a/packages/dashboard/test/server_test.dart
+++ b/packages/dashboard/test/server_test.dart
@@ -1,7 +1,7 @@
 import 'package:routed_testing/routed_testing.dart';
 import 'package:server_testing/server_testing.dart';
 import 'package:stem/stem.dart'
-    show DeadLetterEntry, DeadLetterReplayResult, Envelope;
+    show DeadLetterEntry, DeadLetterReplayResult, Envelope, TaskState;
 import 'package:stem_dashboard/src/server.dart';
 import 'package:stem_dashboard/src/services/models.dart';
 import 'package:stem_dashboard/src/services/stem_service.dart';
@@ -9,10 +9,15 @@ import 'package:stem_dashboard/src/state/dashboard_state.dart';
 import 'package:stem_dashboard/src/stem/control_messages.dart';
 
 class _RecordingService implements DashboardDataSource {
-  _RecordingService({this.queues = const [], this.workers = const []});
+  _RecordingService({
+    this.queues = const [],
+    this.workers = const [],
+    this.taskStatuses = const [],
+  });
 
   final List<QueueSummary> queues;
   final List<WorkerStatus> workers;
+  final List<DashboardTaskStatusEntry> taskStatuses;
 
   EnqueueRequest? lastEnqueue;
   final List<ControlCommandMessage> controlCommands = [];
@@ -20,6 +25,12 @@ class _RecordingService implements DashboardDataSource {
   String? lastReplayQueue;
   int? lastReplayLimit;
   bool? lastReplayDryRun;
+  String? lastReplayTaskId;
+  String? lastRevokeTaskId;
+  bool? lastRevokeTerminate;
+  String? lastRevokeReason;
+  bool replayTaskSuccess = true;
+  bool revokeTaskSuccess = true;
   DeadLetterReplayResult replayResult = const DeadLetterReplayResult(
     entries: <DeadLetterEntry>[],
     dryRun: false,
@@ -31,6 +42,61 @@ class _RecordingService implements DashboardDataSource {
   @override
   Future<List<WorkerStatus>> fetchWorkerStatuses() async => workers;
 
+  @override
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatuses({
+    TaskState? state,
+    String? queue,
+    int limit = 100,
+    int offset = 0,
+  }) async {
+    final filtered = taskStatuses
+        .where((entry) {
+          if (state != null && entry.state != state) {
+            return false;
+          }
+          if (queue != null &&
+              queue.trim().isNotEmpty &&
+              entry.queue != queue) {
+            return false;
+          }
+          return true;
+        })
+        .skip(offset)
+        .take(limit);
+    return filtered.toList(growable: false);
+  }
+
+  @override
+  Future<DashboardTaskStatusEntry?> fetchTaskStatus(String taskId) async {
+    for (final entry in taskStatuses) {
+      if (entry.id == taskId) {
+        return entry;
+      }
+    }
+    return null;
+  }
+
+  @override
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatusesForRun(
+    String runId, {
+    int limit = 200,
+  }) async {
+    final filtered = taskStatuses
+        .where((entry) => entry.runId == runId)
+        .take(limit)
+        .toList(growable: false);
+    return filtered;
+  }
+
+  @override
+  Future<DashboardWorkflowRunSnapshot?> fetchWorkflowRun(String runId) async =>
+      null;
+
+  @override
+  Future<List<DashboardWorkflowStepSnapshot>> fetchWorkflowSteps(
+    String runId,
+  ) async => const [];
+
   @override
   Future<void> enqueueTask(EnqueueRequest request) async {
     lastEnqueue = request;
@@ -48,6 +114,27 @@ class _RecordingService implements DashboardDataSource {
     return replayResult;
   }
 
+  @override
+  Future<bool> replayTaskById(String taskId, {String? queue}) async {
+    lastReplayTaskId = taskId;
+    if (queue != null && queue.isNotEmpty) {
+      lastReplayQueue = queue;
+    }
+    return replayTaskSuccess;
+  }
+
+  @override
+  Future<bool> revokeTask(
+    String taskId, {
+    bool terminate = false,
+    String? reason,
+  }) async {
+    lastRevokeTaskId = taskId;
+    lastRevokeTerminate = terminate;
+    lastRevokeReason = reason;
+    return revokeTaskSuccess;
+  }
+
   @override
   Future<List<ControlReplyMessage>> sendControlCommand(
     ControlCommandMessage command, {
@@ -63,10 +150,15 @@ class _RecordingService implements DashboardDataSource {
 
 Future<TestClient> _buildClient(
   _RecordingService service,
-  DashboardState state,
-) async {
+  DashboardState state, {
+  String basePath = '',
+}) async {
   await state.runOnce();
-  final engine = buildDashboardEngine(service: service, state: state);
+  final engine = buildDashboardEngine(
+    service: service,
+    state: state,
+    basePath: basePath,
+  );
   final handler = RoutedRequestHandler(engine, true);
   addTearDown(() async {
     await handler.close();
@@ -100,6 +192,58 @@ void main() {
       ..assertBodyContains('critical');
   });
 
+  test('GET /partials/overview renders turbo stream section updates', () async {
+    final service = _RecordingService(
+      queues: const [
+        QueueSummary(queue: 'default', pending: 2, inflight: 1, deadLetters: 0),
+      ],
+      workers: [
+        WorkerStatus(
+          workerId: 'worker-1',
+          namespace: 'stem',
+          timestamp: DateTime.utc(2026),
+          inflight: 1,
+          isolateCount: 2,
+          queues: const <WorkerQueueInfo>[],
+        ),
+      ],
+      taskStatuses: [
+        DashboardTaskStatusEntry(
+          id: 'task-1',
+          state: TaskState.running,
+          attempt: 0,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, 1),
+          queue: 'default',
+          taskName: 'demo.run',
+        ),
+      ],
+    );
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state);
+
+    final response = await client.get(
+      '/partials/overview',
+      headers: {
+        'accept': ['text/vnd.turbo-stream.html'],
+      },
+    );
+    response
+      ..assertStatus(200)
+      ..assertBodyContains(
+        '<turbo-stream action="replace" target="overview-metrics"',
+      )
+      ..assertBodyContains(
+        '<turbo-stream action="replace" target="overview-queue-table"',
+      )
+      ..assertBodyContains(
+        '<turbo-stream action="replace" target="overview-latency-table"',
+      )
+      ..assertBodyContains(
+        '<turbo-stream action="replace" target="overview-recent-tasks"',
+      );
+  });
+
   test('GET /tasks?flash=queued shows success banner', () async {
     final service = _RecordingService(
       queues: const [
@@ -116,6 +260,440 @@ void main() {
       ..assertBodyContains('Tracked queues');
   });
 
+  test('GET /tasks renders recent task statuses', () async {
+    final service = _RecordingService(
+      queues: const [
+        QueueSummary(queue: 'alpha', pending: 2, inflight: 1, deadLetters: 0),
+      ],
+      taskStatuses: [
+        DashboardTaskStatusEntry(
+          id: 'task-1',
+          state: TaskState.failed,
+          attempt: 2,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, 1),
+          queue: 'alpha',
+          taskName: 'demo.fail',
+          errorMessage: 'boom',
+        ),
+      ],
+    );
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state);
+
+    final response = await client.get('/tasks?state=failed');
+    response
+      ..assertStatus(200)
+      ..assertBodyContains('Recent statuses with terminal failures.')
+      ..assertBodyContains('task-1')
+      ..assertBodyContains('data-task-row="task-1"')
+      ..assertBodyContains('Open full detail')
+      ..assertBodyContains('demo.fail')
+      ..assertBodyContains('Failed')
+      ..assertBodyContains('boom');
+  });
+
+  test(
+    'GET /tasks paginates task status results via page and pageSize',
+    () async {
+      final statuses = List<DashboardTaskStatusEntry>.generate(55, (index) {
+        final position = index + 1;
+        return DashboardTaskStatusEntry(
+          id: 'task-$position',
+          state: TaskState.succeeded,
+          attempt: 0,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, position),
+          queue: 'alpha',
+          taskName: 'demo.task.$position',
+        );
+      });
+      final service = _RecordingService(
+        queues: const [
+          QueueSummary(queue: 'alpha', pending: 0, inflight: 0, deadLetters: 0),
+        ],
+        taskStatuses: statuses,
+      );
+      final state = DashboardState(service: service);
+      final client = await _buildClient(service, state);
+
+      final response = await client.get('/tasks?page=2&pageSize=25');
+      response
+        ..assertStatus(200)
+        ..assertBodyContains('Page 2')
+        ..assertBodyContains('task-26')
+        ..assertBodyContains('Previous')
+        ..assertBodyContains('Next');
+    },
+  );
+
+  test('GET /tasks applies namespace/task/run filters', () async {
+    final service = _RecordingService(
+      queues: const [
+        QueueSummary(queue: 'alpha', pending: 0, inflight: 0, deadLetters: 0),
+      ],
+      taskStatuses: [
+        DashboardTaskStatusEntry(
+          id: 'task-a',
+          state: TaskState.running,
+          attempt: 0,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, 1),
+          queue: 'alpha',
+          taskName: 'greeting.send',
+          runId: 'run-1',
+          meta: const {'namespace': 'stem'},
+        ),
+        DashboardTaskStatusEntry(
+          id: 'task-b',
+          state: TaskState.running,
+          attempt: 0,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, 2),
+          queue: 'alpha',
+          taskName: 'greeting.send',
+          runId: 'run-2',
+          meta: const {'namespace': 'tenant-a'},
+        ),
+      ],
+    );
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state);
+
+    final response = await client.get(
+      '/tasks?namespace=tenant-a&task=greeting&runId=run-2',
+    );
+    response
+      ..assertStatus(200)
+      ..assertBodyContains('task-b');
+    expect(response.body, isNot(contains('task-a')));
+  });
+
+  test('GET /namespaces renders namespace rollup table', () async {
+    final service = _RecordingService(
+      queues: const [
+        QueueSummary(queue: 'alpha', pending: 2, inflight: 1, deadLetters: 0),
+      ],
+      workers: [
+        WorkerStatus(
+          workerId: 'worker-1',
+          namespace: 'stem',
+          timestamp: DateTime.utc(2026),
+          isolateCount: 2,
+          inflight: 1,
+          queues: const [WorkerQueueInfo(name: 'alpha', inflight: 1)],
+        ),
+      ],
+      taskStatuses: [
+        DashboardTaskStatusEntry(
+          id: 'task-ns-1',
+          state: TaskState.running,
+          attempt: 0,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, 1),
+          queue: 'alpha',
+          taskName: 'demo.task',
+          meta: const {'namespace': 'stem'},
+        ),
+      ],
+    );
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state);
+
+    final response = await client.get('/namespaces');
+    response
+      ..assertStatus(200)
+      ..assertBodyContains('Namespaces')
+      ..assertBodyContains('Namespace Summary')
+      ..assertBodyContains('stem');
+  });
+
+  test('GET /workflows renders workflow run summaries', () async {
+    final service = _RecordingService(
+      taskStatuses: [
+        DashboardTaskStatusEntry(
+          id: 'task-wf-1',
+          state: TaskState.running,
+          attempt: 0,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, 1),
+          queue: 'alpha',
+          taskName: 'workflow.step',
+          runId: 'run-xyz',
+          workflowName: 'greetingFlow',
+          workflowStep: 'stepA',
+        ),
+      ],
+    );
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state);
+
+    final response = await client.get('/workflows');
+    response
+      ..assertStatus(200)
+      ..assertBodyContains('Workflow Runs')
+      ..assertBodyContains('run-xyz')
+      ..assertBodyContains('greetingFlow');
+  });
+
+  test('GET /jobs renders job family summary', () async {
+    final service = _RecordingService(
+      taskStatuses: [
+        DashboardTaskStatusEntry(
+          id: 'task-job-1',
+          state: TaskState.failed,
+          attempt: 1,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, 1),
+          queue: 'alpha',
+          taskName: 'greeting.send',
+          errorMessage: 'boom',
+        ),
+      ],
+    );
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state);
+
+    final response = await client.get('/jobs');
+    response
+      ..assertStatus(200)
+      ..assertBodyContains('Job Summary')
+      ..assertBodyContains('greeting.send');
+  });
+
+  test('GET /tasks/inline renders lazy task panel as turbo stream', () async {
+    final service = _RecordingService(
+      taskStatuses: [
+        DashboardTaskStatusEntry(
+          id: 'task-inline-1',
+          state: TaskState.failed,
+          attempt: 1,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, 1),
+          queue: 'alpha',
+          taskName: 'demo.inline',
+          errorMessage: 'boom',
+          meta: const {'stem.task': 'demo.inline'},
+        ),
+      ],
+    );
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state);
+
+    final response = await client.get(
+      '/tasks/inline?id=task-inline-1&target=task-inline-task-inline-1',
+      headers: {
+        'accept': ['text/vnd.turbo-stream.html'],
+      },
+    );
+    response
+      ..assertStatus(200)
+      ..assertBodyContains('<turbo-stream action="replace"')
+      ..assertBodyContains('target="task-inline-task-inline-1"')
+      ..assertBodyContains('demo.inline');
+  });
+
+  test('GET /search renders query results and saved views', () async {
+    final service = _RecordingService(
+      queues: const [
+        QueueSummary(
+          queue: 'critical',
+          pending: 4,
+          inflight: 1,
+          deadLetters: 2,
+        ),
+      ],
+      workers: [
+        WorkerStatus(
+          workerId: 'worker-a',
+          namespace: 'stem',
+          timestamp: DateTime.now().toUtc(),
+          isolateCount: 2,
+          inflight: 1,
+          queues: const [WorkerQueueInfo(name: 'critical', inflight: 1)],
+        ),
+      ],
+      taskStatuses: [
+        DashboardTaskStatusEntry(
+          id: 'task-abc',
+          state: TaskState.failed,
+          attempt: 1,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, 1),
+          queue: 'critical',
+          taskName: 'demo.fail',
+          errorMessage: 'boom',
+        ),
+      ],
+    );
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state);
+
+    final response = await client.get('/search?q=critical&scope=all');
+    response
+      ..assertStatus(200)
+      ..assertBodyContains('Search')
+      ..assertBodyContains('Saved Views')
+      ..assertBodyContains('task-abc')
+      ..assertBodyContains('worker-a');
+  });
+
+  test('GET /audit renders operator/audit entries', () async {
+    final service = _RecordingService();
+    final state = DashboardState(service: service)
+      ..recordAudit(
+        kind: 'action',
+        action: 'task.replay',
+        status: 'ok',
+        actor: 'dashboard',
+        summary: 'Replayed task-1',
+      );
+    final client = await _buildClient(service, state);
+
+    final response = await client.get('/audit');
+    response
+      ..assertStatus(200)
+      ..assertBodyContains('Audit Log')
+      ..assertBodyContains('task.replay')
+      ..assertBodyContains('Replayed task-1');
+  });
+
+  test('mount path prefixes routes, links, and redirects', () async {
+    final service = _RecordingService();
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state, basePath: '/dashboard');
+
+    final page = await client.get('/dashboard');
+    page
+      ..assertStatus(200)
+      ..assertBodyContains('href="/dashboard/tasks"')
+      ..assertBodyContains(
+        '/dashboard/dash/streams?topic=stem-dashboard:events',
+      );
+
+    final enqueue = await client.post(
+      '/dashboard/tasks/enqueue',
+      'queue=alpha&task=demo.task',
+      headers: {
+        'content-type': ['application/x-www-form-urlencoded'],
+      },
+    );
+
+    enqueue
+      ..assertStatus(303)
+      ..assertHeader('location', '/dashboard/tasks?flash=queued');
+  });
+
+  test('POST /tasks/action cancel delegates revoke request', () async {
+    final service = _RecordingService();
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state);
+
+    final response = await client.post(
+      '/tasks/action',
+      'action=cancel&taskId=task-1&queue=default&reason=manual',
+      headers: {
+        'content-type': ['application/x-www-form-urlencoded'],
+      },
+    );
+
+    response.assertStatus(303);
+    expect(service.lastRevokeTaskId, 'task-1');
+    expect(service.lastRevokeTerminate, isFalse);
+    expect(service.lastRevokeReason, 'manual');
+  });
+
+  test(
+    'POST /tasks/action replay delegates dead-letter replay by id',
+    () async {
+      final service = _RecordingService();
+      final state = DashboardState(service: service);
+      final client = await _buildClient(service, state);
+
+      final response = await client.post(
+        '/tasks/action',
+        'action=replay&taskId=task-1&queue=critical',
+        headers: {
+          'content-type': ['application/x-www-form-urlencoded'],
+        },
+      );
+
+      response.assertStatus(303);
+      expect(service.lastReplayTaskId, 'task-1');
+      expect(service.lastReplayQueue, 'critical');
+    },
+  );
+
+  test('GET /tasks/detail renders task detail and workflow timeline', () async {
+    final service = _RecordingService(
+      taskStatuses: [
+        DashboardTaskStatusEntry(
+          id: 'task-1',
+          state: TaskState.failed,
+          attempt: 2,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, 1),
+          queue: 'alpha',
+          taskName: 'demo.fail',
+          errorMessage: 'boom',
+          runId: 'run-1',
+          workflowName: 'wf.demo',
+          workflowStep: 'stepA',
+        ),
+        DashboardTaskStatusEntry(
+          id: 'task-2',
+          state: TaskState.running,
+          attempt: 1,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026, 1, 1, 0, 2),
+          queue: 'alpha',
+          taskName: 'demo.next',
+          runId: 'run-1',
+          workflowName: 'wf.demo',
+          workflowStep: 'stepB',
+        ),
+      ],
+    );
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state);
+
+    final response = await client.get('/tasks/detail?id=task-1');
+    response
+      ..assertStatus(200)
+      ..assertBodyContains('Task Detail')
+      ..assertBodyContains('task-1')
+      ..assertBodyContains('wf.demo')
+      ..assertBodyContains('stepA')
+      ..assertBodyContains('task-2');
+  });
+
+  test('GET /failures renders grouped diagnostics', () async {
+    final service = _RecordingService(
+      taskStatuses: [
+        DashboardTaskStatusEntry(
+          id: 'f-1',
+          state: TaskState.failed,
+          attempt: 1,
+          createdAt: DateTime.utc(2026),
+          updatedAt: DateTime.utc(2026),
+          queue: 'critical',
+          taskName: 'demo.fail',
+          errorType: 'StateError',
+          errorMessage: 'boom',
+        ),
+      ],
+    );
+    final state = DashboardState(service: service);
+    final client = await _buildClient(service, state);
+
+    final response = await client.get('/failures');
+    response
+      ..assertStatus(200)
+      ..assertBodyContains('Failure Diagnostics')
+      ..assertBodyContains('critical')
+      ..assertBodyContains('Replay DLQ');
+  });
+
   test('POST /tasks/enqueue delegates to DashboardDataSource', () async {
     final service = _RecordingService();
     final state = DashboardState(service: service);
diff --git a/packages/dashboard/test/services/sqlite_dashboard_service_test.dart b/packages/dashboard/test/services/sqlite_dashboard_service_test.dart
index 3b2685e..1c3ed81 100644
--- a/packages/dashboard/test/services/sqlite_dashboard_service_test.dart
+++ b/packages/dashboard/test/services/sqlite_dashboard_service_test.dart
@@ -105,4 +105,68 @@ void main() {
     expect(workers, hasLength(1));
     expect(workers.first.workerId, 'worker-sqlite');
   });
+
+  test('fetchTaskStatuses returns recent records with filters', () async {
+    await backend.set(
+      'task-ok',
+      TaskState.succeeded,
+      attempt: 1,
+      payload: const {'ok': true},
+      meta: const {
+        'queue': 'default',
+        'task': 'demo.ok',
+        'stem.workflow.runId': 'run-1',
+      },
+    );
+    await backend.set(
+      'task-stem-meta',
+      TaskState.running,
+      meta: const {
+        'stem.queue': 'stem-only',
+        'stem.task': 'demo.stem.meta',
+        'stem.workflow.runId': 'run-1',
+      },
+    );
+    await backend.set(
+      'task-failed',
+      TaskState.failed,
+      attempt: 2,
+      error: const TaskError(type: 'StateError', message: 'boom'),
+      meta: const {
+        'queue': 'critical',
+        'task': 'demo.fail',
+        'stem.workflow.runId': 'run-1',
+      },
+    );
+
+    final all = await service.fetchTaskStatuses(limit: 10);
+    expect(all.length, greaterThanOrEqualTo(2));
+    final failed = all.firstWhere((entry) => entry.id == 'task-failed');
+    expect(failed.queue, 'critical');
+    expect(failed.taskName, 'demo.fail');
+    expect(failed.state, TaskState.failed);
+    expect(failed.errorMessage, 'boom');
+
+    final stemMeta = all.firstWhere((entry) => entry.id == 'task-stem-meta');
+    expect(stemMeta.queue, 'stem-only');
+    expect(stemMeta.taskName, 'demo.stem.meta');
+    expect(stemMeta.state, TaskState.running);
+
+    final failedOnly = await service.fetchTaskStatuses(state: TaskState.failed);
+    expect(failedOnly, hasLength(1));
+    expect(failedOnly.first.id, 'task-failed');
+
+    final queueOnly = await service.fetchTaskStatuses(queue: 'default');
+    expect(queueOnly, hasLength(1));
+    expect(queueOnly.first.id, 'task-ok');
+
+    final detail = await service.fetchTaskStatus('task-failed');
+    expect(detail, isNotNull);
+    expect(detail!.errorType, 'StateError');
+    expect(detail.errorMessage, 'boom');
+    expect(detail.runId, 'run-1');
+
+    final runStatuses = await service.fetchTaskStatusesForRun('run-1');
+    expect(runStatuses.length, 3);
+  });
 }
diff --git a/packages/dashboard/web/tailwind.input.css b/packages/dashboard/web/tailwind.input.css
new file mode 100644
index 0000000..391add3
--- /dev/null
+++ b/packages/dashboard/web/tailwind.input.css
@@ -0,0 +1,450 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+    @layer base {
+      *,
+      *::before,
+      *::after {
+        @apply box-border;
+      }
+
+      html {
+        color-scheme: dark;
+      }
+
+      body {
+        @apply m-0 bg-stem-950 font-sans text-slate-200 antialiased;
+      }
+
+      a {
+        @apply text-inherit no-underline;
+      }
+
+      h1 {
+        @apply m-0 text-3xl font-semibold tracking-tight;
+      }
+
+      table {
+        @apply w-full border-collapse;
+      }
+
+      thead {
+        @apply bg-slate-800/85 text-xs uppercase tracking-widest text-slate-400;
+      }
+
+      th,
+      td {
+        @apply px-4 py-3.5 text-left align-top;
+      }
+
+      tbody tr {
+        @apply border-b border-slate-400/10 transition-colors duration-150;
+      }
+
+      tbody tr:last-child {
+        @apply border-b-0;
+      }
+
+      tbody tr:hover {
+        @apply bg-blue-900/25;
+      }
+
+      turbo-frame#dashboard-content {
+        @apply block flex-1;
+      }
+    }
+
+    @layer components {
+      .app-shell {
+        @apply relative flex min-h-screen gap-4 p-3 lg:gap-6 lg:p-6;
+      }
+
+      .app-shell::before {
+        content: '';
+        @apply pointer-events-none fixed inset-0;
+        background:
+          radial-gradient(900px 420px at 12% -8%, rgba(56, 189, 248, 0.18), transparent 70%),
+          radial-gradient(760px 380px at 102% 18%, rgba(14, 116, 144, 0.16), transparent 64%),
+          linear-gradient(180deg, #0b1220 0%, #0f172a 48%, #0c1324 100%);
+      }
+
+      .app-shell > * {
+        @apply relative z-10;
+      }
+
+      .sidebar-backdrop {
+        @apply pointer-events-none fixed inset-0 z-30 bg-stem-950/70 opacity-0 backdrop-blur-sm transition duration-200 lg:hidden;
+      }
+
+      .sidebar-backdrop[data-open='true'] {
+        @apply pointer-events-auto opacity-100;
+      }
+
+      .sidebar {
+        @apply fixed inset-y-3 left-3 z-40 flex -translate-x-full flex-col gap-6 rounded-3xl border border-sky-200/20 bg-gradient-to-b from-slate-900/95 via-blue-950/90 to-cyan-900/80 px-4 py-5 shadow-2xl shadow-sky-950/40 transition duration-300 lg:sticky lg:top-6 lg:w-72 lg:translate-x-0;
+        width: min(18rem, calc(100vw - 1.5rem));
+        height: calc(100vh - 1.5rem);
+      }
+
+      .sidebar[data-open='true'] {
+        @apply translate-x-0;
+      }
+
+      .sidebar-head {
+        @apply flex items-center justify-between gap-3;
+      }
+
+      .sidebar-close {
+        @apply inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-300/20 bg-slate-900/60 text-slate-300 transition hover:border-sky-300/45 hover:text-sky-200 lg:hidden;
+      }
+
+      .brand-panel {
+        @apply rounded-2xl border border-sky-300/25 bg-sky-400/10 px-3.5 py-3;
+      }
+
+      .brand {
+        @apply text-sm font-semibold uppercase tracking-widest text-sky-200;
+      }
+
+      .brand-tagline {
+        @apply mt-1 text-xs text-slate-400;
+      }
+
+      .sidebar-status {
+        @apply mt-4 flex items-center gap-2 text-xs uppercase tracking-wider text-emerald-200;
+      }
+
+      .status-dot {
+        @apply h-2.5 w-2.5 rounded-full bg-emerald-300 ring-4 ring-emerald-300/20;
+      }
+
+      nav {
+        @apply flex flex-col gap-2 rounded-2xl border border-slate-300/15 bg-slate-900/40 p-2;
+      }
+
+      .nav-link {
+        @apply flex items-center gap-3 rounded-xl px-3.5 py-2.5 font-medium text-slate-300/80 transition duration-150;
+      }
+
+      .nav-link::before {
+        content: '';
+        @apply h-2 w-2 rounded-full bg-slate-400/30 transition duration-150;
+      }
+
+      .nav-link:hover {
+        @apply translate-x-0.5 bg-sky-300/10 text-slate-100;
+      }
+
+      .nav-link.active {
+        @apply bg-gradient-to-r from-sky-300/25 to-cyan-300/20 text-slate-50;
+      }
+
+      .nav-link.active::before {
+        @apply bg-sky-300;
+      }
+
+      .sidebar-footer {
+        @apply mt-auto rounded-2xl border border-slate-300/15 bg-slate-900/45 px-3.5 py-3 text-xs leading-relaxed text-slate-300/70;
+      }
+
+      .main {
+        @apply relative flex flex-1 flex-col rounded-3xl border border-slate-400/15 bg-slate-900/70 p-4 shadow-2xl backdrop-blur xl:p-6;
+      }
+
+      .top-panel {
+        @apply mb-5 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-sky-300/20 bg-gradient-to-r from-slate-900/85 via-slate-900/70 to-cyan-950/60 px-4 py-4;
+      }
+
+      .top-panel-left {
+        @apply flex min-w-0 items-center gap-3;
+      }
+
+      .sidebar-toggle {
+        @apply inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-300/20 bg-slate-900/60 text-slate-200 transition hover:border-sky-300/45 hover:text-sky-200 lg:hidden;
+      }
+
+      .panel-eyebrow {
+        @apply text-xs uppercase tracking-wider text-slate-400;
+      }
+
+      .panel-title {
+        @apply truncate text-xl font-semibold tracking-tight text-slate-100 sm:text-2xl;
+      }
+
+      .top-panel-right {
+        @apply flex flex-wrap items-center gap-2 sm:gap-3;
+      }
+
+      .status-pill {
+        @apply inline-flex items-center gap-2 rounded-full border border-emerald-300/35 bg-emerald-300/10 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-emerald-100;
+      }
+
+      .status-pill-dot {
+        @apply h-2 w-2 rounded-full bg-emerald-300;
+      }
+
+      .quick-link {
+        @apply inline-flex items-center rounded-full border border-sky-300/30 bg-sky-400/12 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-200 transition hover:border-sky-200/50 hover:bg-sky-300/20;
+      }
+
+      .content-shell {
+        @apply flex min-h-0 flex-1;
+      }
+
+      .page-header {
+        @apply mb-7;
+      }
+
+      .page-subtitle {
+        @apply mt-3 text-sm text-slate-400;
+      }
+
+      .cards {
+        @apply mb-8 grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4;
+      }
+
+      .card {
+        @apply rounded-2xl border border-slate-400/15 bg-gradient-to-br from-stem-900/95 to-stem-950/80 p-5 shadow-xl;
+      }
+
+      .card-title {
+        @apply mb-3 text-xs font-semibold uppercase tracking-wide text-slate-400;
+      }
+
+      .card-value {
+        @apply text-3xl font-semibold;
+      }
+
+      .card-caption {
+        @apply mt-2.5 text-sm text-slate-400/90;
+      }
+
+      .table-card {
+        @apply overflow-hidden rounded-2xl border border-slate-400/15 bg-stem-950/85;
+      }
+
+      .filter-form {
+        @apply my-6 flex flex-wrap items-center gap-3;
+      }
+
+      .filter-form input[type="text"],
+      .filter-form select {
+        @apply min-w-40 rounded-xl border border-slate-400/20 bg-slate-800/75 px-3.5 py-2.5 text-slate-100;
+      }
+
+      .filter-form input[type="text"] {
+        @apply min-w-52;
+      }
+
+      .filter-form button,
+      .enqueue-form button {
+        @apply cursor-pointer rounded-xl bg-sky-400 px-4 py-2.5 font-semibold text-stem-950 transition duration-150 hover:bg-sky-300;
+      }
+
+      .filter-label {
+        @apply text-xs uppercase tracking-widest text-slate-400;
+      }
+
+      .clear-filter {
+        @apply text-sm text-sky-300;
+      }
+
+      .sort-link {
+        @apply font-semibold text-slate-400;
+      }
+
+      .sort-link:hover {
+        @apply text-sky-300;
+      }
+
+      .sort-link.active {
+        @apply text-slate-100;
+      }
+
+      .queue-row,
+      .task-row {
+        @apply cursor-pointer;
+      }
+
+      .queue-row:hover {
+        @apply bg-sky-400/10;
+      }
+
+      .queue-detail,
+      .task-detail {
+        @apply hidden bg-stem-950/80;
+      }
+
+      .queue-detail.visible,
+      .task-detail.visible {
+        @apply table-row;
+      }
+
+      .task-detail-cell {
+        @apply p-4;
+      }
+
+      .detail-grid {
+        @apply grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3;
+      }
+
+      .detail-grid div {
+        @apply rounded-xl border border-slate-400/15 bg-slate-800/60 p-3;
+      }
+
+      .meta-list {
+        @apply grid grid-cols-1 gap-2 lg:grid-cols-2;
+      }
+
+      .meta-item {
+        @apply flex min-w-0 flex-col gap-1 rounded-lg border border-slate-400/15 bg-slate-800/60 p-2.5;
+      }
+
+      .payload-block {
+        @apply mt-2.5 whitespace-pre-wrap break-words rounded-lg border border-slate-400/20 bg-slate-950/70 px-3 py-2.5 font-mono text-xs leading-relaxed text-slate-300;
+      }
+
+      .flash {
+        @apply mb-5 rounded-xl px-4 py-3.5 font-semibold;
+      }
+
+      .flash.success {
+        @apply border border-emerald-400/35 bg-emerald-400/15 text-emerald-200;
+      }
+
+      .flash.error {
+        @apply border border-red-400/35 bg-red-400/15 text-red-200;
+      }
+
+      .enqueue-card {
+        @apply rounded-2xl border border-slate-400/15 bg-stem-950/85 p-6;
+      }
+
+      .enqueue-form {
+        @apply flex flex-col gap-4;
+      }
+
+      .form-grid {
+        @apply grid grid-cols-1 gap-4 md:grid-cols-2;
+      }
+
+      .form-grid label {
+        @apply flex flex-col gap-2 text-sm text-slate-400;
+      }
+
+      .form-grid input,
+      .form-grid textarea {
+        @apply rounded-xl border border-slate-400/20 bg-slate-800/75 px-3 py-2.5 text-slate-100;
+      }
+
+      .payload-label textarea {
+        @apply min-h-32 resize-y;
+      }
+
+      .enqueue-form button {
+        @apply self-start px-4 py-3;
+      }
+
+      .muted {
+        @apply text-slate-400;
+      }
+
+      .pill {
+        @apply inline-flex items-center gap-1.5 rounded-full bg-sky-400/15 px-3 py-1.5 text-xs text-sky-300;
+      }
+
+      .pill.success {
+        @apply bg-emerald-400/15 text-emerald-200;
+      }
+
+      .pill.error {
+        @apply bg-red-400/15 text-red-200;
+      }
+
+      .pill.warning {
+        @apply bg-amber-400/20 text-amber-200;
+      }
+
+      .pill.running {
+        @apply bg-blue-400/20 text-blue-200;
+      }
+
+      .pill.muted {
+        @apply bg-slate-400/20 text-slate-300;
+      }
+
+      .event-feed {
+        @apply grid gap-4;
+      }
+
+      .control-panel {
+        @apply mt-7 rounded-2xl border border-slate-400/15 bg-stem-950/80 p-6;
+      }
+
+      .section-heading {
+        @apply mb-4 text-lg font-semibold tracking-tight;
+      }
+
+      .action-bar {
+        @apply flex flex-wrap gap-3;
+      }
+
+      .inline-form {
+        @apply m-0 inline-flex items-center;
+      }
+
+      .ghost-button {
+        @apply cursor-pointer rounded-xl border border-sky-300/30 bg-sky-400/15 px-3.5 py-2 font-semibold text-sky-300 transition duration-150 hover:bg-sky-400/25;
+      }
+
+      .ghost-button.disabled {
+        @apply pointer-events-none cursor-default opacity-45;
+      }
+
+      .pager {
+        @apply flex items-center justify-between gap-3 border-b border-slate-400/10 px-4 py-3.5;
+      }
+
+      .event-item {
+        @apply overflow-hidden rounded-2xl border border-slate-400/15 bg-stem-950/85;
+      }
+
+      .event-item summary {
+        @apply flex cursor-pointer list-none items-center justify-between px-4 py-4 font-semibold text-slate-100;
+      }
+
+      .event-item summary::-webkit-details-marker {
+        display: none;
+      }
+
+      .event-item[open] summary {
+        @apply bg-sky-400/10;
+      }
+
+      .event-title {
+        @apply text-base;
+      }
+
+      .event-time {
+        @apply text-sm text-slate-400;
+      }
+
+      .event-item > *:not(summary) {
+        @apply px-4 pb-4;
+      }
+
+      .event-meta {
+        @apply mt-2.5 flex flex-wrap gap-3 text-sm text-slate-400;
+      }
+
+      .error-preview {
+        @apply inline-block max-w-[30rem] overflow-hidden text-ellipsis whitespace-nowrap align-top;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .sidebar {
+        width: 18rem;
+      }
+    }

From 718963fa4cae9de86612853ab662e92c9675795f Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 10:12:12 -0500
Subject: [PATCH 07/14] feat(stem): add workflow metadata views and
 observability helpers

---
 packages/stem/lib/src/core/contracts.dart     |  67 +++++++++++
 .../stem/lib/src/observability/metrics.dart   |  28 ++---
 .../stem/lib/src/observability/tracing.dart   |   5 +-
 .../stem/lib/src/workflow/core/run_state.dart |  38 ++++++
 .../src/workflow/core/workflow_watcher.dart   |  42 +++++++
 .../stem/test/unit/core/contracts_test.dart   |  39 +++++++
 .../stem/test/unit/worker/worker_test.dart    |  66 +++++++++++
 .../workflow_metadata_views_test.dart         | 110 ++++++++++++++++++
 8 files changed, 373 insertions(+), 22 deletions(-)
 create mode 100644 packages/stem/test/unit/workflow/workflow_metadata_views_test.dart

diff --git a/packages/stem/lib/src/core/contracts.dart b/packages/stem/lib/src/core/contracts.dart
index 38c332d..515cfe5 100644
--- a/packages/stem/lib/src/core/contracts.dart
+++ b/packages/stem/lib/src/core/contracts.dart
@@ -260,6 +260,58 @@ class TaskStatus {
   /// The attempt number for this task execution.
   final int attempt;
 
+  /// Task name extracted from metadata (`task` / `stem.task`).
+  String? get taskName =>
+      meta['task']?.toString() ?? meta['stem.task']?.toString();
+
+  /// Queue name extracted from metadata (`queue` / `stem.queue`).
+  String? get queueName =>
+      meta['queue']?.toString() ?? meta['stem.queue']?.toString();
+
+  /// Namespace extracted from metadata (`namespace` / `stem.namespace`).
+  String? get namespace =>
+      meta['namespace']?.toString() ?? meta['stem.namespace']?.toString();
+
+  /// Worker id that reported this status, if available.
+  String? get workerId => meta['worker']?.toString();
+
+  /// Processing start timestamp recorded by the worker, if present.
+  DateTime? get startedAt => _taskStatusDate(meta['startedAt']);
+
+  /// Completion timestamp recorded by the worker, if present.
+  DateTime? get completedAt => _taskStatusDate(meta['completedAt']);
+
+  /// Failure timestamp recorded by the worker, if present.
+  DateTime? get failedAt => _taskStatusDate(meta['failedAt']);
+
+  /// Revocation timestamp when this task was revoked, if present.
+  DateTime? get revokedAt => _taskStatusDate(meta['revokedAt']);
+
+  /// Revocation reason, when recorded.
+  String? get revokedReason => meta['revokedReason']?.toString();
+
+  /// Actor that requested revocation, when recorded.
+  String? get revokedBy => meta['revokedBy']?.toString();
+
+  /// Whether this status indicates a revoked task.
+  bool get wasRevoked => meta['revoked'] == true || revokedAt != null;
+
+  /// Whether this status indicates a time-limit expiration.
+  bool get isExpired => meta['stem.expired'] == true || meta['expired'] == true;
+
+  /// Hard execution time limit reported by worker metadata, if present.
+  Duration? get hardTimeLimit => _taskStatusDuration(meta['stem.timeLimitMs']);
+
+  /// Soft execution time limit reported by worker metadata, if present.
+  Duration? get softTimeLimit =>
+      _taskStatusDuration(meta['stem.softTimeLimitMs']);
+
+  /// Parent task id in a lineage chain, if present.
+  String? get parentTaskId => meta['stem.parentTaskId']?.toString();
+
+  /// Root task id in a lineage chain, if present.
+  String? get rootTaskId => meta['stem.rootTaskId']?.toString();
+
   /// Serializes this status to JSON.
   Map<String, Object?> toJson() => {
     'id': id,
@@ -271,6 +323,21 @@ class TaskStatus {
   };
 }
 
+DateTime? _taskStatusDate(Object? value) {
+  if (value == null) return null;
+  if (value is DateTime) return value.toUtc();
+  return DateTime.tryParse(value.toString())?.toUtc();
+}
+
+Duration? _taskStatusDuration(Object? value) {
+  if (value is num) {
+    return Duration(milliseconds: value.toInt());
+  }
+  final parsed = int.tryParse(value?.toString() ?? '');
+  if (parsed == null) return null;
+  return Duration(milliseconds: parsed);
+}
+
 /// Immutable record representing a persisted task status with timestamps.
 class TaskStatusRecord {
   /// Creates a task status record.
diff --git a/packages/stem/lib/src/observability/metrics.dart b/packages/stem/lib/src/observability/metrics.dart
index 4b89160..7f5035a 100644
--- a/packages/stem/lib/src/observability/metrics.dart
+++ b/packages/stem/lib/src/observability/metrics.dart
@@ -569,6 +569,12 @@ class _DartasticMetricsRuntime {
   Future<void> _start() async {
     try {
       final grpcEndpoint = _normaliseGrpcEndpoint(endpoint);
+      final traceExporter = dotel.OtlpGrpcSpanExporter(
+        dotel.OtlpGrpcExporterConfig(
+          endpoint: grpcEndpoint.toString(),
+          insecure: grpcEndpoint.scheme != 'https',
+        ),
+      );
       final exporter = dotel.OtlpGrpcMetricExporter(
         dotel.OtlpGrpcMetricExporterConfig(
           endpoint: grpcEndpoint.toString(),
@@ -583,9 +589,9 @@ class _DartasticMetricsRuntime {
         serviceName: serviceName,
         endpoint: grpcEndpoint.toString(),
         secure: grpcEndpoint.scheme == 'https',
+        spanProcessor: dotel.BatchSpanProcessor(traceExporter),
         metricExporter: exporter,
         metricReader: reader,
-        spanProcessor: _NoopSpanProcessor(),
       );
       _meter = dotel.OTel.meterProvider().getMeter(name: 'stem');
       _initialized = true;
@@ -657,26 +663,6 @@ class _DartasticMetricsRuntime {
   }
 }
 
-/// Span processor that drops all tracing data (metrics-only usage).
-class _NoopSpanProcessor extends dotel.SpanProcessor {
-  _NoopSpanProcessor();
-
-  @override
-  Future<void> onStart(dotel.Span span, dotel.Context? parentContext) async {}
-
-  @override
-  Future<void> onEnd(dotel.Span span) async {}
-
-  @override
-  Future<void> onNameUpdate(dotel.Span span, String newName) async {}
-
-  @override
-  Future<void> shutdown() async {}
-
-  @override
-  Future<void> forceFlush() async {}
-}
-
 Uri _normaliseGrpcEndpoint(Uri endpoint) {
   final useHttps = endpoint.scheme == 'https';
   final defaultPort = useHttps ? 443 : 80;
diff --git a/packages/stem/lib/src/observability/tracing.dart b/packages/stem/lib/src/observability/tracing.dart
index 15f3bc5..24a8a51 100644
--- a/packages/stem/lib/src/observability/tracing.dart
+++ b/packages/stem/lib/src/observability/tracing.dart
@@ -117,7 +117,10 @@ class StemTracer {
     if (!_isTelemetryReady) {
       return context ?? _fallbackContext();
     }
-    final baseContext = context ?? dotel.Context.current;
+    // Default to a fresh context when no explicit parent is supplied.
+    // Using ambient context here can accidentally chain unrelated async
+    // deliveries into one long trace when headers are missing traceparent.
+    final baseContext = context ?? _fallbackContext();
     final spanContext = _parseTraceContext(headers);
     if (spanContext == null) return baseContext;
     return baseContext.withSpanContext(spanContext);
diff --git a/packages/stem/lib/src/workflow/core/run_state.dart b/packages/stem/lib/src/workflow/core/run_state.dart
index be17763..fe8fcbf 100644
--- a/packages/stem/lib/src/workflow/core/run_state.dart
+++ b/packages/stem/lib/src/workflow/core/run_state.dart
@@ -111,6 +111,44 @@ class RunState {
       status == WorkflowStatus.failed ||
       status == WorkflowStatus.cancelled;
 
+  /// Whether the run currently carries suspension metadata.
+  bool get isSuspended => suspensionData != null || waitTopic != null;
+
+  /// Suspension type marker (`sleep`, `event`, etc.), when provided.
+  String? get suspensionType => suspensionData?['type']?.toString();
+
+  /// Suspended step name, when provided.
+  String? get suspensionStep => suspensionData?['step']?.toString();
+
+  /// Suspended iteration index, when provided.
+  int? get suspensionIteration => _intFromJson(suspensionData?['iteration']);
+
+  /// Step name scoped to a workflow iteration, when provided.
+  String? get suspensionIterationStep =>
+      suspensionData?['iterationStep']?.toString();
+
+  /// Event topic being awaited by the run.
+  String? get waitEventTopic =>
+      suspensionData?['topic']?.toString() ?? waitTopic;
+
+  /// Timestamp when the run entered suspended state.
+  DateTime? get suspendedAt => _dateFromJson(suspensionData?['suspendedAt']);
+
+  /// Requested resume timestamp from suspension metadata.
+  DateTime? get requestedResumeAt =>
+      _dateFromJson(suspensionData?['requestedResumeAt']);
+
+  /// Policy deadline used for suspension timeout behavior.
+  DateTime? get suspensionPolicyDeadline =>
+      _dateFromJson(suspensionData?['policyDeadline']);
+
+  /// Resume payload delivered to the suspended run, when present.
+  Object? get suspensionPayload => suspensionData?['payload'];
+
+  /// Timestamp when a matching event was delivered for this suspension.
+  DateTime? get suspensionDeliveredAt =>
+      _dateFromJson(suspensionData?['deliveredAt']);
+
   /// Returns a copy of this run state with updated fields.
   RunState copyWith({
     WorkflowStatus? status,
diff --git a/packages/stem/lib/src/workflow/core/workflow_watcher.dart b/packages/stem/lib/src/workflow/core/workflow_watcher.dart
index 077b287..9ec150b 100644
--- a/packages/stem/lib/src/workflow/core/workflow_watcher.dart
+++ b/packages/stem/lib/src/workflow/core/workflow_watcher.dart
@@ -42,6 +42,27 @@ class WorkflowWatcher {
   /// Additional metadata supplied when the watcher was registered.
   final Map<String, Object?> data;
 
+  /// Suspension type (`sleep`, `event`, etc.) when recorded by runtime.
+  String? get suspensionType => data['type']?.toString();
+
+  /// Workflow iteration value when present.
+  int? get iteration => _intFromJson(data['iteration']);
+
+  /// Iteration step marker when present.
+  String? get iterationStep => data['iterationStep']?.toString();
+
+  /// Effective payload snapshot captured at suspension time.
+  Object? get payload => data['payload'];
+
+  /// Timestamp when suspension was recorded.
+  DateTime? get suspendedAt => _dateFromJson(data['suspendedAt']);
+
+  /// Requested resume timestamp when a policy is active.
+  DateTime? get requestedResumeAt => _dateFromJson(data['requestedResumeAt']);
+
+  /// Timeout deadline chosen by the policy/runtime.
+  DateTime? get policyDeadline => _dateFromJson(data['policyDeadline']);
+
   /// Converts this watcher to a JSON-compatible map.
   Map<String, Object?> toJson() {
     return {
@@ -88,6 +109,21 @@ class WorkflowWatcherResolution {
   /// Resume data merged from stored metadata and event payload.
   final Map<String, Object?> resumeData;
 
+  /// Suspension type (`sleep`, `event`, etc.) propagated to resume payload.
+  String? get suspensionType => resumeData['type']?.toString();
+
+  /// Workflow iteration value when present.
+  int? get iteration => _intFromJson(resumeData['iteration']);
+
+  /// Iteration step marker when present.
+  String? get iterationStep => resumeData['iterationStep']?.toString();
+
+  /// Resume payload delivered to workflow step.
+  Object? get payload => resumeData['payload'];
+
+  /// Timestamp when event delivery was recorded.
+  DateTime? get deliveredAt => _dateFromJson(resumeData['deliveredAt']);
+
   /// Converts this resolution to a JSON-compatible map.
   Map<String, Object?> toJson() {
     return {
@@ -104,3 +140,9 @@ DateTime? _dateFromJson(Object? value) {
   if (value is DateTime) return value;
   return DateTime.tryParse(value.toString());
 }
+
+int? _intFromJson(Object? value) {
+  if (value is int) return value;
+  if (value is num) return value.toInt();
+  return int.tryParse(value?.toString() ?? '');
+}
diff --git a/packages/stem/test/unit/core/contracts_test.dart b/packages/stem/test/unit/core/contracts_test.dart
index c1c6271..d309db5 100644
--- a/packages/stem/test/unit/core/contracts_test.dart
+++ b/packages/stem/test/unit/core/contracts_test.dart
@@ -82,6 +82,45 @@ void main() {
 
       expect(decoded.state, equals(TaskState.queued));
     });
+
+    test('metadata getters expose typed status context', () {
+      final status = TaskStatus(
+        id: 'task-3',
+        state: TaskState.failed,
+        attempt: 1,
+        meta: const {
+          'task': 'email.send',
+          'queue': 'critical',
+          'namespace': 'acme',
+          'worker': 'worker-1',
+          'startedAt': '2026-02-25T00:00:00Z',
+          'failedAt': '2026-02-25T00:00:03Z',
+          'revokedAt': '2026-02-25T00:00:04Z',
+          'revokedReason': 'manual',
+          'revokedBy': 'dashboard',
+          'stem.expired': true,
+          'stem.timeLimitMs': 1500,
+          'stem.softTimeLimitMs': 750,
+          'stem.parentTaskId': 'parent-1',
+          'stem.rootTaskId': 'root-1',
+        },
+      );
+
+      expect(status.taskName, equals('email.send'));
+      expect(status.queueName, equals('critical'));
+      expect(status.namespace, equals('acme'));
+      expect(status.workerId, equals('worker-1'));
+      expect(status.startedAt, equals(DateTime.utc(2026, 2, 25)));
+      expect(status.failedAt, equals(DateTime.utc(2026, 2, 25, 0, 0, 3)));
+      expect(status.wasRevoked, isTrue);
+      expect(status.revokedReason, equals('manual'));
+      expect(status.revokedBy, equals('dashboard'));
+      expect(status.isExpired, isTrue);
+      expect(status.hardTimeLimit, equals(const Duration(milliseconds: 1500)));
+      expect(status.softTimeLimit, equals(const Duration(milliseconds: 750)));
+      expect(status.parentTaskId, equals('parent-1'));
+      expect(status.rootTaskId, equals('root-1'));
+    });
   });
 
   group('DeadLetterEntry', () {
diff --git a/packages/stem/test/unit/worker/worker_test.dart b/packages/stem/test/unit/worker/worker_test.dart
index 51e7aea..cccad72 100644
--- a/packages/stem/test/unit/worker/worker_test.dart
+++ b/packages/stem/test/unit/worker/worker_test.dart
@@ -1027,6 +1027,72 @@ void main() {
       broker.dispose();
     });
 
+    test('retries signed failing task then succeeds', () async {
+      final broker = InMemoryBroker(
+        delayedInterval: const Duration(milliseconds: 10),
+        claimInterval: const Duration(milliseconds: 40),
+      );
+      final backend = InMemoryResultBackend();
+      final registry = SimpleTaskRegistry()..register(_FlakyTask());
+
+      final signingConfig = SigningConfig.fromEnvironment({
+        'STEM_SIGNING_KEYS':
+            'primary:${base64.encode(utf8.encode('signing-secret'))}',
+        'STEM_SIGNING_ACTIVE_KEY': 'primary',
+      });
+      final producerSigner = PayloadSigner(signingConfig);
+      final verifierSigner = PayloadSigner(signingConfig);
+
+      final worker = Worker(
+        broker: broker,
+        registry: registry,
+        backend: backend,
+        consumerName: 'worker-signed-retry',
+        concurrency: 1,
+        prefetchMultiplier: 1,
+        retryStrategy: ExponentialJitterRetryStrategy(
+          base: const Duration(milliseconds: 10),
+        ),
+        signer: verifierSigner,
+      );
+
+      final events = <WorkerEvent>[];
+      final sub = worker.events.listen(events.add);
+
+      await worker.start();
+
+      final stem = Stem(
+        broker: broker,
+        registry: registry,
+        backend: backend,
+        signer: producerSigner,
+      );
+      final taskId = await stem.enqueue('tasks.flaky');
+
+      await _waitFor(
+        () => events.any(
+          (e) =>
+              e.type == WorkerEventType.completed && e.envelope?.id == taskId,
+        ),
+      );
+      await _waitFor(
+        () => events.any(
+          (e) => e.type == WorkerEventType.retried && e.envelope?.id == taskId,
+        ),
+      );
+
+      final status = await backend.get(taskId);
+      expect(status?.state, TaskState.succeeded);
+      expect(status?.attempt, equals(1));
+
+      final deadPage = await broker.listDeadLetters('default');
+      expect(deadPage.entries, isEmpty);
+
+      await sub.cancel();
+      await worker.shutdown();
+      broker.dispose();
+    });
+
     test('moves task to dead letter after max retries', () async {
       StemSignals.configure(configuration: const StemSignalConfiguration());
 
diff --git a/packages/stem/test/unit/workflow/workflow_metadata_views_test.dart b/packages/stem/test/unit/workflow/workflow_metadata_views_test.dart
new file mode 100644
index 0000000..4cf11f9
--- /dev/null
+++ b/packages/stem/test/unit/workflow/workflow_metadata_views_test.dart
@@ -0,0 +1,110 @@
+import 'package:stem/stem.dart';
+import 'package:test/test.dart';
+
+void main() {
+  group('RunState metadata getters', () {
+    test('exposes suspension metadata fields', () {
+      final state = RunState(
+        id: 'run-1',
+        workflow: 'invoice',
+        status: WorkflowStatus.suspended,
+        cursor: 2,
+        params: const {'tenant': 'acme'},
+        createdAt: DateTime.utc(2026, 2, 25),
+        waitTopic: 'invoice.approved',
+        suspensionData: const {
+          'type': 'event',
+          'step': 'awaitApproval',
+          'iteration': 3,
+          'iterationStep': 'approval#3',
+          'topic': 'invoice.approved',
+          'suspendedAt': '2026-02-25T00:00:10Z',
+          'requestedResumeAt': '2026-02-25T00:05:00Z',
+          'policyDeadline': '2026-02-25T00:10:00Z',
+          'payload': {'invoiceId': 'inv-1'},
+          'deliveredAt': '2026-02-25T00:03:00Z',
+        },
+      );
+
+      expect(state.isSuspended, isTrue);
+      expect(state.suspensionType, equals('event'));
+      expect(state.suspensionStep, equals('awaitApproval'));
+      expect(state.suspensionIteration, equals(3));
+      expect(state.suspensionIterationStep, equals('approval#3'));
+      expect(state.waitEventTopic, equals('invoice.approved'));
+      expect(state.suspendedAt, equals(DateTime.utc(2026, 2, 25, 0, 0, 10)));
+      expect(
+        state.requestedResumeAt,
+        equals(DateTime.utc(2026, 2, 25, 0, 5)),
+      );
+      expect(
+        state.suspensionPolicyDeadline,
+        equals(DateTime.utc(2026, 2, 25, 0, 10)),
+      );
+      expect(
+        state.suspensionDeliveredAt,
+        equals(DateTime.utc(2026, 2, 25, 0, 3)),
+      );
+      expect(
+        state.suspensionPayload,
+        equals(const <String, Object?>{'invoiceId': 'inv-1'}),
+      );
+    });
+  });
+
+  group('Workflow watcher metadata getters', () {
+    test('exposes watcher and resolution metadata', () {
+      final watcher = WorkflowWatcher(
+        runId: 'run-1',
+        stepName: 'awaitApproval',
+        topic: 'invoice.approved',
+        createdAt: DateTime.utc(2026, 2, 25),
+        deadline: DateTime.utc(2026, 2, 25, 0, 15),
+        data: const {
+          'type': 'event',
+          'iteration': 2,
+          'iterationStep': 'approval#2',
+          'payload': {'invoiceId': 'inv-1'},
+          'suspendedAt': '2026-02-25T00:01:00Z',
+          'requestedResumeAt': '2026-02-25T00:02:00Z',
+          'policyDeadline': '2026-02-25T00:15:00Z',
+        },
+      );
+      final resolution = WorkflowWatcherResolution(
+        runId: 'run-1',
+        stepName: 'awaitApproval',
+        topic: 'invoice.approved',
+        resumeData: const {
+          'type': 'event',
+          'iteration': 2,
+          'iterationStep': 'approval#2',
+          'payload': {'invoiceId': 'inv-1'},
+          'deliveredAt': '2026-02-25T00:01:30Z',
+        },
+      );
+
+      expect(watcher.suspensionType, equals('event'));
+      expect(watcher.iteration, equals(2));
+      expect(watcher.iterationStep, equals('approval#2'));
+      expect(watcher.payload, equals(const {'invoiceId': 'inv-1'}));
+      expect(watcher.suspendedAt, equals(DateTime.utc(2026, 2, 25, 0, 1)));
+      expect(
+        watcher.requestedResumeAt,
+        equals(DateTime.utc(2026, 2, 25, 0, 2)),
+      );
+      expect(
+        watcher.policyDeadline,
+        equals(DateTime.utc(2026, 2, 25, 0, 15)),
+      );
+
+      expect(resolution.suspensionType, equals('event'));
+      expect(resolution.iteration, equals(2));
+      expect(resolution.iterationStep, equals('approval#2'));
+      expect(resolution.payload, equals(const {'invoiceId': 'inv-1'}));
+      expect(
+        resolution.deliveredAt,
+        equals(DateTime.utc(2026, 2, 25, 0, 1, 30)),
+      );
+    });
+  });
+}

From 4c8e96cc06fdd04840193e0a4a056f87ae8543bb Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 10:12:20 -0500
Subject: [PATCH 08/14] feat(microservice): enrich demo workloads and
 observability stack wiring

---
 packages/stem/example/microservice/README.md  |  31 +-
 .../stem/example/microservice/beat/Dockerfile |   3 +-
 .../example/microservice/beat/bin/beat.dart   |   3 +
 .../example/microservice/beat/pubspec.yaml    |   2 +
 .../example/microservice/dashboard/Dockerfile |   3 +-
 .../example/microservice/docker-compose.yml   |  46 ++-
 .../example/microservice/enqueuer/Dockerfile  |   3 +-
 .../microservice/enqueuer/bin/main.dart       | 316 +++++++++++++++++-
 .../microservice/enqueuer/pubspec.yaml        |   4 +-
 packages/stem/example/microservice/nginx.conf |  24 +-
 .../microservice/schedules.example.yaml       |  66 +++-
 .../example/microservice/worker/Dockerfile    |   3 +-
 .../microservice/worker/bin/worker.dart       | 179 +++++++++-
 .../example/microservice/worker/pubspec.yaml  |   2 +
 14 files changed, 626 insertions(+), 59 deletions(-)

diff --git a/packages/stem/example/microservice/README.md b/packages/stem/example/microservice/README.md
index 73b104f..9dde5fc 100644
--- a/packages/stem/example/microservice/README.md
+++ b/packages/stem/example/microservice/README.md
@@ -22,6 +22,10 @@ All services expect the following environment variables (see `.env.example` for
 | `STEM_TLS_CLIENT_CERT` | _(optional)_ | mTLS client certificate used by enqueuers/workers. |
 | `STEM_TLS_CLIENT_KEY` | _(optional)_ | Private key associated with the client certificate. |
 | `PORT` | `8081` | HTTP port for the enqueue API (nginx fronts it on `api.localhost:8080`). |
+| `ENQUEUER_AUTOFILL_ENABLED` | `true` | Enables a background demo producer that keeps the dashboard populated. |
+| `ENQUEUER_AUTOFILL_INTERVAL_MS` | `2500` | Interval between auto-fill publish cycles. |
+| `ENQUEUER_AUTOFILL_BATCH_SIZE` | `2` | Number of successful tasks published per auto-fill cycle. |
+| `ENQUEUER_AUTOFILL_FAILURE_EVERY` | `8` | Every Nth cycle enqueues one synthetic failing task. |
 | `STEM_SCHEDULE_FILE` | `/config/schedules.yaml` | Optional YAML file the beat service uses to seed schedules. |
 | `STEM_METRIC_EXPORTERS` | `otlp:http://otel-collector:4318/v1/metrics` | Comma-separated list of metrics exporters enabled for workers (OTLP by default). |
 | `STEM_OTLP_ENDPOINT` | `http://otel-collector:4318/v1/traces` | Default OTLP endpoint used when exporters do not specify a destination. |
@@ -58,7 +62,7 @@ If you want to run the stack with TLS enabled, generate certificates and switch
 ## Running with Docker Compose
 
 ```bash
-cd examples/microservice
+cd packages/stem/example/microservice
 cp .env.hmac_tls .env   # or .env.hmac / .env.ed25519_tls
 docker compose up --build
 ```
@@ -74,14 +78,20 @@ The stack now brings up Redis, the enqueue API, three workers, the beat schedule
 
 - **Local overrides:** The compose file expects a routed ecosystem checkout next to this repo (sibling directory at `../routed_ecosystem`) so the dashboard overrides resolve correctly. If your local path differs, update the `volumes` entries in `docker-compose.yml` accordingly.
 
-Workers emit metrics to the collector via OTLP; Prometheus scrapes the collector and Grafana ships with a pre-provisioned datasource so you can build dashboards immediately. Jaeger receives spans published through the collector, allowing you to trace enqueue and worker execution paths without extra configuration.
+Workers emit metrics to the collector via OTLP; Prometheus scrapes the collector and Grafana ships with pre-provisioned datasources and Stem dashboards:
+
+- `Stem Overview`
+- `Stem Workers & Queues`
+- `Stem Scheduler`
+
+Jaeger receives spans published through the collector, allowing you to trace enqueue and worker execution paths without extra configuration.
 
 Enqueue a task:
 
 ```bash
 curl -X POST http://api.localhost:8080/enqueue \
   -H 'content-type: application/json' \
-  -d '{"name": "Ada"}'
+  -d '{"name": "Ada", "task": "greeting.send"}'
 ```
 
 Fan out work with the canvas helper:
@@ -106,6 +116,15 @@ stem schedule list
 stem schedule dry-run --id greetings-reminder --count 3
 ```
 
+The demo stack now auto-generates background traffic across `greetings`,
+`billing`, and `reporting` queues, including synthetic workflow metadata
+(`stem.workflow.runId`, `stem.workflow.name`, `stem.workflow.step`) so the
+Workflows/Jobs/Namespaces dashboard views stay populated. Disable this with:
+
+```bash
+ENQUEUER_AUTOFILL_ENABLED=false docker compose up --build
+```
+
 Stop the stack with `docker compose down`.
 
 ## Running locally with Dart
@@ -130,7 +149,7 @@ Stop the stack with `docker compose down`.
 3. Run the worker:
 
    ```bash
-   cd examples/microservice/worker
+   cd packages/stem/example/microservice/worker
    dart pub get
    dart run bin/worker.dart
    ```
@@ -138,7 +157,7 @@ Stop the stack with `docker compose down`.
 4. In another terminal, run the enqueue API:
 
    ```bash
-   cd examples/microservice/enqueuer
+   cd packages/stem/example/microservice/enqueuer
    dart pub get
    dart run bin/main.dart
    ```
@@ -146,7 +165,7 @@ Stop the stack with `docker compose down`.
 The worker logs progress for each greeting task, demonstrating isolate execution, heartbeats, and result backend updates. Start the beat service in a third terminal to dispatch scheduled jobs:
 
 ```bash
-cd examples/microservice/beat
+cd packages/stem/example/microservice/beat
 dart pub get
 dart run bin/beat.dart
 ```
diff --git a/packages/stem/example/microservice/beat/Dockerfile b/packages/stem/example/microservice/beat/Dockerfile
index ad1a206..ef4cd4a 100644
--- a/packages/stem/example/microservice/beat/Dockerfile
+++ b/packages/stem/example/microservice/beat/Dockerfile
@@ -3,6 +3,7 @@
 FROM dart:stable
 WORKDIR /workspace
 COPY . /workspace
-WORKDIR /workspace/example/microservice/beat
+WORKDIR /workspace/packages/stem/example/microservice/beat
 ENV DART_PUB_CACHE=/tmp/.dart_pub_cache
+ENV PATH=/usr/lib/dart/bin:$PATH
 CMD ["sh", "-c", "dart pub get && dart run bin/beat.dart"]
diff --git a/packages/stem/example/microservice/beat/bin/beat.dart b/packages/stem/example/microservice/beat/bin/beat.dart
index eabb16b..8a8195a 100644
--- a/packages/stem/example/microservice/beat/bin/beat.dart
+++ b/packages/stem/example/microservice/beat/bin/beat.dart
@@ -11,7 +11,10 @@ const _deepEquals = DeepCollectionEquality();
 Future<void> main(List<String> args) async {
   // #region signing-beat-config
   final config = StemConfig.fromEnvironment();
+  final observability = ObservabilityConfig.fromEnvironment();
   // #endregion signing-beat-config
+  observability.applyMetricExporters();
+  observability.applySignalConfiguration();
 
   final broker = await RedisStreamsBroker.connect(
     config.brokerUrl,
diff --git a/packages/stem/example/microservice/beat/pubspec.yaml b/packages/stem/example/microservice/beat/pubspec.yaml
index ec8769c..c842d7e 100644
--- a/packages/stem/example/microservice/beat/pubspec.yaml
+++ b/packages/stem/example/microservice/beat/pubspec.yaml
@@ -18,3 +18,5 @@ dev_dependencies:
 dependency_overrides:
   stem:
     path: ../../..
+  stem_memory:
+    path: ../../../../stem_memory
diff --git a/packages/stem/example/microservice/dashboard/Dockerfile b/packages/stem/example/microservice/dashboard/Dockerfile
index 400543c..7003285 100644
--- a/packages/stem/example/microservice/dashboard/Dockerfile
+++ b/packages/stem/example/microservice/dashboard/Dockerfile
@@ -3,6 +3,7 @@
 FROM dart:stable
 WORKDIR /workspace
 COPY . /workspace
-WORKDIR /workspace/dashboard
+WORKDIR /workspace/packages/dashboard
 ENV DART_PUB_CACHE=/tmp/.dart_pub_cache
+ENV PATH=/usr/lib/dart/bin:$PATH
 CMD ["sh", "-c", "dart pub get && dart run bin/dashboard.dart"]
diff --git a/packages/stem/example/microservice/docker-compose.yml b/packages/stem/example/microservice/docker-compose.yml
index 9ccfa76..4ba0758 100644
--- a/packages/stem/example/microservice/docker-compose.yml
+++ b/packages/stem/example/microservice/docker-compose.yml
@@ -16,6 +16,7 @@ services:
     image: jaegertracing/all-in-one:1.56
     environment:
       COLLECTOR_OTLP_ENABLED: "true"
+      QUERY_BASE_PATH: /jaeger
     restart: unless-stopped
 
   prometheus:
@@ -36,12 +37,13 @@ services:
     environment:
       GF_SECURITY_ADMIN_USER: admin
       GF_SECURITY_ADMIN_PASSWORD: admin
-      GF_SERVER_DOMAIN: localhost
-      GF_SERVER_ROOT_URL: "%(protocol)s://%(domain)s:%(http_port)s/grafana/"
+      GF_SERVER_ROOT_URL: "http://localhost:8080/grafana/"
       GF_SERVER_SERVE_FROM_SUB_PATH: "true"
     volumes:
       - grafana-data:/var/lib/grafana
       - ./grafana-datasources.yml:/etc/grafana/provisioning/datasources/datasources.yaml:ro
+      - ./grafana/provisioning/dashboards/stem.yml:/etc/grafana/provisioning/dashboards/stem.yaml:ro
+      - ./grafana/dashboards:/etc/grafana/dashboards/stem:ro
     depends_on:
       - prometheus
     restart: unless-stopped
@@ -61,8 +63,8 @@ services:
 
   dashboard:
     build:
-      context: ../..
-      dockerfile: example/microservice/dashboard/Dockerfile
+      context: ../../../..
+      dockerfile: packages/stem/example/microservice/dashboard/Dockerfile
     env_file:
       - .env.example
     environment:
@@ -74,12 +76,16 @@ services:
 
   enqueuer:
     build:
-      context: ../..
-      dockerfile: example/microservice/enqueuer/Dockerfile
+      context: ../../../..
+      dockerfile: packages/stem/example/microservice/enqueuer/Dockerfile
     env_file:
       - .env.example
     environment:
       PORT: ${PORT:-8081}
+      ENQUEUER_AUTOFILL_ENABLED: ${ENQUEUER_AUTOFILL_ENABLED:-true}
+      ENQUEUER_AUTOFILL_INTERVAL_MS: ${ENQUEUER_AUTOFILL_INTERVAL_MS:-2500}
+      ENQUEUER_AUTOFILL_BATCH_SIZE: ${ENQUEUER_AUTOFILL_BATCH_SIZE:-2}
+      ENQUEUER_AUTOFILL_FAILURE_EVERY: ${ENQUEUER_AUTOFILL_FAILURE_EVERY:-8}
     depends_on:
       - redis
       - otel-collector
@@ -87,10 +93,14 @@ services:
 
   worker:
     build:
-      context: ../..
-      dockerfile: example/microservice/worker/Dockerfile
+      context: ../../../..
+      dockerfile: packages/stem/example/microservice/worker/Dockerfile
     env_file:
       - .env.example
+    environment:
+      STEM_WORKER_NAME: microservice-worker-1
+      STEM_WORKER_QUEUE: greetings
+      STEM_WORKER_NAMESPACE: customer-experience
     depends_on:
       - redis
       - otel-collector
@@ -98,10 +108,14 @@ services:
 
   worker2:
     build:
-      context: ../..
-      dockerfile: example/microservice/worker/Dockerfile
+      context: ../../../..
+      dockerfile: packages/stem/example/microservice/worker/Dockerfile
     env_file:
       - .env.example
+    environment:
+      STEM_WORKER_NAME: microservice-worker-2
+      STEM_WORKER_QUEUE: billing
+      STEM_WORKER_NAMESPACE: revenue
     depends_on:
       - redis
       - otel-collector
@@ -109,10 +123,14 @@ services:
 
   worker3:
     build:
-      context: ../..
-      dockerfile: example/microservice/worker/Dockerfile
+      context: ../../../..
+      dockerfile: packages/stem/example/microservice/worker/Dockerfile
     env_file:
       - .env.example
+    environment:
+      STEM_WORKER_NAME: microservice-worker-3
+      STEM_WORKER_QUEUE: reporting
+      STEM_WORKER_NAMESPACE: analytics
     depends_on:
       - redis
       - otel-collector
@@ -120,8 +138,8 @@ services:
 
   beat:
     build:
-      context: ../..
-      dockerfile: example/microservice/beat/Dockerfile
+      context: ../../../..
+      dockerfile: packages/stem/example/microservice/beat/Dockerfile
     env_file:
       - .env.example
     environment:
diff --git a/packages/stem/example/microservice/enqueuer/Dockerfile b/packages/stem/example/microservice/enqueuer/Dockerfile
index 9ab07e2..814c179 100644
--- a/packages/stem/example/microservice/enqueuer/Dockerfile
+++ b/packages/stem/example/microservice/enqueuer/Dockerfile
@@ -3,8 +3,9 @@
 FROM dart:stable
 WORKDIR /workspace
 COPY . /workspace
-WORKDIR /workspace/example/microservice/enqueuer
+WORKDIR /workspace/packages/stem/example/microservice/enqueuer
 ENV DART_PUB_CACHE=/tmp/.dart_pub_cache
+ENV PATH=/usr/lib/dart/bin:$PATH
 ENV PORT=8081
 EXPOSE 8081
 CMD ["sh", "-c", "dart pub get && dart run bin/main.dart"]
diff --git a/packages/stem/example/microservice/enqueuer/bin/main.dart b/packages/stem/example/microservice/enqueuer/bin/main.dart
index c5e06bf..20c4a2d 100644
--- a/packages/stem/example/microservice/enqueuer/bin/main.dart
+++ b/packages/stem/example/microservice/enqueuer/bin/main.dart
@@ -8,10 +8,86 @@ import 'package:shelf_router/shelf_router.dart';
 import 'package:stem/stem.dart';
 import 'package:stem_redis/stem_redis.dart';
 
+const _defaultTaskName = 'greeting.send';
+
+const _demoTaskSpecs = <_DemoTaskSpec>[
+  _DemoTaskSpec(
+    name: 'greeting.send',
+    queue: 'greetings',
+    namespace: 'customer-experience',
+    maxRetries: 5,
+  ),
+  _DemoTaskSpec(
+    name: 'customer.followup',
+    queue: 'greetings',
+    namespace: 'customer-experience',
+    maxRetries: 4,
+  ),
+  _DemoTaskSpec(
+    name: 'billing.charge',
+    queue: 'billing',
+    namespace: 'revenue',
+    maxRetries: 5,
+  ),
+  _DemoTaskSpec(
+    name: 'billing.settlement',
+    queue: 'billing',
+    namespace: 'revenue',
+    maxRetries: 3,
+  ),
+  _DemoTaskSpec(
+    name: 'reports.aggregate',
+    queue: 'reporting',
+    namespace: 'analytics',
+    maxRetries: 2,
+  ),
+  _DemoTaskSpec(
+    name: 'reports.publish',
+    queue: 'reporting',
+    namespace: 'analytics',
+    maxRetries: 2,
+  ),
+];
+
+final _demoTaskByName = {
+  for (final spec in _demoTaskSpecs) spec.name: spec,
+};
+
+const _workflowTemplates = <_WorkflowTemplate>[
+  _WorkflowTemplate(
+    name: 'onboarding.v1',
+    steps: [
+      _WorkflowStep(taskName: 'greeting.send', stepName: 'prepare-message'),
+      _WorkflowStep(taskName: 'billing.charge', stepName: 'charge-account'),
+      _WorkflowStep(taskName: 'reports.publish', stepName: 'publish-summary'),
+    ],
+  ),
+  _WorkflowTemplate(
+    name: 'billing.closeout',
+    steps: [
+      _WorkflowStep(taskName: 'billing.charge', stepName: 'capture'),
+      _WorkflowStep(taskName: 'billing.settlement', stepName: 'settle'),
+      _WorkflowStep(taskName: 'reports.aggregate', stepName: 'rollup'),
+    ],
+  ),
+  _WorkflowTemplate(
+    name: 'customer.reengagement',
+    steps: [
+      _WorkflowStep(taskName: 'customer.followup', stepName: 'hydrate-profile'),
+      _WorkflowStep(taskName: 'greeting.send', stepName: 'send-message'),
+      _WorkflowStep(taskName: 'reports.publish', stepName: 'write-audit'),
+    ],
+  ),
+];
+
 Future<void> main(List<String> args) async {
   // #region signing-producer-config
   final config = StemConfig.fromEnvironment();
+  final observability = ObservabilityConfig.fromEnvironment();
   // #endregion signing-producer-config
+  observability.applyMetricExporters();
+  observability.applySignalConfiguration();
+
   final broker = await RedisStreamsBroker.connect(
     config.brokerUrl,
     tls: config.tls,
@@ -31,14 +107,16 @@ Future<void> main(List<String> args) async {
   // #endregion signing-producer-signer
   final httpContext = _buildHttpSecurityContext();
 
-  final registry = SimpleTaskRegistry()
-    ..register(
+  final registry = SimpleTaskRegistry();
+  for (final spec in _demoTaskSpecs) {
+    registry.register(
       FunctionTaskHandler<String>(
-        name: 'greeting.send',
+        name: spec.name,
         entrypoint: _placeholderEntrypoint,
-        options: const TaskOptions(queue: 'greetings', maxRetries: 5),
+        options: TaskOptions(queue: spec.queue, maxRetries: spec.maxRetries),
       ),
     );
+  }
 
   // #region signing-producer-stem
   final stem = Stem(
@@ -53,23 +131,68 @@ Future<void> main(List<String> args) async {
     backend: backend,
     registry: registry,
   );
+  final autoFill = _AutoFillController(
+    stem: stem,
+    enabled: _boolFromEnv(
+      Platform.environment['ENQUEUER_AUTOFILL_ENABLED'],
+      defaultValue: true,
+    ),
+    interval: Duration(
+      milliseconds: _intFromEnv(
+        Platform.environment['ENQUEUER_AUTOFILL_INTERVAL_MS'],
+        defaultValue: 2500,
+      ),
+    ),
+    batchSize: _intFromEnv(
+      Platform.environment['ENQUEUER_AUTOFILL_BATCH_SIZE'],
+      defaultValue: 2,
+    ),
+    failureEvery: _intFromEnv(
+      Platform.environment['ENQUEUER_AUTOFILL_FAILURE_EVERY'],
+      defaultValue: 8,
+    ),
+  )..start();
 
   final router = Router()
     ..post('/enqueue', (Request request) async {
       final body = jsonDecode(await request.readAsString()) as Map;
-      final name = (body['name'] as String?)?.trim();
-      if (name == null || name.isEmpty) {
-        return Response.badRequest(
-          body: jsonEncode({'error': 'Missing "name" field'}),
+      final requestedTask = (body['task'] as String?)?.trim();
+      final taskName = (requestedTask == null || requestedTask.isEmpty)
+          ? _defaultTaskName
+          : requestedTask;
+      final taskSpec = _demoTaskByName[taskName];
+      if (taskSpec == null) {
+        return Response(
+          HttpStatus.badRequest,
+          body: jsonEncode({
+            'error': 'Unknown task "$taskName".',
+            'knownTasks': _demoTaskSpecs.map((entry) => entry.name).toList(),
+          }),
+          headers: {'content-type': 'application/json'},
         );
       }
+      final name = (body['name'] as String?)?.trim();
+      final entity = (name == null || name.isEmpty) ? 'friend' : name;
       final taskId = await stem.enqueue(
-        'greeting.send',
-        args: {'name': name},
-        options: const TaskOptions(queue: 'greetings'),
+        taskSpec.name,
+        args: {
+          'name': entity,
+          if (body['delayMs'] is num)
+            'delayMs': (body['delayMs'] as num).toInt(),
+          if (body['fail'] is bool) 'fail': body['fail'] as bool,
+        },
+        options: TaskOptions(
+          queue: taskSpec.queue,
+          maxRetries: taskSpec.maxRetries,
+        ),
+        meta: {
+          'namespace': taskSpec.namespace,
+          'stem.namespace': taskSpec.namespace,
+          'demo.source': 'http.enqueue',
+        },
       );
       return Response.ok(
-        jsonEncode({'taskId': taskId}),
+        jsonEncode({'taskId': taskId, 'task': taskSpec.name}),
         headers: {'content-type': 'application/json'},
       );
     })
@@ -142,6 +265,7 @@ Future<void> main(List<String> args) async {
 
   Future<void> shutdown(ProcessSignal signal) async {
     stdout.writeln('Shutting down enqueue service ($signal)...');
+    autoFill.stop();
     await server.close(force: true);
     await broker.close();
     await backend.close();
@@ -174,3 +298,171 @@ SecurityContext? _buildHttpSecurityContext() {
   }
   return context;
 }
+
+class _AutoFillController {
+  _AutoFillController({
+    required this.stem,
+    required this.enabled,
+    required this.interval,
+    required this.batchSize,
+    required this.failureEvery,
+  });
+
+  final Stem stem;
+  final bool enabled;
+  final Duration interval;
+  final int batchSize;
+  final int failureEvery;
+
+  Timer? _timer;
+  var _tick = 0;
+  var _running = false;
+
+  void start() {
+    if (!enabled) return;
+    stdout.writeln(
+      'Auto-fill enabled (interval=${interval.inMilliseconds}ms, '
+      'batchSize=$batchSize, failureEvery=$failureEvery).',
+    );
+    _timer = Timer.periodic(interval, (_) {
+      if (_running) return;
+      _running = true;
+      unawaited(_produce().whenComplete(() => _running = false));
+    });
+  }
+
+  void stop() {
+    _timer?.cancel();
+  }
+
+  Future<void> _produce() async {
+    _tick++;
+    for (var index = 0; index < batchSize; index++) {
+      final spec = _demoTaskSpecs[(_tick + index) % _demoTaskSpecs.length];
+      final shouldFail = failureEvery > 0 &&
+          _tick % failureEvery == 0 &&
+          index == 0 &&
+          (spec.queue == 'greetings' || spec.queue == 'billing');
+      final delayMs = 220 + ((_tick + index) % 8) * 160;
+      final taskId = await _enqueueTask(
+        spec,
+        label: 'demo-${_tick.toString().padLeft(4, '0')}-$index',
+        delayMs: delayMs,
+        shouldFail: shouldFail,
+        extraMeta: const {'demo.kind': 'standalone'},
+      );
+      stdout.writeln(
+        'Auto-filled standalone task $taskId '
+        '(${spec.name} queue=${spec.queue} delayMs=$delayMs fail=$shouldFail).',
+      );
+    }
+
+    if (_tick.isEven) {
+      await _enqueueWorkflowSample();
+    }
+  }
+
+  Future<String> _enqueueTask(
+    _DemoTaskSpec spec, {
+    required String label,
+    required int delayMs,
+    required bool shouldFail,
+    Map<String, Object?> extraMeta = const {},
+  }) {
+    return stem.enqueue(
+      spec.name,
+      args: {
+        'name': label,
+        'delayMs': delayMs,
+        if (shouldFail) 'fail': true,
+      },
+      options: TaskOptions(queue: spec.queue, maxRetries: spec.maxRetries),
+      meta: {
+        'namespace': spec.namespace,
+        'stem.namespace': spec.namespace,
+        ...extraMeta,
+      },
+    );
+  }
+
+  Future<void> _enqueueWorkflowSample() async {
+    final template = _workflowTemplates[_tick % _workflowTemplates.length];
+    final runId = 'wf-${_tick.toString().padLeft(6, '0')}';
+    final forceFailure = failureEvery > 0 && _tick % failureEvery == 0;
+    for (var index = 0; index < template.steps.length; index++) {
+      final step = template.steps[index];
+      final spec = _demoTaskByName[step.taskName];
+      if (spec == null) {
+        continue;
+      }
+      final shouldFail = forceFailure && index == template.steps.length - 1;
+      final delayMs = 280 + ((_tick + index) % 6) * 140;
+      final taskId = await _enqueueTask(
+        spec,
+        label: '$runId-${step.stepName}',
+        delayMs: delayMs,
+        shouldFail: shouldFail,
+        extraMeta: {
+          'demo.kind': 'workflow-step',
+          'demo.workflow': template.name,
+          'stem.workflow.runId': runId,
+          'stem.workflow.name': template.name,
+          'stem.workflow.step': step.stepName,
+          'stem.workflow.stepIndex': index,
+          'stem.workflow.iteration': 0,
+        },
+      );
+      stdout.writeln(
+        'Auto-filled workflow step $taskId '
+        '(run=$runId workflow=${template.name} step=${step.stepName}).',
+      );
+    }
+  }
+}
+
+class _DemoTaskSpec {
+  const _DemoTaskSpec({
+    required this.name,
+    required this.queue,
+    required this.namespace,
+    required this.maxRetries,
+  });
+
+  final String name;
+  final String queue;
+  final String namespace;
+  final int maxRetries;
+}
+
+class _WorkflowTemplate {
+  const _WorkflowTemplate({required this.name, required this.steps});
+
+  final String name;
+  final List<_WorkflowStep> steps;
+}
+
+class _WorkflowStep {
+  const _WorkflowStep({required this.taskName, required this.stepName});
+
+  final String taskName;
+  final String stepName;
+}
+
+bool _boolFromEnv(String? value, {required bool defaultValue}) {
+  final normalized = value?.trim().toLowerCase();
+  if (normalized == null || normalized.isEmpty) {
+    return defaultValue;
+  }
+  return normalized == '1' ||
+      normalized == 'true' ||
+      normalized == 'yes' ||
+      normalized == 'on';
+}
+
+int _intFromEnv(String? value, {required int defaultValue}) {
+  final parsed = int.tryParse(value?.trim() ?? '');
+  if (parsed == null || parsed <= 0) {
+    return defaultValue;
+  }
+  return parsed;
+}
diff --git a/packages/stem/example/microservice/enqueuer/pubspec.yaml b/packages/stem/example/microservice/enqueuer/pubspec.yaml
index a0cc865..23a48ed 100644
--- a/packages/stem/example/microservice/enqueuer/pubspec.yaml
+++ b/packages/stem/example/microservice/enqueuer/pubspec.yaml
@@ -18,4 +18,6 @@ dependency_overrides:
   stem:
     path: ../../..
   stem_redis:
-    path: ../../../../stem_redis
\ No newline at end of file
+    path: ../../../../stem_redis
+  stem_memory:
+    path: ../../../../stem_memory
diff --git a/packages/stem/example/microservice/nginx.conf b/packages/stem/example/microservice/nginx.conf
index 0b952b2..812af79 100644
--- a/packages/stem/example/microservice/nginx.conf
+++ b/packages/stem/example/microservice/nginx.conf
@@ -37,30 +37,48 @@ http {
     }
 
     # Grafana dashboard (served from /grafana/)
+    location = /grafana {
+      return 301 /grafana/;
+    }
+
     location /grafana/ {
-      proxy_pass http://grafana:3000/;
+      proxy_pass http://grafana:3000;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
+      proxy_set_header X-Forwarded-Host $host;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection $connection_upgrade;
     }
 
     # Prometheus UI (served from /prometheus/)
+    location = /prometheus {
+      return 301 /prometheus/;
+    }
+
     location /prometheus/ {
-      proxy_pass http://prometheus:9090/;
+      proxy_pass http://prometheus:9090;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
+      proxy_set_header X-Forwarded-Host $host;
     }
 
     # Jaeger UI (served from /jaeger/)
+    location = /jaeger {
+      return 301 /jaeger/;
+    }
+
     location /jaeger/ {
-      proxy_pass http://jaeger:16686/;
+      proxy_pass http://jaeger:16686;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
+      proxy_set_header X-Forwarded-Host $host;
     }
   }
 }
diff --git a/packages/stem/example/microservice/schedules.example.yaml b/packages/stem/example/microservice/schedules.example.yaml
index f0f608f..9938234 100644
--- a/packages/stem/example/microservice/schedules.example.yaml
+++ b/packages/stem/example/microservice/schedules.example.yaml
@@ -2,9 +2,71 @@ entries:
   - id: greetings-reminder
     task: greeting.send
     queue: greetings
-    spec: every:1m
-    jitter: 10s
+    spec: every:30s
+    jitter: 5s
     args:
       name: scheduled friend
+      delayMs: 500
     meta:
       seeded: true
+
+  - id: greetings-followup
+    task: customer.followup
+    queue: greetings
+    spec: every:12s
+    jitter: 1s
+    args:
+      name: scheduled followup
+      delayMs: 450
+    meta:
+      seeded: true
+      namespace: customer-experience
+
+  - id: billing-charge
+    task: billing.charge
+    queue: billing
+    spec: every:18s
+    jitter: 2s
+    args:
+      name: scheduled charge
+      delayMs: 700
+    meta:
+      seeded: true
+      namespace: revenue
+
+  - id: billing-settlement
+    task: billing.settlement
+    queue: billing
+    spec: every:40s
+    jitter: 3s
+    args:
+      name: scheduled settlement
+      delayMs: 900
+    meta:
+      seeded: true
+      namespace: revenue
+
+  - id: reports-aggregate
+    task: reports.aggregate
+    queue: reporting
+    spec: every:25s
+    jitter: 2s
+    args:
+      name: scheduled aggregate
+      delayMs: 850
+    meta:
+      seeded: true
+      namespace: analytics
+
+  - id: reports-publish-flaky
+    task: reports.publish
+    queue: reporting
+    spec: every:55s
+    jitter: 3s
+    args:
+      name: scheduled publish
+      fail: true
+      delayMs: 650
+    meta:
+      seeded: true
+      namespace: analytics
diff --git a/packages/stem/example/microservice/worker/Dockerfile b/packages/stem/example/microservice/worker/Dockerfile
index 32cfa43..899c89f 100644
--- a/packages/stem/example/microservice/worker/Dockerfile
+++ b/packages/stem/example/microservice/worker/Dockerfile
@@ -3,6 +3,7 @@
 FROM dart:stable
 WORKDIR /workspace
 COPY . /workspace
-WORKDIR /workspace/example/microservice/worker
+WORKDIR /workspace/packages/stem/example/microservice/worker
 ENV DART_PUB_CACHE=/tmp/.dart_pub_cache
+ENV PATH=/usr/lib/dart/bin:$PATH
 CMD ["sh", "-c", "dart pub get && dart run bin/worker.dart"]
diff --git a/packages/stem/example/microservice/worker/bin/worker.dart b/packages/stem/example/microservice/worker/bin/worker.dart
index 46bfaa9..0f24a19 100644
--- a/packages/stem/example/microservice/worker/bin/worker.dart
+++ b/packages/stem/example/microservice/worker/bin/worker.dart
@@ -4,6 +4,60 @@ import 'dart:io';
 import 'package:stem/stem.dart';
 import 'package:stem_redis/stem_redis.dart';
 
+const _taskSpecs = <_WorkerTaskSpec>[
+  _WorkerTaskSpec(
+    name: 'greeting.send',
+    queue: 'greetings',
+    maxRetries: 5,
+    softLimit: Duration(seconds: 10),
+    hardLimit: Duration(seconds: 20),
+  ),
+  _WorkerTaskSpec(
+    name: 'customer.followup',
+    queue: 'greetings',
+    maxRetries: 4,
+    softLimit: Duration(seconds: 12),
+    hardLimit: Duration(seconds: 22),
+  ),
+  _WorkerTaskSpec(
+    name: 'billing.charge',
+    queue: 'billing',
+    maxRetries: 5,
+    softLimit: Duration(seconds: 12),
+    hardLimit: Duration(seconds: 24),
+  ),
+  _WorkerTaskSpec(
+    name: 'billing.settlement',
+    queue: 'billing',
+    maxRetries: 3,
+    softLimit: Duration(seconds: 10),
+    hardLimit: Duration(seconds: 18),
+  ),
+  _WorkerTaskSpec(
+    name: 'reports.aggregate',
+    queue: 'reporting',
+    maxRetries: 2,
+    softLimit: Duration(seconds: 12),
+    hardLimit: Duration(seconds: 24),
+  ),
+  _WorkerTaskSpec(
+    name: 'reports.publish',
+    queue: 'reporting',
+    maxRetries: 2,
+    softLimit: Duration(seconds: 10),
+    hardLimit: Duration(seconds: 18),
+  ),
+];
+
+final _taskEntrypoints = <String, TaskEntrypoint>{
+  'greeting.send': _greetingSendEntrypoint,
+  'customer.followup': _customerFollowupEntrypoint,
+  'billing.charge': _billingChargeEntrypoint,
+  'billing.settlement': _billingSettlementEntrypoint,
+  'reports.aggregate': _reportsAggregateEntrypoint,
+  'reports.publish': _reportsPublishEntrypoint,
+};
+
 Future<void> main(List<String> args) async {
   // #region signing-worker-config
   final config = StemConfig.fromEnvironment();
@@ -22,29 +76,44 @@ Future<void> main(List<String> args) async {
   final signer = PayloadSigner.maybe(config.signing);
   // #endregion signing-worker-signer
 
-  final registry = SimpleTaskRegistry()
-    ..register(
+  final registry = SimpleTaskRegistry();
+  for (final spec in _taskSpecs) {
+    final entrypoint = _taskEntrypoints[spec.name];
+    if (entrypoint == null) {
+      throw StateError('Missing task entrypoint for ${spec.name}');
+    }
+    registry.register(
       FunctionTaskHandler<String>(
-        name: 'greeting.send',
-        entrypoint: _greetingEntrypoint,
-        options: const TaskOptions(
-          queue: 'greetings',
-          maxRetries: 5,
-          softTimeLimit: Duration(seconds: 10),
-          hardTimeLimit: Duration(seconds: 20),
+        name: spec.name,
+        entrypoint: entrypoint,
+        options: TaskOptions(
+          queue: spec.queue,
+          maxRetries: spec.maxRetries,
+          softTimeLimit: spec.softLimit,
+          hardTimeLimit: spec.hardLimit,
         ),
       ),
     );
+  }
 
   final observability = ObservabilityConfig.fromEnvironment();
+  final configuredWorkerName = Platform.environment['STEM_WORKER_NAME']?.trim();
+  final configuredQueue = Platform.environment['STEM_WORKER_QUEUE']?.trim();
+  final queue = configuredQueue != null && configuredQueue.isNotEmpty
+      ? configuredQueue
+      : 'greetings';
+  final resolvedWorkerName =
+      configuredWorkerName != null && configuredWorkerName.isNotEmpty
+          ? configuredWorkerName
+          : 'microservice-worker-${Platform.environment['HOSTNAME'] ?? pid}';
 
   // #region signing-worker-wire
   final worker = Worker(
     broker: broker,
     registry: registry,
     backend: backend,
-    queue: 'greetings',
-    consumerName: 'microservice-worker',
+    queue: queue,
+    consumerName: resolvedWorkerName,
     concurrency: 4,
     prefetchMultiplier: 2,
     signer: signer,
@@ -53,7 +122,9 @@ Future<void> main(List<String> args) async {
   // #endregion signing-worker-wire
 
   await worker.start();
-  stdout.writeln('Worker listening for greetings...');
+  stdout.writeln(
+    'Worker "$resolvedWorkerName" listening on queue "$queue"...',
+  );
 
   ProcessSignal.sigint.watch().listen((_) async {
     stdout.writeln('Stopping worker...');
@@ -68,15 +139,89 @@ Future<void> main(List<String> args) async {
   await Completer<void>().future; // Keep process alive
 }
 
-FutureOr<Object?> _greetingEntrypoint(
+FutureOr<Object?> _greetingSendEntrypoint(
+  TaskInvocationContext context,
+  Map<String, Object?> args,
+) =>
+    _taskEntrypoint('greeting.send', context, args);
+
+FutureOr<Object?> _customerFollowupEntrypoint(
+  TaskInvocationContext context,
+  Map<String, Object?> args,
+) =>
+    _taskEntrypoint('customer.followup', context, args);
+
+FutureOr<Object?> _billingChargeEntrypoint(
+  TaskInvocationContext context,
+  Map<String, Object?> args,
+) =>
+    _taskEntrypoint('billing.charge', context, args);
+
+FutureOr<Object?> _billingSettlementEntrypoint(
+  TaskInvocationContext context,
+  Map<String, Object?> args,
+) =>
+    _taskEntrypoint('billing.settlement', context, args);
+
+FutureOr<Object?> _reportsAggregateEntrypoint(
+  TaskInvocationContext context,
+  Map<String, Object?> args,
+) =>
+    _taskEntrypoint('reports.aggregate', context, args);
+
+FutureOr<Object?> _reportsPublishEntrypoint(
+  TaskInvocationContext context,
+  Map<String, Object?> args,
+) =>
+    _taskEntrypoint('reports.publish', context, args);
+
+FutureOr<Object?> _taskEntrypoint(
+  String taskName,
   TaskInvocationContext context,
   Map<String, Object?> args,
 ) async {
   final name = (args['name'] as String?) ?? 'friend';
-  context.heartbeat();
-  await Future<void>.delayed(const Duration(milliseconds: 500));
-  final message = 'Processed greeting for $name ';
-  stdout.writeln('👋 $message (attempt ${context.attempt})');
+  final fail = args['fail'] == true;
+  final delayMsRaw = switch (args['delayMs']) {
+    int value => value,
+    num value => value.toInt(),
+    String value => int.tryParse(value),
+    _ => null,
+  };
+  final delayMs = delayMsRaw == null || delayMsRaw <= 0 ? 500 : delayMsRaw;
+  final totalSteps = (delayMs / 200).ceil().clamp(1, 60);
+  for (var step = 1; step <= totalSteps; step++) {
+    context.heartbeat();
+    context.progress(step / totalSteps, data: {
+      'step': step,
+      'totalSteps': totalSteps,
+      'name': name,
+    });
+    await Future<void>.delayed(const Duration(milliseconds: 200));
+  }
+  if (fail) {
+    throw StateError(
+      'Synthetic failure requested for task=$taskName label=$name',
+    );
+  }
+  final message = 'Processed $taskName for $name';
+  stdout.writeln('$message (attempt ${context.attempt})');
   context.progress(1.0, data: {'message': message});
   return message;
 }
+
+class _WorkerTaskSpec {
+  const _WorkerTaskSpec({
+    required this.name,
+    required this.queue,
+    required this.maxRetries,
+    required this.softLimit,
+    required this.hardLimit,
+  });
+
+  final String name;
+  final String queue;
+  final int maxRetries;
+  final Duration softLimit;
+  final Duration hardLimit;
+}
diff --git a/packages/stem/example/microservice/worker/pubspec.yaml b/packages/stem/example/microservice/worker/pubspec.yaml
index 65a36a5..adfdc68 100644
--- a/packages/stem/example/microservice/worker/pubspec.yaml
+++ b/packages/stem/example/microservice/worker/pubspec.yaml
@@ -17,3 +17,5 @@ dev_dependencies:
 dependency_overrides:
   stem:
     path: ../../..
+  stem_memory:
+    path: ../../../../stem_memory

From cfd852f6b805c2963a94ec486be5fd89b3bf0cb9 Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 10:14:30 -0500
Subject: [PATCH 09/14] docs(changelog): add unreleased notes for stem and
 dashboard

---
 packages/dashboard/CHANGELOG.md | 14 ++++++++++++++
 packages/stem/CHANGELOG.md      | 15 +++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/packages/dashboard/CHANGELOG.md b/packages/dashboard/CHANGELOG.md
index 9b244c5..9be61cb 100644
--- a/packages/dashboard/CHANGELOG.md
+++ b/packages/dashboard/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Changelog
 
+## Unreleased
+
+- Reworked the dashboard into a richer operations console with dedicated views
+  for tasks, jobs, workflows, workers, failures, audit, events, namespaces, and
+  search.
+- Refactored UI rendering into modular page components and shared table/layout
+  primitives for better maintainability.
+- Introduced a full Tailwind-based styling system and updated responsive layout
+  behavior for sidebar/header/content rendering.
+- Improved navigation and Turbo frame behavior to reduce stale-content flashes
+  during page switches.
+- Expanded dashboard state/service/server models and test coverage to support
+  the new views and metadata-rich rendering paths.
+
 ## 0.1.0
 
 - Initial release of the `stem_dashboard` package.
diff --git a/packages/stem/CHANGELOG.md b/packages/stem/CHANGELOG.md
index f3e0526..e89b2de 100644
--- a/packages/stem/CHANGELOG.md
+++ b/packages/stem/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Changelog
 
+## Unreleased
+
+- Expanded span attribution across enqueue/consume/execute with task identity,
+  queue, worker, host, lineage, namespace, and workflow step metadata
+  (`run_id`, `step`, `step_id`, `step_index`, `step_attempt`, `iteration`).
+- Improved worker retry republish behavior to preserve optional payload signing
+  when retrying deliveries.
+- Added workflow metadata quality-of-life getters and watcher/run-state helpers
+  to make workflow introspection easier from task metadata.
+- Strengthened tracing and workflow-related test coverage for metadata
+  propagation and contract behavior.
+- Expanded the microservice example with richer workload generation, queue
+  diversity, updated scheduler/demo flows, and full local observability wiring
+  for Jaeger/Prometheus/Grafana through nginx.
+
 ## 0.1.1
 
 - Improved bootstrap DX with explicit fail-fast errors across broker/backend/

From 3f8b0c9ffd3ca02216f8f12abe93bbfaa1d40dca Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 10:15:30 -0500
Subject: [PATCH 10/14] docs(changelog): fold notes into current package
 versions

---
 packages/dashboard/CHANGELOG.md | 5 +----
 packages/stem/CHANGELOG.md      | 5 +----
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/dashboard/CHANGELOG.md b/packages/dashboard/CHANGELOG.md
index 9be61cb..b9e5c2b 100644
--- a/packages/dashboard/CHANGELOG.md
+++ b/packages/dashboard/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Changelog
 
-## Unreleased
+## 0.1.0
 
 - Reworked the dashboard into a richer operations console with dedicated views
   for tasks, jobs, workflows, workers, failures, audit, events, namespaces, and
@@ -13,7 +13,4 @@
   during page switches.
 - Expanded dashboard state/service/server models and test coverage to support
   the new views and metadata-rich rendering paths.
-
-## 0.1.0
-
 - Initial release of the `stem_dashboard` package.
diff --git a/packages/stem/CHANGELOG.md b/packages/stem/CHANGELOG.md
index e89b2de..f9620a2 100644
--- a/packages/stem/CHANGELOG.md
+++ b/packages/stem/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Changelog
 
-## Unreleased
+## 0.1.1
 
 - Expanded span attribution across enqueue/consume/execute with task identity,
   queue, worker, host, lineage, namespace, and workflow step metadata
@@ -14,9 +14,6 @@
 - Expanded the microservice example with richer workload generation, queue
   diversity, updated scheduler/demo flows, and full local observability wiring
   for Jaeger/Prometheus/Grafana through nginx.
-
-## 0.1.1
-
 - Improved bootstrap DX with explicit fail-fast errors across broker/backend/
   workflow/schedule/lock/revoke resolution paths in `StemStack.fromUrl`,
   including actionable hints when adapters support a URL but do not implement

From f14ac22ccf6f6c3466c9d8d6c51eb09ba8566dc4 Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 11:15:25 -0500
Subject: [PATCH 11/14] fix(tracing): preserve enqueue parent context from
 ambient spans

---
 packages/stem/lib/src/core/stem.dart          | 10 +++--
 .../stem/test/unit/tracing/tracing_test.dart  | 40 +++++++++++++++++++
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/packages/stem/lib/src/core/stem.dart b/packages/stem/lib/src/core/stem.dart
index 0ab05ef..d97caed 100644
--- a/packages/stem/lib/src/core/stem.dart
+++ b/packages/stem/lib/src/core/stem.dart
@@ -246,10 +246,12 @@ class Stem implements TaskEnqueuer {
     }
     _appendTracingMetaAttributes(spanAttributes, enrichedMeta);
 
-    // Use explicit wire headers as the only source of producer parent context.
-    // This avoids accidental context bleed from unrelated async operations
-    // while still supporting distributed parent propagation via traceparent.
-    final producerParentContext = tracer.extractTraceContext(headers);
+    // Prefer explicit wire headers when present, but still fall back to the
+    // current ambient span so in-process producers preserve parent linkage.
+    final producerParentContext = tracer.extractTraceContext(
+      headers,
+      context: dotel.Context.current,
+    );
 
     return tracer.trace(
       'stem.enqueue',
diff --git a/packages/stem/test/unit/tracing/tracing_test.dart b/packages/stem/test/unit/tracing/tracing_test.dart
index cfd39a2..4e91eec 100644
--- a/packages/stem/test/unit/tracing/tracing_test.dart
+++ b/packages/stem/test/unit/tracing/tracing_test.dart
@@ -258,4 +258,44 @@ void main() {
         .toSet();
     expect(consumeTraceIds.length, equals(2));
   });
+
+  test(
+    'enqueue span uses ambient parent context when headers are absent',
+    () async {
+      final broker = InMemoryBroker();
+      final backend = InMemoryResultBackend();
+      final registry = SimpleTaskRegistry()
+        ..register(
+          FunctionTaskHandler<void>(
+            name: 'trace.parent',
+            entrypoint: (context, args) async => null,
+          ),
+        );
+      final stem = Stem(broker: broker, registry: registry, backend: backend);
+      final tracer = dotel.OTel.tracerProvider().getTracer('stem-test-parent');
+
+      final parent = tracer.startSpan('http.request');
+      await tracer.withSpanAsync(parent, () async {
+        await stem.enqueue('trace.parent');
+      });
+      parent.end();
+      broker.dispose();
+
+      final enqueueSpan = exporter.spans.lastWhere(
+        (span) => span.name == 'stem.enqueue',
+      );
+      final parentSpan = exporter.spans.lastWhere(
+        (span) => span.name == 'http.request',
+      );
+
+      final enqueueParentId =
+          enqueueSpan.parentSpanContext?.spanId.hexString ??
+          enqueueSpan.parentSpan?.spanContext.spanId.hexString;
+      expect(enqueueParentId, parentSpan.spanContext.spanId.hexString);
+      expect(
+        enqueueSpan.spanContext.traceId.hexString,
+        parentSpan.spanContext.traceId.hexString,
+      );
+    },
+  );
 }

From dfbb33d5ce10263e3db4296ae1f4489113489151 Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 11:15:32 -0500
Subject: [PATCH 12/14] fix(dashboard): harden polling and escape unsafe ui
 content

---
 .../lib/src/state/dashboard_state.dart        |  55 +++--
 .../dashboard/lib/src/ui/event_templates.dart |  12 +-
 packages/dashboard/lib/src/ui/paths.dart      |   2 +-
 packages/dashboard/lib/src/ui/shared.dart     |  11 +-
 packages/dashboard/lib/src/ui/workers.dart    |   8 +-
 .../test/dashboard_state_poll_test.dart       | 209 ++++++++++++++++++
 packages/dashboard/test/ui_escape_test.dart   |  74 +++++++
 packages/dashboard/test/ui_paths_test.dart    |  31 +++
 8 files changed, 373 insertions(+), 29 deletions(-)
 create mode 100644 packages/dashboard/test/dashboard_state_poll_test.dart
 create mode 100644 packages/dashboard/test/ui_escape_test.dart
 create mode 100644 packages/dashboard/test/ui_paths_test.dart

diff --git a/packages/dashboard/lib/src/state/dashboard_state.dart b/packages/dashboard/lib/src/state/dashboard_state.dart
index 12b1d9e..0dd8696 100644
--- a/packages/dashboard/lib/src/state/dashboard_state.dart
+++ b/packages/dashboard/lib/src/state/dashboard_state.dart
@@ -24,6 +24,8 @@ class DashboardState {
     this.alertCooldown = const Duration(minutes: 5),
   }) : hub = TurboStreamHub();
 
+  static const _alertWebhookTimeout = Duration(seconds: 5);
+
   /// Data source used to fetch queues and workers.
   final DashboardDataSource service;
 
@@ -103,13 +105,14 @@ class DashboardState {
   Future<void> runOnce() => _poll();
 
   Future<void> _poll() async {
-    final queueFuture = service.fetchQueueSummaries();
-    final workerFuture = service.fetchWorkerStatuses();
-    final taskFuture = service.fetchTaskStatuses(limit: 120);
-
-    final queues = await queueFuture;
-    final workers = await workerFuture;
-    final tasks = await taskFuture;
+    final results = await Future.wait<Object>([
+      service.fetchQueueSummaries(),
+      service.fetchWorkerStatuses(),
+      service.fetchTaskStatuses(limit: 120),
+    ]);
+    final queues = results[0] as List<QueueSummary>;
+    final workers = results[1] as List<WorkerStatus>;
+    final tasks = results[2] as List<DashboardTaskStatusEntry>;
     _updateThroughput(queues);
 
     _generateQueueEvents(_previousQueues, queues);
@@ -397,7 +400,8 @@ class DashboardState {
     if (totalPending >= alertBacklogThreshold) {
       await _emitAlert(
         key: 'queue.backlog.high',
-        summary: 'Backlog threshold exceeded: '
+        summary:
+            'Backlog threshold exceeded: '
             '$totalPending >= $alertBacklogThreshold.',
         metadata: {
           'pendingTotal': totalPending,
@@ -413,7 +417,8 @@ class DashboardState {
     if (failedCount >= alertFailedTaskThreshold) {
       await _emitAlert(
         key: 'tasks.failed.high',
-        summary: 'Failed task threshold exceeded: '
+        summary:
+            'Failed task threshold exceeded: '
             '$failedCount >= $alertFailedTaskThreshold.',
         metadata: {
           'failedCount': failedCount,
@@ -513,13 +518,21 @@ class DashboardState {
         continue;
       }
 
+      final client = HttpClient()..connectionTimeout = _alertWebhookTimeout;
       HttpClientRequest? request;
+      var shouldAbortRequest = false;
       try {
-        final client = HttpClient();
-        request = await client.postUrl(uri);
+        request = await client.postUrl(uri).timeout(_alertWebhookTimeout);
+        shouldAbortRequest = true;
         request.headers.contentType = ContentType.json;
         request.add(utf8.encode(jsonEncode(payload)));
-        final response = await request.close();
+        final response = await request.close().timeout(_alertWebhookTimeout);
+        shouldAbortRequest = false;
+        try {
+          await response.drain<void>().timeout(_alertWebhookTimeout);
+        } on Object {
+          // Response body is optional for webhook auditing.
+        }
         if (response.statusCode >= 200 && response.statusCode < 300) {
           recordAudit(
             kind: 'alert',
@@ -537,9 +550,21 @@ class DashboardState {
             summary: 'Webhook returned HTTP ${response.statusCode} for $url.',
           );
         }
-        client.close(force: true);
+      } on TimeoutException {
+        if (shouldAbortRequest) {
+          request?.abort();
+        }
+        recordAudit(
+          kind: 'alert',
+          action: key,
+          status: 'error',
+          actor: 'system',
+          summary: 'Webhook delivery timed out for $url.',
+        );
       } on Object catch (error) {
-        request?.abort();
+        if (shouldAbortRequest) {
+          request?.abort();
+        }
         recordAudit(
           kind: 'alert',
           action: key,
@@ -547,6 +572,8 @@ class DashboardState {
           actor: 'system',
           summary: 'Webhook delivery failed for $url: $error',
         );
+      } finally {
+        client.close(force: true);
       }
     }
   }
diff --git a/packages/dashboard/lib/src/ui/event_templates.dart b/packages/dashboard/lib/src/ui/event_templates.dart
index 0446c54..b796f58 100644
--- a/packages/dashboard/lib/src/ui/event_templates.dart
+++ b/packages/dashboard/lib/src/ui/event_templates.dart
@@ -1,23 +1,25 @@
 import 'package:intl/intl.dart';
 
 import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/shared.dart' show escapeHtml;
 
 final _eventTimeFormat = DateFormat('HH:mm:ss');
 
 /// Renders a dashboard event as an HTML list item.
 String renderEventItem(DashboardEvent event) {
   final timestamp = _eventTimeFormat.format(event.timestamp.toLocal());
-  final metadataItems = event.metadata.entries
-      .map((entry) => '<span>${entry.key}: ${entry.value}</span>')
-      .join();
+  final metadataItems = event.metadata.entries.map((entry) {
+    final value = entry.value == null ? 'null' : entry.value.toString();
+    return '<span>${escapeHtml(entry.key)}: ${escapeHtml(value)}</span>';
+  }).join();
   final summary = event.summary != null && event.summary!.isNotEmpty
-      ? '<p class="muted mt-3 leading-relaxed">${event.summary}</p>'
+      ? '<p class="muted mt-3 leading-relaxed">${escapeHtml(event.summary!)}</p>'
       : '';
 
   return '''
 <details class="event-item ring-1 ring-inset ring-sky-300/10" data-event>
   <summary>
-    <span class="event-title">${event.title}</span>
+    <span class="event-title">${escapeHtml(event.title)}</span>
     <span class="event-time">$timestamp</span>
   </summary>
   $summary
diff --git a/packages/dashboard/lib/src/ui/paths.dart b/packages/dashboard/lib/src/ui/paths.dart
index 01a1b90..fe1e60e 100644
--- a/packages/dashboard/lib/src/ui/paths.dart
+++ b/packages/dashboard/lib/src/ui/paths.dart
@@ -23,7 +23,7 @@ String prefixDashboardUrlAttributes(String html, String basePath) {
   if (normalizedBasePath.isEmpty) return html;
 
   return html.replaceAllMapped(
-    RegExp(r'''(href|action|value)=("')/(?!/)([^"']*)\2'''),
+    RegExp(r'''(href|action|value)=(["'])/(?!/)([^"']*)\2'''),
     (match) {
       final attribute = match.group(1)!;
       final quote = match.group(2)!;
diff --git a/packages/dashboard/lib/src/ui/shared.dart b/packages/dashboard/lib/src/ui/shared.dart
index 8be94c7..c6cdb68 100644
--- a/packages/dashboard/lib/src/ui/shared.dart
+++ b/packages/dashboard/lib/src/ui/shared.dart
@@ -9,14 +9,15 @@ import 'package:stem_dashboard/src/services/models.dart';
 final dashboardNumberFormat = NumberFormat.decimalPattern();
 
 String buildQueueTableRow(QueueSummary summary) {
+  final escapedQueue = escapeHtml(summary.queue);
   return '''
-<tr class="queue-row group" data-queue-row="${summary.queue}">
-  <td><span class="pill">${summary.queue}</span></td>
+<tr class="queue-row group" data-queue-row="$escapedQueue">
+  <td><span class="pill">$escapedQueue</span></td>
   <td class="font-medium text-slate-100">${formatInt(summary.pending)}</td>
   <td class="font-medium text-slate-100">${formatInt(summary.inflight)}</td>
   <td class="font-medium text-slate-100">${formatInt(summary.deadLetters)}</td>
 </tr>
-<tr class="queue-detail" data-queue-detail="${summary.queue}">
+<tr class="queue-detail" data-queue-detail="$escapedQueue">
   <td colspan="4" class="bg-slate-950/40">
     <div class="detail-grid">
       <div><span class="muted">Pending</span> ${formatInt(summary.pending)}</div>
@@ -177,9 +178,7 @@ String buildTaskStatusTable(
   <td colspan="${headers.length}" class="muted">${escapeHtml(options.emptyMessage)}</td>
 </tr>
 '''
-      : tasks
-            .map((task) => _buildTaskStatusRow(task, options: options))
-            .join();
+      : tasks.map((task) => _buildTaskStatusRow(task, options: options)).join();
 
   return '''
 <table>
diff --git a/packages/dashboard/lib/src/ui/workers.dart b/packages/dashboard/lib/src/ui/workers.dart
index 8893047..f580faa 100644
--- a/packages/dashboard/lib/src/ui/workers.dart
+++ b/packages/dashboard/lib/src/ui/workers.dart
@@ -79,7 +79,7 @@ ${renderWorkersAlert(options)}
     <tbody>
       ${filteredWorkers.isEmpty ? '''
               <tr>
-                <td colspan="7" class="muted">No heartbeats detected for namespace "${options.namespaceFilter ?? 'stem'}".</td>
+                <td colspan="7" class="muted">No heartbeats detected for namespace "${escapeHtml(options.namespaceFilter ?? 'stem')}".</td>
               </tr>
             ''' : filteredWorkers.map((worker) => buildWorkerRow(worker, namespaceFilter: options.namespaceFilter)).join()}
     </tbody>
@@ -98,11 +98,13 @@ String buildWorkerRow(WorkerStatus status, {String? namespaceFilter}) {
   final queues = status.queues.isEmpty
       ? '<span class="muted">—</span>'
       : status.queues
-            .map((queue) => '<span class="pill">${queue.name}</span>')
+            .map(
+              (queue) => '<span class="pill">${escapeHtml(queue.name)}</span>',
+            )
             .join(' ');
   return '''
 <tr>
-  <td class="font-semibold text-slate-100">${status.workerId}</td>
+  <td class="font-semibold text-slate-100">${escapeHtml(status.workerId)}</td>
   <td><span class="pill">${escapeHtml(status.namespace)}</span></td>
   <td>$queues</td>
   <td>${formatInt(status.inflight)}</td>
diff --git a/packages/dashboard/test/dashboard_state_poll_test.dart b/packages/dashboard/test/dashboard_state_poll_test.dart
new file mode 100644
index 0000000..6482ced
--- /dev/null
+++ b/packages/dashboard/test/dashboard_state_poll_test.dart
@@ -0,0 +1,209 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:stem/stem.dart'
+    show DeadLetterEntry, DeadLetterReplayResult, TaskState;
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/services/stem_service.dart';
+import 'package:stem_dashboard/src/state/dashboard_state.dart';
+import 'package:stem_dashboard/src/stem/control_messages.dart';
+import 'package:test/test.dart';
+
+class _FailingPollService implements DashboardDataSource {
+  @override
+  Future<List<QueueSummary>> fetchQueueSummaries() async {
+    throw StateError('queue failed');
+  }
+
+  @override
+  Future<List<WorkerStatus>> fetchWorkerStatuses() async {
+    await Future<void>.delayed(const Duration(milliseconds: 10));
+    throw StateError('worker failed');
+  }
+
+  @override
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatuses({
+    TaskState? state,
+    String? queue,
+    int limit = 100,
+    int offset = 0,
+  }) async {
+    await Future<void>.delayed(const Duration(milliseconds: 20));
+    throw StateError('tasks failed');
+  }
+
+  @override
+  Future<DashboardTaskStatusEntry?> fetchTaskStatus(String taskId) async =>
+      null;
+
+  @override
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatusesForRun(
+    String runId, {
+    int limit = 200,
+  }) async => const [];
+
+  @override
+  Future<DashboardWorkflowRunSnapshot?> fetchWorkflowRun(String runId) async =>
+      null;
+
+  @override
+  Future<List<DashboardWorkflowStepSnapshot>> fetchWorkflowSteps(
+    String runId,
+  ) async => const [];
+
+  @override
+  Future<void> enqueueTask(EnqueueRequest request) async {}
+
+  @override
+  Future<DeadLetterReplayResult> replayDeadLetters(
+    String queue, {
+    int limit = 50,
+    bool dryRun = false,
+  }) async =>
+      const DeadLetterReplayResult(entries: <DeadLetterEntry>[], dryRun: false);
+
+  @override
+  Future<bool> replayTaskById(String taskId, {String? queue}) async => false;
+
+  @override
+  Future<bool> revokeTask(
+    String taskId, {
+    bool terminate = false,
+    String? reason,
+  }) async => false;
+
+  @override
+  Future<List<ControlReplyMessage>> sendControlCommand(
+    ControlCommandMessage command, {
+    Duration timeout = const Duration(seconds: 5),
+  }) async => const [];
+
+  @override
+  Future<void> close() async {}
+}
+
+class _BacklogOnlyService implements DashboardDataSource {
+  @override
+  Future<List<QueueSummary>> fetchQueueSummaries() async => const [
+    QueueSummary(queue: 'default', pending: 999, inflight: 0, deadLetters: 0),
+  ];
+
+  @override
+  Future<List<WorkerStatus>> fetchWorkerStatuses() async => const [];
+
+  @override
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatuses({
+    TaskState? state,
+    String? queue,
+    int limit = 100,
+    int offset = 0,
+  }) async => const [];
+
+  @override
+  Future<DashboardTaskStatusEntry?> fetchTaskStatus(String taskId) async =>
+      null;
+
+  @override
+  Future<List<DashboardTaskStatusEntry>> fetchTaskStatusesForRun(
+    String runId, {
+    int limit = 200,
+  }) async => const [];
+
+  @override
+  Future<DashboardWorkflowRunSnapshot?> fetchWorkflowRun(String runId) async =>
+      null;
+
+  @override
+  Future<List<DashboardWorkflowStepSnapshot>> fetchWorkflowSteps(
+    String runId,
+  ) async => const [];
+
+  @override
+  Future<void> enqueueTask(EnqueueRequest request) async {}
+
+  @override
+  Future<DeadLetterReplayResult> replayDeadLetters(
+    String queue, {
+    int limit = 50,
+    bool dryRun = false,
+  }) async =>
+      const DeadLetterReplayResult(entries: <DeadLetterEntry>[], dryRun: false);
+
+  @override
+  Future<bool> replayTaskById(String taskId, {String? queue}) async => false;
+
+  @override
+  Future<bool> revokeTask(
+    String taskId, {
+    bool terminate = false,
+    String? reason,
+  }) async => false;
+
+  @override
+  Future<List<ControlReplyMessage>> sendControlCommand(
+    ControlCommandMessage command, {
+    Duration timeout = const Duration(seconds: 5),
+  }) async => const [];
+
+  @override
+  Future<void> close() async {}
+}
+
+void main() {
+  test(
+    'runOnce does not leak uncaught async errors when one poll call fails',
+    () async {
+      final uncaught = <Object>[];
+
+      await runZonedGuarded(
+        () async {
+          final state = DashboardState(
+            service: _FailingPollService(),
+            pollInterval: const Duration(hours: 1),
+          );
+
+          await expectLater(state.runOnce(), throwsA(isA<StateError>()));
+          await Future<void>.delayed(const Duration(milliseconds: 60));
+          await state.dispose();
+        },
+        (error, stackTrace) {
+          uncaught.add(error);
+        },
+      );
+
+      expect(uncaught, isEmpty);
+    },
+  );
+
+  test('alert webhook delivery times out and polling continues', () async {
+    final server = await HttpServer.bind(InternetAddress.loopbackIPv4, 0);
+    addTearDown(() => server.close(force: true));
+    server.listen((_) {
+      // Intentionally keep responses open to simulate a hanging endpoint.
+    });
+
+    final state = DashboardState(
+      service: _BacklogOnlyService(),
+      pollInterval: const Duration(hours: 1),
+      alertWebhookUrls: ['http://127.0.0.1:${server.port}/alerts'],
+      alertBacklogThreshold: 1,
+    );
+
+    final watch = Stopwatch()..start();
+    await state.runOnce();
+    watch.stop();
+
+    expect(watch.elapsed, lessThan(const Duration(seconds: 7)));
+    expect(
+      state.auditEntries.any(
+        (entry) =>
+            entry.kind == 'alert' &&
+            entry.status == 'error' &&
+            (entry.summary?.contains('timed out') ?? false),
+      ),
+      isTrue,
+    );
+
+    await state.dispose();
+  });
+}
diff --git a/packages/dashboard/test/ui_escape_test.dart b/packages/dashboard/test/ui_escape_test.dart
new file mode 100644
index 0000000..edc3c22
--- /dev/null
+++ b/packages/dashboard/test/ui_escape_test.dart
@@ -0,0 +1,74 @@
+import 'package:stem_dashboard/src/services/models.dart';
+import 'package:stem_dashboard/src/ui/event_templates.dart';
+import 'package:stem_dashboard/src/ui/options.dart';
+import 'package:stem_dashboard/src/ui/shared.dart';
+import 'package:stem_dashboard/src/ui/workers.dart';
+import 'package:test/test.dart';
+
+void main() {
+  test('buildWorkerRow escapes worker and queue values', () {
+    final html = buildWorkerRow(
+      WorkerStatus(
+        workerId: 'worker<script>alert(1)</script>',
+        namespace: 'stem',
+        timestamp: DateTime.utc(2026),
+        isolateCount: 2,
+        inflight: 1,
+        queues: const [
+          WorkerQueueInfo(name: 'queue" onclick="evil()', inflight: 1),
+        ],
+      ),
+    );
+
+    expect(html, contains('worker&lt;script&gt;alert(1)&lt;/script&gt;'));
+    expect(html, contains('queue&quot; onclick=&quot;evil()'));
+    expect(html, isNot(contains('worker<script>alert(1)</script>')));
+  });
+
+  test('buildWorkersContent escapes namespace filter in empty state', () {
+    final html = buildWorkersContent(
+      const [],
+      const [],
+      const WorkersPageOptions(namespaceFilter: '<svg/onload=alert(1)>'),
+    );
+
+    expect(html, contains('&lt;svg/onload=alert(1)&gt;'));
+    expect(html, isNot(contains('<svg/onload=alert(1)>')));
+  });
+
+  test('buildQueueTableRow escapes queue in content and attributes', () {
+    final html = buildQueueTableRow(
+      const QueueSummary(
+        queue: 'alpha" data-pwn="1',
+        pending: 1,
+        inflight: 0,
+        deadLetters: 0,
+      ),
+    );
+
+    expect(html, contains('data-queue-row="alpha&quot; data-pwn=&quot;1"'));
+    expect(
+      html,
+      contains('<span class="pill">alpha&quot; data-pwn=&quot;1</span>'),
+    );
+    expect(html, isNot(contains('data-queue-row="alpha" data-pwn="1"')));
+  });
+
+  test('renderEventItem escapes title, summary, and metadata values', () {
+    final html = renderEventItem(
+      DashboardEvent(
+        title: '<b>event</b>',
+        timestamp: DateTime.utc(2026),
+        summary: '<script>alert(1)</script>',
+        metadata: const {
+          'queue': '<img src=x onerror=alert(1)>',
+        },
+      ),
+    );
+
+    expect(html, contains('&lt;b&gt;event&lt;/b&gt;'));
+    expect(html, contains('&lt;script&gt;alert(1)&lt;/script&gt;'));
+    expect(html, contains('&lt;img src=x onerror=alert(1)&gt;'));
+    expect(html, isNot(contains('<script>alert(1)</script>')));
+  });
+}
diff --git a/packages/dashboard/test/ui_paths_test.dart b/packages/dashboard/test/ui_paths_test.dart
new file mode 100644
index 0000000..5fde2ea
--- /dev/null
+++ b/packages/dashboard/test/ui_paths_test.dart
@@ -0,0 +1,31 @@
+import 'package:stem_dashboard/src/ui/paths.dart';
+import 'package:test/test.dart';
+
+void main() {
+  test(
+    'prefixes root-relative url attributes while preserving quote style',
+    () {
+      const html =
+          '<a href="/tasks">Tasks</a> '
+          "<form action='/workers'></form> "
+          '<input value="/search?q=alpha" />';
+
+      final prefixed = prefixDashboardUrlAttributes(html, '/dashboard');
+
+      expect(prefixed, contains('href="/dashboard/tasks"'));
+      expect(prefixed, contains("action='/dashboard/workers'"));
+      expect(prefixed, contains('value="/dashboard/search?q=alpha"'));
+    },
+  );
+
+  test('does not rewrite protocol-relative urls', () {
+    const html =
+        '<a href="//cdn.example.com/app.js">CDN</a> '
+        '<form action="/workers"></form>';
+
+    final prefixed = prefixDashboardUrlAttributes(html, '/dashboard');
+
+    expect(prefixed, contains('href="//cdn.example.com/app.js"'));
+    expect(prefixed, contains('action="/dashboard/workers"'));
+  });
+}

From b2a93a7cffd9ed9e91f64c9290058333007f1f8b Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 11:15:39 -0500
Subject: [PATCH 13/14] chore(observability): pin grafana dashboards to
 datasource uids

---
 .../microservice/grafana-datasources.yml      |  2 ++
 .../grafana/dashboards/stem-overview.json     | 20 +++++++++----------
 .../grafana/dashboards/stem-scheduler.json    | 14 ++++++-------
 .../dashboards/stem-workers-queues.json       | 16 +++++++--------
 4 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/packages/stem/example/microservice/grafana-datasources.yml b/packages/stem/example/microservice/grafana-datasources.yml
index 47ef2b1..ef926e7 100644
--- a/packages/stem/example/microservice/grafana-datasources.yml
+++ b/packages/stem/example/microservice/grafana-datasources.yml
@@ -1,11 +1,13 @@
 apiVersion: 1
 datasources:
   - name: Prometheus
+    uid: stem-prometheus
     type: prometheus
     access: proxy
     url: http://prometheus:9090/prometheus
     isDefault: true
   - name: Jaeger
+    uid: stem-jaeger
     type: jaeger
     access: proxy
     url: http://jaeger:16686/jaeger
diff --git a/packages/stem/example/microservice/grafana/dashboards/stem-overview.json b/packages/stem/example/microservice/grafana/dashboards/stem-overview.json
index 9b650bf..f421e5f 100644
--- a/packages/stem/example/microservice/grafana/dashboards/stem-overview.json
+++ b/packages/stem/example/microservice/grafana/dashboards/stem-overview.json
@@ -23,7 +23,7 @@
   "liveNow": false,
   "panels": [
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "ops"
@@ -64,7 +64,7 @@
       "type": "stat"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "ops"
@@ -105,7 +105,7 @@
       "type": "stat"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "ops"
@@ -146,7 +146,7 @@
       "type": "stat"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "ops"
@@ -187,7 +187,7 @@
       "type": "stat"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "short"
@@ -228,7 +228,7 @@
       "type": "stat"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "short"
@@ -269,7 +269,7 @@
       "type": "stat"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "ops"
@@ -331,7 +331,7 @@
       "type": "timeseries"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "s"
@@ -371,7 +371,7 @@
       "type": "timeseries"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {},
         "overrides": []
@@ -399,7 +399,7 @@
       "type": "table"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {},
         "overrides": []
diff --git a/packages/stem/example/microservice/grafana/dashboards/stem-scheduler.json b/packages/stem/example/microservice/grafana/dashboards/stem-scheduler.json
index 146f8d0..ed56001 100644
--- a/packages/stem/example/microservice/grafana/dashboards/stem-scheduler.json
+++ b/packages/stem/example/microservice/grafana/dashboards/stem-scheduler.json
@@ -22,7 +22,7 @@
   "links": [],
   "panels": [
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "short"
@@ -63,7 +63,7 @@
       "type": "stat"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "short"
@@ -104,7 +104,7 @@
       "type": "stat"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "ops"
@@ -145,7 +145,7 @@
       "type": "stat"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "ops"
@@ -186,7 +186,7 @@
       "type": "stat"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "ops"
@@ -234,7 +234,7 @@
       "type": "timeseries"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "s"
@@ -282,7 +282,7 @@
       "type": "timeseries"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {},
         "overrides": []
diff --git a/packages/stem/example/microservice/grafana/dashboards/stem-workers-queues.json b/packages/stem/example/microservice/grafana/dashboards/stem-workers-queues.json
index dbc4c72..98c71a6 100644
--- a/packages/stem/example/microservice/grafana/dashboards/stem-workers-queues.json
+++ b/packages/stem/example/microservice/grafana/dashboards/stem-workers-queues.json
@@ -22,7 +22,7 @@
   "links": [],
   "panels": [
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "short"
@@ -61,7 +61,7 @@
       "type": "bargauge"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "short"
@@ -100,7 +100,7 @@
       "type": "bargauge"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "short"
@@ -141,7 +141,7 @@
       "type": "timeseries"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "ops"
@@ -182,7 +182,7 @@
       "type": "timeseries"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {
           "unit": "ops"
@@ -230,7 +230,7 @@
       "type": "timeseries"
     },
     {
-      "datasource": "Prometheus",
+      "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
       "fieldConfig": {
         "defaults": {},
         "overrides": []
@@ -282,7 +282,7 @@
           "text": "All",
           "value": "$__all"
         },
-        "datasource": "Prometheus",
+        "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
         "hide": 0,
         "includeAll": true,
         "label": "Namespace",
@@ -302,7 +302,7 @@
           "text": "All",
           "value": "$__all"
         },
-        "datasource": "Prometheus",
+        "datasource": {"type": "prometheus", "uid": "stem-prometheus"},
         "hide": 0,
         "includeAll": true,
         "label": "Queue",

From 69880d222826b939dfeef33f6ac7899f50a011dd Mon Sep 17 00:00:00 2001
From: kingwill101 <hey@glenfordwilliams.com>
Date: Wed, 25 Feb 2026 11:24:59 -0500
Subject: [PATCH 14/14] fix(ci): avoid tracing context crash when OTel is
 uninitialized

---
 packages/stem/lib/src/core/stem.dart                |  2 +-
 packages/stem/lib/src/observability/tracing.dart    | 13 +++++++++++++
 .../cli/cli_health_integration_test.dart            | 11 +++++++----
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/stem/lib/src/core/stem.dart b/packages/stem/lib/src/core/stem.dart
index d97caed..74f4f62 100644
--- a/packages/stem/lib/src/core/stem.dart
+++ b/packages/stem/lib/src/core/stem.dart
@@ -250,7 +250,7 @@ class Stem implements TaskEnqueuer {
     // current ambient span so in-process producers preserve parent linkage.
     final producerParentContext = tracer.extractTraceContext(
       headers,
-      context: dotel.Context.current,
+      context: tracer.ambientContextOrNull(),
     );
 
     return tracer.trace(
diff --git a/packages/stem/lib/src/observability/tracing.dart b/packages/stem/lib/src/observability/tracing.dart
index 24a8a51..9ee0cd8 100644
--- a/packages/stem/lib/src/observability/tracing.dart
+++ b/packages/stem/lib/src/observability/tracing.dart
@@ -137,6 +137,19 @@ class StemTracer {
     };
   }
 
+  /// Returns the current ambient tracing context when telemetry is ready.
+  ///
+  /// Returns `null` if OpenTelemetry is not initialized or no ambient context
+  /// can be resolved safely.
+  dotel.Context? ambientContextOrNull() {
+    if (!_isTelemetryReady) return null;
+    try {
+      return dotel.Context.current;
+    } on Object {
+      return null;
+    }
+  }
+
   dotel.SpanContext? _spanContextFrom(dotel.Context context) {
     final span = context.span;
     if (span != null && span.spanContext.isValid) {
diff --git a/packages/stem_cli/test/integration/cli/cli_health_integration_test.dart b/packages/stem_cli/test/integration/cli/cli_health_integration_test.dart
index 54ac332..155415e 100644
--- a/packages/stem_cli/test/integration/cli/cli_health_integration_test.dart
+++ b/packages/stem_cli/test/integration/cli/cli_health_integration_test.dart
@@ -41,10 +41,13 @@ void main() {
     );
 
     expect(exitCode, 0);
-    final output = stdoutBuffer.toString();
-    expect(output.toLowerCase(), contains('[ok]'));
-    expect(output, contains('broker: Connected to $redisUrl'));
-    expect(output, contains('backend: Connected to $postgresUrl'));
+    final output = stdoutBuffer.toString().toLowerCase();
+    expect(output, contains('health checks'));
+    expect(output, contains('broker: connected to ${redisUrl.toLowerCase()}'));
+    expect(
+      output,
+      contains('backend: connected to ${postgresUrl.toLowerCase()}'),
+    );
     expect(stderrBuffer.isEmpty, isTrue);
   });
 }