kiro_proxy/web/html.py

"""Web UI - 组件化单文件结构"""

# ==================== CSS 样式 ====================
CSS_BASE = '''
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0a0a0a;
  --card: #1a1a1a;
  --border: #333;
  --text: #fafafa;
  --muted: #a3a3a3;
  --accent: #3b82f6;
  --success: #22c55e;
  --error: #ef4444;
  --warn: #f59e0b;
  --info: #3b82f6;
  --primary: #6366f1;
  --secondary: #8b5cf6;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
'''

CSS_LAYOUT = '''
/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
h1 {
  font-size: 1.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
h1 img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.status {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.status-dot.ok {
  background: var(--success);
  color: var(--success);
}
.status-dot.err {
  background: var(--error);
  color: var(--error);
}

/* Navigation Tabs */
.tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 0.5rem;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.tab {
  padding: 0.75rem 1.5rem;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 12px;
  position: relative;
}
.tab:hover {
  color: var(--text);
  background: rgba(255,255,255,0.05);
}
.tab.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

/* Panels */
.panel {
  display: none;
  flex: 1;
}
.panel.active {
  display: block;
}

/* Footer */
.footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 2rem;
  padding: 1rem;
  border-top: 1px solid var(--border);
}
'''

CSS_COMPONENTS = '''
/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}
.card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
}

/* Stats Grid - OXO Style */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-item {
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.1));
  border-radius: 16px;
  border: 1px solid rgba(59,130,246,0.2);
  transition: all 0.3s ease;
}
.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(59,130,246,0.2);
}
.stat-value {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}
.stat-label {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 500;
}

/* Compact Stats Grid for Monitor Panel */
.stats-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
}
.stats-grid-compact .stat-item {
  text-align: center;
  padding: 0.5rem;
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.08));
  border-radius: 8px;
  border: 1px solid rgba(59,130,246,0.15);
  transition: all 0.2s ease;
}
.stats-grid-compact .stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}
.stats-grid-compact .stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
  line-height: 1.2;
}
.stats-grid-compact .stat-label {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.2;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.badge.success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}
.badge.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}
.badge.warn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  box-shadow: 0 2px 8px rgba(245,158,11,0.3);
}
.badge.info {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}

/* Circular Progress */
.progress-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) 0deg, var(--secondary) 180deg, var(--border) 180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.progress-circle::before {
  content: '';
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--card);
  position: absolute;
}
.progress-text {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 0.875rem;
}
'''

CSS_FORMS = '''
/* Buttons - OXO Style */
button {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59,130,246,0.4);
}
button:active {
  transform: translateY(0);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
button.secondary {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
button.secondary:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--primary);
}
button.small {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  border-radius: 8px;
}
button.circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
button.large {
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: 16px;
}

/* Inputs */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 0.875rem;
  transition: all 0.3s ease;
  width: 100%;
}
input:hover, textarea:hover {
  border-color: var(--primary);
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
input::placeholder, textarea::placeholder {
  color: var(--muted);
}

/* Select */
select {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: 0.875rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a3a3a3' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
  transition: all 0.3s ease;
}
select:hover {
  border-color: var(--primary);
}
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
th, td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

/* Compact table styles for monitor panel */
#monitor table th,
#monitor table td {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.3;
}
#monitor table tbody tr {
  height: 32px;
}
#monitor table tbody tr:hover {
  background: rgba(59,130,246,0.05);
}
th {
  font-weight: 600;
  color: var(--muted);
  background: rgba(59,130,246,0.05);
}
tr:hover {
  background: rgba(255,255,255,0.02);
}

/* Code blocks */
pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  overflow-x: auto;
  font-size: 0.8rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
code {
  background: rgba(59,130,246,0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.875em;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
'''

CSS_ACCOUNTS = '''
.account-card { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; background: var(--card); }
.account-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.account-name { font-weight: 500; display: flex; align-items: center; gap: 0.5rem; }
.account-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; font-size: 0.8rem; color: var(--muted); }
.account-meta-item { display: flex; justify-content: space-between; padding: 0.25rem 0; }
.account-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
'''

CSS_API = '''
.endpoint { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.method { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.method.get { background: #dcfce7; color: #166534; }
.method.post { background: #fef3c7; color: #92400e; }
@media (prefers-color-scheme: dark) {
  .method.get { background: #14532d; color: #86efac; }
  .method.post { background: #78350f; color: #fde68a; }
}
.copy-btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; background: var(--card); border: 1px solid var(--border); color: var(--text); }
'''

CSS_DOCS = '''
.docs-container { display: flex; gap: 1.5rem; min-height: 500px; }
.docs-nav { width: 200px; flex-shrink: 0; }
.docs-nav-item { display: block; padding: 0.5rem 0.75rem; margin-bottom: 0.25rem; border-radius: 6px; cursor: pointer; font-size: 0.875rem; color: var(--text); text-decoration: none; transition: background 0.2s; }
.docs-nav-item:hover { background: var(--bg); }
.docs-nav-item.active { background: var(--accent); color: var(--bg); }
.docs-content { flex: 1; min-width: 0; }
.docs-content h1 { font-size: 1.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.docs-content h2 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; color: var(--text); }
.docs-content h3 { font-size: 1rem; margin: 1rem 0 0.5rem; color: var(--text); }
.docs-content h4 { font-size: 0.9rem; margin: 0.75rem 0 0.5rem; color: var(--muted); }
.docs-content p { margin: 0.5rem 0; }
.docs-content ul, .docs-content ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.docs-content li { margin: 0.25rem 0; }
.docs-content code { background: var(--bg); padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; }
.docs-content pre { margin: 0.75rem 0; }
.docs-content pre code { background: none; padding: 0; }
.docs-content table { margin: 0.75rem 0; }
.docs-content blockquote { margin: 0.75rem 0; padding: 0.5rem 1rem; border-left: 3px solid var(--border); color: var(--muted); background: var(--bg); border-radius: 0 6px 6px 0; }
.docs-content hr { margin: 1.5rem 0; border: none; border-top: 1px solid var(--border); }
.docs-content a { color: var(--info); text-decoration: none; }
.docs-content a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .docs-container { flex-direction: column; }
  .docs-nav { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .docs-nav-item { margin-bottom: 0; }
}
'''

# ==================== UI 组件库样式 ====================
CSS_UI_COMPONENTS = '''
/* Modal 模态框 */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.2s; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal { background: var(--card); border-radius: 12px; max-width: 500px; width: 90%; max-height: 90vh; overflow: hidden; transform: scale(0.9); transition: transform 0.2s; }
.modal-overlay.active .modal { transform: scale(1); }
.modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 1.1rem; font-weight: 600; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--muted); padding: 0; line-height: 1; }
.modal-body { padding: 1.5rem; overflow-y: auto; max-height: 60vh; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 0.5rem; }
.modal.danger .modal-header { background: #fee2e2; }
.modal.warning .modal-header { background: #fef3c7; }
@media (prefers-color-scheme: dark) {
  .modal.danger .modal-header { background: #7f1d1d; }
  .modal.warning .modal-header { background: #78350f; }
}

/* Toast 通知 */
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 1100; display: flex; flex-direction: column; gap: 0.5rem; }
.toast { padding: 0.75rem 1rem; border-radius: 8px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 0.5rem; animation: slideIn 0.3s ease; min-width: 250px; }
.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--error); }
.toast.warning { border-left: 4px solid var(--warn); }
.toast.info { border-left: 4px solid var(--info); }
.toast-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1.2rem; padding: 0; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Select 下拉选择 */
.custom-select { position: relative; }
.custom-select-trigger { padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.custom-select-trigger::after { content: "▼"; font-size: 0.7rem; color: var(--muted); }
.custom-select-options { position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: 6px; margin-top: 4px; max-height: 200px; overflow-y: auto; z-index: 100; display: none; }
.custom-select.open .custom-select-options { display: block; }
.custom-select-option { padding: 0.5rem 1rem; cursor: pointer; }
.custom-select-option:hover { background: var(--bg); }
.custom-select-option.selected { background: var(--accent); color: var(--bg); }

/* ProgressBar 进度条 */
.progress-bar { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.progress-bar.large { height: 12px; }
.progress-bar.small { height: 4px; }
.progress-fill { height: 100%; background: var(--info); transition: width 0.3s; }
.progress-fill.success { background: var(--success); }
.progress-fill.warning { background: var(--warn); }
.progress-fill.error { background: var(--error); }
.progress-label { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }

/* Dropdown 下拉菜单 */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; top: 100%; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: 8px; min-width: 120px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100; display: none; margin-top: 4px; overflow: hidden; }
.dropdown.open .dropdown-menu { display: block; }
.dropdown-item { padding: 0.5rem 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; white-space: nowrap; }
.dropdown-item:hover { background: var(--bg); }
.dropdown-item.danger { color: var(--error); }
.dropdown-divider { height: 1px; background: var(--border); margin: 0.25rem 0; }

/* 账号卡片增强 */
.account-card-enhanced { border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; background: var(--card); }
.account-card-enhanced.priority { border-color: var(--info); border-width: 2px; }
.account-card-enhanced.active { box-shadow: 0 0 0 2px var(--success); }
.account-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.account-card-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.account-card-badges { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.account-quota-section { margin: 1rem 0; }
.quota-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.875rem; }
.quota-detail { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; flex-wrap: wrap; }
.quota-reset-info { display: flex; gap: 1rem; flex-wrap: wrap; }
.quota-reset-info span { display: inline-flex; align-items: center; gap: 0.25rem; }
.account-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 1rem 0; }
.account-stat { text-align: center; padding: 0.5rem; background: var(--bg); border-radius: 6px; }
.account-stat-value { font-weight: 600; font-size: 0.9rem; }
.account-stat-label { font-size: 0.7rem; color: var(--muted); }

/* 账号网格布局 - 动态自适应 */
.accounts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.account-card-compact { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.875rem; transition: all 0.2s; }
.account-card-compact:hover { border-color: var(--accent); }
.account-card-compact.priority { border-color: var(--info); border-width: 2px; }
.account-card-compact.low-balance { border-color: var(--warn); }
.account-card-compact.exhausted { border-color: var(--error); border-width: 2px; }
.account-card-compact.suspended { border-color: var(--error); border-width: 2px; background: rgba(239, 68, 68, 0.1); }
.account-card-compact.unavailable { opacity: 0.6; }
.account-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.account-card-info { flex: 1; min-width: 0; }
.account-card-name { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.25rem; }
.account-card-email { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-card-status { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.account-card-quota { margin: 0.75rem 0; }
.account-card-quota-bar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.account-card-quota-fill { height: 100%; transition: width 0.3s; }
.account-card-quota-text { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); margin-top: 0.25rem; }
.account-card-stats { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--muted); margin-bottom: 0.75rem; }
.account-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.account-card-actions button { flex: 1; min-width: 60px; }

/* 紧凑汇总面板 */
.summary-compact { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; padding: 0.75rem; background: var(--bg); border-radius: 8px; }
.summary-compact-item { display: flex; align-items: center; gap: 0.5rem; }
.summary-compact-value { font-weight: 600; font-size: 1.1rem; }
.summary-compact-label { font-size: 0.75rem; color: var(--muted); }
.summary-compact-divider { width: 1px; height: 24px; background: var(--border); }
.summary-quota-bar { flex: 1; min-width: 200px; }

/* 全局进度条 - 批量刷新操作进度显示 */
.global-progress-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: translateY(-100%); transition: transform 0.3s ease; }
.global-progress-bar.active { transform: translateY(0); }
.global-progress-bar-inner { max-width: 1400px; margin: 0 auto; padding: 0.75rem 1rem; }
.global-progress-bar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.global-progress-bar-title { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
.global-progress-bar-title .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
.global-progress-bar-stats { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--muted); }
.global-progress-bar-stats span { display: flex; align-items: center; gap: 0.25rem; }
.global-progress-bar-stats .success { color: var(--success); }
.global-progress-bar-stats .error { color: var(--error); }
.global-progress-bar-track { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
.global-progress-bar-fill { height: 100%; background: var(--info); transition: width 0.3s ease; border-radius: 3px; }
.global-progress-bar-fill.complete { background: var(--success); }
.global-progress-bar-current { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.global-progress-bar-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); padding: 0; margin-left: 0.5rem; }
.global-progress-bar-close:hover { color: var(--text); }

/* 汇总面板 */
.summary-panel { background: linear-gradient(135deg, var(--card) 0%, var(--bg) 100%); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.summary-item { text-align: center; }
.summary-value { font-size: 1.75rem; font-weight: 700; }
.summary-label { font-size: 0.75rem; color: var(--muted); }
.summary-item.success .summary-value { color: var(--success); }
.summary-item.warning .summary-value { color: var(--warn); }
.summary-item.error .summary-value { color: var(--error); }
.summary-quota { margin: 1rem 0; }
.summary-info { display: flex; gap: 2rem; flex-wrap: wrap; font-size: 0.875rem; color: var(--muted); }
.summary-actions { margin-top: 1rem; display: flex; gap: 0.5rem; }
'''

CSS_AUTH = '''
/* 登录模态框 */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
}
.auth-modal h2 {
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-modal input {
  margin: 1rem 0;
}
.auth-modal .auth-error {
  color: var(--error);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
'''

CSS_STYLES = CSS_BASE + CSS_LAYOUT + CSS_COMPONENTS + CSS_FORMS + CSS_ACCOUNTS + CSS_API + CSS_DOCS + CSS_UI_COMPONENTS + CSS_AUTH


# ==================== HTML 模板 ====================
# 登录模态框
HTML_AUTH_MODAL = '''
<div class="auth-overlay" id="authOverlay" style="display:none">
  <div class="auth-modal">
    <h2>🔐 管理员登录</h2>
    <p style="color:var(--muted);margin-bottom:1rem">请输入管理员密码访问管理面板</p>
    <input type="password" id="authPassword" placeholder="输入密码" onkeydown="if(event.key==='Enter')adminLogin()">
    <button onclick="adminLogin()" style="width:100%">登录</button>
    <div class="auth-error" id="authError"></div>
  </div>
</div>
'''

# 全局进度条容器 - 显示在页面顶部
HTML_GLOBAL_PROGRESS = '''
<!-- 全局进度条 - 批量刷新操作进度显示 -->
<div class="global-progress-bar" id="globalProgressBar">
  <div class="global-progress-bar-inner">
    <div class="global-progress-bar-header">
      <div class="global-progress-bar-title">
        <span class="spinner"></span>
        <span id="globalProgressTitle">正在刷新额度...</span>
      </div>
      <div class="global-progress-bar-stats">
        <span>完成: <strong id="globalProgressCompleted">0</strong>/<strong id="globalProgressTotal">0</strong></span>
        <span class="success">成功: <strong id="globalProgressSuccess">0</strong></span>
        <span class="error">失败: <strong id="globalProgressFailed">0</strong></span>
        <button class="global-progress-bar-close" id="globalProgressClose" onclick="GlobalProgressBar.hide()" style="display:none">&times;</button>
      </div>
    </div>
    <div class="global-progress-bar-track">
      <div class="global-progress-bar-fill" id="globalProgressFill" style="width:0%"></div>
    </div>
    <div class="global-progress-bar-current" id="globalProgressCurrent">准备中...</div>
  </div>
</div>
'''

HTML_HEADER = '''
<header>
  <h1><img src="/assets/icon.svg" alt="Kiro">Kiro API Proxy</h1>
  <div class="status">
    <span class="status-dot" id="statusDot"></span>
    <span id="statusText">检查中...</span>
    <span id="uptime"></span>
  </div>
</header>

<div class="tabs">
  <div class="tab" data-tab="help">📚 帮助</div>
  <div class="tab" data-tab="monitor">📊 监控</div>
  <div class="tab active" data-tab="accounts">👥 账号</div>
  <div class="tab" data-tab="api">🔌 API</div>
  <div class="tab" data-tab="settings">⚙️ 设置</div>
</div>
'''

HTML_HELP = '''
<div class="panel" id="help">
  <div class="card" style="padding:1rem">
    <div class="docs-container">
      <nav class="docs-nav" id="docsNav"></nav>
      <div class="docs-content" id="docsContent">
        <p style="color:var(--muted)">加载中...</p>
      </div>
    </div>
  </div>
</div>
'''

HTML_FLOWS = '''
<div class="panel" id="flows">
  <div class="card">
    <h3>Flow 统计 <button class="secondary small" onclick="loadFlowStats()">刷新</button></h3>
    <div class="stats-grid" id="flowStatsGrid"></div>
  </div>
  <div class="card">
    <h3>流量监控</h3>
    <div style="display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap">
      <select id="flowProtocol" onchange="loadFlows()">
        <option value="">全部协议</option>
        <option value="anthropic">Anthropic</option>
        <option value="openai">OpenAI</option>
        <option value="gemini">Gemini</option>
      </select>
      <select id="flowState" onchange="loadFlows()">
        <option value="">全部状态</option>
        <option value="completed">完成</option>
        <option value="error">错误</option>
        <option value="streaming">流式中</option>
        <option value="pending">等待中</option>
      </select>
      <input type="text" id="flowSearch" placeholder="搜索内容..." style="flex:1;min-width:150px" onkeydown="if(event.key==='Enter')loadFlows()">
      <button class="secondary" onclick="loadFlows()">搜索</button>
      <button class="secondary" onclick="exportFlows()">导出</button>
    </div>
    <div id="flowList"></div>
  </div>
  <div class="card" id="flowDetail" style="display:none">
    <h3>Flow 详情 <button class="secondary small" onclick="$('#flowDetail').style.display='none'">关闭</button></h3>
    <div id="flowDetailContent"></div>
  </div>
</div>
'''

