@sybilion/uilib 1.3.88 → 1.3.90

package/dist/esm/contexts/chatSessionStorage.js

@@ -0,0 +1,245 @@
+import { LS } from '@homecode/ui';
+import { stripChatsForPersistence, safeLsSet, isEphemeralChatScope } from './chatPersistence.js';
+
+const CHAT_SCOPE_IDS_REGISTRY_KEY = 'chat-scope-ids';
+const SESSION_PREFIX = 'chat-session-';
+const SCOPE_PREFIX = 'chat-scope-';
+const CHATS_PREFIX = 'chats-';
+const CHAT_CURRENT_ID_PREFIX = 'chat-current-id-';
+function getSessionKey(sessionId) {
+    return `${SESSION_PREFIX}${sessionId}`;
+}
+function getScopeKey(scopeId) {
+    return `${SCOPE_PREFIX}${scopeId}`;
+}
+function getLegacyChatsKey(scopeId) {
+    return `${CHATS_PREFIX}${scopeId}`;
+}
+function getLegacyCurrentIdKey(scopeId) {
+    return `${CHAT_CURRENT_ID_PREFIX}${scopeId}`;
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function isChat(value) {
+    if (!isRecord(value))
+        return false;
+    return (typeof value.session_id === 'string' &&
+        typeof value.name === 'string' &&
+        Array.isArray(value.messages));
+}
+function isChatScopeIndex(value) {
+    if (!isRecord(value))
+        return false;
+    const { currentSessionId, sessionIds } = value;
+    if (currentSessionId !== null && typeof currentSessionId !== 'string') {
+        return false;
+    }
+    if (!Array.isArray(sessionIds))
+        return false;
+    return sessionIds.every(id => typeof id === 'string');
+}
+function trimScopeIndexForPersistence(scopeId, index) {
+    if (!isEphemeralChatScope(scopeId))
+        return index;
+    const current = index.currentSessionId ?? index.sessionIds[0] ?? null;
+    if (!current)
+        return { currentSessionId: null, sessionIds: [] };
+    return { currentSessionId: current, sessionIds: [current] };
+}
+function mergeSessionChat(existing, incoming) {
+    if (!existing)
+        return incoming;
+    return incoming.messages.length >= existing.messages.length
+        ? incoming
+        : existing;
+}
+function loadSession(sessionId) {
+    const raw = LS.get(getSessionKey(sessionId));
+    return isChat(raw) ? raw : null;
+}
+function persistSession(chat) {
+    const [stripped] = stripChatsForPersistence([chat]);
+    safeLsSet(getSessionKey(chat.session_id), stripped);
+}
+function deleteSessionBlob(sessionId) {
+    LS.remove(getSessionKey(sessionId));
+}
+function loadScopeIndex(scopeId) {
+    const raw = LS.get(getScopeKey(scopeId));
+    return isChatScopeIndex(raw) ? raw : null;
+}
+function persistScopeIndex(scopeId, index) {
+    safeLsSet(getScopeKey(scopeId), trimScopeIndexForPersistence(scopeId, index));
+}
+function addScopeIdToRegistry(scopeId) {
+    const raw = LS.get(CHAT_SCOPE_IDS_REGISTRY_KEY);
+    const registry = Array.isArray(raw) ? [...raw] : [];
+    if (!registry.includes(scopeId)) {
+        safeLsSet(CHAT_SCOPE_IDS_REGISTRY_KEY, [...registry, scopeId]);
+    }
+}
+function discoverScopeIdsFromLS() {
+    const scopeIds = new Set();
+    const registryRaw = LS.get(CHAT_SCOPE_IDS_REGISTRY_KEY);
+    const registry = Array.isArray(registryRaw) ? registryRaw : [];
+    registry.forEach((id) => {
+        if (typeof id === 'string' && id)
+            scopeIds.add(id);
+    });
+    try {
+        for (let i = 0; i < window.localStorage.length; i++) {
+            const key = window.localStorage.key(i);
+            if (!key)
+                continue;
+            if (key.startsWith(SCOPE_PREFIX)) {
+                const scopeId = key.slice(SCOPE_PREFIX.length);
+                if (scopeId)
+                    scopeIds.add(scopeId);
+            }
+            else if (key.startsWith(CHATS_PREFIX)) {
+                const scopeId = key.slice(CHATS_PREFIX.length);
+                if (scopeId)
+                    scopeIds.add(scopeId);
+            }
+        }
+    }
+    catch {
+        // ignore
+    }
+    return scopeIds;
+}
+function scopeIdsForUser(userId, all) {
+    const prefix = `${userId}-`;
+    const out = new Set();
+    for (const id of all) {
+        if (id.startsWith(prefix))
+            out.add(id);
+    }
+    return out;
+}
+function hasLegacyScopeData(scopeId) {
+    const legacyRaw = LS.get(getLegacyChatsKey(scopeId));
+    return Array.isArray(legacyRaw) && legacyRaw.length > 0;
+}
+function migrateLegacyScope(scopeId) {
+    const legacyRaw = LS.get(getLegacyChatsKey(scopeId));
+    const legacyChats = Array.isArray(legacyRaw) ? legacyRaw : [];
+    const chats = [];
+    legacyChats.forEach(item => {
+        if (isChat(item))
+            chats.push(item);
+    });
+    if (chats.length === 0)
+        return loadScopeIndex(scopeId);
+    const savedCurrentRaw = LS.get(getLegacyCurrentIdKey(scopeId));
+    const savedCurrentId = typeof savedCurrentRaw === 'string' && savedCurrentRaw !== ''
+        ? savedCurrentRaw
+        : undefined;
+    const currentSessionId = savedCurrentId ?? chats[0]?.session_id ?? null;
+    const sessionIds = chats.map(chat => chat.session_id);
+    chats.forEach(chat => {
+        const existing = loadSession(chat.session_id);
+        persistSession(mergeSessionChat(existing, chat));
+    });
+    const index = { currentSessionId, sessionIds };
+    persistScopeIndex(scopeId, index);
+    addScopeIdToRegistry(scopeId);
+    LS.remove(getLegacyChatsKey(scopeId));
+    LS.remove(getLegacyCurrentIdKey(scopeId));
+    return index;
+}
+function linkSessionToScope(scopeId, sessionId, options) {
+    addScopeIdToRegistry(scopeId);
+    const existing = loadScopeIndex(scopeId) ?? {
+        currentSessionId: null,
+        sessionIds: [],
+    };
+    const sessionIds = existing.sessionIds.includes(sessionId)
+        ? existing.sessionIds
+        : [sessionId, ...existing.sessionIds];
+    const makeCurrent = options?.makeCurrent !== false;
+    const index = {
+        sessionIds,
+        currentSessionId: makeCurrent ? sessionId : existing.currentSessionId,
+    };
+    persistScopeIndex(scopeId, index);
+    return index;
+}
+function hydrateChatsForScope(scopeId) {
+    const index = loadScopeIndex(scopeId);
+    if (!index)
+        return [];
+    return index.sessionIds
+        .map(sessionId => loadSession(sessionId))
+        .filter((chat) => chat != null);
+}
+function countSessionReferences(userId, sessionId) {
+    const scopeIds = scopeIdsForUser(userId, discoverScopeIdsFromLS());
+    let count = 0;
+    for (const scopeId of scopeIds) {
+        const index = loadScopeIndex(scopeId);
+        if (index?.sessionIds.includes(sessionId))
+            count += 1;
+    }
+    return count;
+}
+function removeSessionFromScope(scopeId, sessionId) {
+    const existing = loadScopeIndex(scopeId);
+    if (!existing)
+        return null;
+    const sessionIds = existing.sessionIds.filter(id => id !== sessionId);
+    if (sessionIds.length === existing.sessionIds.length)
+        return existing;
+    let nextCurrent = existing.currentSessionId;
+    if (nextCurrent === sessionId) {
+        const deletedIndex = existing.sessionIds.indexOf(sessionId);
+        nextCurrent =
+            deletedIndex > 0
+                ? existing.sessionIds[deletedIndex - 1]
+                : (sessionIds[0] ?? null);
+    }
+    const index = {
+        currentSessionId: nextCurrent,
+        sessionIds,
+    };
+    persistScopeIndex(scopeId, index);
+    return index;
+}
+function renameSessionId(userId, oldId, newId) {
+    if (oldId === newId)
+        return;
+    const chat = loadSession(oldId);
+    if (!chat)
+        return;
+    persistSession({ ...chat, session_id: newId });
+    LS.remove(getSessionKey(oldId));
+    const scopeIds = scopeIdsForUser(userId, discoverScopeIdsFromLS());
+    for (const scopeId of scopeIds) {
+        const index = loadScopeIndex(scopeId);
+        if (!index?.sessionIds.includes(oldId))
+            continue;
+        const sessionIds = index.sessionIds.map(id => (id === oldId ? newId : id));
+        const currentSessionId = index.currentSessionId === oldId ? newId : index.currentSessionId;
+        persistScopeIndex(scopeId, { currentSessionId, sessionIds });
+    }
+}
+function loadChatsFromSessionStorage(userId) {
+    const chats = {};
+    const currentChatId = {};
+    const scopeIds = scopeIdsForUser(userId, discoverScopeIdsFromLS());
+    for (const scopeId of scopeIds) {
+        if (hasLegacyScopeData(scopeId)) {
+            migrateLegacyScope(scopeId);
+        }
+        const index = loadScopeIndex(scopeId);
+        if (!index || index.sessionIds.length === 0)
+            continue;
+        chats[scopeId] = hydrateChatsForScope(scopeId);
+        currentChatId[scopeId] =
+            index.currentSessionId ?? chats[scopeId][0]?.session_id ?? null;
+    }
+    return { chats, currentChatId };
+}
+
+export { CHAT_SCOPE_IDS_REGISTRY_KEY, addScopeIdToRegistry, countSessionReferences, deleteSessionBlob, discoverScopeIdsFromLS, hasLegacyScopeData, hydrateChatsForScope, linkSessionToScope, loadChatsFromSessionStorage, loadScopeIndex, loadSession, migrateLegacyScope, persistScopeIndex, persistSession, removeSessionFromScope, renameSessionId, scopeIdsForUser };

package/dist/esm/lib/dashboard-spec/jsonDashboardFence.js

@@ -0,0 +1,80 @@
+const FENCE_OPEN = /```\s*json-dashboard\s*/i;
+/** Unescape literal `\n` sequences when the agent double-encodes newlines. */
+function normalizeJsonDashboardChatText(text) {
+    if (!text.includes('\\n'))
+        return text;
+    if (!FENCE_OPEN.test(text))
+        return text;
+    // Real newlines mean the fence is already formatted; unescaping would
+    // corrupt `\n` inside JSON string values (e.g. markdown code fences).
+    if (text.includes('\n'))
+        return text;
+    return text.replace(/\\n/g, '\n').replace(/\\t/g, '\t');
+}
+function findCompleteJsonEnd(text, contentStart) {
+    let lastValidEnd = -1;
+    for (let i = contentStart + 1; i <= text.length; i++) {
+        const candidate = text.slice(contentStart, i);
+        if (!candidate.trim())
+            continue;
+        try {
+            JSON.parse(candidate);
+            lastValidEnd = i;
+        }
+        catch {
+            // keep extending until JSON is complete
+        }
+    }
+    return lastValidEnd;
+}
+function findJsonDashboardContentEnd(text, contentStart) {
+    const jsonEnd = findCompleteJsonEnd(text, contentStart);
+    if (jsonEnd < 0)
+        return -1;
+    const afterJson = text.slice(jsonEnd);
+    const fenceIdx = afterJson.indexOf('```');
+    if (fenceIdx >= 0) {
+        return jsonEnd + fenceIdx;
+    }
+    const tail = text.slice(contentStart).trim();
+    if (tail.length > 0) {
+        try {
+            JSON.parse(tail);
+            return text.length;
+        }
+        catch {
+            return jsonEnd;
+        }
+    }
+    return jsonEnd;
+}
+function jsonDashboardFenceSpan(text) {
+    const prepared = normalizeJsonDashboardChatText(text);
+    const startMatch = prepared.match(FENCE_OPEN);
+    if (!startMatch || startMatch.index === undefined)
+        return null;
+    const contentStart = startMatch.index + startMatch[0].length;
+    const closingFenceStart = findJsonDashboardContentEnd(prepared, contentStart);
+    if (closingFenceStart < 0) {
+        return { start: startMatch.index, end: prepared.length };
+    }
+    const end = closingFenceStart < prepared.length &&
+        prepared.startsWith('```', closingFenceStart)
+        ? closingFenceStart + 3
+        : closingFenceStart;
+    return { start: startMatch.index, end };
+}
+/** Removes fenced json-dashboard blocks (used before persisting chat messages). */
+function stripJsonDashboardFences(text) {
+    let result = normalizeJsonDashboardChatText(text);
+    while (true) {
+        const span = jsonDashboardFenceSpan(result);
+        if (!span)
+            break;
+        result = result.slice(0, span.start) + result.slice(span.end);
+    }
+    result = result.replace(/\n{3,}/g, '\n\n');
+    return result.trim();
+}
+
+export { normalizeJsonDashboardChatText, stripJsonDashboardFences };

