{% extends "base.html" %}
{% block title %}Settings — Ageri{% endblock %}
{% block head %}
<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('settingsPage', () => ({
      isMobile: window.innerWidth < 768,
      section: window.innerWidth < 768 ? null : 'api-key',
      keyMode: {{ key_mode | tojson }},
      // Two-step logout confirmation. First click flips this to true;
      // a 4s timer auto-reverts so a stray tap doesn't leave the row
      // in a confirming state forever.
      logoutConfirming: false,
      _logoutRevertTimer: null,
      requestLogout() {
        this.logoutConfirming = true;
        if (this._logoutRevertTimer) clearTimeout(this._logoutRevertTimer);
        this._logoutRevertTimer = setTimeout(() => {
          this.logoutConfirming = false;
          this._logoutRevertTimer = null;
        }, 4000);
      },
      abortLogout() {
        this.logoutConfirming = false;
        if (this._logoutRevertTimer) {
          clearTimeout(this._logoutRevertTimer);
          this._logoutRevertTimer = null;
        }
      },
      // ── Theme prefs (localStorage) ──────────────────────────────────────
      themePrefs: (function() {
        try { return JSON.parse(localStorage.getItem('ageri_theme') || '{}'); } catch(_) { return {}; }
      })(),
      // stored pref ('dark' | 'dim' | 'light' | 'auto') — used for tile selection
      get themeName() { return this.themePrefs.theme || 'dark'; },
      get isAuto() { return this.themePrefs.theme === 'auto'; },
      get autoNightTheme() { return this.themePrefs.autoNightTheme || 'dark'; },
      // effective theme actually applied right now (resolves 'auto' to light/dark/dim)
      get effectiveTheme() {
        if (!this.isAuto) return this.themePrefs.theme || 'dark';
        var h = new Date().getHours();
        return (h >= 6 && h < 20) ? 'light' : this.autoNightTheme;
      },
      get accentHex() { return this.themePrefs.accent || '#818cf8'; },
      get fontScale() { return this.themePrefs.fontScale || 1; },
      accentPresets: ['#818cf8','#6366f1','#3b82f6','#0ea5e9','#14b8a6','#10b981','#f472b6','#f59e0b','#ef4444'],
      saveTheme() {
        localStorage.setItem('ageri_theme', JSON.stringify(this.themePrefs));
        window.__ageriApplyTheme && window.__ageriApplyTheme();
      },
      setTheme(t) { this.themePrefs = { ...this.themePrefs, theme: t }; this.saveTheme(); },
      setAutoNightTheme(t) { this.themePrefs = { ...this.themePrefs, autoNightTheme: t }; this.saveTheme(); },
      setAccent(hex) { this.themePrefs = { ...this.themePrefs, accent: hex }; this.saveTheme(); },
      setFontScale(s) { this.themePrefs = { ...this.themePrefs, fontScale: s }; this.saveTheme(); },

      // ── Security ────────────────────────────────────────────────────────
      pwOld: '', pwNew: '', pwConfirm: '', pwSaving: false, pwError: '', pwSaved: false,
      async changePassword() {
        this.pwError = '';
        if (!this.pwOld) { this.pwError = 'Enter your current password.'; return; }
        if (this.pwNew.length < 8) { this.pwError = 'New password must be at least 8 characters.'; return; }
        if (this.pwNew !== this.pwConfirm) { this.pwError = 'New passwords do not match.'; return; }
        this.pwSaving = true;
        try {
          const r = await fetch('/api/settings/password', {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ old_password: this.pwOld, new_password: this.pwNew }),
          });
          const d = await r.json();
          if (d.ok) {
            this.pwOld = ''; this.pwNew = ''; this.pwConfirm = '';
            this.pwSaved = true; setTimeout(() => this.pwSaved = false, 3000);
          } else { this.pwError = d.error || 'Failed to change password.'; }
        } catch(e) { this.pwError = 'Network error.'; }
        this.pwSaving = false;
      },


      resetPassword: '', resetConfirm: '', resetConfirmNs: false, resetSaving: false, resetError: '',
      async factoryReset() {
        if (!this.resetPassword) { this.resetError = 'Enter your password to confirm.'; return; }
        this.resetSaving = true; this.resetError = '';
        try {
          const r = await fetch('/api/settings/factory-reset', {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ password: this.resetPassword }),
          });
          const d = await r.json();
          if (d.ok) {
            // Wipe is done — redirect to get-started (password is gone)
            window.location.href = '/get-started';
          } else { this.resetError = d.error || 'Reset failed.'; }
        } catch(e) { this.resetError = 'Network error.'; }
        this.resetSaving = false;
      },

      // ── Devices (Phase 4A sub-item 5) ───────────────────────────────────
      devicesPayload: { namespace: '', this_device: null, devices: [] },
      devicesLoaded: false,
      editingDeviceLabel: false,
      deviceLabelDraft: '',
      async loadDevices() {
        if (this.devicesLoaded) return;
        try {
          const r = await fetch('/api/devices');
          if (r.ok) this.devicesPayload = await r.json();
        } catch (_) {}
        this.devicesLoaded = true;
      },
      startEditDeviceLabel() {
        // Pre-fill with the configured label (empty if it's still showing
        // the recommended hostname default).
        this.deviceLabelDraft = this.devicesPayload.this_device?.label_is_default
          ? ''
          : (this.devicesPayload.this_device?.label || '');
        this.editingDeviceLabel = true;
      },
      cancelEditDeviceLabel() {
        this.editingDeviceLabel = false;
        this.deviceLabelDraft = '';
      },
      async saveDeviceLabel() {
        const label = (this.deviceLabelDraft || '').trim();
        try {
          const r = await fetch('/api/devices/this/label', {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ label }),
          });
          const d = await r.json().catch(() => ({}));
          if (!d.ok) {
            alert(d.error || 'Failed to update device name.');
            return;
          }
          // Refresh the dashboard so we pick up the new label / default-flag.
          this.devicesLoaded = false;
          await this.loadDevices();
        } catch (e) {
          alert('Network error: ' + e.message);
        }
        this.editingDeviceLabel = false;
        this.deviceLabelDraft = '';
      },

      // ── Agents ──────────────────────────────────────────────────────────
      agentProfiles: [],
      agentsLoaded: false,
      agentDeleteRange: {},   // { [profile_id]: '30' | '90' | '180' | 'all' }
      // Inline rename state — only one agent rename at a time.
      renamingAgentId: '',
      renameValue: '',
      renameError: '',
      renameSaving: false,
      startRenameAgent(id, currentName) {
        this.renamingAgentId = id;
        this.renameValue = currentName || '';
        this.renameError = '';
      },
      cancelRenameAgent() {
        this.renamingAgentId = '';
        this.renameValue = '';
        this.renameError = '';
        this.renameSaving = false;
      },
      async commitRenameAgent(id) {
        const proposed = (this.renameValue || '').trim();
        if (!proposed) {
          this.renameError = 'Name is required.';
          return;
        }
        this.renameSaving = true;
        this.renameError = '';
        try {
          const r = await fetch(`/api/profiles/${encodeURIComponent(id)}/rename`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name: proposed }),
          });
          const d = await r.json().catch(() => ({}));
          if (!r.ok || !d.ok) {
            this.renameError = d.error || `Rename failed (HTTP ${r.status}).`;
            return;
          }
          // Patch the agent in-place so the UI updates without a reload.
          const idx = this.agentProfiles.findIndex(p => p.id === id);
          if (idx >= 0 && d.profile) {
            this.agentProfiles[idx] = { ...this.agentProfiles[idx], ...d.profile };
          }
          this.cancelRenameAgent();
        } catch (e) {
          this.renameError = 'Network error: ' + e.message;
        } finally {
          this.renameSaving = false;
        }
      },
      async exportAgent(profileId) {
        const agentName = this.agentProfiles.find(p => p.id === profileId)?.name || profileId;
        // The whole Agents section is behind a single re-auth gate
        // (agentsUnlocked), so a per-action login prompt would be
        // redundant. The user already proved identity to enter the
        // section. We just ask for the bundle password (file
        // encryption layer).
        const password = prompt(`Set a password to protect ${agentName}'s export file.\n\nYou will need this password to import the file on another device.`);
        if (password === null) return;  // user cancelled
        if (!password.trim()) { alert('A password is required. Export cancelled.'); return; }
        try {
          const r = await fetch(`/api/profiles/${encodeURIComponent(profileId)}/export`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ password }),
          });
          if (!r.ok) {
            const d = await r.json().catch(() => ({}));
            alert(d.error || 'Export failed.'); return;
          }
          // Trigger browser download
          const blob = await r.blob();
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url; a.download = `${profileId}.ageri`; a.click();
          URL.revokeObjectURL(url);
        } catch(e) { alert('Network error: ' + e.message); }
      },
      // Global Import — always creates a NEW agent from a .ageri
      // bundle. The backend ignores any agent context and resolves a
      // fresh id via ageri.bundle.import_bundle (collision-free).
      importAgentBusy: false,
      async importAgentGlobal(event) {
        const file = event.target.files?.[0];
        if (!file) return;
        const password = prompt('Enter the password for this .ageri file.');
        if (password === null) { event.target.value = ''; return; }
        const fd = new FormData();
        fd.append('file', file);
        fd.append('password', password);
        this.importAgentBusy = true;
        try {
          const r = await fetch('/api/profiles/import', { method: 'POST', body: fd });
          const d = await r.json().catch(() => ({}));
          if (r.ok && d.ok) {
            this.saved = true; setTimeout(() => this.saved = false, 3000);
            // Refresh the agent list — the imported agent will land
            // in Active by default. If their stored id collided with
            // an existing one, the bundle picks a fresh suffix
            // (e.g. "mai_1") so both stay distinct.
            await this.loadAgentProfiles();
          } else {
            alert(d.error || `Import failed (HTTP ${r.status}).`);
          }
        } catch(e) {
          alert('Network error: ' + e.message);
        } finally {
          this.importAgentBusy = false;
          event.target.value = '';
        }
      },

      agentDeletingSet: [],
      agentDeleteDoneSet: [],
      _isDeleting(id) { return this.agentDeletingSet.includes(id); },
      _isDone(id) { return this.agentDeleteDoneSet.includes(id); },
      agentStats: {},   // { [profile_id]: { message_count, memory_entries, memory_size_kb, oldest_message } }
      // ── Agent state tabs (Hidden / Hibernated / Trash) ──────────────────
      // Active = the existing rich list. Hidden + Hibernated are gated by
      // a password re-prompt before content renders (privacy intent —
      // those agents shouldn't even leak their existence to a casual
      // observer who's already past the main login). Trash has no gate
      // (utilitarian, items are explicitly meant to be recoverable).
      agentTab: 'active',
      // Single unlock for the entire Agents section. One re-auth at
      // section entry; all tabs (Active / Hidden / Hibernated / Trash)
      // render without further prompts. Cleared on full page reload
      // (sessionStorage scope). Replaces the prior per-tab unlock.
      agentsUnlocked: false,
      agentTabLists: { hidden: [], hibernated: [], archived: [] },
      agentsPasswordPromptOpen: false,   // controls the unlock modal
      passwordPromptValue: '',
      passwordPromptError: '',
      _postUnlockNext: '',            // chat URL hash to return to after unlocking (4G.1)
      async loadAgentProfiles() {
        try {
          // Active tab uses the dedicated by-state/active_visible endpoint
          // so hidden agents aren't shown here either (they live on the
          // Hidden tab). Sidebar filtering is in /api/profiles itself.
          const r = await fetch('/api/profiles/by-state/active_visible');
          const d = await r.json();
          const list = Array.isArray(d) ? d : (d.profiles || []);
          this.agentProfiles = list;
          // Fetch stats for each agent in parallel
          const statsResults = await Promise.all(
            list.map(p => fetch(`/api/profiles/${encodeURIComponent(p.id)}/stats`).then(r => r.json()).catch(() => null))
          );
          const statsMap = {};
          list.forEach((p, i) => { if (statsResults[i]) statsMap[p.id] = statsResults[i]; });
          this.agentStats = statsMap;
        } catch(_) {}
        this.agentsLoaded = true;
      },
      async loadAgentsByState(state) {
        try {
          const r = await fetch(`/api/profiles/by-state/${encodeURIComponent(state)}`);
          const d = await r.json();
          this.agentTabLists[state] = Array.isArray(d) ? d : (d.profiles || []);
        } catch (_) {
          this.agentTabLists[state] = [];
        }
      },
      async switchAgentTab(tab) {
        // Section-level gate already enforced — once unlocked, every
        // tab renders without further re-auth. The lock check sits in
        // requireAgentsUnlocked() below, called when the user enters
        // the section.
        this.agentTab = tab;
        if (tab === 'hidden') await this.loadAgentsByState('hidden');
        if (tab === 'hibernated') await this.loadAgentsByState('hibernated');
        if (tab === 'archived') await this.loadAgentsByState('archived');
      },
      // Section entry gate: opens the password modal if this PAGE
      // LOAD hasn't unlocked Agents yet. State is in-memory only —
      // a full page reload (F5) deliberately drops it so the user
      // re-authenticates. SessionStorage is NOT consulted here:
      // it's used purely as a one-shot consume flag for the
      // chat-page URL-guard handoff (see submitPasswordPrompt and
      // chat.html _guardHiddenAgentAccess).
      requireAgentsUnlocked() {
        if (this.agentsUnlocked) return true;
        this.agentsPasswordPromptOpen = true;
        this.passwordPromptValue = '';
        this.passwordPromptError = '';
        return false;
      },
      async submitPasswordPrompt() {
        const password = this.passwordPromptValue;
        if (!password) {
          this.passwordPromptError = 'Password required.';
          return;
        }
        try {
          const r = await fetch('/api/auth/verify-password', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ password }),
          });
          const d = await r.json().catch(() => ({}));
          if (!r.ok || !d.ok) {
            this.passwordPromptError = d.error || 'Incorrect password.';
            return;
          }
          this.agentsUnlocked = true;
          // One-shot handoff for the chat-page URL guard (4G.1):
          // when this unlock was triggered by a hidden-agent URL
          // bounce, set a flag the chat page can read once and
          // delete. Settings's own gate is in-memory only, so F5
          // here re-prompts; this flag exists purely so the
          // immediate redirect-back-to-chat works without a second
          // password prompt. The chat URL guard consumes-and-clears.
          try {
            sessionStorage.setItem('agents_unlock_handoff', 'true');
          } catch (_) { /* storage disabled — fall through */ }
          this.agentsPasswordPromptOpen = false;
          this.passwordPromptValue = '';
          this.passwordPromptError = '';
          // Now that the section is unlocked, kick off the data load
          // that was deferred behind the gate.
          this.agentsLoaded = false;
          await this.loadAgentProfiles();
          // Deep-link return: if we got here from a hidden-agent URL
          // guard, bounce back to that chat URL now that the unlock
          // is in place.
          if (this._postUnlockNext) {
            const next = this._postUnlockNext;
            this._postUnlockNext = '';
            window.location.href = '/' + next;  // next starts with #/agent/...
          }
        } catch (e) {
          this.passwordPromptError = 'Network error: ' + e.message;
        }
      },
      cancelPasswordPrompt() {
        // Cancel kicks the user out of the Agents section. Without
        // this they'd see an empty page behind the modal — confusing.
        this.agentsPasswordPromptOpen = false;
        this.passwordPromptValue = '';
        this.passwordPromptError = '';
        this._postUnlockNext = '';
        if (this.section === 'agents') {
          this.section = this.isMobile ? null : 'api-key';
        }
      },
      async hideAgent(agent) {
        if (!confirm(`Hide ${agent.name}? They'll keep living their life — you just won't see them in the sidebar. Reveal from Settings → Agents → Hidden.`)) return;
        try {
          const r = await fetch(`/api/profiles/${encodeURIComponent(agent.id)}/hide`, { method: 'POST' });
          const d = await r.json().catch(() => ({}));
          if (!d.ok) { alert(d.error || 'Failed to hide.'); return; }
          await this.loadAgentProfiles();
        } catch (e) { alert('Network error: ' + e.message); }
      },
      async unhideAgent(agent) {
        try {
          const r = await fetch(`/api/profiles/${encodeURIComponent(agent.id)}/unhide`, { method: 'POST' });
          const d = await r.json().catch(() => ({}));
          if (!d.ok) { alert(d.error || 'Failed to restore.'); return; }
          await this.loadAgentsByState('hidden');
          await this.loadAgentProfiles();
        } catch (e) { alert('Network error: ' + e.message); }
      },
      async restoreFromHibernation(agent) {
        try {
          const r = await fetch(`/api/profiles/${encodeURIComponent(agent.id)}/restore`, { method: 'POST' });
          const d = await r.json().catch(() => ({}));
          if (!d.ok) { alert(d.error || 'Failed to restore.'); return; }
          await this.loadAgentsByState('hibernated');
          await this.loadAgentProfiles();
        } catch (e) { alert('Network error: ' + e.message); }
      },
      async restoreFromTrash(agent) {
        try {
          const r = await fetch(`/api/profiles/${encodeURIComponent(agent.id)}/restore`, { method: 'POST' });
          const d = await r.json().catch(() => ({}));
          if (!d.ok) { alert(d.error || 'Failed to restore.'); return; }
          await this.loadAgentsByState('archived');
          await this.loadAgentProfiles();
        } catch (e) { alert('Network error: ' + e.message); }
      },
      async purgeAgent(agent) {
        if (!confirm(`Permanently delete ${agent.name}? This wipes memory, chat history, avatar, and transcript. No undo.`)) return;
        try {
          const r = await fetch(`/api/profiles/${encodeURIComponent(agent.id)}/purge`, { method: 'POST' });
          const d = await r.json().catch(() => ({}));
          if (!d.ok) { alert(d.error || 'Failed to purge.'); return; }
          await this.loadAgentsByState('archived');
        } catch (e) { alert('Network error: ' + e.message); }
      },
      // Days remaining before auto-purge — Trash retains items for 30
      // days from archived_at. Returns a friendly string for display
      // (the cron that actually runs purges is server-side).
      daysUntilAutoPurge(archived_at) {
        if (!archived_at) return '';
        try {
          const archived = new Date(archived_at);
          const cutoff = new Date(archived.getTime() + 30 * 86400 * 1000);
          const now = new Date();
          const days = Math.ceil((cutoff - now) / (86400 * 1000));
          if (days <= 0) return 'auto-purge pending';
          if (days === 1) return 'auto-purges in 1 day';
          return `auto-purges in ${days} days`;
        } catch (_) { return ''; }
      },
      // ── Lifecycle actions (Phase 4A sub-items 1+2) ─────────────────────
      // Hibernate / Restore / Archive — POST endpoints. After a state change
      // we reload the agent list so the row reflects new status + stops/starts
      // the lifecycle loop server-side. Errors surface inline rather than as
      // disruptive alerts.
      async lifecycleAction(agent, action) {
        const labels = { hibernate: 'hibernate', restore: 'resume', archive: 'archive' };
        if (action === 'archive' && !confirm(`Archive ${agent.name}? They'll be hidden from the agent list. You can restore them later from settings.`)) {
          return;
        }
        try {
          const r = await fetch(`/api/profiles/${encodeURIComponent(agent.id)}/${action}`, { method: 'POST' });
          const d = await r.json().catch(() => ({}));
          if (!d.ok) {
            alert(d.error || `Failed to ${labels[action]} ${agent.name}.`);
            return;
          }
          await this.loadAgentProfiles();
        } catch (e) {
          alert('Network error: ' + e.message);
        }
      },

      // ── Expiration (Phase 4A sub-item 3) ─────────────────────────────
      // The select fires this when the user changes the kind. For 'date' and
      // 'milestone' we need the user to fill in the corresponding input
      // before we PATCH — until then, just update the local state so the
      // input box appears.
      setExpirationKind(agent, newKind) {
        agent.expires_kind = newKind;
        if (newKind === 'open') {
          // Switching to open: clear immediately, no extra input needed.
          this.patchExpiration(agent, 'open', '', '');
        }
        // For date/milestone, wait for the user to fill the input — the
        // input's @change handler calls patchExpiration directly.
      },

      async patchExpiration(agent, kind, date, milestone) {
        try {
          const r = await fetch(`/api/profiles/${encodeURIComponent(agent.id)}/expiration`, {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ kind, date, milestone }),
          });
          const d = await r.json().catch(() => ({}));
          if (!d.ok) {
            alert(d.error || 'Failed to set expiration.');
            return;
          }
          agent.expires_kind = d.expires_kind || kind;
          agent.expires_at = d.expires_at || '';
          agent.expires_milestone = d.expires_milestone || '';
        } catch (e) {
          alert('Network error: ' + e.message);
        }
      },

      async deleteAgentHistory(profileId) {
        const range = this.agentDeleteRange[profileId] || '90';
        const label = range === 'all' ? 'all conversation history'
          : range === '30' ? 'conversations older than 1 month'
          : range === '90' ? 'conversations older than 3 months'
          : 'conversations older than 6 months';
        const agentName = this.agentProfiles.find(p => p.id === profileId)?.name || profileId;
        if (!confirm(`Delete ${label} for ${agentName}?\n\nKnowledge, memory, and personality are preserved — only the chat history is removed.`)) return;
        this.agentDeletingSet = [...this.agentDeletingSet, profileId];
        try {
          const url = range === 'all'
            ? `/api/chat/${encodeURIComponent(profileId)}/history`
            : `/api/chat/${encodeURIComponent(profileId)}/history?older_than_days=${range}`;
          const r = await fetch(url, { method: 'DELETE' });
          const d = await r.json();
          if (d.ok) {
            this.agentDeleteDoneSet = [...this.agentDeleteDoneSet, profileId];
            setTimeout(() => { this.agentDeleteDoneSet = this.agentDeleteDoneSet.filter(id => id !== profileId); }, 3000);
          }
        } catch(_) {}
        this.agentDeletingSet = this.agentDeletingSet.filter(id => id !== profileId);
      },

      // ── User avatar ─────────────────────────────────────────────────────
      userAvatarUrl: null,
      _userAvatarTs: Date.now(),
      initUserAvatar() {
        // Probe whether the user avatar exists by trying to load it.
        const img = new Image();
        img.onload = () => { this.userAvatarUrl = `/avatar/user?t=${this._userAvatarTs}`; };
        img.onerror = () => { this.userAvatarUrl = null; };
        img.src = `/avatar/user?t=${this._userAvatarTs}`;
      },
      async removeUserAvatar() {
        const r = await fetch('/api/avatar/user', { method: 'DELETE' });
        if (r.ok) this.userAvatarUrl = null;
      },

      async uploadUserAvatar(event) {
        const file = event.target.files?.[0];
        if (!file) return;
        const fd = new FormData();
        fd.append('file', file);
        try {
          const r = await fetch('/api/avatar/user', { method: 'POST', body: fd });
          let d = {};
          try { d = await r.json(); } catch(_) {}
          if (r.ok && d.ok) {
            this._userAvatarTs = Date.now();
            this.userAvatarUrl = `/avatar/user?t=${this._userAvatarTs}`;
          } else {
            alert(d.error || d.detail || `Upload failed (HTTP ${r.status})`);
          }
        } catch(e) { alert('Network error: ' + e.message); }
        event.target.value = '';
      },

      activeProvider: {{ active_provider | tojson }},
      providers: {{ providers_status | tojson }},
      selectedProvider: {{ active_provider | tojson }},
      form: { apiKey: '', model: '', apiUrl: '' },
      editOpen: false,
      saving: false,
      saved: false,
      errorMsg: '',

      _defaults: {
        model:   { anthropic: 'claude-haiku-4-5-20251001', openai: 'gpt-4o-mini', gemini: 'gemini-2.0-flash', ollama: 'llama3', custom: '' },
        api_url: { openai: 'https://api.groq.com/openai/v1', ollama: 'http://localhost:11434', custom: 'https://your-endpoint.example.com/v1' },
      },

      init() {
        const valid = ['anthropic', 'openai', 'gemini', 'ollama', 'custom'];
        if (!valid.includes(this.selectedProvider)) this.selectedProvider = 'anthropic';
        if (!valid.includes(this.activeProvider))   this.activeProvider   = 'anthropic';
        this.selectProvider(this.selectedProvider);
        this.initUserAvatar();
        // Section watcher: entering Agents triggers the unlock gate
        // (one re-auth per session). loadAgentProfiles() only runs
        // AFTER the gate clears — submitPasswordPrompt() invokes it.
        // If the section is already unlocked (sessionStorage), load
        // immediately.
        this.$watch('section', v => {
          if (v !== 'agents') return;
          if (this.requireAgentsUnlocked()) {
            this.agentsLoaded = false;
            this.loadAgentProfiles();
          }
        });
        window.addEventListener('resize', () => {
          const mobile = window.innerWidth < 768;
          if (mobile !== this.isMobile) {
            this.isMobile = mobile;
            if (!mobile && !this.section) this.section = 'api-key';
          }
        });
        // Deep-link routing for the hidden-agent URL guard (4G.1):
        // when the chat page bounces an unauthorised hidden-agent URL
        // here, we land on /settings#agents-hidden?next=<encoded>.
        // Just jumping to the Agents section is enough — the section
        // watcher fires the gate and submitPasswordPrompt handles the
        // _postUnlockNext redirect after a successful unlock.
        try {
          const h = window.location.hash || '';
          const m = h.match(/^#agents-hidden(?:\?next=([^&]+))?/);
          if (m) {
            this._postUnlockNext = m[1] ? decodeURIComponent(m[1]) : '';
            this.section = 'agents';
            this.$nextTick(() => { this.agentTab = 'hidden'; });
          }
        } catch (_) { /* hash parse failure — non-fatal */ }
      },

      selectProvider(p) {
        this.selectedProvider = p;
        this.form = { apiKey: '', model: this.providers[p]?.model || '', apiUrl: this.providers[p]?.api_url || '' };
        this.errorMsg = '';
        this.editOpen = false;
      },

      modelPlaceholder() {
        return this._defaults.model[this.selectedProvider] || 'model-id';
      },
      urlPlaceholder() {
        return this._defaults.api_url[this.selectedProvider] || '';
      },
      needsKey() {
        return this.selectedProvider !== 'ollama' && this.selectedProvider !== 'custom';
      },
      needsUrl() {
        return ['openai', 'ollama', 'custom'].includes(this.selectedProvider);
      },
      canSave() {
        const p = this.selectedProvider;
        if (p === 'custom') return !!this.form.apiUrl.trim();
        if (p === 'ollama') return true;
        return !!(this.form.apiKey.trim() || this.providers[p]?.has_key);
      },
      isActive() { return this.selectedProvider === this.activeProvider; },

      async saveProvider(activate) {
        if (!this.canSave()) return;
        this.saving = true; this.errorMsg = '';
        try {
          const payload = { mode: 'byok', provider: this.selectedProvider, activate };
          if (this.form.apiKey.trim()) payload.api_key = this.form.apiKey.trim();
          if (this.form.model.trim())  payload.model   = this.form.model.trim();
          if (this.form.apiUrl.trim()) payload.api_url = this.form.apiUrl.trim();
          const r = await fetch('/api/settings/key-mode', {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
          });
          const d = await r.json();
          if (d.ok) {
            if (!this.providers[this.selectedProvider]) this.providers[this.selectedProvider] = {};
            if (this.form.apiKey.trim()) this.providers[this.selectedProvider].has_key = true;
            if (this.form.model.trim())  this.providers[this.selectedProvider].model   = this.form.model.trim();
            if (this.form.apiUrl.trim()) this.providers[this.selectedProvider].api_url = this.form.apiUrl.trim();
            if (activate) { this.activeProvider = this.selectedProvider; this.keyMode = 'byok'; }
            this.form.apiKey = '';
            this.saved = true; setTimeout(() => this.saved = false, 3000);
            if (this.section === 'credits') this.section = 'api-key';
          } else { this.errorMsg = d.error || 'Failed to save.'; }
        } catch(e) { this.errorMsg = 'Network error.'; }
        this.saving = false;
      },

      async switchToHosted() {
        this.saving = true; this.errorMsg = '';
        try {
          const r = await fetch('/api/settings/key-mode', {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ mode: 'hosted' }),
          });
          const d = await r.json();
          if (d.ok) { this.keyMode = 'hosted'; this.saved = true; setTimeout(() => this.saved = false, 3000); }
          else { this.errorMsg = d.error || 'Failed to switch.'; }
        } catch(e) { this.errorMsg = 'Network error.'; }
        this.saving = false;
      },
    }));
  });