HTML_MONITOR = '''
<div class="panel" id="monitor">
  <!-- 紧凑的顶部统计面板 -->
  <div class="card" style="padding: 0.75rem; margin-bottom: 0.75rem;">
    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem;">
      <!-- 服务状态 -->
      <div>
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
          <h4 style="font-size: 0.9rem; margin: 0;">🚀 服务状态</h4>
          <button class="secondary" style="padding: 0.25rem 0.5rem; font-size: 0.7rem;" onclick="loadStats()">刷新</button>
        </div>
        <div class="stats-grid-compact" id="statsGrid"></div>
      </div>

      <!-- 流量统计 -->
      <div>
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
          <h4 style="font-size: 0.9rem; margin: 0;">📈 流量统计</h4>
          <button class="secondary" style="padding: 0.25rem 0.5rem; font-size: 0.7rem;" onclick="loadFlowStats()">刷新</button>
        </div>
        <div class="stats-grid-compact" id="flowStatsGrid"></div>
      </div>

      <!-- 配额状态 -->
      <div>
        <h4 style="font-size: 0.9rem; margin: 0 0 0.5rem 0;">⚡ 配额状态</h4>
        <div id="quotaStatus" style="font-size: 0.8rem;"></div>
      </div>
    </div>

    <!-- 速度测试 - 移到底部一行 -->
    <div style="display: flex; align-items: center; justify-content: space-between; padding-top: 0.5rem; border-top: 1px solid var(--border);">
      <div style="display: flex; align-items: center; gap: 0.75rem;">
        <span style="font-size: 0.9rem; font-weight: 500;">🎯 速度测试</span>
        <button class="circle" onclick="runSpeedtest()" id="speedtestBtn" style="width: 28px; height: 28px; font-size: 0.8rem;">▶</button>
        <span id="speedtestResult" style="color: var(--muted); font-size: 0.8rem;">点击开始测试</span>
      </div>
    </div>
  </div>

  <!-- 请求监控 - 紧凑布局 -->
  <div class="card" style="padding: 0.75rem; margin-bottom: 0.75rem;">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem;">
      <h4 style="font-size: 0.9rem; margin: 0;">📋 请求监控</h4>
      <div style="display: flex; gap: 0.5rem; align-items: center;">
        <select id="flowProtocol" onchange="loadFlows()" style="padding: 0.25rem; font-size: 0.8rem;">
          <option value="">全部协议</option>
          <option value="anthropic">Anthropic</option>
          <option value="openai">OpenAI</option>
          <option value="gemini">Gemini</option>
        </select>
        <select id="flowState" onchange="loadFlows()" style="padding: 0.25rem; font-size: 0.8rem;">
          <option value="">全部状态</option>
          <option value="completed">完成</option>
          <option value="error">错误</option>
          <option value="streaming">流式中</option>
          <option value="pending">等待中</option>
        </select>
        <input type="text" id="flowSearch" placeholder="搜索..." style="width: 120px; padding: 0.25rem; font-size: 0.8rem;" onkeydown="if(event.key==='Enter')loadFlows()">
        <button class="secondary" style="padding: 0.25rem 0.5rem; font-size: 0.7rem;" onclick="loadFlows()">搜索</button>
        <button class="secondary" style="padding: 0.25rem 0.5rem; font-size: 0.7rem;" onclick="exportFlows()">导出</button>
      </div>
    </div>
    <div id="flowList" style="max-height: 200px; overflow-y: auto;"></div>
  </div>

  <!-- 请求日志 - 紧凑表格 -->
  <div class="card" style="padding: 0.75rem; margin-bottom: 0.75rem;">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem;">
      <h4 style="font-size: 0.9rem; margin: 0;">📝 请求日志</h4>
      <button class="secondary" style="padding: 0.25rem 0.5rem; font-size: 0.7rem;" onclick="loadLogs()">刷新</button>
    </div>
    <div style="overflow-x: auto; max-height: 300px; overflow-y: auto;">
      <table style="font-size: 0.75rem;">
        <thead>
          <tr style="height: 32px;">
            <th style="padding: 0.25rem 0.5rem;">时间</th>
            <th style="padding: 0.25rem 0.5rem;">路径</th>
            <th style="padding: 0.25rem 0.5rem;">模型</th>
            <th style="padding: 0.25rem 0.5rem;">账号</th>
            <th style="padding: 0.25rem 0.5rem;">状态</th>
            <th style="padding: 0.25rem 0.5rem;">耗时</th>
          </tr>
        </thead>
        <tbody id="logTable"></tbody>
      </table>
    </div>
  </div>

  <!-- Flow 详情弹窗 -->
  <div class="card" id="flowDetail" style="display: none; padding: 0.75rem;">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem;">
      <h4 style="font-size: 0.9rem; margin: 0;">🔍 Flow 详情</h4>
      <button class="secondary" style="padding: 0.25rem 0.5rem; font-size: 0.7rem;" onclick="$('#flowDetail').style.display='none'">关闭</button>
    </div>
    <div id="flowDetailContent" style="font-size: 0.8rem;"></div>
  </div>
</div>
'''


HTML_ACCOUNTS = '''
<div class="panel active" id="accounts">
  <!-- 紧凑的工具栏 + 汇总面板 -->
  <div class="card" style="padding:1rem">
    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;margin-bottom:1rem">
      <h3 style="margin:0;font-size:1.1rem">账号管理</h3>
      <div style="display:flex;gap:0.5rem;flex-wrap:wrap">
        <button class="small" onclick="showLoginOptions()">+ 添加</button>
        <button class="secondary small" onclick="scanTokens()">扫描</button>
        <button class="secondary small" onclick="showImportExportMenu(this)">导入/导出 ▼</button>
        <button class="secondary small" onclick="refreshAllQuotas()">刷新额度</button>
      </div>
    </div>
    <!-- 内嵌汇总统计 -->
    <div id="accountsSummaryCompact"></div>
  </div>
  
  <!-- 隐藏的弹出面板 - 移到账号列表上方 -->
  <div class="card" id="loginOptions" style="display:none">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
      <h3 style="margin:0">添加账号</h3>
      <button class="secondary small" onclick="$('#loginOptions').style.display='none'">✕</button>
    </div>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem">
      <!-- 在线登录 -->
      <div style="border:1px solid var(--border);border-radius:8px;padding:1rem">
        <h4 style="margin-bottom:0.75rem;font-size:0.9rem">🌐 在线登录</h4>
        <div style="display:flex;flex-direction:column;gap:0.5rem">
          <button class="secondary small" onclick="startSocialLogin('google')" style="justify-content:flex-start;gap:0.5rem">
            <svg width="16" height="16" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
            Google
          </button>
          <button class="secondary small" onclick="startSocialLogin('github')" style="justify-content:flex-start;gap:0.5rem">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 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.23.957-.266 1.983-.399 3.003-.404 1.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.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
            GitHub
          </button>
          <button class="secondary small" onclick="startAwsLogin()" style="justify-content:flex-start;gap:0.5rem">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="#FF9900"><path d="M21.698 16.207c-2.626 1.94-6.442 2.969-9.722 2.969-4.598 0-8.74-1.7-11.87-4.526-.247-.223-.024-.527.27-.351 3.384 1.963 7.559 3.153 11.877 3.153 2.914 0 6.114-.607 9.06-1.852.439-.2.814.287.385.607z"/></svg>
            AWS Builder ID
          </button>
        </div>
      </div>
      <!-- 其他方式 -->
      <div style="border:1px solid var(--border);border-radius:8px;padding:1rem">
        <h4 style="margin-bottom:0.75rem;font-size:0.9rem">📋 其他方式</h4>
        <div style="display:flex;flex-direction:column;gap:0.5rem">
          <button class="secondary small" onclick="showManualAdd()">✏️ 手动添加 Token</button>
        </div>
      </div>
    </div>
  </div>
  
  <div class="card" id="loginPanel" style="display:none">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
      <h3 style="margin:0">在线登录</h3>
      <button class="secondary small" onclick="cancelKiroLogin()">✕</button>
    </div>
    <div id="loginContent"></div>
  </div>
  

  
  <div class="card" id="manualAddPanel" style="display:none">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
      <h3 style="margin:0">手动添加 Token</h3>
      <button class="secondary small" onclick="$('#manualAddPanel').style.display='none'">✕</button>
    </div>
    <div style="display:grid;gap:0.75rem">
      <div>
        <label style="display:block;font-size:0.8rem;color:var(--muted);margin-bottom:0.25rem">账号名称（可选，留空自动获取邮箱）</label>
        <input type="text" id="manualName" placeholder="留空自动获取邮箱作为名称" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)">
      </div>
      <div>
        <label style="display:block;font-size:0.8rem;color:var(--muted);margin-bottom:0.25rem">认证方式</label>
        <select id="manualAuthMethod" onchange="toggleManualFields()" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)">
          <option value="social">Social (Google/GitHub)</option>
          <option value="idc">IDC (AWS Builder ID)</option>
        </select>
      </div>
      <div id="manualProviderField">
        <label style="display:block;font-size:0.8rem;color:var(--muted);margin-bottom:0.25rem">登录提供商</label>
        <select id="manualProvider" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)">
          <option value="">未知</option>
          <option value="Google">Google</option>
          <option value="Github">GitHub</option>
        </select>
      </div>
      <div>
        <label style="display:block;font-size:0.8rem;color:var(--muted);margin-bottom:0.25rem">Refresh Token <span style="color:var(--error)">*必填</span></label>
        <textarea id="manualRefreshToken" placeholder="粘贴 refreshToken（必填，用于获取 Access Token 和去重）..." style="width:100%;height:60px;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font-family:monospace;font-size:0.75rem"></textarea>
      </div>
      <div>
        <label style="display:block;font-size:0.8rem;color:var(--muted);margin-bottom:0.25rem">Access Token（可选，留空自动通过 Refresh Token 获取）</label>
        <textarea id="manualAccessToken" placeholder="粘贴 accessToken（可选）..." style="width:100%;height:60px;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font-family:monospace;font-size:0.75rem"></textarea>
      </div>
      <div id="manualIdcFields" style="display:none">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:0.5rem">
          <div>
            <label style="display:block;font-size:0.8rem;color:var(--muted);margin-bottom:0.25rem">Client ID</label>
            <input type="text" id="manualClientId" placeholder="IDC 认证需要" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font-family:monospace;font-size:0.75rem">
          </div>
          <div>
            <label style="display:block;font-size:0.8rem;color:var(--muted);margin-bottom:0.25rem">Client Secret</label>
            <input type="text" id="manualClientSecret" placeholder="IDC 认证需要" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font-family:monospace;font-size:0.75rem">
          </div>
        </div>
        <div>
          <label style="display:block;font-size:0.8rem;color:var(--muted);margin-bottom:0.25rem">Region</label>
          <input type="text" id="manualRegion" value="us-east-1" placeholder="默认 us-east-1" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)">
        </div>
      </div>
      <button onclick="submitManualToken()">添加账号</button>
      <p style="font-size:0.75rem;color:var(--muted);margin:0">提示：根据 Refresh Token 自动去重，相同 Refresh Token 的账号不会重复添加</p>
    </div>
  </div>
  
  <div class="card" id="scanResults" style="display:none">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
      <h3 style="margin:0">扫描结果</h3>
      <button class="secondary small" onclick="$('#scanResults').style.display='none'">✕</button>
    </div>
    <div id="scanList"></div>
  </div>
  
  <!-- 账号网格列表 - 移到面板下方 -->
  <div id="accountsGrid" class="accounts-grid"></div>
</div>
'''

HTML_LOGS = '''
<div class="panel" id="logs">
  <div class="card">
    <h3>请求日志 <button class="secondary small" onclick="loadLogs()">刷新</button></h3>
    <table>
      <thead><tr><th>时间</th><th>路径</th><th>模型</th><th>账号</th><th>状态</th><th>耗时</th></tr></thead>
      <tbody id="logTable"></tbody>
    </table>
  </div>
</div>
'''

HTML_API = '''
<div class="panel" id="api">
  <div class="card">
    <h3>API 端点</h3>
    <p style="color:var(--muted);font-size:0.875rem;margin-bottom:1rem">支持 OpenAI、Anthropic、Gemini 三种协议</p>
    <h4 style="color:var(--muted);margin-bottom:0.5rem">OpenAI 协议</h4>
    <div class="endpoint"><span class="method post">POST</span><code>/v1/chat/completions</code></div>
    <div class="endpoint"><span class="method get">GET</span><code>/v1/models</code></div>
    <h4 style="color:var(--muted);margin-top:1rem;margin-bottom:0.5rem">Anthropic 协议</h4>
    <div class="endpoint"><span class="method post">POST</span><code>/v1/messages</code></div>
    <div class="endpoint"><span class="method post">POST</span><code>/v1/messages/count_tokens</code></div>
    <h4 style="color:var(--muted);margin-top:1rem;margin-bottom:0.5rem">Gemini 协议</h4>
    <div class="endpoint"><span class="method post">POST</span><code>/v1/models/{model}:generateContent</code></div>
    <h4 style="margin-top:1rem;color:var(--muted)">Base URL</h4>
    <pre><code id="baseUrl"></code></pre>
    <button class="copy-btn" onclick="copy(location.origin)" style="margin-top:0.5rem">复制</button>
  </div>
  <div class="card">
    <h3>配置示例</h3>
    <h4 style="color:var(--muted);margin-bottom:0.5rem">Claude Code</h4>
    <pre><code>Base URL: <span class="pyUrl"></span>
API Key: any
模型: claude-sonnet-4</code></pre>
    <h4 style="color:var(--muted);margin-top:1rem;margin-bottom:0.5rem">Codex CLI</h4>
    <pre><code>Endpoint: <span class="pyUrl"></span>/v1
API Key: any
模型: gpt-4o</code></pre>
  </div>
  <div class="card">
    <h3>Claude Code 终端配置</h3>
    <p style="color:var(--muted);font-size:0.875rem;margin-bottom:1rem">Claude Code 终端版需要配置 <code>~/.claude/settings.json</code> 才能跳过登录使用代理</p>
    
    <h4 style="color:var(--muted);margin-bottom:0.5rem">临时生效（当前终端）</h4>
    <pre id="envTempCmd"><code>export ANTHROPIC_BASE_URL="<span class="pyUrl"></span>"
export ANTHROPIC_AUTH_TOKEN="sk-any"
export CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1</code></pre>
    <button class="copy-btn" onclick="copyEnvTemp()" style="margin-top:0.5rem">复制命令</button>
    
    <h4 style="color:var(--muted);margin-top:1rem;margin-bottom:0.5rem">永久生效（推荐，写入配置文件）</h4>
    <pre id="envPermCmd"><code># 写入 Claude Code 配置文件
mkdir -p ~/.claude
cat > ~/.claude/settings.json << 'EOF'
{
  "env": {
    "ANTHROPIC_BASE_URL": "<span class="pyUrl"></span>",
    "ANTHROPIC_AUTH_TOKEN": "sk-any",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
  }
}
EOF</code></pre>
    <button class="copy-btn" onclick="copyEnvPerm()" style="margin-top:0.5rem">复制命令</button>
    
    <h4 style="color:var(--muted);margin-top:1rem;margin-bottom:0.5rem">清除配置</h4>
    <pre id="envClearCmd"><code># 删除 Claude Code 配置
rm -f ~/.claude/settings.json
unset ANTHROPIC_BASE_URL ANTHROPIC_AUTH_TOKEN CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC</code></pre>
    <button class="copy-btn" onclick="copyEnvClear()" style="margin-top:0.5rem">复制命令</button>
    
    <p style="color:var(--muted);font-size:0.75rem;margin-top:1rem">
      💡 使用 <code>ANTHROPIC_AUTH_TOKEN</code> + <code>CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1</code> 可跳过登录
    </p>
  </div>
  <div class="card">
    <h3>模型映射</h3>
    <p style="color:var(--muted);font-size:0.875rem;margin-bottom:1rem">支持多种模型名称，自动映射到 Kiro 模型</p>
    <table>
      <thead><tr><th>Kiro 模型</th><th>能力</th><th>可用名称</th></tr></thead>
      <tbody>
        <tr><td><code>claude-sonnet-4</code></td><td>⭐⭐⭐ 推荐</td><td>gpt-4o, gpt-4, claude-3-5-sonnet-*, sonnet</td></tr>
        <tr><td><code>claude-sonnet-4.5</code></td><td>⭐⭐⭐⭐ 更强</td><td>gemini-1.5-pro, o1, o1-preview, claude-3-opus-*, opus</td></tr>
        <tr><td><code>claude-haiku-4.5</code></td><td>⚡ 快速</td><td>gpt-4o-mini, gpt-3.5-turbo, haiku</td></tr>
        <tr><td><code>auto</code></td><td>🤖 自动</td><td>auto</td></tr>
      </tbody>
    </table>
    <p style="color:var(--muted);font-size:0.75rem;margin-top:0.75rem">
      💡 直接使用 Kiro 模型名（如 claude-sonnet-4）或任意映射名称均可
    </p>
  </div>
</div>
'''