package/dist/esm/types/src/components/ui/Chat/ChatMessage/AgentMessageContent.helpers.d.ts

@@ -1,9 +1,4 @@
 import React from 'react';
-declare const injectHeaders: (content: string) => {
-    elem: import("react/jsx-runtime").JSX.Element;
-    index: number;
-    length: number;
-};
 declare const injectBold: (content: string) => {
     elem: import("react/jsx-runtime").JSX.Element;
     index: number;
@@ -32,6 +27,7 @@ type Injector = (content: string) => {
     length: number;
 } | null;
 declare const injectAnchor: Injector;
+declare const injectHeaders: Injector;
 declare const applyFormatting: (text: string) => React.ReactNode[];
 declare const applyFormattingInline: (text: string) => React.ReactNode[];
 export { injectHeaders, injectAnchor, injectBold, injectItalic, injectBullet, injectNewlines, convertMarkdownTableToHTML, applyFormatting, applyFormattingInline, };

package/dist/esm/types/src/components/ui/Chat/ChatMessage/AgentMessageContent.helpers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/src/components/ui/Chat/ChatSheet/useChatPanelChromeModel.d.ts

@@ -35,6 +35,11 @@ export type UseChatPanelChromeModelInput = {
     copyHistoryOnNewChat?: boolean;
     /** Override or extend the default send payload (e.g. api vs display text split). */
     transformSendPayload?: (message: string, attachments: ChatAttachmentDropItem[] | undefined, defaultPayload: string | ChatSendMessagePayload) => string | ChatSendMessagePayload | Promise<string | ChatSendMessagePayload>;
+    /**
+     * When true, preset clicks always use the API send path (skip local `answer` /
+     * script demo). Use on /reports/new where first message must hit transformSendPayload.
+     */
+    submitPresetsViaApi?: boolean;
 };
 export type UseChatPanelChromeModelResult = {
     chromeProps: ChatChromeProps;
@@ -48,4 +53,4 @@ export type UseChatPanelChromeModelResult = {
     openNewChatAndSubmit: (prompt: string) => void;
     chatPanelContainer: HTMLElement | null;
 };
-export declare function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, renderMessageChart, renderSystemMessage, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, copyHistoryOnNewChat, transformSendPayload, }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult;
+export declare function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, renderMessageChart, renderSystemMessage, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, copyHistoryOnNewChat, transformSendPayload, submitPresetsViaApi, }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult;

