@sensiblestats/widget-react 0.7.1 → 0.8.0

package/dist/index.js

@@ -16,9 +16,15 @@ var STRINGS = {
     retry: "Retry",
     showLess: "Show less",
     showMore: (n) => `Show ${n} more`,
+    showStats: "Show stats",
+    hideStats: "Hide stats",
     oddsLabel: "Odds",
     liveLabel: "Live",
     addToSlip: "Add to slip",
+    marketPrices: "Market prices",
+    moreLines: "More lines",
+    hideLines: "Hide lines",
+    updatedLabel: "updated",
     inSlip: "In slip",
     slipAdded: (n) => n === void 0 ? "Added to slip" : `Added to slip (${n} selection${n === 1 ? "" : "s"})`,
     slipDuplicate: "Already in your slip",
@@ -40,9 +46,15 @@ var STRINGS = {
     retry: "Tekrar dene",
     showLess: "Daha az g\xF6ster",
     showMore: (n) => `${n} tane daha g\xF6ster`,
+    showStats: "\u0130statistikleri g\xF6ster",
+    hideStats: "\u0130statistikleri gizle",
     oddsLabel: "Oran",
     liveLabel: "Canl\u0131",
     addToSlip: "Kupona ekle",
+    marketPrices: "Piyasa fiyatlar\u0131",
+    moreLines: "Di\u011Fer \xE7izgiler",
+    hideLines: "\xC7izgileri gizle",
+    updatedLabel: "g\xFCncellendi",
     inSlip: "Kuponda",
     slipAdded: (n) => n === void 0 ? "Kupona eklendi" : `Kupona eklendi (${n} se\xE7im)`,
     slipDuplicate: "Bu se\xE7im kuponunuzda zaten var",
@@ -81,8 +93,14 @@ function normalizeUi(cfg) {
     retry: strings.retry,
     showLess: strings.showLess,
     showMore: strings.showMore,
+    showStats: strings.showStats,
+    hideStats: strings.hideStats,
     oddsLabel: strings.oddsLabel,
     liveLabel: strings.liveLabel,
+    marketPrices: strings.marketPrices,
+    moreLines: strings.moreLines,
+    hideLines: strings.hideLines,
+    updatedLabel: strings.updatedLabel,
     addToSlip: strings.addToSlip,
     inSlip: strings.inSlip,
     slipAdded: strings.slipAdded,
@@ -212,6 +230,47 @@ function toSlipSelection(vm, conversationId) {
   if (conversationId !== void 0) selection.conversationId = conversationId;
   return selection;
 }
+function toMarketOddsVM(card) {
+  const rows = Array.isArray(card.rows) ? card.rows : [];
+  const toRow = (r, i) => {
+    const selection = [str(r.selectionLabel), str(r.line)].filter(Boolean).join(" ");
+    const price = typeof r.price === "number" && Number.isFinite(r.price) ? r.price : void 0;
+    return {
+      key: `${selection}:${str(r.line) ?? ""}:${i}`,
+      selection,
+      odds: price !== void 0 ? price.toFixed(2) : "",
+      oddsDecimal: price,
+      matchOddsId: typeof r.matchOddsId === "number" ? r.matchOddsId : void 0,
+      quotedAtUtc: str(r.quotedAtUtc),
+      isMain: r.isMainLine !== false
+    };
+  };
+  const vms = rows.map(toRow).filter((r) => r.selection && r.odds);
+  const home = str(card.homeTeamName);
+  const away = str(card.awayTeamName);
+  const updated = rows.map((r) => str(r.quotedAtUtc)).filter((v) => !!v).sort();
+  return {
+    id: `${typeof card.matchId === "number" ? card.matchId : 0}:${str(card.marketDeveloperName) ?? ""}`,
+    market: str(card.marketLabel) ?? str(card.marketDeveloperName) ?? "",
+    fixture: home && away ? `${home} vs ${away}` : void 0,
+    competition: str(card.competitionName),
+    bookmaker: rows.map((r) => str(r.bookmakerName)).find(Boolean),
+    updatedAt: updated.length > 0 ? updated[updated.length - 1] : void 0,
+    isLive: rows.some((r) => r.isLive === true),
+    matchId: typeof card.matchId === "number" ? card.matchId : 0,
+    mainRows: vms.filter((r) => r.isMain),
+    moreRows: vms.filter((r) => !r.isMain),
+    disclaimer: str(card.disclaimer),
+    addToSlipEnabled: card.addToSlipEnabled === true
+  };
+}
+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 };
+  if (row.quotedAtUtc !== void 0) selection.quotedAtUtc = row.quotedAtUtc;
+  if (conversationId !== void 0) selection.conversationId = conversationId;
+  return selection;
+}
 
 // src/reducer.ts
 var POPUP_MAX = 160;
@@ -243,6 +302,8 @@ function applyEvent(state, event) {
       return { ...state, actionsLoading: false, messages: mapActive(state, (t) => ({ ...t, actions: [...t.actions, toActionVM(event.data.action)] })) };
     case "betting_insight":
       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 "intent_chip": {
       const chip = toChipVM(event.data.intent);
       return chip ? { ...state, starters: [...state.starters, chip] } : state;
@@ -278,11 +339,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: [], done: false };
+      const assistant = { role: "assistant", id: action.assistantId, text: "", cards: [], actions: [], insights: [], marketOdds: [], 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: [], done: false, isGreeting: true };
+      const assistant = { role: "assistant", id: action.assistantId, text: "", cards: [], actions: [], insights: [], marketOdds: [], done: false, isGreeting: true };
       return { ...state, messages: [...state.messages, assistant], isStreaming: true, status: null, error: null };
     }
     case "DISMISS_POPUP":
@@ -404,7 +465,7 @@ function ChatFab({ label, greeting, popupText, onOpen, onDismissPopup, dismissLa
 }
 
 // src/components/ChatPanel.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 
 // src/components/ChatHeader.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -527,13 +588,12 @@ function withTimeout(value) {
     new Promise((_, reject) => setTimeout(() => reject(new Error("add-to-slip timed out")), ADD_TO_SLIP_TIMEOUT_MS))
   ]);
 }
