{% extends "base.html" %}
{% block title %}Plan tree · {{ goal.title }} · Maverick{% endblock %}
{% block content %}
<style>
  .tree { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
  .tree ul { list-style: none; padding-left: 1.5rem; border-left: 1px solid var(--border); margin: 0; }
  .tree > ul { padding-left: 0; border-left: 0; }
  .tree li { position: relative; padding: 0.35rem 0 0.35rem 1rem; }
  .tree li::before {
    content: ""; position: absolute; top: 1rem; left: -1px;
    width: 0.75rem; height: 1px; background: var(--border);
  }
  .tree > ul > li::before { display: none; }
  .tree .node {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.25rem 0.5rem; border-radius: 4px; background: var(--panel);
    border: 1px solid var(--border);
  }
  .tree .node:hover { border-color: var(--accent); }
  .tree .nid { color: var(--muted); }
  .tree .title { color: var(--text); }
  .tree .cost { color: var(--muted); font-size: 0.85em; margin-left: 0.5rem; }
  .legend { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
  .legend span { font-size: 0.85em; color: var(--muted); }
</style>
<p class="muted"><a href="/goals">← all goals</a></p>
<h2>Goal #{{ goal.id }}: {{ goal.title }}</h2>
<div class="panel">
  <div class="legend">
    <span><span class="badge active">in_progress</span></span>
    <span><span class="badge success">succeeded</span></span>
    <span><span class="badge failure">failed</span></span>
    <span><span class="badge blocked">blocked</span></span>
    <span><span class="badge pending">pending</span></span>
  </div>
  <div class="tree">
    {# Tree HTML is pre-rendered in Python because Jinja macros can't
       recurse with dict args (unhashable). #}
    {{ tree_html | safe }}
  </div>
</div>

<p class="muted">
  Plan tree updates as the swarm spawns / completes sub-goals.
  Refresh to see live state, or use
  <code>maverick monitor --goal-id {{ goal.id }}</code> in your terminal
  for a TUI view.
</p>
{% endblock %}