package/dist/esm/types/src/contexts/chat-context.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { type Chat, type ChatMeta, type ChatSendMessagePayload, type Message, MessageRole, type UserTextFileAttachment } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatResponse } from '#uilib/types/chat-api.types';
+import type { LinkSessionToScopeOptions } from './chatSessionStorage';
 export type SendChatMessageFn = (message: string, targetChatId: string) => Promise<ChatResponse>;
 export type { ChatSendMessagePayload, UserTextFileAttachment, } from '#uilib/components/ui/Chat/Chat.types';
 export type AddChatMessageOptions = {
@@ -19,6 +20,7 @@ export type NewChatOptions = {
     /** When set, seeds the new session's messages (e.g. continue dialog in reports). */
     seedMessages?: readonly Message[];
 };
+export type { LinkSessionToScopeOptions } from './chatSessionStorage';
 export type SendMessageResult = {
     response: string;
     sessionId: string;
@@ -26,6 +28,8 @@ export type SendMessageResult = {
 export interface ChatContextType {
     /** Returns the new session id, or undefined if no user / not created. */
     newChat: (scopeId: string, options?: NewChatOptions) => string | undefined;
+    /** Attach an existing session to a scope without cloning messages. */
+    linkSessionToScope: (scopeId: string, sessionId: string, options?: LinkSessionToScopeOptions) => void;
     setCurrentChatId: (currScopeId: string, sessionId: string) => void;
     addMessage: (scopeId: string, chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string | undefined;
     removeMessageById: (scopeId: string, chatId: string, messageId: string) => void;
@@ -72,6 +76,7 @@ export declare function useChatsForScopeId(scopeId: string): {
     currentChatId: string;
     isOutboundPending: boolean;
     setCurrentChatId: (targetId: string) => void;
+    linkSessionToScope: (sessionId: string, options?: LinkSessionToScopeOptions) => void;
     newChat: (options?: NewChatOptions) => string;
     addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;
     removeMessageById: (chatId: string, messageId: string) => void;
@@ -88,6 +93,7 @@ export declare function useChatsForDataset(scopeId: string): {
     currentChatId: string;
     isOutboundPending: boolean;
     setCurrentChatId: (targetId: string) => void;
+    linkSessionToScope: (sessionId: string, options?: LinkSessionToScopeOptions) => void;
     newChat: (options?: NewChatOptions) => string;
     addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;
     removeMessageById: (chatId: string, messageId: string) => void;

package/dist/esm/types/src/contexts/chatPersistence.d.ts

@@ -1,5 +1,8 @@
-import type { Chat, Message } from '#uilib/components/ui/Chat/Chat.types';
+import { type Chat, type Message } from '#uilib/components/ui/Chat/Chat.types';
+export declare function isEphemeralChatScope(scopeId: string): boolean;
 export declare function stripMessageForPersistence(message: Message): Message;
 export declare function stripChatsForPersistence(chats: Chat[]): Chat[];
+export declare function persistSessionToLS(chat: Chat): void;
+/** @deprecated Legacy scope blob — prefer session + scope index via chatSessionStorage. */
 export declare function persistChatsToLS(scopeId: string, chats: Chat[]): void;
 export declare function safeLsSet(key: string, value: unknown): void;

package/dist/esm/types/src/contexts/chatSessionStorage.d.ts

@@ -0,0 +1,32 @@
+import type { Chat } from '#uilib/components/ui/Chat/Chat.types';
+export type ChatScopeIndex = {
+    currentSessionId: string | null;
+    sessionIds: string[];
+};
+export declare const CHAT_SCOPE_IDS_REGISTRY_KEY = "chat-scope-ids";
+export declare function loadSession(sessionId: string): Chat | null;
+export declare function persistSession(chat: Chat): void;
+export declare function deleteSessionBlob(sessionId: string): void;
+export declare function loadScopeIndex(scopeId: string): ChatScopeIndex | null;
+export declare function persistScopeIndex(scopeId: string, index: ChatScopeIndex): void;
+export declare function addScopeIdToRegistry(scopeId: string): void;
+export declare function discoverScopeIdsFromLS(): Set<string>;
+export declare function scopeIdsForUser(userId: number, all: Set<string>): Set<string>;
+export declare function hasLegacyScopeData(scopeId: string): boolean;
+export declare function migrateLegacyScope(scopeId: string): ChatScopeIndex | null;
+export type LinkSessionToScopeOptions = {
+    makeCurrent?: boolean;
+};
+export declare function linkSessionToScope(scopeId: string, sessionId: string, options?: LinkSessionToScopeOptions): ChatScopeIndex;
+export declare function hydrateChatsForScope(scopeId: string): Chat[];
+export declare function countSessionReferences(userId: number, sessionId: string): number;
+export declare function removeSessionFromScope(scopeId: string, sessionId: string): ChatScopeIndex | null;
+export declare function renameSessionId(userId: number, oldId: string, newId: string): void;
+export declare function loadChatsFromSessionStorage(userId: number): {
+    chats: Record<string, Chat[]>;
+    currentChatId: Record<string, string | null>;
+};
+/** Alias used by ChatProvider mount hydration. */
+export declare const loadAllScopesForUser: typeof loadChatsFromSessionStorage;
+export declare function isSessionReferencedByScopes(sessionId: string, excludeScopeId: string | null, userId: number): boolean;
+export declare function renameSessionIdInStorage(oldId: string, newId: string, userId: number): void;

package/dist/esm/types/src/contexts/chatSessionStorage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/src/lib/dashboard-spec/jsonDashboardFence.d.ts

@@ -0,0 +1,9 @@
+export declare function hasJsonDashboardFenceInText(text: string): boolean;
+/** Unescape literal `\n` sequences when the agent double-encodes newlines. */
+export declare function normalizeJsonDashboardChatText(text: string): string;
+export declare function jsonDashboardFenceBounds(text: string): {
+    contentStart: number;
+    contentEnd: number;
+} | null;
+/** Removes fenced json-dashboard blocks (used before persisting chat messages). */
+export declare function stripJsonDashboardFences(text: string): string;

package/dist/esm/types/src/lib/dashboard-spec/stripJsonDashboardFences.d.ts

@@ -1,2 +1 @@
-/** Removes fenced json-dashboard blocks (used before persisting chat messages). */
-export declare function stripJsonDashboardFences(text: string): string;
+export { hasJsonDashboardFenceInText, normalizeJsonDashboardChatText, stripJsonDashboardFences, } from './jsonDashboardFence';

package/dist/esm/types/src/lib/dashboard-spec/stripJsonDashboardFences.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.88",
+  "version": "1.3.90",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chat/ChatMessage/AgentMessageContent.helpers.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+
+import { applyFormatting } from './AgentMessageContent.helpers';
+
+function renderFormatting(text: string) {
+  const parts = applyFormatting(text);
+  return render(<>{parts}</>);
+}
+
+describe('applyFormatting headers', () => {
+  it('renders bold inside markdown headers', () => {
+    const { container } = renderFormatting(
+      "### 2. **Monitor Estonia's Balance of Payments** ⭐",
+    );
+
+    const heading = container.querySelector('h3');
+    expect(heading).not.toBeNull();
+    expect(heading?.textContent).toBe(
+      "2. Monitor Estonia's Balance of Payments ⭐",
+    );
+    expect(heading?.querySelector('strong')?.textContent).toBe(
+      "Monitor Estonia's Balance of Payments",
+    );
+  });
+});

package/src/components/ui/Chat/ChatMessage/AgentMessageContent.helpers.tsx

@@ -9,32 +9,6 @@ import logger from '#uilib/lib/logger';
 
 import S from './ChatMessage.styl';
 
-const injectHeaders = (content: string) => {
-  // Match #, ##, ###, or #### headers at start of line
-  const regex = /(^|\n)(#{1,4})\s+(.+?)(?=\n|$)/m;
-  const matches = content.match(regex);
-
-  if (!matches) return null;
-
-  const level = matches[2].length;
-  const headerText = matches[3].replace(/^\*+|\*+$/g, '');
-  const Tag =
-    level === 1 ? 'h1' : level === 2 ? 'h2' : level === 3 ? 'h3' : 'h4';
-
-  // Calculate the actual match position and length
-  // matches[0] includes the leading \n if present, but we want to replace from the # position
-  const hasLeadingNewline = matches[1] === '\n';
-  const startIndex = matches.index! + (hasLeadingNewline ? 1 : 0);
-  // Length is: # markers + space + header text (excluding leading newline)
-  const length = matches[2].length + 1 + matches[3].length;
-
-  return {
-    elem: <Tag>{headerText}</Tag>,
-    index: startIndex,
-    length: length,
-  };
-};
-
 /** Match sits inside list/table HTML (those blocks use dangerouslySetInnerHTML elsewhere). */
 const isInsideHtmlListOrTable = (content: string, matchStartIndex: number) => {
   const before = content.substring(0, matchStartIndex);
@@ -540,6 +514,41 @@ const injectAnchor: Injector = (content: string) => {
   };
 };
 
+const headerTextInjectors: Injector[] = [
+  injectAnchor,
+  injectMarkdownLink,
+  injectHTMLTags,
+  injectBold,
+  injectItalic,
+  injectAutolinkUrl,
+];
+
+const injectHeaders: Injector = (content: string) => {
+  // Match #, ##, ###, or #### headers at start of line
+  const regex = /(^|\n)(#{1,4})\s+(.+?)(?=\n|$)/m;
+  const matches = content.match(regex);
+
+  if (!matches) return null;
+
+  const level = matches[2].length;
+  const headerText = matches[3].replace(/^\*+|\*+$/g, '');
+  const Tag =
+    level === 1 ? 'h1' : level === 2 ? 'h2' : level === 3 ? 'h3' : 'h4';
+
+  // Calculate the actual match position and length
+  // matches[0] includes the leading \n if present, but we want to replace from the # position
+  const hasLeadingNewline = matches[1] === '\n';
+  const startIndex = matches.index! + (hasLeadingNewline ? 1 : 0);
+  // Length is: # markers + space + header text (excluding leading newline)
+  const length = matches[2].length + 1 + matches[3].length;
+
+  return {
+    elem: <Tag>{runFormattingPipeline(headerText, headerTextInjectors)}</Tag>,
+    index: startIndex,
+    length: length,
+  };
+};
+
 const applyFormatting = (text: string): React.ReactNode[] =>
   runFormattingPipeline(text, [
     injectHeaders,

package/src/components/ui/Chat/ChatMessage/ChatMessage.tsx

@@ -1,7 +1,9 @@
 import cn from 'classnames';
+import { useMemo } from 'react';
 
 import { InteractiveContent } from '#uilib/components/ui/InteractiveContent';
 import { TextShimmer } from '#uilib/components/ui/TextShimmer';
+import { stripJsonDashboardFences } from '#uilib/lib/dashboard-spec/stripJsonDashboardFences';
 
 import { type ChatMessageProps, MessageRole } from '../Chat.types';
 import { userTextFileAttachmentsFromMessage } from '../userTextFileAttachments';
@@ -32,6 +34,10 @@ export function ChatMessage({
   });
   const isAssistant = role === MessageRole.ASSISTANT;
   const isSystem = role === MessageRole.SYSTEM;
+  const assistantDisplayText = useMemo(
+    () => (isAssistant ? stripJsonDashboardFences(text) : text),
+    [isAssistant, text],
+  );
 
   return (
     <div className={cn(S.root, S[`role-${role}`], className)}>
@@ -47,7 +53,7 @@ export function ChatMessage({
         </div>
       ) : isAssistant ? (
         <AgentMessageContent
-          text={text}
+          text={assistantDisplayText}
           textClassName={textClassName}
           onQuickReply={onQuickReply}
           suppressedQuickReplyKeys={suppressedQuickReplyKeys}