feat(ui): breadcrumb navigation across nested pages

Adds a breadcrumb trail to nested views for orientation. Mechanism: a
{% block breadcrumb %} slot in base.html (+ styling) and a shared crumbs()
macro in templates/_macros.html; each nested page fills the block with its
trail (root→current, last item is the current page). Pages without the block
render no bar, so top-level nav roots stay clean.

Applied to: Ansible (browse, schedules, playbook editor, run detail) +
inventory (targets/groups + detail), host_agent (fleet, host detail,
settings), hosts form, settings tabs (ansible/auth/notifications/plugins/
reports + plugin detail), dashboard (list, edit), and alerts (rule form,
maintenance + new). Dynamic labels (host/target/run/dashboard names) come
from the page context — no route changes. All 60 templates Jinja-compile.

Task #873.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

plugins/host_agent/templates/host_detail.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}{{ host.name }} — Host Agent — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Host Agents", "/plugins/host_agent/"), (host.name, "")]) }}{% endblock %}
 
 {% macro fmt_bps(v) %}
 {%- if v is none -%}—

plugins/host_agent/templates/host_list.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Host Agents — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Dashboard", "/"), ("Host Agents", "")]) }}{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap;">
   <h1 class="page-title" style="margin-bottom:0;">Host Agents</h1>

plugins/host_agent/templates/settings_list.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Host Agent — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Host Agents", "/plugins/host_agent/"), ("Settings", "")]) }}{% endblock %}
 {% block content %}
 <h1 class="page-title">Host Agent — Registered Hosts</h1>
 

steward/templates/_macros.html

@@ -0,0 +1,18 @@
+{# Shared template macros. Import with: {% from "_macros.html" import crumbs %} #}
+
+{# Breadcrumb trail. `items` is a list of (label, href) pairs, ordered root→current.
+   Intermediate items with a truthy href render as links; the last item (or any
+   item with an empty href) renders as plain current text. #}
+{% macro crumbs(items) -%}
+<nav class="breadcrumb" aria-label="Breadcrumb">
+  {%- for label, href in items -%}
+    {%- if loop.last -%}
+      <span class="breadcrumb-cur" aria-current="page">{{ label }}</span>
+    {%- elif href -%}
+      <a href="{{ href }}">{{ label }}</a><span class="breadcrumb-sep">›</span>
+    {%- else -%}
+      <span>{{ label }}</span><span class="breadcrumb-sep">›</span>
+    {%- endif -%}
+  {%- endfor -%}
+</nav>
+{%- endmacro %}

steward/templates/alerts/maintenance.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Maintenance Windows — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("Maintenance", "")]) }}{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
   <h1 class="page-title" style="margin-bottom:0;">Maintenance Windows</h1>

steward/templates/alerts/maintenance_form.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}New Maintenance Window — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("Maintenance", "/alerts/maintenance"), ("New window", "")]) }}{% endblock %}
 {% block content %}
 <div style="max-width:560px;margin:2rem auto;">
   <h1 class="page-title">New Maintenance Window</h1>

steward/templates/alerts/rules_form.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}{% if rule %}Edit Rule{% else %}New Alert Rule{% endif %} — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Alerts", "/alerts/"), ("Edit rule" if rule else "New rule", "")]) }}{% endblock %}
 {% block content %}
 <div style="max-width:600px;margin:2rem auto;">
   <h1 class="page-title">{% if rule %}Edit Rule{% else %}New Alert Rule{% endif %}</h1>

steward/templates/ansible/browse.html

@@ -1,5 +1,13 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Browse Playbooks — Steward{% endblock %}
+{% block breadcrumb %}
+{%- if view_contents is defined -%}
+{{ crumbs([("Ansible", "/ansible/"), ("Browse", "/ansible/browse"), (view_path, "")]) }}
+{%- else -%}
+{{ crumbs([("Ansible", "/ansible/"), ("Browse", "")]) }}
+{%- endif -%}
+{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
     <h1 class="page-title" style="margin-bottom:0;">Browse Playbooks</h1>

steward/templates/ansible/inventory/group_detail.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Group: {{ group.name }} — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Inventory", "/ansible/inventory/targets"), ("Groups", "/ansible/inventory/groups"), (group.name, "")]) }}{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
     <h1 class="page-title" style="margin-bottom:0;">Group: {{ group.name }}</h1>

steward/templates/ansible/inventory/groups.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Inventory Groups — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Inventory", "/ansible/inventory/targets"), ("Groups", "")]) }}{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
     <h1 class="page-title" style="margin-bottom:0;">Inventory Groups</h1>

steward/templates/ansible/inventory/target_detail.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Target: {{ target.name }} — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Inventory", "/ansible/inventory/targets"), ("Targets", "/ansible/inventory/targets"), (target.name, "")]) }}{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
     <h1 class="page-title" style="margin-bottom:0;">Target: {{ target.name }}</h1>

steward/templates/ansible/inventory/targets.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Inventory Targets — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Inventory", "/ansible/inventory/targets"), ("Targets", "")]) }}{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
     <h1 class="page-title" style="margin-bottom:0;">Inventory Targets</h1>

steward/templates/ansible/playbook_editor.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}{{ "Edit" if editing else "New" }} Playbook — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Browse", "/ansible/browse"), (("Edit " ~ playbook_path) if editing else "New playbook", "")]) }}{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap;">
   <h1 class="page-title" style="margin-bottom:0;">{{ "Edit playbook" if editing else "New playbook" }}</h1>

