@eshal-bot/chat-widget 0.1.60 → 0.1.62

package/dist/chat-widget.js

@@ -7986,6 +7986,22 @@
    * @typedef {function(string): void} MessageUpdater
    */
 
+  /**
+   * Thrown when the SSE stream's HTTP body closes without ever emitting a
+   * terminal event (`complete` / `finish_reason`). The chat widget used to
+   * silently return in this case, leaving the assistant bubble stuck in
+   * isProcessing with whatever partial text had arrived. The caller catches
+   * this specifically so it can either retry the request or surface a clear
+   * "connection dropped" message to the user (UX-M08).
+   */
+  class IncompleteStreamError extends Error {
+    constructor() {
+      let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'SSE stream ended before completion';
+      super(message);
+      this.name = 'IncompleteStreamError';
+    }
+  }
+
   // ============================================================================
   // NETWORK
   // ============================================================================
@@ -8273,6 +8289,11 @@
     const hasReceivedFirstChunk = {
       current: false
     };
+    // UX-M08: tracks whether the stream emitted any terminal event
+    // (`complete` event or a finish_reason chunk). If the HTTP body
+    // closes without one, the connection dropped mid-response and we
+    // throw IncompleteStreamError so the caller can retry.
+    let streamCompleted = false;
     try {
       while (true) {
         const {
@@ -8345,6 +8366,7 @@
             // Handle complete events
             if (parsed.type === 'complete') {
               var _ref2, _parsed$Sources, _parsed$choices2;
+              streamCompleted = true;
               // Normalize Sources from stream (API may send "Sources" or "sources")
               const rawSources = (_ref2 = (_parsed$Sources = parsed.Sources) !== null && _parsed$Sources !== void 0 ? _parsed$Sources : parsed.sources) !== null && _ref2 !== void 0 ? _ref2 : [];
               const sources = Array.isArray(rawSources) ? rawSources.map(s => {
@@ -8442,6 +8464,7 @@
 
           // Handle finish_reason (stream complete)
           if ((_parsed$choices4 = parsed.choices) !== null && _parsed$choices4 !== void 0 && (_parsed$choices4 = _parsed$choices4[0]) !== null && _parsed$choices4 !== void 0 && _parsed$choices4.finish_reason && parsed.choices[0].finish_reason !== null) {
+            streamCompleted = true;
             const metadata = {
               prompts: parsed.prompts
             };
@@ -8452,6 +8475,15 @@
     } finally {
       reader.releaseLock();
     }
+
+    // UX-M08: HTTP body closed cleanly but no terminal event arrived —
+    // treat as a dropped stream so the caller can retry. The `complete`
+    // and finish_reason branches above are the only successful exits;
+    // anything else means the network dropped or the server hung up
+    // before sending the terminal event.
+    if (!streamCompleted) {
+      throw new IncompleteStreamError(accumulatedText.current ? 'Stream ended mid-response — partial content received' : 'Stream ended before any content was received');
+    }
   };
 
   /**
@@ -9199,6 +9231,15 @@
     const [onboardingAnswers, setOnboardingAnswers] = reactExports.useState({});
     const pendingIntentProcessedRef = reactExports.useRef(false);
 
+    // UX-M09: ref-based concurrency guard for sendMessage. The isLoading
+    // state alone is not sufficient — setState is batched async, so two
+    // rapid calls (e.g. the send button + an `onDirectSend` chip-click in
+    // the same microtask) can both read isLoading=false and start two
+    // overlapping SSE streams that interleave content into the same
+    // assistant bubble. A ref flips synchronously and blocks the second
+    // call before any state mutation runs.
+    const isSendingRef = reactExports.useRef(false);
+
     // Bidi/Voice state
     const [isConversationLoading, setIsConversationLoading] = reactExports.useState(false);
     const [isVoiceSessionActive, setIsVoiceSessionActive] = reactExports.useState(false);
@@ -9572,6 +9613,17 @@
         };
       }
 
+      // UX-M09: synchronous concurrency guard. See isSendingRef declaration
+      // above for the full rationale — covers send-button, onDirectSend
+      // chip clicks, and any other call site routed through sendMessage.
+      if (isSendingRef.current) {
+        return {
+          success: false,
+          error: 'A message is already being sent'
+        };
+      }
+      isSendingRef.current = true;
+
       // PR-I + PR-P: cache the user's question so handleDecision can
       // re-send it after a routing-clarification chip pick. Update
       // BOTH the ref (synchronously, for the setTimeout closure) and
@@ -9581,6 +9633,7 @@
         setPendingRoutingQuestion(trimmed);
       }
       if (!apiBaseUrl) {
+        isSendingRef.current = false;
         setMessages(prev => {
           const errorMessage = createMessage({
             id: getNextMessageId(),
@@ -9699,11 +9752,20 @@
           })
         });
 
-        // Send streaming request
-        const stream = await sendStreamingRequest(chatRequest, apiBaseUrl, organizationId);
+        // UX-M08: retry the stream up to MAX_STREAM_RETRIES times if the
+        // server hangs up mid-response (IncompleteStreamError). Each retry
+        // re-issues the POST and re-runs processStream. The skeleton
+        // bubble is cleared between attempts so a partial assistant
+        // message from the dropped attempt doesn't accumulate alongside
+        // the retried one. Retry only applies to chat-message types —
+        // onboarding-field sends don't need it (they consume the body
+        // raw and don't surface partial state to the user).
+        const STREAM_RETRY_DELAYS_MS = [500, 1500]; // → 2 retries total
 
-        // For onboarding fields, just consume the stream without processing
         if (apiType === 'userName' || apiType === 'email' || apiType === 'phone') {
+          // For onboarding fields, just consume the stream without processing.
+          // Single attempt — no retry, no user-visible partial state to clean up.
+          const stream = await sendStreamingRequest(chatRequest, apiBaseUrl, organizationId);
           const reader = stream.getReader();
           const decoder = new TextDecoder();
           while (true) {
@@ -9718,15 +9780,39 @@
             success: true
           };
         }
-
-        // For regular messages, process the stream
         if (apiType === 'inquiry' || apiType === 'complaint' || apiType === 'technical') {
-          await processStream(stream, setMessages);
-          updateActivity(organizationId);
-          return {
-            success: true
-          };
+          let lastErr;
+          for (let attempt = 0; attempt <= STREAM_RETRY_DELAYS_MS.length; attempt += 1) {
+            try {
+              const stream = await sendStreamingRequest(chatRequest, apiBaseUrl, organizationId);
+              await processStream(stream, setMessages);
+              updateActivity(organizationId);
+              return {
+                success: true
+              };
+            } catch (err) {
+              lastErr = err;
+              if (err instanceof IncompleteStreamError && attempt < STREAM_RETRY_DELAYS_MS.length) {
+                // Drop the half-rendered assistant bubble before retrying so
+                // the next attempt doesn't paint into a stale skeleton.
+                setMessages(prev => (prev || []).filter(msg => !msg.isProcessing));
+                const delay = STREAM_RETRY_DELAYS_MS[attempt];
+                console.warn("[chat] stream dropped (attempt ".concat(attempt + 1, "); retrying in ").concat(delay, "ms \u2014 ").concat(err.message));
+                await new Promise(r => setTimeout(r, delay));
+                continue;
+              }
+              throw err;
+            }
+          }
+          // Unreachable under normal flow — the loop either returns
+          // success, throws, or continues. Throw the last seen error
+          // defensively so we never fall through silently.
+          throw lastErr;
         }
+
+        // Non-chat, non-onboarding apiType (shouldn't currently happen):
+        // fire and forget, single attempt.
+        await sendStreamingRequest(chatRequest, apiBaseUrl, organizationId);
         updateActivity(organizationId);
         return {
           success: true
@@ -9751,9 +9837,16 @@
           error: error instanceof Error ? error.message : 'Failed to send message'
         };
       } finally {
-        if (apiType === 'inquiry' || apiType === 'complaint' || apiType === 'technical') {
-          setIsLoading(false);
-        }
+        // Reset isLoading unconditionally — onboarding field sends
+        // (userName/email/phone) used to skip this branch, so any ambient
+        // loading state set elsewhere (voice flow, parent loop) was left
+        // stuck true after the onboarding step resolved and blocked further
+        // input until the next regular message ran. setIsLoading(false) is
+        // a no-op when it's already false, so widening the condition can't
+        // regress the inquiry/complaint/technical path.
+        setIsLoading(false);
+        // UX-M09: release the concurrency guard so the next send can proceed.
+        isSendingRef.current = false;
       }
     }, [apiBaseUrl, apiKey, getNextMessageId, organizationId, messages, bidiSessionId, routingChoice, widgetFilter, provideCitations]);
     const handleOnboardingFormSubmit = reactExports.useCallback(async answers => {
@@ -91638,16 +91731,16 @@
     formatAxisMap: formatAxisMap
   });
 
-  /**
-   * Widget A2UI catalog — Recharts-based BarChart and KPICard renderers.
-   *
-   * Mirrors the agent-sdk's catalog.tsx renderers (ported to plain JS +
-   * dark-mode aware). These are called directly from A2uiBlock's dispatch
-   * for bar/kpi types, replacing the hand-rolled SVG implementations.
-   *
-   * The renderers accept the same `{ props }` interface as CopilotKit's
-   * catalog convention so they remain drop-in compatible if we ever wire up
-   * the full A2UIProvider pipeline here.
+  /**
+   * Widget A2UI catalog — Recharts-based BarChart and KPICard renderers.
+   *
+   * Mirrors the agent-sdk's catalog.tsx renderers (ported to plain JS +
+   * dark-mode aware). These are called directly from A2uiBlock's dispatch
+   * for bar/kpi types, replacing the hand-rolled SVG implementations.
+   *
+   * The renderers accept the same `{ props }` interface as CopilotKit's
+   * catalog convention so they remain drop-in compatible if we ever wire up
+   * the full A2UIProvider pipeline here.
    */
 
   function formatCompactNumber(n) {
@@ -91656,11 +91749,36 @@
     return String(n);
   }
 
-  /**
-   * Recharts bar chart — mirrors agent-sdk's eshalRenderers.BarChart.
-   *
-   * Expects `props.data` to be an array of `{ label, value }` objects
-   * (already normalized by A2uiBlock's numericData helper).
+  // ── Currency-aware value formatting ──────────────────────────────────────
+  // A2UI chart data is normalized to `{ label, value }` by A2uiBlock's
+  // numericData(), which drops the original Y-column key. A2uiBlock now threads
+  // that key through as `props.yKey` so these renderers can decide whether the
+  // axis / tooltip values are money. Heuristic mirrors the frontend's
+  // chartShared.tsx `isCurrencyKey` — keep the keyword list in lockstep.
+  // `(^|[_\W])` (not `\b`) so "average_salary" / "total_expenses" still match —
+  // JS `\b` doesn't fire next to `_`.
+  const CURRENCY_KEY_RE$1 = /(^|[_\W])(price|salary|cost|amount|revenue|expense|total|value|budget|spend|income|sale|balance)/i;
+  function isCurrencyKey$1(key) {
+    return typeof key === 'string' && CURRENCY_KEY_RE$1.test(key);
+  }
+
+  // Compact currency for axis ticks → "$120.0k". Full currency for tooltips →
+  // "$87,600" (comma-grouped, up to 2 decimals, no forced trailing zeros so a
+  // whole-dollar salary reads "$81,200" not "$81,200.00").
+  function formatCurrencyCompact(v) {
+    return "$".concat(formatCompactNumber(v));
+  }
+  function formatCurrencyFull(v) {
+    return "$".concat(Number(v).toLocaleString('en-US', {
+      maximumFractionDigits: 2
+    }));
+  }
+
+  /**
+   * Recharts bar chart — mirrors agent-sdk's eshalRenderers.BarChart.
+   *
+   * Expects `props.data` to be an array of `{ label, value }` objects
+   * (already normalized by A2uiBlock's numericData helper).
    */
   function BarChartRenderer(_ref) {
     let {
@@ -91668,6 +91786,11 @@
       isDark = false
     } = _ref;
     const data = Array.isArray(props.data) ? props.data : [];
+    // Whether the Y values are money — drives the `$` on axis ticks + tooltip.
+    const currency = isCurrencyKey$1(props.yKey);
+    // Human series name for the tooltip ("Average Salary"), so it no longer
+    // reads the generic dataKey "value".
+    const seriesName = props.valueLabel || undefined;
     const borderColor = isDark ? '#374151' : '#e2e8f0';
     const bgColor = isDark ? '#1f2937' : '#ffffff';
     const labelColor = isDark ? '#9ca3af' : '#64748b';
@@ -91730,7 +91853,7 @@
             margin: {
               top: 8,
               right: 12,
-              left: 4,
+              left: 12,
               bottom: 20
             },
             children: [/*#__PURE__*/jsxRuntimeExports.jsx(CartesianGrid, {
@@ -91750,6 +91873,7 @@
                 fill: labelColor
               } : undefined
             }), /*#__PURE__*/jsxRuntimeExports.jsx(YAxis, {
+              width: 72,
               tick: {
                 fontSize: 11,
                 fill: labelColor
@@ -91761,9 +91885,9 @@
                 fontSize: 11,
                 fill: labelColor
               } : undefined,
-              tickFormatter: v => props.unit ? "".concat(formatCompactNumber(v), " ").concat(props.unit) : formatCompactNumber(v)
+              tickFormatter: v => currency ? formatCurrencyCompact(v) : props.unit ? "".concat(formatCompactNumber(v), " ").concat(props.unit) : formatCompactNumber(v)
             }), /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
-              formatter: v => props.unit ? "".concat(Number(v).toLocaleString(), " ").concat(props.unit) : Number(v).toLocaleString(),
+              formatter: v => currency ? formatCurrencyFull(v) : props.unit ? "".concat(Number(v).toLocaleString(), " ").concat(props.unit) : Number(v).toLocaleString(),
               contentStyle: {
                 background: tooltipBg,
                 border: "1px solid ".concat(borderColor),
@@ -91773,6 +91897,7 @@
               }
             }), /*#__PURE__*/jsxRuntimeExports.jsx(Bar, {
               dataKey: "value",
+              name: seriesName,
               fill: "#3b82f6",
               radius: [2, 2, 0, 0]
             })]
@@ -91782,9 +91907,9 @@
     });
   }
 
