okit-cli 0.0.1

package/dist/web/public/app.js

@@ -0,0 +1,284 @@
+// ═══════════════════════════════════════════
+// OKIT — Dashboard Controller
+// ═══════════════════════════════════════════
+
+// State
+let currentPage = 'dashboard';
+let configData = null;
+let refreshTimer = null;
+
+// ─── Toast ───
+function showToast(message, type = 'success') {
+  const toast = document.getElementById('toast');
+  toast.textContent = message;
+  toast.className = 'toast ' + type;
+  // Trigger reflow for re-animation
+  void toast.offsetWidth;
+  toast.classList.add('show');
+  clearTimeout(toast._timeout);
+  toast._timeout = setTimeout(() => {
+    toast.classList.remove('show');
+  }, 2600);
+}
+
+// ─── Router ───
+function navigate(page) {
+  if (currentPage === page && document.querySelector(`#page-${page}.active`)) return;
+  currentPage = page;
+
+  // Update nav
+  document.querySelectorAll('.nav-links li').forEach(li => {
+    li.classList.remove('active');
+  });
+  document.querySelector(`[data-page="${page}"]`)?.closest('li').classList.add('active');
+
+  // Update pages
+  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+  const target = document.getElementById(`page-${page}`);
+  if (target) {
+    target.classList.add('active');
+    // Re-trigger stagger animations
+    target.querySelectorAll('.stat-card, .stat-pill, .section, .config-section').forEach(el => {
+      el.style.animation = 'none';
+      void el.offsetWidth;
+      el.style.animation = '';
+    });
+  }
+
+  // Load data
+  if (page === 'dashboard') {
+    loadStats();
+  } else if (page === 'config') {
+    loadConfig();
+  }
+}
+
+// ─── Stats ───
+async function loadStats() {
+  try {
+    const response = await fetch('/api/stats');
+    const data = await response.json();
+
+    // Animate value updates
+    animateValue('totalTokens', formatNumber(data.totalTokens));
+    animateValue('totalCost', '$' + data.totalCost.toFixed(2));
+    animateValue('sessionCount', data.sessionCount);
+    animateValue('activeTime', formatDuration(data.activeTime));
+    animateValue('linesOfCode', formatNumber(data.linesOfCode));
+    animateValue('commitCount', data.commitCount);
+    animateValue('prCount', data.prCount);
+
+    // Update sessions table
+    const tbody = document.getElementById('sessionsTable');
+    if (data.recentSessions.length === 0) {
+      tbody.innerHTML = '<tr><td colspan="4" class="loading"><span>暂无会话记录</span></td></tr>';
+    } else {
+      tbody.innerHTML = data.recentSessions.map((session, i) => `
+        <tr style="animation: rowSlide 0.3s ease ${i * 0.03}s both">
+          <td>${escapeHtml(session.project)}</td>
+          <td><span class="model-tag">${escapeHtml(session.model || '-')}</span></td>
+          <td>${formatNumber(session.tokens)}</td>
+          <td>${formatDate(session.timestamp)}</td>
+        </tr>
+      `).join('');
+    }
+
+    setStatus('connected');
+  } catch (error) {
+    console.error('Failed to load stats:', error);
+    setStatus('error');
+  }
+}
+
+function refreshStats() {
+  const btn = document.querySelector('.btn-refresh');
+  if (btn) {
+    btn.style.pointerEvents = 'none';
+    setTimeout(() => { btn.style.pointerEvents = ''; }, 1000);
+  }
+  loadStats();
+}
+
+// ─── Config ───
+async function loadConfig() {
+  try {
+    const response = await fetch('/api/config');
+    const data = await response.json();
+    configData = data;
+
+    const settings = data.settings || {};
+
+    document.getElementById('configModel').value = settings.model || '';
+    document.getElementById('configTeammateMode').value = settings.teammateMode || 'auto';
+    document.getElementById('configLanguage').value = settings.language || 'english';
+    document.getElementById('configOutputStyle').value = settings.outputStyle || 'Concise';
+    document.getElementById('configShowTurnDuration').checked = settings.showTurnDuration || false;
+    document.getElementById('configSpinnerTipsEnabled').checked = settings.spinnerTipsEnabled !== false;
+
+    setStatus('connected');
+  } catch (error) {
+    console.error('Failed to load config:', error);
+    setStatus('error');
+  }
+}
+
+async function saveConfig() {
+  const btn = document.querySelector('.btn-save');
+  const originalText = btn.querySelector('span').textContent;
+  btn.querySelector('span').textContent = '保存中...';
+  btn.style.pointerEvents = 'none';
+
+  try {
+    const response = await fetch('/api/config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        model: document.getElementById('configModel').value || undefined,
+        teammateMode: document.getElementById('configTeammateMode').value,
+        language: document.getElementById('configLanguage').value,
+        outputStyle: document.getElementById('configOutputStyle').value,
+        showTurnDuration: document.getElementById('configShowTurnDuration').checked,
+        spinnerTipsEnabled: document.getElementById('configSpinnerTipsEnabled').checked,
+      }),
+    });
+
+    if (response.ok) {
+      showToast('配置已保存', 'success');
+    } else {
+      showToast('保存失败', 'error');
+    }
+  } catch (error) {
+    console.error('Failed to save config:', error);
+    showToast('保存失败', 'error');
+  } finally {
+    btn.querySelector('span').textContent = originalText;
+    btn.style.pointerEvents = '';
+  }
+}
+
+// ─── Status ───
+function setStatus(status) {
+  const statusEl = document.getElementById('status');
+  statusEl.className = 'status ' + status;
+  const textEl = statusEl.querySelector('.status-text');
+
+  if (status === 'connected') {
+    textEl.textContent = '已连接';
+  } else if (status === 'error') {
+    textEl.textContent = '连接失败';
+  } else {
+    textEl.textContent = '连接中...';
+  }
+}
+
+// ─── Helpers ───
+function formatNumber(num) {
+  if (num === undefined || num === null) return '—';
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + 'M';
+  } else if (num >= 1000) {
+    return (num / 1000).toFixed(1) + 'K';
+  }
+  return num.toString();
+}
+
+function formatDuration(seconds) {
+  if (seconds === undefined || seconds === null) return '—';
+  if (seconds < 60) {
+    return seconds + '秒';
+  } else if (seconds < 3600) {
+    return Math.floor(seconds / 60) + '分钟';
+  } else if (seconds < 86400) {
+    return Math.floor(seconds / 3600) + '小时';
+  }
+  return Math.floor(seconds / 86400) + '天';
+}
+
+function formatDate(timestamp) {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diff = now - date;
+
+  if (diff < 60000) {
+    return '刚刚';
+  } else if (diff < 3600000) {
+    return Math.floor(diff / 60000) + '分钟前';
+  } else if (diff < 86400000) {
+    return Math.floor(diff / 3600000) + '小时前';
+  } else if (diff < 604800000) {
+    return Math.floor(diff / 86400000) + '天前';
+  }
+
+  return date.toLocaleDateString('zh-CN');
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function animateValue(id, newValue) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  const current = el.textContent;
+  if (current === String(newValue)) return;
+  el.style.transition = 'none';
+  el.style.opacity = '0.4';
+  el.style.transform = 'translateY(4px)';
+  void el.offsetWidth;
+  el.textContent = newValue;
+  el.style.transition = 'opacity 0.35s ease, transform 0.35s ease';
+  el.style.opacity = '1';
+  el.style.transform = 'translateY(0)';
+}
+
+// ─── Inject dynamic keyframes ───
+(function injectStyles() {
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes rowSlide {
+      from { opacity: 0; transform: translateX(-8px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    .model-tag {
+      display: inline-block;
+      font-size: 12px;
+      padding: 2px 8px;
+      border-radius: 4px;
+      background: rgba(167, 139, 250, 0.08);
+      color: rgba(167, 139, 250, 0.8);
+      font-family: 'DM Sans', monospace;
+      letter-spacing: 0.2px;
+    }
+  `;
+  document.head.appendChild(style);
+})();
+
+// ─── Event Listeners ───
+document.addEventListener('DOMContentLoaded', () => {
+  // Handle nav clicks
+  document.querySelectorAll('[data-page]').forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      navigate(link.dataset.page);
+    });
+  });
+
+  // Handle hash changes
+  window.addEventListener('hashchange', () => {
+    const hash = window.location.hash.slice(2) || 'dashboard';
+    navigate(hash);
+  });
+
+  // Initial navigation
+  const initialPage = window.location.hash.slice(2) || 'dashboard';
+  navigate(initialPage);
+
+  // Auto-refresh stats every 30 seconds
+  refreshTimer = setInterval(() => {
+    if (currentPage === 'dashboard') {
+      loadStats();
+    }
+  }, 30000);
+});

package/dist/web/public/index.html

@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OKIT — Claude Code Dashboard</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <!-- Ambient background -->
+  <div class="ambient-bg">
+    <div class="ambient-orb ambient-orb--1"></div>
+    <div class="ambient-orb ambient-orb--2"></div>
+    <div class="ambient-orb ambient-orb--3"></div>
+  </div>
+
+  <div id="app">
+    <nav class="sidebar">
+      <div class="sidebar-header">
+        <div class="logo">
+          <div class="logo-mark">
+            <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
+              <rect x="2" y="2" width="24" height="24" rx="6" stroke="url(#logoGrad)" stroke-width="2"/>
+              <circle cx="10" cy="11" r="2" fill="url(#logoGrad)"/>
+              <circle cx="18" cy="11" r="2" fill="url(#logoGrad)"/>
+              <path d="M9 18c1.5 2 4 3 5 3s3.5-1 5-3" stroke="url(#logoGrad)" stroke-width="1.5" stroke-linecap="round"/>
+              <defs>
+                <linearGradient id="logoGrad" x1="0" y1="0" x2="28" y2="28">
+                  <stop stop-color="#c084fc"/>
+                  <stop offset="1" stop-color="#60a5fa"/>
+                </linearGradient>
+              </defs>
+            </svg>
+          </div>
+          <span class="logo-text">OKIT</span>
+        </div>
+      </div>
+
+      <ul class="nav-links">
+        <li class="active">
+          <a href="#/" data-page="dashboard">
+            <span class="nav-icon">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <rect x="1" y="1" width="7" height="7" rx="2" stroke="currentColor" stroke-width="1.5"/>
+                <rect x="12" y="1" width="7" height="7" rx="2" stroke="currentColor" stroke-width="1.5"/>
+                <rect x="1" y="12" width="7" height="7" rx="2" stroke="currentColor" stroke-width="1.5"/>
+                <rect x="12" y="12" width="7" height="7" rx="2" stroke="currentColor" stroke-width="1.5"/>
+              </svg>
+            </span>
+            <span class="nav-label">使用量</span>
+          </a>
+        </li>
+        <li>
+          <a href="#/config" data-page="config">
+            <span class="nav-icon">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <circle cx="10" cy="10" r="3" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M10 1v3M10 16v3M1 10h3M16 10h3M3.93 3.93l2.12 2.12M13.95 13.95l2.12 2.12M3.93 16.07l2.12-2.12M13.95 6.05l2.12-2.12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+            </span>
+            <span class="nav-label">配置</span>
+          </a>
+        </li>
+      </ul>
+
+      <div class="sidebar-footer">
+        <div class="status" id="status">
+          <span class="status-dot"></span>
+          <span class="status-text">连接中...</span>
+        </div>
+        <div class="version-tag">v2.0</div>
+      </div>
+    </nav>
+
+    <main class="main-content">
+      <!-- Dashboard Page -->
+      <div id="page-dashboard" class="page active">
+        <header class="page-header">
+          <div class="page-title-group">
+            <h2>使用量统计</h2>
+            <p class="page-subtitle">Claude Code 运行数据总览</p>
+          </div>
+          <button class="btn-refresh" onclick="refreshStats()">
+            <svg class="refresh-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path d="M14 8A6 6 0 1 1 8 2c1.66 0 3.14.69 4.22 1.78L14 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M14 2v4h-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <span>刷新</span>
+          </button>
+        </header>
+
+        <div class="stats-grid">
+          <div class="stat-card" data-accent="purple">
+            <div class="stat-card-bg"></div>
+            <div class="stat-icon-wrap">
+              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
+                <path d="M2 16l3-3 4 4 5-8 6 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle cx="5" cy="4" r="2" stroke="currentColor" stroke-width="1.5"/>
+                <circle cx="17" cy="6" r="2" stroke="currentColor" stroke-width="1.5"/>
+              </svg>
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">总 Token 数</div>
+              <div class="stat-value" id="totalTokens">—</div>
+            </div>
+            <div class="stat-glow"></div>
+          </div>
+
+          <div class="stat-card" data-accent="blue">
+            <div class="stat-card-bg"></div>
+            <div class="stat-icon-wrap">
+              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
+                <circle cx="11" cy="11" r="9" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M11 6v5.5l3.5 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                <path d="M7 2l1 2M15 2l-1 2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+              </svg>
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">估算成本</div>
+              <div class="stat-value" id="totalCost">—</div>
+            </div>
+            <div class="stat-glow"></div>
+          </div>
+
+          <div class="stat-card" data-accent="teal">
+            <div class="stat-card-bg"></div>
+            <div class="stat-icon-wrap">
+              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
+                <rect x="3" y="3" width="16" height="16" rx="3" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M8 8h6M8 11h6M8 14h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">会话数</div>
+              <div class="stat-value" id="sessionCount">—</div>
+            </div>
+            <div class="stat-glow"></div>
+          </div>
+
+          <div class="stat-card" data-accent="amber">
+            <div class="stat-card-bg"></div>
+            <div class="stat-icon-wrap">
+              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
+                <circle cx="11" cy="11" r="9" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M11 6v5l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">活跃时间</div>
+              <div class="stat-value" id="activeTime">—</div>
+            </div>
+            <div class="stat-glow"></div>
+          </div>
+        </div>
+
+        <div class="stats-secondary">
+          <div class="stat-pill">
+            <div class="stat-pill-icon">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M4 2v12M8 4v10M12 6v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>
+            </div>
+            <div class="stat-pill-content">
+              <span class="stat-pill-label">代码行数</span>
+              <span class="stat-pill-value" id="linesOfCode">—</span>
+            </div>
+          </div>
+          <div class="stat-pill">
+            <div class="stat-pill-icon">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <circle cx="8" cy="8" r="3" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M8 1v2M8 13v2M1 8h2M13 8h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+              </svg>
+            </div>
+            <div class="stat-pill-content">
+              <span class="stat-pill-label">提交数</span>
+              <span class="stat-pill-value" id="commitCount">—</span>
+            </div>
+          </div>
+          <div class="stat-pill">
+            <div class="stat-pill-icon">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d="M5 1v4a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                <path d="M3 9l5 6 5-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <div class="stat-pill-content">
+              <span class="stat-pill-label">PR 数</span>
+              <span class="stat-pill-value" id="prCount">—</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="section-header">
+            <h3>最近会话</h3>
+            <span class="section-badge">实时</span>
+          </div>
+          <div class="table-container">
+            <table class="data-table">
+              <thead>
+                <tr>
+                  <th>项目</th>
+                  <th>模型</th>
+                  <th>Token 数</th>
+                  <th>时间</th>
+                </tr>
+              </thead>
+              <tbody id="sessionsTable">
+                <tr>
+                  <td colspan="4" class="loading">
+                    <div class="loading-spinner"></div>
+                    <span>加载中...</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <!-- Config Page -->
+      <div id="page-config" class="page">
+        <header class="page-header">
+          <div class="page-title-group">
+            <h2>Claude Code 配置</h2>
+            <p class="page-subtitle">管理模型、界面与运行设置</p>
+          </div>
+          <button class="btn-save" onclick="saveConfig()">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path d="M12.67 2H3.33C2.6 2 2 2.6 2 3.33v9.34C2 13.4 2.6 14 3.33 14h9.34c.73 0 1.33-.6 1.33-1.33V3.33C14 2.6 13.4 2 12.67 2Z" stroke="currentColor" stroke-width="1.3"/>
+              <path d="M5 2v4h6V2" stroke="currentColor" stroke-width="1.3"/>
+              <rect x="5" y="9" width="6" height="3" rx="0.5" stroke="currentColor" stroke-width="1.3"/>
+            </svg>
+            <span>保存配置</span>
+          </button>
+        </header>
+
+        <div class="config-grid">
+          <div class="config-section" data-icon="model">
+            <div class="config-section-header">
+              <div class="config-section-icon">
+                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+                  <path d="M9 1L1 5v8l8 4 8-4V5L9 1z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
+                  <path d="M1 5l8 4 8-4M9 9v8" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
+                </svg>
+              </div>
+              <h3>模型设置</h3>
+            </div>
+            <div class="form-group">
+              <label for="configModel">模型</label>
+              <div class="input-wrap">
+                <input type="text" id="configModel" class="input" placeholder="claude-sonnet-4-5-20250929">
+              </div>
+            </div>
+          </div>
+
+          <div class="config-section" data-icon="team">
+            <div class="config-section-header">
+              <div class="config-section-icon">
+                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+                  <circle cx="7" cy="6" r="3" stroke="currentColor" stroke-width="1.3"/>
+                  <circle cx="13" cy="7" r="2.5" stroke="currentColor" stroke-width="1.3"/>
+                  <path d="M1 16c0-3.3 2.7-6 6-6 1.3 0 2.5.4 3.5 1.1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+                  <path d="M10 16c0-2.5 1.3-4 3-4s3 1.5 3 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+                </svg>
+              </div>
+              <h3>Agent Teams</h3>
+            </div>
+            <div class="form-group">
+              <label for="configTeammateMode">队友显示模式</label>
+              <div class="select-wrap">
+                <select id="configTeammateMode" class="select">
+                  <option value="auto">auto</option>
+                  <option value="in-process">in-process</option>
+                  <option value="tmux">tmux</option>
+                </select>
+                <svg class="select-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                  <path d="M3 5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <div class="config-section" data-icon="interface">
+            <div class="config-section-header">
+              <div class="config-section-icon">
+                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+                  <rect x="1" y="3" width="16" height="12" rx="2" stroke="currentColor" stroke-width="1.3"/>
+                  <path d="M1 7h16" stroke="currentColor" stroke-width="1.3"/>
+                  <circle cx="4" cy="5" r="0.8" fill="currentColor"/>
+                  <circle cx="7" cy="5" r="0.8" fill="currentColor"/>
+                  <circle cx="10" cy="5" r="0.8" fill="currentColor"/>
+                </svg>
+              </div>
+              <h3>界面设置</h3>
+            </div>
+            <div class="form-group">
+              <label for="configLanguage">语言</label>
+              <div class="select-wrap">
+                <select id="configLanguage" class="select">
+                  <option value="english">English</option>
+                  <option value="japanese">Japanese</option>
+                  <option value="chinese">Chinese</option>
+                </select>
+                <svg class="select-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                  <path d="M3 5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="configOutputStyle">输出风格</label>
+              <div class="select-wrap">
+                <select id="configOutputStyle" class="select">
+                  <option value="Concise">Concise</option>
+                  <option value="Explanatory">Explanatory</option>
+                </select>
+                <svg class="select-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                  <path d="M3 5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <div class="config-section" data-icon="other">
+            <div class="config-section-header">
+              <div class="config-section-icon">
+                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+                  <circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="1.3"/>
+                  <path d="M6 9l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+              <h3>其他设置</h3>
+            </div>
+            <div class="form-group">
+              <label class="toggle-label">
+                <span class="toggle-wrap">
+                  <input type="checkbox" id="configShowTurnDuration" class="toggle-input">
+                  <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                </span>
+                <span class="toggle-text">显示轮次耗时</span>
+              </label>
+            </div>
+            <div class="form-group">
+              <label class="toggle-label">
+                <span class="toggle-wrap">
+                  <input type="checkbox" id="configSpinnerTipsEnabled" class="toggle-input">
+                  <span class="toggle-track"><span class="toggle-thumb"></span></span>
+                </span>
+                <span class="toggle-text">启用加载提示</span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- Toast notification -->
+  <div id="toast" class="toast"></div>
+
+  <script src="/app.js"></script>
+</body>
+</html>