HTML_SETTINGS = '''
<div class="panel" id="settings">
  <!-- 自动化管理提示 -->
  <div class="card">
    <h3>🤖 自动化管理</h3>
    <p style="color:var(--muted);font-size:0.875rem;margin-bottom:1rem">
      以下功能已启用自动化管理，无需手动配置：
    </p>
    <div style="display:grid;gap:1rem">
      <div style="padding:1rem;background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(59,130,246,0.1));border-radius:8px">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
          <span style="font-size:1.25rem">🔄</span>
          <strong>Token 与额度刷新</strong>
          <span style="background:var(--success);color:white;padding:0.125rem 0.5rem;border-radius:4px;font-size:0.75rem">自动</span>
        </div>
        <p style="font-size:0.875rem;color:var(--muted);margin:0">
          Token 过期前自动刷新，额度信息定期更新
        </p>
      </div>
      <div style="padding:1rem;background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(59,130,246,0.1));border-radius:8px">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
          <span style="font-size:1.25rem">⚡</span>
          <strong>请求限速与 429 冷却</strong>
          <span style="background:var(--success);color:white;padding:0.125rem 0.5rem;border-radius:4px;font-size:0.75rem">自动</span>
        </div>
        <p style="font-size:0.875rem;color:var(--muted);margin:0">
          遇到 429 错误自动冷却 5 分钟，自动切换到其他可用账号
        </p>
      </div>
      <div style="padding:1rem;background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(59,130,246,0.1));border-radius:8px">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
          <span style="font-size:1.25rem">📝</span>
          <strong>历史消息压缩</strong>
          <span style="background:var(--success);color:white;padding:0.125rem 0.5rem;border-radius:4px;font-size:0.75rem">自动</span>
        </div>
        <p style="font-size:0.875rem;color:var(--muted);margin:0">
          上下文超限时默认自动压缩并重试，也可在下方设置为超限直接报错
        </p>
      </div>
      <div style="padding:1rem;background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(59,130,246,0.1));border-radius:8px">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
          <span style="font-size:1.25rem">🎲</span>
          <strong>账号负载均衡</strong>
          <span style="background:var(--success);color:white;padding:0.125rem 0.5rem;border-radius:4px;font-size:0.75rem">自动</span>
        </div>
        <p style="font-size:0.875rem;color:var(--muted);margin:0">
          支持随机、轮询、最少请求等多种账号选择策略，分散请求压力
        </p>
      </div>
    </div>
  </div>

  <!-- 刷新配置面板 - 已隐藏，自动化管理 -->
  <div class="card" style="display:none">
    <h3>刷新配置
      <button class="secondary small" onclick="loadRefreshConfig()">刷新</button>
      <button class="secondary small" onclick="resetRefreshConfig()">还原默认</button>
    </h3>
    <p style="color:var(--muted);font-size:0.875rem;margin-bottom:1rem">
      配置 Token 刷新和额度刷新的相关参数
    </p>
    
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem">
      <div>
        <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">最大重试次数</label>
        <input type="number" id="refreshMaxRetries" value="3" min="1" max="10" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)" onchange="saveRefreshConfig()">
        <span style="font-size:0.75rem;color:var(--muted)">刷新失败时的重试次数（1-10）</span>
      </div>
      <div>
        <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">并发数</label>
        <input type="number" id="refreshConcurrency" value="3" min="1" max="10" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)" onchange="saveRefreshConfig()">
        <span style="font-size:0.75rem;color:var(--muted)">同时刷新的账号数量（1-10）</span>
      </div>
      <div>
        <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">自动刷新间隔（秒）</label>
        <input type="number" id="refreshAutoInterval" value="60" min="30" max="600" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)" onchange="saveRefreshConfig()">
        <span style="font-size:0.75rem;color:var(--muted)">自动检查刷新的间隔（30-600秒）</span>
      </div>
      <div>
        <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">重试基础延迟（秒）</label>
        <input type="number" id="refreshRetryDelay" value="1.0" min="0.5" max="5" step="0.5" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)" onchange="saveRefreshConfig()">
        <span style="font-size:0.75rem;color:var(--muted)">重试延迟基数，指数增长（0.5-5秒）</span>
      </div>
      <div>
        <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">Token 提前刷新时间（秒）</label>
        <input type="number" id="refreshBeforeExpiry" value="300" min="60" max="600" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)" onchange="saveRefreshConfig()">
        <span style="font-size:0.75rem;color:var(--muted)">Token 过期前多久开始刷新（60-600秒）</span>
      </div>
    </div>
    
    <div id="refreshConfigStatus" style="padding:0.75rem;background:var(--bg);border-radius:6px;font-size:0.875rem"></div>
  </div>

  <!-- 请求限速面板 - 已隐藏，自动化管理 -->
  <div class="card" style="display:none">
    <h3>请求限速
      <button class="secondary small" onclick="loadRateLimitConfig()">刷新</button>
      <button class="secondary small" onclick="resetRateLimitConfig()">还原默认</button>
    </h3>
    <p style="color:var(--muted);font-size:0.875rem;margin-bottom:1rem">
      启用后会限制请求频率，降低被检测为异常活动的风险
    </p>
    
    <label style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;cursor:pointer">
      <input type="checkbox" id="rateLimitEnabled" onchange="updateRateLimitConfig()">
      <span><strong>启用限速</strong></span>
    </label>
    
    <div id="rateLimitOptions" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem">
      <div>
        <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">最小请求间隔（秒）</label>
        <input type="number" id="minRequestInterval" value="0.5" min="0" max="10" step="0.1" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)" onchange="updateRateLimitConfig()">
      </div>
      <div>
        <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">每账号每分钟最大请求</label>
        <input type="number" id="maxRequestsPerMinute" value="60" min="1" max="200" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)" onchange="updateRateLimitConfig()">
      </div>
      <div>
        <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">全局每分钟最大请求</label>
        <input type="number" id="globalMaxRequestsPerMinute" value="120" min="1" max="300" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)" onchange="updateRateLimitConfig()">
      </div>
    </div>
    
    <div style="padding:1rem;background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(59,130,246,0.1));border-radius:8px;margin-bottom:1rem">
      <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
        <span style="font-size:1.25rem">🔄</span>
        <strong style="color:var(--success)">429 冷却自动管理</strong>
        <span style="background:var(--success);color:white;padding:0.125rem 0.5rem;border-radius:4px;font-size:0.75rem">自动</span>
      </div>
      <p style="font-size:0.875rem;color:var(--muted);margin:0">
        遇到 429 错误时自动冷却账号 5 分钟，无需手动配置。冷却期间自动切换到其他可用账号。
      </p>
    </div>
    
    <div id="rateLimitStats" style="padding:0.75rem;background:var(--bg);border-radius:6px;font-size:0.875rem"></div>
  </div>

  <!-- 历史消息管理面板 -->
  <div class="card">
    <h3>历史消息管理
      <button class="secondary small" onclick="loadHistoryConfig()">刷新</button>
      <button class="secondary small" onclick="resetHistoryConfig()">还原默认</button>
    </h3>
    <p style="color:var(--muted);font-size:0.875rem;margin-bottom:1rem">
      控制「上下文超限」时的行为：自动压缩重试，或直接报错
    </p>
    
    <div style="padding:1rem;background:linear-gradient(135deg,rgba(34,197,94,0.1),rgba(59,130,246,0.1));border-radius:8px;margin-bottom:1rem">
      <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
        <span style="font-size:1.25rem">🤖</span>
        <strong style="color:var(--success)">错误触发压缩模式</strong>
        <span style="background:var(--success);color:white;padding:0.125rem 0.5rem;border-radius:4px;font-size:0.75rem">自动</span>
      </div>
      <p style="font-size:0.875rem;color:var(--muted);margin:0">
        不再依赖阈值预检测，仅在收到上下文超限错误后自动压缩到 20K-50K 字符范围
      </p>
    </div>
    
    <label style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;cursor:pointer">
      <input type="checkbox" id="historyErrorRetryEnabled" checked onchange="updateHistoryConfig()">
      <span><strong>超限自动压缩并重试</strong>（关闭则直接报错）</span>
    </label>
    
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem">
      <div>
        <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">最大重试次数</label>
        <input type="number" id="maxRetries" value="3" min="1" max="5" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)" onchange="updateHistoryConfig()">
        <span style="font-size:0.75rem;color:var(--muted)">超限错误后的重试次数</span>
      </div>
      <div>
        <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">摘要缓存时间（秒）</label>
        <input type="number" id="summaryCacheMaxAge" value="300" min="60" max="600" step="30" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)" onchange="updateHistoryConfig()">
        <span style="font-size:0.75rem;color:var(--muted)">相同上下文复用摘要</span>
      </div>
    </div>
    
    <label style="display:flex;align-items:center;gap:0.5rem;cursor:pointer;margin-bottom:1rem">
      <input type="checkbox" id="addWarningHeader" onchange="updateHistoryConfig()">
      <span>压缩时在日志中显示信息</span>
    </label>
    
    <div style="padding:1rem;background:var(--bg);border-radius:6px">
      <p style="font-size:0.875rem;color:var(--muted);margin:0">
        <strong>工作原理：</strong><br>
        1. 正常发送请求，不进行预检测<br>
        2. 收到 CONTENT_LENGTH_EXCEEDS_THRESHOLD 错误时触发压缩<br>
        3. 用 AI 生成早期对话摘要，保留最近 6-20 条消息<br>
        4. 压缩目标: 20K-50K 字符，自动重试<br>
        5. 关闭“超限自动压缩并重试”后：超限直接报错，不进行压缩/重试<br>
        <br>
        <span style="color:var(--success)">✓ 最大化利用上下文</span> &nbsp;
        <span style="color:var(--success)">✓ 错误触发无需预估</span> &nbsp;
        <span style="color:var(--success)">✓ 智能缓存避免重复调用</span>
      </p>
    </div>
  </div>
</div>
'''

HTML_BODY = HTML_AUTH_MODAL + HTML_GLOBAL_PROGRESS + HTML_HEADER + HTML_HELP + HTML_MONITOR + HTML_ACCOUNTS + HTML_API + HTML_SETTINGS


# ==================== JavaScript ====================
JS_AUTH = '''
// ==================== 认证检查 ====================
let authToken = localStorage.getItem('admin_session');
let authRequired = false;

async function checkAuth() {
  try {
    const r = await fetch('/api/auth/check', {
      method: 'POST',
      headers: authToken ? {'Authorization': 'Bearer ' + authToken} : {}
    });
    const d = await r.json();
    authRequired = d.auth_required;
    
    if (d.auth_required && !d.authenticated) {
      showAuthModal();
      return false;
    } else {
      hideAuthModal();
      return true;
    }
  } catch(e) {
    console.error('认证检查失败:', e);
    return true;
  }
}

function showAuthModal() {
  const overlay = $('#authOverlay');
  if (overlay) {
    overlay.style.display = 'flex';
    setTimeout(() => $('#authPassword')?.focus(), 100);
  }
}

function hideAuthModal() {
  const overlay = $('#authOverlay');
  if (overlay) {
    overlay.style.display = 'none';
  }
}

async function adminLogin() {
  const password = $('#authPassword').value;
  const errorEl = $('#authError');
  
  if (!password) {
    errorEl.textContent = '请输入密码';
    return;
  }
  
  try {
    const r = await fetch('/api/auth/login', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({password})
    });
    const d = await r.json();
    
    if (d.success && d.session_id) {
      authToken = d.session_id;
      localStorage.setItem('admin_session', authToken);
      hideAuthModal();
      errorEl.textContent = '';
      $('#authPassword').value = '';
      Toast.success('登录成功');
      initializeDefaultTab();
    } else {
      errorEl.textContent = d.detail || '密码错误';
    }
  } catch(e) {
    errorEl.textContent = '登录失败: ' + e.message;
  }
}

function adminLogout() {
  localStorage.removeItem('admin_session');
  authToken = null;
  if (authRequired) {
    showAuthModal();
  }
  Toast.info('已登出');
}

// 页面加载时检查认证
checkAuth();
'''

JS_UTILS = '''
const $=s=>document.querySelector(s);
const $$=s=>document.querySelectorAll(s);

function copy(text){
  navigator.clipboard.writeText(text).then(()=>{
    const toast=document.createElement('div');
    toast.textContent='已复制';
    toast.style.cssText='position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--bg);padding:0.5rem 1rem;border-radius:6px;font-size:0.875rem;z-index:1000';
    document.body.appendChild(toast);
    setTimeout(()=>toast.remove(),1500);
  });
}

function copyEnvTemp(){
  const url=location.origin;
  copy(`export ANTHROPIC_BASE_URL="${url}"
export ANTHROPIC_AUTH_TOKEN="sk-any"
export CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1`);
}

function copyEnvPerm(){
  const url=location.origin;
  copy(`# 写入 Claude Code 配置文件（推荐）
mkdir -p ~/.claude
cat > ~/.claude/settings.json << 'EOF'
{
  "env": {
    "ANTHROPIC_BASE_URL": "${url}",
    "ANTHROPIC_AUTH_TOKEN": "sk-any",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
  }
}
EOF
echo "配置完成，请重新打开终端运行 claude"`);
}

function copyEnvClear(){
  copy(`# 删除 Claude Code 配置
rm -f ~/.claude/settings.json
unset ANTHROPIC_BASE_URL ANTHROPIC_AUTH_TOKEN CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC
echo "配置已清除"`);
}

function formatUptime(s){
  if(s<60)return s+'秒';
  if(s<3600)return Math.floor(s/60)+'分钟';
  return Math.floor(s/3600)+'小时'+Math.floor((s%3600)/60)+'分钟';
}

function escapeHtml(text){
  const div=document.createElement('div');
  div.textContent=text;
  return div.innerHTML;
}
'''

JS_TABS = '''
// Tabs
$$('.tab').forEach(t=>t.onclick=()=>{
  $$('.tab').forEach(x=>x.classList.remove('active'));
  $$('.panel').forEach(x=>x.classList.remove('active'));
  t.classList.add('active');
  $('#'+t.dataset.tab).classList.add('active');

  // 监控面板加载所有数据
  if(t.dataset.tab==='monitor'){
    loadStats();
    loadQuota();
    loadFlowStats();
    loadFlows();
    loadLogs();
  }
  if(t.dataset.tab==='accounts'){
    loadAccounts();
    loadAccountsEnhanced();
  }
});
'''

JS_STATUS = '''
// Status
async function checkStatus(){
  try{
    const r=await fetch('/api/status');
    const d=await r.json();
    $('#statusDot').className='status-dot '+(d.ok?'ok':'err');
    $('#statusText').textContent=d.ok?'已连接':'未连接';
    if(d.stats)$('#uptime').textContent='运行 '+formatUptime(d.stats.uptime_seconds);
  }catch(e){
    $('#statusDot').className='status-dot err';
    $('#statusText').textContent='连接失败';
  }
}
checkStatus();
setInterval(checkStatus,30000);

// URLs
$('#baseUrl').textContent=location.origin;
$$('.pyUrl').forEach(e=>e.textContent=location.origin);
'''

JS_DOCS = '''
// 文档浏览
let docsData = [];
let currentDoc = null;

// 简单的 Markdown 渲染
function renderMarkdown(text) {
  return text
    .replace(/```(\\w*)\\n([\\s\\S]*?)```/g, '<pre><code class="lang-$1">$2</code></pre>')
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    .replace(/^#### (.+)$/gm, '<h4>$1</h4>')
    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
    .replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>')
    .replace(/\\*(.+?)\\*/g, '<em>$1</em>')
    .replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, '<a href="$2" target="_blank">$1</a>')
    .replace(/^- (.+)$/gm, '<li>$1</li>')
    .replace(/(<li>.*<\\/li>\\n?)+/g, '<ul>$&</ul>')
    .replace(/^\\d+\\. (.+)$/gm, '<li>$1</li>')
    .replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
    .replace(/^---$/gm, '<hr>')
    .replace(/\\|(.+)\\|/g, function(match) {
      const cells = match.split('|').filter(c => c.trim());
      if (cells.every(c => /^[\\s-:]+$/.test(c))) return '';
      const tag = match.includes('---') ? 'th' : 'td';
      return '<tr>' + cells.map(c => '<' + tag + '>' + c.trim() + '</' + tag + '>').join('') + '</tr>';
    })
    .replace(/(<tr>.*<\\/tr>\\n?)+/g, '<table>$&</table>')
    .replace(/\\n\\n/g, '</p><p>')
    .replace(/\\n/g, '<br>');
}

async function loadDocs() {
  try {
    const r = await fetch('/api/docs');
    const d = await r.json();
    docsData = d.docs || [];
    
    // 渲染导航
    $('#docsNav').innerHTML = docsData.map((doc, i) => 
      '<a class="docs-nav-item' + (i === 0 ? ' active' : '') + '" data-id="' + doc.id + '" onclick="showDoc(\\'' + doc.id + '\\')">' + doc.title + '</a>'
    ).join('');
    
    // 显示第一个文档
    if (docsData.length > 0) {
      showDoc(docsData[0].id);
    }
  } catch (e) {
    $('#docsContent').innerHTML = '<p style="color:var(--error)">加载文档失败</p>';
  }
}

async function showDoc(id) {
  // 更新导航状态
  $$('.docs-nav-item').forEach(item => {
    item.classList.toggle('active', item.dataset.id === id);
  });
  
  // 获取文档内容
  try {
    const r = await fetch('/api/docs/' + id);
    const d = await r.json();
    currentDoc = d;
    $('#docsContent').innerHTML = renderMarkdown(d.content);
  } catch (e) {
    $('#docsContent').innerHTML = '<p style="color:var(--error)">加载文档失败</p>';
  }
}

// 页面加载时加载文档
loadDocs();
'''

