job_board 0.1.0

data/app/views/job_board/jobs/_filters.html.erb

@@ -0,0 +1,16 @@
+<%= form_with url: jobs_path, method: :get, class: "filters" do |form| %>
+  <%= form.hidden_field :status, value: @query.status %>
+  <label>
+    Queue
+    <%= form.select :queue_name, options_for_select(@queues.map(&:name), params[:queue_name]),
+          { include_blank: "All queues" } %>
+  </label>
+  <label>
+    Class
+    <%= form.text_field :class_name, value: params[:class_name], placeholder: "e.g. MyJob" %>
+  </label>
+  <%= form.submit "Filter", class: "btn" %>
+  <% if params[:queue_name].present? || params[:class_name].present? %>
+    <%= link_to "Clear", jobs_path(status: @query.status), class: "filters__clear" %>
+  <% end %>
+<% end %>

data/app/views/job_board/jobs/_job_row.html.erb

@@ -0,0 +1,31 @@
+<tr>
+  <td>
+    <%= link_to row.class_name, job_path(row.job) %>
+    <span class="muted">#<%= row.id %></span>
+  </td>
+  <td><%= row.queue_name %></td>
+  <% if list_status == "scheduled" %>
+    <td><%= time_ago(row.scheduled_at) %></td>
+  <% elsif list_status == "in_progress" %>
+    <td><%= row.process ? row.process.name : tag.span("orphaned", class: "badge badge--stale") %></td>
+  <% elsif list_status == "blocked" %>
+    <td><code><%= row.concurrency_key %></code></td>
+  <% elsif list_status == "failed" %>
+    <td class="error-cell">
+      <strong><%= row.error_class %></strong>
+      <span class="muted"><%= truncate(row.error_message, length: 80) %></span>
+    </td>
+  <% elsif list_status == "finished" %>
+    <td><%= time_ago(row.finished_at) %></td>
+  <% else %>
+    <td class="num"><%= row.priority %></td>
+  <% end %>
+  <td><%= time_ago(row.enqueued_at) %></td>
+  <% if list_status == "failed" %>
+    <td class="actions">
+      <%= button_to "Retry", retry_job_path(row.job), method: :post, class: "btn" %>
+      <%= button_to "Discard", discard_job_path(row.job), method: :delete, class: "btn btn--danger",
+            form: { data: { confirm: "Permanently discard job ##{row.id}? This can't be undone." } } %>
+    </td>
+  <% end %>
+</tr>

data/app/views/job_board/jobs/index.html.erb

@@ -0,0 +1,63 @@
+<h1>Jobs</h1>
+
+<%= render "job_board/jobs/filters" %>
+
+<nav class="tabs">
+  <% JobBoard::JobsQuery::STATUSES.each do |s| %>
+    <%= link_to jobs_path(status: s, queue_name: params[:queue_name], class_name: params[:class_name]),
+          class: "tab #{"tab--active" if @query.status == s}" do %>
+      <%= s.humanize %> <span class="tab__count"><%= @counts[s] %></span>
+    <% end %>
+  <% end %>
+</nav>
+
+<% if @query.status == "failed" && @counts["failed"].positive? %>
+  <div class="bulk-actions">
+    <%= button_to "Retry all (#{@counts["failed"]})",
+          retry_all_jobs_path(queue_name: params[:queue_name], class_name: params[:class_name]),
+          method: :post, class: "btn",
+          form: { data: { confirm: "Retry all #{@counts["failed"]} failed jobs matching the current filters?" } } %>
+    <%= button_to "Discard all (#{@counts["failed"]})",
+          discard_all_jobs_path(queue_name: params[:queue_name], class_name: params[:class_name]),
+          method: :post, class: "btn btn--danger",
+          form: { data: { confirm: "Permanently discard all #{@counts["failed"]} failed jobs matching the current filters? This can't be undone." } } %>
+  </div>
+<% end %>
+
+<div <%= 'data-poll-region="jobs"'.html_safe unless params[:before] %>>
+  <% if @page.empty? %>
+    <p class="empty-state">
+      <% if @query.status == "finished" && !SolidQueue.preserve_finished_jobs? %>
+        Finished jobs are not preserved (<code>SolidQueue.preserve_finished_jobs</code> is false),
+        so this list will always be empty.
+      <% else %>
+        No <%= @query.status.humanize.downcase %> jobs<%= " matching the current filters" if params[:queue_name].present? || params[:class_name].present? %>.
+      <% end %>
+    </p>
+  <% else %>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Job</th>
+          <th>Queue</th>
+          <% if @query.status == "scheduled" %><th>Scheduled at</th>
+          <% elsif @query.status == "in_progress" %><th>Process</th>
+          <% elsif @query.status == "blocked" %><th>Concurrency key</th>
+          <% elsif @query.status == "failed" %><th>Error</th>
+          <% elsif @query.status == "finished" %><th>Finished</th>
+          <% else %><th class="num">Priority</th>
+          <% end %>
+          <th>Enqueued</th>
+          <% if @query.status == "failed" %><th class="actions"></th><% end %>
+        </tr>
+      </thead>
+      <tbody>
+        <% @page.each do |row| %>
+          <%= render "job_board/jobs/job_row", row: row, list_status: @query.status %>
+        <% end %>
+      </tbody>
+    </table>
+  <% end %>
+</div>
+
+<%= render "job_board/shared/pagination", page: @page %>

