@sensiblestats/widget-react 0.12.0 → 0.13.1

package/dist/index.js

@@ -28,6 +28,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",
@@ -61,6 +75,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",
@@ -110,6 +138,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 +186,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;
@@ -290,6 +376,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 };
@@ -330,6 +451,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;
@@ -365,11 +488,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":
@@ -735,8 +858,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 (
     // 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.
@@ -861,39 +984,107 @@ function MarketOddsCardList({ cards, ui, slip }) {
   return /* @__PURE__ */ jsx11("div", { className: "ss-w-mocards", children: cards.map((vm) => /* @__PURE__ */ jsx11(MarketOddsCard, { vm, ui, slip }, vm.id)) });
 }
 
-// src/components/ActionButtons.tsx
+// 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 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__ */ 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 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__ */ jsxs9("div", { className: "ss-w-actions", children: [
-    actions.map((a, i) => /* @__PURE__ */ jsx12("button", { type: "button", className: "ss-w-abtn", disabled, onClick: () => onAct(a), children: a.label }, `${a.label}-${i}`)),
-    actions.length === 0 && loading ? /* @__PURE__ */ jsxs9(Fragment, { children: [
-      /* @__PURE__ */ jsx12("span", { className: "ss-w-abtn-shimmer" }),
-      /* @__PURE__ */ jsx12("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 jsx13, jsxs as jsxs10 } 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__ */ jsx13("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ jsx13("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__ */ jsxs10("div", { className: "ss-w-msg ss-w-bot", children: [
-    message.text ? /* @__PURE__ */ jsx13(Markdown, { text: message.text }) : null,
-    /* @__PURE__ */ jsx13(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
-    /* @__PURE__ */ jsx13(BettingInsightList, { insights: message.insights, ui, slip }),
-    /* @__PURE__ */ jsx13(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
-    /* @__PURE__ */ jsx13(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 jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function IntentChips({ chips, onPick }) {
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ jsx14("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ jsx14("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
@@ -903,7 +1094,7 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx15, jsxs as jsxs11 } 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);
@@ -913,7 +1104,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__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: "ss-w-list",
@@ -923,7 +1114,7 @@ function MessageList({ controller, ui, slip }) {
         if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
       children: [
-        state.messages.map((m) => /* @__PURE__ */ jsx15(
+        state.messages.map((m) => /* @__PURE__ */ jsx16(
           ChatMessage,
           {
             message: m,
@@ -934,15 +1125,15 @@ function MessageList({ controller, ui, slip }) {
           },
           m.id
         )),
-        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ jsx15(ActionButtons, { actions: [], loading: true, onAct: () => {
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ jsx16(ActionButtons, { actions: [], loading: true, onAct: () => {
         } }) : null,
-        state.status ? /* @__PURE__ */ jsx15("div", { className: "ss-w-status", children: state.status }) : null,
-        state.error ? /* @__PURE__ */ jsxs11("div", { className: "ss-w-error", role: "alert", children: [
-          /* @__PURE__ */ jsx15("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-          /* @__PURE__ */ jsx15("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__ */ jsx15(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ jsx15("div", { ref: endRef })
+        empty ? /* @__PURE__ */ jsx16(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
+        /* @__PURE__ */ jsx16("div", { ref: endRef })
       ]
     }
   );
@@ -950,7 +1141,7 @@ function MessageList({ controller, ui, slip }) {
 
 // src/components/ChatInput.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx16, jsxs as jsxs12 } 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 = () => {
@@ -965,14 +1156,14 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
       submit();
     }
   };
-  return /* @__PURE__ */ jsxs12("div", { className: "ss-w-input", children: [
-    /* @__PURE__ */ jsx16("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
-    streaming ? /* @__PURE__ */ jsx16("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ jsx16("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ jsx16("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ jsx16(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 jsx17, jsxs as jsxs13 } 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);
@@ -996,10 +1187,10 @@ function ChatPanel({ controller, ui, slip }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close]);
-  return /* @__PURE__ */ jsxs13("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ jsx17(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
-    /* @__PURE__ */ jsx17(MessageList, { controller, ui, slip }),
-    /* @__PURE__ */ jsx17(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 })
   ] });
 }
 
@@ -1198,6 +1389,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; }
@@ -1235,7 +1450,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 `;
 
 // src/StatsWidget.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -1284,7 +1499,7 @@ function StatsWidget(props) {
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ jsx18("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__ */ jsx18(ChatPanel, { controller, ui, slip }) : /* @__PURE__ */ jsx18(
+  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,