<!DOCTYPE html>
<html lang="zh-CN" id="html-root"{% if theme and theme != 'dark' %} data-theme="{{ theme }}"{% endif %}>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>

    <!-- 防止主题闪烁的内联脚本 - 必须在任何CSS加载之前执行 -->
    <script>
        (function() {
            // 从服务器端传递的主题设置
            var serverTheme = '{{ theme }}';

            // 如果有主题设置且不是深色主题，立即应用
            if (serverTheme && serverTheme !== 'dark') {
                document.documentElement.setAttribute('data-theme', serverTheme);
            }

            // 记录主题应用状态，供后续JavaScript使用
            window.initialTheme = serverTheme;
            console.log('🎨 页面加载时应用主题:', serverTheme);
        })();
    </script>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/static/icon.svg">
    <link rel="icon" type="image/x-icon"
          href="data:image/x-icon;base64, ">
    <link rel="apple-touch-icon" href="/static/icon.svg">

    <link rel="stylesheet" href="/static/css/styles.css">
    <link rel="stylesheet" href="/static/css/session-management.css">
    <link rel="stylesheet" href="/static/css/prompt-management.css">
    <link rel="stylesheet" href="/static/css/audio-management.css">
    <link rel="stylesheet" href="/static/css/notification-settings.css">
    <style>
        /* 仅保留必要的页面特定样式和响应式调整 */

        /* 🎯 固定导航栏 + 禁止页面滚动方案 */

        /* 禁止整个页面滚动 */
        html, body {
            overflow: hidden !important;
            height: 100vh !important;
        }

        /* 容器占满全屏 */
        .container {
            height: 100vh !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            padding: 0 !important;
        }

        /* 主内容区域 */
        .main-content {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            height: calc(100vh - 32px) !important; /* 减去状态栏高度 */
        }

        .main-content-area {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            padding: 0 12px 12px 12px !important; /* 移除顶部padding */
        }

        /* 导航栏固定在状态栏正下方 - 紧贴无空白 */
        .tabs {
            position: sticky !important;
            top: 0 !important;
            flex-shrink: 0 !important;
            background: var(--bg-primary) !important;
            border-bottom: 2px solid var(--border-color) !important;
            margin: 0 0 12px 0 !important;
            padding: 8px 12px !important; /* 左右padding保持对齐 */
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
            z-index: 10 !important;
        }

        /* 恢复完整的内容区域样式 */
        .tab-content {
            display: none !important;
            overflow-y: auto !important;
            max-height: calc(100vh - 120px) !important;
            background: var(--bg-secondary) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: 8px !important;
            padding: 20px !important;
        }

        /* 激活的tab内容显示 */
        .tab-content.active {
            display: block !important;
        }

        /* 设置页面正常布局 */
        #tab-settings.active {
            display: block !important;
            overflow-y: auto !important;
        }

        /* 🎯 工作区独立滚动布局 */
        #tab-combined.active {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 !important;
            overflow: hidden !important;
            padding: 0 !important;
            height: 100% !important;
        }

        /* 工作区内容容器 */
        #tab-combined .combined-content {
            display: flex !important;
            flex: 1 !important;
            gap: 16px !important;
            overflow: hidden !important;
            min-height: 0 !important;
            padding: 20px !important;
            height: 100% !important;
        }

        /* 左右两个区域独立滚动 */
        #tab-combined .combined-section {
            flex: 1 !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            background: var(--bg-tertiary) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: 8px !important;
            min-height: 0 !important;
        }

        /* 区域标题固定 */
        #tab-combined .section-header,
        #tab-combined .feedback-title-container {
            flex-shrink: 0 !important;
            padding: 16px 16px 0 16px !important;
        }

        /* AI摘要区域独立滚动 */
        #tab-combined .combined-summary {
            flex: 1 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            padding: 16px !important;
            min-height: 0 !important;
        }

        /* 反馈输入区域独立滚动 */
        #tab-combined .combined-section:last-child {
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }

        #tab-combined .combined-section:last-child > .input-group {
            padding: 0 16px 16px 16px !important;
        }

        /* 🎯 垂直布局模式优化 */
        body.layout-combined-vertical #tab-combined .combined-content {
            flex-direction: column !important; /* 垂直排列 */
            gap: 8px !important; /* 保持小间距 */
        }

        /* 垂直布局下的AI摘要区域 - 占50%高度，去掉拖拽 */
        body.layout-combined-vertical #tab-combined .combined-section:first-child {
            flex: 0 0 50% !important; /* 默认占50%高度 */
            min-height: 300px !important; /* 增加最小高度 */
            overflow: hidden !important; /* 防止内容溢出 */
        }

        /* 垂直布局下AI摘要内容区域 */
        body.layout-combined-vertical #tab-combined .combined-summary {
            flex: 1 !important;
            overflow-y: auto !important;
            min-height: 250px !important; /* 确保内容区域有足够高度 */
        }

        /* 垂直布局下AI摘要文本框 */
        body.layout-combined-vertical #combinedSummaryContent {
            min-height: 250px !important; /* 增加文本框最小高度 */
            height: 100% !important;
        }

        /* 垂直布局下的反馈输入区域 */
        body.layout-combined-vertical #tab-combined .combined-section:last-child {
            flex: 1 !important; /* 占剩余空间 */
            min-height: 200px !important; /* 最小高度 */
        }

        /* 🎯 水平布局保持原有效果 - AI摘要区域充满整个高度 */
        body:not(.layout-combined-vertical) #tab-combined .combined-summary {
            flex: 1 !important; /* 充满整个高度 */
            overflow-y: auto !important;
        }

        /* 水平布局下AI摘要文本框保持原有样式 */
        body:not(.layout-combined-vertical) #combinedSummaryContent {
            min-height: 200px !important; /* 保持原有最小高度 */
            height: 100% !important; /* 充满容器高度 */
        }

        /* 确保tab-content可以正常滚动 */
        .tab-content {
            overflow-y: auto !important;
            max-height: calc(100vh - 150px) !important;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .timeout-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .timeout-separator {
                display: none;
            }
        }

        /* 页面特定的布局模式样式 */

        /* 布局模式样式 - 工作区模式 */
        /* 工作区模式 - 显示工作区页签，隐藏回馈和AI摘要页签 */
        body.layout-combined-vertical .tab-button[data-tab="combined"],
        body.layout-combined-horizontal .tab-button[data-tab="combined"] {
            display: inline-block;
        }

        body.layout-combined-vertical .tab-button[data-tab="feedback"],
        body.layout-combined-vertical .tab-button[data-tab="summary"],
        body.layout-combined-horizontal .tab-button[data-tab="feedback"],
        body.layout-combined-horizontal .tab-button[data-tab="summary"] {
            display: none;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .timeout-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .timeout-separator {
                display: none;
            }
        }


        /* 工作区分页的水平布局样式 */
        #tab-combined.active.combined-horizontal .combined-content {
            display: flex !important;
            flex-direction: row !important;
            gap: 16px;
            height: calc(100% - 60px); /* 减去描述区块的高度 */
        }

        #tab-combined.active.combined-horizontal .combined-section:first-child {
            flex: 1 !important;
            min-width: 300px;
            max-width: 50%;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 确保容器不超出范围 */
        }

        #tab-combined.active.combined-horizontal .combined-section:last-child {
            flex: 1 !important;
            min-width: 400px;
        }

        #tab-combined.active.combined-horizontal .combined-summary {
            flex: 1; /* 让摘要区域自动填满剩余空间 */
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 确保摘要容器不超出范围 */
        }

        #tab-combined.active.combined-horizontal #combinedSummaryContent {
            flex: 1; /* 让内容区域自动填满摘要容器 */
            min-height: 200px; /* 降低最小高度 */
            overflow-y: auto; /* 添加垂直滚动条 */
            overflow-x: hidden; /* 隐藏水平滚动条 */
        }

        #tab-combined.active.combined-horizontal .text-input {
            min-height: 200px;
        }

        /* 工作区分页的垂直布局样式 */
        #tab-combined.active.combined-vertical .combined-content {
            display: flex !important;
            flex-direction: column !important;
            gap: 16px;
            height: calc(100% - 60px); /* 减去描述区块的高度 */
        }

        #tab-combined.active.combined-vertical .combined-section:first-child {
            flex: 1 !important;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 确保容器不超出范围 */
        }

        #tab-combined.active.combined-vertical .combined-section:last-child {
            flex: 2 !important;
            min-height: 300px;
        }

        #tab-combined.active.combined-vertical .combined-summary {
            flex: 1; /* 让摘要区域自动填满剩余空间 */
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 确保摘要容器不超出范围 */
        }

        #tab-combined.active.combined-vertical #combinedSummaryContent {
            flex: 1; /* 让内容区域自动填满摘要容器 */
            min-height: 150px; /* 降低最小高度 */
            overflow-y: auto; /* 添加垂直滚动条 */
            overflow-x: hidden; /* 隐藏水平滚动条 */
        }

        #tab-combined.active.combined-vertical .text-input {
            min-height: 200px;
        }

        /* 预设的合并内容布局 */
        .combined-content {
            display: flex;
            flex-direction: column;
            gap: 16px;
            flex: 1;
            height: 100%; /* 确保充满父容器 */
        }

        /* 工作区基础样式 */
        .combined-section {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
        }

        /* 确保 AI 摘要区域能够自动扩展 */
        .combined-section .section-header {
            flex-shrink: 0; /* 标题区域不收缩 */
        }

        .combined-summary {
            display: flex;
            flex-direction: column;
            flex: 1; /* 让摘要容器自动填满剩余空间 */
            min-height: 0; /* 允许收缩 */
        }

        #combinedSummaryContent {
            flex: 1; /* 让内容区域自动填满摘要容器 */
            min-height: 150px; /* 设定合理的最小高度 */
            overflow-y: auto;
            overflow-x: hidden;
        }

        .combined-section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 12px 0;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }

        .combined-summary {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 0;
            overflow: hidden;
        }

        #combinedSummaryContent {
            padding: 12px !important;
            line-height: 1.6 !important;
            font-family: inherit !important;
            color: var(--text-primary) !important;
            background: transparent !important;
            border: none !important;
            resize: none !important;
            white-space: pre-wrap !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
        }

        #summaryContent {
            padding: 12px !important;
            line-height: 1.6 !important;
            font-family: inherit !important;
            color: var(--text-primary) !important;
            white-space: pre-wrap !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
        }

        /* 图片设定样式 */
        .image-settings-details {
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: var(--bg-tertiary);
            margin-bottom: 8px;
        }

        .image-settings-summary {
            padding: 8px 12px;
            cursor: pointer;
            font-weight: 500;
            color: var(--text-secondary);
            font-size: 13px;
            user-select: none;
            transition: color 0.3s ease;
        }

        .image-settings-summary:hover {
            color: var(--text-primary);
        }

        .image-settings-content {
            padding: 12px;
            border-top: 1px solid var(--border-color);
            background: var(--bg-secondary);
        }

        .image-setting-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            gap: 12px;
        }

        .image-setting-row:last-of-type {
            margin-bottom: 8px;
        }

        .image-setting-label {
            color: var(--text-primary);
            font-size: 13px;
            font-weight: 500;
        }

        .image-setting-select {
            background: var(--bg-primary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 12px;
            min-width: 80px;
        }

        .image-setting-checkbox-container {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 13px;
        }

        .image-setting-checkbox {
            width: 16px;
            height: 16px;
            accent-color: var(--accent-color);
        }

        .image-setting-help {
            color: var(--warning-color);
            font-size: 11px;
            margin-left: auto;
        }

        .image-setting-help-text {
            color: var(--text-secondary);
            font-size: 11px;
            line-height: 1.4;
            margin-top: 4px;
            padding: 8px;
            background: var(--bg-primary);
            border-radius: 4px;
            border: 1px solid var(--border-color);
        }

        /* 兼容性提示样式 */
        .compatibility-hint {
            background: rgba(33, 150, 243, 0.1);
            border: 1px solid var(--info-color);
            border-radius: 6px;
            padding: 8px 12px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 13px;
            color: var(--info-color);
        }

        .compatibility-hint-btn {
            background: var(--info-color);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 11px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .compatibility-hint-btn:hover {
            background: #1976d2;
        }

        /* 回馈状态指示器样式 */
        .feedback-status-indicator {
            padding: 12px 16px;
            margin: 16px 0;
            border-radius: 8px;
            border: 1px solid;
            background: var(--bg-secondary);
            transition: all 0.3s ease;
        }

        .feedback-status-indicator .status-text {
            width: 100%;
        }

        .feedback-status-indicator .status-text strong,
        .feedback-status-indicator .status-title {
            display: block;
            font-size: 16px;
            margin-bottom: 4px;
        }

        .feedback-status-indicator .status-text span,
        .feedback-status-indicator .status-message {
            font-size: 14px;
            opacity: 0.8;
        }

        .feedback-status-indicator.status-waiting {
            border-color: var(--accent-color);
            background: rgba(74, 144, 226, 0.1);
        }

        .feedback-status-indicator.status-processing {
            border-color: #ffa500;
            background: rgba(255, 165, 0, 0.1);
            animation: pulse 2s infinite;
        }

        .feedback-status-indicator.status-submitted {
            border-color: var(--success-color);
            background: rgba(40, 167, 69, 0.1);
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
            100% {
                opacity: 1;
            }
        }

        /* 禁用状态的样式 */
        .image-upload-area.disabled {
            opacity: 0.5;
            pointer-events: none;
            cursor: not-allowed;
        }

        .text-input:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
    </style>
</head>
<body class="layout-{{ layout_mode }}">
<!-- ===== 顶部连线监控状态栏（紧凑版） ===== -->
<div class="connection-monitor-bar compact">
    <!-- 标题 -->
    <div class="app-title-compact">
        <span data-i18n="app.title">MCP Feedback</span>
    </div>

    <!-- 分隔符 -->
    <span class="info-separator">·</span>

    <!-- 项目路径 -->
    <div class="project-info-compact">
        <span>📂</span>
        <span id="projectPathDisplay" class="project-path-display"
              data-full-path="{{ project_directory }}"
              data-i18n-title="app.clickToCopyPath"
              title="点击复制完整路径">{{ project_directory[-30:] if project_directory|length > 30 else project_directory }}</span>
    </div>

    <!-- 分隔符 -->
    <span class="info-separator">·</span>

    <!-- 會話 ID -->
    <div class="session-info-compact">
        <span>📋</span>
        <span id="currentSessionId" class="session-id-display"
              data-full-id="{{ session_id if session_id else 'loading' }}"
              data-i18n-title="app.clickToCopySessionId"
              title="点击复制完整会话ID">{{ session_id[:6] if session_id else '--' }}</span>
    </div>

    <!-- 倒数计时器（条件显示） -->
    <div id="countdownDisplay" class="countdown-display-compact auto-submit-display" style="display: none;">
        <span class="info-separator">·</span>
        <span>⏱️</span>
        <span class="countdown-label" data-i18n="autoSubmit.countdownLabel">提交倒数:</span>
        <span id="countdownTimer" class="countdown-timer">--:--</span>
        <button id="countdownPauseBtn" class="countdown-control-btn"
                data-i18n-title="autoSubmit.pauseCountdown"
                title="暂停倒数"
                aria-label="暂停/恢复倒数">
            <span class="pause-icon">⏸</span>
            <span class="resume-icon" style="display: none;">▶</span>
        </button>
    </div>

    <!-- 会话超时倒数（条件显示） -->
    <div id="sessionTimeoutDisplay" class="countdown-display-compact session-timeout-display" style="display: none;">
        <span class="info-separator">·</span>
        <span>⏰</span>
        <span class="timeout-label" data-i18n="sessionTimeout.label">会话超时:</span>
        <span id="sessionTimeoutTimer" class="countdown-timer">--:--</span>
    </div>

    <!-- 界面时长计时器 -->
    <div id="interfaceTimerDisplay" class="countdown-display-compact interface-timer-display">
        <span class="info-separator">·</span>
        <span>🕐</span>
        <span id="interfaceTimer" class="countdown-timer">00:00</span>
    </div>

    <!-- 分隔符 -->
    <span class="info-separator">·</span>

    <!-- 连线状态 -->
    <div class="connection-status-compact" id="connectionStatusMinimal">
        <span class="status-dot"></span>
        <span class="status-text" data-i18n="connectionMonitor.connected">已连线</span>
    </div>
</div>

<div class="container">


    <!-- ===== 主内容区域 ===== -->
    <main class="main-content">
        <!-- ===== 主要内容区域 ===== -->
        <div class="main-content-area">

            <!-- 分页导航 -->
            <div class="tabs">
                <div class="tab-buttons">
                    <!-- 工作区分页 - 主要分页 -->
                    <button class="tab-button active" data-tab="combined" data-i18n="tabs.combined">
                        📝 工作区
                    </button>
                    <button class="tab-button" data-tab="summary" data-i18n="tabs.summary">
                        📋 AI 摘要
                    </button>
                    <button class="tab-button" data-tab="command" data-i18n="tabs.command">
                        ⚡ 命令
                    </button>
                    <button class="tab-button" data-tab="sessions" data-i18n="tabs.sessions">
                        📋 会话管理
                    </button>
                    <button class="tab-button" data-tab="settings" data-i18n="tabs.settings">
                        ⚙️ 设置
                    </button>
                    <button class="tab-button" data-tab="about" data-i18n="tabs.about">
                        ℹ️ 关于
                    </button>
                </div>
            </div>


            <!-- ===== AI 摘要分页 ===== -->
            <div id="tab-summary" class="tab-content">
                <div class="input-group">
                    <div id="summaryContent" class="text-input"
                         style="min-height: 300px; cursor: text; padding: 12px; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word;"
                         data-dynamic-content="aiSummary">
                        {{ summary }}
                    </div>
                </div>
            </div>

            <!-- 命令分页 -->
            <div id="tab-command" class="tab-content">
                <!-- 命令输出区域 - 放在上面 -->
                <div class="input-group">
                    <div id="commandOutput" class="command-output"></div>
                </div>

                <!-- 命令输入区域 -->
                <div class="input-group" style="margin-bottom: 20px;">
                    <label class="input-label" data-i18n="command.inputLabel">命令输入</label>
                    <div style="display: flex; gap: 10px; align-items: flex-start;">
                        <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
                            <span style="color: var(--accent-color); font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-weight: bold;">$</span>
                            <input
                                    type="text"
                                    id="commandInput"
                                    class="command-input-line"
                                    data-i18n-placeholder="command.placeholder"
                                    placeholder="输入要执行的命令..."
                                    style="flex: 1; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 8px 12px; color: var(--text-primary); font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 14px;"
                            />
                        </div>
                        <button id="runCommandBtn" class="btn btn-primary" data-i18n="command.runButton"
                                style="white-space: nowrap;">
                            ▶️ 执行
                        </button>
                    </div>
                </div>

                <!-- 自动执行命令设置 -->
                <div class="command-auto-settings">
                    <div class="settings-header">
                        <h4 class="settings-title" data-i18n="command.autoCommand.title">🤖 自动执行命令设置</h4>
                        <label class="toggle-switch">
                            <input type="checkbox" id="autoCommandEnabled" class="toggle-input">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <p class="settings-description" data-i18n="command.autoCommand.description">
                        设置在特定时机自动执行的命令</p>

                    <div class="settings-content" id="autoCommandContent">
                        <!-- 新会话建立时执行 -->
                        <div class="auto-command-item">
                            <div class="command-label">
                                <span class="command-icon">🆕</span>
                                <span data-i18n="command.autoCommand.onNewSession">新会话建立时执行</span>
                            </div>
                            <div class="command-input-wrapper">
                                <span class="command-prefix">$</span>
                                <input type="text"
                                       id="commandOnNewSession"
                                       class="auto-command-input"
                                       data-i18n-placeholder="command.autoCommand.onNewSessionPlaceholder"
                                       placeholder="输入要自动执行的命令...">
                            </div>
                            <div class="command-actions">
                                <button class="btn-small btn-test" id="testNewSessionCommand"
                                        data-i18n="command.autoCommand.testOnNewSession">测试新会话命令
                                </button>
                                <span class="command-hint" data-i18n="command.autoSettings.exampleNewSession">💡 范例：pwd, git status, ls -la</span>
                            </div>
                        </div>

                        <!-- 提交回馈后执行 -->
                        <div class="auto-command-item">
                            <div class="command-label">
                                <span class="command-icon">✅</span>
                                <span data-i18n="command.autoCommand.onFeedbackSubmit">提交回馈后执行</span>
                            </div>
                            <div class="command-input-wrapper">
                                <span class="command-prefix">$</span>
                                <input type="text"
                                       id="commandOnFeedbackSubmit"
                                       class="auto-command-input"
                                       data-i18n-placeholder="command.autoCommand.onFeedbackSubmitPlaceholder"
                                       placeholder="输入要自动执行的命令...">
                            </div>
                            <div class="command-actions">
                                <button class="btn-small btn-test" id="testFeedbackCommand"
                                        data-i18n="command.autoCommand.testOnFeedbackSubmit">测试回馈提交命令
                                </button>
                                <span class="command-hint" data-i18n="command.autoSettings.exampleFeedback">💡 范例：date, echo "Done", git log -1</span>
                            </div>
                        </div>

                        <!-- 说明文字 -->
                        <div class="auto-command-help">
                            <p class="help-text" data-i18n="command.autoCommand.help">
                                这些命令会在对应的时机自动执行。留空表示不执行任何命令。</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 工作区分页 - 主要分页 -->
            <div id="tab-combined" class="tab-content active">
                <div class="combined-content">
                    <!-- AI 摘要区域 -->
                    <div class="combined-section">
                        <div class="section-header">
                            <h3 class="combined-section-title" data-i18n="combined.summaryTitle">📋 AI 工作摘要</h3>
                        </div>
                        <div class="combined-summary">
                            <div id="combinedSummaryContent" class="text-input"
                                 style="min-height: 200px; cursor: text; padding: 12px; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word;"
                                 data-dynamic-content="aiSummary">{{ summary }}
                            </div>
                        </div>
                    </div>

                    <!-- 回馈输入区域 -->
                    <div class="combined-section">
                        <div class="feedback-title-container">
                            <h3 class="combined-section-title" data-i18n="combined.feedbackTitle">💬 提供反馈</h3>
                            <button id="submitBtn" class="btn btn-success combined-submit-btn"
                                    data-i18n="buttons.submit">
                                ✅ 提交反馈
                            </button>
                        </div>

                        <div class="input-group">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                                <label class="input-label" data-i18n="feedback.textLabel">文字反馈</label>
                                <div class="prompt-input-buttons" id="combinedPromptButtons">
                                    <button type="button" class="prompt-input-btn select-prompt-btn" data-container-index="1">
                                        <span>📝</span>
                                        <span class="button-text" data-i18n="prompts.buttons.selectPrompt">Templates</span>
                                    </button>
                                    <button type="button" class="prompt-input-btn last-prompt-btn" data-container-index="1">
                                        <span>🔄</span>
                                        <span class="button-text" data-i18n="prompts.buttons.useLastPrompt">Last Used</span>
                                    </button>
                                    <button type="button" class="prompt-input-btn copy-user-content-btn" id="copyUserFeedback">
                                        <span>📋</span>
                                        <span class="button-text"
                                              data-i18n="sessionManagement.copyUserContent">复制用户内容</span>
                                    </button>
                                </div>
                            </div>

                            <textarea
                                    id="combinedFeedbackText"
                                    class="text-input"
                                    data-i18n-placeholder="feedback.detailedPlaceholder"
                                    placeholder="请在这里输入您的回馈...

💡 小提示：
• 按 Ctrl+Enter/Cmd+Enter (支持数字键盘) 可快速提交
• 按 Ctrl+V/Cmd+V 可直接粘贴剪贴板图片"
                                    style="min-height: 150px;"
                            ></textarea>
                        </div>




                        <!-- 图片上传组件 -->
                        {% set id_prefix = "combined" %}
                        {% set min_height = "100px" %}
                        {% include 'components/image-upload.html' %}
                    </div>
                </div>
            </div>

            <!-- ===== 会话管理分页 ===== -->
            <div id="tab-sessions" class="tab-content">
                <div class="section-description" data-i18n="sessionManagement.description">
                    管理当前会话和历史会话记录，查看会话统计信息。
                </div>

                <!-- 面板标题和控制 -->
                <div class="session-panel-header">
                    <h3 data-i18n="sessionManagement.title">会话管理</h3>
                    <div class="panel-controls">
                        <button class="btn-icon" id="refreshSessions" data-i18n-title="sessionManagement.refresh"
                                title="重新整理">
                            🔄
                        </button>
                    </div>
                </div>

                <div class="session-panel-content">
                    <!-- 当前活跃会话 -->
                    <div class="current-session-section">
                        <h4 data-i18n="sessionManagement.currentSession">当前会话</h4>
                        <div class="session-card active" id="currentSessionCard">
                            <div class="session-header">
                                <div class="session-id"><span data-i18n="sessionManagement.sessionId">会话 ID</span>: {{
                                    session_id[:8] if session_id else 'loading' }}...
                                </div>
                                <div class="session-status">
                                    <span class="status-badge waiting"
                                          data-i18n="connectionMonitor.waiting">等待中</span>
                                </div>
                            </div>
                            <div class="session-info">
                                <div class="session-time"><span
                                        data-i18n="sessionManagement.createdTime">建立时间</span>: --:--:--
                                </div>
                                <div class="session-project"><span data-i18n="sessionManagement.project">项目</span>: {{
                                    project_directory }}
                                </div>
                                <div class="session-summary"><span
                                        data-i18n="sessionManagement.aiSummary">AI 摘要</span>: <span
                                        data-i18n="sessionManagement.loading">载入中...</span></div>
                            </div>
                            <div class="session-actions">
                                <button class="btn-small" id="viewSessionDetails"
                                        data-i18n="sessionManagement.viewDetails">详细信息
                                </button>
                                <button class="btn-small btn-primary" id="copyCurrentSessionContent"
                                        data-i18n="sessionManagement.copySessionContent"
                                        data-i18n-title="sessionManagement.copySessionContent"
                                        aria-label="复制会话内容">
                                    📋 <span data-i18n="sessionManagement.copySessionContent">复制会话内容</span>
                                </button>
                                <button class="btn-small btn-secondary" id="copyCurrentUserContent"
                                        data-i18n="sessionManagement.copyUserContent"
                                        data-i18n-title="sessionManagement.copyUserContent"
                                        aria-label="複製用戶內容">
                                    📝 <span data-i18n="sessionManagement.copyUserContent">複製用戶內容</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 会话历史记录 -->
                    <div class="session-history-section">
                        <div class="session-history-header">
                            <h4 data-i18n="sessionManagement.sessionHistory">会话历史</h4>
                            <div class="session-history-actions">
                                <button class="btn-small btn-secondary" id="sessionTabExportAllBtn"
                                        data-i18n="sessionHistory.management.exportAll"
                                        data-i18n-title="sessionHistory.management.exportAllTitle"
                                        aria-label="导出全部会话">
                                    导出全部
                                </button>
                                <button class="btn-small btn-secondary" id="sessionTabClearMessagesBtn"
                                        style="color: var(--warning-color);"
                                        data-i18n="sessionHistory.userMessages.clearAll"
                                        data-i18n-title="sessionHistory.userMessages.clearAllTitle"
                                        aria-label="清空消息记录">
                                    清空消息记录
                                </button>
                                <button class="btn-small btn-secondary" id="sessionTabClearAllBtn"
                                        style="color: var(--error-color);"
                                        data-i18n="sessionHistory.management.clear"
                                        data-i18n-title="sessionHistory.management.clearTitle"
                                        aria-label="清空所有会话">
                                    清空
                                </button>
                            </div>
                        </div>
                        <div class="session-list" id="sessionHistoryList">
                            <div class="no-sessions" data-i18n="sessionManagement.noHistory">暂无历史会话</div>
                        </div>
                    </div>

                    <!-- 会话统计 -->
                    <div class="session-stats-section">
                        <h4 data-i18n="sessionManagement.statistics">统计信息</h4>
                        <div class="stats-grid">
                            <div class="stat-item">
                                <div class="stat-value stat-today-count">0</div>
                                <div class="stat-label" data-i18n="sessionManagement.todaySessions">今日會話</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value stat-average-duration">--</div>
                                <div class="stat-label" data-i18n="sessionManagement.todayAverageDuration">
                                    今日平均時長
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 設定分頁 -->
            <div id="tab-settings" class="tab-content">
                <!-- 介面設定卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3 class="settings-card-title" data-i18n="settingsUI.interface">🎨 介面設定</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="settingsUI.layoutMode">界面佈局模式</div>
                                <div class="setting-description" data-i18n="settingsUI.layoutModeDesc">
                                    選擇 AI 摘要和回饋輸入的顯示方式
                                </div>
                            </div>
                            <div class="layout-mode-selector">
                                <div class="layout-option">
                                    <input type="radio" id="combinedVertical" name="layoutMode"
                                           value="combined-vertical" checked>
                                    <label for="combinedVertical">
                                        <div class="layout-option-title" data-i18n="settingsUI.combinedVertical">
                                            垂直布局
                                        </div>
                                        <div class="layout-option-desc" data-i18n="settingsUI.combinedVerticalDesc">AI
                                            摘要在上，回饋輸入在下，摘要和回饋在同一頁面
                                        </div>
                                    </label>
                                </div>
                                <div class="layout-option">
                                    <input type="radio" id="combinedHorizontal" name="layoutMode"
                                           value="combined-horizontal">
                                    <label for="combinedHorizontal">
                                        <div class="layout-option-title" data-i18n="settingsUI.combinedHorizontal">
                                            水平布局
                                        </div>
                                        <div class="layout-option-desc" data-i18n="settingsUI.combinedHorizontalDesc">AI
                                            摘要在左，回饋輸入在右，增大摘要可視區域
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


                <!-- 語言設定卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3 class="settings-card-title" data-i18n="settingsUI.language">🌍 語言設定</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="settingsUI.currentLanguage">當前語言</div>
                                <div class="setting-description" data-i18n="settingsUI.languageDesc">
                                    選擇界面顯示語言
                                </div>
                            </div>
                            <div class="language-selector-dropdown">
                                <select id="settingsLanguageSelect" class="language-setting-select">
                                    <option value="zh-CN" data-i18n="languages.zh-CN">简体中文</option>
                                    <option value="zh-TW" data-i18n="languages.zh-TW">繁體中文</option>
                                    <option value="en" data-i18n="languages.en">English</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 主題設定卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3 class="settings-card-title" data-i18n="settingsUI.theme">🎨 主題設定</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="settingsUI.currentTheme">當前主題</div>
                                <div class="setting-description" data-i18n="settingsUI.themeDesc">
                                    選擇界面顯示主題
                                </div>
                            </div>
                            <div class="language-selector-dropdown">
                                <select id="settingsThemeSelect" class="language-setting-select">
                                    <option value="light" data-i18n="themes.light">淺色</option>
                                    <option value="dark" data-i18n="themes.dark">深色</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 圖片設定卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3 class="settings-card-title" data-i18n="images.settings.title">🖼️ 圖片設定</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="images.settings.sizeLimit">圖片大小限制</div>
                                <div class="setting-description" data-i18n="images.settings.sizeLimitDesc">
                                    設定上傳圖片的最大檔案大小限制
                                </div>
                            </div>
                            <div class="image-size-limit-selector">
                                <select id="settingsImageSizeLimit" class="image-size-limit-select">
                                    <option value="0" data-i18n="images.settings.sizeLimitOptions.unlimited">無限制
                                    </option>
                                    <option value="1048576" data-i18n="images.settings.sizeLimitOptions.1mb">1MB
                                    </option>
                                    <option value="3145728" data-i18n="images.settings.sizeLimitOptions.3mb">3MB
                                    </option>
                                    <option value="5242880" data-i18n="images.settings.sizeLimitOptions.5mb">5MB
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="images.settings.base64Detail">Base64 相容模式
                                </div>
                                <div class="setting-description" data-i18n="images.settings.base64DetailHelp">
                                    啟用後會在文字中包含完整的 Base64 圖片資料，提升與某些 AI 模型的相容性
                                </div>
                                <div class="setting-warning" data-i18n="images.settings.base64Warning">⚠️ 會增加傳輸量
                                </div>
                            </div>
                            <div class="base64-toggle-container">
                                <label class="toggle-switch">
                                    <input type="checkbox" id="settingsEnableBase64Detail" class="toggle-input">
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 自動定時提交設定卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3 class="settings-card-title" data-i18n="autoSubmit.title">⏰ 自動定時提交</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="autoSubmit.enable">啟用自動提交</div>
                                <div class="setting-description" data-i18n="autoSubmit.enableDesc">
                                    啟用後將在指定時間自動提交選定的提示詞內容
                                </div>
                            </div>
                            <div class="setting-control">
                                <button type="button" id="autoSubmitToggle" class="toggle-btn"
                                        data-i18n-aria-label="aria.toggleAutoSubmit">
                                    <span class="toggle-slider"></span>
                                </button>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="autoSubmit.timeout">倒數時間（秒）</div>
                                <div class="setting-description" data-i18n="autoSubmit.timeoutDesc">
                                    設定自動提交的倒數時間，範圍：1-86400 秒
                                </div>
                            </div>
                            <div class="setting-control">
                                <input type="number" id="autoSubmitTimeout" min="1" max="86400" value="30"
                                       class="form-input" style="width: 120px;">
                                <span class="input-suffix" data-i18n="autoSubmit.seconds">秒</span>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="autoSubmit.prompt">自動提交提示詞</div>
                                <div class="setting-description" data-i18n="autoSubmit.promptDesc">
                                    選擇要自動提交的提示詞內容
                                </div>
                            </div>
                            <div class="setting-control">
                                <select id="autoSubmitPromptSelect" class="form-select" style="width: 200px;">
                                    <option value="" data-i18n="autoSubmit.selectPrompt">請選擇提示詞</option>
                                    <!-- 提示詞選項將動態載入 -->
                                </select>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="autoSubmit.status">目前狀態</div>
                            </div>
                            <div class="setting-control">
                                <button type="button" id="autoSubmitStatus" class="auto-submit-status-btn" disabled>
                                    <span>⏸️</span>
                                    <span class="button-text" data-i18n="autoSubmit.disabled">已停用</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 音效通知設定 -->
                <div id="audioManagementContainer">
                    <!-- 音效管理 UI 將在這裡動態生成 -->
                </div>

                <!-- 瀏覽器通知設定卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3 class="settings-card-title">
                            <span data-i18n="notification.title">🔔 瀏覽器通知</span>
                        </h3>
                    </div>
                    <div class="settings-card-body" id="notificationSettingsContainer">
                        <!-- 通知設定 UI 將在這裡動態生成 -->
                    </div>
                </div>

                <!-- 會話超時設定卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3 class="settings-card-title" data-i18n="settingsUI.sessionTimeoutTitle">⏱️ 會話超時設定</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="settingsUI.sessionTimeoutEnable">啟用會話超時
                                </div>
                                <div class="setting-description" data-i18n="settingsUI.sessionTimeoutEnableDesc">
                                    啟用後，會話將在指定時間後自動關閉
                                </div>
                            </div>
                            <div class="setting-control">
                                <label class="toggle-switch">
                                    <input type="checkbox" id="sessionTimeoutEnabled" class="toggle-input">
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="settingsUI.sessionTimeoutDuration">超時時間（秒）
                                </div>
                                <div class="setting-description" data-i18n="settingsUI.sessionTimeoutDurationDesc">
                                    設定會話超時時間，範圍：300-86400 秒（5分鐘-24小時）
                                </div>
                            </div>
                            <div class="setting-control">
                                <input type="number" id="sessionTimeoutSeconds" min="300" max="86400" value="3600"
                                       class="form-input" style="width: 120px;">
                                <span class="input-suffix" data-i18n="settingsUI.sessionTimeoutSeconds">秒</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 會話歷史管理卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3 class="settings-card-title" data-i18n="sessionHistory.management.title">📚 會話歷史管理</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="sessionHistory.management.retentionPeriod">
                                    保存期限
                                </div>
                                <div class="setting-description" data-i18n="sessionHistory.management.description">
                                    管理本地儲存的會話歷史記錄，包括保存期限設定和資料匯出功能
                                </div>
                            </div>
                            <div class="setting-control">
                                <select id="sessionHistoryRetentionHours" class="form-select" style="width: 150px;">
                                    <option value="24" data-i18n="sessionHistory.retention.24hours">24 小時</option>
                                    <option value="72" data-i18n="sessionHistory.retention.72hours">72 小時</option>
                                    <option value="168" data-i18n="sessionHistory.retention.168hours">7 天</option>
                                    <option value="720" data-i18n="sessionHistory.retention.720hours">30 天</option>
                                </select>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="sessionHistory.userMessages.title">用戶訊息記錄
                                </div>
                                <div class="setting-description" data-i18n="sessionHistory.userMessages.description">
                                    控制是否記錄用戶提交的回饋訊息到會話歷史中
                                </div>
                            </div>
                            <div class="setting-control">
                                <div class="toggle-container">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="userMessageRecordingToggle" class="toggle-input">
                                        <span class="toggle-slider"></span>
                                    </label>
                                    <span class="toggle-label" data-i18n="sessionHistory.userMessages.recordingEnabled">啟用訊息記錄</span>
                                </div>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="sessionHistory.userMessages.privacyLevel">
                                    隱私等級
                                </div>
                                <div class="setting-description" id="userMessagePrivacyDescription"
                                     data-i18n="sessionHistory.userMessages.privacyDescription.full">
                                    記錄完整的訊息內容和圖片資訊
                                </div>
                            </div>
                            <div class="setting-control">
                                <select id="userMessagePrivacyLevel" class="form-select" style="width: 150px;">
                                    <option value="full" data-i18n="sessionHistory.userMessages.privacyLevels.full">
                                        完整記錄
                                    </option>
                                    <option value="basic" data-i18n="sessionHistory.userMessages.privacyLevels.basic">
                                        基本統計
                                    </option>
                                    <option value="disabled"
                                            data-i18n="sessionHistory.userMessages.privacyLevels.disabled">停用記錄
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="setting-item" style="border-bottom: none;">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="sessionHistory.management.export">資料管理</div>
                                <div class="setting-description"
                                     data-i18n="sessionHistory.management.exportDescription">
                                    匯出或清空本地儲存的會話歷史記錄
                                </div>
                            </div>
                            <div class="setting-control" style="display: flex; gap: 8px; flex-wrap: wrap;">
                                <button id="exportSessionHistoryBtn" class="btn btn-secondary"
                                        style="font-size: 12px; padding: 6px 12px;">
                                    <span data-i18n="sessionHistory.management.exportAll">匯出全部</span>
                                </button>
                                <button id="clearUserMessagesBtn" class="btn btn-secondary"
                                        style="font-size: 12px; padding: 6px 12px; color: var(--warning-color); border-color: var(--warning-color);">
                                    <span data-i18n="sessionHistory.userMessages.clearAll">清空訊息記錄</span>
                                </button>
                                <button id="clearSessionHistoryBtn" class="btn btn-secondary"
                                        style="font-size: 12px; padding: 6px 12px; color: var(--error-color); border-color: var(--error-color);">
                                    <span data-i18n="sessionHistory.management.clear">清空</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 提示詞管理卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3 class="settings-card-title" data-i18n="prompts.management.title">📝 常用提示詞管理</h3>
                    </div>
                    <div class="settings-card-body" id="promptManagementContainer">
                        <!-- 提示詞管理 UI 將在這裡動態生成 -->
                    </div>
                </div>

                <!-- 重置設定卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3 class="settings-card-title" data-i18n="settingsUI.advanced">🔧 進階設定</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="setting-item" style="border-bottom: none;">
                            <div class="setting-info">
                                <div class="setting-label" data-i18n="settingsUI.reset">重置設定</div>
                                <div class="setting-description" data-i18n="settingsUI.resetDesc">
                                    清除所有已保存的設定，恢復到預設狀態
                                </div>
                            </div>
                            <button id="resetSettingsBtn" class="btn btn-secondary"
                                    style="font-size: 12px; padding: 6px 16px;">
                                <span data-i18n="settingsUI.reset">重置設定</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 關於分頁 -->
            <div id="tab-about" class="tab-content">
                <!-- 主要資訊卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                            <h3 class="settings-card-title" style="margin: 0;">ai-interactive-feedback</h3>
                            <span style="color: var(--accent-color); font-weight: bold; font-size: 16px;">v{{ version }}</span>
                        </div>
                    </div>
                    <div class="settings-card-body">
                        <!-- 應用程式描述 -->
                        <div class="setting-item" style="border-bottom: none; padding-bottom: 16px;">
                            <div class="setting-info">
                                <div class="setting-description" data-i18n="about.description"
                                     style="color: var(--text-secondary); font-size: 13px; line-height: 1.5;">
                                </div>
                            </div>
                        </div>

                        <!-- 分隔線 -->
                        <div style="height: 1px; background: var(--border-color); margin: 16px 0;"></div>

                        <!-- GitHub 專案 -->
                        <div class="setting-item" style="border-bottom: none; padding-bottom: 12px;">
                            <div class="setting-info">
                                <div class="setting-label">📂 <span data-i18n="about.githubProject">GitHub 專案</span>
                                </div>
                                <div class="setting-description"
                                     style="color: var(--text-secondary); font-size: 11px; margin-left: 24px;">
                                    https://github.com/jayzqj/mcp-feedback-enhance
                                </div>
                            </div>
                            <button class="btn btn-primary"
                                    onclick="window.open('https://github.com/jayzqj/mcp-feedback-enhanced', '_blank')"
                                    style="font-size: 12px; padding: 6px 16px;">
                                <span data-i18n="about.visitGithub">訪問 GitHub</span>
                            </button>
                        </div>

                        <!-- 分隔線 -->
                        <div style="height: 1px; background: var(--border-color); margin: 16px 0;"></div>

                        <!-- Discord 支援 -->
                        <div class="setting-item" style="display: none; border-bottom: none; padding-bottom: 12px;">
                            <div class="setting-info">
                                <div class="setting-label">💬 <span data-i18n="about.discordSupport">Discord 支援</span>
                                </div>
                                <div class="setting-description"
                                     style="color: var(--text-secondary); font-size: 11px; margin-left: 24px;">
                                    https://google.com
                                </div>
                                <div class="setting-description" data-i18n="about.contactDescription"
                                     style="color: var(--text-secondary); font-size: 12px; margin-left: 24px; margin-top: 8px;">
                                    如需技術支援、問題回報或功能建議，歡迎透過 Discord 社群或 GitHub Issues 與我們聯繫。
                                </div>
                            </div>
                            <button class="btn" onclick="window.open('https://discord.gg/ACjf9Q58', '_blank')"
                                    style="background: #5865F2; color: white; font-size: 12px; padding: 6px 16px; border: none;">
                                <span data-i18n="about.joinDiscord">加入 Discord</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 致謝與貢獻卡片 -->
                <div class="settings-card">
                    <div class="settings-card-header">
                        <h3 class="settings-card-title" data-i18n="about.thanks">🙏 致謝與貢獻</h3>
                    </div>
                    <div class="settings-card-body">
                        <div class="setting-item" style="border-bottom: none;">
                            <div class="setting-info">
                                <div class="text-input" data-i18n="about.thanksText"
                                     style="background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 12px; color: var(--text-primary); font-size: 12px; line-height: 1.5; min-height: 140px; max-height: 200px; overflow-y: auto; white-space: pre-wrap;">
                                    感謝原作者 Fábio Ferreira (@fabiomlferreira) 創建了原始的 interactive-feedback-mcp
                                    專案。

                                    本增強版本由 Minidoracat 開發和維護，大幅擴展了專案功能，新增了 Web UI
                                    介面、圖片支援、多語言能力以及許多其他改進功能。

                                    同時感謝 sanshao85 的 mcp-feedback-collector 專案提供的 UI 設計靈感。

                                    開源協作讓技術變得更美好！
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- 關閉 main-content-area -->
    </main>


</div>

<!-- WebSocket 和 JavaScript -->
<!-- Markdown 支援庫 - 本地版本 -->
<script src="/static/js/vendor/marked.min.js"></script>
<script src="/static/js/vendor/purify.min.js"></script>
<script src="/static/js/i18n.js?v=2025010510"></script>
<!-- 載入所有模組 -->
<!-- 核心模組（最先載入） -->
<script src="/static/js/modules/logger.js?v=2025010510"></script>

<!-- 工具模組 -->
<script src="/static/js/modules/utils/dom-utils.js?v=2025010510"></script>
<script src="/static/js/modules/utils/time-utils.js?v=2025010510"></script>
<script src="/static/js/modules/utils/status-utils.js?v=2025010510"></script>

<!-- 會話管理模組 -->
<script src="/static/js/modules/session/session-data-manager.js?v=2025010510"></script>
<script src="/static/js/modules/session/session-ui-renderer.js?v=2025010510"></script>
<script src="/static/js/modules/session/session-details-modal.js?v=2025010510"></script>

<!-- 提示詞管理模組 -->
<script src="/static/js/modules/prompt/prompt-manager.js?v=2025010510"></script>
<script src="/static/js/modules/prompt/prompt-modal.js?v=2025010510"></script>
<script src="/static/js/modules/prompt/prompt-settings-ui.js?v=2025010510"></script>
<script src="/static/js/modules/prompt/prompt-input-buttons.js?v=2025010510"></script>

<!-- 音效管理模組 -->
<script src="/static/js/modules/audio/audio-manager.js?v=2025010510"></script>
<script src="/static/js/modules/audio/audio-settings-ui.js?v=2025010510"></script>

<!-- 通知模組 -->
<script src="/static/js/modules/notification/notification-manager.js?v=2025010510"></script>
<script src="/static/js/modules/notification/notification-settings.js?v=2025010510"></script>

<!-- 其他模組 -->
<script src="/static/js/modules/utils.js?v=2025010510"></script>
<script src="/static/js/modules/tab-manager.js?v=2025010510"></script>
<script src="/static/js/modules/websocket-manager.js?v=2025010510"></script>
<script src="/static/js/modules/connection-monitor.js?v=2025010510"></script>
<script src="/static/js/modules/interface-timer.js?v=2025010510"></script>
<script src="/static/js/modules/session-manager.js?v=2025010510"></script>
<script src="/static/js/modules/file-upload-manager.js?v=2025010510"></script>
<script src="/static/js/modules/image-handler.js?v=2025010510"></script>
<script src="/static/js/modules/settings-manager.js?v=2025010510"></script>
<script src="/static/js/modules/ui-manager.js?v=2025010510"></script>
<script src="/static/js/modules/textarea-height-manager.js?v=2025010510"></script>

<!-- 主應用程式 -->
<script src="/static/js/app.js?v=2025010510"></script>
<script>
    // 等待所有模組載入完成後再初始化 FeedbackApp
    async function initializeApp() {
        const sessionId = '{{ session_id }}';

        // 檢查 Markdown 依賴庫
        if (typeof window.marked === 'undefined' || typeof window.DOMPurify === 'undefined') {
            const logger = window.MCPFeedback?.logger || console;
            logger.warn('Markdown 依賴庫尚未載入，等待中...');
            setTimeout(initializeApp, 100);
            return;
        }

        // 檢查核心依賴
        const requiredModules = [
            'MCPFeedback',
            'MCPFeedback.Logger',
            'MCPFeedback.Utils',
            'MCPFeedback.DOMUtils',
            'MCPFeedback.TimeUtils',
            'MCPFeedback.StatusUtils',
            'MCPFeedback.ConnectionMonitor',
            'MCPFeedback.SessionManager',
            'MCPFeedback.FeedbackApp'
        ];

        const missingModules = requiredModules.filter(modulePath => {
            const parts = modulePath.split('.');
            let current = window;
            for (const part of parts) {
                if (!current[part]) return true;
                current = current[part];
            }
            return false;
        });

        if (missingModules.length > 0) {
            const logger = window.MCPFeedback?.logger || console;
            logger.warn('模組載入不完整，缺少:', missingModules.join(', '));
            setTimeout(initializeApp, 100);
            return;
        }

        try {
            const logger = window.MCPFeedback.logger;
            logger.info('開始初始化應用程式...');

            // 確保 I18nManager 已經初始化
            if (window.i18nManager) {
                logger.debug('初始化國際化管理器...');
                await window.i18nManager.init();
            }

            // 初始化 FeedbackApp（使用新的命名空間）
            logger.debug('創建 FeedbackApp 實例...');
            window.feedbackApp = new window.MCPFeedback.FeedbackApp(sessionId);

            // 初始化應用程式
            logger.debug('初始化 FeedbackApp...');
            await window.feedbackApp.init();

            // 強制設置正確的窗口標題
            document.title = 'AI Interactive Feedback';
            logger.debug('窗口標題已設置為: AI Interactive Feedback');

            // 設置全域引用，讓 SessionManager 可以被 HTML 中的 onclick 調用
            if (window.feedbackApp.sessionManager) {
                window.MCPFeedback.app = window.feedbackApp;
            }

            // 初始化完成後，立即渲染現有的 AI 摘要內容為 Markdown
            setTimeout(function() {
                if (window.feedbackApp && window.feedbackApp.uiManager) {
                    // 獲取當前的摘要內容
                    const summaryElement = document.querySelector('#combinedSummaryContent');
                    const summaryTabElement = document.querySelector('#summaryContent');

                    if (summaryElement && summaryElement.textContent) {
                        console.log('🔧 初始化時渲染 Markdown 內容...');
                        window.feedbackApp.uiManager.updateAISummaryContent(summaryElement.textContent);
                    }
                }

                // 手動初始化界面計時器
                if (window.initInterfaceTimer) {
                    console.log('🕐 手動初始化界面計時器...');
                    window.initInterfaceTimer();
                }
            }, 100);

            logger.info('應用程式初始化完成');
        } catch (error) {
            const logger = window.MCPFeedback?.logger || console;
            logger.error('應用程式初始化失敗:', error);
        }
    }

    // 頁面載入完成後初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeApp);
    } else {
        initializeApp();
    }
</script>

<!-- 可折疊統計面板 -->
<div class="stats-panel-floating collapsed" id="statsPanel">
    <div class="stats-panel-header" onclick="toggleStatsPanel()">
        <div class="stats-panel-title">
            <span>📊</span>
            <span data-i18n="stats.detailedStats">詳細統計資訊</span>
        </div>
        <span class="stats-toggle-icon">▲</span>
    </div>
    <div class="stats-panel-content">
        <!-- 連線資訊 -->
        <div class="stats-item-detailed">
            <span class="stats-item-label" data-i18n="connectionMonitor.connectionTime">連線時間</span>
            <span class="stats-item-value" id="statsConnectionTime">--:--</span>
        </div>
        <div class="stats-item-detailed">
            <span class="stats-item-label" data-i18n="connectionMonitor.reconnectCount">重連次數</span>
            <span class="stats-item-value" id="statsReconnectCount">0</span>
        </div>
        <!-- WebSocket 統計 -->
        <div class="stats-item-detailed">
            <span class="stats-item-label" data-i18n="connectionMonitor.metrics.messages">訊息數</span>
            <span class="stats-item-value" id="statsMessageCount">0</span>
        </div>
        <div class="stats-item-detailed">
            <span class="stats-item-label" data-i18n="connectionMonitor.metrics.latencyMs">延遲</span>
            <span class="stats-item-value" id="statsLatency">--ms</span>
        </div>
        <!-- 會話統計 -->
        <div class="stats-item-detailed">
            <span class="stats-item-label" data-i18n="connectionMonitor.metrics.sessions">會話數</span>
            <span class="stats-item-value" id="statsSessionCount">1</span>
        </div>
        <div class="stats-item-detailed">
            <span class="stats-item-label" data-i18n="connectionMonitor.statusText">狀態</span>
            <span class="stats-item-value" id="statsSessionStatus" data-i18n="connectionMonitor.waiting">等待中</span>
        </div>
    </div>
</div>

<script>
    // 統計面板切換功能
    function toggleStatsPanel() {
        const panel = document.getElementById('statsPanel');
        panel.classList.toggle('collapsed');
    }
</script>
</body>
</html>
