dsh-speedometer 0.0.0-stage → 0.1.0

package/lib/widget.js

@@ -0,0 +1,1447 @@
+/* DSH Speedometer — floating live-speed widget and conversation speed chart.
+ * Runs inside a closed shadow root so the host UI cannot leak styles in or out.
+ * All data comes from the dsh-speedometer host plugin; no network access beyond
+ * the same-origin routes it exposes.
+ */
+(function () {
+  'use strict'
+  if (window.__dshSpeedometerMounted) return
+  window.__dshSpeedometerMounted = true
+
+  const STATE_ROUTE = '/dsh-speed/state'
+  const EVENTS_ROUTE = '/dsh-speed/events'
+  const LS_KEY = 'dsh-speedometer.ui.v1'
+  const NS = 'http://www.w3.org/2000/svg'
+  const ALL_WINDOW = 100
+  const RECENT_WINDOW_MS = 60000
+  const RECENT_GAP_MS = 4000
+
+  const state = {
+    sessions: [],
+    activeSessionId: null,
+    selectedId: null,
+    manualSelection: false,
+    expanded: false,
+    chartMode: 'all',
+    chartOffset: 0,
+    connected: false,
+    mounted: false,
+  }
+  let root = null
+  let els = {}
+  let eventSource = null
+  let pollTimer = null
+  let renderQueued = false
+  let sessionSignature = ''
+  let chartHits = []
+  let chartGeometry = null
+  let chartRange = null
+  let hoverX = null
+  let drag = null
+  let chartDrag = null
+  let pillDrag = null
+  let suppressPillClick = false
+  let lastEventAt = 0
+
+  function loadPrefs() {
+    try {
+      const saved = JSON.parse(localStorage.getItem(LS_KEY) || '{}')
+      if (saved && typeof saved === 'object') {
+        if (saved.expanded === true) state.expanded = true
+        if (saved.chartMode === 'recent' || saved.chartMode === 'all') state.chartMode = saved.chartMode
+        if (Number.isFinite(saved.left) && Number.isFinite(saved.top)) {
+          drag = { left: saved.left, top: saved.top }
+        }
+        if (typeof saved.selectedId === 'string') state.selectedId = saved.selectedId
+        if (typeof saved.activeSessionId === 'string') state.activeSessionId = saved.activeSessionId
+        if (saved.manualSelection === true) state.manualSelection = true
+      }
+    } catch {}
+  }
+
+  function savePrefs() {
+    try {
+      const rect = els.wrap ? els.wrap.getBoundingClientRect() : null
+      localStorage.setItem(LS_KEY, JSON.stringify({
+        expanded: state.expanded,
+        chartMode: state.chartMode,
+        selectedId: state.selectedId || '',
+        activeSessionId: state.activeSessionId || '',
+        manualSelection: state.manualSelection === true,
+        left: rect && rect.width ? rect.left : undefined,
+        top: rect && rect.height ? rect.top : undefined,
+      }))
+    } catch {}
+  }
+
+  function fmt(value, digits = 1) {
+    if (typeof value !== 'number' || !Number.isFinite(value)) return '—'
+    if (Math.abs(value) >= 10000) return `${(value / 1000).toFixed(1)}k`
+    if (Math.abs(value) >= 100) return value.toFixed(0)
+    return value.toFixed(digits)
+  }
+
+  function fmtMs(ms) {
+    if (typeof ms !== 'number' || !Number.isFinite(ms) || ms < 0) return '—'
+    if (ms < 1000) return `${Math.round(ms)} ms`
+    return `${(ms / 1000).toFixed(ms < 10000 ? 2 : 1)} s`
+  }
+
+  function clock(ms) {
+    if (!Number.isFinite(ms) || ms < 0) return '0:00'
+    const total = Math.round(ms / 1000)
+    const h = Math.floor(total / 3600)
+    const m = Math.floor((total % 3600) / 60)
+    const s = total % 60
+    if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
+    return `${m}:${String(s).padStart(2, '0')}`
+  }
+
+  function esc(value) {
+    return String(value == null ? '' : value)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+  }
+
+  function sessionLabel(session) {
+    if (!session) return '未选择会话'
+    const title = String(session.label || '').trim()
+    if (title) return title
+    return `会话 ${String(session.id || '').slice(-6) || '—'}`
+  }
+
+  function modelLabel(session) {
+    if (!session) return ''
+    const model = String(session.model || '').trim()
+    const provider = String(session.provider || '').trim()
+    return model || provider || '未知模型'
+  }
+
+  function ensureSession(id, meta) {
+    if (!id) return null
+    let session = state.sessions.find((item) => item.id === id)
+    if (!session) {
+      session = {
+        id,
+        label: '',
+        model: '',
+        provider: '',
+        attempts: [],
+        count: 0,
+        updatedAt: Date.now(),
+        live: null,
+      }
+      state.sessions.unshift(session)
+    }
+    if (meta) {
+      if (typeof meta.label === 'string' && meta.label) session.label = meta.label
+      if (typeof meta.model === 'string' && meta.model) session.model = meta.model
+      if (typeof meta.provider === 'string' && meta.provider) session.provider = meta.provider
+      if (Number.isFinite(meta.updatedAt)) session.updatedAt = meta.updatedAt
+      if (Number.isFinite(meta.count)) session.count = meta.count
+    }
+    return session
+  }
+
+  function selectedSession() {
+    if (state.selectedId) {
+      const chosen = state.sessions.find((item) => item.id === state.selectedId)
+      if (chosen) return chosen
+    }
+    if (state.activeSessionId) {
+      const active = state.sessions.find((item) => item.id === state.activeSessionId)
+      if (active) return active
+    }
+    return state.sessions[0] || null
+  }
+
+  function sortedSessions() {
+    return [...state.sessions].sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0))
+  }
+
+  function chooseDefaultSession() {
+    if (state.manualSelection && state.selectedId
+      && state.sessions.some((session) => session.id === state.selectedId)) return
+    if (state.activeSessionId && state.sessions.some((session) => session.id === state.activeSessionId)) {
+      state.selectedId = state.activeSessionId
+      return
+    }
+    const sorted = sortedSessions()
+    if (!state.selectedId || !state.sessions.some((session) => session.id === state.selectedId)) {
+      state.selectedId = sorted[0] ? sorted[0].id : null
+    }
+  }
+
+  function CSS() {
+    return `
+      :host { all: initial; }
+      * { box-sizing: border-box; }
+      button, select { font: inherit; }
+      .wrap {
+        --sp-bg: var(--orca-surface-strong, var(--dsw-alias-bg-overlay, rgba(19, 27, 44, .975)));
+        --sp-text: var(--dsw-alias-label-primary, #eef4ff);
+        --sp-text-2: var(--dsw-alias-label-secondary, #c8d2e2);
+        --sp-muted: var(--dsw-alias-label-tertiary, #8998af);
+        --sp-border: var(--dsw-alias-border-l2, rgba(126, 169, 255, .16));
+        --sp-border-strong: var(--dsw-alias-border-l3, rgba(126, 169, 255, .26));
+        --sp-accent: var(--dsw-alias-brand-primary, #7ea9ff);
+        --sp-accent-invert: var(--dsw-alias-brand-primary-invert, #fff);
+        --sp-live: var(--orca-cyan, #5eead4);
+        --sp-radius: var(--dsw-radius-sm, 7px);
+        --sp-panel-radius: var(--dsw-radius-panel, 18px);
+        --sp-pill-radius: var(--dsw-radius-panel, 999px);
+        --sp-shadow: var(--orca-shadow, 0 24px 64px rgba(0, 0, 0, .5));
+        position: fixed; right: 20px; bottom: 148px; z-index: 2147483000;
+        pointer-events: auto;
+        font-family: "Inter", "Segoe UI Variable", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+        color: var(--sp-text); font-size: 13px; line-height: 1.35;
+        -webkit-font-smoothing: antialiased;
+      }
+      .wrap.panel-open .pill { visibility: hidden; pointer-events: none; }
+      .pill {
+        display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 13px;
+        border: 1px solid var(--sp-border-strong); border-radius: var(--sp-pill-radius);
+        background: var(--sp-bg);
+        box-shadow: 0 8px 24px rgba(27, 39, 58, .14), 0 1px 2px rgba(27, 39, 58, .08);
+        color: var(--sp-text); cursor: pointer; backdrop-filter: blur(18px) saturate(1.15);
+        transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
+        touch-action: none; user-select: none; -webkit-user-select: none;
+      }
+      .pill.dragging { cursor: grabbing; transform: none; }
+      .pill:hover { transform: translateY(-1px); border-color: var(--sp-accent); box-shadow: 0 12px 30px rgba(27, 39, 58, .2); }
+      .pill:active { transform: translateY(0); }
+      .pill .dot {
+        width: 6px; height: 6px; border-radius: 0; background: var(--sp-muted); flex: none;
+      }
+      .wrap.live .pill .dot {
+        background: var(--sp-live);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-live) 16%, transparent);
+        animation: pulse 1.5s ease-in-out infinite;
+      }
+      @keyframes pulse {
+        0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sp-live) 16%, transparent); }
+        50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sp-live) 2%, transparent); }
+      }
+      .pill-speed { font-variant-numeric: tabular-nums; font-weight: 680; letter-spacing: -.02em; font-size: 14px; min-width: 38px; text-align: right; }
+      .pill-unit { color: var(--sp-muted); font-size: 11px; margin-left: -3px; }
+      .pill-spark { width: 58px; height: 20px; overflow: visible; }
+      .pill-spark path { fill: none; stroke: var(--sp-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+      .wrap.live .pill-spark path { stroke: var(--sp-live); }
+      .pill-hint { color: var(--sp-muted); font-size: 11px; white-space: nowrap; }
+      .panel {
+        position: absolute; left: 0; bottom: calc(100% + 10px);
+        width: 432px; max-width: calc(100vw - 24px); overflow: hidden;
+        border: 1px solid var(--sp-border-strong); border-radius: var(--sp-panel-radius);
+        background:
+          linear-gradient(180deg, color-mix(in srgb, var(--sp-text) 2.5%, transparent), transparent 42%),
+          var(--sp-bg);
+        box-shadow: var(--sp-shadow);
+        backdrop-filter: blur(22px) saturate(1.1);
+        display: flex; flex-direction: column;
+        animation: panel-in .18s ease-out;
+      }
+      @keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+      .header {
+        display: flex; align-items: center; gap: 9px; padding: 11px 12px 10px;
+        border-bottom: 1px solid var(--sp-border);
+        cursor: grab; user-select: none; touch-action: none;
+        background: color-mix(in srgb, var(--sp-text) 2%, transparent);
+      }
+      .header:active { cursor: grabbing; }
+      .logo {
+        width: 26px; height: 26px; border-radius: var(--sp-radius); flex: none;
+        display: grid; place-items: center;
+        background: var(--sp-accent); border: 1px solid var(--sp-accent);
+        color: var(--sp-accent-invert);
+      }
+      .logo svg { width: 15px; height: 15px; }
+      .titles { min-width: 0; flex: 1; }
+      .title { font-weight: 680; letter-spacing: .015em; font-size: 13px; display: flex; align-items: center; gap: 7px; }
+      .close {
+        width: 27px; height: 27px; flex: none; border-radius: var(--sp-radius); border: 1px solid transparent;
+        background: transparent; color: var(--sp-muted); cursor: pointer; display: grid; place-items: center;
+      }
+      .close:hover {
+        background: color-mix(in srgb, var(--sp-text) 7%, transparent);
+        color: var(--sp-text); border-color: var(--sp-border);
+      }
+      .body { padding: 12px 12px 11px; }
+      .sessionbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+      .session-select {
+        flex: 1; min-width: 0; height: 29px; padding: 0 25px 0 9px; border-radius: var(--sp-radius);
+        color: var(--sp-text); background-color: color-mix(in srgb, var(--sp-text) 3%, transparent);
+        border: 1px solid var(--sp-border); outline: none;
+        appearance: none; cursor: pointer; font-size: 11.5px;
+        background-image: linear-gradient(45deg, transparent 50%, var(--sp-muted) 50%), linear-gradient(135deg, var(--sp-muted) 50%, transparent 50%);
+        background-position: calc(100% - 13px) 12px, calc(100% - 9px) 12px;
+        background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
+      }
+      .session-select:focus { border-color: var(--sp-accent); }
+      .session-select option { background: var(--sp-bg); color: var(--sp-text); }
+      .model-badge {
+        max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+        font-size: 10.5px; color: var(--sp-text-2); border: 1px solid var(--sp-border);
+        border-radius: var(--sp-radius); padding: 4px 7px;
+        background: color-mix(in srgb, var(--sp-text) 2%, transparent);
+      }
+      .hero {
+        display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
+        padding: 6px 2px 11px;
+      }
+      .hero-main { min-width: 0; }
+      .hero-kicker { color: var(--sp-muted); font-size: 10.5px; letter-spacing: .04em; margin-bottom: 1px; }
+      .hero-number {
+        display: flex; align-items: baseline; gap: 6px;
+        font-variant-numeric: tabular-nums; font-weight: 720; letter-spacing: -.045em;
+        font-size: 42px; line-height: 1.03; color: var(--sp-text);
+      }
+      .hero-number.idle { color: var(--sp-muted); }
+      .hero-unit { font-size: 11px; color: var(--sp-muted); letter-spacing: 0; font-weight: 500; }
+      .hero-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 12px; text-align: right; }
+      .metric .k { color: var(--sp-muted); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; }
+      .metric .v { color: var(--sp-text-2); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 1px; }
+      .chart-head { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 5px; }
+      .modes {
+        display: flex; gap: 2px; padding: 2px; border-radius: var(--sp-radius);
+        background: color-mix(in srgb, var(--sp-text) 4%, transparent);
+        border: 1px solid var(--sp-border);
+      }
+      .modes button {
+        border: 0; background: transparent; color: var(--sp-muted); font-size: 10px; padding: 3px 8px;
+        border-radius: var(--sp-radius); cursor: pointer;
+      }
+      .modes button.on { background: var(--sp-accent); color: var(--sp-accent-invert); font-weight: 650; }
+      .chart-wrap {
+        position: relative; height: 190px; margin: 0 -2px;
+        border-radius: var(--sp-radius); overflow: hidden;
+        background: rgba(148, 163, 184, .035);
+        background:
+          repeating-linear-gradient(90deg, color-mix(in srgb, var(--sp-text) 3.5%, transparent) 0 1px, transparent 1px 62px),
+          color-mix(in srgb, var(--sp-text) 2.5%, transparent);
+        box-shadow: inset 0 0 0 1px var(--sp-border);
+      }
+      .chart { width: 100%; height: 190px; display: block; overflow: visible; touch-action: none; }
+      .chart.pannable { cursor: grab; }
+      .chart.panning { cursor: grabbing; }
+      .chart .grid { stroke: color-mix(in srgb, var(--sp-text) 10%, transparent); stroke-width: 1; shape-rendering: crispEdges; }
+      .chart .axis { fill: var(--sp-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
+      .chart .attempt-line { fill: none; stroke: var(--sp-accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
+      .chart .live-line {
+        fill: none; stroke: var(--sp-live); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
+        filter: drop-shadow(0 0 3px rgba(32, 199, 232, .35));
+      }
+      .chart .area { fill: url(#speedFill); opacity: .24; }
+      .chart .area-live { fill: url(#speedFillLive); opacity: .3; }
+      .chart .stop-accent { stop-color: var(--sp-accent); }
+      .chart .stop-live { stop-color: var(--sp-live); }
+      .chart .attempt-dot { fill: var(--sp-accent); stroke: var(--sp-bg); stroke-width: 1; opacity: .75; }
+      .chart .live-dot { fill: var(--sp-live); stroke: var(--sp-bg); stroke-width: 1.2; filter: drop-shadow(0 0 4px rgba(32, 199, 232, .55)); }
+      .chart .guide { stroke: color-mix(in srgb, var(--sp-text) 35%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
+      .chart .hover-dot { fill: var(--sp-text); stroke: var(--sp-live); stroke-width: 1.4; }
+      .chart-empty {
+        position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
+        color: var(--sp-muted); font-size: 11px; padding: 16px; pointer-events: none;
+      }
+      .chart-tip {
+        position: absolute; pointer-events: none; padding: 5px 7px; border-radius: var(--sp-radius);
+        background: var(--sp-bg); border: 1px solid var(--sp-border-strong);
+        color: var(--sp-text); font-size: 10px; line-height: 1.4; white-space: nowrap;
+        box-shadow: 0 6px 18px rgba(27, 39, 58, .16); display: none; z-index: 2;
+        font-variant-numeric: tabular-nums;
+      }
+      .turns { display: flex; gap: 6px; margin-top: 9px; overflow: hidden; }
+      .turn-chip {
+        flex: 1; min-width: 0; border: 1px solid var(--sp-border); border-radius: var(--sp-radius);
+        background: color-mix(in srgb, var(--sp-text) 2.5%, transparent); padding: 6px 7px;
+      }
+      .turn-chip .n { color: var(--sp-muted); font-size: 9px; display: flex; justify-content: space-between; gap: 4px; }
+      .turn-chip .t {
+        color: var(--sp-text-2); font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums;
+        margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      }
+      .hidden { display: none !important; }
+      @media (max-width: 540px) {
+        .wrap { right: 10px; bottom: 120px; }
+        .panel { width: calc(100vw - 20px); }
+        .hero-number { font-size: 36px; }
+        .hero-grid { gap: 8px; }
+        .model-badge { max-width: 92px; }
+        .turns { display: none; }
+      }
+    `
+  }
+
+  function markup() {
+    return `
+      <style>${CSS()}</style>
+      <div class="wrap" id="wrap">
+        <button class="pill" id="pill" type="button" title="打开 DSH 速度计">
+          <span class="dot"></span>
+          <span class="pill-speed" id="pillSpeed">—</span>
+          <span class="pill-unit">tok/s</span>
+          <svg class="pill-spark" id="pillSpark" viewBox="0 0 58 20" aria-hidden="true"><path d="M1 18 L57 18"></path></svg>
+          <span class="pill-hint" id="pillHint">速度计</span>
+        </button>
+        <section class="panel hidden" id="panel" aria-label="DSH 速度计">
+          <header class="header" id="header">
+            <span class="logo" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M4.6 17.2a8 8 0 1 1 14.8 0"></path>
+                <path d="M12 14.2 16.3 9"></path>
+                <circle cx="12" cy="15" r="1.5" fill="currentColor" stroke="none"></circle>
+              </svg>
+            </span>
+            <div class="titles">
+              <div class="title">DSH 速度计</div>
+            </div>
+            <button class="close" id="close" type="button" title="收起 (Esc)" aria-label="收起">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 4.5 6 8.5 10 4.5"></path></svg>
+            </button>
+          </header>
+          <div class="body">
+            <div class="sessionbar">
+              <select class="session-select" id="sessionSelect" aria-label="选择会话"></select>
+              <span class="model-badge" id="modelBadge">—</span>
+            </div>
+            <div class="hero">
+              <div class="hero-main">
+                <div class="hero-kicker" id="heroKicker">实时吞吐</div>
+                <div class="hero-number idle" id="heroNumber"><span id="heroValue">—</span><span class="hero-unit">tok/s</span></div>
+              </div>
+              <div class="hero-grid">
+                <div class="metric"><div class="k">均值</div><div class="v" id="mAvg">—</div></div>
+                <div class="metric"><div class="k">首字</div><div class="v" id="mTtft">—</div></div>
+                <div class="metric"><div class="k">输出</div><div class="v" id="mTokens">—</div></div>
+              </div>
+            </div>
+            <div class="chart-head">
+              <div class="modes" role="group" aria-label="图表范围">
+                <button type="button" data-mode="all">全程</button>
+                <button type="button" data-mode="recent">最近</button>
+              </div>
+            </div>
+            <div class="chart-wrap" id="chartWrap">
+              <svg class="chart" id="chart" role="img" aria-label="对话速度折线图"></svg>
+              <div class="chart-empty" id="chartEmpty">发送一条消息后，这里会绘制每次生成的速度曲线</div>
+              <div class="chart-tip" id="chartTip"></div>
+            </div>
+            <div class="turns" id="turns"></div>
+          </div>
+        </section>
+      </div>
+    `
+  }
+
+  function mount() {
+    if (!document.documentElement) {
+      setTimeout(mount, 40)
+      return
+    }
+    if (document.getElementById('dsh-speedometer-host')) return
+    const host = document.createElement('div')
+    host.id = 'dsh-speedometer-host'
+    host.style.cssText = 'all:initial;position:fixed;inset:0;width:100vw;height:100vh;overflow:visible;pointer-events:none;z-index:2147483000;'
+    const shadow = host.attachShadow({ mode: 'closed' })
+    shadow.innerHTML = markup()
+    ;(document.body || document.documentElement).appendChild(host)
+    root = shadow
+    els = {
+      wrap: shadow.getElementById('wrap'),
+      pill: shadow.getElementById('pill'),
+      pillSpeed: shadow.getElementById('pillSpeed'),
+      pillSpark: shadow.getElementById('pillSpark').querySelector('path'),
+      pillHint: shadow.getElementById('pillHint'),
+      panel: shadow.getElementById('panel'),
+      header: shadow.getElementById('header'),
+      close: shadow.getElementById('close'),
+      sessionSelect: shadow.getElementById('sessionSelect'),
+      modelBadge: shadow.getElementById('modelBadge'),
+      heroKicker: shadow.getElementById('heroKicker'),
+      heroNumber: shadow.getElementById('heroNumber'),
+      heroValue: shadow.getElementById('heroValue'),
+      mAvg: shadow.getElementById('mAvg'),
+      mTtft: shadow.getElementById('mTtft'),
+      mTokens: shadow.getElementById('mTokens'),
+      chartWrap: shadow.getElementById('chartWrap'),
+      chart: shadow.getElementById('chart'),
+      chartEmpty: shadow.getElementById('chartEmpty'),
+      chartTip: shadow.getElementById('chartTip'),
+      turns: shadow.getElementById('turns'),
+    }
+    state.mounted = true
+    bindUI()
+    restorePosition()
+    render()
+    loadState()
+    connect()
+    if (state.expanded) requestAnimationFrame(positionPanel)
+    window.addEventListener('resize', () => {
+      clampPosition()
+      if (state.expanded) positionPanel()
+      scheduleRender()
+    })
+    if (window.ResizeObserver && els.chartWrap) {
+      new ResizeObserver(() => scheduleRender()).observe(els.chartWrap)
+    }
+  }
+
+  function restorePosition() {
+    if (!drag || !els.wrap) return
+    if (!Number.isFinite(drag.left) || !Number.isFinite(drag.top)) return
+    els.wrap.style.right = 'auto'
+    els.wrap.style.bottom = 'auto'
+    els.wrap.style.left = `${Math.max(8, drag.left)}px`
+    els.wrap.style.top = `${Math.max(8, drag.top)}px`
+    clampPosition()
+  }
+
+  function clampPosition() {
+    if (!els.wrap) return
+    const rect = els.wrap.getBoundingClientRect()
+    if (!rect.width || !rect.height) return
+    if (els.wrap.style.left === 'auto' || !els.wrap.style.left) return
+    const left = Math.min(Math.max(8, rect.left), Math.max(8, window.innerWidth - rect.width - 8))
+    const top = Math.min(Math.max(8, rect.top), Math.max(8, window.innerHeight - rect.height - 8))
+    els.wrap.style.left = `${left}px`
+    els.wrap.style.top = `${top}px`
+    drag = { left, top }
+  }
+
+  function positionPanel() {
+    if (!state.expanded || !els.wrap || !els.pill || !els.panel) return
+    const wrapRect = els.wrap.getBoundingClientRect()
+    const pillRect = els.pill.getBoundingClientRect()
+    const panelRect = els.panel.getBoundingClientRect()
+    if (!pillRect.width || !pillRect.height || !panelRect.width || !panelRect.height) return
+
+    const margin = 8
+    const gap = 10
+    const maxLeft = Math.max(margin, window.innerWidth - panelRect.width - margin)
+    const left = Math.min(Math.max(margin, pillRect.left), maxLeft)
+    els.panel.style.left = `${left - wrapRect.left}px`
+
+    const above = pillRect.top - gap - panelRect.height
+    const below = pillRect.bottom + gap
+    let top
+    if (above >= margin) {
+      top = above
+    } else if (below + panelRect.height <= window.innerHeight - margin) {
+      top = below
+    } else {
+      const maxTop = Math.max(margin, window.innerHeight - panelRect.height - margin)
+      top = Math.min(Math.max(margin, above), maxTop)
+    }
+    els.panel.style.top = `${top - wrapRect.top}px`
+    els.panel.style.bottom = 'auto'
+  }
+
+  function bindUI() {
+    els.pill.addEventListener('click', () => {
+      if (suppressPillClick) {
+        suppressPillClick = false
+        return
+      }
+      setExpanded(true)
+    })
+    els.pill.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault()
+        setExpanded(true)
+      }
+    })
+    els.pill.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0) return
+      const rect = els.wrap.getBoundingClientRect()
+      pillDrag = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        left: rect.left,
+        top: rect.top,
+        moved: false,
+      }
+      els.pill.setPointerCapture?.(event.pointerId)
+    })
+    els.pill.addEventListener('pointermove', (event) => {
+      if (!pillDrag || pillDrag.pointerId !== event.pointerId) return
+      const dx = event.clientX - pillDrag.startX
+      const dy = event.clientY - pillDrag.startY
+      if (!pillDrag.moved && Math.hypot(dx, dy) < 4) return
+      if (!pillDrag.moved) {
+        pillDrag.moved = true
+        els.pill.classList.add('dragging')
+      }
+      event.preventDefault()
+      const rect = els.wrap.getBoundingClientRect()
+      const left = Math.min(Math.max(8, pillDrag.left + dx), Math.max(8, window.innerWidth - rect.width - 8))
+      const top = Math.min(Math.max(8, pillDrag.top + dy), Math.max(8, window.innerHeight - rect.height - 8))
+      els.wrap.style.right = 'auto'
+      els.wrap.style.bottom = 'auto'
+      els.wrap.style.left = `${left}px`
+      els.wrap.style.top = `${top}px`
+    })
+    els.pill.addEventListener('pointerup', (event) => {
+      if (!pillDrag || pillDrag.pointerId !== event.pointerId) return
+      const moved = pillDrag.moved
+      pillDrag = null
+      els.pill.classList.remove('dragging')
+      els.pill.releasePointerCapture?.(event.pointerId)
+      if (moved) {
+        suppressPillClick = true
+        clampPosition()
+        savePrefs()
+        setTimeout(() => { suppressPillClick = false }, 250)
+      }
+    })
+    els.pill.addEventListener('pointercancel', () => {
+      pillDrag = null
+      els.pill.classList.remove('dragging')
+    })
+
+    els.close.addEventListener('click', () => setExpanded(false))
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && state.expanded) setExpanded(false)
+    }, true)
+
+    els.sessionSelect.addEventListener('change', () => {
+      state.selectedId = els.sessionSelect.value
+      state.manualSelection = true
+      state.chartOffset = 0
+      savePrefs()
+      scheduleRender()
+    })
+
+    root.querySelectorAll('.modes button').forEach((button) => {
+      button.addEventListener('click', () => {
+        state.chartMode = button.dataset.mode === 'recent' ? 'recent' : 'all'
+        state.chartOffset = 0
+        hoverX = null
+        savePrefs()
+        render()
+      })
+    })
+
+    els.chart.addEventListener('mousemove', onChartMove, { passive: true })
+    els.chart.addEventListener('mouseleave', clearHover)
+    els.chart.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0 || state.chartMode !== 'all') return
+      if (!chartRange || chartRange.maxOffset <= 0) return
+      chartDrag = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        offset: state.chartOffset,
+      }
+      els.chart.setPointerCapture?.(event.pointerId)
+      els.chart.classList.add('panning')
+      clearHover()
+      event.preventDefault()
+    })
+    els.chart.addEventListener('pointermove', (event) => {
+      if (!chartDrag || chartDrag.pointerId !== event.pointerId) return
+      if (!chartGeometry || !chartRange) return
+      event.preventDefault()
+      const dx = event.clientX - chartDrag.startX
+      const perSlot = chartGeometry.innerW / Math.max(1, chartRange.window)
+      const next = Math.min(Math.max(0, chartDrag.offset + dx / perSlot), chartRange.maxOffset)
+      if (Math.abs(next - state.chartOffset) > 0.001) {
+        state.chartOffset = next
+        renderChart(selectedSession())
+      }
+    })
+    const endChartDrag = (event) => {
+      if (!chartDrag || chartDrag.pointerId !== event.pointerId) return
+      chartDrag = null
+      els.chart.classList.remove('panning')
+      els.chart.releasePointerCapture?.(event.pointerId)
+      hoverX = null
+    }
+    els.chart.addEventListener('pointerup', endChartDrag)
+    els.chart.addEventListener('pointercancel', endChartDrag)
+
+    els.header.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0) return
+      if (event.target.closest('button,select')) return
+      const rect = els.wrap.getBoundingClientRect()
+      drag = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, left: rect.left, top: rect.top }
+      els.header.setPointerCapture?.(event.pointerId)
+      event.preventDefault()
+    })
+    els.header.addEventListener('pointermove', (event) => {
+      if (!drag || drag.pointerId !== event.pointerId) return
+      const left = Math.min(Math.max(8, drag.left + event.clientX - drag.startX), window.innerWidth - 80)
+      const top = Math.min(Math.max(8, drag.top + event.clientY - drag.startY), window.innerHeight - 60)
+      els.wrap.style.right = 'auto'
+      els.wrap.style.bottom = 'auto'
+      els.wrap.style.left = `${left}px`
+      els.wrap.style.top = `${top}px`
+    })
+    els.header.addEventListener('pointerup', (event) => {
+      if (!drag || drag.pointerId !== event.pointerId) return
+      drag = null
+      clampPosition()
+      savePrefs()
+    })
+    els.header.addEventListener('pointercancel', () => { drag = null })
+  }
+
+  function setExpanded(expanded) {
+    state.expanded = expanded === true
+    els.wrap.classList.toggle('panel-open', state.expanded)
+    els.panel.classList.toggle('hidden', !state.expanded)
+    if (state.expanded) {
+      clampPosition()
+      requestAnimationFrame(() => { positionPanel(); scheduleRender() })
+    }
+    savePrefs()
+  }
+
+  function parseData(payload) {
+    try { return JSON.parse(payload) } catch { return null }
+  }
+
+  function applyState(payload) {
+    if (!payload || !Array.isArray(payload.sessions)) return
+    state.sessions = payload.sessions
+    if (typeof payload.activeSessionId === 'string' && payload.activeSessionId) {
+      state.activeSessionId = payload.activeSessionId
+    }
+    for (const session of state.sessions) {
+      if (!Array.isArray(session.attempts)) session.attempts = []
+      if (!Number.isFinite(session.count)) session.count = session.attempts.length
+      if (!session.live) delete session.live
+    }
+    chooseDefaultSession()
+    refreshSessionOptions()
+    if (state.expanded) requestAnimationFrame(positionPanel)
+  }
+
+  function findSession(id) {
+    return state.sessions.find((session) => session.id === id) || null
+  }
+
+  function applyEvent(type, data) {
+    if (!data) return
+    lastEventAt = Date.now()
+    if (type === 'state') {
+      applyState(data)
+      scheduleRender()
+      return
+    }
+    if (type === 'start') {
+      state.activeSessionId = data.sessionId || state.activeSessionId
+      const session = ensureSession(data.sessionId, data.session)
+      if (session) {
+        session.live = data.live || null
+        if (data.live && data.live.startedAt) session.updatedAt = data.live.startedAt
+      }
+      if (session && !state.manualSelection) state.selectedId = session.id
+      refreshSessionOptions()
+      scheduleRender()
+      return
+    }
+    if (type === 'tick') {
+      let session = findSession(data.sessionId)
+      if (!session) {
+        session = ensureSession(data.sessionId)
+      }
+      if (session) {
+        if (!session.live) {
+          session.live = {
+            id: data.id,
+            sessionId: data.sessionId,
+            provider: session.provider || '',
+            model: session.model || '',
+            startedAt: Date.now() - (data.elapsedMs || 0),
+            tokens: data.tokens || 0,
+            tps: data.tps || 0,
+            avgTps: data.avgTps,
+            peakTps: data.peakTps,
+            ttftMs: data.ttftMs,
+            elapsedMs: data.elapsedMs || 0,
+            samples: [],
+          }
+        }
+        const live = session.live
+        live.tokens = data.tokens || 0
+        live.tps = data.tps || 0
+        live.avgTps = data.avgTps
+        live.peakTps = data.peakTps
+        live.ttftMs = data.ttftMs
+        live.elapsedMs = data.elapsedMs || live.elapsedMs || 0
+        if (data.sample && Number.isFinite(data.sample.t) && Number.isFinite(data.sample.v)) {
+          const last = live.samples[live.samples.length - 1]
+          if (last && Math.abs(last.t - data.sample.t) < 1) last.v = Math.max(last.v, data.sample.v)
+          else if (!last || data.sample.t > last.t) live.samples.push({ t: data.sample.t, v: data.sample.v })
+          if (live.samples.length > 260) live.samples.splice(0, live.samples.length - 260)
+        }
+      }
+      scheduleRender()
+      return
+    }
+    if (type === 'end') {
+      const session = findSession(data.sessionId)
+      if (session) {
+        if (data.attempt) {
+          const index = session.attempts.findIndex((attempt) => attempt.id === data.attempt.id)
+          if (index === -1) session.attempts.push(data.attempt)
+          else session.attempts[index] = data.attempt
+        }
+        if (data.session) {
+          if (Number.isFinite(data.session.count)) session.count = data.session.count
+          if (data.session.label) session.label = data.session.label
+        }
+        session.live = null
+        session.updatedAt = Date.now()
+      }
+      refreshSessionOptions()
+      scheduleRender()
+      return
+    }
+    if (type === 'attempt') {
+      const session = ensureSession(data.sessionId || data.attempt?.sessionId, data.session)
+      if (session && data.attempt) {
+        const index = session.attempts.findIndex((attempt) => attempt.id === data.attempt.id)
+        if (index === -1) session.attempts.push(data.attempt)
+        else session.attempts[index] = data.attempt
+      }
+      refreshSessionOptions()
+      scheduleRender()
+      return
+    }
+    if (type === 'session') {
+      const session = ensureSession(data.session?.id, data.session)
+      if (session) session.updatedAt = Date.now()
+      refreshSessionOptions()
+      scheduleRender()
+      return
+    }
+    if (type === 'active') {
+      state.activeSessionId = data.activeSessionId || state.activeSessionId
+      chooseDefaultSession()
+      refreshSessionOptions()
+      scheduleRender()
+    }
+  }
+
+  function refreshSessionOptions() {
+    if (!els.sessionSelect) return
+    const sorted = sortedSessions()
+    const signature = sorted.map((session) => [
+      session.id,
+      session.label,
+      session.count,
+      session.model,
+      session.live ? '1' : '0',
+    ].join(':')).join('|')
+    if (signature === sessionSignature) return
+    sessionSignature = signature
+    const current = state.selectedId
+    const options = sorted.map((session) => {
+      const title = sessionLabel(session)
+      const suffix = session.live ? ' · 生成中' : session.count ? ` · ${session.count} 次` : ''
+      return `<option value="${esc(session.id)}">${esc(title + suffix)}</option>`
+    })
+    els.sessionSelect.innerHTML = options.join('') || '<option value="">暂无会话</option>'
+    if (current && sorted.some((session) => session.id === current)) els.sessionSelect.value = current
+    else if (sorted[0]) els.sessionSelect.value = sorted[0].id
+  }
+
+  function sessionStats(session) {
+    const attempts = Array.isArray(session?.attempts) ? session.attempts : []
+    const values = attempts.map((attempt) => attempt.tps).filter((value) => Number.isFinite(value) && value >= 0)
+    const avg = values.length ? values.reduce((sum, value) => sum + value, 0) / values.length : null
+    const peaks = attempts.map((attempt) => attempt.peakTps ?? attempt.tps).filter((value) => Number.isFinite(value))
+    const peak = peaks.length ? Math.max(...peaks) : null
+    const totalTokens = attempts.reduce((sum, attempt) => sum + (Number.isFinite(attempt.tokens) ? attempt.tokens : 0), 0)
+    return { attempts, avg, peak, totalTokens }
+  }
+
+  function render() {
+    renderQueued = false
+    if (!state.mounted) return
+    const session = selectedSession()
+    const live = session && session.live ? session.live : null
+    const attempts = session && Array.isArray(session.attempts) ? session.attempts : []
+    const last = attempts.length ? attempts[attempts.length - 1] : null
+    const stats = sessionStats(session)
+    const isLiveForSelected = !!live
+
+    els.wrap.classList.toggle('live', isLiveForSelected)
+    els.wrap.classList.toggle('panel-open', state.expanded)
+    els.panel.classList.toggle('hidden', !state.expanded)
+
+    const heroValue = live ? live.tps : (last && Number.isFinite(last.tps) ? last.tps : null)
+    const avg = live ? live.avgTps : last ? last.tps : null
+    const ttft = live ? live.ttftMs : last ? last.ttftMs : null
+    const tokens = live ? live.tokens : last ? last.tokens : null
+    els.modelBadge.textContent = session ? modelLabel(session) : '—'
+    els.modelBadge.title = session ? modelLabel(session) : ''
+    els.heroKicker.textContent = live ? '实时吞吐' : last ? '上次平均' : '等待生成'
+    els.heroValue.textContent = heroValue == null ? '—' : fmt(heroValue)
+    els.heroNumber.classList.toggle('idle', !live)
+    els.mAvg.textContent = avg == null ? '—' : fmt(avg)
+    els.mTtft.textContent = fmtMs(ttft)
+    els.mTokens.textContent = tokens == null ? '—' : fmt(tokens, 0)
+    els.pillSpeed.textContent = heroValue == null ? '—' : fmt(heroValue)
+    els.pillHint.textContent = live ? '生成中' : last ? '上次' : '速度计'
+
+    const count = attempts.length + (live ? 1 : 0)
+    const avgText = stats.avg == null ? '—' : fmt(stats.avg)
+    els.chartEmpty.classList.toggle('hidden', count > 0)
+    els.chart.setAttribute('aria-label', count
+      ? `对话速度折线图，共 ${count} 次生成，平均 ${avgText} tok/s`
+      : '对话速度折线图，暂无数据')
+
+    renderSpark(live, last)
+    renderTurns(attempts, live)
+    if (state.expanded) renderChart(session)
+    refreshSessionOptions()
+  }
+
+  function sparkValues(live, last) {
+    const samples = (live && Array.isArray(live.samples) ? live.samples : null)
+      || (last && Array.isArray(last.samples) ? last.samples : null)
+      || []
+    return samples.filter((sample) => Number.isFinite(sample.t) && Number.isFinite(sample.v)).slice(-48)
+  }
+
+  function renderSpark(live, last) {
+    if (!els.pillSpark) return
+    const samples = sparkValues(live, last)
+    if (samples.length < 2) {
+      els.pillSpark.setAttribute('d', 'M1 18 L57 18')
+      return
+    }
+    const max = Math.max(1, ...samples.map((sample) => sample.v))
+    const t0 = samples[0].t
+    const t1 = Math.max(samples[samples.length - 1].t, t0 + 1)
+    const points = samples.map((sample) => {
+      const x = 1 + ((sample.t - t0) / (t1 - t0)) * 56
+      const y = 18 - (Math.min(sample.v, max) / max) * 15
+      return [x, y]
+    })
+    els.pillSpark.setAttribute('d', points.map(([x, y], index) => `${index ? 'L' : 'M'}${x.toFixed(1)} ${y.toFixed(1)}`).join(' '))
+  }
+
+  function recentRoundGroups(attempts) {
+    let maxTurn = 0
+    for (const attempt of attempts) {
+      if (Number.isFinite(attempt.turn)) maxTurn = Math.max(maxTurn, attempt.turn)
+    }
+    const groups = []
+    let synthetic = 0
+    for (const attempt of attempts) {
+      const turn = Number.isFinite(attempt.turn) ? attempt.turn : null
+      let group = groups[groups.length - 1]
+      const turnChanged = turn !== null && group && group.turn !== null && group.turn !== turn
+      if (!group || turnChanged || (group.complete && turn === null)) {
+        if (turn === null) synthetic += 1
+        group = {
+          turn,
+          labelTurn: turn !== null ? turn : maxTurn + synthetic,
+          tokens: 0,
+          attempts: 0,
+          lastStatus: null,
+          complete: false,
+        }
+        groups.push(group)
+      } else if (group.turn === null && turn !== null) {
+        group.turn = turn
+        group.labelTurn = turn
+      }
+      group.tokens += Number.isFinite(attempt.tokens) ? attempt.tokens : 0
+      group.attempts += 1
+      group.lastStatus = attempt.status
+      group.complete = attempt.status !== 'tool-calls'
+    }
+    return groups.filter((group) => group.complete).slice(-5)
+  }
+
+  function renderTurns(attempts, live) {
+    if (!els.turns) return
+    const items = recentRoundGroups(attempts).map((group) => ({
+      label: `第${group.labelTurn}轮`,
+      tokens: group.tokens,
+      count: group.attempts,
+      status: group.lastStatus,
+    }))
+    els.turns.innerHTML = items.map((item) => `
+      <div class="turn-chip" title="${esc(item.label)} · ${item.count} 次生成 · ${esc(item.status || 'unknown')} · 输出 ${fmt(item.tokens, 0)} tokens">
+        <div class="n"><span>${esc(item.label)}</span></div>
+        <div class="t">${fmt(item.tokens, 0)}</div>
+      </div>
+    `).join('')
+  }
+
+  function sampleAverage(samples) {
+    if (!samples.length) return 0
+    return samples.reduce((sum, sample) => sum + sample.v, 0) / samples.length
+  }
+
+  function timeAgoLabel(ms) {
+    if (!Number.isFinite(ms)) return ''
+    const seconds = Math.max(0, ms) / 1000
+    return seconds < 10 ? `-${seconds.toFixed(1)}s` : `-${Math.round(seconds)}s`
+  }
+
+  function pushRecentGroups(groups, points, attempt, index, live) {
+    if (points.length === 0) return
+    points.sort((a, b) => a.abs - b.abs)
+    let segment = []
+    const flush = () => {
+      if (segment.length === 0) return
+      if (segment.length === 1) {
+        const only = segment[0]
+        segment = [
+          { ...only, x: Math.max(0, only.x - 0.001) },
+          { ...only, x: Math.min(1, only.x + 0.001) },
+        ]
+      }
+      groups.push({
+        points: segment,
+        live,
+        average: false,
+        attempt: live ? null : attempt,
+        slot: 0,
+        attemptIndex: live ? null : index,
+        label: live ? '正在生成' : `第 ${index + 1} 次生成`,
+      })
+      segment = []
+    }
+    for (const point of points) {
+      if (segment.length > 0 && point.abs - segment[segment.length - 1].abs > RECENT_GAP_MS) flush()
+      segment.push(point)
+    }
+    flush()
+  }
+
+  function recentChartGroups(attempts, live) {
+    const attemptEnd = (attempt) => {
+      if (Number.isFinite(attempt.endedAt) && attempt.endedAt > 0) return attempt.endedAt
+      const base = Number.isFinite(attempt.startedAt) ? attempt.startedAt : 0
+      const samples = Array.isArray(attempt.samples) ? attempt.samples : []
+      const last = samples.length ? samples[samples.length - 1] : null
+      return last && Number.isFinite(last.t) ? base + last.t : base
+    }
+    let anchor = 0
+    for (const attempt of attempts) anchor = Math.max(anchor, attemptEnd(attempt))
+    if (live && Number.isFinite(live.startedAt)) {
+      const elapsed = Number.isFinite(live.elapsedMs) ? live.elapsedMs : Date.now() - live.startedAt
+      anchor = Math.max(anchor, live.startedAt + Math.max(0, elapsed))
+    }
+    if (!(anchor > 0)) return []
+    const from = anchor - RECENT_WINDOW_MS
+    const groups = []
+    attempts.forEach((attempt, index) => {
+      const base = Number.isFinite(attempt.startedAt) ? attempt.startedAt : null
+      if (base == null) return
+      const samples = (Array.isArray(attempt.samples) ? attempt.samples : [])
+        .filter((sample) => Number.isFinite(sample.t) && Number.isFinite(sample.v) && sample.t >= 0)
+      let points = samples
+        .map((sample) => ({ abs: base + sample.t, y: sample.v }))
+        .filter((point) => point.abs >= from && point.abs <= anchor)
+      if (points.length === 0 && Number.isFinite(attempt.tps) && attempt.tps > 0) {
+        const first = Math.max(from, base)
+        const last = Math.min(anchor, Number.isFinite(attempt.endedAt) ? attempt.endedAt : base)
+        if (last >= first) points = [{ abs: first, y: attempt.tps }, { abs: last, y: attempt.tps }]
+      }
+      points = points.map((point) => ({
+        ...point,
+        x: (point.abs - from) / RECENT_WINDOW_MS,
+        relMs: point.abs - anchor,
+        timeLabel: timeAgoLabel(anchor - point.abs),
+      }))
+      pushRecentGroups(groups, points, attempt, index, false)
+    })
+    if (live && Number.isFinite(live.startedAt) && live.startedAt + 1000 >= from) {
+      const samples = (Array.isArray(live.samples) ? live.samples : [])
+        .filter((sample) => Number.isFinite(sample.t) && Number.isFinite(sample.v) && sample.t >= 0)
+      let points = samples
+        .map((sample) => ({ abs: live.startedAt + sample.t, y: sample.v }))
+        .filter((point) => point.abs >= from && point.abs <= anchor)
+      if (points.length === 0 && Number.isFinite(live.tps)) {
+        points = [{ abs: Math.max(from, live.startedAt), y: live.tps }, { abs: anchor, y: live.tps }]
+      } else if (points.length > 0) {
+        const last = points[points.length - 1]
+        if (anchor - last.abs > 250 && Number.isFinite(live.tps)) points.push({ abs: anchor, y: live.tps })
+      }
+      points = points.map((point) => ({
+        ...point,
+        x: (point.abs - from) / RECENT_WINDOW_MS,
+        relMs: point.abs - anchor,
+        timeLabel: timeAgoLabel(anchor - point.abs),
+      }))
+      pushRecentGroups(groups, points, null, 0, true)
+    }
+    chartRange = { recent: true, total: attempts.length, anchor, window: 1, maxOffset: 0, offset: 0 }
+    return groups
+  }
+
+  function chartGroups(session) {
+    if (!session) return []
+    const attempts = Array.isArray(session.attempts) ? session.attempts : []
+    const live = session.live
+    if (state.chartMode === 'recent') return recentChartGroups(attempts, live)
+
+    const total = attempts.length
+    const liveAvg = live
+      ? (Number.isFinite(live.avgTps) && live.avgTps > 0
+        ? live.avgTps
+        : Number.isFinite(live.tps) && live.tps > 0 ? live.tps : 0)
+      : 0
+    const includeLive = liveAvg > 0
+    const maxOffset = Math.max(0, total - ALL_WINDOW)
+    state.chartOffset = Math.min(Math.max(0, Number(state.chartOffset) || 0), maxOffset)
+    const offset = state.chartOffset
+    const showLive = includeLive && offset === 0
+    const window = Math.min(ALL_WINDOW, total) + (showLive ? 1 : 0)
+    const start = total > ALL_WINDOW ? total - ALL_WINDOW - offset : 0
+    const groups = []
+    const first = Math.max(0, Math.floor(start))
+    const last = Math.min(total - 1, Math.ceil(start + window))
+    for (let index = first; index <= last; index += 1) {
+      const attempt = attempts[index]
+      const x = index + 0.5 - start
+      if (x < 0 || x > window) continue
+      const samples = (Array.isArray(attempt.samples) ? attempt.samples : [])
+        .filter((sample) => Number.isFinite(sample.t) && Number.isFinite(sample.v) && sample.t >= 0)
+      const avg = Number.isFinite(attempt.tps) && attempt.tps > 0 ? attempt.tps : sampleAverage(samples)
+      if (!(avg > 0)) continue
+      groups.push({
+        points: [{ x, y: avg, relMs: null }],
+        live: false,
+        average: true,
+        attempt,
+        slot: index - start,
+        attemptIndex: index,
+        label: `第 ${index + 1} 次生成`,
+      })
+    }
+    if (showLive) {
+      groups.push({
+        points: [{ x: window - 0.5, y: liveAvg, relMs: null }],
+        live: true,
+        average: true,
+        attempt: null,
+        slot: window - 0.5,
+        attemptIndex: null,
+        label: '正在生成',
+      })
+    }
+    chartRange = { recent: false, total, start, window, maxOffset, offset }
+    return groups
+  }
+
+  function niceMax(value) {
+    if (!Number.isFinite(value) || value <= 0) return 10
+    const steps = [5, 10, 20, 30, 40, 50, 75, 100, 150, 200, 300, 500, 750, 1000, 2000, 5000]
+    for (const step of steps) if (value <= step) return step
+    return Math.ceil(value / 1000) * 1000
+  }
+
+  function renderChart(session) {
+    if (!els.chart) return
+    const groups = chartGroups(session)
+    const width = Math.max(240, Math.round(els.chartWrap.clientWidth || 410))
+    const height = 190
+    els.chart.setAttribute('viewBox', `0 0 ${width} ${height}`)
+    els.chart.setAttribute('width', String(width))
+    els.chart.setAttribute('height', String(height))
+    if (groups.length === 0) {
+      els.chart.innerHTML = ''
+      els.chart.classList.remove('pannable')
+      els.chart.removeAttribute('title')
+      chartHits = []
+      chartGeometry = null
+      chartRange = null
+      return
+    }
+    const plot = { left: 31, right: 9, top: 10, bottom: 21 }
+    const innerW = Math.max(20, width - plot.left - plot.right)
+    const innerH = Math.max(20, height - plot.top - plot.bottom)
+    const recentMode = !!(chartRange && chartRange.recent)
+    const xMin = 0
+    const xMax = recentMode ? 1 : Math.max(1, chartRange?.window || groups.length)
+    let yMaxRaw = 0
+    for (const group of groups) {
+      for (const point of group.points) {
+        if (point.y > yMaxRaw) yMaxRaw = point.y
+      }
+    }
+    const yMax = niceMax(yMaxRaw * 1.16)
+    const sx = (x) => plot.left + ((x - xMin) / (xMax - xMin)) * innerW
+    const sy = (y) => plot.top + innerH - (Math.min(y, yMax) / yMax) * innerH
+    let svg = `
+      <defs>
+        <linearGradient id="speedFill" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" class="stop-accent" stop-opacity=".8"></stop>
+          <stop offset="100%" class="stop-accent" stop-opacity="0"></stop>
+        </linearGradient>
+        <linearGradient id="speedFillLive" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" class="stop-live" stop-opacity=".95"></stop>
+          <stop offset="100%" class="stop-live" stop-opacity="0"></stop>
+        </linearGradient>
+      </defs>
+    `
+    svg += `<rect x="${plot.left}" y="${plot.top}" width="${innerW}" height="${innerH}" fill="transparent" pointer-events="all"></rect>`
+    for (let index = 0; index <= 3; index += 1) {
+      const y = plot.top + (innerH / 3) * index
+      const value = yMax * (1 - index / 3)
+      svg += `<line class="grid" x1="${plot.left}" y1="${y.toFixed(1)}" x2="${width - plot.right}" y2="${y.toFixed(1)}"></line>`
+      svg += `<text class="axis" x="${plot.left - 5}" y="${(y + 3).toFixed(1)}" text-anchor="end">${fmt(value, value >= 100 ? 0 : 1)}</text>`
+    }
+    if (recentMode) {
+      for (const seconds of [60, 45, 30, 15, 0]) {
+        const x = sx(1 - seconds / 60)
+        const anchor = seconds === 60 ? 'start' : seconds === 0 ? 'end' : 'middle'
+        const tx = seconds === 60 ? plot.left : seconds === 0 ? width - plot.right - 8 : x
+        svg += `<text class="axis" x="${tx.toFixed(1)}" y="${height - 5}" text-anchor="${anchor}">${seconds === 0 ? '现在' : `-${seconds}s`}</text>`
+      }
+    } else {
+      const liveGroup = groups.find((group) => group.live)
+      const history = groups.filter((group) => !group.live)
+      const ticks = []
+      if (!liveGroup) {
+        const count = Math.min(5, history.length)
+        if (history.length <= count) ticks.push(...history)
+        else {
+          for (let tick = 0; tick < count; tick += 1) {
+            ticks.push(history[Math.round((tick * (history.length - 1)) / (count - 1))])
+          }
+        }
+      } else {
+        const count = Math.min(3, history.length)
+        if (history.length <= count) ticks.push(...history)
+        else {
+          for (let tick = 0; tick < count; tick += 1) {
+            ticks.push(history[Math.round((tick * (history.length - 1)) / count)])
+          }
+        }
+        ticks.push(liveGroup)
+      }
+      for (let index = 0; index < ticks.length; index += 1) {
+        const group = ticks[index]
+        const last = index === ticks.length - 1
+        const x = last ? width - plot.right : sx(group.points[0].x)
+        const label = group.live ? '现在' : `#${group.attemptIndex + 1}`
+        svg += `<text class="axis" x="${x.toFixed(1)}" y="${height - 5}" text-anchor="${last ? 'end' : 'middle'}">${label}</text>`
+      }
+    }
+    svg += `<text class="axis" x="${width - plot.right}" y="${plot.top + 8}" text-anchor="end" opacity=".72">tok/s</text>`
+    chartHits = []
+    const averageMode = groups.every((group) => group.average === true)
+    if (averageMode) {
+      const history = groups.filter((group) => !group.live)
+      if (history.length >= 2) {
+        const points = history.map((group) => group.points[0])
+        const path = points.map((point, index) => `${index ? 'L' : 'M'}${sx(point.x).toFixed(1)} ${sy(point.y).toFixed(1)}`).join(' ')
+        const area = `${path} L${sx(points[points.length - 1].x).toFixed(1)} ${plot.top + innerH} L${sx(points[0].x).toFixed(1)} ${plot.top + innerH} Z`
+        svg += `<path class="area" d="${area}"></path>`
+        svg += `<path class="attempt-line" d="${path}"></path>`
+      }
+      const liveIndex = groups.findIndex((group) => group.live)
+      if (liveIndex > 0) {
+        const previous = groups[liveIndex - 1].points[0]
+        const current = groups[liveIndex].points[0]
+        svg += `<path class="live-line" d="M${sx(previous.x).toFixed(1)} ${sy(previous.y).toFixed(1)} L${sx(current.x).toFixed(1)} ${sy(current.y).toFixed(1)}"></path>`
+      }
+      const lastHistory = history[history.length - 1]
+      for (let index = 0; index < groups.length; index += 1) {
+        const group = groups[index]
+        const point = group.points[0]
+        const showDot = group.live || groups.length <= 30 || group === lastHistory
+        if (showDot) {
+          svg += `<circle class="${group.live ? 'live-dot' : 'attempt-dot'}" cx="${sx(point.x).toFixed(1)}" cy="${sy(point.y).toFixed(1)}" r="${group.live ? 3 : 1.8}"></circle>`
+        }
+        chartHits.push({
+          x: sx(point.x),
+          y: sy(point.y),
+          rawX: point.x,
+          relMs: point.relMs,
+          timeLabel: point.timeLabel,
+          value: point.y,
+          live: group.live,
+          average: true,
+          attempt: group.attempt,
+          label: group.label,
+        })
+      }
+    } else {
+      for (const group of groups) {
+        const points = group.points
+        if (points.length === 0) continue
+        const path = points.map((point, index) => `${index ? 'L' : 'M'}${sx(point.x).toFixed(1)} ${sy(point.y).toFixed(1)}`).join(' ')
+        if (points.length >= 2) {
+          const area = `${path} L${sx(points[points.length - 1].x).toFixed(1)} ${plot.top + innerH} L${sx(points[0].x).toFixed(1)} ${plot.top + innerH} Z`
+          svg += `<path class="${group.live ? 'area-live' : 'area'}" d="${area}"></path>`
+          svg += `<path class="${group.live ? 'live-line' : 'attempt-line'}" d="${path}"></path>`
+        }
+        const endpoint = points[points.length - 1]
+        svg += `<circle class="${group.live ? 'live-dot' : 'attempt-dot'}" cx="${sx(endpoint.x).toFixed(1)}" cy="${sy(endpoint.y).toFixed(1)}" r="${group.live ? 2.6 : 1.6}"></circle>`
+        for (const point of points) {
+          chartHits.push({
+            x: sx(point.x),
+            y: sy(point.y),
+            rawX: point.x,
+            relMs: point.relMs,
+            timeLabel: point.timeLabel,
+            value: point.y,
+            live: group.live,
+            average: false,
+            attempt: group.attempt,
+            label: group.label,
+          })
+        }
+      }
+    }
+    const liveGroup = groups.find((group) => group.live)
+    if (liveGroup) {
+      const lastX = liveGroup.points[liveGroup.points.length - 1].x
+      svg += `<line x1="${sx(lastX).toFixed(1)}" y1="${plot.top}" x2="${sx(lastX).toFixed(1)}" y2="${plot.top + innerH}" stroke="var(--sp-live)" stroke-opacity=".2" stroke-width="1"></line>`
+    }
+    svg += `<line class="guide hidden" id="guide" x1="0" y1="${plot.top}" x2="0" y2="${plot.top + innerH}"></line>`
+    svg += `<circle class="hover-dot hidden" id="hoverDot" cx="0" cy="0" r="3"></circle>`
+    els.chart.innerHTML = svg
+    const pannable = !recentMode && chartRange.maxOffset > 0
+    els.chart.classList.toggle('pannable', pannable)
+    els.chart.setAttribute('title', pannable ? '横向拖动查看更早的生成' : '')
+    chartGeometry = { width, height, plot, innerW, innerH, xMin, xMax, yMax, sx, sy }
+    if (hoverX != null) updateHover(hoverX)
+  }
+
+  function onChartMove(event) {
+    if (!chartGeometry || chartDrag) return
+    const rect = els.chart.getBoundingClientRect()
+    if (!rect.width) return
+    const x = ((event.clientX - rect.left) / rect.width) * chartGeometry.width
+    hoverX = x
+    updateHover(x)
+  }
+
+  function updateHover(x) {
+    if (!chartGeometry || !chartHits.length || !els.chart) return
+    let best = null
+    let bestDistance = Infinity
+    for (const hit of chartHits) {
+      const distance = Math.abs(hit.x - x)
+      if (distance < bestDistance) {
+        bestDistance = distance
+        best = hit
+      }
+    }
+    if (!best || bestDistance > 40) {
+      clearHover()
+      return
+    }
+    const guide = els.chart.querySelector('#guide')
+    const dot = els.chart.querySelector('#hoverDot')
+    if (guide) {
+      guide.classList.remove('hidden')
+      guide.setAttribute('x1', best.x.toFixed(1))
+      guide.setAttribute('x2', best.x.toFixed(1))
+    }
+    if (dot) {
+      dot.classList.remove('hidden')
+      dot.setAttribute('cx', best.x.toFixed(1))
+      dot.setAttribute('cy', best.y.toFixed(1))
+    }
+    const rel = Math.max(0, Number.isFinite(best.relMs) ? best.relMs : 0)
+    const title = best.label || (best.live ? '正在生成' : best.attempt ? `第 ${Math.max(1, (session?.attempts || []).indexOf(best.attempt) + 1)} 次生成` : '生成')
+    const timePart = best.average || best.live ? '' : best.timeLabel ? ` · ${best.timeLabel}` : ` · +${clock(rel)}`
+    els.chartTip.innerHTML = `<b>${fmt(best.value)} tok/s</b><br>${esc(title)}${timePart}`
+    els.chartTip.style.display = 'block'
+    const px = (best.x / chartGeometry.width) * els.chart.getBoundingClientRect().width
+    const left = Math.min(Math.max(2, px + 8), Math.max(2, els.chart.getBoundingClientRect().width - 118))
+    els.chartTip.style.left = `${left}px`
+    els.chartTip.style.top = `${Math.max(4, Math.min(120, best.y - 6))}px`
+  }
+
+  function clearHover() {
+    hoverX = null
+    if (!els.chart) return
+    const guide = els.chart.querySelector('#guide')
+    const dot = els.chart.querySelector('#hoverDot')
+    if (guide) guide.classList.add('hidden')
+    if (dot) dot.classList.add('hidden')
+    if (els.chartTip) els.chartTip.style.display = 'none'
+  }
+
+  function scheduleRender() {
+    if (renderQueued) return
+    renderQueued = true
+    requestAnimationFrame(render)
+  }
+
+  async function loadState() {
+    try {
+      const response = await fetch(STATE_ROUTE, { cache: 'no-store', credentials: 'same-origin' })
+      if (!response.ok) throw new Error(String(response.status))
+      const payload = await response.json()
+      applyState(payload)
+      lastEventAt = Date.now()
+      state.connected = true
+      scheduleRender()
+    } catch {
+      state.connected = false
+      scheduleRender()
+    }
+  }
+
+  function connect() {
+    if (typeof window.EventSource !== 'function') {
+      startPolling()
+      return
+    }
+    if (eventSource) {
+      try { eventSource.close() } catch {}
+    }
+    try {
+      eventSource = new EventSource(EVENTS_ROUTE)
+    } catch {
+      eventSource = null
+      startPolling()
+      return
+    }
+    const types = ['state', 'start', 'tick', 'end', 'attempt', 'session', 'active']
+    for (const type of types) {
+      eventSource.addEventListener(type, (event) => {
+        const payload = parseData(event.data)
+        if (payload) applyEvent(type, payload)
+      })
+    }
+    eventSource.onopen = () => {
+      state.connected = true
+      lastEventAt = Date.now()
+      stopPolling()
+      scheduleRender()
+    }
+    eventSource.onerror = () => {
+      state.connected = false
+      scheduleRender()
+      startPolling()
+    }
+  }
+
+  function startPolling() {
+    if (pollTimer) return
+    pollTimer = setInterval(loadState, 2500)
+  }
+
+  function stopPolling() {
+    if (!pollTimer) return
+    clearInterval(pollTimer)
+    pollTimer = null
+  }
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState !== 'visible') return
+    scheduleRender()
+    loadState()
+  })
+
+  loadPrefs()
+  if (document.body) mount()
+  else document.addEventListener('DOMContentLoaded', mount, { once: true })
+})()