Expandable Alert

<!--
  A short summary that opens onto the noisy detail (a stack trace, the raw
  response) on demand. The HTML build uses native <details>/<summary> so it works
  with zero JavaScript and the browser wires the disclosure semantics for free;
  the React tabs use a button with aria-expanded/aria-controls for the same
  effect. The detail is <pre> that scrolls on its own (overflow-x-auto) so a long
  unbreakable line never widens the page at 320px. role="alert" for the error.
-->
<details class="group rounded-lg border border-red-200 bg-red-50 text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200" role="alert">
  <summary class="flex cursor-pointer items-start gap-2.5 rounded-lg px-4 py-3.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-700 dark:focus-visible:ring-red-300">
    <svg class="mt-px h-[1.125rem] w-[1.125rem] flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM7.7 7.7a1 1 0 0 1 1.4 0L10 8.6l.9-.9a1 1 0 1 1 1.4 1.4l-.9.9.9.9a1 1 0 0 1-1.4 1.4l-.9-.9-.9.9a1 1 0 0 1-1.4-1.4l.9-.9-.9-.9a1 1 0 0 1 0-1.4Z" />
    </svg>
    <span class="min-w-0 flex-1">
      <span class="block text-sm font-semibold">Deploy failed</span>
      <span class="mt-0.5 block text-sm leading-normal">The build step exited with code 1. Show details for the log.</span>
    </span>
    <svg class="mt-0.5 h-4 w-4 flex-none transition-transform group-open:rotate-180 motion-reduce:transition-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4Z" />
    </svg>
  </summary>
  <div class="border-t border-red-200 px-4 py-3 dark:border-red-900">
    <pre class="overflow-x-auto rounded bg-red-100/60 p-3 text-xs leading-relaxed dark:bg-red-900/40"><code>ERR! build exited with code 1
ERR! at Object.compile (/app/src/pipeline.ts:88:14)</code></pre>
  </div>
</details>