JS_STATS = '''
// Stats
async function loadStats(){
  try{
    const r=await fetch('/api/stats');
    const d=await r.json();
    $('#statsGrid').innerHTML=`
      <div class="stat-item"><div class="stat-value">${d.total_requests}</div><div class="stat-label">总请求</div></div>
      <div class="stat-item"><div class="stat-value">${d.total_errors}</div><div class="stat-label">错误数</div></div>
      <div class="stat-item"><div class="stat-value">${d.error_rate}</div><div class="stat-label">错误率</div></div>
      <div class="stat-item"><div class="stat-value">${d.accounts_available}/${d.accounts_total}</div><div class="stat-label">可用账号</div></div>
      <div class="stat-item"><div class="stat-value">${d.accounts_cooldown||0}</div><div class="stat-label">冷却中</div></div>
    `;
  }catch(e){console.error(e)}
}

// Quota
async function loadQuota(){
  try{
    const r=await fetch('/api/quota');
    const d=await r.json();
    if(d.exceeded_credentials&&d.exceeded_credentials.length>0){
      $('#quotaStatus').innerHTML=d.exceeded_credentials.map(c=>`
        <div style="display:flex;justify-content:space-between;align-items:center;padding:0.5rem;background:var(--bg);border-radius:4px;margin-bottom:0.5rem">
          <span><span class="badge warn">冷却中</span> ${c.credential_id}</span>
          <span style="color:var(--muted);font-size:0.8rem">剩余 ${c.remaining_seconds}秒</span>
          <button class="secondary small" onclick="restoreAccount('${c.credential_id}')">恢复</button>
        </div>
      `).join('');
    }else{
      $('#quotaStatus').innerHTML='<p style="color:var(--muted)">无冷却中的账号</p>';
    }
  }catch(e){console.error(e)}
}

// Speedtest
async function runSpeedtest(){
  $('#speedtestBtn').disabled=true;
  $('#speedtestResult').textContent='测试中...';
  try{
    const r=await fetch('/api/speedtest',{method:'POST'});
    const d=await r.json();
    $('#speedtestResult').textContent=d.ok?`延迟: ${d.latency_ms.toFixed(0)}ms (${d.account_id})`:'测试失败: '+d.error;
  }catch(e){$('#speedtestResult').textContent='测试失败'}
  $('#speedtestBtn').disabled=false;
}
'''

JS_LOGS = '''
// Logs
async function loadLogs(){
  try{
    const r=await fetch('/api/logs?limit=50');
    const d=await r.json();
    $('#logTable').innerHTML=(d.logs||[]).map(l=>`
      <tr>
        <td>${new Date(l.timestamp*1000).toLocaleTimeString()}</td>
        <td>${l.path}</td>
        <td>${l.model||'-'}</td>
        <td>${l.account_id||'-'}</td>
        <td><span class="badge ${l.status<400?'success':l.status<500?'warn':'error'}">${l.status}</span></td>
        <td>${l.duration_ms.toFixed(0)}ms</td>
      </tr>
    `).join('');
  }catch(e){console.error(e)}
}
'''


JS_ACCOUNTS = '''
// Accounts
async function loadAccounts(){
  try{
    const r=await fetch('/api/accounts');
    const d=await r.json();
    if(!d.accounts||d.accounts.length===0){
      $('#accountList').innerHTML='<p style="color:var(--muted)">暂无账号，请点击"扫描 Token"</p>';
      return;
    }
    $('#accountList').innerHTML=d.accounts.map(a=>{
      const statusBadge=a.status==='active'?'success':a.status==='cooldown'?'warn':a.status==='suspended'?'error':'error';
      const statusText={active:'可用',cooldown:'冷却中',unhealthy:'不健康',disabled:'已禁用',suspended:'已封禁'}[a.status]||a.status;
      const authBadge=a.auth_method==='idc'?'info':'success';
      const authText=a.auth_method==='idc'?'IdC':'Social';
      return `
        <div class="account-card">
          <div class="account-header">
            <div class="account-name">
              <span class="badge ${statusBadge}">${statusText}</span>
              <span class="badge ${authBadge}">${authText}</span>
              <span>${a.name}</span>
            </div>
            <span style="color:var(--muted);font-size:0.75rem">${a.id}</span>
          </div>
          <div class="account-meta">
            <div class="account-meta-item"><span>请求数</span><span>${a.request_count}</span></div>
            <div class="account-meta-item"><span>错误数</span><span>${a.error_count}</span></div>
            <div class="account-meta-item"><span>Token</span><span class="badge ${a.token_expired?'error':a.token_expiring_soon?'warn':'success'}">${a.token_expired?'已过期':a.token_expiring_soon?'即将过期':'有效'}</span></div>
            ${a.cooldown_remaining?`<div class="account-meta-item"><span>冷却剩余</span><span>${a.cooldown_remaining}秒</span></div>`:''}
          </div>
          <div id="usage-${a.id}" class="account-usage" style="display:none;margin-top:0.75rem;padding:0.75rem;background:var(--bg);border-radius:6px"></div>
          <div class="account-actions">
            <button class="secondary small" onclick="queryUsage('${a.id}')">查询用量</button>
            <button class="secondary small" onclick="refreshToken('${a.id}')">刷新 Token</button>
            <button class="secondary small" onclick="viewAccountDetail('${a.id}')">详情</button>
            ${a.status==='cooldown'?`<button class="secondary small" onclick="restoreAccount('${a.id}')">恢复</button>`:''}
            <button class="secondary small" onclick="toggleAccount('${a.id}')">${a.enabled?'禁用':'启用'}</button>
            <button class="secondary small" onclick="deleteAccount('${a.id}')" style="color:var(--error)">删除</button>
          </div>
        </div>
      `;
    }).join('');
  }catch(e){console.error(e)}
}

async function queryUsage(id){
  const usageDiv=$('#usage-'+id);
  usageDiv.style.display='block';
  usageDiv.innerHTML='<span style="color:var(--muted)">查询中...</span>';
  try{
    const r=await fetch('/api/accounts/'+id+'/usage');
    const d=await r.json();
    if(d.ok){
      const u=d.usage;
      const pct=u.usage_limit>0?((u.current_usage/u.usage_limit)*100).toFixed(1):0;
      const barColor=u.is_low_balance?'var(--error)':'var(--success)';
      usageDiv.innerHTML=`
        <div style="display:flex;justify-content:space-between;margin-bottom:0.5rem">
          <span style="font-weight:500">${u.subscription_title}</span>
          <span class="badge ${u.is_low_balance?'error':'success'}">${u.is_low_balance?'余额不足':'正常'}</span>
        </div>
        <div style="background:var(--border);border-radius:4px;height:8px;margin-bottom:0.5rem;overflow:hidden">
          <div style="background:${barColor};height:100%;width:${pct}%;transition:width 0.3s"></div>
        </div>
        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem;font-size:0.8rem">
          <div><span style="color:var(--muted)">已用/总额:</span> ${u.current_usage.toFixed(2)} / ${u.usage_limit.toFixed(2)}</div>
          <div><span style="color:var(--muted)">使用率:</span> ${pct}%</div>
          ${u.reset_date_text ? `<div><span style="color:var(--muted)">重置时间:</span> ${u.reset_date_text}</div>` : ''}
          ${u.trial_expiry_text ? `<div><span style="color:var(--muted)">试用过期:</span> ${u.trial_expiry_text}</div>` : ''}
        </div>
      `;
    }else{
      usageDiv.innerHTML=`<span style="color:var(--error)">查询失败: ${d.error}</span>`;
    }
  }catch(e){
    usageDiv.innerHTML=`<span style="color:var(--error)">查询失败: ${e.message}</span>`;
  }
}

async function refreshToken(id){
  try{
    Toast.info('正在刷新 Token...');
    const r=await fetch('/api/accounts/'+id+'/refresh',{method:'POST'});
    const d=await r.json();
    if(d.ok) {
      Toast.success('Token 刷新成功');
    } else {
      Toast.error('刷新失败: '+(d.message||d.error));
    }
    loadAccounts();
    loadAccountsEnhanced();
  }catch(e){Toast.error('刷新失败: '+e.message)}
}

async function refreshAllTokens(){
  try{
    Toast.info('正在刷新所有 Token...');
    const r=await fetch('/api/accounts/refresh-all',{method:'POST'});
    const d=await r.json();
    Toast.success(`刷新完成: ${d.refreshed} 个账号`);
    loadAccounts();
    loadAccountsEnhanced();
  }catch(e){Toast.error('刷新失败: '+e.message)}
}

async function restoreAccount(id){
  try{
    Toast.info('正在恢复账号...');
    const r = await fetch('/api/accounts/'+id+'/restore',{method:'POST'});
    const d = await r.json();
    if(d.ok) {
      Toast.success('账号已恢复');
    } else {
      Toast.error(d.error || '恢复失败');
    }
    loadAccounts();
    loadAccountsEnhanced();
    loadQuota();
  }catch(e){Toast.error('恢复失败: '+e.message)}
}

async function viewAccountDetail(id){
  try{
    const r=await fetch('/api/accounts/'+id);
    const d=await r.json();
    Modal.info('账号详情', `
      <div style="text-align:left;line-height:1.8">
        <p><strong>账号名:</strong> ${d.name}</p>
        <p><strong>ID:</strong> ${d.id}</p>
        <p><strong>状态:</strong> ${d.status}</p>
        <p><strong>请求数:</strong> ${d.request_count}</p>
        <p><strong>错误数:</strong> ${d.error_count}</p>
      </div>
    `);
  }catch(e){Toast.error('获取详情失败: '+e.message)}
}

async function toggleAccount(id){
  try {
    const r = await fetch('/api/accounts/'+id+'/toggle',{method:'POST'});
    const d = await r.json();
    if(d.ok) {
      Toast.success(d.enabled ? '账号已启用' : '账号已禁用');
    } else {
      Toast.error(d.error || '操作失败');
    }
  } catch(e) {
    Toast.error('操作失败: ' + e.message);
  }
  loadAccounts();
  loadAccountsEnhanced();
}

async function deleteAccount(id){
  if(confirm('确定删除此账号?')){
    try {
      const r = await fetch('/api/accounts/'+id,{method:'DELETE'});
      const d = await r.json();
      if(d.ok) {
        Toast.success('账号已删除');
      } else {
        Toast.error(d.error || '删除失败');
      }
    } catch(e) {
      Toast.error('删除失败: ' + e.message);
    }
    loadAccounts();
    loadAccountsEnhanced();
  }
}

function showAddAccount(){
  const path=prompt('输入 Token 文件路径:');
  if(path){
    const name=prompt('账号名称:','账号');
    fetch('/api/accounts',{
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({name,token_path:path})
    }).then(r=>r.json()).then(d=>{
      if(d.ok){
        Toast.success('账号添加成功');
        loadAccounts();
        loadAccountsEnhanced();
      }
      else alert(d.detail||'添加失败');
    });
  }
}

async function scanTokens(){
  try{
    const r=await fetch('/api/token/scan');
    const d=await r.json();
    const panel=$('#scanResults');
    const list=$('#scanList');
    if(d.tokens&&d.tokens.length>0){
      panel.style.display='block';
      list.innerHTML=d.tokens.map(t=>{
        const path=encodeURIComponent(t.path||'');
        const name=encodeURIComponent(t.name||'');
        return `
        <div style="display:flex;justify-content:space-between;align-items:center;padding:0.75rem;border:1px solid var(--border);border-radius:6px;margin-bottom:0.5rem">
          <div>
            <div>${t.name}</div>
            <div style="color:var(--muted);font-size:0.75rem">${t.path}</div>
          </div>
          ${t.already_added?'<span class="badge info">已添加</span>':`<button class="secondary small" data-path="${path}" data-name="${name}" onclick="addFromScan(decodeURIComponent(this.dataset.path),decodeURIComponent(this.dataset.name))">添加</button>`}
        </div>
        `;
      }).join('');
    }else{
      alert('未找到 Token 文件');
    }
  }catch(e){alert('扫描失败: '+e.message)}
}

async function addFromScan(path,name){
  try{
    const r=await fetch('/api/token/add-from-scan',{
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({path,name})
    });
    const d=await r.json();
    if(d.ok){
      loadAccounts();
      scanTokens();
    }else{
      alert(d.detail||'添加失败');
    }
  }catch(e){alert('添加失败: '+e.message)}
}

async function checkTokens(){
  try{
    const r=await fetch('/api/token/refresh-check',{method:'POST'});
    const d=await r.json();
    let msg='Token 状态:\\n\\n';
    (d.accounts||[]).forEach(a=>{
      const status=a.valid?'✅ 有效':'❌ 无效';
      msg+=`${a.name}: ${status}\\n`;
    });
    alert(msg);
  }catch(e){alert('检查失败: '+e.message)}
}

// 手动添加 Token
function showManualAdd(){
  $('#manualAddPanel').style.display='block';
  $('#manualName').value='';
  $('#manualAccessToken').value='';
  $('#manualRefreshToken').value='';
}

async function submitManualToken(){
  const name=$('#manualName').value.trim();
  const accessToken=$('#manualAccessToken').value.trim();
  const refreshToken=$('#manualRefreshToken').value.trim();
  const authMethod=$('#manualAuthMethod').value;
  const provider=$('#manualProvider')?.value || '';
  const clientId=$('#manualClientId')?.value?.trim() || '';
  const clientSecret=$('#manualClientSecret')?.value?.trim() || '';
  const region=$('#manualRegion')?.value?.trim() || 'us-east-1';
  
  // Refresh Token 必填
  if (!refreshToken) {
    Toast.error('Refresh Token 是必填项');
    return;
  }
  
  // 验证 Refresh Token 格式
  if (refreshToken.length < 100) {
    Toast.error('Refresh Token 格式不正确（太短）');
    return;
  }
  
  // IDC 认证需要 clientId 和 clientSecret
  if (authMethod === 'idc' && (!clientId || !clientSecret)) {
    Toast.error('IDC 认证需要填写 Client ID 和 Client Secret');
    return;
  }
  
  Toast.info('正在添加账号...');
  
  try{
    const r=await fetchWithRetry('/api/accounts/manual',{
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({
        name: name || '',
        access_token: accessToken,
        refresh_token: refreshToken,
        auth_method: authMethod,
        provider: provider,
        client_id: clientId,
        client_secret: clientSecret,
        region: region
      })
    });
    const d=await r.json();
    if(d.ok){
      let msg = '添加成功';
      if (d.auto_name) {
        msg += '（已自动获取邮箱作为名称）';
      }
      Toast.success(msg);
      $('#manualAddPanel').style.display='none';
      // 清空表单
      $('#manualName').value = '';
      $('#manualAccessToken').value = '';
      $('#manualRefreshToken').value = '';
      if ($('#manualClientId')) $('#manualClientId').value = '';
      if ($('#manualClientSecret')) $('#manualClientSecret').value = '';
      loadAccounts();
      loadAccountsEnhanced();
    }else{
      Toast.error(d.detail||'添加失败');
    }
  }catch(e){Toast.error('添加失败: '+e.message)}
}

// 切换手动添加表单字段显示
function toggleManualFields() {
  const authMethod = $('#manualAuthMethod').value;
  const idcFields = $('#manualIdcFields');
  const providerField = $('#manualProviderField');
  
  if (authMethod === 'idc') {
    if (idcFields) idcFields.style.display = 'block';
    if (providerField) providerField.style.display = 'none';
  } else {
    if (idcFields) idcFields.style.display = 'none';
    if (providerField) providerField.style.display = 'block';
  }
}

// 导出账号
async function exportAccounts(){
  try{
    const r=await fetch('/api/accounts/export');
    const d=await r.json();
    if(!d.ok){alert('导出失败');return;}
    const blob=new Blob([JSON.stringify(d,null,2)],{type:'application/json'});
    const url=URL.createObjectURL(blob);
    const a=document.createElement('a');
    a.href=url;
    a.download='kiro-accounts-'+new Date().toISOString().slice(0,10)+'.json';
    a.click();
  }catch(e){alert('导出失败: '+e.message)}
}

// 导入账号
function importAccounts(){
  const input=document.createElement('input');
  input.type='file';
  input.accept='.json';
  input.onchange=async(e)=>{
    const file=e.target.files[0];
    if(!file)return;
    try{
      const text=await file.text();
      const data=JSON.parse(text);
      const r=await fetch('/api/accounts/import',{
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify(data)
      });
      const d=await r.json();
      if(d.ok){
        alert(`导入成功: ${d.imported} 个账号`+(d.errors?.length?`\\n错误: ${d.errors.join(', ')}`:''));
        loadAccounts();
      }else{
        alert('导入失败');
      }
    }catch(e){alert('导入失败: '+e.message)}
  };
  input.click();
}
'''