data/app/views/job_board/jobs/show.html.erb

@@ -0,0 +1,56 @@
+<h1>
+  <%= @job.class_name %>
+  <span class="muted">#<%= @job.id %></span>
+  <%= status_badge(@job.status || :discarded) %>
+</h1>
+
+<table class="detail-table">
+  <tr><th>Queue</th><td><%= link_to @job.queue_name, jobs_path(queue_name: @job.queue_name) %></td></tr>
+  <tr><th>Priority</th><td><%= @job.priority %></td></tr>
+  <tr><th>Active Job ID</th><td><code><%= @job.active_job_id %></code></td></tr>
+  <% if @job.concurrency_key.present? %>
+    <tr><th>Concurrency key</th><td><code><%= @job.concurrency_key %></code></td></tr>
+  <% end %>
+  <tr><th>Enqueued</th><td><%= time_ago(@job.created_at) %></td></tr>
+  <% if @job.scheduled_at.present? %>
+    <tr><th>Scheduled</th><td><%= time_ago(@job.scheduled_at) %></td></tr>
+  <% end %>
+  <% if @job.finished_at.present? %>
+    <tr><th>Finished</th><td><%= time_ago(@job.finished_at) %></td></tr>
+  <% end %>
+  <% if @job.process %>
+    <tr><th>Claimed by</th><td><%= @job.process.name %> (<%= @job.process.hostname %>:<%= @job.process.pid %>)</td></tr>
+  <% end %>
+  <% if @job.executions_count.to_i.positive? %>
+    <tr><th>Executions</th><td><%= @job.executions_count %></td></tr>
+  <% end %>
+</table>
+
+<% if @job.error %>
+  <section class="error-panel">
+    <h2><%= @job.error.exception_class %></h2>
+    <p><%= @job.error.message %></p>
+    <% if @job.error.backtrace.present? %>
+      <pre><%= @job.error.backtrace.join("\n") %></pre>
+    <% end %>
+    <div class="actions-row">
+      <%= button_to "Retry", retry_job_path(@job.job), method: :post, class: "btn" %>
+      <%= button_to "Discard", discard_job_path(@job.job), method: :delete, class: "btn btn--danger",
+            form: { data: { confirm: "Permanently discard job ##{@job.id}? This can't be undone." } } %>
+    </div>
+  </section>
+<% end %>
+
+<section>
+  <h2>Arguments</h2>
+  <pre class="code-block"><%= format_json(@job.arguments) %></pre>
+</section>
+
+<% if @job.exception_executions.present? %>
+  <section>
+    <h2>Exception executions</h2>
+    <pre class="code-block"><%= format_json(@job.exception_executions) %></pre>
+  </section>
+<% end %>
+
+<p><%= link_to "← Back to jobs", jobs_path %></p>

data/app/views/job_board/processes/_process.html.erb

@@ -0,0 +1,28 @@
+<% process = node.process %>
+<tr>
+  <td style="padding-left: <%= 12 + depth * 24 %>px"><%= process.name %></td>
+  <td><span class="badge badge--kind"><%= process.kind %></span></td>
+  <td><%= process.hostname %>:<%= process.pid %></td>
+  <td class="meta-cell">
+    <% if process.metadata.present? %>
+      <% process.metadata.each do |key, value| %>
+        <span class="chip"><%= key %>: <%= value.is_a?(Array) ? value.join(", ") : value %></span>
+      <% end %>
+    <% end %>
+  </td>
+  <td>
+    <%= time_ago(process.last_heartbeat_at) %>
+    <% if node.stale %><span class="badge badge--stale">stale</span><% end %>
+  </td>
+  <td class="num">
+    <%= node.claimed_count %>
+    <% tree.claimed_executions_for(process).first(5).each do |execution| %>
+      <% if execution.job %>
+        <%= link_to "##{execution.job.id}", job_path(execution.job), class: "muted" %>
+      <% end %>
+    <% end %>
+  </td>
+</tr>
+<% node.children.each do |child| %>
+  <%= render "job_board/processes/process", node: child, tree: tree, depth: depth + 1 %>
+<% end %>

