{# Shared solution presentation used by opportunity detail and admin solutions pages.
   Expects:
     sol (solution view model)
     create_pr_route_prefix (optional, defaults to /app)
#}
{% set create_pr_prefix = create_pr_route_prefix | default('/app') %}

<div class="space-y-3">
  <div class="flex flex-wrap items-center gap-2">
    {% with trust_tier=sol.trust_tier, template_name=sol.template_name, summary=None %}
      {% include "components/trust_badge.html" %}
    {% endwith %}
    {% if sol.local_build_execution_mode %}
    <span class="ui-pill {% if sol.local_build_execution_mode.safe_to_apply_locally %}ui-pill-success{% else %}ui-pill-neutral{% endif %}">
      {{ sol.local_build_execution_mode.title }}
    </span>
    {% endif %}
  </div>

  {% if sol.template_name in downstream_patch_guardrail_template_ids %}
  {# Spec 127: breaking-change guardrail. Always visible above the diff so the
     user cannot miss it. Final status line reflects the shadow-validation
     state for this solution (FR-006/FR-007). #}
  <div class="space-y-2 rounded border border-amber-300 bg-amber-50 px-4 py-3 text-sm
              text-amber-900 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-100">
    <p class="font-semibold">
      &#9888; Breaking change &mdash; partition filter will become mandatory
    </p>
    <p class="text-[13px] leading-relaxed">
      Applying this change tells BigQuery to reject any future query on this
      table that does not filter on the partition column. This is a guardrail,
      not a silent optimization.
    </p>
    <ul class="list-disc pl-5 text-[13px] leading-relaxed">
      <li>Downstream dbt models that select from this table without a partition filter will fail to build.</li>
      <li>BI and reporting tools running unfiltered queries will error at runtime.</li>
      <li>Ad-hoc SQL missing a partition filter will be rejected at query time.</li>
    </ul>
    {% if not sol.shadow_run %}
    <p class="text-[13px] italic text-amber-800 dark:text-amber-200">
      Downstream safety not yet verified. Run shadow validation below before applying.
    </p>
    {% elif sol.shadow_run.status in ['queued', 'running'] %}
    <p class="text-[13px] italic text-amber-800 dark:text-amber-200">
      Shadow validation is in progress &mdash; downstream safety will be verified once the run completes.
    </p>
    {% elif sol.shadow_run.status == 'succeeded' %}
    <p class="text-[13px] font-medium text-emerald-800 dark:text-emerald-300">
      &#10003; Shadow-verified: no downstream model in this project fails with the change applied.
    </p>
    {% elif sol.shadow_run.status == 'failed' %}
    <p class="text-[13px] font-medium text-rose-800 dark:text-rose-300">
      &#10007; Shadow validation failed.
      {% if sol.shadow_run.failure_reason %}
      Downstream impact: <code class="font-mono">{{ sol.shadow_run.failure_reason }}</code>.
      {% endif %}
      Review the dbt build logs below to identify affected models before applying.
    </p>
    {% elif sol.shadow_run.status == 'skipped' %}
    <p class="text-[13px] italic text-amber-800 dark:text-amber-200">
      Shadow validation was skipped &mdash; downstream safety is not verified.
    </p>
    {% else %}
    <p class="text-[13px] italic text-amber-800 dark:text-amber-200">
      Downstream safety not yet verified.
    </p>
    {% endif %}
  </div>
  {% endif %}

  {% if sol.resolution_category == 'dbt_project_change' and sol.diff_lines %}
    {% if sol.explanation %}
    <p class="text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
      <span class="font-medium text-slate-900 dark:text-slate-100">Solution:</span> {{ sol.explanation }}
    </p>
    {% endif %}
    {% if sol.file_path %}
    <div>
      <p class="ui-card-label">Target File</p>
      <p class="mt-1 text-[13px] font-mono text-slate-600 dark:text-slate-400">{{ sol.file_path }}</p>
    </div>
    {% endif %}
    {% if sol.repository %}
    <p class="text-[13px] text-slate-500 dark:text-slate-400">
      {{ sol.repository }}
      {% if sol.commit_sha %} · <code class="font-mono">{{ sol.commit_sha[:8] }}</code>{% endif %}
    </p>
    {% endif %}

    {% with solution_id=sol.id, diff_lines=sol.diff_lines, compiled_original=sol.compiled_original, compiled_original_label=sol.compiled_original_label, compiled_modified=sol.compiled_modified, dry_run_original=sol.dry_run_original, dry_run_modified=sol.dry_run_modified, verification_sql=sol.verification_sql, verification_profile=sol.verification_profile, verification_output_mode=sol.verification_output_mode, verification_source_label=sol.verification_source_label, verification_warnings=sol.verification_warnings, verification_unavailable_reason=sol.verification_unavailable_reason, file_path=None %}
      {% include "components/code_viewer.html" %}
    {% endwith %}

    {% if sol.file_diffs and sol.file_diffs | length > 1 %}
    {# Additional files in this multi-file solution (primary already rendered above). #}
    <div class="space-y-3 mt-2">
      <p class="ui-card-label">
        {% if sol.template_name in downstream_patch_guardrail_template_ids %}
          Downstream patches (spec 128)
        {% else %}
          Additional files in this fix
        {% endif %}
      </p>
      {% for fd in sol.file_diffs[1:] %}
      {% set pm = fd.proposal_meta or {} %}
      {% set patch_status = pm.get('status') if pm else None %}
      {% set is_spec128 = sol.template_name in downstream_patch_guardrail_template_ids and pm.get('change_type') == 'downstream_partition_filter_patch' %}
      <div class="rounded border p-3 space-y-2
                  {% if is_spec128 and patch_status == 'manual_required' %}border-rose-300 bg-rose-50 dark:border-rose-800 dark:bg-rose-950/40
                  {% elif is_spec128 and patch_status == 'edited' %}border-sky-300 bg-sky-50 dark:border-sky-800 dark:bg-sky-950/40
                  {% else %}border-slate-200 dark:border-slate-700{% endif %}">
        <div class="flex items-center justify-between">
          <p class="text-[13px] font-mono text-slate-600 dark:text-slate-400">{{ fd.file_path }}</p>
          {% if is_spec128 %}
          <span class="ui-pill
            {% if patch_status == 'proposed' %}ui-pill-neutral
            {% elif patch_status == 'edited' %}ui-pill-warning
            {% elif patch_status == 'manual_required' %}ui-pill-warning
            {% elif patch_status == 'applied' %}ui-pill-success
            {% else %}ui-pill-neutral{% endif %}">
            {{ (patch_status or 'proposed') | replace('_', ' ') | title }}
          </span>
          {% endif %}
        </div>

        {% if is_spec128 and patch_status == 'manual_required' %}
        <div class="text-[13px] text-rose-800 dark:text-rose-200">
          <p class="font-medium">Unable to propose an automatic patch</p>
          {% if pm.get('abstain_reason') %}
          <p class="mt-1">{{ pm.get('abstain_reason') }}</p>
          {% endif %}
          <p class="mt-1 italic">Hand-edit this file to add a partition filter, then re-run shadow validation on the bundle.</p>
        </div>
        {% else %}
        {% with solution_id=sol.id ~ '-' ~ loop.index, diff_lines=fd.diff_lines, compiled_original=None, compiled_original_label=None, compiled_modified=None, dry_run_original=None, dry_run_modified=None, verification_sql=None, verification_profile=None, verification_output_mode=None, verification_source_label=None, verification_warnings=[], verification_unavailable_reason=None, file_path=None %}
          {% include "components/code_viewer.html" %}
        {% endwith %}
        {% endif %}

        {% if is_spec128 and patch_status in ('proposed', 'edited') %}
        <form method="post"
              action="/app/solutions/{{ sol.id }}/patches/{{ loop.index }}/filter"
              class="flex items-center gap-2 text-[12px] text-slate-700 dark:text-slate-300">
          <label class="font-medium" for="spec128-filter-{{ sol.id }}-{{ loop.index }}">
            Partition filter:
          </label>
          <input
            id="spec128-filter-{{ sol.id }}-{{ loop.index }}"
            name="filter_expression"
            type="text"
            value="{{ pm.get('proposed_filter', '') }}"
            class="flex-1 font-mono text-[12px]
                   rounded border px-2 py-1
                   bg-white border-slate-300 text-slate-900
                   dark:bg-slate-950 dark:border-slate-700 dark:text-slate-100" />
          <button type="submit"
                  class="ui-btn-secondary text-[12px] px-2 py-1">Save</button>
        </form>
        {% endif %}
      </div>
      {% endfor %}

      {% if sol.template_name in downstream_patch_guardrail_template_ids %}
      <form method="post" action="/app/solutions/{{ sol.id }}/reshadow"
            class="flex items-center justify-end mt-2">
        <button type="submit"
                class="ui-btn-secondary inline-flex items-center gap-1.5 text-[13px]">
          &#8635; Re-run shadow on bundle
        </button>
      </form>
      {% endif %}
    </div>
    {% endif %}

    {% if sol.file_path and sol.config_id and sol.opp_id %}
    {% if sol.local_apply_enabled and sol.opp_status == 'active' %}

    {# --- Shadow comparison results block (shown once a shadow run exists) --- #}
    {% if sol.shadow_run %}
    <div class="space-y-2 rounded border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-900/60">
      <div class="flex items-center justify-between">
        <h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100">
          Empirical comparison (shadow validation)
        </h4>
        <div class="flex items-center gap-2">
          {% if sol.shadow_run.triggered_by == 'auto' %}
          <span class="ui-pill ui-pill-neutral text-[11px]" title="Started automatically by the Safe-solution auto-validation setting">Auto</span>
          {% endif %}
          <span class="ui-pill
            {% if sol.shadow_run.status == 'succeeded' %}ui-pill-success
            {% elif sol.shadow_run.status == 'skipped' %}ui-pill-neutral
            {% else %}ui-pill-warning{% endif %}">
            {{ sol.shadow_run.status | replace('_', ' ') | title }}
          </span>
        </div>
      </div>
      {% if sol.shadow_run.status == 'succeeded' %}
        <table class="w-full text-sm">
          <thead class="text-left text-slate-500 dark:text-slate-400">
            <tr>
              <th class="py-1"></th>
              <th class="py-1 text-right">Bytes</th>
              <th class="py-1 text-right">Cost (USD)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="py-1 text-slate-700 dark:text-slate-300">Baseline (current)</td>
              <td class="py-1 text-right font-mono">{{ "{:,}".format(sol.shadow_run.total_baseline_bytes or 0) }}</td>
              <td class="py-1 text-right font-mono">${{ "%.4f"|format(sol.shadow_run.total_baseline_cost_usd or 0) }}</td>
            </tr>
            <tr>
              <td class="py-1 text-slate-700 dark:text-slate-300">Shadow (proposed)</td>
              <td class="py-1 text-right font-mono">{{ "{:,}".format(sol.shadow_run.total_shadow_bytes or 0) }}</td>
              <td class="py-1 text-right font-mono">${{ "%.4f"|format(sol.shadow_run.total_shadow_cost_usd or 0) }}</td>
            </tr>
            <tr class="border-t border-slate-200 dark:border-slate-700 font-medium">
              <td class="py-1">Delta</td>
              <td class="py-1 text-right font-mono {% if sol.shadow_run.bytes_delta_pct and sol.shadow_run.bytes_delta_pct < 0 %}text-emerald-600{% elif sol.shadow_run.bytes_delta_pct and sol.shadow_run.bytes_delta_pct > 0 %}text-rose-600{% endif %}">
                {% if sol.shadow_run.bytes_delta_pct is not none %}{{ "%+.1f"|format(sol.shadow_run.bytes_delta_pct) }}%{% else %}—{% endif %}
              </td>
              <td class="py-1 text-right font-mono {% if sol.shadow_run.cost_delta_usd is not none and sol.shadow_run.cost_delta_usd < 0 %}text-emerald-600{% elif sol.shadow_run.cost_delta_usd is not none and sol.shadow_run.cost_delta_usd > 0 %}text-rose-600{% endif %}">
                {% if sol.shadow_run.cost_delta_usd is not none %}{{ "%+.4f"|format(sol.shadow_run.cost_delta_usd) }}{% else %}—{% endif %}
              </td>
            </tr>
          </tbody>
        </table>
        <p class="text-[13px] text-slate-500 dark:text-slate-400">
          Cascade of {{ sol.shadow_run.cascade_size }} model(s). Empirical numbers from dbt run_results, not estimates.
        </p>
      {% elif sol.shadow_run.status == 'skipped' %}
        <p class="text-sm text-slate-700 dark:text-slate-300">
          Skipped: <code class="font-mono">{{ sol.shadow_run.skipped_reason }}</code>. Falling back to dry-run evidence above.
        </p>
      {% elif sol.shadow_run.status in ['queued', 'running'] %}
        <div class="flex items-start gap-3 rounded border border-sky-200 bg-sky-50 px-3 py-2 dark:border-sky-900 dark:bg-sky-950/40">
          <svg class="w-4 h-4 mt-0.5 animate-spin text-sky-600 dark:text-sky-300" fill="none" viewBox="0 0 24 24" aria-hidden="true">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
          </svg>
          <div class="text-sm text-slate-700 dark:text-slate-300">
            <p class="font-medium text-slate-900 dark:text-slate-100"
               id="governor-shadow-status-label-{{ sol.shadow_run.id }}">
              {% if sol.shadow_run.status == 'queued' %}Queued{% else %}Running{% endif %} — executing the dbt cascade twice against BigQuery.
            </p>
            <p class="mt-1 text-[13px] text-slate-600 dark:text-slate-400">
              {% if sol.shadow_run.cascade_size %}Cascade of {{ sol.shadow_run.cascade_size }} model(s). {% endif %}
              Terminal below updates every ~3 s while the cascade runs; the page will refresh itself only when it finishes.
              {% if sol.shadow_run.triggered_by == 'auto' %}Triggered automatically — "Auto-validate Safe solutions" is enabled.{% endif %}
            </p>
          </div>
        </div>

        {# Live terminal. The <pre> content is updated in place by a
           small JS polling loop hitting /app/shadow-runs/<id>/tail.
           We deliberately do NOT reload the whole page — that was the
           old behaviour and it was disruptive (lost scroll, reran
           template, flashed UI). Only when the run reaches a terminal
           status do we reload once to render the final comparison view. #}
        <div class="mt-2 rounded border border-slate-300 dark:border-slate-700 bg-slate-950 text-slate-100 font-mono text-[12px] leading-tight"
             data-shadow-run-id="{{ sol.shadow_run.id }}"
             data-shadow-tail-url="/app/shadow-runs/{{ sol.shadow_run.id }}/tail">
          <div class="px-3 py-2 border-b border-slate-700 text-slate-300 flex items-center justify-between">
            <span>Shadow validation — live output</span>
            <span class="text-slate-400"
                  id="governor-shadow-log-size-{{ sol.shadow_run.id }}">{{ (sol.shadow_run.build_logs | length) // 1024 + 1 if sol.shadow_run.build_logs else 0 }} KB</span>
          </div>
          <pre id="governor-shadow-live-log-{{ sol.shadow_run.id }}"
               class="px-3 py-2 whitespace-pre-wrap break-words"
               style="max-height: 360px; overflow-y: auto;">{{ sol.shadow_run.build_logs or '' }}</pre>
        </div>

        <script>
          (function () {
            const runId = '{{ sol.shadow_run.id }}';
            const pollKey = '__governorShadowPoll_' + runId;
            if (window[pollKey]) return;
            window[pollKey] = true;

            const logEl = document.getElementById('governor-shadow-live-log-' + runId);
            const sizeEl = document.getElementById('governor-shadow-log-size-' + runId);
            const statusEl = document.getElementById('governor-shadow-status-label-' + runId);
            const tailUrl = '/app/shadow-runs/' + runId + '/tail';

            // Stick to bottom on first render so the newest line is visible.
            if (logEl) logEl.scrollTop = logEl.scrollHeight;

            async function tick() {
              try {
                const resp = await fetch(tailUrl, { credentials: 'same-origin' });
                if (!resp.ok) { setTimeout(tick, 5_000); return; }
                const data = await resp.json();

                if (logEl && typeof data.build_logs === 'string') {
                  // Only write if content actually changed — avoids
                  // fighting the user if they're scrolling through history.
                  if (logEl.textContent !== data.build_logs) {
                    const atBottom = Math.abs(
                      (logEl.scrollTop + logEl.clientHeight) - logEl.scrollHeight
                    ) < 8;
                    logEl.textContent = data.build_logs;
                    if (atBottom) logEl.scrollTop = logEl.scrollHeight;
                    if (sizeEl) {
                      sizeEl.textContent =
                        (Math.floor(data.build_logs.length / 1024) + 1) + ' KB';
                    }
                  }
                }

                if (statusEl && data.status) {
                  const label = data.status === 'queued' ? 'Queued' : 'Running';
                  if (!statusEl.textContent.startsWith(label)) {
                    statusEl.textContent =
                      label + ' — executing the dbt cascade twice against BigQuery.';
                  }
                }

                if (data.is_terminal) {
                  // Reload exactly once so the committed final row renders
                  // its cost-comparison table, skipped reason, or failure
                  // details. After this point the polling loop is done.
                  window.location.reload();
                  return;
                }

                setTimeout(tick, 3_000);
              } catch (err) {
                setTimeout(tick, 5_000);
              }
            }

            setTimeout(tick, 3_000);
          })();
        </script>
      {% else %}
        <p class="text-sm text-slate-700 dark:text-slate-300">
          Failed: <code class="font-mono">{{ sol.shadow_run.failure_reason or sol.shadow_run.status }}</code>.
        </p>
      {% endif %}

      {% if sol.shadow_run.build_logs %}
      <details class="mt-3">
        <summary class="cursor-pointer text-[13px] text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100">
          Show dbt build logs ({{ (sol.shadow_run.build_logs | length) // 1024 + 1 }} KB)
        </summary>
        <pre class="mt-2 rounded bg-slate-950 text-slate-100 font-mono text-[12px] leading-tight px-3 py-2 whitespace-pre-wrap break-words" style="max-height: 480px; overflow-y: auto;">{{ sol.shadow_run.build_logs }}</pre>
      </details>
      {% endif %}
    </div>
    {% endif %}

    <div class="flex flex-wrap items-center gap-2">

      {# --- Run Comparison (primary) — streams dbt output live via SSE --- #}
      {% if not sol.shadow_run or sol.shadow_run.status not in ['succeeded', 'running'] %}
      <button type="button"
              id="governor-shadow-btn-{{ sol.id }}"
              data-stream-url="{{ create_pr_prefix }}/project/{{ sol.config_id }}/opportunity/{{ sol.opp_id }}/shadow-validate-stream?solution_id={{ sol.id }}"
              onclick="governorShadowStart('{{ sol.id }}')"
              class="ui-btn-primary inline-flex items-center gap-1.5 transition-colors">
        <svg class="w-4 h-4 js-shadow-idle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
        </svg>
        <svg class="w-4 h-4 animate-spin hidden js-shadow-running-icon" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor"
                d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
        </svg>
        <span class="js-shadow-label">Run Comparison</span>
      </button>
      {% endif %}

      {# --- Apply & Commit Locally — always available; after comparison it becomes the "accept" button --- #}
      {# Spec 128: disable Apply when any downstream patch is still manual_required. #}
      {% set has_manual_required = false %}
      {% if sol.file_diffs %}
        {% for fd in sol.file_diffs %}
          {% if (fd.proposal_meta or {}).get('status') == 'manual_required' %}
            {% set has_manual_required = true %}
          {% endif %}
        {% endfor %}
      {% endif %}
      <form method="post" action="{{ create_pr_prefix }}/project/{{ sol.config_id }}/opportunity/{{ sol.opp_id }}/apply-local"
            class="inline">
        <input type="hidden" name="solution_id" value="{{ sol.id }}">
        <button type="submit"
                name="action"
                value="apply_and_commit"
                {% if has_manual_required %}disabled
                title="One or more downstream patches need a manual edit before the bundle can be applied."
                {% else %}
                onclick="return confirm('Apply this solution to your local working tree and create a git commit?');"
                {% endif %}
                class="{% if has_manual_required %}ui-btn-secondary opacity-50 cursor-not-allowed{% elif sol.shadow_run and sol.shadow_run.status == 'succeeded' %}ui-btn-primary{% else %}ui-btn-secondary{% endif %} inline-flex items-center gap-1.5 transition-colors">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125"/>
          </svg>
          {% if has_manual_required %}
            Bundle has unresolved patches
          {% elif sol.shadow_run and sol.shadow_run.status == 'succeeded' %}
            Apply &amp; Commit Locally
          {% else %}
            Skip Comparison - Apply &amp; Commit Locally
          {% endif %}
        </button>
      </form>

    </div>

    {# --- Live terminal pane, populated by the SSE stream --- #}
    <div id="governor-shadow-terminal-{{ sol.id }}"
         class="hidden mt-2 rounded border border-slate-300 bg-slate-950 text-slate-100 font-mono text-[12px] leading-tight"
         style="max-height: 320px; overflow-y: auto;">
      <div class="px-3 py-2 border-b border-slate-700 text-slate-300 flex items-center justify-between">
        <span class="js-shadow-title">Shadow validation</span>
        <span class="js-shadow-status text-slate-400">starting…</span>
      </div>
      <pre class="px-3 py-2 whitespace-pre-wrap break-words js-shadow-log"></pre>
    </div>

    <p class="text-[13px] text-slate-500 dark:text-slate-400">
      {% if not sol.shadow_run or sol.shadow_run.status not in ['succeeded', 'running'] %}
        <strong>Run Comparison</strong> executes the cascade twice (baseline + shadow) against your local BigQuery dataset and reports real bytes/cost deltas. Live dbt output streams below.
        <strong>Skip</strong> writes the change directly to <code class="font-mono">{{ sol.file_path }}</code> with no empirical check.
      {% else %}
        Writes the generated change to <code class="font-mono">{{ sol.file_path }}</code> inside <code class="font-mono">{{ sol.local_project_path }}</code>.
      {% endif %}
      {% if sol.local_build_execution_mode and sol.local_build_execution_mode.description %}
        {{ sol.local_build_execution_mode.description }}
      {% endif %}
    </p>

    <script>
      (function () {
        if (window.governorShadowStart) return;
        window.governorShadowStart = function (solutionId) {
          var btn = document.getElementById("governor-shadow-btn-" + solutionId);
          if (!btn) return;
          if (!confirm("Run shadow comparison? This executes dbt twice against your local project — may take several minutes.")) {
            return;
          }
          // Button state
          btn.disabled = true;
          btn.classList.add("opacity-75", "cursor-wait");
          var idleIcon = btn.querySelector(".js-shadow-idle-icon");
          var runIcon = btn.querySelector(".js-shadow-running-icon");
          var lbl = btn.querySelector(".js-shadow-label");
          if (idleIcon) idleIcon.classList.add("hidden");
          if (runIcon) runIcon.classList.remove("hidden");
          if (lbl) lbl.textContent = "Running comparison…";
          document.querySelectorAll("form button[type=submit]").forEach(function (b) {
            b.disabled = true; b.classList.add("opacity-50", "cursor-not-allowed");
          });

          // Terminal pane
          var term = document.getElementById("governor-shadow-terminal-" + solutionId);
          var logEl = term.querySelector(".js-shadow-log");
          var statusEl = term.querySelector(".js-shadow-status");
          term.classList.remove("hidden");
          var appendLine = function (text, cls) {
            var span = document.createElement("div");
            if (cls) span.className = cls;
            span.textContent = text;
            logEl.appendChild(span);
            term.scrollTop = term.scrollHeight;
          };

          var url = btn.getAttribute("data-stream-url");
          var es = new EventSource(url);
          var finalStatus = null;  // "succeeded" | "<failure reason>"

          es.addEventListener("line", function (e) { appendLine(e.data, "text-slate-200"); });
          es.addEventListener("phase", function (e) {
            appendLine("▸ " + e.data, "text-sky-300 font-semibold mt-1");
            statusEl.textContent = e.data;
          });
          es.addEventListener("result", function (e) {
            finalStatus = e.data;
            var cls = (e.data === "succeeded") ? "text-emerald-400" : "text-rose-400";
            appendLine("● " + e.data, cls + " font-semibold mt-2");
            statusEl.textContent = e.data;
          });
          es.addEventListener("error", function (e) {
            finalStatus = finalStatus || "error";
            appendLine("✗ " + (e.data || "stream error"), "text-rose-400 font-semibold");
            statusEl.textContent = "error";
          });
          es.addEventListener("done", function (e) {
            es.close();
            if (finalStatus === "succeeded") {
              statusEl.textContent = "done — reloading…";
              setTimeout(function () {
                window.location.href = e.data || window.location.pathname;
              }, 1200);
            } else {
              // Keep terminal visible so the user can read the failure output.
              statusEl.textContent = "done (failed — review output below, then reload to retry)";
              appendLine(
                "— run did not succeed. Scroll this pane to inspect dbt output. " +
                "Reload the page to try again.",
                "text-amber-300 mt-2"
              );
              // Re-enable Apply-Locally button so user can still skip comparison
              document.querySelectorAll("form button[type=submit]").forEach(function (b) {
                b.disabled = false;
                b.classList.remove("opacity-50", "cursor-not-allowed");
              });
              // Restore Run Comparison button so user can retry after fixing
              btn.disabled = false;
              btn.classList.remove("opacity-75", "cursor-wait");
              if (idleIcon) idleIcon.classList.remove("hidden");
              if (runIcon) runIcon.classList.add("hidden");
              if (lbl) lbl.textContent = "Retry Comparison";
            }
          });
          es.onerror = function () {
            statusEl.textContent = "stream closed";
          };
        };
      })();
    </script>
    {% elif sol.local_apply_enabled and sol.opp_status == 'pr_pending' %}
    <div class="flex items-center gap-2 rounded border border-emerald-200 bg-emerald-50 px-4 py-3 dark:border-emerald-800 dark:bg-emerald-950/40">
      <svg class="h-5 w-5 text-emerald-500 dark:text-emerald-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      <div>
        <span class="text-sm font-medium text-emerald-700 dark:text-emerald-300">Applied to local project</span>
        <p class="text-[13px] text-emerald-600 dark:text-emerald-400">
          Change written to <code class="font-mono">{{ sol.file_path }}</code>. Run <code class="font-mono">dbt build</code> then sync to verify.
        </p>
      </div>
    </div>
    {% elif sol.local_execution_mode %}
    <div class="space-y-2 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200">
      <p class="font-medium">Local working tree not connected yet</p>
      <p class="text-[13px]">
        Set the dbt project folder on this project configuration to enable
        <span class="font-medium">Apply to Working Tree</span> for
        <code class="font-mono">{{ sol.file_path }}</code>.
      </p>
    </div>
    {% elif sol.repository %}
    <form method="post" action="{{ create_pr_prefix }}/project/{{ sol.config_id }}/opportunity/{{ sol.opp_id }}/create-pr"
          onsubmit="return confirm('Create a pull request for this solution?');">
      <input type="hidden" name="solution_id" value="{{ sol.id }}">
      <button type="submit"
              class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded
                     bg-emerald-600 text-white hover:bg-emerald-700
                     dark:bg-emerald-500 dark:hover:bg-emerald-600
                     transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
        </svg>
        Create Pull Request
      </button>
    </form>
    {% endif %}
    {% endif %}
  {% endif %}

  {% if sol.explanation and not (sol.resolution_category == 'dbt_project_change' and sol.diff_lines) %}
  <details class="ui-disclosure p-3">
    <summary>
      <p class="ui-card-label">Notes</p>
      <span class="ui-disclosure-toggle" aria-hidden="true"><svg class="h-3.5 w-3.5 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg></span>
    </summary>
    <p class="mt-3 text-sm text-slate-700 dark:text-slate-300 leading-relaxed">{{ sol.explanation }}</p>
  </details>
  {% endif %}

  {% if sol.resolution_category == 'bigquery_infrastructure' %}
    {% if sol.current_setting and sol.recommended_setting %}
      {% with current_setting=sol.current_setting, recommended_setting=sol.recommended_setting, affected_resource=sol.affected_resource %}
        {% include "components/setting_comparison.html" %}
      {% endwith %}
    {% endif %}
  {% endif %}

  {% if sol.risk_justification or sol.validation_report %}
  <details class="mt-1">
    <summary class="text-[13px] text-slate-500 dark:text-slate-400 cursor-pointer hover:text-brand-500 dark:hover:text-brand-300">
      Risk &amp; Validation Details
    </summary>
    <div class="mt-2 bg-slate-50 dark:bg-slate-950 rounded-sm px-3 py-2 space-y-3">
      {% if sol.risk_justification %}
      <p class="text-sm text-slate-700 dark:text-slate-300">{{ sol.risk_justification }}</p>
      {% endif %}

      {% if sol.validation_report %}
        {% set report_tier = sol.validation_report.tier or sol.validation_report.overall_tier %}
        {% if report_tier %}
        <p class="text-[13px] text-slate-600 dark:text-slate-300">
          Tier: {{ report_tier | replace('_', ' ') | title }}
        </p>
        {% endif %}
        {% if sol.validation_report.error %}
        <p class="text-[13px] text-red-600 dark:text-red-400">{{ sol.validation_report.error }}</p>
        {% endif %}
        {% if sol.validation_report.steps %}
        <div class="divide-y divide-slate-200 dark:divide-slate-800">
          {% for step in sol.validation_report.steps %}
          <div class="py-1.5">
            <div class="flex items-center gap-2">
              {% if step.result in ('pass', 'success', 'matched') or step.status == 'matched' %}
                <span class="w-4 h-4 text-brand-500 dark:text-brand-300">&#10003;</span>
              {% elif step.result in ('fail', 'failure') %}
                <span class="w-4 h-4 text-red-500 dark:text-red-400">&#10007;</span>
              {% else %}
                <span class="w-4 h-4 text-slate-400 dark:text-slate-500">&#8212;</span>
              {% endif %}
              <span class="text-[13px] text-slate-700 dark:text-slate-300">{{ step.name | default(step.type, true) | replace('_', ' ') | title }}</span>
              <span class="text-[13px] text-slate-500 dark:text-slate-400">{{ step.result | default(step.status, true) }}</span>
            </div>
            {% if step.details and step.details is string %}
            <p class="text-[13px] text-slate-500 dark:text-slate-400 ml-6 mt-0.5">{{ step.details }}</p>
            {% endif %}
            {% if step.classification %}
            <p class="text-[13px] text-slate-500 dark:text-slate-400 ml-6 mt-0.5">Classification: {{ step.classification }}</p>
            {% endif %}
          </div>
          {% endfor %}
        </div>
        {% endif %}
        {% if sol.validation_report.dbt_compile %}
        <div class="rounded-sm border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-3 py-2">
          <p class="text-[13px] font-medium text-slate-600 dark:text-slate-300">dbt Compile</p>
          <p class="text-[13px] text-slate-500 dark:text-slate-400 mt-1">
            {% if sol.validation_report.dbt_compile.success %}Success{% else %}Not successful{% endif %}
            {% if sol.validation_report.dbt_compile.reason %} · {{ sol.validation_report.dbt_compile.reason | replace('_', ' ') }}{% endif %}
            {% if sol.validation_report.dbt_compile.exit_code is not none %} · Exit {{ sol.validation_report.dbt_compile.exit_code }}{% endif %}
            {% if sol.validation_report.dbt_compile.duration_ms is not none %} · {{ sol.validation_report.dbt_compile.duration_ms }}ms{% endif %}
          </p>
          {% if sol.validation_report.dbt_compile.stderr %}
          <pre class="mt-2 overflow-x-auto rounded-sm bg-slate-50 dark:bg-slate-950 px-2 py-1 text-[13px] text-slate-600 dark:text-slate-300 whitespace-pre-wrap">{{ sol.validation_report.dbt_compile.stderr }}</pre>
          {% endif %}
        </div>
        {% endif %}
        {% if sol.validation_report.dbt_parse %}
        <div class="rounded-sm border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-3 py-2">
          <p class="text-[13px] font-medium text-slate-600 dark:text-slate-300">dbt Parse</p>
          <p class="text-[13px] text-slate-500 dark:text-slate-400 mt-1">
            {% if sol.validation_report.dbt_parse.success %}Success{% else %}Not successful{% endif %}
            {% if sol.validation_report.dbt_parse.exit_code is not none %} · Exit {{ sol.validation_report.dbt_parse.exit_code }}{% endif %}
            {% if sol.validation_report.dbt_parse.duration_ms is not none %} · {{ sol.validation_report.dbt_parse.duration_ms }}ms{% endif %}
            {% if sol.validation_report.dbt_parse.manifest_available %} · Manifest available{% endif %}
            {% if sol.validation_report.dbt_parse.optimized_sql_source == 'manifest_diff' %} · Optimized SQL via synced manifest diff{% endif %}
          </p>
          {% if sol.validation_report.dbt_parse.stderr %}
          <pre class="mt-2 overflow-x-auto rounded-sm bg-slate-50 dark:bg-slate-950 px-2 py-1 text-[13px] text-slate-600 dark:text-slate-300 whitespace-pre-wrap">{{ sol.validation_report.dbt_parse.stderr }}</pre>
          {% endif %}
        </div>
        {% endif %}
        {% if sol.validation_report.warnings %}
        <div class="mt-1">
          {% for warning in sol.validation_report.warnings %}
          <p class="text-[13px] text-amber-600 dark:text-amber-400">&#9888; {{ warning }}</p>
          {% endfor %}
        </div>
        {% endif %}
        {% if sol.validation_report.timestamp %}
        <p class="text-[13px] text-slate-400 dark:text-slate-500 mt-1">Validated: {{ sol.validation_report.timestamp }}</p>
        {% endif %}
      {% endif %}
    </div>
  </details>
  {% endif %}
</div>