-  /**
-   * KPI card — mirrors agent-sdk's eshalRenderers.KPICard.
-   * Dark-mode aware.
+  /**
+   * KPI card — mirrors agent-sdk's eshalRenderers.KPICard.
+   * Dark-mode aware.
    */
   function KPICardRenderer(_ref2) {
     let {
@@ -91844,10 +91969,10 @@
   }
   const PIE_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6', '#f97316', '#6366f1', '#84cc16', '#06b6d4', '#a855f7'];
 
-  /**
-   * Recharts pie / donut chart — replaces hand-rolled PieSvg.
-   * `props.data` must be an array of `{ label, value }` objects.
-   * Set `donut={true}` for a donut chart (innerRadius > 0).
+  /**
+   * Recharts pie / donut chart — replaces hand-rolled PieSvg.
+   * `props.data` must be an array of `{ label, value }` objects.
+   * Set `donut={true}` for a donut chart (innerRadius > 0).
    */
   function PieChartRenderer(_ref3) {
     let {
@@ -91856,6 +91981,7 @@
       donut = false
     } = _ref3;
     const data = Array.isArray(props.data) ? props.data : [];
+    const currency = isCurrencyKey$1(props.yKey);
     const borderColor = isDark ? '#374151' : '#e2e8f0';
     const bgColor = isDark ? '#1f2937' : '#ffffff';
     const titleColor = isDark ? '#f3f4f6' : '#0f172a';
@@ -91906,7 +92032,7 @@
                 fill: PIE_COLORS[i % PIE_COLORS.length]
               }, i))
             }), /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