data/app/views/job_board/processes/index.html.erb

@@ -0,0 +1,32 @@
+<h1>Workers</h1>
+
+<div data-poll-region="processes">
+  <% if @tree.orphaned_claimed_count.positive? %>
+    <div class="flash flash--alert">
+      <%= @tree.orphaned_claimed_count %> in-progress
+      <%= "job".pluralize(@tree.orphaned_claimed_count) %> claimed by processes that no longer exist.
+    </div>
+  <% end %>
+
+  <% if @tree.empty? %>
+    <p class="empty-state">No processes registered. Start Solid Queue with <code>bin/jobs</code>.</p>
+  <% else %>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Process</th>
+          <th>Kind</th>
+          <th>Host</th>
+          <th>Details</th>
+          <th>Heartbeat</th>
+          <th class="num">In progress</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @tree.roots.each do |node| %>
+          <%= render "job_board/processes/process", node: node, tree: @tree, depth: 0 %>
+        <% end %>
+      </tbody>
+    </table>
+  <% end %>
+</div>

data/app/views/job_board/queues/index.html.erb

@@ -0,0 +1,50 @@
+<h1>Queues</h1>
+
+<div data-poll-region="queues">
+  <% if @queues.empty? %>
+    <p class="empty-state">No queues yet — queues appear once jobs are enqueued.</p>
+  <% else %>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Queue</th>
+          <th class="num">Ready jobs</th>
+          <th class="num">Failed</th>
+          <th class="num">Latency</th>
+          <th>Status</th>
+          <th class="actions"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @queues.each do |queue| %>
+          <tr>
+            <td><%= link_to queue.name, jobs_path(status: "ready", queue_name: queue.name) %></td>
+            <td class="num"><%= queue.size %></td>
+            <td class="num">
+              <% failed = @failed_counts[queue.name] || 0 %>
+              <% if failed.positive? %>
+                <%= link_to failed, jobs_path(status: "failed", queue_name: queue.name), class: "failed-count" %>
+              <% else %>
+                <span class="muted">0</span>
+              <% end %>
+            </td>
+            <td class="num">
+              <span class="latency <%= "latency--high" if queue.latency > latency_threshold_for(queue.name) %>" title="<%= queue.latency %> seconds">
+                <%= duration(queue.latency) %>
+              </span>
+            </td>
+            <td><%= queue.paused? ? status_badge(:paused) : status_badge(:active) %></td>
+            <td class="actions">
+              <% if queue.paused? %>
+                <%= button_to "Resume", queue_pause_path(queue.name), method: :delete, class: "btn" %>
+              <% else %>
+                <%= button_to "Pause", queue_pause_path(queue.name), method: :post, class: "btn",
+                      form: { data: { confirm: "Pause queue \"#{queue.name}\"? Workers will stop picking up its jobs." } } %>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% end %>
+</div>

data/app/views/job_board/recurring_tasks/index.html.erb

@@ -0,0 +1,37 @@
+<h1>Recurring tasks</h1>
+
+<div data-poll-region="recurring">
+  <% if @tasks.empty? %>
+    <p class="empty-state">
+      No recurring tasks. Define them in <code>config/recurring.yml</code> and run a scheduler.
+    </p>
+  <% else %>
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Key</th>
+          <th>Schedule</th>
+          <th>Job</th>
+          <th>Queue</th>
+          <th>Last run</th>
+          <th>Next run</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @tasks.each do |task| %>
+          <tr>
+            <td>
+              <%= task.key %>
+              <% unless task.static %><span class="badge badge--kind">dynamic</span><% end %>
+            </td>
+            <td><code><%= task.schedule %></code></td>
+            <td><%= task.class_name.presence || task.command %></td>
+            <td><%= task.queue_name.presence || "default" %></td>
+            <td><%= time_ago(task.last_enqueued_time) %></td>
+            <td><%= time_ago(task.next_time) %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% end %>
+</div>

data/app/views/job_board/shared/_nav.html.erb

