feat(docker): container detail page + lifecycle timeline (milestone 77 #942)

New /plugins/docker/container/<host_id>/<name> detail page (v1 quality):
status/health badge, uptime, CPU/mem, restart count, last exit code (+OOM),
net + block I/O (humanised), image/compose/swarm-service/node/ports, a
range-toggled CPU/mem history graph (HTMX fragment reusing the time-range
selector), and a lifecycle timeline rendered from docker_events (glyph+colour
per event kind). Not-found and empty-history/empty-timeline states included.
Container names in the main list and the per-host hub panel now link to it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016Jg27rgypiW2efULXJDtMC

plugins/docker/routes.py

@@ -10,11 +10,25 @@ from steward.auth.middleware import require_role
 from steward.models.users import UserRole
 from steward.models.hosts import Host
 from steward.core.time_range import parse_range, DEFAULT_RANGE
-from .models import DockerContainer, DockerMetric
+from .models import DockerContainer, DockerEvent, DockerMetric
 
 docker_bp = Blueprint("docker", __name__, template_folder="templates")
 
 
+def _human_bytes(n: int | None) -> str:
+    """Compact binary size string (e.g. '1.4 GiB', '512 MiB', '0 B')."""
+    if n is None:
+        return "—"
+    size = float(n)
+    for unit in ("B", "KiB", "MiB", "GiB", "TiB"):
+        if abs(size) < 1024.0 or unit == "TiB":
+            if unit == "B":
+                return f"{int(size)} {unit}"
+            return f"{size:.1f} {unit}"
+        size /= 1024.0
+    return f"{size:.1f} TiB"
+
+
 def _human_uptime(started_at: datetime | None) -> str | None:
     """Compact 'how long running' string (e.g. '3d 4h', '5h 12m', '8m')."""
     if started_at is None:
@@ -258,3 +272,72 @@ async def host_panel(host_id: str):
         running=running,
         stopped=len(containers) - running,
     )
+
+
+# Glyph + colour per lifecycle event, so the timeline reads at a glance.
+_EVENT_STYLE = {
+    "start":         ("▲", "var(--green)"),
+    "stop":          ("■", "var(--text-muted)"),
+    "die":           ("✕", "var(--red)"),
+    "oom":           ("☠", "var(--red)"),
+    "health_change": ("◐", "var(--orange)"),
+}
+
+
+@docker_bp.get("/container/<host_id>/<name>")
+@require_role(UserRole.viewer)
+async def container_detail(host_id: str, name: str):
+    """Full detail page for one container: facts, resource history, lifecycle."""
+    async with current_app.db_sessionmaker() as db:
+        c = await db.get(DockerContainer, (host_id, name))
+        host = await db.get(Host, host_id)
+        events = []
+        if c is not None:
+            events = list((await db.execute(
+                select(DockerEvent)
+                .where(DockerEvent.host_id == host_id)
+                .where(DockerEvent.container_name == name)
+                .order_by(DockerEvent.at.desc())
+                .limit(50)
+            )).scalars())
+
+    if c is None:
+        return await render_template(
+            "docker/container_detail.html",
+            container=None, host_id=host_id, name=name,
+        ), 404
+
+    return await render_template(
+        "docker/container_detail.html",
+        container=c,
+        host=host,
+        host_id=host_id,
+        name=name,
+        ports=json.loads(c.ports_json) if c.ports_json else [],
+        uptime=_human_uptime(c.started_at) if c.status == "running" else None,
+        net_rx=_human_bytes(c.net_rx_bytes), net_tx=_human_bytes(c.net_tx_bytes),
+        blk_read=_human_bytes(c.blk_read_bytes), blk_write=_human_bytes(c.blk_write_bytes),
+        events=[
+            {"event": e.event, "detail": e.detail, "at": e.at,
+             "glyph": _EVENT_STYLE.get(e.event, ("•", "var(--text-muted)"))[0],
+             "colour": _EVENT_STYLE.get(e.event, ("•", "var(--text-muted)"))[1]}
+            for e in events
+        ],
+        current_range=request.args.get("range", DEFAULT_RANGE),
+    )
+
+
+@docker_bp.get("/container/<host_id>/<name>/history")
+@require_role(UserRole.viewer)
+async def container_history(host_id: str, name: str):
+    """HTMX fragment: CPU + memory sparklines for the selected time range."""
+    since, range_key = parse_range(request.args.get("range"))
+    async with current_app.db_sessionmaker() as db:
+        cpu_hist, mem_hist = await _container_history(db, host_id, name, since)
+    return await render_template(
+        "docker/_container_history.html",
+        sparkline_cpu=_sparkline(cpu_hist, width=320, height=48),
+        sparkline_mem=_sparkline(mem_hist, width=320, height=48),
+        have_data=len(cpu_hist) >= 2,
+        range_key=range_key,
+    )

