dsh-plugin-show-me-data 0.1.0

package/src/client/components.js

@@ -0,0 +1,1877 @@
+/**
+ * Panel components, written with 'React.createElement' (docs/05 §2).
+ *
+ * The browser half is a classic script with no transform step, so JSX and hooks
+ * beyond 'useState'/'useEffect'/'useMemo'/'useRef' are off the table; the tests
+ * assert structure ("label, value, unit and source badge all reach the DOM")
+ * rather than pixels.
+ *
+ * @module client/components
+ */
+
+/** How often the panel asks a discussion session for its answer. */
+const DISCUSSION_POLL_INTERVAL_MS = 1500
+/** How long it keeps asking before giving up (a model turn can be slow). */
+const DISCUSSION_POLL_MS = 180_000
+
+/** CSS scoped under the panel root, using only theme tokens with fallbacks. */
+export const PANEL_CSS = `
+.smd-root{position:fixed;right:18px;bottom:18px;z-index:60;pointer-events:none;font-size:13px}
+.smd-root *{box-sizing:border-box}
+.smd-trigger{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;
+  border:1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.35));background:var(--dsw-alias-bg-overlay, #fff);
+  color:var(--dsw-alias-label-primary, #111);cursor:pointer;box-shadow:var(--dsw-shadow-lv3, 0 6px 24px rgba(0,0,0,.18))}
+.smd-trigger:hover{color:var(--dsw-alias-brand-primary, #3b6cff)}
+.smd-badge{background:var(--dsw-alias-button-primary-fill, #3b6cff);color:var(--dsw-alias-label-primary-foreground, #fff);border-radius:9px;padding:0 6px;font-size:11px;line-height:16px}
+.smd-panel{pointer-events:auto;position:fixed;right:18px;bottom:66px;width:min(960px, calc(100vw - 36px));
+  max-height:min(78vh, 900px);display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
+  border:1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.35));background:var(--dsw-alias-bg-overlay, #fff);
+  color:var(--dsw-alias-label-primary, #111);box-shadow:var(--dsw-shadow-lv3, 0 10px 40px rgba(0,0,0,.22))}
+.smd-header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.2))}
+.smd-title{font-weight:600}
+.smd-sub{color:var(--dsw-alias-label-secondary, #666);font-size:11px}
+.smd-spacer{flex:1}
+.smd-btn{background:transparent;border:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.25));color:inherit;
+  border-radius:8px;padding:3px 8px;cursor:pointer;font-size:12px}
+.smd-btn:hover{border-color:var(--dsw-alias-brand-primary, #3b6cff);color:var(--dsw-alias-brand-primary, #3b6cff)}
+.smd-btn[aria-pressed="true"]{background:var(--dsw-alias-button-primary-fill, #3b6cff);color:var(--dsw-alias-label-primary-foreground, #fff);border-color:transparent;font-weight:600}
+.smd-btn[aria-pressed="true"]:hover{background:var(--dsw-alias-button-primary-hover, #2f5ae0);color:var(--dsw-alias-label-primary-foreground, #fff)}
+.smd-tabs{display:flex;gap:6px;flex-wrap:wrap}
+.smd-body{overflow:auto;padding:12px;display:flex;flex-direction:column;gap:12px}
+.smd-banner{border-radius:10px;padding:8px 10px;background:var(--dsw-alias-state-warn-primary, #b8860b1a);border:1px solid var(--dsw-alias-state-warn-primary, #b8860b)}
+.smd-bannerError{background:var(--dsw-alias-state-error-primary, #b000201a);border-color:var(--dsw-alias-state-error-primary, #b00020)}
+.smd-sectionTitle{font-weight:600;margin:2px 0 6px}
+.smd-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:8px}
+.smd-iterate{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.22));padding-top:8px}
+.smd-selectBar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border-radius:10px;
+  border:1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.35));background:var(--dsw-alias-bg-layer-1, rgba(127,127,127,.06));font-size:12px}
+.smd-section{display:flex;flex-direction:column;gap:8px}
+.smd-groupTitle{font-weight:600;font-size:12px;letter-spacing:.02em}
+.smd-cardOn{border-color:var(--dsw-alias-button-primary-fill, #3b6cff)}
+.smd-pick{display:flex;align-items:center;padding:0 2px 0 0}
+.smd-cardBody{display:flex;flex-direction:column;gap:4px;background:transparent;border:0;color:inherit;text-align:left;cursor:pointer;width:100%;padding:0}
+.smd-card{border:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.22));border-radius:10px;padding:8px 10px;
+  background:var(--dsw-alias-bg-layer-1, #fafafa);display:flex;flex-direction:row;gap:6px;align-items:flex-start;text-align:left}
+.smd-card:has(.smd-pick:hover){border-color:var(--dsw-alias-brand-primary, #3b6cff)}
+.smd-card:hover{border-color:var(--dsw-alias-brand-primary, #3b6cff)}
+.smd-cardHead{display:flex;align-items:center;gap:6px}
+.smd-label{font-weight:600;font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.smd-dot{width:7px;height:7px;border-radius:50%;flex:none}
+.smd-dotUp{background:var(--dsw-alias-state-success-primary, #12805c)}
+.smd-dotWarn{background:var(--dsw-alias-state-warn-primary, #b8860b)}
+.smd-dotError{background:var(--dsw-alias-state-error-primary, #b00020)}
+.smd-dotNeutral{background:var(--dsw-alias-label-secondary, #888)}
+.smd-value{font-size:18px;font-variant-numeric:tabular-nums}
+.smd-unit{font-size:11px;color:var(--dsw-alias-label-secondary, #666);margin-left:3px}
+.smd-change{font-size:11px;font-variant-numeric:tabular-nums}
+.smd-up{color:var(--dsw-alias-state-success-primary, #12805c)}
+.smd-down{color:var(--dsw-alias-state-error-primary, #b00020)}
+.smd-neutral{color:var(--dsw-alias-label-secondary, #666)}
+.smd-footer{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.smd-src{font-size:10px;border:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.25));border-radius:6px;
+  padding:0 5px;color:var(--dsw-alias-label-secondary, #666);text-decoration:none}
+.smd-src:hover{color:var(--dsw-alias-brand-primary, #3b6cff)}
+.smd-spark{display:block}
+.smd-note{font-size:11px;color:var(--dsw-alias-label-secondary, #666)}
+.smd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
+.smd-noteItem{border-left:3px solid var(--dsw-alias-brand-primary, #3b6cff);padding-left:8px}
+.smd-detail{display:flex;flex-direction:column;gap:10px}
+.smd-chart{display:flex;flex-direction:column;gap:6px}
+.smd-chartBar{display:flex;align-items:center;gap:8px;min-height:22px}
+.smd-chartHint{font-size:11px;color:var(--dsw-alias-label-secondary, #888)}
+.smd-chartReadout{font-size:12px;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-primary, #111);font-weight:600}
+.smd-chipBtn{font-size:10px;line-height:16px;padding:1px 7px;border-radius:999px;cursor:pointer;color:inherit;
+  border:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.3));background:transparent}
+.smd-chipBtnOn{background:var(--dsw-alias-interactive-bg-active, #eef1f6);border-color:var(--dsw-alias-border-l2, rgba(127,127,127,.45));font-weight:600}
+.smd-btnInline{margin-left:6px;font-size:11px;padding:1px 6px}
+.smd-chartPlot{position:relative;width:100%}
+.smd-svg{display:block;width:100%;height:auto;color:var(--dsw-alias-brand-primary, #3b6cff);touch-action:none}
+.smd-gridLine{stroke:currentColor;stroke-opacity:.10}
+.smd-zero{stroke:currentColor;stroke-opacity:.35}
+.smd-ref{stroke:currentColor;stroke-opacity:.28}
+.smd-refLabel,.smd-axis{font-size:9px;fill:var(--dsw-alias-label-secondary, #777)}
+.smd-hitArea{cursor:crosshair}
+.smd-series{color:var(--dsw-alias-brand-primary, #3b6cff)}
+.smd-line{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
+.smd-area{fill:url(#smd-area);stroke:none}
+.smd-bar{fill:currentColor;fill-opacity:.75}
+.smd-candle line{stroke:currentColor;stroke-width:1}
+.smd-candle rect{fill:currentColor}
+.smd-candleHollow rect{fill:var(--dsw-alias-bg-base, #fff);stroke:currentColor;stroke-width:1}
+.smd-cross line{stroke:currentColor;stroke-opacity:.45;stroke-dasharray:3 3}
+.smd-cross circle{fill:currentColor;stroke:var(--dsw-alias-bg-base, #fff);stroke-width:1.4}
+.smd-tip{position:absolute;top:4px;transform:translateX(8px);pointer-events:none;background:var(--dsw-alias-bg-overlay, #fff);
+  border:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.3));border-radius:8px;padding:4px 7px;font-size:11px;
+  box-shadow:var(--dsw-shadow-lv2, 0 2px 10px rgba(0,0,0,.12));color:var(--dsw-alias-label-primary, #111);min-width:96px}
+.smd-tipLeft{transform:translateX(calc(-100% - 8px))}
+.smd-tipDate{color:var(--dsw-alias-label-secondary, #666);font-size:10px}
+.smd-tipValue{font-weight:600;font-variant-numeric:tabular-nums}
+.smd-tipRow{display:grid;grid-template-columns:auto auto auto auto auto auto;gap:0 5px;color:var(--dsw-alias-label-secondary, #666);font-variant-numeric:tabular-nums}
+.smd-stats{display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:6px;font-size:12px}
+.smd-statKey{color:var(--dsw-alias-label-secondary, #666);font-size:11px}
+.smd-table{width:100%;border-collapse:collapse;font-size:12px}
+.smd-table th,.smd-table td{text-align:left;padding:3px 6px;border-bottom:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.18))}
+.smd-ai{border:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.22));border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
+.smd-aiText{white-space:pre-wrap;font-size:12px;line-height:1.6}
+.smd-discussAnswer{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.22));padding-top:6px}
+.smd-setRow{display:grid;grid-template-columns:minmax(96px, 130px) minmax(80px, 1fr) minmax(120px, 1.4fr);gap:4px 10px;align-items:baseline;
+  padding:4px 0;border-bottom:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.14));font-size:12px}
+.smd-setLabel{color:var(--dsw-alias-label-secondary, #666)}
+.smd-setValue{font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
+.smd-setHint{color:var(--dsw-alias-label-tertiary, #888);font-size:11px}
+.smd-discuss{display:flex;flex-direction:column;gap:6px;border:1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.35));
+  border-radius:10px;padding:8px 10px;background:var(--dsw-alias-bg-layer-1, rgba(127,127,127,.06))}
+.smd-chips{display:flex;gap:6px;flex-wrap:wrap}
+.smd-chip{font-size:10px;border-radius:6px;padding:1px 5px;background:var(--dsw-alias-bg-layer-2, #eee);color:var(--dsw-alias-label-secondary, #555)}
+.smd-input{width:100%;padding:5px 7px;border-radius:8px;border:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.3));
+  background:var(--dsw-alias-bg-base, #fff);color:inherit;font-size:12px}
+.smd-foot{font-size:11px;color:var(--dsw-alias-label-secondary, #666);border-top:1px solid var(--dsw-alias-border-l1, rgba(127,127,127,.2));padding:8px 12px}
+.smd-row{display:flex;align-items:center;gap:8px}
+`
+
+/**
+ * Inject the panel's stylesheet once.
+ *
+ * @param {Document} doc - host document.
+ * @param {string} [css] - stylesheet text.
+ * @returns {() => void} disposer removing the tag.
+ */
+export function insertStyles(doc, css = PANEL_CSS) {
+  const tagId = 'show-me-data/panel.css'
+  if (doc.querySelector(`style[data-plugin-css="${tagId}"]`) !== null) return () => {}
+  const tag = doc.createElement('style')
+  tag.dataset.plugin = 'show-me-data'
+  tag.dataset.pluginCss = tagId
+  tag.textContent = css
+  doc.head.appendChild(tag)
+  return () => {
+    if (tag.parentNode !== null) tag.parentNode.removeChild(tag)
+  }
+}
+
+/**
+ * Create the component set for one React instance.
+ *
+ * @param {object} React - React (or the test stub).
+ * @param {object} deps - dependencies.
+ * @param {object} deps.store - panel store.
+ * @param {object} deps.api - API client.
+ * @param {object} deps.copy - copy table.
+ * @param {object} deps.format - formatting helpers ('core/format' plus the chart builders).
+ * @returns {Record<string, Function>} components.
+ */
+export function createComponents(React, { store, api, copy, format, sessions, applyIndicatorChange = () => ({}), pollIntervalMs, pollTimeoutMs }) {
+  const { createElement: h, useState, useEffect, useMemo, useRef } = React
+  const {
+    buildLinePath,
+    buildBarRects,
+    buildSparklineShape,
+    buildXAxis,
+    buildYAxis,
+    buildZeroLine,
+    buildTimeAxis,
+    buildCandles,
+    buildCrosshair,
+    buildReferenceLines,
+    nearestIndex,
+    valueDomain,
+    hasOhlc,
+    linearScale,
+    niceTicks,
+    formatValue,
+    formatChange,
+    formatAge,
+    changeColor,
+    statusDot,
+    metricTooltip,
+    truncate,
+  } = format
+
+  /**
+   * A small inline sparkline.
+   *
+   * @param {{ values: number[], width?: number, height?: number }} props - props.
+   * @returns {any} element.
+   */
+  function Sparkline({ values, width = 88, height = 22 }) {
+    const { path, dot } = buildSparklineShape(values ?? [], { width, height, padding: 1 })
+    if (path === '') return h('span', { className: 'smd-note' }, '—')
+    return h(
+      'svg',
+      { className: 'smd-spark', width, height, viewBox: `0 0 ${width} ${height}`, role: 'img', 'aria-label': '走势' },
+      h('path', { d: path, fill: 'none', stroke: 'currentColor', strokeWidth: 1.2 }),
+      dot === null ? null : h('circle', { cx: dot.cx, cy: dot.cy, r: dot.r, fill: 'currentColor' }),
+    )
+  }
+
+  /**
+   * One metric card.
+   *
+   * @param {{ metric: object, onOpen: Function }} props - props.
+   * @returns {any} element.
+   */
+  function MetricCard({ metric, onOpen, selected, onToggleSelect }) {
+    const dot = statusDot(metric.status)
+    const decimals = metric.display?.decimals ?? 2
+    const color = changeColor(metric.changeAbs, metric.display?.polarity)
+    const dotClass = { up: 'smd-dotUp', warn: 'smd-dotWarn', error: 'smd-dotError', neutral: 'smd-dotNeutral' }[dot.color]
+    return h(
+      'div',
+      {
+        className: `smd-card${selected === true ? ' smd-cardOn' : ''}`,
+      },
+      // A nested button cannot hold the checkbox, so selection lives beside the
+      // card's own clickable surface rather than inside it.
+      onToggleSelect === undefined
+        ? null
+        : h(
+            'label',
+            { className: 'smd-pick', title: copy.selectHint },
+            h('input', { type: 'checkbox', checked: selected === true, onChange: () => onToggleSelect(metric.indicatorId) }),
+          ),
+      h(
+        'button',
+        {
+          type: 'button',
+          className: 'smd-cardBody',
+          title: metricTooltip(metric),
+          onClick: () => onOpen?.(metric.indicatorId),
+        },
+        h(
+          'div',
+          { className: 'smd-cardHead' },
+          h('span', { className: 'smd-label' }, metric.label?.zh ?? metric.indicatorId),
+        metric.seasonal !== undefined && metric.seasonal !== 'NA' ? h('span', { className: 'smd-chip' }, metric.seasonal) : null,
+        h('span', { className: `smd-dot ${dotClass}`, 'aria-label': dot.label }),
+      ),
+      metric.status === 'error'
+        ? h('div', { className: 'smd-note' }, `${copy.errorHint}（${metric.errorKind ?? 'unknown'}）`)
+        : metric.status === 'missing'
+          ? h('div', { className: 'smd-note' }, copy.missingHint)
+          : h(
+              'div',
+              { className: 'smd-value' },
+              formatValue(metric.latest, { decimals }),
+              h('span', { className: 'smd-unit' }, metric.unit),
+            ),
+      metric.status === 'fresh' || metric.status === 'stale'
+        ? h('div', { className: `smd-change smd-${color}` }, formatChange(metric.changeAbs, metric.changePct, '', decimals))
+        : null,
+      h('div', { className: 'smd-footer' }, h(Sparkline, { values: metric.sparkline })),
+      h(
+        'div',
+        { className: 'smd-footer' },
+        metric.sourceRef?.url === undefined
+          ? null
+          : h(
+              'a',
+              {
+                className: 'smd-src',
+                href: metric.sourceRef.url,
+                target: '_blank',
+                rel: 'noreferrer noopener',
+                onClick: (event) => event.stopPropagation(),
+                title: copy.viewSource,
+              },
+              `${copy.sourceBadge}: ${metric.sourceRef.label ?? metric.sourceRef.adapterId}`,
+            ),
+        h('span', { className: 'smd-note' }, metric.latestAt ?? ''),
+          metric.status === 'stale' ? h('span', { className: 'smd-chip' }, copy.fromCache) : null,
+        ),
+      ),
+    )
+  }
+
+  /**
+   * The noteworthy list.
+   *
+   * @param {{ items: object[], onOpen: Function }} props - props.
+   * @returns {any} element.
+   */
+  function NoteworthyList({ items, onOpen, onDiscuss, discussingId }) {
+    if ((items ?? []).length === 0) return h('div', { className: 'smd-note' }, copy.noteworthyEmpty)
+    return h(
+      'ul',
+      { className: 'smd-list' },
+      items.map((item) =>
+        h(
+          'li',
+          { className: 'smd-noteItem', key: item.indicatorId },
+          h(
+            'button',
+            { type: 'button', className: 'smd-btn', onClick: () => onOpen?.(item.indicatorId) },
+            `${copy.viewDetail} ${item.label?.zh ?? item.indicatorId}`,
+          ),
+          h('span', { className: 'smd-note' }, ` 关注分 ${item.score}`),
+          // The whole point of this list is "what moved and why", so the row
+          // carries the action that answers it: a session seeded with this
+          // indicator, the rule that fired, and the panel numbers behind it.
+          onDiscuss === undefined
+            ? null
+            : h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'smd-btn smd-btnInline',
+                  title: copy.noteworthyDiscussHint,
+                  disabled: discussingId === item.indicatorId,
+                  onClick: () => onDiscuss(item.indicatorId),
+                },
+                discussingId === item.indicatorId ? copy.discussing : copy.noteworthyDiscuss,
+              ),
+          h(
+            'div',
+            { className: 'smd-note' },
+            (item.reasons ?? []).map((reason) => reason.reason?.zh ?? reason.ruleId).join('；'),
+          ),
+          item.sourceRef?.url === undefined
+            ? null
+            : h(
+                'a',
+                { className: 'smd-src', href: item.sourceRef.url, target: '_blank', rel: 'noreferrer noopener' },
+                item.sourceRef.label ?? copy.sourceBadge,
+              ),
+        ),
+      ),
+    )
+  }
+
+  /**
+   * The main chart: value axis, time axis, candles or a line, crosshair readout.
+   *
+   * Everything it draws comes from the pure builders in 'core/chart', so the
+   * interactive parts are only React state: which index the pointer is over and
+   * which view mode is selected. Hovering is index-snapped — the pointer never
+   * has to land on a 1px line to read a value — and the readout states OHLC per
+   * bar when the source supplies it.
+   *
+   * @param {{ points: object[], unit: string, decimals?: number, kind?: string, stats?: object, polarity?: string, onDiscuss?: Function, discussing?: boolean, height?: number, mode?: string }} props - props.
+   * @returns {any} element.
+   */
+  function Chart({ points, unit, decimals = 2, kind = 'line', stats, polarity, height = 280, mode }) {
+    const [showTable, setShowTable] = useState(false)
+    const [hover, setHover] = useState(-1)
+    const candlesAvailable = hasOhlc(points)
+    const [view, setView] = useState(mode ?? (candlesAvailable && kind !== 'bar' ? 'candle' : kind === 'bar' ? 'bar' : 'area'))
+    const svgRef = useRef(null)
+    const width = 720
+    const geometry = useMemo(() => ({ width, height, padLeft: 14, padRight: 62, padTop: 16, padBottom: 30 }), [height])
+
+    const chart = useMemo(() => {
+      const list = points ?? []
+      if (list.length === 0) return undefined
+      const useExtremes = view === 'candle'
+      const raw = valueDomain(list, { useExtremes })
+      if (raw === undefined) return undefined
+      const axis = niceTicks(raw.min, raw.max, 5)
+      const yDomain = { min: axis.min, max: axis.max }
+      const plot = {
+        x: geometry.padLeft,
+        y: geometry.padTop,
+        w: width - geometry.padLeft - geometry.padRight,
+        h: height - geometry.padTop - geometry.padBottom,
+      }
+      const yScale = linearScale({ domain: [yDomain.min, yDomain.max], range: [plot.y + plot.h, plot.y] })
+      const span = Math.max(1, list.length - 1)
+      const xAt = (index) => plot.x + (index / span) * plot.w
+      const pathFor = (entries, close) => {
+        let d = ''
+        let open = false
+        entries.forEach((point, index) => {
+          if (!Number.isFinite(point.v)) {
+            open = false
+            return
+          }
+          d += `${open ? 'L' : 'M'}${Number(xAt(index).toFixed(2))} ${Number(yScale(point.v).toFixed(2))} `
+          open = true
+        })
+        return close && entries.length > 0 ? `${d}Z` : d.trim()
+      }
+      return {
+        list,
+        plot,
+        yDomain,
+        yTicks: axis.ticks.map((tick) => ({ value: tick, y: Number(yScale(tick).toFixed(2)), label: formatValue(tick, { decimals }) })),
+        xTicks: buildTimeAxis(list.map((point) => point.t), { width, height, padX: plot.x, padY: plot.y, padRight: geometry.padRight, padBottom: geometry.padBottom, innerW: plot.w, innerH: plot.h }),
+        candles: view === 'candle' ? buildCandles(list, { width, height, padX: plot.x, padY: plot.y, innerW: plot.w, innerH: plot.h, yDomain }) : [],
+        line: pathFor(list, false),
+        area: `${pathFor(list, false)}L${Number(xAt(list.length - 1).toFixed(2))} ${plot.y + plot.h} L${Number(xAt(0).toFixed(2))} ${plot.y + plot.h} Z`,
+        bars: view === 'bar' ? buildBarRects(list, { width, height, padX: plot.x, padY: plot.y, innerW: plot.w, innerH: plot.h, yDomain }) : [],
+        refs: buildReferenceLines(stats, yDomain, { plot }),
+        zero: yDomain.min < 0 && yDomain.max > 0 ? Number(yScale(0).toFixed(2)) : null,
+      }
+    }, [points, decimals, view, stats, geometry, height, width])
+
+    if (chart === undefined) return h('div', { className: 'smd-note' }, copy.empty)
+
+    const toIndex = (event) => {
+      const node = svgRef.current
+      if (node === null || typeof node.getBoundingClientRect !== 'function') return -1
+      const rect = node.getBoundingClientRect()
+      if (rect.width <= 0) return -1
+      const x = ((event.clientX - rect.left) / rect.width) * width
+      return nearestIndex(x, chart.list.length, { width, padLeft: geometry.padLeft, padRight: geometry.padRight, padX: chart.plot.x, innerW: chart.plot.w })
+    }
+    const cross = hover < 0 ? undefined : buildCrosshair({
+      points: chart.list,
+      index: hover,
+      geometry: { width, height, yDomain: chart.yDomain, padLeft: geometry.padLeft, padRight: geometry.padRight, padTop: geometry.padTop, padBottom: geometry.padBottom, padX: chart.plot.x, padY: chart.plot.y, innerW: chart.plot.w, innerH: chart.plot.h },
+    })
+
+    const modes = [
+      ...(candlesAvailable ? [['candle', copy.chartCandle]] : []),
+      ['area', copy.chartArea],
+      ['line', copy.chartLine],
+      ['bar', copy.chartBar],
+    ]
+
+    return h(
+      'div',
+      { className: 'smd-chart' },
+      h(
+        'div',
+        { className: 'smd-chartBar' },
+        h(
+          'span',
+          { className: 'smd-chips' },
+          modes.map(([id, label]) =>
+            h(
+              'button',
+              {
+                key: id,
+                type: 'button',
+                className: `smd-chipBtn${view === id ? ' smd-chipBtnOn' : ''}`,
+                'aria-pressed': view === id,
+                onClick: () => setView(id),
+              },
+              label,
+            ),
+          ),
+        ),
+        h('span', { className: 'smd-spacer' }),
+        cross === undefined
+          ? h('span', { className: 'smd-chartHint' }, copy.chartHint)
+          : h('span', { className: 'smd-chartReadout' }, readout(cross, { unit, decimals, polarity })),
+      ),
+      h(
+        'div',
+        { className: 'smd-chartPlot' },
+        h(
+          'svg',
+          {
+            ref: svgRef,
+            className: 'smd-svg',
+            viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: 'none',
+            role: 'img',
+            'aria-label': `${copy.tabDetail} ${unit}`,
+            onPointerMove: (event) => setHover(toIndex(event)),
+            onPointerLeave: () => setHover(-1),
+            onPointerDown: (event) => setHover(toIndex(event)),
+          },
+          h(
+            'defs',
+            null,
+            h(
+              'linearGradient',
+              { id: 'smd-area', x1: '0', y1: '0', x2: '0', y2: '1' },
+              h('stop', { offset: '0%', stopColor: 'currentColor', stopOpacity: 0.28 }),
+              h('stop', { offset: '100%', stopColor: 'currentColor', stopOpacity: 0.02 }),
+            ),
+          ),
+          chart.yTicks.map((tick) =>
+            h('line', { key: `g${tick.value}`, className: 'smd-gridLine', x1: chart.plot.x, x2: chart.plot.x + chart.plot.w, y1: tick.y, y2: tick.y }),
+          ),
+          chart.zero === null ? null : h('line', { className: 'smd-zero', x1: chart.plot.x, x2: chart.plot.x + chart.plot.w, y1: chart.zero, y2: chart.zero }),
+          chart.refs.map((ref) =>
+            h(
+              'g',
+              { key: `r${ref.kind}` },
+              h('line', { className: 'smd-ref', x1: chart.plot.x, x2: chart.plot.x + chart.plot.w, y1: ref.y, y2: ref.y, strokeDasharray: '4 4' }),
+              h('text', { className: 'smd-refLabel', x: chart.plot.x + chart.plot.w + 4, y: ref.y + 3 }, `${ref.label}${formatValue(ref.value, { decimals })}`),
+            ),
+          ),
+          chart.yTicks.map((tick) => h('text', { key: `y${tick.value}`, className: 'smd-axis', x: chart.plot.x + chart.plot.w + 4, y: tick.y + 3 }, tick.label)),
+          chart.xTicks.map((tick) => h('text', { key: `x${tick.t}`, className: 'smd-axis', x: tick.x, y: height - 10, textAnchor: tick.anchor }, tick.label)),
+          view === 'candle'
+            ? chart.candles.map((candle) =>
+                h(
+                  'g',
+                  { key: candle.t, className: `smd-candle ${changeColor(candle.point.v - candle.point.o, polarity)}` },
+                  h('line', { x1: candle.x, x2: candle.x, y1: candle.yHigh, y2: candle.yLow }),
+                  h('rect', { x: Number((candle.x - candle.bodyW / 2).toFixed(2)), y: candle.bodyTop, width: candle.bodyW, height: candle.bodyH, className: candle.hollow ? 'smd-candleHollow' : undefined }),
+                ),
+              )
+            : view === 'bar'
+              ? chart.bars.map((rect) => h('rect', { key: rect.t, className: 'smd-bar', x: rect.x, y: rect.y, width: Math.max(1, rect.w), height: rect.h }))
+              : h(
+                  'g',
+                  { className: 'smd-series' },
+                  view === 'area' ? h('path', { className: 'smd-area', d: chart.area }) : null,
+                  h('path', { className: 'smd-line', d: chart.line }),
+                ),
+          cross === undefined
+            ? null
+            : h(
+                'g',
+                { className: 'smd-cross' },
+                h('line', { x1: cross.x, x2: cross.x, y1: chart.plot.y, y2: chart.plot.y + chart.plot.h }),
+                h('circle', { cx: cross.x, cy: cross.y, r: 3.2 }),
+                chart.yTicks.map((tick) => h('line', { key: `h${tick.value}`, className: 'smd-crossH', x1: chart.plot.x, x2: chart.plot.x + chart.plot.w, y1: tick.y, y2: tick.y, strokeOpacity: 0 })),
+              ),
+          h('rect', { className: 'smd-hitArea', x: chart.plot.x, y: chart.plot.y, width: chart.plot.w, height: chart.plot.h, fill: 'transparent' }),
+        ),
+        cross === undefined
+          ? null
+          : h(
+              'div',
+              { className: `smd-tip${cross.anchoredLeft ? ' smd-tipLeft' : ''}`, style: { left: `${(cross.x / width) * 100}%` } },
+              h('div', { className: 'smd-tipDate' }, cross.point.t),
+              cross.bar === undefined
+                ? null
+                : h(
+                    'div',
+                    { className: 'smd-tipRow' },
+                    h('span', null, '开'), h('span', null, formatValue(cross.bar.o, { decimals })),
+                    h('span', null, '高'), h('span', null, formatValue(cross.bar.h, { decimals })),
+                    h('span', null, '低'), h('span', null, formatValue(cross.bar.l, { decimals })),
+                  ),
+              h('div', { className: 'smd-tipValue' }, `${formatValue(cross.point.v, { decimals })}${unit ?? ''}`),
+            ),
+      ),
+      h(
+        'div',
+        { className: 'smd-chartBar' },
+        h('button', { type: 'button', className: 'smd-btn', onClick: () => setShowTable((value) => !value) }, showTable ? copy.hideDataTable : copy.showDataTable),
+        h('span', { className: 'smd-spacer' }),
+        h('span', { className: 'smd-note' }, `${(points ?? []).length} ${copy.pointsUnit}`),
+      ),
+      showTable
+        ? h(
+            'table',
+            { className: 'smd-table' },
+            h('thead', null, h('tr', null, h('th', null, copy.date), h('th', null, copy.value))),
+            h(
+              'tbody',
+              null,
+              (points ?? []).slice(-40).reverse().map((point) =>
+                h('tr', { key: point.t }, h('td', null, point.t), h('td', null, formatValue(point.v, { decimals }))),
+              ),
+            ),
+          )
+        : null,
+    )
+  }
+
+  /**
+   * The hover readout shown in the chart's header bar.
+   *
+   * @param {object} cross - crosshair state.
+   * @param {{ unit?: string, decimals?: number, polarity?: string }} options - formatting.
+   * @returns {string} readout text.
+   */
+  function readout(cross, { unit, decimals, polarity }) {
+    const change = cross.bar === undefined ? undefined : cross.point.v - cross.bar.o
+    const parts = [cross.point.t, `${formatValue(cross.point.v, { decimals })}${unit ?? ''}`]
+    if (change !== undefined) parts.push(`${change >= 0 ? '+' : ''}${formatValue(change, { decimals })}`)
+    return parts.join('  ')
+  }
+
+  /**
+   * The statistics strip.
+   *
+   * @param {{ stats: object, unit: string, decimals?: number }} props - props.
+   * @returns {any} element.
+   */
+  function StatsStrip({ stats, unit, decimals = 2 }) {
+    if (stats === undefined || stats === null) return h('div', { className: 'smd-note' }, copy.empty)
+    const entries = [
+      [copy.statsMean, formatValue(stats.mean, { decimals })],
+      [copy.statsMin, formatValue(stats.min, { decimals })],
+      [copy.statsMax, formatValue(stats.max, { decimals })],
+      [copy.statsStdDev, formatValue(stats.stdDev, { decimals })],
+      [copy.statsYoy, stats.yoy === undefined ? '—' : `${formatValue(stats.yoy, { decimals: 1 })}%`],
+      [copy.statsMom, stats.mom === undefined ? '—' : `${formatValue(stats.mom, { decimals: 1 })}%`],
+      [copy.statsPercentile, stats.percentile === undefined ? '—' : `${formatValue(stats.percentile * 100, { decimals: 0 })}%`],
+      [copy.statsMissing, formatValue(stats.missingCount, { decimals: 0 })],
+    ]
+    return h(
+      'div',
+      { className: 'smd-stats' },
+      entries.map(([key, value]) =>
+        h('div', { key, className: 'smd-stat' }, h('div', { className: 'smd-statKey' }, key), h('div', null, `${value}${unit === '' ? '' : ''}`)),
+      ),
+    )
+  }
+
+  /**
+   * The AI block: streamed text, citations and the mode chip.
+   *
+   * @param {{ ai: object, onAsk: Function, onSubmitQuestion: Function, question: string, onQuestionChange: Function }} props - props.
+   * @returns {any} element.
+   */
+  function AiPanel({ ai, onAsk, question, onQuestionChange, onSubmitQuestion, onDiscuss, discussing, discussAnswer, discussPending, discussError, discussSession, onOpenSession }) {
+    return h(
+      'div',
+      { className: 'smd-ai' },
+      h(
+        'div',
+        { className: 'smd-row' },
+        h('span', { className: 'smd-chips' }, h('span', { className: 'smd-chip' }, ai.mode === 'llm' ? copy.aiModeLlm : copy.aiModeDeterministic)),
+        ai.result?.cached === true ? h('span', { className: 'smd-chip' }, copy.aiCached) : null,
+        h('span', { className: 'smd-spacer' }),
+        h('button', { type: 'button', className: 'smd-btn', onClick: () => onAsk?.() }, copy.ai),
+        onDiscuss === undefined
+          ? null
+          : h(
+              'button',
+              {
+                type: 'button',
+                className: 'smd-btn',
+                title: copy.discussHint,
+                disabled: discussing === true,
+                onClick: () => onDiscuss?.(),
+              },
+              discussing === true ? copy.discussing : copy.discuss,
+            ),
+      ),
+      ai.error === undefined ? null : h('div', { className: 'smd-banner smd-bannerError' }, ai.error.detail ?? String(ai.error)),
+      discussError === undefined
+        ? null
+        : h(
+            'div',
+            { className: 'smd-banner smd-bannerError smd-row' },
+            h(
+              'span',
+              null,
+              // A session that exists but whose first turn failed is not "the
+              // session is unavailable": the reader can still open it and read the
+              // model's own error there.
+              typeof discussSession === 'string' && discussSession !== ''
+                ? `${copy.discussTurnFailed}：${discussError}`
+                : `${copy.discussFailed}：${discussError}`,
+            ),
+            typeof discussSession === 'string' && discussSession !== ''
+              ? h('button', { type: 'button', className: 'smd-btn', onClick: () => onOpenSession?.(discussSession) }, copy.discussOpenSession)
+              : null,
+          ),
+      discussPending === true ? h('div', { className: 'smd-note' }, copy.discussOpened) : null,
+      typeof discussAnswer === 'string' && discussAnswer !== ''
+        ? h(
+            'div',
+            { className: 'smd-discussAnswer' },
+            h('div', { className: 'smd-note' }, copy.discussAnswer),
+            h('div', { className: 'smd-aiBody' }, discussAnswer),
+          )
+        : null,
+      ai.result?.violations !== undefined && ai.result.violations.length > 0
+        ? h(
+            'div',
+            { className: 'smd-banner' },
+            `${copy.aiDegraded}${ai.result.degradedReason === undefined ? `（${ai.result.violations.length} 项）` : `：${ai.result.degradedReason}`}`,
+          )
+        : null,
+      h(
+        'div',
+        { className: 'smd-aiText' },
+        ai.text === ''
+          ? h(
+              'span',
+              { className: 'smd-note' },
+              // Only claim "no model configured" when that is actually the case:
+              // an empty answer from a configured model is a different problem.
+              ai.streaming ? copy.loading : ai.result?.degradedFrom === undefined ? copy.aiOffline : `${copy.aiEmptyAnswer}（${ai.result?.degradedReason ?? '模型未返回文本'}）`,
+            )
+          : ai.text,
+      ),
+      ai.result?.insufficient === undefined
+        ? null
+        : h('div', { className: 'smd-note' }, `${copy.aiInsufficient}：${ai.result.insufficient}`),
+      (ai.result?.usedPoints ?? []).length === 0
+        ? null
+        : h(
+            'div',
+            { className: 'smd-note' },
+            `${copy.aiCitations}（${ai.result.usedPoints.length}）：`,
+            ai.result.usedPoints
+              .slice(0, 8)
+              .map((point) => `${point.indicatorId}@${point.t}=${point.value ?? point.v}`)
+              .join('；'),
+          ),
+      h(
+        'div',
+        { className: 'smd-row' },
+        h('input', {
+          className: 'smd-input',
+          value: question,
+          placeholder: copy.aiAskPlaceholder,
+          onChange: (event) => onQuestionChange?.(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === 'Enter') onSubmitQuestion?.()
+          },
+        }),
+        h('button', { type: 'button', className: 'smd-btn', onClick: () => onSubmitQuestion?.() }, copy.aiAskSubmit),
+      ),
+    )
+  }
+
+  /**
+   * The detail drawer.
+   *
+   * @param {{ detail: object, loading: boolean, onClose: Function, ai: object, onAsk: Function }} props - props.
+   * @returns {any} element.
+   */
+  function DetailDrawer({ detail, loading, onClose, ai, onAsk, question, onQuestionChange, onSubmitQuestion, onDiscuss, discussing, discussError, discussAnswer, discussPending, discussSession, onOpenSession, barSize, onBarSize }) {
+    if (loading) return h('div', { className: 'smd-note' }, copy.loading)
+    if (detail === undefined) return null
+    if (detail.error !== undefined) {
+      return h('div', { className: 'smd-banner smd-bannerError' }, `${copy.errorHint}（${detail.error.code ?? detail.error.kind}）`)
+    }
+    const decimals = detail.display?.decimals ?? 2
+    return h(
+      'div',
+      { className: 'smd-detail' },
+      h(
+        'div',
+        { className: 'smd-row' },
+        h('span', { className: 'smd-title' }, `${detail.label?.zh ?? detail.indicatorId}（${detail.indicatorId}）`),
+        h('span', { className: 'smd-spacer' }),
+        h('span', { className: 'smd-chip' }, detail.unitLabel ?? detail.unit),
+        h('button', { type: 'button', className: 'smd-btn', onClick: () => onClose?.() }, copy.close),
+      ),
+      // Bar size only matters for sources that publish OHLC; a macro series has
+      // nothing to re-sample, so the control is hidden rather than inert.
+      detail.barSizes === true
+        ? h(
+            'div',
+            { className: 'smd-row' },
+            h('span', { className: 'smd-note' }, copy.barSize),
+            h(
+              'span',
+              { className: 'smd-chips' },
+              [['day', copy.barDay], ['week', copy.barWeek], ['month', copy.barMonth]].map(([id, label]) =>
+                h(
+                  'button',
+                  {
+                    key: id,
+                    type: 'button',
+                    className: `smd-chipBtn${(barSize ?? 'day') === id ? ' smd-chipBtnOn' : ''}`,
+                    'aria-pressed': (barSize ?? 'day') === id,
+                    onClick: () => onBarSize?.(id),
+                  },
+                  label,
+                ),
+              ),
+            ),
+          )
+        : null,
+      h(Chart, {
+        points: detail.points ?? [],
+        unit: detail.unit,
+        decimals,
+        stats: detail.stats,
+        polarity: detail.display?.polarity,
+        kind: detail.display?.transform === 'diff' ? 'bar' : 'line',
+      }),
+      h(StatsStrip, { stats: detail.stats, unit: detail.unit, decimals }),
+      discussing === true ? h('div', { className: 'smd-note' }, copy.discussing) : null,
+      // Every prop AiPanel reads must be forwarded: a missing callback makes the
+      // input throw on its first keystroke and React aborts the render.
+      h(AiPanel, { ai, onAsk, question, onQuestionChange, onSubmitQuestion, onDiscuss, discussing, discussAnswer, discussPending, discussError, discussSession, onOpenSession }),
+      detail.sourceRef?.url === undefined
+        ? null
+        : h(
+            'a',
+            { className: 'smd-src', href: detail.sourceRef.url, target: '_blank', rel: 'noreferrer noopener' },
+            `${copy.viewSource}：${detail.sourceRef.label ?? detail.sourceRef.adapterId ?? ''} ${detail.sourceRef.url}`,
+          ),
+    )
+  }
+
+  /**
+   * Settings tab: mount checklist, AI mode, source switches.
+   *
+   * @param {{ settings: object, health: object }} props - props.
+   * @returns {any} element.
+   */
+  /**
+   * The selection toolbar: how many indicators are picked and what to do with them.
+   *
+   * Only rendered when something is selected, so the panel stays quiet until the
+   * reader actually opts in.
+   *
+   * @param {{ ids: string[], onClear: Function, onAnalyze: Function, busy: boolean }} props - props.
+   * @returns {any} element.
+   */
+  function SelectionBar({ ids, onClear, onAnalyze, busy }) {
+    if ((ids ?? []).length === 0) return null
+    return h(
+      'div',
+      { className: 'smd-selectBar' },
+      h('span', { className: 'smd-chip' }, `${copy.selectedCount} ${ids.length}`),
+      h('span', { className: 'smd-note' }, ids.map((id) => id).join('、')),
+      h('span', { className: 'smd-spacer' }),
+      h('button', { type: 'button', className: 'smd-btn', disabled: busy === true, onClick: () => onAnalyze?.() }, busy === true ? copy.loading : copy.analyzeSelected),
+      h('button', { type: 'button', className: 'smd-btn', onClick: () => onClear?.() }, copy.clearSelection),
+    )
+  }
+
+  /**
+   * Split metrics into labelled sections, keeping the catalog's group order.
+   *
+   * A flat wall of 60 cards is the panel's main legibility problem; grouping by
+   * the same taxonomy the catalog already uses (US / CN / global / custom) costs
+   * nothing and makes the panel scannable.
+   *
+   * @param {object[]} metrics - cards.
+   * @param {string[]} [order] - group ids in display order.
+   * @returns {Array<{ id: string, title: string, metrics: object[] }>} sections.
+   */
+  function groupBySection(metrics, order) {
+    const ids = [...new Set([...(Array.isArray(order) && order.length > 0 ? order : ['US', 'CN', 'GLOBAL', 'CUSTOM']), 'CUSTOM'])]
+    const titles = { US: copy.groupUS, CN: copy.groupCN, GLOBAL: copy.groupGlobal, CUSTOM: copy.groupCustom }
+    const buckets = new Map(ids.map((id) => [id, []]))
+    for (const metric of metrics) {
+      // An unknown group has to land somewhere rather than vanish from the panel.
+      const key = buckets.has(metric.group) ? metric.group : 'CUSTOM'
+      buckets.get(key).push(metric)
+    }
+    return ids
+      .map((id) => ({ id, title: titles[id] ?? id, metrics: buckets.get(id) ?? [] }))
+      .filter((section) => section.metrics.length > 0)
+  }
+
+  /**
+   * What the last discussion is doing, shown wherever one can be started.
+   *
+   * A discussion is opened asynchronously and its answer lands in a new session,
+   * so without this the button's only effect was a session appearing somewhere
+   * else — which reads as "the button does nothing". This states the phase, the
+   * answer once it exists, and the cause when it fails.
+   *
+   * @param {{ state: object, onOpenSession: Function, onDismiss: Function }} props - props.
+   * @returns {any} element.
+   */
+  /**
+   * One phrase for what the last discussion is doing.
+   *
+   * A failure after the session was created is not "会话已就绪": the reader has to
+   * be able to tell "the session is there and this turn failed" from "nothing has
+   * happened yet", because only the first one is worth opening.
+   *
+   * @param {object} state - panel state.
+   * @param {boolean} running - whether a turn is in flight.
+   * @returns {string} phrase.
+   */
+  function discussPhase(state, running) {
+    if (state.discussing === true) return copy.discussOpening
+    if (running) return copy.discussRunning
+    if (state.discussError !== undefined && typeof state.discussSession === 'string' && state.discussSession !== '') return copy.discussTurnFailed
+    return copy.discussReady
+  }
+
+  function DiscussionStatus({ state, onOpenSession, onDismiss }) {
+    if (state.discussing !== true && state.discussPending !== true && state.discussError === undefined && typeof state.discussAnswer !== 'string') {
+      return null
+    }
+    const running = state.discussing === true || state.discussPending === true
+    return h(
+      'div',
+      { className: 'smd-discuss' },
+      h(
+        'div',
+        { className: 'smd-row' },
+        h('span', { className: 'smd-chip' }, discussPhase(state, running)),
+        typeof state.discussAnswer === 'string' && state.discussAnswer !== '' ? h('span', { className: 'smd-chip' }, copy.discussAnswer) : null,
+        h('span', { className: 'smd-spacer' }),
+        state.discussSession === undefined
+          ? null
+          : h('button', { type: 'button', className: 'smd-btn', onClick: () => onOpenSession?.(state.discussSession) }, copy.discussOpenSession),
+        onDismiss === undefined
+          ? null
+          : h('button', { type: 'button', className: 'smd-btn', onClick: () => onDismiss() }, copy.dismiss),
+      ),
+      state.discussError === undefined ? null : h('div', { className: 'smd-banner smd-bannerError' }, state.discussError),
+      typeof state.discussQuestion === 'string' && state.discussQuestion !== ''
+        ? h(
+            'div',
+            { className: 'smd-note' },
+            `${state.discussAutoQuestion === true ? copy.discussAutoAsked : copy.discussQuestion}${state.discussQuestion}`,
+          )
+        : null,
+      state.discussSession === undefined
+        ? null
+        : h('div', { className: 'smd-note' }, `${copy.discussSessionStarted} ${state.discussSession}`),
+      typeof state.discussAnswer === 'string' && state.discussAnswer !== ''
+        ? h('div', { className: 'smd-aiText' }, state.discussAnswer)
+        : running
+          ? h('div', { className: 'smd-note' }, copy.discussRunningHint)
+          : null,
+    )
+  }
+
+  /**
+   * Whole-panel analysis: one digest over a scope, plus a session to continue in.
+   *
+   * The scope chips mirror the panel's own grouping, so "美国" here means exactly
+   * the cards the US filter shows. Its result is deliberately kept out of the
+   * per-indicator AI state: it is about the panel, not about whatever card the
+   * reader opened last.
+   *
+   * @param {{ range: string, onDiscuss: Function, discussing: boolean }} props - props.
+   * @returns {any} element.
+   */
+  function AnalysisTab({ range, onDiscuss, discussing, discussion, onOpenSession, onDismiss }) {
+    const [scope, setScope] = useState('ALL')
+    const [state, setState] = useState({ loading: false, result: undefined, error: undefined })
+    const scopes = [
+      ['ALL', copy.analyzeAll],
+      ['US', copy.groupUs],
+      ['CN', copy.groupCn],
+      ['GLOBAL', copy.groupGlobal],
+      ['CUSTOM', copy.tabMine],
+    ]
+    const run = () => {
+      setState({ loading: true, result: undefined, error: undefined })
+      api.aiOverview({ range, ...(scope === 'ALL' ? {} : { groups: [scope] }) }).then((response) => {
+        if (!response.ok) {
+          setState({ loading: false, result: undefined, error: response.error?.detail ?? `请求失败（HTTP ${response.status}）` })
+          return
+        }
+        setState({ loading: false, result: response.data, error: undefined })
+      })
+    }
+    const result = state.result
+    return h(
+      'div',
+      { className: 'smd-detail' },
+      h(
+        'div',
+        { className: 'smd-row' },
+        h('span', { className: 'smd-sectionTitle' }, copy.analyzeScope),
+        h(
+          'span',
+          { className: 'smd-chips' },
+          scopes.map(([id, label]) =>
+            h(
+              'button',
+              {
+                key: id,
+                type: 'button',
+                className: `smd-chipBtn${scope === id ? ' smd-chipBtnOn' : ''}`,
+                'aria-pressed': scope === id,
+                onClick: () => setScope(id),
+              },
+              label,
+            ),
+          ),
+        ),
+        h('span', { className: 'smd-spacer' }),
+        h('button', { type: 'button', className: 'smd-btn', disabled: state.loading, onClick: run }, state.loading ? copy.loading : copy.analyzeRun),
+      ),
+      state.error === undefined ? null : h('div', { className: 'smd-banner smd-bannerError' }, state.error),
+      state.loading ? h('div', { className: 'smd-note' }, copy.loading) : null,
+      h(DiscussionStatus, { state, onOpenSession, onDismiss }),
+      result === undefined
+        ? h('div', { className: 'smd-note' }, copy.analyzeIdle)
+        : h(
+            'div',
+            { className: 'smd-detail' },
+            h(
+              'div',
+              { className: 'smd-row' },
+              h('span', { className: 'smd-chip' }, result.mode === 'llm' ? copy.aiModeLlm : copy.aiModeDeterministic),
+              h('span', { className: 'smd-chip' }, `${copy.analyzeCount} ${(result.indicators ?? []).length}`),
+              (result.noteworthy ?? []).length === 0 ? null : h('span', { className: 'smd-chip' }, `${copy.noteworthy} ${result.noteworthy.length}`),
+              h('span', { className: 'smd-spacer' }),
+              onDiscuss === undefined
+                ? null
+                : h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'smd-btn',
+                      title: copy.analyzeDiscussHint,
+                      disabled: discussing === true,
+                      onClick: () => onDiscuss(result.scope),
+                    },
+                    discussing === true ? copy.discussing : copy.analyzeDiscuss,
+                  ),
+            ),
+            (result.violations ?? []).length > 0
+              ? h('div', { className: 'smd-banner' }, `${copy.aiDegraded}${result.degradedReason === undefined ? `（${result.violations.length} 项）` : `：${result.degradedReason}`}`)
+              : null,
+            h('div', { className: 'smd-aiText' }, result.markdown ?? ''),
+          ),
+    )
+  }
+
+  /**
+   * Settings: what this mount is doing right now, and where each value comes from.
+   *
+   * The screen used to print four labels with no values, so "what can I set here"
+   * had no answer. Every row now states its effective value, the config path that
+   * produced it, and whether it can be changed from the browser at all — most
+   * cannot, because they are row config read once at profile boot.
+   *
+   * @param {{ settings: object, health: object, onReload: Function }} props - props.
+   * @returns {any} element.
+   */
+  function SettingsTab({ settings, health, onReload, onTest, testing, testingId, testResult }) {
+    const row = (label, value, hint, key) =>
+      h(
+        'div',
+        { className: 'smd-setRow', key: key ?? label },
+        h('span', { className: 'smd-setLabel' }, label),
+        h('span', { className: 'smd-setValue' }, value === undefined || value === '' ? '—' : String(value)),
+        hint === undefined ? null : h('span', { className: 'smd-setHint' }, hint),
+      )
+    const sources = settings?.sources ?? []
+    const offline = (settings?.sourcesOff ?? [])
+    return h(
+      'div',
+      { className: 'smd-detail' },
+      h(
+        'div',
+        { className: 'smd-row' },
+        h('span', { className: 'smd-sectionTitle' }, copy.settingsWhatIsThis),
+        h('span', { className: 'smd-spacer' }),
+        h('button', { type: 'button', className: 'smd-btn', onClick: () => onReload?.() }, copy.reload),
+      ),
+      h('div', { className: 'smd-note' }, copy.settingsIntro),
+      row(copy.settingsPrefix, settings?.runtime?.prefix, copy.settingsPrefixHint),
+      row(copy.settingsRoutes, settings?.runtime?.routes, copy.settingsReadOnly),
+      row(copy.settingsTools, settings?.runtime?.tools, copy.settingsReadOnly),
+      row(copy.settingsIndicators, settings?.runtime?.indicators, `${copy.settingsUnsupported} ${settings?.runtime?.unsupported ?? 0}`),
+      row(copy.settingsStorage, settings?.storageDir, copy.settingsStorageHint),
+
+      h('div', { className: 'smd-sectionTitle' }, copy.settingsAi),
+      row(copy.settingsAiMode, settings?.ai?.mode, `${copy.settingsCurrentModel}: ${settings?.ai?.provider ?? '—'} / ${settings?.ai?.model ?? '—'}`),
+      row(copy.settingsAiEnabled, settings?.ai?.enabled === true ? copy.yes : copy.no, copy.settingsAiEnabledHint),
+      row(copy.settingsAiChars, settings?.ai?.maxChars, copy.settingsAiCharsHint),
+      row(copy.settingsAiCache, `${settings?.ai?.cacheMinutes ?? '—'} ${copy.minutes}`, copy.settingsAiCacheHint),
+
+      h('div', { className: 'smd-sectionTitle' }, copy.settingsData),
+      row(copy.settingsRefresh, `${settings?.refreshMinutes ?? '—'} ${copy.minutes}`, copy.settingsRefreshHint),
+      row(copy.settingsGroups, (settings?.groups ?? []).join(' / '), copy.settingsGroupsHint),
+      row(copy.settingsNoteworthy, settings?.noteworthyLimit, copy.settingsNoteworthyHint),
+      row(copy.settingsDebug, settings?.debug === true ? copy.yes : copy.no, copy.settingsDebugHint),
+
+      h(
+        'div',
+        { className: 'smd-row' },
+        h('span', { className: 'smd-sectionTitle' }, copy.settingsSources),
+        h('span', { className: 'smd-spacer' }),
+        h(
+          'button',
+          { type: 'button', className: 'smd-btn', disabled: testing === true, onClick: () => onTest?.(undefined) },
+          testing === true ? copy.testing : copy.testAll,
+        ),
+      ),
+      h('div', { className: 'smd-note' }, copy.settingsSourcesHint),
+      testResult === undefined ? null : h('div', { className: 'smd-banner' }, testResult),
+      h(
+        'ul',
+        { className: 'smd-list' },
+        sources.length === 0
+          ? h('li', { className: 'smd-note' }, copy.loading)
+          : sources.map((source) =>
+              h(
+                'li',
+                { key: source.adapterId, className: 'smd-setRow' },
+                h('span', { className: 'smd-setLabel' }, source.label ?? source.adapterId),
+                h('span', { className: 'smd-setValue' }, source.available === null || source.available === undefined ? copy.notChecked : source.available ? copy.available : copy.unavailable),
+                h(
+                  'span',
+                  { className: 'smd-setHint' },
+                  `${source.adapterId}${offline.includes(source.adapterId) ? ` · ${copy.settingsSourceOff}` : ''}${source.failed > 0 ? ` · ${copy.failedCount} ${source.failed}` : ''}${source.lastSuccessAt === undefined ? '' : ` · ${copy.settingsLast} ${formatAge(ageMinutes(source.lastSuccessAt))}`}`,
+                ),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'smd-btn smd-btnInline',
+                    disabled: testing === true,
+                    title: copy.testSourceHint,
+                    onClick: () => onTest?.(source.adapterId),
+                  },
+                  testingId === source.adapterId ? copy.testing : copy.testSource,
+                ),
+              ),
+            ),
+      ),
+      settings?.configPath === undefined
+        ? null
+        : h('div', { className: 'smd-note' }, `${copy.settingsHowToChange} ${settings.configPath}`),
+    )
+  }
+
+  /**
+   * Add-indicator tab: catalog search plus natural-language propose.
+   *
+   * @param {{ onAdd: Function, onPropose: Function, results: object[], proposal: object }} props - props.
+   * @returns {any} element.
+   */
+  function AddIndicatorTab({ onAdd, onPropose, results, proposal, query, onQueryChange, onIterate, iterating }) {
+    const unsupported = proposal?.unsupported ?? []
+    const candidates = proposal?.candidates ?? []
+    return h(
+      'div',
+      { className: 'smd-detail' },
+      h('div', { className: 'smd-sectionTitle' }, copy.addIndicator),
+      h('input', {
+        className: 'smd-input',
+        value: query,
+        placeholder: copy.addSearchPlaceholder,
+        onChange: (event) => onQueryChange?.(event.target.value),
+      }),
+      h(
+        'ul',
+        { className: 'smd-list' },
+        (results ?? []).slice(0, 8).map((entry) =>
+          h(
+            'li',
+            { key: entry.id, className: 'smd-row' },
+            h('span', null, `${entry.label?.zh ?? entry.id}`),
+            h('span', { className: 'smd-note' }, entry.id),
+            h('span', { className: 'smd-spacer' }),
+            h('button', { type: 'button', className: 'smd-btn', onClick: () => onAdd?.(entry.id) }, copy.addConfirm),
+          ),
+        ),
+      ),
+      h('div', { className: 'smd-sectionTitle' }, copy.addByText),
+      h('input', {
+        className: 'smd-input',
+        placeholder: copy.addByTextPlaceholder,
+        onKeyDown: (event) => {
+          if (event.key === 'Enter') onPropose?.(event.target.value)
+        },
+      }),
+      proposal === undefined
+        ? null
+        : h(
+            'div',
+            { className: 'smd-detail' },
+            candidates.length > 0
+              ? h('div', { className: 'smd-note' }, `候选：${candidates.map((entry) => `${entry.label?.zh ?? entry.id}${entry.conflict ? `（${copy.addExists}）` : ''}`).join('、')}`)
+              : h('div', { className: 'smd-note' }, `${copy.addUnsupported}：${unsupported.map((entry) => entry.reason).join('；')}`),
+            // "No data source" is not a dead end: the honest next step is a
+            // session that can actually add the source, and the panel can open it
+            // with the request, the reasons and the plugin's own layout attached.
+            unsupported.length === 0 || onIterate === undefined
+              ? null
+              : h(
+                  'div',
+                  { className: 'smd-iterate' },
+                  h('div', { className: 'smd-note' }, copy.iterateHint),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'smd-btn',
+                      disabled: iterating === true,
+                      onClick: () => onIterate(unsupported, query),
+                    },
+                    iterating === true ? copy.iterateOpening : copy.iterateAction,
+                  ),
+                ),
+          ),
+    )
+  }
+
+  /**
+   * The overlay root: trigger badge plus the panel, self-managing open state.
+   *
+   * @param {object} props - slot props (the overlay passes no panel props).
+   * @returns {any} element.
+   */
+  function DataRadarOverlay() {
+    const [state, setLocal] = useState(store.getState())
+    const [query, setQuery] = useState('')
+    const [searchResults, setSearchResults] = useState([])
+    const [proposal, setProposal] = useState(undefined)
+    const [question, setQuestion] = useState('')
+    const [collapsed, setCollapsed] = useState({})
+    const [selectionResult, setSelectionResult] = useState(undefined)
+    const rootRef = useRef(null)
+    const alive = useRef(true)
+    // One pending poll for a discussion answer, cancelled on unmount.
+    const timer = useRef(undefined)
+
+    useEffect(() => {
+      const unsubscribe = store.subscribe((next) => {
+        if (alive.current) setLocal(next)
+      })
+      return () => {
+        alive.current = false
+        if (timer.current !== undefined) clearTimeout(timer.current)
+        unsubscribe()
+      }
+    }, [])
+
+    useEffect(() => {
+      if (!state.open) return undefined
+      const controller = new AbortController()
+      api.overview({ range: state.range, signal: controller.signal }).then((response) => {
+        if (!alive.current) return
+        if (response.ok) store.setState((current) => ({ ...current, ...applyOverviewShape(response.data) }))
+        else if (response.status === 404) store.setState((current) => ({ ...current, unreachable: true, status: 'unreachable' }))
+        else store.setState((current) => ({ ...current, error: response.error, status: 'error' }))
+      })
+      return () => controller.abort()
+    }, [state.open, state.range])
+
+    useEffect(() => {
+      if (!state.open || state.tab !== 'settings') return undefined
+      loadSettings()
+      return undefined
+    }, [state.open, state.tab])
+
+    /**
+     * Load the mount's effective settings (and source health) for the settings tab.
+     *
+     * @returns {void}
+     */
+    const loadSettings = () => {
+      api.settings().then((response) => {
+        if (!alive.current || !response.ok) return
+        store.setState((current) => ({ ...current, settings: { ...current.settings, ...response.data } }))
+      })
+      api.health().then((response) => {
+        if (!alive.current || !response.ok) return
+        store.setState((current) => ({ ...current, health: response.data, settings: { ...current.settings, sources: response.data.sources ?? current.settings.sources } }))
+      })
+    }
+
+    /**
+     * Add or remove one indicator from the multi-select set.
+     *
+     * @param {string} indicatorId - indicator id.
+     * @returns {void}
+     */
+    const toggleSelection = (indicatorId) => {
+      store.setState((current) => {
+        const selected = current.selected ?? []
+        return {
+          ...current,
+          selected: selected.includes(indicatorId) ? selected.filter((id) => id !== indicatorId) : [...selected, indicatorId],
+        }
+      })
+    }
+
+    /**
+     * Analyse every selected indicator in one digest.
+     *
+     * The selection is a *reader's* question ("how do these relate"), so the
+     * request carries exactly the picked ids and the digest is built from them —
+     * no group inference, no silent extra indicators.
+     *
+     * @returns {void}
+     */
+    const runSelectionAnalysis = () => {
+      const ids = store.getState().selected ?? []
+      if (ids.length === 0) return
+      store.setState((current) => ({ ...current, selectionLoading: true }))
+      setSelectionResult(undefined)
+      api.summary({ range: state.range, indicators: ids }).then((response) => {
+        if (!alive.current) return
+        store.setState((current) => ({ ...current, selectionLoading: false }))
+        if (!response.ok) {
+          setSelectionResult({ markdown: `${copy.discussFailed}：${response.error?.detail ?? response.status}`, mode: 'deterministic', violations: [] })
+          return
+        }
+        setSelectionResult({ ...response.data, indicators: response.data?.indicators ?? ids })
+      })
+    }
+
+    /**
+     * Re-fetch the open indicator's bars at another size (day/week/month).
+     *
+     * @param {'day'|'week'|'month'} size - bar size.
+     * @returns {void}
+     */
+    const setBarSize = (size) => {
+      const indicatorId = store.getState().detail?.indicatorId
+      store.setState((current) => ({ ...current, barSize: size }))
+      if (indicatorId === undefined) return
+      api.series({ indicator: indicatorId, range: state.range, freq: size }).then((response) => {
+        if (alive.current && response.ok) store.setState((current) => ({ ...current, detail: response.data }))
+      })
+    }
+
+    /**
+     * Test one data source (or all of them) by re-fetching, ignoring the cache.
+     *
+     * A cached "ok" says nothing about right now: these upstreams rate-limit and
+     * block, so the only honest test is a fresh request. It is narrowed to the
+     * indicators behind the chosen adapter so one source does not cost a full
+     * panel refresh.
+     *
+     * @param {string|undefined} adapterId - source to test; all sources when omitted.
+     * @returns {void}
+     */
+    const testSources = (adapterId) => {
+      const ids = adapterId === undefined
+        ? undefined
+        : (store.getState().overview?.metrics ?? []).filter((metric) => metric.sourceRef?.adapterId === adapterId).map((metric) => metric.indicatorId)
+      store.setState((current) => ({ ...current, testing: true, testingId: adapterId, testResult: undefined }))
+      api.health({ probe: true, ids, range: adapterId === undefined ? 'MAX' : undefined }).then((response) => {
+        if (!alive.current) return
+        if (!response.ok) {
+          store.setState((current) => ({ ...current, testing: false, testingId: undefined, testResult: `${copy.testFailed}：${response.error?.detail ?? response.status}` }))
+          return
+        }
+        const sources = response.data?.sources ?? []
+        const scoped = adapterId === undefined ? sources : sources.filter((source) => source.adapterId === adapterId)
+        const failed = scoped.filter((source) => source.available === false)
+        const probed = ids === undefined ? copy.allSources : ids.length
+        store.setState((current) => ({
+          ...current,
+          testing: false,
+          testingId: undefined,
+          health: response.data,
+          settings: { ...current.settings, sources },
+          testResult: failed.length === 0
+            ? `${copy.testOk}（${copy.probeIndicators} ${probed}）`
+            : `${copy.testFailed}：${failed.map((source) => `${source.label ?? source.adapterId}（${source.failed}）`).join('、')}`,
+        }))
+      })
+    }
+
+    const openDetail = (indicatorId) => {
+      // Selecting another card starts a new subject: the previous answer, its
+      // question and any discussion belong to the indicator being left behind.
+      store.setState((current) => ({ ...current, ...applyIndicatorChange(current, indicatorId), detailLoading: true, tab: 'detail', detail: undefined }))
+      api.series({ indicator: indicatorId, range: state.range }).then((response) => {
+        if (!alive.current) return
+        if (response.ok) store.setState((current) => ({ ...current, detail: response.data, detailLoading: false }))
+        else store.setState((current) => ({ ...current, detailLoading: false, detail: { error: response.error } }))
+      })
+    }
+
+    const runExplain = () => {
+      const indicatorId = state.detail?.indicatorId
+      if (indicatorId === undefined) return
+      store.setState((current) => ({ ...current, ai: { ...current.ai, text: '', streaming: true, error: undefined } }))
+      api.explain(
+        { indicator: indicatorId, range: state.range },
+        {
+          onText: (chunk) => store.setState((current) => ({ ...current, ai: { ...current.ai, text: `${current.ai.text}${chunk}`, streaming: true } })),
+          onDone: (result) => store.setState((current) => ({ ...current, ai: { ...current.ai, streaming: false, result, text: result?.markdown ?? current.ai.text, mode: result?.mode ?? current.ai.mode } })),
+          onError: (error) => store.setState((current) => ({ ...current, ai: { ...current.ai, streaming: false, error } })),
+        },
+      )
+    }
+
+    const submitQuestion = () => {
+      if (question.trim() === '') return
+      store.setState((current) => ({ ...current, ai: { ...current.ai, text: '', streaming: true, error: undefined } }))
+      api.ask(
+        { question, range: state.range },
+        {
+          onText: (chunk) => store.setState((current) => ({ ...current, ai: { ...current.ai, text: `${current.ai.text}${chunk}`, streaming: true } })),
+          onDone: (result) => store.setState((current) => ({ ...current, ai: { ...current.ai, streaming: false, result, text: result?.markdown ?? current.ai.text, mode: result?.mode ?? current.ai.mode } })),
+          onError: (error) => store.setState((current) => ({ ...current, ai: { ...current.ai, streaming: false, error } })),
+        },
+      )
+    }
+
+    const runSearch = (text) => {
+      setQuery(text)
+      if (text.trim() === '') {
+        setSearchResults([])
+        return
+      }
+      api.search(text).then((response) => {
+        if (alive.current && response.ok) setSearchResults(response.data?.matches ?? [])
+      })
+    }
+
+    const runPropose = (text) => {
+      if (text.trim() === '') return
+      api.propose({ text }).then((response) => {
+        if (alive.current && response.ok) setProposal(response.data)
+      })
+    }
+
+    const addIndicator = (indicatorId) => {
+      api.watchlistAction({ action: 'add', item: { indicatorId }, createdBy: 'user' }).then((response) => {
+        if (alive.current && response.ok) store.setState((current) => ({ ...current, watchlist: response.data.items ?? [] }))
+      })
+    }
+
+    /**
+     * Poll a discussion session until its answer exists, then show it here.
+     *
+     * The panel opens the session without waiting, so this is how the answer also
+     * lands beside the data the question was about. Polling stops on the first
+     * answer or failure, and on unmount, so a closed panel leaves nothing behind.
+     *
+     * @param {string} sessionId - the session to collect from.
+     * @returns {void}
+     */
+    const collectDiscussionAnswer = (sessionId) => {
+      const deadline = Date.now() + (pollTimeoutMs ?? DISCUSSION_POLL_MS)
+      let polls = 0
+      const tick = () => {
+        if (!alive.current) return
+        polls += 1
+        // A session we no longer track (a newer discussion replaced it) must not
+        // keep writing its answer into the panel.
+        if (store.getState().discussSession !== sessionId) return
+        api.discussAnswer(sessionId).then((response) => {
+          if (!alive.current) return
+          const status = response.data?.status
+          if (status === 'idle') {
+            // The session holds context but was never asked anything, so there is
+            // no answer to wait for. Saying "the model failed" here is wrong.
+            store.setState((current) => ({ ...current, discussPending: false, discussAnswer: undefined, discussError: copy.discussIdle }))
+            return
+          }
+          if (status === 'done') {
+            const reply = typeof response.data?.reply === 'string' ? response.data.reply : ''
+            store.setState((current) => ({
+              ...current,
+              discussPending: false,
+              discussAnswer: reply === '' ? undefined : reply,
+              discussError: reply === '' ? copy.discussEmpty : undefined,
+            }))
+            return
+          }
+          if (status === 'failed') {
+            store.setState((current) => ({
+              ...current,
+              discussPending: false,
+              discussError: response.data?.error?.detail ?? copy.discussFailed,
+            }))
+            return
+          }
+          if (Date.now() > deadline) {
+            store.setState((current) => ({ ...current, discussPending: false, discussError: copy.discussTimeout }))
+            return
+          }
+          if (polls === 1) {
+            // First miss: say a turn is running, so the panel is visibly working
+            // rather than inert while the model thinks.
+            store.setState((current) => ({ ...current, discussPending: true }))
+          }
+          timer.current = setTimeout(tick, pollIntervalMs ?? DISCUSSION_POLL_INTERVAL_MS)
+        })
+      }
+      timer.current = setTimeout(tick, pollIntervalMs ?? DISCUSSION_POLL_INTERVAL_MS)
+    }
+
+    /**
+     * Open an independent DSH session about the indicator currently shown.
+     *
+     * The host creates the session and seeds it with the panel digest; we then
+     * ask the GUI to switch to it, so the conversation continues with the full
+     * composer instead of inside the panel.
+     */
+    /**
+     * The session the reader is looking at, when the shell exposes one.
+     *
+     * The host cannot see which session a web request came from, so the panel
+     * names it: a discussion created without it joins no composition and is born
+     * with only this plugin's tools — no filesystem, no shell, no prompt sections.
+     *
+     * @returns {string|undefined} current session id.
+     */
+    const currentSessionId = () => {
+      try {
+        const current = sessions?.list?.getSnapshot?.()?.current
+        return typeof current === 'string' && current !== '' ? current : undefined
+      } catch {
+        return undefined
+      }
+    }
+
+    /**
+     * Open an independent session about one subject.
+     *
+     * Three callers share it: a card's "讨论" button (subject: that indicator), a
+     * noteworthy row (subject: that indicator *and* the rule that fired), and the
+     * analysis tab (subject: the whole panel or one group). The host builds the
+     * context in each case, so the panel never assembles a digest itself.
+     *
+     * @param {{ noteworthy?: string, scope?: string, question?: string }} [options] - which subject.
+     * @returns {void}
+     */
+    const startDiscussion = (options = {}) => {
+      const noteworthy = options.noteworthy
+      const scope = options.scope
+      const indicatorId = noteworthy === undefined && scope === undefined ? state.detail?.indicatorId : undefined
+      if (noteworthy === undefined && scope === undefined && indicatorId === undefined) return
+      const body = noteworthy !== undefined
+        ? { group: 'ALL', noteworthy: [noteworthy], range: state.range }
+        : scope !== undefined
+          ? { group: scope === 'ALL' ? 'ALL' : scope, range: state.range, limit: 8 }
+          : { indicator: indicatorId, range: state.range }
+      // NOT `const question = … question …`: shadowing the state variable makes
+      // the initializer read the binding being declared, so the whole handler
+      // threw `Cannot access 'question' before initialization` on every click and
+      // the reader saw a button that did nothing at all.
+      const asked = options.question ?? (question === '' ? undefined : question.trim())
+      store.setState((current) => ({
+        ...current,
+        discussing: true,
+        discussingId: noteworthy,
+        discussError: undefined,
+        discussAnswer: undefined,
+        discussPending: false,
+        discussQuestion: asked,
+        discussAutoQuestion: asked === undefined,
+      }))
+      api.discuss({ ...body, question: asked, sessionId: currentSessionId() }).then((response) => {
+        if (!alive.current) return
+        if (!response.ok) {
+          const detail = response.error?.detail ?? `请求失败（HTTP ${response.status}）`
+          // A failed first turn still created the session: keep its id so the
+          // reader can open it and see the model's own error, which is the only
+          // place the real cause is written down.
+          const failedSession = response.data?.sessionId
+          store.setState((current) => ({
+            ...current,
+            discussing: false,
+            discussingId: undefined,
+            discussError: detail,
+            discussSession: typeof failedSession === 'string' && failedSession !== '' ? failedSession : current.discussSession,
+            discussQuestion: response.data?.question ?? current.discussQuestion,
+            discussAutoQuestion: response.data?.autoQuestion === true,
+          }))
+          return
+        }
+        const sessionId = response.data?.sessionId
+        store.setState((current) => ({
+          ...current,
+          discussing: false,
+          discussingId: undefined,
+          discussSession: sessionId,
+          discussPending: true,
+          discussQuestion: response.data?.question ?? current.discussQuestion,
+          discussAutoQuestion: response.data?.autoQuestion === true,
+        }))
+        if (typeof sessionId === 'string' && sessionId !== '') collectDiscussionAnswer(sessionId)
+        else store.setState((current) => ({ ...current, discussPending: false }))
+        // Switch the GUI to the new session, so the conversation continues with
+        // the full composer; the panel keeps the answer beside the numbers too.
+        if (sessions !== undefined && typeof sessions.open === 'function') sessions.open(sessionId)
+      })
+    }
+
+    /**
+     * Switch the GUI to a discussion session.
+     *
+     * The client `sessions` service is not present in every shell, so the panel
+     * keeps the id and shows the answer itself rather than depending on this.
+     *
+     * @param {string} sessionId - session to open.
+     * @returns {void}
+     */
+    const openSession = (sessionId) => {
+      if (sessions !== undefined && typeof sessions.open === 'function' && typeof sessionId === 'string') sessions.open(sessionId)
+    }
+
+    /** Clear the discussion card without touching the session itself. */
+    const dismissDiscussion = () => {
+      if (timer.current !== undefined) clearTimeout(timer.current)
+      store.setState((current) => ({
+        ...current,
+        discussing: false,
+        discussingId: undefined,
+        discussPending: false,
+        discussError: undefined,
+        discussAnswer: undefined,
+        discussSession: undefined,
+      }))
+    }
+
+    /**
+     * Open a session that can actually add the missing data source.
+     *
+     * The panel is read-only by design: it cannot register a source at runtime,
+     * so "cannot add" is the correct answer — and an iteration session in the
+     * plugin workspace is the honest next step, carrying the request and the
+     * per-indicator reasons with it.
+     *
+     * @param {object[]} unsupported - rejected proposals with reasons.
+     * @param {string} request - what the reader typed.
+     * @returns {void}
+     */
+    const startIteration = (unsupported, request) => {
+      store.setState((current) => ({ ...current, discussing: true, discussError: undefined, discussAnswer: undefined, discussPending: false }))
+      api.iterate({
+        request: typeof request === 'string' ? request : '',
+        reasons: (unsupported ?? []).map((entry) => `${entry.label?.zh ?? entry.id ?? ''}：${entry.reason ?? ''}`.trim()),
+        sessionId: currentSessionId(),
+      }).then((response) => {
+        if (!alive.current) return
+        if (!response.ok) {
+          store.setState((current) => ({ ...current, discussing: false, discussError: response.error?.detail ?? `请求失败（HTTP ${response.status}）` }))
+          return
+        }
+        const sessionId = response.data?.sessionId
+        store.setState((current) => ({ ...current, discussing: false, discussSession: sessionId, discussPending: true }))
+        if (typeof sessionId === 'string' && sessionId !== '') collectDiscussionAnswer(sessionId)
+        if (sessions !== undefined && typeof sessions.open === 'function') sessions.open(sessionId)
+      })
+    }
+
+    /** The analysis tab's "deep dive": a session over the whole scope. */
+    const runScopeDiscussion = (scope) => startDiscussion({ scope })
+
+    const toggle = () => store.setState((current) => ({ ...current, open: !current.open }))
+    const overview = state.overview
+    const metrics = overview?.metrics ?? []
+    const visible = state.tab === 'today'
+      ? metrics.filter((metric) => metric.importance >= 5 || metric.score > 0)
+      : state.tab === 'mine'
+        ? metrics.filter((metric) => metric.group === 'CUSTOM')
+        : metrics
+
+    const trigger = h(
+      'button',
+      {
+        type: 'button',
+        className: 'smd-trigger',
+        onClick: toggle,
+        'aria-expanded': state.open,
+        title: copy.open,
+      },
+      h('span', null, copy.panelTitle),
+      overview !== undefined && (overview.noteworthy ?? []).length > 0
+        ? h('span', { className: 'smd-badge' }, String((overview.noteworthy ?? []).length))
+        : null,
+    )
+
+    if (!state.open) return h('div', { className: 'smd-root', ref: rootRef }, trigger)
+
+    return h(
+      'div',
+      { className: 'smd-root', ref: rootRef },
+      h(
+        'div',
+        { className: 'smd-panel', role: 'dialog', 'aria-label': copy.panelTitle },
+        h(
+          'div',
+          { className: 'smd-header' },
+          h('span', { className: 'smd-title' }, copy.panelTitle),
+          h('span', { className: 'smd-sub' }, copy.panelSubtitle),
+          h('span', { className: 'smd-spacer' }),
+          h(
+            'span',
+            { className: 'smd-tabs' },
+            ['today', 'analysis', 'core', 'mine', 'settings'].map((tab) =>
+              h(
+                'button',
+                {
+                  key: tab,
+                  type: 'button',
+                  className: 'smd-btn',
+                  'aria-pressed': state.tab === tab,
+                  onClick: () => store.setState((current) => ({ ...current, tab })),
+                },
+                { today: copy.tabToday, analysis: copy.analyzeTab, core: copy.tabCore, mine: copy.tabMine, settings: copy.tabSettings }[tab],
+              ),
+            ),
+            ['1M', '3M', '6M', 'YTD', '1Y'].map((range) =>
+              h(
+                'button',
+                {
+                  key: range,
+                  type: 'button',
+                  className: 'smd-btn',
+                  'aria-pressed': state.range === range,
+                  onClick: () => store.setState((current) => ({ ...current, range })),
+                },
+                range,
+              ),
+            ),
+            h('button', { type: 'button', className: 'smd-btn', onClick: () => store.setState((current) => ({ ...current, range: current.range })) }, copy.refresh),
+            h('button', { type: 'button', className: 'smd-btn', onClick: toggle }, copy.close),
+          ),
+        ),
+        h(
+          'div',
+          { className: 'smd-body' },
+          state.unreachable ? h('div', { className: 'smd-banner smd-bannerError' }, copy.unreachable) : null,
+          state.error !== undefined ? h('div', { className: 'smd-banner smd-bannerError' }, state.error.detail ?? String(state.error)) : null,
+          shouldShowDegraded(state) ? h('div', { className: 'smd-banner' }, copy.degradedBanner) : null,
+          state.status === 'idle' || state.status === 'loading'
+            ? h('div', { className: 'smd-note' }, copy.loading)
+            : null,
+          state.tab === 'settings'
+            ? h(SettingsTab, {
+                settings: state.settings,
+                health: state.health,
+                onReload: loadSettings,
+                onTest: testSources,
+                testing: state.testing === true,
+                testingId: state.testingId,
+                testResult: state.testResult,
+              })
+            : state.tab === 'analysis'
+              ? h(AnalysisTab, {
+                  range: state.range,
+                  onDiscuss: runScopeDiscussion,
+                  discussing: state.discussing,
+                  discussion: state,
+                  onOpenSession: openSession,
+                  onDismiss: dismissDiscussion,
+                })
+              : state.tab === 'mine'
+              ? h(AddIndicatorTab, {
+                  onAdd: addIndicator,
+                  onPropose: runPropose,
+                  results: searchResults,
+                  proposal,
+                  query,
+                  onQueryChange: runSearch,
+                  onIterate: startIteration,
+                  iterating: state.discussing === true,
+                })
+              : h(
+                  'div',
+                  { className: 'smd-detail' },
+                  h('div', { className: 'smd-sectionTitle' }, copy.noteworthy),
+                  h(NoteworthyList, {
+                    items: overview?.noteworthy ?? [],
+                    onOpen: openDetail,
+                    onDiscuss: (indicatorId) => startDiscussion({ noteworthy: indicatorId }),
+                    discussingId: state.discussingId,
+                    onOpenSession: openSession,
+                  }),
+                  h(DiscussionStatus, { state, onOpenSession: openSession, onDismiss: dismissDiscussion }),
+                  h(
+                    'div',
+                    { className: 'smd-row' },
+                    h('span', { className: 'smd-sectionTitle' }, copy.tabCore),
+                    h('span', { className: 'smd-spacer' }),
+                    h('span', { className: 'smd-note' }, `${copy.lastUpdated} ${formatAge(ageMinutes(state.lastUpdatedAt))}`),
+                  ),
+                  h(SelectionBar, {
+                    ids: state.selected ?? [],
+                    onClear: () => store.setState((current) => ({ ...current, selected: [] })),
+                    onAnalyze: runSelectionAnalysis,
+                    busy: state.selectionLoading === true,
+                  }),
+                  selectionResult === undefined
+                    ? null
+                    : h(
+                        'div',
+                        { className: 'smd-ai' },
+                        h(
+                          'div',
+                          { className: 'smd-row' },
+                          h('span', { className: 'smd-chip' }, selectionResult.mode === 'llm' ? copy.aiModeLlm : copy.aiModeDeterministic),
+                          h('span', { className: 'smd-chip' }, `${copy.selectedCount} ${(selectionResult.indicators ?? state.selected ?? []).length}`),
+                          h('span', { className: 'smd-spacer' }),
+                          h('button', { type: 'button', className: 'smd-btn', onClick: () => setSelectionResult(undefined) }, copy.dismiss),
+                        ),
+                        (selectionResult.violations ?? []).length > 0
+                          ? h('div', { className: 'smd-banner' }, `${copy.aiDegraded}${selectionResult.degradedReason === undefined ? `（${selectionResult.violations.length} 项）` : `：${selectionResult.degradedReason}`}`)
+                          : null,
+                        h('div', { className: 'smd-aiText' }, selectionResult.markdown ?? ''),
+                      ),
+                  visible.length === 0
+                    ? h('div', { className: 'smd-note' }, copy.empty)
+                    : groupBySection(visible, state.settings?.groups).map((section) =>
+                        h(
+                          'div',
+                          { className: 'smd-section', key: section.id },
+                          h(
+                            'div',
+                            { className: 'smd-row' },
+                            h('span', { className: 'smd-groupTitle' }, section.title),
+                            h('span', { className: 'smd-note' }, `${section.metrics.length}`),
+                            h('span', { className: 'smd-spacer' }),
+                            h(
+                              'button',
+                              {
+                                type: 'button',
+                                className: 'smd-btn smd-btnInline',
+                                onClick: () => setCollapsed((current) => ({ ...current, [section.id]: !current[section.id] })),
+                              },
+                              collapsed[section.id] === true ? copy.expand : copy.collapse,
+                            ),
+                          ),
+                          collapsed[section.id] === true
+                            ? null
+                            : h(
+                                'div',
+                                { className: 'smd-grid' },
+                                section.metrics.map((metric) =>
+                                  h(MetricCard, {
+                                    key: metric.indicatorId,
+                                    metric,
+                                    onOpen: openDetail,
+                                    onToggleSelect: toggleSelection,
+                                    selected: (state.selected ?? []).includes(metric.indicatorId),
+                                  }),
+                                ),
+                              ),
+                        ),
+                      ),
+                ),
+          state.tab === 'detail'
+            ? h(DetailDrawer, {
+                detail: state.detail,
+                barSize: state.barSize,
+                onBarSize: setBarSize,
+                loading: state.detailLoading,
+                onClose: () => store.setState((current) => ({ ...current, tab: 'core' })),
+                ai: state.ai,
+                onAsk: runExplain,
+                question,
+                onQuestionChange: setQuestion,
+                onSubmitQuestion: submitQuestion,
+                onDiscuss: startDiscussion,
+                discussing: state.discussing,
+                discussError: state.discussError,
+                discussAnswer: state.discussAnswer,
+                discussPending: state.discussPending,
+                discussSession: state.discussSession,
+                onOpenSession: openSession,
+                onDiscussNoteworthy: startDiscussion,
+              })
+            : null,
+        ),
+        h('div', { className: 'smd-foot' }, copy.disclaimer),
+      ),
+    )
+  }
+
+  /**
+   * Shape an '/overview' payload into a state patch.
+   *
+   * @param {object} data - payload.
+   * @returns {object} patch.
+   */
+  function applyOverviewShape(data) {
+    return { status: 'ready', overview: data, lastUpdatedAt: data?.generatedAt, error: undefined, unreachable: false }
+  }
+
+  /**
+   * Minutes since an ISO timestamp, for the "updated N minutes ago" label.
+   *
+   * @param {string} iso - timestamp.
+   * @returns {number} minutes.
+   */
+  function ageMinutes(iso) {
+    if (typeof iso !== 'string') return Number.NaN
+    const at = Date.parse(iso)
+    if (!Number.isFinite(at)) return Number.NaN
+    return (Date.now() - at) / 60000
+  }
+
+  /**
+   * @param {object} state - panel state.
+   * @returns {boolean} whether the degraded banner should render.
+   */
+  function shouldShowDegraded(state) {
+    if (state.overview === undefined) return false
+    return state.overview.degraded === true || (state.overview.errors ?? []).length > 0
+  }
+
+  return { DataRadarOverlay, MetricCard, NoteworthyList, Chart, StatsStrip, AiPanel, DetailDrawer, AnalysisTab, SettingsTab, AddIndicatorTab, SelectionBar, DiscussionStatus, Sparkline, applyOverviewShape, groupBySection, ageMinutes, shouldShowDegraded, truncate }
+}