@@ -0,0 +1,9 @@
+<header class="nav">
+  <span class="nav__brand"><%= link_to "Job Board", root_path %></span>
+  <nav class="nav__links">
+    <%= link_to "Queues", queues_path, class: "nav__link #{"nav__link--active" if controller_name == "queues"}" %>
+    <%= link_to "Jobs", jobs_path, class: "nav__link #{"nav__link--active" if controller_name == "jobs"}" %>
+    <%= link_to "Workers", processes_path, class: "nav__link #{"nav__link--active" if controller_name == "processes"}" %>
+    <%= link_to "Recurring", recurring_tasks_path, class: "nav__link #{"nav__link--active" if controller_name == "recurring_tasks"}" %>
+  </nav>
+</header>

data/app/views/job_board/shared/_pagination.html.erb

@@ -0,0 +1,5 @@
+<% if page.more? %>
+  <div class="pagination">
+    <%= link_to "Older →", jobs_path(request.query_parameters.merge(before: page.next_before)), class: "btn" %>
+  </div>
+<% end %>

data/app/views/layouts/job_board/application.html.erb

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Job Board</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <%= csrf_meta_tags %>
+  <link rel="stylesheet" href="<%= static_asset_path("application.css", v: JobBoard::VERSION) %>">
+  <script src="<%= static_asset_path("application.js", v: JobBoard::VERSION) %>" defer></script>
+</head>
+<body data-poll-interval="<%= JobBoard.config.poll_interval.to_i %>">
+  <%= render "job_board/shared/nav" %>
+  <main>
+    <% if notice.present? %><div class="flash flash--notice"><%= notice %></div><% end %>
+    <% if alert.present? %><div class="flash flash--alert"><%= alert %></div><% end %>
+    <%= yield %>
+  </main>
+</body>
+</html>

data/config/routes.rb

@@ -0,0 +1,25 @@
+JobBoard::Engine.routes.draw do
+  root to: "queues#index"
+
+  get "queues", to: "queues#index", as: :queues
+  scope "queues/:queue_name", constraints: { queue_name: /[^\/]+/ }, format: false do
+    post   "pause", to: "queues/pauses#create", as: :queue_pause
+    delete "pause", to: "queues/pauses#destroy"
+  end
+
+  resources :jobs, only: [:index, :show] do
+    member do
+      post :retry
+      delete :discard
+    end
+    collection do
+      post :retry_all
+      post :discard_all
+    end
+  end
+
+  resources :processes, only: :index
+  resources :recurring_tasks, only: :index
+
+  get "assets/:name", to: "assets#show", as: :static_asset, constraints: { name: /[a-z_]+\.(css|js)/ }
+end

data/lib/job_board/assets/application.css