</script>
<style>
  /* Range slider — accent track fill + minimal thumb */
  input[type=range] { -webkit-appearance: none; appearance: none; outline: none; }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgb(var(--color-accent));
    box-shadow: 0 0 0 3px rgb(var(--color-panel)), 0 0 0 5px rgb(var(--color-accent) / 0.35);
    cursor: pointer; transition: box-shadow 0.15s;
  }
  input[type=range]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 3px rgb(var(--color-panel)), 0 0 0 6px rgb(var(--color-accent) / 0.5);
  }
  input[type=range]::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; border: none;
    background: rgb(var(--color-accent));
    box-shadow: 0 0 0 3px rgb(var(--color-panel)), 0 0 0 5px rgb(var(--color-accent) / 0.35);
    cursor: pointer;
  }
</style>
{% endblock %}
{% block body %}
<div class="flex h-screen overflow-hidden bg-surface text-slate-200" x-data="settingsPage">

  <!-- ── Sidebar ── -->
  <aside class="flex-shrink-0 flex flex-col border-r border-border bg-panel w-full md:w-56"
         :class="{ 'hidden': isMobile && section }">
    <!-- Back to chat -->
    <div class="px-4 pt-5 pb-4 border-b border-border">
      <a href="/" class="flex items-center gap-2 text-slate-400 hover:text-white transition-colors text-sm">
        <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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Back to chat
      </a>
    </div>

    <!-- Settings title -->
    <div class="px-4 pt-5 pb-3">
      <h1 class="text-white font-semibold text-base">Settings</h1>
      {% if namespace %}
      <p class="text-xs text-slate-500 mt-0.5">{{ namespace }}.ageri.ai</p>
      {% endif %}
    </div>

    <!-- Nav -->
    <nav class="flex-1 px-2 space-y-0.5 overflow-y-auto">
      <button @click="section = 'appearance'"
        :class="section === 'appearance' ? 'bg-white/8 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'"
        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-left">
        <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z"/>
        </svg>
        Appearance
      </button>

      <button @click="section = 'general'"
        :class="section === 'general' ? 'bg-white/8 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'"
        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-left">
        <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"/>
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
        General
      </button>

      <button @click="section = 'api-key'"
        :class="section === 'api-key' ? 'bg-white/8 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'"
        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-left">
        <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/>
        </svg>
        API Key
      </button>

      <button @click="section = 'agents'"
        :class="section === 'agents' ? 'bg-white/8 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'"
        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-left">
        <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
        </svg>
        Agents
      </button>

      <button @click="section = 'devices'; loadDevices()"
        :class="section === 'devices' ? 'bg-white/8 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'"
        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-left">
        <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/>
        </svg>
        Devices
      </button>

      <button @click="section = 'security'"
        :class="section === 'security' ? 'bg-white/8 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'"
        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors text-left">
        <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
        </svg>
        Security
      </button>

      <!-- 'Ageri Credits' nav item removed — balance + top-up are now
           inlined into the API Key page (visible only when keyMode='hosted'),
           which avoids a sidebar entry that appears/disappears as the user
           toggles between BYOK and hosted modes. -->
    </nav>

    <!-- Log out — two-step click confirm (matches the wizard cancel
         pattern). First click swaps to a Confirm/Keep-going pair; the
         confirm posts to /logout. Auto-reverts after 4s so a stray tap
         doesn't leave the row in a confirming state forever. -->
    <div class="px-2 pb-4 pt-3 border-t border-border mt-auto">
      <template x-if="!logoutConfirming">
        <button @click="requestLogout()"
          class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-colors">
          <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/>
          </svg>
          Log out
        </button>
      </template>
      <template x-if="logoutConfirming">
        <div class="flex flex-col gap-1.5">
          <p class="px-3 text-xs text-slate-500">Log out of this device?</p>
          <div class="flex items-center gap-1.5">
            <a href="/logout"
              class="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium bg-red-950/60 border border-red-700/50 text-red-300 hover:bg-red-900/70 hover:text-red-200 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="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/>
              </svg>
              Log out
            </a>
            <button @click="abortLogout()"
              class="flex-1 px-3 py-2 rounded-lg text-xs font-medium border border-border text-slate-400 hover:bg-white/5 hover:text-white transition-colors">
              Stay
            </button>
          </div>
        </div>
      </template>
    </div>
  </aside>

  <!-- ── Content ── -->
  <main class="flex-1 overflow-y-auto" :class="{ 'hidden': isMobile && !section }">
    <div class="max-w-2xl mx-auto px-4 md:px-8 py-6 md:py-10">

      <!-- Mobile back button -->
      <button x-show="isMobile" @click="section = null"
        class="flex items-center gap-2 text-slate-400 hover:text-white transition-colors text-sm mb-6 md:hidden">
        <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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Settings
      </button>

      <!-- Saved toast -->
      <div x-show="saved" 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="fixed top-5 right-5 flex items-center gap-2 bg-green-900/80 border border-green-700/60 text-green-200 text-sm px-4 py-2.5 rounded-xl shadow-lg backdrop-blur-sm z-50"
        style="display:none">
        <svg class="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
        Saved
      </div>

      <!-- ── Appearance ── -->
      <section x-show="section === 'appearance'" x-cloak>
        <h2 class="text-xl font-semibold text-white mb-1">Appearance</h2>
        <p class="text-slate-400 text-sm mb-8">Personalize how Ageri looks.</p>

        <div class="space-y-8">

          <!-- Theme -->
          <div>
            <div class="text-sm font-medium text-white mb-3">Theme</div>
            <div class="grid grid-cols-2 gap-3">
              <!-- Dark -->
              <button @click="setTheme('dark')"
                :class="themeName === 'dark' ? 'border-accent ring-1 ring-accent/40' : 'border-border hover:border-slate-600'"
                class="relative flex flex-col gap-2 p-3 rounded-2xl border bg-panel transition-all">
                <div class="w-full h-12 rounded-xl overflow-hidden flex gap-0.5">
                  <div class="w-1/4 h-full rounded-l-xl" style="background:#16161e"></div>
                  <div class="flex-1 h-full" style="background:#0f0f14">
                    <div class="mx-1 mt-1.5 h-1.5 rounded-full bg-white/10 w-3/4"></div>
                    <div class="mx-1 mt-1 h-1.5 rounded-full bg-white/6 w-1/2"></div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-xs font-medium" :class="themeName === 'dark' ? 'text-white' : 'text-slate-400'">Dark</span>
                  <div :class="themeName === 'dark' ? 'bg-accent' : 'border border-slate-600'" class="w-3.5 h-3.5 rounded-full flex items-center justify-center">
                    <template x-if="themeName === 'dark'"><svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg></template>
                  </div>
                </div>
              </button>
              <!-- Dim -->
              <button @click="setTheme('dim')"
                :class="themeName === 'dim' ? 'border-accent ring-1 ring-accent/40' : 'border-border hover:border-slate-600'"
                class="relative flex flex-col gap-2 p-3 rounded-2xl border bg-panel transition-all">
                <div class="w-full h-12 rounded-xl overflow-hidden flex gap-0.5">
                  <div class="w-1/4 h-full rounded-l-xl" style="background:#242430"></div>
                  <div class="flex-1 h-full" style="background:#1c1c24">
                    <div class="mx-1 mt-1.5 h-1.5 rounded-full bg-white/10 w-3/4"></div>
                    <div class="mx-1 mt-1 h-1.5 rounded-full bg-white/6 w-1/2"></div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-xs font-medium" :class="themeName === 'dim' ? 'text-white' : 'text-slate-400'">Dim</span>
                  <div :class="themeName === 'dim' ? 'bg-accent' : 'border border-slate-600'" class="w-3.5 h-3.5 rounded-full flex items-center justify-center">
                    <template x-if="themeName === 'dim'"><svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg></template>
                  </div>
                </div>
              </button>
              <!-- Light -->
              <button @click="setTheme('light')"
                :class="themeName === 'light' ? 'border-accent ring-1 ring-accent/40' : 'border-border hover:border-slate-600'"
                class="relative flex flex-col gap-2 p-3 rounded-2xl border bg-panel transition-all">
                <div class="w-full h-12 rounded-xl overflow-hidden flex gap-0.5">
                  <div class="w-1/4 h-full rounded-l-xl" style="background:#ffffff"></div>
                  <div class="flex-1 h-full" style="background:#f8f9fc">
                    <div class="mx-1 mt-1.5 h-1.5 rounded-full bg-black/8 w-3/4"></div>
                    <div class="mx-1 mt-1 h-1.5 rounded-full bg-black/5 w-1/2"></div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-xs font-medium" :class="themeName === 'light' ? 'text-white' : 'text-slate-400'">Light</span>
                  <div :class="themeName === 'light' ? 'bg-accent' : 'border border-slate-600'" class="w-3.5 h-3.5 rounded-full flex items-center justify-center">
                    <template x-if="themeName === 'light'"><svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg></template>
                  </div>
                </div>
              </button>
              <!-- Auto -->
              <button @click="setTheme('auto')"
                :class="isAuto ? 'border-accent ring-1 ring-accent/40' : 'border-border hover:border-slate-600'"
                class="relative flex flex-col gap-2 p-3 rounded-2xl border bg-panel transition-all">
                <!-- Split preview: left = light (day), right = dark (night) -->
                <div class="w-full h-12 rounded-xl overflow-hidden flex">
                  <div class="w-1/2 h-full flex gap-0.5">
                    <div class="w-1/3 h-full" style="background:#ffffff"></div>
                    <div class="flex-1 h-full" style="background:#f8f9fc">
                      <div class="mx-1 mt-1.5 h-1.5 rounded-full bg-black/8 w-3/4"></div>
                      <div class="mx-1 mt-1 h-1.5 rounded-full bg-black/5 w-1/2"></div>
                    </div>
                  </div>
                  <div class="w-px h-full bg-black/10 flex-shrink-0"></div>
                  <div class="w-1/2 h-full flex gap-0.5">
                    <div class="w-1/3 h-full" style="background:#16161e"></div>
                    <div class="flex-1 h-full" style="background:#0f0f14">
                      <div class="mx-1 mt-1.5 h-1.5 rounded-full bg-white/10 w-3/4"></div>
                      <div class="mx-1 mt-1 h-1.5 rounded-full bg-white/6 w-1/2"></div>
                    </div>
                  </div>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-xs font-medium" :class="isAuto ? 'text-white' : 'text-slate-400'">Auto</span>
                  <div :class="isAuto ? 'bg-accent' : 'border border-slate-600'" class="w-3.5 h-3.5 rounded-full flex items-center justify-center">
                    <template x-if="isAuto"><svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg></template>
                  </div>
                </div>
              </button>
            </div>

            <!-- Auto night-theme selector (visible only when Auto is selected) -->
            <div x-show="isAuto" x-transition class="mt-3 flex items-center gap-3 px-1">
              <span class="text-xs text-slate-400 flex-shrink-0">Night theme</span>
              <div class="flex gap-2">
                <button @click="setAutoNightTheme('dark')"
                  :class="autoNightTheme === 'dark' ? 'border-accent text-white bg-accent/10' : 'border-border text-slate-400 hover:border-slate-500'"
                  class="px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors">
                  Dark
                </button>
                <button @click="setAutoNightTheme('dim')"
                  :class="autoNightTheme === 'dim' ? 'border-accent text-white bg-accent/10' : 'border-border text-slate-400 hover:border-slate-500'"
                  class="px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors">
                  Dim
                </button>
              </div>
              <span class="text-xs text-slate-500 ml-1">
                Light 6 am–8 pm · <span x-text="autoNightTheme === 'dim' ? 'Dim' : 'Dark'"></span> 8 pm–6 am
              </span>
            </div>
          </div>

          <!-- Accent color -->
          <div>
            <div class="text-sm font-medium text-white mb-1">Accent color</div>
            <div class="text-xs text-slate-500 mb-3">Used for buttons, highlights, and focus rings.</div>
            <div class="flex items-center gap-2 flex-wrap">
              <template x-for="hex in accentPresets" :key="hex">
                <button
                  @click="setAccent(hex)"
                  :style="'background:' + hex"
                  :class="accentHex === hex ? 'ring-2 ring-offset-2 ring-offset-panel scale-110' : 'hover:scale-110'"
                  class="w-7 h-7 rounded-full transition-transform flex-shrink-0"
                  :title="hex"
                ></button>
              </template>
              <!-- Custom color input -->
              <label class="relative w-7 h-7 rounded-full overflow-hidden cursor-pointer border-2 border-dashed border-slate-600 hover:border-slate-400 transition-colors flex items-center justify-center flex-shrink-0" title="Custom color">
                <svg class="w-3.5 h-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
                </svg>
                <input type="color" :value="accentHex" @input="setAccent($event.target.value)" class="absolute inset-0 opacity-0 cursor-pointer w-full h-full">
              </label>
              <!-- Current color preview -->
              <div class="ml-1 text-xs text-slate-500 font-mono" x-text="accentHex"></div>
            </div>
          </div>

          <!-- Font scale -->
          <div>
            <div class="flex items-center justify-between mb-1">
              <div class="text-sm font-medium text-white">Text size</div>
              <div class="text-xs text-slate-400 font-mono" x-text="Math.round(fontScale * 100) + '%'"></div>
            </div>
            <div class="text-xs text-slate-500 mb-4">Scales the interface text and spacing.</div>
            <div class="flex items-center gap-3">
              <span class="text-slate-500 select-none flex-shrink-0" style="font-size:0.78rem">Aa</span>
              <input
                type="range"
                min="0.75" max="1.25" step="0.05"
                :value="fontScale"
                @input="setFontScale(parseFloat($event.target.value))"
                class="flex-1 h-1.5 rounded-full appearance-none cursor-pointer accent-slider"
                style="background: linear-gradient(to right, rgb(var(--color-accent)) calc((var(--v,1) - 0.75) / 0.5 * 100%), rgb(var(--color-border)) 0%)"
                :style="'background: linear-gradient(to right, rgb(var(--color-accent)) ' + ((fontScale - 0.75) / 0.5 * 100).toFixed(1) + '%, rgb(var(--color-border)) 0%)'">
              <span class="text-slate-400 select-none flex-shrink-0" style="font-size:1.05rem">Aa</span>
            </div>
            <div class="flex justify-between mt-2 px-0.5">
              <span class="text-xs text-slate-600">75%</span>
              <span class="text-xs text-slate-600">100%</span>
              <span class="text-xs text-slate-600">125%</span>
            </div>
          </div>

        </div>
      </section>

      <!-- ── General ── -->
      <section x-show="section === 'general'" x-cloak
        x-data="{
          profile: { firstname: '', gender: '', dob: '', country: '', country_detected: '', location: '', language: '' },
          profileSaved: false,
          profileError: '',
          // BCP-47 → friendly name map. Used to derive a sensible
          // language pre-fill from navigator.language when the user
          // hasn't saved one yet. Mirrors the wizard's map so the
          // experience is consistent.
          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',
          },
          _browserLanguageName() {
            try {
              const code = (navigator.language || '').toLowerCase().split('-')[0];
              return this.LANG_CODE_MAP[code] || '';
            } catch (_) { return ''; }
          },
          async loadProfile() {
            const r = await fetch('/api/user/profile');
            if (r.ok) {
              const d = await r.json();
              // Pre-fill country from CF-IPCountry detection when the user
              // hasn't saved one yet — gives a sensible default they can
              // override before saving.
              if (!d.country && d.country_detected) d.country = d.country_detected;
              // Browser-locale fallback for localhost / LAN / non-Cloudflare
              // deployments where CF-IPCountry is unavailable. Intl.Locale
              // parses the BCP-47 tag (e.g. 'vi-VN' → 'VN'); .region is the
              // ISO-3166 alpha-2 code or undefined for region-less locales.
              // Gated to the dropdown's supported set so a detected country
              // outside the shortlist doesn't leave the select silently in
              // an unselectable state.
              if (!d.country) {
                const SUPPORTED = new Set(['VN','US','GB','JP','KR','CN','TH','SG','MY','ID','PH','IN','AU','DE','FR','ES','IT','BR','MX','CA']);
                try {
                  const region = new Intl.Locale(navigator.language || '').region;
                  if (region && SUPPORTED.has(region)) d.country = region;
                } catch (_) { /* unsupported locale tag — leave blank */ }
              }
              // Language fallback — prefer saved value, then navigator
              // language → friendly name. Same prefill-but-overridable
              // pattern as country.
              if (!d.language) {
                d.language = this._browserLanguageName();
              }
              this.profile = d;
            }
          },
          clearDob() { this.profile.dob = ''; },
          async saveProfile() {
            this.profileError = '';
            // Per-agent disclosure model: this save updates the user's
            // global profile and the seed defaults for FUTURE agents.
            // Existing agents are unaffected — to update an existing
            // agent's view, the user re-discloses in chat.
            const r = await fetch('/api/user/profile', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(this.profile),
            });
            const d = await r.json();
            if (r.ok) { this.profileSaved = true; setTimeout(() => this.profileSaved = false, 2000); }
            else { this.profileError = d.error || 'Failed to save.'; }
          },
        }"
        x-init="loadProfile()">
        <h2 class="text-xl font-semibold text-white mb-1">General</h2>
        <p class="text-slate-400 text-sm mb-8">Basic account information.</p>

        <div class="space-y-6">

          <!-- Your photo -->
          <div class="flex items-center justify-between py-4 border-b border-border">
            <div>
              <div class="text-sm font-medium text-white">Your photo</div>
              <div class="text-xs text-slate-500 mt-0.5">Visible to agents you interact with</div>
            </div>
            <div class="relative cursor-pointer group/avatar w-12 h-12"
              @click="$refs.userAvatarInput.click()">
              <div class="w-12 h-12 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-6 h-6 text-slate-400" 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>
              <!-- Hover overlay: camera + × -->
              <div class="absolute inset-0 rounded-full bg-black/50 flex items-center justify-center gap-1.5 opacity-0 group-hover/avatar:opacity-100 transition-opacity">
                <svg class="w-3.5 h-3.5 text-white hover:text-accent transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <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>
                <template x-if="userAvatarUrl">
                  <svg @click.stop="removeUserAvatar()"
                    class="w-3.5 h-3.5 text-white hover:text-red-400 transition-colors" 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>
                </template>
              </div>
              <input type="file" accept="image/*" class="hidden" x-ref="userAvatarInput" @change="uploadUserAvatar($event)">
            </div>
          </div>

          <!-- Your profile — all fields optional. Per-agent disclosure
               model: existing agents keep what they already learned;
               edits here only affect FUTURE agents (seed-on-first-read)
               and the user's own admin records. -->
          <div class="py-4 border-b border-border space-y-4">
            <div class="flex items-center gap-1.5 mb-1">
              <span class="text-sm font-medium text-white">Your profile</span>
              <span x-data="tooltip('All fields optional. Edits here update what FUTURE agents learn at first chat. Existing agents keep what they already know — re-tell them in conversation if you want to update their picture of you. You can also tell different agents different things — your call.')" class="relative inline-flex items-center">
                <button type="button" x-bind="trigger" class="tooltip-btn"></button>
                <div x-bind="popup" class="tooltip-popup">All fields optional. Edits here update what FUTURE agents learn at first chat. Existing agents keep what they already know — re-tell them in conversation if you want to update their picture of you. You can also tell different agents different things.</div>
              </span>
            </div>
            <p class="text-xs text-slate-500 mb-3">Skip anything you'd rather agents learn from you in conversation.</p>

            <div class="flex items-center justify-between gap-4">
              <label class="text-sm text-slate-400 w-20 shrink-0">Display name</label>
              <input type="text" x-model="profile.firstname" placeholder="What new agents will call you"
                class="flex-1 bg-white/5 border border-border rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-accent">
            </div>

            <div class="flex items-center justify-between gap-4">
              <label class="text-sm text-slate-400 w-20 shrink-0">Gender</label>
              <select x-model="profile.gender"
                class="flex-1 bg-white/5 border border-border rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-accent">
                <option value="" class="bg-panel">Skip — agents will ask</option>
                <option value="male" class="bg-panel">Male</option>
                <option value="female" class="bg-panel">Female</option>
              </select>
            </div>

            <div class="flex items-center justify-between gap-4">
              <label class="text-sm text-slate-400 w-20 shrink-0">Date of birth</label>
              <div class="flex-1 flex items-center gap-2">
                <input type="date" x-model="profile.dob"
                  class="flex-1 bg-white/5 border border-border rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-accent [color-scheme:dark]">
                <!-- Explicit clear button — date inputs vary across browsers
                     for reset UX, this gives a reliable affordance. -->
                <button type="button"
                  x-show="profile.dob"
                  @click="clearDob()"
                  title="Clear date of birth"
                  class="w-7 h-7 flex-shrink-0 flex items-center justify-center rounded-lg text-slate-500 hover:text-red-400 hover:bg-red-500/10 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>

            <div class="flex items-center justify-between gap-4">
              <label class="text-sm text-slate-400 w-20 shrink-0">Country</label>
              <select x-model="profile.country"
                class="flex-1 bg-white/5 border border-border rounded-lg px-3 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-accent">
                <option value="" class="bg-panel">Skip — agents will ask</option>
                <!-- ISO-3166 alpha-2 codes; common-locale shortlist. The
                     LLM is robust to any value; this is just a safe pick. -->
                <option value="VN" class="bg-panel">Vietnam (VN)</option>
                <option value="US" class="bg-panel">United States (US)</option>
                <option value="GB" class="bg-panel">United Kingdom (GB)</option>
                <option value="JP" class="bg-panel">Japan (JP)</option>
                <option value="KR" class="bg-panel">South Korea (KR)</option>
                <option value="CN" class="bg-panel">China (CN)</option>
                <option value="TH" class="bg-panel">Thailand (TH)</option>
                <option value="SG" class="bg-panel">Singapore (SG)</option>
                <option value="MY" class="bg-panel">Malaysia (MY)</option>
                <option value="ID" class="bg-panel">Indonesia (ID)</option>
                <option value="PH" class="bg-panel">Philippines (PH)</option>
                <option value="IN" class="bg-panel">India (IN)</option>
                <option value="AU" class="bg-panel">Australia (AU)</option>
                <option value="DE" class="bg-panel">Germany (DE)</option>
                <option value="FR" class="bg-panel">France (FR)</option>
                <option value="ES" class="bg-panel">Spain (ES)</option>
                <option value="IT" class="bg-panel">Italy (IT)</option>
                <option value="BR" class="bg-panel">Brazil (BR)</option>
                <option value="MX" class="bg-panel">Mexico (MX)</option>
                <option value="CA" class="bg-panel">Canada (CA)</option>
                <option value="OTHER" class="bg-panel">Other (free-text below)</option>
              </select>
            </div>

            <div class="flex items-center justify-between gap-4">
              <label class="text-sm text-slate-400 w-20 shrink-0">Language</label>
              <input type="text" x-model="profile.language"
                list="settings-languages-list"
                placeholder="e.g. English, Vietnamese, Japanese…"
                class="flex-1 bg-white/5 border border-border rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-accent">
            </div>
            <!-- Shared autocomplete shortlist — free-text accepted, anything
                 not in the list is still saved as-is. -->
            <datalist id="settings-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="Turkish"><option value="Arabic">
              <option value="Hebrew"><option value="Persian"><option value="Hindi">
              <option value="Bengali"><option value="Tamil"><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="Swahili"><option value="Greek"><option value="Czech">
              <option value="Romanian"><option value="Hungarian"><option value="Ukrainian">
              <option value="Afrikaans">
            </datalist>

            <div class="flex items-center justify-between gap-4">
              <label class="text-sm text-slate-400 w-20 shrink-0">Location</label>
              <input type="text" x-model="profile.location"
                :placeholder="profile.country
                  ? 'City or province in ' + profile.country
                  : 'City — drives cultural register'"
                class="flex-1 bg-white/5 border border-border rounded-lg px-3 py-1.5 text-sm text-white placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-accent">
            </div>

            <div class="flex items-center justify-end gap-3 pt-1">
              <span x-show="profileError" class="text-xs text-red-400" x-text="profileError"></span>
              <span x-show="profileSaved" class="text-xs text-teal" x-transition>Saved</span>
              <button @click="saveProfile()"
                class="px-4 py-1.5 bg-accent hover:bg-indigo-500 text-white text-sm font-medium rounded-lg transition-colors">
                Save
              </button>
            </div>
          </div>

          <div class="flex items-center justify-between py-4 border-b border-border">
            <div>
              <div class="flex items-center gap-1.5 text-sm font-medium text-white">
                Namespace
                <span x-data="tooltip('Your personal Ageri address. Once you enable remote access, anyone (including you from your phone) can reach your instance at this URL.')" class="relative inline-flex items-center">
                  <button type="button" x-bind="trigger" class="tooltip-btn"></button>
                  <div x-bind="popup" class="tooltip-popup tooltip-right">Your personal Ageri address. Once remote access is enabled, your instance is reachable at this URL from anywhere — including your phone.</div>
                </span>
              </div>
              <div class="text-xs text-slate-500 mt-0.5">Your Ageri address on the internet</div>
            </div>
            <div class="text-sm text-slate-300 font-mono">
              {% if namespace %}{{ namespace }}.ageri.ai{% else %}<span class="text-slate-600">not configured</span>{% endif %}
            </div>
          </div>

          <div class="flex items-center justify-between py-4 border-b border-border">
            <div>
              <div class="text-sm font-medium text-white">Version</div>
              <div class="text-xs text-slate-500 mt-0.5">Ageri core</div>
            </div>
            <div class="text-sm text-slate-500 font-mono">0.1.0</div>
          </div>
        </div>
      </section>

      <!-- ── API Key ── -->
      <section x-show="section === 'api-key'">
        <h2 class="text-xl font-semibold text-white mb-1">API Key</h2>
        <p class="text-slate-400 text-sm mb-8">Choose how Ageri connects to the AI model.</p>

        <!-- Mode toggle cards -->
        <div class="grid grid-cols-2 gap-3 mb-8">
          <!-- BYOK card -->
          <button @click="keyMode = 'byok'"
            :class="keyMode === 'byok'
              ? 'border-accent bg-accent/8 ring-1 ring-accent/40'
              : 'border-border hover:border-slate-600 bg-panel'"
            class="text-left p-4 rounded-2xl border transition-all">
            <div class="flex items-start justify-between mb-3">
              <div class="w-8 h-8 rounded-lg bg-indigo-500/15 flex items-center justify-center">
                <svg class="w-4 h-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/>
                </svg>
              </div>
              <!-- Selected dot -->
              <div :class="keyMode === 'byok' ? 'bg-accent' : 'border border-slate-600'"
                class="w-4 h-4 rounded-full flex items-center justify-center mt-0.5">
                <template x-if="keyMode === 'byok'">
                  <svg class="w-2.5 h-2.5 text-white" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
                </template>
              </div>
            </div>
            <div class="text-sm font-semibold text-white mb-1">Bring Your Own Key</div>
            <div class="text-xs text-slate-400 leading-relaxed">Use your own Anthropic, OpenAI, or other API key. Full control, billed directly.</div>
          </button>

          <!-- Hosted card -->
          <button @click="keyMode = 'hosted'"
            :class="keyMode === 'hosted'
              ? 'border-accent bg-accent/8 ring-1 ring-accent/40'
              : 'border-border hover:border-slate-600 bg-panel'"
            class="text-left p-4 rounded-2xl border transition-all">
            <div class="flex items-start justify-between mb-3">
              <div class="w-8 h-8 rounded-lg bg-teal/15 flex items-center justify-center">
                <svg class="w-4 h-4 text-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"/>
                </svg>
              </div>
              <div :class="keyMode === 'hosted' ? 'bg-accent' : 'border border-slate-600'"
                class="w-4 h-4 rounded-full flex items-center justify-center mt-0.5">
                <template x-if="keyMode === 'hosted'">
                  <svg class="w-2.5 h-2.5 text-white" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
                </template>
              </div>
            </div>
            <div class="text-sm font-semibold text-white mb-1">Ageri Hosted Credits</div>
            <div class="text-xs text-slate-400 leading-relaxed">Pay-as-you-go credits via Ageri. No key needed — top up from the sidebar.</div>
          </button>
        </div>

        <!-- BYOK config -->
        <div x-show="keyMode === 'byok'" class="space-y-5">
          <div class="h-px bg-border"></div>

          <!-- Active provider dropdown -->
          <div>
            <label class="flex items-center gap-1.5 text-sm font-medium text-white mb-2">
              Active provider
              <span x-data="tooltip('The AI provider currently used by Ageri. Configure each provider below — only one is active at a time. Switch anytime without losing your other providers\' keys.')" class="relative inline-flex items-center">
                <button type="button" x-bind="trigger" class="tooltip-btn"></button>
                <div x-bind="popup" class="tooltip-popup tooltip-right">The AI provider currently used by Ageri. Configure each provider independently — only one is active at a time. Switch without losing other providers' saved keys.</div>
              </span>
            </label>
            <!-- Dropdown -->
            <div class="relative">
              <select x-model="selectedProvider" @change="selectProvider(selectedProvider)"
                class="w-full bg-panel border border-border rounded-xl px-4 py-2.5 pr-10 text-sm text-white focus:border-accent transition-colors appearance-none cursor-pointer">
                <option value="anthropic">Anthropic (Claude)</option>
                <option value="openai">OpenAI (GPT)</option>
                <option value="gemini">Google Gemini</option>
                <option value="ollama">Ollama — local models</option>
                <option value="custom">Custom (OpenAI-compatible)</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                <svg class="w-4 h-4 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>
            </div>
            <!-- Status badge + edit toggle -->
            <div class="flex items-center justify-between mt-2">
              <div class="flex items-center gap-2">
                <template x-if="isActive()">
                  <span class="inline-flex items-center gap-1 text-xs text-accent font-medium">
                    <span class="w-1.5 h-1.5 rounded-full bg-accent"></span> Active
                  </span>
                </template>
                <template x-if="!isActive() && providers[selectedProvider]?.has_key">
                  <span class="inline-flex items-center gap-1 text-xs text-slate-400">
                    <span class="w-1.5 h-1.5 rounded-full bg-slate-500"></span> Configured — not active
                  </span>
                </template>
                <template x-if="!isActive() && !providers[selectedProvider]?.has_key && selectedProvider !== 'ollama'">
                  <span class="inline-flex items-center gap-1 text-xs text-slate-600">
                    <span class="w-1.5 h-1.5 rounded-full bg-slate-700"></span> Not configured
                  </span>
                </template>
                <!-- Quick-switch when configured but not active -->
                <button x-show="!isActive() && providers[selectedProvider]?.has_key"
                  @click="saveProvider(true)" :disabled="saving"
                  class="text-xs text-accent hover:underline ml-1">
                  Set active
                </button>
              </div>
              <!-- Edit toggle -->
              <button @click="editOpen = !editOpen"
                :class="editOpen ? 'text-white bg-white/8' : 'text-slate-500 hover:text-white'"
                class="flex items-center gap-1 text-xs px-2 py-1 rounded-lg 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="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125"/>
                </svg>
                <span x-text="editOpen ? 'Done' : 'Edit'"></span>
              </button>
            </div>
          </div>

          <!-- ── Collapsible config form ── -->
          <div x-show="editOpen"
            x-transition:enter="transition ease-out duration-150"
            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-100"
            x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 -translate-y-1"
            class="space-y-4 p-4 rounded-xl border border-border bg-panel/50">

            <!-- API Key (hidden for Ollama) -->
            <div x-show="selectedProvider !== 'ollama'">
              <label class="flex items-center gap-1.5 text-sm font-medium text-white mb-2">
                API Key
                <span x-data="tooltip('')" class="relative inline-flex items-center">
                  <button type="button" x-bind="trigger" class="tooltip-btn"></button>
                  <div x-bind="popup" class="tooltip-popup tooltip-right" x-html="
                    selectedProvider === 'anthropic' ? 'Get your key at <b>console.anthropic.com</b> → API Keys. Starts with <code>sk-ant-</code>.' :
                    selectedProvider === 'openai'    ? 'Get your key at <b>platform.openai.com</b> → API keys. Starts with <code>sk-</code>.' :
                    selectedProvider === 'gemini'    ? 'Get your key at <b>aistudio.google.com</b> → Get API key.' :
                    'Optional — leave blank if your endpoint does not require authentication.'
                  "></div>
                </span>
                <span x-show="providers[selectedProvider]?.has_key" class="text-xs font-normal text-green-400">● Key saved</span>
                <span x-show="selectedProvider === 'custom'" class="text-xs font-normal text-slate-500">— optional</span>
              </label>
              <input x-model="form.apiKey" type="password"
                :placeholder="selectedProvider === 'anthropic' ? 'sk-ant-…' : selectedProvider === 'openai' ? 'sk-…' : selectedProvider === 'custom' ? 'Bearer token or API key (optional)' : 'API key'"
                class="w-full bg-surface border border-border rounded-xl px-4 py-2.5 text-sm text-white placeholder-slate-600 focus:border-accent transition-colors">
              <p x-show="providers[selectedProvider]?.has_key" class="text-xs text-slate-500 mt-1.5">Key saved. Enter a new one to replace it.</p>
            </div>

            <!-- Model -->
            <div>
              <label class="flex items-center gap-1.5 text-sm font-medium text-white mb-2">
                Model
                <span x-data="tooltip('The exact model ID the provider uses — must match their documentation precisely. Wrong names cause a 404.')" class="relative inline-flex items-center">
                  <button type="button" x-bind="trigger" class="tooltip-btn"></button>
                  <div x-bind="popup" class="tooltip-popup">Exact model ID — must match the provider's documentation.<br><br>Examples: <code>claude-sonnet-4-5</code>, <code>gpt-4o</code>, <code>gemini-1.5-pro</code>, <code>llama3</code></div>
                </span>
              </label>
              <input x-model="form.model" type="text" :placeholder="modelPlaceholder()"
                class="w-full bg-surface border border-border rounded-xl px-4 py-2.5 text-sm text-white placeholder-slate-600 focus:border-accent transition-colors">
              <p class="text-xs text-slate-500 mt-1.5">Leave blank to use the default shown as placeholder.</p>
            </div>

            <!-- Base URL (OpenAI / Ollama / Custom only) -->
            <div x-show="needsUrl()">
              <label class="flex items-center gap-1.5 text-sm font-medium text-white mb-2">
                Base URL
                <span x-data="tooltip('')" class="relative inline-flex items-center">
                  <button type="button" x-bind="trigger" class="tooltip-btn"></button>
                  <div x-bind="popup" class="tooltip-popup tooltip-left" x-html="
                    selectedProvider === 'ollama'
                      ? 'Address of your local Ollama server. Default: <code>http://localhost:11434</code>. Start it with <code>ollama serve</code>.'
                      : selectedProvider === 'custom'
                      ? 'Any server exposing <code>/v1/chat/completions</code>.<br><br>· Groq: <code>api.groq.com/openai/v1</code><br>· Mistral: <code>api.mistral.ai/v1</code><br>· DeepSeek: <code>api.deepseek.com</code><br>· xAI: <code>api.x.ai/v1</code>'
                      : 'Leave blank to use OpenAI directly. Override to route to Groq, Mistral, DeepSeek, xAI, etc.'
                  "></div>
                </span>
                <span x-show="selectedProvider === 'openai'" class="text-xs font-normal text-slate-500">— optional</span>
                <span x-show="selectedProvider === 'custom'" class="text-xs font-normal text-red-400">required</span>
              </label>
              <input x-model="form.apiUrl" type="url" :placeholder="urlPlaceholder()"
                class="w-full bg-surface border border-border rounded-xl px-4 py-2.5 text-sm text-white placeholder-slate-600 focus:border-accent transition-colors">
            </div>

            <!-- Error -->
            <p x-show="errorMsg" class="text-red-400 text-sm" x-text="errorMsg"></p>

            <!-- Action buttons -->
            <div class="flex items-center gap-3 pt-1 flex-wrap">
              <button @click="saveProvider(true)" :disabled="saving || !canSave()"
                class="px-5 py-2.5 bg-accent hover:bg-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-medium rounded-xl transition-colors">
                <span x-text="saving ? 'Saving…' : (isActive() ? 'Save' : 'Save & set active')"></span>
              </button>
              <button x-show="!isActive()" @click="saveProvider(false)" :disabled="saving || !canSave()"
                class="px-5 py-2.5 border border-border hover:border-slate-500 disabled:opacity-40 disabled:cursor-not-allowed text-slate-400 hover:text-white text-sm font-medium rounded-xl transition-colors">
                Save only
              </button>
            </div>
          </div>
        </div>

        <!-- Hosted info -->
        <div x-show="keyMode === 'hosted'" class="space-y-5">
          <div class="h-px bg-border"></div>
          <div class="flex items-start gap-3 p-4 rounded-xl bg-amber-950/30 border border-amber-800/40">
            <svg class="w-4 h-4 text-amber-400 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 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>
            <div>
              <p class="text-sm text-amber-200 font-medium mb-0.5">Hosted credits not yet available</p>
              <p class="text-xs text-amber-400/80">The Ageri billing proxy is under development. Switch to BYOK with your own API key in the meantime.</p>
            </div>
          </div>
          <button @click="switchToHosted()" :disabled="saving"
            class="px-5 py-2.5 bg-accent hover:bg-indigo-500 disabled:opacity-40 text-white text-sm font-medium rounded-xl transition-colors">
            <span x-text="saving ? 'Saving…' : 'Switch to hosted'"></span>
          </button>

          <!-- Balance + Top up — formerly a separate "Ageri Credits"
               sidebar section, now inlined here so the user only sees the
               UI when they actually pick hosted mode. Disabled until the
               billing proxy ships. -->
          <div class="pt-2">
            <h3 class="text-sm font-medium text-white mb-1">Balance</h3>
            <p class="text-xs text-slate-500 mb-4">Current credits and top-up controls (available once hosted billing launches).</p>
            <div class="flex items-center justify-between py-3 border-b border-border opacity-40 pointer-events-none select-none">
              <div>
                <div class="text-sm font-medium text-white">Available credits</div>
                <div class="text-xs text-slate-500 mt-0.5">Used per AI request</div>
              </div>
              <div class="text-sm text-slate-300 font-mono">—</div>
            </div>
            <div class="flex items-center justify-between py-3 opacity-40 pointer-events-none select-none">
              <div>
                <div class="text-sm font-medium text-white">Top up</div>
                <div class="text-xs text-slate-500 mt-0.5">Add credits to your account</div>
              </div>
              <button class="px-4 py-2 bg-accent/20 text-accent text-sm font-medium rounded-xl" disabled>Top up</button>
            </div>
          </div>
        </div>

      </section>

      <!-- ── Agents ── -->
      <section x-show="section === 'agents'" x-cloak>
        <div class="flex items-start justify-between mb-1 gap-3 flex-wrap">
          <h2 class="text-xl font-semibold text-white">Agents</h2>
          <!-- Global Import — always creates a NEW agent from a .ageri
               bundle (regardless of which agent is currently selected).
               Per-row Import was removed because the backend always
               created a new agent anyway; the per-row UI was misleading. -->
          <label class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-slate-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
            </svg>
            <span x-text="importAgentBusy ? 'Importing…' : 'Import .ageri'"></span>
            <input type="file" accept=".ageri" class="hidden" :disabled="importAgentBusy" @change="importAgentGlobal($event)">
          </label>
        </div>
        <p class="text-slate-400 text-sm mb-6">Manage your agents. Hidden / Hibernated tabs require your login password — privacy gate. Trash holds archived agents for 30 days before they auto-purge.</p>

        <!-- Tab nav: Active / Hidden / Hibernated / Trash. The whole
             section sits behind one re-auth gate (agentsUnlocked) —
             no per-tab locks anymore. The lock-icon is gone for the
             same reason. -->
        <div class="flex items-center gap-1 mb-6 border-b border-border" x-show="agentsUnlocked">
          <template x-for="tab in [
            { key: 'active',     label: 'Active'     },
            { key: 'hidden',     label: 'Hidden'     },
            { key: 'hibernated', label: 'Hibernated' },
            { key: 'archived',   label: 'Trash'      },
          ]" :key="tab.key">
            <button
              @click="switchAgentTab(tab.key)"
              :class="agentTab === tab.key
                ? 'text-white border-b-2 border-accent -mb-px'
                : 'text-slate-400 hover:text-white border-b-2 border-transparent -mb-px'"
              class="px-3.5 py-2 text-sm font-medium transition-colors flex items-center gap-1.5">
              <span x-text="tab.label"></span>
            </button>
          </template>
        </div>

        <!-- Locked placeholder when the section hasn't been unlocked
             this session (e.g. user dismissed the password modal). -->
        <div x-show="!agentsUnlocked && !agentsPasswordPromptOpen" class="py-8 text-center">
          <p class="text-slate-400 text-sm mb-3">Agent management is locked. Re-enter your login password to view and manage agents.</p>
          <button @click="requireAgentsUnlocked()" class="px-4 py-2 text-sm rounded-lg bg-accent hover:bg-indigo-500 text-white font-medium">
            Unlock
          </button>
        </div>

        <!-- ── Hidden tab ── (gated by section-level agentsUnlocked) -->
        <template x-if="agentTab === 'hidden' && agentsUnlocked">
          <div>
            <p class="text-slate-400 text-sm mb-4">These agents are alive but invisible from the sidebar. They keep thinking, feeling, and tracking time. Restore brings them back to the active list.</p>
            <template x-if="agentTabLists.hidden.length === 0">
              <div class="text-slate-500 text-sm py-4">No hidden agents.</div>
            </template>
            <div class="space-y-0">
              <template x-for="agent in agentTabLists.hidden" :key="agent.id">
                <div class="py-4 border-b border-border flex items-center gap-3">
                  <div class="w-10 h-10 rounded-full overflow-hidden bg-slate-700 flex-shrink-0">
                    <img :src="`/avatar/${agent.id}?t=${Date.now()}`" class="w-full h-full object-cover" @error="$el.style.display='none'">
                  </div>
                  <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium text-white" x-text="agent.name"></div>
                    <div class="text-xs text-slate-400" x-text="agent.archetype || 'agent'"></div>
                  </div>
                  <button @click="unhideAgent(agent)"
                    class="px-2.5 py-1 text-xs rounded-lg border border-emerald-800/50 text-emerald-300 hover:bg-emerald-950/40 transition-colors">
                    Restore
                  </button>
                </div>
              </template>
            </div>
          </div>
        </template>

        <!-- ── Hibernated tab ── (gated by section-level agentsUnlocked) -->
        <template x-if="agentTab === 'hibernated' && agentsUnlocked">
          <div>
            <p class="text-slate-400 text-sm mb-4">Paused agents — lifecycle stopped, memory preserved. Resume to bring them fully back online.</p>
            <template x-if="agentTabLists.hibernated.length === 0">
              <div class="text-slate-500 text-sm py-4">No hibernated agents.</div>
            </template>
            <div class="space-y-0">
              <template x-for="agent in agentTabLists.hibernated" :key="agent.id">
                <div class="py-4 border-b border-border flex items-center gap-3">
                  <div class="w-10 h-10 rounded-full overflow-hidden bg-slate-700 flex-shrink-0">
                    <img :src="`/avatar/${agent.id}?t=${Date.now()}`" class="w-full h-full object-cover" @error="$el.style.display='none'">
                  </div>
                  <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium text-white" x-text="agent.name"></div>
                    <div class="text-xs text-slate-400 flex items-center gap-2">
                      <span x-text="agent.archetype || 'agent'"></span>
                      <span class="text-slate-600" x-show="agent.hibernated_at">·</span>
                      <span class="text-slate-500" x-show="agent.hibernated_at" x-text="'paused ' + new Date(agent.hibernated_at).toLocaleDateString()"></span>
                    </div>
                  </div>
                  <button @click="restoreFromHibernation(agent)"
                    class="px-2.5 py-1 text-xs rounded-lg border border-emerald-800/50 text-emerald-300 hover:bg-emerald-950/40 transition-colors">
                    Resume
                  </button>
                </div>
              </template>
            </div>
          </div>
        </template>

        <!-- ── Trash tab ── (gated by section-level agentsUnlocked) -->
        <template x-if="agentTab === 'archived' && agentsUnlocked">
          <div>
            <p class="text-slate-400 text-sm mb-4">Archived agents auto-purge 30 days after they're archived. Restore brings them back; Purge now permanently deletes everything.</p>
            <template x-if="agentTabLists.archived.length === 0">
              <div class="text-slate-500 text-sm py-4">Trash is empty.</div>
            </template>
            <div class="space-y-0">
              <template x-for="agent in agentTabLists.archived" :key="agent.id">
                <div class="py-4 border-b border-border flex items-center gap-3">
                  <div class="w-10 h-10 rounded-full overflow-hidden bg-slate-700 flex-shrink-0">
                    <img :src="`/avatar/${agent.id}?t=${Date.now()}`" class="w-full h-full object-cover" @error="$el.style.display='none'">
                  </div>
                  <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium text-white" x-text="agent.name"></div>
                    <div class="text-xs text-slate-400 flex items-center gap-2">
                      <span x-text="agent.archetype || 'agent'"></span>
                      <span class="text-slate-600" x-show="agent.archived_at">·</span>
                      <span class="text-slate-500" x-show="agent.archived_at" x-text="daysUntilAutoPurge(agent.archived_at)"></span>
                    </div>
                  </div>
                  <button @click="restoreFromTrash(agent)"
                    class="px-2.5 py-1 text-xs rounded-lg border border-emerald-800/50 text-emerald-300 hover:bg-emerald-950/40 transition-colors">
                    Restore
                  </button>
                  <button @click="purgeAgent(agent)"
                    class="px-2.5 py-1 text-xs rounded-lg border border-red-800/60 text-red-300 hover:bg-red-950/40 transition-colors">
                    Purge now
                  </button>
                </div>
              </template>
            </div>
          </div>
        </template>

        <!-- Password modal — single re-auth gate for the entire
             Agents section. One unlock per session covers Active,
             Hidden, Hibernated, Trash, Export, and the chat-page
             hidden-agent URL guard. -->
        <template x-if="agentsPasswordPromptOpen">
          <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
               @click.self="cancelPasswordPrompt()">
            <div class="bg-panel border border-border rounded-2xl w-full max-w-sm p-6 mx-4">
              <h3 class="text-white text-base font-semibold mb-1">Unlock agent management</h3>
              <p class="text-slate-400 text-xs mb-4">Re-enter your login password to manage agents — view hidden / hibernated / archived, export, hide, restore. Reload this page (F5) and the unlock clears — you'll be asked again.</p>
              <input type="password"
                     x-model="passwordPromptValue"
                     @keydown.enter.prevent="submitPasswordPrompt()"
                     placeholder="Password"
                     autofocus
                     class="w-full bg-white/5 border border-border rounded-lg px-3 py-2 text-sm text-white placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-accent mb-2">
              <p x-show="passwordPromptError" class="text-xs text-red-400 mb-2" x-text="passwordPromptError"></p>
              <div class="flex justify-end gap-2 mt-3">
                <button @click="cancelPasswordPrompt()"
                  class="px-3 py-1.5 text-sm rounded-lg text-slate-400 hover:text-white">Cancel</button>
                <button @click="submitPasswordPrompt()"
                  class="px-4 py-1.5 text-sm rounded-lg bg-accent hover:bg-indigo-500 text-white font-medium">Unlock</button>
              </div>
            </div>
          </div>
        </template>

        <!-- ── Active tab — the existing rich list ── (gated by section-level agentsUnlocked) -->
        <template x-if="agentTab === 'active' && agentsUnlocked">
        <div>
        <!-- Loading state -->
        <div x-show="!agentsLoaded" class="text-slate-500 text-sm py-4">Loading agents…</div>
        <div x-show="agentsLoaded && agentProfiles.length === 0" class="text-slate-500 text-sm py-4">No agents found.</div>

        <div class="space-y-0">
          <template x-for="agent in agentProfiles" :key="agent.id">
            <div class="py-5 border-b border-border">

              <!-- Top row: avatar + name + stats -->
              <div class="flex items-center gap-3 mb-3">
                <div class="w-10 h-10 rounded-full overflow-hidden bg-slate-700 flex-shrink-0">
                  <img :src="`/avatar/${agent.id}?t=${Date.now()}`"
                    class="w-full h-full object-cover"
                    @error="$el.style.display='none'">
                </div>
                <div class="flex-1 min-w-0">
                  <!-- Inline rename: pencil → input → Enter saves,
                       Esc cancels. Hidden for Ageri (platform
                       persona — name is fixed). -->
                  <template x-if="renamingAgentId !== agent.id">
                    <div class="text-sm font-medium text-white flex items-center gap-1.5">
                      <span x-text="agent.name"></span>
                      <button
                        x-show="agent.id !== 'ageri'"
                        @click="startRenameAgent(agent.id, agent.name)"
                        class="text-slate-500 hover:text-white transition-colors"
                        title="Rename">
                        <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="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>
                    </div>
                  </template>
                  <template x-if="renamingAgentId === agent.id">
                    <div class="flex items-center gap-1.5">
                      <input type="text"
                             x-model="renameValue"
                             :disabled="renameSaving"
                             @keydown.enter.prevent="commitRenameAgent(agent.id)"
                             @keydown.escape.prevent="cancelRenameAgent()"
                             autofocus
                             maxlength="80"
                             class="flex-1 bg-white/5 border border-accent/60 rounded px-2 py-0.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-accent">
                      <button @click="commitRenameAgent(agent.id)"
                              :disabled="renameSaving"
                              class="text-emerald-400 hover:text-emerald-300 disabled:opacity-40 transition-colors"
                              title="Save">
                        <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="M5 13l4 4L19 7"/>
                        </svg>
                      </button>
                      <button @click="cancelRenameAgent()"
                              :disabled="renameSaving"
                              class="text-slate-500 hover:text-white disabled:opacity-40 transition-colors"
                              title="Cancel">
                        <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>
                  <div x-show="renameError && renamingAgentId === agent.id"
                       class="text-xs text-red-400 mt-1"
                       x-text="renameError"></div>
                  <div class="text-xs text-slate-400" x-text="agent.archetype || 'agent'"></div>
                </div>
                <!-- Stats pills -->
                <div x-show="agentStats[agent.id]" class="flex items-center gap-1.5 flex-shrink-0">
                  <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-white/5 border border-border text-xs text-slate-400">
                    <svg class="w-3 h-3 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                    <span x-text="(agentStats[agent.id]?.message_count ?? 0) + ' msgs'"></span>
                  </span>
                  <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-white/5 border border-border text-xs text-slate-500">
                    <span x-text="(agentStats[agent.id]?.memory_size_kb ?? 0) + ' KB'"></span>
                  </span>
                </div>
              </div>

              <!-- LLM provider row -->
              <div class="flex items-center gap-2 flex-wrap pl-0 md:pl-13 mb-3">
                <span class="text-xs text-slate-500 flex-shrink-0">Provider</span>
                <select
                  @change="agent.llm_provider = $event.target.value; fetch(`/api/profiles/${agent.id}/llm`, { method: 'PATCH', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ llm_provider: agent.llm_provider, llm_model: agent.llm_model }) })"
                  class="bg-surface border border-border rounded-lg px-2.5 py-1 text-xs text-slate-200 focus:border-accent transition-colors appearance-none cursor-pointer"
                  style="color-scheme: dark;">
                  <option value=""           :selected="!agent.llm_provider"                x-text="'Same as global · ' + { anthropic: 'Anthropic', gemini: 'Gemini', openai: 'OpenAI', ollama: 'Ollama', custom: 'Custom' }[activeProvider]"></option>
                  <option value="anthropic" :selected="agent.llm_provider === 'anthropic'" :hidden="activeProvider === 'anthropic' || !providers.anthropic?.has_key">Anthropic</option>
                  <option value="gemini"    :selected="agent.llm_provider === 'gemini'"    :hidden="activeProvider === 'gemini'    || !providers.gemini?.has_key"   >Gemini</option>
                  <option value="openai"    :selected="agent.llm_provider === 'openai'"    :hidden="activeProvider === 'openai'    || !providers.openai?.has_key"   >OpenAI</option>
                  <option value="ollama"    :selected="agent.llm_provider === 'ollama'"    :hidden="activeProvider === 'ollama'"                                    >Ollama (local)</option>
                  <option value="custom"    :selected="agent.llm_provider === 'custom'"    :hidden="activeProvider === 'custom'    || !providers.custom?.has_key"   >Custom</option>
                </select>
                <input
                  type="text"
                  :value="agent.llm_model"
                  @change="agent.llm_model = $event.target.value; fetch(`/api/profiles/${agent.id}/llm`, { method: 'PATCH', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ llm_provider: agent.llm_provider, llm_model: agent.llm_model }) })"
                  placeholder="model (optional)"
                  class="bg-surface border border-border rounded-lg px-2.5 py-1 text-xs text-slate-300 placeholder-slate-600 focus:border-accent transition-colors w-36"
                  style="color-scheme: dark;">
              </div>

              <!-- Response delay row removed — per organic-reply-delay
                   decision, reply timing is contextual (message type +
                   liking + time of day), not user-tunable. The
                   reply_delay_min/max columns + /delay PATCH endpoint
                   stay in the schema for any legacy data, but the UI
                   should not invite the user to set them. -->



              <!-- Lifecycle row — Phase 4A sub-items 1+2.
                   Ageri (system persona) hides this entire row; it can't be hibernated/archived. -->
              <div class="flex items-center gap-2 flex-wrap pl-0 md:pl-13 mb-3" x-show="agent.id !== 'ageri'">
                <span class="text-xs text-slate-500 flex-shrink-0">Lifecycle</span>
                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium"
                  :class="{
                    'bg-emerald-950/50 border border-emerald-800/50 text-emerald-300': agent.status === 'active',
                    'bg-amber-950/50 border border-amber-800/50 text-amber-300': agent.status === 'hibernated',
                    'bg-slate-800/50 border border-slate-700 text-slate-400': agent.status === 'archived'
                  }"
                  x-text="agent.status">
                </span>
                <button x-show="agent.status === 'active'"
                  @click="lifecycleAction(agent, 'hibernate')"
                  class="px-2.5 py-1 text-xs rounded-lg border border-border text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                  Hibernate
                </button>
                <button x-show="agent.status === 'active' && !agent.hidden"
                  @click="hideAgent(agent)"
                  class="px-2.5 py-1 text-xs rounded-lg border border-border text-slate-400 hover:bg-white/5 hover:text-slate-200 transition-colors"
                  title="Hide from sidebar — agent stays alive">
                  Hide
                </button>
                <button x-show="agent.status === 'hibernated' || agent.status === 'archived'"
                  @click="lifecycleAction(agent, 'restore')"
                  class="px-2.5 py-1 text-xs rounded-lg border border-emerald-800/50 text-emerald-300 hover:bg-emerald-950/40 transition-colors">
                  Resume
                </button>
                <button x-show="agent.status !== 'archived'"
                  @click="lifecycleAction(agent, 'archive')"
                  class="px-2.5 py-1 text-xs rounded-lg border border-border text-slate-400 hover:bg-white/5 hover:text-slate-200 transition-colors">
                  Archive
                </button>
              </div>

              <!-- Expiration row removed — to be re-introduced as an
                   agent-driven flow: agent proposes a wrap-up date in
                   conversation after asking the user; on the day, a
                   banner offers Hibernate or Archive. The PATCH
                   endpoint + expires_kind/expires_at columns stay so
                   the agent's proposal can land here, but the user no
                   longer configures it via Settings. -->


              <!-- Bottom row: actions -->
              <div class="flex items-center gap-2 flex-wrap pl-0 md:pl-13">

                <!-- Export — per-row, since you export a SPECIFIC
                     agent. Import lives at the section header
                     (always creates a new agent) so no per-row
                     Import button here. Hidden for Ageri (the
                     platform persona — auto-created per instance,
                     not transferable; the backend also rejects). -->
                <button x-show="agent.id !== 'ageri'"
                  @click="exportAgent(agent.id)"
                  class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-slate-300 hover:bg-white/5 hover:text-white 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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                  </svg>
                  Export
                </button>

                <!-- Delete history -->
                <div class="flex items-center gap-1.5 ml-auto">
                  <select
                    @change="agentDeleteRange = { ...agentDeleteRange, [agent.id]: $event.target.value }"
                    class="bg-surface border border-border rounded-lg px-2.5 py-1.5 text-xs text-slate-200 focus:border-accent transition-colors appearance-none cursor-pointer"
                    style="color-scheme: dark;">
                    <option value="30">Last 1 month</option>
                    <option value="90" selected>Last 3 months</option>
                    <option value="180">Last 6 months</option>
                    <option value="all">All time</option>
                  </select>
                  <button
                    @click="deleteAgentHistory(agent.id)"
                    :disabled="_isDeleting(agent.id)"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-red-950/60 border border-red-700/50 text-red-300 hover:bg-red-900/70 hover:text-red-200 disabled:opacity-40 transition-colors whitespace-nowrap">
                    <template x-if="_isDeleting(agent.id)">
                      <svg class="w-3.5 h-3.5 animate-spin" 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-8V0C5.373 0 0 5.373 0 12h4z"/>
                      </svg>
                    </template>
                    <template x-if="_isDone(agent.id)">
                      <svg class="w-3.5 h-3.5 text-green-400" 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>
                    </template>
                    <span x-text="_isDone(agent.id) ? 'Deleted' : 'Delete history'"></span>
                  </button>
                </div>
              </div>

            </div>
          </template>
        </div>
        </div>
        </template>
        <!-- /Active tab -->

      </section>

      <!-- ── Devices (Phase 4A sub-item 5) ── -->
      <section x-show="section === 'devices'" x-cloak>
        <h2 class="text-xl font-semibold text-white mb-1">Devices</h2>
        <p class="text-slate-400 text-sm mb-2">Devices enrolled in your namespace
          <span class="text-slate-300 font-mono" x-text="devicesPayload.namespace ? devicesPayload.namespace + '.ageri.ai' : '(no namespace)'"></span>.</p>
        <p class="text-slate-500 text-xs mb-8">Each device runs its own Ageri instance with its own state. To move an agent between devices, export from one and import on the other (Settings → Agents).</p>

        <div x-show="!devicesLoaded" class="text-slate-500 text-sm py-4">Loading devices…</div>

        <div x-show="devicesLoaded" class="space-y-2">
          <!-- This device row — always shown first -->
          <div class="flex items-center gap-3 p-4 rounded-lg border border-emerald-800/50 bg-emerald-950/20">
            <div class="w-10 h-10 rounded-lg bg-emerald-900/50 flex items-center justify-center flex-shrink-0">
              <svg class="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/>
              </svg>
            </div>
            <div class="flex-1 min-w-0">
              <div class="text-sm font-medium text-white flex items-center gap-2 flex-wrap">
                <!-- Editable label — click pencil to rename. label_is_default
                     means the dashboard is showing the auto-suggested
                     hostname; the user hasn't picked a name yet. -->
                <template x-if="!editingDeviceLabel">
                  <span class="flex items-center gap-1.5">
                    <span x-text="devicesPayload.this_device?.label || 'this device'"
                      :class="devicesPayload.this_device?.label_is_default ? 'italic text-slate-300' : ''"></span>
                    <button @click="startEditDeviceLabel()" class="text-slate-500 hover:text-white transition-colors" title="Rename">
                      <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="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>
                  </span>
                </template>
                <template x-if="editingDeviceLabel">
                  <span class="flex items-center gap-1.5">
                    <input type="text" x-model="deviceLabelDraft" maxlength="80"
                      :placeholder="devicesPayload.this_device?.recommended_label || 'this device'"
                      @keydown.enter="saveDeviceLabel()" @keydown.escape="cancelEditDeviceLabel()"
                      class="bg-surface border border-border rounded px-2 py-0.5 text-xs text-white focus:border-accent transition-colors"
                      style="min-width: 12rem;">
                    <button @click="saveDeviceLabel()" class="text-emerald-400 hover:text-emerald-300 transition-colors" title="Save">
                      <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="M5 13l4 4L19 7"/>
                      </svg>
                    </button>
                    <button @click="cancelEditDeviceLabel()" class="text-slate-500 hover:text-slate-300 transition-colors" title="Cancel">
                      <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>
                  </span>
                </template>
                <span class="text-[10px] font-medium uppercase tracking-wider px-1.5 py-0.5 rounded bg-emerald-900/60 text-emerald-300">This device</span>
              </div>
              <div class="text-xs text-slate-400 mt-0.5">
                <span x-text="devicesPayload.this_device?.platform || 'desktop'"></span>
                <span x-show="devicesPayload.this_device?.tunnel_active" class="text-emerald-400"> · Remote access enabled (CF Tunnel)</span>
                <span x-show="!devicesPayload.this_device?.tunnel_active"> · Local-only</span>
              </div>
              <div class="text-[11px] text-slate-600 font-mono mt-1 truncate" x-text="devicesPayload.this_device?.device_id"></div>
            </div>
          </div>

          <!-- Other enrolled devices (mobile push registrations) -->
          <template x-for="device in devicesPayload.devices" :key="device.device_id">
            <div class="flex items-center gap-3 p-4 rounded-lg border border-border bg-white/5">
              <div class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center flex-shrink-0">
                <template x-if="device.platform === 'ios' || device.platform === 'android'">
                  <svg class="w-5 h-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"/>
                  </svg>
                </template>
                <template x-if="device.platform !== 'ios' && device.platform !== 'android'">
                  <svg class="w-5 h-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25"/>
                  </svg>
                </template>
              </div>
              <div class="flex-1 min-w-0">
                <div class="text-sm font-medium text-white" x-text="device.label || device.device_id.slice(0, 8)"></div>
                <div class="text-xs text-slate-500 mt-0.5">
                  <span x-text="device.platform || 'unknown'"></span>
                  <span x-show="device.last_seen"> · last seen <span x-text="device.last_seen?.slice(0, 10)"></span></span>
                </div>
                <div class="text-[11px] text-slate-600 font-mono mt-1 truncate" x-text="device.device_id"></div>
              </div>
            </div>
          </template>

          <div x-show="devicesPayload.devices?.length === 0" class="p-4 rounded-lg border border-border border-dashed text-center">
            <div class="text-sm text-slate-400">No other devices enrolled yet.</div>
            <div class="text-xs text-slate-500 mt-1">Install the Ageri mobile app and sign in with your namespace to enroll a phone.</div>
          </div>
        </div>
      </section>

      <!-- ── Security ── -->
      <section x-show="section === 'security'" x-cloak>
        <h2 class="text-xl font-semibold text-white mb-1">Security</h2>
        <p class="text-slate-400 text-sm mb-8">Manage your password, recovery options, and account data.</p>

        <div class="space-y-10">

          <!-- Change password -->
          <div>
            <div class="text-sm font-semibold text-white mb-1">Change password</div>
            <p class="text-xs text-slate-400 mb-4">Enter your current password to set a new one.</p>
            <div class="space-y-3 max-w-sm">
              <div x-data="{ show: false }" class="relative">
                <input :type="show ? 'text' : 'password'" x-model="pwOld" placeholder="Current password"
                  class="w-full bg-surface border border-border rounded-xl px-4 py-2.5 pr-11 text-sm text-white placeholder-slate-500 focus:border-accent transition-colors">
                <button type="button" @click="show=!show" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-200 transition-colors">
                  <svg x-show="!show" 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.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                  <svg x-show="show" 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.477 0-8.268-2.943-9.542-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 3l18 18"/></svg>
                </button>
              </div>
              <input type="password" x-model="pwNew" placeholder="New password (min 8 characters)"
                class="w-full bg-surface border border-border rounded-xl px-4 py-2.5 text-sm text-white placeholder-slate-500 focus:border-accent transition-colors">
              <input type="password" x-model="pwConfirm" placeholder="Confirm new password"
                class="w-full bg-surface border border-border rounded-xl px-4 py-2.5 text-sm text-white placeholder-slate-500 focus:border-accent transition-colors"
                @keydown.enter="changePassword()">
              <p x-show="pwError" class="text-red-400 text-xs" x-text="pwError"></p>
              <button @click="changePassword()" :disabled="pwSaving"
                class="px-5 py-2.5 bg-accent hover:bg-indigo-500 disabled:opacity-40 text-white text-sm font-medium rounded-xl transition-colors">
                <span x-text="pwSaving ? 'Saving…' : (pwSaved ? 'Password changed!' : 'Change password')"></span>
              </button>
            </div>
          </div>

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

          <!-- Forgot password note -->
          <div>
            <div class="text-sm font-semibold text-white mb-1">Forgot your password?</div>
            <p class="text-xs text-slate-400 leading-relaxed">
              SSH into your server and run
              <code class="text-slate-300 bg-white/5 px-1 rounded">rm ~/.ageri/.password_hash</code>,
              then go to <a href="/login" class="text-slate-300 hover:text-white underline">/login</a> — the setup wizard will let you set a new password.
            </p>
          </div>

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

          <!-- Factory Reset -->
          <div>
            <div class="text-sm font-semibold text-white mb-1">Factory Reset</div>
            <p class="text-xs text-slate-400 mb-4">
              Wipes all local data — conversations, memory, agent profiles, API keys, and your password.
              Your namespace (<span class="font-mono text-slate-300">{% if namespace %}{{ namespace }}.ageri.ai{% else %}not set{% endif %}</span>) stays registered.
              <strong class="text-white">This cannot be undone.</strong>
            </p>
            <div x-data="{ open: false }">
              <button x-show="!open" @click="open = true"
                class="px-5 py-2.5 bg-red-900/40 hover:bg-red-800/50 border border-red-700/50 text-red-300 hover:text-red-200 text-sm font-medium rounded-xl transition-colors">
                Factory Reset…
              </button>
              <div x-show="open" x-transition class="p-4 rounded-xl border border-red-700/50 bg-red-950/30 space-y-3 max-w-sm">
                <p class="text-xs text-red-300 font-medium">This will permanently delete everything. Enter your password to confirm.</p>
                <input type="password" x-model="resetPassword" placeholder="Your password"
                  class="w-full bg-surface border border-red-800/50 rounded-xl px-4 py-2.5 text-sm text-white placeholder-slate-500 focus:border-red-500 transition-colors"
                  @keydown.enter="factoryReset()">
                <p x-show="resetError" class="text-red-400 text-xs" x-text="resetError"></p>
                <div class="flex items-center gap-3">
                  <button @click="factoryReset()" :disabled="resetSaving"
                    class="px-5 py-2 bg-red-700 hover:bg-red-600 disabled:opacity-40 text-white text-sm font-medium rounded-xl transition-colors">
                    <span x-text="resetSaving ? 'Resetting…' : 'Yes, reset everything'"></span>
                  </button>
                  <button @click="open = false; resetPassword = ''; resetError = ''"
                    class="px-4 py-2 text-slate-400 hover:text-white text-sm transition-colors">
                    Cancel
                  </button>
                </div>
              </div>
            </div>
          </div>

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

          <!-- Diagnostics: smoke-test the verification card flow.
               Useful for confirming that 2FA / OTP relays work end-to-end
               before a real browser-automation skill triggers one. The
               server holds the future open for 60 s; if the card renders
               and you Submit, the round-trip's elapsed_ms shows below. -->
          <div x-data="{
            running: false,
            result: '',
            error: '',
            async fire() {
              this.running = true; this.result = ''; this.error = '';
              try {
                const r = await fetch('/api/admin/verification-test', {method: 'POST'});
                const d = await r.json();
                if (r.ok) {
                  this.result = `✓ Resolved in ${d.elapsed_ms} ms · value=${JSON.stringify(d.value)} · sockets=${d.sockets_notified}`;
                } else {
                  this.error = d.error || ('HTTP ' + r.status);
                }
              } catch (e) {
                this.error = String(e);
              } finally {
                this.running = false;
              }
            }
          }">
            <div class="text-sm font-semibold text-white mb-1">Verification card test</div>
            <p class="text-xs text-slate-400 mb-4 leading-relaxed">
              Fires a sample 2FA / OTP card to the active chat tab so you can
              confirm the verification flow renders + submits cleanly.
              Open the <span class="text-slate-300">Ageri</span> agent in another tab,
              then click the button below — the card appears in that thread, you
              type anything, hit Submit, and the result lands here.
            </p>
            <div class="flex items-center gap-3">
              <button @click="fire()" :disabled="running"
                class="px-4 py-2 bg-accent hover:bg-indigo-500 disabled:opacity-40 text-white text-sm font-medium rounded-xl transition-colors">
                <span x-text="running ? 'Waiting on card response…' : 'Fire test verification'"></span>
              </button>
              <span x-show="result" class="text-xs text-teal break-all" x-text="result"></span>
              <span x-show="error" class="text-xs text-red-400 break-all" x-text="error"></span>
            </div>
          </div>

        </div>
      </section>

      <!-- ── Ageri Hosted Credits ── -->
      <!-- 'Ageri Credits' standalone section removed — balance + top-up
           moved into the API Key page (keyMode='hosted' branch). -->

    </div>
  </main>
</div>
{% endblock %}