{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block shell %}
<div x-data="tileUI()" @open-agent.window="openInPane($event.detail)" @toggle-sidebar.document="sidebarOpen = !sidebarOpen" class="flex flex-1 overflow-hidden">

    {# --- Sidebar (drawer on mobile) --- #}
    <div
        x-show="isMobile && sidebarOpen"
        x-cloak
        x-transition.opacity
        @click="sidebarOpen = false"
        class="fixed inset-0 z-30 bg-black/40 sm:hidden"
    ></div>
    <aside
        :class="[
            sidebarOpen ? 'sidebar-expanded' : 'sidebar-collapsed',
            isMobile
                ? 'fixed z-40 top-11 bottom-0 left-0 w-72 shadow-xl bg-white dark:bg-gray-950 ' + (sidebarOpen ? 'translate-x-0' : '-translate-x-full')
                : (sidebarOpen ? 'w-52' : 'w-11')
        ]"
        class="shrink-0 border-r border-gray-200 dark:border-gray-800 flex flex-col transition-[width,transform] duration-200 overflow-hidden"
    >
        <button
            @click="sidebarOpen = !sidebarOpen"
            class="h-9 flex items-center px-3 gap-2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 shrink-0 border-b border-gray-200 dark:border-gray-800"
            :title="sidebarOpen ? 'Collapse' : 'Expand'"
        >
            <span class="text-xs" :class="sidebarOpen ? '' : 'mx-auto'">&#9776;</span>
            <span x-show="sidebarOpen" x-cloak class="text-xs font-medium text-gray-500 dark:text-gray-400">Agents</span>
        </button>

        <div
            id="sidebar-agents"
            hx-get="/partials/sidebar"
            hx-trigger="load, sse:mesh delay:2s"
            hx-swap="innerHTML"
            class="flex-1 overflow-y-auto"
        ></div>

        {# Settings + Session controls at bottom #}
        <div x-show="sidebarOpen" x-cloak class="border-t border-gray-200 dark:border-gray-800 p-2 space-y-1 sidebar-text">
            <button
                @click="showNewSession = true"
                class="w-full text-[10px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-left px-1 py-0.5"
                title="Start new Claude session"
            >&#9654; New session</button>
            <button
                @click="openSettings()"
                class="w-full text-[10px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-left px-1 py-0.5"
                title="Settings"
            >&#9881; Settings</button>
            <div x-show="!showSaveSession">
                <button
                    @click="saveSession()"
                    class="w-full text-[10px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-left px-1 py-0.5"
                    title="Save current layout"
                >&#128190; Save layout</button>
            </div>
            <div x-show="showSaveSession" x-cloak class="flex items-center gap-1 px-1 py-0.5">
                <input
                    x-model="saveSessionName"
                    @keydown.enter="saveSession()"
                    @keydown.escape="cancelSaveSession()"
                    x-ref="saveSessionInput"
                    x-init="$watch('showSaveSession', v => v && $nextTick(() => $refs.saveSessionInput?.focus()))"
                    type="text"
                    placeholder="Session name"
                    class="flex-1 text-[10px] font-mono bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-1 py-0.5 min-w-0"
                >
                <button @click="saveSession()" class="text-[10px] text-blue-400 hover:text-blue-300">&#10003;</button>
                <button @click="cancelSaveSession()" class="text-[10px] text-gray-500 hover:text-gray-400">&times;</button>
            </div>
            <button
                @click="showSessions = !showSessions"
                class="w-full text-[10px] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-left px-1 py-0.5"
                title="Load saved layout"
            >&#128196; Sessions</button>
            <div x-show="showSessions" x-cloak class="space-y-0.5 mt-1">
                <template x-for="s in listSessions()" :key="s">
                    <div class="flex items-center gap-1">
                        <button
                            @click="loadSession(s)"
                            class="flex-1 text-[10px] text-gray-400 hover:text-blue-400 text-left px-1 py-0.5 truncate font-mono"
                            x-text="s"
                        ></button>
                        <button
                            @click="deleteSession(s)"
                            class="text-[10px] text-gray-500 hover:text-red-400 px-0.5"
                        >&times;</button>
                    </div>
                </template>
                <p x-show="listSessions().length === 0" class="text-[10px] text-gray-500 italic px-1">No saved sessions</p>
            </div>
        </div>
    </aside>

    {# --- Pane Canvas --- #}
    <div class="flex-1 overflow-hidden relative" id="pane-root"></div>

    {# --- New Session Modal --- #}
    <div
        x-show="showNewSession"
        x-cloak
        x-transition
        @keydown.escape.window="showNewSession = false"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
        @click.self="showNewSession = false"
    >
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-xl w-full max-w-md mx-4 sm:mx-0 p-5 space-y-4 border border-gray-200 dark:border-gray-800">
            <div class="flex items-center justify-between">
                <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200">New Claude Session</h3>
                <button @click="showNewSession = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">&times;</button>
            </div>

            <div class="space-y-3">
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Session name <span class="text-gray-400">(optional — auto-detects from git)</span></label>
                    <input
                        x-model="newSessionName"
                        type="text"
                        placeholder="e.g. my-project"
                        class="w-full text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-2.5 py-1.5"
                        autocomplete="off"
                    >
                </div>
                <div>
                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Directory</label>
                    <input
                        x-model="newSessionDir"
                        type="text"
                        placeholder="~/dev/my-project (default: home)"
                        class="w-full text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-2.5 py-1.5 font-mono"
                        autocomplete="off"
                    >
                </div>
                <div class="flex items-center gap-4">
                    <label class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400 cursor-pointer">
                        <input type="checkbox" x-model="newSessionContinue" class="rounded">
                        <span>Continue previous session</span>
                    </label>
                    <label class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400 cursor-pointer">
                        <input type="checkbox" x-model="newSessionDangerous" class="rounded">
                        <span class="text-amber-600 dark:text-amber-500">Skip permissions</span>
                    </label>
                </div>
            </div>

            <div x-show="newSessionError" x-cloak class="text-xs text-red-500 bg-red-50 dark:bg-red-900/20 rounded px-2.5 py-1.5" x-text="newSessionError"></div>

            <div class="flex justify-end gap-2 pt-1">
                <button @click="showNewSession = false" class="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 px-3 py-1.5">Cancel</button>
                <button
                    @click="createNewSession()"
                    :disabled="newSessionCreating"
                    class="text-xs px-4 py-1.5 rounded bg-blue-600 text-white hover:bg-blue-500 disabled:opacity-50"
                >
                    <span x-show="!newSessionCreating">Create</span>
                    <span x-show="newSessionCreating" x-cloak>Creating...</span>
                </button>
            </div>
        </div>
    </div>
</div>

{# --- Keyboard shortcut hint bar (desktop only) --- #}
<div
    x-data="hintBar()"
    x-show="show"
    x-cloak
    x-transition
    class="fixed bottom-0 left-0 right-0 bg-gray-900/95 text-gray-300 text-xs px-4 py-2 items-center gap-6 z-50 border-t border-gray-700 hidden-touch"
>
    <span class="text-gray-500 font-medium" x-text="prefixLabel"></span>
    <template x-for="h in hints" :key="h.action">
        <span><kbd class="kbd" x-text="h.key"></kbd> <span x-text="h.label"></span></span>
    </template>
</div>

{# --- Mobile action toolbar (touch devices only) --- #}
<div class="fixed bottom-0 left-0 right-0 z-50 touch-only">
    <div class="bg-gray-900/95 border-t border-gray-700 px-2 py-1.5 flex items-center justify-around gap-1">
        <button onclick="if(_tileApp) _tileApp.splitPane('v')" class="mobile-action-btn" title="Split vertical">
            <span class="text-base">&#9674;</span>
            <span class="text-[9px]">Split V</span>
        </button>
        <button onclick="if(_tileApp) _tileApp.splitPane('h')" class="mobile-action-btn" title="Split horizontal">
            <span class="text-base">&#9644;</span>
            <span class="text-[9px]">Split H</span>
        </button>
        <button onclick="if(_tileApp) _tileApp.closePane()" class="mobile-action-btn" title="Close pane">
            <span class="text-base">&times;</span>
            <span class="text-[9px]">Close</span>
        </button>
        <button onclick="if(_tileApp) _tileApp.toggleZoom()" class="mobile-action-btn" title="Zoom">
            <span class="text-base">&#9724;</span>
            <span class="text-[9px]">Zoom</span>
        </button>
        <button onclick="if(_tileApp) _tileApp.showNewSession = true" class="mobile-action-btn" title="New session">
            <span class="text-base">&#9654;</span>
            <span class="text-[9px]">New</span>
        </button>
    </div>
</div>

<script>
// ─── Pane ID generator ───
let _paneSeq = 0;
function paneId() { return 'p' + (++_paneSeq); }

// ─── Default tree: single overview pane ───
function defaultTree() {
    return { id: paneId(), type: 'pane', content: 'overview' };
}

// ─── Tree traversal helpers ───
function findNode(tree, id) {
    if (!tree) return null;
    if (tree.id === id) return tree;
    if (tree.type === 'split') {
        return findNode(tree.children[0], id) || findNode(tree.children[1], id);
    }
    return null;
}

function findParent(tree, id, parent) {
    if (!tree) return null;
    if (tree.id === id) return parent;
    if (tree.type === 'split') {
        return findParent(tree.children[0], id, tree) || findParent(tree.children[1], id, tree);
    }
    return null;
}

function allPanes(tree) {
    if (!tree) return [];
    if (tree.type === 'pane') return [tree];
    return [...allPanes(tree.children[0]), ...allPanes(tree.children[1])];
}

function paneLabel(pane) {
    if (pane.content === 'overview') return 'Overview';
    if (pane.content === 'settings') return 'Settings';
    return pane.agent || 'Empty';
}

// ─── Terminal management (shared across panes) ───
const _terminals = {};

// ─── Nerd Font detection (width-probe approach from coder/mux) ───
const _NERD_FONT_FALLBACK = 'Symbols Nerd Font Mono';
const _FONT_TEST_STRING = 'abcdefghijklmnopqrstuvwxyz0123456789';
const _FONT_BASE_FAMILIES = ['monospace', 'serif', 'sans-serif'];
const _fontAvailabilityCache = new Map();

function _isFontAvailable(family, fontSize) {
    const cacheKey = family + ':' + fontSize;
    if (_fontAvailabilityCache.has(cacheKey)) return _fontAvailabilityCache.get(cacheKey);
    if (typeof document === 'undefined' || !document.body) return true;
    const span = document.createElement('span');
    span.textContent = _FONT_TEST_STRING;
    Object.assign(span.style, {
        position: 'absolute', left: '-9999px', top: '-9999px',
        fontSize: fontSize + 'px', fontVariant: 'normal', fontStyle: 'normal',
        fontWeight: '400', letterSpacing: '0', whiteSpace: 'nowrap',
    });
    document.body.appendChild(span);
    let available = false;
    try {
        const baselines = {};
        for (const base of _FONT_BASE_FAMILIES) {
            span.style.fontFamily = base;
            baselines[base] = span.offsetWidth;
        }
        for (const base of _FONT_BASE_FAMILIES) {
            span.style.fontFamily = "'" + family + "', " + base;
            if (span.offsetWidth !== baselines[base]) { available = true; break; }
        }
    } finally { span.remove(); }
    _fontAvailabilityCache.set(cacheKey, available);
    return available;
}

function _resolveTerminalFont(fontFamily, fontSize) {
    // Check primary font, try Nerd Font Mono variant if missing
    const parts = fontFamily.split(',').map(f => f.trim().replace(/^['"]|['"]$/g, '')).filter(Boolean);
    const primary = parts[0];
    if (primary && !_isFontAvailable(primary, fontSize)) {
        // Try "X Nerd Font Mono" variant
        if (primary.endsWith('Nerd Font') && !primary.endsWith('Nerd Font Mono')) {
            const mono = primary + ' Mono';
            if (_isFontAvailable(mono, fontSize)) {
                parts[0] = mono;
            }
        }
    }
    // Append Nerd Font symbol fallback if not already present
    const lower = parts.map(p => p.toLowerCase());
    if (!lower.includes(_NERD_FONT_FALLBACK.toLowerCase())) {
        parts.push(_NERD_FONT_FALLBACK);
    }
    return parts.map(p => /\s/.test(p) ? "'" + p + "'" : p).join(', ');
}

// ─── Client-side escape sequence buffering ───
// Holds back incomplete ANSI sequences at chunk boundaries so the terminal
// never renders half an escape code (garbled text flashes).
// Matches incomplete CSI (\x1b[...) and OSC (\x1b]...) sequences.
const _ESC_INCOMPLETE_RE = /\x1b(?:\[[0-9;]*|\][^\x07\x1b]*)?$/;

function _bufferEscapeSeq(data, leftover) {
    const combined = leftover + data;
    const m = _ESC_INCOMPLETE_RE.exec(combined);
    if (m) return { safe: combined.substring(0, m.index), leftover: combined.substring(m.index) };
    return { safe: combined, leftover: '' };
}

function _buildTermTheme(t, isDark) {
    const palette = isDark ? t.dark : t.light;
    const theme = {
        cursor: t.cursorColor,
        ...palette,
    };
    if (t.cursorAccent) theme.cursorAccent = t.cursorAccent;
    if (t.selectionForeground) theme.selectionForeground = t.selectionForeground;
    return theme;
}

async function initTerminal(paneId, agentName) {
    const key = paneId;
    if (_terminals[key]) return;
    const container = document.getElementById('term-' + paneId);
    if (!container) return;

    // Load ghostty WASM on first use (lazy)
    await window.loadGhostty();

    const s = loadSettings().terminal;
    const isDark = document.documentElement.classList.contains('dark');
    const resolvedFont = _resolveTerminalFont(s.fontFamily, s.fontSize);
    const term = new GhosttyTerminal({
        cursorBlink: s.cursorBlink,
        cursorStyle: s.cursorStyle,
        fontSize: s.fontSize,
        fontFamily: resolvedFont,
        scrollback: s.scrollback,
        smoothScrollDuration: s.smoothScrollDuration,
        allowTransparency: s.allowTransparency,
        theme: _buildTermTheme(s, isDark),
        convertEol: true,
    });
    const fitAddon = new GhosttyFitAddon();
    term.loadAddon(fitAddon);
    term.open(container);
    fitAddon.fit();

    // Clickable links: OSC8 hyperlinks + URL regex detection
    if (window.GhosttyOSC8LinkProvider) {
        term.registerLinkProvider(new window.GhosttyOSC8LinkProvider(term));
    }
    if (window.GhosttyUrlRegexProvider) {
        term.registerLinkProvider(new window.GhosttyUrlRegexProvider(term));
    }

    _terminals[key] = { term, fit: fitAddon, ws: null, agent: agentName };

    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsUrl = proto + '//' + location.host + '/terminal/' + encodeURIComponent(agentName) + '/ws';
    connectWs(key, wsUrl, term);

    // Auto-resize on container changes
    fitAddon.observeResize();
    term.onResize(({ cols, rows }) => {
        if (_terminals[key] && _terminals[key].ws && _terminals[key].ws.readyState === 1) {
            _terminals[key].ws.send(JSON.stringify({ type: 'resize', cols, rows }));
        }
    });

    term.onData(data => {
        if (_terminals[key] && _terminals[key].ws && _terminals[key].ws.readyState === 1) {
            _terminals[key].ws.send(JSON.stringify({ type: 'input', data }));
        }
    });

    // Flash pane header on bell
    term.onBell(() => {
        const paneEl = document.querySelector('[data-pane-id="' + paneId + '"]');
        if (!paneEl) return;
        const header = paneEl.querySelector('.pane-header');
        if (!header) return;
        header.classList.add('bg-yellow-500/20');
        setTimeout(() => header.classList.remove('bg-yellow-500/20'), 600);
    });

    // Update pane tab label on title change
    term.onTitleChange(title => {
        if (!title) return;
        const paneEl = document.querySelector('[data-pane-id="' + paneId + '"]');
        if (!paneEl) return;
        const label = paneEl.querySelector('.pane-header .font-mono');
        if (label) label.textContent = title;
    });

    // Drag-and-drop files into terminal → upload and paste local path
    container.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
        container.classList.add('ring-2', 'ring-blue-500/50');
    });
    container.addEventListener('dragleave', (e) => {
        if (!container.contains(e.relatedTarget)) {
            container.classList.remove('ring-2', 'ring-blue-500/50');
        }
    });
    container.addEventListener('drop', async (e) => {
        e.preventDefault();
        container.classList.remove('ring-2', 'ring-blue-500/50');
        const files = e.dataTransfer.files;
        if (!files.length) return;
        const t = _terminals[key];
        if (!t || !t.ws || t.ws.readyState !== 1) return;
        const paths = [];
        for (const file of files) {
            const fd = new FormData();
            fd.append('file', file, file.name);
            try {
                const resp = await fetch('/terminal/drop', { method: 'POST', body: fd });
                if (resp.ok) {
                    const data = await resp.json();
                    paths.push(data.path);
                }
            } catch { /* ignore upload failures */ }
        }
        if (paths.length) {
            t.ws.send(JSON.stringify({ type: 'input', data: paths.join(' ') }));
        }
    });
}

function applyTerminalSettings() {
    const s = loadSettings().terminal;
    const isDark = document.documentElement.classList.contains('dark');
    const theme = _buildTermTheme(s, isDark);
    const resolvedFont = _resolveTerminalFont(s.fontFamily, s.fontSize);
    for (const key of Object.keys(_terminals)) {
        const { term, fit } = _terminals[key];
        term.options.cursorBlink = s.cursorBlink;
        term.options.cursorStyle = s.cursorStyle;
        term.options.fontSize = s.fontSize;
        term.options.fontFamily = resolvedFont;
        term.options.scrollback = s.scrollback;
        term.options.smoothScrollDuration = s.smoothScrollDuration;
        term.options.allowTransparency = s.allowTransparency;
        term.options.theme = theme;
        if (fit) fit.fit();
    }
}

function connectWs(key, url, term, attempt) {
    attempt = attempt || 0;
    let escLeftover = '';
    const ws = new WebSocket(url);
    ws.onopen = () => {
        escLeftover = '';
        term.writeln('\x1b[32m● Connected\x1b[0m');
        ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
    };
    ws.onmessage = (e) => {
        try {
            const msg = JSON.parse(e.data);
            if (msg.type === 'output') {
                // Buffer incomplete escape sequences to prevent garbled rendering
                const { safe, leftover } = _bufferEscapeSeq(msg.data, escLeftover);
                escLeftover = leftover;
                if (safe) {
                    // Preserve scroll position when user has scrolled up
                    const buf = term.buffer && term.buffer.active;
                    const isScrolledBack = buf && buf.viewportY < buf.baseY;
                    const scrollOffset = isScrolledBack ? buf.baseY - buf.viewportY : 0;
                    term.write(safe, () => {
                        if (scrollOffset > 0 && buf) {
                            const newBase = buf.baseY;
                            term.scrollToLine(newBase - scrollOffset);
                        }
                    });
                }
            } else if (msg.type === 'error') {
                term.writeln('\x1b[31m' + msg.message + '\x1b[0m');
            }
        } catch { term.write(e.data); }
    };
    ws.onclose = () => {
        if (!_terminals[key]) return; // terminal was destroyed
        // Flush any remaining buffered data
        if (escLeftover) { term.write(escLeftover); escLeftover = ''; }
        term.writeln('\x1b[33m● Disconnected\x1b[0m');
        const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
        term.writeln(`\x1b[33m  Reconnecting in ${delay / 1000}s...\x1b[0m`);
        setTimeout(() => {
            if (_terminals[key]) connectWs(key, url, term, attempt + 1);
        }, delay);
    };
    ws.onerror = () => { term.writeln('\x1b[31m● Connection error\x1b[0m'); };
    if (_terminals[key]) _terminals[key].ws = ws;
}

function destroyTerminal(key) {
    if (_terminals[key]) {
        if (_terminals[key].ws) _terminals[key].ws.close();
        if (_terminals[key].fit) _terminals[key].fit.dispose();
        if (_terminals[key].term) _terminals[key].term.dispose();
        delete _terminals[key];
    }
}

// ─── Settings store (localStorage-backed) ───
const _defaultSettings = {
    prefix: 'Backslash',
    prefixMod: 'ctrl',
    bindings: {
        splitV: 'v',
        splitH: 'h',
        closePane: 'x',
        zoom: 'z',
        focusUp: 'ArrowUp',
        focusDown: 'ArrowDown',
        focusLeft: 'ArrowLeft',
        focusRight: 'ArrowRight',
        save: 's',
        sessions: 'l',
        newSession: 'n',
    },
    theme: 'system',
    sidebarDefault: 'open',
    terminal: {
        cursorStyle: 'block',
        cursorBlink: true,
        fontSize: 13,
        fontFamily: 'JetBrains Mono, Fira Code, Consolas, monospace',
        scrollback: 5000,
        smoothScrollDuration: 0,
        allowTransparency: false,
        cursorColor: '#3b82f6',
        cursorAccent: '',
        selectionForeground: '',
        dark: {
            background: '#0a0a0f', foreground: '#e5e7eb', selectionBackground: '#1e3a5f',
            black: '#1a1b26', red: '#f7768e', green: '#9ece6a', yellow: '#e0af68',
            blue: '#7aa2f7', magenta: '#bb9af7', cyan: '#7dcfff', white: '#c0caf5',
            brightBlack: '#414868', brightRed: '#f7768e', brightGreen: '#9ece6a', brightYellow: '#e0af68',
            brightBlue: '#7aa2f7', brightMagenta: '#bb9af7', brightCyan: '#7dcfff', brightWhite: '#ffffff',
        },
        light: {
            background: '#fafafa', foreground: '#1f2937', selectionBackground: '#bfdbfe',
            black: '#1f2937', red: '#dc2626', green: '#16a34a', yellow: '#ca8a04',
            blue: '#2563eb', magenta: '#9333ea', cyan: '#0891b2', white: '#e5e7eb',
            brightBlack: '#6b7280', brightRed: '#ef4444', brightGreen: '#22c55e', brightYellow: '#eab308',
            brightBlue: '#3b82f6', brightMagenta: '#a855f7', brightCyan: '#06b6d4', brightWhite: '#ffffff',
        },
    },
};

const _actionLabels = {
    splitV: 'Split vertical',
    splitH: 'Split horizontal',
    closePane: 'Close pane',
    zoom: 'Zoom toggle',
    focusUp: 'Focus up',
    focusDown: 'Focus down',
    focusLeft: 'Focus left',
    focusRight: 'Focus right',
    save: 'Save session',
    sessions: 'Toggle sessions',
    newSession: 'New Claude session',
};

let _settingsCache = null;

function loadSettings() {
    if (_settingsCache) return _settingsCache;
    try {
        const saved = JSON.parse(localStorage.getItem('drasill_settings') || '{}');
        const savedTerm = saved.terminal || {};
        _settingsCache = {
            ..._defaultSettings,
            bindings: { ..._defaultSettings.bindings, ...(saved.bindings || {}) },
            ...saved,
        };
        _settingsCache.terminal = {
            ..._defaultSettings.terminal,
            ...savedTerm,
            dark: { ..._defaultSettings.terminal.dark, ...(savedTerm.dark || {}) },
            light: { ..._defaultSettings.terminal.light, ...(savedTerm.light || {}) },
        };
    } catch { _settingsCache = { ..._defaultSettings }; }
    return _settingsCache;
}

function saveSettings(settings) {
    _settingsCache = settings;
    localStorage.setItem('drasill_settings', JSON.stringify(settings));
}

function keyDisplayName(key) {
    const names = {
        'Backslash': '\\', 'ArrowUp': '↑', 'ArrowDown': '↓',
        'ArrowLeft': '←', 'ArrowRight': '→', 'Escape': 'Esc',
        ' ': 'Space', 'Enter': '↵',
    };
    return names[key] || key;
}

function _renderColorInput(label, path, value) {
    // path is dot-separated like "dark.background" or plain "cursorColor"
    const hasVal = value && value.length > 0;
    return `<div class="flex items-center gap-2">
        <label class="text-xs text-gray-600 dark:text-gray-400 w-24 truncate" title="${label}">${label}</label>
        <input type="color" value="${hasVal ? value : '#000000'}" onchange="updateTermColorSetting('${path}', this.value)"
            class="w-7 h-7 rounded border border-gray-300 dark:border-gray-700 cursor-pointer bg-transparent p-0">
        <input type="text" value="${value||''}" onchange="updateTermColorSetting('${path}', this.value)"
            class="w-20 text-[11px] font-mono bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded px-1 py-0.5"
            placeholder="#hex">
    </div>`;
}

function renderSettingsPage() {
    const s = loadSettings();
    const themeOpts = ['system', 'dark', 'light'].map(t =>
        `<option value="${t}" ${s.theme === t ? 'selected' : ''}>${t.charAt(0).toUpperCase() + t.slice(1)}</option>`
    ).join('');
    const sidebarOpts = ['open', 'collapsed'].map(v =>
        `<option value="${v}" ${s.sidebarDefault === v ? 'selected' : ''}>${v.charAt(0).toUpperCase() + v.slice(1)}</option>`
    ).join('');
    const modOpts = ['ctrl', 'alt', 'meta'].map(m =>
        `<option value="${m}" ${s.prefixMod === m ? 'selected' : ''}>${m.charAt(0).toUpperCase() + m.slice(1)}</option>`
    ).join('');

    let bindingRows = '';
    for (const [action, label] of Object.entries(_actionLabels)) {
        const key = s.bindings[action] || '';
        bindingRows += `
        <tr class="border-b border-gray-100 dark:border-gray-800">
            <td class="py-2 pr-4 text-sm text-gray-700 dark:text-gray-300">${label}</td>
            <td class="py-2">
                <button
                    class="settings-keybind-btn px-3 py-1 text-sm font-mono bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded hover:border-blue-400 focus:ring-1 focus:ring-blue-500 focus:outline-none min-w-[60px] text-center text-gray-800 dark:text-gray-200"
                    data-action="${action}"
                    onclick="startKeyCapture(this, '${action}')"
                    title="Click to rebind"
                >${keyDisplayName(key)}</button>
            </td>
            <td class="py-2 pl-2">
                <button
                    class="text-[10px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                    onclick="resetBinding('${action}')"
                    title="Reset to default"
                >reset</button>
            </td>
        </tr>`;
    }

    return `
    <div class="max-w-lg space-y-6">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Settings</h2>

        <div class="space-y-4">
            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 pb-1">General</h3>
            <div class="flex items-center gap-4">
                <label class="text-sm text-gray-700 dark:text-gray-300 w-32">Theme</label>
                <select onchange="updateSetting('theme', this.value)" class="text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded px-2 py-1">${themeOpts}</select>
            </div>
            <div class="flex items-center gap-4">
                <label class="text-sm text-gray-700 dark:text-gray-300 w-32">Sidebar default</label>
                <select onchange="updateSetting('sidebarDefault', this.value)" class="text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded px-2 py-1">${sidebarOpts}</select>
            </div>
        </div>

        <div class="space-y-4">
            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 pb-1">Prefix Key</h3>
            <div class="flex items-center gap-4">
                <label class="text-sm text-gray-700 dark:text-gray-300 w-32">Modifier</label>
                <select onchange="updateSetting('prefixMod', this.value)" class="text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded px-2 py-1">${modOpts}</select>
            </div>
            <div class="flex items-center gap-4">
                <label class="text-sm text-gray-700 dark:text-gray-300 w-32">Key</label>
                <button
                    id="settings-prefix-key-btn"
                    class="settings-keybind-btn px-3 py-1 text-sm font-mono bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded hover:border-blue-400 focus:ring-1 focus:ring-blue-500 focus:outline-none min-w-[60px] text-center text-gray-800 dark:text-gray-200"
                    onclick="startKeyCapture(this, '_prefix')"
                    title="Click to change prefix key"
                >${keyDisplayName(s.prefix)}</button>
                <button class="text-[10px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" onclick="resetBinding('_prefix')">reset</button>
            </div>
            <p class="text-[11px] text-gray-400 dark:text-gray-600">Current: <span class="font-mono kbd">${s.prefixMod.charAt(0).toUpperCase() + s.prefixMod.slice(1)}+${keyDisplayName(s.prefix)}</span> then action key</p>
        </div>

        <div class="space-y-3">
            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 pb-1">Key Bindings</h3>
            <p class="text-[11px] text-gray-400 dark:text-gray-600">Click a key to rebind. Press the new key, or Escape to cancel.</p>
            <table class="w-full">
                <tbody>${bindingRows}</tbody>
            </table>
        </div>

        <div class="space-y-4">
            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 pb-1">Terminal</h3>

            <div class="flex items-center gap-4">
                <label class="text-sm text-gray-700 dark:text-gray-300 w-32">Cursor style</label>
                <select onchange="updateTermSetting('cursorStyle', this.value)" class="text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded px-2 py-1">
                    ${['block','underline','bar'].map(v => '<option value="'+v+'"'+(s.terminal.cursorStyle===v?' selected':'')+'>'+v+'</option>').join('')}
                </select>
            </div>
            <div class="flex items-center gap-4">
                <label class="text-sm text-gray-700 dark:text-gray-300 w-32">Cursor blink</label>
                <input type="checkbox" ${s.terminal.cursorBlink?'checked':''} onchange="updateTermSetting('cursorBlink', this.checked)" class="rounded border-gray-300 dark:border-gray-700">
            </div>
            <div class="flex items-center gap-4">
                <label class="text-sm text-gray-700 dark:text-gray-300 w-32">Font size</label>
                <input type="number" min="8" max="32" value="${s.terminal.fontSize}" onchange="updateTermSetting('fontSize', parseInt(this.value)||13)" class="w-20 text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded px-2 py-1">
            </div>
            <div class="flex items-center gap-4">
                <label class="text-sm text-gray-700 dark:text-gray-300 w-32">Font family</label>
                <input type="text" value="${s.terminal.fontFamily}" onchange="updateTermSetting('fontFamily', this.value)" class="flex-1 text-sm font-mono bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded px-2 py-1">
            </div>
            <div class="flex items-center gap-4">
                <label class="text-sm text-gray-700 dark:text-gray-300 w-32">Scrollback</label>
                <input type="number" min="100" max="100000" step="500" value="${s.terminal.scrollback}" onchange="updateTermSetting('scrollback', parseInt(this.value)||5000)" class="w-28 text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded px-2 py-1">
                <span class="text-[10px] text-gray-400">lines</span>
            </div>
            <div class="flex items-center gap-4">
                <label class="text-sm text-gray-700 dark:text-gray-300 w-32">Smooth scroll</label>
                <input type="number" min="0" max="500" step="25" value="${s.terminal.smoothScrollDuration}" onchange="updateTermSetting('smoothScrollDuration', parseInt(this.value)||0)" class="w-20 text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded px-2 py-1">
                <span class="text-[10px] text-gray-400">ms (0 = instant)</span>
            </div>
            <div class="flex items-center gap-4">
                <label class="text-sm text-gray-700 dark:text-gray-300 w-32">Transparency</label>
                <input type="checkbox" ${s.terminal.allowTransparency?'checked':''} onchange="updateTermSetting('allowTransparency', this.checked)" class="rounded border-gray-300 dark:border-gray-700">
                <span class="text-[10px] text-gray-400">enable alpha in background color</span>
            </div>
        </div>

        <div class="space-y-4">
            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 pb-1">Terminal Colors — Shared</h3>
            <div class="grid grid-cols-2 gap-x-6 gap-y-2">
                ${_renderColorInput('Cursor', 'cursorColor', s.terminal.cursorColor)}
                ${_renderColorInput('Cursor accent', 'cursorAccent', s.terminal.cursorAccent)}
                ${_renderColorInput('Selection fg', 'selectionForeground', s.terminal.selectionForeground)}
            </div>
        </div>

        <div class="space-y-4">
            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 pb-1">Terminal Colors — Dark Theme</h3>
            <div class="grid grid-cols-2 gap-x-6 gap-y-2">
                ${_renderColorInput('Background', 'dark.background', s.terminal.dark.background)}
                ${_renderColorInput('Foreground', 'dark.foreground', s.terminal.dark.foreground)}
                ${_renderColorInput('Selection bg', 'dark.selectionBackground', s.terminal.dark.selectionBackground)}
                ${_renderColorInput('Black', 'dark.black', s.terminal.dark.black)}
                ${_renderColorInput('Red', 'dark.red', s.terminal.dark.red)}
                ${_renderColorInput('Green', 'dark.green', s.terminal.dark.green)}
                ${_renderColorInput('Yellow', 'dark.yellow', s.terminal.dark.yellow)}
                ${_renderColorInput('Blue', 'dark.blue', s.terminal.dark.blue)}
                ${_renderColorInput('Magenta', 'dark.magenta', s.terminal.dark.magenta)}
                ${_renderColorInput('Cyan', 'dark.cyan', s.terminal.dark.cyan)}
                ${_renderColorInput('White', 'dark.white', s.terminal.dark.white)}
                ${_renderColorInput('Bright black', 'dark.brightBlack', s.terminal.dark.brightBlack)}
                ${_renderColorInput('Bright red', 'dark.brightRed', s.terminal.dark.brightRed)}
                ${_renderColorInput('Bright green', 'dark.brightGreen', s.terminal.dark.brightGreen)}
                ${_renderColorInput('Bright yellow', 'dark.brightYellow', s.terminal.dark.brightYellow)}
                ${_renderColorInput('Bright blue', 'dark.brightBlue', s.terminal.dark.brightBlue)}
                ${_renderColorInput('Bright magenta', 'dark.brightMagenta', s.terminal.dark.brightMagenta)}
                ${_renderColorInput('Bright cyan', 'dark.brightCyan', s.terminal.dark.brightCyan)}
                ${_renderColorInput('Bright white', 'dark.brightWhite', s.terminal.dark.brightWhite)}
            </div>
        </div>

        <div class="space-y-4">
            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 pb-1">Terminal Colors — Light Theme</h3>
            <div class="grid grid-cols-2 gap-x-6 gap-y-2">
                ${_renderColorInput('Background', 'light.background', s.terminal.light.background)}
                ${_renderColorInput('Foreground', 'light.foreground', s.terminal.light.foreground)}
                ${_renderColorInput('Selection bg', 'light.selectionBackground', s.terminal.light.selectionBackground)}
                ${_renderColorInput('Black', 'light.black', s.terminal.light.black)}
                ${_renderColorInput('Red', 'light.red', s.terminal.light.red)}
                ${_renderColorInput('Green', 'light.green', s.terminal.light.green)}
                ${_renderColorInput('Yellow', 'light.yellow', s.terminal.light.yellow)}
                ${_renderColorInput('Blue', 'light.blue', s.terminal.light.blue)}
                ${_renderColorInput('Magenta', 'light.magenta', s.terminal.light.magenta)}
                ${_renderColorInput('Cyan', 'light.cyan', s.terminal.light.cyan)}
                ${_renderColorInput('White', 'light.white', s.terminal.light.white)}
                ${_renderColorInput('Bright black', 'light.brightBlack', s.terminal.light.brightBlack)}
                ${_renderColorInput('Bright red', 'light.brightRed', s.terminal.light.brightRed)}
                ${_renderColorInput('Bright green', 'light.brightGreen', s.terminal.light.brightGreen)}
                ${_renderColorInput('Bright yellow', 'light.brightYellow', s.terminal.light.brightYellow)}
                ${_renderColorInput('Bright blue', 'light.brightBlue', s.terminal.light.brightBlue)}
                ${_renderColorInput('Bright magenta', 'light.brightMagenta', s.terminal.light.brightMagenta)}
                ${_renderColorInput('Bright cyan', 'light.brightCyan', s.terminal.light.brightCyan)}
                ${_renderColorInput('Bright white', 'light.brightWhite', s.terminal.light.brightWhite)}
            </div>
        </div>

        <div class="pt-2 border-t border-gray-200 dark:border-gray-800">
            <button onclick="resetAllSettings()" class="text-xs text-red-500 hover:text-red-400">Reset all settings to defaults</button>
        </div>
    </div>`;
}

// ─── Settings interaction handlers ───
let _captureTarget = null;
let _captureAction = null;

function startKeyCapture(btn, action) {
    // Cancel any existing capture
    if (_captureTarget) {
        _captureTarget.classList.remove('ring-2', 'ring-blue-500', 'animate-pulse');
    }
    _captureTarget = btn;
    _captureAction = action;
    btn.textContent = '...';
    btn.classList.add('ring-2', 'ring-blue-500', 'animate-pulse');

    const handler = (e) => {
        e.preventDefault();
        e.stopPropagation();
        window.removeEventListener('keydown', handler, true);
        btn.classList.remove('ring-2', 'ring-blue-500', 'animate-pulse');
        _captureTarget = null;

        if (e.key === 'Escape') {
            // Cancel — re-render to restore display
            if (_tileApp) _tileApp.renderAll();
            return;
        }

        const s = loadSettings();
        if (action === '_prefix') {
            s.prefix = e.key;
        } else {
            s.bindings[action] = e.key;
        }
        saveSettings(s);
        btn.textContent = keyDisplayName(e.key);
    };

    // Use capture phase so it fires before the prefix handler
    window.addEventListener('keydown', handler, true);
}

function resetBinding(action) {
    const s = loadSettings();
    if (action === '_prefix') {
        s.prefix = _defaultSettings.prefix;
    } else {
        s.bindings[action] = _defaultSettings.bindings[action];
    }
    saveSettings(s);
    if (_tileApp) _tileApp.renderAll();
}

function updateSetting(key, value) {
    const s = loadSettings();
    s[key] = value;
    saveSettings(s);
    if (key === 'theme') applyTheme(value);
}

function updateTermSetting(key, value) {
    const s = loadSettings();
    s.terminal[key] = value;
    saveSettings(s);
    applyTerminalSettings();
}

function updateTermColorSetting(path, value) {
    const s = loadSettings();
    const parts = path.split('.');
    if (parts.length === 2) {
        s.terminal[parts[0]][parts[1]] = value;
    } else {
        s.terminal[parts[0]] = value;
    }
    saveSettings(s);
    applyTerminalSettings();
}

function resetAllSettings() {
    localStorage.removeItem('drasill_settings');
    if (_tileApp) _tileApp.renderAll();
}

function applyTheme(theme) {
    const html = document.documentElement;
    if (theme === 'dark') {
        html.classList.add('dark');
    } else if (theme === 'light') {
        html.classList.remove('dark');
    } else {
        // system
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            html.classList.add('dark');
        } else {
            html.classList.remove('dark');
        }
    }
    applyTerminalSettings();
}

// ─── Alpine component ───
function tileUI() {
    return {
        sidebarOpen: !window.matchMedia('(max-width: 640px)').matches,
        isMobile: window.matchMedia('(max-width: 640px)').matches,
        isTablet: window.matchMedia('(min-width: 641px) and (max-width: 1024px)').matches,
        showSessions: false,
        showSaveSession: false,
        saveSessionName: '',
        showNewSession: false,
        newSessionName: '',
        newSessionDir: '',
        newSessionContinue: false,
        newSessionDangerous: false,
        newSessionError: '',
        newSessionCreating: false,
        tree: defaultTree(),
        focusedPane: null,
        zoomedPane: null,
        _prefixActive: false,

        init() {
            _tileApp = this;
            this.focusedPane = this.tree.id;

            // Apply saved settings on load
            const initSettings = loadSettings();
            if (initSettings.sidebarDefault === 'collapsed') this.sidebarOpen = false;
            applyTheme(initSettings.theme);

            // Responsive breakpoint listeners
            const mobileQuery = window.matchMedia('(max-width: 640px)');
            const tabletQuery = window.matchMedia('(min-width: 641px) and (max-width: 1024px)');
            mobileQuery.addEventListener('change', (e) => {
                this.isMobile = e.matches;
                if (e.matches) this.sidebarOpen = false;
                this.renderAll();
            });
            tabletQuery.addEventListener('change', (e) => {
                this.isTablet = e.matches;
                this.renderAll();
            });

            this.$nextTick(() => this.renderAll());

            // Keyboard handler: configurable prefix mode
            window.addEventListener('keydown', (e) => {
                // Skip if a key capture is active
                if (_captureTarget) return;

                const s = loadSettings();
                const mod = s.prefixMod === 'ctrl' ? e.ctrlKey :
                            s.prefixMod === 'alt' ? e.altKey : e.metaKey;

                const prefixKey = s.prefix === 'Backslash' ? '\\' : s.prefix;
                if (mod && e.key === prefixKey) {
                    this._prefixActive = !this._prefixActive;
                    e.preventDefault();
                    return;
                }
                if (!this._prefixActive) return;
                this._prefixActive = false;
                e.preventDefault();

                const b = s.bindings;
                const k = e.key;
                if (k === b.splitV) this.splitPane('v');
                else if (k === b.splitH) this.splitPane('h');
                else if (k === b.closePane) this.closePane();
                else if (k === b.zoom) this.toggleZoom();
                else if (k === b.focusUp) this.focusDir('up');
                else if (k === b.focusDown) this.focusDir('down');
                else if (k === b.focusLeft) this.focusDir('left');
                else if (k === b.focusRight) this.focusDir('right');
                else if (k === b.save) this.saveSession();
                else if (k === b.sessions) this.showSessions = !this.showSessions;
                else if (k === b.newSession) this.showNewSession = true;
            });
        },

        // ─── Render the split tree to HTML ───
        renderNode(node, path) {
            if (!node) return '';
            if (node.type === 'pane') {
                return this.renderPane(node);
            }
            const dir = node.direction === 'h' ? 'flex-col' : 'flex-row';
            const ratio = node.ratio || 0.5;
            const dim = node.direction === 'h' ? 'height' : 'width';
            const pct1 = (ratio * 100).toFixed(2) + '%';
            const pct2 = ((1 - ratio) * 100).toFixed(2) + '%';
            const divDir = node.direction === 'h' ? 'cursor-row-resize divider-h' : 'cursor-col-resize divider-v';

            return `<div class="flex ${dir} h-full w-full" data-split-id="${node.id}">` +
                `<div style="${dim}:${pct1}" class="overflow-hidden relative">${this.renderNode(node.children[0], path + '.0')}</div>` +
                `<div class="${divDir} bg-gray-200 dark:bg-gray-800 shrink-0 active:bg-blue-500/60 transition-colors hover:bg-blue-500/40" data-divider="${node.id}" onmousedown="startDividerDrag(event, '${node.id}', '${node.direction}')" ontouchstart="startDividerDrag(event, '${node.id}', '${node.direction}')"></div>` +
                `<div style="${dim}:${pct2}" class="overflow-hidden relative">${this.renderNode(node.children[1], path + '.1')}</div>` +
                `</div>`;
        },

        renderPane(pane) {
            const focused = pane.id === this.focusedPane;
            const borderClass = focused ? 'ring-1 ring-blue-500/50' : '';
            const label = paneLabel(pane);
            const statusDot = pane.agentStatus ?
                `<span class="w-1.5 h-1.5 rounded-full inline-block status-${pane.agentStatus}"></span>` : '';

            const header =
                `<div class="pane-header flex items-center gap-1.5 px-2 py-1 text-[11px] shrink-0 border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/40 text-gray-500 dark:text-gray-400 cursor-default select-none" onclick="focusPane('${pane.id}')">` +
                    statusDot +
                    `<span class="font-mono truncate">${this._escHtml(label)}</span>` +
                    (pane.content === 'terminal' ? `<span class="text-[9px] opacity-50">&#9638;</span>` : '') +
                    `<span class="flex-1"></span>` +
                    `<button class="pane-btn hover:text-blue-400" onclick="event.stopPropagation(); splitPaneById('${pane.id}', 'v')" title="Split vertical">&#9674;</button>` +
                    `<button class="pane-btn hover:text-blue-400" onclick="event.stopPropagation(); splitPaneById('${pane.id}', 'h')" title="Split horizontal">&#9644;</button>` +
                    `<button class="pane-btn hover:text-red-400" onclick="event.stopPropagation(); closePaneById('${pane.id}')" title="Close pane">&times;</button>` +
                `</div>`;

            let body = '';
            if (pane.content === 'overview') {
                body = `<div class="flex-1 overflow-y-auto p-4" onclick="focusPane('${pane.id}')">` +
                    `<div id="overview-${pane.id}" hx-get="/partials/mesh" hx-trigger="load, sse:mesh delay:2s" hx-swap="innerHTML">` +
                    `<p class="text-gray-500 text-sm">Loading...</p></div></div>`;
            } else if (pane.content === 'terminal') {
                body = `<div id="term-${pane.id}" class="flex-1" onclick="focusPane('${pane.id}')"></div>`;
            } else if (pane.content === 'detail') {
                body = `<div class="flex-1 overflow-y-auto p-4" onclick="focusPane('${pane.id}')">` +
                    `<div id="detail-${pane.id}" hx-get="/partials/agent-detail/${this._escAttr(pane.agent)}" hx-trigger="load, sse:mesh delay:2s" hx-swap="innerHTML">` +
                    `<p class="text-gray-500 text-sm">Loading...</p></div></div>`;
            } else if (pane.content === 'settings') {
                body = `<div class="flex-1 overflow-y-auto p-4" onclick="focusPane('${pane.id}')">` +
                    renderSettingsPage() + `</div>`;
            }

            return `<div class="pane flex flex-col h-full w-full ${borderClass}" data-pane-id="${pane.id}" onclick="focusPane('${pane.id}')">` +
                header + body + `</div>`;
        },

        _escHtml(s) { return s ? s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') : ''; },
        _escAttr(s) { return s ? s.replace(/"/g,'&quot;').replace(/'/g,'&#39;') : ''; },

        // ─── Re-render and process HTMX ───
        renderAll() {
            const root = document.getElementById('pane-root');
            if (!root) return;
            if (this.isMobile) {
                root.innerHTML = `<div class="absolute inset-0 flex flex-col">${this._renderMobile()}</div>`;
            } else {
                root.innerHTML = `<div class="absolute inset-0">${this.renderNode(this.tree, 'root')}</div>`;
            }
            this.$nextTick(() => {
                htmx.process(root);
                for (const pane of allPanes(this.tree)) {
                    if (pane.content === 'terminal' && pane.agent) {
                        this.$nextTick(() => initTerminal(pane.id, pane.agent));
                    }
                }
            });
        },

        // ─── Mobile: tab bar + single active pane ───
        _renderMobile() {
            const panes = allPanes(this.tree);
            if (panes.length === 0) return '';

            // Ensure focusedPane is valid
            if (!panes.find(p => p.id === this.focusedPane)) {
                this.focusedPane = panes[0].id;
            }

            const tabs = panes.map(p => {
                const active = p.id === this.focusedPane;
                const label = paneLabel(p);
                return `<button onclick="focusPane('${p.id}')"
                    class="px-3 py-2 text-xs font-mono whitespace-nowrap border-b-2 transition-colors
                        ${active ? 'border-blue-500 text-blue-500' : 'border-transparent text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'}"
                >${this._escHtml(label)}</button>`;
            }).join('');

            const tabBar = `<div class="flex overflow-x-auto border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/40 shrink-0">${tabs}</div>`;

            const activePane = findNode(this.tree, this.focusedPane);
            const paneHtml = activePane ? this.renderPane(activePane) : '';

            return tabBar + `<div class="flex-1 overflow-hidden">${paneHtml}</div>`;
        },

        // ─── Open agent in focused pane (from sidebar click) ───
        openInPane(detail) {
            const pane = findNode(this.tree, this.focusedPane);
            if (!pane || pane.type !== 'pane') return;

            // Auto-close sidebar on mobile
            if (this.isMobile) this.sidebarOpen = false;

            // Clean up old terminal if replacing
            if (pane.content === 'terminal') destroyTerminal(pane.id);

            pane.agent = detail.name;
            pane.agentStatus = detail.agent_state || detail.status;
            pane.sessionId = detail.session_id;
            pane.content = detail.session_id ? 'terminal' : 'detail';

            this.renderAll();
            updateSidebarActive(detail.name);
        },

        // ─── Split the focused pane ───
        splitPane(direction) {
            const id = this.focusedPane;
            if (!id) return;
            this._splitById(id, direction);
        },

        _splitById(id, direction) {
            const node = findNode(this.tree, id);
            if (!node || node.type !== 'pane') return;
            const parent = findParent(this.tree, id, null);

            // Create new pane (empty overview)
            const newPane = { id: paneId(), type: 'pane', content: 'overview' };
            // Clone current pane into a new object
            const oldPane = { ...node, id: paneId() };

            // Transform current node into a split
            const splitNode = {
                id: node.id,
                type: 'split',
                direction,
                ratio: 0.5,
                children: [oldPane, newPane],
            };

            // Replace in tree
            if (parent) {
                const idx = parent.children.indexOf(node);
                parent.children[idx] = splitNode;
            } else {
                this.tree = splitNode;
            }

            this.focusedPane = newPane.id;
            this.renderAll();
        },

        // ─── Close focused pane ───
        closePane() {
            const id = this.focusedPane;
            if (!id) return;
            this._closeById(id);
        },

        _closeById(id) {
            const panes = allPanes(this.tree);
            if (panes.length <= 1) return; // Don't close last pane

            const node = findNode(this.tree, id);
            if (node && node.content === 'terminal') destroyTerminal(id);

            const parent = findParent(this.tree, id, null);
            if (!parent || parent.type !== 'split') return;

            // Find sibling
            const sibling = parent.children[0].id === id ? parent.children[1] : parent.children[0];

            // Replace parent with sibling in grandparent
            const grandparent = findParent(this.tree, parent.id, null);
            if (grandparent) {
                const idx = grandparent.children.indexOf(parent);
                grandparent.children[idx] = sibling;
            } else {
                this.tree = sibling;
            }

            // Focus remaining pane
            const remaining = allPanes(this.tree);
            this.focusedPane = remaining.length > 0 ? remaining[0].id : null;
            this.renderAll();
        },

        // ─── Zoom toggle ───
        toggleZoom() {
            // Toggle zoom by storing/restoring tree
            if (this.zoomedPane) {
                this.tree = this._savedTree;
                this._savedTree = null;
                this.zoomedPane = null;
            } else {
                const pane = findNode(this.tree, this.focusedPane);
                if (!pane || pane.type !== 'pane') return;
                this._savedTree = JSON.parse(JSON.stringify(this.tree));
                this.tree = { ...pane };
                this.zoomedPane = pane.id;
            }
            this.renderAll();
        },

        // ─── Focus direction (navigate between panes) ───
        focusDir(dir) {
            const panes = allPanes(this.tree);
            if (panes.length < 2) return;
            const idx = panes.findIndex(p => p.id === this.focusedPane);
            if (idx === -1) return;
            let next;
            if (dir === 'right' || dir === 'down') {
                next = (idx + 1) % panes.length;
            } else {
                next = (idx - 1 + panes.length) % panes.length;
            }
            focusPane(panes[next].id);
        },

        // ─── Session management (versioned persistence) ───
        // Layout schema version — bump when serialization format changes.
        // Old versions are migrated or discarded on load.
        _LAYOUT_VERSION: 2,

        _serializeTree(node) {
            if (!node) return null;
            if (node.type === 'pane') {
                return { type: 'pane', content: node.content, agent: node.agent || null, agentStatus: node.agentStatus || null, sessionId: node.sessionId || null };
            }
            return { type: 'split', direction: node.direction, ratio: node.ratio, children: [this._serializeTree(node.children[0]), this._serializeTree(node.children[1])] };
        },

        _deserializeTree(data) {
            if (!data) return defaultTree();
            if (data.type === 'pane') {
                return { id: paneId(), type: 'pane', content: data.content, agent: data.agent, agentStatus: data.agentStatus, sessionId: data.sessionId };
            }
            return { id: paneId(), type: 'split', direction: data.direction, ratio: data.ratio, children: [this._deserializeTree(data.children[0]), this._deserializeTree(data.children[1])] };
        },

        _migrateSession(entry) {
            // v1 (unversioned): bare tree object → wrap with version
            if (!entry || !entry.version) {
                // Legacy: entry is a raw tree node
                return { version: this._LAYOUT_VERSION, tree: entry, savedAt: null };
            }
            // Future: add v2→v3 migrations here
            return entry;
        },

        _loadSessionStore() {
            try {
                return JSON.parse(localStorage.getItem('drasill_sessions') || '{}');
            } catch { return {}; }
        },

        _saveSessionStore(store) {
            localStorage.setItem('drasill_sessions', JSON.stringify(store));
        },

        saveSession() {
            if (!this.showSaveSession) {
                this.saveSessionName = '';
                this.showSaveSession = true;
                return;
            }
            const name = this.saveSessionName.trim();
            if (!name) return;
            const store = this._loadSessionStore();
            store[name] = {
                version: this._LAYOUT_VERSION,
                tree: this._serializeTree(this.tree),
                savedAt: new Date().toISOString(),
            };
            this._saveSessionStore(store);
            this.showSaveSession = false;
            this.saveSessionName = '';
        },

        cancelSaveSession() {
            this.showSaveSession = false;
            this.saveSessionName = '';
        },

        loadSession(name) {
            const store = this._loadSessionStore();
            if (!store[name]) return;
            const entry = this._migrateSession(store[name]);
            const treeData = entry.tree || entry;
            // Destroy all terminals
            for (const key of Object.keys(_terminals)) destroyTerminal(key);
            this.tree = this._deserializeTree(treeData);
            const panes = allPanes(this.tree);
            this.focusedPane = panes.length > 0 ? panes[0].id : null;
            this.zoomedPane = null;
            this.showSessions = false;
            // Persist migrated version back
            store[name] = { version: this._LAYOUT_VERSION, tree: this._serializeTree(this.tree), savedAt: entry.savedAt };
            this._saveSessionStore(store);
            this.renderAll();
        },

        deleteSession(name) {
            const store = this._loadSessionStore();
            delete store[name];
            this._saveSessionStore(store);
        },

        listSessions() {
            return Object.keys(this._loadSessionStore());
        },

        // ─── Create new Claude session via heimdall ───
        async createNewSession() {
            this.newSessionError = '';
            this.newSessionCreating = true;
            try {
                const resp = await fetch('/terminal/sessions', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        name: this.newSessionName.trim(),
                        directory: this.newSessionDir.trim(),
                        continue_session: this.newSessionContinue,
                        dangerous_mode: this.newSessionDangerous,
                    }),
                });
                const data = await resp.json();
                if (!resp.ok) {
                    this.newSessionError = data.error || 'Failed to create session';
                    return;
                }
                // Open the new session's terminal in the focused pane
                this.showNewSession = false;
                this.newSessionName = '';
                this.newSessionDir = '';
                this.newSessionContinue = false;
                this.newSessionDangerous = false;

                const pane = findNode(this.tree, this.focusedPane);
                if (pane && pane.type === 'pane') {
                    if (pane.content === 'terminal') destroyTerminal(pane.id);
                    pane.content = 'terminal';
                    pane.agent = data.name;
                    pane.agentStatus = 'active';
                    pane.sessionId = data.session_id;
                    this.renderAll();
                    updateSidebarActive(data.name);
                }
            } catch (err) {
                this.newSessionError = err.message || 'Network error';
            } finally {
                this.newSessionCreating = false;
            }
        },

        // ─── Open settings in focused pane ───
        openSettings() {
            const pane = findNode(this.tree, this.focusedPane);
            if (!pane || pane.type !== 'pane') return;
            if (pane.content === 'terminal') destroyTerminal(pane.id);
            pane.content = 'settings';
            pane.agent = null;
            pane.agentStatus = null;
            pane.sessionId = null;
            this.renderAll();
        },
    };
}

// ─── Global ref to Alpine tileUI instance ───
let _tileApp = null;

function focusPane(id) {
    if (!_tileApp || _tileApp.focusedPane === id) return;
    // Toggle ring class directly — no full re-render needed
    const oldEl = document.querySelector(`[data-pane-id="${_tileApp.focusedPane}"]`);
    const newEl = document.querySelector(`[data-pane-id="${id}"]`);
    if (oldEl) { oldEl.classList.remove('ring-1', 'ring-blue-500/50'); }
    if (newEl) { newEl.classList.add('ring-1', 'ring-blue-500/50'); }
    _tileApp.focusedPane = id;
}

function splitPaneById(id, dir) {
    if (_tileApp) { _tileApp.focusedPane = id; _tileApp._splitById(id, dir); }
}

function closePaneById(id) {
    if (_tileApp) _tileApp._closeById(id);
}

// ─── Divider drag-to-resize ───
function startDividerDrag(e, splitId, direction) {
    e.preventDefault();
    const splitEl = document.querySelector(`[data-split-id="${splitId}"]`);
    if (!splitEl) return;
    const rect = splitEl.getBoundingClientRect();
    const isH = direction === 'h';
    const isTouch = e.type === 'touchstart';

    const getXY = (ev) => {
        const p = ev.touches ? ev.touches[0] : ev;
        return { x: p.clientX, y: p.clientY };
    };

    const onMove = (me) => {
        if (me.cancelable) me.preventDefault();
        const { x, y } = getXY(me);
        let ratio;
        if (isH) {
            ratio = (y - rect.top) / rect.height;
        } else {
            ratio = (x - rect.left) / rect.width;
        }
        ratio = Math.max(0.1, Math.min(0.9, ratio));

        if (_tileApp) {
            const node = findNode(_tileApp.tree, splitId);
            if (node && node.type === 'split') {
                node.ratio = ratio;
                const children = splitEl.children;
                const dim = isH ? 'height' : 'width';
                if (children[0]) children[0].style[dim] = (ratio * 100).toFixed(2) + '%';
                if (children[2]) children[2].style[dim] = ((1 - ratio) * 100).toFixed(2) + '%';
                // Debounce terminal refits to once per animation frame
                if (!_fitRafPending) {
                    _fitRafPending = true;
                    requestAnimationFrame(() => {
                        // Only refit terminals in the affected split, not all
                        const affectedTerms = splitEl.querySelectorAll('[id^="term-"]');
                        const affectedIds = new Set();
                        affectedTerms.forEach(el => affectedIds.add(el.id.replace('term-', '')));
                        for (const key of affectedIds) {
                            if (_terminals[key] && _terminals[key].fit) {
                                _terminals[key].fit.fit();
                            }
                        }
                        _fitRafPending = false;
                    });
                }
            }
        }
    };

    const moveEvent = isTouch ? 'touchmove' : 'mousemove';
    const endEvent = isTouch ? 'touchend' : 'mouseup';

    const onUp = () => {
        document.removeEventListener(moveEvent, onMove, { passive: false });
        document.removeEventListener(endEvent, onUp);
        document.body.style.userSelect = '';
        document.body.style.cursor = '';
    };

    document.body.style.userSelect = 'none';
    if (!isTouch) document.body.style.cursor = isH ? 'row-resize' : 'col-resize';
    document.addEventListener(moveEvent, onMove, { passive: false });
    document.addEventListener(endEvent, onUp);
}

let _fitRafPending = false;

// ─── Sidebar click delegation + active highlight ───
let _activeSidebarAgent = '';
function updateSidebarActive(name) {
    _activeSidebarAgent = name;
    document.querySelectorAll('.sidebar-agent').forEach(el => {
        el.classList.toggle('sidebar-active', el.dataset.openAgent === name);
    });
}

document.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-open-agent]');
    if (!btn) return;
    const name = btn.dataset.openAgent;
    updateSidebarActive(name);
    btn.dispatchEvent(new CustomEvent('open-agent', {
        bubbles: true,
        detail: {
            name,
            status: btn.dataset.agentStatus || 'active',
            agent_state: btn.dataset.agentState || '',
            session_id: btn.dataset.sessionId || '',
        },
    }));
});

// ─── Relative time formatting ───
function formatTimeAgo(isoStr) {
    const d = new Date(isoStr);
    if (isNaN(d)) return isoStr;
    const secs = Math.floor((Date.now() - d) / 1000);
    if (secs < 60) return 'just now';
    const mins = Math.floor(secs / 60);
    if (mins < 60) return mins + 'm ago';
    const hrs = Math.floor(mins / 60);
    if (hrs < 24) return hrs + 'h ago';
    const days = Math.floor(hrs / 24);
    return days + 'd ago';
}

function updateHeartbeats() {
    document.querySelectorAll('[data-heartbeat]').forEach(el => {
        el.textContent = formatTimeAgo(el.dataset.heartbeat);
        el.title = el.dataset.heartbeat;
    });
}

updateHeartbeats();
document.addEventListener('htmx:afterSwap', (e) => {
    updateHeartbeats();
    if (e.detail.target && e.detail.target.id === 'sidebar-agents' && _activeSidebarAgent) {
        updateSidebarActive(_activeSidebarAgent);
    }
});
setInterval(updateHeartbeats, 30000);

// ─── Hint bar component ───
function hintBar() {
    return {
        show: false,
        prefixLabel: '',
        hints: [],
        init() {
            this._refresh();
            window.addEventListener('keydown', (e) => {
                const s = loadSettings();
                const mod = s.prefixMod === 'ctrl' ? e.ctrlKey :
                            s.prefixMod === 'alt' ? e.altKey : e.metaKey;
                const prefixKey = s.prefix === 'Backslash' ? '\\' : s.prefix;
                if (mod && e.key === prefixKey) {
                    this.show = !this.show;
                    if (this.show) this._refresh();
                }
            });
        },
        _refresh() {
            const s = loadSettings();
            const mod = s.prefixMod.charAt(0).toUpperCase() + s.prefixMod.slice(1);
            this.prefixLabel = mod + '+' + keyDisplayName(s.prefix);
            const b = s.bindings;
            this.hints = [
                { action: 'splitV', key: keyDisplayName(b.splitV), label: 'split vert' },
                { action: 'splitH', key: keyDisplayName(b.splitH), label: 'split horiz' },
                { action: 'closePane', key: keyDisplayName(b.closePane), label: 'close pane' },
                { action: 'zoom', key: keyDisplayName(b.zoom), label: 'zoom' },
                { action: 'focus', key: keyDisplayName(b.focusUp) + keyDisplayName(b.focusDown) + keyDisplayName(b.focusLeft) + keyDisplayName(b.focusRight), label: 'focus' },
                { action: 'save', key: keyDisplayName(b.save), label: 'save' },
                { action: 'sessions', key: keyDisplayName(b.sessions), label: 'load' },
                { action: 'newSession', key: keyDisplayName(b.newSession), label: 'new session' },
            ];
        },
    };
}
</script>
{% endblock %}