@sensiblestats/widget-react 0.19.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @sensiblestats/widget-react
 
+## 0.21.0
+
+### Minor Changes
+
+- Match Preview card: deterministic matchPreviewCard block type (sdk) + renderer (react).
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.18.0
+
+## 0.20.0
+
+### Minor Changes
+
+- Club-dashboard taps (FixtureHero CTA, MatchPreview/TeamDna facts) now send the backend's opaque `actionRef` instead of a prose command, and `useChatStream` gains a client-side fallback timeout so the panel can no longer hang forever waiting for a `turn_complete`/`error` that never arrives.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.17.0
+
 ## 0.19.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -625,21 +625,42 @@ function reducer(state, action) {
 }
 
 // src/useChatStream.ts
+var STREAM_FALLBACK_TIMEOUT_MS = 3e4;
 function useChatStream(conversation, starterTexts, greetingMessage) {
   const seed = (0, import_react.useMemo)(() => initialState(starterTexts.map(chipFromText)), []);
   const [state, dispatch] = (0, import_react.useReducer)(reducer, seed);
   const idRef = (0, import_react.useRef)(0);
   const handleRef = (0, import_react.useRef)(null);
+  const fallbackTimerRef = (0, import_react.useRef)(null);
   const stateRef = (0, import_react.useRef)(state);
   stateRef.current = state;
   const greetedRef = (0, import_react.useRef)(false);
   const nextId = () => `m${idRef.current++}`;
+  const clearFallbackTimer = (0, import_react.useCallback)(() => {
+    if (fallbackTimerRef.current != null) {
+      clearTimeout(fallbackTimerRef.current);
+      fallbackTimerRef.current = null;
+    }
+  }, []);
+  const armFallbackTimer = (0, import_react.useCallback)((onFire) => {
+    clearFallbackTimer();
+    fallbackTimerRef.current = setTimeout(() => {
+      fallbackTimerRef.current = null;
+      handleRef.current?.cancel();
+      handleRef.current = null;
+      onFire();
+    }, STREAM_FALLBACK_TIMEOUT_MS);
+  }, [clearFallbackTimer]);
   const consume = (0, import_react.useCallback)((handle, onError) => {
     ;
     (async () => {
       try {
-        for await (const event of handle) dispatch({ kind: "EVENT", event });
+        for await (const event of handle) {
+          dispatch({ kind: "EVENT", event });
+          if (event.type === "turn_complete" || event.type === "error") clearFallbackTimer();
+        }
       } catch (err) {
+        if (handleRef.current === handle) clearFallbackTimer();
         if (err instanceof import_widget_sdk3.WidgetSdkError) onError(err);
         else if (err?.name === "AbortError") {
         } else throw err;
@@ -647,18 +668,23 @@ function useChatStream(conversation, starterTexts, greetingMessage) {
         if (handleRef.current === handle) handleRef.current = null;
       }
     })();
-  }, []);
+  }, [clearFallbackTimer]);
   const run = (0, import_react.useCallback)((input, displayText) => {
     handleRef.current?.cancel();
+    clearFallbackTimer();
     dispatch({ kind: "USER_SENT", input, userId: nextId(), assistantId: nextId(), displayText });
     const handle = conversation.send(input);
     handleRef.current = handle;
+    armFallbackTimer(() => {
+      dispatch({ kind: "STOP" });
+      dispatch({ kind: "STREAM_ERROR", error: new import_widget_sdk3.WidgetSdkError("No response received in time", "timeout") });
+    });
     consume(handle, (err) => dispatch({ kind: "STREAM_ERROR", error: err }));
-  }, [conversation, consume]);
+  }, [conversation, consume, clearFallbackTimer, armFallbackTimer]);
   const send = (0, import_react.useCallback)((text, opts) => {
     const trimmed = text.trim();
     if (!trimmed) return;
-    run({ message: trimmed, actionId: opts?.actionId, grounding: opts?.grounding }, opts?.displayText);
+    run({ message: trimmed, actionId: opts?.actionId, actionRef: opts?.actionRef }, opts?.displayText);
   }, [run]);
   const retry = (0, import_react.useCallback)(() => {
     const last = stateRef.current.lastUserInput;
@@ -670,25 +696,29 @@ function useChatStream(conversation, starterTexts, greetingMessage) {
     greetedRef.current = true;
     try {
       handleRef.current?.cancel();
+      clearFallbackTimer();
       dispatch({ kind: "GREETING_SENT", assistantId: nextId() });
       const handle = conversation.send({ message });
       handleRef.current = handle;
+      armFallbackTimer(() => dispatch({ kind: "STOP" }));
       consume(handle, () => dispatch({ kind: "STOP" }));
     } catch {
       dispatch({ kind: "STOP" });
     }
-  }, [greetingMessage, conversation, consume]);
+  }, [greetingMessage, conversation, consume, clearFallbackTimer, armFallbackTimer]);
   const open = (0, import_react.useCallback)(() => dispatch({ kind: "OPEN" }), []);
   const close = (0, import_react.useCallback)(() => {
     handleRef.current?.cancel();
     handleRef.current = null;
+    clearFallbackTimer();
     dispatch({ kind: "CLOSE" });
-  }, []);
+  }, [clearFallbackTimer]);
   const stop = (0, import_react.useCallback)(() => {
     handleRef.current?.cancel();
     handleRef.current = null;
+    clearFallbackTimer();
     dispatch({ kind: "STOP" });
-  }, []);
+  }, [clearFallbackTimer]);
   const toggle = (0, import_react.useCallback)(() => {
     if (stateRef.current.isOpen) close();
     else open();
@@ -1353,25 +1383,31 @@ function FixtureHeroBlock({
       block.venue ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ss-w-cdash-venue", children: block.venue }) : null,
       block.competition ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ss-w-cdash-comp", children: block.competition }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "ss-w-cdash-cta", onClick: () => onAction(block.ctaActionValue, void 0, block.ctaLabel), children: block.ctaLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "ss-w-cdash-cta", onClick: () => onAction(block.ctaLabel, { actionRef: block.ctaActionRef }), children: block.ctaLabel })
   ] });
 }
 