-function AddToSlipButton({ it, slip, ui }) {
+function SlipButton({ selection, shownOdds, marketName, slip, ui }) {
   const [pending, setPending] = useState2(false);
   const [settled, setSettled] = useState2(false);
   const [toast, setToast] = useState2(null);
   const dismiss = useCallback2(() => setToast(null), []);
   const handler = slip.onAddToSlip;
-  const selection = it.addToSlipEnabled ? toSlipSelection(it, slip.conversationId) : null;
   if (!ui || !handler || !selection) return null;
   const onClick = async () => {
     setPending(true);
@@ -541,11 +601,11 @@ function AddToSlipButton({ it, slip, ui }) {
       const raw = await withTimeout(Promise.resolve(handler(selection)));
       if (raw != null && !isAddToSlipResult(raw)) throw new Error("malformed add-to-slip result");
       const result = raw ?? void 0;
-      setToast(resultToToast(result, it.odds ?? selection.oddsDecimal.toFixed(2), ui));
+      setToast(resultToToast(result, shownOdds || selection.oddsDecimal.toFixed(2), ui));
       setSettled(isTerminal(result));
       if (wasAdded(result) && slip.onMarketClicked) {
         try {
-          slip.onMarketClicked(it.market);
+          slip.onMarketClicked(marketName);
         } catch {
         }
       }
@@ -569,29 +629,47 @@ function AddToSlipButton({ it, slip, ui }) {
     /* @__PURE__ */ jsx8(Toast, { toast, onDismiss: dismiss })
   ] });
 }
+function AddToSlipButton({ it, slip, ui }) {
+  const selection = it.addToSlipEnabled ? toSlipSelection(it, slip.conversationId) : null;
+  return /* @__PURE__ */ jsx8(SlipButton, { selection, shownOdds: it.odds ?? "", marketName: it.market, slip, ui });
+}
 
 // src/components/BettingInsightList.tsx
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var MAX_ROWS = 3;
-function StatRows({ stats, ui }) {
-  const [expanded, setExpanded] = useState3(false);
-  const shown = expanded ? stats : stats.slice(0, MAX_ROWS);
-  const overflow = stats.length - MAX_ROWS;
-  return /* @__PURE__ */ jsxs6("div", { className: "ss-w-bi-rows", children: [
-    shown.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-dots", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx9("span", { className: "ss-w-bi-row-num", children: s.value })
-    ] }, `${s.label}:${s.value}`)),
-    overflow > 0 ? /* @__PURE__ */ jsx9("button", { type: "button", className: "ss-w-bi-more", onClick: () => setExpanded((v) => !v), children: expanded ? ui?.showLess ?? "Show less" : (ui?.showMore ?? ((n) => `Show ${n} more`))(overflow) }) : null
-  ] });
+function StatRows({ 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 })
+  ] }, `${s.label}:${s.value}`)) });
 }
