<!-- Peer header -->
<div class="flex flex-col gap-1 px-3 sm:px-4 py-3 border-b border-zinc-800 bg-zinc-950 shrink-0">
  <div class="flex items-center gap-2 sm:gap-4">
    <div class="flex items-center gap-2 sm:gap-2.5 min-w-0">
      <span class="w-2.5 h-2.5 rounded-full shrink-0 {{ 'bg-emerald-500' if peer.status == 'online' else 'bg-amber-500' if peer.status == 'busy' else 'bg-zinc-600' }}"></span>
      <div class="flex flex-col min-w-0">
        <div class="flex items-center gap-2">
          <span class="text-sm sm:text-base font-semibold text-zinc-200 truncate">{{ peer.label }}</span>
          <span class="text-[10px] text-zinc-600 font-mono">{{ peer.name }}</span>
        </div>
        {% if peer.description %}
        <span class="text-[11px] text-zinc-500 truncate">{{ peer.description }}</span>
        {% endif %}
      </div>
      <span class="text-[10px] px-2 py-0.5 rounded-full font-medium {{ 'bg-emerald-500/10 text-emerald-400' if peer.status == 'online' else 'bg-amber-500/10 text-amber-400' if peer.status == 'busy' else 'bg-zinc-700/50 text-zinc-500' }}">{{ peer.status }}</span>
    </div>
    <div class="hidden sm:flex items-center gap-3 text-xs text-zinc-500 font-mono overflow-hidden">
      <div class="flex items-center gap-1 shrink-0">
        <span class="text-zinc-600">circle:</span>
        <span>{{ peer.circle }}</span>
      </div>
      {% if peer.path %}
      <div class="flex items-center gap-1 min-w-0">
        <span class="text-zinc-600 truncate">{{ peer.parent_path }}</span>
        <span class="shrink-0">{{ peer.folder }}</span>
      </div>
      {% endif %}
    </div>
    <a href="/v2" class="ml-auto p-1.5 hover:bg-zinc-800 rounded-md transition-colors shrink-0">
      <svg class="w-4 h-4 text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
    </a>
  </div>
</div>

<!-- Chat messages -->
<div id="chat-messages" class="flex-1 overflow-y-auto p-4 flex flex-col gap-3">
  {% for msg in messages %}
  <div class="flex flex-col gap-1 {{ 'items-end' if msg.role == 'user' else 'items-start' }}">
    <span class="text-[10px] text-zinc-500 font-mono px-1">{{ 'user' if msg.role == 'user' else peer.name }}</span>
    <div class="max-w-[95%] sm:max-w-[80%] rounded-xl px-3 sm:px-4 py-2 sm:py-3 text-sm {{ 'bg-zinc-700 text-zinc-200' if msg.role == 'user' else 'bg-zinc-800/50 text-zinc-300' }}">
      {% if msg.role == 'user' %}
      <p class="whitespace-pre-wrap">{{ msg.text }}</p>
      {% else %}
      <div class="prose prose-invert prose-sm max-w-none">{{ msg.html }}</div>
      {% if msg.tool_calls %}
      <div class="mt-2 border-t border-zinc-700/50 pt-2">
        <details>
          <summary class="text-[11px] text-zinc-500 hover:text-zinc-400 cursor-pointer">
            {{ msg.tool_calls | length }} tool call{{ 's' if msg.tool_calls | length > 1 }}
          </summary>
          <div class="mt-1.5 space-y-1 pl-4">
            {% for tc in msg.tool_calls %}
            <div class="flex items-baseline gap-2 text-[11px] font-mono">
              <span class="text-blue-400 shrink-0">{{ tc.name }}</span>
              <span class="text-zinc-600 truncate">{{ tc.input }}</span>
            </div>
            {% endfor %}
          </div>
        </details>
      </div>
      {% endif %}
      {% endif %}
    </div>
    <span class="text-[10px] text-zinc-600 font-mono tabular-nums px-1">{{ msg.time }}</span>
  </div>
  {% endfor %}
  {% if not messages %}
  <div class="flex items-center justify-center h-full text-zinc-600 text-sm">
    No activity for {{ peer.name }} yet
  </div>
  {% endif %}
</div>
<script>document.getElementById('chat-messages')?.scrollTo(0, 999999)</script>

<!-- Compose bar -->
<div class="border-t border-zinc-800 bg-zinc-950 p-2 sm:p-3 flex flex-col gap-2 shrink-0">
  <div class="flex items-center gap-2 flex-wrap">
    <div class="flex items-center gap-2">
      <span class="text-xs text-zinc-300 font-mono truncate max-w-[10rem]">→ {{ peer.label }}</span>
      <div class="flex rounded-md overflow-hidden border border-zinc-700">
        <button data-on-click="$composeMode = 'notify'"
                data-class-bg-zinc-700="$composeMode === 'notify'"
                data-class-text-zinc-200="$composeMode === 'notify'"
                data-class-bg-zinc-900="$composeMode !== 'notify'"
                data-class-text-zinc-500="$composeMode !== 'notify'"
                class="px-2.5 py-1 text-xs transition-colors">notify</button>
        <button data-on-click="$composeMode = 'ask'"
                data-class-bg-zinc-700="$composeMode === 'ask'"
                data-class-text-zinc-200="$composeMode === 'ask'"
                data-class-bg-zinc-900="$composeMode !== 'ask'"
                data-class-text-zinc-500="$composeMode !== 'ask'"
                class="px-2.5 py-1 text-xs transition-colors">ask</button>
      </div>
    </div>
  </div>
  <form action="/v2/send/{{ peer.name }}" method="POST" class="flex flex-col gap-2">
    <textarea name="text"
              placeholder="Message {{ peer.label }}..."
              rows="1"
              required
              class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-sm text-zinc-300 placeholder-zinc-600 resize-none focus:outline-none focus:ring-1 focus:ring-zinc-500"></textarea>
    <button type="submit"
            class="w-full flex items-center justify-center gap-2 py-2 rounded-lg text-sm font-medium transition-colors bg-emerald-600 hover:bg-emerald-500 text-white">
      <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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
      <span>Send</span>
    </button>
  </form>
</div>
