@sensiblestats/widget-react 0.13.1 → 0.14.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @sensiblestats/widget-react
 
+## 0.14.1
+
+### Patch Changes
+
+- 5dce658: Greeting dashboard UX refinements from design review: tile icons are now
+  emoji (matching the betting mockup) rendered at a larger size instead of the
+  small monochrome line glyphs; the greeting bubble text is suppressed when a
+  dashboard is present so the question shows once (as the dashboard title)
+  rather than twice; and the discovery full-span trends tile aligns its icon
+  and title on a single row.
+
+## 0.14.0
+
+### Minor Changes
+
+- Render the greeting dashboard carried on `turn_complete`: tile grid, CSS, and tap handling that turns a tile into a follow-up chat message. Older servers that never send `dashboard` render nothing new. `widget-embed` also now generates and persists a first-party anonymous visitor id (localStorage, falls back to in-memory) so greeting dashboards can be tiered for anonymous visitors.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.12.0
+
 ## 0.13.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/StatsWidget.tsx
 var import_react10 = require("react");
-var import_widget_sdk4 = require("@sensiblestats/widget-sdk");
+var import_widget_sdk5 = require("@sensiblestats/widget-sdk");
 
 // src/i18n.ts
 var STRINGS = {
@@ -205,6 +205,27 @@ function toUserContext(cfg) {
   return cfg.userContext && Object.keys(cfg.userContext).length > 0 ? cfg.userContext : void 0;
 }
 
+// src/dashboardTap.ts
+var import_widget_sdk = require("@sensiblestats/widget-sdk");
+function isSignalEntityType(value) {
+  return Object.prototype.hasOwnProperty.call(import_widget_sdk.ENTITY_TYPE_CODES, value);
+}
+function createDashboardTapSignal(sendSignal) {
+  return (tile, index, layout) => {
+    if (!isSignalEntityType(tile.signal.entityType)) return;
+    try {
+      void sendSignal({
+        signalType: "MarketView",
+        entityType: tile.signal.entityType,
+        entityId: tile.signal.entityId,
+        dashboardLayout: layout,
+        tileIndex: index
+      }).catch(() => void 0);
+    } catch {
+    }
+  };
+}
+
 // src/theme.ts
 function themeAttrs(ui) {
   const style = {
@@ -218,10 +239,10 @@ function themeAttrs(ui) {
 
 // src/useChatStream.ts
 var import_react = require("react");
-var import_widget_sdk2 = require("@sensiblestats/widget-sdk");
+var import_widget_sdk3 = require("@sensiblestats/widget-sdk");
 
 // src/reducer.ts
-var import_widget_sdk = require("@sensiblestats/widget-sdk");
+var import_widget_sdk2 = require("@sensiblestats/widget-sdk");
 
 // src/chart.ts
 var CHART_VIEW_W = 320;
@@ -507,7 +528,11 @@ function applyEvent(state, event) {
         actionsLoading: false,
         popupText,
         conversationId: event.data.conversationId ?? state.conversationId,
-        messages: mapActive(state, (t) => ({ ...t, done: true }))
+        messages: mapActive(state, (t) => ({
+          ...t,
+          done: true,
+          greetingDashboard: event.data.dashboard ?? void 0
+        }))
       };
     }
     case "error": {
@@ -559,7 +584,7 @@ function useChatStream(conversation, starterTexts, greetingMessage) {
       try {
         for await (const event of handle) dispatch({ kind: "EVENT", event });
       } catch (err) {
-        if (err instanceof import_widget_sdk2.WidgetSdkError) onError(err);
+        if (err instanceof import_widget_sdk3.WidgetSdkError) onError(err);
         else if (err?.name === "AbortError") {
         } else throw err;
       } finally {
@@ -630,6 +655,28 @@ function SendIcon() {
 function CloseIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2" }) });
 }
+function ChevronIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+}
+var DASHBOARD_EMOJI = {
+  football: "\u26BD",
+  "goal-net": "\u{1F945}",
+  btts: "\u{1F91D}",
+  card: "\u{1F7E8}",
+  "corner-flag": "\u{1F6A9}",
+  player: "\u{1F464}",
+  target: "\u{1F3AF}",
+  trophy: "\u{1F3C6}",
+  "chart-line": "\u{1F4C8}",
+  "chart-bar": "\u{1F4CA}",
+  chat: "\u{1F4AC}",
+  fire: "\u{1F525}",
+  sparkle: "\u2728"
+};
+function DashboardIcon({ name }) {
+  const glyph = Object.prototype.hasOwnProperty.call(DASHBOARD_EMOJI, name) ? DASHBOARD_EMOJI[name] : DASHBOARD_EMOJI.target;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ss-w-dash-emoji", "aria-hidden": "true", children: glyph });
+}
 
 // src/components/GreetingBubble.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -788,7 +835,7 @@ var import_react5 = require("react");
 
 // src/components/AddToSlipButton.tsx
 var import_react4 = require("react");
-var import_widget_sdk3 = require("@sensiblestats/widget-sdk");
+var import_widget_sdk4 = require("@sensiblestats/widget-sdk");
 
 // src/slip.ts
 var ADD_TO_SLIP_TIMEOUT_MS = 1e4;
@@ -851,7 +898,7 @@ function SlipButton({ selection, shownOdds, marketName, slip, ui }) {
     setPending(true);
     try {
       const raw = await withTimeout(Promise.resolve(handler(selection)));
-      if (raw != null && !(0, import_widget_sdk3.isAddToSlipResult)(raw)) throw new Error("malformed add-to-slip result");
+      if (raw != null && !(0, import_widget_sdk4.isAddToSlipResult)(raw)) throw new Error("malformed add-to-slip result");
       const result = raw ?? void 0;
       setToast(resultToToast(result, shownOdds || selection.oddsDecimal.toFixed(2), ui));
       setSettled(isTerminal(result));
@@ -1101,27 +1148,75 @@ function ActionButtons({ actions, loading, disabled, onAct }) {
   ] });
 }
 
-// src/components/ChatMessage.tsx
+// src/components/dashboard/DashboardTile.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function ChatMessage({ message, disabled, onAct, ui, slip }) {
+var MAX_CRESTS = 3;
+function DashboardTile({ tile, onTap }) {
+  const spanClass = tile.span === "full" ? "ss-w-dash-tile--full" : "ss-w-dash-tile--half";
+  const crests = (tile.imageUrls ?? []).slice(0, MAX_CRESTS);
+  const hasMeta = Boolean(tile.badgeText) || crests.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { type: "button", className: `ss-w-dash-tile ${spanClass}`, onClick: onTap, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-icon", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DashboardIcon, { name: tile.icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "ss-w-dash-tile-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-title", children: tile.title }),
+      tile.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-subtitle", children: tile.subtitle }) : null,
+      hasMeta ? (
+        // Badge + crests sit on their own row, below the title, instead of sharing the
+        // icon/chevron row -- at the half-span tile's ~180px width a nowrap badge alone
+        // (~70px) left the title column at ~22px and forced character-by-character wrapping.
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "ss-w-dash-tile-meta", children: [
+          tile.badgeText ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-badge", children: tile.badgeText }) : null,
+          crests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-crests", children: crests.map((url, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-crest", style: { backgroundImage: `url(${url})` }, "aria-hidden": "true" }, `${url}-${i}`)) }) : null
+        ] })
+      ) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ss-w-dash-tile-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronIcon, {}) })
+  ] });
+}
+
+// src/components/dashboard/GreetingDashboard.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var LAYOUT_CLASSES = {
+  market: "ss-w-dash--market",
+  goal: "ss-w-dash--goal",
+  discovery: "ss-w-dash--discovery"
+};
+function layoutClass(layout) {
+  return Object.prototype.hasOwnProperty.call(LAYOUT_CLASSES, layout) ? LAYOUT_CLASSES[layout] : LAYOUT_CLASSES.goal;
+}
+function GreetingDashboard({ dashboard, onTap }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `ss-w-dash ${layoutClass(dashboard.layout)}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ss-w-dash-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-dash-title", children: dashboard.title }),
+      dashboard.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-dash-subtitle", children: dashboard.subtitle }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ss-w-dash-grid", children: dashboard.tiles.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DashboardTile, { tile: t, onTap: () => onTap(t, i) }, `${t.title}-${i}`)) }),
+    dashboard.footerTip ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ss-w-dash-foot", children: dashboard.footerTip }) : null
+  ] });
+}
+
+// src/components/ChatMessage.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function ChatMessage({ message, disabled, onAct, onTap, ui, slip }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ss-w-msg ss-w-user", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ss-w-bubble", children: message.text }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
-    message.text ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Markdown, { text: message.text }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BettingInsightList, { insights: message.insights, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OddsMovementCardList, { cards: message.oddsMovement, ui }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ss-w-msg ss-w-bot", children: [
+    message.text && !message.greetingDashboard ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Markdown, { text: message.text }) : null,
+    message.greetingDashboard ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GreetingDashboard, { dashboard: message.greetingDashboard, onTap }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(EntityCardList, { cards: message.cards, disabled, showLessLabel: ui?.showLess, showMoreLabel: ui?.showMore }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BettingInsightList, { insights: message.insights, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MarketOddsCardList, { cards: message.marketOdds, ui, slip }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(OddsMovementCardList, { cards: message.oddsMovement, ui }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ActionButtons, { actions: message.actions, loading: false, disabled, onAct })
   ] });
 }
 
 // src/components/IntentChips.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function IntentChips({ chips, onPick }) {
   if (chips.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ss-w-chips", children: chips.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-chip", onClick: () => onPick(c.text), children: c.text }, `${c.text}-${i}`)) });
 }
 
 // src/scroll.ts
@@ -1131,8 +1226,8 @@ function isPinnedToBottom(el, threshold = PIN_THRESHOLD) {
 }
 
 // src/components/MessageList.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function MessageList({ controller, ui, slip }) {
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function MessageList({ controller, ui, slip, onDashboardTap }) {
   const { state, send } = controller;
   const listRef = (0, import_react7.useRef)(null);
   const endRef = (0, import_react7.useRef)(null);
@@ -1140,8 +1235,9 @@ function MessageList({ controller, ui, slip }) {
   (0, import_react7.useEffect)(() => {
     if (pinnedRef.current) endRef.current?.scrollIntoView({ block: "end" });
   }, [state.messages, state.status]);
-  const empty = state.messages.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  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_runtime18.jsxs)(
     "div",
     {
       className: "ss-w-list",
@@ -1151,26 +1247,30 @@ function MessageList({ controller, ui, slip }) {
         if (listRef.current) pinnedRef.current = isPinnedToBottom(listRef.current);
       },
       children: [
-        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        state.messages.map((m) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           ChatMessage,
           {
             message: m,
             disabled: state.isStreaming,
             onAct: (a) => send(a.message, { actionId: a.actionId, displayText: a.label }),
+            onTap: (tile, index) => {
+              send(tile.actionValue, { displayText: tile.title });
+              if (m.role === "assistant" && m.greetingDashboard) onDashboardTap?.(tile, index, m.greetingDashboard.layout);
+            },
             ui,
             slip
           },
           m.id
         )),
-        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
+        state.isStreaming && state.actionsLoading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ActionButtons, { actions: [], loading: true, onAct: () => {
         } }) : null,
-        state.status ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
-        state.error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
+        state.status ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "ss-w-status", children: state.status }) : null,
+        state.error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ss-w-error", role: "alert", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "message" in state.error ? state.error.message : ui.somethingWentWrong }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "ss-w-retry", onClick: () => controller.retry(), children: ui.retry })
         ] }) : null,
-        empty ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: endRef })
+        !hasUserMessage && !hasDashboard ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IntentChips, { chips: state.starters, onPick: (t) => send(t) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: endRef })
       ]
     }
   );
@@ -1178,7 +1278,7 @@ function MessageList({ controller, ui, slip }) {
 
 // src/components/ChatInput.tsx
 var import_react8 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop response", sendLabel = "Send message" }) {
   const [value, setValue] = (0, import_react8.useState)("");
   const submit = () => {
@@ -1193,14 +1293,14 @@ function ChatInput({ placeholder, streaming, onSend, onStop, stopLabel = "Stop r
       submit();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ss-w-input", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
-    streaming ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SendIcon, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ss-w-input", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("textarea", { className: "ss-w-textarea", rows: 1, placeholder, value, disabled: streaming, onChange: (e) => setValue(e.target.value), onKeyDown }),
+    streaming ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "ss-w-send ss-w-stop", "aria-label": stopLabel, onClick: onStop, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ss-w-stop-glyph" }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "ss-w-send", "aria-label": sendLabel, onClick: submit, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SendIcon, {}) })
   ] });
 }
 
 // src/components/ChatPanel.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var FULLSCREEN_QUERY = "(max-width: 639px)";
 function useIsModal() {
   const [modal, setModal] = (0, import_react9.useState)(false);
@@ -1214,7 +1314,7 @@ function useIsModal() {
   }, []);
   return modal;
 }
-function ChatPanel({ controller, ui, slip }) {
+function ChatPanel({ controller, ui, slip, onDashboardTap }) {
   const { state, close, stop, send } = controller;
   const isModal = useIsModal();
   (0, import_react9.useEffect)(() => {
@@ -1224,10 +1324,10 @@ function ChatPanel({ controller, ui, slip }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MessageList, { controller, ui, slip }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ss-w-panel", role: "dialog", "aria-modal": isModal, "aria-label": ui.chatDialogLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChatHeader, { onClose: close, closeLabel: ui.closeChat }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MessageList, { controller, ui, slip, onDashboardTap }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChatInput, { placeholder: ui.placeholder, streaming: state.isStreaming, onSend: (t) => send(t), onStop: stop, stopLabel: ui.stopResponse, sendLabel: ui.sendMessage })
   ] });
 }
 
@@ -1484,17 +1584,85 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 @media (prefers-reduced-motion: reduce) {
   .ss-w-abtn-shimmer { animation: none; }
 }
+
+/* greeting dashboard */
+.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
+.ss-w-dash-head { display: flex; flex-direction: column; }
+.ss-w-dash-title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
+.ss-w-dash-subtitle { font-size: 13px; color: var(--ss-w-faint); margin-top: 4px; }
+.ss-w-dash-foot { font-size: 11px; color: var(--ss-w-faint); margin-top: 2px; }
+
+.ss-w-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.ss-w-dash-tile--half { grid-column: span 1; }
+.ss-w-dash-tile--full { grid-column: 1 / -1; }
+
+.ss-w-dash-tile {
+  display: flex; align-items: center; gap: 10px;
+  padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line);
+  background: var(--ss-w-panel); text-align: left; cursor: pointer; width: 100%;
+  color: inherit; font: inherit;
+  min-width: 0;                      /* the panel is min(400px, 100vw - 40px): without this,
+                                        a long Turkish title blows the column out */
+}
+.ss-w-dash-tile-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: 22px; }
+.ss-w-dash-emoji { line-height: 1; }
+.ss-w-dash-tile-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
+.ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
+.ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }
+.ss-w-dash-tile-chevron { flex: none; margin-left: auto; width: 14px; height: 14px; color: var(--ss-w-faint); }
+
+/* Badge + crests share their own row, below the title -- NOT the icon/chevron row. A
+   nowrap badge (~70px) sitting beside icon+chevron in a ~180px half-span tile left the
+   title column at ~22px wide, wrapping every title character-by-character. Here the row
+   gets the body's full width, so a badge this size is comfortably inside it. */
+.ss-w-dash-tile-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
+.ss-w-dash-tile-badge { flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
+
+.ss-w-dash-tile-crests { flex: none; display: flex; align-items: center; }
+.ss-w-dash-tile-crest {
+  width: 18px; height: 18px; border-radius: 50%;
+  background-size: cover; background-position: center; background-color: var(--ss-w-bubble);
+  margin-left: -6px; border: 2px solid var(--ss-w-panel);    /* overlapping stack, capped at 3 in DashboardTile */
+}
+.ss-w-dash-tile-crest:first-child { margin-left: 0; }
+
+/* Market: default 2-column grid, tiles get the same accent rail as the other card
+   families (.ss-w-binsight, .ss-w-mocard, .ss-w-omcard) so a market tile reads as
+   part of that visual language rather than a plain unstyled button. */
+.ss-w-dash--market .ss-w-dash-tile { border-left: 3px solid var(--ss-w-accent); }
+
+/* Goal: one column of pill rows. */
+.ss-w-dash--goal .ss-w-dash-grid { grid-template-columns: 1fr; }
+.ss-w-dash--goal .ss-w-dash-tile { border-radius: 999px; padding: 10px 14px; }
+
+/* Discovery: tinted bento cards. Stacked (icon over text) so a two- or three-word title gets
+   the tile's full width instead of the ~100px left of a horizontal icon+chevron -- that narrow
+   column was wrapping "Most interesting angles" onto three lines. The chevron is dropped (the
+   whole card is the tap target) and the badge + crest row is forced onto one line. */
+.ss-w-dash--discovery .ss-w-dash-tile { flex-direction: column; align-items: stretch; gap: 8px; }
+.ss-w-dash--discovery .ss-w-dash-tile-icon { align-self: flex-start; width: 32px; height: 32px; font-size: 26px; }
+.ss-w-dash--discovery .ss-w-dash-tile-chevron { display: none; }
+/* The full-span trends tile has the whole panel width, so its icon and title sit on one row
+   (horizontal, centre-aligned) rather than stacking like the narrow half tiles. */
+.ss-w-dash--discovery .ss-w-dash-tile--full { flex-direction: row; align-items: center; }
+.ss-w-dash--discovery .ss-w-dash-tile--full .ss-w-dash-tile-icon { align-self: center; }
+.ss-w-dash--discovery .ss-w-dash-tile-meta { flex-wrap: nowrap; }
+.ss-w-dash--discovery .ss-w-dash-tile-crest { width: 22px; height: 22px; }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(1) { background: #eef8f1; }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(2) { background: #eef3fb; }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(3) { background: #fdf6ec; }
+.ss-w-dash--discovery .ss-w-dash-tile:nth-child(4) { background: #f5eefb; }
 `;
 
 // src/StatsWidget.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function buildClient(props) {
   try {
     if ("client" in props && props.client) {
       return { client: props.client, conversation: props.client.conversation() };
     }
     const cfg = props.config;
-    const client = new import_widget_sdk4.StatsWidgetClient(toClientOptions(cfg));
+    const client = new import_widget_sdk5.StatsWidgetClient(toClientOptions(cfg));
     return { client, conversation: client.conversation(toUserContext(cfg)) };
   } catch (err) {
     console.error("[StatsWidget] failed to initialize:", err instanceof Error ? err.message : err);
@@ -1529,6 +1697,10 @@ function StatsWidget(props) {
     }),
     [props.config?.onAddToSlip, controller.state.conversationId, built]
   );
+  const onDashboardTap = (0, import_react10.useMemo)(
+    () => built ? createDashboardTapSignal((input) => built.conversation.sendSignal(input)) : void 0,
+    [built]
+  );
   (0, import_react10.useEffect)(() => {
     if (!built || !ui.injectStyles) return;
     const node = rootRef.current?.getRootNode();
@@ -1536,7 +1708,7 @@ function StatsWidget(props) {
   }, [built, ui.injectStyles]);
   if (!built) return null;
   const attrs = themeAttrs(ui);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref: rootRef, className: "ss-w-root", "data-ss-w-theme": attrs["data-ss-w-theme"], "data-ss-w-pos": attrs["data-ss-w-pos"], style: attrs.style, children: controller.state.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatPanel, { controller, ui, slip }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime21.jsx)(ChatPanel, { controller, ui, slip, onDashboardTap }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ChatFab,
     {
       label: ui.launcherLabel,