dsh-plugin-show-me-data 0.1.0

package/lib/client.js

@@ -0,0 +1,4322 @@
+// GENERATED FILE — do not edit. Source: src/client/** + shared core modules.
+// Rebuild with: node scripts/build-client.mjs
+window.__ModuleLoader__.load({
+  id: "dsh-plugin-show-me-data",
+  factory: (require) => {
+    const module = { exports: {} }
+    const exports = module.exports
+    const React = require('react')
+    // ── src/core/stats/series.js ─────────────────────────────────────────
+    /**
+     * Series statistics — pure functions over '{ t, v }[]' (docs/03 §2).
+     *
+     * Discipline (docs/07 M1): missing values are skipped, never interpolated and
+     * never treated as zero; small samples return 'undefined' rather than a
+     * fabricated σ or percentile; every returned number is finite or absent.
+     *
+     * @module core/stats/series
+     */
+
+    /** Markers every upstream uses for "no observation". */
+    const MISSING_MARKERS = new Set(['.', '', '-', 'null', 'none', 'n/a', 'na', 'nan', 'undefined'])
+
+    /** Minimum sample size before a sample standard deviation is meaningful. */
+    const MIN_STDDEV_N = 6
+
+    /** Minimum sample size before a percentile is meaningful. */
+    const MIN_PERCENTILE_N = 12
+
+    /**
+     * Parse an upstream scalar into a number, honouring every documented missing
+     * marker (docs/03 §2 rule 2, docs/04 §1).
+     *
+     * @param {unknown} raw - upstream value.
+     * @returns {number|undefined} finite number or 'undefined' when missing.
+     */
+    function parseNumber(raw) {
+      if (typeof raw === 'number') return Number.isFinite(raw) ? raw : undefined
+      if (typeof raw !== 'string') return undefined
+      const trimmed = raw.trim()
+      if (MISSING_MARKERS.has(trimmed.toLowerCase())) return undefined
+      const cleaned = trimmed.replace(/,/g, '')
+      const value = Number(cleaned)
+      return Number.isFinite(value) ? value : undefined
+    }
+
+    /**
+     * Round to a fixed number of decimals, collapsing float noise
+     * ('115.004000000000005' → '115.004').
+     *
+     * @param {number|undefined} value - candidate value.
+     * @param {number} [decimals] - decimal places; omitted means unchanged.
+     * @returns {number|undefined} rounded value or 'undefined'.
+     */
+    function round(value, decimals) {
+      if (typeof value !== 'number' || !Number.isFinite(value)) return undefined
+      if (decimals === undefined || decimals === null) return value
+      const factor = 10 ** decimals
+      const scaled = Math.round((value + Number.EPSILON * Math.sign(value)) * factor) / factor
+      return Object.is(scaled, -0) ? 0 : scaled
+    }
+
+    /**
+     * Sort ascending by date, drop non-finite values, and keep the **last** entry
+     * for a repeated date (upstream revisions win, docs/03 §2 rule 1).
+     *
+     * 'v' is always the series' primary value. A price series may additionally carry
+     * an OHLC bar (`o`/`h`/`l`, with 'v' as the close), which the chart layer draws as
+     * a candle; those extras travel through every transform untouched, so a candle
+     * view never re-fetches or re-derives what the source already returned.
+     *
+     * @param {Array<{ t: string, v: number, o?: number, h?: number, l?: number }>} points - arbitrary points.
+     * @returns {Array<{ t: string, v: number, o?: number, h?: number, l?: number }>} normalized points.
+     */
+    function sortDedupe(points) {
+      const byDate = new Map()
+      for (const point of points) {
+        if (point === null || typeof point !== 'object') continue
+        if (typeof point.t !== 'string' || !Number.isFinite(point.v)) continue
+        const normalized = { t: point.t, v: point.v }
+        const bar = ohlcOf(point)
+        byDate.set(point.t, bar === undefined ? normalized : { ...normalized, ...bar })
+      }
+      return [...byDate.values()].sort((a, b) => (a.t < b.t ? -1 : a.t > b.t ? 1 : 0))
+    }
+
+    /**
+     * The OHLC extras of one point, when the bar is complete and coherent.
+     *
+     * A bar is only worth drawing if open, high and low are all finite and the
+     * high/low really do bound them: anything else would render an impossible
+     * candle, so the extras are dropped and the point stays a plain observation
+     * (the chart draws it as part of the line instead).
+     *
+     * @param {{ v?: number, o?: unknown, h?: unknown, l?: unknown }} [point] - candidate point.
+     * @returns {{ o: number, h: number, l: number }|undefined} the bar, or 'undefined'.
+     */
+    function ohlcOf(point) {
+      const { o, h, l } = point ?? {}
+      if (!Number.isFinite(o) || !Number.isFinite(h) || !Number.isFinite(l)) return undefined
+      const v = point.v
+      if (!Number.isFinite(v)) return undefined
+      if (h < Math.max(o, v) || l > Math.min(o, v)) return undefined
+      return { o, h, l }
+    }
+
+    /**
+     * Whether a series carries enough usable bars for a candlestick view.
+     *
+     * @param {Array<{ o?: number }>} [points] - points.
+     * @param {number} [minimum] - bars required before candles are offered.
+     * @returns {boolean} whether candles can be drawn.
+     */
+    function hasOhlc(points, minimum = 2) {
+      return (points ?? []).filter((point) => ohlcOf(point) !== undefined).length >= minimum
+    }
+
+    /**
+     * Period-over-period change against the previous existing observation
+     * (docs/03 §2 rule 4).
+     *
+     * @param {Array<{ t: string, v: number }>} points - normalized points.
+     * @returns {{ abs: number, pct: number }|undefined} change, or 'undefined' when undefined/zero-based.
+     */
+    function mom(points) {
+      if (points.length < 2) return undefined
+      const latest = points[points.length - 1]
+      const previous = points[points.length - 2]
+      if (previous.v === 0) return undefined
+      return { abs: latest.v - previous.v, pct: ((latest.v - previous.v) / Math.abs(previous.v)) * 100 }
+    }
+
+    /**
+     * Year-over-year change with same-calendar-period alignment (docs/03 §2 rule 3).
+     *
+     * The base is the observation one year (12 months) earlier for monthly and
+     * coarser series, or one quarter earlier for series dated on quarter ends.
+     * A ±1 month drift is tolerated and reported so downstream code can flag an
+     * approximate comparison; anything further is treated as "no base".
+     *
+     * @param {Array<{ t: string, v: number }>} points - normalized points.
+     * @param {{ toleranceMonths?: number }} [options] - alignment tolerance.
+     * @returns {{ value: number, base: number, baseAt: string, drift: number }|undefined} yoy result.
+     */
+    function yoy(points, { toleranceMonths = 1 } = {}) {
+      if (points.length < 2) return undefined
+      const latest = points[points.length - 1]
+      // Quarterly series are dated on quarter ends (03-31, 06-30, 09-30, 12-31).
+      // Their annual base is four quarters back — which is the same month one year
+      // earlier, so the target is a full 12 months for every frequency.
+      const targetMonths = 12
+
+      let best
+      for (const candidate of points) {
+        if (candidate.t >= latest.t) continue
+        const distance = monthsBetween(candidate.t, latest.t)
+        const drift = distance - targetMonths
+        if (Math.abs(drift) > toleranceMonths) continue
+        if (best === undefined || Math.abs(drift) < Math.abs(best.drift)) best = { candidate, drift }
+      }
+      if (best === undefined) return undefined
+      const base = best.candidate.v
+      if (base === 0) return undefined
+      return {
+        value: ((latest.v - base) / Math.abs(base)) * 100,
+        base,
+        baseAt: best.candidate.t,
+        drift: best.drift,
+      }
+    }
+
+    /**
+     * Moving average over 'window' observations. The first 'window - 1' outputs are
+     * 'undefined' — a partial mean would misrepresent the window (docs/07 T1.2).
+     *
+     * @param {Array<{ t: string, v: number }>} points - normalized points.
+     * @param {number} window - window size (>= 1).
+     * @returns {Array<{ t: string, v: number|undefined }>} moving average series.
+     */
+    function movingAverage(points, window) {
+      if (!Number.isInteger(window) || window < 1) {
+        throw new RangeError(`movingAverage: window must be a positive integer (got ${window})`)
+      }
+      return points.map((point, index) => {
+        if (index < window - 1) return { t: point.t, v: undefined }
+        let sum = 0
+        for (let i = index - window + 1; i <= index; i += 1) sum += points[i].v
+        return { t: point.t, v: sum / window }
+      })
+    }
+
+    /**
+     * Difference against the value 'window' observations back: 'v[i] - v[i-window]'.
+     *
+     * @param {Array<{ t: string, v: number }>} points - normalized points.
+     * @param {number} [window] - lookback in observations (default 1).
+     * @returns {Array<{ t: string, v: number|undefined }>} differenced series.
+     */
+    function diff(points, window = 1) {
+      if (!Number.isInteger(window) || window < 1) {
+        throw new RangeError(`diff: window must be a positive integer (got ${window})`)
+      }
+      return points.map((point, index) =>
+        index < window ? { t: point.t, v: undefined } : { t: point.t, v: point.v - points[index - window].v },
+      )
+    }
+
+    /**
+     * Sample standard deviation (n−1). Below {@link MIN_STDDEV_N} observations this
+     * is 'undefined': the panel must not present "2σ" computed from three points.
+     *
+     * @param {number[]} values - observations.
+     * @returns {number|undefined} standard deviation.
+     */
+    function stdDev(values) {
+      if (values.length < MIN_STDDEV_N) return undefined
+      const mean = values.reduce((a, b) => a + b, 0) / values.length
+      const variance = values.reduce((acc, v) => acc + (v - mean) ** 2, 0) / (values.length - 1)
+      return Math.sqrt(variance)
+    }
+
+    /**
+     * Linear-interpolated percentile. Below {@link MIN_PERCENTILE_N} observations
+     * this is 'undefined' (docs/07 T1.2).
+     *
+     * @param {number[]} values - observations.
+     * @param {number} p - quantile in '[0, 1]'.
+     * @returns {number|undefined} percentile value.
+     */
+    function percentile(values, p) {
+      if (values.length < MIN_PERCENTILE_N) return undefined
+      if (!(p >= 0 && p <= 1)) throw new RangeError(`percentile: p must be in [0,1] (got ${p})`)
+      const sorted = [...values].sort((a, b) => a - b)
+      const position = (sorted.length - 1) * p
+      const lower = Math.floor(position)
+      const upper = Math.ceil(position)
+      if (lower === upper) return sorted[lower]
+      return sorted[lower] + (sorted[upper] - sorted[lower]) * (position - lower)
+    }
+
+    /**
+     * Least-squares slope against the observation index, in units per period.
+     *
+     * @param {Array<{ t: string, v: number }>} points - normalized points.
+     * @returns {number|undefined} slope per observation.
+     */
+    function slope(points) {
+      if (points.length < 2) return undefined
+      const n = points.length
+      const meanX = (n - 1) / 2
+      const meanY = points.reduce((acc, p) => acc + p.v, 0) / n
+      let numerator = 0
+      let denominator = 0
+      for (let i = 0; i < n; i += 1) {
+        numerator += (i - meanX) * (points[i].v - meanY)
+        denominator += (i - meanX) ** 2
+      }
+      if (denominator === 0) return undefined
+      return numerator / denominator
+    }
+
+    /**
+     * z-score of the latest change against the history of changes
+     * (docs/03 §2 rule 8). Zero variance yields 'undefined' rather than Infinity.
+     *
+     * @param {Array<{ t: string, v: number }>} points - normalized points.
+     * @returns {number|undefined} z-score.
+     */
+    function zScoreLatestChange(points) {
+      const changes = []
+      for (let i = 1; i < points.length; i += 1) changes.push(points[i].v - points[i - 1].v)
+      if (changes.length < MIN_STDDEV_N - 1) return undefined
+      const latestChange = changes[changes.length - 1]
+      const history = changes.slice(0, -1)
+      const sigma = stdDev(history)
+      if (sigma === undefined || sigma === 0) return undefined
+      const mean = history.reduce((a, b) => a + b, 0) / history.length
+      return (latestChange - mean) / sigma
+    }
+
+    /**
+     * Count observations a fixed-cadence series should have had but does not
+     * (docs/07 T1.2).
+     *
+     * With an explicit 'cadenceDays' (the caller knows the indicator's frequency)
+     * the count is exact. Without one, cadence is inferred as the median gap of the
+     * observed series — which cannot see a series that published every other month
+     * consistently, and never invents a trading calendar (docs/03 §2 rule 12).
+     *
+     * @param {Array<{ t: string, v: number }>} points - normalized points.
+     * @param {{ cadenceDays?: number }} [options] - expected cadence.
+     * @returns {number} number of missing slots.
+     */
+    function missingCount(points, { cadenceDays } = {}) {
+      if (points.length < 2) return 0
+      const gaps = []
+      for (let i = 1; i < points.length; i += 1) gaps.push(daysBetween(points[i - 1].t, points[i].t))
+      const sorted = [...gaps].sort((a, b) => a - b)
+      const inferred = sorted[Math.floor(sorted.length / 2)]
+      const cadence = cadenceDays ?? inferred
+      if (!(cadence > 0)) return 0
+      let missing = 0
+      for (const gap of gaps) missing += Math.max(0, Math.round(gap / cadence) - 1)
+      return missing
+    }
+
+    /** Nominal days between observations, per frequency (documentation-only cadence). */
+    const FREQ_CADENCE_DAYS = {
+      daily: 1,
+      weekly: 7,
+      monthly: 31,
+      quarterly: 92,
+      annual: 366,
+    }
+
+    /**
+     * Assemble the 'SeriesStats' contract (docs/03 §1.4).
+     *
+     * @param {Array<{ t: string, v: number }>} input - points, any order.
+     * @param {{ decimals?: number, freq?: string }} [options] - rounding and frequency (for gap counting).
+     * @returns {object|undefined} stats object, or 'undefined' for an empty series.
+     */
+    function stats(input, { decimals, freq } = {}) {
+      const points = sortDedupe(input)
+      if (points.length === 0) return undefined
+
+      const latest = points[points.length - 1]
+      const prevPoint = points.length > 1 ? points[points.length - 2] : undefined
+      const values = points.map((p) => p.v)
+      const yoyResult = yoy(points)
+      const momResult = mom(points)
+      const sigma = stdDev(values)
+      // Both change fields are derived from the SAME difference and rounded to one
+      // decimal more than the reading itself, so they cannot contradict each other.
+      // Rounding `abs(latest - prev)` at display precision made a 0.05pp move show as
+      // `changeAbs: 0.0` beside `changePct: 1.5`, and an agent reading the panel
+      // reported that contradiction as a panel bug.
+      const changeDecimals = decimals === undefined ? 4 : decimals + 1
+      const change = prevPoint === undefined ? undefined : latest.v - prevPoint.v
+
+      const result = {
+        latest: round(latest.v, decimals),
+        latestAt: latest.t,
+        ...(prevPoint === undefined
+          ? {}
+          : {
+              prev: round(prevPoint.v, decimals),
+              changeAbs: round(change, changeDecimals),
+              ...(prevPoint.v === 0
+                ? {}
+                : { changePct: round((change / Math.abs(prevPoint.v)) * 100, decimals) }),
+            }),
+        ...(yoyResult === undefined ? {} : { yoy: round(yoyResult.value, decimals), yoyAlignedDrift: yoyResult.drift }),
+        ...(momResult === undefined ? {} : { mom: round(momResult.pct, decimals) }),
+        mean: round(values.reduce((a, b) => a + b, 0) / values.length, decimals),
+        min: round(Math.min(...values), decimals),
+        max: round(Math.max(...values), decimals),
+        stdDev: sigma === undefined ? 0 : round(sigma, decimals),
+        count: points.length,
+        missingCount: missingCount(points, { cadenceDays: FREQ_CADENCE_DAYS[freq] }),
+      }
+
+      const z = zScoreLatestChange(points)
+      if (z !== undefined) result.zScoreLatestChange = round(z, decimals)
+      const fitted = slope(points)
+      if (fitted !== undefined) {
+        result.slope = round(fitted, decimals)
+        const mean = values.reduce((a, b) => a + b, 0) / values.length
+        if (mean !== 0) result.slopeRel = round(fitted / mean, decimals)
+      }
+      const latestPercentile = percentileRank(values, latest.v)
+      if (latestPercentile !== undefined) result.percentile = latestPercentile
+
+      return result
+    }
+
+    /**
+     * Fraction of observations at or below 'value', linearly interpolated between
+     * the two bracketing ranks. 'undefined' below the percentile sample floor.
+     *
+     * @param {number[]} values - observations.
+     * @param {number} value - the value to rank.
+     * @returns {number|undefined} percentile in '[0, 1]'.
+     */
+    function percentileRank(values, value) {
+      if (values.length < MIN_PERCENTILE_N) return undefined
+      const sorted = [...values].sort((a, b) => a - b)
+      if (value <= sorted[0]) return 0
+      if (value >= sorted[sorted.length - 1]) return 1
+      let below = 0
+      for (const v of sorted) if (v <= value) below += 1
+      const rank = (below - 1) / (sorted.length - 1)
+      return Math.min(1, Math.max(0, rank))
+    }
+
+    /**
+     * Apply a catalog display transform to a point series (docs/03 §2 rules 5–7).
+     *
+     * Transform chains are expressed as 'display.transform' plus optional
+     * 'display.window'/'display.movingAvg':
+     *
+     * - 'raw' — unchanged;
+     * - 'diff' — 'v[i] - v[i-window]' (levels to changes);
+     * - 'pctChange' / 'mom' — percentage change against the previous observation;
+     * - 'yoy' — same-calendar-period percentage change;
+     * - 'annualize' — monthly × 12, quarterly × 4 (levels only).
+     *
+     * A trailing moving average ('movingAvg') is applied **after** the transform and
+     * drops the first 'window - 1' points, so a 3-month average of monthly changes
+     * never shows a partial window.
+     *
+     * @param {Array<{ t: string, v: number }>} points - normalized points.
+     * @param {object} display - catalog display spec.
+     * @returns {Array<{ t: string, v: number }>} transformed points (may be empty).
+     */
+    function applyTransform(points, display = {}) {
+      const base = sortDedupe(points)
+      const transform = display.transform ?? 'raw'
+      let out
+      switch (transform) {
+        case 'raw':
+          out = base
+          break
+        case 'diff':
+          out = diff(base, display.window ?? 1).filter((p) => p.v !== undefined)
+          break
+        case 'pctChange':
+        case 'mom':
+          out = base
+            .map((point, index) => {
+              if (index === 0) return undefined
+              const previous = base[index - 1]
+              if (previous.v === 0) return undefined
+              return { t: point.t, v: ((point.v - previous.v) / Math.abs(previous.v)) * 100 }
+            })
+            .filter(Boolean)
+          break
+        case 'yoy':
+          out = base
+            .map((point, index) => {
+              // Recompute yoy for every point, not only the last one.
+              const result = yoy(base.slice(0, index + 1))
+              return result === undefined ? undefined : { t: point.t, v: result.value }
+            })
+            .filter(Boolean)
+          break
+        case 'annualize':
+          out = base.map((point) => ({ t: point.t, v: point.v * (display.freq === 'quarterly' ? 4 : 12) }))
+          break
+        case 'ratio':
+          out = base
+          break
+        default:
+          throw new RangeError(`unknown display.transform: ${JSON.stringify(transform)}`)
+      }
+      if (display.movingAvg !== undefined) {
+        out = movingAverage(out, display.movingAvg).filter((p) => p.v !== undefined)
+      }
+      return out
+    }
+
+    /**
+     * Describe a transform's unit suffix, so the UI can label "(年化)" or a 3-month
+     * average without re-deriving it (docs/03 §2 rule 7).
+     *
+     * @param {object} display - catalog display spec.
+     * @returns {string} unit suffix ('' when none).
+     */
+    function transformSuffix(display = {}) {
+      const parts = []
+      if (display.transform === 'annualize') parts.push('年化')
+      if (display.movingAvg !== undefined) parts.push(`${display.movingAvg}期均值`)
+      return parts.length === 0 ? '' : ` (${parts.join('·')})`
+    }
+
+    // ── src/core/chart/scale.js ─────────────────────────────────────────
+    /**
+     * SVG path geometry for the panel's charts (docs/05 §4.1).
+     *
+     * Everything here is a pure function of numbers to strings/arrays, so the charts
+     * are unit-testable without a browser — that is the whole reason the panel draws
+     * its own SVG instead of pulling in a chart library (docs/02 §1.1).
+     *
+     * @module core/chart/scale
+     */
+
+    /**
+     * Clamp a number into a closed range.
+     *
+     * @param {number} value - candidate.
+     * @param {number} min - lower bound.
+     * @param {number} max - upper bound.
+     * @returns {number} clamped value.
+     */
+    function clamp(value, min, max) {
+      return Math.min(Math.max(value, min), max)
+    }
+
+    /**
+     * Build a linear scale from a data domain to a pixel range.
+     *
+     * A degenerate domain ('min === max', or any non-finite bound) maps every value
+     * to the middle of the range instead of dividing by zero — the branch that turns
+     * a flat series into 'NaN' paths (docs/08 §2 defect 5).
+     *
+     * @param {{ domain: [number, number], range: [number, number] }} spec - scale spec.
+     * @returns {(value: number) => number} scale function.
+     */
+    function linearScale({ domain, range }) {
+      const [d0, d1] = domain
+      const [r0, r1] = range
+      if (!Number.isFinite(d0) || !Number.isFinite(d1) || d0 === d1) {
+        const middle = (r0 + r1) / 2
+        return () => middle
+      }
+      const factor = (r1 - r0) / (d1 - d0)
+      return (value) => r0 + (value - d0) * factor
+    }
+
+    /**
+     * Extend a domain to the nearest "nice" bounds and pick evenly spaced ticks
+     * built from 1/2/5 × 10ⁿ steps (docs/05 §4.1).
+     *
+     * @param {number} min - data minimum.
+     * @param {number} max - data maximum.
+     * @param {number} [count] - desired tick count (approximate).
+     * @returns {{ min: number, max: number, ticks: number[] }} nice domain and ticks.
+     */
+    function niceTicks(min, max, count = 5) {
+      if (!Number.isFinite(min) || !Number.isFinite(max)) {
+        return { min: 0, max: 1, ticks: [0, 0.5, 1] }
+      }
+      if (min === max) {
+        const pad = Math.abs(min) > 0 ? Math.abs(min) * 0.1 : 1
+        const lo = min - pad
+        const hi = max + pad
+        return { min: lo, max: hi, ticks: [lo, (lo + hi) / 2, hi] }
+      }
+      const steps = Math.max(1, Math.floor(count))
+      const rawStep = (max - min) / steps
+      const magnitude = 10 ** Math.floor(Math.log10(rawStep))
+      const normalized = rawStep / magnitude
+      const niceStep = (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * magnitude
+      const lo = Math.floor(min / niceStep) * niceStep
+      const hi = Math.ceil(max / niceStep) * niceStep
+      const ticks = []
+      for (let value = lo; value <= hi + niceStep / 2; value += niceStep) {
+        // Round away accumulated float noise (0.30000000000000004 → 0.3).
+        ticks.push(Number(value.toFixed(12)))
+      }
+      return { min: lo, max: hi, ticks }
+    }
+
+    /**
+     * Min/max of a numeric list, ignoring non-finite entries.
+     *
+     * @param {number[]} values - candidate values.
+     * @returns {{ min: number, max: number }|undefined} extent, or 'undefined' when nothing is finite.
+     */
+    function extent(values) {
+      let min = Number.POSITIVE_INFINITY
+      let max = Number.NEGATIVE_INFINITY
+      let seen = false
+      for (const value of values) {
+        if (!Number.isFinite(value)) continue
+        seen = true
+        if (value < min) min = value
+        if (value > max) max = value
+      }
+      return seen ? { min, max } : undefined
+    }
+
+    /**
+     * Reduce a series to at most two points per pixel column, preserving the first
+     * and last points plus each bucket's extremes so the shape is not flattened
+     * (docs/05 §4.1: 10k points must not produce 10k path segments).
+     *
+     * @param {Array<{ t: string, v: number }>} points - ascending points.
+     * @param {number} maxPoints - budget.
+     * @returns {Array<{ t: string, v: number }>} thinned points.
+     */
+    function thin(points, maxPoints) {
+      if (points.length <= maxPoints) return points
+      const finite = points.filter((p) => Number.isFinite(p.v))
+      if (finite.length <= maxPoints) return points
+      const bucketCount = Math.max(1, Math.floor(maxPoints / 2))
+      const bucketSize = finite.length / bucketCount
+      const out = []
+      for (let bucket = 0; bucket < bucketCount; bucket += 1) {
+        const start = Math.floor(bucket * bucketSize)
+        const end = Math.min(finite.length, Math.floor((bucket + 1) * bucketSize))
+        if (end <= start) continue
+        let lowest = finite[start]
+        let highest = finite[start]
+        for (let i = start; i < end; i += 1) {
+          if (finite[i].v < lowest.v) lowest = finite[i]
+          if (finite[i].v > highest.v) highest = finite[i]
+        }
+        const pair = lowest.t <= highest.t ? [lowest, highest] : [highest, lowest]
+        for (const point of pair) {
+          if (out.length === 0 || out[out.length - 1].t !== point.t) out.push(point)
+        }
+      }
+      // Always keep the true endpoints so the line spans the full width.
+      const last = finite[finite.length - 1]
+      if (out.length === 0 || out[out.length - 1].t !== last.t) out.push(last)
+      return out
+    }
+
+    // ── src/core/chart/line.js ─────────────────────────────────────────
+    /**
+     * Line, area and sparkline path builders (docs/05 §4.1).
+     *
+     * @module core/chart/line
+     */
+
+    /**
+     * @typedef {Object} ChartGeometry
+     * @property {number} width - svg width in px.
+     * @property {number} height - svg height in px.
+     * @property {number} [padding] - uniform inset, or use 'paddingX'/'paddingY'.
+     * @property {number} [paddingX] - horizontal inset.
+     * @property {number} [paddingY] - vertical inset.
+     * @property {number} [padLeft] - left inset (wins over 'paddingX').
+     * @property {number} [padRight] - right inset (the value axis lives here).
+     * @property {number} [padTop] - top inset.
+     * @property {number} [padBottom] - bottom inset (the time axis lives here).
+     * @property {number} [innerW] - explicit inner width, for index-based builders.
+     * @property {number} [innerH] - explicit inner height.
+     * @property {number} [padX] - explicit left inset (already resolved).
+     * @property {{ min: number, max: number }} [yDomain] - explicit y domain.
+     * @property {number} [maxPoints] - point budget before thinning.
+     */
+
+    /**
+     * Resolve padding and plotting box from the geometry spec.
+     *
+     * @param {ChartGeometry} geometry - chart geometry.
+     * @returns {{ width: number, height: number, padX: number, padY: number, innerW: number, innerH: number }} box.
+     */
+    function box(geometry) {
+      const { width, height } = geometry
+      if (!(width > 0) || !(height > 0)) {
+        throw new Error(`chart geometry requires positive width/height (got ${width}x${height})`)
+      }
+      // Asymmetric gutters matter: the value axis is read on the right and the time
+      // axis along the bottom, so a uniform inset either clips labels or wastes the
+      // left edge. Explicit 'padX'/'padY'/'innerW'/'innerH' still win, because the
+      // chart component resolves the plot box once and passes it down.
+      const padX = geometry.padX ?? geometry.padLeft ?? geometry.paddingX ?? geometry.padding ?? 0
+      const padY = geometry.padY ?? geometry.padTop ?? geometry.paddingY ?? geometry.padding ?? 0
+      const padRight = geometry.padRight ?? geometry.paddingX ?? geometry.padding ?? padX
+      const padBottom = geometry.padBottom ?? geometry.paddingY ?? geometry.padding ?? padY
+      return {
+        width,
+        height,
+        padX,
+        padY,
+        padRight,
+        padBottom,
+        innerW: geometry.innerW ?? Math.max(1, width - padX - padRight),
+        innerH: geometry.innerH ?? Math.max(1, height - padY - padBottom),
+      }
+    }
+
+    /**
+     * Format a path coordinate: two decimals is sub-pixel on any display and keeps
+     * the generated path strings small.
+     *
+     * @param {number} value - coordinate.
+     * @returns {string} formatted coordinate.
+     */
+    function coord(value) {
+      const rounded = Math.round(value * 100) / 100
+      return String(Object.is(rounded, -0) ? 0 : rounded)
+    }
+
+    /**
+     * Build the list of straight (non-NaN) runs in a point list. A 'NaN' value is a
+     * genuine break — the series is drawn as two sub-paths, never bridged
+     * (docs/05 §4.1).
+     *
+     * @param {Array<{ t: string, v: number }>} points - ascending points.
+     * @returns {Array<Array<{ t: string, v: number }>>} runs.
+     */
+    function runs(points) {
+      const out = []
+      let current = []
+      for (const point of points) {
+        if (Number.isFinite(point?.v)) {
+          current.push(point)
+        } else if (current.length > 0) {
+          out.push(current)
+          current = []
+        }
+      }
+      if (current.length > 0) out.push(current)
+      return out
+    }
+
+    /**
+     * Build an SVG path for a line chart.
+     *
+     * - '[]' → ''''
+     * - one point → ''M x y'' (a move only; no 'L')
+     * - a flat series → a horizontal line at the vertical centre
+     *
+     * @param {Array<{ t: string, v: number }>} points - ascending points.
+     * @param {ChartGeometry} geometry - chart geometry.
+     * @returns {string} SVG path data.
+     */
+    function buildLinePath(points, geometry) {
+      if (!Array.isArray(points) || points.length === 0) return ''
+      const { innerW, innerH, padX, padY } = box(geometry)
+      if (!points.some((p) => Number.isFinite(p?.v))) return ''
+
+      const budget = geometry.maxPoints ?? Number.POSITIVE_INFINITY
+      // The x axis is always proportional to the *declared* index span, so a `NaN`
+      // hole keeps its width instead of compressing the visible series. Thinning
+      // (only for huge series) collapses missing entries, which is acceptable at
+      // that scale.
+      const thinFirst = points.map((p, index) => ({ t: p.t, v: Number.isFinite(p?.v) ? p.v : Number.NaN, i: index }))
+      const drawn = Number.isFinite(budget) && points.length > budget
+        ? thin(thinFirst, budget)
+        : thinFirst
+      const finite = thinFirst.filter((p) => Number.isFinite(p.v))
+      if (finite.length === 0) return ''
+      const xSpan = Math.max(1, points.length - 1)
+      const x = (index) => padX + (index / xSpan) * innerW
+
+      const domain = extent(finite.map((p) => p.v))
+      const yDomain = geometry.yDomain ?? domain
+      const y = linearScale({ domain: [yDomain.min, yDomain.max], range: [padY + innerH, padY] })
+
+      const parts = []
+      for (const run of runs(drawn)) {
+        run.forEach((point, runIndex) => {
+          const command = runIndex === 0 ? 'M' : 'L'
+          parts.push(`${command}${coord(x(point.i))} ${coord(y(point.v))}`)
+        })
+      }
+      return parts.join('')
+    }
+
+    /**
+     * Build a closed area path: the line plus a drop to the baseline.
+     *
+     * @param {Array<{ t: string, v: number }>} points - ascending points.
+     * @param {ChartGeometry} geometry - chart geometry.
+     * @returns {string} SVG path data ('''' when there is nothing to draw).
+     */
+    function buildAreaPath(points, geometry) {
+      const line = buildLinePath(points, geometry)
+      if (line === '') return ''
+      const { innerH, padY } = box(geometry)
+      const baseline = padY + innerH
+      const coordinates = line.match(/[ML]([\d.-]+) ([\d.-]+)/g) ?? []
+      if (coordinates.length === 0) return ''
+      const first = coordinates[0].slice(1).split(' ')[0]
+      const last = coordinates[coordinates.length - 1].slice(1).split(' ')[0]
+      return `${line}L${last} ${coord(baseline)}L${first} ${coord(baseline)}Z`
+    }
+
+    /**
+     * Build a sparkline path (no axes, no grid). A single point yields '''' so the
+     * card can draw a dot instead of a degenerate path — frozen by tests.
+     *
+     * @param {number[]} values - values, oldest first.
+     * @param {{ width: number, height: number, padding?: number }} geometry - sparkline geometry.
+     * @returns {string} SVG path data.
+     */
+    function buildSparkline(values, geometry) {
+      if (!Array.isArray(values) || values.length < 2) return ''
+      const points = values.map((v, i) => ({ t: String(i), v }))
+      return buildLinePath(points, { width: geometry.width, height: geometry.height, padding: geometry.padding ?? 1 })
+    }
+
+    /**
+     * Build the SVG markup for a sparkline, including the end-point dot. Returns
+     * '''' when there is nothing to draw, which the card renders as a placeholder.
+     *
+     * @param {number[]} values - values, oldest first.
+     * @param {{ width: number, height: number, padding?: number, dotRadius?: number }} geometry - sparkline geometry.
+     * @returns {{ path: string, dot: { cx: number, cy: number, r: number }|null }} path and end dot.
+     */
+    function buildSparklineShape(values, geometry) {
+      const path = buildSparkline(values, geometry)
+      if (path === '') return { path: '', dot: null }
+      const matches = [...path.matchAll(/[ML]([\d.-]+) ([\d.-]+)/g)]
+      const last = matches[matches.length - 1]
+      return {
+        path,
+        dot: { cx: Number(last[1]), cy: Number(last[2]), r: geometry.dotRadius ?? 1.5 },
+      }
+    }
+
+    // ── src/core/chart/candle.js ─────────────────────────────────────────
+    /**
+     * Candlestick geometry and hover snapping (docs/05 §4).
+     *
+     * The panel draws its own SVG, so a candle is four numbers turned into two
+     * screen-space primitives: a thin high-low wick and a body spanning open to
+     * close. Everything here is a pure function of points and geometry, which keeps
+     * the interactive chart testable without a browser.
+     *
+     * Colour is deliberately *not* decided here: the caller owns polarity, and the
+     * only rule this layer encodes is the arithmetic — a candle is up when the close
+     * is at or above the open.
+     *
+     * @module core/chart/candle
+     */
+
+
+
+    /** Default share of one x-step a candle body may occupy. */
+    const BODY_RATIO = 0.7
+
+    /**
+     * Widest a candle body may be drawn, in px.
+     *
+     * With few points the step is enormous, and a one-step-wide bar reads as a
+     * block rather than a bar; capping the width keeps three points looking like
+     * three candles.
+     */
+    const MAX_BODY_PX = 16
+
+    /**
+     * The value domain a chart should cover.
+     *
+     * A candlestick view must span the wicks, not only the closes: using the close
+     * extent would clip highs and lows at the top and bottom of the plot.
+     *
+     * @param {Array<{ t: string, v: number, o?: number, h?: number, l?: number }>} points - ascending points.
+     * @param {{ useExtremes?: boolean }} [options] - options.
+     * @returns {{ min: number, max: number }|undefined} domain, or 'undefined' when nothing is finite.
+     */
+    function valueDomain(points, options = {}) {
+      const values = []
+      for (const point of points ?? []) {
+        if (!Number.isFinite(point?.v)) continue
+        const bar = options.useExtremes === true ? ohlcOf(point) : undefined
+        values.push(bar === undefined ? point.v : bar.h, bar === undefined ? point.v : bar.l)
+      }
+      return extent(values)
+    }
+
+    /**
+     * Build candle geometry for a point list.
+     *
+     * Every entry carries the numbers the renderer needs and nothing else: `up` is
+     * the arithmetic fact (close >= open) that the caller maps to a colour, and
+     * `hollow` marks a bar whose body is too short to fill, which is how a flat
+     * session still shows as a visible tick rather than disappearing.
+     *
+     * @param {Array<{ t: string, v: number, o?: number, h?: number, l?: number }>} points - ascending points.
+     * @param {{ width: number, height: number, padding?: number, paddingX?: number, paddingY?: number, yDomain?: { min: number, max: number }, bodyRatio?: number, maxBody?: number, minBody?: number }} geometry - chart geometry.
+     * @returns {Array<{ t: string, x: number, yHigh: number, yLow: number, yOpen: number, yClose: number, bodyTop: number, bodyH: number, up: boolean, hollow: boolean, point: object }>} candles.
+     */
+    function buildCandles(points, geometry) {
+      const list = points ?? []
+      const bars = list.filter((point) => ohlcOf(point) !== undefined)
+      if (bars.length === 0) return []
+      const { innerW, padX, padY, innerH } = box({ ...geometry, height: geometry.height })
+      const domain = geometry.yDomain ?? valueDomain(list, { useExtremes: true })
+      if (domain === undefined) return []
+      const y = linearScale({ domain: [domain.min, domain.max], range: [padY + innerH, padY] })
+      const step = list.length > 1 ? innerW / (list.length - 1) : innerW
+      const bodyW = Math.max(1, Math.min(geometry.maxBody ?? MAX_BODY_PX, step * (geometry.bodyRatio ?? BODY_RATIO)))
+      const minBody = geometry.minBody ?? 1
+      return list.map((point, index) => {
+        const bar = ohlcOf(point)
+        if (bar === undefined) return undefined
+        const x = padX + (list.length > 1 ? (index / (list.length - 1)) * innerW : innerW / 2)
+        const yOpen = y(bar.o)
+        const yClose = y(point.v)
+        const yHigh = y(bar.h)
+        const yLow = y(bar.l)
+        const bodyTop = Math.min(yOpen, yClose)
+        const bodyH = Math.abs(yClose - yOpen)
+        return {
+          t: point.t,
+          x: Number(x.toFixed(2)),
+          bodyW: Number(bodyW.toFixed(2)),
+          yHigh: Number(yHigh.toFixed(2)),
+          yLow: Number(yLow.toFixed(2)),
+          yOpen: Number(yOpen.toFixed(2)),
+          yClose: Number(yClose.toFixed(2)),
+          bodyTop: Number(bodyTop.toFixed(2)),
+          bodyH: Number(Math.max(minBody, bodyH).toFixed(2)),
+          up: point.v >= bar.o,
+          hollow: bodyH < minBody,
+          point,
+        }
+      }).filter(Boolean)
+    }
+
+    /**
+     * Snap a pointer position to the nearest data index.
+     *
+     * Charts are read by pointing at a shape, so the hover target is the nearest
+     * *point*, never the exact pixel: this is what makes a 250-bar chart usable with
+     * a mouse and what a touch device needs to hit anything at all.
+     *
+     * @param {number} pointerX - pointer x in svg coordinates.
+     * @param {number} count - number of points.
+     * @param {{ width: number, padding?: number, paddingX?: number }} geometry - chart geometry.
+     * @returns {number} nearest index, or -1 when there is nothing to snap to.
+     */
+    function nearestIndex(pointerX, count, geometry) {
+      if (!Number.isFinite(pointerX) || !(count > 0)) return -1
+      const { padX, innerW } = box({ ...geometry, height: geometry.height ?? 1 })
+      if (count === 1) return 0
+      const ratio = clamp((pointerX - padX) / innerW, 0, 1)
+      return Math.round(ratio * (count - 1))
+    }
+
+    /**
+     * The x coordinate of one index inside the plotting box.
+     *
+     * @param {number} index - point index.
+     * @param {number} count - number of points.
+     * @param {{ width: number, padding?: number, paddingX?: number }} geometry - chart geometry.
+     * @returns {number} x in svg coordinates.
+     */
+    function indexToX(index, count, geometry) {
+      const { padX, innerW } = box({ ...geometry, height: geometry.height ?? 1 })
+      if (count <= 1) return padX + innerW / 2
+      return Number((padX + (index / (count - 1)) * innerW).toFixed(2))
+    }
+
+    /**
+     * Build the crosshair and its labels for one hovered index.
+     *
+     * @param {object} input - input.
+     * @param {Array<{ t: string, v: number, o?: number, h?: number, l?: number }>} input.points - ascending points.
+     * @param {number} input.index - hovered index.
+     * @param {{ width: number, height: number, padding?: number, paddingX?: number, paddingY?: number, yDomain?: { min: number, max: number } }} input.geometry - chart geometry.
+     * @returns {{ x: number, y: number, index: number, point: object, bar: object|undefined, anchoredLeft: boolean }|undefined} crosshair state.
+     */
+    function buildCrosshair({ points, index, geometry }) {
+      const list = points ?? []
+      if (index < 0 || index >= list.length) return undefined
+      const point = list[index]
+      const { innerW, padX, padY, innerH } = box({ ...geometry, height: geometry.height ?? 1 })
+      const bar = ohlcOf(point)
+      const domain = geometry.yDomain ?? valueDomain(list, { useExtremes: bar !== undefined })
+      const y = linearScale({ domain: domain === undefined ? [0, 1] : [domain.min, domain.max], range: [padY + innerH, padY] })
+      const x = indexToX(index, list.length, geometry)
+      return {
+        index,
+        x,
+        y: Number(y(point.v).toFixed(2)),
+        point,
+        bar,
+        // The tooltip flips side near the right edge so it never runs out of frame.
+        anchoredLeft: x > padX + innerW * 0.62,
+      }
+    }
+
+    /**
+     * Horizontal reference lines worth drawing for a series.
+     *
+     * A reader compares the latest reading against the window, so the mean and the
+     * two extremes are the lines that carry information. Each one is emitted only
+     * when it is finite, and identical values collapse: a two-point series has a
+     * mean but a flat one has extremes equal to the last value, which would stack
+     * three labels on one pixel.
+     *
+     * @param {{ min?: number, max?: number, mean?: number }} [stats] - series statistics.
+     * @param {{ min: number, max: number }} domain - drawn domain.
+     * @param {{ plot: { x: number, y: number, w: number, h: number } }} layout - resolved plot box.
+     * @returns {Array<{ kind: string, label: string, value: number, y: number, x1: number, x2: number }>} reference lines.
+     */
+    function buildReferenceLines(stats, domain, layout) {
+      if (stats === undefined || domain === undefined || layout?.plot === undefined) return []
+      const { x, w, y: top, h } = layout.plot
+      const y = linearScale({ domain: [domain.min, domain.max], range: [top + h, top] })
+      const candidates = [
+        { kind: 'max', value: stats.max, label: '高' },
+        { kind: 'mean', value: stats.mean, label: '均' },
+        { kind: 'min', value: stats.min, label: '低' },
+      ]
+      const out = []
+      const seen = new Set()
+      for (const candidate of candidates) {
+        if (!Number.isFinite(candidate.value)) continue
+        const key = candidate.value.toFixed(6)
+        if (seen.has(key)) continue
+        seen.add(key)
+        out.push({
+          kind: candidate.kind,
+          label: candidate.label,
+          value: candidate.value,
+          y: Number(y(candidate.value).toFixed(2)),
+          x1: x,
+          x2: x + w,
+        })
+      }
+      return out
+    }
+
+    /**
+     * A readable tick list for the value axis.
+     *
+     * @param {{ min: number, max: number }} domain - data domain.
+     * @param {number} [count] - desired ticks.
+     * @returns {{ min: number, max: number, ticks: number[] }} nice domain and ticks.
+     */
+    function valueAxis(domain, count = 5) {
+      return niceTicks(domain.min, domain.max, count)
+    }
+
+    // ── src/core/chart/bar.js ─────────────────────────────────────────
+    /**
+     * Bar-chart rectangles and axis geometry (docs/05 §4.1).
+     *
+     * @module core/chart/bar
+     */
+
+
+    /**
+     * Build bar rectangles for a column chart. Bars are anchored to the zero line
+     * when the domain crosses zero, so positive and negative values read correctly.
+     *
+     * @param {Array<{ t: string, v: number }>} points - ascending points.
+     * @param {{ width: number, height: number, padding?: number, paddingX?: number, paddingY?: number, yDomain?: { min: number, max: number }, gap?: number }} geometry - chart geometry.
+     * @returns {Array<{ x: number, y: number, w: number, h: number, t: string, v: number }>} rectangles.
+     */
+    function buildBarRects(points, geometry) {
+      if (!Array.isArray(points) || points.length === 0) return []
+      const { innerW, innerH, padX, padY } = box(geometry)
+      const finite = points.filter((p) => Number.isFinite(p?.v))
+      if (finite.length === 0) return []
+
+      const dataExtent = extent(finite.map((p) => p.v))
+      const yDomain = geometry.yDomain ?? { min: Math.min(0, dataExtent.min), max: Math.max(0, dataExtent.max) }
+      const y = linearScale({ domain: [yDomain.min, yDomain.max], range: [padY + innerH, padY] })
+      const gap = geometry.gap ?? 1
+      const slot = innerW / finite.length
+      const width = Math.max(1, slot - gap)
+      const zeroY = y(0)
+
+      return finite.map((point, index) => {
+        const valueY = y(point.v)
+        const top = Math.min(zeroY, valueY)
+        const height = Math.max(1, Math.abs(valueY - zeroY))
+        return {
+          x: Number((padX + index * slot + gap / 2).toFixed(2)),
+          y: Number(top.toFixed(2)),
+          w: Number(width.toFixed(2)),
+          h: Number(height.toFixed(2)),
+          t: point.t,
+          v: point.v,
+        }
+      })
+    }
+
+    /**
+     * The y coordinate of the zero line, or 'null' when zero is outside the domain.
+     *
+     * @param {{ min: number, max: number }} yDomain - y domain.
+     * @param {{ height: number, padding?: number, paddingY?: number }} geometry - chart geometry.
+     * @returns {number|null} zero-line y coordinate.
+     */
+    function buildZeroLine(yDomain, geometry) {
+      const { innerH, padY } = box({ width: 1, height: geometry.height, padding: geometry.padding, paddingY: geometry.paddingY })
+      if (!(yDomain.min <= 0 && yDomain.max >= 0)) return null
+      const y = linearScale({ domain: [yDomain.min, yDomain.max], range: [padY + innerH, padY] })
+      return Number(y(0).toFixed(2))
+    }
+
+    // ── src/core/chart/axis.js ─────────────────────────────────────────
+    /**
+     * Axis label geometry (docs/05 §4.1).
+     *
+     * @module core/chart/axis
+     */
+
+
+    /**
+     * Build y-axis tick labels.
+     *
+     * @param {{ min: number, max: number }} yDomain - y domain.
+     * @param {{ width: number, height: number, padding?: number, paddingX?: number, paddingY?: number, ticks?: number, decimals?: number, suffix?: string }} geometry - chart geometry.
+     * @returns {Array<{ y: number, value: number, label: string }>} tick entries.
+     */
+    function buildYAxis(yDomain, geometry) {
+      const { innerH, padY } = box({ width: geometry.width ?? 1, height: geometry.height, padding: geometry.padding, paddingX: geometry.paddingX, paddingY: geometry.paddingY })
+      const decimals = geometry.decimals ?? 2
+      const suffix = geometry.suffix ?? ''
+      // No explicit count → derive "nice" 1/2/5×10ⁿ ticks from the domain; an
+      // explicit count → evenly spaced ticks inside the given domain.
+      const values = geometry.ticks === undefined
+        ? niceTicks(yDomain.min, yDomain.max, 5).ticks.filter((t) => t >= yDomain.min && t <= yDomain.max)
+        : buildEvenTicks(yDomain, geometry.ticks)
+      const y = linearScale({ domain: [yDomain.min, yDomain.max], range: [padY + innerH, padY] })
+      return values.map((value) => ({
+        y: Number(y(value).toFixed(2)),
+        value,
+        label: `${Number(value.toFixed(decimals))}${suffix}`,
+      }))
+    }
+
+    /**
+     * Evenly spaced ticks across a domain (used when the caller fixes the count).
+     *
+     * @param {{ min: number, max: number }} domain - domain.
+     * @param {number} count - tick count.
+     * @returns {number[]} tick values.
+     */
+    function buildEvenTicks(domain, count) {
+      if (count <= 1) return [domain.min]
+      const step = (domain.max - domain.min) / (count - 1)
+      return Array.from({ length: count }, (_, i) => Number((domain.min + step * i).toFixed(12)))
+    }
+
+    /**
+     * Build x-axis tick labels from date strings.
+     *
+     * @param {string[]} dates - ascending 'YYYY-MM-DD' values.
+     * @param {{ width: number, padding?: number, paddingX?: number, count?: number }} geometry - chart geometry.
+     * @returns {Array<{ x: number, label: string, t: string }>} tick entries.
+     */
+    function buildXAxis(dates, geometry) {
+      if (!Array.isArray(dates) || dates.length === 0) return []
+      const { innerW, padX } = box({ width: geometry.width, height: 1, padding: geometry.padding, paddingX: geometry.paddingX })
+      const wanted = Math.min(geometry.count ?? 4, dates.length)
+      const step = dates.length <= wanted ? 1 : (dates.length - 1) / (wanted - 1)
+      const picked = []
+      for (let i = 0; i < wanted; i += 1) picked.push(Math.round(i * step))
+      const unique = [...new Set(picked)].filter((i) => i >= 0 && i < dates.length)
+      const span = Math.max(1, dates.length - 1)
+      return unique.map((index) => ({
+        x: Number((padX + (index / span) * innerW).toFixed(2)),
+        label: formatAxisDate(dates[index]),
+        t: dates[index],
+      }))
+    }
+
+    /**
+     * Short axis date: 'MM-DD' inside one year, 'YYYY-MM' across years.
+     *
+     * @param {string} date - 'YYYY-MM-DD'.
+     * @returns {string} axis label.
+     */
+    function formatAxisDate(date) {
+      return `${date.slice(5, 7)}-${date.slice(8, 10)}`
+    }
+
+    /**
+     * Axis date label that stays unambiguous across a multi-year window.
+     *
+     * A daily chart spanning years labelled only 'MM-DD' reads as repeating dates,
+     * so the month is enough inside one year and the year is shown once the window
+     * crosses a boundary (docs/05 §4.2).
+     *
+     * @param {string} date - 'YYYY-MM-DD'.
+     * @param {{ crossesYears?: boolean }} [options] - options.
+     * @returns {string} axis label.
+     */
+    function formatSpanDate(date, options = {}) {
+      return options.crossesYears === true ? `${date.slice(0, 4)}-${date.slice(5, 7)}` : formatAxisDate(date)
+    }
+
+    /**
+     * X ticks for a time series drawn with the shared plot box.
+     *
+     * Placed by index rather than by value, because the chart is index-spaced (a
+     * weekend must not open a gap), and it always keeps the first and last point so
+     * the axis states the window it covers.
+     *
+     * @param {string[]} dates - ascending 'YYYY-MM-DD' values.
+     * @param {{ width: number, height?: number, paddingX?: number, paddingY?: number, padding?: number, count?: number }} geometry - chart geometry.
+     * @returns {Array<{ x: number, label: string, t: string, anchor: 'start'|'middle'|'end' }>} ticks.
+     */
+    function buildTimeAxis(dates, geometry) {
+      if (!Array.isArray(dates) || dates.length === 0) return []
+      const { padX, innerW } = box({
+        width: geometry.width,
+        height: geometry.height ?? 1,
+        padding: geometry.padding,
+        paddingX: geometry.paddingX,
+        paddingY: geometry.paddingY,
+        padLeft: geometry.padLeft,
+        padRight: geometry.padRight,
+        padX: geometry.padX,
+        innerW: geometry.innerW,
+      })
+      const wanted = Math.min(Math.max(2, geometry.count ?? 5), dates.length)
+      const crossesYears = dates[0].slice(0, 4) !== dates[dates.length - 1].slice(0, 4)
+      const span = dates.length - 1
+      const picked = new Set([0, span])
+      for (let i = 1; i < wanted - 1; i += 1) picked.add(Math.round((i / (wanted - 1)) * span))
+      return [...picked]
+        .sort((a, b) => a - b)
+        .map((index) => ({
+          index,
+          x: Number((padX + (span === 0 ? innerW / 2 : (index / span) * innerW)).toFixed(2)),
+          t: dates[index],
+          label: formatSpanDate(dates[index], { crossesYears }),
+          // Edge labels are anchored inward so they never run off the plot.
+          anchor: index === 0 ? 'start' : index === span ? 'end' : 'middle',
+        }))
+    }
+
+    // ── src/core/format.js ─────────────────────────────────────────
+    /**
+     * Formatting shared by the panel and (for the digest) the host — pure functions,
+     * no DOM, no locale API (docs/05 §4.3, §6).
+     *
+     * @module core/format
+     */
+
+    /** Semantic colour keys the panel maps to theme tokens. */
+    const COLORS = ['up', 'down', 'neutral', 'warn', 'error']
+
+    /**
+     * Format a number for display: fixed decimals, grouped thousands, explicit
+     * sign where a sign carries meaning.
+     *
+     * @param {number|undefined} value - value.
+     * @param {{ decimals?: number, signed?: boolean, compact?: boolean }} [options] - formatting options.
+     * @returns {string} display text (''—'' when absent).
+     */
+    function formatValue(value, { decimals = 2, signed = false, compact = false } = {}) {
+      if (typeof value !== 'number' || !Number.isFinite(value)) return '—'
+      const fixed = value.toFixed(Math.max(0, Math.min(8, decimals)))
+      const [intPart, fraction] = fixed.split('.')
+      const negative = intPart.startsWith('-')
+      const digits = negative ? intPart.slice(1) : intPart
+      let grouped = digits
+      if (compact && digits.length > 9) {
+        const billions = Number(digits) / 1e9
+        grouped = `${billions.toFixed(1)}B`
+        return `${negative ? '-' : signed ? '+' : ''}${grouped}`
+      }
+      if (digits.length > 3) grouped = digits.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+      const sign = negative ? '-' : signed ? '+' : ''
+      return fraction === undefined ? `${sign}${grouped}` : `${sign}${grouped}.${fraction}`
+    }
+
+    /**
+     * Format a change with a direction arrow, for card deltas.
+     *
+     * @param {number|undefined} changeAbs - absolute change.
+     * @param {number|undefined} changePct - percentage change.
+     * @param {string} unit - unit suffix.
+     * @param {number} [decimals] - decimals for the absolute change.
+     * @returns {string} display text.
+     */
+    function formatChange(changeAbs, changePct, unit, decimals = 2) {
+      if (typeof changeAbs !== 'number' || !Number.isFinite(changeAbs)) return '—'
+      const arrow = changeAbs > 0 ? '▲' : changeAbs < 0 ? '▼' : '·'
+      const absolute = formatValue(changeAbs, { decimals, signed: true })
+      const percent = typeof changePct === 'number' && Number.isFinite(changePct) ? ` (${formatValue(changePct, { decimals: 1, signed: true })}%)` : ''
+      return `${arrow} ${absolute}${unit === '' ? '' : unit}${percent}`
+    }
+
+    /**
+     * Compact relative time for "last updated" labels.
+     *
+     * @param {number} minutes - age in minutes.
+     * @returns {string} display text.
+     */
+    function formatAge(minutes) {
+      if (!Number.isFinite(minutes) || minutes < 0) return '未知时间'
+      if (minutes < 1) return '刚刚'
+      if (minutes < 60) return `${Math.round(minutes)} 分钟前`
+      if (minutes < 60 * 24) return `${Math.round(minutes / 60)} 小时前`
+      const days = Math.round(minutes / (60 * 24))
+      return days === 1 ? '昨天' : `${days} 天前`
+    }
+
+    /**
+     * Whether a change should read as good, bad or neutral — decided by the
+     * indicator's 'polarity', never by the sign of the number alone
+     * (docs/05 §4.3: rising CPI is not "red" the way rising unemployment is).
+     *
+     * @param {number|undefined} change - signed change.
+     * @param {'up-is-good'|'down-is-good'|'neutral'} [polarity] - catalog polarity.
+     * @returns {'up'|'down'|'neutral'} colour key.
+     */
+    function changeColor(change, polarity = 'neutral') {
+      if (typeof change !== 'number' || !Number.isFinite(change) || change === 0) return 'neutral'
+      if (polarity === 'neutral') return 'neutral'
+      const good = polarity === 'up-is-good' ? change > 0 : change < 0
+      return good ? 'up' : 'down'
+    }
+
+    /**
+     * Status dot semantics (docs/03 §1.7).
+     *
+     * @param {'fresh'|'stale'|'error'|'missing'} status - metric status.
+     * @returns {{ color: 'up'|'warn'|'error'|'neutral', label: string }} dot description.
+     */
+    function statusDot(status) {
+      switch (status) {
+        case 'fresh':
+          return { color: 'up', label: '数据最新' }
+        case 'stale':
+          return { color: 'warn', label: '数据可能陈旧' }
+        case 'error':
+          return { color: 'error', label: '数据源暂不可用' }
+        default:
+          return { color: 'neutral', label: '本范围内无数据' }
+      }
+    }
+
+    /**
+     * Format a calendar date for display.
+     *
+     * @param {string|undefined} date - 'YYYY-MM-DD'.
+     * @param {{ withYear?: boolean }} [options] - options.
+     * @returns {string} display text.
+     */
+    function formatDate(date, { withYear = true } = {}) {
+      if (typeof date !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(date)) return '—'
+      return withYear ? date : date.slice(5)
+    }
+
+    /**
+     * Build the tooltip text for one card, used by the 'title' attribute and by the
+     * accessible label.
+     *
+     * @param {object} metric - metric card.
+     * @returns {string} tooltip.
+     */
+    function metricTooltip(metric) {
+      const parts = [
+        `${metric.label?.zh ?? metric.indicatorId}（${metric.indicatorId}）`,
+        `最新：${formatValue(metric.latest, { decimals: metric.display?.decimals ?? 2 })}${metric.unit ?? ''} @ ${formatDate(metric.latestAt)}`,
+      ]
+      if (metric.notes?.zh) parts.push(metric.notes.zh)
+      if (metric.sourceRef?.label) parts.push(`来源：${metric.sourceRef.label}`)
+      parts.push(`状态：${statusDot(metric.status).label}`)
+      return parts.join('\n')
+    }
+
+    /**
+     * Truncate text for a compact label, keeping the tail visible with an ellipsis.
+     *
+     * @param {string} text - input.
+     * @param {number} max - maximum characters.
+     * @returns {string} truncated text.
+     */
+    function truncate(text, max) {
+      const value = String(text ?? '')
+      return value.length <= max ? value : `${value.slice(0, Math.max(1, max - 1))}…`
+    }
+
+    // ── src/client/copy.js ─────────────────────────────────────────
+    /**
+     * Every user-facing string in one place (docs/05 §6), so a test can assert that
+     * no raw key or bare English leaks into the panel and so translation is a data
+     * change rather than a code change.
+     *
+     * @module client/copy
+     */
+
+    /** Chinese copy (the panel's primary language). */
+    const COPY = {
+      panelTitle: '数据雷达',
+      panelSubtitle: '全球宏观 · 利率 · 股市 · 债市',
+      open: '打开数据雷达',
+      close: '收起面板',
+      refresh: '刷新',
+      refreshing: '正在刷新…',
+      retry: '重试',
+      loading: '正在获取数据…',
+      empty: '这个范围里没有可用数据。',
+      degradedBanner: '部分数据源不可用，卡片显示的是上次成功的快照。',
+      unreachable: '插件未正确挂载（/api/show-me-data 不可达）。请检查挂载行与宿主日志。',
+      sourceBadge: '来源',
+      viewSource: '打开原始数据源',
+      showDataTable: '查看数据表',
+      hideDataTable: '收起数据表',
+      date: '日期',
+      value: '数值',
+      stats: '统计',
+      statsMean: '均值',
+      statsMin: '最小',
+      statsMax: '最大',
+      statsStdDev: '标准差',
+      statsPercentile: '分位',
+      statsYoy: '同比',
+      statsMom: '环比',
+      statsMissing: '缺口',
+      noteworthy: '今日值得关注',
+      noteworthyEmpty: '今天没有触发关注规则。',
+      tabToday: '今日',
+      tabCore: '核心',
+      tabMine: '我的',
+      tabSettings: '设置',
+      tabDetail: '详情',
+      groupUS: '美国',
+      groupCN: '中国',
+      groupGlobal: '全球',
+      groupCustom: '我的',
+      ai: 'AI 解析',
+      aiSummary: '时段总结',
+      aiAsk: '数据问答',
+      aiAskPlaceholder: '用面板内的数据提问，例如：美国 CPI 同比现在是多少？',
+      aiAskSubmit: '提问',
+      aiModeDeterministic: '确定性摘要模式',
+      aiModeLlm: '模型模式',
+      aiDegraded: 'AI 输出未通过溯源校验，已回退为确定性摘要。',
+      aiInsufficient: '数据不足',
+      aiCitations: '引用数据点',
+      discuss: '开独立会话讨论',
+      discussing: '正在开启会话…',
+      discussFailed: '独立会话不可用',
+      discussTurnFailed: '会话已创建，但本轮提问失败',
+      discussHint: '会新建一个 DSH 会话，并把面板数据作为上下文；没输入问题时面板会代你提出开场问题。回答在会话里流式生成，可以继续追问、换模型。',
+      discussOpened: '已在新会话中打开（回答正在会话里生成，稍后也会显示在这里）。',
+      discussAnswer: '会话里的回答',
+      discussOpening: '正在开启会话…',
+      discussRunning: '会话进行中',
+      discussReady: '会话已就绪',
+      discussRunningHint: '回答在会话里生成，完成后也会显示在这里（通常 30–60 秒）。',
+      discussOpenSession: '打开会话',
+      discussSessionStarted: '会话 ID：',
+      discussTimeout: '等待超时：会话仍在运行，请点击「打开会话」查看；或稍后重试。',
+      dismiss: '收起',
+      noteworthyDiscuss: '讨论',
+      noteworthyDiscussHint: '开一个独立会话，把这条的关注原因和面板数据一起带过去',
+      analyzeTab: '总体分析',
+      groupUs: '美国',
+      groupCn: '中国',
+      analyzeScope: '范围',
+      analyzeAll: '全部',
+      analyzeRun: '生成总体分析',
+      analyzeIdle: '选择范围后点「生成总体分析」：会综合该范围内所有指标与今日触发规则。',
+      analyzeEmpty: '该范围内没有可用指标。',
+      analyzeCount: '纳入指标',
+      analyzeDiscuss: '深入讨论',
+      analyzeDiscussHint: '带着这份总体数据开一个独立会话，可以继续追问',
+      iterateHint: '面板只读取已登记的数据源，无法自己接入新源。可以开一个独立会话，在插件工作区里迭代代码来接入（会话已带上这条需求与失败原因）。',
+      iterateAction: '开迭代会话接入数据源',
+      iterateOpening: '正在开会话…',
+      iterateTopic: '接入数据源',
+      viewDetail: '查看',
+      selectHint: '勾选后可跨板块统一分析',
+      selectedCount: '已选',
+      analyzeSelected: '分析选中',
+      clearSelection: '清除选择',
+      expand: '展开',
+      collapse: '收起',
+      barSize: '周期',
+      barDay: '日K',
+      barWeek: '周K',
+      barMonth: '月K',
+      chartCandle: 'K线',
+      chartArea: '面积',
+      chartLine: '折线',
+      chartBar: '柱状',
+      chartHint: '移动指针查看数值',
+      pointsUnit: '个观测点',
+      discussEmpty: '会话里这一轮没有产生文本（模型可能只给出了推理，或中途失败）；请打开该会话查看原因。',
+      discussIdle: '会话已就绪，但面板只注入了上下文、没有提问；请打开会话直接提问。',
+      discussAutoAsked: '面板已代你提出开场问题：',
+      discussQuestion: '本轮提问：',
+      aiCached: '来自缓存',
+      aiOffline: '未配置模型，本回答由本地规则生成。',
+      aiEmptyAnswer: '模型未返回可用的文本，已回退为确定性摘要',
+      addIndicator: '添加指标',
+      addSearchPlaceholder: '搜索指标（中文或英文，例如 非农 / CPI）',
+      addByText: '用自然语言添加',
+      addByTextPlaceholder: '例如：加上美国 30 年期房贷利率',
+      addConfirm: '加入我的',
+      addPreview: '预览',
+      addExists: '已存在，是否更新？',
+      addUnsupported: '无法添加（没有可用数据源）',
+      remove: '移除',
+      disclaimer: '数据来自公开源，仅供研究参考，不构成投资建议；口径以原始来源为准。',
+      lastUpdated: '更新于',
+      fromCache: '正在显示缓存',
+      settingsMount: '挂载检查清单',
+      settingsWhatIsThis: '这个面板在做什么',
+      settingsIntro: '下面是当前挂载生效的配置。多数项来自 profile 的行配置，改完需要重启 dsh 进程；面板内不可改的项已标注。',
+      settingsPrefix: '接口前缀',
+      settingsPrefixHint: '所有面板请求都走这个前缀',
+      settingsRoutes: '路由数',
+      settingsTools: '模型工具数',
+      settingsReadOnly: '行配置，面板内不可改',
+      settingsUnsupported: '暂不可用指标：',
+      settingsStorageHint: '未配置时为内存存储，重启后缓存与自选清空',
+      settingsAi: 'AI 设置',
+      settingsCurrentModel: '当前模型',
+      settingsAiEnabled: 'AI 开关',
+      settingsAiEnabledHint: '关掉后只用确定性摘要（不调用模型）',
+      settingsAiChars: '输出字数上限',
+      settingsAiCharsHint: '太小时推理模型会把预算用完、只留下空回答',
+      settingsAiCache: '结果缓存',
+      settingsAiCacheHint: '同一指标+同一区间在缓存期内直接复用',
+      settingsData: '数据与缓存',
+      settingsRefresh: '后台刷新间隔',
+      settingsRefreshHint: '0 表示不自动刷新，只在打开面板时取数',
+      settingsGroups: '展示分组',
+      settingsGroupsHint: '面板按这些分组归类卡片',
+      settingsNoteworthy: '关注项数量',
+      settingsNoteworthyHint: '「今日值得关注」最多显示几条',
+      settingsDebug: '调试日志',
+      settingsDebugHint: '开启后把 AI 诊断写到进程 stderr',
+      settingsSourcesHint: '可用性来自最近一次抓取；失败通常是上游限流或封锁。作为备用上游、从未被请求过的源会显示"未检查"——那不代表它坏了。',
+      settingsSourceOff: '已在配置中关闭',
+      settingsLast: '最后成功',
+      settingsHowToChange: '要修改以上任一项：编辑',
+      reload: '重新读取',
+      testSource: '测试连接',
+      testSourceHint: '忽略缓存重新请求该数据源的指标，确认上游此刻是否可用',
+      testAll: '全部测试',
+      testing: '测试中…',
+      testOk: '连接正常',
+      testFailed: '连接失败',
+      failedCount: '失败',
+      probeIndicators: '本次测试指标数',
+      notChecked: '未检查',
+      available: '可用',
+      unavailable: '失败',
+      yes: '是',
+      no: '否',
+      minutes: '分钟',
+      settingsStorage: '存储目录',
+      settingsAiMode: 'AI 模式',
+      settingsSources: '数据源开关',
+      settingsIndicators: '指标数量',
+      coldStart: '正在获取数据源数据…',
+      staleHint: '按该指标的发布频率判断，数据可能尚未更新。',
+      errorHint: '该数据源本次取数失败。点击重试，或查看健康状态。',
+      missingHint: '上游成功返回，但本范围内没有观测。',
+      hoverHint: '悬停查看数值，点击打开详情。',
+    }
+
+    /** English mirror, used when the locale service reports a non-Chinese locale. */
+    const COPY_EN = {
+      panelTitle: 'Data Radar',
+      panelSubtitle: 'Global macro · rates · equities · bonds',
+      open: 'Open Data Radar',
+      close: 'Collapse panel',
+      refresh: 'Refresh',
+      refreshing: 'Refreshing…',
+      retry: 'Retry',
+      loading: 'Fetching data…',
+      empty: 'No data available in this range.',
+      degradedBanner: 'Some sources are unavailable; cards show the last successful snapshot.',
+      unreachable: 'The plugin is not mounted correctly (/api/show-me-data is unreachable).',
+      sourceBadge: 'Source',
+      viewSource: 'Open the original source',
+      showDataTable: 'Show data table',
+      hideDataTable: 'Hide data table',
+      date: 'Date',
+      value: 'Value',
+      stats: 'Statistics',
+      statsMean: 'Mean',
+      statsMin: 'Min',
+      statsMax: 'Max',
+      statsStdDev: 'Std dev',
+      statsPercentile: 'Percentile',
+      statsYoy: 'YoY',
+      statsMom: 'MoM',
+      statsMissing: 'Gaps',
+      noteworthy: 'Worth watching today',
+      noteworthyEmpty: 'No rule fired today.',
+      tabToday: 'Today',
+      tabCore: 'Core',
+      tabMine: 'Mine',
+      tabSettings: 'Settings',
+      tabDetail: 'Detail',
+      groupUS: 'United States',
+      groupCN: 'China',
+      groupGlobal: 'Global',
+      groupCustom: 'Mine',
+      ai: 'AI analysis',
+      aiSummary: 'Period summary',
+      aiAsk: 'Ask the data',
+      aiAskPlaceholder: 'Ask using panel data, e.g. what is US CPI YoY now?',
+      aiAskSubmit: 'Ask',
+      aiModeDeterministic: 'Deterministic summary mode',
+      aiModeLlm: 'Model mode',
+      aiDegraded: 'The model output failed provenance validation; fell back to the deterministic summary.',
+      aiInsufficient: 'Insufficient data',
+      aiCitations: 'Cited data points',
+      discuss: 'Discuss in a session',
+      discussing: 'Opening a session…',
+      discussFailed: 'Independent sessions are unavailable',
+      discussTurnFailed: 'Session created, this turn failed',
+      discussHint: 'Creates a DSH session seeded with the panel data; with an empty question the panel asks an opening question for you. The answer streams in the session.',
+      discussOpened: 'Opened in a new session (the answer is generating there and will also appear here).',
+      discussAnswer: 'Answer from the session',
+      discussOpening: 'Opening a session…',
+      discussRunning: 'Session running',
+      discussReady: 'Session ready',
+      discussRunningHint: 'The answer is generating in the session and will appear here too (usually 30–60s).',
+      discussOpenSession: 'Open session',
+      discussSessionStarted: 'Session id: ',
+      discussTimeout: 'Timed out waiting: the session is still running — open it, or try again later.',
+      dismiss: 'Dismiss',
+      noteworthyDiscuss: 'Discuss',
+      noteworthyDiscussHint: 'Open a session seeded with this item\'s rule triggers and the panel data',
+      analyzeTab: 'Analysis',
+      groupUs: 'US',
+      groupCn: 'China',
+      analyzeScope: 'Scope',
+      analyzeAll: 'All',
+      analyzeRun: 'Run the analysis',
+      analyzeIdle: 'Pick a scope and run it: every indicator in scope plus today\'s triggered rules go into one digest.',
+      analyzeEmpty: 'No usable indicators in this scope.',
+      analyzeCount: 'Indicators in scope',
+      analyzeDiscuss: 'Discuss in a session',
+      analyzeDiscussHint: 'Open a session seeded with this whole-panel digest',
+      iterateHint: 'The panel only reads registered sources and cannot add one by itself. Open a session in the plugin workspace to add it (the request and the reasons travel with it).',
+      iterateAction: 'Open an iteration session',
+      iterateOpening: 'Opening a session…',
+      iterateTopic: 'Add a data source',
+      viewDetail: 'View',
+      selectHint: 'pick indicators to analyse them together',
+      selectedCount: 'Selected',
+      analyzeSelected: 'Analyse selection',
+      clearSelection: 'Clear',
+      expand: 'Expand',
+      collapse: 'Collapse',
+      barSize: 'Bars',
+      barDay: 'Daily',
+      barWeek: 'Weekly',
+      barMonth: 'Monthly',
+      chartCandle: 'Candles',
+      chartArea: 'Area',
+      chartLine: 'Line',
+      chartBar: 'Bars',
+      chartHint: 'Move the pointer to read values',
+      pointsUnit: 'observations',
+      discussEmpty: 'This turn produced no text (the model may have returned only reasoning, or failed midway); open the session to see why.',
+      discussIdle: 'The session is ready, but only context was seeded — no question was asked; open it and ask one.',
+      discussAutoAsked: 'The panel asked this opening question for you:',
+      discussQuestion: 'Question this turn:',
+      aiCached: 'From cache',
+      aiOffline: 'No model configured; this answer was generated by local rules.',
+      aiEmptyAnswer: 'The model returned no usable text; fell back to the deterministic summary',
+      addIndicator: 'Add indicator',
+      addSearchPlaceholder: 'Search indicators (Chinese or English)',
+      addByText: 'Add by description',
+      addByTextPlaceholder: 'e.g. add the US 30-year mortgage rate',
+      addConfirm: 'Add to mine',
+      addPreview: 'Preview',
+      addExists: 'Already added — update it?',
+      addUnsupported: 'Cannot add (no available source)',
+      remove: 'Remove',
+      disclaimer: 'Data comes from public sources, for research only, not investment advice.',
+      lastUpdated: 'Updated',
+      fromCache: 'Showing cache',
+      settingsMount: 'Mount checklist',
+      settingsWhatIsThis: 'What this panel is doing',
+      settingsIntro: 'Effective configuration of this mount. Most values come from the profile row and need a dsh restart; rows the panel cannot change say so.',
+      settingsPrefix: 'API prefix',
+      settingsPrefixHint: 'every panel request goes through this prefix',
+      settingsRoutes: 'Routes',
+      settingsTools: 'Model tools',
+      settingsReadOnly: 'row config, not editable here',
+      settingsUnsupported: 'Unavailable indicators:',
+      settingsStorageHint: 'memory when unset: cache and watchlist are cleared on restart',
+      settingsAi: 'AI',
+      settingsCurrentModel: 'Current model',
+      settingsAiEnabled: 'AI enabled',
+      settingsAiEnabledHint: 'off means deterministic summaries only',
+      settingsAiChars: 'Answer budget',
+      settingsAiCharsHint: 'too small and a reasoning model spends it all thinking',
+      settingsAiCache: 'Result cache',
+      settingsAiCacheHint: 'same indicator and range reuses the cached answer',
+      settingsData: 'Data and caching',
+      settingsRefresh: 'Background refresh',
+      settingsRefreshHint: '0 disables it: data is fetched when the panel opens',
+      settingsGroups: 'Display groups',
+      settingsGroupsHint: 'cards are grouped by these',
+      settingsNoteworthy: 'Noteworthy limit',
+      settingsNoteworthyHint: 'rows shown in "worth watching today"',
+      settingsDebug: 'Debug logging',
+      settingsDebugHint: 'writes AI diagnostics to the process stderr',
+      settingsSourcesHint: 'Availability comes from the last fetch; failures are usually upstream rate limits. A source only ever used as a fallback shows "not checked" — that is not a failure.',
+      settingsSourceOff: 'disabled in config',
+      settingsLast: 'last success',
+      settingsHowToChange: 'To change any of these, edit',
+      reload: 'Reload',
+      testSource: 'Test',
+      testSourceHint: 'Re-fetch this source\'s indicators, ignoring the cache, to see whether the upstream answers now',
+      testAll: 'Test all',
+      testing: 'Testing…',
+      testOk: 'reachable',
+      testFailed: 'unreachable',
+      failedCount: 'failed',
+      probeIndicators: 'indicators probed',
+      notChecked: 'not checked',
+      available: 'ok',
+      unavailable: 'failed',
+      yes: 'yes',
+      no: 'no',
+      minutes: 'min',
+      settingsStorage: 'Storage directory',
+      settingsAiMode: 'AI mode',
+      settingsSources: 'Source switches',
+      settingsIndicators: 'Indicator count',
+      coldStart: 'Fetching from data sources…',
+      staleHint: 'This indicator may not have been published yet for its frequency.',
+      errorHint: 'This source failed on this refresh. Retry, or check health.',
+      missingHint: 'The upstream answered, but has no observation in this range.',
+      hoverHint: 'Hover for values, click for detail.',
+    }
+
+    /** Group key → copy key. */
+    const GROUP_LABELS = { US: 'groupUS', CN: 'groupCN', GLOBAL: 'groupGlobal', CUSTOM: 'groupCustom' }
+
+    /**
+     * Pick the copy table for a locale id.
+     *
+     * @param {string} [locale] - locale id such as 'zh-CN' or 'en'.
+     * @returns {typeof COPY} copy table.
+     */
+    function copyFor(locale) {
+      return typeof locale === 'string' && /^en/i.test(locale) ? COPY_EN : COPY
+    }
+
+    // ── src/client/api.js ─────────────────────────────────────────
+    /**
+     * The panel's single transport layer (docs/05 §3).
+     *
+     * Every call goes to the host half under '/api/show-me-data/*'; the browser never
+     * talks to an upstream data source (CORS and provenance both depend on that).
+     * Each request has a timeout, is cancellable, and turns a structured error
+     * payload into a value the UI can render instead of an exception the UI must
+     * catch blindly.
+     *
+     * @module client/api
+     */
+
+    /** Request timeout in milliseconds (docs/05 §3). */
+    const REQUEST_TIMEOUT_MS = 8000
+
+    /** The API root. */
+    const API_ROOT = '/api/show-me-data'
+
+    /**
+     * Perform one JSON request.
+     *
+     * @param {string} path - path under {@link API_ROOT}, e.g. '/overview?range=1Y'.
+     * @param {{ method?: string, body?: any, signal?: AbortSignal, timeoutMs?: number, fetchImpl?: Function }} [options] - request options.
+     * @returns {Promise<{ ok: boolean, status: number, data?: any, error?: { kind: string, detail: string, retryable: boolean } }>} response.
+     */
+    async function request(path, { method = 'GET', body, signal, timeoutMs = REQUEST_TIMEOUT_MS, fetchImpl } = {}) {
+      const doFetch = fetchImpl ?? (typeof fetch === 'function' ? fetch : undefined)
+      if (doFetch === undefined) {
+        return { ok: false, status: 0, error: { kind: 'network', detail: 'fetch is unavailable in this environment', retryable: false } }
+      }
+      const controller = new AbortController()
+      const timer = setTimeout(() => controller.abort(), timeoutMs)
+      const composed = typeof AbortSignal !== 'undefined' && typeof AbortSignal.any === 'function' && signal !== undefined
+        ? AbortSignal.any([signal, controller.signal])
+        : controller.signal
+      try {
+        const response = await doFetch(`${API_ROOT}${path}`, {
+          method,
+          headers: body === undefined ? undefined : { 'content-type': 'application/json' },
+          body: body === undefined ? undefined : JSON.stringify(body),
+          signal: composed,
+        })
+        const text = await response.text()
+        let payload
+        try {
+          payload = text === '' ? undefined : JSON.parse(text)
+        } catch {
+          payload = undefined
+        }
+        if (!response.ok) {
+          return {
+            ok: false,
+            status: response.status,
+            // The payload rides along on failures too: a discussion whose session was
+            // created but whose first turn failed still returns its `sessionId`, and
+            // the panel needs it to offer 「打开会话」.
+            ...(payload === undefined ? {} : { data: payload }),
+            error: payload?.error ?? {
+              kind: response.status === 404 ? 'not-found' : 'http',
+              detail: `请求失败（HTTP ${response.status}）`,
+              retryable: response.status >= 500,
+            },
+          }
+        }
+        return { ok: true, status: response.status, data: payload }
+      } catch (error) {
+        const aborted = error?.name === 'AbortError'
+        return {
+          ok: false,
+          status: 0,
+          error: {
+            kind: aborted ? 'timeout' : 'network',
+            detail: aborted ? `请求超过 ${timeoutMs}ms 未返回` : `网络错误：${error?.message ?? error}`,
+            retryable: true,
+          },
+        }
+      } finally {
+        clearTimeout(timer)
+      }
+    }
+
+    /**
+     * Start an SSE request, invoking handlers as events arrive.
+     *
+     * Uses 'fetch' + a stream reader rather than 'EventSource' so the POST payload
+     * and the caller's abort signal both work.
+     *
+     * @param {string} path - path under {@link API_ROOT}.
+     * @param {{ body?: any, signal?: AbortSignal, onText?: (text: string) => void, onDone?: (result: any) => void, onError?: (error: object) => void, fetchImpl?: Function }} options - options.
+     * @returns {Promise<{ ok: boolean, result?: any, error?: object }>} completion.
+     */
+    async function stream(path, { body, signal, onText, onDone, onError, fetchImpl } = {}) {
+      const doFetch = fetchImpl ?? (typeof fetch === 'function' ? fetch : undefined)
+      if (doFetch === undefined) {
+        const error = { kind: 'network', detail: 'fetch is unavailable', retryable: false }
+        onError?.(error)
+        return { ok: false, error }
+      }
+      try {
+        const response = await doFetch(`${API_ROOT}${path}`, {
+          method: 'POST',
+          headers: { 'content-type': 'application/json', accept: 'text/event-stream' },
+          body: JSON.stringify(body ?? {}),
+          signal,
+        })
+        if (!response.ok || response.body === undefined || response.body === null) {
+          // The host answers with plain JSON when streaming is unsupported; accept it.
+          const text = await response.text()
+          try {
+            const parsed = JSON.parse(text)
+            onDone?.(parsed)
+            return { ok: true, result: parsed }
+          } catch {
+            const error = { kind: 'http', detail: `流式请求失败（HTTP ${response.status}）`, retryable: response.status >= 500 }
+            onError?.(error)
+            return { ok: false, error }
+          }
+        }
+        const reader = response.body.getReader()
+        const decoder = new TextDecoder()
+        let buffer = ''
+        let result
+        for (;;) {
+          const { value, done } = await reader.read()
+          if (done) break
+          buffer += decoder.decode(value, { stream: true })
+          const frames = buffer.split('\n\n')
+          buffer = frames.pop() ?? ''
+          for (const frame of frames) {
+            const parsed = parseSseFrame(frame)
+            if (parsed === undefined) continue
+            if (parsed.event === 'text') onText?.(parsed.data?.text ?? '')
+            else if (parsed.event === 'done') {
+              result = parsed.data?.result
+              onDone?.(result)
+            } else if (parsed.event === 'error') onError?.({ kind: parsed.data?.kind ?? 'internal', detail: parsed.data?.detail ?? '', retryable: true })
+          }
+        }
+        return { ok: true, result }
+      } catch (error) {
+        const aborted = error?.name === 'AbortError'
+        const payload = { kind: aborted ? 'aborted' : 'network', detail: `${error?.message ?? error}`, retryable: !aborted }
+        onError?.(payload)
+        return { ok: false, error: payload }
+      }
+    }
+
+    /**
+     * Parse one SSE frame.
+     *
+     * @param {string} frame - frame text ('event: x\ndata: {...}').
+     * @returns {{ event: string, data: any }|undefined} parsed frame.
+     */
+    function parseSseFrame(frame) {
+      const trimmed = String(frame ?? '').trim()
+      if (trimmed === '') return undefined
+      let event = 'message'
+      const dataLines = []
+      for (const line of trimmed.split('\n')) {
+        if (line.startsWith('event:')) event = line.slice(6).trim()
+        else if (line.startsWith('data:')) dataLines.push(line.slice(5).trim())
+      }
+      if (dataLines.length === 0) return { event, data: undefined }
+      const raw = dataLines.join('\n')
+      try {
+        return { event, data: JSON.parse(raw) }
+      } catch {
+        return { event, data: raw }
+      }
+    }
+
+    /** The endpoints the panel uses, so no string is built ad hoc in a component. */
+    const api = {
+      /**
+       * @param {{ range?: string, groups?: string[], ids?: string[], limit?: number, force?: boolean, signal?: AbortSignal }} [options] - request.
+       * @returns {Promise<object>} response.
+       */
+      overview(options = {}) {
+        const query = []
+        if (options.range !== undefined) query.push(`range=${encodeURIComponent(options.range)}`)
+        if (options.groups !== undefined && options.groups.length > 0) query.push(`groups=${encodeURIComponent(options.groups.join(','))}`)
+        if (options.ids !== undefined && options.ids.length > 0) query.push(`ids=${encodeURIComponent(options.ids.join(','))}`)
+        if (options.limit !== undefined) query.push(`limit=${options.limit}`)
+        if (options.force === true) query.push('force=1')
+        return request(`/overview${query.length === 0 ? '' : `?${query.join('&')}`}`, { signal: options.signal })
+      },
+      /**
+       * @param {object} options - request.
+       * @returns {Promise<object>} response.
+       */
+      series(options) {
+        const query = [`indicator=${encodeURIComponent(options.indicator)}`]
+        if (options.range !== undefined) query.push(`range=${encodeURIComponent(options.range)}`)
+        if (options.transform !== undefined) query.push(`transform=${encodeURIComponent(options.transform)}`)
+        if (options.compareWith !== undefined) query.push(`compareWith=${encodeURIComponent(options.compareWith)}`)
+        if (options.freq !== undefined) query.push(`freq=${encodeURIComponent(options.freq)}`)
+        return request(`/series?${query.join('&')}`, { signal: options.signal })
+      },
+      /**
+       * @param {AbortSignal} [signal] - cancellation.
+       * @returns {Promise<object>} response.
+       */
+      watchlist(signal) {
+        return request('/watchlist', { signal })
+      },
+      /**
+       * @param {object} body - action payload.
+       * @param {AbortSignal} [signal] - cancellation.
+       * @returns {Promise<object>} response.
+       */
+      watchlistAction(body, signal) {
+        return request('/watchlist', { method: 'POST', body, signal })
+      },
+      /**
+       * @param {string} query - search text.
+       * @param {AbortSignal} [signal] - cancellation.
+       * @returns {Promise<object>} response.
+       */
+      search(query, signal) {
+        return request(`/catalog/search?q=${encodeURIComponent(query)}`, { signal })
+      },
+      /**
+       * @param {object} body - '{ indicator, range }'.
+       * @param {object} handlers - SSE handlers.
+       * @returns {Promise<object>} completion.
+       */
+      explain(body, handlers = {}) {
+        return stream('/ai/explain', { body: { ...body, stream: true }, ...handlers })
+      },
+      /**
+       * @param {object} body - '{ range, indicators }'.
+       * @param {object} handlers - SSE handlers.
+       * @returns {Promise<object>} completion.
+       */
+      summary(body, handlers = {}) {
+        return stream('/ai/summary', { body: { ...body, stream: true }, ...handlers })
+      },
+      /**
+       * @param {object} body - '{ question, range }'.
+       * @param {object} handlers - SSE handlers.
+       * @returns {Promise<object>} completion.
+       */
+      ask(body, handlers = {}) {
+        return stream('/ai/ask', { body: { ...body, stream: true }, ...handlers })
+      },
+      /**
+       * @param {object} body - '{ text }'.
+       * @param {AbortSignal} [signal] - cancellation.
+       * @returns {Promise<object>} response.
+       */
+      propose(body, signal) {
+        return request('/ai/propose', { method: 'POST', body, signal })
+      },
+      /**
+       * Open (or continue) an independent DSH session about one indicator.
+       *
+       * @param {{ indicator?: string, group?: string, noteworthy?: string[], question?: string, range?: string, mode?: 'new'|'topic', limit?: number }} body - request; exactly one of 'indicator'/'group' names the subject.
+       * @param {AbortSignal} [signal] - cancellation.
+       * @returns {Promise<object>} response with `{ sessionId, reply, pending, mode }`.
+       */
+      discuss(body, signal) {
+        // `wait: false` returns as soon as the session exists and the question is
+        // queued: the answer streams in the session the GUI switches to, so the
+        // panel never blocks for the length of a model turn.
+        return request('/discuss', { method: 'POST', body: { wait: false, ...body }, signal, timeoutMs: 30_000 })
+      },
+      /**
+       * Analyse the panel as a whole, or one group of it.
+       *
+       * @param {{ range?: string, groups?: string[] }} body - request.
+       * @param {AbortSignal} [signal] - cancellation.
+       * @returns {Promise<object>} response with `{ markdown, mode, scope, indicators, noteworthy }`.
+       */
+      aiOverview(body, signal) {
+        return request('/ai/overview', { method: 'POST', body, signal, timeoutMs: 120_000 })
+      },
+      /**
+       * Open a session in the plugin workspace to add a data source.
+       *
+       * @param {{ request?: string, reasons?: string[], question?: string }} body - request.
+       * @param {AbortSignal} [signal] - cancellation.
+       * @returns {Promise<object>} response with `{ sessionId }`.
+       */
+      iterate(body, signal) {
+        return request('/iterate', { method: 'POST', body, signal, timeoutMs: 30_000 })
+      },
+      /**
+       * Collect the answer a discussion session produced.
+       *
+       * Opening a discussion returns before the model finishes, so the panel asks
+       * for the text on a short poll instead of leaving its block empty while the
+       * answer streams in a session the reader has to go and find.
+       *
+       * @param {string} sessionId - session id from `discuss()`.
+       * @param {AbortSignal} [signal] - cancellation.
+       * @returns {Promise<object>} response with `{ status, reply?, error? }`.
+       */
+      discussAnswer(sessionId, signal) {
+        return request(`/discuss/answer?session=${encodeURIComponent(sessionId)}`, { signal, timeoutMs: 10_000 })
+      },
+      /**
+       * The mount's effective configuration, for the settings screen.
+       *
+       * @param {AbortSignal} [signal] - cancellation.
+       * @returns {Promise<object>} response.
+       */
+      settings(signal) {
+        return request('/settings', { signal, timeoutMs: 10_000 })
+      },
+      /**
+       * @param {AbortSignal} [signal] - cancellation.
+       * @returns {Promise<object>} response.
+       */
+      health({ probe, ids, range } = {}, signal) {
+        const query = []
+        if (probe === true) query.push('probe=1')
+        if (Array.isArray(ids) && ids.length > 0) query.push(`ids=${encodeURIComponent(ids.join(','))}`)
+        if (range !== undefined) query.push(`range=${encodeURIComponent(range)}`)
+        // A probe re-fetches upstream series, so it needs a longer budget than a
+        // cached read.
+        return request(`/health${query.length === 0 ? '' : `?${query.join('&')}`}`, { signal, timeoutMs: probe === true ? 60_000 : REQUEST_TIMEOUT_MS })
+      },
+    }
+
+    // ── src/client/store.js ─────────────────────────────────────────
+    /**
+     * The panel's module-level store (docs/05 §2).
+     *
+     * State lives here rather than in component state because the overlay entry can
+     * be remounted at any time: facts must belong to whoever can also close them. The
+     * store is a plain observable with a tiny subscription API, which makes it
+     * testable without React.
+     *
+     * @module client/store
+     */
+
+    /** The initial state. A single object keeps snapshots comparable by identity. */
+    const INITIAL_STATE = {
+      open: false,
+      tab: 'today',
+      range: '1Y',
+      groups: ['US', 'CN', 'GLOBAL', 'CUSTOM'],
+      status: 'idle',
+      lastUpdatedAt: undefined,
+      error: undefined,
+      overview: undefined,
+      detail: undefined,
+      detailLoading: false,
+      // Bar size for OHLC sources: 'day' | 'week' | 'month'.
+      barSize: 'day',
+      ai: { mode: 'deterministic', text: '', streaming: false, result: undefined, error: undefined },
+      discussing: false,
+      discussingId: undefined,
+      discussError: undefined,
+      discussSession: undefined,
+      discussAnswer: undefined,
+      discussPending: false,
+      /** The question this discussion's turn asked, and whether the panel asked it. */
+      discussQuestion: undefined,
+      discussAutoQuestion: false,
+      /** Multi-select: indicator ids picked for one combined analysis. */
+      selected: [],
+      selectionLoading: false,
+      watchlist: [],
+      // Filled from '/settings' + '/health' when the settings tab opens; the panel
+      // shows a loading line until then rather than invented defaults.
+      settings: { sources: [] },
+      health: undefined,
+      /** Connection-test state for the settings screen. */
+      testing: false,
+      testingId: undefined,
+      testResult: undefined,
+      unreachable: false,
+    }
+
+    /**
+     * Create a store.
+     *
+     * @param {object} [initial] - initial state overrides.
+     * @returns {object} store handle.
+     */
+    function createStore(initial = {}) {
+      let state = { ...INITIAL_STATE, ...initial }
+      /** @type {Set<(state: object, prev: object) => void>} */
+      const listeners = new Set()
+
+      /**
+       * Subscribe to state changes.
+       *
+       * @param {(state: object, prev: object) => void} listener - listener.
+       * @returns {() => void} unsubscribe.
+       */
+      function subscribe(listener) {
+        listeners.add(listener)
+        return () => listeners.delete(listener)
+      }
+
+      /**
+       * Read the current state (stable identity between changes).
+       *
+       * @returns {object} state.
+       */
+      function getState() {
+        return state
+      }
+
+      /**
+       * Apply a patch (object or updater) and notify listeners.
+       *
+       * @param {object|((state: object) => object)} patch - patch.
+       * @returns {object} the new state.
+       */
+      function setState(patch) {
+        const prev = state
+        const next = typeof patch === 'function' ? patch(state) : patch
+        if (next === undefined || next === null) return state
+        // A no-op patch must not notify: components would re-render for nothing.
+        const changed = Object.keys(next).some((key) => next[key] !== state[key])
+        if (!changed) return state
+        state = { ...state, ...next }
+        for (const listener of listeners) listener(state, prev)
+        return state
+      }
+
+      return { getState, setState, subscribe, reset: () => setState({ ...INITIAL_STATE }) }
+    }
+
+    /**
+     * Merge a fresh overview payload into the state.
+     *
+     * @param {object} state - current state.
+     * @param {object} payload - '/overview' response.
+     * @returns {object} state patch.
+     */
+    function applyOverview(state, payload) {
+      return {
+        status: 'ready',
+        overview: payload,
+        lastUpdatedAt: payload.generatedAt,
+        error: undefined,
+        unreachable: false,
+      }
+    }
+
+    /**
+     * Merge a fresh detail payload into the state.
+     *
+     * @param {object} state - current state.
+     * @param {object} payload - '/series' response.
+     * @returns {object} state patch.
+     */
+    function applyDetail(state, payload) {
+      return { detail: payload, detailLoading: false, error: undefined }
+    }
+
+    /**
+     * Forget everything that belonged to the *previous* indicator's answer.
+     *
+     * The AI block, the question box and a discussion are all about one indicator.
+     * Keeping them when the reader selects another card showed one indicator's
+     * answer (and its "open in a new session" note) under a different indicator's
+     * numbers, which reads as the panel answering the wrong question.
+     *
+     * @param {object} state - current state.
+     * @param {string|undefined} indicatorId - the indicator now selected.
+     * @returns {object} state patch.
+     */
+    function applyIndicatorChange(state, indicatorId) {
+      if (state.detail?.indicatorId === indicatorId) return {}
+      return {
+        indicatorId,
+        ai: { ...INITIAL_STATE.ai },
+        discussing: false,
+        discussingId: undefined,
+        discussError: undefined,
+        discussSession: undefined,
+        discussAnswer: undefined,
+        discussPending: false,
+        discussQuestion: undefined,
+        discussAutoQuestion: false,
+      }
+    }
+
+    /**
+     * Merge an SSE text chunk into the streaming answer.
+     *
+     * @param {object} state - current state.
+     * @param {string} chunk - text chunk.
+     * @returns {object} state patch.
+     */
+    function applyAiText(state, chunk) {
+      return { ai: { ...state.ai, streaming: true, text: `${state.ai.text}${chunk}` } }
+    }
+
+    /**
+     * Merge a finished AI result.
+     *
+     * @param {object} state - current state.
+     * @param {object} result - validated 'AiResult'.
+     * @returns {object} state patch.
+     */
+    function applyAiResult(state, result) {
+      return {
+        ai: {
+          ...state.ai,
+          streaming: false,
+          result,
+          text: result?.markdown ?? state.ai.text,
+          mode: result?.mode ?? state.ai.mode,
+          error: undefined,
+        },
+      }
+    }
+
+    /**
+     * Record a failed request.
+     *
+     * @param {object} state - current state.
+     * @param {object} error - structured error.
+     * @param {{ unreachable?: boolean }} [options] - options.
+     * @returns {object} state patch.
+     */
+    function applyError(state, error, { unreachable = false } = {}) {
+      return {
+        status: unreachable ? 'unreachable' : 'error',
+        error,
+        unreachable,
+        detailLoading: false,
+      // Bar size for OHLC sources: 'day' | 'week' | 'month'.
+      barSize: 'day',
+        ai: { ...state.ai, streaming: false, error: undefined },
+      }
+    }
+
+    /**
+     * Whether the panel should show its "some sources failed" banner.
+     *
+     * @param {object} state - state.
+     * @returns {boolean} banner visibility.
+     */
+    function shouldShowDegradedBanner(state) {
+      if (state.overview === undefined) return false
+      return state.overview.degraded === true || (state.overview.errors ?? []).length > 0
+    }
+
+    // ── src/client/components.js ─────────────────────────────────────────
+    /**
+     * 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. */
+    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.
+     */
+    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.
+     */
+    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 }
+    }
+
+    // ── src/client/index.js ─────────────────────────────────────────
+    /**
+     * Browser-half entry (docs/09 §3).
+     *
+     * Registers one 'shell.overlay' entry that manages its own open/close state, so
+     * the plugin never competes with the shipped overlay occupants. Every side effect
+     * (stylesheet, subscription) is owned by the plugin context and removed on
+     * unload.
+     *
+     * @module client/index
+     */
+
+
+
+
+    /** Services the client half needs. 'slots' is provided by the shipped runtime. */
+    const inject = ['slots']
+
+    /** The slot this plugin contributes to. */
+    const SLOT = 'shell.overlay'
+
+    /** A no-op React stand-in used only for the module-scope component bindings. */
+    const PLACEHOLDER_REACT = { createElement: () => null, Fragment: null, useState: (v) => [v, () => {}], useEffect: () => {}, useMemo: (f) => f(), useRef: (v) => ({ current: v }) }
+
+    /**
+     * The shared helpers the components need. The bundler concatenates the real
+     * implementations into this scope before this module, so the names resolve at
+     * call time; declaring the map keeps the dependency explicit.
+     */
+    const SHARED_FORMAT = {
+      buildLinePath,
+      buildBarRects,
+      buildSparklineShape,
+      buildXAxis,
+      buildYAxis,
+      buildZeroLine,
+      buildTimeAxis,
+      buildCandles,
+      buildCrosshair,
+      buildReferenceLines,
+      nearestIndex,
+      valueDomain,
+      hasOhlc,
+      linearScale,
+      niceTicks,
+      formatValue,
+      formatChange,
+      formatAge,
+      changeColor,
+      statusDot,
+      metricTooltip,
+      truncate,
+    }
+
+    /** Registration id inside the overlay list. */
+    const ENTRY_ID = 'show-me-data'
+
+    /**
+     * Build the module-level store and components once per page.
+     *
+     * @param {object} React - React instance from the loader.
+     * @param {object} format - the shared 'core/format' plus chart helpers.
+     * @param {{ locale?: string }} [options] - options.
+     * @returns {{ store: object, components: object, copy: object }} panel runtime.
+     */
+    function createPanelRuntime(React, format, options = {}) {
+      const store = createStore()
+      const copy = copyFor(options.locale)
+      const components = createComponents(React, { store, api, copy, format, sessions: options.sessions, applyIndicatorChange })
+      return { store, components, copy }
+    }
+
+    /**
+     * Build the panel's components for one React instance.
+     *
+     * Exported because the structure tests render components with a React stub; the
+     * runtime path calls it with the real React it receives.
+     *
+     * @param {object} React - React instance.
+     * @param {{ store?: object, copy?: object, api?: object, format?: object }} [deps] - overrides.
+     * @returns {object} components plus the store and copy table they use.
+     */
+    function initPanel(React, deps = {}) {
+      const store = deps.store ?? createStore()
+      const copy = deps.copy ?? copyFor('zh')
+      const components = createComponents(React, {
+        store,
+        api: deps.api ?? api,
+        copy,
+        format: deps.format ?? SHARED_FORMAT,
+        sessions: deps.sessions,
+        applyIndicatorChange: deps.applyIndicatorChange ?? applyIndicatorChange,
+        // Injectable so a test can drive the discussion poll to completion instead of
+        // leaving a timer that keeps the process alive.
+        pollIntervalMs: deps.pollIntervalMs,
+        pollTimeoutMs: deps.pollTimeoutMs,
+      })
+      // The store helpers ride along so the structure tests can exercise the state
+      // transitions (not just the render output) of one React instance.
+      return { ...components, store, copy, applyIndicatorChange, INITIAL_STATE }
+    }
+
+    /** Components for the shared-format placeholder React, so '__test' has bindings. */
+    const PANEL = initPanel(PLACEHOLDER_REACT)
+    const {
+      DataRadarOverlay,
+      MetricCard,
+      NoteworthyList,
+      Chart,
+      StatsStrip,
+      AiPanel,
+      DetailDrawer,
+      SettingsTab,
+      AddIndicatorTab,
+      Sparkline,
+    } = PANEL
+
+    /**
+     * Mount the browser half.
+     *
+     * @param {object} ctx - client plugin context.
+     * @param {object} [deps] - injectable dependencies (tests pass stubs).
+     * @param {object} [deps.React] - React instance.
+     * @param {object} [deps.format] - formatting helpers.
+     * @param {Document} [deps.document] - document (browser only).
+     * @returns {void}
+     */
+    function apply(ctx, deps = {}) {
+      const React = deps.React ?? require('react')
+      // The shared core modules are concatenated into this same scope by the
+      // bundler, so their symbols are referenced directly rather than re-imported.
+      const format = deps.format ?? {
+        buildLinePath,
+        buildBarRects,
+        buildSparklineShape,
+        buildXAxis,
+        buildYAxis,
+        buildZeroLine,
+        buildTimeAxis,
+        buildCandles,
+        buildCrosshair,
+        buildReferenceLines,
+        nearestIndex,
+        valueDomain,
+        hasOhlc,
+        linearScale,
+        niceTicks,
+        formatValue,
+        formatChange,
+        formatAge,
+        changeColor,
+        statusDot,
+        metricTooltip,
+        truncate,
+      }
+      const runtime = createPanelRuntime(React, format, {
+        locale: typeof navigator === 'undefined' ? undefined : navigator.language,
+        sessions: ctx.get !== undefined ? ctx.get('sessions') : undefined,
+      })
+      const doc = deps.document ?? (typeof document === 'undefined' ? undefined : document)
+
+      if (doc !== undefined) {
+        ctx.effect(() => insertStyles(doc), 'show-me-data: styles')
+      }
+
+      ctx.slots.inject(SLOT, () =>
+        ctx.slots.register({ name: SLOT, id: ENTRY_ID, order: 30 }, runtime.components.DataRadarOverlay),
+      )
+    }
+
+    // Symbols exposed for tests and for the shell to introspect.
+    const __test = { MISSING_MARKERS, MIN_STDDEV_N, MIN_PERCENTILE_N, parseNumber, round, sortDedupe, ohlcOf, hasOhlc, mom, yoy, movingAverage, diff, stdDev, percentile, slope, zScoreLatestChange, missingCount, FREQ_CADENCE_DAYS, stats, percentileRank, applyTransform, transformSuffix, clamp, linearScale, niceTicks, extent, thin, box, coord, runs, buildLinePath, buildAreaPath, buildSparkline, buildSparklineShape, BODY_RATIO, MAX_BODY_PX, valueDomain, buildCandles, nearestIndex, indexToX, buildCrosshair, buildReferenceLines, valueAxis, buildBarRects, buildZeroLine, buildYAxis, buildEvenTicks, buildXAxis, formatAxisDate, formatSpanDate, buildTimeAxis, COLORS, formatValue, formatChange, formatAge, changeColor, statusDot, formatDate, metricTooltip, truncate, COPY, COPY_EN, GROUP_LABELS, copyFor, REQUEST_TIMEOUT_MS, API_ROOT, request, stream, parseSseFrame, api, INITIAL_STATE, createStore, applyOverview, applyDetail, applyIndicatorChange, applyAiText, applyAiResult, applyError, shouldShowDegradedBanner, DISCUSSION_POLL_INTERVAL_MS, DISCUSSION_POLL_MS, PANEL_CSS, insertStyles, createComponents, inject, SLOT, PLACEHOLDER_REACT, SHARED_FORMAT, ENTRY_ID, createPanelRuntime, initPanel, PANEL, apply, DataRadarOverlay, MetricCard, NoteworthyList, Chart, StatsStrip, AiPanel, DetailDrawer, SettingsTab, AddIndicatorTab, Sparkline }
+    exports.apply = apply
+    exports.inject = inject
+    exports.__test = __test
+    return module.exports
+  },
+})