-// src/components/club-dashboard/FormGuideBlock.tsx
+// src/components/club-dashboard/ResultPills.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
+function ResultPills({ results }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: results.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: `ss-w-cdash-pill ss-w-cdash-pill--${r.toLowerCase()}`, children: r }, i)) });
+}
+
+// src/components/club-dashboard/FormGuideBlock.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function FormGuideBlock({ block }) {
   if (block.rows.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ss-w-cdash-form", children: block.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ss-w-cdash-form-row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "ss-w-cdash-form-name", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "ss-w-cdash-form", children: block.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ss-w-cdash-form-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "ss-w-cdash-form-name", children: [
       row.name,
       row.position != null ? ` #${row.position}` : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ss-w-cdash-form-pills", children: row.last5.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: `ss-w-cdash-pill ss-w-cdash-pill--${r.toLowerCase()}`, children: r }, i)) })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ss-w-cdash-form-pills", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ResultPills, { results: row.last5 }) })
   ] }, row.name)) });
 }
 
 // src/components/club-dashboard/MatchPreviewBlock.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function MatchPreviewBlock({
   block,
   ui,
@@ -1379,31 +1415,65 @@ function MatchPreviewBlock({
 }) {
   if (block.facts.length === 0) return null;
   const heading = ui.clubMatchPreviewHeading;
-  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 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ss-w-cdash-lines", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ss-w-cdash-lines-heading", children: heading }),
     block.facts.map(
-      (f, i) => f.entityRef ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      (f, i) => f.actionRef ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "button",
         {
           type: "button",
           className: "ss-w-cdash-fact",
-          onClick: () => onAction(f.question ?? f.sentence, { ...f.entityRef, subject: f.sentence, personaHint: "club" }),
+          onClick: () => onAction(f.label ?? f.sentence, { actionRef: f.actionRef }),
           children: [
             f.sentence,
-            f.label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "ss-w-cdash-fact-label", children: [
+            f.label ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "ss-w-cdash-fact-label", children: [
               " ",
               f.label
             ] }) : null
           ]
         },
         i