JS_LOGIN = '''
// Kiro 在线登录
let loginPollTimer=null;

function showLoginOptions(){
  $('#loginOptions').style.display='block';
}

async function startSocialLogin(provider){
  $('#loginOptions').style.display='none';
  try{
    const r=await fetch('/api/kiro/social/start',{
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({provider})
    });
    const d=await r.json();
    if(!d.ok){alert('启动登录失败: '+d.error);return;}
    showSocialLoginPanel(d.provider, d.login_url);
  }catch(e){alert('启动登录失败: '+e.message)}
}

// 协议注册状态
let protocolRegistered = false;
let callbackPollTimer = null;

function showSocialLoginPanel(provider, loginUrl){
  $('#loginPanel').style.display='block';
  $('#loginContent').innerHTML=`
    <div style="text-align:center;padding:1rem">
      <p style="margin-bottom:1rem;font-size:1.1rem"><strong>${provider} 登录</strong></p>
      <div id="socialLoginContent">
        <div style="text-align:left;background:var(--bg);padding:1rem;border-radius:8px;margin:1rem 0">
          <p style="margin-bottom:0.75rem"><strong>步骤 1：打开登录链接</strong></p>
          <div style="display:flex;gap:0.5rem;margin-bottom:1rem">
            <input type="text" value="${loginUrl}" readonly style="flex:1;padding:0.5rem;font-size:0.75rem;background:var(--card);border:1px solid var(--border);border-radius:4px">
            <button class="small" onclick="copy('${loginUrl}')">复制</button>
          </div>
          
          <p style="margin-bottom:0.75rem"><strong>步骤 2：完成授权后粘贴回调 URL</strong></p>
          <p style="font-size:0.8rem;color:var(--muted);margin-bottom:0.5rem">
            授权完成后，浏览器会尝试打开 <code>kiro://</code> 链接。<br>
            如果提示"无法打开"，请复制地址栏中的完整 URL 粘贴到下方。
          </p>
        </div>
        <input type="text" id="callbackUrl" placeholder="粘贴 kiro://... 回调 URL" style="width:100%;padding:0.75rem;font-size:0.875rem">
        <button onclick="handleSocialCallback()" style="margin-top:0.5rem;width:100%">提交</button>
        
        <div style="margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)">
          <p style="font-size:0.8rem;color:var(--muted);margin-bottom:0.5rem"><strong>可选：自动回调模式</strong></p>
          <button class="secondary small" onclick="registerProtocolAndWait('${provider}')" style="width:100%">🔧 注册协议处理器（自动接收回调）</button>
        </div>
      </div>
      <button class="secondary" onclick="cancelSocialLogin()" style="margin-top:0.5rem;width:100%">取消</button>
      <p style="color:var(--muted);font-size:0.75rem;margin-top:0.75rem" id="loginStatus"></p>
    </div>
  `;
}

async function registerProtocolAndWait(provider) {
  $('#loginStatus').textContent = '正在注册协议处理器...';
  $('#loginStatus').style.color = 'var(--muted)';
  
  try {
    const regResp = await fetch('/api/protocol/register', { method: 'POST' });
    const regData = await regResp.json();
    
    if (!regData.ok) {
      $('#loginStatus').textContent = '协议注册失败: ' + regData.error;
      $('#loginStatus').style.color = 'var(--error)';
      return;
    }
    
    protocolRegistered = true;
    $('#loginStatus').textContent = '✅ 协议已注册，授权完成后将自动接收回调';
    $('#loginStatus').style.color = 'var(--success)';
    
    // 开始轮询回调结果
    startCallbackPolling(provider);
    
  } catch(e) {
    $('#loginStatus').textContent = '操作失败: ' + e.message;
    $('#loginStatus').style.color = 'var(--error)';
  }
}

function startCallbackPolling(provider) {
  if (callbackPollTimer) clearInterval(callbackPollTimer);
  
  let pollCount = 0;
  const maxPolls = 300; // 5分钟超时 (300 * 1秒)
  
  callbackPollTimer = setInterval(async () => {
    pollCount++;
    
    if (pollCount > maxPolls) {
      clearInterval(callbackPollTimer);
      callbackPollTimer = null;
      $('#loginStatus').textContent = '等待超时，请重试';
      $('#loginStatus').style.color = 'var(--error)';
      return;
    }
    
    try {
      const resp = await fetch('/api/protocol/callback');
      const data = await resp.json();
      
      if (data.ok && data.result) {
        clearInterval(callbackPollTimer);
        callbackPollTimer = null;
        
        if (data.result.error) {
          $('#loginStatus').textContent = '授权失败: ' + data.result.error;
          $('#loginStatus').style.color = 'var(--error)';
        } else if (data.result.code && data.result.state) {
          // 自动交换 Token
          $('#loginStatus').textContent = '正在交换 Token...';
          await exchangeTokenWithCode(data.result.code, data.result.state);
        }
      }
    } catch(e) {
      console.error('轮询回调失败:', e);
    }
  }, 1000);
}

async function exchangeTokenWithCode(code, state) {
  try {
    const r = await fetch('/api/kiro/social/exchange', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ code, state })
    });
    const d = await r.json();
    
    if (d.ok && d.completed) {
      $('#loginStatus').textContent = '✅ ' + d.message;
      $('#loginStatus').style.color = 'var(--success)';
      setTimeout(() => {
        $('#loginPanel').style.display = 'none';
        loadAccounts();
        loadAccountsEnhanced();
      }, 1500);
    } else {
      $('#loginStatus').textContent = '❌ ' + (d.error || '登录失败');
      $('#loginStatus').style.color = 'var(--error)';
    }
  } catch(e) {
    $('#loginStatus').textContent = '交换 Token 失败: ' + e.message;
    $('#loginStatus').style.color = 'var(--error)';
  }
}

function cancelSocialLogin(){
  if (callbackPollTimer) {
    clearInterval(callbackPollTimer);
    callbackPollTimer = null;
  }
  fetch('/api/kiro/social/cancel',{method:'POST'});
  $('#loginPanel').style.display='none';
}

async function handleSocialCallback(){
  const url=$('#callbackUrl').value.trim();
  if(!url){alert('请粘贴回调 URL');return;}
  try{
    // 支持 kiro:// 协议的 URL 解析
    let code, state;
    if(url.startsWith('kiro://')){
      // kiro://kiro.kiroAgent/authenticate-success?code=xxx&state=xxx
      const queryStart = url.indexOf('?');
      if(queryStart > -1){
        const params = new URLSearchParams(url.substring(queryStart + 1));
        code = params.get('code');
        state = params.get('state');
      }
    } else {
      // 标准 http/https URL
      const urlObj=new URL(url);
      code=urlObj.searchParams.get('code');
      state=urlObj.searchParams.get('state');
    }
    if(!code||!state){alert('无效的回调 URL，缺少 code 或 state 参数');return;}
    $('#loginStatus').textContent='正在交换 Token...';
    const r=await fetch('/api/kiro/social/exchange',{
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({code,state})
    });
    const d=await r.json();
    if(d.ok&&d.completed){
      $('#loginStatus').textContent='✅ '+d.message;
      $('#loginStatus').style.color='var(--success)';
      setTimeout(()=>{$('#loginPanel').style.display='none';loadAccounts();},1500);
    }else{
      $('#loginStatus').textContent='❌ '+(d.error||'登录失败');
      $('#loginStatus').style.color='var(--error)';
    }
  }catch(e){alert('处理回调失败: '+e.message)}
}

async function startAwsLogin(){
  $('#loginOptions').style.display='none';
  try{
    const r=await fetch('/api/kiro/login/start',{
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({})
    });
    const d=await r.json();
    if(!d.ok){alert('启动登录失败: '+d.error);return;}
    showAwsLoginPanel(d);
    startLoginPoll();
  }catch(e){alert('启动登录失败: '+e.message)}
}

function showAwsLoginPanel(data){
  $('#loginPanel').style.display='block';
  $('#loginContent').innerHTML=`
    <div style="text-align:center;padding:1rem">
      <p style="margin-bottom:1rem"><strong>AWS Builder ID 登录</strong></p>
      <div style="font-size:2rem;font-weight:bold;letter-spacing:0.5rem;padding:1rem;background:var(--bg);border-radius:8px;margin-bottom:1rem">${data.user_code}</div>
      <p style="margin-bottom:0.5rem;font-size:0.875rem">复制上方授权码，然后打开以下链接完成授权：</p>
      <div style="display:flex;gap:0.5rem;margin-bottom:1rem;justify-content:center">
        <input type="text" value="${data.verification_uri}" readonly style="flex:1;max-width:300px;padding:0.5rem;font-size:0.75rem;background:var(--card);border:1px solid var(--border);border-radius:4px">
        <button class="small" onclick="copy('${data.verification_uri}')">复制链接</button>
      </div>
      <p style="color:var(--muted);font-size:0.875rem">授权码有效期: ${Math.floor(data.expires_in/60)} 分钟</p>
      <button class="secondary" onclick="cancelKiroLogin()" style="margin-top:1rem;width:100%">取消</button>
      <p style="color:var(--muted);font-size:0.75rem;margin-top:0.75rem" id="loginStatus">等待授权...</p>
    </div>
  `;
}

function startLoginPoll(){
  if(loginPollTimer)clearInterval(loginPollTimer);
  loginPollTimer=setInterval(pollLogin,3000);
}

async function pollLogin(){
  try{
    const r=await fetch('/api/kiro/login/poll');
    const d=await r.json();
    if(!d.ok){$('#loginStatus').textContent='错误: '+d.error;stopLoginPoll();return;}
    if(d.completed){
      $('#loginStatus').textContent='✅ 登录成功！';
      $('#loginStatus').style.color='var(--success)';
      stopLoginPoll();
      setTimeout(()=>{$('#loginPanel').style.display='none';loadAccounts();},1500);
    }
  }catch(e){$('#loginStatus').textContent='轮询失败: '+e.message}
}

function stopLoginPoll(){
  if(loginPollTimer){clearInterval(loginPollTimer);loginPollTimer=null;}
}

async function cancelKiroLogin(){
  stopLoginPoll();
  await fetch('/api/kiro/login/cancel',{method:'POST'});
  $('#loginPanel').style.display='none';
}
'''


JS_FLOWS = '''
// Flow Monitor
async function loadFlowStats(){
  try{
    const r=await fetch('/api/flows/stats');
    const d=await r.json();
    $('#flowStatsGrid').innerHTML=`
      <div class="stat-item"><div class="stat-value">${d.total_flows}</div><div class="stat-label">总请求</div></div>
      <div class="stat-item"><div class="stat-value">${d.completed}</div><div class="stat-label">完成</div></div>
      <div class="stat-item"><div class="stat-value">${d.errors}</div><div class="stat-label">错误</div></div>
      <div class="stat-item"><div class="stat-value">${d.error_rate}</div><div class="stat-label">错误率</div></div>
      <div class="stat-item"><div class="stat-value">${d.avg_duration_ms.toFixed(0)}ms</div><div class="stat-label">平均延迟</div></div>
      <div class="stat-item"><div class="stat-value">${d.total_tokens_in}</div><div class="stat-label">输入Token</div></div>
      <div class="stat-item"><div class="stat-value">${d.total_tokens_out}</div><div class="stat-label">输出Token</div></div>
    `;
  }catch(e){console.error(e)}
}

async function loadFlows(){
  try{
    const protocol=$('#flowProtocol').value;
    const state=$('#flowState').value;
    const search=$('#flowSearch').value;
    let url='/api/flows?limit=50';
    if(protocol)url+=`&protocol=${protocol}`;
    if(state)url+=`&state=${state}`;
    if(search)url+=`&search=${encodeURIComponent(search)}`;
    const r=await fetch(url);
    const d=await r.json();
    if(!d.flows||d.flows.length===0){
      $('#flowList').innerHTML='<p style="color:var(--muted)">暂无请求记录</p>';
      return;
    }
    $('#flowList').innerHTML=d.flows.map(f=>{
      const stateBadge={completed:'success',error:'error',streaming:'info',pending:'warn'}[f.state]||'info';
      const stateText={completed:'完成',error:'错误',streaming:'流式中',pending:'等待中'}[f.state]||f.state;
      const time=new Date(f.timing.created_at*1000).toLocaleTimeString();
      const duration=f.timing.duration_ms?f.timing.duration_ms.toFixed(0)+'ms':'-';
      const model=f.request?.model||'-';
      const tokens=f.response?.usage?(f.response.usage.input_tokens+'/'+f.response.usage.output_tokens):'-';
      return `
        <div style="display:flex;justify-content:space-between;align-items:center;padding:0.75rem;border:1px solid var(--border);border-radius:6px;margin-bottom:0.5rem;cursor:pointer" onclick="viewFlow('${f.id}')">
          <div style="flex:1">
            <div style="display:flex;align-items:center;gap:0.5rem">
              <span class="badge ${stateBadge}">${stateText}</span>
              <span style="font-weight:500">${model}</span>
              ${f.bookmarked?'<span style="color:var(--warn)">★</span>':''}
            </div>
            <div style="color:var(--muted);font-size:0.75rem;margin-top:0.25rem">
              ${time} · ${duration} · ${tokens} tokens · ${f.protocol}
            </div>
          </div>
          <button class="secondary small" onclick="event.stopPropagation();toggleBookmark('${f.id}',${!f.bookmarked})">${f.bookmarked?'取消':'收藏'}</button>
        </div>
      `;
    }).join('');
  }catch(e){console.error(e)}
}

async function viewFlow(id){
  try{
    const r=await fetch('/api/flows/'+id);
    const f=await r.json();
    let html=`<div style="margin-bottom:1rem"><strong>ID:</strong> ${f.id}<br><strong>协议:</strong> ${f.protocol}<br><strong>状态:</strong> ${f.state}<br><strong>时间:</strong> ${new Date(f.timing.created_at*1000).toLocaleString()}<br><strong>延迟:</strong> ${f.timing.duration_ms?f.timing.duration_ms.toFixed(0)+'ms':'N/A'}</div>`;
    if(f.request){
      html+=`<h4 style="margin-bottom:0.5rem">请求</h4><div style="margin-bottom:1rem"><strong>模型:</strong> ${f.request.model}<br><strong>流式:</strong> ${f.request.stream?'是':'否'}</div>`;
    }
    if(f.response){
      html+=`<h4 style="margin-top:1rem;margin-bottom:0.5rem">响应</h4><div><strong>状态码:</strong> ${f.response.status_code}<br><strong>Token:</strong> ${f.response.usage?.input_tokens||0} in / ${f.response.usage?.output_tokens||0} out</div>`;
    }
    if(f.error){
      html+=`<h4 style="margin-top:1rem;margin-bottom:0.5rem;color:var(--error)">错误</h4><div><strong>类型:</strong> ${f.error.type}<br><strong>消息:</strong> ${f.error.message}</div>`;
    }
    $('#flowDetailContent').innerHTML=html;
    $('#flowDetail').style.display='block';
  }catch(e){alert('获取详情失败: '+e.message)}
}

async function toggleBookmark(id,bookmarked){
  await fetch('/api/flows/'+id+'/bookmark',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({bookmarked})});
  loadFlows();
}

async function exportFlows(){
  try{
    const r=await fetch('/api/flows/export',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({format:'json'})});
    const d=await r.json();
    const blob=new Blob([d.content],{type:'application/json'});
    const url=URL.createObjectURL(blob);
    const a=document.createElement('a');
    a.href=url;
    a.download='flows_'+new Date().toISOString().slice(0,10)+'.json';
    a.click();
  }catch(e){alert('导出失败: '+e.message)}
}
'''

JS_SETTINGS = '''
// 设置页面
// 历史消息管理

async function loadHistoryConfig(){
  try{
    const r=await fetch('/api/settings/history');
    const d=await r.json();
    const strategies=Array.isArray(d.strategies)?d.strategies:[];
    $('#historyErrorRetryEnabled').checked=strategies.includes('error_retry');
    $('#maxRetries').value=d.max_retries||3;
    $('#summaryCacheMaxAge').value=d.summary_cache_max_age_seconds||300;
    $('#addWarningHeader').checked=d.add_warning_header!==false;
  }catch(e){console.error('加载配置失败:',e)}
}

async function updateHistoryConfig(){
  const strategies=[];
  if($('#historyErrorRetryEnabled').checked) strategies.push('error_retry');
  const config={
    strategies,
    max_retries:parseInt($('#maxRetries').value)||3,
    summary_cache_enabled:true,
    summary_cache_max_age_seconds:parseInt($('#summaryCacheMaxAge').value)||300,
    add_warning_header:$('#addWarningHeader').checked
  };
  try{
    await fetch('/api/settings/history',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(config)});
  }catch(e){console.error('保存配置失败:',e)}
}

// 刷新配置
async function loadRefreshConfig(){
  try{
    const r=await fetch('/api/refresh/config');
    const d=await r.json();
    if(d.ok && d.config){
      const c=d.config;
      $('#refreshMaxRetries').value=c.max_retries||3;
      $('#refreshConcurrency').value=c.concurrency||3;
      $('#refreshAutoInterval').value=c.auto_refresh_interval||60;
      $('#refreshRetryDelay').value=c.retry_base_delay||1.0;
      $('#refreshBeforeExpiry').value=c.token_refresh_before_expiry||300;
      // 更新状态显示
      $('#refreshConfigStatus').innerHTML=`
        <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.5rem">
          <span>最大重试: <strong>${c.max_retries||3}</strong> 次</span>
          <span>并发数: <strong>${c.concurrency||3}</strong></span>
          <span>自动刷新间隔: <strong>${c.auto_refresh_interval||60}</strong> 秒</span>
          <span>提前刷新: <strong>${c.token_refresh_before_expiry||300}</strong> 秒</span>
        </div>
      `;
    }
  }catch(e){console.error('加载刷新配置失败:',e)}
}

async function saveRefreshConfig(){
  const config={
    max_retries:parseInt($('#refreshMaxRetries').value)||3,
    concurrency:parseInt($('#refreshConcurrency').value)||3,
    auto_refresh_interval:parseInt($('#refreshAutoInterval').value)||60,
    retry_base_delay:parseFloat($('#refreshRetryDelay').value)||1.0,
    token_refresh_before_expiry:parseInt($('#refreshBeforeExpiry').value)||300
  };
  try{
    const r=await fetch('/api/refresh/config',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(config)});
    const d=await r.json();
    if(d.ok){
      Toast.success('刷新配置保存成功');
      loadRefreshConfig();
    }else{
      Toast.error(d.error||'保存失败');
    }
  }catch(e){
    console.error('保存刷新配置失败:',e);
    Toast.error('保存刷新配置失败');
  }
}

// 限速配置
async function loadRateLimitConfig(){
  try{
    const r=await fetch('/api/settings/rate-limit');
    const d=await r.json();
    $('#rateLimitEnabled').checked=d.enabled;
    $('#minRequestInterval').value=d.min_request_interval||0.5;
    $('#maxRequestsPerMinute').value=d.max_requests_per_minute||60;
    $('#globalMaxRequestsPerMinute').value=d.global_max_requests_per_minute||120;
    // 更新统计
    const stats=d.stats||{};
    $('#rateLimitStats').innerHTML=`
      <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.5rem">
        <span>状态: <span class="badge ${d.enabled?'success':'warn'}">${d.enabled?'已启用':'已禁用'}</span></span>
        <span>全局 RPM: ${stats.global_rpm||0}</span>
        <span>429 冷却: <span class="badge success">自动 5 分钟</span></span>
      </div>
    `;
  }catch(e){console.error('加载限速配置失败:',e)}
}

async function updateRateLimitConfig(){
  const config={
    enabled:$('#rateLimitEnabled').checked,
    min_request_interval:parseFloat($('#minRequestInterval').value)||0.5,
    max_requests_per_minute:parseInt($('#maxRequestsPerMinute').value)||60,
    global_max_requests_per_minute:parseInt($('#globalMaxRequestsPerMinute').value)||120
  };
  try{
    await fetch('/api/settings/rate-limit',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(config)});
    loadRateLimitConfig();
  }catch(e){console.error('保存限速配置失败:',e)}
}

// 还原默认配置函数
async function resetRefreshConfig(){
  if(!confirm('确定要还原刷新配置为默认值吗？')) return;
  const defaultConfig={
    max_retries:3,
    concurrency:3,
    auto_refresh_interval:60,
    retry_base_delay:1.0,
    token_refresh_before_expiry:300
  };
  try{
    const r=await fetch('/api/refresh/config',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(defaultConfig)});
    const d=await r.json();
    if(d.ok){
      Toast.success('已还原为默认配置');
      loadRefreshConfig();
    }else{
      Toast.error(d.error||'还原失败');
    }
  }catch(e){
    Toast.error('还原配置失败');
  }
}

async function resetRateLimitConfig(){
  if(!confirm('确定要还原限速配置为默认值吗？')) return;
  const defaultConfig={
    enabled:false,
    min_request_interval:0.5,
    max_requests_per_minute:60,
    global_max_requests_per_minute:120
  };
  try{
    await fetch('/api/settings/rate-limit',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(defaultConfig)});
    Toast.success('已还原为默认配置');
    loadRateLimitConfig();
  }catch(e){
    Toast.error('还原配置失败');
  }
}

async function resetHistoryConfig(){
  if(!confirm('确定要还原历史消息配置为默认值吗？')) return;
  const defaultConfig={
    strategies:['error_retry'],
    max_retries:3,
    summary_cache_enabled:true,
    summary_cache_max_age_seconds:300,
    add_warning_header:true
  };
  try{
    await fetch('/api/settings/history',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(defaultConfig)});
    Toast.success('已还原为默认配置');
    loadHistoryConfig();
  }catch(e){
    Toast.error('还原配置失败');
  }
}

// 页面加载时加载设置
loadHistoryConfig();
loadRateLimitConfig();
loadRefreshConfig();
'''

