{# Plan 43 Phase 4 — conversation drill-down drawer.
   Opens from the Users pane "History" button. Loads paired
   user/assistant turns from /api/admin/bots/conversation. Bot.js
   handles the convoDrawer.{open,user,turns} state.
   Chrome (teleport + backdrop + right panel) comes from the shared
   `drawer()` macro — see admin/components/ui.html. #}
{% from 'admin/components/ui.html' import drawer %}
{% call drawer('convoDrawer.open', 'closeConversation()') %}
    <div class="flex items-center justify-between p-4 border-b border-white/[0.06]">
      <div>
        <h3 class="text-[13px] font-semibold text-ink-100 tracking-tight">Conversation history</h3>
        <p class="text-[11px] text-ink-500 mt-0.5">
          <span class="font-mono text-cmdop-300" x-text="convoDrawer.user && convoDrawer.user.channel_kind"></span>
          ·
          <span class="font-mono" x-text="convoDrawer.user && convoDrawer.user.external_user_id"></span>
          <span x-show="convoDrawer.user && convoDrawer.user.note" class="text-ink-500">
            · <span x-text="convoDrawer.user && convoDrawer.user.note"></span>
          </span>
        </p>
      </div>
      <button @click="closeConversation()" class="text-ink-500 hover:text-ink-200 cursor-pointer"
              aria-label="Close conversation drawer">
        <i data-lucide="x" class="w-4 h-4"></i>
      </button>
    </div>
    <div class="flex-1 overflow-y-auto p-4 space-y-4 text-[13px]">
      <template x-if="convoDrawer.turns === null">
        <div class="text-ink-500 flex items-center gap-2">
          <i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i>
          Loading conversation…
        </div>
      </template>
      <template x-if="convoDrawer.turns && convoDrawer.turns.length === 0">
        <div class="text-center py-8">
          <i data-lucide="message-circle" class="w-8 h-8 mx-auto text-ink-600 mb-2"></i>
          <p class="text-[13px] text-ink-300 font-medium">No conversation history</p>
          <p class="text-[12px] text-ink-500 mt-1">
            This user hasn't completed any successful turns yet.
          </p>
        </div>
      </template>
      <template x-for="t in (convoDrawer.turns || [])" :key="t.request_id">
        <div class="rounded-md border border-white/[0.06] bg-black/30 overflow-hidden">
          <div class="px-3 py-2 bg-white/[0.02] border-b border-white/[0.06] flex items-center justify-between">
            <span class="text-[11px] text-ink-500 font-mono"
                  :title="formatTs(t.created_at)" x-text="formatRelative(t.created_at)"></span>
            <div class="flex items-center gap-2">
              <span x-show="t.duration_ms !== null" class="text-[11px] text-ink-500 font-mono"
                    x-text="t.duration_ms + ' ms'"></span>
              <span x-show="t.success" class="text-[11px] px-1.5 py-0.5 rounded border border-emerald-500/30 text-emerald-300">ok</span>
              <span x-show="!t.success" class="text-[11px] px-1.5 py-0.5 rounded border border-red-500/30 text-red-300">fail</span>
            </div>
          </div>
          <div class="p-3 space-y-3">
            <div>
              <p class="text-[10px] uppercase tracking-wider text-ink-500 mb-1">User</p>
              <p class="text-ink-200 whitespace-pre-wrap break-words" x-text="t.user_message"></p>
            </div>
            <div>
              <p class="text-[10px] uppercase tracking-wider text-cmdop-400 mb-1">Jarvis</p>
              <p class="text-ink-200 whitespace-pre-wrap break-words" x-text="t.assistant_message"></p>
            </div>
            <div x-show="t.error" class="text-[12px] text-red-300 font-mono" x-text="t.error"></div>
          </div>
        </div>
      </template>
    </div>
{% endcall %}