-      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { children: f.sentence }, i)
+      ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: f.sentence }, i)
     )
   ] });
 }
 
+// src/components/club-dashboard/MatchPreviewCardBlock.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function position(p) {
+  return p != null ? `#${p}` : "\u2014";
+}
+function MatchPreviewCardBlock({ block }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ss-w-cdash-preview", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ss-w-cdash-preview-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-team", children: block.homeName }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-vs", children: "v" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-team", children: block.awayName })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ss-w-cdash-preview-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-preview-value", children: position(block.homePosition) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-preview-label", children: block.tableLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-preview-value", children: position(block.awayPosition) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ss-w-cdash-preview-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-preview-pills", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ResultPills, { results: block.homeLast5 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-preview-label", children: block.last5Label }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-preview-pills", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ResultPills, { results: block.awayLast5 }) })
+    ] }),
+    block.edgeTeamName ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ss-w-cdash-preview-edge", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": "true", children: "\u25B8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("strong", { children: block.edgeTeamName }),
+      block.edgeReason ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { children: [
+        " \u2014 ",
+        block.edgeReason
+      ] }) : null
+    ] }) : null,
+    block.h2HLines.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ss-w-cdash-preview-h2h", children: block.h2HLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: line }, i)) }) : null
+  ] });
+}
+
 // src/components/club-dashboard/TeamDnaBlock.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function TeamDnaBlock({
   block,
   ui,
@@ -1411,32 +1481,32 @@ function TeamDnaBlock({
 }) {
   if (block.facts.length === 0) return null;
   const heading = ui.clubTeamDnaHeading;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ss-w-cdash-lines", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ss-w-cdash-lines-heading", children: heading }),
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "ss-w-cdash-lines", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ss-w-cdash-lines-heading", children: heading }),
     block.facts.map(
-      (f, i) => f.entityRef ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      (f, i) => f.actionRef ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "button",
         {
           type: "button",
           className: "ss-w-cdash-fact",
-          onClick: () => onAction(f.question ?? f.sentence, { ...f.entityRef, subject: f.sentence, personaHint: "club" }),
+          onClick: () => onAction(f.label ?? f.sentence, { actionRef: f.actionRef }),
           children: [
             f.sentence,
-            f.label ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "ss-w-cdash-fact-label", children: [
+            f.label ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "ss-w-cdash-fact-label", children: [
               " ",
               f.label
             ] }) : null
           ]
         },
         i
-      ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: f.sentence }, i)
+      ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { children: f.sentence }, i)
     )
   ] });
 }
 
 // src/components/club-dashboard/CountdownBlock.tsx
 var import_react9 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var DAY_MS = 24 * 3600 * 1e3;
 function pad2(n) {
   return String(n).padStart(2, "0");
@@ -1461,30 +1531,31 @@ function CountdownBlock({ block, ui }) {
   if (remainingMs <= 0) return null;
   if (remainingMs > DAY_MS) return null;
   const { h, m, s } = splitRemaining(remainingMs);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ss-w-cdash-cd", "aria-label": ui.clubKickoffAria(block.kickoffUnix * 1e3), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ss-w-cdash-cd-clock", "aria-hidden": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-cd-h", children: h }),
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ss-w-cdash-cd", "aria-label": ui.clubKickoffAria(block.kickoffUnix * 1e3), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ss-w-cdash-cd-clock", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "ss-w-cdash-cd-h", children: h }),
       "h",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-cd-m", children: m }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "ss-w-cdash-cd-m", children: m }),
       "m",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "ss-w-cdash-cd-s", children: s }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "ss-w-cdash-cd-s", children: s }),
       "s"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ss-w-cdash-cd-label", children: ui.clubCountdownLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ss-w-cdash-cd-label", children: ui.clubCountdownLabel })
   ] });
 }
 
 // src/components/club-dashboard/ClubDashboard.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var CLUB_BLOCK_REGISTRY = {
