{% extends "base.html" %}
{% block title %}Web 终端{% endblock %}
{% block breadcrumb_title %}Web 终端{% endblock %}

{% block head_extra %}
<link rel="stylesheet" href="/static/vendor/xterm/xterm.css">
<style>
    .terminal-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
    .terminal-heading h2 { margin:0; font-size:28px; font-weight:700; }
    .terminal-description { margin-top:5px; color:#6b7280; font-size:13px; }
    .terminal-announcement { display:flex; align-items:flex-start; gap:9px; margin-bottom:14px; padding:11px 14px; border:1px solid currentColor; border-radius:7px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
    .terminal-announcement svg { flex:0 0 auto; width:18px; height:18px; margin-top:2px; }
    .terminal-actions { display:flex; align-items:center; gap:8px; }
    .terminal-status { display:inline-flex; align-items:center; gap:7px; min-width:92px; color:#6b7280; font-size:13px; }
    .terminal-status-dot { width:8px; height:8px; border-radius:999px; background:#9ca3af; }
    .terminal-status.is-connecting .terminal-status-dot { background:#d97706; }
    .terminal-status.is-connected .terminal-status-dot { background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.14); }
    .terminal-status.is-error .terminal-status-dot { background:#dc2626; }
    .terminal-card { overflow:hidden; padding:0; border:1px solid #252b35; background:#0f141b; box-shadow:0 10px 30px rgba(15,20,27,.14); transition:width .18s, box-shadow .18s; }
    .terminal-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:0 14px; border-bottom:1px solid #29313c; background:#171d26; color:#aab4c3; font:12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .terminal-bar-title { flex:1; min-width:0; overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
    .terminal-bar-actions { display:flex; align-items:center; gap:7px; }
    .terminal-step-limit { display:none; align-items:center; gap:5px; color:#aab4c3; white-space:nowrap; }
    .terminal-step-limit input { width:48px; padding:4px 3px; color:#e5e7eb; border:1px solid #364152; border-radius:5px; background:#202733; font:inherit; text-align:center; }
    .terminal-step-limit input:focus { outline:1px solid #60a5fa; border-color:#60a5fa; }
    .terminal-auto-approve { display:none; align-items:center; gap:6px; padding:5px 8px; color:#fbbf24; border:1px solid #59481d; border-radius:5px; background:#292516; cursor:pointer; }
    .terminal-auto-approve input { margin:0; accent-color:#d97706; }
    .terminal-auto-approve:has(input:checked) { color:#fde68a; border-color:#d97706; background:#3a2b13; }
    .terminal-minimize { display:flex; align-items:center; gap:5px; padding:5px 8px; color:#aab4c3; border:1px solid #364152; border-radius:5px; background:#202733; cursor:pointer; font:inherit; }
    .terminal-minimize:hover { color:#fff; border-color:#526174; background:#293241; }
    .terminal-minimize svg { width:13px; height:13px; }
    .terminal-ai-model-control { display:none; align-items:center; gap:5px; color:#aab4c3; white-space:nowrap; }
    .terminal-ai-model-input { width:180px; min-width:110px; padding:4px 7px; color:#e5e7eb; border:1px solid #364152; border-radius:5px; background:#202733; font:inherit; }
    .terminal-ai-model-input:focus { outline:1px solid #60a5fa; border-color:#60a5fa; }
    .terminal-ai-model-apply { padding:4px 7px; }
    .terminal-ai-provider { display:none; }
    #terminalAIConfigDialog { box-sizing:border-box; padding:20px; }
    #terminalAIConfigDialog .terminal-ai-config-modal { display:flex; width:min(680px,100%); max-width:680px; max-height:calc(100vh - 40px); overflow:hidden; flex-direction:column; border-radius:12px; box-shadow:0 22px 55px rgba(15,23,42,.28); }
    #terminalAIConfigDialog .modal-header { flex:none; padding:18px 22px; }
    #terminalAIConfigDialog .modal-header h3 { color:#111827; font-size:18px; font-weight:700; }
    #terminalAIConfigForm { display:flex; min-height:0; flex:1; flex-direction:column; overflow:hidden; }
    .terminal-ai-config-form { min-height:0; padding:20px 22px 18px; overflow-y:auto; }
    .terminal-ai-config-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,190px); gap:14px; }
    .terminal-ai-config-form .form-group { min-width:0; margin:0 0 16px; padding:0; }
    .terminal-ai-config-form label { display:block; margin-bottom:6px; color:#374151; font-size:13px; font-weight:600; line-height:1.45; }
    .terminal-ai-config-form input:not([type="checkbox"]), .terminal-ai-config-form select { display:block; width:100%; min-height:40px; box-sizing:border-box; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; background:#fff; color:#111827; font:inherit; }
    .terminal-ai-config-form input:focus, .terminal-ai-config-form select:focus { outline:none; border-color:#dc3023; box-shadow:0 0 0 3px rgba(220,48,35,.1); }
    .terminal-ai-config-form .terminal-ai-config-check { display:flex; min-height:22px; align-items:flex-start; gap:8px; margin:0; color:#374151; font-size:13px; font-weight:500; line-height:1.55; cursor:pointer; }
    .terminal-ai-config-form .terminal-ai-config-check input[type="checkbox"] { width:16px; min-width:16px; height:16px; min-height:0; margin:2px 0 0; padding:0; flex:none; accent-color:#dc3023; box-shadow:none; }
    .terminal-ai-config-help { margin:6px 0 0 24px; color:#6b7280; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
    .terminal-ai-key-help { margin-left:0; }
    .terminal-ai-persist-box { padding:12px 13px !important; border:1px solid #e5e7eb; border-radius:8px; background:#f8fafc; }
    .terminal-ai-config-security { margin:0; padding:10px 12px; border-left:3px solid #94a3b8; border-radius:0 6px 6px 0; background:#f8fafc; color:#64748b; font-size:12px; line-height:1.55; }
    #terminalAIConfigStatus:empty { display:none; }
    #terminalAIConfigStatus { margin:12px 0 0; padding:9px 11px; border-radius:6px; background:#fef2f2; }
    #terminalAIConfigDialog .modal-footer { flex:none; padding:14px 22px; background:#f8fafc; }
    .terminal-dots { display:flex; gap:6px; }
    .terminal-dots span { width:9px; height:9px; border-radius:50%; background:#4b5563; }
    .terminal-dots span:first-child { background:#ef4444; }
    .terminal-dots span:nth-child(2) { background:#f59e0b; }
    .terminal-dots span:last-child { background:#22c55e; }
    #terminal { height:clamp(420px, calc(100vh - 245px), 760px); padding:12px 10px; }
    #terminal .xterm { height:100%; }
    #terminal .xterm-viewport { scrollbar-color:#4b5563 #0f141b; }
    .terminal-help { margin-top:12px; color:#6b7280; font-size:12px; line-height:1.6; }
    .terminal-card.is-minimized { position:fixed; right:20px; bottom:20px; z-index:1050; width:min(380px, calc(100vw - 40px)); border-color:#364152; box-shadow:0 18px 45px rgba(15,20,27,.32); }
    .terminal-card.is-minimized .terminal-bar { border-bottom:0; }
    .terminal-card.is-minimized .terminal-dots, .terminal-card.is-minimized .terminal-ai-model-control, .terminal-card.is-minimized #terminal { display:none !important; }
    .terminal-leave-body { padding:20px; color:#4b5563; font-size:14px; line-height:1.7; }
    .terminal-leave-body strong { color:#111827; }
    .terminal-risk-list { margin:10px 0 0 20px; padding:0; }
    .terminal-risk-list li { margin-top:5px; }
    .terminal-leave-footer { flex-wrap:wrap; }
    @media (max-width:760px) {
        .terminal-heading { align-items:stretch; flex-direction:column; }
        .terminal-actions { justify-content:space-between; }
        .terminal-ai-provider { display:none; }
        .terminal-bar { align-items:flex-start; flex-wrap:wrap; padding:6px 10px; }
        .terminal-bar-actions { flex-wrap:wrap; justify-content:flex-end; }
        .terminal-bar-title { display:none; }
        .terminal-ai-model-input { width:125px; }
        .terminal-ai-model-control > span { display:none; }
        #terminalAIConfigDialog { padding:0; align-items:flex-end; }
        #terminalAIConfigDialog .terminal-ai-config-modal { width:100%; max-height:94vh; border-radius:12px 12px 0 0; }
        #terminalAIConfigDialog .modal-header { padding:16px 18px; }
        .terminal-ai-config-form { padding:18px; }
        .terminal-ai-config-grid { grid-template-columns:1fr; gap:0; }
        #terminalAIConfigDialog .modal-footer { padding:12px 18px; }
        #terminalAIConfigDialog .modal-footer .btn { flex:1; }
        #terminal { height:calc(100vh - 330px); min-height:360px; }
    }
</style>
{% endblock %}

{% block content %}
<div class="terminal-heading">
    <div>
        <h2>Web 终端</h2>
        <p class="terminal-description">以系统账户 <strong>{{ user.get('username') }}</strong> 登录。非命令输入可直接与 AI 对话，AI 建议的命令必须确认后才会执行。</p>
    </div>
    <div class="terminal-actions">
        <span id="terminalStatus" class="terminal-status" role="status" aria-live="polite"><span class="terminal-status-dot"></span><span id="terminalStatusText">未连接</span></span>
        <button id="connectButton" class="btn btn-secondary" type="button">连接</button>
        <button id="disconnectButton" class="btn btn-secondary" type="button" disabled>断开</button>
    </div>
</div>

{% if terminal_announcement.visible %}
<div
    class="terminal-announcement"
    role="status"
    aria-label="终端公告"
    style="color:{{ terminal_announcement.text_color }}; background-color:{{ terminal_announcement.background_color }}; font-weight:{{ 700 if terminal_announcement.bold else 400 }}"
><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg><span>{{ terminal_announcement.message }}</span></div>
{% endif %}

<div id="terminalWindow" class="card terminal-card">
    <div class="terminal-bar">
        <div class="terminal-dots" aria-hidden="true"><span></span><span></span><span></span></div>
        <span class="terminal-bar-title">{{ user.get('username') }}@{{ request.url.hostname or 'cluster' }}</span>
        <div class="terminal-bar-actions">
            <button id="terminalAIConfigButton" class="terminal-minimize" type="button" title="配置当前终端连接的 AI 服务">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7zM19.4 15a1.7 1.7 0 00.34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0015 19.4a1.7 1.7 0 00-1 .6V20h-4v-.08a1.7 1.7 0 00-1-.52 1.7 1.7 0 00-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 004.6 15a1.7 1.7 0 00-.6-1H4v-4h.08a1.7 1.7 0 00.52-1 1.7 1.7 0 00-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 009 4.6a1.7 1.7 0 001-.6V4h4v.08a1.7 1.7 0 001 .52 1.7 1.7 0 001.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0019.4 9c.08.38.29.73.6 1h.08v4H20a1.7 1.7 0 00-.6 1z" /></svg>
                <span>AI 配置</span>
            </button>
            <div id="terminalAIModelBar" class="terminal-ai-model-control">
                <span>模型</span>
                <input id="terminalAIModelInput" class="terminal-ai-model-input" type="text" list="terminalAIModelOptions" maxlength="256" autocomplete="off" spellcheck="false" placeholder="选择或输入模型 ID" aria-label="当前 AI 模型">
                <datalist id="terminalAIModelOptions"></datalist>
                <button id="terminalAIModelApply" class="terminal-minimize terminal-ai-model-apply" type="button">应用</button>
                <span id="terminalAIProvider" class="terminal-ai-provider"></span>
            </div>
            <label id="terminalStepLimitControl" class="terminal-step-limit" title="单个 AI 目标允许执行的最大步骤数（1–50）">
                <span>上限</span>
                <input id="terminalStepLimit" type="number" value="10" min="1" max="50" step="1" inputmode="numeric" aria-label="AI 循环最大步骤数">
                <span>步</span>
            </label>
            <label id="terminalAutoApproveControl" class="terminal-auto-approve" title="自动执行 AI 后续建议（高危命令除外）">
                <input id="terminalAutoApprove" type="checkbox">
                <span>自动批准</span>
            </label>
            <button id="newAIChatButton" class="terminal-minimize" type="button" style="display:none" title="清除当前终端会话中的 AI 对话上下文">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
                <span>新对话</span>
            </button>
            <button id="minimizeTerminalButton" class="terminal-minimize" type="button" aria-expanded="true">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-width="2" d="M5 12h14" /></svg>
                <span>收起</span>
            </button>
        </div>
    </div>
    <div id="terminal" aria-label="交互式终端"></div>
</div>
<p class="terminal-help">“AI 配置”可为当前连接启用并配置自己的 OpenAI 兼容服务。API Key 默认只保存在当前服务端会话内，用户也可选择使用 AES-GCM 加密保存在本地浏览器并在下次连接时自动恢复。当前模型显示在标题栏步数旁；切换配置或模型会开始新对话并关闭自动批准。AI 会按“执行一步 → 分析结果 → 建议下一步”循环完成目标，默认上限 10 步。默认每一步按 Ctrl+Enter 确认，高危操作始终强制人工确认。输入 <code>!</code> 加命令可强制按 Shell 命令执行。复制/粘贴：Ctrl/⌘+Shift+C / V。</p>
{% endblock %}

{% block modals %}
<div id="terminalAIConfigDialog" class="modal" style="display:none" role="dialog" aria-modal="true" aria-labelledby="terminalAIConfigTitle">
    <div class="modal-content terminal-ai-config-modal">
        <div class="modal-header">
            <h3 id="terminalAIConfigTitle">当前终端的 AI 配置</h3>
            <button id="terminalAIConfigClose" class="modal-close" type="button" aria-label="关闭">&times;</button>
        </div>
        <form id="terminalAIConfigForm">
            <div class="terminal-ai-config-form">
                <div class="form-group">
                    <label class="terminal-ai-config-check"><input id="terminal_user_ai_enabled" type="checkbox"> 启用 AI 对话</label>
                </div>
                <div class="terminal-ai-config-grid">
                    <div class="form-group">
                        <label for="terminal_user_ai_provider">Provider</label>
                        <select id="terminal_user_ai_provider">
                            <option value="deepseek">DeepSeek</option>
                            <option value="openai">OpenAI</option>
                            <option value="claude">Claude</option>
                            <option value="glm">GLM（智谱）</option>
                            <option value="vllm">vLLM</option>
                            <option value="sglang">SGLang</option>
                            <option value="openai-compatible">其他 OpenAI 兼容服务</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="terminal_user_ai_timeout">请求超时（秒）</label>
                        <input id="terminal_user_ai_timeout" type="number" min="5" max="300" value="60">
                    </div>
                </div>
                <div class="form-group">
                    <label for="terminal_user_ai_model">模型名称</label>
                    <input id="terminal_user_ai_model" maxlength="256" autocomplete="off" placeholder="例如 deepseek-chat 或已部署模型 ID">
                </div>
                <div class="form-group">
                    <label for="terminal_user_ai_base_url">API Base URL</label>
                    <input id="terminal_user_ai_base_url" type="url" maxlength="2048" placeholder="https://api.deepseek.com">
                </div>
                <div class="form-group">
                    <label for="terminal_user_ai_api_key">API Key</label>
                    <input id="terminal_user_ai_api_key" type="password" maxlength="4096" autocomplete="new-password" placeholder="输入当前连接使用的 API Key">
                    <p id="terminalUserAIKeyStatus" class="terminal-ai-config-help terminal-ai-key-help">默认只保存在当前服务端会话中。</p>
                    <label class="terminal-ai-config-check"><input id="terminal_user_ai_clear_key" type="checkbox"> 清除当前连接中的 API Key</label>
                </div>
                <div class="form-group terminal-ai-persist-box">
                    <label class="terminal-ai-config-check"><input id="terminal_user_ai_persist" type="checkbox"> 使用 AES-GCM 加密保存在此浏览器</label>
                    <p id="terminalUserAIPersistHelp" class="terminal-ai-config-help">勾选后，下次使用同一浏览器登录此账户时会自动恢复；清除站点数据会删除配置。</p>
                </div>
                <p class="terminal-ai-config-security">配置不会修改管理员的全局默认值，也不会影响其他用户。浏览器持久化只能防止磁盘明文泄露，不能抵御已获得当前网页执行权限的恶意脚本。</p>
                <p id="terminalAIConfigStatus" class="terminal-ai-config-help" role="status" aria-live="polite"></p>
            </div>
            <div class="modal-footer terminal-leave-footer">
                <button id="terminalAIConfigCancel" class="btn btn-secondary" type="button">取消</button>
                <button class="btn btn-primary" type="submit">应用配置</button>
            </div>
        </form>
    </div>
</div>
<div id="terminalLeaveDialog" class="modal" style="display:none" role="dialog" aria-modal="true" aria-labelledby="terminalLeaveTitle">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="terminalLeaveTitle">终端仍在运行</h3>
            <button id="terminalLeaveClose" class="modal-close" type="button" aria-label="关闭">&times;</button>
        </div>
        <div class="terminal-leave-body">
            当前 Shell 连接仍在运行。离开本页会结束会话；也可以在新标签页打开目标页面，保留当前终端。
        </div>
        <div class="modal-footer terminal-leave-footer">
            <button id="terminalStayButton" class="btn btn-secondary" type="button">留在终端</button>
            <a id="terminalOpenTargetButton" class="btn btn-secondary" target="_blank" rel="noopener">新标签打开目标</a>
            <button id="terminalLeaveButton" class="btn btn-primary" type="button">断开并离开</button>
        </div>
    </div>
</div>
<div id="terminalAutoApproveDialog" class="modal" style="display:none" role="dialog" aria-modal="true" aria-labelledby="terminalAutoApproveTitle">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="terminalAutoApproveTitle">启用自动批准？</h3>
            <button id="terminalAutoApproveClose" class="modal-close" type="button" aria-label="关闭">&times;</button>
        </div>
        <div class="terminal-leave-body">
            <strong>这会让 AI 建议的普通命令和文件写入无需 Ctrl+Enter 即可执行。</strong>
            <ul class="terminal-risk-list">
                <li>可能覆盖文件、提交作业、占用 GPU 配额，或发送终端输出给模型服务；</li>
                <li>自动循环最多执行当前设置的 <strong><span id="terminalRiskMaxSteps">10</span> 步</strong>，可随时取消勾选；</li>
                <li>系统识别到的高危、破坏性或提权命令仍会暂停并要求人工确认。</li>
            </ul>
            此设置仅对当前终端连接有效，“新对话”、断开或刷新页面后自动关闭。
        </div>
        <div class="modal-footer terminal-leave-footer">
            <button id="terminalAutoApproveCancel" class="btn btn-secondary" type="button">取消</button>
            <button id="terminalAutoApproveConfirm" class="btn btn-primary" type="button">我了解风险，启用</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="/static/vendor/xterm/xterm.js"></script>
<script src="/static/vendor/xterm/addon-fit.js"></script>
<script src="/static/terminal.js?v={{ terminal_script_version }}"></script>
{% endblock %}