steward/templates/ansible/run_detail.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Run {{ run.id[:8] }} — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Run " ~ run.id[:8], "")]) }}{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
     <a href="/ansible/" class="btn btn-ghost btn-sm">← Runs</a>

steward/templates/ansible/schedules.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Ansible Schedules — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Schedules", "")]) }}{% endblock %}
 
 {% macro fmt_interval(secs) %}
 {%- set m = {300: "every 5 min", 3600: "hourly", 21600: "every 6h", 43200: "every 12h", 86400: "daily", 604800: "weekly"} -%}

steward/templates/base.html

@@ -145,6 +145,13 @@ textarea { resize: vertical; }
 /* Empty state */
 .empty { color: var(--text-muted); font-size: 0.9rem; padding: 2rem; text-align: center; }
 
+/* Breadcrumbs */
+.breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:0.35rem; font-size:0.8rem; color:var(--text-dim); margin-bottom:1rem; }
+.breadcrumb a { color:var(--text-muted); }
+.breadcrumb a:hover { color:var(--text); }
+.breadcrumb-sep { color:var(--border-mid); }
+.breadcrumb-cur { color:var(--text-muted); }
+
 /* Stat cards (dashboard) */
 .stat-val { font-size: 2rem; font-weight: 700; line-height: 1; }
 .stat-label { font-size: 0.8rem; color: var(--text-muted); margin-left: 0.3rem; }
@@ -228,6 +235,7 @@ function setTimeRange(val) {
 </script>
 
     <main>
+        {% block breadcrumb %}{% endblock %}
         {% if plugin_failures and session.user_role == 'admin' %}
         <div style="background:color-mix(in srgb,var(--yellow) 12%,var(--bg-elevated));
                     border:1px solid color-mix(in srgb,var(--yellow) 35%,var(--border));

steward/templates/dashboard/edit.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Edit: {{ dashboard.name }} — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Dashboard", "/"), ("Dashboards", "/dashboards/"), ("Edit " ~ dashboard.name, "")]) }}{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;">
   <h1 class="page-title" style="margin-bottom:0;">Edit: {{ dashboard.name }}</h1>

steward/templates/dashboard/list.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Dashboards — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Dashboard", "/"), ("Dashboards", "")]) }}{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;">
   <h1 class="page-title" style="margin-bottom:0;">Dashboards</h1>

steward/templates/hosts/form.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}{% if host %}Edit Host{% else %}New Host{% endif %} — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Hosts", "/hosts/"), (("Edit " ~ host.name) if host else "New host", "")]) }}{% endblock %}
 {% block content %}
 <div style="max-width:560px;margin:2rem auto;">
     <h1 class="page-title">{% if host %}Edit Host{% else %}Add Host{% endif %}</h1>

steward/templates/settings/ansible.html

@@ -1,6 +1,8 @@
 {# steward/templates/settings/ansible.html #}
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Settings — Ansible — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Ansible", "")]) }}{% endblock %}
 {% block content %}
 {% set active_tab = "ansible" %}
 {% include "settings/_tabs.html" %}

steward/templates/settings/auth.html

@@ -1,6 +1,8 @@
 {# steward/templates/settings/auth.html #}
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Settings — Auth — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Authentication", "")]) }}{% endblock %}
 {% block content %}
 {% set active_tab = "auth" %}
 {% include "settings/_tabs.html" %}

steward/templates/settings/notifications.html

@@ -1,6 +1,8 @@
 {# steward/templates/settings/notifications.html #}
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Settings — Notifications — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Notifications", "")]) }}{% endblock %}
 {% block content %}
 {% set active_tab = "notifications" %}
 {% include "settings/_tabs.html" %}

steward/templates/settings/plugin_detail.html

@@ -1,6 +1,8 @@
 {# steward/templates/settings/plugin_detail.html #}
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}{{ plugin.get('name', plugin._dir) }} Settings — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Plugins", "/settings/plugins/"), (plugin.get('name', plugin._dir), "")]) }}{% endblock %}
 {% block content %}
 {% set active_tab = "plugins" %}
 {% include "settings/_tabs.html" %}

steward/templates/settings/plugins.html

@@ -1,6 +1,8 @@
 {# steward/templates/settings/plugins.html #}
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Settings — Plugins — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Plugins", "")]) }}{% endblock %}
 {% block content %}
 {% set active_tab = "plugins" %}
 {% include "settings/_tabs.html" %}

steward/templates/settings/reports.html

@@ -1,6 +1,8 @@
 {# steward/templates/settings/reports.html #}
 {% extends "base.html" %}
+{% from "_macros.html" import crumbs %}
 {% block title %}Settings — Reports — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Reports", "")]) }}{% endblock %}
 {% block content %}
 {% set active_tab = "reports" %}
 {% include "settings/_tabs.html" %}