-  greetingHeader: ({ block }) => block.type === "greetingHeader" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GreetingHeaderBlock, { block }) : null,
-  fixtureHero: ({ block, ui, onAction }) => block.type === "fixtureHero" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FixtureHeroBlock, { block, ui, onAction }) : null,
-  formGuide: ({ block, ui }) => block.type === "formGuide" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FormGuideBlock, { block, ui }) : null,
-  matchPreview: ({ block, ui, onAction }) => block.type === "matchPreview" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MatchPreviewBlock, { block, ui, onAction }) : null,
-  teamDna: ({ block, ui, onAction }) => block.type === "teamDna" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TeamDnaBlock, { block, ui, onAction }) : null,
-  countdown: ({ block, ui }) => block.type === "countdown" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CountdownBlock, { block, ui }) : null
+  greetingHeader: ({ block }) => block.type === "greetingHeader" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GreetingHeaderBlock, { block }) : null,
+  fixtureHero: ({ block, ui, onAction }) => block.type === "fixtureHero" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FixtureHeroBlock, { block, ui, onAction }) : null,
+  formGuide: ({ block, ui }) => block.type === "formGuide" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FormGuideBlock, { block, ui }) : null,
+  matchPreview: ({ block, ui, onAction }) => block.type === "matchPreview" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MatchPreviewBlock, { block, ui, onAction }) : null,
+  matchPreviewCard: ({ block, ui }) => block.type === "matchPreviewCard" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MatchPreviewCardBlock, { block, ui }) : null,
+  teamDna: ({ block, ui, onAction }) => block.type === "teamDna" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TeamDnaBlock, { block, ui, onAction }) : null,
+  countdown: ({ block, ui }) => block.type === "countdown" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CountdownBlock, { block, ui }) : null
 };
 function ClubDashboard({
   dashboard,
@@ -1492,39 +1563,39 @@ function ClubDashboard({
   onAction
 }) {
   if (!dashboard.blocks.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ss-w-cdash", children: dashboard.blocks.map((block, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ss-w-cdash", children: dashboard.blocks.map((block, i) => {
     const Comp = Object.prototype.hasOwnProperty.call(CLUB_BLOCK_REGISTRY, block.type) ? CLUB_BLOCK_REGISTRY[block.type] : void 0;
     if (!Comp) {
       console.warn(`[club-dashboard] no renderer for block type "${block.type}"`);
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ss-w-cdash-block", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Comp, { block, ui, onAction }) }, i);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ss-w-cdash-block", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Comp, { block, ui, onAction }) }, i);
   }) });
 }
 
 // src/components/ChatMessage.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ChatMessage({ message, disabled, onAct, onTap, onClubAction, ui, slip }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
-    message.text && !message.greetingDashboard && !message.clubDashboard ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Markdown, { text: message.text }) : null,
-    message.greetingDashboard ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GreetingDashboard, { dashboard: message.greetingDashboard, onTap }) : null,
-    message.clubDashboard && ui ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ClubDashboard, { dashboard: message.clubDashboard, ui, onAction: onClubAction }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BettingInsightList, { insights: message.insights, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(OddsMovementCardList, { cards: message.oddsMovement, ui }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
+    message.text && !message.greetingDashboard && !message.clubDashboard ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Markdown, { text: message.text }) : null,
+    message.greetingDashboard ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GreetingDashboard, { dashboard: message.greetingDashboard, onTap }) : null,
+    message.clubDashboard && ui ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ClubDashboard, { dashboard: message.clubDashboard, ui, onAction: onClubAction }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BettingInsightList, { insights: message.insights, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(OddsMovementCardList, { cards: message.oddsMovement, ui }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
   ] });
 }
 
 // src/components/IntentChips.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function IntentChips({ chips, onPick }) {
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
 }
 
 // src/scroll.ts
@@ -1534,7 +1605,7 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 }
 
 // src/components/MessageList.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function MessageList({ controller, ui, slip, onDashboardTap }) {
   const { state, send } = controller;
   const listRef = (0, import_react10.useRef)(null);