-function ScopedStats({ scopes, ui }) {
+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(StatRows, { stats: current.stats, ui }, current.key)
+    /* @__PURE__ */ jsx9(StatRows, { stats: current.stats }, current.key)
+  ] });
+}
+function StatsDisclosure({ it, ui }) {
+  const [open, setOpen] = useState3(false);
+  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(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-bi-toggle",
+        "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" })
+        ]
+      }
+    ),
+    open ? hasScopes ? /* @__PURE__ */ jsx9(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ jsx9(StatRows, { stats: it.stats }) : null
   ] });
 }
 function InsightCard({ it, ui, slip }) {
@@ -617,7 +695,7 @@ function InsightCard({ it, ui, slip }) {
       ] }) : null
     ] }),
     it.text ? /* @__PURE__ */ jsx9("p", { className: "ss-w-bi-text", children: it.text }) : null,
-    it.scopes && it.scopes.length >= 2 ? /* @__PURE__ */ jsx9(ScopedStats, { scopes: it.scopes, ui }) : it.stats.length > 0 ? /* @__PURE__ */ jsx9(StatRows, { stats: it.stats, ui }) : null,
+    /* @__PURE__ */ jsx9(StatsDisclosure, { it, ui }),
     it.disclaimer ? /* @__PURE__ */ jsx9("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null,
     /* @__PURE__ */ jsx9(AddToSlipButton, { it, slip, ui })
   ] });
@@ -627,38 +705,88 @@ function BettingInsightList({ insights, ui, slip }) {
   return /* @__PURE__ */ jsx9("div", { className: "ss-w-binsights", children: insights.map((it) => /* @__PURE__ */ jsx9(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";
+function OddsRow({ vm, row, ui, slip }) {
+  const selection = vm.addToSlipEnabled ? marketOddsRowToSlipSelection(vm, row, slip.conversationId) : null;
+  return /* @__PURE__ */ jsxs7("div", { className: "ss-w-mo-row", children: [
+    /* @__PURE__ */ jsx10("span", { className: "ss-w-mo-sel", children: row.selection }),
+    /* @__PURE__ */ jsx10("span", { className: "ss-w-mo-price", children: row.odds }),
+    /* @__PURE__ */ jsx10(SlipButton, { selection, shownOdds: row.odds, marketName: vm.market, slip, ui })
+  ] });
+}
+function formatUpdated(iso) {
+  if (!iso) return void 0;
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return void 0;
+  return date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+}
+function MarketOddsCard({ vm, ui, slip }) {
+  const [open, setOpen] = useState4(false);
+  const updated = formatUpdated(vm.updatedAt);
+  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" })
+    ] }),
+    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
+    ] }) : 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
+    ] }),
+    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" })
+    ] }) : null,
+    vm.bookmaker || updated ? /* @__PURE__ */ jsxs7("div", { className: "ss-w-mo-foot", children: [
+      vm.bookmaker ? /* @__PURE__ */ jsx10("span", { children: vm.bookmaker }) : null,
+      updated ? /* @__PURE__ */ jsx10("span", { children: `${ui?.updatedLabel ?? "updated"} ${updated}` }) : null
+    ] }) : null,
+    vm.disclaimer ? /* @__PURE__ */ jsx10("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)) });
+}
+
 // src/components/ActionButtons.tsx
-import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function ActionButtons({ actions, loading, disabled, onAct }) {
   if (actions.length === 0 && !loading) return null;
-  return /* @__PURE__ */ jsxs7("div", { className: "ss-w-actions", children: [
-    actions.map((a, i) => /* @__PURE__ */ jsx10("button", { type: "button", className: "ss-w-abtn", disabled, onClick: () => onAct(a), children: a.label }, `${a.label}-${i}`)),
-    actions.length === 0 && loading ? /* @__PURE__ */ jsxs7(Fragment, { children: [
-      /* @__PURE__ */ jsx10("span", { className: "ss-w-abtn-shimmer" }),
-      /* @__PURE__ */ jsx10("span", { className: "ss-w-abtn-shimmer" })
+  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" })
     ] }) : null
   ] });
 }
 
 // src/components/ChatMessage.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function ChatMessage({ message, disabled, onAct, ui, slip }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ jsx11("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ jsx11("div", { className: "ss-w-bubble", children: message.text }) });