@@ -0,0 +1,288 @@
+:root {
+  --bg: #f8f9fb;
+  --surface: #ffffff;
+  --text: #1c2333;
+  --text-muted: #6b7280;
+  --border: #e2e5ec;
+  --accent: #2563eb;
+  --accent-soft: #dbeafe;
+  --danger: #dc2626;
+  --danger-soft: #fee2e2;
+  --success: #16a34a;
+  --success-soft: #dcfce7;
+  --warning: #d97706;
+  --warning-soft: #fef3c7;
+  --purple: #7c3aed;
+  --purple-soft: #ede9fe;
+  --gray-soft: #e5e7eb;
+  --code-bg: #f1f3f7;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0f1218;
+    --surface: #171b24;
+    --text: #e5e9f0;
+    --text-muted: #9aa3b2;
+    --border: #2a3040;
+    --accent: #60a5fa;
+    --accent-soft: #1e3a5f;
+    --danger: #f87171;
+    --danger-soft: #4c1d1d;
+    --success: #4ade80;
+    --success-soft: #14351f;
+    --warning: #fbbf24;
+    --warning-soft: #3d2e0a;
+    --purple: #a78bfa;
+    --purple-soft: #2e2350;
+    --gray-soft: #2a3040;
+    --code-bg: #10141c;
+  }
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+main {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 1.5rem 1rem 4rem;
+}
+
+h1 { font-size: 1.4rem; margin: 0.5rem 0 1rem; }
+h2 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+code {
+  background: var(--code-bg);
+  border-radius: 4px;
+  padding: 0.1em 0.35em;
+  font-size: 0.9em;
+}
+
+.muted { color: var(--text-muted); }
+
+/* Nav */
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 0.6rem 1rem;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+.nav__brand a { color: var(--text); font-weight: 700; }
+.nav__links { display: flex; gap: 0.25rem; }
+.nav__link {
+  color: var(--text-muted);
+  padding: 0.3rem 0.7rem;
+  border-radius: 6px;
+}
+.nav__link:hover { color: var(--text); text-decoration: none; }
+.nav__link--active { color: var(--accent); background: var(--accent-soft); }
+
+/* Flash */
+.flash {
+  padding: 0.6rem 0.9rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border);
+}
+.flash--notice { background: var(--success-soft); color: var(--success); border-color: transparent; }
+.flash--alert { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
+
+/* Tables */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.data-table th, .data-table td {
+  text-align: left;
+  padding: 0.55rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+.data-table thead th {
+  position: sticky;
+  top: 0;
+  background: var(--surface);
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.data-table tbody tr:last-child td { border-bottom: none; }
+.data-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
+.num, .data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
+.actions, .data-table .actions { text-align: right; white-space: nowrap; }
+.actions form { display: inline-block; margin-left: 0.3rem; }
+.error-cell strong { display: block; }
+.meta-cell { max-width: 320px; }
+
+.detail-table { border-collapse: collapse; margin-bottom: 1rem; }
+.detail-table th {
+  text-align: left;
+  color: var(--text-muted);
+  font-weight: 500;
+  padding: 0.25rem 1.5rem 0.25rem 0;
+  white-space: nowrap;
+  vertical-align: top;
+}
+.detail-table td { padding: 0.25rem 0; }
+
+/* Badges */
+.badge {
+  display: inline-block;
+  padding: 0.1rem 0.5rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.badge--ready { background: var(--accent-soft); color: var(--accent); }
+.badge--claimed { background: var(--warning-soft); color: var(--warning); }
+.badge--failed { background: var(--danger-soft); color: var(--danger); }
+.badge--finished { background: var(--success-soft); color: var(--success); }
+.badge--scheduled { background: var(--purple-soft); color: var(--purple); }
+.badge--blocked { background: var(--gray-soft); color: var(--text-muted); }
+.badge--paused { background: var(--warning-soft); color: var(--warning); }
+.badge--active { background: var(--success-soft); color: var(--success); }
+.badge--stale { background: var(--danger-soft); color: var(--danger); }
+.badge--discarded { background: var(--gray-soft); color: var(--text-muted); }
+.badge--kind { background: var(--gray-soft); color: var(--text-muted); font-weight: 500; }
+
+.chip {
+  display: inline-block;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.05rem 0.4rem;
+  font-size: 0.75rem;
+  margin: 0.1rem 0.15rem 0.1rem 0;
+  color: var(--text-muted);
+}
+
+.latency { font-weight: 600; }
+.latency--high { color: var(--danger); }
+.failed-count { color: var(--danger); font-weight: 600; }
+
+/* Tabs */
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 0.5rem;
+}
+.tab {
+  color: var(--text-muted);
+  padding: 0.3rem 0.7rem;
+  border-radius: 6px;
+}
+.tab:hover { color: var(--text); text-decoration: none; }
+.tab--active { color: var(--accent); background: var(--accent-soft); }
+.tab__count {
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.8;
+}
+
+/* Buttons & forms */
+.btn {
+  display: inline-block;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.25rem 0.7rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+.btn:hover { border-color: var(--accent); color: var(--accent); }
+.btn--danger:hover { border-color: var(--danger); color: var(--danger); }
+
+.filters {
+  display: flex;
+  align-items: end;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+.filters label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  font-size: 0.78rem;
+  color: var(--text-muted);
+}
+.filters select, .filters input[type="text"] {
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.3rem 0.5rem;
+  font-size: 0.85rem;
+  min-width: 160px;
+}
+.filters__clear { font-size: 0.85rem; padding-bottom: 0.35rem; }
+
+.bulk-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.actions-row { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
+
+.pagination { margin-top: 1rem; text-align: center; }
+
+/* Panels & code */
+.error-panel {
+  background: var(--danger-soft);
+  border-radius: 10px;
+  padding: 0.9rem 1rem;
+  margin: 1rem 0;
+}
+.error-panel h2 { margin: 0 0 0.25rem; color: var(--danger); }
+.error-panel pre {
+  background: var(--code-bg);
+  color: var(--text);
+  border-radius: 8px;
+  padding: 0.75rem;
+  overflow-x: auto;
+  font-size: 0.78rem;
+  max-height: 320px;
+}
+
+.code-block {
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.75rem;
+  overflow-x: auto;
+  font-size: 0.82rem;
+}
+
+.empty-state {
+  background: var(--surface);
+  border: 1px dashed var(--border);
+  border-radius: 10px;
+  padding: 2rem;
+  text-align: center;
+  color: var(--text-muted);
+}