{% if messages %}
<div id="status-container" class="space-y-3">
  {% for message in messages %} {% set is_error = message.startswith('Error:')
  %} {% set is_loading = loop.last and not result %} {% set is_tool_message =
  message.startswith('Using tool') %}

  <div
    class="flex {% if is_error %}items-start{% else %}items-center{% endif %} space-x-3 bg-white rounded-lg p-4 shadow-sm border {% if is_error %}border-red-200{% else %}border-gray-200{% endif %}">
    {% if is_error %}
    <svg
      class="h-5 w-5 shrink-0 mt-0.5 text-red-500"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    {% elif is_loading %}
    <div class="bg-blue-100 rounded-full p-1">
      <svg
        class="animate-spin h-4 w-4 text-blue-600"
        xmlns="http://www.w3.org/2000/svg"
        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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
    </div>
    {% else %}
    <div class="bg-green-100 rounded-full p-1">
      <svg
        class="h-4 w-4 text-green-600"
        fill="currentColor"
        viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
          clip-rule="evenodd" />
      </svg>
    </div>
    {% endif %}

    <div class="flex-1 min-w-0">
      {% if is_error %} {% set error_parts = message.split('body:', 1) %}
      <span class="text-red-800 font-medium">{{ error_parts[0] }}</span>
      {% if error_parts|length > 1 %}
      <pre
        class="mt-2 text-xs bg-red-50 text-red-700 p-2 rounded font-mono whitespace-pre-wrap break-all overflow-x-auto max-w-full">
{{ error_parts[1]|trim }}</pre
      >
      {% endif %} {% elif is_tool_message %} {% set parts = message.split(' ',
      2) %} {% set tool_parts = parts[2].split('...', 1) %}
      <span class="text-gray-700"
        >{{ parts[0] }} {{ parts[1] }}
        <code
          class="font-mono bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-sm"
          >{{ tool_parts[0] }}</code
        >{% if tool_parts|length > 1 %}...{{ tool_parts[1] }}{% endif %}</span
      >
      {% else %}
      <span
        class="{% if is_loading %}text-gray-900 font-medium{% else %}text-gray-700{% endif %}"
        >{{ message }}</span
      >
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}