{% extends "base.html" %}
{% from 'partials/frontend_vendor.html' import vendor_xterm_head %}

{% block title %}Терминал - AWM{% endblock %}

{% block extra_head %}
{{ vendor_xterm_head() }}
<style>
    .terminal-page {
        display: grid;
        gap: 14px;
    }
    .terminal-page .card {
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        min-width: 0;
    }
    .terminal-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }
    .terminal-hero h2 {
        margin: 0;
    }
    .terminal-subtitle {
        color: var(--text-muted);
        font-size: 13px;
        margin-top: 4px;
        line-height: 1.45;
    }
    .terminal-main-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ssh-notes-field {
        min-height: 84px;
        max-height: 140px;
        resize: vertical;
    }
    .collapsible-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .collapse-toggle {
        border: 1px solid var(--border);
        background: var(--surface);
        border-radius: 8px;
        padding: 4px 10px;
        font-size: 12px;
        cursor: pointer;
        color: var(--gray-700);
        transition: border-color 0.15s ease, background 0.15s ease;
    }
    .collapse-toggle:hover {
        border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
        color: var(--gray-900);
    }
    .terminal-panel-title {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--gray-900);
    }
    #saved-connections-list.empty-state {
        color: var(--gray-500);
        padding: 12px 4px;
    }
    .saved-connections-table-wrap {
        margin-top: 10px;
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--surface);
    }
    .saved-connections-table {
        width: 100%;
        min-width: 640px;
        border-collapse: collapse;
        table-layout: fixed;
    }
    .saved-connections-table th,
    .saved-connections-table td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        font-size: 13px;
        text-align: left;
        color: var(--gray-700);
    }
    .saved-connections-table tbody tr:hover td {
        background: color-mix(in srgb, var(--primary) 6%, var(--surface) 94%);
    }
    .saved-connections-table th {
        background: var(--bg-secondary);
        color: var(--gray-500);
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
    .saved-connections-table tr:last-child td {
        border-bottom: none;
    }
    .saved-connections-name {
        font-weight: 700;
        color: var(--gray-900);
        word-break: break-word;
    }
    .saved-connections-target {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        font-size: 12px;
        color: var(--gray-600);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .saved-connections-auth {
        color: var(--gray-600);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .saved-connection-status-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }
    .saved-connection-status-online {
        background: color-mix(in srgb, #16a34a 16%, var(--surface) 84%);
        color: #166534;
    }
    .saved-connection-status-offline {
        background: color-mix(in srgb, var(--gray-500) 18%, var(--surface) 82%);
        color: var(--gray-600);
        border: 1px solid var(--border);
    }
    .saved-connections-actions {
        display: flex;
        gap: 6px;
        justify-content: flex-end;
        flex-wrap: wrap;
        align-items: center;
    }
    .saved-connections-actions .btn {
        width: 32px;
        height: 30px;
        min-width: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        line-height: 1;
    }
    .terminal-tabs-wrap {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 12px;
        padding-bottom: 2px;
    }
    .session-tab-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-secondary);
    }
    .session-tab-main {
        border: 0;
        border-radius: 8px;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 600;
        color: var(--gray-800);
        background: transparent;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    .session-tab-main:hover {
        background: color-mix(in srgb, var(--primary) 12%, var(--surface) 88%);
    }
    .session-tab-main.active {
        background: var(--primary);
        color: #fff;
    }
    .session-tab-close {
        border: 0;
        width: 26px;
        height: 26px;
        border-radius: 7px;
        background: #ef4444;
        color: #fff;
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.15s ease, transform 0.15s ease;
    }
    .session-tab-close:hover {
        background: #dc2626;
        transform: translateY(-1px);
    }
    .terminal-action-icon-btn {
        width: 32px;
        height: 30px;
        min-width: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        line-height: 1;
    }
    .terminal-toolbar-actions {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .terminal-toolbar-actions .btn {
        border-radius: 8px;
    }
    .transfer-modal-content {
        max-width: 900px;
        border-radius: 14px;
        border: 1px solid #dbe2ea;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    }
    .transfer-modal-layout {
        display: grid;
        gap: 16px;
    }
    .transfer-session-box {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
        background: var(--bg-secondary);
    }
    .transfer-panel {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 16px;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }
    .transfer-panel-title {
        margin: 0 0 12px 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--gray-900);
    }
    .transfer-modal-layout .form-group label {
        font-size: 12px;
        color: var(--gray-600);
        font-weight: 600;
    }
    .transfer-modal-layout input,
    .transfer-modal-layout select {
        border-radius: 10px;
        border-color: var(--border);
        background: var(--input-bg);
        color: var(--gray-800);
    }
    .transfer-modal-layout input:focus,
    .transfer-modal-layout select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }
    .transfer-actions-row {
        display: flex;
        justify-content: flex-end;
        margin-top: 12px;
    }
    .transfer-actions-row .btn {
        min-width: 120px;
    }
    .transfer-progress {
        margin-top: 4px;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-secondary);
    }
    .transfer-progress-bar {
        height: 8px;
        border-radius: 999px;
        background: var(--surface);
        border: 1px solid var(--border);
        overflow: hidden;
    }
    .transfer-progress-bar > span {
        display: block;
        height: 100%;
        width: 0%;
        background: var(--primary);
        transition: width 0.25s ease;
    }
    .transfer-progress-bar.is-indeterminate > span {
        width: 35%;
        animation: transfer-progress-indeterminate 1.2s ease-in-out infinite;
    }
    @keyframes transfer-progress-indeterminate {
        0% { margin-left: 0; }
        50% { margin-left: 65%; }
        100% { margin-left: 0; }
    }
    .transfer-progress-text {
        font-size: 12px;
        color: var(--gray-600);
        margin: 8px 0 0;
    }
    .transfer-actions-row .btn:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }
    .remote-path-picker {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .remote-path-picker input {
        flex: 1;
    }
    .remote-browser-content {
        max-width: 760px;
        border-radius: 14px;
        border: 1px solid #dbe2ea;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    }
    .remote-browser-toolbar {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }
    .remote-browser-toolbar code {
        flex: 1;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 6px 8px;
        font-size: 12px;
        color: var(--gray-700);
    }
    .remote-browser-list {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        max-height: 340px;
        overflow: auto;
    }
    .remote-browser-row {
        display: grid;
        grid-template-columns: 1fr 110px;
        gap: 8px;
        align-items: center;
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
        color: var(--gray-700);
    }
    .remote-browser-row:last-child {
        border-bottom: none;
    }
    .remote-browser-row:hover {
        background: color-mix(in srgb, var(--primary) 10%, var(--surface) 90%);
    }
    .remote-browser-row.active {
        background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
        border-left: 3px solid var(--primary);
    }
    .remote-browser-empty {
        padding: 14px;
        color: var(--gray-500);
        font-size: 13px;
    }
    .transfer-r2r-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 12px;
        align-items: start;
    }
    .transfer-r2r-swap {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
        padding-top: 36px;
    }
    @media (max-width: 720px) {
        .transfer-r2r-grid {
            grid-template-columns: 1fr;
        }
        .transfer-r2r-swap {
            flex-direction: row;
            padding-top: 0;
        }
    }
        margin-right: 6px;
        font-size: 14px;
    }
    .terminal-output-wrap {
        height: 460px;
        overflow: auto;
        border-radius: 10px;
        padding: 4px;
        border: 1px solid #374151;
        background: #0b1220;
        color: #e2e8f0;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    }
    #terminal-xterm {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .terminal-detached-note {
        display: none;
        border: 1px dashed var(--border);
        border-radius: 10px;
        padding: 14px;
        background: var(--bg-secondary);
        color: var(--gray-700);
        font-size: 14px;
    }
    .terminal-page .empty-state {
        color: var(--gray-500);
    }
    .terminal-page .terminal-focus-hint {
        display: block;
        margin-top: 8px;
        color: var(--gray-500);
        font-size: 12px;
    }
    .terminal-card-fullscreen {
        position: fixed !important;
        inset: 10px;
        z-index: 12000;
        margin: 0;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
    }
    .terminal-card-fullscreen #terminal-view {
        display: flex !important;
        flex-direction: column;
        min-height: 0;
        flex: 1;
    }
    .terminal-card-fullscreen .terminal-output-wrap {
        flex: 1;
        height: auto;
        min-height: 0;
    }
    .terminal-card-fullscreen #terminal-xterm,
    .terminal-card-fullscreen .xterm,
    .terminal-card-fullscreen .xterm-viewport {
        height: 100% !important;
        min-height: 0;
    }
    .terminal-tools {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .terminal-appearance-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .terminal-appearance-grid label {
        font-size: 12px;
        color: var(--gray-500);
        margin-bottom: 4px;
        display: block;
    }
    .terminal-appearance-grid input[type="color"] {
        width: 100%;
        max-width: 120px;
        height: 30px;
        padding: 2px;
    }
    @media (max-width: 860px) {
        .terminal-toolbar-actions {
            width: 100%;
            flex-wrap: wrap;
        }

        .terminal-toolbar-actions .btn {
            flex: 1 1 calc(50% - 8px);
            justify-content: center;
        }

        .saved-connections-table th:nth-child(3),
        .saved-connections-table td:nth-child(3) {
            display: none;
        }
    }
    @media (max-width: 640px) {
        .terminal-hero {
            align-items: stretch;
        }
        .terminal-hero .btn {
            width: 100%;
        }
        .terminal-toolbar-actions {
            width: 100%;
            justify-content: flex-end;
            flex-wrap: wrap;
        }
        .terminal-toolbar-actions .btn {
            flex: 1 1 100%;
            width: 100%;
            justify-content: center;
        }
        .saved-connections-table {
            min-width: 560px;
        }
        .saved-connections-table th:nth-child(4),
        .saved-connections-table td:nth-child(4) {
            display: none;
        }
        .saved-connections-table th,
        .saved-connections-table td {
            padding: 8px;
            font-size: 12px;
        }
        .saved-connections-target,
        .saved-connections-auth {
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }
        .remote-path-picker {
            flex-wrap: wrap;
            align-items: stretch;
        }
        .remote-path-picker input,
        .remote-path-picker .btn {
            width: 100%;
        }
        .transfer-actions-row .btn {
            min-width: 0;
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="terminal-page">
<div class="card">
    <div class="terminal-hero">
        <div>
            <h2>Терминал</h2>
            <div class="terminal-subtitle">Несколько терминальных сессий Linux/Windows в одном интерфейсе</div>
        </div>
        <button class="btn btn-primary" type="button" onclick="openConnectModal()">Новое подключение</button>
    </div>
</div>

<div class="card">
    <div class="collapsible-header">
        <h3 class="terminal-panel-title">Сохраненные подключения</h3>
        <button id="saved-connections-toggle" class="collapse-toggle" type="button" onclick="toggleSavedConnections()">Развернуть</button>
    </div>
    <div id="saved-connections-list" class="empty-state" style="margin-top:10px;">Сохранённые подключения отсутствуют.</div>
</div>

<div class="terminal-main-grid">
    <div class="card" id="terminal-card">
        <div class="toolbar">
            <h3 class="terminal-panel-title">Активные сессии</h3>
            <div class="terminal-toolbar-actions">
                <button class="btn btn-secondary btn-sm terminal-action-icon-btn" type="button" title="Параметры отображения терминала" aria-label="Параметры отображения терминала" onclick="openAppearanceModal()">🎨</button>
                <button class="btn btn-primary btn-sm terminal-action-icon-btn" type="button" title="Передача файлов" aria-label="Передача файлов" onclick="openTransferModal()">📦</button>
                <button id="terminal-fullscreen-btn" class="btn btn-secondary btn-sm terminal-action-icon-btn" type="button" title="Развернуть на весь экран" aria-label="Развернуть на весь экран" onclick="toggleTerminalFullscreen()">⛶</button>
                <button class="btn btn-secondary btn-sm terminal-action-icon-btn" type="button" title="Открыть в отдельном окне" aria-label="Открыть в отдельном окне" onclick="openTerminalInWindow()">🗔</button>
            </div>
        </div>
        <div id="terminal-tabs" class="terminal-tabs-wrap"></div>
        <div id="terminal-empty" class="empty-state">Нет активных сессий. Создайте подключение.</div>
        <div id="terminal-view" style="display:none;">
            <div id="terminal-detached-note" class="terminal-detached-note"></div>
            <div id="terminal-output" class="terminal-output-wrap"><div id="terminal-xterm"></div></div>
            <small class="terminal-focus-hint">Фокус в терминале: Enter, Tab, Backspace, Ctrl+C, стрелки.</small>
        </div>
    </div>
</div>

<div class="terminal-tools">
</div>
</div>

<div id="ssh-connect-modal" class="modal">
    <div class="modal-content" style="max-width: 860px;">
        <div class="modal-header">
            <h3 id="ssh-connect-modal-title">Создать подключение</h3>
            <button class="close-btn" type="button" onclick="closeConnectModal()">&times;</button>
        </div>
        <form id="ssh-connect-form" style="display:grid; gap:12px;">
            <input id="ssh-edit-original-name" type="hidden" value="">
            <div class="form-row">
                <div class="form-group">
                    <label>Хост</label>
                    <input id="ssh-host" required placeholder="192.168.1.10 или server.example.com">
                </div>
                <div class="form-group">
                    <label>Порт</label>
                    <input id="ssh-port" type="number" min="1" max="65535" value="22" required>
                </div>
                <div class="form-group">
                    <label>Пользователь</label>
                    <input id="ssh-username" required placeholder="root">
                    <small style="display:block; margin-top:6px; color:#64748b;">
                        Быстрый выбор из секрета/ключа:
                        <button type="button" class="btn btn-secondary btn-sm" id="ssh-username-from-auth-btn" style="margin-left:6px; padding:2px 8px;">Подставить</button>
                    </small>
                </div>
                <div class="form-group">
                    <label>Имя подключения</label>
                    <input id="ssh-save-name" placeholder="prod-root@web01">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Способ аутентификации</label>
                    <select id="ssh-auth-type">
                        <option value="password">Пароль (ручной ввод)</option>
                        <option value="secret">Секрет из вкладки "Секреты"</option>
                        <option value="ssh_key">SSH-ключ из хранилища</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Целевая ОС</label>
                    <select id="ssh-target-os">
                        <option value="linux">Linux/Unix</option>
                        <option value="windows">Windows (OpenSSH)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Стартовая оболочка</label>
                    <select id="ssh-startup-shell">
                        <option value="auto">Авто</option>
                        <option value="bash">bash</option>
                        <option value="sh">sh</option>
                        <option value="powershell">PowerShell</option>
                        <option value="cmd">CMD</option>
                    </select>
                    <small style="display:block; margin-top:6px; color:#64748b;">
                        Для Windows рекомендуется PowerShell/CMD. Для Linux — bash/sh.
                    </small>
                </div>
                <div class="form-group" id="ssh-password-wrap" style="display:none;">
                    <label>Пароль</label>
                    <input id="ssh-password" type="password" placeholder="Введите пароль">
                </div>
                <div class="form-group" id="ssh-secret-wrap">
                    <label>Секрет</label>
                    <select id="ssh-secret-id"></select>
                </div>
                <div class="form-group" id="ssh-key-wrap" style="display:none;">
                    <label>SSH-ключ</label>
                    <select id="ssh-key-id"></select>
                </div>
                <div class="form-group" id="ssh-bootstrap-wrap" style="display:none;">
                    <label>Пароль хоста (первичная установка ключа)</label>
                    <input id="ssh-bootstrap-password" type="password" autocomplete="new-password" placeholder="Если ключа ещё нет в authorized_keys">
                    <small class="form-hint" style="display:block; margin-top:6px;">
                        Необязательно. Если вход по ключу не примут, AWM войдёт по этому паролю, добавит публичный ключ в <code>authorized_keys</code> и подключится по ключу.
                    </small>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group" style="grid-column: 1 / -1; width: 100%;">
                    <label>Заметки/напоминания</label>
                    <textarea id="ssh-notes" class="ssh-notes-field" rows="2" placeholder="Назначение / ограничения использования"></textarea>
                </div>
            </div>
            <div style="display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;">
                <button class="btn btn-secondary" type="button" onclick="closeConnectModal()">Отмена</button>
                <button class="btn btn-secondary" type="submit" name="ssh-connect-action" value="save" id="ssh-connect-save-btn">Только сохранить</button>
                <button class="btn btn-primary" type="submit" name="ssh-connect-action" value="connect" id="ssh-connect-submit-btn">Сохранить и подключить</button>
            </div>
        </form>
    </div>
</div>

<div id="terminal-appearance-modal" class="modal">
    <div class="modal-content" style="max-width: 420px;">
        <div class="modal-header">
            <h3>Параметры отображения терминала</h3>
            <button class="close-btn" type="button" onclick="closeAppearanceModal()">&times;</button>
        </div>
        <div class="terminal-appearance-grid">
            <div>
                <label>Цвет текста</label>
                <input id="terminal-text-color" type="color" value="#e2e8f0">
            </div>
            <div>
                <label>Цвет фона</label>
                <input id="terminal-bg-color" type="color" value="#111827">
            </div>
        </div>
    </div>
</div>

<div id="terminal-transfer-modal" class="modal">
    <div class="modal-content transfer-modal-content">
        <div class="modal-header">
            <h3>Передача файлов</h3>
            <button class="close-btn" type="button" onclick="closeTransferModal()">&times;</button>
        </div>
        <div class="transfer-modal-layout">
            <div class="transfer-session-box">
                <div class="form-group" style="margin:0;">
                    <label>Сессия для передачи</label>
                    <select id="transfer-session-id"></select>
                </div>
            </div>

            <div class="transfer-panel">
                <h4 class="transfer-panel-title">Загрузка на удаленный хост</h4>
                <div class="form-row">
                    <div class="form-group">
                        <label>Локальный файл</label>
                        <input id="upload-file" type="file">
                    </div>
                    <div class="form-group">
                        <label>Удаленный путь для upload</label>
                        <div class="remote-path-picker">
                            <input id="upload-remote-path" placeholder="/home/user/" readonly>
                            <button class="btn btn-secondary" type="button" onclick="openRemotePathBrowser('upload')"><span class="transfer-btn-icon">📁</span>Выбрать</button>
                        </div>
                    </div>
                </div>
                <div class="transfer-actions-row">
                    <button id="upload-btn" class="btn btn-success" type="button"><span class="transfer-btn-icon">⬆️</span>Загрузить</button>
                </div>
            </div>

            <div class="transfer-panel">
                <h4 class="transfer-panel-title">Скачивание с удаленного хоста</h4>
                <div class="form-row">
                    <div class="form-group">
                        <label>Удаленный путь для download</label>
                        <div class="remote-path-picker">
                            <input id="download-remote-path" placeholder="/home/user/file.txt" readonly>
                            <button class="btn btn-secondary" type="button" onclick="openRemotePathBrowser('download')"><span class="transfer-btn-icon">📄</span>Выбрать</button>
                        </div>
                    </div>
                </div>
                <div class="transfer-actions-row">
                    <button id="download-btn" class="btn btn-primary" type="button"><span class="transfer-btn-icon">⬇️</span>Скачать</button>
                </div>
            </div>

            <div class="transfer-panel">
                <h4 class="transfer-panel-title">Между удалёнными хостами</h4>
                <p class="form-hint" style="margin:0 0 12px;">
                    Нужны две активные SSH-сессии. Файл копируется через AWM (хосты друг с другом напрямую не связываются).
                </p>
                <div class="transfer-r2r-grid">
                    <div>
                        <div class="form-group">
                            <label>Источник (сессия)</label>
                            <select id="transfer-r2r-source-session"></select>
                        </div>
                        <div class="form-group">
                            <label>Файл на источнике</label>
                            <div class="remote-path-picker">
                                <input id="transfer-r2r-source-path" placeholder="/home/user/file.txt" readonly>
                                <button class="btn btn-secondary" type="button" onclick="openRemotePathBrowser('r2r-source')"><span class="transfer-btn-icon">📄</span>Выбрать</button>
                            </div>
                        </div>
                    </div>
                    <div class="transfer-r2r-swap">
                        <button id="transfer-r2r-swap-btn" class="btn btn-secondary btn-sm" type="button" title="Поменять местами" onclick="swapRemoteTransferEndpoints()">⇄</button>
                    </div>
                    <div>
                        <div class="form-group">
                            <label>Назначение (сессия)</label>
                            <select id="transfer-r2r-dest-session"></select>
                        </div>
                        <div class="form-group">
                            <label>Каталог / путь назначения</label>
                            <div class="remote-path-picker">
                                <input id="transfer-r2r-dest-path" placeholder="/home/user/" readonly>
                                <button class="btn btn-secondary" type="button" onclick="openRemotePathBrowser('r2r-dest')"><span class="transfer-btn-icon">📁</span>Выбрать</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="transfer-actions-row">
                    <button id="transfer-r2r-btn" class="btn btn-primary" type="button"><span class="transfer-btn-icon">🔁</span>Передать файл</button>
                </div>
            </div>

            <div id="transfer-progress" class="transfer-progress" hidden>
                <div id="transfer-progress-bar" class="transfer-progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <span id="transfer-progress-fill"></span>
                </div>
                <p id="transfer-progress-text" class="transfer-progress-text">Подготовка…</p>
            </div>
        </div>
    </div>
</div>

<div id="remote-browser-modal" class="modal">
    <div class="modal-content remote-browser-content">
        <div class="modal-header">
            <h3 id="remote-browser-title">Выбор удаленного пути</h3>
            <button class="close-btn" type="button" onclick="closeRemotePathBrowser()">&times;</button>
        </div>
        <div class="remote-browser-toolbar">
            <button class="btn btn-secondary btn-sm" type="button" onclick="remoteBrowserGoUp()"><span class="transfer-btn-icon">⬆</span>Вверх</button>
            <button class="btn btn-secondary btn-sm" type="button" onclick="loadRemoteBrowserPath(remoteBrowser.currentPath)"><span class="transfer-btn-icon">🔄</span>Обновить</button>
            <code id="remote-browser-path">/</code>
        </div>
        <div id="remote-browser-list" class="remote-browser-list"></div>
        <div class="transfer-actions-row" style="margin-top: 10px;">
            <button id="remote-browser-select-btn" class="btn btn-primary" type="button" onclick="applyRemotePathSelection()"><span class="ui-icon transfer-btn-icon">✓</span>Выбрать</button>
        </div>
    </div>
</div>

<div id="ssh-hostkey-modal" class="modal">
    <div class="modal-content" style="max-width: 560px;">
        <div class="modal-header">
            <h3 id="ssh-hostkey-modal-title">Новый SSH-хост</h3>
            <button class="close-btn" type="button" id="ssh-hostkey-cancel-x">&times;</button>
        </div>
        <p id="ssh-hostkey-modal-message" class="form-hint" style="white-space: pre-wrap; color: var(--gray-800); font-size: 14px; line-height: 1.5;"></p>
        <div style="display:flex; justify-content:flex-end; gap:8px; margin-top:16px;">
            <button type="button" class="btn btn-secondary" id="ssh-hostkey-cancel-btn">Отмена</button>
            <button type="button" class="btn btn-primary" id="ssh-hostkey-accept-btn">Доверять и подключить</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const sessions = new Map();
    const STORAGE_KEY = 'awm.ssh.savedConnections.v1';
    const LOW_LATENCY_KEY = 'awm.ssh.lowLatency.v1';
    const lowLatencyByQuery = (() => {
        const q = new URLSearchParams(window.location.search || '');
        const value = q.get('low_latency') || q.get('ll') || '';
        return value === '1' || value.toLowerCase() === 'true';
    })();
    const LOW_LATENCY_MODE = lowLatencyByQuery || localStorage.getItem(LOW_LATENCY_KEY) === '1';
    if (lowLatencyByQuery) {
        localStorage.setItem(LOW_LATENCY_KEY, '1');
    }
    let activeSessionId = null;
    let pollTimer = null;
    const pendingInputs = new Map();           // HTTP fallback input per session
    const inputFlushTimers = new Map();        // HTTP fallback timers per session
    const inputInFlightBySession = new Map();  // HTTP fallback in-flight per session
    const wsInputBuffers = new Map();          // WS input micro-buffers per session
    const wsInputTimers = new Map();           // WS input timers per session
    const wsTextEncoder = new TextEncoder();
    const wsTextDecoder = new TextDecoder('utf-8', { fatal: false });
    const WS_FRAME_INPUT = 0x69;   // 'i'
    const WS_FRAME_RESIZE = 0x72;  // 'r'
    const WS_FRAME_OUTPUT = 0x6f;  // 'o'
    const WS_FRAME_ERROR = 0x65;   // 'e'
    const WS_FRAME_STATUS = 0x73;  // 's'
    const WS_FRAME_SESSION = 0x53; // 'S'
    const WS_INPUT_BATCH_MS = LOW_LATENCY_MODE ? 2 : 4;
    const reconnectTimers = new Map();
    let savedConnectionsCollapsed = true;
    let terminalFullscreen = false;
    let xterm = null;
    let xtermFitAddon = null;
    let xtermDataDisposable = null;
    let lastTerminalInputAt = 0;
    let lastTerminalOutputAt = 0;
    const remoteBrowser = {
        mode: '',
        sessionId: '',
        currentPath: '/',
        selectedPath: '',
        selectedIsDir: false,
        entries: [],
    };

    function formatApiErrorMessage(detail, fallback) {
        if (detail == null || detail === '') return fallback || 'Ошибка запроса';
        if (typeof detail === 'string') return detail;
        if (typeof detail === 'object') {
            return detail.message || detail.msg || fallback || 'Ошибка запроса';
        }
        return String(detail);
    }

    async function apiCall(method, url, data = null) {
        const options = { method, headers: {} };
        if (data && !(data instanceof FormData)) {
            options.headers['Content-Type'] = 'application/json';
            options.body = JSON.stringify(data);
        } else if (data instanceof FormData) {
            options.body = data;
        }
        const response = await fetch(url, options);
        if (!response.ok) {
            let detail = `HTTP ${response.status}`;
            try {
                const payload = await response.json();
                detail = payload.detail !== undefined ? payload.detail : detail;
            } catch (e) {}
            const err = new Error(formatApiErrorMessage(detail, `HTTP ${response.status}`));
            err.name = 'ApiError';
            err.detail = detail;
            err.status = response.status;
            throw err;
        }
        const ct = response.headers.get('content-type') || '';
        if (ct.includes('application/json')) return response.json();
        return response;
    }

    function extractHostKeyDecision(error) {
        const detail = error && error.detail;
        if (detail && typeof detail === 'object' && !Array.isArray(detail)) {
            if (detail.code === 'host_key_unknown' || detail.code === 'host_key_changed') {
                return detail;
            }
        }
        const msg = String(
            (detail && typeof detail === 'object' && detail.message)
            || (typeof detail === 'string' ? detail : '')
            || (error && error.message)
            || '',
        );
        const looksUnknown = /Неизвестный хост|known_hosts|host_key_unknown/i.test(msg);
        const looksChanged = /Ключ хоста .* изменился|host_key_changed/i.test(msg);
        if (!(looksUnknown || looksChanged) && Number(error && error.status) !== 409) {
            return null;
        }
        if (!(looksUnknown || looksChanged) && Number(error && error.status) === 409) {
            // 409 без кода — всё равно показать подтверждение с текстом ошибки
        } else if (!(looksUnknown || looksChanged)) {
            return null;
        }
        const parsed = msg.match(
            /(?:Неизвестный хост|Ключ хоста)\s+(\S+):(\d+)\s+\(([^)\s]+)\s+(SHA256:[^)]+)\)/i,
        );
        return {
            code: looksChanged ? 'host_key_changed' : 'host_key_unknown',
            message: msg,
            host: parsed ? parsed[1] : '',
            port: parsed ? Number(parsed[2]) : 22,
            key_type: parsed ? parsed[3] : '',
            fingerprint: parsed ? parsed[4] : '',
            expected_fingerprint: null,
        };
    }

    function confirmHostKeyTrust(detail) {
        const code = detail && detail.code;
        const host = detail.host || '?';
        const port = detail.port || 22;
        const keyType = detail.key_type || 'ssh';
        const fingerprint = detail.fingerprint || '';
        const expected = detail.expected_fingerprint || '';
        let message;
        let title;
        if (code === 'host_key_changed') {
            title = 'Ключ хоста изменился';
            message =
                `Отпечаток SSH-ключа хоста ${host}:${port} не совпадает с сохранённым.\n\n` +
                `Новый: ${keyType} ${fingerprint}\n` +
                (expected ? `Было: ${expected}\n\n` : '\n') +
                `Подтвердите только если смена ключа на сервере ожидаема (иначе возможен MITM).`;
        } else {
            title = 'Новый SSH-хост';
            message =
                (detail && detail.message)
                || (
                    `Хост ${host}:${port} ещё не в known_hosts.\n\n` +
                    `Ключ: ${keyType}\nОтпечаток: ${fingerprint}\n\n` +
                    `Добавить в список доверенных и продолжить подключение?`
                );
            if (detail && detail.message && !/Добавить в список|Доверять/i.test(detail.message)) {
                message = `${detail.message}\n\nДобавить ключ в known_hosts и продолжить подключение?`;
            }
        }

        const modal = document.getElementById('ssh-hostkey-modal');
        const titleEl = document.getElementById('ssh-hostkey-modal-title');
        const msgEl = document.getElementById('ssh-hostkey-modal-message');
        const okBtn = document.getElementById('ssh-hostkey-accept-btn');
        const cancelBtn = document.getElementById('ssh-hostkey-cancel-btn');
        const cancelX = document.getElementById('ssh-hostkey-cancel-x');
        if (modal && titleEl && msgEl && okBtn && cancelBtn) {
            return new Promise((resolve) => {
                titleEl.textContent = title;
                msgEl.textContent = message;
                modal.classList.add('active');
                const done = (value) => {
                    modal.classList.remove('active');
                    okBtn.removeEventListener('click', onOk);
                    cancelBtn.removeEventListener('click', onCancel);
                    if (cancelX) cancelX.removeEventListener('click', onCancel);
                    modal.removeEventListener('click', onBackdrop);
                    resolve(value);
                };
                const onOk = () => done(true);
                const onCancel = () => done(false);
                const onBackdrop = (event) => {
                    if (event.target === modal) onCancel();
                };
                okBtn.addEventListener('click', onOk);
                cancelBtn.addEventListener('click', onCancel);
                if (cancelX) cancelX.addEventListener('click', onCancel);
                modal.addEventListener('click', onBackdrop);
                setTimeout(() => okBtn.focus(), 0);
            });
        }
        if (typeof awmShowSystemModal === 'function') {
            return awmShowSystemModal({
                title,
                message,
                mode: 'confirm',
                okLabel: 'Доверять и подключить',
                cancelLabel: 'Отмена',
            }).then((v) => !!v);
        }
        if (typeof awmConfirm === 'function') {
            return awmConfirm(message, title).then((v) => !!v);
        }
        return Promise.resolve(window.confirm(message));
    }

    async function handleAuthFailedDetail(detail, sessionPayload = null) {
        const message = formatApiErrorMessage(detail, 'Ошибка аутентификации SSH');
        const publicKey = detail && detail.public_key ? String(detail.public_key) : '';
        const canInstall = !!(detail && detail.can_install && publicKey && sessionPayload
            && sessionPayload.auth_type === 'ssh_key' && sessionPayload.ssh_key_id);

        if (canInstall) {
            const install = typeof awmConfirm === 'function'
                ? await awmConfirm(
                    `${message}\n\nУстановить публичный ключ в authorized_keys на хосте по паролю пользователя и подключиться снова?`,
                    'Установка SSH-ключа',
                )
                : window.confirm('Установить ключ по паролю и подключиться?');
            if (install) {
                let password = null;
                if (typeof awmPromptPassword === 'function') {
                    password = await awmPromptPassword(
                        `Пароль пользователя ${sessionPayload.username} на ${sessionPayload.host}:${sessionPayload.port || 22}`,
                        'Пароль для установки ключа',
                    );
                } else {
                    password = window.prompt('Пароль пользователя на хосте');
                }
                if (password == null || !String(password).trim()) {
                    updateStatus('установка ключа отменена', '#d97706');
                    return null;
                }
                return createSession({
                    ...sessionPayload,
                    bootstrap_password: String(password),
                    trust_host_key: !!sessionPayload.trust_host_key,
                });
            }
        }

        if (!publicKey) {
            if (typeof awmAlert === 'function') await awmAlert(message, 'Ошибка подключения');
            else alert(message);
            return null;
        }
        const full =
            `${message}\n\n` +
            `Публичный ключ (добавьте строку в ~/.ssh/authorized_keys на хосте):\n${publicKey}`;
        if (typeof awmConfirm === 'function') {
            const copy = await awmConfirm(`${full}\n\nСкопировать публичный ключ в буфер обмена?`, 'Ошибка аутентификации');
            if (copy && navigator.clipboard && navigator.clipboard.writeText) {
                try {
                    await navigator.clipboard.writeText(publicKey);
                    if (typeof awmAlert === 'function') await awmAlert('Публичный ключ скопирован.', 'Выполнено');
                } catch (e) {
                    if (typeof awmAlert === 'function') await awmAlert(full, 'Ошибка аутентификации');
                    else alert(full);
                }
            }
            return null;
        }
        alert(full);
        return null;
    }

    function applyTerminalColors() {
        const output = document.getElementById('terminal-output');
        const fg = document.getElementById('terminal-text-color').value;
        const bg = document.getElementById('terminal-bg-color').value;
        output.style.color = fg;
        output.style.backgroundColor = bg;
        if (xterm) {
            xterm.options.theme = {
                ...(xterm.options.theme || {}),
                foreground: fg,
                background: bg,
            };
            xterm.refresh(0, xterm.rows - 1);
        }
    }

    function getTerminalSize() {
        if (xterm && xterm.cols && xterm.rows) {
            return { cols: xterm.cols, rows: xterm.rows };
        }
        return { cols: 120, rows: 30 };
    }

    function fitTerminalDimensions() {
        if (!xterm || !xtermFitAddon) return;
        const hasPropose = typeof xtermFitAddon.proposeDimensions === 'function';
        if (hasPropose) {
            const dims = xtermFitAddon.proposeDimensions();
            if (dims && dims.cols > 0 && dims.rows > 0) {
                if (xterm.cols !== dims.cols || xterm.rows !== dims.rows) {
                    xterm.resize(dims.cols, dims.rows);
                }
                return;
            }
        }
        xtermFitAddon.fit();
    }

    function syncActiveSessionPtySize() {
        if (!activeSessionId) return;
        fitTerminalDimensions();
        const size = getTerminalSize();
        sendViaWebsocket(activeSessionId, { type: 'resize', cols: size.cols, rows: size.rows });
    }

    function scheduleTerminalFitSequence() {
        const ticks = [0, 30, 80, 160];
        ticks.forEach((ms) => {
            setTimeout(() => {
                fitTerminalDimensions();
                syncActiveSessionPtySize();
            }, ms);
        });
    }

    function renderSessionToTerminal(session) {
        if (!xterm || !session || session.detachedMode) return;
        xterm.reset();
        xterm.write(String(session.buffer || ''));
    }

    function initXtermIfNeeded() {
        if (xterm) return;
        const mount = document.getElementById('terminal-xterm');
        if (!mount || typeof Terminal === 'undefined' || typeof FitAddon === 'undefined') return;
        xterm = new Terminal({
            cursorBlink: true,
            convertEol: false,
            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
            fontSize: 14,
            scrollback: 5000,
            theme: {
                background: document.getElementById('terminal-bg-color').value,
                foreground: document.getElementById('terminal-text-color').value,
            },
        });
        xtermFitAddon = new FitAddon.FitAddon();
        xterm.loadAddon(xtermFitAddon);
        xterm.open(mount);
        fitTerminalDimensions();
        applyTerminalColors();
        if (xtermDataDisposable) {
            xtermDataDisposable.dispose();
        }
        xtermDataDisposable = xterm.onData((data) => {
            if (!activeSessionId) return;
            sendViaWebsocket(activeSessionId, { type: 'input', data });
        });
        scheduleTerminalFitSequence();
    }

    function setAuthFieldsVisibility() {
        const authType = document.getElementById('ssh-auth-type').value;
        document.getElementById('ssh-password-wrap').style.display = authType === 'password' ? 'block' : 'none';
        document.getElementById('ssh-secret-wrap').style.display = authType === 'secret' ? 'block' : 'none';
        document.getElementById('ssh-key-wrap').style.display = authType === 'ssh_key' ? 'block' : 'none';
        const bootstrapWrap = document.getElementById('ssh-bootstrap-wrap');
        if (bootstrapWrap) bootstrapWrap.style.display = authType === 'ssh_key' ? 'block' : 'none';
        if (authType !== 'ssh_key') {
            const bp = document.getElementById('ssh-bootstrap-password');
            if (bp) bp.value = '';
        }
    }

    function updateStatus(text, color = '#64748b') {
        const statusEl = document.getElementById('terminal-connection-status');
        if (!statusEl) return;
        statusEl.textContent = `Статус: ${text}`;
        statusEl.style.color = color;
    }

    function openConnectModal(prefill = null) {
        const modalTitle = document.getElementById('ssh-connect-modal-title');
        const submitBtn = document.getElementById('ssh-connect-submit-btn');
        const saveBtn = document.getElementById('ssh-connect-save-btn');
        const originalName = document.getElementById('ssh-edit-original-name');
        const bootstrapInput = document.getElementById('ssh-bootstrap-password');
        if (bootstrapInput) bootstrapInput.value = '';
        if (prefill) {
            document.getElementById('ssh-host').value = prefill.host || '';
            document.getElementById('ssh-port').value = prefill.port || 22;
            document.getElementById('ssh-username').value = prefill.username || '';
            document.getElementById('ssh-auth-type').value = prefill.auth_type || 'secret';
            document.getElementById('ssh-target-os').value = prefill.target_os || 'linux';
            document.getElementById('ssh-startup-shell').value = prefill.startup_shell || 'auto';
            document.getElementById('ssh-secret-id').value = prefill.secret_id || '';
            document.getElementById('ssh-key-id').value = prefill.ssh_key_id || '';
            document.getElementById('ssh-save-name').value = prefill.saved_name || '';
            document.getElementById('ssh-notes').value = prefill.notes || '';
            originalName.value = prefill.saved_name || '';
            modalTitle.textContent = 'Редактировать подключение';
            if (submitBtn) submitBtn.textContent = 'Сохранить и подключить';
            if (saveBtn) saveBtn.textContent = 'Только сохранить';
        } else {
            modalTitle.textContent = 'Создать подключение';
            if (submitBtn) submitBtn.textContent = 'Сохранить и подключить';
            if (saveBtn) saveBtn.textContent = 'Только сохранить';
            originalName.value = '';
            document.getElementById('ssh-connect-form').reset();
            document.getElementById('ssh-port').value = 22;
            document.getElementById('ssh-auth-type').value = 'ssh_key';
            document.getElementById('ssh-target-os').value = 'linux';
            document.getElementById('ssh-startup-shell').value = 'auto';
        }
        setAuthFieldsVisibility();
        document.getElementById('ssh-connect-modal').classList.add('active');
    }

    function closeConnectModal() {
        document.getElementById('ssh-connect-modal').classList.remove('active');
    }

    function openAppearanceModal() {
        document.getElementById('terminal-appearance-modal').classList.add('active');
    }

    function closeAppearanceModal() {
        document.getElementById('terminal-appearance-modal').classList.remove('active');
    }

    function openTransferModal() {
        refreshTransferSessionSelect();
        applyDefaultUploadPathForTransfer();
        applyDefaultR2RPaths();
        document.getElementById('terminal-transfer-modal').classList.add('active');
    }

    function closeTransferModal() {
        document.getElementById('terminal-transfer-modal').classList.remove('active');
    }

    function getTransferSessionId() {
        const select = document.getElementById('transfer-session-id');
        const selected = String(select?.value || '').trim();
        if (selected) return selected;
        return activeSessionId;
    }

    function fillSessionSelect(select, preferredId) {
        if (!select) return;
        const items = Array.from(sessions.values());
        if (!items.length) {
            select.innerHTML = '<option value="">Нет активных сессий</option>';
            return;
        }
        select.innerHTML = items.map((session) => (
            `<option value="${session.id}">${escapeHtml(session.label || session.id)}</option>`
        )).join('');
        if (preferredId && sessions.has(preferredId)) {
            select.value = preferredId;
        }
    }

    function refreshTransferSessionSelect() {
        const preferred = activeSessionId && sessions.has(activeSessionId) ? activeSessionId : '';
        fillSessionSelect(document.getElementById('transfer-session-id'), preferred);
        const ids = Array.from(sessions.keys());
        const srcSel = document.getElementById('transfer-r2r-source-session');
        const dstSel = document.getElementById('transfer-r2r-dest-session');
        const prevSrc = String(srcSel?.value || '');
        const prevDst = String(dstSel?.value || '');
        fillSessionSelect(srcSel, prevSrc || preferred || ids[0] || '');
        let destPreferred = prevDst;
        if (!destPreferred || destPreferred === (srcSel?.value || '')) {
            destPreferred = ids.find((id) => id !== (srcSel?.value || '')) || ids[0] || '';
        }
        fillSessionSelect(dstSel, destPreferred);
    }

    function applyDefaultUploadPathForTransfer() {
        const input = document.getElementById('upload-remote-path');
        if (!input) return;
        if (String(input.value || '').trim()) return;
        const sessionId = getTransferSessionId();
        if (!sessionId) return;
        const session = sessions.get(sessionId);
        const homeDir = String(session?.home_dir || '').trim();
        if (homeDir) {
            input.value = homeDir.endsWith('/') ? homeDir : `${homeDir}/`;
            return;
        }
        input.value = '~/';
    }

    function homeDirForSession(sessionId) {
        const session = sessions.get(sessionId);
        const homeDir = String(session?.home_dir || '').trim();
        if (homeDir) return homeDir.endsWith('/') ? homeDir : `${homeDir}/`;
        return '~/';
    }

    function applyDefaultR2RPaths() {
        const srcPath = document.getElementById('transfer-r2r-source-path');
        const dstPath = document.getElementById('transfer-r2r-dest-path');
        const srcSid = String(document.getElementById('transfer-r2r-source-session')?.value || '');
        const dstSid = String(document.getElementById('transfer-r2r-dest-session')?.value || '');
        if (dstPath && !String(dstPath.value || '').trim() && dstSid) {
            dstPath.value = homeDirForSession(dstSid);
        }
        if (srcPath && !String(srcPath.value || '').trim()) {
            srcPath.placeholder = '/path/to/file';
        }
        void srcSid;
    }

    function closeRemotePathBrowser() {
        document.getElementById('remote-browser-modal').classList.remove('active');
    }

    function isRemoteBrowserDirMode(mode) {
        return mode === 'upload' || mode === 'r2r-dest';
    }

    function isRemoteBrowserFileMode(mode) {
        return mode === 'download' || mode === 'r2r-source';
    }

    async function openRemotePathBrowser(mode) {
        let sessionId = '';
        if (mode === 'r2r-source') {
            sessionId = String(document.getElementById('transfer-r2r-source-session')?.value || '').trim();
        } else if (mode === 'r2r-dest') {
            sessionId = String(document.getElementById('transfer-r2r-dest-session')?.value || '').trim();
        } else {
            sessionId = getTransferSessionId();
        }
        if (!sessionId) {
            alert('Сначала выберите SSH-сессию');
            return;
        }
        const session = sessions.get(sessionId);
        const uploadPath = String(document.getElementById('upload-remote-path').value || '').trim();
        const downloadPath = String(document.getElementById('download-remote-path').value || '').trim();
        const r2rSource = String(document.getElementById('transfer-r2r-source-path').value || '').trim();
        const r2rDest = String(document.getElementById('transfer-r2r-dest-path').value || '').trim();
        let startPath = '';
        if (mode === 'upload') {
            startPath = uploadPath || String(session?.home_dir || '').trim() || '~/';
        } else if (mode === 'download') {
            startPath = downloadPath || String(session?.home_dir || '').trim() || '~/';
        } else if (mode === 'r2r-source') {
            startPath = (r2rSource && r2rSource.includes('/') ? r2rSource.replace(/[^/]+$/, '') : '')
                || String(session?.home_dir || '').trim()
                || '~/';
        } else if (mode === 'r2r-dest') {
            startPath = r2rDest || String(session?.home_dir || '').trim() || '~/';
        }
        remoteBrowser.mode = mode;
        remoteBrowser.sessionId = sessionId;
        remoteBrowser.selectedPath = '';
        remoteBrowser.selectedIsDir = false;
        const titles = {
            upload: 'Выбор удаленной директории для загрузки',
            download: 'Выбор удаленного файла для скачивания',
            'r2r-source': 'Выбор файла на хосте-источнике',
            'r2r-dest': 'Выбор каталога на хосте-назначении',
        };
        document.getElementById('remote-browser-title').textContent = titles[mode] || 'Выбор пути';
        document.getElementById('remote-browser-select-btn').textContent = isRemoteBrowserDirMode(mode)
            ? 'Выбрать директорию'
            : 'Выбрать файл';
        document.getElementById('remote-browser-modal').classList.add('active');
        await loadRemoteBrowserPath(startPath);
    }

    async function loadRemoteBrowserPath(path) {
        if (!remoteBrowser.sessionId) return;
        const data = await apiCall(
            'GET',
            `/api/ssh-terminal/sessions/${remoteBrowser.sessionId}/fs?path=${encodeURIComponent(path || '')}`
        );
        remoteBrowser.currentPath = String(data.path || '/');
        remoteBrowser.entries = Array.isArray(data.entries) ? data.entries : [];
        remoteBrowser.selectedPath = '';
        remoteBrowser.selectedIsDir = false;
        renderRemoteBrowserList();
    }

    function renderRemoteBrowserList() {
        const list = document.getElementById('remote-browser-list');
        const pathEl = document.getElementById('remote-browser-path');
        pathEl.textContent = remoteBrowser.currentPath || '/';
        if (!remoteBrowser.entries.length) {
            list.innerHTML = '<div class="remote-browser-empty">Папка пустая</div>';
            return;
        }
        list.innerHTML = remoteBrowser.entries.map((entry) => {
            const icon = entry.is_dir ? '📁' : '📄';
            const safePath = encodeURIComponent(entry.path || '');
            const active = remoteBrowser.selectedPath === entry.path ? 'active' : '';
            return `
                <div class="remote-browser-row ${active}" onclick="remoteBrowserRowClick(decodeURIComponent('${safePath}'), ${entry.is_dir ? 'true' : 'false'})">
                    <div>${icon} ${escapeHtml(entry.name || '')}</div>
                    <div style="text-align:right; color:#64748b;">${entry.is_dir ? 'папка' : 'файл'}</div>
                </div>
            `;
        }).join('');
    }

    function remoteBrowserRowClick(path, isDir) {
        if (isDir) {
            if (isRemoteBrowserDirMode(remoteBrowser.mode)) {
                remoteBrowser.selectedPath = path;
                remoteBrowser.selectedIsDir = true;
                renderRemoteBrowserList();
                return;
            }
            loadRemoteBrowserPath(path).catch((e) => alert(e.message));
            return;
        }
        if (isRemoteBrowserFileMode(remoteBrowser.mode)) {
            remoteBrowser.selectedPath = path;
            remoteBrowser.selectedIsDir = false;
            renderRemoteBrowserList();
        }
    }

    function remoteBrowserGoUp() {
        const current = String(remoteBrowser.currentPath || '/');
        if (current === '/' || !current) return;
        const parent = current.replace(/\/+$/, '').split('/').slice(0, -1).join('/') || '/';
        loadRemoteBrowserPath(parent).catch((e) => alert(e.message));
    }

    function applyRemotePathSelection() {
        if (isRemoteBrowserDirMode(remoteBrowser.mode)) {
            let selected = remoteBrowser.selectedPath || remoteBrowser.currentPath || '';
            if (!selected) {
                alert('Не удалось определить директорию');
                return;
            }
            if (!selected.endsWith('/')) selected = `${selected}/`;
            if (remoteBrowser.mode === 'upload') {
                document.getElementById('upload-remote-path').value = selected;
            } else {
                document.getElementById('transfer-r2r-dest-path').value = selected;
            }
            closeRemotePathBrowser();
            return;
        }
        if (!remoteBrowser.selectedPath || remoteBrowser.selectedIsDir) {
            alert('Выберите файл');
            return;
        }
        if (remoteBrowser.mode === 'download') {
            document.getElementById('download-remote-path').value = remoteBrowser.selectedPath;
        } else {
            document.getElementById('transfer-r2r-source-path').value = remoteBrowser.selectedPath;
        }
        closeRemotePathBrowser();
    }

    function swapRemoteTransferEndpoints() {
        const srcSel = document.getElementById('transfer-r2r-source-session');
        const dstSel = document.getElementById('transfer-r2r-dest-session');
        const srcPath = document.getElementById('transfer-r2r-source-path');
        const dstPath = document.getElementById('transfer-r2r-dest-path');
        if (!srcSel || !dstSel || !srcPath || !dstPath) return;
        const sid = srcSel.value;
        srcSel.value = dstSel.value;
        dstSel.value = sid;
        // После смены направления нужно заново выбрать файл на новом источнике.
        srcPath.value = '';
        dstPath.value = homeDirForSession(dstSel.value);
    }

    async function transferRemoteToRemote() {
        if (transferBusy) return;
        const sourceSessionId = String(document.getElementById('transfer-r2r-source-session')?.value || '').trim();
        const destSessionId = String(document.getElementById('transfer-r2r-dest-session')?.value || '').trim();
        const sourcePath = String(document.getElementById('transfer-r2r-source-path')?.value || '').trim();
        const destPath = String(document.getElementById('transfer-r2r-dest-path')?.value || '').trim();
        if (!sourceSessionId || !destSessionId) {
            alert('Выберите две SSH-сессии');
            return;
        }
        if (sourceSessionId === destSessionId) {
            alert('Источник и назначение должны быть разными сессиями');
            return;
        }
        if (!sourcePath || sourcePath.endsWith('/')) {
            alert('Выберите файл на хосте-источнике');
            return;
        }
        if (!destPath) {
            alert('Укажите каталог назначения');
            return;
        }
        setTransferBusy(true, 'r2r');
        setTransferProgress(null, 'Копирование между хостами…', { indeterminate: true });
        try {
            const result = await apiCall('POST', '/api/ssh-terminal/transfer-remote', {
                source_session_id: sourceSessionId,
                dest_session_id: destSessionId,
                source_path: sourcePath,
                dest_path: destPath,
            });
            const bytes = Number(result.bytes || 0);
            const name = result.filename || 'файл';
            setTransferProgress(
                100,
                `Передано «${name}» → ${result.dest_path || destPath}`
                    + (bytes ? ` (${formatTransferBytes(bytes)})` : ''),
            );
            hideTransferProgress(4000);
        } catch (error) {
            setTransferProgress(0, error.message || 'Ошибка передачи');
            throw error;
        } finally {
            setTransferBusy(false, 'r2r');
        }
    }

    function toggleTerminalFullscreen() {
        const card = document.getElementById('terminal-card');
        const button = document.getElementById('terminal-fullscreen-btn');
        if (!card || !button) return;
        terminalFullscreen = !terminalFullscreen;
        card.classList.toggle('terminal-card-fullscreen', terminalFullscreen);
        button.textContent = terminalFullscreen ? '🗗' : '⛶';
        button.title = terminalFullscreen ? 'Свернуть из полноэкранного режима' : 'Развернуть на весь экран';
        button.setAttribute('aria-label', button.title);
        const output = document.getElementById('terminal-output');
        if (output) output.focus();
        requestAnimationFrame(() => scheduleTerminalFitSequence());
    }

    function openTerminalInWindow() {
        if (!activeSessionId) {
            alert('Сначала выберите активную сессию');
            return;
        }
        const session = sessions.get(activeSessionId);
        if (!session) {
            alert('Активная сессия не найдена');
            return;
        }
        if (session.detachedWindow && !session.detachedWindow.closed) {
            session.detachedWindow.focus();
            return;
        }
        const popup = window.open('', '_blank', 'width=1200,height=800,resizable=yes,scrollbars=no');
        if (!popup) {
            alert('Не удалось открыть новое окно. Проверьте блокировку pop-up.');
            return;
        }
        const title = session.label || `${session.username || ''}@${session.host || ''}`;
        const escapedTitle = String(title).replace(/</g, '&lt;').replace(/>/g, '&gt;');
        popup.document.write(`<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>${escapedTitle}</title>
  <link rel="stylesheet" href="/static/vendor/xterm/5.3.0/xterm.min.css">
  <script src="/static/vendor/xterm/5.3.0/xterm.min.js"><\/script>
  <script src="/static/vendor/xterm-addon-fit/0.8.0/xterm-addon-fit.min.js"><\/script>
  <style>
    body { margin:0; background:#0f172a; color:#e2e8f0; font-family:Inter,Arial,sans-serif; }
    .bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid #334155; background:#111827; }
    .name { font-weight:700; font-size:14px; }
    .hint { color:#94a3b8; font-size:12px; }
    #out { height: calc(100vh - 52px); overflow:hidden; padding:6px; }
  </style>
</head>
<body>
  <div class="bar">
    <div class="name">${escapedTitle}</div>
    <div class="hint">Enter, Tab, Backspace, Ctrl+C, стрелки</div>
  </div>
  <div id="out"></div>
  <script>
    const sessionId = ${JSON.stringify(activeSessionId)};
    const out = document.getElementById('out');
    let buffer = '';
    let term = null;
    let fitAddon = null;
    let pendingInput = '';
    let flushTimer = null;
    let inFlight = Promise.resolve();
    function sendResize() {
      if (!term) return;
      fetch('/api/ssh-terminal/sessions/' + sessionId + '/resize', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ cols: term.cols || 120, rows: term.rows || 30 })
      }).catch(() => {});
    }
    function fitTerminal() {
      if (!fitAddon || !term) return;
      if (typeof fitAddon.proposeDimensions === 'function') {
        const dims = fitAddon.proposeDimensions();
        if (dims && dims.cols > 0 && dims.rows > 0) {
          if (term.cols !== dims.cols || term.rows !== dims.rows) {
            term.resize(dims.cols, dims.rows);
          }
        } else {
          fitAddon.fit();
        }
      } else {
        fitAddon.fit();
      }
      sendResize();
    }
    function initTerminal() {
      if (typeof Terminal === 'undefined' || typeof FitAddon === 'undefined') return;
      term = new Terminal({
        cursorBlink: true,
        convertEol: false,
        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
        fontSize: 14,
        scrollback: 5000,
        theme: { background: '#0f172a', foreground: '#e2e8f0' }
      });
      fitAddon = new FitAddon.FitAddon();
      term.loadAddon(fitAddon);
      term.open(out);
      fitTerminal();
      term.onData((data) => { sendInput(data).catch(() => {}); });
      const ticks = [0, 40, 120, 220];
      ticks.forEach((ms) => setTimeout(() => fitTerminal(), ms));
    }
    function scheduleInputFlush() {
      if (flushTimer) return;
      flushTimer = setTimeout(() => {
        const chunk = pendingInput;
        pendingInput = '';
        flushTimer = null;
        if (!chunk) return;
        inFlight = inFlight.then(() =>
          fetch('/api/ssh-terminal/sessions/' + sessionId + '/input', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ data: chunk })
          }).catch(() => {})
        );
      }, 20);
    }
    async function sendInput(data) {
      pendingInput += String(data || '');
      scheduleInputFlush();
    }
    async function refresh() {
      try {
        const response = await fetch('/api/ssh-terminal/sessions/' + sessionId + '/state');
        if (!response.ok) return;
        const state = await response.json();
        const next = String(state.output || '');
        if (next !== buffer) {
          buffer = next;
          if (term) {
            term.reset();
            term.write(buffer);
          }
        }
      } catch (e) {}
    }
    initTerminal();
    refresh();
    setInterval(refresh, 120);
    window.addEventListener('resize', () => fitTerminal());
  <\/script>
</body>
</html>`);
        popup.document.close();
        session.detachedWindow = popup;
        session.detachedMode = true;
        popup.addEventListener('beforeunload', () => {
            session.detachedMode = false;
            session.detachedWindow = null;
            if (activeSessionId === session.id) {
                renderActiveTerminalArea(session);
            }
        });
        renderActiveTerminalArea(session);
    }

    function renderActiveTerminalArea(session) {
        const output = document.getElementById('terminal-output');
        const hint = output ? output.nextElementSibling : null;
        const note = document.getElementById('terminal-detached-note');
        if (!output || !note) return;
        if (session?.detachedMode) {
            output.style.display = 'none';
            if (hint) hint.style.display = 'none';
            note.style.display = 'block';
            note.innerHTML = `Терминал для <b>${escapeHtml(session.label || session.id)}</b> открыт в отдельном окне. <br>Вернитесь в окно терминала или закройте его, чтобы продолжить работу здесь.`;
            return;
        }
        note.style.display = 'none';
        output.style.display = 'block';
        if (hint) hint.style.display = 'block';
        scheduleTerminalFitSequence();
    }

    function getSavedConnections() {
        try {
            const parsed = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
            return Array.isArray(parsed) ? parsed : [];
        } catch (e) {
            return [];
        }
    }

    function setSavedConnections(items) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
    }

    function removeSavedConnectionByName(savedName) {
        setSavedConnections(getSavedConnections().filter((item) => item.saved_name !== savedName));
        renderSavedConnections();
    }

    function saveConnectionProfile(payload) {
        const profileName = (document.getElementById('ssh-save-name').value.trim() || `${payload.username}@${payload.host}:${payload.port}`);
        payload.label = profileName;
        const notes = String(document.getElementById('ssh-notes').value || '').trim();
        const originalName = document.getElementById('ssh-edit-original-name').value.trim();
        const next = getSavedConnections().filter((item) => item.saved_name !== profileName && item.saved_name !== originalName);
        next.unshift({ ...payload, saved_name: profileName, notes });
        setSavedConnections(next.slice(0, 50));
        renderSavedConnections();
    }

    async function connectSavedByName(savedName) {
        const profile = getSavedConnections().find((item) => item.saved_name === savedName);
        if (!profile) {
            alert('Сохраненное подключение не найдено');
            return;
        }
        try {
            const size = getTerminalSize();
            await createSession({
                host: profile.host,
                port: Number(profile.port || 22),
                username: profile.username,
                auth_type: profile.auth_type,
                target_os: profile.target_os || 'linux',
                startup_shell: profile.startup_shell || 'auto',
                password: profile.auth_type === 'password' ? String(profile.password || '') : null,
                secret_id: profile.auth_type === 'secret' ? Number(profile.secret_id || 0) || null : null,
                ssh_key_id: profile.auth_type === 'ssh_key' ? Number(profile.ssh_key_id || 0) || null : null,
                cols: size.cols,
                rows: size.rows,
                label: profile.label || null,
            });
        } catch (error) {
            const msg = (error && error.message) || String(error);
            if (typeof awmAlert === 'function') await awmAlert(`Ошибка подключения: ${msg}`, 'Ошибка подключения');
            else alert(`Ошибка подключения: ${msg}`);
        }
    }

    function editSavedByName(savedName) {
        const profile = getSavedConnections().find((item) => item.saved_name === savedName);
        if (!profile) {
            alert('Сохраненное подключение не найдено');
            return;
        }
        openConnectModal(profile);
    }

    function getSavedConnectionStatus(item) {
        const host = String(item.host || '').trim();
        const username = String(item.username || '').trim();
        const port = Number(item.port || 22);
        const active = Array.from(sessions.values()).some((session) => (
            String(session.host || '').trim() === host &&
            String(session.username || '').trim() === username &&
            Number(session.port || 22) === port
        ));
        return active
            ? { text: 'Активно', cls: 'saved-connection-status-online' }
            : { text: 'Не активно', cls: 'saved-connection-status-offline' };
    }

    function renderSavedConnections() {
        const list = document.getElementById('saved-connections-list');
        if (savedConnectionsCollapsed) {
            list.style.display = 'none';
            return;
        }
        list.style.display = 'block';
        const items = getSavedConnections();
        if (!items.length) {
            list.innerHTML = 'Сохранённые подключения отсутствуют.';
            return;
        }
        const rows = items.map((item) => {
            const safeName = encodeURIComponent(item.saved_name || '');
            const status = getSavedConnectionStatus(item);
            return `
                <tr>
                    <td class="saved-connections-name">${escapeHtml(item.saved_name || '')}</td>
                    <td class="saved-connections-target">${escapeHtml(item.username || '')}@${escapeHtml(item.host || '')}:${escapeHtml(String(item.port || 22))}</td>
                    <td class="saved-connections-auth">${escapeHtml(item.auth_type === 'ssh_key' ? 'SSH-ключ' : (item.auth_type === 'password' ? 'Пароль' : 'Секрет'))}</td>
                    <td class="saved-connections-auth" title="${escapeHtml(item.notes || '')}">${escapeHtml(item.notes || '-')}</td>
                    <td><span class="saved-connection-status-badge ${status.cls}">${status.text}</span></td>
                    <td>
                        <div class="saved-connections-actions">
                            <button class="ui-icon-btn" title="Подключиться" aria-label="Подключиться" onclick="connectSavedByName(decodeURIComponent('${safeName}'))"><span class="ui-icon">🔌</span></button>
                            <button class="ui-icon-btn" title="Редактировать подключение" aria-label="Редактировать подключение" onclick="editSavedByName(decodeURIComponent('${safeName}'))"><span class="ui-icon">✏</span></button>
                            <button class="ui-icon-btn ui-icon-btn-danger" title="Удалить подключение" aria-label="Удалить подключение" onclick="removeSavedConnectionByName(decodeURIComponent('${safeName}'))"><span class="ui-icon">🗑</span></button>
                        </div>
                    </td>
                </tr>
            `;
        }).join('');
        list.innerHTML = `
            <div class="saved-connections-table-wrap">
                <table class="saved-connections-table">
                    <thead>
                        <tr>
                            <th style="width: 24%;">Имя</th>
                            <th style="width: 24%;">Подключение</th>
                            <th style="width: 10%;">Аутентификация</th>
                            <th style="width: 16%;">Заметки</th>
                            <th style="width: 10%;">Статус</th>
                            <th style="width: 16%; text-align:right;">Действия</th>
                        </tr>
                    </thead>
                    <tbody>${rows}</tbody>
                </table>
            </div>
        `;
    }

    function toggleSavedConnections() {
        savedConnectionsCollapsed = !savedConnectionsCollapsed;
        const toggle = document.getElementById('saved-connections-toggle');
        toggle.textContent = savedConnectionsCollapsed ? 'Развернуть' : 'Свернуть';
        renderSavedConnections();
    }

    async function loadAuthSources() {
        const [secrets, keys] = await Promise.all([
            apiCall('GET', '/api/secrets'),
            apiCall('GET', '/api/ssh-keys'),
        ]);
        window._sshSecretsCache = Array.isArray(secrets) ? secrets : [];
        window._sshKeysCache = Array.isArray(keys) ? keys : [];
        const secretSelect = document.getElementById('ssh-secret-id');
        secretSelect.innerHTML = '<option value="">Выберите секрет...</option>' + secrets.map(
            (s) => `<option value="${s.id}">${escapeHtml(s.name)}${s.username ? ` (${escapeHtml(s.username)})` : ''}</option>`
        ).join('');
        const keySelect = document.getElementById('ssh-key-id');
        keySelect.innerHTML = '<option value="">Выберите SSH-ключ...</option>' + keys.map(
            (k) => `<option value="${k.id}">${escapeHtml(k.name)}${k.username ? ` (${escapeHtml(k.username)})` : ''}</option>`
        ).join('');
    }

    function getUsernameFromSelectedAuthSource() {
        const authType = document.getElementById('ssh-auth-type').value;
        if (authType === 'secret') {
            const secretId = Number(document.getElementById('ssh-secret-id').value || 0);
            if (!secretId) return '';
            const secret = (window._sshSecretsCache || []).find((item) => Number(item.id) === secretId);
            return String(secret?.username || '').trim();
        }
        if (authType === 'ssh_key') {
            const keyId = Number(document.getElementById('ssh-key-id').value || 0);
            if (!keyId) return '';
            const key = (window._sshKeysCache || []).find((item) => Number(item.id) === keyId);
            return String(key?.username || '').trim();
        }
        return '';
    }

    function applyUsernameFromAuthSource(options = {}) {
        const silent = Boolean(options.silent);
        const username = getUsernameFromSelectedAuthSource();
        if (!username) {
            if (!silent) {
                alert('Для выбранного секрета/ключа не указан пользователь');
            }
            return;
        }
        document.getElementById('ssh-username').value = username;
    }

    function getSessionById(sessionId) {
        const session = sessions.get(sessionId);
        if (!session) throw new Error('Сессия не найдена');
        return session;
    }

    function renderTabs() {
        const tabsWrap = document.getElementById('terminal-tabs');
        const empty = document.getElementById('terminal-empty');
        const view = document.getElementById('terminal-view');
        if (!sessions.size) {
            tabsWrap.innerHTML = '';
            empty.style.display = 'block';
            view.style.display = 'none';
            activeSessionId = null;
            updateStatus('нет активного подключения');
            return;
        }
        empty.style.display = 'none';
        view.style.display = 'block';
        tabsWrap.innerHTML = Array.from(sessions.values()).map((session) => {
            const activeClass = session.id === activeSessionId ? 'active' : '';
            return `
                <div class="session-tab-item">
                    <button class="session-tab-main ${activeClass}" onclick="activateSession('${session.id}')" title="${escapeHtml(session.label)}">${escapeHtml(session.label)}</button>
                    <button class="session-tab-close" onclick="closeSession('${session.id}')" title="Закрыть сессию" aria-label="Закрыть сессию">×</button>
                </div>
            `;
        }).join('');
    }

    function appendOutput(sessionId, text) {
        const session = sessions.get(sessionId);
        if (!session) return;
        session.lastOutputAt = Date.now();
        lastTerminalOutputAt = session.lastOutputAt;
        session.buffer += String(text || '');
        if (session.buffer.length > 200000) {
            session.buffer = session.buffer.slice(-120000);
        }
        if (activeSessionId === sessionId) {
            if (session.detachedMode) return;
            if (xterm) {
                xterm.write(String(text || ''));
            } else {
                const output = document.getElementById('terminal-output');
                output.textContent = applyTerminalControls('', session.buffer);
                output.scrollTop = output.scrollHeight;
            }
        }
    }

    function activateSession(sessionId) {
        activeSessionId = sessionId;
        renderTabs();
        const session = getSessionById(sessionId);
        renderActiveTerminalArea(session);
        if (session.detachedMode) return;
        if (xterm) {
            renderSessionToTerminal(session);
            xterm.focus();
            syncActiveSessionPtySize();
        } else {
            const output = document.getElementById('terminal-output');
            output.textContent = applyTerminalControls('', session.buffer);
            output.focus();
            output.scrollTop = output.scrollHeight;
        }
        updateStatus(`подключено (${session.label})`, '#16a34a');
    }

    function isUrgentTerminalInput(data) {
        const text = String(data || '');
        for (let i = 0; i < text.length; i += 1) {
            const code = text.charCodeAt(i);
            if (code === 13 || code === 10 || code === 27 || code === 127 || code === 8) return true;
            if (code < 32) return true;
        }
        return false;
    }

    function sendWsBinaryInput(session, chunk) {
        const payload = wsTextEncoder.encode(String(chunk || ''));
        const frame = new Uint8Array(1 + payload.length);
        frame[0] = WS_FRAME_INPUT;
        frame.set(payload, 1);
        session.ws.send(frame);
    }

    function sendWsBinaryResize(session, cols, rows) {
        const c = Math.max(40, Number(cols) || 120);
        const r = Math.max(10, Number(rows) || 30);
        const frame = new Uint8Array(5);
        frame[0] = WS_FRAME_RESIZE;
        frame[1] = (c >> 8) & 0xff;
        frame[2] = c & 0xff;
        frame[3] = (r >> 8) & 0xff;
        frame[4] = r & 0xff;
        session.ws.send(frame);
    }

    function handleWsBinaryMessage(sessionId, buffer) {
        const view = new Uint8Array(buffer);
        if (!view.length) return;
        const frameType = view[0];
        const payload = view.subarray(1);
        if (frameType === WS_FRAME_OUTPUT) {
            appendOutput(sessionId, wsTextDecoder.decode(payload));
            return;
        }
        if (frameType === WS_FRAME_ERROR) {
            appendOutput(sessionId, `\n[ERROR] ${wsTextDecoder.decode(payload)}\n`);
            if (activeSessionId === sessionId) {
                const session = getSessionById(sessionId);
                updateStatus(`ошибка (${session?.label || sessionId})`, '#dc2626');
            }
            return;
        }
        if (frameType === WS_FRAME_STATUS) {
            const statusCode = payload.length ? String.fromCharCode(payload[0]) : '';
            if (activeSessionId !== sessionId) return;
            const session = getSessionById(sessionId);
            if (statusCode === 'c') updateStatus(`подключено (${session?.label || sessionId})`, '#16a34a');
            if (statusCode === 'd') updateStatus(`отключено (${session?.label || sessionId})`, '#dc2626');
            return;
        }
        if (frameType === WS_FRAME_SESSION) {
            try {
                const meta = JSON.parse(wsTextDecoder.decode(payload));
                const session = getSessionById(sessionId);
                if (session && meta?.label) session.label = meta.label;
            } catch (e) {}
        }
    }

    function handleWsJsonMessage(sessionId, message) {
        if (message.type === 'output') {
            appendOutput(sessionId, message.data || '');
        } else if (message.type === 'error') {
            appendOutput(sessionId, `\n[ERROR] ${message.data}\n`);
            if (activeSessionId === sessionId) {
                const session = getSessionById(sessionId);
                updateStatus(`ошибка (${session?.label || sessionId})`, '#dc2626');
            }
        } else if (message.type === 'status') {
            const status = String(message.data || '').toLowerCase();
            if (activeSessionId === sessionId) {
                const session = getSessionById(sessionId);
                if (status === 'connected') updateStatus(`подключено (${session?.label || sessionId})`, '#16a34a');
                if (status === 'disconnected') updateStatus(`отключено (${session?.label || sessionId})`, '#dc2626');
            }
        }
    }

    function flushWsInput(sessionId) {
        wsInputTimers.delete(sessionId);
        const session = sessions.get(sessionId);
        if (!session || !session.ws || session.ws.readyState !== WebSocket.OPEN) return;
        const chunk = String(wsInputBuffers.get(sessionId) || '');
        if (!chunk) return;
        wsInputBuffers.set(sessionId, '');
        sendWsBinaryInput(session, chunk);
    }

    function scheduleWsInputFlush(sessionId, delayMs = null) {
        const existing = wsInputTimers.get(sessionId);
        if (existing) return;
        const buffer = String(wsInputBuffers.get(sessionId) || '');
        let flushDelay;
        if (delayMs != null) {
            flushDelay = Math.max(0, Number(delayMs) || 0);
        } else if (!buffer) {
            flushDelay = 0;
        } else if (isUrgentTerminalInput(buffer)) {
            flushDelay = 0;
        } else {
            flushDelay = WS_INPUT_BATCH_MS;
        }
        const timer = setTimeout(() => flushWsInput(sessionId), flushDelay);
        wsInputTimers.set(sessionId, timer);
    }

    function queueWsInput(sessionId, data) {
        const chunk = String(data || '');
        if (!chunk) return;
        const prev = String(wsInputBuffers.get(sessionId) || '');
        const hadBuffered = prev.length > 0;
        wsInputBuffers.set(sessionId, prev + chunk);
        if (!hadBuffered || isUrgentTerminalInput(chunk)) {
            scheduleWsInputFlush(sessionId, 0);
            return;
        }
        scheduleWsInputFlush(sessionId);
    }

    function sendViaWebsocket(sessionId, payload) {
        const session = getSessionById(sessionId);
        if (payload.type === 'input') {
            const now = Date.now();
            lastTerminalInputAt = now;
            if (session) session.lastInputAt = now;
        }
        if (payload.type === 'input') {
            if (session.ws && session.ws.readyState === WebSocket.OPEN) {
                queueWsInput(sessionId, String(payload.data || ''));
                return;
            }
            queueFallbackInput(sessionId, String(payload.data || ''));
            return;
        }
        if (payload.type === 'resize') {
            if (session.ws && session.ws.readyState === WebSocket.OPEN) {
                sendWsBinaryResize(session, Number(payload.cols || 120), Number(payload.rows || 30));
                return;
            }
            apiCall('POST', `/api/ssh-terminal/sessions/${sessionId}/resize`, {
                cols: Number(payload.cols || 120),
                rows: Number(payload.rows || 30),
            }).catch(() => {});
        }
    }

    function flushFallbackInput(sessionId) {
        inputFlushTimers.delete(sessionId);
        const chunk = String(pendingInputs.get(sessionId) || '');
        if (!chunk) return;
        pendingInputs.set(sessionId, '');
        const previous = inputInFlightBySession.get(sessionId) || Promise.resolve();
        const next = previous
            .catch(() => {})
            .then(() => apiCall('POST', `/api/ssh-terminal/sessions/${sessionId}/input`, { data: chunk }));
        inputInFlightBySession.set(
            sessionId,
            next.catch(() => {}).finally(() => {
                const current = inputInFlightBySession.get(sessionId);
                if (current === next) {
                    inputInFlightBySession.delete(sessionId);
                }
                const rest = String(pendingInputs.get(sessionId) || '');
                if (rest) {
                    scheduleFallbackInputFlush(sessionId, 0);
                }
            })
        );
    }

    function scheduleFallbackInputFlush(sessionId, delayMs = null) {
        const existing = inputFlushTimers.get(sessionId);
        if (existing) return;
        const flushDelay = delayMs == null ? (LOW_LATENCY_MODE ? 6 : 12) : Math.max(0, Number(delayMs) || 0);
        const timer = setTimeout(() => flushFallbackInput(sessionId), flushDelay);
        inputFlushTimers.set(sessionId, timer);
    }

    function queueFallbackInput(sessionId, data) {
        const prev = String(pendingInputs.get(sessionId) || '');
        pendingInputs.set(sessionId, prev + String(data || ''));
        scheduleFallbackInputFlush(sessionId);
    }

    function applyTerminalControls(baseText, chunk) {
        let text = String(baseText || '');
        const data = String(chunk || '')
            .replace(/\[\?2004[hl]/g, '')
            .replace(/\[\s*2004[hl]/g, '');
        let cursor = text.length;
        let i = 0;
        while (i < data.length) {
            const ch = data[i];
            if (ch === '\u001b') {
                const tail = data.slice(i);
                const csiMatch = tail.match(/^\u001b\[[0-9;?]*[A-Za-z]/);
                if (csiMatch) {
                    const code = csiMatch[0];
                    if (code.endsWith('K')) {
                        // erase from cursor to end of current line
                        const lineEndRel = text.slice(cursor).search(/\n/);
                        const lineEnd = lineEndRel === -1 ? text.length : cursor + lineEndRel;
                        text = text.slice(0, cursor) + text.slice(lineEnd);
                    }
                    i += code.length;
                    continue;
                }
                const oscEnd = tail.indexOf('\u0007');
                if (tail.startsWith('\u001b]') && oscEnd > 0) {
                    i += oscEnd + 1;
                    continue;
                }
                i += 1;
                continue;
            }
            if (ch === '\b' || ch === '\u007f') {
                const lineStart = text.lastIndexOf('\n', Math.max(0, cursor - 1)) + 1;
                if (cursor > lineStart) {
                    text = text.slice(0, cursor - 1) + text.slice(cursor);
                    cursor -= 1;
                }
                i += 1;
                continue;
            }
            if (ch === '\r') {
                const nextChar = data[i + 1];
                if (nextChar === '\n') {
                    if (cursor >= text.length) {
                        text += '\n';
                    } else {
                        text = text.slice(0, cursor) + '\n' + text.slice(cursor);
                    }
                    cursor += 1;
                    i += 2;
                    continue;
                }
                cursor = text.lastIndexOf('\n', Math.max(0, cursor - 1)) + 1;
                i += 1;
                continue;
            }
            if (ch === '\u0000') {
                i += 1;
                continue;
            }
            if (cursor >= text.length) {
                text += ch;
            } else {
                text = text.slice(0, cursor) + ch + text.slice(cursor + 1);
            }
            cursor += 1;
            i += 1;
        }
        return text;
    }

    function mapKeyToInput(event) {
        const key = String(event.key || '');
        const lower = key.toLowerCase();
        if (event.ctrlKey && !event.altKey && key.length === 1 && lower >= 'a' && lower <= 'z') {
            return String.fromCharCode(lower.charCodeAt(0) - 96);
        }
        if (event.altKey && key.length === 1) {
            return '\u001b' + key;
        }
        if (key === 'Enter') return '\r';
        if (key === 'Tab') return event.shiftKey ? '\u001b[Z' : '\t';
        if (key === 'Backspace') return '\u007f';
        if (key === 'Delete') return '\u001b[3~';
        if (key === 'Insert') return '\u001b[2~';
        if (key === 'Home') return '\u001b[H';
        if (key === 'End') return '\u001b[F';
        if (key === 'PageUp') return '\u001b[5~';
        if (key === 'PageDown') return '\u001b[6~';
        if (key === 'ArrowUp') return '\u001b[A';
        if (key === 'ArrowDown') return '\u001b[B';
        if (key === 'ArrowRight') return '\u001b[C';
        if (key === 'ArrowLeft') return '\u001b[D';
        if (key === 'Escape') return '\u001b';
        if (!event.ctrlKey && !event.metaKey && key.length === 1) return key;
        return '';
    }

    function scheduleSocketReconnect(sessionId, delayMs = 800) {
        if (!sessions.has(sessionId)) return;
        if (reconnectTimers.has(sessionId)) return;
        const timer = setTimeout(() => {
            reconnectTimers.delete(sessionId);
            openSessionSocket(sessionId).catch(() => {});
        }, delayMs);
        reconnectTimers.set(sessionId, timer);
    }

    async function openSessionSocket(sessionId) {
        const existing = getSessionById(sessionId);
        if (!existing) return;
        if (existing.ws && (existing.ws.readyState === WebSocket.OPEN || existing.ws.readyState === WebSocket.CONNECTING)) {
            return;
        }
        const oldTimer = reconnectTimers.get(sessionId);
        if (oldTimer) {
            clearTimeout(oldTimer);
            reconnectTimers.delete(sessionId);
        }
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const ws = new WebSocket(`${protocol}//${window.location.host}/api/ssh-terminal/ws/${sessionId}`);
        ws.binaryType = 'arraybuffer';
        const session = getSessionById(sessionId);
        session.ws = ws;
        ws.onopen = () => {
            const pending = String(wsInputBuffers.get(sessionId) || '');
            if (pending) {
                flushWsInput(sessionId);
            }
            if (activeSessionId === sessionId) {
                updateStatus(`подключено (${session.label})`, '#16a34a');
            }
        };
        ws.onmessage = (event) => {
            if (typeof event.data === 'string') {
                try {
                    handleWsJsonMessage(sessionId, JSON.parse(event.data));
                } catch (e) {}
                return;
            }
            handleWsBinaryMessage(sessionId, event.data);
        };
        ws.onclose = () => {
            session.ws = null;
            if (activeSessionId === sessionId) {
                updateStatus(`WS недоступен, fallback HTTP (${session.label})`, '#d97706');
            }
            ensurePollingStarted();
            scheduleSocketReconnect(sessionId, 900);
        };
    }

    async function pollSessionState() {
        if (!activeSessionId) return;
        const session = sessions.get(activeSessionId);
        if (!session) return;
        if (session.ws && session.ws.readyState === WebSocket.OPEN) return;
        try {
            const state = await apiCall('GET', `/api/ssh-terminal/sessions/${activeSessionId}/state`);
            const next = String(state.output || '');
            if (next !== session.buffer) {
                session.buffer = next;
                if (session.detachedMode) return;
                if (xterm) {
                    renderSessionToTerminal(session);
                } else {
                    const output = document.getElementById('terminal-output');
                    output.textContent = applyTerminalControls('', session.buffer);
                    output.scrollTop = output.scrollHeight;
                }
            }
            if (state.connected) {
                updateStatus(`подключено (HTTP fallback, ${session.label})`, '#16a34a');
            } else {
                updateStatus(`отключено (${session.label})`, '#dc2626');
            }
        } catch (e) {
            updateStatus(`ошибка проверки состояния (${session.label})`, '#dc2626');
        }
    }

    function computePollIntervalMs() {
        if (!LOW_LATENCY_MODE) return 120;
        const session = activeSessionId ? sessions.get(activeSessionId) : null;
        const now = Date.now();
        const lastActivity = Math.max(
            Number(session?.lastInputAt || 0),
            Number(session?.lastOutputAt || 0),
            Number(lastTerminalInputAt || 0),
            Number(lastTerminalOutputAt || 0),
        );
        const idleMs = lastActivity > 0 ? now - lastActivity : 10_000;
        if (idleMs < 1200) return 16;
        if (idleMs < 5000) return 40;
        return 80;
    }

    async function pollTick() {
        pollTimer = null;
        await pollSessionState().catch(() => {});
        ensurePollingStarted();
    }

    function ensurePollingStarted() {
        if (pollTimer) return;
        pollTimer = setTimeout(pollTick, computePollIntervalMs());
    }

    async function createSession(payload) {
        updateStatus('подключение...', '#d97706');
        try {
            const created = await apiCall('POST', '/api/ssh-terminal/sessions', payload);
            sessions.set(created.session_id, {
                id: created.session_id,
                label: created.label,
                host: created.host,
                port: created.port,
                username: created.username,
                home_dir: created.home_dir || '',
                buffer: '',
                ws: null,
                detachedMode: false,
                detachedWindow: null,
            });
            await openSessionSocket(created.session_id);
            activateSession(created.session_id);
            syncActiveSessionPtySize();
            renderSavedConnections();
            refreshTransferSessionSelect();
            return created;
        } catch (error) {
            const hostKeyDetail = extractHostKeyDecision(error);
            if (hostKeyDetail) {
                const accepted = await confirmHostKeyTrust(hostKeyDetail);
                if (!accepted) {
                    updateStatus('подключение отменено', '#d97706');
                    return null;
                }
                return createSession({ ...payload, trust_host_key: true });
            }
            const detail = error && error.detail;
            if (detail && typeof detail === 'object' && !Array.isArray(detail) && detail.code === 'auth_failed') {
                updateStatus('ошибка аутентификации', '#dc2626');
                return handleAuthFailedDetail(detail, payload);
            }
            throw error;
        }
    }

    async function closeSession(sessionId) {
        const session = sessions.get(sessionId);
        const reconnectTimer = reconnectTimers.get(sessionId);
        if (reconnectTimer) {
            clearTimeout(reconnectTimer);
            reconnectTimers.delete(sessionId);
        }
        if (session?.detachedWindow && !session.detachedWindow.closed) {
            session.detachedWindow.close();
        }
        if (session?.ws) session.ws.close();
        const wsTimer = wsInputTimers.get(sessionId);
        if (wsTimer) {
            clearTimeout(wsTimer);
            wsInputTimers.delete(sessionId);
        }
        wsInputBuffers.delete(sessionId);
        const inputTimer = inputFlushTimers.get(sessionId);
        if (inputTimer) {
            clearTimeout(inputTimer);
            inputFlushTimers.delete(sessionId);
        }
        pendingInputs.delete(sessionId);
        inputInFlightBySession.delete(sessionId);
        await apiCall('DELETE', `/api/ssh-terminal/sessions/${sessionId}`);
        sessions.delete(sessionId);
        const firstId = sessions.keys().next().value;
        if (firstId) {
            activateSession(firstId);
        } else {
            renderTabs();
        }
        renderSavedConnections();
        refreshTransferSessionSelect();
    }

    async function syncSessionsFromServer() {
        const data = await apiCall('GET', '/api/ssh-terminal/sessions');
        const current = new Set((data.sessions || []).map((item) => item.session_id));
        for (const id of Array.from(sessions.keys())) {
            if (!current.has(id)) {
                const s = sessions.get(id);
                if (s?.ws) s.ws.close();
                const wsTimer = wsInputTimers.get(id);
                if (wsTimer) {
                    clearTimeout(wsTimer);
                    wsInputTimers.delete(id);
                }
                wsInputBuffers.delete(id);
                const inputTimer = inputFlushTimers.get(id);
                if (inputTimer) {
                    clearTimeout(inputTimer);
                    inputFlushTimers.delete(id);
                }
                pendingInputs.delete(id);
                inputInFlightBySession.delete(id);
                const reconnectTimer = reconnectTimers.get(id);
                if (reconnectTimer) {
                    clearTimeout(reconnectTimer);
                    reconnectTimers.delete(id);
                }
                sessions.delete(id);
            }
        }
        for (const item of data.sessions || []) {
            if (!sessions.has(item.session_id)) {
                sessions.set(item.session_id, {
                    id: item.session_id,
                    label: item.label,
                    host: item.host,
                    port: item.port,
                    username: item.username,
                    home_dir: item.home_dir || '',
                    buffer: '',
                    ws: null,
                    detachedMode: false,
                    detachedWindow: null,
                });
                await openSessionSocket(item.session_id);
            } else {
                const existing = sessions.get(item.session_id);
                if (existing) {
                    existing.home_dir = item.home_dir || existing.home_dir || '';
                }
            }
        }
        if (!activeSessionId && sessions.size) {
            activateSession(Array.from(sessions.keys())[0]);
        } else {
            renderTabs();
        }
        renderSavedConnections();
        refreshTransferSessionSelect();
    }

    let transferBusy = false;
    let transferHideTimer = null;

    function formatTransferBytes(value) {
        const bytes = Number(value) || 0;
        if (bytes < 1024) return `${bytes} B`;
        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
        if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
        return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
    }

    function setTransferProgress(pct, text, options = {}) {
        const wrap = document.getElementById('transfer-progress');
        const bar = document.getElementById('transfer-progress-bar');
        const fill = document.getElementById('transfer-progress-fill');
        const label = document.getElementById('transfer-progress-text');
        if (!wrap) return;
        wrap.hidden = false;
        const indeterminate = options.indeterminate === true || pct == null;
        if (bar) {
            bar.classList.toggle('is-indeterminate', indeterminate);
            bar.setAttribute('aria-valuenow', indeterminate ? '0' : String(Math.round(pct)));
        }
        if (fill) {
            if (indeterminate) {
                fill.style.width = '';
            } else {
                fill.style.width = `${Math.max(0, Math.min(100, pct))}%`;
            }
        }
        if (label) label.textContent = text || '';
        if (transferHideTimer) {
            clearTimeout(transferHideTimer);
            transferHideTimer = null;
        }
    }

    function hideTransferProgress(delayMs = 0) {
        if (transferHideTimer) clearTimeout(transferHideTimer);
        transferHideTimer = window.setTimeout(() => {
            const wrap = document.getElementById('transfer-progress');
            if (wrap) wrap.hidden = true;
            transferHideTimer = null;
        }, delayMs);
    }

    function setTransferBusy(busy, mode) {
        transferBusy = busy;
        const uploadBtn = document.getElementById('upload-btn');
        const downloadBtn = document.getElementById('download-btn');
        const r2rBtn = document.getElementById('transfer-r2r-btn');
        const fileInput = document.getElementById('upload-file');
        [uploadBtn, downloadBtn, r2rBtn].forEach((btn) => {
            if (!btn) return;
            btn.disabled = busy;
            const active =
                (mode === 'upload' && btn === uploadBtn)
                || (mode === 'download' && btn === downloadBtn)
                || (mode === 'r2r' && btn === r2rBtn);
            if (busy && active) {
                if (!btn.dataset.prevHtml) btn.dataset.prevHtml = btn.innerHTML;
                if (mode === 'upload') {
                    btn.innerHTML = '<span class="transfer-btn-icon">⏳</span>Загрузка…';
                } else if (mode === 'download') {
                    btn.innerHTML = '<span class="transfer-btn-icon">⏳</span>Скачивание…';
                } else {
                    btn.innerHTML = '<span class="transfer-btn-icon">⏳</span>Передача…';
                }
            } else if (!busy && btn.dataset.prevHtml) {
                btn.innerHTML = btn.dataset.prevHtml;
                delete btn.dataset.prevHtml;
            }
        });
        if (fileInput) fileInput.disabled = busy;
    }

    function uploadFileWithProgress(url, formData) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', url);
            xhr.onload = () => {
                if (xhr.status >= 200 && xhr.status < 300) {
                    resolve(xhr.response);
                    return;
                }
                let detail = `HTTP ${xhr.status}`;
                try {
                    const payload = JSON.parse(xhr.responseText);
                    detail = payload.detail || detail;
                } catch (e) {}
                reject(new Error(detail));
            };
            xhr.onerror = () => reject(new Error('Сетевая ошибка при загрузке файла'));
            xhr.upload.onprogress = (event) => {
                if (event.lengthComputable) {
                    const pct = Math.round((event.loaded / event.total) * 85);
                    setTransferProgress(
                        pct,
                        `Отправка на сервер: ${formatTransferBytes(event.loaded)} / ${formatTransferBytes(event.total)}`,
                    );
                    return;
                }
                setTransferProgress(null, 'Отправка на сервер…', { indeterminate: true });
            };
            xhr.upload.onload = () => {
                setTransferProgress(null, 'Запись на удалённый хост…', { indeterminate: true });
            };
            xhr.send(formData);
        });
    }

    async function readDownloadWithProgress(response) {
        const contentLength = Number(response.headers.get('content-length') || 0);
        if (!response.body || typeof response.body.getReader !== 'function') {
            setTransferProgress(null, 'Скачивание файла…', { indeterminate: true });
            return response.blob();
        }
        const reader = response.body.getReader();
        const chunks = [];
        let received = 0;
        while (true) {
            const { done, value } = await reader.read();
            if (done) break;
            chunks.push(value);
            received += value.length;
            if (contentLength > 0) {
                const pct = Math.round((received / contentLength) * 100);
                setTransferProgress(
                    pct,
                    `Скачивание: ${formatTransferBytes(received)} / ${formatTransferBytes(contentLength)}`,
                );
            } else {
                setTransferProgress(null, `Скачивание: ${formatTransferBytes(received)}…`, { indeterminate: true });
            }
        }
        return new Blob(chunks);
    }

    async function uploadFile() {
        if (transferBusy) return;
        const sessionId = getTransferSessionId();
        if (!sessionId) {
            alert('Сначала выберите SSH-сессию');
            return;
        }
        const fileInput = document.getElementById('upload-file');
        let remotePath = document.getElementById('upload-remote-path').value.trim();
        if (!fileInput.files?.length) {
            alert('Выберите файл для загрузки');
            return;
        }
        if (!remotePath) {
            alert('Укажите удаленный путь');
            return;
        }
        if (remotePath.endsWith('/')) {
            remotePath = `${remotePath}${fileInput.files[0].name}`;
        }
        const fd = new FormData();
        fd.append('remote_path', remotePath);
        fd.append('upload', fileInput.files[0]);
        setTransferBusy(true, 'upload');
        setTransferProgress(0, 'Подготовка к загрузке…');
        try {
            await uploadFileWithProgress(`/api/ssh-terminal/sessions/${sessionId}/upload`, fd);
            setTransferProgress(100, 'Файл успешно загружен на удалённый хост');
            hideTransferProgress(3500);
        } catch (error) {
            setTransferProgress(0, error.message || 'Ошибка загрузки');
            throw error;
        } finally {
            setTransferBusy(false, 'upload');
        }
    }

    async function downloadFile() {
        if (transferBusy) return;
        const sessionId = getTransferSessionId();
        if (!sessionId) {
            alert('Сначала выберите SSH-сессию');
            return;
        }
        const remotePath = document.getElementById('download-remote-path').value.trim();
        if (!remotePath) {
            alert('Укажите удаленный путь');
            return;
        }
        setTransferBusy(true, 'download');
        setTransferProgress(null, 'Получение файла с удалённого хоста…', { indeterminate: true });
        try {
            const response = await fetch(`/api/ssh-terminal/sessions/${sessionId}/download?remote_path=${encodeURIComponent(remotePath)}`);
            if (!response.ok) {
                const error = await response.json().catch(() => ({ detail: 'Download failed' }));
                throw new Error(error.detail || 'Download failed');
            }
            const blob = await readDownloadWithProgress(response);
            const disposition = response.headers.get('content-disposition') || '';
            const match = disposition.match(/filename="([^"]+)"/i);
            const fileName = match ? match[1] : 'download.bin';
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            a.remove();
            URL.revokeObjectURL(url);
            setTransferProgress(100, `Файл «${fileName}» скачан`);
            hideTransferProgress(3500);
        } catch (error) {
            setTransferProgress(0, error.message || 'Ошибка скачивания');
            throw error;
        } finally {
            setTransferBusy(false, 'download');
        }
    }

    document.getElementById('ssh-connect-form').addEventListener('submit', async (event) => {
        event.preventDefault();
        try {
            const action = (event.submitter && event.submitter.value) || 'connect';
            const authType = document.getElementById('ssh-auth-type').value;
            const size = getTerminalSize();
            const payload = {
                host: document.getElementById('ssh-host').value.trim(),
                port: Number(document.getElementById('ssh-port').value || 22),
                username: document.getElementById('ssh-username').value.trim(),
                auth_type: authType,
                target_os: document.getElementById('ssh-target-os').value || 'linux',
                startup_shell: document.getElementById('ssh-startup-shell').value || 'auto',
                cols: size.cols,
                rows: size.rows,
                label: document.getElementById('ssh-save-name').value.trim() || null,
            };
            if (authType === 'password') {
                payload.password = document.getElementById('ssh-password').value;
            } else if (authType === 'secret') {
                payload.secret_id = Number(document.getElementById('ssh-secret-id').value || 0) || null;
            } else if (authType === 'ssh_key') {
                payload.ssh_key_id = Number(document.getElementById('ssh-key-id').value || 0) || null;
            }
            // Пароль bootstrap не сохраняем в профиль — только для текущего подключения.
            const profilePayload = { ...payload };
            delete profilePayload.cols;
            delete profilePayload.rows;
            saveConnectionProfile(profilePayload);
            if (action === 'save') {
                closeConnectModal();
                return;
            }
            if (authType === 'ssh_key') {
                const bootstrap = String(document.getElementById('ssh-bootstrap-password').value || '').trim();
                if (bootstrap) payload.bootstrap_password = bootstrap;
            }
            closeConnectModal();
            await createSession(payload);
        } catch (error) {
            const msg = (error && error.message) || String(error);
            if (typeof awmAlert === 'function') await awmAlert(`Ошибка: ${msg}`, 'Ошибка подключения');
            else alert(`Ошибка: ${msg}`);
        }
    });

    document.getElementById('ssh-auth-type').addEventListener('change', () => {
        setAuthFieldsVisibility();
        applyUsernameFromAuthSource({ silent: true });
    });
    document.getElementById('ssh-secret-id').addEventListener('change', () => applyUsernameFromAuthSource({ silent: true }));
    document.getElementById('ssh-key-id').addEventListener('change', () => applyUsernameFromAuthSource({ silent: true }));
    document.getElementById('ssh-username-from-auth-btn').addEventListener('click', () => applyUsernameFromAuthSource());
    document.getElementById('transfer-session-id').addEventListener('change', () => {
        applyDefaultUploadPathForTransfer();
        document.getElementById('download-remote-path').value = '';
    });
    document.getElementById('transfer-r2r-dest-session')?.addEventListener('change', () => {
        const dstPath = document.getElementById('transfer-r2r-dest-path');
        const sid = String(document.getElementById('transfer-r2r-dest-session')?.value || '');
        if (dstPath && sid) dstPath.value = homeDirForSession(sid);
    });
    document.getElementById('terminal-text-color').addEventListener('change', applyTerminalColors);
    document.getElementById('terminal-bg-color').addEventListener('change', applyTerminalColors);
    document.getElementById('upload-btn').addEventListener('click', () => uploadFile().catch((e) => alert(e.message)));
    document.getElementById('download-btn').addEventListener('click', () => downloadFile().catch((e) => alert(e.message)));
    document.getElementById('transfer-r2r-btn')?.addEventListener('click', () => transferRemoteToRemote().catch((e) => alert(e.message)));

    const terminalOutput = document.getElementById('terminal-output');
    terminalOutput.tabIndex = 0;
    terminalOutput.addEventListener('keydown', (event) => {
        if (xterm) return;
        if (!activeSessionId) return;
        const mapped = mapKeyToInput(event);
        if (!mapped) return;
        event.preventDefault();
        sendViaWebsocket(activeSessionId, { type: 'input', data: mapped });
    });

    window.addEventListener('resize', () => {
        if (!activeSessionId) return;
        scheduleTerminalFitSequence();
    });

    initXtermIfNeeded();
    setAuthFieldsVisibility();
    applyTerminalColors();
    loadAuthSources().catch(() => {});
    renderSavedConnections();
    syncSessionsFromServer().catch(() => {});
    ensurePollingStarted();
</script>
{% endblock %}