@sensiblestats/widget-react 0.11.0 → 0.13.0

package/dist/index.js

@@ -28,6 +28,19 @@ var STRINGS = {
     oddsShortened: "shortened",
     oddsDrifted: "drifted",
     updatedLabel: "updated",
+    priceMovement: "Price movement",
+    openingLabel: "Opening",
+    currentLabel: "Current",
+    movementWindow: (hours) => hours % 24 === 0 ? `Last ${hours / 24}d` : `Last ${hours}h`,
+    notEnoughHistory: "No price history recorded yet for this selection.",
+    singlePricePoint: "Only one price recorded so far for this selection.",
+    selectionSuspended: "This selection is not currently available to bet.",
+    excludedSuspended: (n) => `${n} suspended price${n === 1 ? "" : "s"} excluded from this chart.`,
+    chartTimeLabel: (ms) => new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" }).format(new Date(ms)),
+    chartAria: (opening, current, direction, hours) => {
+      const span = hours % 24 === 0 ? `${hours / 24} day${hours / 24 === 1 ? "" : "s"}` : `${hours} hour${hours === 1 ? "" : "s"}`;
+      return `Price movement over the last ${span}: opened at ${opening}, currently ${current}, ${direction}.`;
+    },
     inSlip: "In slip",
     slipAdded: (n) => n === void 0 ? "Added to slip" : `Added to slip (${n} selection${n === 1 ? "" : "s"})`,
     slipDuplicate: "Already in your slip",
@@ -61,6 +74,19 @@ var STRINGS = {
     oddsShortened: "d\xFC\u015Ft\xFC",
     oddsDrifted: "y\xFCkseldi",
     updatedLabel: "g\xFCncellendi",
+    priceMovement: "Oran hareketi",
+    openingLabel: "A\xE7\u0131l\u0131\u015F",
+    currentLabel: "G\xFCncel",
+    movementWindow: (hours) => hours % 24 === 0 ? `Son ${hours / 24} g\xFCn` : `Son ${hours} saat`,
+    notEnoughHistory: "Bu se\xE7im i\xE7in hen\xFCz oran ge\xE7mi\u015Fi kaydedilmedi.",
+    singlePricePoint: "Bu se\xE7im i\xE7in \u015Fimdiye kadar yaln\u0131zca bir fiyat kaydedildi.",
+    selectionSuspended: "Bu se\xE7im \u015Fu anda bahse kapal\u0131.",
+    excludedSuspended: (n) => `${n} ask\u0131ya al\u0131nm\u0131\u015F fiyat bu grafikten hari\xE7 tutuldu.`,
+    chartTimeLabel: (ms) => new Intl.DateTimeFormat("tr-TR", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" }).format(new Date(ms)),
+    chartAria: (opening, current, direction, hours) => {
+      const span = hours % 24 === 0 ? `${hours / 24} g\xFCn` : `${hours} saat`;
+      return `Son ${span} i\xE7indeki oran hareketi: ${opening} ile a\xE7\u0131ld\u0131, \u015Fu anda ${current}, ${direction}.`;
+    },
     inSlip: "Kuponda",
     slipAdded: (n) => n === void 0 ? "Kupona eklendi" : `Kupona eklendi (${n} se\xE7im)`,
     slipDuplicate: "Bu se\xE7im kuponunuzda zaten var",
@@ -110,6 +136,16 @@ function normalizeUi(cfg) {
     oddsShortened: strings.oddsShortened,
     oddsDrifted: strings.oddsDrifted,
     updatedLabel: strings.updatedLabel,
+    priceMovement: strings.priceMovement,
+    openingLabel: strings.openingLabel,
+    currentLabel: strings.currentLabel,
+    movementWindow: strings.movementWindow,
+    notEnoughHistory: strings.notEnoughHistory,
+    singlePricePoint: strings.singlePricePoint,
+    selectionSuspended: strings.selectionSuspended,
+    excludedSuspended: strings.excludedSuspended,
+    chartTimeLabel: strings.chartTimeLabel,
+    chartAria: strings.chartAria,
     addToSlip: strings.addToSlip,
     inSlip: strings.inSlip,
     slipAdded: strings.slipAdded,
@@ -148,6 +184,54 @@ import { WidgetSdkError as WidgetSdkError2 } from "@sensiblestats/widget-sdk";
 // src/reducer.ts
 import "@sensiblestats/widget-sdk";
 
+// src/chart.ts
+var CHART_VIEW_W = 320;
+var CHART_VIEW_H = 140;
+var PLOT_X0 = 40;
+var PLOT_X1 = 312;
+var PLOT_Y0 = 10;
+var PLOT_Y1 = 110;
+var MARKER_MAX_POINTS = 8;
+var FLAT_DOMAIN_PAD = 0.05;
+var round2 = (n) => Math.round(n * 100) / 100;
+function projectSeries(samples) {
+  if (samples.length < 2) return null;
+  const tMin = samples[0].atMs;
+  const tMax = samples[samples.length - 1].atMs;
+  if (tMax <= tMin) return null;
+  const prices = samples.map((s) => s.price);
+  const pMin = Math.min(...prices);
+  const pMax = Math.max(...prices);
+  let yMin;
+  let yMax;
+  if (pMax === pMin) {
+    yMin = pMin - FLAT_DOMAIN_PAD;
+    yMax = pMax + FLAT_DOMAIN_PAD;
+  } else {
+    const pad = (pMax - pMin) * 0.1;
+    yMin = pMin - pad;
+    yMax = pMax + pad;
+  }
+  const x = (atMs) => round2(PLOT_X0 + (atMs - tMin) / (tMax - tMin) * (PLOT_X1 - PLOT_X0));
+  const y = (price) => round2(PLOT_Y1 - (price - yMin) / (yMax - yMin) * (PLOT_Y1 - PLOT_Y0));
+  const projected = samples.map((s) => ({ x: x(s.atMs), y: y(s.price) }));
+  const path = projected.map((p, i) => `${i === 0 ? "M" : "L"}${p.x} ${p.y}`).join(" ");
+  return {
+    path,
+    markers: samples.length <= MARKER_MAX_POINTS ? projected : [],
+    // The real extremes, never the padded bounds: a gridline label is a price, and the padded
+    // bounds are prices nobody was ever offered. A flat series has one real extreme, not two —
+    // two identical gridlines would collide on both React key and rendered text.
+    gridlines: pMax === pMin ? [{ y: y(pMax), price: pMax }] : [
+      { y: y(pMax), price: pMax },
+      { y: y(pMin), price: pMin }
+    ],
+    viewBox: `0 0 ${CHART_VIEW_W} ${CHART_VIEW_H}`,
+    startMs: tMin,
+    endMs: tMax
+  };
+}
+
 // src/model.ts
 function str(v) {
   return typeof v === "string" && v.length > 0 ? v : void 0;
@@ -213,6 +297,9 @@ function toInsightVM(insight) {
   const fixture = home && away ? `${home} vs ${away}` : void 0;
   const competition = str(insight.competitionName);
   const scopes = Array.isArray(insight.scopes) ? insight.scopes.map((s) => ({ key: str(s.key), label: str(s.label), stats: readStatCells(s.stats) })).filter((s) => !!s.key && !!s.label) : void 0;
+  const previousValue = insight.odds?.previousValue;
+  const previous = typeof previousValue === "number" && Number.isFinite(previousValue) ? previousValue : void 0;
+  const direction = insight.odds?.movementDirection === "shortened" || insight.odds?.movementDirection === "drifted" ? insight.odds.movementDirection : void 0;
   return {
     id: str(insight.insightId) ?? `${str(insight.ruleId) ?? "insight"}:${num(insight.matchId) ?? ""}`,
     market,
@@ -232,7 +319,9 @@ function toInsightVM(insight) {
     matchOddsId,
     addToSlipEnabled: insight.addToSlipEnabled === true,
     oddsDecimal: typeof oddsValue === "number" && Number.isFinite(oddsValue) ? oddsValue : void 0,
-    quotedAtUtc: str(insight.odds?.quotedAtUtc)
+    quotedAtUtc: str(insight.odds?.quotedAtUtc),
+    previousOdds: previous !== void 0 && direction !== void 0 ? previous.toFixed(2) : void 0,
+    movementDirection: previous !== void 0 && direction !== void 0 ? direction : void 0
   };
 }
 function toSlipSelection(vm, conversationId) {
@@ -285,6 +374,41 @@ function toMarketOddsVM(card) {
     addToSlipEnabled: card.addToSlipEnabled === true
   };
 }
+function toOddsMovementVM(card) {
+  const raw = Array.isArray(card.points) ? card.points : [];
+  const samples = [];
+  for (const p of raw) {
+    const price = typeof p.price === "number" && Number.isFinite(p.price) ? p.price : void 0;
+    const atMs = typeof p.atUtc === "string" ? Date.parse(p.atUtc) : NaN;
+    if (price === void 0 || Number.isNaN(atMs)) continue;
+    samples.push({ atMs, price });
+  }
+  samples.sort((a, b) => a.atMs - b.atMs);
+  const asNumber = (v) => typeof v === "number" && Number.isFinite(v) ? v : void 0;
+  const opening = asNumber(card.openingPrice);
+  const current = asNumber(card.currentPrice);
+  const home = str(card.homeTeamName);
+  const away = str(card.awayTeamName);
+  const selection = [str(card.selectionLabel), str(card.line)].filter(Boolean).join(" ");
+  const bookmakerId = typeof card.bookmakerId === "number" ? card.bookmakerId : "";
+  return {
+    id: `${typeof card.matchId === "number" ? card.matchId : 0}:${str(card.marketDeveloperName) ?? ""}:${selection}:${bookmakerId}`,
+    market: str(card.marketLabel) ?? str(card.marketDeveloperName) ?? "",
+    selection,
+    fixture: home && away ? `${home} vs ${away}` : void 0,
+    competition: str(card.competitionName),
+    bookmaker: str(card.bookmakerName),
+    opening: opening !== void 0 ? opening.toFixed(2) : "",
+    current: current !== void 0 ? current.toFixed(2) : "",
+    direction: card.movementDirection === "shortened" || card.movementDirection === "drifted" ? card.movementDirection : void 0,
+    windowHours: asNumber(card.windowHours) ?? 0,
+    excludedCount: asNumber(card.excludedSuspendedCount) ?? 0,
+    isSuspended: card.isSuspended === true,
+    disclaimer: str(card.disclaimer),
+    geometry: projectSeries(samples),
+    observationCount: samples.length
+  };
+}
 function marketOddsRowToSlipSelection(vm, row, conversationId) {
   if (row.matchOddsId === void 0 || row.oddsDecimal === void 0) return null;
   const selection = { matchOddsId: row.matchOddsId, matchId: vm.matchId, oddsDecimal: row.oddsDecimal };
@@ -325,6 +449,8 @@ function applyEvent(state, event) {
       return { ...state, messages: mapActive(state, (t) => ({ ...t, insights: [...t.insights, toInsightVM(event.data.insight)] })) };
     case "market_odds":
       return { ...state, messages: mapActive(state, (t) => ({ ...t, marketOdds: [...t.marketOdds, toMarketOddsVM(event.data.card)] })) };
+    case "odds_movement":
+      return { ...state, messages: mapActive(state, (t) => ({ ...t, oddsMovement: [...t.oddsMovement, toOddsMovementVM(event.data.card)] })) };
     case "intent_chip": {
       const chip = toChipVM(event.data.intent);
       return chip ? { ...state, starters: [...state.starters, chip] } : state;
@@ -360,11 +486,11 @@ function reducer(state, action) {
       return { ...state, isOpen: false, isStreaming: false, status: null, actionsLoading: false };
     case "USER_SENT": {
       const user = { role: "user", id: action.userId, text: action.displayText ?? action.input.message };
-      const assistant = { role: "assistant", id: action.assistantId, text: "", cards: [], actions: [], insights: [], marketOdds: [], done: false };
+      const assistant = { role: "assistant", id: action.assistantId, text: "", cards: [], actions: [], insights: [], marketOdds: [], oddsMovement: [], done: false };
       return { ...state, messages: [...state.messages, user, assistant], isStreaming: true, status: null, actionsLoading: false, starters: [], error: null, lastUserInput: action.input, lastDisplayText: action.displayText ?? null };
     }
     case "GREETING_SENT": {
-      const assistant = { role: "assistant", id: action.assistantId, text: "", cards: [], actions: [], insights: [], marketOdds: [], done: false, isGreeting: true };
+      const assistant = { role: "assistant", id: action.assistantId, text: "", cards: [], actions: [], insights: [], marketOdds: [], oddsMovement: [], done: false, isGreeting: true };
       return { ...state, messages: [...state.messages, assistant], isStreaming: true, status: null, error: null };
     }
     case "DISMISS_POPUP":
@@ -721,20 +847,41 @@ function AddToSlipButton({ it, slip, ui }) {
   return /* @__PURE__ */ jsx8(SlipButton, { selection, shownOdds: it.odds ?? "", marketName: it.market, slip, ui });
 }
 
-// src/components/BettingInsightList.tsx
+// src/components/OddsMovementBadge.tsx
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function OddsMovementBadge({
+  previous,
+  current,
+  direction,
+  ui
+}) {
+  if (previous === void 0 || direction === void 0) return null;
+  const directionWord2 = direction === "shortened" ? ui?.oddsShortened ?? "shortened" : ui?.oddsDrifted ?? "drifted";
+  const label = ui?.oddsMoved?.(previous, current, directionWord2) ?? `was ${previous}, now ${current}, ${directionWord2}`;
+  return (
+    // Strikethrough is invisible to screen readers, so the whole was/now/direction sentence rides
+    // on one aria-label and the visual glyphs are hidden from the accessibility tree.
+    /* @__PURE__ */ jsxs6("span", { className: "ss-w-move", role: "img", "aria-label": label, children: [
+      /* @__PURE__ */ jsx9("span", { className: "ss-w-move-prev", "aria-hidden": "true", children: previous }),
+      /* @__PURE__ */ jsx9("span", { className: "ss-w-move-arrow", "aria-hidden": "true", children: direction === "shortened" ? "\u25BC" : "\u25B2" })
+    ] })
+  );
+}
+
+// src/components/BettingInsightList.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function StatRows2({ stats }) {
-  return /* @__PURE__ */ jsx9("div", { className: "ss-w-bi-rows", children: stats.map((s) => /* @__PURE__ */ jsxs6("div", { className: "ss-w-bi-row", children: [
-    /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-row-lbl", children: s.label }),
-    /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-row-num", children: s.value })
+  return /* @__PURE__ */ jsx10("div", { className: "ss-w-bi-rows", children: stats.map((s) => /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-row", children: [
+    /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-row-lbl", children: s.label }),
+    /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-row-num", children: s.value })
   ] }, `${s.label}:${s.value}`)) });
 }
 function ScopedStats({ scopes }) {
   const [active, setActive] = useState3(0);
   const current = scopes[active] ?? scopes[0] ?? { key: "", label: "", stats: [] };
-  return /* @__PURE__ */ jsxs6("div", { className: "ss-w-bi-scoped", children: [
-    /* @__PURE__ */ jsx9("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ jsx9("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
-    /* @__PURE__ */ jsx9(StatRows2, { stats: current.stats }, current.key)
+  return /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-scoped", children: [
+    /* @__PURE__ */ jsx10("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ jsx10("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
+    /* @__PURE__ */ jsx10(StatRows2, { stats: current.stats }, current.key)
   ] });
 }
 function StatsDisclosure({ it, ui }) {
@@ -742,8 +889,8 @@ function StatsDisclosure({ it, ui }) {
   const hasScopes = !!it.scopes && it.scopes.length >= 2;
   const hasStats = hasScopes || it.stats.length > 0;
   if (!hasStats) return null;
-  return /* @__PURE__ */ jsxs6("div", { className: "ss-w-bi-stats", children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-stats", children: [
+    /* @__PURE__ */ jsxs7(
       "button",
       {
         type: "button",
@@ -751,131 +898,189 @@ function StatsDisclosure({ it, ui }) {
         "aria-expanded": open,
         onClick: () => setOpen((v) => !v),
         children: [
-          /* @__PURE__ */ jsx9("span", { children: open ? ui?.hideStats ?? "Hide stats" : ui?.showStats ?? "Show stats" }),
-          /* @__PURE__ */ jsx9("span", { className: `ss-w-bi-chev${open ? " ss-w-bi-chev-up" : ""}`, "aria-hidden": "true" })
+          /* @__PURE__ */ jsx10("span", { children: open ? ui?.hideStats ?? "Hide stats" : ui?.showStats ?? "Show stats" }),
+          /* @__PURE__ */ jsx10("span", { className: `ss-w-bi-chev${open ? " ss-w-bi-chev-up" : ""}`, "aria-hidden": "true" })
         ]
       }
     ),
-    open ? hasScopes ? /* @__PURE__ */ jsx9(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ jsx9(StatRows2, { stats: it.stats }) : null
+    open ? hasScopes ? /* @__PURE__ */ jsx10(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ jsx10(StatRows2, { stats: it.stats }) : null
   ] });
 }
 function InsightCard({ it, ui, slip }) {
   const live = it.isLive || it.phase === "live";
-  return /* @__PURE__ */ jsxs6("div", { className: "ss-w-binsight", children: [
-    live ? /* @__PURE__ */ jsx9("div", { className: "ss-w-bi-status", children: /* @__PURE__ */ jsxs6("span", { className: "ss-w-bi-live", children: [
-      /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
+  return /* @__PURE__ */ jsxs7("div", { className: "ss-w-binsight", children: [
+    live ? /* @__PURE__ */ jsx10("div", { className: "ss-w-bi-status", children: /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-live", children: [
+      /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
       ui?.liveLabel ?? "Live"
     ] }) }) : null,
-    /* @__PURE__ */ jsxs6("div", { className: "ss-w-bi-head", children: [
-      /* @__PURE__ */ jsxs6("span", { className: "ss-w-bi-mkt", children: [
-        /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-market", children: it.market }),
-        it.selection ? /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-sel", children: it.selection }) : null,
-        it.fixture || it.competition ? /* @__PURE__ */ jsxs6("span", { className: "ss-w-bi-match", children: [
-          it.fixture ? /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-fixture", children: it.fixture }) : null,
-          it.competition ? /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-comp", children: it.competition }) : null
+    /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-head", children: [
+      /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-mkt", children: [
+        /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-market", children: it.market }),
+        it.selection ? /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-sel", children: it.selection }) : null,
+        it.fixture || it.competition ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-match", children: [
+          it.fixture ? /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-fixture", children: it.fixture }) : null,
+          it.competition ? /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-comp", children: it.competition }) : null
         ] }) : null
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "ss-w-bi-action", children: [
-        it.odds ? /* @__PURE__ */ jsxs6("span", { className: "ss-w-bi-odds", children: [
-          /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-odds-cap", children: ui?.oddsLabel ?? "Odds" }),
-          /* @__PURE__ */ jsx9("b", { children: it.odds }),
-          it.bookmaker ? /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
+      /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-action", children: [
+        it.odds ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-odds", children: [
+          /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-odds-cap", children: ui?.oddsLabel ?? "Odds" }),
+          /* @__PURE__ */ jsx10("b", { children: it.odds }),
+          /* @__PURE__ */ jsx10(OddsMovementBadge, { previous: it.previousOdds, current: it.odds, direction: it.movementDirection, ui }),
+          it.bookmaker ? /* @__PURE__ */ jsx10("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
         ] }) : null,
-        /* @__PURE__ */ jsx9(AddToSlipButton, { it, slip, ui })
+        /* @__PURE__ */ jsx10(AddToSlipButton, { it, slip, ui })
       ] })
     ] }),
-    it.text ? /* @__PURE__ */ jsx9("p", { className: "ss-w-bi-text", children: it.text }) : null,
-    /* @__PURE__ */ jsx9(StatsDisclosure, { it, ui }),
-    it.disclaimer ? /* @__PURE__ */ jsx9("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null
+    it.text ? /* @__PURE__ */ jsx10("p", { className: "ss-w-bi-text", children: it.text }) : null,
+    /* @__PURE__ */ jsx10(StatsDisclosure, { it, ui }),
+    it.disclaimer ? /* @__PURE__ */ jsx10("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null
   ] });
 }
 function BettingInsightList({ insights, ui, slip }) {
   if (!insights || insights.length === 0) return null;
-  return /* @__PURE__ */ jsx9("div", { className: "ss-w-binsights", children: insights.map((it) => /* @__PURE__ */ jsx9(InsightCard, { it, ui, slip }, it.id)) });
+  return /* @__PURE__ */ jsx10("div", { className: "ss-w-binsights", children: insights.map((it) => /* @__PURE__ */ jsx10(InsightCard, { it, ui, slip }, it.id)) });
 }
 
 // src/components/MarketOddsCardList.tsx
 import { useState as useState4 } from "react";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function OddsRow({ vm, row, ui, slip }) {
   const selection = vm.addToSlipEnabled ? marketOddsRowToSlipSelection(vm, row, slip.conversationId) : null;
-  const directionWord = row.movementDirection === "shortened" ? ui?.oddsShortened ?? "shortened" : ui?.oddsDrifted ?? "drifted";
-  const movementLabel = row.previousOdds !== void 0 ? ui?.oddsMoved?.(row.previousOdds, row.odds, directionWord) ?? `was ${row.previousOdds}, now ${row.odds}, ${directionWord}` : void 0;
-  return /* @__PURE__ */ jsxs7("div", { className: "ss-w-mo-row", children: [
-    /* @__PURE__ */ jsx10("span", { className: "ss-w-mo-sel", children: row.selection }),
-    row.previousOdds !== void 0 ? (
-      // Strikethrough is invisible to screen readers, so the whole was/now/direction sentence
-      // rides on one aria-label and the visual glyphs are hidden from the accessibility tree.
-      /* @__PURE__ */ jsxs7("span", { className: "ss-w-mo-move", role: "img", "aria-label": movementLabel, children: [
-        /* @__PURE__ */ jsx10("span", { className: "ss-w-mo-prev", "aria-hidden": "true", children: row.previousOdds }),
-        /* @__PURE__ */ jsx10("span", { className: "ss-w-mo-arrow", "aria-hidden": "true", children: row.movementDirection === "shortened" ? "\u25BC" : "\u25B2" })
-      ] })
-    ) : null,
-    /* @__PURE__ */ jsx10("span", { className: "ss-w-mo-price", children: row.odds }),
-    /* @__PURE__ */ jsx10(SlipButton, { selection, shownOdds: row.odds, marketName: vm.market, slip, ui })
+  return /* @__PURE__ */ jsxs8("div", { className: "ss-w-mo-row", children: [
+    /* @__PURE__ */ jsx11("span", { className: "ss-w-mo-sel", children: row.selection }),
+    /* @__PURE__ */ jsx11(OddsMovementBadge, { previous: row.previousOdds, current: row.odds, direction: row.movementDirection, ui }),
+    /* @__PURE__ */ jsx11("span", { className: "ss-w-mo-price", children: row.odds }),
+    /* @__PURE__ */ jsx11(SlipButton, { selection, shownOdds: row.odds, marketName: vm.market, slip, ui })
   ] });
 }
 function MarketOddsCard({ vm, ui, slip }) {
   const [open, setOpen] = useState4(false);
-  return /* @__PURE__ */ jsxs7("div", { className: "ss-w-mocard", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "ss-w-mo-head", children: [
-      /* @__PURE__ */ jsx10("span", { className: "ss-w-mo-market", children: vm.market }),
-      /* @__PURE__ */ jsx10("span", { className: "ss-w-mo-tag", children: ui?.marketPrices ?? "Market prices" })
+  return /* @__PURE__ */ jsxs8("div", { className: "ss-w-mocard", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "ss-w-mo-head", children: [
+      /* @__PURE__ */ jsx11("span", { className: "ss-w-mo-market", children: vm.market }),
+      /* @__PURE__ */ jsx11("span", { className: "ss-w-mo-tag", children: ui?.marketPrices ?? "Market prices" })
     ] }),
-    vm.fixture || vm.competition ? /* @__PURE__ */ jsxs7("div", { className: "ss-w-mo-fixture", children: [
-      vm.fixture ? /* @__PURE__ */ jsx10("span", { children: vm.fixture }) : null,
-      vm.competition ? /* @__PURE__ */ jsx10("span", { className: "ss-w-mo-comp", children: vm.competition }) : null
+    vm.fixture || vm.competition ? /* @__PURE__ */ jsxs8("div", { className: "ss-w-mo-fixture", children: [
+      vm.fixture ? /* @__PURE__ */ jsx11("span", { children: vm.fixture }) : null,
+      vm.competition ? /* @__PURE__ */ jsx11("span", { className: "ss-w-mo-comp", children: vm.competition }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxs7("div", { className: "ss-w-mo-rows", children: [
-      vm.mainRows.map((row) => /* @__PURE__ */ jsx10(OddsRow, { vm, row, ui, slip }, row.key)),
-      open ? vm.moreRows.map((row) => /* @__PURE__ */ jsx10(OddsRow, { vm, row, ui, slip }, row.key)) : null
+    /* @__PURE__ */ jsxs8("div", { className: "ss-w-mo-rows", children: [
+      vm.mainRows.map((row) => /* @__PURE__ */ jsx11(OddsRow, { vm, row, ui, slip }, row.key)),
+      open ? vm.moreRows.map((row) => /* @__PURE__ */ jsx11(OddsRow, { vm, row, ui, slip }, row.key)) : null
     ] }),
-    vm.moreRows.length > 0 ? /* @__PURE__ */ jsxs7("button", { type: "button", className: "ss-w-bi-toggle", "aria-expanded": open, onClick: () => setOpen((v) => !v), children: [
-      /* @__PURE__ */ jsx10("span", { children: open ? ui?.hideLines ?? "Hide lines" : `${ui?.moreLines ?? "More lines"} (${vm.moreRows.length})` }),
-      /* @__PURE__ */ jsx10("span", { className: `ss-w-bi-chev${open ? " ss-w-bi-chev-up" : ""}`, "aria-hidden": "true" })
+    vm.moreRows.length > 0 ? /* @__PURE__ */ jsxs8("button", { type: "button", className: "ss-w-bi-toggle", "aria-expanded": open, onClick: () => setOpen((v) => !v), children: [
+      /* @__PURE__ */ jsx11("span", { children: open ? ui?.hideLines ?? "Hide lines" : `${ui?.moreLines ?? "More lines"} (${vm.moreRows.length})` }),
+      /* @__PURE__ */ jsx11("span", { className: `ss-w-bi-chev${open ? " ss-w-bi-chev-up" : ""}`, "aria-hidden": "true" })
     ] }) : null,
-    vm.bookmaker ? /* @__PURE__ */ jsx10("div", { className: "ss-w-mo-foot", children: /* @__PURE__ */ jsx10("span", { children: vm.bookmaker }) }) : null,
-    vm.disclaimer ? /* @__PURE__ */ jsx10("p", { className: "ss-w-bi-disc", children: vm.disclaimer }) : null
+    vm.bookmaker ? /* @__PURE__ */ jsx11("div", { className: "ss-w-mo-foot", children: /* @__PURE__ */ jsx11("span", { children: vm.bookmaker }) }) : null,
+    vm.disclaimer ? /* @__PURE__ */ jsx11("p", { className: "ss-w-bi-disc", children: vm.disclaimer }) : null
   ] });
 }
 function MarketOddsCardList({ cards, ui, slip }) {
   if (!cards || cards.length === 0) return null;
-  return /* @__PURE__ */ jsx10("div", { className: "ss-w-mocards", children: cards.map((vm) => /* @__PURE__ */ jsx10(MarketOddsCard, { vm, ui, slip }, vm.id)) });
+  return /* @__PURE__ */ jsx11("div", { className: "ss-w-mocards", children: cards.map((vm) => /* @__PURE__ */ jsx11(MarketOddsCard, { vm, ui, slip }, vm.id)) });
+}
+
+// src/components/OddsMovementCard.tsx
+import { Fragment, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function directionWord(vm, ui) {
+  if (vm.direction === "shortened") return ui?.oddsShortened ?? "shortened";
+  if (vm.direction === "drifted") return ui?.oddsDrifted ?? "drifted";
+  return "";
+}
+function OddsMovementCard({ vm, ui }) {
+  const aria = ui?.chartAria ? ui.chartAria(vm.opening, vm.current, directionWord(vm, ui), vm.windowHours) : `Price movement over the last ${vm.windowHours} hours: opened at ${vm.opening}, currently ${vm.current}, ${directionWord(vm, ui)}.`;
+  return /* @__PURE__ */ jsxs9("div", { className: "ss-w-omcard", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "ss-w-om-head", children: [
+      /* @__PURE__ */ jsx12("span", { className: "ss-w-om-market", children: vm.market }),
+      /* @__PURE__ */ jsx12("span", { className: "ss-w-om-tag", children: ui?.priceMovement ?? "Price movement" })
+    ] }),
+    vm.fixture ? /* @__PURE__ */ jsxs9("div", { className: "ss-w-om-fixture", children: [
+      /* @__PURE__ */ jsx12("span", { children: vm.fixture }),
+      vm.competition ? /* @__PURE__ */ jsx12("span", { className: "ss-w-om-comp", children: vm.competition }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx12("div", { className: "ss-w-om-sel", children: vm.selection }),
+    /* @__PURE__ */ jsx12(OddsMovementBadge, { previous: vm.opening, current: vm.current, direction: vm.direction, ui }),
+    vm.geometry === null ? /* @__PURE__ */ jsx12("div", { className: "ss-w-om-empty", children: vm.observationCount === 1 ? ui?.singlePricePoint ?? "Only one price recorded so far for this selection." : ui?.notEnoughHistory ?? "No price history recorded yet for this selection." }) : /* @__PURE__ */ jsxs9(
+      "svg",
+      {
+        className: "ss-w-om-chart",
+        viewBox: vm.geometry.viewBox,
+        width: "100%",
+        role: "img",
+        "aria-label": aria,
+        children: [
+          vm.geometry.gridlines.map((g) => /* @__PURE__ */ jsxs9("g", { children: [
+            /* @__PURE__ */ jsx12("line", { className: "ss-w-om-grid", x1: 40, y1: g.y, x2: CHART_VIEW_W - 8, y2: g.y }),
+            /* @__PURE__ */ jsx12("text", { className: "ss-w-om-ylab", x: 34, y: g.y + 3, textAnchor: "end", children: g.price.toFixed(2) })
+          ] }, g.price)),
+          /* @__PURE__ */ jsx12("path", { className: "ss-w-om-line", d: vm.geometry.path, fill: "none" }),
+          vm.geometry.markers.map((m, i) => /* @__PURE__ */ jsx12("circle", { className: "ss-w-om-dot", cx: m.x, cy: m.y, r: 2.5 }, i)),
+          ui?.chartTimeLabel ? /* @__PURE__ */ jsxs9(Fragment, { children: [
+            /* @__PURE__ */ jsx12("text", { className: "ss-w-om-xlab", x: 40, y: CHART_VIEW_H - 8, textAnchor: "start", children: ui.chartTimeLabel(vm.geometry.startMs) }),
+            /* @__PURE__ */ jsx12("text", { className: "ss-w-om-xlab", x: CHART_VIEW_W - 8, y: CHART_VIEW_H - 8, textAnchor: "end", children: ui.chartTimeLabel(vm.geometry.endMs) })
+          ] }) : /* @__PURE__ */ jsx12("text", { className: "ss-w-om-xlab", x: 40, y: CHART_VIEW_H - 8, children: ui?.movementWindow ? ui.movementWindow(vm.windowHours) : `Last ${vm.windowHours}h` })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "ss-w-om-foot", children: [
+      /* @__PURE__ */ jsxs9("span", { children: [
+        ui?.openingLabel ?? "Opening",
+        " ",
+        /* @__PURE__ */ jsx12("b", { children: vm.opening })
+      ] }),
+      /* @__PURE__ */ jsxs9("span", { children: [
+        ui?.currentLabel ?? "Current",
+        " ",
+        /* @__PURE__ */ jsx12("b", { children: vm.current })
+      ] })
+    ] }),
+    vm.bookmaker ? /* @__PURE__ */ jsx12("div", { className: "ss-w-om-foot", children: /* @__PURE__ */ jsx12("span", { children: vm.bookmaker }) }) : null,
+    vm.excludedCount > 0 ? /* @__PURE__ */ jsx12("div", { className: "ss-w-om-excl", children: ui?.excludedSuspended ? ui.excludedSuspended(vm.excludedCount) : `${vm.excludedCount} suspended price(s) excluded from this chart.` }) : null,
+    vm.isSuspended ? /* @__PURE__ */ jsx12("div", { className: "ss-w-om-susp", children: ui?.selectionSuspended ?? "This selection is not currently available to bet." }) : null,
+    vm.disclaimer ? /* @__PURE__ */ jsx12("div", { className: "ss-w-om-disc", children: vm.disclaimer }) : null
+  ] });
+}
+function OddsMovementCardList({ cards, ui }) {
+  if (!cards || cards.length === 0) return null;
+  return /* @__PURE__ */ jsx12("div", { className: "ss-w-omcards", children: cards.map((vm) => /* @__PURE__ */ jsx12(OddsMovementCard, { vm, ui }, vm.id)) });
 }
 
 // src/components/ActionButtons.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function ActionButtons({ actions, loading, disabled, onAct }) {
   if (actions.length === 0 && !loading) return null;
-  return /* @__PURE__ */ jsxs8("div", { className: "ss-w-actions", children: [
-    actions.map((a, i) => /* @__PURE__ */ jsx11("button", { type: "button", className: "ss-w-abtn", disabled, onClick: () => onAct(a), children: a.label }, `${a.label}-${i}`)),
-    actions.length === 0 && loading ? /* @__PURE__ */ jsxs8(Fragment, { children: [
-      /* @__PURE__ */ jsx11("span", { className: "ss-w-abtn-shimmer" }),
-      /* @__PURE__ */ jsx11("span", { className: "ss-w-abtn-shimmer" })
+  return /* @__PURE__ */ jsxs10("div", { className: "ss-w-actions", children: [
+    actions.map((a, i) => /* @__PURE__ */ jsx13("button", { type: "button", className: "ss-w-abtn", disabled, onClick: () => onAct(a), children: a.label }, `${a.label}-${i}`)),
+    actions.length === 0 && loading ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
+      /* @__PURE__ */ jsx13("span", { className: "ss-w-abtn-shimmer" }),
+      /* @__PURE__ */ jsx13("span", { className: "ss-w-abtn-shimmer" })
     ] }) : null
   ] });
 }
 
 // src/components/ChatMessage.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function ChatMessage({ message, disabled, onAct, ui, slip }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ jsx12("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ jsx12("div", { className: "ss-w-bubble", children: message.text }) });
+    return /* @__PURE__ */ jsx14("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ jsx14("div", { className: "ss-w-bubble", children: message.text }) });
   }
-  return /* @__PURE__ */ jsxs9("div", { className: "ss-w-msg ss-w-bot", children: [
-    message.text ? /* @__PURE__ */ jsx12(Markdown, { text: message.text }) : null,
-    /* @__PURE__ */ jsx12(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
-    /* @__PURE__ */ jsx12(BettingInsightList, { insights: message.insights, ui, slip }),
-    /* @__PURE__ */ jsx12(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
-    /* @__PURE__ */ jsx12(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
+  return /* @__PURE__ */ jsxs11("div", { className: "ss-w-msg ss-w-bot", children: [
+    message.text ? /* @__PURE__ */ jsx14(Markdown, { text: message.text }) : null,
+    /* @__PURE__ */ jsx14(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
+    /* @__PURE__ */ jsx14(BettingInsightList, { insights: message.insights, ui, slip }),
+    /* @__PURE__ */ jsx14(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
+    /* @__PURE__ */ jsx14(OddsMovementCardList, { cards: message.oddsMovement, ui }),
+    /* @__PURE__ */ jsx14(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
   ] });
 }
 
 // src/components/IntentChips.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function IntentChips({ chips, onPick }) {
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ jsx13("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ jsx13("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
+  return /* @__PURE__ */ jsx15("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ jsx15("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
 }
 
 // src/scroll.ts
@@ -885,7 +1090,7 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function MessageList({ controller, ui, slip }) {
   const { state, send } = controller;
   const listRef = useRef2(null);
@@ -895,7 +1100,7 @@ function MessageList({ controller, ui, slip }) {
     if (pinnedRef.current) endRef.current?.scrollIntoView({ block: "end" });
   }, [state.messages, state.status]);
   const empty = state.messages.length === 0;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: "ss-w-list",
@@ -905,7 +1110,7 @@ function MessageList({ controller, ui, slip }) {
         if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
       children: [
-        state.messages.map((m) => /* @__PURE__ */ jsx14(
+        state.messages.map((m) => /* @__PURE__ */ jsx16(
           ChatMessage,
           {
             message: m,
@@ -916,15 +1121,15 @@ function MessageList({ controller, ui, slip }) {
           },
           m.id
         )),
-        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ jsx14(ActionButtons, { actions: [], loading: true, onAct: () => {
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ jsx16(ActionButtons, { actions: [], loading: true, onAct: () => {
         } }) : null,
-        state.status ? /* @__PURE__ */ jsx14("div", { className: "ss-w-status", children: state.status }) : null,
-        state.error ? /* @__PURE__ */ jsxs10("div", { className: "ss-w-error", role: "alert", children: [
-          /* @__PURE__ */ jsx14("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-          /* @__PURE__ */ jsx14("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
+        state.status ? /* @__PURE__ */ jsx16("div", { className: "ss-w-status", children: state.status }) : null,
+        state.error ? /* @__PURE__ */ jsxs12("div", { className: "ss-w-error", role: "alert", children: [
+          /* @__PURE__ */ jsx16("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
+          /* @__PURE__ */ jsx16("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
         ] }) : null,
-        empty ? /* @__PURE__ */ jsx14(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ jsx14("div", { ref: endRef })
+        empty ? /* @__PURE__ */ jsx16(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
+        /* @__PURE__ */ jsx16("div", { ref: endRef })
       ]
     }
   );
@@ -932,7 +1137,7 @@ function MessageList({ controller, ui, slip }) {
 
 // src/components/ChatInput.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
   const [value, setValue] = useState5("");
   const submit = () => {
@@ -947,14 +1152,14 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
       submit();
     }
   };
-  return /* @__PURE__ */ jsxs11("div", { className: "ss-w-input", children: [
-    /* @__PURE__ */ jsx15("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
-    streaming ? /* @__PURE__ */ jsx15("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ jsx15("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ jsx15("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ jsx15(SendIcon, {}) })
+  return /* @__PURE__ */ jsxs13("div", { className: "ss-w-input", children: [
+    /* @__PURE__ */ jsx17("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
+    streaming ? /* @__PURE__ */ jsx17("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ jsx17("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ jsx17("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ jsx17(SendIcon, {}) })
   ] });
 }
 
 // src/components/ChatPanel.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
   const [modal, setModal] = useState6(false);
@@ -978,10 +1183,10 @@ function ChatPanel({ controller, ui, slip }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close]);
-  return /* @__PURE__ */ jsxs12("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ jsx16(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
-    /* @__PURE__ */ jsx16(MessageList, { controller, ui, slip }),
-    /* @__PURE__ */ jsx16(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
+  return /* @__PURE__ */ jsxs14("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
+    /* @__PURE__ */ jsx18(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
+    /* @__PURE__ */ jsx18(MessageList, { controller, ui, slip }),
+    /* @__PURE__ */ jsx18(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
   ] });
 }
 
@@ -1170,13 +1375,40 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-mo-price { margin-left: auto; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--ss-w-accent); }
 /* Movement: BOTH directions share --ss-w-faint on purpose. Green-good/red-bad would frame a
    shortening price as a discount, which inverts what it actually means for the bettor. */
-.ss-w-mo-move { margin-left: auto; display: inline-flex; align-items: baseline; gap: 4px; color: var(--ss-w-faint); }
-.ss-w-mo-prev { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; text-decoration: line-through; }
-.ss-w-mo-arrow { font-size: 9px; line-height: 1; }
-.ss-w-mo-move + .ss-w-mo-price { margin-left: 0; }
+.ss-w-move { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ss-w-faint); }
+.ss-w-move-prev { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; text-decoration: line-through; }
+.ss-w-move-arrow { font-size: 9px; line-height: 1; }
+/* margin-left:auto is row layout, not badge styling -- it belongs to the market-odds row, which is
+   a flex row, and must NOT follow the badge into the insight card's odds column. */
+.ss-w-mo-row .ss-w-move { margin-left: auto; }
+.ss-w-mo-row .ss-w-move + .ss-w-mo-price { margin-left: 0; }
 .ss-w-mo-row .ss-w-slip { margin: 0; }
 .ss-w-mo-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ss-w-faint); }
 
+/* odds movement card */
+.ss-w-omcards { display: flex; flex-direction: column; gap: 7px; }
+.ss-w-omcard { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }
+.ss-w-om-head { display: flex; align-items: center; gap: 8px; }
+.ss-w-om-market { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-om-tag { margin-left: auto; flex: none; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 2px 7px; }
+.ss-w-om-fixture { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ss-w-faint); min-width: 0; }
+.ss-w-om-comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-om-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
+.ss-w-om-chart { display: block; width: 100%; height: auto; }
+/* Single neutral accent in BOTH directions, deliberately. Colouring a shortening price green
+   frames it as a discount, which inverts what it means for the bettor -- the same reason
+   .ss-w-move keeps both directions on --ss-w-faint. */
+.ss-w-om-line { stroke: var(--ss-w-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.ss-w-om-dot { fill: var(--ss-w-accent); }
+.ss-w-om-grid { stroke: var(--ss-w-line); stroke-width: 1; }
+.ss-w-om-ylab, .ss-w-om-xlab { fill: var(--ss-w-faint); font-size: 9px; font-family: ui-monospace, monospace; }
+.ss-w-om-empty { font-size: 11.5px; color: var(--ss-w-faint); padding: 6px 0; }
+.ss-w-om-foot { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--ss-w-faint); }
+.ss-w-om-foot b { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ss-w-ink); }
+.ss-w-om-excl { font-size: 10.5px; color: var(--ss-w-faint); }
+.ss-w-om-susp { font-size: 11px; font-weight: 600; color: #c0392b; }
+.ss-w-om-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }
+
 /* action buttons */
 .ss-w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
 .ss-w-abtn { font-size: 12px; font-weight: 560; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid var(--ss-w-accent); border-radius: 16px; padding: 6px 12px; cursor: pointer; }
@@ -1214,7 +1446,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 `;
 
 // src/StatsWidget.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -1263,7 +1495,7 @@ function StatsWidget(props) {
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ jsx17("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ jsx17(ChatPanel, { controller, ui, slip }) : /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ jsx19(ChatPanel, { controller, ui, slip }) : /* @__PURE__ */ jsx19(
     ChatFab,
     {
       label: ui.launcherLabel,