@@ -1545,7 +1616,7 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
   }, [state.messages, state.status]);
   const hasUserMessage = state.messages.some((m) => m.role === "user");
   const hasDashboard = state.messages.some((m) => m.role === "assistant" && m.greetingDashboard);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "div",
     {
       className: "ss-w-list",
@@ -1555,7 +1626,7 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
         if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
       children: [
-        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           ChatMessage,
           {
             message: m,
@@ -1565,21 +1636,21 @@ 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: (message, grounding, displayText) => send(message, { grounding, displayText: displayText ?? message }),
+            onClubAction: (label, opts) => send(label, { actionRef: opts.actionRef }),
             ui,
             slip
           },
           m.id
         )),
-        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
         } }) : null,
-        state.status ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
-        state.error ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
+        state.status ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
+        state.error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
         ] }) : null,
-        !hasUserMessage && !hasDashboard ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: endRef })
+        !hasUserMessage && !hasDashboard ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: endRef })
       ]
     }
   );
@@ -1587,7 +1658,7 @@ function MessageList({ controller, ui, slip, onDashboardTap }) {
 
 // src/components/ChatInput.tsx
 var import_react11 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
   const [value, setValue] = (0, import_react11.useState)("");
   const submit = () => {
@@ -1602,14 +1673,14 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
       submit();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ss-w-input", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
-    streaming ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SendIcon, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ss-w-input", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
+    streaming ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SendIcon, {}) })
   ] });
 }
 
 // src/components/ChatPanel.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
   const [modal, setModal] = (0, import_react12.useState)(false);
@@ -1633,10 +1704,10 @@ function ChatPanel({ controller, ui, slip, onDashboardTap }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MessageList, { controller, ui, slip, onDashboardTap }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime30.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MessageList, { controller, ui, slip, onDashboardTap }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
   ] });
 }
 
@@ -2028,10 +2099,27 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .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); }
 .ss-w-cdash-cd-h, .ss-w-cdash-cd-m, .ss-w-cdash-cd-s { color: var(--ss-w-accent); }
 .ss-w-cdash-cd-label { font-size: 11px; font-weight: 600; color: var(--ss-w-faint); }
+
+.ss-w-cdash-preview { display: flex; flex-direction: column; gap: 8px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 10px 12px; }
+.ss-w-cdash-preview-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 6px; }
+.ss-w-cdash-preview-header .ss-w-cdash-team:first-child { justify-self: start; text-align: left; }
+.ss-w-cdash-preview-header .ss-w-cdash-team:last-child { justify-self: end; text-align: right; }
+.ss-w-cdash-preview-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
+.ss-w-cdash-preview-label { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); text-align: center; text-transform: uppercase; letter-spacing: 0.03em; }
+.ss-w-cdash-preview-value { font-size: 12px; font-weight: 700; color: var(--ss-w-ink); text-align: center; }
+.ss-w-cdash-preview-pills { display: flex; align-items: center; justify-content: center; gap: 3px; }
+.ss-w-cdash-preview-row:first-of-type .ss-w-cdash-preview-value { justify-self: start; }
+.ss-w-cdash-preview-row:first-of-type .ss-w-cdash-preview-value:last-child { justify-self: end; }
+.ss-w-cdash-preview-row:last-of-type .ss-w-cdash-preview-pills:first-child { justify-self: start; }
+.ss-w-cdash-preview-row:last-of-type .ss-w-cdash-preview-pills:last-child { justify-self: end; }
+.ss-w-cdash-preview-edge { display: flex; align-items: baseline; gap: 4px; font-size: 12px; line-height: 1.4; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 10%, transparent); border-radius: 8px; padding: 6px 8px; }
+.ss-w-cdash-preview-edge strong { color: var(--ss-w-ink); }
+.ss-w-cdash-preview-h2h { display: flex; flex-direction: column; gap: 2px; }
+.ss-w-cdash-preview-h2h p { font-size: 11.5px; line-height: 1.4; color: var(--ss-w-faint); margin: 0; }
 `;
 
 // src/StatsWidget.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
@@ -2084,7 +2172,7 @@ function StatsWidget(props) {
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)(ChatPanel, { controller, ui, slip, onDashboardTap }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsx)(ChatPanel, { controller, ui, slip, onDashboardTap }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     ChatFab,
     {
       label: ui.launcherLabel,