-              formatter: v => Number(v).toLocaleString(),
+              formatter: v => currency ? formatCurrencyFull(v) : Number(v).toLocaleString(),
               contentStyle: {
                 background: tooltipBg,
                 border: "1px solid ".concat(borderColor),
@@ -91928,10 +92054,10 @@
     });
   }
 
-  /**
-   * Recharts line / area chart — replaces hand-rolled LineSvg.
-   * `props.data` must be an array of `{ label, value }` objects.
-   * Set `area={true}` to fill under the line.
+  /**
+   * Recharts line / area chart — replaces hand-rolled LineSvg.
+   * `props.data` must be an array of `{ label, value }` objects.
+   * Set `area={true}` to fill under the line.
    */
   function LineChartRenderer(_ref4) {
     let {
@@ -91940,6 +92066,8 @@
       area = false
     } = _ref4;
     const data = Array.isArray(props.data) ? props.data : [];
+    const currency = isCurrencyKey$1(props.yKey);
+    const seriesName = props.valueLabel || undefined;
     const borderColor = isDark ? '#374151' : '#e2e8f0';
     const bgColor = isDark ? '#1f2937' : '#ffffff';
     const labelColor = isDark ? '#9ca3af' : '#64748b';
@@ -92003,7 +92131,7 @@
             margin: {
               top: 8,
               right: 12,
-              left: 4,
+              left: 12,
               bottom: 20
             },
             children: [/*#__PURE__*/jsxRuntimeExports.jsx(CartesianGrid, {
@@ -92023,13 +92151,14 @@
                 fill: labelColor
               } : undefined
             }), /*#__PURE__*/jsxRuntimeExports.jsx(YAxis, {
+              width: 72,
               tick: {
                 fontSize: 11,
                 fill: labelColor
               },
-              tickFormatter: v => props.unit ? "".concat(formatCompactNumber(v), " ").concat(props.unit) : formatCompactNumber(v)
+              tickFormatter: v => currency ? formatCurrencyCompact(v) : props.unit ? "".concat(formatCompactNumber(v), " ").concat(props.unit) : formatCompactNumber(v)
             }), /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
-              formatter: v => props.unit ? "".concat(Number(v).toLocaleString(), " ").concat(props.unit) : Number(v).toLocaleString(),
+              formatter: v => currency ? formatCurrencyFull(v) : props.unit ? "".concat(Number(v).toLocaleString(), " ").concat(props.unit) : Number(v).toLocaleString(),
               contentStyle: {
                 background: tooltipBg,
                 border: "1px solid ".concat(borderColor),
@@ -92040,6 +92169,7 @@
             }), area ? /*#__PURE__*/jsxRuntimeExports.jsx(Area, {
               type: "monotone",
               dataKey: "value",
+              name: seriesName,
               stroke: "#3b82f6",
               fill: "#3b82f6",
               fillOpacity: 0.15,
@@ -92051,6 +92181,7 @@
             }) : /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
               type: "monotone",
               dataKey: "value",
