@sensiblestats/widget-react 0.12.0 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @sensiblestats/widget-react
 
+## 0.13.1
+
+### Patch Changes
+
+- Odds movement chart: drop the direction clause from the chart's `aria-label` when the price is flat. It used to read "…currently 1.44, ." — a screen reader announced the dangling punctuation on exactly the no-movement case.
+
+## 0.13.0
+
+### Minor Changes
+
+- Odds movement price chart card (SP4 widget half).
+
+  - `widget-sdk`: `odds_movement` chat event — `OddsMovementCard`, `OddsMovementPoint`, `OddsMovementEventData`.
+  - `widget-react`: renders the card — a time-proportional inline SVG price chart with bookmaker, direction badge, suspended state and excluded-observation disclosure.
+  - `widget-embed`: re-bundles `widget-react`, so it ships the new card too.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.11.0
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -65,6 +65,20 @@ 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"}`;
+      const drift = direction ? `, ${direction}` : "";
+      return `Price movement over the last ${span}: opened at ${opening}, currently ${current}${drift}.`;
+    },
     inSlip: "In slip",
     slipAdded: (n) => n === void 0 ? "Added to slip" : `Added to slip (${n} selection${n === 1 ? "" : "s"})`,
     slipDuplicate: "Already in your slip",
@@ -98,6 +112,20 @@ 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`;
+      const drift = direction ? `, ${direction}` : "";
+      return `Son ${span} i\xE7indeki oran hareketi: ${opening} ile a\xE7\u0131ld\u0131, \u015Fu anda ${current}${drift}.`;
+    },
     inSlip: "Kuponda",
     slipAdded: (n) => n === void 0 ? "Kupona eklendi" : `Kupona eklendi (${n} se\xE7im)`,
     slipDuplicate: "Bu se\xE7im kuponunuzda zaten var",
@@ -147,6 +175,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,
@@ -185,6 +223,54 @@ var import_widget_sdk2 = require("@sensiblestats/widget-sdk");
 // src/reducer.ts
 var import_widget_sdk = require("@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;
@@ -327,6 +413,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 };
@@ -367,6 +488,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;
@@ -402,11 +525,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":
@@ -776,8 +899,8 @@ function OddsMovementBadge({
   ui
 }) {
   if (previous === void 0 || direction === void 0) return null;
-  const directionWord = direction === "shortened" ? ui?.oddsShortened ?? "shortened" : ui?.oddsDrifted ?? "drifted";
-  const label = ui?.oddsMoved?.(previous, current, directionWord) ?? `was ${previous}, now ${current}, ${directionWord}`;
+  const directionWord2 = direction === "shortened" ? ui?.oddsShortened ?? "shortened" : ui?.oddsDrifted ?? "drifted";
+  const label = ui?.oddsMoved?.(previous, current, directionWord2) ?? `was ${previous}, now ${current}, ${directionWord2}`;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "ss-w-move", role: "img", "aria-label": label, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-move-prev", "aria-hidden": "true", children: previous }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-move-arrow", "aria-hidden": "true", children: direction === "shortened" ? "\u25BC" : "\u25B2" })
@@ -898,39 +1021,107 @@ function MarketOddsCardList({ cards, ui, slip }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ss-w-mocards", children: cards.map((vm) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MarketOddsCard, { vm, ui, slip }, vm.id)) });
 }
 
-// src/components/ActionButtons.tsx
+// src/components/OddsMovementCard.tsx
 var import_jsx_runtime12 = require("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 word = directionWord(vm, ui);
+  const drift = word ? `, ${word}` : "";
+  const aria = ui?.chartAria ? ui.chartAria(vm.opening, vm.current, word, vm.windowHours) : `Price movement over the last ${vm.windowHours} hours: opened at ${vm.opening}, currently ${vm.current}${drift}.`;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ss-w-omcard", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ss-w-om-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ss-w-om-market", children: vm.market }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ss-w-om-tag", children: ui?.priceMovement ?? "Price movement" })
+    ] }),
+    vm.fixture ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ss-w-om-fixture", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: vm.fixture }),
+      vm.competition ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ss-w-om-comp", children: vm.competition }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ss-w-om-sel", children: vm.selection }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(OddsMovementBadge, { previous: vm.opening, current: vm.current, direction: vm.direction, ui }),
+    vm.geometry === null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)(
+      "svg",
+      {
+        className: "ss-w-om-chart",
+        viewBox: vm.geometry.viewBox,
+        width: "100%",
+        role: "img",
+        "aria-label": aria,
+        children: [
+          vm.geometry.gridlines.map((g) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { className: "ss-w-om-grid", x1: 40, y1: g.y, x2: CHART_VIEW_W - 8, y2: g.y }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("text", { className: "ss-w-om-ylab", x: 34, y: g.y + 3, textAnchor: "end", children: g.price.toFixed(2) })
+          ] }, g.price)),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { className: "ss-w-om-line", d: vm.geometry.path, fill: "none" }),
+          vm.geometry.markers.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { className: "ss-w-om-dot", cx: m.x, cy: m.y, r: 2.5 }, i)),
+          ui?.chartTimeLabel ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("text", { className: "ss-w-om-xlab", x: 40, y: CHART_VIEW_H - 8, textAnchor: "start", children: ui.chartTimeLabel(vm.geometry.startMs) }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ss-w-om-foot", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
+        ui?.openingLabel ?? "Opening",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("b", { children: vm.opening })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
+        ui?.currentLabel ?? "Current",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("b", { children: vm.current })
+      ] })
+    ] }),
+    vm.bookmaker ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ss-w-om-foot", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: vm.bookmaker }) }) : null,
+    vm.excludedCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ss-w-om-susp", children: ui?.selectionSuspended ?? "This selection is not currently available to bet." }) : null,
+    vm.disclaimer ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ss-w-om-disc", children: vm.disclaimer }) : null
+  ] });
+}
+function OddsMovementCardList({ cards, ui }) {
+  if (!cards || cards.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ss-w-omcards", children: cards.map((vm) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(OddsMovementCard, { vm, ui }, vm.id)) });
+}
+
+// src/components/ActionButtons.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ActionButtons({ actions, loading, disabled, onAct }) {
   if (actions.length === 0 && !loading) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ss-w-actions", children: [
-    actions.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "ss-w-abtn", disabled, onClick: () => onAct(a), children: a.label }, `${a.label}-${i}`)),
-    actions.length === 0 && loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ss-w-abtn-shimmer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ss-w-abtn-shimmer" })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-actions", children: [
+    actions.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "ss-w-abtn", disabled, onClick: () => onAct(a), children: a.label }, `${a.label}-${i}`)),
+    actions.length === 0 && loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-abtn-shimmer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ss-w-abtn-shimmer" })
     ] }) : null
   ] });
 }
 
 // src/components/ChatMessage.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ChatMessage({ message, disabled, onAct, ui, slip }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
-    message.text ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Markdown, { text: message.text }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BettingInsightList, { insights: message.insights, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
+    message.text ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Markdown, { text: message.text }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BettingInsightList, { insights: message.insights, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OddsMovementCardList, { cards: message.oddsMovement, ui }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
   ] });
 }
 
 // src/components/IntentChips.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function IntentChips({ chips, onPick }) {
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
 }
 
 // src/scroll.ts
@@ -940,7 +1131,7 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 }
 
 // src/components/MessageList.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function MessageList({ controller, ui, slip }) {
   const { state, send } = controller;
   const listRef = (0, import_react7.useRef)(null);
@@ -950,7 +1141,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__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       className: "ss-w-list",
@@ -960,7 +1151,7 @@ function MessageList({ controller, ui, slip }) {
         if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
       children: [
-        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           ChatMessage,
           {
             message: m,
@@ -971,15 +1162,15 @@ function MessageList({ controller, ui, slip }) {
           },
           m.id
         )),
-        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
         } }) : null,
-        state.status ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
-        state.error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
+        state.status ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
+        state.error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
         ] }) : null,
-        empty ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: endRef })
+        empty ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: endRef })
       ]
     }
   );
@@ -987,7 +1178,7 @@ function MessageList({ controller, ui, slip }) {
 
 // src/components/ChatInput.tsx
 var import_react8 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
   const [value, setValue] = (0, import_react8.useState)("");
   const submit = () => {
@@ -1002,14 +1193,14 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
       submit();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ss-w-input", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
-    streaming ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SendIcon, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-input", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
+    streaming ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SendIcon, {}) })
   ] });
 }
 
 // src/components/ChatPanel.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
   const [modal, setModal] = (0, import_react9.useState)(false);
@@ -1033,10 +1224,10 @@ function ChatPanel({ controller, ui, slip }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MessageList, { controller, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessageList, { controller, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
   ] });
 }
 
@@ -1235,6 +1426,30 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .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; }
@@ -1272,7 +1487,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 `;
 
 // src/StatsWidget.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -1321,7 +1536,7 @@ function StatsWidget(props) {
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)(ChatPanel, { controller, ui, slip }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)(ChatPanel, { controller, ui, slip }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     ChatFab,
     {
       label: ui.launcherLabel,