+    return /* @__PURE__ */ jsx12("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ jsx12("div", { className: "ss-w-bubble", children: message.text }) });
   }
-  return /* @__PURE__ */ jsxs8("div", { className: "ss-w-msg ss-w-bot", children: [
-    message.text ? /* @__PURE__ */ jsx11(Markdown, { text: message.text }) : null,
-    /* @__PURE__ */ jsx11(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
-    /* @__PURE__ */ jsx11(BettingInsightList, { insights: message.insights, ui, slip }),
-    /* @__PURE__ */ jsx11(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
+  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 })
   ] });
 }
 
 // src/components/IntentChips.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function IntentChips({ chips, onPick }) {
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ jsx12("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ jsx12("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
+  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}`)) });
 }
 
 // src/scroll.ts
@@ -668,7 +796,7 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 }
 
 // src/components/MessageList.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function MessageList({ controller, ui, slip }) {
   const { state, send } = controller;
   const listRef = useRef2(null);
@@ -678,7 +806,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__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: "ss-w-list",
@@ -688,7 +816,7 @@ function MessageList({ controller, ui, slip }) {
         if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
       children: [
-        state.messages.map((m) => /* @__PURE__ */ jsx13(
+        state.messages.map((m) => /* @__PURE__ */ jsx14(
           ChatMessage,
           {
             message: m,
@@ -699,25 +827,25 @@ function MessageList({ controller, ui, slip }) {
           },
           m.id
         )),
-        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ jsx13(ActionButtons, { actions: [], loading: true, onAct: () => {
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ jsx14(ActionButtons, { actions: [], loading: true, onAct: () => {
         } }) : null,
-        state.status ? /* @__PURE__ */ jsx13("div", { className: "ss-w-status", children: state.status }) : null,
-        state.error ? /* @__PURE__ */ jsxs9("div", { className: "ss-w-error", role: "alert", children: [
-          /* @__PURE__ */ jsx13("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-          /* @__PURE__ */ jsx13("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
+        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 })
         ] }) : null,
-        empty ? /* @__PURE__ */ jsx13(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ jsx13("div", { ref: endRef })
+        empty ? /* @__PURE__ */ jsx14(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
+        /* @__PURE__ */ jsx14("div", { ref: endRef })
       ]
     }
   );
 }
 
 // src/components/ChatInput.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
-  const [value, setValue] = useState4("");
+  const [value, setValue] = useState5("");
   const submit = () => {
     const t = value.trim();
     if (!t) return;
@@ -730,17 +858,17 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
       submit();
     }
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "ss-w-input", children: [
-    /* @__PURE__ */ jsx14("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
-    streaming ? /* @__PURE__ */ jsx14("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ jsx14("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ jsx14("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ jsx14(SendIcon, {}) })
+  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, {}) })
   ] });
 }
 
 // src/components/ChatPanel.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
-  const [modal, setModal] = useState5(false);
+  const [modal, setModal] = useState6(false);
   useEffect4(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mql = window.matchMedia(FULLSCREEN_QUERY);
@@ -761,10 +889,10 @@ function ChatPanel({ controller, ui, slip }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close]);
-  return /* @__PURE__ */ jsxs11("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ jsx15(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
-    /* @__PURE__ */ jsx15(MessageList, { controller, ui, slip }),
-    /* @__PURE__ */ jsx15(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
+  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 })
   ] });
 }
 
@@ -876,27 +1004,45 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-bi-live { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #c0392b; border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; gap: 4px; flex: none; }
 .ss-w-bi-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
 .ss-w-bi-head { display: flex; align-items: flex-start; gap: 10px; }
-.ss-w-bi-mkt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
-.ss-w-bi-market { font-size: 13px; font-weight: 660; line-height: 1.3; color: var(--ss-w-ink); }
-.ss-w-bi-sel { font-size: 11px; line-height: 1.3; color: var(--ss-w-faint); }
-.ss-w-bi-odds { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 24%, var(--ss-w-line)); border-radius: 8px; padding: 3px 9px; min-width: 56px; }
-.ss-w-bi-odds-cap { font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ss-w-faint); }
-.ss-w-bi-odds b { font-size: 15px; font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.15; }
+.ss-w-bi-mkt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.ss-w-bi-market { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
+.ss-w-bi-sel { font-size: 12px; line-height: 1.3; color: var(--ss-w-faint); }
+.ss-w-bi-odds { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 10px; padding: 4px 11px; min-width: 62px; }
+.ss-w-bi-odds-cap { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }
+.ss-w-bi-odds b { font-size: 19px; font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.1; }
 .ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }
-.ss-w-bi-text { font-size: 12px; color: var(--ss-w-ink); }
+.ss-w-bi-text { font-size: 12px; line-height: 1.45; color: var(--ss-w-ink); }
+.ss-w-bi-stats { display: flex; flex-direction: column; gap: 8px; }
+.ss-w-bi-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 0; cursor: pointer; }
+.ss-w-bi-toggle:hover { text-decoration: underline; }
+.ss-w-bi-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
+.ss-w-bi-chev-up { transform: translateY(1px) rotate(-135deg); }
 .ss-w-bi-rows { display: flex; flex-direction: column; }
-.ss-w-bi-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px solid var(--ss-w-line); }
+.ss-w-bi-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--ss-w-line); }
 .ss-w-bi-row:first-child { border-top: none; }
-.ss-w-bi-row-lbl { font-size: 11px; color: var(--ss-w-faint); min-width: 0; }
-.ss-w-bi-row-dots { flex: 1; border-bottom: 1px dotted var(--ss-w-line); transform: translateY(-3px); min-width: 12px; }
-.ss-w-bi-row-num { font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px; flex: none; color: var(--ss-w-ink); }
-.ss-w-bi-more { align-self: flex-start; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11px; font-weight: 560; padding: 2px 0; cursor: pointer; }
-.ss-w-bi-more:hover { text-decoration: underline; }
+.ss-w-bi-row-lbl { font-size: 11.5px; color: var(--ss-w-faint); min-width: 0; }
+.ss-w-bi-row-num { font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; flex: none; color: var(--ss-w-ink); }
 .ss-w-bi-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }
-.ss-w-bi-scoped { display: flex; flex-direction: column; gap: 6px; }
-.ss-w-bi-scopes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
-.ss-w-bi-chip { font-size: 11px; font-weight: 550; border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 3px 10px; color: var(--ss-w-ink); background: var(--ss-w-bubble); cursor: pointer; }
-.ss-w-bi-chip[aria-pressed="true"] { color: #fff; background: var(--ss-w-accent); border-color: var(--ss-w-accent); }
+.ss-w-bi-scoped { display: flex; flex-direction: column; gap: 8px; }
+.ss-w-bi-scopes { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; align-self: flex-start; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 2px; }
+.ss-w-bi-chip { font-size: 11px; font-weight: 600; border: none; border-radius: 7px; padding: 4px 10px; color: var(--ss-w-faint); background: none; cursor: pointer; }
+.ss-w-bi-chip[aria-pressed="true"] { color: var(--ss-w-ink); background: var(--ss-w-panel); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
+
+/* market odds card */
+.ss-w-mocards { display: flex; flex-direction: column; gap: 7px; }
+.ss-w-mocard { 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-mo-head { display: flex; align-items: center; gap: 8px; }
+.ss-w-mo-market { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }
+.ss-w-mo-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-mo-fixture { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ss-w-faint); min-width: 0; }
+.ss-w-mo-comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-mo-rows { display: flex; flex-direction: column; gap: 4px; }
+.ss-w-mo-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--ss-w-line); }
+.ss-w-mo-row:last-child { border-bottom: none; }
+.ss-w-mo-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }
+.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); }
+.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); }
 
 /* action buttons */
 .ss-w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
@@ -935,7 +1081,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 `;
 
 // src/StatsWidget.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -984,7 +1130,7 @@ function StatsWidget(props) {
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ jsx16("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__ */ jsx16(ChatPanel, { controller, ui, slip }) : /* @__PURE__ */ jsx16(
+  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(
     ChatFab,
     {
       label: ui.launcherLabel,