+              name: seriesName,
               stroke: "#3b82f6",
               strokeWidth: 2,
               dot: {
@@ -92248,7 +92379,14 @@
       data: rows,
       unit: spec.unit,
       xAxisLabel: spec.xAxisLabel,
-      yAxisLabel: spec.yAxisLabel
+      yAxisLabel: spec.yAxisLabel,
+      // numericData() collapses the rows to { label, value }, dropping the
+      // original Y-column key. Pass it through so the renderer can detect a
+      // currency column (→ "$" on the Y-axis + tooltip) and label the tooltip
+      // series with the human column name ("Average Salary") instead of the
+      // generic dataKey "value".
+      yKey: y,
+      valueLabel: prettifyLabel(y)
     };
     if (t === 'pie') return /*#__PURE__*/jsxRuntimeExports.jsx(PieChartRenderer, {
       props: chartProps,
@@ -92573,16 +92711,62 @@
     return typeof key === 'string' && CURRENCY_KEY_RE.test(key);
   }
 
+  // ISO date / datetime prefix — matches the typical SQL output the
+  // agent's tools produce when GROUP BY-ing by month
+  // (`DATE_TRUNC('month', col)` → `YYYY-MM-DD`). Used by formatAxisTick
+  // below so a chart of monthly expenses shows "Jan '26" / "Feb '26"
+  // horizontally instead of "2026 01 01" slanted (EV-1187 follow-up).
+  const ISO_DATE_RE = /^(\d{4})-(\d{2})-(\d{2})(?:T|$)/;
+  function formatIsoDateAsMonthTick(value) {
+    if (typeof value !== 'string') return null;
+    const m = value.match(ISO_DATE_RE);
+    if (!m) return null;
+    const year = parseInt(m[1], 10);
+    const month = parseInt(m[2], 10);
+    if (!Number.isInteger(month) || month < 1 || month > 12) return null;
+    return "".concat(MONTH_NAMES[month - 1], " '").concat(String(year).slice(-2));
+  }
+
   // Axis-tick formatter: month-number columns (column matches /month/i,
-  // value 1..12) render as 3-letter month names; everything else gets
+  // value 1..12) render as 3-letter month names; ISO date strings
+  // (`2026-01-01`) render as "Jan '26"; everything else gets
   // prettifyLabel applied so "office_supplies" reads "Office Supplies".
   function formatAxisTick(value, dataKey) {
     if (typeof dataKey === 'string' && MONTH_KEY_RE.test(dataKey)) {
       const n = typeof value === 'number' ? value : Number(value);
       if (Number.isInteger(n) && n >= 1 && n <= 12) return MONTH_NAMES[n - 1];
     }
+    const dateMonth = formatIsoDateAsMonthTick(value);
+    if (dateMonth) return dateMonth;
     return prettifyLabel(value);
   }
+
+  // Conservative snake_case detector for table cell category labels
+  // (2026-06-19, EV-1187 follow-up). Mirrors the admin UI's
+  // `prettifyCategoryCell` in `packages/frontend/.../chartShared.tsx` and
+  // the SDK's copy. Self-contained because the widget can't reach across
+  // package boundaries.
+  //
+  // Goal: when a category column shows `office_supplies` next to a chart
+  // whose X-axis (via prettifyLabel) already renders "Office Supplies",
+  // the table should agree. Conservative — only lowercase ASCII tokens
+  // joined by underscores (≤ 40 chars) qualify, so IDs/paths/emails/
+  // slugs/camelCase pass through verbatim.
+  const SNAKE_CASE_CATEGORY_RE = /^[a-z]+(_[a-z]+)+$/;
+  function prettifyCategoryCell(value) {
+    if (typeof value !== 'string') return String(value !== null && value !== void 0 ? value : '');
+    if (value.length > 40) return value;
+    if (!SNAKE_CASE_CATEGORY_RE.test(value)) return value;
+    return prettifyLabel(value);
+  }
+
+  // Numeric string under a money column, e.g. "81,200" / "105444" / "-1,250.50".
+  // Markdown tables (the common concierge path) arrive as text cells, so a
+  // salary value is the STRING "81,200" — not a number — and skips the
+  // USD_FORMATTER branch below. We prefix "$" while keeping the source's own
+  // grouping/decimals so it reads "$81,200" (not "$81,200.00"). A leading "$"
+  // already present makes the regex miss, so we never double-prefix.
+  const _NUMERIC_STRING_RE = /^-?\d[\d,]*(\.\d+)?$/;
   function formatCell(v, columnKey) {
     if (v == null) return '';
     if (typeof v === 'number') {
@@ -92592,7 +92776,17 @@
       return Number.isInteger(v) ? String(v) : v.toFixed(2);
     }
     if (typeof v === 'object') return JSON.stringify(v);
-    return String(v);
+    // Numeric string under a money-named column → prefix "$" (Bug: concierge
+    // salary table showed "81,200" with no currency symbol).
+    if (isCurrencyKey(columnKey) && _NUMERIC_STRING_RE.test(String(v).trim())) {
+      return "$".concat(String(v).trim());
+    }
+    // String cells: prettify snake_case category labels (e.g.
+    // `office_supplies` → "Office Supplies") so the table reads
+    // consistently with the chart's X-axis ticks on the same data.
+    // Conservative: anything not a clean lowercase_underscore token is
+    // returned verbatim, so paths/IDs/emails/slugs are preserved.
+    return prettifyCategoryCell(v);
   }
 
   // ─────────────────────────────────────────────────────────────────────────
@@ -93626,8 +93820,22 @@
   // When streaming, hide trailing table lines that haven't formed a complete
   // table yet (no separator row). Without this, partial `| col |` lines flash
   // as raw pipe text before ReactMarkdown can recognise the block as a table.
+  // Also hides incomplete A2UI fences (```eshal-ui / ```eshal-chart / ```chart)
+  // that haven't received their closing ``` yet — prevents raw JSON flash.
   function sanitizeStreamingContent(text, isStreaming) {
     if (!isStreaming) return text;
+
+    // A2UI fence guard: if an opening fence exists without a matching closing
+    // ```, suppress everything from that opening onwards so the partial JSON/
+    // code never flashes as raw text in the bubble.
+    const openMatch = /^```(?:eshal-ui|eshal-chart|chart)\b/m.exec(text);
+    if (openMatch) {
+      const rest = text.slice(openMatch.index + openMatch[0].length);
+      const hasClose = rest.split('\n').some(l => l.trim() === '```');
+      if (!hasClose) {
+        return text.slice(0, openMatch.index).trimEnd();
+      }
+    }
     const lines = text.split('\n');
     // Find last non-empty line index
     let last = lines.length - 1;