# ==================== UI 组件库 JavaScript ====================
JS_UI_COMPONENTS = '''
// ==================== Modal 模态框组件 ====================
class Modal {
  constructor(options = {}) {
    this.title = options.title || '';
    this.content = options.content || '';
    this.type = options.type || 'default';
    this.confirmText = options.confirmText || '确认';
    this.cancelText = options.cancelText || '取消';
    this.onConfirm = options.onConfirm;
    this.onCancel = options.onCancel;
    this.showCancel = options.showCancel !== false;
    this.element = null;
  }
  
  show() {
    const overlay = document.createElement('div');
    overlay.className = 'modal-overlay';
    overlay.innerHTML = `
      <div class="modal ${this.type}">
        <div class="modal-header">
          <h3>${this.title}</h3>
          <button class="modal-close" onclick="this.closest('.modal-overlay').modal.hide()">&times;</button>
        </div>
        <div class="modal-body">${this.content}</div>
        <div class="modal-footer">
          ${this.showCancel ? `<button class="secondary" onclick="this.closest('.modal-overlay').modal.cancel()">${this.cancelText}</button>` : ''}
          <button onclick="this.closest('.modal-overlay').modal.confirm()">${this.confirmText}</button>
        </div>
      </div>
    `;
    overlay.modal = this;
    this.element = overlay;
    document.body.appendChild(overlay);
    
    // 键盘事件
    this.keyHandler = (e) => {
      if (e.key === 'Escape') this.hide();
      if (e.key === 'Enter' && !e.target.matches('textarea')) this.confirm();
    };
    document.addEventListener('keydown', this.keyHandler);
    
    // 点击遮罩关闭
    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) this.hide();
    });
    
    requestAnimationFrame(() => overlay.classList.add('active'));
    return this;
  }
  
  hide() {
    if (this.element) {
      this.element.classList.remove('active');
      document.removeEventListener('keydown', this.keyHandler);
      setTimeout(() => this.element.remove(), 200);
    }
  }
  
  confirm() {
    if (this.onConfirm) this.onConfirm();
    this.hide();
  }
  
  cancel() {
    if (this.onCancel) this.onCancel();
    this.hide();
  }
  
  setLoading(loading) {
    const btn = this.element?.querySelector('.modal-footer button:last-child');
    if (btn) {
      btn.disabled = loading;
      btn.textContent = loading ? '处理中...' : this.confirmText;
    }
  }
  
  static confirm(title, message, onConfirm) {
    return new Modal({ title, content: `<p>${message}</p>`, onConfirm }).show();
  }
  
  static alert(title, message) {
    return new Modal({ title, content: `<p>${message}</p>`, showCancel: false }).show();
  }
  
  static danger(title, message, onConfirm) {
    return new Modal({ title, content: `<p>${message}</p>`, type: 'danger', onConfirm, confirmText: '删除' }).show();
  }
}

// ==================== Toast 通知组件 ====================
class Toast {
  static container = null;
  
  static getContainer() {
    if (!this.container) {
      this.container = document.createElement('div');
      this.container.className = 'toast-container';
      document.body.appendChild(this.container);
    }
    return this.container;
  }
  
  static show(message, type = 'info', duration = 3000) {
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.innerHTML = `
      <span>${message}</span>
      <button class="toast-close" onclick="this.parentElement.remove()">&times;</button>
    `;
    this.getContainer().appendChild(toast);
    
    if (duration > 0) {
      setTimeout(() => toast.remove(), duration);
    }
    return toast;
  }
  
  static success(message, duration) { return this.show(message, 'success', duration); }
  static error(message, duration) { return this.show(message, 'error', duration); }
  static warning(message, duration) { return this.show(message, 'warning', duration); }
  static info(message, duration) { return this.show(message, 'info', duration); }
}

// ==================== Dropdown 下拉菜单组件 ====================
class Dropdown {
  constructor(trigger, items) {
    this.trigger = trigger;
    this.items = items;
    this.element = null;
    this.init();
  }
  
  init() {
    const wrapper = document.createElement('div');
    wrapper.className = 'dropdown';
    
    this.trigger.parentNode.insertBefore(wrapper, this.trigger);
    wrapper.appendChild(this.trigger);
    
    const menu = document.createElement('div');
    menu.className = 'dropdown-menu';
    menu.innerHTML = this.items.map(item => {
      if (item.divider) return '<div class="dropdown-divider"></div>';
      return `<div class="dropdown-item ${item.danger ? 'danger' : ''}" data-action="${item.action || ''}">${item.icon || ''}${item.label}</div>`;
    }).join('');
    wrapper.appendChild(menu);
    
    this.element = wrapper;
    
    this.trigger.addEventListener('click', (e) => {
      e.stopPropagation();
      this.toggle();
    });
    
    menu.addEventListener('click', (e) => {
      const item = e.target.closest('.dropdown-item');
      if (item) {
        const action = item.dataset.action;
        const itemConfig = this.items.find(i => i.action === action);
        if (itemConfig?.onClick) itemConfig.onClick();
        this.close();
      }
    });
    
    document.addEventListener('click', () => this.close());
  }
  
  toggle() {
    this.element.classList.toggle('open');
  }
  
  close() {
    this.element.classList.remove('open');
  }
}

// ==================== 进度条渲染函数 ====================
function renderProgressBar(value, max, options = {}) {
  const percent = max > 0 ? (value / max * 100) : 0;
  const color = options.color || (percent > 80 ? 'error' : percent > 60 ? 'warning' : 'success');
  const size = options.size || '';
  const showLabel = options.showLabel !== false;
  
  return `
    <div class="progress-bar ${size}">
      <div class="progress-fill ${color}" style="width:${percent}%"></div>
    </div>
    ${showLabel ? `<div class="progress-label"><span>${options.leftLabel || ''}</span><span>${options.rightLabel || Math.round(percent) + '%'}</span></div>` : ''}
  `;
}

// ==================== 账号卡片渲染函数 ====================
function renderAccountCard(account) {
  const quota = account.quota;
  const isPriority = account.is_priority;
  const isActive = account.is_active;
  
  let statusBadge = '';
  if (!account.enabled) statusBadge = '<span class="badge">禁用</span>';
  else if (account.cooldown_remaining > 0) statusBadge = `<span class="badge warn">冷却 ${account.cooldown_remaining}s</span>`;
  else if (account.available) statusBadge = '<span class="badge success">正常</span>';
  else statusBadge = '<span class="badge error">不可用</span>';
  
  let quotaSection = '';
  if (quota && !quota.error) {
    const usedPercent = quota.usage_limit > 0 ? (quota.current_usage / quota.usage_limit * 100) : 0;
    quotaSection = `
      <div class="account-quota-section">
        <div class="quota-header">
          <span>已用/总额</span>
          <span>${quota.current_usage.toFixed(1)} / ${quota.usage_limit.toFixed(1)}</span>
        </div>
        ${renderProgressBar(quota.current_usage, quota.usage_limit, {
          color: quota.is_low_balance ? 'error' : usedPercent > 60 ? 'warning' : 'success',
          rightLabel: usedPercent.toFixed(1) + '%'
        })}
        <div class="quota-detail">
          ${quota.free_trial_limit > 0 ? `<span>试用: ${quota.free_trial_usage.toFixed(0)}/${quota.free_trial_limit.toFixed(0)}</span>` : ''}
          ${quota.bonus_limit > 0 ? `<span>奖励: ${quota.bonus_usage.toFixed(0)}/${quota.bonus_limit.toFixed(0)} (${quota.active_bonuses || 0}个)</span>` : ''}
          <span>更新: ${quota.updated_at || '未知'}</span>
        </div>
        ${quota.reset_date_text || quota.free_trial_expiry ? `
        <div class="quota-reset-info" style="font-size:0.75rem;color:var(--muted);margin-top:0.5rem">
          ${quota.reset_date_text ? `<span>🔄 重置: ${quota.reset_date_text}</span>` : ''}
          ${quota.free_trial_expiry ? `<span>🎁 试用过期: ${quota.trial_expiry_text}</span>` : ''}
        </div>
        ` : ''}
      </div>
    `;
  } else if (quota?.error) {
    quotaSection = `<div class="account-quota-section"><span class="badge error">额度获取失败: ${quota.error}</span></div>`;
  }
  
  return `
    <div class="account-card-enhanced ${isPriority ? 'priority' : ''} ${isActive ? 'active' : ''}" data-id="${account.id}">
      <div class="account-card-header">
        <div class="account-card-title">
          <strong>${account.name}</strong>
          <div class="account-card-badges">
            ${statusBadge}
            ${isPriority ? `<span class="badge info">优先 #${account.priority_order}</span>` : ''}
            ${isActive ? '<span class="badge success">活跃</span>' : ''}
            ${quota?.is_low_balance ? '<span class="badge warn">低额度</span>' : ''}
          </div>
        </div>
        <button class="secondary small" onclick="showAccountMenu('${account.id}', this)">操作 ▼</button>
      </div>
      ${quotaSection}
      <div class="account-stats-grid">
        <div class="account-stat"><div class="account-stat-value">${account.request_count}</div><div class="account-stat-label">请求数</div></div>
        <div class="account-stat"><div class="account-stat-value">${account.error_rate || '0%'}</div><div class="account-stat-label">错误率</div></div>
        <div class="account-stat"><div class="account-stat-value">${account.last_used_ago || '-'}</div><div class="account-stat-label">最后使用</div></div>
        <div class="account-stat"><div class="account-stat-value">${account.auth_method || '-'}</div><div class="account-stat-label">认证方式</div></div>
      </div>
    </div>
  `;
}

// ==================== 汇总面板渲染函数 ====================
function renderSummaryPanel(summary) {
  const strategyLabel = {
    lowest_balance: '剩余额度最少优先',
    round_robin: '轮询',
    least_requests: '请求最少优先',
    random: '随机'
  }[summary.strategy] || summary.strategy;

  return `
    <div class="summary-panel">
      <div class="summary-grid">
        <div class="summary-item"><div class="summary-value">${summary.total_accounts}</div><div class="summary-label">总账号</div></div>
        <div class="summary-item success"><div class="summary-value">${summary.available_accounts}</div><div class="summary-label">可用</div></div>
        <div class="summary-item warning"><div class="summary-value">${summary.cooldown_accounts}</div><div class="summary-label">冷却中</div></div>
        <div class="summary-item error"><div class="summary-value">${summary.unhealthy_accounts + summary.disabled_accounts}</div><div class="summary-label">不可用</div></div>
      </div>
      <div class="summary-quota">
        <div class="quota-header">
          <span>总剩余额度</span>
          <span style="font-weight:600">${summary.total_balance.toFixed(1)}</span>
        </div>
        ${renderProgressBar(summary.total_usage, summary.total_limit, {
          size: 'large',
          leftLabel: `已用 ${summary.total_usage.toFixed(0)}`,
          rightLabel: `总计 ${summary.total_limit.toFixed(0)}`
        })}
      </div>
      <div class="summary-info">
        <span>选择策略: ${strategyLabel}</span>
        <span>优先账号: ${summary.priority_accounts.length > 0 ? summary.priority_accounts.join(', ') : '无'}</span>
        <span>最后刷新: ${summary.last_refresh || '未刷新'}</span>
      </div>
      <div class="summary-actions">
        <button onclick="refreshAllQuotas()">刷新全部额度</button>
        <button class="secondary" onclick="loadAccountsEnhanced()">刷新列表</button>
      </div>
    </div>
  `;
}

// ==================== 账号操作菜单 ====================
let currentAccountMenu = null;

function showAccountMenu(accountId, btn) {
  if (currentAccountMenu) {
    currentAccountMenu.remove();
    currentAccountMenu = null;
  }
  
  const menu = document.createElement('div');
  menu.className = 'dropdown-menu';
  menu.style.cssText = 'display:block;position:absolute;z-index:100;';
  menu.innerHTML = `
    <div class="dropdown-item" onclick="refreshAccountQuota('${accountId}')">🔄 刷新额度</div>
    <div class="dropdown-item" onclick="togglePriority('${accountId}')">⭐ 设为优先</div>
    <div class="dropdown-item" onclick="toggleAccount('${accountId}')">🔒 启用/禁用</div>
    <div class="dropdown-divider"></div>
    <div class="dropdown-item danger" onclick="confirmDeleteAccount('${accountId}')">🗑️ 删除账号</div>
  `;
  
  const rect = btn.getBoundingClientRect();
  menu.style.top = (rect.bottom + window.scrollY) + 'px';
  menu.style.left = (rect.left + window.scrollX - 100) + 'px';
  
  document.body.appendChild(menu);
  currentAccountMenu = menu;
  
  setTimeout(() => {
    document.addEventListener('click', function closeMenu() {
      if (currentAccountMenu) {
        currentAccountMenu.remove();
        currentAccountMenu = null;
      }
      document.removeEventListener('click', closeMenu);
    }, { once: true });
  }, 0);
}

// ==================== 额度管理 API 调用 ====================
async function loadAccountsEnhanced() {
  showLoading('#accountsGrid', '加载账号列表...');
  try {
    const r = await fetchWithRetry('/api/accounts/status');
    const d = await r.json();
    if (d.ok) {
      $('#accountsSummaryCompact').innerHTML = renderSummaryCompact(d.summary);
      $('#accountsGrid').innerHTML = d.accounts.map(renderAccountCardCompact).join('');
    } else {
      $('#accountsGrid').innerHTML = `<p style="color:var(--error);text-align:center;padding:2rem">加载失败: ${d.error || '未知错误'}</p>`;
    }
  } catch(e) {
    $('#accountsGrid').innerHTML = `<p style="color:var(--error);text-align:center;padding:2rem">网络错误，<a href="#" onclick="loadAccountsEnhanced();return false">点击重试</a></p>`;
    Toast.error('加载账号列表失败');
  }
}

// ==================== 紧凑汇总面板 ====================
function renderSummaryCompact(summary) {
  const usedPercent = summary.total_limit > 0 ? (summary.total_usage / summary.total_limit * 100) : 0;
  const barColor = usedPercent > 80 ? 'var(--error)' : usedPercent > 60 ? 'var(--warn)' : 'var(--success)';
  return `
    <div class="summary-compact">
      <div class="summary-compact-item">
        <span class="summary-compact-value">${summary.total_accounts}</span>
        <span class="summary-compact-label">总账号</span>
      </div>
      <div class="summary-compact-item">
        <span class="summary-compact-value" style="color:var(--success)">${summary.available_accounts}</span>
        <span class="summary-compact-label">可用</span>
      </div>
      <div class="summary-compact-item">
        <span class="summary-compact-value" style="color:var(--warn)">${summary.cooldown_accounts}</span>
        <span class="summary-compact-label">冷却</span>
      </div>
      <div class="summary-compact-divider"></div>
      <div class="summary-quota-bar">
        <div style="display:flex;justify-content:space-between;font-size:0.75rem;margin-bottom:0.25rem">
          <span>总额度</span>
          <span>${summary.total_balance.toFixed(0)} / ${summary.total_limit.toFixed(0)}</span>
        </div>
        <div style="height:6px;background:var(--bg);border-radius:3px;overflow:hidden">
          <div style="height:100%;width:${usedPercent}%;background:${barColor}"></div>
        </div>
      </div>
      <div class="summary-compact-item" style="margin-left:auto">
        <span class="summary-compact-label">${summary.last_refresh || '未刷新'}</span>
      </div>
    </div>
  `;
}

// ==================== 紧凑账号卡片 ====================
function renderAccountCardCompact(account) {
  const quota = account.quota;
  const isPriority = account.is_priority;
  const isLowBalance = quota?.is_low_balance;
  const isExhausted = quota?.is_exhausted || (quota && quota.balance <= 0);  // 额度耗尽
  const isSuspended = quota?.is_suspended;  // 账号被封禁
  const isUnavailable = !account.available;
  
  let cardClass = 'account-card-compact';
  if (isPriority) cardClass += ' priority';
  if (isSuspended) cardClass += ' suspended';  // 封禁状态
  else if (isExhausted) cardClass += ' exhausted';  // 无额度状态
  else if (isLowBalance) cardClass += ' low-balance';
  if (isUnavailable) cardClass += ' unavailable';
  
  // 状态徽章
  let statusBadges = '';
  if (!account.enabled) statusBadges += '<span class="badge">禁用</span>';
  else if (account.cooldown_remaining > 0) statusBadges += `<span class="badge warn">冷却</span>`;
  else if (account.available) statusBadges += '<span class="badge success">正常</span>';
  else statusBadges += '<span class="badge error">异常</span>';
  
  if (isPriority) statusBadges += `<span class="badge info">#${account.priority_order}</span>`;
  // Provider 徽章 (Google/Github)
  if (account.provider) {
    const providerIcon = account.provider === 'Google' ? '🔵' : account.provider === 'Github' ? '⚫' : '';
    statusBadges += `<span class="badge" title="${account.provider} 登录">${providerIcon}${account.provider}</span>`;
  }
  // 状态徽章：封禁（红色）> 无额度（红色）> 低额度（黄色）
  if (isSuspended) statusBadges += '<span class="badge error">已封禁</span>';
  else if (isExhausted) statusBadges += '<span class="badge error">无额度</span>';
  else if (isLowBalance) statusBadges += '<span class="badge warn">低额度</span>';
  
  // Token 过期状态徽章
  if (account.token_expired) statusBadges += '<span class="badge error">Token过期</span>';
  else if (account.token_expiring_soon) statusBadges += '<span class="badge warn">Token即将过期</span>';
  
  // 额度条 - 根据状态显示不同颜色
  let quotaBar = '';
  if (quota && !quota.error) {
    const usedPercent = quota.usage_limit > 0 ? (quota.current_usage / quota.usage_limit * 100) : 0;
    // 颜色逻辑：无额度(红色) > 低额度(黄色) > 正常(绿色)
    let barColor = 'var(--success)';
    if (isExhausted) barColor = 'var(--error)';
    else if (isLowBalance) barColor = 'var(--warn)';
    else if (usedPercent > 60) barColor = 'var(--warn)';
    
    quotaBar = `
      <div class="account-card-quota">
        <div class="account-card-quota-bar">
          <div class="account-card-quota-fill" style="width:${usedPercent}%;background:${barColor}"></div>
        </div>
        <div class="account-card-quota-text">
          <span>${quota.current_usage.toFixed(1)} / ${quota.usage_limit.toFixed(1)}</span>
          <span>${usedPercent.toFixed(0)}%</span>
        </div>
        ${quota.reset_date_text || quota.trial_expiry_text ? `
        <div class="account-card-reset-info" style="font-size:0.65rem;color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap">
          ${quota.reset_date_text ? `<span title="下次重置时间">🔄 ${quota.reset_date_text}</span>` : ''}
          ${quota.trial_expiry_text ? `<span title="免费试用过期">🎁 ${quota.trial_expiry_text}</span>` : ''}
        </div>
        ` : ''}
      </div>
    `;
  } else if (quota?.error) {
    // 额度获取失败时显示重试按钮
    // 如果是封禁错误，显示封禁状态
    const errorMsg = quota.error;
    const isSuspendedError = errorMsg && (
      errorMsg.toLowerCase().includes('temporarily_suspended') ||
      errorMsg.toLowerCase().includes('suspended') ||
      errorMsg.toLowerCase().includes('accountsuspendedexception')
    );
    
    if (isSuspendedError) {
      quotaBar = `
        <div class="account-card-quota">
          <span style="font-size:0.7rem;color:var(--error)">账号已封禁</span>
          <button class="secondary small" style="margin-left:0.5rem;padding:0.15rem 0.4rem;font-size:0.65rem" onclick="event.stopPropagation();refreshSingleAccountQuota('${account.id}')">重试</button>
        </div>
      `;
    } else {
      quotaBar = `
        <div class="account-card-quota">
          <span style="font-size:0.7rem;color:var(--error)">额度获取失败: ${quota.error}</span>
          <button class="secondary small" style="margin-left:0.5rem;padding:0.15rem 0.4rem;font-size:0.65rem" onclick="event.stopPropagation();refreshSingleAccountQuota('${account.id}')">重试</button>
        </div>
      `;
    }
  } else {
    // 未查询额度时显示查询按钮
    quotaBar = `
      <div class="account-card-quota">
        <span style="font-size:0.7rem;color:var(--muted)">额度未查询</span>
        <button class="secondary small" style="margin-left:0.5rem;padding:0.15rem 0.4rem;font-size:0.65rem" onclick="event.stopPropagation();refreshSingleAccountQuota('${account.id}')">查询</button>
      </div>
    `;
  }
  
  // Token 过期时间显示
  let tokenExpireInfo = '';
  if (account.token_expires_at) {
    // expires_at 可能是 ISO 字符串或时间戳
    let expireDate;
    if (typeof account.token_expires_at === 'string') {
      // ISO 格式字符串
      expireDate = new Date(account.token_expires_at);
    } else if (account.token_expires_at > 1000000000000) {
      // 毫秒时间戳
      expireDate = new Date(account.token_expires_at);
    } else {
      // 秒时间戳
      expireDate = new Date(account.token_expires_at * 1000);
    }
    
    const now = new Date();
    const diffMs = expireDate - now;
    
    // 检查是否为有效日期
    if (!isNaN(expireDate.getTime()) && !isNaN(diffMs)) {
      const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
      const diffDays = Math.floor(diffHours / 24);
      
      let expireText = '';
      if (diffMs < 0) {
        expireText = '已过期';
      } else if (diffDays > 0) {
        expireText = `${diffDays}天`;
      } else if (diffHours > 0) {
        expireText = `${diffHours}时`;
      } else {
        const diffMins = Math.floor(diffMs / (1000 * 60));
        expireText = diffMins > 0 ? `${diffMins}分` : '即将过期';
      }
      tokenExpireInfo = `<span title="Token过期: ${expireDate.toLocaleString()}">Token ${expireText}</span>`;
    }
  }
  
  return `
    <div class="${cardClass}" data-id="${account.id}" id="account-card-${account.id.replace(/[^a-zA-Z0-9]/g, '_')}">
      <div class="account-card-top">
        <div class="account-card-info">
          <div class="account-card-name">${account.name}</div>
          <div class="account-card-email">${account.id}</div>
        </div>
        <div class="account-card-status">${statusBadges}</div>
      </div>
      ${quotaBar}
      <div class="account-card-stats">
        <span>请求: ${account.request_count}</span>
        <span>错误: ${account.error_count}</span>
        ${tokenExpireInfo}
      </div>
      <div class="account-card-actions">
        <button class="secondary small" onclick="testAccountToken('${account.id}')">测试</button>
        <button class="secondary small" onclick="refreshSingleAccountQuota('${account.id}')">刷新</button>
        <button class="secondary small" onclick="showEditAccountModal('${account.id}', '${account.name.replace(/'/g, "\\'")}')">编辑</button>
        <button class="secondary small" onclick="togglePriority('${account.id}')">${isPriority ? '取消优先' : '优先'}</button>
        <button class="secondary small" onclick="toggleAccount('${account.id}')">${account.enabled ? '禁用' : '启用'}</button>
        <button class="secondary small" style="color:var(--error)" onclick="confirmDeleteAccount('${account.id}')">删除</button>
      </div>
    </div>
  `;
}

// ==================== 导入导出菜单 ====================
let importExportMenu = null;

function showImportExportMenu(btn) {
  if (importExportMenu) {
    importExportMenu.remove();
    importExportMenu = null;
    return;
  }
  
  const menu = document.createElement('div');
  menu.className = 'dropdown-menu';
  menu.style.cssText = 'display:block;position:absolute;z-index:100;min-width:140px;';
  menu.innerHTML = `
    <div class="dropdown-item" onclick="exportAccounts()">📤 导出账号</div>
    <div class="dropdown-item" onclick="importAccounts()">📥 导入账号</div>
    <div class="dropdown-divider"></div>
    <div class="dropdown-item" onclick="refreshAllTokens()">🔄 刷新 Token</div>
  `;
  
  const rect = btn.getBoundingClientRect();
  menu.style.top = (rect.bottom + window.scrollY + 4) + 'px';
  menu.style.left = (rect.left + window.scrollX) + 'px';
  
  document.body.appendChild(menu);
  importExportMenu = menu;
  
  setTimeout(() => {
    document.addEventListener('click', function closeMenu(e) {
      if (importExportMenu && !importExportMenu.contains(e.target)) {
        importExportMenu.remove();
        importExportMenu = null;
      }
      document.removeEventListener('click', closeMenu);
    }, { once: true });
  }, 10);
}

async function refreshAllQuotas() {
  // 检查是否正在刷新中
  if (GlobalProgressBar.isRefreshing) {
    Toast.warning('正在刷新中，请稍候...');
    return;
  }
  
  try {
    // 先获取账号数量用于显示
    const statusR = await fetch('/api/accounts/status');
    const statusD = await statusR.json();
    const total = statusD.ok ? statusD.accounts?.length || 0 : 0;
    
    // 显示进度条
    GlobalProgressBar.show(total);
    
    // 调用新的批量刷新 API
    const r = await fetch('/api/refresh/all', { method: 'POST' });
    const d = await r.json();
    
    if (d.ok) {
      // 开始轮询进度
      GlobalProgressBar.startPolling();
    } else {
      GlobalProgressBar.hide();
      Toast.error('启动刷新失败: ' + (d.error || '未知错误'));
    }
  } catch(e) {
    GlobalProgressBar.hide();
    Toast.error('刷新失败: ' + e.message);
  }
}

async function refreshAccountQuota(accountId) {
  Toast.info('正在刷新额度...');
  try {
    const r = await fetch(`/api/accounts/${accountId}/refresh-quota`, { method: 'POST' });
    const d = await r.json();
    if (d.ok) {
      Toast.success('额度刷新成功');
      loadAccounts();
      loadAccountsEnhanced();
    } else {
      Toast.error(d.error || '刷新失败');
    }
  } catch(e) {
    Toast.error('刷新失败: ' + e.message);
  }
}

// ==================== 测试账号 Token ====================
async function testAccountToken(accountId) {
  // 显示测试中的模态框
  const modal = document.createElement('div');
  modal.className = 'modal';
  modal.id = 'testTokenModal';
  modal.innerHTML = `
    <div class="modal-content" style="max-width:500px">
      <div class="modal-header">
        <h3>测试 Token</h3>
        <button class="close-btn" onclick="closeTestTokenModal()">&times;</button>
      </div>
      <div class="modal-body" id="testTokenResult">
        <div style="text-align:center;padding:2rem">
          <div class="spinner"></div>
          <p style="margin-top:1rem;color:var(--muted)">正在测试 Token...</p>
        </div>
      </div>
    </div>
  `;
  document.body.appendChild(modal);
  modal.style.display = 'flex';
  
  try {
    const r = await fetch('/api/accounts/' + accountId + '/test');
    const d = await r.json();
    
    const resultDiv = document.getElementById('testTokenResult');
    if (!resultDiv) return;
    
    if (d.ok) {
      // 测试通过
      let testsHtml = '';
      for (const [key, test] of Object.entries(d.tests || {})) {
        const icon = test.passed ? '✅' : '❌';
        const color = test.passed ? 'var(--success)' : 'var(--error)';
        testsHtml += `
          <div style="display:flex;align-items:flex-start;gap:0.5rem;padding:0.5rem 0;border-bottom:1px solid var(--border)">
            <span style="font-size:1.2rem">${icon}</span>
            <div style="flex:1">
              <div style="font-weight:500">${test.message}</div>
              ${test.suggestion ? `<div style="font-size:0.8rem;color:var(--muted);margin-top:0.25rem">${test.suggestion}</div>` : ''}
              ${test.latency_ms ? `<div style="font-size:0.75rem;color:var(--muted)">延迟: ${test.latency_ms.toFixed(0)}ms</div>` : ''}
              ${test.email ? `<div style="font-size:0.75rem;color:var(--muted)">邮箱: ${test.email}</div>` : ''}
            </div>
          </div>
        `;
      }
      
      resultDiv.innerHTML = `
        <div style="text-align:center;margin-bottom:1rem">
          <span style="font-size:3rem">✅</span>
          <h3 style="margin:0.5rem 0;color:var(--success)">Token 有效</h3>
          <p style="color:var(--muted)">${d.summary}</p>
        </div>
        <div style="background:var(--bg);border-radius:8px;padding:0.5rem 1rem">
          ${testsHtml}
        </div>
      `;
    } else {
      // 测试失败
      let testsHtml = '';
      for (const [key, test] of Object.entries(d.tests || {})) {
        const icon = test.passed ? '✅' : '❌';
        testsHtml += `
          <div style="display:flex;align-items:flex-start;gap:0.5rem;padding:0.5rem 0;border-bottom:1px solid var(--border)">
            <span style="font-size:1.2rem">${icon}</span>
            <div style="flex:1">
              <div style="font-weight:500">${test.message}</div>
              ${test.suggestion ? `<div style="font-size:0.8rem;color:var(--warn);margin-top:0.25rem">💡 ${test.suggestion}</div>` : ''}
            </div>
          </div>
        `;
      }
      
      resultDiv.innerHTML = `
        <div style="text-align:center;margin-bottom:1rem">
          <span style="font-size:3rem">❌</span>
          <h3 style="margin:0.5rem 0;color:var(--error)">Token 无效</h3>
          <p style="color:var(--muted)">${d.summary || d.error || '测试失败'}</p>
        </div>
        ${Object.keys(d.tests || {}).length > 0 ? `
          <div style="background:var(--bg);border-radius:8px;padding:0.5rem 1rem">
            ${testsHtml}
          </div>
        ` : ''}
        <div style="margin-top:1rem;text-align:center">
          <button class="primary" onclick="refreshSingleAccountToken('${accountId}');closeTestTokenModal()">刷新 Token</button>
        </div>
      `;
    }
  } catch(e) {
    const resultDiv = document.getElementById('testTokenResult');
    if (resultDiv) {
      resultDiv.innerHTML = `
        <div style="text-align:center;padding:2rem">
          <span style="font-size:3rem">⚠️</span>
          <h3 style="margin:0.5rem 0;color:var(--error)">测试失败</h3>
          <p style="color:var(--muted)">${e.message}</p>
        </div>
      `;
    }
  }
}

function closeTestTokenModal() {
  const modal = document.getElementById('testTokenModal');
  if (modal) modal.remove();
}

// ==================== 单账号额度查询 (任务 19.2) ====================
async function refreshSingleAccountQuota(accountId) {
  // 获取按钮元素，显示加载状态
  const safeId = accountId.replace(/[^a-zA-Z0-9]/g, '_');
  const btn = document.getElementById('quota-btn-' + safeId);
  const card = document.getElementById('account-card-' + safeId);
  
  if (btn) {
    btn.disabled = true;
    btn.dataset.originalText = btn.textContent;
    btn.textContent = '查询中...';
  }
  
  try {
    const r = await fetch(`/api/accounts/${accountId}/refresh-quota`, { method: 'POST' });
    const d = await r.json();
    
    if (d.ok) {
      Toast.success('额度查询成功');
      // 刷新整个账号列表以更新显示
      loadAccounts();
      loadAccountsEnhanced();
    } else {
      // 失败时显示错误信息和重试按钮
      Toast.error(d.error || '额度查询失败');
      if (btn) {
        btn.textContent = '重试';
        btn.disabled = false;
        btn.classList.add('error-state');
      }
      // 在卡片上显示错误状态
      if (card) {
        const quotaDiv = card.querySelector('.account-card-quota');
        if (quotaDiv) {
          quotaDiv.innerHTML = `
            <span style="font-size:0.7rem;color:var(--error)">查询失败: ${d.error || '未知错误'}</span>
            <button class="secondary small" style="margin-left:0.5rem;padding:0.15rem 0.4rem;font-size:0.65rem" onclick="event.stopPropagation();refreshSingleAccountQuota('${accountId}')">重试</button>
          `;
        }
      }
    }
  } catch(e) {
    Toast.error('网络错误: ' + e.message);
    if (btn) {
      btn.textContent = '重试';
      btn.disabled = false;
    }
  } finally {
    // 恢复按钮状态（如果没有错误）
    if (btn && !btn.classList.contains('error-state')) {
      btn.disabled = false;
      if (btn.dataset.originalText) {
        btn.textContent = btn.dataset.originalText;
      }
    }
    if (btn) {
      btn.classList.remove('error-state');
    }
  }
}

// ==================== 单账号 Token 刷新 (任务 19.2) ====================
async function refreshSingleAccountToken(accountId) {
  // 获取按钮元素，显示加载状态
  const safeId = accountId.replace(/[^a-zA-Z0-9]/g, '_');
  const btn = document.getElementById('token-btn-' + safeId);
  
  if (btn) {
    btn.disabled = true;
    btn.dataset.originalText = btn.textContent;
    btn.textContent = '刷新中...';
  }
  
  try {
    const r = await fetch(`/api/accounts/${accountId}/refresh`, { method: 'POST' });
    const d = await r.json();
    
    if (d.ok) {
      Toast.success('Token 刷新成功');
      // 刷新整个账号列表以更新显示
      loadAccounts();
      loadAccountsEnhanced();
    } else {
      // 失败时显示错误信息
      Toast.error(d.message || d.error || 'Token 刷新失败');
      if (btn) {
        btn.textContent = '重试';
        btn.disabled = false;
      }
    }
  } catch(e) {
    Toast.error('网络错误: ' + e.message);
    if (btn) {
      btn.textContent = '重试';
      btn.disabled = false;
    }
  } finally {
    // 恢复按钮状态
    if (btn && btn.textContent !== '重试') {
      btn.disabled = false;
      if (btn.dataset.originalText) {
        btn.textContent = btn.dataset.originalText;
      }
    }
  }
}

async function togglePriority(accountId) {
  try {
    // 先检查是否已是优先账号
    const r1 = await fetch('/api/priority');
    const d1 = await r1.json();
    const isPriority = d1.priority_accounts?.some(a => a.id === accountId);
    
    if (isPriority) {
      const r = await fetch(`/api/priority/${accountId}`, { method: 'DELETE' });
      const d = await r.json();
      Toast.show(d.message, d.ok ? 'success' : 'error');
    } else {
      const r = await fetch(`/api/priority/${accountId}`, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: '{}' });
      const d = await r.json();
      Toast.show(d.message, d.ok ? 'success' : 'error');
    }
    loadAccounts();
    loadAccountsEnhanced();
  } catch(e) {
    Toast.error('操作失败: ' + e.message);
  }
}

function confirmDeleteAccount(accountId) {
  Modal.danger('删除账号', `确定要删除账号 ${accountId} 吗？此操作不可恢复。`, async () => {
    try {
      const r = await fetch(`/api/accounts/${accountId}`, { method: 'DELETE' });
      const d = await r.json();
      if (d.ok) {
        Toast.success('账号已删除');
        loadAccounts();
        loadAccountsEnhanced();
      } else {
        Toast.error('删除失败');
      }
    } catch(e) {
      Toast.error('删除失败: ' + e.message);
    }
  });
}

// ==================== 账号编辑功能 ====================
function showEditAccountModal(accountId, currentName) {
  const modal = new Modal({
    title: '编辑账号',
    content: `
      <div style="display:grid;gap:1rem" id="editAccountForm">
        <div>
          <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">账号名称</label>
          <input type="text" id="editAccountName" value="${currentName}" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)">
        </div>
        <div>
          <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">登录提供商</label>
          <select id="editAccountProvider" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)">
            <option value="">未知</option>
            <option value="Google">Google</option>
            <option value="Github">GitHub</option>
          </select>
        </div>
        <div>
          <label style="display:block;font-size:0.875rem;color:var(--muted);margin-bottom:0.25rem">区域</label>
          <input type="text" id="editAccountRegion" placeholder="us-east-1" style="width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)">
        </div>
        <div id="tokenInfoSection" style="display:none">
          <hr style="border:none;border-top:1px solid var(--border);margin:0.5rem 0">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
            <label style="font-size:0.875rem;color:var(--muted)">Token 信息</label>
            <button type="button" class="secondary small" id="refreshTokenBtn" onclick="refreshTokenInModal('${accountId}')" style="padding:0.25rem 0.5rem;font-size:0.75rem">🔄 刷新 Token</button>
          </div>
          <div id="tokenDetails" style="font-size:0.75rem"></div>
        </div>
      </div>
    `,
    confirmText: '保存',
    onConfirm: async () => {
      const name = document.getElementById('editAccountName').value.trim();
      const provider = document.getElementById('editAccountProvider').value;
      const region = document.getElementById('editAccountRegion').value.trim();
      
      const updateData = {};
      if (name) updateData.name = name;
      if (provider) updateData.provider = provider;
      if (region) updateData.region = region;
      
      try {
        const r = await fetch(`/api/accounts/${accountId}`, {
          method: 'PUT',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(updateData)
        });
        const d = await r.json();
        if (d.ok) {
          Toast.success(d.message || '账号已更新');
          loadAccounts();
          loadAccountsEnhanced();
        } else {
          Toast.error(d.error || '更新失败');
        }
      } catch(e) {
        Toast.error('更新失败: ' + e.message);
      }
    }
  });
  modal.show();
  
  // 加载当前账号信息填充表单
  loadAccountForEdit(accountId);
}

async function refreshTokenInModal(accountId) {
  const btn = document.getElementById('refreshTokenBtn');
  if (btn) {
    btn.disabled = true;
    btn.textContent = '刷新中...';
  }
  
  try {
    const r = await fetch(`/api/accounts/${accountId}/refresh`, { method: 'POST' });
    const d = await r.json();
    if (d.ok) {
      Toast.success('Token 刷新成功');
      // 重新加载账号信息
      await loadAccountForEdit(accountId);
      loadAccounts();
      loadAccountsEnhanced();
    } else {
      Toast.error(d.message || d.error || 'Token 刷新失败');
    }
  } catch(e) {
    Toast.error('刷新失败: ' + e.message);
  } finally {
    if (btn) {
      btn.disabled = false;
      btn.textContent = '🔄 刷新 Token';
    }
  }
}

function copyToClipboard(text, label) {
  navigator.clipboard.writeText(text).then(() => {
    Toast.success(label + ' 已复制');
  }).catch(() => {
    // 降级方案
    const ta = document.createElement('textarea');
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    document.body.removeChild(ta);
    Toast.success(label + ' 已复制');
  });
}

function renderTokenField(label, value, fieldId) {
  if (!value) return '';
  const shortValue = value.length > 50 ? value.substring(0, 50) + '...' : value;
  return `
    <div style="margin-bottom:0.5rem">
      <div style="display:flex;justify-content:space-between;align-items:center">
        <span style="color:var(--muted)">${label}:</span>
        <button type="button" class="secondary small" onclick="copyToClipboard(document.getElementById('${fieldId}').dataset.full, '${label}')" style="padding:0.15rem 0.4rem;font-size:0.65rem">复制</button>
      </div>
      <div id="${fieldId}" data-full="${value.replace(/"/g, '&quot;')}" style="background:var(--bg);padding:0.5rem;border-radius:4px;word-break:break-all;font-family:monospace;margin-top:0.25rem;max-height:60px;overflow-y:auto">${shortValue}</div>
    </div>
  `;
}

async function loadAccountForEdit(accountId) {
  try {
    const r = await fetch(`/api/accounts/${accountId}`);
    const d = await r.json();
    
    const providerSelect = document.getElementById('editAccountProvider');
    const regionInput = document.getElementById('editAccountRegion');
    const tokenSection = document.getElementById('tokenInfoSection');
    const tokenDetails = document.getElementById('tokenDetails');
    
    if (d.credentials) {
      if (providerSelect && d.credentials.provider) {
        providerSelect.value = d.credentials.provider;
      }
      if (regionInput && d.credentials.region) {
        regionInput.value = d.credentials.region;
      }
      
      // 显示 Token 信息
      if (tokenSection && tokenDetails) {
        tokenSection.style.display = 'block';
        
        let html = '';
        
        // Access Token
        if (d.credentials.access_token) {
          html += renderTokenField('Access Token', d.credentials.access_token, 'field_access_token');
        }
        
        // Refresh Token
        if (d.credentials.refresh_token) {
          html += renderTokenField('Refresh Token', d.credentials.refresh_token, 'field_refresh_token');
        }
        
        // Profile ARN
        if (d.credentials.profile_arn) {
          html += renderTokenField('Profile ARN', d.credentials.profile_arn, 'field_profile_arn');
        }
        
        // Client ID
        if (d.credentials.client_id) {
          html += renderTokenField('Client ID', d.credentials.client_id, 'field_client_id');
        }
        
        // 过期时间
        if (d.credentials.expires_at) {
          const expiresAt = new Date(d.credentials.expires_at);
          const now = new Date();
          const diffMs = expiresAt - now;
          const diffMins = Math.floor(diffMs / 60000);
          let expiryText = expiresAt.toLocaleString();
          if (diffMs < 0) {
            expiryText += ' <span style="color:var(--error)">(已过期)</span>';
          } else if (diffMins < 60) {
            expiryText += ' <span style="color:var(--warning)">(' + diffMins + '分钟后过期)</span>';
          } else {
            expiryText += ' <span style="color:var(--success)">(' + Math.floor(diffMins/60) + '小时后过期)</span>';
          }
          html += '<div style="margin-bottom:0.5rem"><span style="color:var(--muted)">过期时间:</span> ' + expiryText + '</div>';
        }
        
        // Auth Method
        if (d.credentials.auth_method) {
          html += '<div style="margin-bottom:0.5rem"><span style="color:var(--muted)">认证方式:</span> ' + d.credentials.auth_method + '</div>';
        }
        
        tokenDetails.innerHTML = html || '<span style="color:var(--muted)">无 Token 信息</span>';
      }
    }
  } catch(e) {
    console.error('加载账号信息失败:', e);
  }
}

// ==================== 自动刷新功能 (任务 10.2) ====================
let autoRefreshTimer = null;
const AUTO_REFRESH_INTERVAL = 60000; // 60秒

function startAutoRefresh() {
  if (autoRefreshTimer) clearInterval(autoRefreshTimer);
  autoRefreshTimer = setInterval(() => {
    const accountsTab = document.querySelector('.tab[data-tab="accounts"]');
    if (accountsTab && accountsTab.classList.contains('active')) {
      loadAccounts();
      loadAccountsEnhanced();
    }
  }, AUTO_REFRESH_INTERVAL);
}

function stopAutoRefresh() {
  if (autoRefreshTimer) {
    clearInterval(autoRefreshTimer);
    autoRefreshTimer = null;
  }
}

// 页面加载时启动自动刷新
startAutoRefresh();

// 页面初始化：如果默认显示账号页面，则加载账号数据
function initializeDefaultTab() {
  const accountsTab = document.querySelector('.tab[data-tab="accounts"]');
  const accountsPanel = document.querySelector('#accounts');

  // 检查账号标签页和面板是否都处于激活状态（默认页面）
  if (accountsTab && accountsTab.classList.contains('active') &&
      accountsPanel && accountsPanel.classList.contains('active')) {
    // 延迟一点时间确保DOM完全加载
    setTimeout(() => {
      loadAccounts();
      loadAccountsEnhanced();
    }, 100);
  }
}

// 页面加载完成后初始化默认标签页
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initializeDefaultTab);
} else {
  initializeDefaultTab();
}

// ==================== 加载状态指示器 (任务 10.1) ====================
function showLoading(container, message = '加载中...') {
  const el = typeof container === 'string' ? document.querySelector(container) : container;
  if (el) {
    el.innerHTML = `<div style="text-align:center;padding:2rem;color:var(--muted)">
      <div style="display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite"></div>
      <p style="margin-top:0.5rem">${message}</p>
    </div>`;
  }
}

// 添加旋转动画
if (!document.querySelector('#spinKeyframes')) {
  const style = document.createElement('style');
  style.id = 'spinKeyframes';
  style.textContent = '@keyframes spin { to { transform: rotate(360deg); } }';
  document.head.appendChild(style);
}

// ==================== 表单验证 (任务 10.3) ====================
function validateToken(token) {
  if (!token || token.trim().length === 0) {
    return { valid: false, error: 'Token 不能为空' };
  }
  if (token.trim().length < 20) {
    return { valid: false, error: 'Token 格式不正确，长度过短' };
  }
  return { valid: true };
}

function validateAccountName(name) {
  if (!name || name.trim().length === 0) {
    return { valid: true, default: '手动添加账号' }; // 名称可选
  }
  if (name.length > 50) {
    return { valid: false, error: '账号名称不能超过50个字符' };
  }
  return { valid: true };
}

// ==================== 网络错误处理 (任务 10.1) ====================
async function fetchWithRetry(url, options = {}, retries = 2) {
  for (let i = 0; i <= retries; i++) {
    try {
      const r = await fetch(url, options);
      if (!r.ok && r.status >= 500 && i < retries) {
        await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
        continue;
      }
      return r;
    } catch (e) {
      if (i === retries) throw e;
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
}

// ==================== 全局进度条组件 (任务 18.1) ====================
const GlobalProgressBar = {
  pollTimer: null,
  isRefreshing: false,
  
  // 显示进度条
  show(total) {
    this.isRefreshing = true;
    const bar = $('#globalProgressBar');
    if (bar) {
      bar.classList.add('active');
      // 重置显示
      $('#globalProgressTitle').textContent = '正在刷新额度...';
      $('#globalProgressCompleted').textContent = '0';
      $('#globalProgressTotal').textContent = total || '0';
      $('#globalProgressSuccess').textContent = '0';
      $('#globalProgressFailed').textContent = '0';
      $('#globalProgressFill').style.width = '0%';
      $('#globalProgressFill').classList.remove('complete');
      $('#globalProgressCurrent').textContent = '准备中...';
      $('#globalProgressClose').style.display = 'none';
      // 显示 spinner
      const spinner = bar.querySelector('.spinner');
      if (spinner) spinner.style.display = 'inline-block';
    }
    // 禁用刷新按钮
    this.updateRefreshButton(true);
  },
  
  // 更新进度
  update(progress) {
    if (!progress) return;
    
    const completed = progress.completed || 0;
    const total = progress.total || 0;
    const success = progress.success || 0;
    const failed = progress.failed || 0;
    const current = progress.current_account || '';
    const isComplete = progress.status === 'completed' || progress.status === 'idle';
    
    // 更新数字
    $('#globalProgressCompleted').textContent = completed;
    $('#globalProgressTotal').textContent = total;
    $('#globalProgressSuccess').textContent = success;
    $('#globalProgressFailed').textContent = failed;
    
    // 更新进度条
    const percent = total > 0 ? (completed / total * 100) : 0;
    const fill = $('#globalProgressFill');
    if (fill) {
      fill.style.width = percent + '%';
      if (isComplete) {
        fill.classList.add('complete');
      }
    }
    
    // 更新当前处理的账号
    if (current) {
      $('#globalProgressCurrent').textContent = '正在处理: ' + current;
    } else if (isComplete) {
      $('#globalProgressCurrent').textContent = `刷新完成: 成功 ${success} 个, 失败 ${failed} 个`;
    }
    
    // 完成后的处理
    if (isComplete) {
      this.isRefreshing = false;
      $('#globalProgressTitle').textContent = '刷新完成';
      $('#globalProgressClose').style.display = 'inline-block';
      // 隐藏 spinner
      const spinner = $('#globalProgressBar')?.querySelector('.spinner');
      if (spinner) spinner.style.display = 'none';
      // 恢复刷新按钮
      this.updateRefreshButton(false);
      // 刷新账号列表
      loadAccounts();
      loadAccountsEnhanced();
      // 显示完成通知
      if (failed > 0) {
        Toast.warning(`刷新完成: 成功 ${success} 个, 失败 ${failed} 个`);
      } else {
        Toast.success(`刷新完成: 成功 ${success} 个`);
      }
      // 5秒后自动关闭进度条
      setTimeout(() => this.hide(), 5000);
    }
  },
  
  // 隐藏进度条
  hide() {
    const bar = $('#globalProgressBar');
    if (bar) {
      bar.classList.remove('active');
    }
    this.isRefreshing = false;
    this.stopPolling();
    this.updateRefreshButton(false);
  },
  
  // 开始轮询进度
  startPolling() {
    this.stopPolling();
    this.pollTimer = setInterval(() => this.pollProgress(), 500);
  },
  
  // 停止轮询
  stopPolling() {
    if (this.pollTimer) {
      clearInterval(this.pollTimer);
      this.pollTimer = null;
    }
  },
  
  // 轮询进度 API
  async pollProgress() {
    try {
      const r = await fetch('/api/refresh/progress');
      const d = await r.json();
      if (d.ok) {
        // 传入 progress 对象，如果没有则传入整个响应（兼容）
        const progress = d.progress || d;
        // 添加 status 字段用于判断完成状态
        if (!d.is_refreshing && !progress.status) {
          progress.status = 'completed';
        }
        this.update(progress);
        // 如果完成则停止轮询
        if (!d.is_refreshing || progress.status === 'completed' || progress.status === 'idle') {
          this.stopPolling();
        }
      }
    } catch (e) {
      console.error('轮询进度失败:', e);
    }
  },
  
  // 更新刷新按钮状态
  updateRefreshButton(disabled) {
    // 查找所有刷新额度按钮
    const buttons = document.querySelectorAll('button');
    buttons.forEach(btn => {
      const text = btn.textContent;
      const originalText = btn.dataset.originalText;
      // 匹配"刷新额度"、"刷新全部额度"或已经变成"刷新中..."的按钮
      if (text.includes('刷新额度') || text.includes('刷新全部额度') || 
          text === '刷新中...' || 
          (originalText && (originalText.includes('刷新额度') || originalText.includes('刷新全部额度')))) {
        btn.disabled = disabled;
        if (disabled) {
          if (!btn.dataset.originalText) {
            btn.dataset.originalText = text;
          }
          btn.textContent = '刷新中...';
        } else if (btn.dataset.originalText) {
          btn.textContent = btn.dataset.originalText;
          delete btn.dataset.originalText;
        }
      }
    });
  }
};

// ==================== 进度轮询函数 (任务 18.2) ====================
async function pollRefreshProgress() {
  return GlobalProgressBar.pollProgress();
}
'''

JS_SCRIPTS = JS_UTILS + JS_TABS + JS_STATUS + JS_DOCS + JS_STATS + JS_LOGS + JS_ACCOUNTS + JS_LOGIN + JS_FLOWS + JS_SETTINGS + JS_UI_COMPONENTS + JS_AUTH


# ==================== 组装最终 HTML ====================
HTML_PAGE = f'''<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kiro API</title>
<link rel="icon" type="image/svg+xml" href="/assets/icon.svg">
<style>
{CSS_STYLES}
</style>
</head>
<body>
<div class="container">
{HTML_BODY}
<div class="footer">Kiro API Proxy v1.7.1 - Codex 工具调用 | 环境变量配置 | 限速开关修复</div>
</div>
<script>
{JS_SCRIPTS}
</script>
</body>
</html>'''