Fix methodology output

components/InnovationCard.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Innovation, Classification, ResultResponse } from '../types';
 import { ChevronDown, ChevronUp, Trash2, Check, Zap, FileText } from 'lucide-react';
 import { COLOR_MAP } from '../constants';
+import { format } from 'path';
 
 interface InnovationCardProps {
   innovation: ResultResponse;
@@ -22,6 +23,7 @@ const InnovationCard: React.FC<InnovationCardProps> = ({ innovation, onClassify
   console.log(innovation)
   const contextText = innovation.context;
   const problemText = innovation.problem;
+  const methodologyText = formatToHTML(innovation.methodology)
 
   return (
     <div
@@ -83,13 +85,83 @@ const InnovationCard: React.FC<InnovationCardProps> = ({ innovation, onClassify
       </div>
 
       {isExpanded && (
-        <div
+
+        <div className='px-4 pb-4 bg-slate-50 border-t border-slate-100 pt-3 text-sm'>
+          <p className="font-semibold text-slate-700 mb-1">Methodology</p>
+          <div
           className="flex flex-col gap-2 m-2"
-          dangerouslySetInnerHTML={{ __html: innovation.content }}
+          dangerouslySetInnerHTML={{ __html: methodologyText }}
         />
+        </div>
       )}
     </div>
   );
 };
 
+function formatToHTML(rawInput) {
+    if (!rawInput) return "";
+
+    // Convert bold markdown (**text**) to <strong>text</strong>
+    let formatted = rawInput.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
+
+    // Split into lines (handle cases where everything is in one line)
+    formatted = formatted.replace(/(\d+\.)/g, "\n$1");
+    formatted = formatted.replace(/\*/g, "\n*");
+
+    const lines = formatted.split("\n").map(line => line.trim()).filter(Boolean);
+
+    let html = "";
+    let inOrderedList = false;
+    let inUnorderedList = false;
+
+    lines.forEach(line => {
+
+        // Ordered list (e.g., "1. Something")
+        if (/^\d+\.\s/.test(line)) {
+            if (!inOrderedList) {
+                html += "<ol>";
+                inOrderedList = true;
+            }
+            if (inUnorderedList) {
+                html += "</ul>";
+                inUnorderedList = false;
+            }
+            html += `<li>${line.replace(/^\d+\.\s/, "")}</li>`;
+        }
+
+        // Unordered list (e.g., "* Something")
+        else if (/^\*\s/.test(line)) {
+            if (!inUnorderedList) {
+                html += "<ul>";
+                inUnorderedList = true;
+            }
+            if (inOrderedList) {
+                html += "</ol>";
+                inOrderedList = false;
+            }
+            html += `<li>${line.replace(/^\*\s/, "")}</li>`;
+        }
+
+        // Paragraph fallback
+        else {
+            if (inOrderedList) {
+                html += "</ol>";
+                inOrderedList = false;
+            }
+            if (inUnorderedList) {
+                html += "</ul>";
+                inUnorderedList = false;
+            }
+            html += `<p>${line}</p>`;
+        }
+    });
+
+    // Close any open lists
+    if (inOrderedList) html += "</ol>";
+    if (inUnorderedList) html += "</ul>";
+
+    return html;
+}
+
+
 export default InnovationCard;