Repair incomplete widget JSON

Author: ersinkoc

packages/gateway/src/utils/chat-widgets.test.ts

@@ -62,6 +62,19 @@ describe('normalizeChatWidgets', () => {
     expect(result).not.toContain('<key_value');
   });
 
+  it('repairs balanced widget JSON when only closing containers are missing', () => {
+    const result = normalizeChatWidgets(
+      `<metric_grid data='{"items":[{"label":"Total","value":"12"},{"label":"Open","value":"3"}' />`
+    );
+
+    expect(result).toContain('<widget name="metric_grid"');
+    expect(result).toContain('Total');
+    expect(result).toContain('Open');
+    expect(result).toContain('&quot;value&quot;:&quot;3&quot;');
+    expect(result).not.toContain('Widget could not be rendered');
+    expect(result).not.toContain('Invalid widget data');
+  });
+
   it('canonicalizes single-quoted widget JSON with apostrophes inside strings', () => {
     const result = normalizeChatWidgets(
       `<widget name="key_value" data='{"title":"Survival Formula","items":[{"key":"Genclerbirligi","value":"Kasimpasa'yi beat + Trabzonspor'da points stolen -> Play-Out'u skips"},{"key":"Karagumruk","value":"Needs Kayserispor'un loss"}]}' />`

packages/gateway/src/utils/chat-widgets.ts

@@ -101,7 +101,7 @@ function parseTagAttributes(source: string): Record<string, string> {
 }
 
 function parseWidgetData(value: string): unknown {
-  const candidates = [value, value.replace(/\\"/g, '"').replace(/\\'/g, "'")];
+  const candidates = expandWidgetDataCandidates(value);
 
   for (const candidate of candidates) {
     try {
@@ -118,6 +118,60 @@ function parseWidgetData(value: string): unknown {
   throw new Error('Invalid widget data');
 }
 
+function expandWidgetDataCandidates(value: string): string[] {
+  const normalized = value.replace(/\\"/g, '"').replace(/\\'/g, "'");
+  return Array.from(
+    new Set([
+      value,
+      normalized,
+      repairJsonLikeWidgetData(value),
+      repairJsonLikeWidgetData(normalized),
+    ])
+  ).filter(Boolean);
+}
+
+function repairJsonLikeWidgetData(value: string): string {
+  let repaired = value.trim();
+  if (!repaired) return repaired;
+
+  const stack: string[] = [];
+  let inString = false;
+  let escaped = false;
+
+  for (const char of repaired) {
+    if (inString) {
+      if (escaped) {
+        escaped = false;
+      } else if (char === '\\') {
+        escaped = true;
+      } else if (char === '"') {
+        inString = false;
+      }
+      continue;
+    }
+
+    if (char === '"') {
+      inString = true;
+    } else if (char === '{') {
+      stack.push('}');
+    } else if (char === '[') {
+      stack.push(']');
+    } else if ((char === '}' || char === ']') && stack[stack.length - 1] === char) {
+      stack.pop();
+    }
+  }
+
+  if (escaped) repaired = repaired.slice(0, -1);
+  if (inString) repaired += '"';
+
+  while (stack.length > 0) {
+    repaired = repaired.replace(/,\s*$/, '');
+    repaired += stack.pop();
+  }
+
+  return repaired.replace(/,\s*([}\]])/g, '$1');
+}
+
 function decodeJsonString(value: string): string {
   try {
     return JSON.parse(`"${value.replace(/"/g, '\\"')}"`) as string;

packages/ui/src/components/MarkdownContent.test.tsx

@@ -226,6 +226,20 @@ After`}
     expect(html).toContain('Weekly goals');
   });
 
+  it('repairs widget JSON when only closing containers are missing', () => {
+    const html = renderToStaticMarkup(
+      <MarkdownContent
+        content={`<metric_grid data='{"items":[{"label":"Total","value":"12"},{"label":"Open","value":"3"}' />`}
+      />
+    );
+
+    expect(html).toContain('Total');
+    expect(html).toContain('Open');
+    expect(html).toContain('3');
+    expect(html).not.toContain('Widget could not be rendered');
+    expect(html).not.toContain('Invalid widget data');
+  });
+
   it('renders key-value, cards, and steps widgets', () => {
     const html = renderToStaticMarkup(
       <MarkdownContent

packages/ui/src/components/MarkdownContent.tsx

@@ -352,7 +352,7 @@ export const MarkdownContent = memo(function MarkdownContent({
   };
 
   const parseWidgetData = (value: string): unknown => {
-    const candidates = [value, value.replace(/\\"/g, '"').replace(/\\'/g, "'")];
+    const candidates = expandWidgetDataCandidates(value);
 
     for (const candidate of candidates) {
       try {
@@ -369,6 +369,60 @@ export const MarkdownContent = memo(function MarkdownContent({
     throw new Error('Invalid widget data');
   };
 
+  const expandWidgetDataCandidates = (value: string): string[] => {
+    const normalized = value.replace(/\\"/g, '"').replace(/\\'/g, "'");
+    return Array.from(
+      new Set([
+        value,
+        normalized,
+        repairJsonLikeWidgetData(value),
+        repairJsonLikeWidgetData(normalized),
+      ])
+    ).filter(Boolean);
+  };
+
+  const repairJsonLikeWidgetData = (value: string): string => {
+    let repaired = value.trim();
+    if (!repaired) return repaired;
+
+    const stack: string[] = [];
+    let inString = false;
+    let escaped = false;
+
+    for (const char of repaired) {
+      if (inString) {
+        if (escaped) {
+          escaped = false;
+        } else if (char === '\\') {
+          escaped = true;
+        } else if (char === '"') {
+          inString = false;
+        }
+        continue;
+      }
+
+      if (char === '"') {
+        inString = true;
+      } else if (char === '{') {
+        stack.push('}');
+      } else if (char === '[') {
+        stack.push(']');
+      } else if ((char === '}' || char === ']') && stack[stack.length - 1] === char) {
+        stack.pop();
+      }
+    }
+
+    if (escaped) repaired = repaired.slice(0, -1);
+    if (inString) repaired += '"';
+
+    while (stack.length > 0) {
+      repaired = repaired.replace(/,\s*$/, '');
+      repaired += stack.pop();
+    }
+
+    return repaired.replace(/,\s*([}\]])/g, '$1');
+  };
+
   const decodeJsonString = (value: string): string => {
     try {
       return JSON.parse(`"${value.replace(/"/g, '\\"')}"`);