plugins/docker/templates/docker/_container_history.html

@@ -0,0 +1,17 @@
+{# docker/_container_history.html — CPU/mem sparklines for the selected range #}
+{% if have_data %}
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;">
+  <div>
+    <div class="section-title" style="margin-bottom:0.4rem;">CPU %</div>
+    {{ sparkline_cpu | safe }}
+  </div>
+  <div>
+    <div class="section-title" style="margin-bottom:0.4rem;">Memory %</div>
+    {{ sparkline_mem | safe }}
+  </div>
+</div>
+{% else %}
+<div style="color:var(--text-muted);font-size:0.85rem;">
+  Not enough samples in this range yet — history fills in as the agent reports.
+</div>
+{% endif %}

plugins/docker/templates/docker/container_detail.html

@@ -0,0 +1,112 @@
+{# docker/container_detail.html — full detail page for one container #}
+{% extends "base.html" %}
+{% block title %}{{ name }} — Docker — Steward{% endblock %}
+{% block content %}
+
+<div style="margin-bottom:1rem;">
+  <a href="/plugins/docker/" style="font-size:0.82rem;color:var(--text-muted);text-decoration:none;">← All containers</a>
+</div>
+
+{% if container is none %}
+<div class="card" style="text-align:center;padding:3rem;">
+  <div style="font-weight:600;margin-bottom:0.4rem;">Container not found</div>
+  <div style="color:var(--text-muted);font-size:0.9rem;">
+    No container named <code>{{ name }}</code> is currently reported for this host.
+    It may have been removed, or the host agent hasn't reported recently.
+  </div>
+</div>
+{% else %}
+
+{# ── Header ──────────────────────────────────────────────────────────────── #}
+<div style="display:flex;align-items:center;gap:0.6rem;margin-bottom:0.35rem;flex-wrap:wrap;">
+  <span class="dot {% if container.status == 'running' %}dot-up{% elif container.status == 'paused' %}dot-warn{% else %}dot-down{% endif %}"></span>
+  <h1 class="page-title" style="margin-bottom:0;">{{ container.name }}</h1>
+  {% if container.health == 'healthy' %}<span style="font-size:0.72rem;color:var(--green);border:1px solid var(--green);border-radius:3px;padding:0.05rem 0.4rem;">healthy</span>
+  {% elif container.health == 'unhealthy' %}<span style="font-size:0.72rem;color:var(--red);border:1px solid var(--red);border-radius:3px;padding:0.05rem 0.4rem;">unhealthy</span>
+  {% elif container.health == 'starting' %}<span style="font-size:0.72rem;color:var(--orange);border:1px solid var(--orange);border-radius:3px;padding:0.05rem 0.4rem;">starting</span>{% endif %}
+</div>
+<div style="font-size:0.82rem;color:var(--text-muted);margin-bottom:1.5rem;">
+  {{ container.status }}{% if uptime %} · up {{ uptime }}{% endif %}
+  {% if host %} · on <a href="/hosts/{{ host.id }}" style="color:var(--text-muted);">{{ host.name }}</a>{% endif %}
+</div>
+
+{# ── Facts grid ──────────────────────────────────────────────────────────── #}
+{% macro fact(label, value, colour="") %}
+<div class="card" style="margin-bottom:0;">
+  <div class="section-title" style="margin-bottom:0.3rem;">{{ label }}</div>
+  <div style="font-size:0.95rem;{% if colour %}color:{{ colour }};{% endif %}font-family:ui-monospace,monospace;">{{ value }}</div>
+</div>
+{% endmacro %}
+
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.75rem;margin-bottom:1.5rem;">
+  {{ fact("CPU", "%.1f%%" | format(container.cpu_pct) if container.cpu_pct is not none else "—") }}
+  {{ fact("Memory", "%.1f%%" | format(container.mem_pct) if container.mem_pct is not none else "—") }}
+  {{ fact("Restarts", container.restart_count, "var(--orange)" if container.restart_count else "") }}
+  {{ fact("Last exit", (container.exit_code ~ (" (OOM)" if container.oom_killed else "")) if container.exit_code is not none else "—",
+          "var(--red)" if (container.exit_code is not none and container.exit_code != 0) else "") }}
+  {{ fact("Net in", net_rx) }}
+  {{ fact("Net out", net_tx) }}
+  {{ fact("Block read", blk_read) }}
+  {{ fact("Block write", blk_write) }}
+</div>
+
+{# ── Image / placement ───────────────────────────────────────────────────── #}
+<div class="card" style="margin-bottom:1.5rem;">
+  <div style="display:grid;grid-template-columns:max-content 1fr;gap:0.4rem 1.25rem;font-size:0.86rem;">
+    <span style="color:var(--text-muted);">Image</span>
+    <span style="font-family:ui-monospace,monospace;word-break:break-all;">{{ container.image or "—" }}</span>
+    {% if container.compose_project %}
+    <span style="color:var(--text-muted);">Compose project</span><span>{{ container.compose_project }}</span>
+    {% endif %}
+    {% if container.service_name %}
+    <span style="color:var(--text-muted);">Swarm service</span><span>{{ container.service_name }}</span>
+    {% endif %}
+    {% if container.node_id %}
+    <span style="color:var(--text-muted);">Node</span><span style="font-family:ui-monospace,monospace;">{{ container.node_id }}</span>
+    {% endif %}
+    {% if ports %}
+    <span style="color:var(--text-muted);">Ports</span>
+    <span style="font-family:ui-monospace,monospace;">{% for p in ports %}{{ p.host_port }}:{{ p.container_port }}/{{ p.protocol }}{% if not loop.last %}, {% endif %}{% endfor %}</span>
+    {% endif %}
+  </div>
+</div>
+
+{# ── Resource history (range-toggled) ────────────────────────────────────── #}
+<div class="card" style="margin-bottom:1.5rem;">
+  <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0.75rem;flex-wrap:wrap;">
+    <h3 class="section-title" style="margin-bottom:0;">Resource history</h3>
+    {% include "_time_range.html" %}
+  </div>
+  <div id="container-history"
+       hx-get="/plugins/docker/container/{{ host_id }}/{{ name }}/history"
+       hx-trigger="load, rangeChange from:body"
+       hx-include="#time-range"
+       hx-swap="innerHTML">
+    <div style="color:var(--text-muted);font-size:0.85rem;">Loading…</div>
+  </div>
+</div>
+
+{# ── Lifecycle timeline ──────────────────────────────────────────────────── #}
+<div class="card">
+  <h3 class="section-title" style="margin-bottom:0.75rem;">Lifecycle</h3>
+  {% if events %}
+  <div style="display:grid;gap:0.5rem;">
+    {% for e in events %}
+    <div style="display:flex;align-items:baseline;gap:0.6rem;font-size:0.85rem;">
+      <span style="color:{{ e.colour }};width:1rem;text-align:center;flex-shrink:0;">{{ e.glyph }}</span>
+      <span style="font-weight:500;width:6.5rem;flex-shrink:0;">{{ e.event }}</span>
+      <span style="color:var(--text-muted);flex:1;min-width:0;">{{ e.detail or "" }}</span>
+      <span style="color:var(--text-dim);font-size:0.78rem;white-space:nowrap;" title="{{ e.at }}">{{ e.at.strftime("%Y-%m-%d %H:%M") }}</span>
+    </div>
+    {% endfor %}
+  </div>
+  {% else %}
+  <div style="color:var(--text-muted);font-size:0.85rem;">
+    No lifecycle events recorded yet. Start/stop/health changes appear here as the
+    agent reports them over time.
+  </div>
+  {% endif %}
+</div>
+
+{% endif %}
+{% endblock %}

plugins/docker/templates/docker/host_panel.html

@@ -11,7 +11,7 @@
     {% for c in containers %}
     <div style="display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;padding:0.2rem 0;">
       <span class="dot {% if c.status == 'running' %}dot-up{% elif c.status == 'paused' %}dot-warn{% else %}dot-down{% endif %}"></span>
-      <span style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="{{ c.image }}">{{ c.name }}</span>
+      <a href="/plugins/docker/container/{{ c.host_id }}/{{ c.name }}" style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;text-decoration:none;" title="{{ c.image }}">{{ c.name }}</a>
       <span style="font-size:0.74rem;color:var(--text-muted);font-family:ui-monospace,monospace;flex-shrink:0;">
         {% if c.cpu_pct is not none %}{{ "%.1f" | format(c.cpu_pct) }}%{% endif %}
         {% if c.mem_pct is not none %} · {{ "%.1f" | format(c.mem_pct) }}%{% endif %}

plugins/docker/templates/docker/rows.html

@@ -55,7 +55,7 @@
             <span class="dot {% if c.status == 'running' %}dot-up{% elif c.status == 'paused' %}dot-warn{% else %}dot-down{% endif %}"></span>
             <div>
               <div style="font-weight:500;font-size:0.9rem;">
-                {{ c.name }}
+                <a href="/plugins/docker/container/{{ c.host_id }}/{{ c.name }}" style="color:inherit;text-decoration:none;border-bottom:1px dotted var(--border-mid);">{{ c.name }}</a>
                 {% if c.health == 'healthy' %}<span title="healthy" style="color:var(--green);font-size:0.7rem;">●</span>
                 {% elif c.health == 'unhealthy' %}<span title="unhealthy" style="color:var(--red);font-size:0.7rem;">●</span>
                 {% elif c.health == 'starting' %}<span title="health: starting" style="color:var(--orange);font-size:0.7rem;">◐</span>{% endif %}