@sensiblestats/widget-react 0.16.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @sensiblestats/widget-react
 
+## 0.18.0
+
+### Minor Changes
+
+- Fact-grounded club dashboard taps: per-fact renderers are now individually tappable and send their grounding back with the chat message.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.16.0
+
+## 0.17.0
+
+### Minor Changes
+
+- 5fd5471: Redesign the betting insight card: crest-led three-row layout with competition logo, kickoff time and a bar-chart reasoning strip.
+
+### Patch Changes
+
+- Updated dependencies [5fd5471]
+  - @sensiblestats/widget-sdk@0.15.0
+
 ## 0.16.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -39,6 +39,18 @@ module.exports = __toCommonJS(index_exports);
 var import_react12 = require("react");
 var import_widget_sdk5 = require("@sensiblestats/widget-sdk");
 
+// src/kickoff.ts
+function formatBettingKickoff(kickoffUtc, ui, locale, now = /* @__PURE__ */ new Date()) {
+  const at = new Date(kickoffUtc);
+  const intlLocale = locale === "tr" ? "tr-TR" : "en-GB";
+  const time = new Intl.DateTimeFormat(intlLocale, { hour: "2-digit", minute: "2-digit" }).format(at);
+  const atLocalDate = new Date(at.getFullYear(), at.getMonth(), at.getDate());
+  const nowLocalDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const dayDiff = Math.round((atLocalDate.getTime() - nowLocalDate.getTime()) / 864e5);
+  const dayLabel = dayDiff === 0 ? ui.today : dayDiff === 1 ? ui.tomorrow : new Intl.DateTimeFormat(intlLocale, { weekday: "short", day: "numeric", month: "short" }).format(at);
+  return { dayLabel, time };
+}
+
 // src/i18n.ts
 var STRINGS = {
   en: {
@@ -93,7 +105,10 @@ var STRINGS = {
     slipPriceNotAccepted: (from, to) => `Price moved to ${to} (was ${from}). Tap to add.`,
     slipLoginRequired: "Sign in to add to your slip",
     slipSuspended: "Market suspended",
-    slipFailed: "Couldn't add to slip. Try again."
+    slipFailed: "Couldn't add to slip. Try again.",
+    today: "Today",
+    tomorrow: "Tomorrow",
+    bettingKickoff: (kickoffUtc, now) => formatBettingKickoff(kickoffUtc, STRINGS.en, "en", now)
   },
   tr: {
     launcherLabel: "SensibleStats ile sohbet et",
@@ -147,7 +162,10 @@ var STRINGS = {
     slipPriceNotAccepted: (from, to) => `Oran ${to} oldu (\xF6nceki ${from}). Eklemek i\xE7in dokunun.`,
     slipLoginRequired: "Kupona eklemek i\xE7in giri\u015F yap\u0131n",
     slipSuspended: "Bu market ask\u0131ya al\u0131nd\u0131",
-    slipFailed: "Kupona eklenemedi. Tekrar deneyin."
+    slipFailed: "Kupona eklenemedi. Tekrar deneyin.",
+    today: "Bug\xFCn",
+    tomorrow: "Yar\u0131n",
+    bettingKickoff: (kickoffUtc, now) => formatBettingKickoff(kickoffUtc, STRINGS.tr, "tr", now)
   }
 };
 function resolveLocaleStrings(locale) {
@@ -214,7 +232,10 @@ function normalizeUi(cfg) {
     slipPriceNotAccepted: strings.slipPriceNotAccepted,
     slipLoginRequired: strings.slipLoginRequired,
     slipSuspended: strings.slipSuspended,
-    slipFailed: strings.slipFailed
+    slipFailed: strings.slipFailed,
+    today: strings.today,
+    tomorrow: strings.tomorrow,
+    bettingKickoff: strings.bettingKickoff
   };
 }
 function toClientOptions(cfg) {
@@ -403,7 +424,13 @@ function toInsightVM(insight) {
     oddsDecimal: typeof oddsValue === "number" && Number.isFinite(oddsValue) ? oddsValue : void 0,
     quotedAtUtc: str(insight.odds?.quotedAtUtc),
     previousOdds: previous !== void 0 && direction !== void 0 ? previous.toFixed(2) : void 0,
-    movementDirection: previous !== void 0 && direction !== void 0 ? direction : void 0
+    movementDirection: previous !== void 0 && direction !== void 0 ? direction : void 0,
+    homeTeamName: home,
+    awayTeamName: away,
+    homeCrest: str(insight.homeTeamImagePath),
+    awayCrest: str(insight.awayTeamImagePath),
+    competitionCrest: str(insight.competitionImagePath),
+    kickoffUtc: str(insight.kickoffUtc)
   };
 }
 function toSlipSelection(vm, conversationId) {
@@ -625,7 +652,7 @@ function useChatStream(conversation, starterTexts, greetingMessage) {
   const send = (0, import_react.useCallback)((text, opts) => {
     const trimmed = text.trim();
     if (!trimmed) return;
-    run({ message: trimmed, actionId: opts?.actionId }, opts?.displayText);
+    run({ message: trimmed, actionId: opts?.actionId, grounding: opts?.grounding }, opts?.displayText);
   }, [run]);
   const retry = (0, import_react.useCallback)(() => {
     const last = stateRef.current.lastUserInput;
@@ -993,10 +1020,21 @@ function ScopedStats({ scopes }) {
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatRows2, { stats: current.stats }, current.key)
   ] });
 }
+function hasStatsContent(it) {
+  return !!it.scopes && it.scopes.length >= 2 || it.stats.length > 0;
+}
+function initials2(name) {
+  return (name ?? "").trim().slice(0, 1).toUpperCase() || "?";
+}
+function Crest2({ url, name, kind }) {
+  const cls = kind === "comp" ? "ss-w-bi-comp-logo" : "ss-w-bi-crest";
+  if (url) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cls, style: { backgroundImage: `url(${url})` }, "aria-hidden": "true" });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${cls} ss-w-bi-crest-mono`, "aria-hidden": "true", children: initials2(name) });
+}
 function StatsDisclosure({ it, ui }) {
   const [open, setOpen] = (0, import_react5.useState)(false);
   const hasScopes = !!it.scopes && it.scopes.length >= 2;
-  const hasStats = hasScopes || it.stats.length > 0;
+  const hasStats = hasStatsContent(it);
   if (!hasStats) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-bi-stats", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -1017,24 +1055,42 @@ function StatsDisclosure({ it, ui }) {
 }
 function InsightCard({ it, ui, slip }) {
   const live = it.isLive || it.phase === "live";
+  const kickoff = it.kickoffUtc && ui?.bettingKickoff ? ui.bettingKickoff(it.kickoffUtc) : void 0;
+  const hasNamedTeams = !!it.homeTeamName && !!it.awayTeamName;
+  const showHeader = !!it.competition || live || !!kickoff;
+  const showReason = !!it.text || hasStatsContent(it);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-binsight", children: [
-    live || it.isMarketFloor ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-bi-status", children: [
-      live ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ss-w-bi-live", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
-        ui?.liveLabel ?? "Live"
-      ] }) : null,
-      it.isMarketFloor ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-floor", children: ui?.marketFloorLabel ?? "Market price \xB7 not a value pick" }) : null
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-bi-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ss-w-bi-mkt", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-market", children: it.market }),
-        it.selection ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-sel", children: it.selection }) : null,
-        it.fixture || it.competition ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ss-w-bi-match", children: [
-          it.fixture ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-fixture", children: it.fixture }) : null,
-          it.competition ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-comp", children: it.competition }) : null
+    showHeader ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-bi-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-header-left", children: it.competition ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Crest2, { kind: "comp", url: it.competitionCrest, name: it.competition }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-comp", children: it.competition })
+      ] }) : null }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ss-w-bi-header-right", children: [
+        live ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ss-w-bi-live", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
+          ui?.liveLabel ?? "Live"
+        ] }) : null,
+        kickoff ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ss-w-bi-kick", children: [
+          kickoff.dayLabel,
+          " ",
+          kickoff.time
         ] }) : null
-      ] }),
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-bi-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ss-w-bi-fixture", children: hasNamedTeams ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Crest2, { kind: "team", url: it.homeCrest, name: it.homeTeamName }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-team", children: it.homeTeamName }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-vs", "aria-hidden": "true", children: "vs" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-team", children: it.awayTeamName }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Crest2, { kind: "team", url: it.awayCrest, name: it.awayTeamName })
+      ] }) : it.fixture ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-fixture-txt", children: it.fixture }) : null }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-bi-action", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ss-w-bi-mkt", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-market", children: it.market }),
+          it.selection ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-sel", children: it.selection }) : null
+        ] }),
+        it.isMarketFloor ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-floor", children: ui?.marketFloorLabel ?? "Market price \xB7 not a value pick" }) : null,
         it.odds ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ss-w-bi-odds", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-odds-cap", children: ui?.oddsLabel ?? "Odds" }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("b", { children: it.odds }),
@@ -1044,8 +1100,13 @@ function InsightCard({ it, ui, slip }) {
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AddToSlipButton, { it, slip, ui })
       ] })
     ] }),
-    it.text ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "ss-w-bi-text", children: it.text }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatsDisclosure, { it, ui }),
+    showReason ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-bi-reason", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ss-w-bi-chart", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ss-w-bi-reason-body", children: [
+        it.text ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "ss-w-bi-text", children: it.text }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StatsDisclosure, { it, ui })
+      ] })
+    ] }) : null,
     it.disclaimer ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null
   ] });
 }
@@ -1233,13 +1294,13 @@ function GreetingHeaderBlock({ block }) {
 // src/components/club-dashboard/FixtureHeroBlock.tsx
 var import_react7 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-function initials2(name) {
+function initials3(name) {
   return name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
 }
-function Crest2({ url, name }) {
+function Crest3({ url, name }) {
   const [broken, setBroken] = (0, import_react7.useState)(false);
   if (!url || broken) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-cdash-crest ss-w-cdash-crest--fallback", "aria-hidden": "true", children: initials2(name) });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-cdash-crest ss-w-cdash-crest--fallback", "aria-hidden": "true", children: initials3(name) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("img", { className: "ss-w-cdash-crest", src: url, alt: "", "aria-hidden": "true", onError: () => setBroken(true) });
 }
@@ -1250,18 +1311,18 @@ function FixtureHeroBlock({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-cdash-fixture", children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-cdash-tie", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Crest2, { url: block.homeCrestUrl, name: block.homeName }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Crest3, { url: block.homeCrestUrl, name: block.homeName }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-cdash-team", children: block.homeName }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-cdash-vs", children: "v" }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-cdash-team", children: block.awayName }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Crest2, { url: block.awayCrestUrl, name: block.awayName })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Crest3, { url: block.awayCrestUrl, name: block.awayName })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-cdash-fixture-meta", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-cdash-kickoff", children: ui.clubKickoff(block.kickoffUnix * 1e3) }),
       block.venue ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-cdash-venue", children: block.venue }) : null,
       block.competition ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-cdash-comp", children: block.competition }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-cdash-cta", onClick: () => onAction(block.ctaActionValue, block.ctaLabel), children: block.ctaLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-cdash-cta", onClick: () => onAction(block.ctaActionValue, void 0, block.ctaLabel), children: block.ctaLabel })
   ] });
 }
 
@@ -1285,11 +1346,28 @@ function MatchPreviewBlock({
   ui,
   onAction
 }) {
-  if (block.lines.length === 0) return null;
+  if (block.facts.length === 0) return null;
   const heading = ui.clubMatchPreviewHeading;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("button", { type: "button", className: "ss-w-cdash-lines", onClick: () => onAction(block.actionValue, heading), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ss-w-cdash-lines", children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ss-w-cdash-lines-heading", children: heading }),
-    block.lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: line }, i))
+    block.facts.map(
+      (f, i) => f.entityRef ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "ss-w-cdash-fact",
+          onClick: () => onAction(f.question ?? f.sentence, { ...f.entityRef, subject: f.sentence, personaHint: "club" }),
+          children: [
+            f.sentence,
+            f.label ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "ss-w-cdash-fact-label", children: [
+              " ",
+              f.label
+            ] }) : null
+          ]
+        },
+        i
+      ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: f.sentence }, i)
+    )
   ] });
 }
 
@@ -1300,11 +1378,28 @@ function TeamDnaBlock({
   ui,
   onAction
 }) {
-  if (block.lines.length === 0) return null;
+  if (block.facts.length === 0) return null;
   const heading = ui.clubTeamDnaHeading;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { type: "button", className: "ss-w-cdash-lines", onClick: () => onAction(block.actionValue, heading), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ss-w-cdash-lines", children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-cdash-lines-heading", children: heading }),
-    block.lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: line }, i))
+    block.facts.map(
+      (f, i) => f.entityRef ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "ss-w-cdash-fact",
+          onClick: () => onAction(f.question ?? f.sentence, { ...f.entityRef, subject: f.sentence, personaHint: "club" }),
+          children: [
+            f.sentence,
+            f.label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "ss-w-cdash-fact-label", children: [
+              " ",
+              f.label
+            ] }) : null
+          ]
+        },
+        i
+      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: f.sentence }, i)
+    )
   ] });
 }
 
@@ -1439,7 +1534,7 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
               send(tile.actionValue, { displayText: tile.title });
               if (m.role === "assistant" && m.greetingDashboard) onDashboardTap?.(tile, index, m.greetingDashboard.layout);
             },
-            onClubAction: (actionValue, displayText) => send(actionValue, { displayText }),
+            onClubAction: (message, grounding, displayText) => send(message, { grounding, displayText: displayText ?? message }),
             ui,
             slip
           },
@@ -1648,26 +1743,51 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* betting insights */
 .ss-w-binsights { display: flex; flex-direction: column; gap: 7px; }
-.ss-w-binsight { 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-bi-status { display: flex; align-items: center; gap: 6px; min-width: 0; }
-.ss-w-bi-fixture { font-size: 11px; color: var(--ss-w-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ss-w-bi-comp { font-size: 10.5px; color: var(--ss-w-faint); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ss-w-binsight { 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: 8px; }
+
+/* row 1: competition logo + name on the left, live badge + kickoff on the right */
+.ss-w-bi-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }
+.ss-w-bi-header-left { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.ss-w-bi-header-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }
+.ss-w-bi-comp { font-size: 10.5px; color: var(--ss-w-faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ss-w-bi-kick { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; flex: none; }
 .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-floor { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; flex: none; }
-.ss-w-bi-head { display: flex; align-items: flex-start; gap: 10px; }
-.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-match { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-top: 5px; }
-.ss-w-bi-action { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
+.ss-w-bi-floor { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; align-self: flex-start; flex: none; }
+
+/* crests -- CSS background-image on a span, never <img> (matches .ss-w-ecard-crest precedent) */
+.ss-w-bi-comp-logo { width: 15px; height: 15px; flex: none; display: block; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center; }
+.ss-w-bi-crest { width: 22px; height: 22px; flex: none; display: block; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); }
+.ss-w-bi-crest-mono { display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }
+
+/* row 2: crest-flanked fixture on the left, boxed action panel on the right */
+.ss-w-bi-body { display: flex; align-items: center; gap: 10px; }
+.ss-w-bi-fixture { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 12px; font-weight: 650; color: var(--ss-w-ink); }
+.ss-w-bi-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-bi-vs { font-size: 10px; font-weight: 600; color: var(--ss-w-faint); flex: none; }
+.ss-w-bi-fixture-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-bi-action { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 10px; }
 .ss-w-bi-action .ss-w-slip > button { flex: 1; text-align: center; }
 /* The action column is narrow; let its toast size to its own text and anchor to the card's right edge instead of being clipped to the button width. */
 .ss-w-bi-action .ss-w-toast { left: auto; right: 0; width: max-content; max-width: 210px; white-space: normal; }
+.ss-w-bi-mkt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.ss-w-bi-market { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
+.ss-w-bi-sel { font-size: 11.5px; line-height: 1.3; color: var(--ss-w-faint); }
 .ss-w-bi-odds { 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); }
+
+/* row 3: bar-chart glyph + reasoning prose + stats-expander chevron, in a subtle strip */
+.ss-w-bi-reason { display: flex; align-items: flex-start; gap: 8px; background: var(--ss-w-bubble); border-radius: 10px; padding: 8px 10px; }
+.ss-w-bi-chart { flex: none; width: 13px; height: 12px; margin-top: 2px; opacity: .55;
+  background:
+    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) left / 3px 55% no-repeat,
+    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) center / 3px 100% no-repeat,
+    linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) right / 3px 75% no-repeat;
+  background-position: left bottom, center bottom, right bottom;
+}
+.ss-w-bi-reason-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
 .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; }
@@ -1864,9 +1984,12 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-cdash-pill--d { background: var(--ss-w-faint); }
 .ss-w-cdash-pill--l { background: color-mix(in srgb, var(--ss-w-neg) 88%, black); }
 
-.ss-w-cdash-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-left: 3px solid var(--ss-w-accent); border-radius: 12px; padding: 10px 12px; font: inherit; cursor: pointer; }
+.ss-w-cdash-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-left: 3px solid var(--ss-w-accent); border-radius: 12px; padding: 10px 12px; }
 .ss-w-cdash-lines-heading { font-size: 12px; font-weight: 700; color: var(--ss-w-accent); }
-.ss-w-cdash-lines p { font-size: 12px; line-height: 1.4; color: var(--ss-w-ink); }
+.ss-w-cdash-lines p { font-size: 12px; line-height: 1.4; color: var(--ss-w-ink); margin: 0; }
+.ss-w-cdash-fact { display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; line-height: 1.4; color: var(--ss-w-ink); background: none; border: none; padding: 0; cursor: pointer; }
+.ss-w-cdash-fact:hover, .ss-w-cdash-fact:focus-visible { color: var(--ss-w-accent); text-decoration: underline; }
+.ss-w-cdash-fact-label { font-size: 11px; font-weight: 700; color: var(--ss-w-accent); }
 
 .ss-w-cdash-cd { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 10px 12px; text-align: center; }
 .ss-w-cdash-cd-clock { display: flex; align-items: baseline; justify-content: center; gap: 2px; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700; font-size: 18px; color: var(--ss-w-ink); }