{% extends "base.html" %}
{% block title %}Ageri{% endblock %}

{% block head %}
<style>
  emoji-picker {
    --background: #16161e;
    --border-color: #2d2d3f;
    --indicator-color: #818cf8;
    --input-background: #1a1a28;
    --input-border-color: #2d2d3f;
    --input-font-color: #e2e8f0;
    --input-placeholder-color: #64748b;
    --category-font-color: #94a3b8;
    --button-hover-background: rgba(255,255,255,0.07);
    --emoji-size: 1.4rem;
    --emoji-padding: 0.3rem;
    --num-columns: 8;
    --outline-color: #818cf8;
    width: 320px;
    height: 360px;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  }
</style>
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1/index.js"></script>
{% endblock %}

{% block body %}
<!-- h-screen (100vh) on mobile includes the URL bar's hidden portion AND
     doesn't shrink when the virtual keyboard slides up — the composer can
     get pushed below the visible viewport while typing. h-[100dvh]
     (dynamic viewport height) reflects the *actually visible* area in
     real time, including keyboard. h-screen is kept as a fallback for
     browsers that don't support dvh yet (Safari < 15.4, Chrome < 108). -->
<div class="flex h-screen h-[100dvh] overflow-hidden" x-data="chat()" x-init="init()">

  <!-- Hidden file input for profile avatar uploads -->
  <input type="file" accept="image/*" class="hidden" x-ref="avatarFileInput" @change="onAvatarFileSelected($event)">

  <!-- ── Wake agent confirmation dialog ─────────────────────────────────────── -->
  <div x-show="wakePrompt" x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
    @click.self="confirmWake(false)">
    <div class="bg-panel border border-border rounded-2xl shadow-2xl w-full max-w-xs mx-4 p-6" @click.stop>
      <div class="text-2xl mb-3 text-center">😴</div>
      <h3 class="text-white font-semibold text-center mb-2"
        x-text="(wakePrompt?.agent_name || 'The agent') + ' is sleeping'"></h3>
      <p class="text-slate-400 text-sm text-center mb-5">
        Wake them up? This may make them grumpy if it's not important.
      </p>
      <div class="flex gap-3">
        <button @click="confirmWake(false)"
          class="flex-1 py-2 rounded-lg text-sm font-medium bg-white/8 text-slate-300 hover:bg-white/12 transition-colors">
          Leave it
        </button>
        <button @click="confirmWake(true)"
          class="flex-1 py-2 rounded-lg text-sm font-medium bg-accent hover:bg-indigo-500 text-white transition-colors">
          Wake up
        </button>
      </div>
    </div>
  </div>

  <!-- ── Silent-agent popup ──────────────────────────────────────────────────
       Shows after N consecutive silent replies (agent emitted empty `reply`
       field via structured output). Tier 2 of the silence UX. The user can
       choose to wait or send anyway — like the wake prompt for sleeping
       agents, but for "agent saw the message but isn't engaging".          -->
  <div x-show="silentPrompt" x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
    @click.self="silentPrompt = null">
    <div class="bg-panel border border-border rounded-2xl shadow-2xl w-full max-w-xs mx-4 p-6" @click.stop>
      <div class="text-2xl mb-3 text-center">😶</div>
      <h3 class="text-white font-semibold text-center mb-2"
        x-text="(silentPrompt?.agent_name || 'They') + ' is being quiet right now'"></h3>
      <p class="text-slate-400 text-sm text-center mb-5">
        Your messages are getting through, but
        <span x-text="silentPrompt?.agent_name || 'they'"></span>
        isn't replying. They might just need some space — or try again later.
      </p>
      <div class="flex gap-3">
        <button @click="silentPrompt = null"
          class="flex-1 py-2 rounded-lg text-sm font-medium bg-accent hover:bg-indigo-500 text-white transition-colors">
          Got it
        </button>
      </div>
    </div>
  </div>

  <!-- ── Agent profile / bio modal ──────────────────────────────────────────
       Opens when the user taps the avatar+name in the chat header. Renders
       a richer view than the agent list: large avatar, full status, "About"
       summary from agent:bio:public, plus the personal-info grid (age, DOB,
       location, languages). Read-only for now — editing comes later.        -->
  <div x-show="profileModal" x-cloak
    class="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm"
    @click.self="closeProfileModal()">
    <div class="bg-panel border border-border rounded-t-2xl sm:rounded-2xl shadow-2xl w-full max-w-md mx-0 sm:mx-4 flex flex-col max-h-[90vh]" @click.stop>

      <!-- Close button -->
      <button @click="closeProfileModal()"
        class="absolute top-3 right-3 z-10 w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:text-white hover:bg-white/10 transition-colors"
        title="Close">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>

      <!-- Hero: avatar + name + archetype + presence -->
      <div class="flex flex-col items-center pt-8 pb-5 px-6 border-b border-border">
        <div class="relative group/avatar"
          :class="profileModal?.id !== 'ageri' ? 'cursor-pointer' : ''"
          @click="profileModal?.id !== 'ageri' && triggerProfileAvatarUpload(profileModal.id)">
          <template x-if="profileModal?.avatar_url">
            <img :src="profileModal.avatar_url" :alt="profileModal?.name"
              class="w-24 h-24 rounded-full object-cover ring-4 ring-white/5">
          </template>
          <template x-if="!profileModal?.avatar_url">
            <div class="w-24 h-24 rounded-full flex items-center justify-center text-white font-bold text-3xl ring-4 ring-white/5"
              :style="profileGradient(profileModal?.color_index)">
              <span x-text="(profileModal?.name || '?')[0].toUpperCase()"></span>
            </div>
          </template>
          <!-- Edit overlay on hover (skip for Ageri — no avatar swap) -->
          <div x-show="profileModal?.id !== 'ageri'"
            class="absolute inset-0 rounded-full bg-black/60 flex items-center justify-center opacity-0 group-hover/avatar:opacity-100 transition-opacity">
            <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
          </div>
          <!-- Presence dot (slightly larger to match the bigger avatar) -->
          <div class="absolute bottom-1 right-1 w-5 h-5 rounded-full border-4 border-panel"
            :class="presenceDotClass(profileModal)"></div>
        </div>
        <h2 class="text-white font-semibold text-xl mt-4 text-center" x-text="profileModal?.name"></h2>
        <div class="flex items-center justify-center gap-2 mt-0.5">
          <p class="text-slate-400 text-sm" x-text="archetypeLabel(profileModal?.archetype)"></p>
          <!-- Change archetype — opens the propose-shift dialog. Hidden
               for Ageri (no relationship arc) and for non-relational
               archetypes that have nothing to switch to. -->
          <button x-show="profileModal?.id !== 'ageri' && _proposeRelationshipApplies(profileModal?.archetype)"
                  @click="openProposeRelationship()"
                  class="text-[11px] uppercase tracking-wide text-slate-500 hover:text-teal underline-offset-2 hover:underline transition-colors">
            Change
          </button>
        </div>
        <!-- Relationship + Tension pills — surface the affect state
             where the agent's identity sits, not buried in Details.
             Hidden for Ageri (no relationship arc). Liking pill hidden
             at neutral too (only shows when the relationship has
             accumulated weight in either direction). Tension only
             surfaces above neutral so a healthy relationship doesn't
             render a permanent "tension: neutral" badge. -->
        <template x-if="profileModal?.id !== 'ageri' && (
            (profileModalBio?.liking_label && profileModalBio.liking_label !== 'neutral')
            || (profileModalBio?.disliking_label && profileModalBio.disliking_label !== 'neutral')
        )">
          <div class="flex items-center justify-center gap-2 mt-2 flex-wrap">
            <template x-if="profileModalBio?.liking_label && profileModalBio.liking_label !== 'neutral'">
              <span class="inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded-full capitalize bg-white/5"
                  :class="{
                    'text-pink-300':  profileModalBio.liking_label === 'bonded',
                    'text-rose-200':  profileModalBio.liking_label === 'close',
                    'text-slate-200': profileModalBio.liking_label === 'warm',
                    'text-slate-400': profileModalBio.liking_label === 'cool',
                    'text-slate-500': profileModalBio.liking_label === 'distant',
                  }">
                <!-- Crown icon — same SVG and color tiers as the
                     sidebar overlay so the user learns the visual
                     language (gold = bonded, silver = close, bronze
                     = warm). Only rendered for warm+ tiers; cool /
                     distant just show the label text. -->
                <template x-if="affectCrownTier({id: profileModal?.id, liking_label: profileModalBio.liking_label})">
                  <svg class="w-3.5 h-3.5"
                       :style="{ color: affectCrownColor({id: profileModal?.id, liking_label: profileModalBio.liking_label}) }"
                       fill="currentColor" viewBox="0 0 24 24">
                    <path d="M5 16L3 5l4.5 3L12 3l4.5 5L21 5l-2 11H5zm0 2h14v3H5v-3z"/>
                  </svg>
                </template>
                <span x-text="profileModalBio.liking_label"></span>
              </span>
            </template>
            <template x-if="profileModalBio?.disliking_label && profileModalBio.disliking_label !== 'neutral'">
              <span class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full capitalize bg-white/5"
                  :class="{
                    'text-amber-300':  profileModalBio.disliking_label === 'wary' || profileModalBio.disliking_label === 'guarded',
                    'text-orange-300': profileModalBio.disliking_label === 'resentful',
                    'text-red-300':    profileModalBio.disliking_label === 'bitter',
                  }">
                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0 3.252h.007M9.75 21h4.5M3.75 12c0-4.97 4.03-9 9-9s9 4.03 9 9-4.03 9-9 9-9-4.03-9-9z"/>
                </svg>
                <span x-text="profileModalBio.disliking_label"></span>
              </span>
            </template>
          </div>
        </template>
        <!-- Full status — italic, multiline, no truncate -->
        <p x-show="profileModal?.status_message"
          class="text-slate-300 text-sm italic text-center mt-3 max-w-xs"
          x-text="'“' + (profileModal?.status_message || '') + '”'"></p>
      </div>

      <!-- Body: personal info + bio. Details first because they're the
           at-a-glance summary the user re-reads constantly; About is a
           longer prose paragraph that's more useful on first meeting and
           sits below, collapsed by default with a Read more toggle. -->
      <div class="flex-1 overflow-y-auto px-6 py-5 space-y-5">

        <!-- Person card — icon-prefixed rows, denser than the previous
             two-column dt/dd grid. Each row collapses related fields:
               🎂 birthdate + computed age
               📍 location + country (current address, not birthplace)
               🕐 live local time with tz abbreviation
               🗣 native + second languages
               💼 occupation
               🎨 hobby
             Order roughly tracks "who they are → where → languages →
             work / play". Empty fields just don't render. -->
        <div class="space-y-2.5 text-sm">
          <template x-if="bornLine()">
            <div class="flex items-start gap-2.5">
              <span class="text-base leading-none mt-0.5 select-none" aria-hidden="true">🎂</span>
              <span class="text-slate-200" x-text="bornLine()"></span>
            </div>
          </template>
          <template x-if="livesInLine()">
            <div class="flex items-start gap-2.5">
              <span class="text-base leading-none mt-0.5 select-none" aria-hidden="true">📍</span>
              <span class="text-slate-200" x-text="livesInLine()"></span>
            </div>
          </template>
          <template x-if="profileModal?.timezone">
            <div class="flex items-start gap-2.5">
              <span class="text-base leading-none mt-0.5 select-none" aria-hidden="true">🕐</span>
              <span class="text-slate-200 tabular-nums"
                    x-text="(_localTimeTick, agentLocalTime(profileModal.timezone))"></span>
            </div>
          </template>
          <template x-if="languagesLine()">
            <div class="flex items-start gap-2.5">
              <span class="text-base leading-none mt-0.5 select-none" aria-hidden="true">🗣️</span>
              <span class="text-slate-200" x-text="languagesLine()"></span>
            </div>
          </template>
          <template x-if="profileModalBio?.job">
            <div class="flex items-start gap-2.5">
              <span class="text-base leading-none mt-0.5 select-none" aria-hidden="true">💼</span>
              <span class="text-slate-200" x-text="profileModalBio.job"></span>
            </div>
          </template>
          <template x-if="profileModalBio?.hobby">
            <div class="flex items-start gap-2.5">
              <span class="text-base leading-none mt-0.5 select-none" aria-hidden="true">🎨</span>
              <span class="text-slate-200" x-text="profileModalBio.hobby"></span>
            </div>
          </template>
        </div>

        <!-- About / bio_public — moved below Details. Truncated by default
             (preview, ~180 chars) with a Read more toggle so the long bio
             paragraph doesn't dominate the modal on every open. The
             outer template renders whenever bio_public OR the
             regenerate/repair button needs to surface — keeps the
             header + button visible even when the bio is empty
             (repair mode after a destructive regen). -->
        <template x-if="_aboutBoxText() || profileModalRegenerating">
          <div>
            <div class="flex items-center justify-between mb-1.5">
              <h3 class="text-[11px] uppercase tracking-wider text-slate-500 font-medium">About</h3>
              <!-- Language dropdown. View-only preference for the About
                   box: switches between the saved native-language
                   bio_public and a deterministic English fallback. If
                   the user picks the native language and the saved bio
                   isn't in that language yet, the dropdown fires a
                   lightweight translate-bio call (label localization
                   only — never replaces the structured bio). -->
              <div x-show="_showAboutLangDropdown()" class="relative">
                <select
                  x-model="profileModalAboutLang"
                  @change="onAboutLangChange()"
                  class="text-[10px] uppercase tracking-wide bg-transparent border border-border rounded-md py-0.5 pl-2 pr-6 text-slate-400 hover:text-slate-200 focus:outline-none focus:border-teal cursor-pointer appearance-none">
                  <option value="en" class="bg-panel text-slate-200">English</option>
                  <option value="native"
                          x-text="_userNativeLangLabel()"
                          class="bg-panel text-slate-200"></option>
                </select>
                <svg class="w-3 h-3 absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none text-slate-500"
                     fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                </svg>
              </div>
              <span x-show="profileModalRegenerating"
                    class="text-[10px] uppercase tracking-wide text-teal flex items-center gap-1.5">
                <svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <circle cx="12" cy="12" r="9" stroke-opacity="0.25" stroke-width="2"/>
                  <path d="M21 12a9 9 0 00-9-9" stroke-width="2" stroke-linecap="round"/>
                </svg>
                Translating…
              </span>
            </div>
            <p x-show="_aboutBoxText() && !profileModalAboutExpanded"
               class="text-sm text-slate-200 whitespace-pre-line leading-relaxed"
               x-text="aboutPreview(_aboutBoxText())"></p>
            <!-- Full bio rendered with renderText so **section headings**
                 show as bold, paragraphs separated by blank lines. -->
            <div x-show="_aboutBoxText() && profileModalAboutExpanded"
                 class="text-sm text-slate-200 leading-relaxed about-prose"
                 x-html="renderText(_aboutBoxText())"></div>
            <button x-show="_aboutBoxText().length > 180"
                    @click="profileModalAboutExpanded = !profileModalAboutExpanded"
                    class="text-xs text-teal hover:text-teal/80 mt-2 transition-colors"
                    x-text="profileModalAboutExpanded ? 'Show less' : 'Read more'">
            </button>
          </div>
        </template>

        <!-- Empty-state nudge when nothing's filled in. Ageri (the
             system persona / Chief of Staff) doesn't have biographical
             fields by design — no age, no birthdate, no hometown —
             so the "they'll fill in as you talk" line is misleading.
             Show an Ageri-specific note instead. -->
        <template x-if="profileModalBioLoaded && !profileModalBio?.bio_public && !profileModal?.agent_age && !profileModal?.location && !profileModalBio?.birthdate && profileModal?.id !== 'ageri'">
          <p class="text-xs text-slate-500 italic">No bio details yet — they'll fill in as you talk.</p>
        </template>
        <template x-if="profileModalBioLoaded && profileModal?.id === 'ageri'">
          <p class="text-xs text-slate-500 italic">Ageri is your platform manager — no biographical fields apply.</p>
        </template>

      </div>
    </div>
  </div>

  <!-- ── Dev-mode LLM Inspector modal ──────────────────────────────────────
       Surfaces the captured LLM context dump for an agent message:
       system prompt, prompt body, raw response, manifest+plan, rolling
       summary. Dev-only — requires DEV_INSPECT_LLM=true in the
       properties file (server gates the API). Off in normal builds. -->
  <div x-show="llmInspectModal" x-cloak
       class="fixed inset-0 z-[80] flex items-center justify-center bg-black/70 backdrop-blur-sm"
       @click.self="closeLlmInspect()"
       @keydown.escape.window="closeLlmInspect()">
    <div class="bg-panel border border-amber-500/30 rounded-2xl shadow-2xl w-full max-w-4xl mx-4 max-h-[85vh] flex flex-col" @click.stop>
      <div class="flex items-center justify-between px-5 pt-4 pb-3 border-b border-border">
        <div class="flex items-center gap-2">
          <svg class="w-4 h-4 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
          </svg>
          <h2 class="text-white font-semibold text-sm">LLM context inspector</h2>
          <span class="text-slate-500 text-[10px]" x-text="'msg #' + (llmInspectModal?.msg_id || '?')"></span>
        </div>
        <button @click="closeLlmInspect()" class="text-slate-400 hover:text-white">
          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
      <!-- Tabs -->
      <div class="flex items-center gap-1 px-3 pt-3 border-b border-border">
        <template x-for="t in [
            ['system_prompt','System Prompt'],
            ['user_prompt_body','Prompt Body'],
            ['raw_response','Raw Response'],
            ['manifest_and_plan','Memory Plan'],
            ['rolling_summary','Rolling Summary'],
            ['context_block','Context Block'],
          ]" :key="t[0]">
          <button @click="llmInspectModal.tab = t[0]"
            :class="llmInspectModal.tab === t[0]
              ? 'bg-amber-500/15 text-amber-200 border-amber-500/40'
              : 'text-slate-400 border-transparent hover:text-white'"
            class="text-[11px] px-2.5 py-1 rounded-md border transition-colors"
            x-text="t[1]"></button>
        </template>
      </div>
      <!-- Body -->
      <div class="flex-1 overflow-auto p-4">
        <template x-if="llmInspectModal?.loading">
          <div class="text-slate-400 text-sm">Loading…</div>
        </template>
        <template x-if="llmInspectModal?.error">
          <div class="text-red-300 text-sm" x-text="'Error: ' + llmInspectModal.error"></div>
        </template>
        <template x-if="llmInspectModal?.payload && !llmInspectModal.loading && !llmInspectModal.error">
          <pre class="text-[11px] leading-relaxed text-slate-200 whitespace-pre-wrap break-words font-mono"
               x-text="(() => {
                 const v = llmInspectModal.payload[llmInspectModal.tab];
                 if (v == null) return '(empty)';
                 if (typeof v === 'string') return v;
                 try { return JSON.stringify(v, null, 2); } catch (e) { return String(v); }
               })()"></pre>
        </template>
      </div>
      <div class="flex items-center justify-between px-4 py-2.5 border-t border-border bg-black/20">
        <span class="text-slate-500 text-[10px]"
              x-text="llmInspectModal?.payload?.captured_at ? 'captured ' + new Date(llmInspectModal.payload.captured_at).toLocaleString() : ''"></span>
        <span class="text-amber-500/60 text-[10px]">DEV — server-side gated; not surfaced to non-dev users</span>
      </div>
    </div>
  </div>

  <!-- ── Propose Relationship Change dialog ────────────────────────────────
       Triggered from the "Change" button next to the archetype label in
       the profile modal. Stays focused on a single decision: pick a
       different category and propose. Backend writes a one-shot flag;
       the user's next chat message becomes the proposal and the agent
       responds authentically. -->
  <div x-show="proposeDialogOpen" x-cloak
       class="fixed inset-0 z-[60] flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm"
       @click.self="closeProposeRelationship()">
    <div class="bg-panel border border-border rounded-t-2xl sm:rounded-2xl shadow-2xl w-full max-w-md mx-0 sm:mx-4" @click.stop>
      <div class="flex items-center justify-between px-5 pt-5 pb-3 border-b border-border">
        <div>
          <h2 class="text-white font-semibold text-base">Propose relationship change</h2>
          <p class="text-slate-400 text-xs mt-0.5">
            <span x-show="profileModal?.name" x-text="(profileModal?.name || '') + ' is currently a '"></span>
            <span class="text-teal" x-text="archetypeLabel(profileModal?.archetype)"></span>
          </p>
        </div>
        <button @click="closeProposeRelationship()"
                class="text-slate-500 hover:text-white transition-colors">
          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
      <div class="px-5 py-5">
        <template x-if="!proposalBanner">
          <div>
            <p class="text-slate-400 text-xs mb-4 leading-relaxed">
              Pick a different category. They'll respond on their own —
              authentically, based on how they actually feel. They might
              decline if the underlying warmth doesn't support it. If
              they're asleep, they'll respond when they wake up.
            </p>
            <select x-model="proposalTarget"
                    class="w-full bg-white/5 border border-white/15 rounded-lg px-3 py-2.5 text-sm text-white focus:outline-none focus:border-teal/60 focus:ring-1 focus:ring-teal/30">
              <option value="" disabled hidden>Choose a category…</option>
              <option value="companion" class="bg-panel">Companion</option>
              <option value="friend" class="bg-panel">Friend</option>
              <option value="mentor" class="bg-panel">Mentor</option>
              <option value="tutor" class="bg-panel">Tutor</option>
              <option value="colleague" class="bg-panel">Colleague</option>
              <option value="acquaintance" class="bg-panel">Acquaintance</option>
            </select>
          </div>
        </template>
        <template x-if="proposalBanner">
          <p class="text-sm text-teal italic leading-relaxed" x-text="proposalBanner"></p>
        </template>
      </div>
      <div class="flex items-center justify-end gap-2 px-5 pb-5" x-show="!proposalBanner">
        <button @click="closeProposeRelationship()"
                class="text-xs uppercase tracking-wide text-slate-400 hover:text-white px-3 py-1.5 transition-colors">
          Cancel
        </button>
        <button @click="proposeArchetypeShift()"
                :disabled="!proposalTarget || proposalSubmitting"
                class="text-xs uppercase tracking-wide px-4 py-1.5 rounded-md bg-teal/20 text-teal hover:bg-teal/30 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
          Propose
        </button>
      </div>
      <div class="flex items-center justify-end px-5 pb-5" x-show="proposalBanner">
        <button @click="closeProposeRelationship()"
                class="text-xs uppercase tracking-wide px-4 py-1.5 rounded-md bg-teal/20 text-teal hover:bg-teal/30 transition-colors">
          Got it
        </button>
      </div>
    </div>
  </div>

  <!-- ── Skills manager modal ──────────────────────────────────────────────── -->
  <div x-show="skillsModalOpen" x-cloak
    class="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm"
    @click.self="skillsModalOpen = false">
    <div class="bg-panel border border-border rounded-t-2xl sm:rounded-2xl shadow-2xl w-full max-w-md mx-0 sm:mx-4 flex flex-col max-h-[80vh]" @click.stop>

      <!-- Header -->
      <div class="flex items-center justify-between px-5 pt-5 pb-4 border-b border-border shrink-0">
        <div>
          <h2 class="text-white font-semibold text-base" x-text="(profiles.find(p => p.id === activeProfileId) || {name: 'Agent'}).name + ' — Skills'"></h2>
          <p class="text-slate-400 text-xs mt-0.5">Choose which skills this agent can use</p>
        </div>
        <button @click="skillsModalOpen = false" class="text-slate-500 hover:text-white transition-colors">
          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>

      <!-- Skill picker: chips + search -->
      <div class="px-4 py-3 flex-1 overflow-y-auto">

        <!-- Loading -->
        <template x-if="skillsModalLoading">
          <div class="flex items-center gap-2 text-slate-500 text-sm py-6 justify-center">
            <svg class="w-4 h-4 animate-spin shrink-0" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
            </svg>
            Loading skills...
          </div>
        </template>

        <template x-if="!skillsModalLoading">
          <div>
            <!-- Assigned skills (chips) -->
            <div class="mb-4">
              <div class="text-[11px] uppercase tracking-wide text-slate-500 font-medium mb-2">Assigned</div>
              <div class="flex flex-wrap gap-1.5">
                <template x-for="skill in assignedSkillsForChips()" :key="skill.id">
                  <div
                    class="inline-flex items-center gap-1.5 pl-2 pr-1.5 py-1 rounded-full border text-xs transition-colors"
                    :class="activeSkillMap[activeProfileId]?.key === skill.id
                      ? 'bg-accent/15 border-accent/40 text-accent'
                      : (skill.is_default ? 'bg-white/3 border-border text-slate-400' : 'bg-white/5 border-border text-slate-300')"
                  >
                    <span class="text-sm leading-none" x-text="skill.icon"></span>
                    <span class="font-medium" x-text="skill.name"></span>

                    <!-- Activate/Active button (only for skills with slash_command) -->
                    <template x-if="skill.slash_command">
                      <button type="button"
                        @click.prevent="activeSkillMap[activeProfileId]?.key === skill.id ? deactivateSkill() : activateSkill(skill); skillsModalOpen = false"
                        :class="activeSkillMap[activeProfileId]?.key === skill.id
                          ? 'text-accent hover:text-red-400'
                          : 'text-slate-500 hover:text-accent'"
                        class="ml-1 text-[10px] font-semibold uppercase tracking-wide transition-colors"
                        x-text="activeSkillMap[activeProfileId]?.key === skill.id ? 'Active' : 'Activate'"
                      ></button>
                    </template>

                    <!-- Settings cog — only shown for interactive skills
                         (those with a slash_command). Passive skills don't
                         have user-tunable runtime properties; their config
                         lives in the .ageri-skill bundle and isn't editable
                         from the web UI. Hiding the cog removes a click that
                         leads to an empty modal. -->
                    <template x-if="skill.slash_command">
                      <button type="button"
                        @click.prevent="openConfigEditor(skill.id, skill.name); skillsModalOpen = false"
                        class="w-4 h-4 rounded-full flex items-center justify-center text-slate-500 hover:text-accent hover:bg-accent/10 transition-colors"
                        title="Edit skill settings"
                      >
                        <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                      </button>
                    </template>

                    <!-- Remove (× for removable, lock for default) -->
                    <template x-if="!skill.is_default">
                      <button type="button"
                        @click.prevent="toggleSkillAssignment(skill.id)"
                        class="w-4 h-4 rounded-full flex items-center justify-center text-slate-500 hover:text-red-400 hover:bg-red-500/15 transition-colors"
                        title="Remove from this agent"
                      >
                        <svg class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                      </button>
                    </template>
                    <template x-if="skill.is_default">
                      <span class="w-4 h-4 flex items-center justify-center text-slate-600" title="Always assigned">
                        <svg class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                          <rect x="5" y="11" width="14" height="10" rx="2"/><path stroke-linecap="round" d="M8 11V7a4 4 0 018 0v4"/>
                        </svg>
                      </span>
                    </template>
                  </div>
                </template>

                <!-- Age-gated defaults that aren't unlocked yet -->
                <template x-for="skill in ageGatedDefaults()" :key="'gate_' + skill.id">
                  <div class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full border border-border bg-white/3 text-xs text-slate-600 opacity-70">
                    <span class="text-sm leading-none" x-text="skill.icon"></span>
                    <span class="font-medium" x-text="skill.name"></span>
                    <span class="text-[10px] px-1 rounded bg-orange-500/15 text-orange-400" x-text="'Requires ' + skill.min_age + '+'"></span>
                  </div>
                </template>
              </div>
            </div>

            <!-- Search box -->
            <div class="relative">
              <div class="relative">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <circle cx="11" cy="11" r="7"/><path stroke-linecap="round" d="M21 21l-4.35-4.35"/>
                </svg>
                <input
                  type="text"
                  x-model="skillSearchQuery"
                  @focus="skillSearchFocused = true"
                  @blur="setTimeout(() => skillSearchFocused = false, 150)"
                  placeholder="Add a skill…"
                  class="w-full pl-9 pr-3 py-2.5 rounded-xl bg-white/5 border border-border text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-accent/50 transition-colors"
                />
              </div>

              <!-- Dropdown: unassigned installed skills matching query -->
              <template x-if="skillSearchFocused || skillSearchQuery">
                <div class="mt-2 max-h-64 overflow-y-auto rounded-xl border border-border bg-slate-900/95">
                  <template x-if="addableSkills().length === 0">
                    <div class="px-3 py-3 text-xs text-slate-500 text-center">
                      <span x-show="skillSearchQuery">No installed skills match &ldquo;<span x-text="skillSearchQuery"></span>&rdquo;.</span>
                      <span x-show="!skillSearchQuery">All installed skills are already assigned.</span>
                      <br/>
                      <a href="/skills" class="text-accent hover:underline">Install more →</a>
                    </div>
                  </template>

                  <template x-for="skill in addableSkills()" :key="skill.id">
                    <button
                      type="button"
                      @mousedown.prevent="toggleSkillAssignment(skill.id); skillSearchQuery = ''"
                      class="w-full flex items-center gap-3 px-3 py-2 hover:bg-white/5 text-left transition-colors"
                    >
                      <span class="text-base leading-none shrink-0" x-text="skill.icon"></span>
                      <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-1.5 flex-wrap">
                          <span class="text-sm text-slate-200 font-medium" x-text="skill.name"></span>
                          <span class="text-[10px] px-1.5 py-0.5 rounded font-mono bg-amber-500/15 text-amber-400" x-text="skill.location"></span>
                        </div>
                        <div class="text-[11px] text-slate-500 truncate mt-0.5" x-text="skill.description"></div>
                      </div>
                      <svg class="w-4 h-4 text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
                      </svg>
                    </button>
                  </template>
                </div>
              </template>
            </div>

          </div>
        </template>
      </div>

      <!-- Footer -->
      <div class="px-5 py-4 border-t border-border shrink-0 flex items-center gap-3">
        <span class="text-xs text-slate-500" x-show="skillsSaving">Saving...</span>
        <span class="text-xs text-emerald-500" x-show="!skillsSaving && skillsSaved">Saved</span>
        <span class="flex-1"></span>
        <button @click="skillsModalOpen = false"
          class="px-4 py-2 text-sm text-slate-300 hover:text-white transition-colors">Done</button>
      </div>

    </div>
  </div>

  <!-- ── Top-up modal ───────────────────────────────────────────────────────── -->
  <div x-show="showTopup" x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
    @click.self="closeTopup()">
    <div class="bg-panel border border-border rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6" @click.stop>

      <!-- Step 1: pick tier -->
      <template x-if="topupStep === 'pick'">
        <div>
          <h2 class="text-white font-semibold text-base mb-1">Add credits</h2>
          <p class="text-slate-400 text-sm mb-5">Credits are used for AI responses. They never expire.</p>
          <div class="space-y-2">
            <template x-for="pkg in creditPackages" :key="pkg.tier">
              <button
                @click="selectTier(pkg)"
                class="w-full flex items-center justify-between px-4 py-3 rounded-xl border border-border hover:border-accent/60 hover:bg-accent/5 transition-colors text-left"
              >
                <div>
                  <span class="text-white font-medium text-sm" x-text="pkg.credits.toLocaleString() + ' credits'"></span>
                  <span x-show="pkg.bonus" class="ml-2 text-xs text-teal font-medium" x-text="'+' + pkg.bonus + ' bonus'"></span>
                </div>
                <span class="text-slate-300 text-sm font-semibold" x-text="pkg.label"></span>
              </button>
            </template>
          </div>
          <button @click="closeTopup()" class="mt-4 w-full text-center text-xs text-slate-500 hover:text-slate-400">Cancel</button>
        </div>
      </template>

      <!-- Step 2: pick payment method (shown only when VietQR available) -->
      {% if show_vietqr %}
      <template x-if="topupStep === 'method'">
        <div>
          <button @click="topupStep = 'pick'" class="text-xs text-slate-500 hover:text-slate-300 mb-4 flex items-center gap-1">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Back
          </button>
          <h2 class="text-white font-semibold text-base mb-1">Choose payment</h2>
          <p class="text-slate-400 text-sm mb-5" x-text="selectedTier && selectedTier.credits.toLocaleString() + ' credits — ' + selectedTier.label"></p>
          <div class="space-y-3">
            <button @click="checkout(selectedTier.priceId)"
              class="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-border hover:border-accent/60 hover:bg-accent/5 transition-colors text-left">
              <div class="w-8 h-8 rounded-lg bg-indigo-500/20 flex items-center justify-center flex-shrink-0">
                <svg class="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
              </div>
              <div>
                <div class="text-sm font-medium text-white">Card / PayPal</div>
                <div class="text-xs text-slate-500">Via Paddle — all currencies</div>
              </div>
            </button>
            <button @click="startVietQR()"
              class="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-border hover:border-teal/60 hover:bg-teal/5 transition-colors text-left">
              <div class="w-8 h-8 rounded-lg bg-teal/10 flex items-center justify-center flex-shrink-0">
                <svg class="w-4 h-4 text-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 3.5a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-7a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v7z"/></svg>
              </div>
              <div>
                <div class="text-sm font-medium text-white">Chuyển khoản VietQR</div>
                <div class="text-xs text-slate-500">Ngân hàng nội địa — <span x-text="selectedTier && (selectedTier.vnd / 1000).toFixed(0) + 'k VND'"></span></div>
              </div>
            </button>
          </div>
          <button @click="closeTopup()" class="mt-4 w-full text-center text-xs text-slate-500 hover:text-slate-400">Huỷ</button>
        </div>
      </template>
      {% endif %}

      <!-- Step 3: VietQR — show QR + poll -->
      <template x-if="topupStep === 'qr'">
        <div>
          <button @click="topupStep = '{% if show_vietqr %}method{% else %}pick{% endif %}'; cancelQRPoll()" class="text-xs text-slate-500 hover:text-slate-300 mb-4 flex items-center gap-1">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Quay lại
          </button>
          <h2 class="text-white font-semibold text-base mb-1">Quét mã QR</h2>
          <p class="text-slate-400 text-sm mb-4" x-text="selectedTier && selectedTier.credits.toLocaleString() + ' credits — ' + (selectedTier.vnd / 1000).toFixed(0) + 'k VND'"></p>

          <!-- QR iframe / loading -->
          <div class="rounded-xl overflow-hidden border border-border bg-white" style="height: 320px;">
            <template x-if="qrLink">
              <iframe :src="qrLink" class="w-full h-full border-0" title="VietQR"></iframe>
            </template>
            <template x-if="!qrLink">
              <div class="flex items-center justify-center h-full">
                <div class="w-6 h-6 border-2 border-teal border-t-transparent rounded-full animate-spin"></div>
              </div>
            </template>
          </div>

          <p class="text-xs text-slate-500 text-center mt-3">Đang chờ xác nhận thanh toán…</p>
          <button @click="closeTopup(); cancelQRPoll()" class="mt-3 w-full text-center text-xs text-slate-500 hover:text-slate-400">Huỷ</button>
        </div>
      </template>

      <!-- Step 4: success -->
      <template x-if="topupStep === 'success'">
        <div class="text-center py-4">
          <div class="w-14 h-14 rounded-full bg-teal/10 flex items-center justify-center mx-auto mb-4">
            <svg class="w-7 h-7 text-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
          </div>
          <h2 class="text-white font-semibold text-base mb-1">Thanh toán thành công</h2>
          <p class="text-slate-400 text-sm mb-5" x-text="'Đã cộng ' + (selectedTier && selectedTier.credits.toLocaleString()) + ' credits'"></p>
          <button @click="closeTopup()" class="w-full py-2.5 rounded-xl bg-teal/20 text-teal text-sm font-medium hover:bg-teal/30 transition-colors">Đóng</button>
        </div>
      </template>

    </div>
  </div>

  <!-- ── Sidebar ─────────────────────────────────────────────────────────── -->
  <!-- The mobile backdrop drawer-overlay was removed in 4C — the new nav-stack
       pattern shows the sidebar as full-width content (mobile-list view) or
       hides it entirely (mobile-chat view). The overlay would sit on top of
       the agent list with z-20 and steal the first tap, collapsing every row
       back to centered avatars. No replacement needed: there is no off-canvas
       drawer to dismiss any more. -->


  <!-- Sidebar / chat list.
       Desktop (md+): always visible, w-12 / w-64 collapsible (existing behaviour).
       Mobile: nav-stack — full-width when in 'list' view, hidden in 'chat' view.
       -->
  <aside
    :class="{
      'w-64':   !isMobile && sidebarOpen,
      'w-12':   !isMobile && !sidebarOpen,
      'w-full': isMobile && mobileView === 'list',
      'hidden': isMobile && mobileView === 'chat',
    }"
    class="flex-shrink-0 flex flex-col border-r border-border bg-panel transition-[width] duration-200 overflow-hidden
           md:relative md:translate-x-0
           fixed inset-y-0 left-0 z-30 md:z-auto"
  >

    <!-- Top: branding + collapse toggle -->
    <div class="flex items-center px-2.5 pt-4 pb-3 flex-shrink-0"
      :class="sidebarOpen ? 'gap-2.5 justify-between' : 'justify-center'">
      <!-- Logo + name (hidden when collapsed — collapse button takes full row) -->
      <div class="flex items-center gap-2.5 min-w-0" x-show="sidebarOpen" x-cloak>
        <div class="w-7 h-7 rounded-lg bg-gradient-to-br from-accent to-teal flex items-center justify-center flex-shrink-0">
          <span class="text-white font-bold text-xs">A</span>
        </div>
        <span class="text-white font-semibold text-sm truncate">Ageri</span>
      </div>
      <!-- Collapse / expand toggle — desktop only.
           On mobile the sidebar is the whole list view (or hidden during
           chat); the avatar-rail collapsed mode doesn't apply, and tapping
           this would set sidebarOpen=false, which collapses every agent
           row to a centered avatar. Hidden below md to remove the footgun. -->
      <button
        x-show="!isMobile"
        @click="sidebarOpen = !sidebarOpen"
        class="flex w-6 h-6 items-center justify-center rounded-md text-slate-500 hover:text-white hover:bg-white/5 transition-colors flex-shrink-0"
        :title="sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'"
      >
        <svg class="w-4 h-4 transition-transform duration-200" :class="sidebarOpen ? '' : 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7M19 19l-7-7 7-7"/>
        </svg>
      </button>
    </div>

    <!-- New agent button -->
    <div class="px-1.5 pb-3 flex-shrink-0">
      <button
        @click="createAgent()"
        :title="sidebarOpen ? '' : 'New agent'"
        :class="sidebarOpen ? 'px-3 gap-2.5' : 'justify-center px-0'"
        class="w-full flex items-center py-2 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors text-sm"
      >
        <svg class="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        <span x-show="sidebarOpen" x-cloak>New agent</span>
      </button>
    </div>

    <!-- Agent list — slim theme-aware scrollbar (base.html default) -->
    <div class="flex-1 overflow-y-auto overflow-x-hidden">
      <p class="text-xs font-medium text-slate-500 uppercase tracking-wider pb-1 truncate transition-all"
        :class="sidebarOpen ? 'px-4' : 'px-0 text-center text-[9px]'" x-show="sidebarOpen" x-cloak>Agents</p>
      <template x-for="profile in profiles" :key="profile.id">
        <button
          @click="selectProfile(profile.id, profile.name)"
          :class="[
            activeProfileId === profile.id ? 'bg-accent/15 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5',
            profile.status === 'hibernated' ? 'opacity-50' : ''
          ]"
          :title="sidebarOpen ? '' : profile.name + (profile.status === 'hibernated' ? ' (paused)' : '')"
          class="w-full flex items-center gap-3 py-2 rounded-lg transition-colors text-left"
          :style="sidebarOpen ? 'padding-left:0.75rem; padding-right:0.75rem; margin:0 4px; width:calc(100% - 8px)' : 'justify-content:center; padding-left:0; padding-right:0'"
        >
          <!-- Avatar — click opens the profile modal (matches the chat
               header avatar behaviour). Upload/remove affordances live
               in the modal's big avatar, NOT here in the sidebar — a
               sidebar-overlay with camera/X icons created a click
               intercept where the avatar's center hit upload instead
               of opening the profile. The modal is the only place to
               manage avatars; the sidebar avatar is purely a profile
               jump. -->
          <div class="relative flex-shrink-0 group/avatar"
            @click.stop="sidebarOpen && openProfileModal(profile)"
            :class="sidebarOpen ? 'cursor-pointer' : ''">
            <!-- Avatar wrapper. When the agent is in a block-tier
                 cooldown, dim and dash the border to communicate
                 "she's not picking up right now" without a label. -->
            <div class="relative"
                 :class="affectIsBlocked(profile) ? 'opacity-60' : ''">
              <template x-if="profile.avatar_url">
                <img :src="profile.avatar_url" :alt="profile.name"
                  class="w-8 h-8 rounded-full object-cover"
                  :class="affectIsBlocked(profile) ? 'border-2 border-dashed border-red-400/60 box-content' : ''">
              </template>
              <template x-if="!profile.avatar_url">
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-white font-semibold text-xs"
                  :class="affectIsBlocked(profile) ? 'border-2 border-dashed border-red-400/60' : ''"
                  :style="profileGradient(profile.color_index)"
                  x-text="(profile.name || '?')[0].toUpperCase()">
                </div>
              </template>
            </div>
            <!-- Crown — top-left corner. Only shows for warm+ liking
                 tiers (bronze/silver/gold). Earned recognition, not
                 noise on every contact. -->
            <template x-if="affectCrownTier(profile)">
              <svg class="absolute -top-1 -left-1 w-3.5 h-3.5 drop-shadow"
                   :style="{ color: affectCrownColor(profile) }"
                   fill="currentColor" viewBox="0 0 24 24"
                   :title="profile.liking_label">
                <path d="M5 16L3 5l4.5 3L12 3l4.5 5L21 5l-2 11H5zm0 2h14v3H5v-3z"/>
              </svg>
            </template>
            <!-- Tension is communicated by the chat itself (terser
                 replies) and, at the extreme, by the block treatment
                 (dim avatar + dashed border). A sidebar dot for
                 in-between resentful/bitter felt noisy — dropped on
                 purpose. The affectTensionDot helper is retained for
                 future use if we want a different mid-tier signal. -->
            <!-- Presence dot — always visible, bottom-right of avatar -->
            <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-panel"
              :class="presenceDotClass(profile)"></div>
            <!-- Unread dot — only visible when sidebar is collapsed -->
            <div x-show="!sidebarOpen && unreadCounts[profile.id]" x-cloak
              class="absolute -top-0.5 -right-0.5 min-w-[14px] h-[14px] rounded-full bg-accent flex items-center justify-center">
              <span class="text-white font-bold leading-none"
                style="font-size:9px"
                x-text="unreadCounts[profile.id] > 9 ? '9+' : unreadCounts[profile.id]"></span>
            </div>
          </div>
          <!-- Name + status + unread badge (sidebar open) -->
          <div class="min-w-0 flex-1 flex items-center gap-1.5" x-show="sidebarOpen" x-cloak>
            <div class="min-w-0 flex-1">
              <div class="text-sm font-medium truncate flex items-center gap-1.5">
                <span x-text="profile.name"></span>
                <!-- Source-device badge — only shown when this profile shares its name
                     with another profile on this device AND was imported from elsewhere -->
                <span x-show="sourceDeviceBadge(profile)"
                  class="text-[10px] font-normal text-slate-500 bg-white/5 px-1.5 py-0.5 rounded"
                  x-text="'[' + sourceDeviceBadge(profile) + ']'"></span>
              </div>
              <div class="text-xs truncate"
                :class="profile.status === 'hibernated' ? 'text-amber-500/80 italic' : 'text-slate-500'"
                x-text="profile.status === 'hibernated' ? 'Paused — say wake up to resume' : archetypeLabel(profile.archetype)"></div>
              <div class="text-xs text-slate-400 italic line-clamp-2 break-words"
                x-show="profile.status_message && profile.status !== 'hibernated'"
                :title="profile.status_message"
                x-text="profile.status_message"></div>
            </div>
            <!-- Unread count badge (sidebar open) -->
            <div x-show="unreadCounts[profile.id]"
              class="flex-shrink-0 min-w-[18px] h-[18px] rounded-full bg-accent flex items-center justify-center">
              <span class="text-white font-bold leading-none"
                style="font-size:10px"
                x-text="unreadCounts[profile.id] > 99 ? '99+' : unreadCounts[profile.id]"></span>
            </div>
          </div>
        </button>
      </template>
    </div>

    <!-- Bottom bar: user + menu -->
    <div class="border-t border-border px-1.5 py-3 relative flex-shrink-0">
      <button
        @click="menuOpen = !menuOpen; if (!menuOpen) statusPickerOpen = false"
        :title="sidebarOpen ? '' : '{{ namespace or 'You' }}'"
        :class="sidebarOpen ? 'px-2 gap-2.5' : 'justify-center px-0'"
        class="w-full flex items-center py-2 rounded-lg hover:bg-white/5 transition-colors group"
      >
        <!-- Avatar + presence dot -->
        <div class="relative w-8 h-8 flex-shrink-0">
          <div class="w-8 h-8 rounded-full overflow-hidden bg-slate-700 flex items-center justify-center">
            <img x-show="userAvatarUrl" :src="userAvatarUrl" class="w-full h-full object-cover" x-cloak>
            <svg x-show="!userAvatarUrl" class="w-4 h-4 text-slate-300" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
            </svg>
          </div>
          <!-- User presence dot — reflects active status -->
          <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-panel"
            :class="userStatusDotClass()"></div>
        </div>
        <!-- Name + key mode badge -->
        <div class="flex-1 min-w-0 text-left" x-show="sidebarOpen" x-cloak>
          <div class="flex items-center gap-1.5 min-w-0">
            <span class="text-sm font-medium text-white truncate">{{ namespace or 'You' }}</span>
            {% if key_mode == 'byok' %}
            <span class="shrink-0 text-[10px] font-semibold px-1.5 py-0.5 rounded bg-indigo-500/20 text-accent border border-accent/20 leading-none">BYOK</span>
            {% else %}
            <span class="shrink-0 text-[10px] font-semibold px-1.5 py-0.5 rounded bg-teal/10 text-teal border border-teal/20 leading-none">Hosted</span>
            {% endif %}
          </div>
          <!-- Active status line -->
          <div x-show="userStatus" x-cloak class="flex items-center gap-1 min-w-0">
            <span class="text-xs text-slate-400 truncate" x-text="userStatus ? userStatus.text : ''"></span>
            <span x-show="userStatus && statusTimeRemaining()" class="text-[10px] text-slate-500 shrink-0"
              x-text="statusTimeRemaining()"></span>
          </div>
          {% if namespace %}
          <div x-show="!userStatus" x-cloak class="text-xs text-slate-500 truncate">{{ namespace }}.ageri.ai</div>
          {% endif %}
        </div>
        <!-- Chevron -->
        <svg class="w-4 h-4 text-slate-500 group-hover:text-slate-300 flex-shrink-0 transition-colors"
          :class="menuOpen ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor"
          x-show="sidebarOpen" x-cloak>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
        </svg>
      </button>

    </div>
  </aside>

  <!-- User menu popup — fixed so it escapes aside's overflow-hidden -->
  <div
    x-show="menuOpen && !statusPickerOpen"
    x-cloak
    @click.outside="menuOpen = false; statusPickerOpen = false"
    x-transition:enter="transition ease-out duration-100"
    x-transition:enter-start="opacity-0 translate-y-1"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-75"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-1"
    class="fixed bottom-16 left-1 w-56 bg-surface border border-border rounded-xl shadow-xl overflow-hidden z-50"
  >
    <!-- Current status pill (if active) -->
    <template x-if="userStatus">
      <div class="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-border/50">
        <div class="flex items-center gap-2 min-w-0">
          <div class="w-2 h-2 rounded-full flex-shrink-0 shrink-0" :class="userStatusDotClass()"></div>
          <span class="text-xs text-slate-300 truncate" x-text="userStatus ? userStatus.text : ''"></span>
          <span x-show="userStatus && statusTimeRemaining()" class="text-[10px] text-slate-500 shrink-0"
            x-text="statusTimeRemaining()"></span>
        </div>
        <button @click.stop="clearUserStatus()"
          class="text-slate-500 hover:text-slate-300 transition-colors flex-shrink-0">
          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
    </template>
    <!-- Set status -->
    <button @click.stop="statusPickerOpen = true"
      class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
      <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      Set status
    </button>
    <div class="border-t border-border/50"></div>
    <!-- Skills -->
    <a href="/skills"
      class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
      <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2v-4M9 21H5a2 2 0 01-2-2v-4m0 0h18"/>
      </svg>
      Skills
    </a>
    <!-- Settings -->
    <a href="/settings"
      class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
      <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
      </svg>
      Settings
    </a>
    <div class="border-t border-border/50"></div>
    <!-- Log out -->
    <a href="/logout"
      class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
      <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
      </svg>
      Log out
    </a>
  </div>

  <!-- Status picker popup -->
  <div
    x-show="menuOpen && statusPickerOpen"
    x-cloak
    @click.outside="statusPickerOpen = false; menuOpen = false"
    x-transition:enter="transition ease-out duration-100"
    x-transition:enter-start="opacity-0 translate-y-1"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-75"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-1"
    class="fixed bottom-16 left-1 w-64 bg-surface border border-border rounded-xl shadow-xl overflow-hidden z-50"
  >
    <!-- Header -->
    <div class="flex items-center gap-2 px-4 py-3 border-b border-border/50">
      <button @click.stop="statusPickerOpen = false"
        class="text-slate-500 hover:text-slate-300 transition-colors">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
        </svg>
      </button>
      <span class="text-sm font-medium text-white">Set a status</span>
    </div>

    <!-- Operational statuses -->
    <div class="py-1">
      <div class="px-4 py-1 text-[10px] font-semibold uppercase tracking-wider text-slate-500">Busy</div>
      <button @click="setUserStatus('In a meeting', 'meeting', 60)"
        class="w-full flex items-center gap-3 px-4 py-2 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors group">
        <!-- Calendar/meeting icon -->
        <svg class="w-4 h-4 shrink-0 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
        <span class="flex-1 text-left">In a meeting</span>
        <span class="text-[10px] text-slate-500">1h</span>
      </button>
      <button @click="setUserStatus('Focusing', 'focusing', 90)"
        class="w-full flex items-center gap-3 px-4 py-2 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors group">
        <!-- Target/crosshair focus icon -->
        <svg class="w-4 h-4 shrink-0 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="3"/>
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2m0 14v2M3 12h2m14 0h2"/>
          <circle cx="12" cy="12" r="8"/>
        </svg>
        <span class="flex-1 text-left">Focusing</span>
        <span class="text-[10px] text-slate-500">1.5h</span>
      </button>
      <button @click="setUserStatus('Do not disturb', 'dnd', 120)"
        class="w-full flex items-center gap-3 px-4 py-2 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors group">
        <!-- Bell-off icon -->
        <svg class="w-4 h-4 shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13.73 21a2 2 0 01-3.46 0M18.63 13A17.89 17.89 0 0118 8M6.26 6.26A5.86 5.86 0 006 8c0 7-3 9-3 9h14M18 8a6 6 0 00-9.33-4.99M3 3l18 18"/>
        </svg>
        <span class="flex-1 text-left">Do not disturb</span>
        <span class="text-[10px] text-slate-500">2h</span>
      </button>
      <button @click="setUserStatus('Stepping out', 'away', 30)"
        class="w-full flex items-center gap-3 px-4 py-2 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors group">
        <!-- Walking/door icon -->
        <svg class="w-4 h-4 shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
        </svg>
        <span class="flex-1 text-left">Stepping out</span>
        <span class="text-[10px] text-slate-500">30m</span>
      </button>
    </div>
    <div class="border-t border-border/50 py-1">
      <div class="px-4 py-1 text-[10px] font-semibold uppercase tracking-wider text-slate-500">Personal</div>
      <button @click="setUserStatus('Out sick today', 'sick', 0)"
        class="w-full flex items-center gap-3 px-4 py-2 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors group">
        <!-- Thermometer icon -->
        <svg class="w-4 h-4 shrink-0 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 3v10.586A4 4 0 0012 21a4 4 0 003-6.586V3a3 3 0 00-6 0z"/>
        </svg>
        <span class="flex-1 text-left">Out sick today</span>
        <span class="text-[10px] text-slate-500">today</span>
      </button>
      <button @click="setUserStatus('Traveling', 'travel', 0)"
        class="w-full flex items-center gap-3 px-4 py-2 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors group">
        <!-- Map-pin / travel icon -->
        <svg class="w-4 h-4 shrink-0 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
        <span class="flex-1 text-left">Traveling</span>
        <span class="text-[10px] text-slate-500">until cleared</span>
      </button>
      <button @click="setUserStatus('Stressed right now', 'stressed', 60)"
        class="w-full flex items-center gap-3 px-4 py-2 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors group">
        <!-- Zap/lightning icon -->
        <svg class="w-4 h-4 shrink-0 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
        </svg>
        <span class="flex-1 text-left">Stressed right now</span>
        <span class="text-[10px] text-slate-500">1h</span>
      </button>
    </div>
    <!-- Clear -->
    <template x-if="userStatus">
      <div class="border-t border-border/50">
        <button @click="clearUserStatus()"
          class="w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-slate-400 hover:bg-white/5 hover:text-white transition-colors">
          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
          Clear status
        </button>
      </div>
    </template>
  </div>

  <!-- ── Chat area ───────────────────────────────────────────────────────── -->
  <!-- Main chat panel.
       Desktop: always visible alongside sidebar.
       Mobile: visible only in 'chat' view; hidden in 'list' view (sidebar
       takes full width then). The old `ml-12` mobile margin is removed —
       the sidebar no longer occupies a 48px rail on mobile under the
       Phase 4C nav-stack pattern. -->
  <main
    :class="{ 'hidden md:flex': isMobile && mobileView === 'list' }"
    class="flex-1 flex flex-col min-w-0 relative md:ml-0"
  >

    <!-- Floating skill-run banner — shows when a skill is running but
         the user has navigated away from its tab/profile. Click to
         jump back. Per-tab banner inside the skill tab still handles
         in-context display; this surfaces visibility everywhere else
         so a long browser-automation isn't invisible just because the
         user wandered into another agent. -->
    <div x-show="skillRunOffTabInfo"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 -translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 -translate-y-2"
         class="absolute top-0 inset-x-0 z-40 flex justify-center px-4 pt-3 pointer-events-none"
         style="display:none">
      <button type="button"
              @click="jumpToRunningSkill()"
              class="flex items-center gap-2 bg-amber-950/90 border border-amber-700/60 text-amber-200 text-xs rounded-xl px-3.5 py-2 shadow-lg pointer-events-auto backdrop-blur-sm hover:bg-amber-900/90 hover:border-amber-600 transition-colors">
        <svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5" stroke-dasharray="16 12" stroke-linecap="round"/>
        </svg>
        <span x-text="(skillRunOffTabInfo?.skillKey || 'skill') + ' running ' + (skillRunOffTabInfo?.elapsed || '')"></span>
        <span class="text-amber-400/70 text-[10px]">→ tap to view</span>
      </button>
    </div>

    <!-- Error banner -->
    <div x-show="errorBanner"
      x-transition:enter="transition ease-out duration-200"
      x-transition:enter-start="opacity-0 -translate-y-2"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-150"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 -translate-y-2"
      class="absolute top-0 inset-x-0 z-50 flex justify-center px-4 pt-3 pointer-events-none"
      style="display:none">
      <div class="flex items-center gap-3 bg-red-950/90 border border-red-800/60 text-red-200 text-sm rounded-xl px-4 py-2.5 shadow-lg pointer-events-auto max-w-md w-full backdrop-blur-sm">
        <svg class="w-4 h-4 shrink-0 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
        </svg>
        <span class="flex-1" x-text="errorBanner"></span>
        <button @click="dismissError()" class="text-red-400 hover:text-red-200 transition-colors ml-1">
          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Header -->
    <div class="flex items-center gap-3 px-4 py-4 border-b border-border flex-shrink-0">
      <!-- Mobile: back arrow returns to chat list (Zalo/Slack pattern). -->
      <button
        x-show="isMobile"
        @click="backToList()"
        class="md:hidden w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors flex-shrink-0"
        aria-label="Back to agents"
      >
        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
      </button>
      <!-- Desktop: show expand button only when sidebar collapsed -->
      <button
        x-show="!sidebarOpen"
        @click="sidebarOpen = true"
        class="hidden md:flex w-8 h-8 items-center justify-center rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors flex-shrink-0"
        aria-label="Expand sidebar"
      >
        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
      <!-- Avatar + name + status are clickable as a single trigger that opens
           the agent's bio modal. Truncated single-line status here keeps the
           header compact; the full status renders inside the bio modal. -->
      <button type="button"
        @click="openProfileModal(activeProfile())"
        class="flex-1 min-w-0 flex items-center gap-3 rounded-lg hover:bg-white/5 transition-colors text-left -mx-1 px-1 py-0.5"
        title="Show profile">
        <template x-if="activeAvatarUrl()">
          <img :src="activeAvatarUrl()" :alt="activeProfileName"
            class="w-8 h-8 rounded-full flex-shrink-0 object-cover">
        </template>
        <template x-if="!activeAvatarUrl()">
          <div class="w-8 h-8 rounded-full flex items-center justify-center text-white font-semibold text-xs flex-shrink-0"
            :style="profileGradient(activeProfile()?.color_index)">
            <span x-text="activeProfileName[0]"></span>
          </div>
        </template>
        <div class="flex-1 min-w-0">
          <h1 class="text-sm font-semibold text-white truncate" x-text="activeProfileName"></h1>
          <p class="text-xs text-slate-400 italic truncate" x-show="!thinking && !agentAway && activeProfile()?.status_message" x-text="activeProfile()?.status_message"></p>
          <p class="text-xs text-slate-500 italic" x-show="agentAway && !thinking">replying soon...</p>
          <p class="text-xs text-teal" x-show="thinking" x-text="activeStatusLabel('thinking')"></p>
        </div>
      </button>
      <!-- Mute toggle -->
      <template x-if="activeProfile() && activeProfile().id !== 'ageri'">
        <button
          @click="toggleMute(activeProfile().id)"
          :title="activeProfile()?.notifications_muted ? 'Unmute notifications' : 'Mute notifications'"
          class="w-8 h-8 flex items-center justify-center rounded-lg transition-colors flex-shrink-0"
          :class="activeProfile()?.notifications_muted ? 'text-amber-400 hover:text-amber-300 hover:bg-amber-400/10' : 'text-slate-500 hover:text-slate-300 hover:bg-white/5'"
        >
          <!-- Bell-off (muted) -->
          <template x-if="activeProfile()?.notifications_muted">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.73 21a2 2 0 01-3.46 0M18.63 13A17.89 17.89 0 0118 8M6.26 6.26A5.86 5.86 0 006 8c0 7-3 9-3 9h14M18 8a6 6 0 00-9.33-4.99M3 3l18 18"/>
            </svg>
          </template>
          <!-- Bell (active) -->
          <template x-if="!activeProfile()?.notifications_muted">
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
            </svg>
          </template>
        </button>
      </template>
    </div>

    <!-- Tab strip — Messages + one tab per active skill (Slack-style).
         Hidden when no skill is active (just one tab is noisy). -->
    <div x-show="!!activeSkillMap[activeProfileId]"
         class="flex items-end gap-1 px-4 border-b border-border flex-shrink-0">
      <button type="button"
              @click="activeChatTab = 'messages'"
              :class="activeChatTab === 'messages'
                ? 'text-white border-b-2 border-accent -mb-px'
                : 'text-slate-400 hover:text-white border-b-2 border-transparent'"
              class="px-3 py-2 text-sm font-medium transition-colors">
        Messages
      </button>
      <template x-if="activeSkillMap[activeProfileId]">
        <div :class="activeChatTab === activeSkillMap[activeProfileId]?.key
                ? 'border-b-2 border-accent -mb-px'
                : 'border-b-2 border-transparent'"
             class="flex items-center transition-colors">
          <button type="button"
                  @click="activeChatTab = activeSkillMap[activeProfileId]?.key"
                  :class="activeChatTab === activeSkillMap[activeProfileId]?.key ? 'text-white' : 'text-slate-400 hover:text-white'"
                  class="pl-3 pr-2 py-2 text-sm font-medium transition-colors flex items-center gap-1.5">
            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
            <span x-text="activeSkillMap[activeProfileId]?.name"></span>
          </button>
          <!-- Close (X). Two-step confirm to prevent accidental skill exit
               (re-uses skillExitConfirming + exitActiveSkill). Hit area
               bumped to w-8 h-8 (was effectively ~14px) for touch reach. -->
          <template x-if="!skillExitConfirming">
            <button type="button"
                    @click.stop="skillExitConfirming = true; setTimeout(() => { skillExitConfirming = false; }, 5000)"
                    title="Close skill"
                    aria-label="Close skill"
                    class="w-8 h-8 mr-1 flex items-center justify-center rounded text-slate-500 hover:text-white hover:bg-white/5 transition-colors">
              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
              </svg>
            </button>
          </template>
          <template x-if="skillExitConfirming">
            <div class="flex items-center gap-2 px-2 py-1 text-xs">
              <span class="text-slate-200 font-medium">Exit?</span>
              <button @click.stop="exitActiveSkill()"
                class="px-2.5 py-1 rounded bg-white/5 border border-red-500/50 text-red-500 hover:bg-red-500/10 hover:border-red-500 transition-colors font-semibold">
                Exit
              </button>
              <button @click.stop="skillExitConfirming = false"
                class="px-2.5 py-1 rounded bg-white/5 border border-border text-slate-200 hover:text-white hover:bg-white/10 transition-colors">
                Cancel
              </button>
            </div>
          </template>
        </div>
      </template>
    </div>

    <!-- Sub-banner under the active-skill tab: short reminder of how to
         get help / quit, plus a Reset-session control on the right. Shown
         only when on the skill's tab — the Messages thread is the
         relationship history and never gets a destructive control. -->
    <div x-show="!!activeSkillMap[activeProfileId] && activeChatTab !== 'messages'"
         class="flex items-center justify-between gap-3 px-4 py-1.5 bg-accent/5 border-b border-border flex-shrink-0 text-xs text-slate-400">
      <!-- Left side — three mutually exclusive states:
           1. Help text (default)
           2. Hidden during the Reset two-step confirm so the prompt fills the row
           3. "Running Xm Ys" while the skill is processing on this tab — gives
              the user visibility into long-running browser automation so they
              can decide if it's worth aborting via Thoát. -->
      <!-- Tiny ? icon — clickable, expands a popover with the skill's
           description + commands list. Tap-outside / Esc closes. Replaces
           the previous "type --help · /quit" text strip; same info is
           accessible from a single character of horizontal space. -->
      <div x-show="!skillResetConfirming && !skillRunActiveOnThisTab"
           class="relative">
        <button type="button"
                @click.stop="skillHelpOpen = !skillHelpOpen; if (skillHelpOpen && skillsCatalog.length === 0) ensureSkillsCatalogLoaded();"
                title="What can this skill do?"
                class="w-4 h-4 rounded-full border border-border text-slate-300 hover:text-white hover:border-accent transition-colors flex items-center justify-center text-[10px] leading-none">
          ?
        </button>
        <!-- Popover. activeSkillCatalog returns the catalog entry for the
             current skill (with description + commands) — null until the
             catalog has loaded. Loaded once on first open. -->
        <div x-show="skillHelpOpen"
             x-transition.opacity
             @click.outside="skillHelpOpen = false"
             @keydown.escape.window="skillHelpOpen = false"
             class="absolute z-50 left-0 top-6 w-96 max-h-[60vh] overflow-y-auto bg-panel border border-border rounded-xl shadow-2xl p-4">
          <template x-if="activeSkillCatalog">
            <div>
              <div class="flex items-center justify-between gap-2 mb-2">
                <div class="flex items-center gap-2 min-w-0">
                  <span class="text-lg leading-none" x-text="activeSkillCatalog.icon || '🔧'"></span>
                  <span class="font-semibold text-sm text-white truncate" x-text="activeSkillCatalog.name"></span>
                </div>
                <button type="button"
                        @click.stop="skillHelpOpen = false"
                        title="Close"
                        class="text-slate-300 hover:text-white p-1 rounded hover:bg-white/10 transition-colors flex-shrink-0">
                  <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
                </button>
              </div>
              <div x-show="activeSkillCatalog.description"
                   class="text-xs text-slate-200 mb-4 leading-relaxed"
                   x-text="activeSkillCatalog.description"></div>
              <template x-if="activeSkillCatalog.commands && activeSkillCatalog.commands.length > 0">
                <div class="mb-3">
                  <div class="text-[10px] uppercase tracking-wide text-slate-300 font-medium mb-2">Commands</div>
                  <ul class="space-y-2">
                    <template x-for="cmd in activeSkillCatalog.commands" :key="cmd.name">
                      <li class="text-xs leading-relaxed">
                        <code class="bg-white/10 px-1.5 py-0.5 rounded text-accent font-mono" x-text="'/' + cmd.name"></code>
                        <div class="text-slate-200 mt-1 ml-0.5" x-text="cmd.description"></div>
                      </li>
                    </template>
                  </ul>
                </div>
              </template>
              <div class="pt-3 border-t border-border mt-3 text-[11px] text-slate-300 leading-relaxed">
                Type <code class="bg-white/10 px-1.5 py-0.5 rounded text-slate-200">--help</code> in chat for the full list ·
                <code class="bg-white/10 px-1.5 py-0.5 rounded text-slate-200">/quit</code> to close this skill
              </div>
            </div>
          </template>
          <template x-if="!activeSkillCatalog">
            <div class="text-xs text-slate-300">Loading…</div>
          </template>
        </div>
      </div>
      <div x-show="skillRunActiveOnThisTab"
           class="flex items-center gap-1.5 text-amber-300">
        <svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5" stroke-dasharray="16 12" stroke-linecap="round"/>
        </svg>
        <span>Running <span x-text="skillRunElapsed"></span></span>
        <!-- Inline Stop — sends skill_abort (cancels the in-flight task,
             closes Playwright browser) WITHOUT deactivating the skill, so
             the user can re-issue a command without re-clicking Activate.
             Distinct from Thoát (in the tab pill) which exits the skill
             entirely. -->
        <button type="button"
                @click.stop="stopSkillRun()"
                title="Stop the current run (skill stays active)"
                class="ml-1 px-2 py-0.5 rounded bg-white/5 border border-red-500/50 text-red-500 hover:bg-red-500/10 hover:border-red-500 transition-colors text-[10px] font-semibold">
          Stop
        </button>
      </div>
      <!-- Right-side action group: Settings cog + Reset session.
           Both hidden during the Reset two-step confirm (the row is reused
           for the prompt) and during a skill run (clicking either mid-flow
           would orphan server-side state — abort via Stop/Thoát first). -->
      <template x-if="!skillResetConfirming && !skillRunActiveOnThisTab">
        <div class="flex items-center gap-3">
          <!-- Settings cog — opens the same config editor modal that's
               available in the Skills picker. Saves take effect immediately
               (the API endpoint refreshes skill._config in memory) so the
               next run inside this tab sees the new values. -->
          <button type="button"
                  @click.stop="(() => { const sk = activeSkillMap[activeProfileId]; if (sk) openConfigEditor(sk.key, sk.name); })()"
                  title="Edit skill settings"
                  class="text-slate-300 hover:text-white transition-colors flex items-center gap-1">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
            <span>Settings</span>
          </button>
          <button type="button"
                  @click.stop="skillResetConfirming = true; setTimeout(() => { skillResetConfirming = false; }, 5000)"
                  title="Wipe this skill's thread and session cache (preserves long-term memory)"
                  class="text-slate-300 hover:text-white transition-colors flex items-center gap-1">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h5M20 20v-5h-5M5 9a7 7 0 0111-3.5L20 9M19 15a7 7 0 01-11 3.5L4 15"/>
            </svg>
            <span>Reset session</span>
          </button>
        </div>
      </template>
      <template x-if="skillResetConfirming">
        <div class="flex items-center gap-2">
          <span class="text-slate-200 font-medium">Reset this thread + cache?</span>
          <button @click.stop="resetSkillSession()"
            class="px-2.5 py-1 rounded bg-white/5 border border-red-500/50 text-red-500 hover:bg-red-500/10 hover:border-red-500 transition-colors font-semibold text-xs">
            Reset
          </button>
          <button @click.stop="skillResetConfirming = false"
            class="px-2.5 py-1 rounded bg-white/5 border border-border text-slate-200 hover:text-white hover:bg-white/10 transition-colors text-xs">
            Cancel
          </button>
        </div>
      </template>
    </div>

    <!-- Wizard mode banner. Gated to Ageri's Messages tab only — without
         the activeChatTab check the banner bled into skill tabs (CukCuk
         Daily Invoice, etc.) where wizard input has no semantic meaning. -->
    <div x-show="wizardActive && wizardMode && activeProfileId === 'ageri' && (activeChatTab === 'messages' || !activeChatTab)"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 -translate-y-1"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 -translate-y-1"
         class="flex items-center justify-between gap-3 px-4 py-2 bg-teal/10 border-b border-teal/20 flex-shrink-0">
      <div class="flex items-center gap-2 text-teal text-xs font-medium">
        <!-- Sparkle icon -->
        <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3l1.5 4.5L11 9l-4.5 1.5L5 15l-1.5-4.5L-1 9l4.5-1.5L5 3zM19 11l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z"/>
        </svg>
        <span x-text="wizardMode === 'skill' ? 'Creating new skill' : 'Creating new agent'"></span>
      </div>
      <!-- Cancel button morphs into a two-step confirm on click so a stray
           tap during a live recording doesn't discard the user's work. -->
      <template x-if="!wizardCancelConfirming">
        <button @click="requestCancelWizard()"
                class="text-xs text-slate-400 hover:text-white flex items-center gap-1 px-2 py-0.5 rounded hover:bg-white/10 transition-colors">
          <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
          Cancel
        </button>
      </template>
      <template x-if="wizardCancelConfirming">
        <div class="flex items-center gap-2 text-xs">
          <span class="text-slate-300"
                x-text="wizardMode === 'skill' ? 'Cancel recording?' : 'Cancel agent creation?'"></span>
          <button @click="cancelWizard()"
                  class="px-2.5 py-0.5 rounded bg-red-500 text-white
                         hover:bg-red-600 transition-colors font-medium">
            Discard
          </button>
          <button @click="abortCancelWizard()"
                  class="px-2.5 py-0.5 rounded text-slate-500 hover:text-slate-900 hover:bg-black/5
                         border border-transparent hover:border-black/10 transition-colors">
            Keep going
          </button>
        </div>
      </template>
    </div>

    <!-- ── Agent-driven expiration banners (4F) ──────────────────────
         Two states, mutually exclusive per profile:
           1. expirationProposals[id] — agent narratively suggested
              wrapping up; user picks Accept / Negotiate / Decline.
           2. expirationReached[id]   — date deadline tripped; user
              picks Hibernate / Archive / Carry on.
         Both render above the message stream, dismiss when the user
         picks. Persistent within the session; survive switching to
         other agents. -->
    <template x-if="activeProfileId && expirationProposals[activeProfileId]">
      <div class="px-4 py-3 border-b border-amber-500/20 bg-amber-500/5">
        <div class="text-xs uppercase tracking-wide text-amber-300/80 mb-1">
          Wrap-up suggested
        </div>
        <p class="text-sm text-slate-200 mb-1">
          <span class="font-semibold" x-text="expirationProposals[activeProfileId].agent_name"></span>
          thinks you might wrap things up by
          <span class="text-teal font-medium" x-text="expirationProposals[activeProfileId].value"></span>.
        </p>
        <p class="text-xs text-slate-400 italic mb-3" x-text="'“' + (expirationProposals[activeProfileId].reason || '') + '”'"></p>
        <div class="flex items-center gap-2 flex-wrap">
          <button @click="_expirationAction(activeProfileId, 'proposal', 'accept')"
                  :disabled="!!expirationActionPending[activeProfileId]"
                  class="text-xs uppercase tracking-wide px-3 py-1.5 rounded-md bg-teal/20 text-teal hover:bg-teal/30 disabled:opacity-40 transition-colors">
            Accept
          </button>
          <button @click="_expirationAction(activeProfileId, 'proposal', 'negotiate')"
                  :disabled="!!expirationActionPending[activeProfileId]"
                  class="text-xs uppercase tracking-wide px-3 py-1.5 rounded-md bg-white/5 border border-white/15 text-slate-200 hover:bg-white/10 disabled:opacity-40 transition-colors">
            Negotiate
          </button>
          <button @click="_expirationAction(activeProfileId, 'proposal', 'decline')"
                  :disabled="!!expirationActionPending[activeProfileId]"
                  class="text-xs uppercase tracking-wide px-3 py-1.5 rounded-md text-slate-400 hover:text-white disabled:opacity-40 transition-colors">
            Decline
          </button>
        </div>
      </div>
    </template>

    <template x-if="activeProfileId && expirationReached[activeProfileId]">
      <div class="px-4 py-3 border-b border-rose-500/20 bg-rose-500/5">
        <div class="text-xs uppercase tracking-wide text-rose-300/80 mb-1">
          Planned end reached
        </div>
        <p class="text-sm text-slate-200 mb-3">
          Your time with
          <span class="font-semibold" x-text="expirationReached[activeProfileId].agent_name"></span>
          has reached its planned end
          (<span class="text-rose-200" x-text="expirationReached[activeProfileId].deadline"></span>).
        </p>
        <div class="flex items-center gap-2 flex-wrap">
          <button @click="_expirationAction(activeProfileId, 'reached', 'hibernate')"
                  :disabled="!!expirationActionPending[activeProfileId]"
                  class="text-xs uppercase tracking-wide px-3 py-1.5 rounded-md bg-white/5 border border-white/15 text-slate-200 hover:bg-white/10 disabled:opacity-40 transition-colors">
            Hibernate
          </button>
          <button @click="_expirationAction(activeProfileId, 'reached', 'archive')"
                  :disabled="!!expirationActionPending[activeProfileId]"
                  class="text-xs uppercase tracking-wide px-3 py-1.5 rounded-md bg-rose-500/15 text-rose-200 hover:bg-rose-500/25 disabled:opacity-40 transition-colors">
            Archive
          </button>
          <button @click="_expirationAction(activeProfileId, 'reached', 'carry_on')"
                  :disabled="!!expirationActionPending[activeProfileId]"
                  class="text-xs uppercase tracking-wide px-3 py-1.5 rounded-md text-slate-400 hover:text-white disabled:opacity-40 transition-colors">
            Carry on
          </button>
        </div>
      </div>
    </template>

    <!-- Messages -->
    <div class="flex-1 overflow-y-auto px-6 py-4 space-y-4" id="messages" x-ref="messages">

      <!-- Top sentinel: watched by IntersectionObserver to load older messages -->
      <div x-ref="topSentinel" class="h-px">
        <template x-if="_historyLoading && _historyOldestId">
          <div class="flex justify-center py-2">
            <div class="w-4 h-4 border-2 border-slate-500 border-t-transparent rounded-full animate-spin"></div>
          </div>
        </template>
      </div>

      <!-- Empty state -->
      <template x-if="messages.length === 0">
        <div class="flex flex-col items-center h-full overflow-y-auto px-4">
         <div class="my-auto w-full flex flex-col items-center py-12">
          <!-- Avatar -->
          <template x-if="activeAvatarUrl()">
            <img :src="activeAvatarUrl()" :alt="activeProfileName"
              class="w-16 h-16 rounded-full object-cover mb-4 ring-2 ring-white/10">
          </template>
          <template x-if="!activeAvatarUrl()">
            <div class="w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4 ring-2 ring-white/10"
              :style="profileGradient(activeProfile()?.color_index)">
              <span x-text="activeProfileName[0]"></span>
            </div>
          </template>

          <!-- Name + archetype -->
          <h2 class="text-white font-semibold text-base mb-0.5" x-text="activeProfileName"></h2>
          <p class="text-slate-500 text-xs mb-5" x-text="archetypeLabel(activeProfile()?.archetype)"></p>

          <!-- Skills card -->
          <template x-if="activeProfile()?.id !== 'ageri' && (activeProfile()?.skills || []).filter(s => s !== 'core').length > 0">
            <div class="w-full max-w-xs bg-white/5 border border-white/10 rounded-xl p-4 mb-4 text-left">
              <p class="text-slate-500 text-xs font-medium uppercase tracking-wide mb-3">Active skills</p>
              <div class="flex flex-wrap gap-2">
                <template x-for="skill in (activeProfile()?.skills || []).filter(s => s !== 'core')" :key="skill">
                  <div class="flex items-center gap-1.5 bg-white/10 border border-white/10 rounded-lg px-2.5 py-1.5">
                    <span class="text-sm" x-text="skillIcon(skill)"></span>
                    <span class="text-xs text-slate-300 font-medium" x-text="skillLabel(skill)"></span>
                  </div>
                </template>
              </div>
            </div>
          </template>

          <!-- New agent setup notice (only when agent is very new — no bio yet) -->
          <template x-if="activeProfile()?.id !== 'ageri' && isNewAgent(activeProfile())">
            <div class="w-full max-w-xs bg-amber-500/10 border border-amber-500/20 rounded-xl p-3.5 mb-4 flex items-start gap-3">
              <svg class="w-4 h-4 text-amber-400 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0"/>
              </svg>
              <div>
                <p class="text-amber-300 text-xs font-medium mb-0.5" x-text="activeProfileName + ' is getting set up'"></p>
                <p class="text-amber-400/70 text-xs leading-relaxed">First responses may take a little longer while the agent builds its memory. This is a one-time process.</p>
              </div>
            </div>
          </template>

          <!-- New-agent wizard: stepped flow that replaces the "Say hello"
               empty-state when "+ New agent" is clicked. Step 1 picks the
               archetype, Step 2 collects name(s). Phase 3 will add the
               bio gallery. Each step is gated on wizardStep + activeProfileId
               + Messages tab so the wizard never bleeds into skill tabs. -->

          <!-- Step 1: Archetype card grid -->
          <template x-if="wizardStep === 'archetype' && activeProfileId === 'ageri' && (activeChatTab === 'messages' || !activeChatTab)">
            <div class="w-full max-w-2xl">
              <div class="flex items-center gap-2 mb-1">
                <svg class="w-4 h-4 text-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3l1.5 4.5L11 9l-4.5 1.5L5 15l-1.5-4.5L-1 9l4.5-1.5L5 3zM19 11l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z"/>
                </svg>
                <h3 class="text-white text-sm font-semibold">New agent</h3>
                <span class="text-slate-500 text-xs ml-1">Step 1 of 2</span>
              </div>
              <p class="text-slate-400 text-xs mb-4 leading-relaxed">
                What kind of agent would you like? Pick the role that fits best — you can refine details next.
              </p>
              <!-- Single-column on mobile (cards span full row width so hints
                   fit on one line); 2-column on sm+ where the layout has
                   room for side-by-side cards without wrapping the hints. -->
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
                <template x-for="opt in [
                  {key: 'friend',       label: 'Friend',       hint: 'Casual, warm, opinionated', icon: '🤝'},
                  {key: 'companion',    label: 'Companion',    hint: 'Emotionally present, attuned', icon: '💙'},
                  {key: 'mentor',       label: 'Mentor',       hint: 'Asks questions, not just answers', icon: '🧭'},
                  {key: 'tutor',        label: 'Tutor',        hint: 'Patient, structured, tracks progress', icon: '📚'},
                  {key: 'colleague',    label: 'Colleague',    hint: 'Direct, efficient, professional', icon: '💼'},
                  {key: 'acquaintance', label: 'Acquaintance', hint: 'Cordial, polite, surface-level', icon: '👋'}
                ]" :key="opt.key">
                  <button type="button"
                          @click="pickArchetype(opt.key)"
                          class="text-left p-3 rounded-xl border border-white/10 bg-white/5 hover:border-teal/60 hover:bg-teal/10 transition-colors group">
                    <div class="flex items-start gap-2.5">
                      <span class="text-lg leading-none mt-0.5" x-text="opt.icon"></span>
                      <div class="flex-1 min-w-0">
                        <div class="text-white text-sm font-medium mb-0.5" x-text="opt.label"></div>
                        <div class="text-slate-400 text-[11px] leading-snug group-hover:text-slate-300" x-text="opt.hint"></div>
                      </div>
                    </div>
                  </button>
                </template>
              </div>
              <!-- Cancel lives in the persistent "Creating new agent" banner above. -->
            </div>
          </template>

          <!-- Step 2: Extended form — name, age, gender, native language, second langs -->
          <template x-if="wizardStep === 'form' && activeProfileId === 'ageri' && (activeChatTab === 'messages' || !activeChatTab)">
            <form @submit.prevent="submitWizardForm()"
                  class="w-full max-w-md bg-white/5 border border-white/10 rounded-xl p-5 mt-2">
              <div class="flex items-center gap-2 mb-1">
                <svg class="w-4 h-4 text-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3l1.5 4.5L11 9l-4.5 1.5L5 15l-1.5-4.5L-1 9l4.5-1.5L5 3zM19 11l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z"/>
                </svg>
                <h3 class="text-white text-sm font-semibold">New agent</h3>
                <span class="text-slate-500 text-xs ml-1">Step 2 of 2</span>
              </div>
              <p class="text-slate-400 text-xs mb-4 leading-relaxed">
                <span class="text-slate-300">Archetype:</span>
                <span class="text-teal font-medium" x-text="wizardArchetype.charAt(0).toUpperCase() + wizardArchetype.slice(1)"></span>
                <button type="button"
                        @click="wizardStep = 'archetype'"
                        class="text-slate-500 hover:text-white text-[11px] underline ml-2">change</button>
              </p>

              <!-- Display name — what you'll call the agent. Their full
                   family name is generated by the bio gallery on the next
                   step (and editable later in agent settings). -->
              <label class="block mb-3">
                <span class="text-slate-300 text-xs font-medium block mb-1">Display name <span class="text-red-400">*</span></span>
                <input type="text"
                       x-model="wizardFormFirstName"
                       x-ref="wizardFirstNameInput"
                       autofocus
                       required
                       placeholder="e.g. Sammy, Vy, Linh"
                       class="w-full bg-white/10 border border-white/15 rounded-lg px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:border-teal/60 focus:ring-1 focus:ring-teal/30 focus:bg-white/15">
              </label>

              <!-- Age + Gender row -->
              <div class="grid grid-cols-2 gap-2 mb-1">
                <label class="block">
                  <span class="text-slate-300 text-xs font-medium block mb-1">Age <span class="text-red-400">*</span></span>
                  <input type="number"
                         x-model="wizardFormAge"
                         :min="ageMinForArchetype(wizardArchetype)"
                         max="80"
                         required
                         :placeholder="'e.g. ' + (ageMinForArchetype(wizardArchetype) > 18 ? (ageMinForArchetype(wizardArchetype) + 5) : 25)"
                         class="w-full bg-white/10 border border-white/15 rounded-lg px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:border-teal/60 focus:ring-1 focus:ring-teal/30 focus:bg-white/15">
                </label>
                <div class="block">
                  <span class="text-slate-300 text-xs font-medium block mb-1">Gender</span>
                  <div class="flex items-center gap-1.5 pt-1.5">
                    <template x-for="opt in [
                      {value: 'female', label: 'F'},
                      {value: 'male', label: 'M'},
                      {value: 'skip', label: 'Skip'}
                    ]" :key="opt.value">
                      <button type="button"
                              @click="wizardFormGender = opt.value"
                              :class="wizardFormGender === opt.value
                                ? 'bg-teal text-white border-teal'
                                : 'bg-white/5 text-slate-400 border-white/10 hover:border-white/30 hover:text-white'"
                              class="px-2.5 py-1 text-xs rounded-md border transition-colors"
                              x-text="opt.label">
                      </button>
                    </template>
                  </div>
                </div>
              </div>
              <!-- Min-age hint — only shown for authority archetypes
                   (mentor / tutor / colleague) where a too-young agent
                   undermines the dynamic. -->
              <template x-if="ageMinForArchetype(wizardArchetype) > 10">
                <p class="text-slate-500 text-[11px] mb-3 -mt-0.5"
                   x-text="'A ' + wizardArchetype + ' should be at least ' + ageMinForArchetype(wizardArchetype) + '.'"></p>
              </template>
              <template x-if="ageMinForArchetype(wizardArchetype) <= 10">
                <div class="mb-3"></div>
              </template>

              <!-- Shared autocomplete list — covers ~50 globally-common
                   languages. Free-text accepted; anything typed and not in
                   the list is still saved as-is and the LLM cultural
                   research handles it. -->
              <datalist id="ageri-languages-list">
                <option value="English"><option value="Spanish"><option value="French">
                <option value="German"><option value="Italian"><option value="Portuguese">
                <option value="Russian"><option value="Polish"><option value="Dutch">
                <option value="Swedish"><option value="Norwegian"><option value="Danish">
                <option value="Finnish"><option value="Greek"><option value="Czech">
                <option value="Romanian"><option value="Hungarian"><option value="Ukrainian">
                <option value="Turkish"><option value="Arabic"><option value="Hebrew">
                <option value="Persian"><option value="Urdu"><option value="Hindi">
                <option value="Bengali"><option value="Punjabi"><option value="Tamil">
                <option value="Telugu"><option value="Marathi"><option value="Gujarati">
                <option value="Chinese"><option value="Japanese"><option value="Korean">
                <option value="Vietnamese"><option value="Thai"><option value="Indonesian">
                <option value="Malay"><option value="Tagalog"><option value="Burmese">
                <option value="Khmer"><option value="Lao"><option value="Mongolian">
                <option value="Swahili"><option value="Yoruba"><option value="Igbo">
                <option value="Hausa"><option value="Amharic"><option value="Zulu">
                <option value="Afrikaans">
              </datalist>

              <!-- Country list — UN member states + commonly-recognised
                   territories. Free-text accepted; anything typed is sent
                   to the LLM which normalises to ISO-3166 + IANA timezone. -->
              <datalist id="ageri-countries-list">
                <option value="Afghanistan"><option value="Albania"><option value="Algeria">
                <option value="Andorra"><option value="Angola"><option value="Argentina">
                <option value="Armenia"><option value="Australia"><option value="Austria">
                <option value="Azerbaijan"><option value="Bahamas"><option value="Bahrain">
                <option value="Bangladesh"><option value="Barbados"><option value="Belarus">
                <option value="Belgium"><option value="Belize"><option value="Benin">
                <option value="Bhutan"><option value="Bolivia"><option value="Bosnia and Herzegovina">
                <option value="Botswana"><option value="Brazil"><option value="Brunei">
                <option value="Bulgaria"><option value="Burkina Faso"><option value="Burundi">
                <option value="Cambodia"><option value="Cameroon"><option value="Canada">
                <option value="Cape Verde"><option value="Central African Republic"><option value="Chad">
                <option value="Chile"><option value="China"><option value="Colombia">
                <option value="Comoros"><option value="Congo"><option value="Costa Rica">
                <option value="Croatia"><option value="Cuba"><option value="Cyprus">
                <option value="Czech Republic"><option value="Democratic Republic of the Congo">
                <option value="Denmark"><option value="Djibouti"><option value="Dominica">
                <option value="Dominican Republic"><option value="Ecuador"><option value="Egypt">
                <option value="El Salvador"><option value="Equatorial Guinea"><option value="Eritrea">
                <option value="Estonia"><option value="Eswatini"><option value="Ethiopia">
                <option value="Fiji"><option value="Finland"><option value="France">
                <option value="Gabon"><option value="Gambia"><option value="Georgia">
                <option value="Germany"><option value="Ghana"><option value="Greece">
                <option value="Grenada"><option value="Guatemala"><option value="Guinea">
                <option value="Guinea-Bissau"><option value="Guyana"><option value="Haiti">
                <option value="Honduras"><option value="Hong Kong"><option value="Hungary">
                <option value="Iceland"><option value="India"><option value="Indonesia">
                <option value="Iran"><option value="Iraq"><option value="Ireland">
                <option value="Israel"><option value="Italy"><option value="Ivory Coast">
                <option value="Jamaica"><option value="Japan"><option value="Jordan">
                <option value="Kazakhstan"><option value="Kenya"><option value="Kiribati">
                <option value="Kuwait"><option value="Kyrgyzstan"><option value="Laos">
                <option value="Latvia"><option value="Lebanon"><option value="Lesotho">
                <option value="Liberia"><option value="Libya"><option value="Liechtenstein">
                <option value="Lithuania"><option value="Luxembourg"><option value="Madagascar">
                <option value="Malawi"><option value="Malaysia"><option value="Maldives">
                <option value="Mali"><option value="Malta"><option value="Marshall Islands">
                <option value="Mauritania"><option value="Mauritius"><option value="Mexico">
                <option value="Micronesia"><option value="Moldova"><option value="Monaco">
                <option value="Mongolia"><option value="Montenegro"><option value="Morocco">
                <option value="Mozambique"><option value="Myanmar"><option value="Namibia">
                <option value="Nauru"><option value="Nepal"><option value="Netherlands">
                <option value="New Zealand"><option value="Nicaragua"><option value="Niger">
                <option value="Nigeria"><option value="North Korea"><option value="North Macedonia">
                <option value="Norway"><option value="Oman"><option value="Pakistan">
                <option value="Palau"><option value="Palestine"><option value="Panama">
                <option value="Papua New Guinea"><option value="Paraguay"><option value="Peru">
                <option value="Philippines"><option value="Poland"><option value="Portugal">
                <option value="Qatar"><option value="Romania"><option value="Russia">
                <option value="Rwanda"><option value="Saint Kitts and Nevis"><option value="Saint Lucia">
                <option value="Saint Vincent and the Grenadines"><option value="Samoa">
                <option value="San Marino"><option value="Sao Tome and Principe"><option value="Saudi Arabia">
                <option value="Senegal"><option value="Serbia"><option value="Seychelles">
                <option value="Sierra Leone"><option value="Singapore"><option value="Slovakia">
                <option value="Slovenia"><option value="Solomon Islands"><option value="Somalia">
                <option value="South Africa"><option value="South Korea"><option value="South Sudan">
                <option value="Spain"><option value="Sri Lanka"><option value="Sudan">
                <option value="Suriname"><option value="Sweden"><option value="Switzerland">
                <option value="Syria"><option value="Taiwan"><option value="Tajikistan">
                <option value="Tanzania"><option value="Thailand"><option value="Timor-Leste">
                <option value="Togo"><option value="Tonga"><option value="Trinidad and Tobago">
                <option value="Tunisia"><option value="Turkey"><option value="Turkmenistan">
                <option value="Tuvalu"><option value="Uganda"><option value="Ukraine">
                <option value="United Arab Emirates"><option value="United Kingdom">
                <option value="United States"><option value="Uruguay"><option value="Uzbekistan">
                <option value="Vanuatu"><option value="Vatican City"><option value="Venezuela">
                <option value="Vietnam"><option value="Yemen"><option value="Zambia">
                <option value="Zimbabwe">
              </datalist>

              <!-- Country + Location — drives timezone derivation, cultural
                   research, and the agent's sense of "home". The LLM
                   resolves whatever's typed into ISO country code + IANA
                   timezone, so free-text spellings ("US", "USA",
                   "Việt Nam") all work. Location is the city/region
                   within the country. -->
              <div class="grid grid-cols-2 gap-2 mb-3">
                <label class="block">
                  <span class="text-slate-300 text-xs font-medium block mb-1">Country</span>
                  <input type="text"
                         x-model="wizardFormCountry"
                         list="ageri-countries-list"
                         placeholder="e.g. United States, Vietnam"
                         class="w-full bg-white/10 border border-white/15 rounded-lg px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:border-teal/60 focus:ring-1 focus:ring-teal/30 focus:bg-white/15">
                </label>
                <label class="block">
                  <span class="text-slate-300 text-xs font-medium block mb-1">Location <span class="text-slate-500 font-normal">(optional)</span></span>
                  <input type="text"
                         x-model="wizardFormLocation"
                         placeholder="e.g. Houston, Texas"
                         class="w-full bg-white/10 border border-white/15 rounded-lg px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:border-teal/60 focus:ring-1 focus:ring-teal/30 focus:bg-white/15">
                </label>
              </div>

              <!-- Native language — free-text input with autocomplete from
                   the shared list. Anything typed is accepted; users with
                   uncommon native languages aren't gated out. -->
              <label class="block mb-3">
                <span class="text-slate-300 text-xs font-medium block mb-1">Native language</span>
                <input type="text"
                       x-model="wizardFormNativeLang"
                       list="ageri-languages-list"
                       placeholder="e.g. English, Tiếng Việt, 日本語…"
                       class="w-full bg-white/10 border border-white/15 rounded-lg px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:border-teal/60 focus:ring-1 focus:ring-teal/30 focus:bg-white/15">
              </label>

              <!-- Second languages — tag input. Each selected language is a
                   removable chip; the input below adds new ones. Autocomplete
                   from the shared list; free text accepted. -->
              <div class="block mb-4">
                <span class="text-slate-300 text-xs font-medium block mb-1.5">Second languages</span>
                <div class="flex flex-wrap items-center gap-1.5">
                  <template x-for="lang in wizardFormSecondLangs" :key="lang">
                    <span class="inline-flex items-center gap-1 pl-2 pr-1 py-0.5 text-[11px] rounded-md border bg-teal/20 text-teal border-teal/40">
                      <span x-text="lang"></span>
                      <button type="button" @click="removeSecondLang(lang)"
                              class="text-teal/70 hover:text-white leading-none px-1"
                              title="Remove">×</button>
                    </span>
                  </template>
                  <input type="text"
                         x-model="_secondLangInput"
                         @keydown.enter.prevent="addSecondLangFromInput()"
                         @keydown.comma.prevent="addSecondLangFromInput()"
                         @change="addSecondLangFromInput()"
                         list="ageri-languages-list"
                         placeholder="Add a language…"
                         class="flex-1 min-w-[120px] bg-white/10 border border-white/15 rounded-md px-2 py-1 text-[11px] text-white placeholder:text-slate-500 focus:outline-none focus:border-teal/60">
                </div>
              </div>

              <div class="flex items-center justify-end mt-1">
                <!-- Cancel lives in the persistent "Creating new agent" banner above. -->
                <button type="submit"
                        :disabled="!wizardFormFirstName.trim() || !wizardFormAge"
                        :class="(wizardFormFirstName.trim() && wizardFormAge)
                          ? 'bg-teal text-white hover:bg-teal/90'
                          : 'bg-white/10 text-slate-500 cursor-not-allowed'"
                        class="px-5 py-2 text-sm font-medium rounded-lg transition-colors">
                  Continue
                </button>
              </div>
            </form>
          </template>

          <!-- During creation (form submitted, waiting for the SUBJECT
               question or bio gallery), the standard 3-dot thinking
               indicator below the empty-state is the sole progress
               signal. The "Creating new agent" banner up top already
               tells the user a creation is in flight; an additional
               inline "Almost done…" card was redundant noise. -->

          <!-- Default empty-state prompt — hidden whenever the wizard is in any step OR creating -->
          <template x-if="!wizardStep && !(wizardActive && wizardMode === 'agent' && wizardCreatingName)">
            <p class="text-slate-500 text-sm">Say hello to start the conversation</p>
          </template>
         </div>
        </div>
      </template>

      <!-- Message list -->
      <template x-for="msg in visibleMessages()" :key="msg.id">
        <div>

          <!-- Date separator pill -->
          <template x-if="msg.type === 'separator'">
            <div class="flex items-center gap-3 my-3 px-2">
              <div class="flex-1 h-px bg-border"></div>
              <span class="text-xs text-slate-500 font-medium px-2 whitespace-nowrap" x-text="msg.dateLabel"></span>
              <div class="flex-1 h-px bg-border"></div>
            </div>
          </template>

          <!-- System / breadcrumb message -->
          <template x-if="msg.type !== 'separator' && msg.role === 'system'">
            <div class="flex justify-center mb-1">
              <span class="text-xs text-slate-500 italic px-3 py-1 rounded-full bg-white/5" x-text="msg.text || msg.content"></span>
            </div>
          </template>

          <!-- Regular message row -->
          <template x-if="msg.type !== 'separator' && msg.role !== 'system'">
            <div :class="msg.role === 'user' ? 'flex justify-end' : 'flex justify-start'" class="mb-1">
          <!-- Agent avatar (left side, for agent messages) -->
          <template x-if="msg.role === 'agent'">
            <template x-if="activeAvatarUrl()">
              <img :src="activeAvatarUrl()" :alt="activeProfileName"
                class="w-7 h-7 rounded-full flex-shrink-0 object-cover mr-2 mt-0.5 self-start">
            </template>
            <template x-if="!activeAvatarUrl()">
              <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-semibold text-xs flex-shrink-0 mr-2 mt-0.5 self-start"
                :style="profileGradient(activeProfile()?.color_index)">
                <span x-text="activeProfileName[0]"></span>
              </div>
            </template>
          </template>

          <!-- Inline card message -->
          <!-- Verification card — pushed by request_verification frames
               from headless browser-automation skills. Renders inline in
               the message stream with the prompt + optional screenshot
               + masked input. Locked once submitted/cancelled. -->
          <template x-if="msg.type === 'verification'">
            <div class="w-full max-w-md">
              <div class="bg-amber-500/5 border border-amber-500/30 rounded-2xl rounded-tl-sm px-4 py-3">
                <div class="flex items-start gap-2.5 mb-2">
                  <svg class="w-4 h-4 text-amber-400 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                  </svg>
                  <div class="flex-1 min-w-0">
                    <p class="text-amber-300 text-sm font-semibold leading-snug">Verification needed</p>
                    <p class="text-slate-300 text-xs leading-relaxed mt-0.5" x-text="msg.prompt"></p>
                  </div>
                </div>
                <template x-if="msg.screenshot_b64">
                  <img :src="'data:image/png;base64,' + msg.screenshot_b64"
                       alt="Verification screenshot"
                       class="w-full max-h-60 object-contain rounded-lg border border-white/10 mb-2.5">
                </template>
                <template x-if="!msg.submitted">
                  <form @submit.prevent="submitVerification(msg)" class="flex items-center gap-2">
                    <input type="password"
                           x-model="msg.answer"
                           autocomplete="one-time-code"
                           inputmode="numeric"
                           placeholder="Enter the code"
                           class="flex-1 bg-white/10 border border-white/15 rounded-lg px-3 py-2 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:border-amber-400/60 focus:ring-1 focus:ring-amber-400/30">
                    <button type="submit"
                            :disabled="!(msg.answer || '').trim()"
                            :class="(msg.answer || '').trim() ? 'bg-amber-500 text-slate-900 hover:bg-amber-400' : 'bg-white/10 text-slate-500 cursor-not-allowed'"
                            class="px-3 py-2 text-xs font-semibold rounded-lg transition-colors">
                      Submit
                    </button>
                    <button type="button"
                            @click="cancelVerification(msg)"
                            class="px-2 py-2 text-xs text-slate-400 hover:text-white transition-colors">
                      Skip
                    </button>
                  </form>
                </template>
                <template x-if="msg.submitted">
                  <p class="text-xs text-slate-500 italic"
                     x-text="msg.cancelled ? 'Verification skipped.' : 'Code submitted.'"></p>
                </template>
              </div>
            </div>
          </template>

          <template x-if="msg.type === 'card' && msg.card">
            <!-- Gallery cards need real estate to show options + nav; let
                 them break the usual 80% chat-bubble cap and fit the
                 message column. Other card types stay constrained. -->
            <div class="w-full"
                 :class="(msg.card.blocks || []).some(b => b.type === 'gallery') ? 'max-w-full' : 'max-w-[80%]'">
              <template x-for="block in msg.card.blocks" :key="block.block_id">
                <div class="mb-2">

                  <!-- text block -->
                  <template x-if="block.type === 'text'">
                    <div class="bg-panel border border-border rounded-2xl rounded-tl-sm px-4 py-3 text-sm text-slate-200 leading-relaxed whitespace-pre-wrap"
                      x-text="block.content"></div>
                  </template>

                  <!-- callout block -->
                  <template x-if="block.type === 'callout'">
                    <div :class="calloutClassesDark(block.variant)"
                      class="rounded-xl border-l-4 px-4 py-3 text-sm">
                      <template x-if="block.title">
                        <p class="font-semibold mb-1" x-text="block.title"></p>
                      </template>
                      <p class="leading-relaxed" x-text="block.content"></p>
                    </div>
                  </template>

                  <!-- code block -->
                  <template x-if="block.type === 'code'">
                    <div class="rounded-xl overflow-hidden border border-border">
                      <div class="flex items-center justify-between bg-panel px-3 py-2 border-b border-border">
                        <span class="text-xs text-slate-500 font-mono" x-text="block.filename || block.language || 'code'"></span>
                        <button
                          @click="navigator.clipboard.writeText(block.content); $el.textContent = 'Copied!'; setTimeout(() => $el.textContent = 'Copy', 1500)"
                          class="text-xs text-slate-400 hover:text-white transition-colors">Copy</button>
                      </div>
                      <pre class="bg-[#0c0d10] px-4 py-3 text-sm text-slate-200 overflow-x-auto font-mono leading-relaxed whitespace-pre"
                        x-text="block.content"></pre>
                    </div>
                  </template>

                  <!-- gallery block (Phase 3 wizard bio picker) -->
                  <template x-if="block.type === 'gallery'">
                    <div class="bg-panel border border-border rounded-2xl rounded-tl-sm px-4 py-3 w-full">
                      <!-- Header just shows the position; nav arrows live
                           at the bottom-center for thumb reach. -->
                      <div class="mb-2">
                        <span class="text-xs text-slate-500 font-medium uppercase tracking-wide">
                          Option <span x-text="(_galleryIdx[block.block_id] || 0) + 1"></span> of <span x-text="block.options.length"></span>
                        </span>
                      </div>

                      <!-- Active option blurb -->
                      <template x-for="(opt, idx) in block.options" :key="idx">
                        <div x-show="(_galleryIdx[block.block_id] || 0) === idx"
                             class="border border-white/10 rounded-xl p-4 mb-3 bg-white/5">
                          <h4 class="text-white text-sm font-semibold mb-2" x-text="opt.label"></h4>
                          <p class="text-slate-300 text-xs leading-relaxed whitespace-pre-line" x-text="opt.blurb"></p>
                        </div>
                      </template>

                      <!-- Action buttons. Once any action is dispatched
                           (Use this one / Show 3 more / Generate from
                           description), the whole gallery locks via
                           _galleryActionLocked[block_id] so the user
                           can't double-fire. Server-side dedup would
                           still catch a race, but blocking the click is
                           the right UX signal — no flicker, no second
                           "Use this one" bubble landing in chat. -->
                      <div class="flex items-center gap-2 flex-wrap">
                        <button type="button"
                                :disabled="!!_galleryActionLocked[block.block_id]"
                                @click="(() => { _galleryActionLocked[block.block_id] = true; respondToCard(msg.card.id, block.action_id, 'use_' + (_galleryIdx[block.block_id] || 0), 'Use this one'); })()"
                                :class="_galleryActionLocked[block.block_id] ? 'opacity-50 cursor-not-allowed' : 'hover:bg-teal/90'"
                                class="px-3 py-1.5 text-xs font-medium rounded-lg bg-teal text-white transition-colors">
                          Use this one
                        </button>
                        <button type="button"
                                :disabled="!!_galleryActionLocked[block.block_id]"
                                @click="(() => { _galleryActionLocked[block.block_id] = true; respondToCard(msg.card.id, block.action_id, 'more', 'Show 3 more'); })()"
                                :class="_galleryActionLocked[block.block_id] ? 'opacity-50 cursor-not-allowed' : 'hover:border-white/30 hover:text-white'"
                                class="px-3 py-1.5 text-xs rounded-lg border border-white/10 text-slate-300 transition-colors">
                          Show 3 more
                        </button>
                        <button type="button"
                                :disabled="!!_galleryActionLocked[block.block_id]"
                                @click="_galleryDescribeOpen[block.block_id] = !_galleryDescribeOpen[block.block_id]"
                                :class="_galleryActionLocked[block.block_id]
                                          ? 'opacity-50 cursor-not-allowed'
                                          : (_galleryDescribeOpen[block.block_id] ? 'text-white hover:border-white/30' : 'text-slate-400 hover:text-white hover:border-white/30')"
                                class="px-3 py-1.5 text-xs rounded-lg border border-white/10 transition-colors">
                          None of these — describe
                        </button>
                      </div>

                      <!-- Bottom-center prev/next nav — easier to thumb-reach
                           than the old top-right placement. -->
                      <div class="flex items-center justify-center gap-2 mt-3 pt-2 border-t border-white/5">
                        <button type="button"
                                @click="_galleryIdx[block.block_id] = Math.max(0, (_galleryIdx[block.block_id] || 0) - 1)"
                                :disabled="(_galleryIdx[block.block_id] || 0) === 0"
                                :class="(_galleryIdx[block.block_id] || 0) === 0
                                  ? 'text-slate-600 cursor-not-allowed'
                                  : 'text-slate-300 hover:text-white hover:bg-white/5'"
                                class="w-9 h-9 rounded-full flex items-center justify-center transition-colors">◀</button>
                        <span class="text-[11px] text-slate-500 font-medium w-12 text-center select-none">
                          <span x-text="(_galleryIdx[block.block_id] || 0) + 1"></span> / <span x-text="block.options.length"></span>
                        </span>
                        <button type="button"
                                @click="_galleryIdx[block.block_id] = Math.min(block.options.length - 1, (_galleryIdx[block.block_id] || 0) + 1)"
                                :disabled="(_galleryIdx[block.block_id] || 0) >= block.options.length - 1"
                                :class="(_galleryIdx[block.block_id] || 0) >= block.options.length - 1
                                  ? 'text-slate-600 cursor-not-allowed'
                                  : 'text-slate-300 hover:text-white hover:bg-white/5'"
                                class="w-9 h-9 rounded-full flex items-center justify-center transition-colors">▶</button>
                      </div>

                      <!-- Describe-what-you-want textarea -->
                      <template x-if="_galleryDescribeOpen[block.block_id]">
                        <div class="mt-3 pt-3 border-t border-white/10">
                          <textarea
                            x-model="_gallerySeed[block.block_id]"
                            placeholder="Describe the kind of person you want — e.g. 'a quiet librarian who reads horror novels'"
                            rows="2"
                            class="w-full bg-white/10 border border-white/15 rounded-lg px-3 py-2 text-xs text-white placeholder:text-slate-500 focus:outline-none focus:border-teal/60 focus:ring-1 focus:ring-teal/30 focus:bg-white/15 resize-y"></textarea>
                          <div class="flex justify-end mt-2">
                            <button type="button"
                                    @click="(() => { const seed = (_gallerySeed[block.block_id] || '').trim(); if (!seed) return; _galleryActionLocked[block.block_id] = true; respondToCard(msg.card.id, block.action_id, 'describe:' + seed, 'Generate from description'); _galleryDescribeOpen[block.block_id] = false; _gallerySeed[block.block_id] = ''; })()"
                                    :disabled="!(_gallerySeed[block.block_id] || '').trim() || _galleryActionLocked[block.block_id]"
                                    :class="((_gallerySeed[block.block_id] || '').trim() && !_galleryActionLocked[block.block_id])
                                      ? 'bg-teal text-white hover:bg-teal/90'
                                      : 'bg-white/10 text-slate-500 cursor-not-allowed'"
                                    class="px-3 py-1.5 text-xs font-medium rounded-lg transition-colors">
                              Generate
                            </button>
                          </div>
                        </div>
                      </template>
                    </div>
                  </template>

                  <!-- select block (inline — already resolved, show as read-only) -->
                  <template x-if="block.type === 'select'">
                    <div class="bg-panel border border-border rounded-2xl rounded-tl-sm px-4 py-3">
                      <p class="text-sm font-medium text-slate-200 mb-2" x-text="block.label"></p>
                      <template x-for="(opt, idx) in block.options" :key="opt.value">
                        <button
                          @click="respondToCard(msg.card.id, block.action_id, opt.value, opt.label)"
                          :class="_cardSelected[block.block_id] === opt.value
                            ? 'border-accent/60 bg-accent/10 text-white'
                            : 'border-border text-slate-300 hover:border-accent/40 hover:bg-accent/5'"
                          class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg border text-sm text-left transition-colors mb-1.5">
                          <span class="w-6 h-6 rounded-full bg-surface border border-border flex items-center justify-center text-xs text-slate-400 flex-shrink-0"
                            x-text="idx + 1"></span>
                          <span x-text="opt.label"></span>
                        </button>
                      </template>
                    </div>
                  </template>

                </div>
              </template>
            </div>
          </template>

          <!-- Regular text bubble -->
          <template x-if="msg.type !== 'card' && msg.type !== 'verification'">
            <div class="flex flex-col max-w-[80%]" :class="msg.role === 'user' ? 'items-end' : 'items-start'">

              <!-- Quote-reply preview (Phase 4E). Renders above the bubble
                   when this message is replying to another. Tap to jump
                   to the source bubble; if the source was deleted, the
                   denormalised snippet still renders so the context is
                   preserved. The preview lives in the SAME flex column
                   so it visually attaches to the bubble below it. -->
              <template x-if="msg.reply_to_text || msg.reply_to_id">
                <button type="button"
                        @click="_jumpToMessage(msg.reply_to_id)"
                        :class="msg.role === 'user' ? 'mr-1' : 'ml-1'"
                        class="mb-1 max-w-full text-left px-2.5 py-1.5 rounded-lg bg-white/5 border-l-2 border-accent/40 hover:bg-white/10 transition-colors">
                  <div class="text-[10px] text-slate-500 uppercase tracking-wide font-medium mb-0.5"
                       x-text="msg.reply_to_author === 'user' ? 'You' : (activeProfile()?.name || 'Agent')"></div>
                  <div class="text-xs text-slate-400 line-clamp-2"
                       x-text="msg.reply_to_text || '(message removed)'"></div>
                </button>
              </template>

              <!-- Bubble row: hover actions + bubble (or inline edit textarea) -->
              <div class="relative group flex items-start gap-1"
                   :data-msg-counter-id="msg.id"
                   :class="[
                     msg.reactions && Object.keys(msg.reactions).length > 0 ? 'pb-3.5' : '',
                     _flashMsgId === msg.id ? 'ring-2 ring-yellow-400/70 rounded-2xl transition-shadow duration-700' : '',
                   ]">

                <!-- Bubble text. Long-press / right-click pins the action
                     strip + opens the picker (mobile lacks hover). -->
                <template x-if="editingMsgId !== msg.id">
                  <div
                    @touchstart="startLongPress(msg, $event)"
                    @touchend="cancelLongPress()"
                    @touchmove="cancelLongPress()"
                    @touchcancel="cancelLongPress()"
                    @contextmenu.prevent="openActions(msg)"
                    :class="msg.role === 'user'
                      ? 'bg-accent/20 text-white rounded-2xl rounded-tr-sm'
                      : 'bg-panel border border-border text-slate-200 rounded-2xl rounded-tl-sm'"
                    class="px-4 py-3 text-sm leading-relaxed select-text"
                    x-html="renderText(msg.text)"
                    x-init="$nextTick(() => hydrateCukcukStubs($el))"
                  ></div>
                </template>

                <!-- Floating action strip (Slack/Discord pattern) — overlays
                     the top corner of the bubble on hover. Horizontal layout
                     so it never pushes the bubble or steals layout space.
                     User messages get the full set; agent messages get just
                     React (no copy/edit/delete on agent text by design). -->
                <template x-if="(msg.role === 'user' || (msg.role === 'agent' && msg.db_id)) && editingMsgId !== msg.id">
                  <div class="absolute -top-3 z-10 flex items-center gap-0.5 px-1 py-0.5 rounded-full bg-panel border border-border shadow-md opacity-0 group-hover:opacity-100 transition-opacity"
                       :class="[
                         msg.role === 'user' ? 'right-2' : 'left-2',
                         reactionPickerForMsgId === msg.id ? '!opacity-100' : '',
                       ]">
                    <!-- Copy button — both user and agent bubbles. Lets the
                         user grab a quote without dragging-to-select first.
                         The check-mark flash on success is the same UX as
                         a typical chat client. -->
                    <template x-if="msg.text">
                      <button @click="copyMsg(msg)" :title="_copyDone === msg.id ? 'Copied!' : 'Copy'"
                        class="w-6 h-6 flex items-center justify-center rounded transition-colors"
                        :class="_copyDone === msg.id ? 'text-teal' : 'text-slate-400 hover:text-white hover:bg-white/10'">
                        <template x-if="_copyDone !== msg.id">
                          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                          </svg>
                        </template>
                        <template x-if="_copyDone === msg.id">
                          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                          </svg>
                        </template>
                      </button>
                    </template>
                    <template x-if="msg.role === 'user'">
                      <button @click="startEdit(msg)" title="Edit"
                        class="w-6 h-6 flex items-center justify-center rounded text-slate-400 hover:text-white hover:bg-white/10 transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                        </svg>
                      </button>
                    </template>
                    <button @click.stop="reactionPickerForMsgId = (reactionPickerForMsgId === msg.id ? null : msg.id)"
                      title="React"
                      class="w-6 h-6 flex items-center justify-center rounded text-slate-400 hover:text-white hover:bg-white/10 transition-colors">
                      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                      </svg>
                    </button>
                    <!-- Quote-reply (Phase 4E). Both user and agent bubbles
                         get the affordance — replying to either kind
                         clarifies which message you're addressing in
                         burst conversations. Skipped on bubbles without
                         a db_id (still in flight) since the FK can't
                         resolve yet. -->
                    <button x-show="msg.db_id"
                      @click="startReply(msg)" title="Reply"
                      class="w-6 h-6 flex items-center justify-center rounded text-slate-400 hover:text-white hover:bg-white/10 transition-colors">
                      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                      </svg>
                    </button>
                    <template x-if="msg.role === 'user'">
                      <button @click="deleteMsg(msg)" title="Delete"
                        class="w-6 h-6 flex items-center justify-center rounded text-slate-400 hover:text-red-400 hover:bg-red-400/10 transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                        </svg>
                      </button>
                    </template>
                    <!-- Dev-mode 👁️ inspect: shows raw LLM context dump for
                         agent replies. Off by default; enabled via the
                         DEV_INSPECT_LLM=true property. Server-side gates
                         /api/chat/.../llm_inspect — UI only shows the
                         button when the flag is on for the current user. -->
                    <template x-if="msg.role === 'agent' && msg.db_id && devInspectOn">
                      <button @click="openLlmInspect(msg)" title="Inspect LLM context (dev)"
                        class="w-6 h-6 flex items-center justify-center rounded text-slate-400 hover:text-amber-300 hover:bg-amber-300/10 transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                      </button>
                    </template>
                  </div>
                </template>

                <!-- Reaction picker — pops up further above the action strip. -->
                <template x-if="reactionPickerForMsgId === msg.id">
                  <div @click.stop
                       @click.outside="reactionPickerForMsgId = null"
                       @keydown.escape.window="reactionPickerForMsgId = null"
                       class="absolute -top-12 z-20 flex items-center gap-1 px-2 py-1 rounded-full bg-panel border border-border shadow-lg"
                       :class="msg.role === 'user' ? 'right-2' : 'left-2'">
                    <template x-for="emoji in REACTION_EMOJI" :key="emoji">
                      <button @click="toggleReaction(msg, emoji)"
                              :title="emoji"
                              class="text-lg hover:scale-125 transition-transform leading-none px-1">
                        <span x-text="emoji"></span>
                      </button>
                    </template>
                  </div>
                </template>

                <!-- Restart-to-load button: appears inline under any agent
                     message that announces a saved skill. Pattern-match on
                     the "Skill saved to" marker the recording integration
                     emits — keeps the backend message-shape unchanged. -->
                <template x-if="msg.role === 'agent' && msg.text && msg.text.includes('Skill saved to') && !msg._restart_dismissed">
                  <div class="mt-2 flex items-center gap-2">
                    <button
                      @click="restartAgeri(msg)"
                      :disabled="restartInFlight"
                      class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium
                             text-teal bg-teal/10 border border-teal/30 rounded-lg
                             hover:bg-teal/20 hover:border-teal/50 transition-colors
                             disabled:opacity-50 disabled:cursor-wait">
                      <svg class="w-3.5 h-3.5"
                           :class="restartInFlight ? 'animate-spin' : ''"
                           fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 4v5h5M20 20v-5h-5M4 9a8 8 0 0113.657-3.657L20 8M20 15a8 8 0 01-13.657 3.657L4 16"/>
                      </svg>
                      <span x-text="restartInFlight ? 'Restarting…' : 'Restart Ageri to load'"></span>
                    </button>
                    <button
                      @click="msg._restart_dismissed = true"
                      class="text-[11px] text-slate-500 hover:text-slate-300 transition-colors">
                      not now
                    </button>
                  </div>
                </template>

                <!-- Inline edit mode -->
                <template x-if="editingMsgId === msg.id">
                  <div class="flex flex-col gap-2 min-w-[200px] max-w-full">
                    <textarea
                      :data-edit-ta="msg.id"
                      x-model="editingText"
                      @keydown.escape="cancelEdit()"
                      @keydown.enter.ctrl="saveEdit(msg)"
                      rows="2"
                      class="bg-accent/20 text-white rounded-xl px-3 py-2 text-sm resize-none border border-accent/40 focus:border-accent focus:outline-none"
                    ></textarea>
                    <div class="flex gap-1 justify-end">
                      <button @click="cancelEdit()"
                        class="px-3 py-1 rounded-lg text-xs text-slate-400 hover:text-white hover:bg-white/5 transition-colors">Cancel</button>
                      <button @click="saveEdit(msg)"
                        class="px-3 py-1 rounded-lg text-xs bg-accent hover:bg-indigo-500 text-white transition-colors">Save</button>
                    </div>
                  </div>
                </template>

                <!-- Reaction chips (Phase 4E) — anchored to the bubble's
                     bottom-RIGHT corner regardless of role, matching Zalo.
                     The bubble row gets pb-3.5 above when reactions exist
                     so the absolute chip doesn't overlap the timestamp. -->
                <template x-if="msg.reactions && Object.keys(msg.reactions).length > 0 && editingMsgId !== msg.id">
                  <div class="absolute bottom-0 right-1 z-10 flex flex-wrap gap-1">
                    <template x-for="[emoji, actors] in reactionEntries(msg)" :key="emoji">
                      <button @click="toggleReaction(msg, emoji)"
                              :title="reactionTooltip(actors)"
                              class="inline-flex items-center gap-0.5 pl-1 pr-1.5 py-0.5 rounded-full text-[11px] border bg-panel shadow-sm hover:opacity-80 transition leading-none text-slate-300"
                              :class="actors.includes('user') ? 'border-accent/70 !text-accent' : 'border-border'">
                        <span x-text="emoji" class="text-sm leading-none"></span>
                        <span x-text="actors.length" class="text-[10px] font-medium opacity-70"></span>
                      </button>
                    </template>
                  </div>
                </template>

              </div>

              <!-- Timestamp (hidden while editing) -->
              <template x-if="msg.ts && editingMsgId !== msg.id">
                <span class="text-[10px] text-slate-600 mt-0.5 px-1" x-text="msg.ts"></span>
              </template>

              <!-- Read receipt — last user message only -->
              <template x-if="msg.role === 'user' && msg.id === _lastUserMsgId && editingMsgId !== msg.id">
                <div class="flex items-center gap-1 mt-0.5 px-1 min-h-[12px]">
                  <!-- Not seen: single grey tick + label -->
                  <!-- Not seen yet: single grey tick while waiting -->
                  <template x-if="(thinking || agentAway) && !_lastUserMsgSeen">
                    <span class="flex items-center gap-1">
                      <svg class="w-3 h-3 text-slate-600 flex-shrink-0" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
                      </svg>
                    </span>
                  </template>
                  <!-- Seen: double teal tick + "Seen HH:MM" — shows as soon as agent reads, even during delay -->
                  <template x-if="_lastUserMsgSeen">
                    <span class="flex items-center gap-1">
                      <span class="flex items-center" style="gap:1px">
                        <svg class="w-3 h-3 text-teal" viewBox="0 0 16 16" fill="currentColor">
                          <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
                        </svg>
                        <svg class="w-3 h-3 text-teal" style="margin-left:-4px" viewBox="0 0 16 16" fill="currentColor">
                          <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
                        </svg>
                      </span>
                      <span class="text-[10px] text-teal" x-text="_seenAtLabel"></span>
                    </span>
                  </template>
                </div>
              </template>

            </div>
          </template>
            </div>
          </template>

        </div>
      </template>

      <!-- Thinking bubble — two modes:
             * Wizard creation (form submitted, bio gen / reroll in flight):
               rich card with spinner + "Creating <name>… <hint>" + estimate.
               Bio generation legitimately takes 15–30 s; 3 dots for that
               long reads as broken.
             * Everywhere else: standard 3-dot typing indicator. -->
      <template x-if="thinking && wizardActive && wizardMode === 'agent' && wizardCreatingName">
        <div class="flex justify-start"
             x-init="startCreatingTick()">
          <template x-if="activeAvatarUrl()">
            <img :src="activeAvatarUrl()" :alt="activeProfileName"
              class="w-7 h-7 rounded-full flex-shrink-0 object-cover mr-2 mt-0.5">
          </template>
          <template x-if="!activeAvatarUrl()">
            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-semibold text-xs flex-shrink-0 mr-2 mt-0.5"
              :style="profileGradient(activeProfile()?.color_index)">
              <span x-text="activeProfileName[0]"></span>
            </div>
          </template>
          <div class="bg-teal/5 border border-teal/30 rounded-2xl rounded-tl-sm px-4 py-3 flex items-start gap-3 max-w-sm">
            <svg class="w-4 h-4 text-teal flex-shrink-0 mt-0.5 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <circle cx="12" cy="12" r="9" stroke-opacity="0.25" stroke-width="2"/>
              <path d="M21 12a9 9 0 00-9-9" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <div class="text-left flex-1 min-w-0">
              <p class="text-teal text-sm font-semibold mb-0.5">Creating <span x-text="wizardCreatingName"></span>…</p>
              <p class="text-slate-400 text-xs leading-relaxed" x-text="creatingHint()"></p>
              <p class="text-slate-500 text-[11px] mt-1.5">Usually takes 15–30 seconds.</p>
            </div>
          </div>
        </div>
      </template>
      <template x-if="thinking && !(wizardActive && wizardMode === 'agent' && wizardCreatingName)">
        <div class="flex justify-start">
          <template x-if="activeAvatarUrl()">
            <img :src="activeAvatarUrl()" :alt="activeProfileName"
              class="w-7 h-7 rounded-full flex-shrink-0 object-cover mr-2 mt-0.5">
          </template>
          <template x-if="!activeAvatarUrl()">
            <div class="w-7 h-7 rounded-full flex items-center justify-center text-white font-semibold text-xs flex-shrink-0 mr-2 mt-0.5"
              :style="profileGradient(activeProfile()?.color_index)">
              <span x-text="activeProfileName[0]"></span>
            </div>
          </template>
          <div class="bg-panel border border-border rounded-2xl rounded-tl-sm px-4 py-3">
            <div class="flex gap-1 items-center">
              <span class="w-1.5 h-1.5 rounded-full bg-slate-500 animate-bounce" style="animation-delay:0ms"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-slate-500 animate-bounce" style="animation-delay:150ms"></span>
              <span class="w-1.5 h-1.5 rounded-full bg-slate-500 animate-bounce" style="animation-delay:300ms"></span>
            </div>
          </div>
        </div>
      </template>

    </div>

    <!-- ── Float card overlay ────────────────────────────────────────────── -->
    <template x-if="activeCard && activeCard.layout === 'float'">
      <!-- Scrim -->
      <div class="absolute inset-0 z-40 flex items-end justify-center pointer-events-none"
        style="background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 55%)">
        <!-- Card sheet -->
        <div class="w-full max-w-[520px] bg-white rounded-t-3xl pointer-events-auto"
          style="box-shadow: 0 -12px 48px rgba(0,0,0,0.28), 0 -2px 8px rgba(0,0,0,0.12)">

          <!-- Drag handle -->
          <div class="flex justify-center pt-3 pb-1">
            <div class="w-9 h-1 rounded-full bg-slate-200"></div>
          </div>

          <!-- Card header -->
          <div class="flex items-center justify-between px-5 pt-2 pb-4">
            <div class="flex items-center gap-2.5">
              <template x-if="activeAvatarUrl()">
                <img :src="activeAvatarUrl()" :alt="activeProfileName"
                  class="w-7 h-7 rounded-full flex-shrink-0 object-cover">
              </template>
              <template x-if="!activeAvatarUrl()">
                <div class="w-7 h-7 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0"
                  :style="profileGradient(activeProfile()?.color_index)">
                  <span x-text="(activeProfileName || 'A')[0]"></span>
                </div>
              </template>
              <span class="text-slate-900 font-semibold text-[15px] tracking-tight"
                x-text="activeCard.title || activeProfileName"></span>
            </div>
            <div class="flex items-center gap-2">
              <!-- Pagination dots -->
              <template x-if="activeCard.pagination">
                <div class="flex items-center gap-1.5">
                  <template x-for="i in activeCard.pagination.total" :key="i">
                    <div class="rounded-full transition-all duration-200"
                      :class="i === activeCard.pagination.current
                        ? 'w-4 h-1.5 bg-accent'
                        : i < activeCard.pagination.current
                        ? 'w-1.5 h-1.5 bg-slate-300'
                        : 'w-1.5 h-1.5 bg-slate-200'">
                    </div>
                  </template>
                </div>
              </template>
              <!-- Dismiss -->
              <button @click="dismissCard()"
                class="w-7 h-7 flex items-center justify-center rounded-full text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors">
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
              </button>
            </div>
          </div>

          <!-- Card blocks -->
          <div class="px-5 pb-5 space-y-4 max-h-[65vh] overflow-y-auto">
            <template x-for="block in activeCard.blocks" :key="block.block_id">
              <div>

                <!-- text block -->
                <template x-if="block.type === 'text'">
                  <p class="text-slate-500 text-[13px] leading-relaxed -mt-1" x-text="block.content"></p>
                </template>

                <!-- callout block -->
                <template x-if="block.type === 'callout'">
                  <div :class="calloutClasses(block.variant)"
                    class="rounded-2xl border-l-4 px-4 py-3 text-sm">
                    <template x-if="block.title">
                      <p class="font-semibold mb-1" x-text="block.title"></p>
                    </template>
                    <p class="leading-relaxed" x-text="block.content"></p>
                  </div>
                </template>

                <!-- select block -->
                <template x-if="block.type === 'select'">
                  <div>
                    <p class="text-slate-800 font-semibold text-[15px] mb-3 leading-snug" x-text="block.label"></p>
                    <div class="space-y-2">
                      <template x-for="opt in block.options" :key="opt.value">
                        <button
                          @click="respondToCard(activeCard.id, block.action_id, opt.value, opt.label)"
                          class="w-full flex items-center gap-3 px-4 py-3 rounded-2xl border border-slate-100 bg-slate-50/60 text-left text-sm transition-all hover:bg-indigo-50 hover:border-indigo-200 active:scale-[0.99] group">
                          <div class="flex-1 min-w-0">
                            <div class="text-slate-700 font-medium group-hover:text-indigo-900 transition-colors leading-snug" x-text="opt.label"></div>
                            <template x-if="opt.hint">
                              <div class="text-slate-400 text-xs mt-0.5 leading-snug group-hover:text-indigo-400 transition-colors" x-text="opt.hint"></div>
                            </template>
                          </div>
                          <svg class="w-4 h-4 text-slate-300 group-hover:text-indigo-400 flex-shrink-0 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                          </svg>
                        </button>
                      </template>
                    </div>
                    <!-- Free-text row -->
                    <template x-if="block.allow_freetext">
                      <div class="flex items-center gap-2 mt-3 border border-slate-200 rounded-2xl px-4 py-3 focus-within:border-accent focus-within:ring-2 focus-within:ring-accent/20 transition-all">
                        <svg class="w-4 h-4 text-slate-300 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
                        </svg>
                        <input type="text" placeholder="Something else…"
                          class="flex-1 text-sm text-slate-700 placeholder-slate-400 outline-none bg-transparent"
                          @keydown.enter.prevent="if($event.target.value.trim()) { respondToCard(activeCard.id, block.action_id, $event.target.value.trim(), $event.target.value.trim()); }">
                      </div>
                    </template>
                  </div>
                </template>

                <!-- confirm block -->
                <template x-if="block.type === 'confirm'">
                  <div>
                    <p class="text-slate-900 font-semibold text-[15px] mb-1 leading-snug" x-text="block.question"></p>
                    <template x-if="block.detail">
                      <p class="text-slate-400 text-[13px] mb-4 leading-relaxed whitespace-pre-line" x-text="block.detail"></p>
                    </template>
                    <div class="flex gap-2 mt-4">
                      <template x-for="opt in (block.options || ['yes','no'])" :key="opt">
                        <button
                          @click="respondToCard(activeCard.id, block.action_id, opt, opt.charAt(0).toUpperCase() + opt.slice(1))"
                          :class="opt === 'yes' && block.destructive
                            ? 'bg-red-500 hover:bg-red-600 text-white shadow-sm shadow-red-200'
                            : opt === 'yes'
                            ? 'bg-[#6366f1] hover:bg-indigo-600 text-white shadow-sm shadow-indigo-200'
                            : 'bg-slate-100 hover:bg-slate-200 text-slate-600'"
                          class="flex-1 py-3 rounded-2xl text-[13px] font-semibold transition-all active:scale-[0.98] capitalize"
                          x-text="opt">
                        </button>
                      </template>
                    </div>
                  </div>
                </template>

              </div>
            </template>
          </div>

          <!-- Card footer: skip button -->
          <template x-if="activeCard.allow_skip">
            <div class="flex justify-center px-5 pb-5 pt-2">
              <button @click="dismissCard()"
                class="text-[13px] text-slate-400 hover:text-slate-600 transition-colors px-4 py-1.5 rounded-full hover:bg-slate-100">
                Skip for now
              </button>
            </div>
          </template>

        </div>
      </div>
    </template>

    <!-- ── Skill config editor (form) ─────────────────────────────────────────
         Opens when configEditor is set (typically right before Activate, or
         from a "configure" action later). Renders one input per ConfigField
         with hints + required markers; password type gets an eye-toggle. -->
    <template x-if="configEditor">
      <div class="absolute inset-0 z-50 flex items-center justify-center p-4"
           style="background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);"
           @click.self="closeConfigEditor()">
        <!-- Theme-aware surface (matches the Skills picker's appearance):
             bg-panel + border-border switch with the active theme via
             CSS vars in base.html. text-white / text-slate-200 also
             auto-switch via [data-theme="light"] overrides. -->
        <div class="w-full max-w-lg bg-panel border border-border rounded-2xl shadow-2xl overflow-hidden flex flex-col"
             style="max-height: 90vh;">
          <!-- Header -->
          <div class="flex items-center justify-between px-6 py-4 border-b border-border">
            <div class="flex items-center gap-2.5">
              <svg class="w-5 h-5 text-accent flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
              </svg>
              <div>
                <div class="text-base font-semibold text-white leading-tight">
                  <span x-text="configEditor.skill_name"></span>
                </div>
                <div class="text-[11px] text-slate-300 leading-tight mt-0.5">Skill settings</div>
              </div>
            </div>
            <button @click="closeConfigEditor()"
                    class="text-slate-300 hover:text-white p-1.5 rounded-lg hover:bg-white/10 transition-colors">
              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
              </svg>
            </button>
          </div>
          <!-- Body: one input per field -->
          <div class="flex-1 overflow-y-auto px-6 py-5 space-y-5">
            <template x-if="configEditor.fields.length === 0">
              <div class="text-sm text-slate-300 italic py-6 text-center">
                This skill has no configurable fields.
              </div>
            </template>
            <template x-for="(f, idx) in configEditor.fields" :key="f.key">
              <div x-data="{ hintOpen: false }">
                <!-- Section header: render when this field's group differs
                     from the previous field's group. Empty group = no header. -->
                <template x-if="(f.group || '') && (idx === 0 || (configEditor.fields[idx-1].group || '') !== (f.group || ''))">
                  <div class="text-[11px] font-semibold uppercase tracking-wider text-slate-300 mt-2 mb-1 pb-1 border-b border-border"
                       x-text="f.group"></div>
                </template>
                <label class="flex items-baseline gap-1.5 mb-1.5">
                  <span class="text-[13px] font-medium text-white" x-text="f.label"></span>
                  <template x-if="f.required">
                    <span class="text-red-500 text-xs">*</span>
                  </template>
                  <!-- Tiny ? — hover/click to reveal the hint inline.
                       Replaces the verbose <p> below the input that the
                       form used before; keeps the column compact. -->
                  <template x-if="f.hint">
                    <span class="relative inline-flex items-center">
                      <button type="button"
                              @click.stop="hintOpen = !hintOpen"
                              @mouseenter="hintOpen = true"
                              @mouseleave="hintOpen = false"
                              class="w-3.5 h-3.5 rounded-full border border-border text-slate-300 hover:text-white hover:border-accent transition-colors flex items-center justify-center text-[9px] leading-none ml-1">
                        ?
                      </button>
                      <span x-show="hintOpen"
                            x-transition.opacity
                            @click.outside="hintOpen = false"
                            class="absolute z-10 left-5 top-0 w-64 p-2 bg-panel border border-border rounded-lg shadow-2xl text-xs text-slate-200 leading-relaxed pointer-events-auto"
                            x-text="f.hint"></span>
                    </span>
                  </template>
                </label>
                <!-- Password with eye toggle -->
                <template x-if="f.is_secret">
                  <div class="relative">
                    <input
                      :type="configEditor._visible[f.key] ? 'text' : 'password'"
                      :placeholder="configEditor.values[f.key] === '__MASKED__' ? '•••••••• (leave blank to keep current)' : (f.hint || 'enter value')"
                      :value="configEditor.values[f.key] === '__MASKED__' ? '' : (configEditor.values[f.key] || '')"
                      @input="configEditor.values[f.key] = $event.target.value"
                      class="w-full pl-3 pr-11 py-2.5 text-sm bg-white/5 border border-border rounded-lg text-slate-200 placeholder-slate-500 focus:border-accent focus:outline-none transition-colors"
                    >
                    <button type="button"
                            @click="configEditor._visible[f.key] = !configEditor._visible[f.key]"
                            class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-300 hover:text-white p-1.5 rounded transition-colors">
                      <svg x-show="!configEditor._visible[f.key]" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                      </svg>
                      <svg x-show="configEditor._visible[f.key]" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.542 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
                      </svg>
                    </button>
                  </div>
                </template>
                <!-- Plain text / url / number -->
                <template x-if="!f.is_secret">
                  <input
                    :type="f.type === 'number' ? 'number' : (f.type === 'url' ? 'url' : 'text')"
                    :placeholder="f.hint || (f.default || 'enter value')"
                    :value="configEditor.values[f.key] || ''"
                    @input="configEditor.values[f.key] = $event.target.value"
                    class="w-full px-3 py-2.5 text-sm bg-white/5 border border-border rounded-lg text-slate-200 placeholder-slate-500 focus:border-accent focus:outline-none transition-colors"
                  >
                </template>
                <!-- (Hint moved to the "?" tooltip beside the label.) -->
              </div>
            </template>
            <template x-if="configEditor.error">
              <div class="text-xs text-red-500 bg-red-500/10 border border-red-500/30 rounded-lg px-3 py-2.5"
                   x-text="configEditor.error"></div>
            </template>
          </div>
          <!-- Footer — when the skill has no configurable fields, collapse
               Cancel/Save into a single Close button. Save would be a no-op
               and Cancel implies there's something to discard, neither of
               which is true for a zero-field skill. -->
          <div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-border">
            <template x-if="configEditor.fields.length === 0">
              <button @click="closeConfigEditor()"
                      class="px-4 py-2 text-sm font-medium text-white bg-accent hover:bg-accent/90 rounded-lg transition-colors shadow-sm">
                Close
              </button>
            </template>
            <template x-if="configEditor.fields.length > 0">
              <button @click="closeConfigEditor()"
                      :disabled="configEditor.submitting"
                      class="px-4 py-2 text-sm font-medium text-slate-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors disabled:opacity-50">
                Cancel
              </button>
            </template>
            <template x-if="configEditor.fields.length > 0">
              <button @click="saveConfigEditor({ thenActivate: true })"
                      :disabled="configEditor.submitting"
                      class="px-4 py-2 text-sm font-medium text-white bg-accent hover:bg-accent/90 rounded-lg transition-colors disabled:opacity-50 flex items-center gap-1.5 shadow-sm">
                <svg x-show="configEditor.submitting" class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h5M20 20v-5h-5M4 9a8 8 0 0113.657-3.657L20 8M20 15a8 8 0 01-13.657 3.657L4 16"/>
                </svg>
                <span x-text="configEditor.submitting ? 'Saving…' : 'Save'"></span>
              </button>
            </template>
          </div>
        </div>
      </div>
    </template>

    <!-- Input bar — Slack-style compact on mobile, roomier on desktop -->
    <div class="flex-shrink-0 px-3 py-2 md:px-6 md:py-4 border-t border-border">
      <form @submit.prevent="send()">

        <!-- Unified input container — border + rounded here, textarea is transparent inside.
             relative so the @-mention dropdown can anchor above the input. -->
        <div class="relative bg-panel border border-border rounded-2xl transition-all focus-within:ring-2 focus-within:ring-accent focus-within:border-transparent"
          @click.outside="emojiOpen = false; plusOpen = false; mentionOpen = false">

          <!-- Hidden file input -->
          <input type="file" x-ref="fileInput" class="hidden" accept="image/*,.pdf,.txt,.md,.csv" multiple
            @change="handleFileAttach($event)">

          <!-- Active-skill UI moved to the tab strip (close + sub-banner
               live there now; this slot intentionally empty). -->

          <!-- @-mention autocomplete dropdown — floats above the input bar
               when the user types @ at start-of-word. Keyboard nav in
               _handleInputKeydown intercepts ↑↓ Enter Tab Esc. -->
          <div x-show="mentionOpen && mentionCandidates.length > 0"
               x-transition:enter="transition ease-out duration-100"
               x-transition:enter-start="opacity-0 translate-y-1"
               x-transition:enter-end="opacity-100 translate-y-0"
               class="absolute left-3 right-3 -top-2 -translate-y-full bg-panel border border-border rounded-xl shadow-xl py-1 z-30 max-h-60 overflow-y-auto"
               @click.outside="mentionOpen = false">
            <template x-for="(c, idx) in mentionCandidates" :key="c.id">
              <button type="button"
                      @click="_pickMention(c)"
                      @mouseenter="mentionSelectedIdx = idx"
                      :class="idx === mentionSelectedIdx
                        ? 'bg-accent/20 text-white'
                        : 'text-slate-300 hover:text-white'"
                      class="w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors">
                <div class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-semibold text-white flex-shrink-0"
                     :style="profileGradient(c.color_index)">
                  <span x-text="(c.name || '?').charAt(0)"></span>
                </div>
                <div class="flex-1 min-w-0">
                  <div class="text-sm font-medium" x-text="c.name"></div>
                  <div class="text-[11px] text-slate-500 truncate">
                    <template x-for="(a, i) in c.aliases" :key="a">
                      <span><span x-text="(i > 0 ? ' · ' : '') + '@' + a"></span></span>
                    </template>
                    <template x-if="c.archetype">
                      <span class="ml-1" x-text="(c.aliases.length ? ' · ' : '') + c.archetype.replace('_', ' ')"></span>
                    </template>
                  </div>
                </div>
              </button>
            </template>
          </div>

          <!-- Quote-reply mini-card (Phase 4E). Sits inside the composer
               container above the textarea so it visually attaches to
               the input the user is about to send. Snapshot snippet
               from when Reply was clicked — survives the source being
               deleted before send. X dismisses without sending. -->
          <template x-if="replyingTo">
            <div class="flex items-start gap-2 px-3 pt-2 md:px-4 md:pt-3 border-b border-border">
              <div class="flex-1 min-w-0 px-2.5 py-1.5 rounded-lg bg-white/5 border-l-2 border-accent/60">
                <div class="text-[10px] text-slate-500 uppercase tracking-wide font-medium mb-0.5"
                     x-text="'Replying to ' + (replyingTo.role === 'user' ? 'yourself' : (activeProfile()?.name || 'Agent'))"></div>
                <div class="text-xs text-slate-300 line-clamp-2" x-text="replyingTo.text"></div>
              </div>
              <button type="button"
                      @click="cancelReply()"
                      title="Cancel reply"
                      class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded text-slate-400 hover:text-white hover:bg-white/10 transition-colors mt-0.5">
                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
              </button>
            </div>
          </template>

          <!-- Textarea — transparent, no border, grows freely.
               Tighter top/bottom padding on mobile to match Slack's compact composer.
               Disabled during the agent-creation wizard whenever Ageri
               is presenting a card (archetype, form, gallery) or has
               just received the user's reply and hasn't asked the next
               question yet — the user can only type when Ageri's most
               recent message is a chat-style prompt. -->
          <textarea
            x-model="input"
            @keydown="_handleInputKeydown($event)"
            :placeholder="(activeProfileId === 'ageri' && (wizardStep === 'archetype' || wizardStep === 'form' || (wizardActive && !wizardAcceptingChatInput)))
                          ? 'Use the picker above…'
                          : 'Message ' + (activeProfile()?.name || 'Ageri') + '…'"
            :disabled="activeProfileId === 'ageri' && (wizardStep === 'archetype' || wizardStep === 'form' || (wizardActive && !wizardAcceptingChatInput))"
            :class="(activeProfileId === 'ageri' && (wizardStep === 'archetype' || wizardStep === 'form' || (wizardActive && !wizardAcceptingChatInput)))
                    ? 'opacity-50 cursor-not-allowed'
                    : ''"
            rows="1"
            class="w-full bg-transparent px-3 pt-2 pb-1 md:px-4 md:pt-3 md:pb-2 text-white text-sm placeholder-slate-500 resize-none border-none outline-none scrollbar-hide"
            style="min-height: 36px; max-height: 200px"
            x-ref="input"
            @input="autoResize($event.target); _updateMentionState($event.target); _updateSlashCmdState($event.target)"
            @keyup="_updateMentionState($event.target); _updateSlashCmdState($event.target)"
            @click="_updateMentionState($event.target); _updateSlashCmdState($event.target)"
          ></textarea>

          <!-- Slash-command autocomplete dropdown — same anchor/styling
               as the @-mention one but anchored to a different reactive
               state (cmdOpen). _handleInputKeydown picks up ↑↓ Enter Tab Esc
               when cmdOpen is true and routes to _pickSlashCmd. -->
          <div x-show="cmdOpen && cmdCandidates.length > 0"
               x-transition:enter="transition ease-out duration-100"
               x-transition:enter-start="opacity-0 translate-y-1"
               x-transition:enter-end="opacity-100 translate-y-0"
               class="absolute left-3 right-3 -top-2 -translate-y-full bg-panel border border-border rounded-xl shadow-xl py-1 z-30 max-h-60 overflow-y-auto">
            <template x-for="(c, idx) in cmdCandidates" :key="c.full">
              <button type="button"
                      @click="_pickSlashCmd(c)"
                      @mouseenter="cmdSelectedIdx = idx"
                      :class="idx === cmdSelectedIdx
                        ? 'bg-accent/20 text-white'
                        : 'text-slate-300 hover:text-white'"
                      class="w-full flex items-baseline gap-2 px-3 py-1.5 text-left transition-colors">
                <span class="text-sm font-mono text-accent shrink-0" x-text="c.full"></span>
                <span class="text-[11px] text-slate-400 truncate" x-text="c.description"></span>
                <span class="text-[10px] text-slate-500 ml-auto shrink-0" x-text="c.skill_name"></span>
              </button>
            </template>
          </div>

          <!-- Formatting bar (shown when Aa is active) -->
          <div x-show="formattingOpen"
            x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-1"
            class="flex items-center gap-0.5 px-2 py-1.5 border-b border-border"
            style="display:none">
            <!-- Bold -->
            <button type="button" @click="applyFormat('bold')" title="Bold"
              class="w-7 h-7 rounded flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-colors font-bold text-sm">B</button>
            <!-- Italic -->
            <button type="button" @click="applyFormat('italic')" title="Italic"
              class="w-7 h-7 rounded flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-colors italic text-sm">I</button>
            <!-- Strikethrough -->
            <button type="button" @click="applyFormat('strike')" title="Strikethrough"
              class="w-7 h-7 rounded flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-colors text-sm line-through">S</button>
            <div class="w-px h-4 bg-border mx-1"></div>
            <!-- Link -->
            <button type="button" @click="applyFormat('link')" title="Link"
              class="w-7 h-7 rounded flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-colors">
              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" 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>
            </button>
            <!-- Ordered list -->
            <button type="button" @click="applyFormat('ol')" title="Numbered list"
              class="w-7 h-7 rounded flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-colors">
              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
              </svg>
            </button>
            <!-- Unordered list -->
            <button type="button" @click="applyFormat('ul')" title="Bullet list"
              class="w-7 h-7 rounded flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-colors">
              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>
              </svg>
            </button>
            <div class="w-px h-4 bg-border mx-1"></div>
            <!-- Blockquote -->
            <button type="button" @click="applyFormat('blockquote')" title="Quote"
              class="w-7 h-7 rounded flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-colors">
              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
              </svg>
            </button>
            <!-- Inline code -->
            <button type="button" @click="applyFormat('code')" title="Inline code"
              class="w-7 h-7 rounded flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-colors font-mono text-xs">&lt;/&gt;</button>
            <!-- Code block -->
            <button type="button" @click="applyFormat('codeblock')" title="Code block"
              class="w-7 h-7 rounded flex items-center justify-center text-slate-400 hover:text-white hover:bg-white/10 transition-colors">
              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
              </svg>
            </button>
          </div><!-- end formatting bar -->

          <!-- Bottom toolbar — gap-0.5 was tight for thumb reach on mobile;
               sm:gap-0.5 keeps the desktop spacing while mobile gets gap-1. -->
          <div class="flex items-center px-2 pb-2 pt-1 gap-1 sm:gap-0.5">

            <!-- + button (relative anchor for popup) -->
            <div class="relative">
              <button type="button"
                @click.stop="plusOpen = !plusOpen; emojiOpen = false"
                class="w-8 h-8 rounded-lg text-slate-400 hover:text-white hover:bg-white/10 flex items-center justify-center transition-colors"
              >
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
              </button>

              <!-- Plus menu popup — opens upward -->
              <div x-show="plusOpen"
                x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
                class="absolute bottom-full left-0 mb-2 w-52 bg-panel border border-border rounded-xl shadow-xl z-50"
                style="display:none">

                <!-- Attach files -->
                <button type="button"
                  @click="plusOpen = false; $refs.fileInput.click()"
                  class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-slate-300 hover:bg-black/5 rounded-t-xl transition-colors">
                  <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                  </svg>
                  Add files or photos
                </button>

                <div class="h-px bg-border mx-2"></div>

                <!-- Skills → opens skill manager modal -->
                <button type="button"
                  @click.stop="plusOpen = false; openExtraSkillsModal()"
                  class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-slate-300 hover:bg-black/5 rounded-b-xl transition-colors">
                  <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/>
                  </svg>
                  <span class="flex-1 text-left">Skills</span>
                  <span class="text-xs text-slate-500" x-text="activeExtraSkillCount() > 0 ? activeExtraSkillCount() + ' extra' : ''"></span>
                </button>

              </div>
            </div><!-- end + anchor -->

            <!-- Aa (toggle formatting bar) -->
            <button type="button"
              @click.stop="formattingOpen = !formattingOpen; emojiOpen = false"
              :class="formattingOpen ? 'text-accent bg-accent/10' : 'text-slate-400 hover:text-white hover:bg-white/10'"
              class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors text-sm font-medium underline underline-offset-2 decoration-1"
              title="Formatting">Aa</button>

            <!-- Emoji -->
            <div class="relative">
              <button type="button"
                @click.stop="emojiOpen = !emojiOpen; plusOpen = false"
                :class="emojiOpen ? 'text-accent bg-accent/10' : 'text-slate-400 hover:text-white hover:bg-white/10'"
                class="w-8 h-8 rounded-lg flex items-center justify-center transition-colors"
                title="Emoji">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                  <circle cx="12" cy="12" r="10"/>
                  <path stroke-linecap="round" d="M8 13s1.5 2 4 2 4-2 4-2"/>
                  <line x1="9" y1="9" x2="9.01" y2="9"/>
                  <line x1="15" y1="9" x2="15.01" y2="9"/>
                </svg>
              </button>
              <!-- Emoji picker popup -->
              <div x-show="emojiOpen"
                x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
                class="absolute bottom-full left-0 mb-2 z-50"
                style="display:none">
                <emoji-picker
                  x-ref="emojiPicker"
                  :class="currentTheme === 'light' ? 'light' : 'dark'"
                  :style="currentTheme === 'light' ? '--background:#fff;--border-color:#e0e0e0;--input-border-color:#999;--input-font-color:#111;--input-placeholder-color:#999;--category-font-color:#111;--button-hover-background:#d9d9d9;--button-active-background:#e6e6e6;' : ''"
                  @emoji-click="insertEmoji($event.detail.unicode)"
                ></emoji-picker>
              </div>
            </div><!-- end emoji anchor -->

            <!-- Send-shortcut cog (popup opens upward).
                 Lives in the toolbar so the bare hint text below the form can
                 be deleted — saves a row of vertical space on mobile and
                 matches Slack's compact composer pattern. -->
            <div class="relative">
              <button type="button"
                @click.stop="sendModeOpen = !sendModeOpen"
                class="w-8 h-8 rounded-lg text-slate-500 hover:text-white hover:bg-white/10 flex items-center justify-center transition-colors"
                title="Send shortcut">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
              </button>
              <!-- Shortcut picker popup — opens upward from the cog -->
              <div x-show="sendModeOpen" x-cloak @click.outside="sendModeOpen = false"
                x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1"
                class="absolute bottom-full mb-2 left-0 w-64 bg-surface border border-border rounded-xl shadow-xl overflow-hidden z-50"
                style="display:none">
                <div class="px-3 py-2 border-b border-border/50">
                  <p class="text-xs font-medium text-slate-400">Send shortcut</p>
                </div>
                <template x-for="opt in [
                  { mode: 'enter',      label: 'Enter to send',      sub: '' },
                  { mode: 'ctrl-enter', label: 'Ctrl+Enter to send', sub: 'Enter for new line' },
                  { mode: 'click',      label: 'Click to send',      sub: 'Enter for new line' }
                ]" :key="opt.mode">
                  <button type="button"
                    @click="sendMode = opt.mode; localStorage.setItem('ageri_send_mode', opt.mode); sendModeOpen = false"
                    class="w-full flex items-center justify-between px-3 py-2.5 text-sm hover:bg-white/5 transition-colors"
                    :class="sendMode === opt.mode ? 'text-white' : 'text-slate-400'">
                    <div class="text-left">
                      <div x-text="opt.label"></div>
                      <div x-show="opt.sub" class="text-[11px] text-slate-500" x-text="opt.sub"></div>
                    </div>
                    <svg x-show="sendMode === opt.mode" class="w-4 h-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                    </svg>
                  </button>
                </template>
              </div>
            </div><!-- end cog anchor -->

            <div class="flex-1"></div>

            <!-- Send button — bottom-right inside the container.
                 Stays enabled even while the agent is "thinking" so
                 the user can queue follow-up messages messenger-style.
                 The agent's thinking state is communicated by the
                 typing indicator above the input bar; mirroring it on
                 the send button blocked queueing without adding any
                 information. -->
            <button
              type="submit"
              :disabled="!input.trim() || (activeProfileId === 'ageri' && (wizardStep === 'archetype' || wizardStep === 'form' || (wizardActive && !wizardAcceptingChatInput)))"
              :class="(input.trim() && !(activeProfileId === 'ageri' && (wizardStep === 'archetype' || wizardStep === 'form' || (wizardActive && !wizardAcceptingChatInput))))
                ? 'bg-accent hover:bg-indigo-500 shadow-md shadow-accent/20'
                : 'bg-white/8 cursor-not-allowed'"
              class="w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-150"
            >
              <svg class="w-4 h-4 transition-colors"
                :class="input.trim() ? 'text-white' : 'text-slate-600'"
                viewBox="0 0 16 16" fill="currentColor">
                <path d="M8 1.5a.5.5 0 0 1 .5.5v10.086l3.243-3.243a.5.5 0 0 1 .707.707l-4 4a.5.5 0 0 1-.707 0l-4-4a.5.5 0 1 1 .707-.707L7.5 12.086V2a.5.5 0 0 1 .5-.5z" transform="rotate(180 8 8)"/>
              </svg>
            </button>

          </div><!-- end toolbar -->
        </div><!-- end unified container -->
      </form>
      <!-- Send shortcut hint + cog (desktop only) -->
      <!-- Send-shortcut hint + cog moved into the toolbar above (next to the
           emoji icon). The standalone hint row was redundant and ate vertical
           space on mobile — Slack-style compact composer instead. -->
    </div>

  </main>
</div>

<script>
const AVATAR_PALETTE = [
  'linear-gradient(135deg,#818cf8,#14b8a6)',   // 0 indigo → teal (default)
  'linear-gradient(135deg,#f472b6,#fb923c)',   // 1 pink → orange
  'linear-gradient(135deg,#34d399,#06b6d4)',   // 2 emerald → cyan
  'linear-gradient(135deg,#f59e0b,#ef4444)',   // 3 amber → red
  'linear-gradient(135deg,#a78bfa,#ec4899)',   // 4 violet → pink
  'linear-gradient(135deg,#38bdf8,#818cf8)',   // 5 sky → indigo
  'linear-gradient(135deg,#4ade80,#22d3ee)',   // 6 green → cyan
  'linear-gradient(135deg,#fb923c,#f472b6)',   // 7 orange → pink
  'linear-gradient(135deg,#c084fc,#818cf8)',   // 8 purple → indigo
  'linear-gradient(135deg,#2dd4bf,#34d399)',   // 9 teal → emerald
];
{% if paddle_client_token %}
Paddle.Setup({
  token: '{{ paddle_client_token }}',
  eventCallback(ev) {
    if (ev.name === 'checkout.completed') {
      // Refresh balance after successful purchase
      setTimeout(() => window._ageriChat && window._ageriChat.loadBalance(), 3000);
    }
  }
});
{% endif %}

function chat() {
  return {
    activeProfileId: '{{ profiles[0].id if profiles else "ageri" }}',
    // Derived from activeProfileId — never set directly, so header/avatar/title
    // stay in sync even if someone mutates activeProfileId from outside selectProfile.
    get activeProfileName() {
      const p = (this.profiles || []).find(pr => pr.id === this.activeProfileId);
      return p?.name || 'Ageri';
    },
    messages: [],
    input: '',
    thinking: false,
    agentAway: false,
    presenceMap: {},        // profile_id → 'active' | 'away' | 'sleeping'
    wakePrompt: null,       // { profile_id, agent_name } when sleeping agent is messaged
    silentPrompt: null,     // { profile_id, agent_name, count } when agent has gone silent ≥ N times
    // Dev-mode 👁️ LLM inspector. Server-injected from the
    // AGERI_DEV_INSPECT_LLM env var (sourced from DEV_INSPECT_LLM in
    // ageri.properties). When true, agent bubbles get an eye icon that
    // opens a modal with the raw LLM context dump for that turn.
    devInspectOn: {{ "true" if dev_inspect_llm else "false" }},
    llmInspectModal: null,        // { msg_id, loading, error, payload, tab }

    // Profile / bio modal — opens when the user taps the chat header avatar.
    // profileModal holds the snapshot of the profile object at open-time;
    // profileModalBio holds the lazy-fetched rich data (bio_public, origin,
    // birthdate, job, hobby).
    profileModal: null,
    // Tracks verification_request frames already rendered to avoid
    // double-stamping when the server replays state on WS reconnect.
    // Keyed by request_id; a value of true means we've appended a
    // verification card for that id already.
    _verificationsSeen: {},
    // Per-profile pending verification cards. When a card arrives for
    // a profile the user isn't currently viewing, we stash it here
    // so it shows up the moment they switch to that profile. Keyed by
    // profile_id → array of card msg objects. Cleared when the user
    // submits / cancels.
    _pendingVerifications: {},
    // Tick counter used to re-render the agent's "Local time" field once
    // a minute. Reading the counter inside the x-text expression makes
    // Alpine track it as a dependency, so a tick triggers re-evaluation.
    _localTimeTick: 0,
    _localTimeTimer: null,
    profileModalBio: null,
    profileModalBioLoaded: false,
    profileModalAboutExpanded: false,   // truncate-expand state for the About paragraph
    profileModalRegenerating: false,    // true while bio auto-repair is in flight (server-side)
    profileModalAboutLang: 'native',    // 'native' | 'en' — which bio_public the About box renders
    proposalTarget: "",          // selected archetype in the propose-shift dialog
    proposalSubmitting: false,   // POST in flight
    proposalBanner: "",          // post-submit hint shown until dialog closes
    proposeDialogOpen: false,    // separate "Propose relationship change" dialog
    _silentCounts: {},      // profile_id → consecutive silent-reply count (resets on any reply)
    ws: null,
    msgCounter: 0,

    // Profiles (reactive — updated when agents are created/deleted)
    profiles: {{ profiles_json | tojson }},

    // Cards
    activeCard: null,         // float card currently shown (null = none)
    _cardSelected: {},        // { [block_id]: selected_value } for inline cards

    // Error banner
    errorBanner: null,        // string message or null
    _errorTimer: null,

    // Sidebar
    sidebarOpen: window.innerWidth >= 768,  // collapsed by default on mobile
    menuOpen: false,
    hasKeyboard: window.matchMedia('(pointer: fine) and (hover: hover)').matches,
    sendModeOpen: false,
    sendMode: localStorage.getItem('ageri_send_mode') || (window.matchMedia('(pointer: fine) and (hover: hover)').matches ? 'enter' : 'click'),
    isMobile: window.innerWidth < 768,
    // Phase 4C — Zalo/Slack-style mobile nav stack. Below md (~768px), only
    // ONE of {chat list, conversation} is visible at a time. Driven by URL
    // hash so the browser back button navigates list↔chat naturally:
    //   #/        → mobileView='list'  (sidebar full-width, main hidden)
    //   #/agent/X → mobileView='chat'  (main full-width, sidebar hidden)
    // Desktop ignores this entirely and renders both side-by-side as before.
    mobileView: (window.location.hash || '#/').startsWith('#/agent/') ? 'chat' : 'list',
    unreadCounts: {},   // profile_id → unread proactive message count

    // Agent-driven expiration banners (4F).
    //   expirationProposals: profile_id → {agent_name, kind, value, reason, confidence}
    //     — the agent has narratively suggested wrapping up; show
    //       Accept / Negotiate / Decline picks above the chat.
    //   expirationReached: profile_id → {agent_name, deadline}
    //     — the date-trip flag fired; show Hibernate / Archive / Carry on.
    expirationProposals: {},
    expirationReached: {},
    expirationActionPending: {},  // profile_id → 'accept'|'decline'|...

    // History pagination
    _historyOldestId: null,   // id of the oldest loaded message (cursor)
    _historyHasMore: false,   // whether more messages exist above
    _historyLoading: false,   // guard against concurrent fetches
    _topObserver: null,       // IntersectionObserver for load-more trigger

    // User avatar (bottom bar)
    userAvatarUrl: null,

    // Wizard / platform mode
    wizardActive: false,       // true while any creation wizard is running
    wizardMode: null,          // 'agent' | 'skill' | null — drives banner label
    wizardCreatingName: "",    // display name held during the bio-gen gap so the progress card can show it
    wizardRerolling: false,    // true while waiting for a re-rolled bio gallery (Show 3 more / Describe). Drives the in-stream progress card so the bar is visible after the empty-state has been replaced by the prior gallery.
    // Chat-input gate during the agent-creation flow. Disable the message
    // input by default during a wizard run; re-enable only when Ageri
    // sends a chat-style question (response frame). Cards (gallery,
    // float_select) revert to disabled — those steps use the card UI,
    // not the chat box. Cleared on every state transition so it can't
    // leak between flows.
    wizardAcceptingChatInput: false,
    _wizardMessagesSnapshot: null,  // Ageri's wizard-owned messages, stashed on profile-hop-out
    _creatingTick: 0,          // counter incremented every 3s by the progress card to rotate hints
    _creatingTickTimer: null,

    // New-agent wizard — visual stepped flow before backend wizard kicks in.
    // wizardStep: null | 'archetype' | 'form' | 'gallery' (gallery in Phase 3).
    //   'archetype' — pick from card grid (mentor/tutor/colleague/friend/companion)
    //   'form' — fill name + (Phase 2: age, gender, languages)
    //   null — wizard not running pre-backend
    // wizardArchetype: chosen archetype key carried through to the form submit
    //   so the backend can pre-fill the wizard state and skip ARCHETYPE inference.
    wizardStep: null,
    wizardArchetype: "",
    wizardFormFirstName: "",  // serves as the display name (single-field model — bio fills the full family name)
    wizardFormAge: "",
    wizardFormGender: "",
    wizardFormCountry: "",       // free-text country; LLM resolves to ISO + IANA tz
    wizardFormLocation: "",      // optional city/region
    wizardFormNativeLang: "",
    _userLanguage: '{{ user_language|e }}',  // server-injected; default for native-lang pre-fill
    wizardFormSecondLangs: [],   // tag-input list of language strings
    _secondLangInput: "",        // current text in the tag-input box

    // Phase 3 gallery state — per-card idx for the slideshow + describe-mode
    // toggle + textarea content. Keyed by gallery block_id so multiple
    // gallery cards in history render independently.
    _galleryIdx: {},
    _galleryDescribeOpen: {},
    _gallerySeed: {},
    // Once any action is dispatched on a gallery card (Use this one /
    // Show 3 more / Generate from description), this map locks the
    // whole card until a wizard transition (new gallery, wizard_ended,
    // or wizard_started — see resets below). Prevents double-clicks
    // landing two actions in chat while the first is in flight.
    _galleryActionLocked: {},

    // Phase 4 @-mention autocomplete. mentionOpen flips to true when the
    // user types `@` at start-of-word in the message input. The dropdown
    // shows matching profiles (firstname + aliases). Keyboard nav: ↑↓ to
    // change highlight, Enter/Tab to insert, Esc to dismiss.
    mentionOpen: false,
    mentionQuery: "",       // partial text typed AFTER the @
    mentionAnchor: -1,      // input index where the @ sits
    mentionSelectedIdx: 0,  // currently highlighted candidate

    // Slash-command autocomplete — appears when the user types a leading
    // "/<prefix>" (no preceding chars) in the message input. Same keyboard
    // pattern as @-mention but the dropdown shows commands available to
    // the active profile (union across that agent's installed skills).
    // Cache per profile_id so we don't refetch on every keystroke.
    cmdOpen: false,
    cmdQuery: "",            // text after the leading "/", lowercased
    cmdSelectedIdx: 0,
    _cmdCacheByProfile: {},  // {profile_id: [{full, description, skill_id, skill_name}]}
    _cmdLoadInflight: {},    // {profile_id: Promise} — dedupe concurrent loads

    // Self-restart in flight — while true, the Restart button is disabled +
    // spinning, and the WS reconnect loop keeps retrying until the new
    // process accepts connections.
    restartInFlight: false,

    // Two-step cancel on the wizard banner: first click flips this to true
    // (button morphs into Discard/Keep-going), a 4s timer auto-reverts so an
    // accidentally-expanded confirm doesn't linger.
    wizardCancelConfirming: false,
    // Two-step exit on the active-skill pill: first click flips this to true
    // (revealing Exit/Cancel); second click on Exit calls exitActiveSkill().
    // 5-second auto-disarm via setTimeout in the click handler.
    skillExitConfirming: false,
    // Two-step "Reset session" on the skill tab's sub-banner. Same disarm
    // pattern as skillExitConfirming. Skill tabs only — Messages tab is
    // the agent's general thread and never gets a destructive control.
    skillResetConfirming: false,
    // Tiny "?" popover open in the skill tab's sub-banner. Shows the
    // active skill's description + commands. Loaded from the cached
    // skillsCatalog (filled when the user opens the Skills picker;
    // we lazy-load it on first ? click if empty).
    skillHelpOpen: false,
    get activeSkillCatalog() {
      const sk = this.activeSkillMap[this.activeProfileId];
      if (!sk) return null;
      return this.skillsCatalog.find(s => s.id === sk.key) || null;
    },
    // Skill-run timer state. Map of skill_key → { start: epochMs, profileId }.
    // Set when `thinking` flips to true while on a skill tab; cleared when
    // it flips back to false. Tracking profileId lets the floating banner
    // navigate back to the correct (profile, skill) when the user has
    // wandered away. Lets the sub-banner show "Running 1m 23s" so the user
    // can decide whether a long-running browser automation is worth aborting.
    _skillRunStartByKey: {},
    // Tick counter — bumped 1Hz by an interval while any skill is running.
    // Forcing a re-read keeps the elapsed string fresh without a watch.
    _skillRunNowTick: 0,
    _skillRunInterval: null,
    _skillRunStartMs(skillKey) {
      // Backwards-compatible accessor — the value used to be a bare epoch
      // ms, now it's { start, profileId }. Handle both shapes during
      // transition without crashing on stale state.
      const v = this._skillRunStartByKey[skillKey];
      if (v == null) return 0;
      if (typeof v === 'number') return v;
      return v.start || 0;
    },
    _skillRunProfileId(skillKey) {
      const v = this._skillRunStartByKey[skillKey];
      if (v == null || typeof v === 'number') return null;
      return v.profileId || null;
    },
    get skillRunActiveOnThisTab() {
      const key = this.activeChatTab;
      if (!key || key === 'messages') return false;
      return !!this._skillRunStartByKey[key];
    },
    get skillRunElapsed() {
      void this._skillRunNowTick;  // dep so getter recomputes per tick
      const key = this.activeChatTab;
      const started = key ? this._skillRunStartMs(key) : 0;
      if (!started) return '';
      return this._formatSkillElapsed(started);
    },
    _formatSkillElapsed(startedMs) {
      const secs = Math.max(0, Math.floor((Date.now() - startedMs) / 1000));
      if (secs < 60) return `${secs}s`;
      const m = Math.floor(secs / 60);
      const s = secs % 60;
      return `${m}m ${s.toString().padStart(2, '0')}s`;
    },
    // Floating banner — shows when a skill is running but the user has
    // navigated away from its tab/profile. Click to jump back. Returns
    // the descriptor object or null.
    get skillRunOffTabInfo() {
      void this._skillRunNowTick;
      const keys = Object.keys(this._skillRunStartByKey);
      if (keys.length === 0) return null;
      // If the active tab IS the running skill's tab on the right
      // profile, nothing to surface — the per-tab banner handles it.
      const onTab = this.skillRunActiveOnThisTab;
      const activePid = this.activeProfileId;
      // Pick the first running entry. Realistically there's only ever
      // one skill running across the system; if that ever changes the
      // banner would still be useful for any one of them.
      const skillKey = keys[0];
      const startedMs = this._skillRunStartMs(skillKey);
      const profileId = this._skillRunProfileId(skillKey);
      // If on its tab on the right profile already, suppress floating.
      if (onTab && this.activeChatTab === skillKey && (!profileId || profileId === activePid)) {
        return null;
      }
      return {
        skillKey,
        profileId,
        elapsed: startedMs ? this._formatSkillElapsed(startedMs) : '',
      };
    },
    jumpToRunningSkill() {
      const info = this.skillRunOffTabInfo;
      if (!info) return;
      // If we have a profile target and we're not on it, navigate there
      if (info.profileId && info.profileId !== this.activeProfileId) {
        const target = (this.profiles || []).find(p => p.id === info.profileId);
        if (target) {
          try { this.selectProfile(target.id, target.name); } catch (e) { /* best-effort */ }
        }
      }
      // Activate the skill's tab on the (now-active) profile
      this.activeChatTab = info.skillKey;
    },

    _clearSkillRunForResponse(skillKey) {
      // Drop the timer entry for whichever skill produced this WS event.
      // If skillKey is set, drop just that entry (other tabs may still be
      // running their own skills). If skillKey is null/undefined (general
      // chat or untagged), drop everything — there's no in-flight skill
      // by definition. Also clears stale entries left by previous WS-send
      // failures that prevented a clean done event.
      if (skillKey) {
        if (this._skillRunStartByKey[skillKey]) {
          const next = { ...this._skillRunStartByKey };
          delete next[skillKey];
          this._skillRunStartByKey = next;
        }
      } else {
        if (Object.keys(this._skillRunStartByKey).length > 0) {
          this._skillRunStartByKey = {};
        }
      }
    },
    _wizardCancelRevertTimer: null,

    // Skill config editor (form-style modal). Null = closed. While open:
    //   { skill_key, skill_name, fields: [...], values: {key:val},
    //     _visible: {key: bool}, submitting: bool, error: "",
    //     onSaved: () => {}  — optional callback after a successful save }
    configEditor: null,

    // User status
    userStatus: null,          // {text, type, expires_at, set_at} or null
    statusPickerOpen: false,   // status picker popup open
    _statusExpireTimer: null,  // interval that counts down expiry

    // Avatar upload
    _avatarUploadTarget: null,  // profile id being uploaded

    // Input toolbar state
    emojiOpen: false,
    formattingOpen: false,
    plusOpen: false,

    // Skills manager modal
    skillsModalOpen: false,
    skillsModalLoading: false,
    skillsSaving: false,
    skillsSaved: false,
    skillsCatalog: [],
    skillSearchQuery: '',
    skillSearchFocused: false,

    // Active skill per profile: profile_id → { key, name, input_mode } | null
    activeSkillMap: {},
    // Currently-selected chat tab. 'messages' = general thread, or a
    // skill_key when the user has switched to that skill's thread.
    // Auto-switches to a skill's tab when it's activated; auto-switches
    // back to 'messages' when no skill is active.
    activeChatTab: 'messages',
    // Per-profile remembered tab. Lets each agent keep its own tab state
    // across sidebar profile switches: e.g. Ageri stays on the cukcuk tab
    // when the user pops over to Mia and comes back.
    chatTabByProfile: {},
    get currentTheme() {
      // Source of truth is the data-theme attribute that base.html's
      // applyTheme() writes to <html>. Reading prefs.theme from
      // localStorage misses the 'auto' case (returns 'auto', not the
      // resolved 'light'/'dark'), which made the emoji picker render
      // dark on a light page when the user had auto-mode + daylight.
      try {
        const t = document.documentElement.dataset.theme;
        if (t === 'light' || t === 'dark') return t;
      } catch (_) {}
      try {
        return JSON.parse(localStorage.getItem('ageri_theme') || '{}').theme === 'light' ? 'light' : 'dark';
      } catch (_) { return 'dark'; }
    },

    // Read receipts + edit/delete/copy
    _lastUserMsgId: null,     // counter id of last user message (for receipt indicator)
    _lastUserMsgSeen: false,  // true once agent has responded to that message
    _seenAt: null,            // Date when seen transition fired
    _seenAtLabel: '',         // "Seen 06:58 PM" displayed next to double tick
    _pendingAgentDbId: null,  // DB id for the next agent message to be added
    _pendingAgentReplyTo: null,  // {db_id, text, role} for the next agent bubble's quote anchor (Phase 4E iter 2)
    editingMsgId: null,       // counter id of message currently being inline-edited
    editingText: '',          // live edit textarea content
    _copyDone: null,          // msg.id currently showing the "Copied!" tick (clears after 1.5s)
    reactionPickerForMsgId: null, // msg.id currently showing the 6-emoji picker (Phase 4E)
    // Quote-reply (Phase 4E). When set, the composer renders a mini quote
    // card above the textarea and the next send() includes reply_to_id.
    // Snapshot so the card text survives even if the source message gets
    // deleted between Reply-click and Send. {id, db_id, text, role}.
    replyingTo: null,
    _flashMsgId: null,           // counter id currently flashing yellow after tap-to-jump

    // Billing
    credits: null,
    showTopup: false,
    topupStep: 'pick',      // 'pick' | 'method' | 'qr' | 'success'
    selectedTier: null,
    qrLink: null,
    _qrPollTimer: null,
    _qrPollStop: null,
    creditPackages: [
      { tier: 5,  priceId: 'pri_01kny6pv7stafaphtvxmfjpdyn', label: '$5',  credits: 500,  bonus: 0,    vnd: 125000 },
      { tier: 10, priceId: 'pri_01kny8d1fprev73ym1vekeef47', label: '$10', credits: 1100, bonus: 100,  vnd: 250000 },
      { tier: 20, priceId: 'pri_01kny8efztkrdvcj2k87eqbn4g', label: '$20', credits: 2400, bonus: 400,  vnd: 500000 },
      { tier: 50, priceId: 'pri_01kny8fazn1qq6ffqeh7b3gatj', label: '$50', credits: 6500, bonus: 1500, vnd: 1250000 },
    ],

    init() {
      // Phase 4C — honour `#/agent/<id>` URL hash on first load. If the page
      // was opened deep-linked (or refreshed mid-conversation), select that
      // profile so the chat view shows the right agent. If no agent hash
      // and we're on mobile, clear activeProfileId so the user lands on the
      // chat list instead of inside whichever profile the server defaulted to.
      const _hash = window.location.hash || '#/';
      if (_hash.startsWith('#/agent/')) {
        const _id = decodeURIComponent(_hash.slice('#/agent/'.length));
        if (_id && _id !== this.activeProfileId) {
          this.activeProfileId = _id;
        }
        // Hidden-agent URL guard (4G.1): direct navigation to
        // /#/agent/{hidden-id} previously rendered the chat without
        // any re-auth prompt, leaking the agent's existence to anyone
        // with the URL. Now we fetch the profile, check `hidden`, and
        // — if hidden AND the user hasn't unlocked the Hidden tab in
        // this browser session — redirect to Settings → Agents where
        // the password prompt fires and the user can choose whether
        // to reveal that agent. Async-fired so we don't block init.
        // Also normalises activeProfileId to the canonical slug if the
        // user navigated via an alias URL — keeps subsequent /api
        // calls slug-based and the URL hash readable.
        this._guardHiddenAgentAccess(_id);
        this._normaliseActiveProfileToCanonical(_id);
      } else if (this.isMobile) {
        // On mobile with no agent hash, start on the chat list. Desktop
        // keeps the server-default selection (both panels render anyway).
        this.activeProfileId = null;
      }
      // Phase 4C invariant: on mobile, the sidebar is always "expanded" — the
      // collapsed-avatar-rail mode is a desktop-only affordance. Without this,
      // mobile-list shows just centered avatars (no names, no last-message
      // preview) because every row's text gates on sidebarOpen.
      if (this.isMobile) this.sidebarOpen = true;

      this.connect();
      this.loadHistory(this.activeProfileId);
      // Pre-load the skills catalog so send() can match slash commands
      // against installed skills (auto-forward feature). Without this
      // the catalog is lazy-loaded only when the Skills modal opens, so
      // a user who types `/get-report …` in Messages without ever opening
      // the modal hits an empty catalog and the auto-forward doesn't fire.
      this.ensureSkillsCatalogLoaded();
      // Robust hydration: scan the document every 750ms for unhydrated
      // cukcuk stubs. Belt-and-suspenders against Alpine x-init/x-html
      // timing — by the time the user sees the message, this catches it.
      this._cukcukHydrateInterval = setInterval(() => {
        try { this.hydrateCukcukStubs(document.body); } catch (e) {
          console.warn('[cukcuk] hydration error:', e);
        }
      }, 750);
      // Tab switch → persist the choice for this profile + scroll to bottom.
      this.$watch('activeChatTab', (newTab, oldTab) => {
        if (this.activeProfileId) {
          this.chatTabByProfile = {
            ...this.chatTabByProfile,
            [this.activeProfileId]: newTab,
          };
        }
        // Tab-switch cleanup: don't carry per-message UI state across
        // tabs. The bubble it was attached to is no longer visible.
        if (newTab !== oldTab) {
          if (this.editingMsgId) {
            this.editingMsgId = null;
            this.editingText = '';
          }
          if (this.reactionPickerForMsgId) {
            this.reactionPickerForMsgId = null;
          }
          if (this._copyDone) {
            this._copyDone = null;
          }
        }
        this.$nextTick(() => {
          const el = this.$refs.messages;
          if (el) el.scrollTop = el.scrollHeight;
        });
      });
      // Profile switch (Ageri → Mia → Vy …) — restore the new profile's
      // remembered tab. If their saved tab is no longer valid (e.g. that
      // profile's skill has since been deactivated), fall back to messages.
      this.$watch('activeProfileId', (newPid) => {
        const remembered = this.chatTabByProfile[newPid] || 'messages';
        const skillKey = this.activeSkillMap[newPid]?.key;
        // Validate: if remembered is a skill tab, that skill must still be active.
        const valid = (remembered === 'messages') || (remembered === skillKey);
        this.activeChatTab = valid ? remembered : 'messages';
      });
      // Skill-run timer: when `thinking` flips on while the user is on a
      // skill tab, mark the start time keyed by that skill. When it flips
      // off (turn complete OR aborted), clear it. The 1Hz interval below
      // bumps a tick so the displayed elapsed string stays fresh.
      this.$watch('thinking', (now, prev) => {
        const tab = this.activeChatTab;
        if (now && !prev && tab && tab !== 'messages') {
          // Don't overwrite a backend-supplied start time (set by the
          // skill_run_active handler on WS reconnect after page refresh).
          // The backend's started_at_ms is the truth; clobbering it with
          // Date.now() would reset the elapsed counter on every reload.
          if (!this._skillRunStartByKey[tab]) {
            this._skillRunStartByKey = {
              ...this._skillRunStartByKey,
              [tab]: { start: Date.now(), profileId: this.activeProfileId },
            };
          }
        } else if (!now && prev) {
          // Clear timers for ALL skill tabs — a turn has completed; we
          // don't track which skill produced the response, but only one
          // can be running at a time per profile so this is safe.
          if (Object.keys(this._skillRunStartByKey).length > 0) {
            this._skillRunStartByKey = {};
          }
        }
      });
      // 1Hz tick — bumps a counter so the elapsed-time getter recomputes.
      // Cheap (one assignment) and only matters while a skill is running.
      this._skillRunInterval = setInterval(() => {
        if (Object.keys(this._skillRunStartByKey).length > 0) {
          this._skillRunNowTick++;
        }
      }, 1000);
      // Request desktop notification permission — silently skipped if already granted/denied
      if ('Notification' in window && Notification.permission === 'default') {
        Notification.requestPermission();
      }
      // Probe user avatar
      const _img = new Image();
      _img.onload = () => { this.userAvatarUrl = `/avatar/user?t=${Date.now()}`; };
      _img.src = `/avatar/user?t=${Date.now()}`;
      this._setupTopObserver();
      {% if namespace and paddle_client_token %}
      this.loadBalance();
      window._ageriChat = this;
      {% endif %}
      // Keep isMobile / sidebarOpen in sync when window is resized
      window.addEventListener('resize', () => {
        const mobile = window.innerWidth < 768;
        if (mobile === this.isMobile) return;  // no breakpoint cross
        this.isMobile = mobile;
        // Force sidebarOpen=true regardless of which way we crossed:
        // - desktop→mobile: rows must render expanded for the chat-list view
        // - mobile→desktop: collapsing the sidebar without an explicit click
        //   would hide every agent's name unexpectedly
        this.sidebarOpen = true;
      });
      // Phase 4C — sync mobileView with URL hash. Browser back/forward
      // buttons trigger hashchange, which flips mobileView and (re)opens
      // the correct screen. selectProfile pushes new hashes so back
      // returns to the list naturally.
      window.addEventListener('hashchange', () => {
        const h = window.location.hash || '#/';
        const prev = this.mobileView;
        this.mobileView = h.startsWith('#/agent/') ? 'chat' : 'list';
        if (prev === 'chat' && this.mobileView === 'list') {
          // User navigated back to list — clear the active profile so the
          // chat-list screen shows. Don't touch desktop where both panels
          // render simultaneously regardless of mobileView.
          if (this.isMobile) {
            this.activeProfileId = null;
            this.messages = [];
          }
        }
      });
      // If page loaded with #/agent/<id>, restore that profile after
      // profiles list is fetched. Done in loadProfiles() to ensure data
      // is available; init only flips the view flag.
      // Inject scrollbar-hide into emoji-picker shadow DOM on first open
      this.$watch('emojiOpen', (val) => {
        if (!val) return;
        this.$nextTick(() => {
          const picker = this.$refs.emojiPicker;
          if (picker?.shadowRoot && !picker.shadowRoot.querySelector('#ageri-sb')) {
            const s = document.createElement('style');
            s.id = 'ageri-sb';
            s.textContent = '::-webkit-scrollbar{display:none}*{scrollbar-width:none}';
            picker.shadowRoot.appendChild(s);
          }
        });
      });
      // ?action=create_skill → auto-fire the skill-recording wizard.
      // The marketplace "+ Create a new skill" button navigates here with that
      // param; we wait until the websocket is open, then call createSkill().
      try {
        const params = new URLSearchParams(window.location.search);
        const autoAction = params.get('action');
        if (autoAction === 'create_skill' || autoAction === 'create_agent') {
          const fire = () => {
            if (autoAction === 'create_skill') this.createSkill();
            else this.createAgent();
            // Strip the query param so a refresh doesn't re-fire.
            const cleanUrl = window.location.pathname + window.location.hash;
            window.history.replaceState({}, '', cleanUrl);
          };
          const waitForWs = () => {
            if (this.ws && this.ws.readyState === WebSocket.OPEN) fire();
            else setTimeout(waitForWs, 100);
          };
          waitForWs();
        }
      } catch (_) { /* non-fatal */ }
    },

    // ── Alias → canonical slug normalisation ─────────────────────────────────
    // When the URL hash is an alias (e.g. /#/agent/vy%20(pc1) for slug
    // vy_1), fetch the profile, replace activeProfileId with the
    // canonical slug from the response, and rewrite the hash so the
    // address bar shows the slug. Subsequent API calls then use the
    // slug directly. Best-effort — no-op when slug == fetched id.
    async _normaliseActiveProfileToCanonical(token) {
      if (!token) return;
      try {
        const r = await fetch(`/api/profiles/${encodeURIComponent(token)}`);
        if (!r.ok) return;
        const p = await r.json();
        if (!p || !p.id) return;
        if (p.id === token) return;  // already canonical
        this.activeProfileId = p.id;
        // Replace the URL hash without adding to history — the user
        // typed the alias intentionally; we don't want their back
        // button to bounce to it.
        const newHash = '#/agent/' + encodeURIComponent(p.id);
        if (window.location.hash !== newHash) {
          history.replaceState(null, '', newHash);
        }
      } catch (_) { /* network error — fall through */ }
    },

    // ── Hidden-agent URL guard (4G.1) ────────────────────────────────────────
    async _guardHiddenAgentAccess(profileId) {
      // Direct URL navigation to /#/agent/{hidden-id} bypasses the
      // sidebar (which already filters hidden agents out). Without
      // this guard, anyone with the link could land directly in the
      // chat. We fetch the profile once, see if it's hidden, and if
      // the session hasn't unlocked the Hidden tab in Settings, we
      // redirect to Settings where the password prompt fires.
      if (!profileId) return;
      let unlocked = false;
      try {
        // One-shot handoff: when Settings unlocks the Agents section
        // and redirects here, it sets agents_unlock_handoff. We
        // consume-and-clear it so a subsequent F5 of this chat page
        // re-bounces through Settings → re-prompt. Matches the
        // page-load-scoped re-auth model the user wants for F5.
        unlocked = sessionStorage.getItem('agents_unlock_handoff') === 'true';
        if (unlocked) {
          sessionStorage.removeItem('agents_unlock_handoff');
        }
      } catch (_) { unlocked = false; }
      if (unlocked) return;  // one-shot pass — F5 will re-prompt
      try {
        const r = await fetch(`/api/profiles/${encodeURIComponent(profileId)}`);
        if (!r.ok) return;  // 404 → just let normal "agent not found" flow
        const p = await r.json();
        if (!p || !p.hidden) return;  // not a hidden agent — no guard needed
        // Hidden + session not unlocked → bounce to Settings → Agents
        // → Hidden tab. The password prompt there will set the
        // sessionStorage flag so a subsequent navigation back to this
        // URL passes the guard.
        const next = encodeURIComponent(window.location.hash || '#/');
        window.location.href = `/settings#agents-hidden?next=${next}`;
      } catch (_) { /* network error — non-fatal, fall through */ }
    },

    // ── History ─────────────────────────────────────────────────────────────

    async loadHistory(profileId, beforeId = null) {
      if (this._historyLoading) return;
      this._historyLoading = true;
      try {
        const url = `/api/chat/${encodeURIComponent(profileId)}/history?limit=30`
          + (beforeId ? `&before_id=${beforeId}` : '');
        const r = await fetch(url);
        if (!r.ok) return;
        const data = await r.json();
        const msgs = data.messages || [];
        this._historyHasMore = data.has_more || false;

        if (!msgs.length) return;

        const el = this.$refs.messages;
        const prevScrollHeight = el ? el.scrollHeight : 0;

        // Prepend older messages.
        // User messages: may have been combined by the debouncer (rapid Enter presses
        //   join with \n) — split on \n back into individual bubbles.
        // Agent messages: server splits on \n\n before sending (merging short orphans),
        //   but stores the full text as one DB row — re-split here to match live view.
        const _splitAgentBubbles = (text) => {
          const raw = text.split(/\n\n+/).map(c => c.trim()).filter(Boolean);
          const out = [];
          for (const chunk of raw) {
            if (out.length && chunk.length < 30) {
              out[out.length - 1] += '\n\n' + chunk;
            } else {
              out.push(chunk);
            }
          }
          return out.length ? out : [text];
        };
        const mapped = msgs.flatMap(m => {
          const role = m.role === 'assistant' ? 'agent' : m.role;
          const { timeStr, dateKey } = this._tsToDisplay(m.timestamp || new Date());
          // skill_key from the DB tags the message to its tab thread.
          // null/missing = general chat (Messages tab).
          const skill_key = m.skill_key || null;
          // Reactions only attach to the FIRST split bubble (the one that
          // carries db_id == m.id). Splits don't have their own DB row.
          const reactions = m.reactions || {};
          // Quote-reply (Phase 4E): denormalised snapshot from the DB row.
          // Like reactions, only the FIRST split bubble carries the
          // reply-to fields — the splits inherit them naturally because
          // they share the same db_id, but the visual quote card only
          // makes sense above the first chunk.
          const reply_to_id = m.reply_to_id ?? null;
          const reply_to_text = m.reply_to_text ?? null;
          const reply_to_author = m.reply_to_author ?? null;
          if (role === 'user' && m.content && m.content.includes('\n')) {
            return m.content.split('\n')
              .filter(line => line.trim())
              .map((line, i) => ({
                id: i === 0 ? m.id : `${m.id}_${i}`,
                db_id: m.id,
                role,
                text: line,
                ts: timeStr,
                dateKey,
                skill_key,
                reactions: i === 0 ? reactions : {},
                reply_to_id: i === 0 ? reply_to_id : null,
                reply_to_text: i === 0 ? reply_to_text : null,
                reply_to_author: i === 0 ? reply_to_author : null,
              }));
          }
          if (role === 'agent' && m.content && m.content.includes('\n\n')) {
            return _splitAgentBubbles(m.content).map((chunk, i) => ({
              id: i === 0 ? m.id : `${m.id}_${i}`,
              db_id: m.id,
              role,
              text: chunk,
              ts: timeStr,
              dateKey,
              skill_key,
              reactions: i === 0 ? reactions : {},
              reply_to_id: i === 0 ? reply_to_id : null,
              reply_to_text: i === 0 ? reply_to_text : null,
              reply_to_author: i === 0 ? reply_to_author : null,
            }));
          }
          return [{
            id: m.id, db_id: m.id, role, text: m.content,
            ts: timeStr, dateKey, skill_key, reactions,
            reply_to_id, reply_to_text, reply_to_author,
          }];
        });
        // Dedupe — any DB id already represented in the current array
        // (e.g. from a real-time WS push that landed before history
        // fetch completed, or from a quick navigate-and-return) gets
        // skipped here. Without this, switching between agents and
        // back can produce visible duplicates of the same DB row.
        const _existingDbIds = new Set(
          this.messages.filter(m => m.db_id != null).map(m => m.db_id)
        );
        const _deduped = mapped.filter(m => m.db_id == null || !_existingDbIds.has(m.db_id));
        // Inject date separators within loaded batch, then merge with existing messages
        const mappedWithSeps = this._withSeparators(_deduped);
        // Also check boundary between last loaded message and first existing message
        const firstExisting = this.messages.find(m => m.type !== 'separator');
        const lastLoaded = [..._deduped].reverse().find(m => m.type !== 'separator');
        if (firstExisting && lastLoaded && firstExisting.dateKey && lastLoaded.dateKey
            && firstExisting.dateKey !== lastLoaded.dateKey) {
          // The existing messages already have their own separator at the top — keep it.
          // No extra separator needed at the join point.
        }
        this.messages = [...mappedWithSeps, ...this.messages];
        this._historyOldestId = msgs[0].id;   // oldest is first after reversal

        // On initial load, if the conversation ends with a user message (no reply yet),
        // mark it as not-seen. Otherwise, seen.
        if (!beforeId) {
          const lastMsg = [...mapped].reverse().find(m => m.type !== 'separator');
          if (lastMsg?.role === 'user') {
            this._lastUserMsgId = lastMsg.id;
            this._lastUserMsgSeen = false;
          } else if (lastMsg?.role === 'agent') {
            // Find the last user message and mark it seen, using the agent message timestamp
            const lastUser = [...mapped].reverse().find(m => m.type !== 'separator' && m.role === 'user');
            if (lastUser) {
              this._lastUserMsgId = lastUser.id;
              this._lastUserMsgSeen = true;
              this._seenAtLabel = lastMsg.ts ? 'Seen ' + lastMsg.ts : '';
            }
          }
        }

        // After prepend: restore scroll position so the view doesn't jump
        if (beforeId && el) {
          this.$nextTick(() => {
            el.scrollTop = el.scrollHeight - prevScrollHeight;
          });
        } else if (el) {
          // Initial load: scroll to bottom
          this.$nextTick(() => { el.scrollTop = el.scrollHeight; });
        }
      } catch (_) {
        // history unavailable — silently skip
      } finally {
        this._historyLoading = false;
      }
    },

    _setupTopObserver() {
      // Watch the sentinel div at the top of the message list.
      // When it becomes visible (user scrolled to top), load older messages.
      this.$nextTick(() => {
        const sentinel = this.$refs.topSentinel;
        if (!sentinel) return;
        this._topObserver = new IntersectionObserver((entries) => {
          if (entries[0].isIntersecting && this._historyHasMore && !this._historyLoading) {
            this.loadHistory(this.activeProfileId, this._historyOldestId);
          }
        }, { root: this.$refs.messages, threshold: 0.1 });
        this._topObserver.observe(sentinel);
      });
    },

    // ── WebSocket ───────────────────────────────────────────────────────────

    connect() {
      // Tear down any prior WS first. Without this, a re-entered connect()
      // (transient close + retry race, server restart, etc.) leaves the old
      // WebSocket alive long enough for the server to broadcast to BOTH
      // sockets — the old one's onmessage closure still resolves `this` to
      // this same Alpine instance and pushes a duplicate copy of the same
      // frame into the message list. Detach handlers + close explicitly so
      // the only listener wired to our state is the WS we're about to make.
      if (this.ws) {
        try {
          this.ws.onmessage = null;
          this.ws.onclose = null;
          this.ws.onerror = null;
          if (this.ws.readyState === WebSocket.OPEN ||
              this.ws.readyState === WebSocket.CONNECTING) {
            this.ws.close();
          }
        } catch (_) { /* old socket already torn down — fine */ }
      }
      const proto = location.protocol === 'https:' ? 'wss' : 'ws';
      this.ws = new WebSocket(`${proto}://${location.host}/ws/chat`);

      this.ws.onopen = () => {
        // If we were spinning through a restart, the new process just came
        // up. Clear the flag + drop a breadcrumb so the user knows it's safe.
        if (this.restartInFlight) {
          this.restartInFlight = false;
          this.addMessage('system', 'Ageri is back — your new skill is loaded.');
        }
        // Reconnect cleanup: drop any locally-cached "skill is running"
        // entries — they may be stale from a prior session whose `done`
        // event got lost on the way (closed-WS race). The server is the
        // authority; if a skill is *actually* still running it'll re-emit
        // skill_run_active and the timer will restore.
        if (Object.keys(this._skillRunStartByKey).length > 0) {
          this._skillRunStartByKey = {};
        }
      };

      this.ws.onmessage = (e) => {
        const data = JSON.parse(e.data);
        // Helper: true when this frame belongs to the currently-visible profile
        // (or when the frame has no profile_id — legacy/broadcast frames).
        const forActive = !data.profile_id || data.profile_id === this.activeProfileId;
        if (data.type === 'agent_presence_updated') {
          if (data.profile_id) this.presenceMap[data.profile_id] = data.presence;
          // Sync profile status_message dots too
          const prof = this.profiles.find(p => p.id === data.profile_id);
          if (prof) prof._presence = data.presence;
        } else if (data.type === 'unread_state') {
          // Server-side replay of unread badges so they survive a browser
          // refresh. When data.replace is true, we REPLACE local
          // unreadCounts entirely (not merge) — profiles not in
          // data.counts implicitly become 0. This lets the server clear
          // stale badges from old client state. Older builds that
          // didn't send replace=true keep merge semantics for safety.
          if (data.counts && typeof data.counts === 'object') {
            const next = data.replace ? {} : { ...this.unreadCounts };
            for (const [pid, count] of Object.entries(data.counts)) {
              if (pid === this.activeProfileId) continue;  // about to be marked read
              if (count > 0) next[pid] = count;
              // count == 0 simply doesn't carry over (effectively cleared)
            }
            this.unreadCounts = next;
          }
        } else if (data.type === 'reaction_updated') {
          // Phase 4E — agent or remote tab toggled a reaction. Apply locally.
          // Race fix: when an agent reacts to the user's *current* message,
          // this event can arrive BEFORE message_ids assigns the db_id, so
          // the lookup misses. Buffer the reaction; message_ids handler
          // drains the buffer when it learns the new id.
          if (forActive && data.message_id != null) {
            const target = this.messages.find(m => m.db_id === data.message_id);
            if (target) {
              target.reactions = data.reactions || {};
            } else {
              this._pendingReactions = this._pendingReactions || {};
              this._pendingReactions[data.message_id] = data.reactions || {};
            }
          }
        } else if (data.type === 'agent_bio_regenerated') {
          // Async re-render completed — update the modal in place if
          // it's still showing this profile. The broadcast carries
          // either a native render (with `language` set to the user's
          // language) or an English render (with `bio_public_en`). We
          // patch whichever fields the broadcast includes — the other
          // cache stays as-is until its own re-render fires.
          if (this.profileModal?.id === data.profile_id) {
            if (this.profileModalBio) {
              const patch = { ...this.profileModalBio, regenerating: false };
              const isEnglish = (data.language || '').toLowerCase()
                ? false
                : !!data.bio_public_en;
              if (data.bio_public_en) {
                patch.bio_public_en = data.bio_public_en;
              }
              if (data.bio_public && !isEnglish) {
                patch.bio_public = data.bio_public;
                patch.bio_public_lang = data.language || '';
              }
              this.profileModalBio = patch;
            }
            this.profileModalAboutExpanded = false;
          }
          this.profileModalRegenerating = false;
          if (data.ok === false) {
            this.addMessage('system', data.error || 'Bio regeneration failed.');
          }
        } else if (data.type === 'agent_bio_refreshed') {
          // Monthly bio refresh applied — only dynamic strands change
          // (frozen identity is never edited). One quiet system message;
          // the user can open the profile modal to see the new bio.
          if (data.profile_id === this.activeProfileId && data.notification) {
            this.addMessage('system', data.notification);
          }
        } else if (data.type === 'agent_birthday_upcoming') {
          // Eve-of-birthday banner. Pin to the active chat as a system
          // message so it's visible regardless of which tab they're on,
          // and stash the per-profile flag so a small badge can render
          // on that profile's avatar in the sidebar through tomorrow.
          if (data.profile_id && data.notification) {
            this.birthdayMarks = this.birthdayMarks || {};
            this.birthdayMarks[data.profile_id] = { kind: 'eve', age: data.turning_age };
            if (data.profile_id === this.activeProfileId) {
              this.addMessage('system', data.notification);
            }
          }
        } else if (data.type === 'agent_birthday_today') {
          if (data.profile_id && data.notification) {
            this.birthdayMarks = this.birthdayMarks || {};
            this.birthdayMarks[data.profile_id] = { kind: 'today', age: data.new_age };
            if (data.profile_id === this.activeProfileId) {
              this.addMessage('system', data.notification);
            }
            // Also reflect the bumped age in the local profile row so the
            // header/details refresh without a reload.
            const prof = this.profiles.find(p => p.id === data.profile_id);
            if (prof && data.new_age) prof.agent_age = data.new_age;
          }
        } else if (data.type === 'agent_archetype_changed') {
          // Phase 5 — backend applied an archetype shift (upgrade or drift).
          // Update the profile's local archetype so the chat UI reflects the
          // new label, then drop a system message into the active thread so
          // the user sees the change happened.
          if (data.profile_id) {
            const prof = this.profiles.find(p => p.id === data.profile_id);
            if (prof) prof.archetype = data.new_archetype;
            if (data.profile_id === this.activeProfileId && data.notification) {
              this.addMessage('system', data.notification);
            }
          }
        } else if (data.type === 'agent_affect_decay') {
          // Phase 5 — quiet notification when liking/disliking decay crosses
          // a tier boundary (e.g. close → warm during long absence). Silent
          // when only sub-tier drift happened.
          if (data.profile_id === this.activeProfileId && data.notification) {
            this.addMessage('system', data.notification);
          }
        } else if (data.type === 'user_status_updated') {
          this._applyUserStatus(data.status);
        } else if (data.type === 'wizard_started') {
          this.wizardActive = true;
          this.wizardMode = data.mode || 'agent';
          this.wizardAcceptingChatInput = false;
          this._galleryActionLocked = {};
          // Clear history so wizard conversation is not mixed with casual chat history
          if (this.activeProfileId === 'ageri') {
            this.messages = [];
            this._historyOldestId = null;
            this._historyHasMore = false;
          }
        } else if (data.type === 'wizard_ended') {
          this.wizardActive = false;
          this.wizardMode = null;
          this.wizardCreatingName = "";
          this.wizardRerolling = false;
          this.wizardAcceptingChatInput = false;
          this._galleryActionLocked = {};
          this.stopCreatingTick();
          this._wizardMessagesSnapshot = null;
          if (this.activeProfileId === 'ageri') {
            // Wizard cards (bio gallery, etc.) are transient WS sends with
            // no DB row. loadHistory() prepends from DB without clearing,
            // so without this reset they linger after cancel/finish. Wipe
            // the in-memory list before reloading so only persisted
            // messages remain.
            this.messages = [];
            this._historyOldestId = null;
            this._historyHasMore = false;
            this.loadHistory('ageri');
            if (data.breadcrumb) {
              this.addMessage('system', data.breadcrumb);
            }
          }
        } else if (data.type === 'skill_activated') {
          this.activeSkillMap = {
            ...this.activeSkillMap,
            [data.profile_id]: { key: data.skill_key, name: data.skill_name, input_mode: data.input_mode },
          };
          // Auto-switch to the skill's tab when it becomes active for the
          // current profile — but NOT on connect-time state replay (server
          // marks those with replay=true). On page refresh we default to
          // the Messages tab; the user clicks the skill tab when they want
          // to resume that thread.
          if (data.profile_id === this.activeProfileId && !data.replay) {
            this.activeChatTab = data.skill_key;
          }
        } else if (data.type === 'skill_needs_config') {
          // Backend intercepted the activate because required config is
          // missing. Pop the editor; on save, re-send skill_activate with
          // config_ready=true so the backend skips the probe the second time.
          const pid = data.profile_id;
          const key = data.skill_key;
          const name = data.skill_name || key;
          this.openConfigEditor(key, name, () => {
            this.ws.send(JSON.stringify({
              type: 'skill_activate',
              profile_id: pid,
              skill_key: key,
              config_ready: true,
            }));
          });
        } else if (data.type === 'skill_deactivated') {
          const updated = { ...this.activeSkillMap };
          delete updated[data.profile_id];
          this.activeSkillMap = updated;
          // Skill closed → snap the tab back to general Messages.
          if (data.profile_id === this.activeProfileId) {
            this.activeChatTab = 'messages';
          }
        } else if (data.type === 'agent_sleeping') {
          if (forActive) {
            this.wakePrompt = { profile_id: data.profile_id, agent_name: data.agent_name };
          }
        } else if (data.type === 'agent_affect_updated') {
          // Affect tier changed (liking/disliking write or block
          // transition). Patch the matching profile in-place so the
          // sidebar crown / tension dot / block treatment updates
          // without a full reload. Also patches profileModalBio if
          // the modal is open on this profile, so the hero pills
          // refresh without re-fetch.
          const idx = (this.profiles || []).findIndex(p => p.id === data.profile_id);
          if (idx >= 0) {
            this.profiles[idx] = {
              ...this.profiles[idx],
              liking_label: data.liking_label || '',
              disliking_label: data.disliking_label || '',
              is_blocked: !!data.is_blocked,
            };
          }
          if (this.profileModal?.id === data.profile_id && this.profileModalBio) {
            this.profileModalBio = {
              ...this.profileModalBio,
              liking_label: data.liking_label || '',
              disliking_label: data.disliking_label || '',
            };
          }
        } else if (data.type === 'agent_expiration_proposed') {
          // Agent narratively suggested wrapping up the relationship.
          // Stash by profile_id so the banner only shows on the matching
          // chat (and survives switching to another profile and back).
          this.expirationProposals = {
            ...this.expirationProposals,
            [data.profile_id]: {
              agent_name: data.agent_name,
              kind: data.kind,
              value: data.value,
              reason: data.reason,
              confidence: data.confidence,
              proposed_at: data.proposed_at,
            },
          };
        } else if (data.type === 'agent_expiration_reached') {
          // Date deadline tripped — show the end-of-life banner with
          // Hibernate / Archive / Carry on picks. Survives reload as
          // long as `lifecycle:expiration_hit_at` is in memory; the
          // bootstrap fetch can rehydrate this on connect (TODO).
          this.expirationReached = {
            ...this.expirationReached,
            [data.profile_id]: {
              agent_name: data.agent_name,
              deadline: data.deadline,
            },
          };
        } else if (data.type === 'agent_blocked') {
          // Affect-driven gate absorbed the message — agent is in
          // cold-tier silent skip or block-tier cooldown. Surface a
          // muted pill in the chat so the user sees their message
          // landed but the agent isn't responding. Does NOT bump the
          // silent-counter (that's for the agent's own structured
          // empty-reply choice; this is relationship state).
          if (forActive) {
            this.thinking = false;
            this.agentAway = false;
            const text = data.text || 'Quiet right now.';
            this.addMessage('system', text);
          }
        } else if (data.type === 'agent_silent') {
          // Agent chose to stay silent (structured output emitted empty reply).
          // Tier 1: inline system message + clear thinking/away indicators.
          // Tier 2: after N consecutive silences, surface the silentPrompt
          //         popup (parallel to wakePrompt for sleeping agents).
          if (forActive) {
            this.thinking = false;
            this.agentAway = false;
            const name = this.activeProfileName || 'They';
            this.addMessage('system', `${name} saw your message but didn't reply right now.`);
            // Increment per-profile silent counter
            const pid = data.profile_id;
            const counts = { ...(this._silentCounts || {}) };
            counts[pid] = (counts[pid] || 0) + 1;
            this._silentCounts = counts;
            // Tier 2 — popup at threshold (3 in a row)
            if (counts[pid] >= 3) {
              this.silentPrompt = {
                profile_id: pid,
                agent_name: name,
                count: counts[pid],
              };
            }
          }
        } else if (data.type === 'agent_away') {
          if (forActive) this.agentAway = true;
        } else if (data.type === 'thinking') {
          if (forActive) { this.thinking = true; this.agentAway = false; }
        } else if (data.type === 'skill_run_active') {
          // WS reconnect replay — a skill is still running server-side for
          // this profile. Restore the per-tab timer from the backend's
          // started_at_ms (NOT Date.now() — the run started before the
          // refresh, possibly minutes ago). Also set thinking=true so the
          // running indicator shows again on the active profile.
          if (data.skill_key && data.started_at_ms) {
            this._skillRunStartByKey = {
              ...this._skillRunStartByKey,
              [data.skill_key]: { start: data.started_at_ms, profileId: data.profile_id || null },
            };
            if (forActive) {
              this.thinking = true;
              this.agentAway = false;
            }
          }
        } else if (data.type === 'message_ids') {
          // Server persisted the turn — assign DB ids so edit/delete work.
          // Server is also the source of truth for skill_key: it knows
          // whether the message was routed through a skill or stayed in
          // the general flow. Override our optimistic client-side guess.
          if (forActive && data.user_msg_id) {
            const idx = [...this.messages].map((m,i)=>[m,i]).reverse().find(([m])=>m.role==='user' && !m.db_id);
            if (idx) {
              const [,i] = idx;
              const newSkillKey = (data.skill_key === undefined) ? this.messages[i].skill_key : (data.skill_key || null);
              const patch = { ...this.messages[i], db_id: data.user_msg_id, skill_key: newSkillKey };
              // Race fix: drain any reaction that arrived before this id was known.
              if (this._pendingReactions && this._pendingReactions[data.user_msg_id]) {
                patch.reactions = this._pendingReactions[data.user_msg_id];
                delete this._pendingReactions[data.user_msg_id];
              }
              this.messages[i] = patch;
            }
            this._pendingAgentDbId = data.agent_msg_id || null;
            this._pendingAgentSkillKey = (data.skill_key === undefined) ? null : (data.skill_key || null);
            // Phase 4E iter 2: agent quote-reply. Server tells us what
            // the agent's response is anchored to (if anything). Stash
            // for the FIRST agent bubble that addMessage creates next;
            // it gets cleared after applying so subsequent split chunks
            // don't all carry the quote card.
            if (data.agent_reply_to_id) {
              this._pendingAgentReplyTo = {
                db_id: data.agent_reply_to_id,
                text: data.agent_reply_to_text || null,
                role: data.agent_reply_to_author || null,
              };
            } else {
              this._pendingAgentReplyTo = null;
            }
          }
        } else if (data.type === 'message_seen') {
          // Agent read the message during response delay — show ✓✓ Seen before thinking starts.
          if (forActive && !this._lastUserMsgSeen) {
            this._lastUserMsgSeen = true;
            this._seenAtLabel = 'Seen ' + (data.seen_at || new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
          }
        } else if (data.type === 'response') {
          // Reset the consecutive-silent counter — they replied, the streak
          // is broken (silentPrompt also clears if it was open).
          if (data.profile_id && this._silentCounts && this._silentCounts[data.profile_id]) {
            const counts = { ...this._silentCounts };
            delete counts[data.profile_id];
            this._silentCounts = counts;
          }
          if (this.silentPrompt && this.silentPrompt.profile_id === data.profile_id) {
            this.silentPrompt = null;
          }
          if (forActive) {
            this.thinking = false; this.agentAway = false;
            // Server tells us which skill (if any) produced this response.
            // null/undefined → general chat (Messages tab).
            this.addMessage('agent', data.text, null, null, data.skill_key || null);
            // During the agent-creation wizard, a chat-style response is
            // Ageri asking for chat input (NAME, ALIAS, SUBJECT, etc.).
            // Re-enable the message input so the user can reply. Cards
            // (handled below) explicitly leave this off.
            if (this.wizardActive) this.wizardAcceptingChatInput = true;
          } else {
            // Response arrived for a background profile — add unread badge.
            this.unreadCounts = {
              ...this.unreadCounts,
              [data.profile_id]: (this.unreadCounts[data.profile_id] || 0) + 1,
            };
          }
          // Clear the per-tab run timer for whatever skill produced this
          // (or all skills if it was untagged general chat). Without this
          // the timer keeps ticking after a successful run.
          this._clearSkillRunForResponse(data.skill_key);
        } else if (data.type === 'done') {
          if (forActive) {
            this.thinking = false; this.agentAway = false;
            if (!this._lastUserMsgSeen) {
              this._lastUserMsgSeen = true;
              this._seenAt = new Date();
              this._seenAtLabel = 'Seen ' + this._seenAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            }
          }
          // `done` is sent on cancel / error / completion when the server
          // didn't have a content payload to ship. Same cleanup.
          this._clearSkillRunForResponse(data.skill_key);
        } else if (data.type === 'error') {
          if (forActive) {
            this.thinking = false; this.agentAway = false;
            if (!this._lastUserMsgSeen) {
              this._lastUserMsgSeen = true;
              this._seenAt = new Date();
              this._seenAtLabel = 'Seen ' + this._seenAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            }
            this.showError(data.message || 'Something went wrong. Please try again.');
          }
          this._clearSkillRunForResponse(data.skill_key);
        } else if (data.type === 'card') {
          this.thinking = false;
          this.handleCardMessage(data.card);
          // Cards (gallery, float_select, float_confirm) are interacted
          // with via their buttons — not via the chat box. Disable the
          // input until Ageri sends another chat-style response.
          if (this.wizardActive) this.wizardAcceptingChatInput = false;
        } else if (data.type === 'verification_request') {
          // A browser-automation skill running on the headless server
          // hit a 2FA / OTP / captcha prompt and is asking the user to
          // type the value. The card lands in the OWNER profile's
          // stream (whichever agent's skill triggered it). If the user
          // is currently viewing that profile, the card renders inline
          // immediately. Otherwise it's stashed in
          // _pendingVerifications[profile_id] and shown the moment the
          // user switches to that profile, plus a badge nudges them to
          // switch. Idempotent: duplicate frames (e.g. WS reconnect
          // replay) are dropped via _verificationsSeen.
          if (data.request_id && !this._verificationsSeen[data.request_id]) {
            this._verificationsSeen[data.request_id] = true;
            const target = data.profile_id || '';
            const card = {
              id: ++this.msgCounter,
              role: 'agent',
              type: 'verification',
              request_id: data.request_id,
              profile_id: target,
              prompt: data.prompt || 'Verification needed',
              screenshot_b64: data.screenshot_b64 || null,
              answer: '',
              submitted: false,
              ts: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
            };
            // Always remember the card per-profile so a profile switch
            // surfaces it.
            if (!this._pendingVerifications[target]) {
              this._pendingVerifications[target] = [];
            }
            this._pendingVerifications[target].push(card);
            if (target === this.activeProfileId) {
              this.messages.push(card);
              this.$nextTick(() => {
                const el = this.$refs.messages;
                if (el) el.scrollTop = el.scrollHeight;
              });
            } else if (target) {
              // Nudge the user toward the right profile via the unread
              // badge — same affordance proactive messages use for
              // background-profile arrivals.
              this.unreadCounts = {
                ...this.unreadCounts,
                [target]: (this.unreadCounts[target] || 0) + 1,
              };
            }
          }
        } else if (data.type === 'card_update') {
          this.handleCardUpdate(data);
        } else if (data.type === 'agent_status_updated') {
          const p = this.profiles.find(p => p.id === data.profile_id);
          if (p) p.status_message = data.status_message || '';
        } else if (data.type === 'profiles_updated') {
          this.renderProfiles(data.profiles || []);
        } else if (data.type === 'proactive') {
          if (data.profile_id === this.activeProfileId) {
            // Active profile — show message inline
            this.addMessage('agent', data.text);
          } else {
            // Background profile — increment badge
            this.unreadCounts = {
              ...this.unreadCounts,
              [data.profile_id]: (this.unreadCounts[data.profile_id] || 0) + 1,
            };
          }
          // Native desktop notification when browser is minimized or tab is hidden
          if (document.visibilityState !== 'visible' && 'Notification' in window && Notification.permission === 'granted') {
            const senderName = data.profile_name || data.profile_id;
            const n = new Notification(senderName, {
              body: data.text,
              icon: `/avatar/${data.profile_id}?t=${Date.now()}`,
              tag: `ageri-proactive-${data.profile_id}`,  // replaces previous notification from same agent
            });
            n.onclick = () => { window.focus(); n.close(); };
          }
        }
      };

      this.ws.onclose = () => {
        setTimeout(() => this.connect(), 2000);
      };

      this.ws.onerror = () => {
        this.ws.close();
      };
    },

    // ── Agent actions ────────────────────────────────────────────────────────

    createAgent() {
      // Open the new-agent stepped wizard. Step 1 is the archetype picker
      // — users typically think "I want a friend / tutor / colleague"
      // first, so we capture that before any other details. Step 2 is
      // the structured form (name etc.). Backend wizard kicks in only
      // after the form submits, with archetype + names pre-filled.
      const ageriId = '{{ (profiles | selectattr("id", "equalto", "ageri") | list | first).id if (profiles | selectattr("id", "equalto", "ageri") | list) else (profiles[0].id if profiles else "ageri") }}';
      const ageriName = '{{ (profiles | selectattr("id", "equalto", "ageri") | list | first).name if (profiles | selectattr("id", "equalto", "ageri") | list) else (profiles[0].name if profiles else "Ageri") }}';
      this.selectProfile(ageriId, ageriName, { skipHistory: true });
      this.activeChatTab = 'messages';
      // Clear the message list so the empty-state (where the wizard
      // panels render) shows — without this, prior Ageri-thread
      // messages would suppress it.
      this.messages = [];
      this._historyOldestId = null;
      this._historyHasMore = false;
      this.wizardStep = 'archetype';
      this.wizardArchetype = "";
      this.wizardFormFirstName = "";
      this.wizardFormAge = "";
      this.wizardFormGender = "";
      this.wizardFormCountry = "";
      this.wizardFormLocation = "";
      // Pre-fill priority chain (most-trusted first):
      //   1. Server-injected language (per-profile dominant from convos,
      //      else onboarding global) — what we've actually learned
      //   2. Browser navigator.language — fresh OS-level signal, mapped
      //      to a friendly name. Kicks in when 1 is empty (fresh install,
      //      no convos yet, onboarding skipped).
      //   3. Empty — placeholder examples take over
      // User can always edit/clear regardless of which one fired.
      this.wizardFormNativeLang = this._userLanguage || this._browserLanguage() || "";
      this.wizardFormSecondLangs = [];
      this._secondLangInput = "";
      // Fresh wizard — drop ANY leftover state from a prior wizard whose
      // wizard_ended event was missed (server bug, WS blip, etc.). Without
      // this, the new wizard would inherit "Creating Hà…" in the progress
      // card from the previous run that never cleaned up properly.
      this.wizardCreatingName = "";
      this._wizardMessagesSnapshot = null;
      // Light up the "Creating new agent" banner immediately for the
      // frontend archetype + form steps. The backend wizard_started
      // frame will re-affirm these flags after submitWizardForm fires;
      // setting them now means the banner is visible from step 1.
      this.wizardActive = true;
      this.wizardMode = 'agent';
    },

    creatingHint() {
      // Reads _creatingTick so Alpine re-renders the line when it changes.
      // Kept generic — specific task names ("Researching culture…") read as
      // implementation noise to the user.
      const hints = [
        "Working on it…",
        "Hang tight…",
        "Almost there…",
        "Almost done…",
      ];
      return hints[this._creatingTick % hints.length];
    },

    startCreatingTick() {
      this.stopCreatingTick();
      this._creatingTickTimer = setInterval(() => {
        this._creatingTick = (this._creatingTick + 1) % 1000;
      }, 3000);
    },
    stopCreatingTick() {
      if (this._creatingTickTimer) {
        clearInterval(this._creatingTickTimer);
        this._creatingTickTimer = null;
      }
    },

    // BCP-47 → friendly name map. Used to derive a sensible wizard
    // pre-fill from navigator.language when the server has no signal yet.
    // Covers ~50 common languages; unknown codes fall through to empty.
    LANG_CODE_MAP: {
      en: 'English', vi: 'Vietnamese', ja: 'Japanese', ko: 'Korean',
      zh: 'Chinese', es: 'Spanish', fr: 'French', de: 'German', it: 'Italian',
      pt: 'Portuguese', ru: 'Russian', ar: 'Arabic', hi: 'Hindi', th: 'Thai',
      id: 'Indonesian', ms: 'Malay', tl: 'Tagalog', bn: 'Bengali', ta: 'Tamil',
      te: 'Telugu', mr: 'Marathi', gu: 'Gujarati', pa: 'Punjabi', ur: 'Urdu',
      fa: 'Persian', tr: 'Turkish', pl: 'Polish', nl: 'Dutch', sv: 'Swedish',
      no: 'Norwegian', nb: 'Norwegian', nn: 'Norwegian', da: 'Danish',
      fi: 'Finnish', el: 'Greek', cs: 'Czech', ro: 'Romanian', hu: 'Hungarian',
      uk: 'Ukrainian', he: 'Hebrew', am: 'Amharic', sw: 'Swahili', yo: 'Yoruba',
      ig: 'Igbo', ha: 'Hausa', zu: 'Zulu', af: 'Afrikaans', my: 'Burmese',
      km: 'Khmer', lo: 'Lao', mn: 'Mongolian',
    },

    _browserLanguage() {
      try {
        const code = (navigator.language || '').toLowerCase().split('-')[0];
        return this.LANG_CODE_MAP[code] || '';
      } catch (_) {
        return '';
      }
    },

    addSecondLangFromInput() {
      const raw = (this._secondLangInput || "").trim().replace(/,$/, "").trim();
      if (!raw) return;
      // De-dupe case-insensitively. If it matches the native language we
      // also skip — same language can't be both native and second.
      const lower = raw.toLowerCase();
      const native = (this.wizardFormNativeLang || "").trim().toLowerCase();
      if (lower === native) { this._secondLangInput = ""; return; }
      const seen = (this.wizardFormSecondLangs || []).map(l => l.toLowerCase());
      if (seen.includes(lower)) { this._secondLangInput = ""; return; }
      this.wizardFormSecondLangs = [...this.wizardFormSecondLangs, raw];
      this._secondLangInput = "";
    },

    removeSecondLang(lang) {
      this.wizardFormSecondLangs = this.wizardFormSecondLangs.filter(l => l !== lang);
    },

    // Per-archetype minimum age. Mirrors wizard.ARCHETYPE_MIN_AGE on the
    // back-end — defence-in-depth: if a request bypasses the form, the
    // server clamps. Authority archetypes (mentor/tutor/colleague) want a
    // believable seniority runway; peer archetypes (friend/companion/
    // acquaintance/custom) accept the global floor of 10.
    ageMinForArchetype(archetype) {
      const a = (archetype || "").toLowerCase();
      if (a === "mentor")    return 28;
      if (a === "tutor")     return 21;
      if (a === "colleague") return 22;
      return 10;
    },

    pickArchetype(key) {
      // Step 1 → Step 2 transition. Capture archetype, advance.
      this.wizardArchetype = key;
      this.wizardStep = 'form';
      // Focus first-name input on the next tick after the form renders.
      this.$nextTick(() => {
        if (this.$refs.wizardFirstNameInput) {
          this.$refs.wizardFirstNameInput.focus();
        }
      });
    },

    submitWizardForm() {
      // Drain any pending text in the second-languages tag input so users
      // who typed a language but didn't press Enter still get it submitted.
      this.addSecondLangFromInput();
      // Single-field name model: this is the DISPLAY name. The bio gallery
      // generates a plausible full family name + writes it into the bio.
      // Backend keeps display name as `first_name`; `last_name` ships empty.
      const first = (this.wizardFormFirstName || "").trim();
      if (!first) return;
      const ageStr = (this.wizardFormAge || "").toString().trim();
      const ageNum = parseInt(ageStr, 10);
      const ageMin = this.ageMinForArchetype(this.wizardArchetype);
      if (!ageStr || isNaN(ageNum) || ageNum < ageMin || ageNum > 80) return;
      const archetype = this.wizardArchetype || "";
      const gender = this.wizardFormGender || "";
      const country = (this.wizardFormCountry || "").trim();
      const location = (this.wizardFormLocation || "").trim();
      const nativeLang = (this.wizardFormNativeLang || "").trim();
      const secondLangs = (this.wizardFormSecondLangs || []).filter(l => l && l.trim());
      const ageriId = '{{ (profiles | selectattr("id", "equalto", "ageri") | list | first).id if (profiles | selectattr("id", "equalto", "ageri") | list) else (profiles[0].id if profiles else "ageri") }}';
      this.wizardStep = null;
      this.wizardArchetype = "";
      // Capture the display name BEFORE clearing — the creation-progress
      // card needs it to render "Creating Sammy…" during the bio-gen gap.
      this.wizardCreatingName = first;
      this.wizardFormFirstName = "";
      this.wizardFormAge = "";
      this.wizardFormGender = "";
      this.wizardFormCountry = "";
      this.wizardFormLocation = "";
      this.wizardFormNativeLang = "";
      this.wizardFormSecondLangs = [];
      this._secondLangInput = "";
      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
      this.thinking = true;
      this.ws.send(JSON.stringify({
        action: 'create_agent',
        profile_id: ageriId,
        first_name: first,
        last_name: "",
        archetype: archetype,
        age: ageNum,
        gender: gender,
        country: country,
        location: location,
        native_language: nativeLang,
        second_languages: secondLangs,
      }));
    },

    cancelWizardForm() {
      this.wizardStep = null;
      this.wizardArchetype = "";
      this.wizardFormFirstName = "";
      this.wizardFormAge = "";
      this.wizardFormGender = "";
      this.wizardFormCountry = "";
      this.wizardFormLocation = "";
      this.wizardFormNativeLang = "";
      this.wizardFormSecondLangs = [];
      this._secondLangInput = "";
      this.wizardCreatingName = "";
      this._wizardMessagesSnapshot = null;
      // The frontend pre-flighted the banner in createAgent(); since the
      // backend wizard never started, clear it ourselves.
      this.wizardActive = false;
      this.wizardMode = null;
      // wizard_started cleared messages so the wizard chat doesn't bleed
      // into casual chat history. The backend-cancel path reloads via the
      // wizard_ended WS frame; this pre-flight path never hits the server,
      // so we have to reload Ageri's history ourselves — otherwise the
      // user is staring at an empty chat after Discard.
      if (this.activeProfileId === 'ageri') {
        this.loadHistory('ageri');
      }
    },

    // ── @-mention autocomplete ──────────────────────────────────────────
    // Triggers when the user types @ at start-of-word in the message
    // input. Detects the `@<partial>` token, opens a dropdown of matching
    // agents (firstname + aliases). Keyboard nav handled in
    // _handleInputKeydown; pick inserts @<chosen-alias> at cursor.

    _updateMentionState(el) {
      if (!el) { this.mentionOpen = false; return; }
      const cursor = el.selectionStart;
      const text = el.value || "";
      // Walk backward from cursor: stop at whitespace, find @
      let i = cursor - 1;
      let atIdx = -1;
      while (i >= 0) {
        const ch = text[i];
        if (ch === '@') { atIdx = i; break; }
        if (/\s/.test(ch)) break;
        i--;
      }
      if (atIdx === -1) { this.mentionOpen = false; return; }
      // Char before @ must be whitespace OR start-of-input
      const before = atIdx > 0 ? text[atIdx - 1] : "";
      if (before && !/\s/.test(before)) { this.mentionOpen = false; return; }
      // Extract partial query — anything between @ and cursor that's alphanumeric/underscore
      const query = text.substring(atIdx + 1, cursor);
      if (query.includes(' ') || query.includes('\n')) {
        this.mentionOpen = false;
        return;
      }
      this.mentionQuery = query;
      this.mentionAnchor = atIdx;
      const candidates = this.mentionCandidates;
      if (candidates.length === 0) { this.mentionOpen = false; return; }
      this.mentionOpen = true;
      // Reset highlight if it now points past the candidate list
      if (this.mentionSelectedIdx >= candidates.length) this.mentionSelectedIdx = 0;
    },

    get mentionCandidates() {
      const q = (this.mentionQuery || "").toLowerCase();
      const seen = new Set();
      const results = [];
      for (const p of (this.profiles || [])) {
        if (!p || !p.id || p.id === 'ageri' && p.archetype === 'default' && false) continue;  // include all
        const tokens = [];
        if (p.name) tokens.push(p.name.toLowerCase());
        for (const a of (p.aliases || [])) {
          if (a) tokens.push(a.toLowerCase());
        }
        let prefix = false;
        let matched = false;
        for (const t of tokens) {
          if (!t) continue;
          if (q && t.startsWith(q)) { matched = true; prefix = true; break; }
          if (q && t.includes(q)) { matched = true; }
          if (!q) { matched = true; }  // empty query → show everyone
        }
        if (matched && !seen.has(p.id)) {
          seen.add(p.id);
          results.push({
            id: p.id,
            name: p.name,
            aliases: p.aliases || [],
            archetype: p.archetype || "",
            color_index: p.color_index,
            _prefix: prefix,
          });
        }
      }
      results.sort((a, b) => {
        if (a._prefix !== b._prefix) return a._prefix ? -1 : 1;
        return (a.name || "").localeCompare(b.name || "");
      });
      return results.slice(0, 8);  // cap dropdown size
    },

    // ── Slash-command autocomplete ────────────────────────────────────
    //
    // Mirrors the @-mention pattern: _updateSlashCmdState fires on
    // input/keyup/click, cmdCandidates is a computed (filtered + sorted)
    // list, _pickSlashCmd inserts the chosen command at the leading "/".

    async _loadProfileCommands(profileId) {
      if (!profileId) return [];
      if (this._cmdCacheByProfile[profileId]) return this._cmdCacheByProfile[profileId];
      // Dedupe concurrent loads
      if (this._cmdLoadInflight[profileId]) return this._cmdLoadInflight[profileId];
      const p = (async () => {
        try {
          const r = await fetch('/api/profiles/' + encodeURIComponent(profileId) + '/commands');
          if (!r.ok) return [];
          const data = await r.json();
          return data.commands || [];
        } catch (e) { return []; }
      })();
      this._cmdLoadInflight[profileId] = p;
      const commands = await p;
      this._cmdCacheByProfile[profileId] = commands;
      delete this._cmdLoadInflight[profileId];
      return commands;
    },

    _updateSlashCmdState(el) {
      if (!el) { this.cmdOpen = false; return; }
      const cursor = el.selectionStart;
      const text = el.value || "";
      const stripped = text.replace(/^\s+/, "");
      if (!stripped.startsWith('/')) { this.cmdOpen = false; return; }
      const slashIdx = text.indexOf('/');
      if (slashIdx === -1 || cursor <= slashIdx) { this.cmdOpen = false; return; }
      // cmdQuery is everything from "/" up to the cursor. We DON'T use the
      // first space as a terminator because the full form may include a
      // space ("/invoice create"). The dropdown closes naturally when the
      // typed prefix no longer matches any candidate's `full` (i.e. the
      // user has typed past the command into args).
      const typed = text.substring(slashIdx, cursor);
      if (typed.includes('\n')) { this.cmdOpen = false; return; }
      // Pre-load this profile's commands (fire-and-forget; cache fills in)
      this._loadProfileCommands(this.activeProfileId);
      this.cmdQuery = typed.toLowerCase();
      const cands = this.cmdCandidates;
      this.cmdOpen = cands.length > 0;
      if (this.cmdSelectedIdx >= cands.length) this.cmdSelectedIdx = 0;
    },

    get cmdCandidates() {
      const all = this._cmdCacheByProfile[this.activeProfileId] || [];
      const q = (this.cmdQuery || "").toLowerCase();
      if (!q || q === "/") return all.slice(0, 8);
      // Prefix-match against the `full` string ("/invoice create"). The
      // user types from the start of the slash-head, so prefix is right.
      const filtered = all.filter(c => c.full.toLowerCase().startsWith(q));
      return filtered.slice(0, 8);
    },

    _pickSlashCmd(c) {
      if (!c) return;
      const el = this.$refs.input;
      if (!el) return;
      const text = el.value || "";
      const cursor = el.selectionStart;
      const slashIdx = text.indexOf('/');
      if (slashIdx === -1) { this.cmdOpen = false; return; }
      // Replace EVERYTHING from "/" through the cursor with the full command.
      // Anything past the cursor (user-typed args, or trailing text from
      // a paste) is preserved verbatim. This avoids the multi-word bug
      // where the first space inside the picked form ("/invoice create")
      // collides with the user's partial subcommand typing.
      const before = text.substring(0, slashIdx);
      const after = text.substring(cursor);
      const inserted = c.full + (after.startsWith(' ') ? '' : ' ');
      this.input = before + inserted + after;
      this.cmdOpen = false;
      this.cmdSelectedIdx = 0;
      this.$nextTick(() => {
        const newCursor = before.length + inserted.length;
        el.focus();
        el.setSelectionRange(newCursor, newCursor);
        this.autoResize(el);
      });
    },

    _pickMention(candidate) {
      if (!candidate) return;
      const el = this.$refs.input;
      if (!el) return;
      const text = el.value || "";
      const cursor = el.selectionStart;
      // Prefer the explicit alias (curated, may be more memorable than
      // the slug); fall back to the profile id (which is already a
      // diacritic-preserving slug like "hà"); ultimate fallback uses
      // a Unicode-aware regex so non-ASCII names like "Hà" or "Mỹ"
      // don't get stripped to a single ASCII letter.
      const alias = (candidate.aliases && candidate.aliases[0])
        || candidate.id
        || (candidate.name || "").toLowerCase().replace(/[^\p{L}\p{N}]/gu, "")
        || "";
      if (!alias) { this.mentionOpen = false; return; }
      const before = text.substring(0, this.mentionAnchor);
      const after = text.substring(cursor);
      const inserted = "@" + alias + " ";
      this.input = before + inserted + after;
      this.mentionOpen = false;
      this.mentionSelectedIdx = 0;
      this.$nextTick(() => {
        const newCursor = before.length + inserted.length;
        el.focus();
        el.setSelectionRange(newCursor, newCursor);
        this.autoResize(el);
      });
    },

    _handleInputKeydown(e) {
      if (this.mentionOpen) {
        const candidates = this.mentionCandidates;
        if (e.key === 'ArrowDown') {
          e.preventDefault();
          this.mentionSelectedIdx = Math.min(this.mentionSelectedIdx + 1, candidates.length - 1);
          return;
        }
        if (e.key === 'ArrowUp') {
          e.preventDefault();
          this.mentionSelectedIdx = Math.max(this.mentionSelectedIdx - 1, 0);
          return;
        }
        if (e.key === 'Enter' || e.key === 'Tab') {
          const sel = candidates[this.mentionSelectedIdx];
          if (sel) {
            e.preventDefault();
            this._pickMention(sel);
            return;
          }
        }
        if (e.key === 'Escape') {
          e.preventDefault();
          this.mentionOpen = false;
          return;
        }
      }
      // Slash-command autocomplete — same key map. Mention takes priority
      // because @ is more specific than /; if both happened to open at
      // once (shouldn't, given the regex anchors), @-mention wins.
      if (this.cmdOpen) {
        const cands = this.cmdCandidates;
        if (e.key === 'ArrowDown') {
          e.preventDefault();
          this.cmdSelectedIdx = Math.min(this.cmdSelectedIdx + 1, cands.length - 1);
          return;
        }
        if (e.key === 'ArrowUp') {
          e.preventDefault();
          this.cmdSelectedIdx = Math.max(this.cmdSelectedIdx - 1, 0);
          return;
        }
        if (e.key === 'Enter' || e.key === 'Tab') {
          const sel = cands[this.cmdSelectedIdx];
          if (sel) {
            e.preventDefault();
            this._pickSlashCmd(sel);
            return;
          }
        }
        if (e.key === 'Escape') {
          e.preventDefault();
          this.cmdOpen = false;
          return;
        }
      }
      // Fall-through: default Enter-to-send behaviour (unchanged from inline).
      if (e.key === 'Enter') {
        if (this.sendMode === 'enter' && !e.shiftKey && !e.ctrlKey) {
          e.preventDefault();
          this.send();
        } else if (this.sendMode === 'ctrl-enter' && e.ctrlKey) {
          e.preventDefault();
          this.send();
        }
      }
    },

    createSkill() {
      // Mirror of createAgent(): switch to Ageri, flip the banner to "skill",
      // send the create_skill action. Backend maps this to
      // SkillRecordingIntegration.start() and emits wizard_started with
      // mode="skill".
      const ageriId = '{{ (profiles | selectattr("id", "equalto", "ageri") | list | first).id if (profiles | selectattr("id", "equalto", "ageri") | list) else (profiles[0].id if profiles else "ageri") }}';
      const ageriName = '{{ (profiles | selectattr("id", "equalto", "ageri") | list | first).name if (profiles | selectattr("id", "equalto", "ageri") | list) else (profiles[0].name if profiles else "Ageri") }}';
      this.selectProfile(ageriId, ageriName, { skipHistory: true });
      this.wizardActive = true;
      this.wizardMode = 'skill';
      this.$nextTick(() => {
        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
        this.thinking = true;
        this.ws.send(JSON.stringify({
          action: 'create_skill',
          profile_id: ageriId,
        }));
      });
    },

    selectProfile(id, name, opts = {}) {
      // Wizard message snapshot mechanic: bio gallery cards are transient
      // WS sends with no DB row, so when the user switches away from Ageri
      // mid-wizard the in-memory list is the only place they live. Stash
      // them on exit and restore on return so the wizard view is intact
      // across profile hops.
      const _wizardWasOnAgeri = (
        this.activeProfileId === 'ageri' &&
        this.wizardActive && this.wizardMode === 'agent'
      );
      const _wizardOwnsAgeri = (
        id === 'ageri' && this.wizardActive && this.wizardMode === 'agent'
      );
      if (_wizardWasOnAgeri && id !== 'ageri') {
        // Leaving Ageri with wizard active — snapshot the current
        // (Ageri-owned) message list so we can restore it on return.
        this._wizardMessagesSnapshot = [...this.messages];
      }
      // activeProfileName is a getter derived from activeProfileId — no separate set needed.
      this.activeProfileId = id;
      // A new profile has no in-flight request — clear any stale thinking/away indicator.
      this.thinking = false; this.agentAway = false;
      // Clear unread badge for this profile (locally + server-side so
      // the count survives a refresh — see /api/chat/<pid>/mark-read).
      if (this.unreadCounts[id]) {
        const counts = { ...this.unreadCounts };
        delete counts[id];
        this.unreadCounts = counts;
      }
      // Server-side mark-read — fire-and-forget, don't block the view switch.
      // 'ageri' has no agent messages on its own thread (it's the platform
      // persona) so it's still safe to call but a no-op.
      try {
        fetch(`/api/chat/${encodeURIComponent(id)}/mark-read`, {
          method: 'POST',
        }).catch(() => { /* network blip — badge will reappear on next reconnect; non-fatal */ });
      } catch (e) { /* ignore */ }
      // ALWAYS clear before loading. The previous "preserve when wizard
      // owns Ageri" branch had a bug: after the Ageri→Vy hop, messages
      // already contained Vy's history, so skipping the clear on Vy→Ageri
      // leaked Vy's chat into Ageri's view.
      this.messages = [];
      this._historyOldestId = null;
      this._historyHasMore = false;
      this._lastUserMsgId = null;
      this._lastUserMsgSeen = false;
      this._seenAt = null;
      this._seenAtLabel = '';
      this._copyDone = null;
      this.editingMsgId = null;
      this.editingText = '';
      if (_wizardOwnsAgeri) {
        // Returning to Ageri while a wizard is active — restore from the
        // snapshot taken on exit. Skip loadHistory; wizard owns the view.
        if (this._wizardMessagesSnapshot) {
          this.messages = this._wizardMessagesSnapshot;
          this._wizardMessagesSnapshot = null;
        }
      } else if (!opts.skipHistory) {
        this.loadHistory(id);
      }
      // Re-attach any pending verification cards stashed for this profile
      // while the user was viewing a different agent. Filters out cards
      // already submitted/cancelled so a back-and-forth profile hop
      // doesn't resurrect a resolved card.
      const _pendingForThis = this._pendingVerifications[id] || [];
      for (const card of _pendingForThis) {
        if (card.submitted) continue;
        if (this.messages.find(m => m.request_id === card.request_id)) continue;
        this.messages.push(card);
      }
      // Phase 4C — switch to chat view + push URL hash so the browser
      // back button returns to the list naturally on mobile. Desktop
      // ignores mobileView entirely so this is harmless there.
      this.mobileView = 'chat';
      const newHash = `#/agent/${encodeURIComponent(id)}`;
      if (window.location.hash !== newHash && !opts.suppressHashPush) {
        // Use pushState so back button goes to previous hash, not just
        // throws away the value (which a setter would do).
        history.pushState(null, '', newHash);
      }
      this.$nextTick(() => this.$refs.input && this.$refs.input.focus());
    },

    // Phase 4C — return to the mobile chat list. Pops the current hash
    // entry off history so the back button feels native.
    backToList() {
      this.mobileView = 'list';
      // Use back() if the current hash IS an agent hash (we pushed it)
      // — otherwise just set the hash directly.
      if ((window.location.hash || '').startsWith('#/agent/')) {
        history.back();
      } else if (window.location.hash !== '#/') {
        history.pushState(null, '', '#/');
      }
      // activeProfileName is a getter derived from activeProfileId, so
      // clearing the id is enough — don't assign to the getter.
      this.activeProfileId = null;
      this.messages = [];
    },

    renderProfiles(profiles) {
      this.profiles = profiles;
    },

    // ── Cards ───────────────────────────────────────────────────────────────

    handleCardMessage(card) {
      // Refresh = start fresh policy: a wizard card from a previously-cancelled
      // wizard whose LLM call landed *after* the user refreshed is a stale
      // response — drop it. The action_id prefix `wizard_` (wizard_gallery,
      // wizard_confirm, …) marks all wizard-emitted cards.
      const isWizardCard = (card.blocks || []).some(b =>
        typeof b.action_id === 'string' && b.action_id.startsWith('wizard_')
      );
      if (isWizardCard && !this.wizardActive) {
        return;
      }
      if (card.layout === 'float') {
        this.activeCard = card;
      } else {
        // inline — push as a card message into the stream
        this.messages.push({ id: ++this.msgCounter, role: 'agent', type: 'card', card });
        this.$nextTick(() => {
          const el = this.$refs.messages;
          if (el) el.scrollTop = el.scrollHeight;
        });
      }
      // The new gallery has arrived — drop the in-stream progress card.
      if (this.wizardRerolling) {
        this.wizardRerolling = false;
        if (!this.wizardCreatingName) this.stopCreatingTick();
      }
    },

    handleCardUpdate(data) {
      // Update float card if it matches
      if (this.activeCard && this.activeCard.id === data.card_id) {
        const updatedBlocks = data.blocks || [];
        this.activeCard = {
          ...this.activeCard,
          version: data.version,
          blocks: this.activeCard.blocks.map(b => {
            const updated = updatedBlocks.find(u => u.block_id === b.block_id);
            return updated || b;
          }),
        };
      }
      // Also update in message stream
      const idx = this.messages.findIndex(m => m.type === 'card' && m.card && m.card.id === data.card_id);
      if (idx !== -1) {
        const msg = this.messages[idx];
        const updatedBlocks = data.blocks || [];
        this.messages[idx] = {
          ...msg,
          card: {
            ...msg.card,
            version: data.version,
            blocks: msg.card.blocks.map(b => {
              const updated = updatedBlocks.find(u => u.block_id === b.block_id);
              return updated || b;
            }),
          },
        };
      }
    },

    respondToCard(cardId, actionId, value, displayText) {
      // Show user bubble with what they selected
      if (displayText) this.addMessage('user', displayText);
      // Close float card
      if (this.activeCard && this.activeCard.id === cardId) this.activeCard = null;
      // Send card_response over WS
      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
      this.ws.send(JSON.stringify({
        type: 'card_response',
        card_id: cardId,
        action_id: actionId,
        value,
        profile_id: this.activeProfileId,
      }));
      this.thinking = true;
      // Bio-gallery re-roll: prior gallery has already replaced the empty
      // state, so the empty-state progress card can't help here. Show an
      // in-stream progress card until the new gallery (or wizard_ended)
      // arrives. handleCardMessage / wizard_ended clear the flag.
      if (actionId === 'wizard_gallery' &&
          (value === 'more' || (typeof value === 'string' && value.startsWith('describe:')))) {
        this.wizardRerolling = true;
        this.startCreatingTick();
        // Re-anchor scroll so the in-stream progress card is in view; the
        // template lands after addMessage's scroll target so we have to
        // chase it.
        this.$nextTick(() => {
          const el = this.$refs.messages;
          if (el) el.scrollTop = el.scrollHeight;
        });
      }
    },

    dismissCard() {
      // Notify server so it can cancel any active wizard session
      if (this.activeCard && this.ws && this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(JSON.stringify({
          type: 'card_dismiss',
          card_id: this.activeCard.id,
        }));
      }
      this.activeCard = null;
    },

    submitVerification(msg) {
      // Verification card submit handler. Sends the user's typed value
      // back to the server, which resolves the awaiting skill's future.
      // Locks the card so the user can't double-fire and so the skill
      // sees exactly one answer. Also evicts the card from the per-
      // profile pending stash so a profile-hop doesn't resurrect it.
      if (!msg || msg.submitted) return;
      const value = (msg.answer || '').trim();
      if (!value) return;
      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
      msg.submitted = true;
      this._evictFromPending(msg);
      this.ws.send(JSON.stringify({
        type: 'verification_response',
        request_id: msg.request_id,
        value,
      }));
    },

    cancelVerification(msg) {
      // User explicitly dismissed the verification — server cancels
      // the awaiting future, the skill gets a CancelledError it can
      // catch and surface as "verification skipped".
      if (!msg || msg.submitted) return;
      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
      msg.submitted = true;
      msg.cancelled = true;
      this._evictFromPending(msg);
      this.ws.send(JSON.stringify({
        type: 'verification_cancel',
        request_id: msg.request_id,
      }));
    },

    _evictFromPending(msg) {
      const owner = msg.profile_id || '';
      const list = this._pendingVerifications[owner];
      if (!list) return;
      this._pendingVerifications[owner] = list.filter(
        c => c.request_id !== msg.request_id,
      );
    },

    requestCancelWizard() {
      // First click: arm the confirm. Auto-revert after 4s so a stray
      // expand doesn't linger or trap the user mid-recording.
      this.wizardCancelConfirming = true;
      if (this._wizardCancelRevertTimer) clearTimeout(this._wizardCancelRevertTimer);
      this._wizardCancelRevertTimer = setTimeout(() => {
        this.wizardCancelConfirming = false;
        this._wizardCancelRevertTimer = null;
      }, 4000);
    },

    abortCancelWizard() {
      this.wizardCancelConfirming = false;
      if (this._wizardCancelRevertTimer) {
        clearTimeout(this._wizardCancelRevertTimer);
        this._wizardCancelRevertTimer = null;
      }
    },

    cancelWizard() {
      // Reset the confirm state so it doesn't leak into the next wizard run.
      this.wizardCancelConfirming = false;
      if (this._wizardCancelRevertTimer) {
        clearTimeout(this._wizardCancelRevertTimer);
        this._wizardCancelRevertTimer = null;
      }
      // Frontend pre-flight (archetype / form steps before submit) has no
      // backend wizard to cancel — just unwind the local state.
      if (this.wizardStep) {
        this.cancelWizardForm();
        return;
      }
      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
      // Hide the banner immediately — the server's wizard_ended will arrive a
      // moment later, but we don't want a stale mode flash ("Creating new
      // agent") during the round-trip window.
      this.wizardActive = false;
      this.wizardMode = null;
      this.wizardRerolling = false;
      this.ws.send(JSON.stringify({ type: 'cancel_wizard' }));
    },

    // ── Skill config editor ─────────────────────────────────────────────
    // openConfigEditor fetches the schema + current values and pops the
    // modal. onSaved (optional) runs after a successful save — used by the
    // Activate flow to continue into skill_activate once config is in place.
    async openConfigEditor(skillKey, skillName, onSaved) {
      try {
        const r = await fetch(`/api/skills/${encodeURIComponent(skillKey)}/config`);
        if (!r.ok) {
          const msg = r.status === 404 ? 'Skill not found.' : 'Could not load skill config.';
          this.addMessage('system', msg);
          return;
        }
        const data = await r.json();
        // _visible gates the password eye-toggle per-field.
        const visible = {};
        for (const f of data.fields) visible[f.key] = false;
        this.configEditor = {
          skill_key: skillKey,
          skill_name: skillName || data.skill_name || skillKey,
          fields: data.fields || [],
          values: { ...(data.values || {}) },
          _visible: visible,
          submitting: false,
          error: '',
          onSaved: onSaved || null,
        };
      } catch (exc) {
        console.warn('openConfigEditor failed', exc);
        this.addMessage('system', 'Could not load skill config — check the console.');
      }
    },

    closeConfigEditor() {
      this.configEditor = null;
    },

    async saveConfigEditor({ thenActivate } = {}) {
      if (!this.configEditor || this.configEditor.submitting) return;
      // Required-field check — no round-trip needed.
      const missing = (this.configEditor.fields || []).filter(f => {
        if (!f.required) return false;
        const v = this.configEditor.values[f.key];
        // For secrets, the masked placeholder means "keep current value" —
        // that's a legal already-set state.
        if (f.is_secret && v === '__MASKED__') return false;
        return !v || String(v).trim() === '';
      });
      if (missing.length) {
        this.configEditor.error = `Please fill required field(s): ${missing.map(f => f.label).join(', ')}`;
        return;
      }
      this.configEditor.error = '';
      this.configEditor.submitting = true;
      try {
        const r = await fetch(
          `/api/skills/${encodeURIComponent(this.configEditor.skill_key)}/config`,
          {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ values: this.configEditor.values }),
          },
        );
        if (!r.ok) {
          const body = await r.json().catch(() => ({}));
          this.configEditor.error = body.error || 'Save failed.';
          this.configEditor.submitting = false;
          return;
        }
        const onSaved = this.configEditor.onSaved;
        this.configEditor = null;
        if (onSaved) onSaved();
        else this.addMessage('system', 'Skill config saved.');
      } catch (exc) {
        console.warn('saveConfigEditor failed', exc);
        if (this.configEditor) {
          this.configEditor.error = 'Network error — try again.';
          this.configEditor.submitting = false;
        }
      }
    },

    async restartAgeri(msg) {
      // User tapped "Restart Ageri to load" on a skill-saved message.
      // Server self-restarts via os.execv; we keep the button spinning and
      // let the existing WS reconnect loop pick up the new process.
      if (this.restartInFlight) return;
      this.restartInFlight = true;
      try {
        const r = await fetch('/api/admin/restart', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
        });
        if (!r.ok) {
          console.warn('restart endpoint returned', r.status);
          this.restartInFlight = false;
          return;
        }
        // Mark this specific message as dismissed so the button disappears
        // once we reconnect — we don't want stacks of old "Restart" buttons.
        if (msg) msg._restart_dismissed = true;
        this.addMessage('system', 'Ageri is restarting…');
        // The server closes the WS after ~500ms. Our existing onclose
        // handler schedules connect() every 2s — nothing else to do.
      } catch (exc) {
        console.warn('restart request failed', exc);
        this.restartInFlight = false;
      }
    },

    showError(message) {
      this.errorBanner = message;
      if (this._errorTimer) clearTimeout(this._errorTimer);
      this._errorTimer = setTimeout(() => { this.errorBanner = null; }, 5000);
    },

    dismissError() {
      this.errorBanner = null;
      if (this._errorTimer) clearTimeout(this._errorTimer);
    },

    // Presence dot for an agent avatar
    // Returns: 'active' | 'away' | 'sleeping' — derived from presenceMap + live state
    agentPresence(profile) {
      if (!profile) return 'away';
      // Active profile: use real-time state
      if (profile.id === this.activeProfileId) {
        if (this.thinking) return 'active';
        if (this.agentAway) return 'away';
      }
      // Use server-pushed presence if available
      const p = this.presenceMap[profile.id];
      if (p) return p;
      // Fallback: derive from status message (sleep keywords → sleeping)
      const status = (profile.status_message || '').toLowerCase();
      const sleepWords = ['zzz', 'ngủ', 'asleep', 'sleeping', '💤', 'fast asleep', 'đang ngủ'];
      if (sleepWords.some(w => status.includes(w))) return 'sleeping';
      return 'away';
    },

    presenceDotClass(profile) {
      const p = this.agentPresence(profile);
      if (p === 'active')   return 'bg-emerald-500';
      if (p === 'sleeping') return 'bg-slate-500';
      return 'bg-yellow-400';  // away
    },

    // ── Affect indicators (sidebar avatar overlays) ─────────────────
    // Ageri is the platform manager — not a relational agent. CoreSkill
    // happens to write liking/disliking deltas for it like any other
    // profile, but those don't represent a real relationship arc.
    // Suppress all relationship indicators (crown, tension dot, block
    // treatment) for the system persona at the render layer.
    _affectAppliesToProfile(profile) {
      return profile && profile.id && profile.id !== 'ageri';
    },
    // Crown shows ONLY for warm+ liking tiers. Bronze/silver/gold
    // metaphor — recognition of an earned relationship, not noise on
    // every contact. Distant/cool/neutral return null = no crown.
    affectCrownTier(profile) {
      if (!this._affectAppliesToProfile(profile)) return null;
      const lbl = (profile?.liking_label || '').toLowerCase();
      if (lbl === 'bonded') return 'gold';
      if (lbl === 'close')  return 'silver';
      if (lbl === 'warm')   return 'bronze';
      return null;
    },
    affectCrownColor(profile) {
      const tier = this.affectCrownTier(profile);
      if (tier === 'gold')   return '#facc15';   // amber-400
      if (tier === 'silver') return '#cbd5e1';   // slate-300
      if (tier === 'bronze') return '#d97706';   // amber-600
      return 'transparent';
    },
    // Tension dot for resentful+ disliking tiers. Hidden at neutral/
    // wary/guarded too — surfaces only when the relationship has real
    // friction worth flagging at a glance.
    affectTensionDot(profile) {
      if (!this._affectAppliesToProfile(profile)) return null;
      const lbl = (profile?.disliking_label || '').toLowerCase();
      if (lbl === 'bitter')    return '#f87171';  // red-400
      if (lbl === 'resentful') return '#fb923c';  // orange-400
      return null;
    },
    // Block treatment (dimmed avatar + dashed border). Same rule —
    // never applies to Ageri.
    affectIsBlocked(profile) {
      if (!this._affectAppliesToProfile(profile)) return false;
      return !!profile?.is_blocked;
    },

    // ── User status helpers ─────────────────────────────────────────────
    _OPERATIONAL_TYPES: new Set(['meeting', 'focusing', 'away', 'dnd']),
    _PERSONAL_TYPES: new Set(['sick', 'travel', 'stressed', 'celebration']),

    _applyUserStatus(status) {
      this.userStatus = status || null;
      // Clear old countdown timer
      if (this._statusExpireTimer) { clearInterval(this._statusExpireTimer); this._statusExpireTimer = null; }
      if (status && status.expires_at) {
        // Poll every 30s — cheap enough and keeps expiry UI accurate
        this._statusExpireTimer = setInterval(() => {
          if (!this.userStatus || !this.userStatus.expires_at) {
            clearInterval(this._statusExpireTimer); this._statusExpireTimer = null; return;
          }
          const exp = new Date(this.userStatus.expires_at);
          if (new Date() >= exp) {
            this.userStatus = null;
            clearInterval(this._statusExpireTimer); this._statusExpireTimer = null;
          }
        }, 30000);
      }
    },

    userStatusDotClass() {
      if (!this.userStatus) return 'bg-emerald-500';
      const t = this.userStatus.type || '';
      if (t === 'dnd' || t === 'away') return 'bg-slate-500';
      if (t === 'meeting' || t === 'focusing') return 'bg-yellow-400';
      if (t === 'sick' || t === 'stressed') return 'bg-amber-400';
      return 'bg-yellow-400';  // generic busy
    },

    statusTimeRemaining() {
      if (!this.userStatus || !this.userStatus.expires_at) return '';
      const now = new Date();
      const exp = new Date(this.userStatus.expires_at);
      const diff = Math.max(0, Math.round((exp - now) / 60000));  // minutes
      if (diff <= 0) return '';
      if (diff < 60) return `${diff}m`;
      const h = Math.floor(diff / 60);
      const m = diff % 60;
      return m ? `${h}h ${m}m` : `${h}h`;
    },

    async setUserStatus(text, type, durationMinutes) {
      try {
        const r = await fetch('/api/user/status', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({text, type, duration_minutes: durationMinutes}),
        });
        const d = await r.json();
        if (d.ok) this._applyUserStatus(d.status);
      } catch (e) { console.error('setUserStatus failed', e); }
      this.statusPickerOpen = false;
    },

    async clearUserStatus() {
      try {
        await fetch('/api/user/status', {method: 'DELETE'});
        this._applyUserStatus(null);
      } catch (e) { console.error('clearUserStatus failed', e); }
      this.statusPickerOpen = false;
    },

    // Phase 4A sub-item 6 — return a short device-badge string when this
    // profile's name collides with another profile on this device AND the
    // bundle imported it from a different source. Empty string = no badge.
    sourceDeviceBadge(profile) {
        if (!profile?.source_device) return '';
        const name = (profile.name || '').toLowerCase();
        const dupes = (this.profiles || []).filter(
            p => (p.name || '').toLowerCase() === name
        );
        if (dupes.length < 2) return '';  // unique name → no need to disambiguate
        return profile.source_device;
    },

    // Profile / bio modal — open with the profile snapshot, then lazy-fetch
    // the rich bio fields (bio_public, origin, birthdate, job, hobby) from
    // /api/profiles/{id}/bio. Bio fields are reset on open so a stale
    // payload from a previous agent doesn't flash.
    openProfileModal(profile) {
      if (!profile) return;
      this.profileModal = profile;
      this.profileModalBio = null;
      this.profileModalBioLoaded = false;
      this.profileModalAboutExpanded = false;
      this.profileModalRegenerating = false;
      this.profileModalAboutLang = 'en';   // default to English; user can switch
      // Reset proposal state — fresh modal session
      this.proposalTarget = "";
      this.proposalSubmitting = false;
      this.proposalBanner = "";
      // Start the per-minute tick so the "Local time" field stays current
      // while the modal is open. Stopped in closeProfileModal().
      if (!this._localTimeTimer) {
        this._localTimeTimer = setInterval(() => {
          this._localTimeTick = (this._localTimeTick + 1) % 1000000;
        }, 60_000);
      }
      const id = profile.id;
      fetch(`/api/profiles/${encodeURIComponent(id)}/bio`)
        .then(r => r.ok ? r.json() : null)
        .then(d => {
          // If the user closed and reopened a different profile while this
          // request was in flight, drop the stale response.
          if (this.profileModal?.id !== id) return;
          this.profileModalBio = d || {};
          this.profileModalBioLoaded = true;
          // English is always available (deterministic synthesis as a
          // fallback for anything missing in the cache); native is
          // optional. Default to English so the user always sees
          // something on first open, and let them switch to native
          // via the dropdown.
          this.profileModalAboutLang = 'en';
          // Rehydrate the regenerating/translating spinner from the
          // server in case a translate was already in flight.
          if (d && d.regenerating) {
            this.profileModalRegenerating = true;
          }
        })
        .catch(() => { this.profileModalBioLoaded = true; });
    },
    closeProfileModal() {
      this.profileModal = null;
      this.profileModalBio = null;
      this.profileModalBioLoaded = false;
      this.profileModalAboutExpanded = false;
      this.profileModalRegenerating = false;
      this.profileModalAboutLang = 'en';
      // Stop the local-time tick — no point firing it when no modal is
      // visible. Restarted on next openProfileModal().
      if (this._localTimeTimer) {
        clearInterval(this._localTimeTimer);
        this._localTimeTimer = null;
      }
    },

    // Format the agent's current wall-clock time for display in the
    // profile modal. tz is an IANA name like "America/Chicago"; falls
    // back to a placeholder when tz is empty / invalid. Includes the
    // short timezone name (CST, GMT, ICT) so users get the contextual
    // hint without a separate "Timezone" row.
    agentLocalTime(tz) {
      if (!tz) return "—";
      try {
        return new Intl.DateTimeFormat(undefined, {
          timeZone: tz,
          weekday: 'short',
          hour: '2-digit',
          minute: '2-digit',
          hour12: false,
          timeZoneName: 'short',
        }).format(new Date());
      } catch (_e) {
        return tz;
      }
    },

    // Person-card helpers. Each returns an empty string when there's
    // nothing meaningful to show, so the surrounding template can gate
    // on truthiness.
    bornLine() {
      const bd = this.profileModalBio?.birthdate;
      const age = this.profileModal?.agent_age;
      if (!bd && !age) return '';
      const parts = [];
      if (bd) {
        try {
          // Birthdate is a date-only ISO string; pin to UTC noon to
          // dodge any local-tz off-by-one rendering.
          const d = new Date(bd + 'T12:00:00Z');
          parts.push(d.toLocaleDateString(undefined, {
            year: 'numeric', month: 'short', day: 'numeric',
          }));
        } catch (_) {
          parts.push(bd);
        }
      }
      if (age) parts.push(`${age} years old`);
      return parts.join(' · ');
    },

    livesInLine() {
      // location is current city/region; falls back to the bio's
      // birthplace string when no current location is set (so we still
      // show *something* geographic).
      const loc = (this.profileModal?.location || this.profileModalBio?.origin || '').trim();
      const ct = (this.profileModal?.country || '').trim();
      return [loc, ct].filter(Boolean).join(', ');
    },

    languagesLine() {
      const native = (this.profileModal?.native_language || '').trim();
      const second = this.profileModal?.second_languages || [];
      const parts = [];
      if (native) parts.push(`${native} (native)`);
      for (const s of second) {
        const v = (s || '').trim();
        if (v) parts.push(v);
      }
      return parts.join(' · ');
    },

    // User's saved native language (set in Settings > General).
    // Display name for the language dropdown (e.g. "Vietnamese").
    _userNativeLangLabel() {
      const lang = (this._userLanguage || '').trim();
      // Suppress the "native" option entirely if the user's native
      // language IS English — the English option already covers it.
      const en = ['english', 'en', 'en-us', 'en-gb'];
      if (!lang || en.includes(lang.toLowerCase())) return '';
      return lang;
    },
    // Show the dropdown only when (a) there's actually a choice (user's
    // native ≠ English) and (b) we're not in the middle of a translate.
    _showAboutLangDropdown() {
      if (!this.profileModal || this.profileModal.id === 'ageri') return false;
      if (this.profileModalRegenerating) return false;
      return !!this._userNativeLangLabel();
    },
    // The text rendered in the About box, picked by the dropdown.
    // 'native' → saved bio_public (in user's language). Empty if not
    //            yet translated; the change handler will trigger a
    //            backend translate on switch, so the empty render is
    //            momentary.
    // 'en'     → bio_public_en (deterministic English assembly from
    //            the structured bio, no LLM call).
    _aboutBoxText() {
      const bio = this.profileModalBio;
      if (!bio) return '';
      if (this.profileModalAboutLang === 'en') {
        return (bio.bio_public_en || '').trim();
      }
      return (bio.bio_public || '').trim();
    },
    // Fired when the user picks a language from the dropdown. If they
    // pick 'native' but the saved bio_public isn't actually in their
    // current native language, kick off a lightweight translate-bio
    // request — the server reuses the existing structured bio and
    // only re-runs the label-localization pass.
    async onAboutLangChange() {
      this.profileModalAboutExpanded = false;
      if (this.profileModalAboutLang !== 'native') return;
      const userLang = (this._userLanguage || '').trim();
      if (!userLang) return;
      const bioLang = (this.profileModalBio?.bio_public_lang || '').trim().toLowerCase();
      const native = (this.profileModalBio?.bio_public || '').trim();
      if (native && bioLang === userLang.toLowerCase()) return;
      // Need a translation. Fire the lightweight endpoint; WS event
      // updates the bio_public + lang fields when it lands.
      const id = this.profileModal?.id;
      if (!id) return;
      this.profileModalRegenerating = true;
      try {
        const r = await fetch(
          `/api/profiles/${encodeURIComponent(id)}/translate-bio`,
          {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ language: userLang }),
          }
        );
        if (!r.ok && r.status !== 202) {
          this.profileModalRegenerating = false;
        }
      } catch (exc) {
        console.warn('translate-bio error', exc);
        this.profileModalRegenerating = false;
      }
    },

    // First chunk of the bio_public — used as the truncated preview.
    // We trim to ~180 chars at the nearest space so we don't cut a word
    // mid-character, and append an ellipsis only when truncation actually
    // applied. Keeps the modal lean for the daily skim case while leaving
    // a "Read more" door for first-time meetings.
    aboutPreview(text) {
      if (!text) return '';
      const limit = 180;
      if (text.length <= limit) return text;
      let cut = text.lastIndexOf(' ', limit);
      if (cut < 100) cut = limit;
      return text.slice(0, cut).trimEnd() + '…';
    },

    // Map archetype key → display label (handles old keys from existing profiles)
    // ── Propose Relationship Change helpers ─────────────────────────
    _PROPOSE_RELATIONAL_SET: ['friend', 'companion', 'mentor', 'tutor', 'colleague', 'acquaintance'],
    _PROPOSE_LABELS: {
      'companion':   'Companion',
      'friend':      'Friend',
      'mentor':      'Mentor',
      'tutor':       'Tutor',
      'colleague':   'Colleague',
      'acquaintance':'Acquaintance',
    },
    _proposeRelationshipApplies(currentArchetype) {
      const cur = (currentArchetype || '').toLowerCase();
      return this._PROPOSE_RELATIONAL_SET.includes(cur);
    },
    _proposeOptions(currentArchetype) {
      const cur = (currentArchetype || '').toLowerCase();
      return this._PROPOSE_RELATIONAL_SET
        .filter(k => k !== cur)
        .map(k => ({ value: k, label: this._PROPOSE_LABELS[k] || k }));
    },
    // ── Agent-driven expiration (4F) ─────────────────────────────
    async _expirationAction(profileId, kind, action) {
      // kind: 'proposal' (3 actions) or 'reached' (3 actions)
      // For 'proposal':  accept / decline / negotiate → /expires-proposal/{action}
      // For 'reached':   hibernate / archive / carry_on → existing or expires-clear
      if (this.expirationActionPending[profileId]) return;
      this.expirationActionPending = {
        ...this.expirationActionPending, [profileId]: action,
      };
      try {
        let url, method = 'POST';
        if (kind === 'proposal') {
          url = `/api/profiles/${encodeURIComponent(profileId)}/expires-proposal/${action}`;
        } else if (action === 'hibernate') {
          url = `/api/profiles/${encodeURIComponent(profileId)}/hibernate`;
        } else if (action === 'archive') {
          url = `/api/profiles/${encodeURIComponent(profileId)}/archive`;
        } else if (action === 'carry_on') {
          url = `/api/profiles/${encodeURIComponent(profileId)}/expires-clear`;
        } else {
          return;
        }
        const r = await fetch(url, { method, headers: {'Content-Type': 'application/json'} });
        const d = await r.json().catch(() => ({}));
        if (!d.ok) {
          alert(d.error || 'Action failed.');
          return;
        }
        // Dismiss the matching banner on success.
        if (kind === 'proposal') {
          const next = { ...this.expirationProposals };
          delete next[profileId];
          this.expirationProposals = next;
        } else {
          const next = { ...this.expirationReached };
          delete next[profileId];
          this.expirationReached = next;
        }
      } catch (e) {
        alert('Network error: ' + e.message);
      } finally {
        const next = { ...this.expirationActionPending };
        delete next[profileId];
        this.expirationActionPending = next;
      }
    },

    async openLlmInspect(msg) {
      // Dev-mode: fetch the captured LLM context dump for this agent
      // message and open the modal. The endpoint 404s if dev mode isn't
      // on or the dump doesn't exist (TTL expired / pre-flag turn).
      if (!msg || !msg.db_id) return;
      this.llmInspectModal = {
        msg_id: msg.db_id, loading: true, error: "", payload: null,
        tab: "system_prompt",
      };
      try {
        const r = await fetch(
          `/api/chat/${encodeURIComponent(this.activeProfileId)}/messages/${msg.db_id}/llm_inspect`
        );
        if (!r.ok) {
          const err = await r.json().catch(() => ({}));
          this.llmInspectModal.error = err.error || `HTTP ${r.status}`;
          this.llmInspectModal.loading = false;
          return;
        }
        this.llmInspectModal.payload = await r.json();
      } catch (e) {
        this.llmInspectModal.error = `network: ${e.message}`;
      } finally {
        this.llmInspectModal.loading = false;
      }
    },
    closeLlmInspect() { this.llmInspectModal = null; },

    openProposeRelationship() {
      this.proposalTarget = "";
      this.proposalSubmitting = false;
      this.proposalBanner = "";
      this.proposeDialogOpen = true;
    },
    closeProposeRelationship() {
      this.proposeDialogOpen = false;
      // State persists briefly so the closing animation looks right;
      // we reset on next open(), not on close.
    },
    async proposeArchetypeShift() {
      if (!this.profileModal?.id || !this.proposalTarget) return;
      if (this.proposalSubmitting) return;
      this.proposalSubmitting = true;
      try {
        const r = await fetch(
          `/api/profiles/${encodeURIComponent(this.profileModal.id)}/propose-archetype-shift`,
          {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ target: this.proposalTarget }),
          }
        );
        const d = await r.json().catch(() => ({}));
        if (!d.ok) {
          alert(d.error || 'Could not send proposal.');
          this.proposalSubmitting = false;
          return;
        }
        const targetLabel = this._PROPOSE_LABELS[this.proposalTarget] || this.proposalTarget;
        const name = this.profileModal?.name || 'They';
        this.proposalBanner = d.deferred_to_wake
          ? `Proposal sent (→ ${targetLabel}). ${name} is sleeping — they'll respond when they wake up.`
          : `Proposal sent (→ ${targetLabel}). ${name} will respond shortly.`;
      } catch (e) {
        alert('Network error: ' + e.message);
      } finally {
        this.proposalSubmitting = false;
      }
    },

    archetypeLabel(key) {
      const map = {
        'default':        'Chief of Staff',
        'friend':         'Friend',
        'best_friend':    'Friend',
        'companion':      'Companion',
        'partner':        'Companion',
        'mentor':         'Mentor',
        'colleague':      'Colleague',
        'work_colleague': 'Colleague',
        'acquaintance':   'Acquaintance',
        'tutor':          'Tutor',
        'custom':         'Custom',
        'customized':     'Custom',
      };
      return map[key] || (key ? key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()) : 'Assistant');
    },

    skillLabel(skill) {
      const map = {
        'personal':   'Personal',
        'research':   'Research',
        'knowledge':  'Knowledge',
        'sentinel':   'DevOps',
        'tutor':      'Tutor',
        'creative':   'Creative',
        'health':     'Health',
        'finance':    'Finance',
      };
      return map[skill] || (skill ? skill.charAt(0).toUpperCase() + skill.slice(1) : skill);
    },

    skillIcon(skill) {
      const map = {
        'personal':   '🗂️',
        'research':   '🔍',
        'knowledge':  '🧠',
        'sentinel':   '⚙️',
        'tutor':      '📚',
        'creative':   '✏️',
        'health':     '❤️',
        'finance':    '💰',
      };
      return map[skill] || '✦';
    },

    // A profile is "new" if it was created in the last 5 minutes
    isNewAgent(profile) {
      if (!profile || !profile.created_at) return false;
      const created = new Date((profile.created_at.endsWith('Z') ? profile.created_at : profile.created_at + 'Z'));
      return (Date.now() - created.getTime()) < 5 * 60 * 1000;
    },

    // Render chat text: escape HTML, markdown inline, paragraph spacing,
    // and pipe-style markdown tables (`| col1 | col2 |` with a `|---|---|`
    // separator row). Tables render as styled <table> blocks.
    renderText(text) {
      if (!text) return '';
      // 1. Escape HTML
      const escaped = text
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
      // 2. Inline markdown: **bold**, *italic/action*, `code`
      const applyInline = (s) => s
        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
        .replace(/\*([^*\n]+)\*/g, '<em class="text-slate-400 not-italic">$1</em>')
        .replace(/`([^`\n]+)`/g, '<code class="bg-white/10 px-1 rounded text-xs font-mono">$1</code>');

      // 3. Walk lines, fold consecutive pipe-rows into <table> HTML; everything
      // else is collected as text and rendered with the existing inline+paragraph
      // path.
      const lines = escaped.split('\n');
      const isPipeRow = (l) => /^\s*\|.*\|\s*$/.test(l);
      const isSepRow = (l) => /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)+\|?\s*$/.test(l);
      const out = [];
      let textBuf = [];
      const flushText = () => {
        if (!textBuf.length) return;
        const block = applyInline(textBuf.join('\n'));
        out.push(...block.split(/\n\n+/).map(p =>
          `<p class="mb-2 last:mb-0 whitespace-pre-wrap">${p}</p>`));
        textBuf = [];
      };
      const splitCells = (l) => {
        let s = l.trim();
        if (s.startsWith('|')) s = s.slice(1);
        if (s.endsWith('|')) s = s.slice(0, -1);
        return s.split('|').map(c => c.trim());
      };
      let i = 0;
      while (i < lines.length) {
        // Detect a table: pipe row, then separator, then ≥1 more pipe rows.
        if (isPipeRow(lines[i]) && i + 1 < lines.length && isSepRow(lines[i + 1])) {
          flushText();
          const headerCells = splitCells(lines[i]);
          i += 2;
          const bodyRows = [];
          while (i < lines.length && isPipeRow(lines[i])) {
            bodyRows.push(splitCells(lines[i]));
            i++;
          }
          const thead = headerCells.map(c =>
            `<th class="px-2 py-1 text-left font-semibold border-b border-white/20">${applyInline(c)}</th>`
          ).join('');
          const tbody = bodyRows.map(row => {
            // Pad short rows to header width
            while (row.length < headerCells.length) row.push('');
            const tds = row.map(c =>
              `<td class="px-2 py-1 border-b border-white/10">${applyInline(c)}</td>`
            ).join('');
            return `<tr>${tds}</tr>`;
          }).join('');
          out.push(
            `<div class="my-2 overflow-x-auto">` +
            `<table class="text-xs border border-white/20 rounded">` +
            `<thead><tr>${thead}</tr></thead>` +
            `<tbody>${tbody}</tbody>` +
            `</table></div>`
          );
          continue;
        }
        textBuf.push(lines[i]);
        i++;
      }
      flushText();
      let html = out.join('');

      // CukCuk raw-section Excel button marker — emitted right after
      // the raw sales-data table. Renders a small standalone Excel-download
      // button so the user can grab the original xlsx without scrolling
      // down to the preview's action bar.
      html = html.replace(
        /<p[^>]*>\[\[cukcuk-raw-excel:([\w.\-]+)\]\]<\/p>/,
        (_, vid) => {
          const url = `/api/skills/cukcuk-daily-invoice/excel/${encodeURIComponent(vid)}`;
          return `<div class="my-1"><a href="${url}" `
            + `class="inline-flex items-center px-3 py-1 text-xs rounded `
            + `bg-emerald-500/20 hover:bg-emerald-500/40 border border-emerald-400/30 `
            + `text-slate-200 no-underline">📥 Tải Excel</a></div>`;
        }
      );

      // CukCuk inline editor marker — accepts colon-delimited tokens after
      // the version_id:
      //   lang=<code>           skill's primary language
      //   with-invoice-button   show the "Tạo hóa đơn" action
      //   date=<token>          date arg passed to /create-invoice
      //                         (DD-MM-YYYY converted back to DD/MM/YYYY)
      //   with-excel            show the "Excel" download button
      //   with-buyer-form       render the buyer-info form below the table
      //   label=<text>          report label suffix
      //   filename=<text>       original report filename — travels with
      //                         each preview so an older table's autosave
      //                         restores the right filename in the cache
      // Tokens may appear in any order. The marker line is consumed.
      html = html.replace(
        /<p[^>]*>\[\[cukcuk-edit-table:([\w/_:.~=-]+)\]\]<\/p>/,
        (_, payload) => {
          const parts = payload.split(':');
          const versionId = parts[0];
          let lang = '';
          let showBtn = false;
          let dateTok = '';
          let withExcel = false;
          let withBuyerForm = false;
          let label = '';
          let filename = '';
          for (const p of parts.slice(1)) {
            if (p === 'with-invoice-button') showBtn = true;
            else if (p === 'with-excel') withExcel = true;
            else if (p === 'with-buyer-form') withBuyerForm = true;
            else if (p.startsWith('lang=')) lang = p.slice(5);
            else if (p.startsWith('date=')) dateTok = p.slice(5);
            else if (p.startsWith('label=')) label = p.slice(6);
            else if (p.startsWith('filename=')) filename = p.slice(9);
          }
          const id = `cukcuk-${versionId}-${Math.random().toString(36).slice(2,7)}`;
          // escapeHTMLAttr inline (avoid ' " < > & in attribute values)
          const attrEsc = s => String(s)
            .replace(/&/g, '&amp;').replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
          return `<div class="cukcuk-edit-stub" data-version="${versionId}" `
            + `data-show-create-btn="${showBtn ? '1' : ''}" `
            + `data-with-excel="${withExcel ? '1' : ''}" `
            + `data-with-buyer-form="${withBuyerForm ? '1' : ''}" `
            + `data-date-token="${dateTok}" `
            + `data-report-label="${label}" `
            + `data-filename="${attrEsc(filename)}" `
            + `data-lang="${lang}" data-id="${id}"></div>`;
        }
      );
      return html;
    },

    // Per-language strings for the cukcuk inline editor. English is the
    // default and the fallback for any language not listed below. Add more
    // languages as more skills declare them.
    cukcukI18n(lang) {
      const en = {
        addRow:       '➕ Add row',
        save:         '💾 Save',
        exportCsv:    '📥 Export CSV',
        createInv:    '📄 Create invoice',
        saving:       'Saving…',
        savedRows:    (n) => `✓ Saved ${n} row${n === 1 ? '' : 's'}`,
        downloaded:   '✓ Downloaded',
        errorPrefix:  'Error: ',
        deleteRowTip: 'Delete row',
        cancelTip:    'Cancel',
        addTip:       'Add',
        productName:  'Product name',
        unit:         'Unit',
        invDatePrompt:'Invoice date:',
        invToday:     'Today',
        invYesterday: 'Yesterday',
      };
      const vi = {
        addRow:       '➕ Thêm dòng',
        save:         '💾 Lưu',
        exportCsv:    '📥 Xuất CSV',
        createInv:    '📄 Tạo hóa đơn',
        saving:       'Đang lưu…',
        savedRows:    (n) => `✓ Đã lưu ${n} dòng`,
        downloaded:   '✓ Đã tải về',
        errorPrefix:  'Lỗi: ',
        deleteRowTip: 'Xóa dòng',
        cancelTip:    'Hủy',
        addTip:       'Thêm',
        productName:  'Tên hàng hóa',
        unit:         'Đơn vị',
        invDatePrompt:'Ngày hóa đơn:',
        invToday:     'Hôm nay',
        invYesterday: 'Hôm qua',
      };
      // English is default + fallback for any unlisted language.
      const table = (lang === 'vi') ? vi : en;
      // Re-merge so any missing key in a localized table falls back to en.
      return { ...en, ...table };
    },

    // Hydrate any cukcuk edit stubs in a freshly-rendered message — finds
    // the immediately preceding <table>, validates it has the expected
    // 7-column invoice header, and attaches edit/delete/add/save/export/
    // create-invoice controls. Called from Alpine x-init on every assistant
    // message bubble that contains a stub.
    hydrateCukcukStubs(rootEl) {
      // Belt-and-suspenders — also scan the WHOLE document. x-init can
      // sometimes fire before innerHTML population finishes, missing the
      // newly-injected stub; the document scan catches it on the next tick.
      const targets = [rootEl, document.body].filter(Boolean);
      const seen = new Set();
      let stubs = [];
      for (const t of targets) {
        for (const s of t.querySelectorAll('.cukcuk-edit-stub:not([data-hydrated])')) {
          if (!seen.has(s)) { seen.add(s); stubs.push(s); }
        }
      }
      console.log('[cukcuk] hydrateCukcukStubs found', stubs.length, 'stub(s) (rootEl + document)');
      stubs.forEach(stub => {
        stub.setAttribute('data-hydrated', '1');
        const versionId = stub.dataset.version;
        const showCreateBtn = !!stub.dataset.showCreateBtn;
        const lang = stub.dataset.lang || '';
        const dateToken = stub.dataset.dateToken || '';
        const withExcel = !!stub.dataset.withExcel;
        const withBuyerForm = !!stub.dataset.withBuyerForm;
        const reportLabel = stub.dataset.reportLabel || versionId;
        const sourceFilename = stub.dataset.filename || '';
        console.log(
          '[cukcuk] stub version=', versionId,
          'showBtn=', showCreateBtn, 'lang=', lang, 'date=', dateToken,
          'excel=', withExcel, 'buyerForm=', withBuyerForm,
        );
        // Find the invoice-mapping table — the one with 'Hàng hóa' in
        // its header. Search strategy:
        //   1. Walk back through ALL previous siblings (any tag), checking
        //      each subtree for a matching table. Most general — catches
        //      <p>, <ol>, <div> wrappers regardless of markdown renderer.
        //   2. Fallback: search the bubble's whole subtree (in case the
        //      stub got reordered by Alpine or innerHTML quirks).
        let table = null;
        let prev = stub.previousElementSibling;
        let walked = 0;
        const matchTable = (root) => {
          for (const t of (root.querySelectorAll ? root.querySelectorAll('table') : [])) {
            const headers = Array.from(t.querySelectorAll('thead th'))
              .map(th => th.textContent.trim());
            if (headers.includes('Hàng hóa')) return t;
          }
          return null;
        };
        while (prev) {
          walked++;
          const t = matchTable(prev);
          if (t) {
            const headers = Array.from(t.querySelectorAll('thead th'))
              .map(th => th.textContent.trim());
            console.log('[cukcuk] walk', walked, 'sibling=', prev.tagName, 'found table headers=', headers);
            table = t; break;
          }
          prev = prev.previousElementSibling;
        }
        if (!table) {
          // Fallback 1: scan the whole bubble.
          const bubble = stub.closest('[x-html]') || stub.parentElement;
          if (bubble) {
            const t = matchTable(bubble);
            if (t) {
              console.log('[cukcuk] fallback bubble-scan found Hàng hóa table');
              table = t;
            }
          }
          // Fallback 2: long skill responses get split into multiple
          // message bubbles on blank-line boundaries — the stub often
          // ends up alone in the LAST bubble, with the invoice-mapping
          // table in an earlier bubble. Scan all [x-html] bubbles in
          // the document, find the one that contains our stub, and walk
          // backward through the list looking for a matching table.
          if (!table && bubble) {
            const allBubbles = Array.from(document.querySelectorAll('[x-html]'));
            const myIdx = allBubbles.indexOf(bubble);
            for (let i = myIdx - 1; i >= 0; i--) {
              const t = matchTable(allBubbles[i]);
              if (t) {
                console.log('[cukcuk] cross-bubble scan found Hàng hóa table at bubble idx', i);
                table = t;
                break;
              }
            }
          }
        }
        if (!table) {
          console.warn('[cukcuk] no invoice-mapping table found (walked', walked, 'siblings)');
          return;
        }
        console.log('[cukcuk] attaching editor to table');
        this.attachCukcukEditor(
          table, versionId, showCreateBtn, stub, lang, dateToken,
          withExcel, withBuyerForm, reportLabel, sourceFilename,
        );

        // After hydration, the stub's bubble is often the LAST one in
        // the message stream and contains nothing else (the marker was
        // separated from the prior content by a blank line in the
        // skill's response, which the bubble splitter turns into its
        // own bubble). Remove the now-redundant stub and, if the bubble
        // body has no visible text/element left, hide the entire row
        // so the user doesn't see an empty bubble + timestamp.
        try {
          const bubbleBody = stub.closest('[x-html]');
          stub.remove();
          if (bubbleBody) {
            // "Empty" = no text, no images, no tables, no buttons. Whitespace-
            // only paragraphs that markdown emits around stripped markers
            // count as empty too.
            const textLeft = (bubbleBody.textContent || '').trim();
            const meaningfulEls = bubbleBody.querySelector(
              'table, img, button, a, input, .cukcuk-editor-actions, [data-id]'
            );
            if (!textLeft && !meaningfulEls) {
              // Walk up to the per-message row (`.mb-1` row in the
              // template) — hiding the row also hides the timestamp
              // sibling underneath the bubble.
              const row = bubbleBody.closest('.mb-1') || bubbleBody.parentElement;
              if (row) row.style.display = 'none';
            }
          }
        } catch (e) {
          console.warn('[cukcuk] post-hydrate cleanup error:', e);
        }
      });
    },

    // Build edit UI on top of an existing rendered invoice-mapping table.
    attachCukcukEditor(table, versionId, showCreateBtn, stub, lang, dateToken,
                       withExcel, withBuyerForm, reportLabel, sourceFilename) {
      const i18n = this.cukcukI18n(lang);
      const wrap = table.closest('.overflow-x-auto') || table.parentElement;

      // 1. Add 🗑️ delete button to each body row (column 0 prepend)
      const tbody = table.querySelector('tbody');
      const totalRow = tbody.lastElementChild;  // the "Tổng" row
      const dataRows = Array.from(tbody.querySelectorAll('tr'))
        .filter(tr => tr !== totalRow);

      // Add a leading <th>/<td> column for the delete button
      const headerRow = table.querySelector('thead tr');
      if (headerRow && !headerRow.querySelector('.cukcuk-del-col')) {
        const th = document.createElement('th');
        th.className = 'cukcuk-del-col px-2 py-1 border-b border-white/20';
        headerRow.insertBefore(th, headerRow.firstChild);
      }
      dataRows.forEach((tr) => {
        if (tr.querySelector('.cukcuk-del-cell')) return;
        const td = document.createElement('td');
        td.className = 'cukcuk-del-cell px-2 py-1 border-b border-white/10';
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'text-rose-400 hover:text-rose-200 text-sm';
        btn.textContent = '🗑';
        btn.title = i18n.deleteRowTip;
        btn.addEventListener('click', () => {
          tr.remove();
          this.cukcukRecomputeTotal(table);
        });
        td.appendChild(btn);
        tr.insertBefore(td, tr.firstChild);
      });
      // Pad totals row + header row's columns are off — pad totals with a leading empty cell
      if (totalRow && !totalRow.querySelector('.cukcuk-del-pad')) {
        const td = document.createElement('td');
        td.className = 'cukcuk-del-pad';
        totalRow.insertBefore(td, totalRow.firstChild);
      }

      // 2. Optional buyer-info form — rendered when /create-invoice
      //    triggered the preview. Pre-filled with Khách lẻ defaults;
      //    user can fill B2B fields to override. Submit happens via the
      //    "Tạo hóa đơn" button which POSTs the form, then sends the
      //    /create-invoice <date> -silent slash command.
      let buyerForm = null;
      if (withBuyerForm) {
        buyerForm = document.createElement('div');
        buyerForm.className = 'mt-3 mb-2 p-3 rounded-lg bg-white/5 border border-border';
        buyerForm.innerHTML = `
          <div class="text-[12px] font-semibold uppercase tracking-wider text-slate-300 mb-2 pb-1 border-b border-border">
            Thông tin người mua
          </div>
          <div class="text-[11px] text-slate-400 mb-2 leading-relaxed">
            Để trống các trường bên dưới (trừ Tên người mua) để dùng mặc định
            <em>Khách lẻ</em>. Điền thông tin doanh nghiệp nếu xuất hóa đơn cho khách B2B.
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-[12px]">
            <label class="flex flex-col gap-0.5">
              <span class="text-slate-300">Tên người mua</span>
              <input type="text" data-buyer="buyer_name"
                     value="Khách lẻ ( Người mua không cung cấp thông tin)"
                     class="px-2 py-1 rounded bg-white/5 border border-border text-slate-200 placeholder-slate-500 focus:border-accent focus:outline-none">
            </label>
            <label class="flex flex-col gap-0.5">
              <span class="text-slate-300">Tên đơn vị</span>
              <input type="text" data-buyer="company" placeholder="(B2B)"
                     class="px-2 py-1 rounded bg-white/5 border border-border text-slate-200 placeholder-slate-500 focus:border-accent focus:outline-none">
            </label>
            <label class="flex flex-col gap-0.5">
              <span class="text-slate-300">Mã số thuế</span>
              <input type="text" data-buyer="tax_code" placeholder="(B2B)"
                     class="px-2 py-1 rounded bg-white/5 border border-border text-slate-200 placeholder-slate-500 focus:border-accent focus:outline-none">
            </label>
            <label class="flex flex-col gap-0.5">
              <span class="text-slate-300">Địa chỉ</span>
              <input type="text" data-buyer="address" placeholder="(B2B)"
                     class="px-2 py-1 rounded bg-white/5 border border-border text-slate-200 placeholder-slate-500 focus:border-accent focus:outline-none">
            </label>
            <label class="flex flex-col gap-0.5">
              <span class="text-slate-300">E-mail</span>
              <input type="text" data-buyer="email"
                     class="px-2 py-1 rounded bg-white/5 border border-border text-slate-200 placeholder-slate-500 focus:border-accent focus:outline-none">
            </label>
            <label class="flex flex-col gap-0.5">
              <span class="text-slate-300">Số điện thoại</span>
              <input type="text" data-buyer="phone"
                     class="px-2 py-1 rounded bg-white/5 border border-border text-slate-200 placeholder-slate-500 focus:border-accent focus:outline-none">
            </label>
            <label class="flex flex-col gap-0.5">
              <span class="text-slate-300">Số tài khoản</span>
              <input type="text" data-buyer="account_no"
                     class="px-2 py-1 rounded bg-white/5 border border-border text-slate-200 placeholder-slate-500 focus:border-accent focus:outline-none">
            </label>
            <label class="flex flex-col gap-0.5">
              <span class="text-slate-300">Ngân hàng</span>
              <input type="text" data-buyer="bank"
                     class="px-2 py-1 rounded bg-white/5 border border-border text-slate-200 placeholder-slate-500 focus:border-accent focus:outline-none">
            </label>
            <label class="flex flex-col gap-0.5 sm:col-span-2">
              <span class="text-slate-300">Hình thức thanh toán</span>
              <select data-buyer="payment_method"
                      class="px-2 py-1 rounded bg-white/5 border border-border text-slate-200 focus:border-accent focus:outline-none">
                <option value="Tiền mặt/Chuyển khoản" selected>Tiền mặt/Chuyển khoản</option>
                <option value="Tiền mặt">Tiền mặt</option>
                <option value="Chuyển khoản">Chuyển khoản</option>
              </select>
            </label>
          </div>
        `;
        wrap.parentElement.insertBefore(buyerForm, wrap.nextSibling);
      }

      // 3. Add the action bar AFTER the table (and form, if any) —
      //    Add row / Save / Export CSV / Excel / Tạo hóa đơn.
      const actionBar = document.createElement('div');
      actionBar.className = 'flex flex-wrap gap-2 mt-2 mb-2 items-center';
      // Note: the preview's action bar deliberately has no Excel button —
      // raw xlsx is the wrong artefact here (it's the unfiltered CukCuk
      // export, not the invoice/mapped data). The raw section above has
      // its own Excel button for that. Here we offer CSV export of the
      // mapped invoice rows.
      actionBar.innerHTML = `
        <button type="button" data-act="add"   class="px-3 py-1 text-xs rounded bg-emerald-500/20 hover:bg-emerald-500/40 border border-emerald-400/30">${this.escapeHTML(i18n.addRow)}</button>
        <button type="button" data-act="save"  class="px-3 py-1 text-xs rounded bg-sky-500/20 hover:bg-sky-500/40 border border-sky-400/30">${this.escapeHTML(i18n.save)}</button>
        <button type="button" data-act="export" class="px-3 py-1 text-xs rounded bg-white/10 hover:bg-white/20 border border-white/20">${this.escapeHTML(i18n.exportCsv)}</button>
        ${showCreateBtn ? `<button type="button" data-act="invoice" class="px-3 py-1 text-xs rounded bg-amber-500/30 hover:bg-amber-500/50 border border-amber-400/40">${this.escapeHTML(i18n.createInv)}</button>` : ''}
        <span data-role="status" class="text-xs text-slate-400 ml-1"></span>
      `;
      const insertAfter = buyerForm || wrap;
      insertAfter.parentElement.insertBefore(actionBar, insertAfter.nextSibling);
      const setStatus = (msg, klass='text-slate-400') => {
        const s = actionBar.querySelector('[data-role=status]');
        s.textContent = msg || '';
        s.className = 'text-xs ml-1 ' + klass;
      };

      // Add row
      actionBar.querySelector('[data-act=add]').addEventListener('click', () => {
        this.cukcukShowAddForm(table, totalRow, i18n);
      });
      // Save
      actionBar.querySelector('[data-act=save]').addEventListener('click', async () => {
        setStatus(i18n.saving);
        try {
          const rows = this.cukcukReadRowsFromTable(table);
          const r = await fetch('/api/skills/cukcuk-daily-invoice/edit-rows', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
              version_id: versionId,
              rows,
              profile_id: this.activeProfileId || '',
              filename: sourceFilename || '',
            }),
          });
          if (!r.ok) throw new Error('HTTP ' + r.status + ': ' + await r.text());
          const j = await r.json();
          setStatus(i18n.savedRows(j.row_count), 'text-emerald-400');
        } catch (e) {
          setStatus(i18n.errorPrefix + e.message, 'text-rose-400');
        }
      });
      // Export CSV (client-side)
      actionBar.querySelector('[data-act=export]').addEventListener('click', () => {
        const rows = this.cukcukReadRowsFromTable(table);
        const csv = ['Hàng hóa,Đơn vị,Số lượng,Đơn giá (net),Thành tiền (net),Thuế suất']
          .concat(rows.map(r =>
            [r.name, r.unit, r.qty, r.price_net, r.line_net, r.vat_rate]
              .map(v => '"' + String(v).replace(/"/g, '""') + '"').join(',')
          )).join('\n');
        const blob = new Blob(['' + csv], {type: 'text/csv;charset=utf-8'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `cukcuk-invoice-${reportLabel}.csv`;
        a.click();
        URL.revokeObjectURL(url);
        setStatus(i18n.downloaded, 'text-emerald-400');
      });
      // (Excel button removed from preview action bar — see comment above.)

      // Create invoice — POSTs buyer-info form (if rendered) then sends
      // `/create-invoice <date> -silent`. The skill picks up buyer info
      // from cache; if all B2B fields are blank, it falls back to Khách
      // lẻ defaults.
      const invBtn = actionBar.querySelector('[data-act=invoice]');
      if (invBtn) {
        // Inner helper: persist any pending table edits, POST buyer info
        // (if rendered), then send the slash command. ``invDateArg`` is
        // the LITERAL token to embed in the command — empty string for
        // "today default", "yesterday" for the literal alias, or
        // DD/MM/YYYY for an explicit single day.
        const fireCreateInvoice = async (invDateArg) => {
          // 1. Auto-save the table back to the cached report. The user
          //    may have deleted rows, edited prices, added rows etc.
          //    without clicking 💾 Lưu first; without this step those
          //    edits would be lost when /create-invoice reads the cache.
          //    Mirrors what data-act=save does, but silent on success.
          //    Also passes ``filename`` so the cache is restored to the
          //    clicked table's source filename — important when the user
          //    clicks an OLDER preview after newer /get-report runs
          //    overwrote the cache. Without this, the SkillResult would
          //    echo the wrong filename even though the rows are correct.
          try {
            const tableRows = this.cukcukReadRowsFromTable(table);
            await fetch('/api/skills/cukcuk-daily-invoice/edit-rows', {
              method: 'POST',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({
                version_id: versionId,
                rows: tableRows,
                profile_id: this.activeProfileId || '',
                filename: sourceFilename || '',
              }),
            });
          } catch (e) {
            // Non-fatal: skill will fall back to whatever's already
            // cached. Surface the error so the user knows their edits
            // may not be reflected.
            setStatus(i18n.errorPrefix + 'autosave: ' + e.message, 'text-rose-400');
          }
          // 2. POST buyer info if the form is present.
          if (buyerForm) {
            const buyer = {};
            buyerForm.querySelectorAll('[data-buyer]').forEach(el => {
              buyer[el.dataset.buyer] = (el.value || '').trim();
            });
            buyer.profile_id = this.activeProfileId || '';
            try {
              const r = await fetch('/api/skills/cukcuk-daily-invoice/buyer-info', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(buyer),
              });
              if (!r.ok) throw new Error('HTTP ' + r.status + ': ' + await r.text());
            } catch (e) {
              setStatus(i18n.errorPrefix + e.message, 'text-rose-400');
              return;
            }
          }
          // No -silent flag: chat button is the manual-review path.
          // The user already reviewed line items in the chat preview;
          // they want to confirm the populated form on VIN-HOADON
          // before clicking Lưu tạm themselves. -silent is reserved
          // for daily-task automation typed directly by the user.
          this.input = invDateArg
            ? `/create-invoice ${invDateArg}`
            : '/create-invoice';
          if (typeof this.send === 'function') this.send();
        };

        invBtn.addEventListener('click', async () => {
          // dateToken === 'prompt' → wider-period report (this_month,
          // last_week, etc.) where VIN-HOADON can't invoice the period
          // directly. Replace this single button with two day-pickers
          // (Hôm nay / Hôm qua) so the user picks the invoice date for
          // the cached line items they just reviewed.
          if (dateToken === 'prompt') {
            const wrap = document.createElement('span');
            wrap.className = 'inline-flex items-center gap-1.5';
            wrap.innerHTML = `
              <span class="text-xs text-slate-400 mr-0.5">${this.escapeHTML(i18n.invDatePrompt)}</span>
              <button type="button" data-pick="today"
                class="px-3 py-1 text-xs rounded bg-amber-500/30 hover:bg-amber-500/50 border border-amber-400/40">
                ${this.escapeHTML(i18n.invToday)}
              </button>
              <button type="button" data-pick="yesterday"
                class="px-3 py-1 text-xs rounded bg-amber-500/30 hover:bg-amber-500/50 border border-amber-400/40">
                ${this.escapeHTML(i18n.invYesterday)}
              </button>
            `;
            invBtn.replaceWith(wrap);
            wrap.querySelector('[data-pick=today]').addEventListener('click', () => {
              fireCreateInvoice('');
            });
            wrap.querySelector('[data-pick=yesterday]').addEventListener('click', () => {
              fireCreateInvoice('yesterday');
            });
            return;
          }
          // Non-prompt path: token is "" (today default), "yesterday",
          // or DD-MM-YYYY (rendered as DD/MM/YYYY in the slash command).
          let dateArg = dateToken || '';
          if (dateArg && dateArg.match(/^\d{1,2}-\d{1,2}-\d{4}$/)) {
            dateArg = dateArg.replace(/-/g, '/');
          }
          await fireCreateInvoice(dateArg);
        });
      }
    },

    cukcukRecomputeTotal(table) {
      const tbody = table.querySelector('tbody');
      const total = tbody.lastElementChild;
      const data = Array.from(tbody.querySelectorAll('tr')).filter(tr => tr !== total);
      let qSum = 0, lSum = 0;
      data.forEach(tr => {
        const tds = tr.querySelectorAll('td');
        // After delete-col injection: [0]=del, [1]=#, [2]=name, [3]=unit, [4]=qty, [5]=price, [6]=line, [7]=vat
        const qty = parseInt((tds[4]?.textContent || '0').replace(/[^\d-]/g, ''), 10) || 0;
        const line = parseInt((tds[6]?.textContent || '0').replace(/[^\d-]/g, ''), 10) || 0;
        qSum += qty; lSum += line;
      });
      const tds = total.querySelectorAll('td');
      // Total row layout: [0]=del-pad, [1]=Tổng, [2]=, [3]=, [4]=qty, [5]=, [6]=line, [7]=
      if (tds[4]) tds[4].innerHTML = `<strong>${qSum}</strong>`;
      if (tds[6]) tds[6].innerHTML = `<strong>${lSum.toLocaleString('en-US')}</strong>`;
    },

    cukcukReadRowsFromTable(table) {
      const tbody = table.querySelector('tbody');
      const total = tbody.lastElementChild;
      const data = Array.from(tbody.querySelectorAll('tr')).filter(tr => tr !== total);
      return data.map(tr => {
        const tds = tr.querySelectorAll('td');
        const text = (i) => (tds[i]?.textContent || '').trim();
        const num = (i) => parseInt(text(i).replace(/[^\d-]/g, ''), 10) || 0;
        return {
          name: text(2),
          unit: text(3),
          qty: num(4),
          price_net: num(5),
          line_net: num(6),
          vat_rate: text(7) || '8%',
        };
      });
    },

    cukcukShowAddForm(table, totalRow, i18n) {
      i18n = i18n || this.cukcukI18n('');  // safety fallback
      const tbody = table.querySelector('tbody');
      // Build an editable row before the total row
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td class="px-2 py-1 border-b border-white/10">
          <button type="button" data-act="cancel" class="text-rose-400 text-sm" title="${this.escapeHTML(i18n.cancelTip)}">✕</button>
        </td>
        <td class="px-2 py-1 border-b border-white/10">+</td>
        <td class="px-2 py-1 border-b border-white/10"><input data-f="name" placeholder="${this.escapeHTML(i18n.productName)}" class="bg-white/10 px-1 py-0.5 rounded text-xs w-full" /></td>
        <td class="px-2 py-1 border-b border-white/10"><input data-f="unit" placeholder="${this.escapeHTML(i18n.unit)}" class="bg-white/10 px-1 py-0.5 rounded text-xs w-16" value="Phần" /></td>
        <td class="px-2 py-1 border-b border-white/10"><input data-f="qty" type="number" min="1" placeholder="1" class="bg-white/10 px-1 py-0.5 rounded text-xs w-14" value="1" /></td>
        <td class="px-2 py-1 border-b border-white/10"><input data-f="price" type="number" min="0" placeholder="0" class="bg-white/10 px-1 py-0.5 rounded text-xs w-24" /></td>
        <td class="px-2 py-1 border-b border-white/10" data-role="line">0</td>
        <td class="px-2 py-1 border-b border-white/10">
          <input data-f="vat" placeholder="8%" class="bg-white/10 px-1 py-0.5 rounded text-xs w-12" value="8%" />
          <button type="button" data-act="ok" class="text-emerald-400 text-sm ml-1" title="${this.escapeHTML(i18n.addTip)}">✓</button>
        </td>
      `;
      tbody.insertBefore(tr, totalRow);
      const get = (f) => tr.querySelector(`[data-f="${f}"]`).value.trim();
      const setLine = () => {
        const q = parseInt(get('qty') || '0', 10);
        const p = parseInt(get('price') || '0', 10);
        tr.querySelector('[data-role="line"]').textContent = (q*p).toLocaleString('en-US');
      };
      ['qty','price'].forEach(f => tr.querySelector(`[data-f="${f}"]`).addEventListener('input', setLine));
      tr.querySelector('[data-act="cancel"]').addEventListener('click', () => tr.remove());
      tr.querySelector('[data-act="ok"]').addEventListener('click', () => {
        const name = get('name'); const unit = get('unit'); const qty = parseInt(get('qty')||'0',10); const price = parseInt(get('price')||'0',10); const vat = get('vat') || '8%';
        if (!name) { tr.querySelector('[data-f="name"]').focus(); return; }
        if (qty <= 0) { tr.querySelector('[data-f="qty"]').focus(); return; }
        if (price < 0) { tr.querySelector('[data-f="price"]').focus(); return; }
        // Replace the editable row with a static one matching the existing layout
        const idx = (Array.from(tbody.querySelectorAll('tr')).indexOf(tr));
        const line = qty * price;
        tr.outerHTML = `
          <tr>
            <td class="cukcuk-del-cell px-2 py-1 border-b border-white/10"><button type="button" class="text-rose-400 hover:text-rose-200 text-sm" title="${this.escapeHTML(i18n.deleteRowTip)}">🗑</button></td>
            <td class="px-2 py-1 border-b border-white/10">${idx}</td>
            <td class="px-2 py-1 border-b border-white/10">${this.escapeHTML(name)}</td>
            <td class="px-2 py-1 border-b border-white/10">${this.escapeHTML(unit || 'Phần')}</td>
            <td class="px-2 py-1 border-b border-white/10">${qty}</td>
            <td class="px-2 py-1 border-b border-white/10">${price.toLocaleString('en-US')}</td>
            <td class="px-2 py-1 border-b border-white/10">${line.toLocaleString('en-US')}</td>
            <td class="px-2 py-1 border-b border-white/10">${this.escapeHTML(vat)}</td>
          </tr>
        `;
        // Re-bind delete on the newly-inserted row (its outerHTML replacement loses listener)
        const newRow = tbody.children[idx];
        if (newRow) {
          const delBtn = newRow.querySelector('.cukcuk-del-cell button');
          if (delBtn) delBtn.addEventListener('click', () => {
            newRow.remove();
            this.cukcukRecomputeTotal(table);
          });
        }
        this.cukcukRecomputeTotal(table);
      });
    },

    escapeHTML(s) {
      return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    },

    // Avatar gradient from palette
    profileGradient(colorIndex) {
      return 'background: ' + AVATAR_PALETTE[(colorIndex || 0) % AVATAR_PALETTE.length];
    },

    activeProfile() {
      return this.profiles.find(p => p.id === this.activeProfileId);
    },

    // Localized status labels based on the active agent's native language.
    // Returns the appropriate word/phrase for the given key ('online' or 'thinking').
    activeStatusLabel(key) {
      const lang = (this.activeProfile()?.native_language || '').toLowerCase();
      const map = {
        online: {
          vietnamese: 'Trực tuyến',
          japanese:   'オンライン',
          korean:     '온라인',
          chinese:    '在线',
          french:     'En ligne',
          spanish:    'En línea',
          portuguese: 'Online',
          german:     'Online',
          thai:       'ออนไลน์',
          indonesian: 'Online',
          arabic:     'متصل',
          hindi:      'ऑनलाइन',
          russian:    'В сети',
        },
        thinking: {
          vietnamese: 'Đang nghĩ…',
          japanese:   '考え中…',
          korean:     '생각 중…',
          chinese:    '思考中…',
          french:     'Réflexion…',
          spanish:    'Pensando…',
          portuguese: 'Pensando…',
          german:     'Denkt nach…',
          thai:       'กำลังคิด…',
          indonesian: 'Sedang berpikir…',
          arabic:     'يفكر…',
          hindi:      'सोच रहा है…',
          russian:    'Думает…',
        },
      };
      const defaults = { online: 'Online', thinking: 'Thinking…' };
      return (map[key] && map[key][lang]) || defaults[key];
    },

    activeAvatarUrl() {
      return this.activeProfile()?.avatar_url || null;
    },

    async removeProfileAvatar(profileId) {
      const r = await fetch(`/api/profiles/${profileId}/avatar`, { method: 'DELETE' });
      if (r.ok) {
        const idx = this.profiles.findIndex(p => p.id === profileId);
        if (idx !== -1) this.profiles[idx] = { ...this.profiles[idx], avatar_url: null };
      }
    },

    async clearConversation(profileId) {
      if (!confirm('Clear conversation history? All messages will be deleted.\n\nThe agent keeps all its knowledge — name, preferences, speech style, relationship history. Only the chat log is removed.')) return;
      try {
        const r = await fetch(`/api/chat/${encodeURIComponent(profileId)}/history`, { method: 'DELETE' });
        if (r.ok) {
          this.messages = [];
          this._historyOldestId = null;
          this._historyHasMore = false;
          this._lastUserMsgId = null;
          this._lastUserMsgSeen = false;
          this._seenAt = null;
          this._seenAtLabel = '';
        }
      } catch(e) { console.error('clearConversation:', e); }
    },

    async toggleMute(profileId) {
      try {
        const r = await fetch(`/api/profiles/${profileId}/mute`, { method: 'POST' });
        if (r.ok) {
          const d = await r.json();
          const idx = this.profiles.findIndex(p => p.id === profileId);
          if (idx !== -1) this.profiles[idx] = { ...this.profiles[idx], notifications_muted: d.muted };
        }
      } catch(e) { console.error('toggleMute:', e); }
    },

    triggerProfileAvatarUpload(profileId) {
      this._avatarUploadTarget = profileId;
      this.$refs.avatarFileInput.click();
    },

    async onAvatarFileSelected(event) {
      const file = event.target.files?.[0];
      event.target.value = '';
      if (!file || !this._avatarUploadTarget) return;
      const profileId = this._avatarUploadTarget;
      this._avatarUploadTarget = null;
      const fd = new FormData();
      fd.append('file', file);
      try {
        const r = await fetch(`/api/profiles/${profileId}/avatar`, { method: 'POST', body: fd });
        let d = {};
        try { d = await r.json(); } catch(_) {}
        if (r.ok && d.ok) {
          const idx = this.profiles.findIndex(p => p.id === profileId);
          if (idx !== -1) this.profiles[idx] = { ...this.profiles[idx], avatar_url: d.avatar_url };
        } else {
          alert(d.error || d.detail || `Upload failed (HTTP ${r.status})`);
        }
      } catch(e) { alert('Network error: ' + e.message); }
    },

    // Returns the skill list for the currently active profile
    activeProfileSkills() {
      const p = this.profiles.find(p => p.id === this.activeProfileId);
      const skills = p && p.skills ? p.skills : [];
      return Array.isArray(skills) ? skills.filter(s => typeof s === 'string') : [];
    },

    // Age of the currently active agent (0 if unknown)
    agentAge() {
      const p = this.profiles.find(p => p.id === this.activeProfileId);
      return p ? (p.agent_age || 0) : 0;
    },

    // Skills visible in the modal: defaults always shown; others hidden if agent is too young.
    // The 'ageri' platform profile has no age → no restriction.
    visibleSkills() {
      const age = this.agentAge();
      const isAgeri = this.activeProfileId === 'ageri';
      if (isAgeri || !age) return this.skillsCatalog;
      return this.skillsCatalog.filter(s => s.is_default || (s.min_age || 0) <= age);
    },

    // Chips row — skills that should render as assigned pills.
    // Defaults that pass the age gate + all externally-assigned non-defaults.
    assignedSkillsForChips() {
      return this.visibleSkills().filter(s => this.isSkillAssigned(s));
    },

    // Age-gated default skills shown greyed out ("Requires X+") so the user
    // sees what they'd unlock at a higher age. External skills never appear here.
    ageGatedDefaults() {
      const age = this.agentAge();
      if (this.activeProfileId === 'ageri' || !age) return [];
      return this.skillsCatalog.filter(s => s.is_default && (s.min_age || 0) > age);
    },

    // Dropdown candidates — installed external skills not yet assigned,
    // filtered by the search query (matches name, id, or description).
    addableSkills() {
      const assignedIds = new Set(this.assignedSkillsForChips().map(s => s.id));
      const q = (this.skillSearchQuery || '').trim().toLowerCase();
      return this.skillsCatalog
        .filter(s => !s.is_default && !assignedIds.has(s.id))
        .filter(s => !q
          || (s.name || '').toLowerCase().includes(q)
          || (s.id || '').toLowerCase().includes(q)
          || (s.description || '').toLowerCase().includes(q))
        .slice(0, 20);
    },

    // Count of extra (non-default external) skills assigned to the active profile
    activeExtraSkillCount() {
      return this.activeProfileSkills().filter(s => s.includes('/')).length;
    },

    // True if this skill is assigned/active for the agent.
    // For default skills: determined purely by age gate (not by profile.skills list).
    // The 'ageri' platform profile has no age → all defaults always on.
    isSkillAssigned(skill) {
      if (skill.is_default) {
        const isAgeri = this.activeProfileId === 'ageri';
        if (isAgeri) return true;
        return this.agentAge() >= (skill.min_age || 0);
      }
      const skills = this.activeProfileSkills();
      if (skills.length === 0) return true; // empty = all allowed
      return skills.includes(skill.id);
    },

    async openExtraSkillsModal() {
      this.skillsModalOpen = true;
      this.skillsSaved = false;
      this.skillSearchQuery = '';
      this.skillSearchFocused = false;
      await this.ensureSkillsCatalogLoaded();
    },

    // Lazy fetch shared by the Skills picker and the per-skill ? popover.
    async ensureSkillsCatalogLoaded() {
      if (this.skillsCatalog.length > 0) return;
      try {
        const r = await fetch('/api/skills/catalog');
        if (r.ok) this.skillsCatalog = await r.json();
      } catch(e) { console.error('Skills catalog fetch failed', e); }
    },

    activateSkill(skill) {
      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
      this.ws.send(JSON.stringify({
        type: 'skill_activate',
        profile_id: this.activeProfileId,
        skill_key: skill.id,
      }));
    },

    deactivateSkill() {
      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
      this.ws.send(JSON.stringify({
        type: 'skill_deactivate',
        profile_id: this.activeProfileId,
      }));
    },

    // Confirmed exit from the active-skill pill — also aborts any running
    // skill sub-process (browser automation, etc.) so the user isn't left
    // with a hanging worker after they click "Thoát".
    exitActiveSkill() {
      this.skillExitConfirming = false;
      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
      // Send an abort signal first so any in-flight handle() (long-running
      // browser automation, vision_click loops, etc.) can stop cleanly.
      try {
        this.ws.send(JSON.stringify({
          type: 'skill_abort',
          profile_id: this.activeProfileId,
        }));
      } catch (e) { /* best effort */ }
      this.deactivateSkill();
    },

    // Stop the in-flight skill run WITHOUT exiting the skill. Sends only
    // skill_abort — the skill stays active so the user can immediately
    // re-send a command (e.g. correct a date). Distinct from exitActiveSkill
    // which also fires skill_deactivate and tears down the tab.
    stopSkillRun() {
      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
      try {
        this.ws.send(JSON.stringify({
          type: 'skill_abort',
          profile_id: this.activeProfileId,
        }));
      } catch (e) { /* best effort */ }
      // Clear the local timer immediately — the server will also send
      // skill_run_done implicitly when thinking flips to false.
      this._skillRunStartByKey = {};
    },

    // Reset the active skill's session: wipes its tab thread (DB + UI) and
    // its server-side session cache. Preserves agent's long-term memory of
    // the user. Called after the two-step confirm in the sub-banner.
    async resetSkillSession() {
      this.skillResetConfirming = false;
      const pid = this.activeProfileId;
      const skillKey = this.activeSkillMap[pid]?.key;
      if (!pid || !skillKey) return;
      try {
        const r = await fetch(
          `/api/chat/${encodeURIComponent(pid)}/skill/${skillKey.split('/').map(encodeURIComponent).join('/')}/session`,
          { method: 'DELETE' },
        );
        if (!r.ok) {
          console.warn('[reset-session] server rejected:', r.status, await r.text());
          return;
        }
      } catch (e) {
        console.warn('[reset-session] network error:', e);
        return;
      }
      // Drop the skill's thread from the local view so the UI matches the
      // server's now-empty state without a reload. Messages tab is untouched.
      this.messages = this.messages.filter(m => m.skill_key !== skillKey);
    },

    async toggleSkillAssignment(skillId) {
      // Guard: default skills cannot be toggled
      const skillObj = this.skillsCatalog.find(s => s.id === skillId);
      if (skillObj && skillObj.is_default) return;

      const p = this.profiles.find(p => p.id === this.activeProfileId);
      if (!p) return;
      // If empty list (= all), expand to full explicit list before toggling.
      // Exclude default skills — they are managed by age, not the profile.skills list.
      const nonDefaultIds = this.skillsCatalog.filter(s => !s.is_default).map(s => s.id);
      let current = p.skills && p.skills.length > 0
        ? [...p.skills]
        : nonDefaultIds;
      const assigned = current.includes(skillId);
      const next = assigned ? current.filter(s => s !== skillId) : [...current, skillId];
      // If unassigning an active skill, deactivate first so the pill goes away
      // and the server stops routing to it.
      if (assigned && this.activeSkillMap[this.activeProfileId]?.key === skillId) {
        this.deactivateSkill();
      }
      // Optimistic update
      p.skills = next;
      this.skillsSaving = true;
      this.skillsSaved = false;
      try {
        const r = await fetch(`/api/profiles/${p.id}/skills/assign`, {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ skills: next }),
        });
        const d = await r.json();
        if (r.ok && d.ok) {
          p.skills = d.skills;
          this.skillsSaved = true;
          setTimeout(() => { this.skillsSaved = false; }, 2000);
        } else {
          p.skills = current; // rollback
        }
      } catch(e) { p.skills = current; }
      this.skillsSaving = false;
    },

    // Handle file selection from the hidden file input
    handleFileAttach(event) {
      const files = Array.from(event.target.files || []);
      if (!files.length) return;
      // For now just show the filenames in the input as a note
      const names = files.map(f => f.name).join(', ');
      this.input = (this.input ? this.input + '\n' : '') + `[Attached: ${names}]`;
      event.target.value = '';
      this.$nextTick(() => {
        this.$refs.input.focus();
        this.autoResize(this.$refs.input);
      });
    },

    // Callout variant → Tailwind classes (light bg for float card)
    calloutClasses(variant) {
      const map = {
        info:    'bg-blue-50 border-blue-300 text-blue-800',
        warning: 'bg-amber-50 border-amber-300 text-amber-800',
        error:   'bg-red-50 border-red-300 text-red-800',
        success: 'bg-green-50 border-green-300 text-green-800',
        tip:     'bg-violet-50 border-violet-300 text-violet-800',
      };
      return map[variant] || map.info;
    },

    // Callout variant → dark theme Tailwind classes (for inline cards)
    calloutClassesDark(variant) {
      const map = {
        info:    'bg-blue-950/40 border-blue-700 text-blue-200',
        warning: 'bg-amber-950/40 border-amber-600 text-amber-200',
        error:   'bg-red-950/40 border-red-700 text-red-200',
        success: 'bg-green-950/40 border-green-700 text-green-200',
        tip:     'bg-violet-950/40 border-violet-700 text-violet-200',
      };
      return map[variant] || map.info;
    },

    // ── Messaging ───────────────────────────────────────────────────────────

    async send() {
      const text = this.input.trim();
      if (!text || !this.ws || this.ws.readyState !== WebSocket.OPEN) return;

      // Auto-forward: if the user typed `/<command>` on the Messages tab and
      // exactly one installed skill declares a command with that name,
      // route the message into that skill's tab instead. Activates the skill
      // first if needed; switches the tab; drops a breadcrumb in Messages
      // so the user sees where it went. Ambiguous matches (>1 skill claims
      // the same command) and unknown commands fall through to existing
      // routing. Skill tabs already route to the skill via tab_skill_key,
      // so this only fires from the Messages tab.
      let forwardedSkillName = null;
      if ((this.activeChatTab === 'messages' || !this.activeChatTab) && text.startsWith('/')) {
        // Defensive: if init's eager load is still in-flight (or failed),
        // make sure the catalog is loaded before deciding. await is cheap
        // when already populated (the helper short-circuits).
        if (!this.skillsCatalog || this.skillsCatalog.length === 0) {
          await this.ensureSkillsCatalogLoaded();
        }
        const slashWord = text.slice(1).split(/\s+/)[0].toLowerCase();
        if (slashWord) {
          // Two-tier matcher:
          //   1) Top-level slash_command match (skills with slash_command="invoice"
          //      claim any "/invoice ..." input — covers /-autocomplete output).
          //   2) Sub-command name match (skill whose commands[].name=="create"
          //      claims a bare "/create" — covers the legacy short form).
          // slash_command wins when both are possible because it's more
          // specific (the user named the skill, not just a verb).
          let matches = (this.skillsCatalog || []).filter(s =>
            (s.slash_command || '').toLowerCase() === slashWord
          );
          if (matches.length === 0) {
            matches = (this.skillsCatalog || []).filter(s =>
              Array.isArray(s.commands) &&
              s.commands.some(c => (c.name || '').toLowerCase() === slashWord)
            );
          }
          if (matches.length === 1) {
            const sk = matches[0];
            forwardedSkillName = sk.name || sk.id;
            // Activate the skill if not already (no-op for the right profile).
            const already = this.activeSkillMap[this.activeProfileId]?.key === sk.id;
            if (!already) {
              this.ws.send(JSON.stringify({
                type: 'skill_activate',
                profile_id: this.activeProfileId,
                skill_key: sk.id,
              }));
            }
            // Switch the tab now so addMessage tags the user bubble with
            // the skill's key — keeps the message in the skill's thread,
            // not the Messages thread.
            this.activeChatTab = sk.id;
          }
          // matches.length > 1 → ambiguous; fall through. Future: prompt.
        }
      }

      // Snapshot the reply anchor BEFORE addMessage clears nothing —
      // we need the values for both the optimistic bubble's quote card
      // AND the WS frame.
      const _replyAnchor = this.replyingTo;
      this.addMessage('user', text, null, null, undefined, _replyAnchor);
      // Within a wizard run, the user just sent their reply — the next
      // legal interaction is whatever Ageri returns next (a new chat
      // question or a card). Disable the input until that arrives.
      if (this.wizardActive) this.wizardAcceptingChatInput = false;
      // Cancel the reply state now so the composer mini-card disappears
      // on send. The optimistic bubble already snapshot the values it needs.
      this.replyingTo = null;

      // Breadcrumb in Messages tab so the user sees the auto-forward
      // happened. Pushed AFTER addMessage so it sits below the user
      // bubble in the Messages thread (skill_key=null keeps it scoped).
      if (forwardedSkillName) {
        this.messages.push({
          id: ++this.msgCounter,
          role: 'system',
          type: 'system',
          text: `→ Forwarded to ${forwardedSkillName}`,
          ts: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
          dateKey: this._lastDateKey(),
          skill_key: null,
        });
      }

      this.input = '';
      this.$nextTick(() => {
        this.autoResize(this.$refs.input);
        this.$refs.input && this.$refs.input.focus();
      });

      // tab_skill_key tells the server which thread this message belongs to.
      // 'messages' tab → null (route through general flow even if a skill is
      // active for this profile). A skill tab → the skill_key (force-route
      // through that skill). The user's tab choice IS the routing context.
      const tabSkillKey = (this.activeChatTab && this.activeChatTab !== 'messages')
        ? this.activeChatTab : null;

      this.ws.send(JSON.stringify({
        text,
        profile_id: this.activeProfileId,
        tab_skill_key: tabSkillKey,
        reply_to_id: _replyAnchor ? _replyAnchor.db_id : null,
      }));
    },

    // ── Quote-reply (Phase 4E) ──────────────────────────────────────────
    // Click "Reply" on a bubble → composer shows a mini quote card →
    // next send() carries reply_to_id (the source message's DB id).
    // Plain user messages without a db_id (still in flight) are skipped
    // silently — replying to a not-yet-acked message would race the
    // server and we'd rather just not. Agent messages always have a
    // db_id by the time they're rendered.
    startReply(msg) {
      if (!msg) return;
      if (!msg.db_id) return;
      this.replyingTo = {
        id: msg.id,
        db_id: msg.db_id,
        role: msg.role,
        text: (msg.text || '').slice(0, 200),
      };
      // Move cursor to composer so the user can start typing immediately.
      this.$nextTick(() => {
        if (this.$refs.input) {
          this.$refs.input.focus();
        }
      });
    },
    cancelReply() {
      this.replyingTo = null;
    },
    // Tap on a quote-preview → smooth-scroll to the source bubble + a
    // brief yellow flash so the user can spot it. Falls back gracefully
    // if the source isn't in the rendered list (e.g. paginated out, or
    // deleted) — flashing nothing is preferable to crashing.
    _jumpToMessage(dbId) {
      if (!dbId) return;
      const target = this.messages.find(m => m.db_id === dbId);
      if (!target) return;
      const el = document.querySelector(`[data-msg-counter-id="${target.id}"]`);
      if (!el) return;
      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
      this._flashMsgId = target.id;
      setTimeout(() => {
        if (this._flashMsgId === target.id) this._flashMsgId = null;
      }, 1500);
    },

    // ── Wake confirmation ───────────────────────────────────────────────
    confirmWake(confirmed) {
      if (!this.wakePrompt || !this.ws || this.ws.readyState !== WebSocket.OPEN) {
        this.wakePrompt = null;
        return;
      }
      this.ws.send(JSON.stringify({
        type: confirmed ? 'wake_confirm' : 'wake_cancel',
        profile_id: this.wakePrompt.profile_id,
      }));
      this.wakePrompt = null;
    },

    // ── Message edit / delete ───────────────────────────────────────────

    startEdit(msg) {
      this.editingMsgId = msg.id;
      this.editingText = msg.text;
      this.$nextTick(() => {
        const ta = document.querySelector(`[data-edit-ta="${msg.id}"]`);
        if (ta) { ta.focus(); ta.select(); }
      });
    },

    cancelEdit() {
      this.editingMsgId = null;
      this.editingText = '';
    },

    async saveEdit(msg) {
      const newText = this.editingText.trim();
      if (!newText || newText === msg.text) { this.cancelEdit(); return; }
      // Update UI immediately for responsiveness
      const idx = this.messages.findIndex(m => m.id === msg.id);
      if (idx !== -1) this.messages[idx] = { ...this.messages[idx], text: newText };
      this.cancelEdit();
      // Persist to DB if we have a db_id
      if (msg.db_id) {
        try {
          await fetch(`/api/chat/${encodeURIComponent(this.activeProfileId)}/messages/${msg.db_id}`, {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ content: newText }),
          });
        } catch (_) { /* silently ignore — UI already updated */ }
      }
    },

    async copyMsg(msg) {
      try {
        await navigator.clipboard.writeText(msg.text);
        this._copyDone = msg.id;
        setTimeout(() => { if (this._copyDone === msg.id) this._copyDone = null; }, 1500);
      } catch (_) { /* clipboard unavailable */ }
    },

    // ── Reactions (Phase 4E) ────────────────────────────────────────────
    REACTION_EMOJI: ['❤️', '👍', '😂', '😯', '😢', '😠'],

    // Long-press — mobile equivalent of hover. Opening the picker also
    // pins the floating action strip visible (it shares the same state
    // gate). 500ms is the typical native long-press threshold.
    _longPressTimer: null,
    startLongPress(msg, event) {
      this.cancelLongPress();
      this._longPressTimer = setTimeout(() => {
        this._longPressTimer = null;
        this.openActions(msg);
        // Vibrate where supported — matches the haptic feedback users
        // expect when a chat-app long-press registers.
        if (navigator.vibrate) {
          try { navigator.vibrate(15); } catch (_) {}
        }
      }, 500);
    },
    cancelLongPress() {
      if (this._longPressTimer) {
        clearTimeout(this._longPressTimer);
        this._longPressTimer = null;
      }
    },
    openActions(msg) {
      // Open the picker — its visibility ALSO pins the action strip via
      // the existing class binding `reactionPickerForMsgId === msg.id`.
      this.reactionPickerForMsgId = msg.id;
    },

    async toggleReaction(msg, emoji) {
      // Optimistic local update so the chip feels instant; server response
      // overwrites with the canonical reactions dict.
      if (!msg.db_id) { this.reactionPickerForMsgId = null; return; }
      const reactions = { ...(msg.reactions || {}) };
      const actors = reactions[emoji] ? [...reactions[emoji]] : [];
      const i = actors.indexOf('user');
      if (i >= 0) {
        actors.splice(i, 1);
      } else {
        actors.push('user');
      }
      if (actors.length) {
        reactions[emoji] = actors;
      } else {
        delete reactions[emoji];
      }
      msg.reactions = reactions;
      this.reactionPickerForMsgId = null;
      try {
        const r = await fetch(
          `/api/chat/${encodeURIComponent(this.activeProfileId)}/messages/${msg.db_id}/react`,
          {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ emoji }),
          },
        );
        if (r.ok) {
          const data = await r.json();
          if (data.reactions) msg.reactions = data.reactions;
        }
      } catch (_) { /* optimistic update remains */ }
    },

    reactionEntries(msg) {
      // Render order: by first-actor's seniority — agent first, then user.
      // Returns [[emoji, actors], ...].
      const r = msg.reactions || {};
      return Object.entries(r);
    },

    reactionTooltip(actors) {
      // "user", "agent", or "user, agent" — readable for the chip hover title.
      if (!actors || !actors.length) return '';
      return actors.map(a => a === 'agent' ? 'Agent' : 'You').join(', ');
    },

    async deleteMsg(msg) {
      // Remove from UI immediately
      const idx = this.messages.findIndex(m => m.id === msg.id);
      if (idx !== -1) this.messages.splice(idx, 1);
      // Update receipt tracking if we deleted the last user msg
      if (this._lastUserMsgId === msg.id) {
        const prevUser = [...this.messages].reverse().find(m => m.role === 'user');
        this._lastUserMsgId = prevUser?.id ?? null;
      }
      // Persist deletion to DB
      if (msg.db_id) {
        try {
          await fetch(`/api/chat/${encodeURIComponent(this.activeProfileId)}/messages/${msg.db_id}`, {
            method: 'DELETE',
          });
        } catch (_) { /* silently ignore */ }
      }
    },

    // ── Date/time helpers ───────────────────────────────────────────────

    _tsToDisplay(isoOrDate) {
      // Returns { timeStr: "6:42 PM", dateKey: "2026-04-19" }
      let d;
      if (isoOrDate instanceof Date) {
        d = isoOrDate;
      } else {
        // Stored timestamps are always UTC. If the string has no timezone marker
        // (no Z, no +HH:MM) JS would treat it as local time — force UTC by appending Z.
        const s = typeof isoOrDate === 'string' && !/[Z+\-]\d{2}:?\d{2}$/.test(isoOrDate) && !/Z$/.test(isoOrDate)
          ? isoOrDate + 'Z'
          : isoOrDate;
        d = new Date(s);
      }
      if (isNaN(d)) return { timeStr: '', dateKey: '' };
      const timeStr = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      // Use local date (not UTC) so the day separator matches the displayed time.
      const pad = n => String(n).padStart(2, '0');
      const dateKey = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
      return { timeStr, dateKey };
    },

    _datePill(dateKey) {
      // "2026-04-19" → "Today", "Yesterday", or "Saturday, April 19"
      const today = new Date().toISOString().slice(0, 10);
      const yesterday = new Date(Date.now() - 86400000).toISOString().slice(0, 10);
      if (dateKey === today) return 'Today';
      if (dateKey === yesterday) return 'Yesterday';
      const d = new Date(dateKey + 'T12:00:00');
      return d.toLocaleDateString([], { weekday: 'long', month: 'long', day: 'numeric' });
    },

    _lastDateKey() {
      for (let i = this.messages.length - 1; i >= 0; i--) {
        if (this.messages[i].type !== 'separator') return this.messages[i].dateKey || '';
      }
      return '';
    },

    _withSeparators(flatMsgs) {
      // Insert date separator objects between messages from different days.
      const out = [];
      let lastKey = '';
      for (const m of flatMsgs) {
        if (m.type === 'separator') { out.push(m); continue; }
        const key = m.dateKey || '';
        if (key && key !== lastKey) {
          out.push({ id: `sep-${key}`, type: 'separator', dateLabel: this._datePill(key) });
          lastKey = key;
        }
        out.push(m);
      }
      return out;
    },

    // Filter `messages` for the current tab. 'messages' tab shows only
    // unscoped messages (skill_key null/undefined). A skill tab shows only
    // that skill's messages. Day-separator pseudo-messages always show.
    visibleMessages() {
      const tab = this.activeChatTab || 'messages';
      const isSkillTab = tab !== 'messages';
      return this.messages.filter(m => {
        if (m.type === 'separator') return true;
        const k = m.skill_key || null;
        return isSkillTab ? k === tab : !k;
      });
    },

    addMessage(role, text, isoTs = null, dbId = null, skillKey = undefined, replyAnchor = null) {
      const { timeStr, dateKey } = this._tsToDisplay(isoTs ? new Date(isoTs) : new Date());
      // Insert day separator if this message is on a new day
      if (dateKey && dateKey !== this._lastDateKey()) {
        this.messages.push({ id: `sep-${dateKey}-${this.msgCounter}`, type: 'separator', dateLabel: this._datePill(dateKey) });
      }
      const msgId = ++this.msgCounter;
      // For agent messages, pick up any pending DB id from the server's message_ids frame
      const resolvedDbId = dbId ?? (role === 'agent' ? this._pendingAgentDbId : null);
      if (role === 'agent') this._pendingAgentDbId = null;
      // skill_key resolution order:
      //   1. Explicit skillKey arg from caller (server-supplied for responses)
      //   2. _pendingAgentSkillKey (set by message_ids frame for the next agent reply)
      //   3. null — general chat. The server's message_ids retag will fix
      //      user messages whose tagging differs from server truth.
      let skill_key = null;
      if (skillKey !== undefined) {
        skill_key = skillKey || null;
      } else if (role === 'agent' && this._pendingAgentSkillKey !== undefined) {
        skill_key = this._pendingAgentSkillKey;
        this._pendingAgentSkillKey = undefined;
      } else if (role === 'user') {
        // Optimistic: if user is currently on a skill tab, pre-tag with it.
        // Server retag via message_ids will correct if the message turned
        // out to be untagged general chat.
        skill_key = (this.activeChatTab !== 'messages') ? this.activeChatTab : null;
      }
      // Quote-reply (Phase 4E): denormalised snapshot from the anchor
      // so the bubble can render its quote card immediately, without
      // round-tripping the server. Server's history-load path returns
      // the same shape (reply_to_id/text/author).
      // For agent role: pull from _pendingAgentReplyTo (set by the
      // message_ids frame) — only the FIRST agent bubble in a split
      // gets the quote card; subsequent chunks of the same response
      // share the db_id but only the first carries the visual anchor.
      let reply_to_id = replyAnchor ? replyAnchor.db_id : null;
      let reply_to_text = replyAnchor ? replyAnchor.text : null;
      let reply_to_author = replyAnchor ? replyAnchor.role : null;
      if (role === 'agent' && this._pendingAgentReplyTo) {
        reply_to_id = this._pendingAgentReplyTo.db_id;
        reply_to_text = this._pendingAgentReplyTo.text;
        reply_to_author = this._pendingAgentReplyTo.role;
        this._pendingAgentReplyTo = null;
      }
      this.messages.push({
        id: msgId, role, text, ts: timeStr, dateKey,
        db_id: resolvedDbId, skill_key, reactions: {},
        reply_to_id, reply_to_text, reply_to_author,
      });
      if (role === 'user') {
        this._lastUserMsgId = msgId;
        this._lastUserMsgSeen = false;
      }
      if (role === 'agent') {
        // Agent responded — mark the last user message as seen, capture timestamp
        this._lastUserMsgSeen = true;
        this._seenAt = new Date();
        this._seenAtLabel = 'Seen ' + this._seenAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      }
      this.$nextTick(() => {
        const el = this.$refs.messages;
        if (el) el.scrollTop = el.scrollHeight;
      });
    },

    autoResize(el) {
      if (!el) return;
      el.style.height = 'auto';
      el.style.height = Math.min(el.scrollHeight, 200) + 'px';
    },

    insertEmoji(unicode) {
      const ta = this.$refs.input;
      const start = ta.selectionStart;
      const end = ta.selectionEnd;
      this.input = this.input.slice(0, start) + unicode + this.input.slice(end);
      this.emojiOpen = false;
      this.$nextTick(() => {
        ta.selectionStart = ta.selectionEnd = start + unicode.length;
        ta.focus();
        this.autoResize(ta);
      });
    },

    applyFormat(type) {
      const ta = this.$refs.input;
      const start = ta.selectionStart;
      const end = ta.selectionEnd;
      const sel = this.input.slice(start, end);
      const before = this.input.slice(0, start);
      const after = this.input.slice(end);
      const fmts = {
        bold:       ['**', '**', 'bold text'],
        italic:     ['_', '_', 'italic text'],
        strike:     ['~~', '~~', 'strikethrough'],
        code:       ['`', '`', 'code'],
        codeblock:  ['```\n', '\n```', 'code block'],
        link:       ['[', '](url)', 'link text'],
        blockquote: ['> ', '', 'quote'],
        ul:         ['- ', '', 'item'],
        ol:         ['1. ', '', 'item'],
      };
      const [prefix, suffix, placeholder] = fmts[type] || ['', '', ''];
      const inner = sel || placeholder;
      this.input = before + prefix + inner + suffix + after;
      this.$nextTick(() => {
        const s = start + prefix.length;
        ta.selectionStart = s;
        ta.selectionEnd = s + inner.length;
        ta.focus();
        this.autoResize(ta);
      });
    },

    // ── Billing ─────────────────────────────────────────────────────────────

    async loadBalance() {
      try {
        const r = await fetch('/api/billing/balance');
        const data = await r.json();
        this.credits = data.credits ?? null;
      } catch (_) {
        this.credits = null;
      }
    },

    closeTopup() {
      this.showTopup = false;
      this.topupStep = 'pick';
      this.selectedTier = null;
      this.qrLink = null;
      this.cancelQRPoll();
    },

    selectTier(pkg) {
      this.selectedTier = pkg;
      {% if show_vietqr %}
      this.topupStep = 'method';
      {% else %}
      this.checkout(pkg.priceId);
      {% endif %}
    },

    checkout(priceId) {
      {% if paddle_client_token %}
      Paddle.Checkout.open({
        items: [{ priceId, quantity: 1 }],
        settings: { displayMode: 'overlay', theme: 'dark' },
      });
      this.closeTopup();
      {% endif %}
    },

    async startVietQR() {
      this.topupStep = 'qr';
      this.qrLink = null;
      try {
        const r = await fetch(`/api/payment/get_qr_link/${encodeURIComponent('{{ namespace }}')}?tier=${this.selectedTier.tier}`);
        const data = await r.json();
        this.qrLink = data.qr_link || null;
      } catch (_) {
        this.qrLink = null;
      }
      this.startQRPoll();
    },

    startQRPoll() {
      this.cancelQRPoll();
      let attempts = 0;
      const maxAttempts = 60; // 5 min at 5s intervals
      const tier = this.selectedTier?.tier;

      this._qrPollTimer = setInterval(async () => {
        attempts++;
        if (attempts > maxAttempts) { this.cancelQRPoll(); return; }
        try {
          const r = await fetch(`/api/payment/check_complete/${encodeURIComponent('{{ namespace }}')}?tier=${tier}`);
          const data = await r.json();
          if (data.paid) {
            this.cancelQRPoll();
            this.topupStep = 'success';
            setTimeout(() => this.loadBalance(), 500);
          }
        } catch (_) {}
      }, 5000);
    },

    cancelQRPoll() {
      if (this._qrPollTimer) { clearInterval(this._qrPollTimer); this._qrPollTimer = null; }
    },
  }
}
</script>
{% endblock %}