<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>AI Intervention Agent</title>
    <link rel="icon" type="image/svg+xml" href="/icons/icon.svg" sizes="any" />
    <link rel="mask-icon" href="/icons/icon.svg" color="#8B5CF6" />
    <link rel="apple-touch-icon" href="/icons/icon.svg" />

    <!-- 0.0.0.0 访问兼容性：尽早重定向到 127.0.0.1，避免浏览器/Fetch/通知权限异常 -->
    <script nonce="{{ csp_nonce }}">
      ;(function redirectZeroHostToLoopback() {
        try {
          const url = new URL(window.location.href)
          if (url.hostname === '0.0.0.0') {
            url.hostname = '127.0.0.1'
            console.warn(
              `检测到访问地址为 0.0.0.0，已自动切换为 ${url.origin}（避免浏览器兼容性问题）`
            )
            window.location.replace(url.toString())
          }
        } catch (e) {
          // 忽略：不影响主流程
        }
      })()
    </script>

    <!-- 资源预加载优化：减少首屏渲染阻塞 -->
    <link rel="preload" href="/static/css/prism.css" as="style" />

    <!-- MathJax 数学公式支持 - 按需加载优化（1.17MB → 需要时才加载） -->
    <script src="/static/js/mathjax-loader.js" nonce="{{ csp_nonce }}"></script>

    <!-- Prism.js 代码高亮 CSS -->
    <link rel="stylesheet" href="/static/css/prism.css" />

    <!-- marked.js Markdown 渲染（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/marked.js" nonce="{{ csp_nonce }}"></script>

    <!-- Prism.js 代码高亮 JS（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/prism.js" nonce="{{ csp_nonce }}"></script>

    <!-- 主样式表（外部文件，带版本哈希用于缓存控制） -->
    <link
      rel="stylesheet"
      href="/static/css/main.css?v={{ css_version }}"
      nonce="{{ csp_nonce }}"
    />
  </head>
  <body>
    <a href="#feedback-text" class="skip-to-content" data-i18n="page.skipToContent"
      >Skip to content</a
    >
    <div class="container" role="main">
      <div class="header">
        <h1>
          <div class="header-icon">
            <svg width="32" height="32" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <linearGradient id="masterBg" x1="50%" y1="0%" x2="50%" y2="100%">
                  <stop offset="0%" class="svg-stop-1" />
                  <stop offset="100%" class="svg-stop-2" />
                </linearGradient>
                <radialGradient id="aiFluidCore" cx="50%" cy="50%" r="70%" fx="52%" fy="48%">
                  <stop offset="0%" class="svg-stop-3" />
                  <stop offset="30%" class="svg-stop-4" />
                  <stop offset="60%" class="svg-stop-5" />
                  <stop offset="100%" class="svg-stop-6" />
                </radialGradient>
                <linearGradient id="interventionControl" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" class="svg-stop-7" />
                  <stop offset="30%" class="svg-stop-8" />
                  <stop offset="70%" class="svg-stop-9" />
                  <stop offset="100%" class="svg-stop-10" />
                </linearGradient>
              </defs>
              <g>
                <rect
                  x="10"
                  y="10"
                  width="100"
                  height="100"
                  rx="22.5"
                  ry="22.5"
                  fill="url(#masterBg)"
                />
              </g>
              <g transform="translate(60,60) scale(0.95)">
                <g>
                  <path
                    id="aiShape"
                    d="M 0 -35
                           Q 30 -35, 30 0
                           Q 30 35, 0 35
                           Q -30 35, -30 0
                           Q -30 -35, 0 -35 Z
                           M 0 -25
                           Q 20 -25, 20 0
                           Q 20 25, 0 25
                           Q -20 25, -20 0
                           Q -20 -25, 0 -25 Z"
                    fill-rule="evenodd"
                    fill="url(#aiFluidCore)"
                    transform="rotate(15)"
                  />
                </g>
                <g transform="translate(0, -1)">
                  <path
                    d="M -15 -22
                           L -7 -22
                           C -5.5 -22, -4.5 -21, -4.5 -19.5
                           L -4.5 19.5
                           C -4.5 21, -5.5 22, -7 22
                           L -15 22
                           C -16.5 22, -17.5 21, -17.5 19.5
                           L -17.5 -19.5
                           C -17.5 -21, -16.5 -22, -15 -22 Z"
                    fill="url(#interventionControl)"
                  />
                  <path
                    d="M 4.5 -22
                           L 12.5 -22
                           C 14 -22, 15 -21, 15 -19.5
                           L 15 19.5
                           C 15 21, 14 22, 12.5 22
                           L 4.5 22
                           C 3 22, 2 21, 2 19.5
                           L 2 -19.5
                           C 2 -21, 3 -22, 4.5 -22 Z"
                    fill="url(#interventionControl)"
                  />
                </g>
              </g>
            </svg>
          </div>
          AI Intervention Agent
        </h1>
        <div class="header-actions">
          <button
            class="theme-toggle-btn"
            id="theme-toggle-btn"
            data-i18n-title="page.themeToggle"
            title="切换主题"
            aria-label="切换主题"
          >
            <!-- Claude 风格太阳图标（浅色模式）- 精致线条版 -->
            <svg
              class="theme-icon theme-icon-sun"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <!-- 太阳中心圆 -->
              <circle cx="10" cy="10" r="3" />
              <!-- 光芒射线 -->
              <line x1="10" y1="2" x2="10" y2="4" />
              <line x1="10" y1="16" x2="10" y2="18" />
              <line x1="2" y1="10" x2="4" y2="10" />
              <line x1="16" y1="10" x2="18" y2="10" />
              <line x1="4.2" y1="4.2" x2="5.8" y2="5.8" />
              <line x1="14.2" y1="14.2" x2="15.8" y2="15.8" />
              <line x1="4.2" y1="15.8" x2="5.8" y2="14.2" />
              <line x1="14.2" y1="5.8" x2="15.8" y2="4.2" />
            </svg>
            <!-- Claude 风格月亮图标（深色模式）- 精致线条版 -->
            <svg
              class="theme-icon theme-icon-moon"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <!-- 新月形状 -->
              <path
                d="M17.5 10.5C17.5 14.642 14.142 18 10 18C5.858 18 2.5 14.642 2.5 10.5C2.5 6.358 5.858 3 10 3C10.2 3 10.4 3.01 10.6 3.02C8.4 3.9 7 6.1 7 8.7C7 12.1 9.9 15 13.3 15C14.9 15 16.3 14.3 17.3 13.2C17.4 12.3 17.5 11.4 17.5 10.5Z"
              />
            </svg>
          </button>
          <button
            class="settings-btn"
            id="settings-btn"
            data-i18n-title="page.settingsBtn"
            title="通知设置"
            aria-label="打开通知设置"
            aria-haspopup="dialog"
            aria-controls="settings-panel"
          >
            <!-- Claude 风格设置/齿轮图标 - 精致线条版 -->
            <svg
              class="btn-icon"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <!-- 齿轮中心圆 -->
              <circle cx="12" cy="12" r="3" />
              <!-- 齿轮外形 -->
              <path
                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
              />
            </svg>
          </button>
        </div>
      </div>

      <!-- 任务标签页 -->
      <div
        class="task-tabs-container hidden"
        id="task-tabs-container"
        role="tablist"
        aria-label="任务列表"
        data-i18n-title="page.taskList"
      >
        <div class="task-tabs" id="task-tabs">
          <!-- 标签页将由 JS 动态生成 -->
        </div>
      </div>

      <!-- 无有效内容页面 -->
      <div id="no-content-container" class="no-content-container">
        <div class="no-content-icon" id="hourglass-lottie"></div>
        <h2 class="no-content-title" data-i18n="page.noContent.title">暂无交互反馈请求</h2>
        <p class="no-content-description" data-i18n="page.noContent.description">
          等待新的交互反馈请求…
        </p>
        <div class="no-content-progress">
          <div class="no-content-progress-bar"></div>
        </div>
        <div class="button-container no-content-buttons" id="no-content-buttons">
          <button
            class="btn btn-secondary"
            id="close-btn"
            aria-label="关闭 Web UI"
            data-i18n-title="page.closeWebUI"
          >
            <!-- Claude 风格关闭图标（X）- 精致线条版 -->
            <svg
              class="btn-icon"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
              style="width: 18px; height: 18px; margin-right: 6px"
            >
              <!-- 交叉线条 -->
              <line x1="5" y1="5" x2="15" y2="15" />
              <line x1="15" y1="5" x2="5" y2="15" />
            </svg>
            关闭 Web UI
          </button>
        </div>
        <!-- 无内容页面的状态消息显示区域 -->
        <div
          class="status-message no-content-status"
          id="no-content-status-message"
          role="status"
          aria-live="polite"
        ></div>
      </div>

      <!-- 正常内容页面 -->
      <div id="content-container" class="content">
        <div class="feedback-group">
          <!-- 任务 ID 和倒计时显示区域 -->
          <div class="header-info-container">
            <div class="task-id-container hidden" id="task-id-container">
              <span class="task-id-label">
                <!-- Claude 官方文档图标 -->
                <svg
                  class="section-icon"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M3 4.5C3 3.67157 3.67157 3 4.5 3H11C11.1326 3 11.2598 3.05268 11.3536 3.14645L16.8536 8.64645C16.9473 8.74021 17 8.86739 17 9V15.5C17 16.3284 16.3284 17 15.5 17H4.5C3.67157 17 3 16.3284 3 15.5V4.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5V15.5C4 15.7761 4.22386 16 4.5 16H15.5C15.7761 16 16 15.7761 16 15.5V9.20711L11.2929 4.5H11H4.5Z"
                  />
                </svg>
                任务：
              </span>
              <span class="task-id-text" id="task-id-text"></span>
            </div>

            <div class="countdown-container hidden" id="countdown-container">
              <span class="countdown-label">⏰</span>
              <span class="countdown-text" id="countdown-text" data-i18n="page.countdown"
                >0 秒后自动重调</span
              >
            </div>
          </div>

          <div class="description markdown-content" id="description" data-i18n="page.loading">
            加载中…
          </div>

          <div class="options-container hidden" id="options-container">
            <!-- 预定义选项将在这里动态加载 -->
          </div>

          <div class="separator hidden" id="separator"></div>

          <!-- 图片预览区域 -->
          <div class="image-preview-container hidden" id="image-preview-container">
            <div class="image-preview-header">
              <span class="image-count-text">已选择 <span id="image-count">0</span> 张图片</span>
              <button
                class="clear-all-images-btn"
                id="clear-all-images-btn"
                data-i18n-title="page.clearAllImages"
                title="清除所有图片"
              >
                <!-- Claude 官方垃圾箱图标 -->
                <svg
                  class="btn-icon"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M7 3C7 2.44772 7.44772 2 8 2H12C12.5523 2 13 2.44772 13 3V4H16C16.2761 4 16.5 4.22386 16.5 4.5C16.5 4.77614 16.2761 5 16 5H15V16C15 16.5523 14.5523 17 14 17H6C5.44772 17 5 16.5523 5 16V5H4C3.72386 5 3.5 4.77614 3.5 4.5C3.5 4.22386 3.72386 4 4 4H7V3ZM8 4H12V3H8V4ZM6 5V16H14V5H6Z"
                  />
                  <path
                    d="M8.5 7C8.77614 7 9 7.22386 9 7.5V14.5C9 14.7761 8.77614 15 8.5 15C8.22386 15 8 14.7761 8 14.5V7.5C8 7.22386 8.22386 7 8.5 7Z"
                  />
                  <path
                    d="M11.5 7C11.7761 7 12 7.22386 12 7.5V14.5C12 14.7761 11.7761 15 11.5 15C11.2239 15 11 14.7761 11 14.5V7.5C11 7.22386 11.2239 7 11.5 7Z"
                  />
                </svg>
                清除全部
              </button>
            </div>
            <div class="image-previews" id="image-previews">
              <!-- 图片预览缩略图将在这里动态添加 -->
            </div>
          </div>

          <!-- 拖拽提示覆盖层 -->
          <div class="drag-overlay hidden" id="drag-overlay">
            <div class="drag-overlay-content">
              <div class="drag-icon">📁</div>
              <div class="drag-text" data-i18n="page.dragDrop">拖放图片到这里</div>
              <div class="drag-subtext" data-i18n="page.dragFormat">
                支持 JPG、PNG、GIF、WEBP 格式
              </div>
            </div>
          </div>

          <!-- 图片放大预览模态框 -->
          <div class="image-modal" id="image-modal">
            <div class="image-modal-content">
              <img id="modal-image" src="" alt="" />
              <button class="image-modal-close" onclick="closeImageModal()">×</button>
              <div class="image-modal-info" id="modal-info"></div>
            </div>
          </div>

          <!-- 代码粘贴模态框（iOS/HTTP 等场景无法读取剪贴板时的降级方案） -->
          <div
            class="settings-panel hidden"
            id="code-paste-panel"
            role="dialog"
            aria-modal="true"
            aria-labelledby="code-paste-title"
          >
            <div class="settings-content" style="max-width: 720px">
              <div class="settings-header">
                <h3 id="code-paste-title" class="settings-title">
                  <svg
                    class="section-icon"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <polyline points="16 18 22 12 16 6"></polyline>
                    <polyline points="8 6 2 12 8 18"></polyline>
                    <line x1="14" y1="4" x2="10" y2="20"></line>
                  </svg>
                  插入代码
                </h3>
                <button
                  class="settings-close-btn"
                  id="code-paste-close-btn"
                  type="button"
                  aria-label="关闭"
                  data-i18n-title="page.closeCodePaste"
                ></button>
              </div>
              <div class="settings-body">
                <div class="setting-group">
                  <div
                    id="code-paste-hint"
                    style="margin-bottom: 0.75rem; color: var(--text-secondary); font-size: 0.9rem"
                  >
                    由于浏览器安全限制无法自动读取剪贴板，请在下方粘贴代码（iOS
                    可长按→粘贴），然后点击“插入”。
                  </div>
                  <textarea
                    id="code-paste-textarea"
                    class="code-paste-textarea"
                    data-i18n-placeholder="page.codePastePlaceholder"
                    placeholder="在此粘贴代码…"
                    spellcheck="false"
                    autocapitalize="off"
                    autocomplete="off"
                    autocorrect="off"
                  ></textarea>
                  <div class="code-paste-actions">
                    <button
                      class="btn btn-secondary"
                      id="code-paste-cancel-btn"
                      type="button"
                      data-i18n="page.cancel"
                    >
                      取消
                    </button>
                    <button
                      class="btn btn-primary"
                      id="code-paste-insert-btn"
                      type="button"
                      data-i18n="page.insert"
                    >
                      插入
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 隐藏的文件上传input -->
          <input type="file" id="file-upload-input" multiple accept="image/*" class="hidden" />

          <div class="textarea-container">
            <textarea
              class="feedback-textarea"
              id="feedback-text"
              data-i18n-placeholder="page.feedbackPlaceholder"
              placeholder="请输入反馈内容…"
            ></textarea>
          </div>

          <div class="button-container">
            <button type="button" class="btn btn-secondary" id="insert-code-btn">
              <!-- Claude 风格代码图标（线条版） -->
              <svg
                class="btn-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <polyline points="16 18 22 12 16 6"></polyline>
                <polyline points="8 6 2 12 8 18"></polyline>
                <line x1="14" y1="4" x2="10" y2="20"></line>
              </svg>
              插入代码
            </button>
            <button type="button" class="btn btn-secondary" id="upload-image-btn">
              <!-- Claude 风格图片图标（线条版） -->
              <svg
                class="btn-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                <polyline points="21 15 16 10 5 21"></polyline>
              </svg>
              上传图片
            </button>
            <button type="button" class="btn btn-primary" id="submit-btn">
              <!-- Claude 风格发送图标（双箭头） -->
              <svg
                class="btn-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M3.29289 3.29289C3.68342 2.90237 4.31658 2.90237 4.70711 3.29289L10.7071 9.29289C11.0976 9.68342 11.0976 10.3166 10.7071 10.7071L4.70711 16.7071C4.31658 17.0976 3.68342 17.0976 3.29289 16.7071C2.90237 16.3166 2.90237 15.6834 3.29289 15.2929L8.58579 10L3.29289 4.70711C2.90237 4.31658 2.90237 3.68342 3.29289 3.29289ZM9.29289 3.29289C9.68342 2.90237 10.3166 2.90237 10.7071 3.29289L16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L14.5858 10L9.29289 4.70711C8.90237 4.31658 8.90237 3.68342 9.29289 3.29289Z"
                />
              </svg>
              提交反馈
            </button>
          </div>

          <div class="status-message" id="status-message" role="status" aria-live="polite"></div>
        </div>
      </div>

      <!-- 设置面板 -->
      <div
        class="settings-panel hidden"
        id="settings-panel"
        role="dialog"
        aria-modal="true"
        aria-labelledby="settings-title"
      >
        <div class="settings-content">
          <div class="settings-header">
            <h3 id="settings-title">
              <!-- Claude 风格设置/齿轮图标 - 精致线条版 -->
              <svg
                class="section-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <!-- 齿轮中心圆 -->
                <circle cx="12" cy="12" r="3" />
                <!-- 齿轮外形 -->
                <path
                  d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
                />
              </svg>
              设置
            </h3>
            <button
              class="settings-close-btn"
              id="settings-close-btn"
              aria-label="关闭设置"
              data-i18n-title="page.closeSettings"
            ></button>
          </div>

          <div class="settings-body">
            <!-- 通知标题 -->
            <h4 class="settings-main-title">
              <!-- Claude 风格铃铛图标 -->
              <svg
                class="section-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M10 2C7.23858 2 5 4.23858 5 7V11.5858L3.29289 13.2929C3.00693 13.5789 2.92134 14.009 3.07612 14.3827C3.2309 14.7564 3.59554 15 4 15H16C16.4045 15 16.7691 14.7564 16.9239 14.3827C17.0787 14.009 16.9931 13.5789 16.7071 13.2929L15 11.5858V7C15 4.23858 12.7614 2 10 2ZM6 7C6 4.79086 7.79086 3 10 3C12.2091 3 14 4.79086 14 7V12C14 12.2652 14.1054 12.5196 14.2929 12.7071L15.5858 14H4.41421L5.70711 12.7071C5.89464 12.5196 6 12.2652 6 12V7ZM8.26756 16C8.61337 17.1825 9.70948 18 11 18C12.2905 18 13.3866 17.1825 13.7324 16H8.26756Z"
                />
              </svg>
              通知
            </h4>

            <!-- 通知设置 -->
            <div class="setting-group">
              <!-- 通知总开关 -->
              <div class="setting-item">
                <label class="setting-label">
                  <input type="checkbox" id="notification-enabled" checked />
                  <span class="setting-title" data-i18n="settings.enableNotify">启用通知功能</span>
                </label>
              </div>

              <!-- 桌面通知设置 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <circle cx="12" cy="12" r="10" />
                    <line x1="2" y1="12" x2="22" y2="12" />
                    <path
                      d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
                    />
                  </svg>
                  桌面通知（浏览器）
                </h5>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="web-notification-enabled" checked />
                    <span class="setting-title" data-i18n="settings.desktopNotify"
                      >启用桌面通知</span
                    >
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="auto-request-permission" checked />
                    <span class="setting-title" data-i18n="settings.autoPermission"
                      >自动请求浏览器通知权限</span
                    >
                  </label>
                </div>
              </div>

              <!-- 声音通知设置 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
                    <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
                  </svg>
                  声音通知
                </h5>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="sound-notification-enabled" checked />
                    <span class="setting-title" data-i18n="settings.soundNotify">声音通知</span>
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="sound-mute" />
                    <span class="setting-title" data-i18n="settings.muteMode">静音模式</span>
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label">
                    <span class="setting-title" data-i18n="settings.volumeControl">音量调节</span>
                    <input
                      type="range"
                      id="sound-volume"
                      min="0"
                      max="100"
                      value="80"
                      class="volume-slider"
                    />
                    <span class="volume-value">80%</span>
                  </label>
                </div>
              </div>

              <!-- 移动设备通知设置 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
                    <line x1="12" y1="18" x2="12.01" y2="18" />
                  </svg>
                  移动设备
                </h5>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="mobile-optimized" checked />
                    <span class="setting-title" data-i18n="settings.mobileOptimize"
                      >移动设备优化</span
                    >
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="mobile-vibrate" checked />
                    <span class="setting-title" data-i18n="settings.vibration">震动提醒</span>
                  </label>
                </div>
              </div>

              <!-- Bark 通知设置 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path
                      d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06z"
                    />
                    <path d="M10 2c1 .5 2 2 2 5" />
                  </svg>
                  Bark 通知（iOS）
                </h5>
                <div class="setting-item">
                  <label class="setting-label">
                    <input type="checkbox" id="bark-notification-enabled" />
                    <span class="setting-title" data-i18n="settings.enableBark"
                      >启用 Bark 通知</span
                    >
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label has-input">
                    <span class="setting-title">Bark URL</span>
                    <input
                      type="url"
                      id="bark-url"
                      class="setting-input"
                      placeholder="https://api.day.app/push"
                      value=""
                    />
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label has-input">
                    <span class="setting-title">Device Key</span>
                    <input
                      type="text"
                      id="bark-device-key"
                      class="setting-input"
                      data-i18n-placeholder="settings.barkDeviceKeyPlaceholder"
                      placeholder="请输入 Bark Device Key"
                      value=""
                    />
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label has-input">
                    <span class="setting-title" data-i18n="settings.barkIconUrl"
                      >图标 URL（可选）</span
                    >
                    <input
                      type="url"
                      id="bark-icon"
                      class="setting-input"
                      placeholder="https://example.com/icon.png"
                      value=""
                    />
                  </label>
                </div>
                <div class="setting-item">
                  <label class="setting-label has-input">
                    <span class="setting-title" data-i18n="settings.barkAction">点击行为</span>
                    <select id="bark-action" class="setting-select">
                      <option value="none" data-i18n="settings.barkActionNone">无操作</option>
                      <option value="url" data-i18n="settings.barkActionUrl">打开链接</option>
                      <option value="copy" data-i18n="settings.barkActionCopy">复制内容</option>
                    </select>
                  </label>
                </div>
                <div class="setting-item">
                  <button class="btn btn-secondary" id="test-bark-notification-btn">
                    <svg
                      class="btn-icon"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path
                        d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
                      />
                      <polyline points="14 2 14 8 20 8" />
                      <line x1="9" y1="15" x2="15" y2="15" />
                    </svg>
                    测试 Bark 通知
                  </button>
                </div>
              </div>

              <!-- 通知状态信息 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <circle cx="12" cy="12" r="10" />
                    <line x1="12" y1="16" x2="12" y2="12" />
                    <line x1="12" y1="8" x2="12.01" y2="8" />
                  </svg>
                  状态信息
                </h5>
                <div class="status-row">
                  <span data-i18n="settings.browserSupport">浏览器通知支持：</span>
                  <span id="browser-support-status" data-i18n="settings.detecting">检测中…</span>
                </div>
                <div class="status-row">
                  <span data-i18n="settings.secureContext">安全上下文：</span>
                  <span id="notification-secure-context-status" data-i18n="settings.detecting"
                    >检测中…</span
                  >
                </div>
                <div class="status-row">
                  <span data-i18n="settings.notifyPermission">通知权限：</span>
                  <span id="notification-permission-status" data-i18n="settings.detecting"
                    >检测中…</span
                  >
                </div>
                <div class="status-row">
                  <span data-i18n="settings.audioStatus">音频状态：</span>
                  <span id="audio-status" data-i18n="settings.detecting">检测中…</span>
                </div>
              </div>

              <!-- 测试功能 -->
              <div class="setting-subgroup">
                <h5 class="setting-subgroup-title">
                  <svg
                    class="section-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path
                      d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
                    />
                    <polyline points="14 2 14 8 20 8" />
                    <line x1="9" y1="15" x2="15" y2="15" />
                  </svg>
                  测试功能
                </h5>
                <div class="setting-item">
                  <button class="btn btn-secondary" id="test-notification-btn">
                    <svg
                      class="btn-icon"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
                      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
                    </svg>
                    测试桌面通知
                  </button>
                </div>
                <div class="setting-item">
                  <button class="btn btn-secondary" id="reset-settings-btn">
                    <svg
                      class="btn-icon"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <polyline points="1 4 1 10 7 10" />
                      <polyline points="23 20 23 14 17 14" />
                      <path
                        d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"
                      />
                    </svg>
                    重置设置
                  </button>
                </div>
              </div>
            </div>

            <!-- 配置文件信息（用于明确“当前实际读取的 config.toml 是哪一份”） -->
            <h4 class="settings-main-title shortcuts-section">
              <svg
                class="section-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M20 7H4" />
                <path d="M20 12H4" />
                <path d="M20 17H4" />
              </svg>
              配置
            </h4>
            <div class="setting-group">
              <div class="setting-item">
                <label class="setting-label has-input">
                  <span class="setting-title" data-i18n="settings.language">界面语言</span>
                  <select id="language-select" class="setting-input">
                    <option value="auto" data-i18n="settings.langAuto">自动检测</option>
                    <option value="en">English</option>
                    <option value="zh-CN">简体中文</option>
                  </select>
                </label>
              </div>
              <div class="setting-item">
                <label class="setting-label has-input">
                  <span class="setting-title" data-i18n="settings.configPath"
                    >当前配置文件路径</span
                  >
                  <input
                    type="text"
                    id="config-file-path"
                    class="setting-input"
                    value="加载中…"
                    readonly
                  />
                </label>
                <div
                  style="margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.85rem"
                  data-i18n="settings.configHint"
                >
                  后端服务当前实际使用的配置文件路径。
                </div>
              </div>
            </div>

            <!-- 反馈配置 -->
            <h4 class="settings-main-title">
              <svg
                class="section-icon"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
              </svg>
              <span data-i18n="settings.feedbackTitle">反馈</span>
            </h4>
            <div class="setting-group">
              <div class="setting-item">
                <label class="setting-label has-input">
                  <span class="setting-title" data-i18n="settings.autoResubmitTimeout"
                    >自动重调倒计时（秒）</span
                  >
                  <input
                    type="number"
                    id="feedback-countdown"
                    class="setting-input"
                    min="0"
                    max="250"
                    step="10"
                    value="240"
                    style="max-width: 120px"
                  />
                </label>
                <div
                  style="margin-top: 0.3rem; color: var(--text-secondary); font-size: 0.82rem"
                  data-i18n-html="settings.autoResubmitTimeoutHint"
                >
                  倒计时结束后自动重新提交反馈请求。范围 30-250，设为 0 则禁用。
                </div>
              </div>
              <div class="setting-item">
                <label class="setting-label has-input">
                  <span class="setting-title" data-i18n="settings.resubmitPrompt">重调提示语</span>
                  <textarea
                    id="feedback-resubmit-prompt"
                    class="setting-input"
                    rows="2"
                    maxlength="500"
                    style="resize: vertical; font-family: inherit"
                  ></textarea>
                </label>
                <div
                  style="margin-top: 0.3rem; color: var(--text-secondary); font-size: 0.82rem"
                  data-i18n-html="settings.resubmitPromptHint"
                >
                  倒计时结束后自动提交的提示内容（最多 500 字符）
                </div>
              </div>
              <div class="setting-item">
                <label class="setting-label has-input">
                  <span class="setting-title" data-i18n="settings.promptSuffix">反馈后缀</span>
                  <textarea
                    id="feedback-prompt-suffix"
                    class="setting-input"
                    rows="2"
                    maxlength="500"
                    style="resize: vertical; font-family: inherit"
                  ></textarea>
                </label>
                <div
                  style="margin-top: 0.3rem; color: var(--text-secondary); font-size: 0.82rem"
                  data-i18n-html="settings.promptSuffixHint"
                >
                  追加到用户每次反馈末尾的提示语（最多 500 字符）
                </div>
              </div>
              <div class="setting-item">
                <button class="btn btn-secondary" id="reset-feedback-config-btn">
                  <svg
                    class="btn-icon"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <polyline points="1 4 1 10 7 10" />
                    <polyline points="23 20 23 14 17 14" />
                    <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
                  </svg>
                  <span data-i18n="settings.resetFeedbackConfig">重置反馈配置</span>
                </button>
              </div>
            </div>

            <!-- 常用快捷键 -->
            <h4 class="settings-main-title shortcuts-section">
              <svg
                class="section-icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <rect x="2" y="4" width="20" height="16" rx="2" ry="2" />
                <path
                  d="M6 8h.001M10 8h.001M14 8h.001M18 8h.001M8 12h.001M12 12h.001M16 12h.001M6 16h12"
                />
              </svg>
              常用快捷键
            </h4>
            <div class="setting-group shortcuts-section">
              <div class="status-row">
                <span data-i18n="settings.shortcutSubmit">提交反馈：</span>
                <span id="shortcut-submit">Ctrl+Enter</span>
              </div>
              <div class="status-row">
                <span data-i18n="settings.shortcutInsertCode">插入代码：</span>
                <span id="shortcut-code">Alt+C</span>
              </div>
              <div class="status-row">
                <span data-i18n="settings.shortcutPasteImage">粘贴图片：</span>
                <span id="shortcut-paste">Ctrl+V</span>
              </div>
              <div class="status-row">
                <span data-i18n="settings.shortcutUploadImage">上传图片：</span>
                <span id="shortcut-upload">Ctrl+U</span>
              </div>
              <div class="status-row">
                <span data-i18n="settings.shortcutClearImage">清除图片：</span>
                <span id="shortcut-delete">Delete</span>
              </div>
            </div>

            <!-- 版本信息 -->
            <div class="version-info">
              <div class="version-text">
                <span class="version-name">AI Intervention Agent</span>
                <span class="version-number">v{{ version }}</span>
              </div>
              <a
                href="{{ github_url }}"
                target="_blank"
                rel="noopener noreferrer"
                class="github-link"
                data-i18n-title="page.githubTitle"
                title="在 GitHub 上查看项目"
              >
                <!-- GitHub 图标 - 明确设置尺寸以确保正确渲染 -->
                <svg
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  class="github-icon"
                  width="14"
                  height="14"
                  style="width: 14px; height: 14px; flex-shrink: 0"
                >
                  <path
                    d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
                  />
                </svg>
                <span>GitHub</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 验证工具类：统一验证和缓存功能 -->
    <script defer src="/static/js/validation-utils.js" nonce="{{ csp_nonce }}"></script>

    <!-- 🎬 Lottie 动画库（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/lottie.min.js" nonce="{{ csp_nonce }}"></script>

    <!-- 🎨 主题切换模块（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/theme.js?v={{ theme_version }}" nonce="{{ csp_nonce }}"></script>

    <!-- ⌨️ 键盘快捷键模块（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/keyboard-shortcuts.js" nonce="{{ csp_nonce }}"></script>

    <!-- DOM 安全工具：防止 XSS 攻击（defer 属性：按顺序异步加载） -->
    <script defer src="/static/js/dom-security.js" nonce="{{ csp_nonce }}"></script>

    <!-- 📋 多任务管理模块（defer 属性：按顺序异步加载，依赖内联脚本中的函数） -->
    <script
      defer
      src="/static/js/multi_task.js?v={{ multi_task_version }}"
      nonce="{{ csp_nonce }}"
    ></script>

    <!-- i18n 国际化模块（必须在 app.js 之前加载） -->
    <script defer src="/static/js/i18n.js" nonce="{{ csp_nonce }}"></script>
    <script defer nonce="{{ csp_nonce }}">
      window.AIIA_CONFIG_LANG = {{ language|tojson }};
      document.addEventListener('DOMContentLoaded', function() {
        if (window.AIIA_I18N) {
          var cfgLang = window.AIIA_CONFIG_LANG;
          window.AIIA_I18N.init({
            localeBaseUrl: '/static/locales',
            lang: cfgLang !== 'auto' ? cfgLang : undefined
          }).catch(function() {});
        }
      });
    </script>

    <!-- 拆分模块（在 app.js 之前加载） -->
    <script defer src="/static/js/notification-manager.js" nonce="{{ csp_nonce }}"></script>
    <script defer src="/static/js/settings-manager.js" nonce="{{ csp_nonce }}"></script>
    <script defer src="/static/js/image-upload.js" nonce="{{ csp_nonce }}"></script>

    <!-- 主应用脚本（依赖: 上述所有模块） -->
    <script defer src="/static/js/app.js?v={{ app_version }}" nonce="{{ csp_nonce }}"></script>
  </body>
</html>
