feat: better error and data handling

backend/crawl_ai.py

@@ -24,15 +24,14 @@ async def main(urls):
             semaphore_count=3,
             wait_for_images=True,
         )
-        with open("output.json", "w") as f:
-            f.write("")
+        open("output.log.json", "w").close()
         for result in results:
             if result.success:
                 dump_result = {
                     "url": result.url,
                     "markdown": result.markdown,
                 }
-                with open("output.json", "a") as f:
+                with open("output.log.json", "a") as f:
                     json.dump(dump_result, f)
                 # Print the extracted content
                 hr = lambda n=1: print(("-" * 80) * 2 * n)

backend/knet.py

@@ -70,7 +70,7 @@ class Prompt:
         Return as JSON array of objects with properties:
         - query (string)""")
 
-        self.report_outline = dedent("""Generate a comprehensive report outline on the user query based on the following research findings:
+        self.report_outline = dedent("""Generate a comprehensive outline for a report on the user query based on the findings:
         User query:
         {topic}
 
@@ -79,7 +79,8 @@ class Prompt:
 
         The outline should include:
         - Title
-        - List of h2 headings""")
+        - List of h2 headings
+        Do not include hashtags""")
 
         self.report_fillin = dedent("""Fill in the content for the following report outline on the user query based on the following research findings:
         User query:
@@ -88,11 +89,17 @@ class Prompt:
         Findings:
         {ctx_manager}
 
-        Report Outline:
+        Report generated os far:
+        {report_progress}
+
+        The outline:
         {report_outline}
 
-        Current slot to fill in: (h2 heading)
-        {slot}
+        Current heading to fill in:
+        ## {slot}
+
+        The content should be comprehensive, detailed and well-structured, providing detailed information on the topic. Use tables, lists, and other formatting as needed to enhance readability.
+        Do not include the heading in the content.
         """)
 
 
@@ -186,7 +193,9 @@ class KNet:
         try:
             # Generate research plan
             await self.progress.update(0, "Generating research plan...")
-            self.research_plan = self.generate_content(self.prompt.research_plan.format(topic=topic), schema=self.schema.research_plan)["steps"]
+            self.research_plan = self.generate_content(self.prompt.research_plan.format(topic=topic), schema=self.schema.research_plan, temp=1.5)[
+                "steps"
+            ]
             self.logger.info(f"Research plan:\n{json.dumps(self.research_plan, indent=2)}")
 
             master_node = ResearchNode()
@@ -201,11 +210,12 @@ class KNet:
                         vertical=self.research_plan[self.idx_research_plan], research_plan="None", past_queries="None", ctx_manager="None", n=1
                     ),
                     schema=self.schema.search_query,
+                    temp=1.5,
                 )["branches"][0]
 
                 root_node = ResearchNode(query)
-                master_node.add_child(root_node)
-                to_explore = deque([(root_node, 0)])  # (node, depth) pairs
+                master_node.add_child(root_node.query, node=root_node)
+                to_explore = deque([(root_node, 1)])  # (node, depth) pairs
                 explored_queries = set()  # {string, string, ...}
 
                 await self.progress.update(100 / (len(self.research_plan) + 1), f"{self.research_plan[self.idx_research_plan]}")
@@ -234,7 +244,7 @@ class KNet:
 
             # Generate final report
             await self.progress.update(100 / (len(self.research_plan) + 1), "Generating final report...")
-            final_report = self._generate_final_report(master_node, topic)
+            final_report = await self._generate_final_report(master_node, topic)
 
             self.logger.info(f"Research completed. Explored {len(explored_queries)} queries across {master_node.max_depth()} levels")
             await self.progress.update(100, "Research complete!")
@@ -247,9 +257,9 @@ class KNet:
             self.logger.error("Research failed", exc_info=True)
             raise
 
-    def _generate_final_report(self, root_node: ResearchNode, topic: str, retry_count: int = 1) -> Dict[str, Any]:
+    async def _generate_final_report(self, root_node: ResearchNode, topic: str, retry_count: int = 1) -> Dict[str, Any]:
         try:
-            self.progress.setter(0, "Generating report...")
+            await self.progress.setter(0, "Generating report...")
             findings = "\n\n------\n\n".join(self.ctx_manager)
             with open("ctx_manager.log.txt", "w", encoding="utf-8") as f:
                 f.write(findings)
@@ -258,21 +268,26 @@ class KNet:
             outline = self.generate_content(self.prompt.report_outline.format(topic=topic, ctx_manager=findings), schema=self.schema.report_outline)
             self.logger.info(f"Report outline:\n{json.dumps(outline, indent=2)}")
             report = []
+            raster_report = f"# {outline['title']}\n\n"
             # Fill in report outline
             for i, heading in enumerate(outline["headings"]):
-                self.progress.update(100 / (len(outline["headings"]) + 1), "Generating report...")
+                await self.progress.update(100 / (len(outline["headings"]) + 1), "Generating report...")
                 content = self.generate_content(
                     self.prompt.report_fillin.format(
                         topic=topic,
                         ctx_manager=findings,
+                        report_progress=raster_report,
                         report_outline=["[done] " + outline["title"]] + [f"[done] {h}" for _, h in enumerate(outline["headings"]) if i < _],
                         slot=heading,
                     ),
                     schema=self.schema.report_fillin,
                 )["content"]
+                # Remove heading if LLM put it there regardless
+                idx_heading = content.find(heading)
+                if idx_heading != -1:
+                    content = content[idx_heading + len(heading) :].strip()
                 report.append({"heading": heading, "content": content})
-            # Rasterize report
-            raster_report = f"# {outline['title']}\n\n" + "\n\n".join([f"## {r['heading']}\n\n{r['content']}" for r in report])
+                raster_report += f"\n\n## {heading}\n\n{content}"
 
             # Collate multimedia content
             media_content = {"images": [], "videos": [], "links": [], "references": []}
@@ -317,9 +332,11 @@ class KNet:
             }
 
         except Exception as e:
-            if e in ["GEMINI_RECITATION", "NO_RESPONSE"] and retry_count < 3:
-                self.logger.error(f"Retrying final report:C:{retry_count / 3}", exc_info=True)
-                return self._generate_final_report(root_node, retry_count + 1)
+            if e in ["GEMINI_RECITATION", "NO_RESPONSE"]:
+                self.logger.error("GEMINI_RECITATION or NO_RESPONSE")
+            if retry_count < 3:
+                self.logger.error(f"Retrying final report:C:{retry_count} / 3", exc_info=True)
+                return await self._generate_final_report(root_node, retry_count + 1)
             self.logger.error("Error generating final report", exc_info=True)
             raise
 
@@ -351,8 +368,10 @@ class KNet:
             return new_nodes
 
         except Exception as e:
-            if e in ["GEMINI_RECITATION", "NO_RESPONSE"] and retry_count < 3:
-                self.logger.error(f"Retrying _gen_queries | C:{retry_count / 3}", exc_info=True)
+            if e in ["GEMINI_RECITATION", "NO_RESPONSE"]:
+                self.logger.error("GEMINI_RECITATION or NO_RESPONSE")
+            if retry_count < 3:
+                self.logger.error(f"Retrying _gen_queries | C:{retry_count} / 3", exc_info=True)
                 return self._gen_queries(node, topic, retry_count + 1)
             self.logger.error("_gen_queries failed", exc_info=True)
             raise
@@ -381,13 +400,15 @@ class KNet:
             return response["decision"]
 
         except Exception as e:
-            if e in ["GEMINI_RECITATION", "NO_RESPONSE"] and retry_count < 3:
-                self.logger.error(f"Retrying branch decision:C:{retry_count / 3}", exc_info=True)
+            if e in ["GEMINI_RECITATION", "NO_RESPONSE"]:
+                self.logger.error("GEMINI_RECITATION or NO_RESPONSE")
+            if retry_count < 3:
+                self.logger.error(f"Retrying branch decision:C:{retry_count} / 3", exc_info=True)
                 return self._should_continue_branch(node, topic, retry_count + 1)
             self.logger.error("Branch decision failed:", exc_info=True)
             raise
 
-    def generate_content(self, prompt: str, schema: Dict[str, Any] = {}, temp: float = 0.9) -> Dict[str, Any] | str:
+    def generate_content(self, prompt: str, schema: Dict[str, Any] = {}, temp: float = 1, _retry_count: int = 1) -> Dict[str, Any] | str:
         safe = [
             types.SafetySetting(category=types.HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT, threshold=types.HarmBlockThreshold.BLOCK_NONE),
             types.SafetySetting(category=types.HarmCategory.HARM_CATEGORY_HARASSMENT, threshold=types.HarmBlockThreshold.BLOCK_NONE),

backend/research_node.py

@@ -10,8 +10,13 @@ class ResearchNode:
         self.children: List[ResearchNode] = []
         self.data: List[Dict[str, Any]] = []
 
-    def add_child(self, query: str) -> "ResearchNode":
-        child = ResearchNode(query, parent=self, depth=self.depth + 1)
+    def add_child(self, query: str, node: Optional["ResearchNode"] = None) -> "ResearchNode":
+        if node:
+            child = node
+            child.parent = self
+            child.depth = self.depth + 1
+        else:
+            child = ResearchNode(query, parent=self, depth=self.depth + 1)
         self.children.append(child)
         return child
 

backend/scraper.py

@@ -163,7 +163,7 @@ class CrawlForAIScraper:
             headless=True,
             viewport_width=1920,
             viewport_height=1080,
-            accept_downloads=True,
+            accept_downloads=False,
             verbose=False,
         )
         self.crawler = AsyncWebCrawler(config=self.base_browser)
@@ -185,19 +185,25 @@ class CrawlForAIScraper:
         self.logger.info(f"Querying: {query}")
 
         # Perform a search to get a list of webpages
-        search_results = await self._search(query, num_sites)
+        search_results = await self._search(query)
 
         # Scrape each webpage
         scraped_data = []
-        self.logger.info(f"Scraping {len(search_results)} sites...")
-        data = await self._scrape_pages(search_results)
-        if data:
-            scraped_data.extend(data)
+        self.logger.info(f"Scraping {num_sites} sites...")
+        data = await self._scrape_pages(search_results[: num_sites + 2], num_sites)
+        scraped_data.extend(data)
+
+        # Scrape next pages when some failed
+        for _ in range(3):
+            if len(scraped_data) < num_sites:
+                idx_last_page = search_results.index(search_results[-1])
+                data = await self._scrape_pages(search_results[idx_last_page + 1 : num_sites + 2], num_sites)
+                scraped_data.extend(data)
 
         self.logger.info(f"Completed scraping {len(scraped_data)} sites")
         return scraped_data
 
-    async def _search(self, query: str, num_results: int) -> List[str]:
+    async def _search(self, query: str) -> List[str]:
         try:
             encoded_query = quote_plus(query)
             search_uri = f"https://www.google.com/search?q={encoded_query}"
@@ -210,26 +216,28 @@ class CrawlForAIScraper:
                 scan_full_page=True,
             )
 
-            soup = BeautifulSoup(result.html, "html.parser")
+            soup = BeautifulSoup(result.cleaned_html, "html.parser")
             search_results = []
 
             for link in list(soup.select("div > span > a"))[2:]:
                 url = link.get("href").replace(" ", "").replace("\n", "").strip()
                 if not url.startswith(("http://", "https://")):
                     url = "https://" + url
+                if "support.google.com" in url or url.startswith("/search?q="):
+                    continue
                 search_results.append(url)
 
             self.logger.info(f"Found {len(search_results)} results")
-            return search_results[:num_results]
+            return search_results
 
         except requests.exceptions.RequestException as e:
-            self.logger.error(f"Google search error: {str(e)}")
-            return []
+            self.logger.error(f"Google search error: {str(e)}", exc_info=True)
+            raise
         except Exception as e:
-            self.logger.error(f"Google search error: {str(e)}")
-            return []
+            self.logger.error(f"Google search error: {str(e)}", exc_info=True)
+            raise
 
-    async def _scrape_pages(self, urls: str) -> Dict[str, Any]:
+    async def _scrape_pages(self, urls: str, max_sites: int) -> Dict[str, Any]:
         await self.start()
 
         try:
@@ -241,22 +249,47 @@ class CrawlForAIScraper:
                 scan_full_page=True,
                 semaphore_count=4,
                 wait_for_images=True,
+                scroll_delay=0.1,
+                delay_before_return_html=2,
+                exclude_external_images=True,
                 page_timeout=25000,
             )
             scraped_sites = []
             for result in results:
                 if result.success:
                     soup = BeautifulSoup(result.html, "html.parser")
+
+                    # Combine images
+                    extracted_images = self._extract_images(soup, result.url)
+                    media_images = []
+                    for img in result.media["images"]:
+                        if img["width"] is None or (isinstance(img["width"], (int, float)) and img["width"] > 300):
+                            # Resolve multiple URLs in the src attribute
+                            src = img["src"]
+                            if " " in src and "w," in src:
+                                urls = [url.strip() for url in src.split(" ") if url.strip()]
+                                if urls:
+                                    last_url = urls[-1].split(" ")[0]
+                                    media_images.append(last_url)
+                            else:
+                                media_images.append(src)
+                    all_images = list(set(extracted_images + media_images))
+
+                    # Combine videos
+                    all_videos = self._extract_videos(soup)
+                    media_videos = [v["src"] for v in result.media["videos"] if v["src"]]
+                    all_videos = list(set(all_videos + media_videos))
+
                     data = {
                         "url": result.url,
                         "text": result.markdown,
-                        "images": self._extract_images(soup, result.url),
-                        "videos": self._extract_videos(soup),
-                        "links": result.links["external"],
+                        "images": all_images,
+                        "videos": all_videos,
+                        "links": self._extract_links(result.links["external"]),
                     }
                     scraped_sites.append(data)
                     self.logger.info(f"  - {result.url[:80]}...")
-            return scraped_sites
+            return scraped_sites[: max_sites]
 
         except Exception as e:
             self.logger.error(f"Scraping error while {urls}: {str(e)}")
@@ -293,20 +326,31 @@ class CrawlForAIScraper:
         videos = []
         nodes = list(soup.find_all("iframe")) + list(soup.find_all("video")) + list(soup.find_all("a"))
         for node in nodes:
-            if node.name == "iframe":
-                src = node.get("src", "")
-                if "youtube.com" in src or "youtu.be" in src:
-                    videos.append(src)
-            elif node.name == "video":
-                src = node.get("src", "")
-                if "youtube.com" in src or "youtu.be" in src:
-                    videos.append(src)
-            elif node.name == "a":
-                href = node.get("href", "")
-                if "youtube.com" in href or "youtu.be" in href:
-                    videos.append(href)
+            if not any(
+                keyword in node.get("src", "") or keyword in node.get("href", "")
+                for keyword in ["accounts.google.com", "blob:", "youtube.com/redirect"]
+            ):
+                continue
+            elif (
+                any(node.name in tag for tag in ["video", "iframe", "a"])
+                and "www.youtube.com/watch?v" in node.get("src", "")
+                or "www.youtube.com/watch?v" in node.get("href", "")
+            ):
+                videos.append(node.get("src", ""))
         return videos
 
+    def _extract_links(self, links: list) -> List[str]:
+        # Filter out unwanted links
+        filtered_links = []
+        for link in links:
+            url = link.get("href")
+            if url.startswith(("http://", "https://")) and not any(
+                keyword in url
+                for keyword in ["support.google.com", "google.com", "accounts.google.com", "youtube.com", "blob:", "mailto:", "javascript:"]
+            ):
+                filtered_links.append(link)
+        return filtered_links
+
 
 if __name__ == "__main__":
     import sys
@@ -325,9 +369,9 @@ if __name__ == "__main__":
     async def main():
         scraper = CrawlForAIScraper()
         await scraper.start()
-        data = await scraper.search_and_scrape("quantum computing")
+        data = await scraper.search_and_scrape("blender.org")
         await scraper.close()
-        with open("output.json", "w") as f:
+        with open("output.log.json", "w") as f:
             f.write(json.dumps(data, indent=2))
         print(json.dumps(data, indent=2))
 

frontend/bun.lock

@@ -15,6 +15,7 @@
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-tooltip": "^1.1.8",
+        "@types/react-syntax-highlighter": "^15.5.13",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "eslint-config-next": "^15.2.4",
@@ -25,6 +26,7 @@
         "react-dom": "^19.1.0",
         "react-markdown": "^10.1.0",
         "react-resizable-panels": "^2.1.7",
+        "react-syntax-highlighter": "^15.6.1",
         "remark-gfm": "^4.0.1",
         "shadcn": "^2.4.0-canary.19",
         "socket.io-client": "^4.8.1",
@@ -92,6 +94,8 @@
 
     "@babel/plugin-transform-typescript": ["@babel/plugin-transform-typescript@7.26.8", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.25.9", "@babel/helper-create-class-features-plugin": "^7.25.9", "@babel/helper-plugin-utils": "^7.26.5", "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9", "@babel/plugin-syntax-typescript": "^7.25.9" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-bME5J9AC8ChwA7aEPJ6zym3w7aObZULHhbNLU0bKUhKsAkylkzUdq+0kdymh9rzi8nlNFl2bmldFBCKNJBUpuw=="],
 
+    "@babel/runtime": ["@babel/runtime@7.27.0", "", { "dependencies": { "regenerator-runtime": "^0.14.0" } }, "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw=="],
+
     "@babel/template": ["@babel/template@7.26.9", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "@babel/parser": "^7.26.9", "@babel/types": "^7.26.9" } }, "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA=="],
 
     "@babel/traverse": ["@babel/traverse@7.26.10", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.10", "@babel/parser": "^7.26.10", "@babel/template": "^7.26.9", "@babel/types": "^7.26.10", "debug": "^4.3.1", "globals": "^11.1.0" } }, "sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A=="],
@@ -356,6 +360,8 @@
 
     "@types/react-dom": ["@types/react-dom@18.3.5", "", { "peerDependencies": { "@types/react": "^18.0.0" } }, "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q=="],
 
+    "@types/react-syntax-highlighter": ["@types/react-syntax-highlighter@15.5.13", "", { "dependencies": { "@types/react": "*" } }, "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA=="],
+
     "@types/statuses": ["@types/statuses@2.0.5", "", {}, "sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A=="],
 
     "@types/tough-cookie": ["@types/tough-cookie@4.0.5", "", {}, "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA=="],
@@ -502,13 +508,13 @@
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
-    "character-entities": ["character-entities@2.0.2", "", {}, "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="],
+    "character-entities": ["character-entities@1.2.4", "", {}, "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="],
 
     "character-entities-html4": ["character-entities-html4@2.1.0", "", {}, "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA=="],
 
-    "character-entities-legacy": ["character-entities-legacy@3.0.0", "", {}, "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="],
+    "character-entities-legacy": ["character-entities-legacy@1.1.4", "", {}, "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="],
 
-    "character-reference-invalid": ["character-reference-invalid@2.0.1", "", {}, "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw=="],
+    "character-reference-invalid": ["character-reference-invalid@1.1.4", "", {}, "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="],
 
     "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
 
@@ -680,6 +686,8 @@
 
     "fastq": ["fastq@1.19.0", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA=="],
 
+    "fault": ["fault@1.0.4", "", { "dependencies": { "format": "^0.2.0" } }, "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA=="],
+
     "fdir": ["fdir@6.4.3", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw=="],
 
     "fetch-blob": ["fetch-blob@3.2.0", "", { "dependencies": { "node-domexception": "^1.0.0", "web-streams-polyfill": "^3.0.3" } }, "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ=="],
@@ -698,6 +706,8 @@
 
     "foreground-child": ["foreground-child@3.3.0", "", { "dependencies": { "cross-spawn": "^7.0.0", "signal-exit": "^4.0.1" } }, "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg=="],
 
+    "format": ["format@0.2.2", "", {}, "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww=="],
+
     "formdata-polyfill": ["formdata-polyfill@4.0.10", "", { "dependencies": { "fetch-blob": "^3.1.2" } }, "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g=="],
 
     "fs-extra": ["fs-extra@11.3.0", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew=="],
@@ -758,12 +768,20 @@
 
     "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],
 
+    "hast-util-parse-selector": ["hast-util-parse-selector@2.2.5", "", {}, "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ=="],
+
     "hast-util-to-jsx-runtime": ["hast-util-to-jsx-runtime@2.3.6", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "hast-util-whitespace": "^3.0.0", "mdast-util-mdx-expression": "^2.0.0", "mdast-util-mdx-jsx": "^3.0.0", "mdast-util-mdxjs-esm": "^2.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "style-to-js": "^1.0.0", "unist-util-position": "^5.0.0", "vfile-message": "^4.0.0" } }, "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg=="],
 
     "hast-util-whitespace": ["hast-util-whitespace@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw=="],
 
+    "hastscript": ["hastscript@6.0.0", "", { "dependencies": { "@types/hast": "^2.0.0", "comma-separated-tokens": "^1.0.0", "hast-util-parse-selector": "^2.0.0", "property-information": "^5.0.0", "space-separated-tokens": "^1.0.0" } }, "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w=="],
+
     "headers-polyfill": ["headers-polyfill@4.0.3", "", {}, "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ=="],
 
+    "highlight.js": ["highlight.js@10.7.3", "", {}, "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="],
+
+    "highlightjs-vue": ["highlightjs-vue@1.0.0", "", {}, "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA=="],
+
     "html-url-attributes": ["html-url-attributes@3.0.1", "", {}, "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ=="],
 
     "https-proxy-agent": ["https-proxy-agent@6.2.1", "", { "dependencies": { "agent-base": "^7.0.2", "debug": "4" } }, "sha512-ONsE3+yfZF2caH5+bJlcddtWqNI3Gvs5A38+ngvljxaBiRXRswym2c7yf8UAeFpRFKjFNHIFEHqR/OLAWJzyiA=="],
@@ -784,9 +802,9 @@
 
     "internal-slot": ["internal-slot@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "hasown": "^2.0.2", "side-channel": "^1.1.0" } }, "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw=="],
 
-    "is-alphabetical": ["is-alphabetical@2.0.1", "", {}, "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ=="],
+    "is-alphabetical": ["is-alphabetical@1.0.4", "", {}, "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="],
 
-    "is-alphanumerical": ["is-alphanumerical@2.0.1", "", { "dependencies": { "is-alphabetical": "^2.0.0", "is-decimal": "^2.0.0" } }, "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw=="],
+    "is-alphanumerical": ["is-alphanumerical@1.0.4", "", { "dependencies": { "is-alphabetical": "^1.0.0", "is-decimal": "^1.0.0" } }, "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A=="],
 
     "is-array-buffer": ["is-array-buffer@3.0.5", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "get-intrinsic": "^1.2.6" } }, "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A=="],
 
@@ -810,7 +828,7 @@
 
     "is-date-object": ["is-date-object@1.1.0", "", { "dependencies": { "call-bound": "^1.0.2", "has-tostringtag": "^1.0.2" } }, "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg=="],
 
-    "is-decimal": ["is-decimal@2.0.1", "", {}, "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A=="],
+    "is-decimal": ["is-decimal@1.0.4", "", {}, "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw=="],
 
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
 
@@ -822,7 +840,7 @@
 
     "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
 
-    "is-hexadecimal": ["is-hexadecimal@2.0.1", "", {}, "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg=="],
+    "is-hexadecimal": ["is-hexadecimal@1.0.4", "", {}, "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="],
 
     "is-interactive": ["is-interactive@2.0.0", "", {}, "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ=="],
 
@@ -916,6 +934,8 @@
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
 
+    "lowlight": ["lowlight@1.20.0", "", { "dependencies": { "fault": "^1.0.0", "highlight.js": "~10.7.0" } }, "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw=="],
+
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
     "lucide-react": ["lucide-react@0.479.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-aBhNnveRhorBOK7uA4gDjgaf+YlHMdMhQ/3cupk6exM10hWlEU+2QtWYOfhXhjAsmdb6LeKR+NZnow4UxRRiTQ=="],
@@ -1088,7 +1108,7 @@
 
     "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],
 
-    "parse-entities": ["parse-entities@4.0.2", "", { "dependencies": { "@types/unist": "^2.0.0", "character-entities-legacy": "^3.0.0", "character-reference-invalid": "^2.0.0", "decode-named-character-reference": "^1.0.0", "is-alphanumerical": "^2.0.0", "is-decimal": "^2.0.0", "is-hexadecimal": "^2.0.0" } }, "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw=="],
+    "parse-entities": ["parse-entities@2.0.0", "", { "dependencies": { "character-entities": "^1.0.0", "character-entities-legacy": "^1.0.0", "character-reference-invalid": "^1.0.0", "is-alphanumerical": "^1.0.0", "is-decimal": "^1.0.0", "is-hexadecimal": "^1.0.0" } }, "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ=="],
 
     "parse-json": ["parse-json@5.2.0", "", { "dependencies": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", "json-parse-even-better-errors": "^2.3.0", "lines-and-columns": "^1.1.6" } }, "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg=="],
 
@@ -1132,6 +1152,8 @@
 
     "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
 
+    "prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
+
     "prompts": ["prompts@2.4.2", "", { "dependencies": { "kleur": "^3.0.3", "sisteransi": "^1.0.5" } }, "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q=="],
 
     "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
@@ -1162,6 +1184,8 @@
 
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
+    "react-syntax-highlighter": ["react-syntax-highlighter@15.6.1", "", { "dependencies": { "@babel/runtime": "^7.3.1", "highlight.js": "^10.4.1", "highlightjs-vue": "^1.0.0", "lowlight": "^1.17.0", "prismjs": "^1.27.0", "refractor": "^3.6.0" }, "peerDependencies": { "react": ">= 0.14.0" } }, "sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg=="],
+
     "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
 
     "readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
@@ -1172,6 +1196,10 @@
 
     "reflect.getprototypeof": ["reflect.getprototypeof@1.0.10", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-abstract": "^1.23.9", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "get-intrinsic": "^1.2.7", "get-proto": "^1.0.1", "which-builtin-type": "^1.2.1" } }, "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw=="],
 
+    "refractor": ["refractor@3.6.0", "", { "dependencies": { "hastscript": "^6.0.0", "parse-entities": "^2.0.0", "prismjs": "~1.27.0" } }, "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA=="],
+
+    "regenerator-runtime": ["regenerator-runtime@0.14.1", "", {}, "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="],
+
     "regexp.prototype.flags": ["regexp.prototype.flags@1.5.4", "", { "dependencies": { "call-bind": "^1.0.8", "define-properties": "^1.2.1", "es-errors": "^1.3.0", "get-proto": "^1.0.1", "gopd": "^1.2.0", "set-function-name": "^2.0.2" } }, "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA=="],
 
     "remark-gfm": ["remark-gfm@4.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-gfm": "^3.0.0", "micromark-extension-gfm": "^3.0.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.0" } }, "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg=="],
@@ -1410,6 +1438,8 @@
 
     "xmlhttprequest-ssl": ["xmlhttprequest-ssl@2.1.2", "", {}, "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ=="],
 
+    "xtend": ["xtend@4.0.2", "", {}, "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="],
+
     "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
 
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
@@ -1466,6 +1496,8 @@
 
     "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
+    "decode-named-character-reference/character-entities": ["character-entities@2.0.2", "", {}, "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="],
+
     "eslint/debug": ["debug@4.4.0", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],
 
     "eslint-import-resolver-node/debug": ["debug@3.2.7", "", { "dependencies": { "ms": "^2.1.1" } }, "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="],
@@ -1486,24 +1518,34 @@
 
     "glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
 
+    "hastscript/@types/hast": ["@types/hast@2.3.10", "", { "dependencies": { "@types/unist": "^2" } }, "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw=="],
+
+    "hastscript/comma-separated-tokens": ["comma-separated-tokens@1.0.8", "", {}, "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw=="],
+
+    "hastscript/property-information": ["property-information@5.6.0", "", { "dependencies": { "xtend": "^4.0.0" } }, "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA=="],
+
+    "hastscript/space-separated-tokens": ["space-separated-tokens@1.1.5", "", {}, "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA=="],
+
     "is-bun-module/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
 
     "log-symbols/chalk": ["chalk@5.4.1", "", {}, "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w=="],
 
     "mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
 
+    "mdast-util-mdx-jsx/parse-entities": ["parse-entities@4.0.2", "", { "dependencies": { "@types/unist": "^2.0.0", "character-entities-legacy": "^3.0.0", "character-reference-invalid": "^2.0.0", "decode-named-character-reference": "^1.0.0", "is-alphanumerical": "^2.0.0", "is-decimal": "^2.0.0", "is-hexadecimal": "^2.0.0" } }, "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw=="],
+
     "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
     "npm-run-path/path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],
 
     "ora/chalk": ["chalk@5.4.1", "", {}, "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w=="],
 
-    "parse-entities/@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
-
     "path-scurry/lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
 
     "prompts/kleur": ["kleur@3.0.3", "", {}, "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="],
 
+    "refractor/prismjs": ["prismjs@1.27.0", "", {}, "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA=="],
+
     "restore-cursor/onetime": ["onetime@5.1.2", "", { "dependencies": { "mimic-fn": "^2.1.0" } }, "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg=="],
 
     "sharp/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
@@ -1518,6 +1560,8 @@
 
     "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
+    "stringify-entities/character-entities-legacy": ["character-entities-legacy@3.0.0", "", {}, "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="],
+
     "strip-ansi-cjs/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
     "sucrase/commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
@@ -1546,6 +1590,20 @@
 
     "glob/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
 
+    "hastscript/@types/hast/@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
+
+    "mdast-util-mdx-jsx/parse-entities/@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
+
+    "mdast-util-mdx-jsx/parse-entities/character-entities-legacy": ["character-entities-legacy@3.0.0", "", {}, "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="],
+
+    "mdast-util-mdx-jsx/parse-entities/character-reference-invalid": ["character-reference-invalid@2.0.1", "", {}, "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw=="],
+
+    "mdast-util-mdx-jsx/parse-entities/is-alphanumerical": ["is-alphanumerical@2.0.1", "", { "dependencies": { "is-alphabetical": "^2.0.0", "is-decimal": "^2.0.0" } }, "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw=="],
+
+    "mdast-util-mdx-jsx/parse-entities/is-decimal": ["is-decimal@2.0.1", "", {}, "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A=="],
+
+    "mdast-util-mdx-jsx/parse-entities/is-hexadecimal": ["is-hexadecimal@2.0.1", "", {}, "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg=="],
+
     "restore-cursor/onetime/mimic-fn": ["mimic-fn@2.1.0", "", {}, "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="],
 
     "string-width-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
@@ -1555,5 +1613,7 @@
     "wrap-ansi-cjs/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
     "wrap-ansi/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "mdast-util-mdx-jsx/parse-entities/is-alphanumerical/is-alphabetical": ["is-alphabetical@2.0.1", "", {}, "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ=="],
   }
 }

frontend/package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "eslint-config-next": "^15.2.4",
@@ -30,6 +31,7 @@
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^2.1.7",
+    "react-syntax-highlighter": "^15.6.1",
     "remark-gfm": "^4.0.1",
     "shadcn": "^2.4.0-canary.19",
     "socket.io-client": "^4.8.1",

frontend/src/components/ChatInterface.tsx

@@ -27,7 +27,18 @@ const loadFromStorage = (): ChatData => {
   try {
     const parsed = JSON.parse(data);
     return {
-      conversations: Array.isArray(parsed.conversations) ? parsed.conversations : [],
+      conversations: Array.isArray(parsed.conversations)
+        ? parsed.conversations.map((conv: Conversation) => ({
+            ...conv,
+            messages: Array.isArray(conv.messages)
+              ? conv.messages.map((msg: Message) => ({
+                  ...msg,
+                  // Ensure media property is preserved if it exists
+                  media: msg.media || undefined,
+                }))
+              : [],
+          }))
+        : [],
       currentConversationId: parsed.currentConversationId,
     };
   } catch (e) {
@@ -45,7 +56,7 @@ const ChatInterface = () => {
     sources: true,
     citations: false,
     max_depth: 1,
-    num_sites_per_query: 5,
+    num_sites_per_query: 3,
   });
 
   const userInputRef = useRef<HTMLTextAreaElement>(null);
@@ -118,7 +129,10 @@ const ChatInterface = () => {
         // Format research stats and response
         const stats = [`Total Queries: ${results.metadata.total_queries}`, `Sources Used: ${results.metadata.total_sources}`, `Search Depth: ${results.metadata.max_depth_reached}`].join(" | ");
 
-        const formattedResponse = [results.content, `\n\n---\n**Research Stats:**\n${stats}`, results.media?.images?.length ? `\n\n**Relevant Images:**\n${results.media.images.join("\n")}` : ""].join("");
+        // Format images in a way the Message component can extract
+        const imageMarkdown = results.media?.images?.length ? `\n\n**Relevant Images:**\n${results.media.images.map((img) => `![Image](${img})`).join("\n")}` : "";
+
+        const formattedResponse = [results.content, `\n\n---\n**Research Stats:**\n${stats}`, imageMarkdown].join("");
 
         const newMessages = [
           ...messages,
@@ -127,6 +141,8 @@ const ChatInterface = () => {
             content: formattedResponse,
             role: "assistant" as const,
             timestamp: new Date(results.timestamp),
+            // Store the media object directly with the message
+            media: results.media,
           },
         ];
 
@@ -172,9 +188,9 @@ const ChatInterface = () => {
     setCurrentConversationId(data.currentConversationId);
 
     if (data.currentConversationId) {
-      const currentConv = data.conversations.find((c) => c.id === data.currentConversationId);
-      if (currentConv) {
-        setChatState((prev) => ({ ...prev, messages: currentConv.messages }));
+      const conversation = data.conversations.find((c) => c.id === data.currentConversationId);
+      if (conversation) {
+        setChatState((prev) => ({ ...prev, messages: conversation.messages }));
       }
     }
   }, []);
@@ -257,7 +273,7 @@ const ChatInterface = () => {
   const handleNewConversation = () => {
     userInputRef.current?.focus();
     setCurrentConversationId(null);
-    setChatState((prev) => ({
+    setChatState(() => ({
       messages: [],
       isLoading: false,
       error: null,

frontend/src/components/Message.tsx

@@ -5,9 +5,69 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Message as MessageType } from "@/lib/types";
 import { Bot, Copy, MoreHorizontal, User2 } from "lucide-react";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+
+// ImageGallery component for handling images in a scrollable container
+const ImageGallery = ({ imageUrls }: { imageUrls: string[] }) => {
+  const [loadedImages, setLoadedImages] = useState<string[]>([]);
+
+  // Lazy load images using Intersection Observer
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const img = entry.target as HTMLImageElement;
+            const src = img.getAttribute("data-src");
+            if (src) {
+              img.src = src;
+              observer.unobserve(img);
+              setLoadedImages((prev) => [...prev, src]);
+            }
+          }
+        });
+      },
+      { rootMargin: "100px" }
+    );
+
+    const imgPlaceholders = document.querySelectorAll(".lazy-image");
+    imgPlaceholders.forEach((img) => observer.observe(img));
+
+    return () => observer.disconnect();
+  }, [imageUrls]);
+
+  if (!imageUrls || imageUrls.length === 0) return null;
+
+  return (
+    <div className="mt-4 mb-4">
+      <h3 className="text-md font-semibold mb-2">Relevant Images:</h3>
+      <ScrollArea className="w-full max-h-72 rounded-md border">
+        <div className="p-2 space-y-3">
+          {imageUrls.map((url, index) => (
+            <div key={index} className="image-container">
+              <img
+                className="lazy-image rounded-md max-w-full"
+                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f1f1f1'/%3E%3C/svg%3E"
+                data-src={url}
+                alt={`Research image ${index + 1}`}
+                loading="lazy"
+                onError={(e) => {
+                  const target = e.target as HTMLImageElement;
+                  target.onerror = null;
+                  target.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f1f1f1'/%3E%3Ctext x='50%' y='50%' font-size='12' text-anchor='middle' alignment-baseline='middle' font-family='Arial, sans-serif'%3EImage failed to load%3C/text%3E%3C/svg%3E";
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
 
 const MarkdownComponents: Record<string, React.ComponentType<any>> = {
   h1: ({ children }) => <h1 className="text-2xl font-bold mb-4">{children}</h1>,
@@ -17,27 +77,83 @@ const MarkdownComponents: Record<string, React.ComponentType<any>> = {
   ul: ({ children }) => <ul className="list-disc ml-6 mb-4">{children}</ul>,
   ol: ({ children }) => <ol className="list-decimal ml-6 mb-4">{children}</ol>,
   li: ({ children }) => <li className="mb-1">{children}</li>,
-  code: ({ node, inline, className, children, ...props }) => (
-    // <ScrollArea asChild >
-      <code className={`${Object.keys(node.properties).length === 0 ? "bg-muted px-1 py-0.5 rounded-md text-sm" : "block bg-muted p-1 rounded-lg text-sm overflow-x-auto max-w-full mb-1"}`} {...props}>
+  code: ({ node, inline, className, children, ...props }) => {
+    const match = /language-(\w+)/.exec(className || "");
+    const language = match ? match[1] : "";
+
+    return Object.keys(node.properties).length === 0 ? (
+      <code className="bg-muted px-1 py-0.5 rounded-md text-sm" {...props}>
         {children}
       </code>
-    // </ScrollArea>
-  ),
-  pre: ({ children }) => <pre className="bg-transparent p-0 max-w-full overflow-x-auto">{children}</pre>,
+    ) : (
+      <ScrollArea className="w-full max-w-full">
+        <SyntaxHighlighter
+          style={oneDark}
+          language={language || "text"}
+          PreTag="div"
+          className="rounded-md my-2 text-sm"
+          showLineNumbers
+          customStyle={{
+            margin: 0,
+            borderRadius: "0.5rem",
+            padding: "1rem",
+          }}
+          {...props}>
+          {String(children).replace(/\n$/, "")}
+        </SyntaxHighlighter>
+      </ScrollArea>
+    );
+  },
+  pre: ({ children }) => <div className="bg-transparent p-0 max-w-full">{children}</div>,
   a: ({ children, href }) => (
     <a href={href} className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">
       {children}
     </a>
   ),
   blockquote: ({ children }) => <blockquote className="border-l-4 border-border pl-4 italic my-4">{children}</blockquote>,
-  table: ({ children }) => <table className="w-full border-collapse my-4 border-slate-300 dark:border-slate-200">{children}</table>,
-  thead: ({ children }) => <thead className="bg-muted/50">{children}</thead>,
+  table: ({ children }) => (
+    <div className="overflow-x-auto border rounded-2xl my-4">
+      <table className="w-full border-collapse rounded-2xl overflow-hidden shadow-sm">{children}</table>
+    </div>
+  ),
+  thead: ({ children }) => <thead className="bg-muted">{children}</thead>,
+  tbody: ({ children }) => <tbody>{children}</tbody>,
+  th: ({ children }) => <th className="border-r last:border-r-0 border-slate-900 px-4 py-2 text-left font-semibold">{children}</th>,
+  tr: ({ children }) => <tr className="border-b last:border-b-0 border-border">{children}</tr>,
+  td: ({ children }) => <td className="border-r last:border-r-0 border-border px-4 py-2">{children}</td>,
 };
 
 const Message = ({ message }: { message: MessageType }) => {
   const isUser = message.role === "user";
   const isProgress = message.content.includes("%)") && message.role === "assistant";
+  const [imageUrls, setImageUrls] = useState<string[]>([]);
+
+  // Extract image URLs from the message content or use the media object
+  useEffect(() => {
+    if (!isUser && !isProgress) {
+      let urls: string[] = [];
+
+      // First, check if there's a media object with images
+      if (message.media?.images && message.media.images.length > 0) {
+        urls = message.media.images;
+      } else {
+        // Fallback to extracting from markdown content
+        const imgRegex = /!\[.*?\]\((.*?)\)/g;
+        let match;
+
+        while ((match = imgRegex.exec(message.content)) !== null) {
+          if (match[1]) {
+            urls.push(match[1]);
+          }
+        }
+      }
+
+      setImageUrls(urls);
+    }
+  }, [message.content, message.media, isUser, isProgress]);
+
+  // Prepare message content without image markdown
+  const cleanContent = message.content.replace(/!\[.*?\]\(.*?\)\n?/g, "").replace(/\*\*Relevant Images:\*\*\n/g, "");
 
   const copyToClipboard = () => {
     navigator.clipboard.writeText(message.content);
@@ -85,8 +201,10 @@ const Message = ({ message }: { message: MessageType }) => {
 
           <div className={`mt-1 max-w-none ${isUser ? "bg-slate-300 dark:bg-slate-200 dark:text-background text-foreground" : isProgress ? "bg-muted/30" : "bg-muted/50"} p-3 rounded-2xl ${isUser ? "rounded-tr-sm" : "rounded-tl-sm"}`} style={{ overflowWrap: "anywhere" }}>
             <ReactMarkdown remarkPlugins={[remarkGfm]} components={MarkdownComponents}>
-              {message.content}
+              {cleanContent}
             </ReactMarkdown>
+
+            {imageUrls.length > 0 && <ImageGallery imageUrls={imageUrls} />}
           </div>
         </div>
       </div>

frontend/src/components/ui/ChatLayout.tsx

@@ -3,11 +3,12 @@ import { Card } from "@/components/ui/card";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { LayoutGrid, MessageCircle, Settings } from "lucide-react";
+import { LayoutGrid, Menu, MessageCircle, Settings } from "lucide-react";
 import React from "react";
 import { ThemeToggle } from "./ThemeToggle";
 import Link from "next/link";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Sheet, SheetContent, SheetTrigger, SheetTitle, SheetDescription } from "@/components/ui/sheet";
 
 interface ChatLayoutProps {
   sidebar: React.ReactNode;
@@ -19,8 +20,28 @@ const ChatLayout: React.FC<ChatLayoutProps> = ({ sidebar, mainContent, settingsP
   return (
     <div className="h-screen flex flex-col">
       <header className="border-b-2 h-14 flex items-center px-6">
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="icon" className="md:hidden mr-2">
+              <Menu size={20} />
+              <span className="sr-only">Toggle sidebar</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" className="w-[80%] sm:w-[350px] p-0">
+            <SheetTitle className="sr-only">Mobile Navigation</SheetTitle>
+            <SheetDescription className="sr-only">
+              Sidebar navigation for mobile devices
+            </SheetDescription>
+            <div className="border-b p-4">
+              <h2 className="text-lg font-semibold">Conversations</h2>
+            </div>
+            <ScrollArea className="h-[calc(100%-60px)] py-2">{sidebar}</ScrollArea>
+          </SheetContent>
+        </Sheet>
+
         <Link href={"/"}>
-          <h1 className="text-xl font-semibold">KnowledgeNet: Deep Research</h1>
+          <h1 className="text-xl font-semibold hidden sm:inline">KnowledgeNet: Deep Research</h1>
+          <h1 className="text-lg font-semibold sm:hidden">KNet: Deep Research</h1>
         </Link>
         <div className="flex-1" />
         <ThemeToggle />
@@ -33,9 +54,7 @@ const ChatLayout: React.FC<ChatLayoutProps> = ({ sidebar, mainContent, settingsP
           <DialogContent>
             <DialogHeader>
               <DialogTitle>Research Settings</DialogTitle>
-              <DialogDescription>
-                Configure your research parameters and preferences.
-              </DialogDescription>
+              <DialogDescription>Configure your research parameters and preferences.</DialogDescription>
             </DialogHeader>
             {settingsPanel}
           </DialogContent>
@@ -52,7 +71,7 @@ const ChatLayout: React.FC<ChatLayoutProps> = ({ sidebar, mainContent, settingsP
 
           <ResizableHandle withHandle className="hidden md:flex" />
 
-          <ResizablePanel defaultSize={75}>
+          <ResizablePanel defaultSize={75} className="w-full md:w-auto">
             <Tabs defaultValue="chat" className="h-full flex flex-col">
               <div className="p-4">
                 <TabsList className="">

frontend/src/components/ui/dialog.tsx

@@ -41,6 +41,7 @@ const DialogContent = React.forwardRef<
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
+      aria-describedby={!props['aria-describedby'] ? undefined : props['aria-describedby']}
       {...props}
     >
       {children}

frontend/src/components/ui/sheet.tsx

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {
@@ -40,7 +40,7 @@ const sheetVariants = cva(
           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
         right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
       },
     },
     defaultVariants: {
@@ -62,13 +62,14 @@ const SheetContent = React.forwardRef<
     <SheetPrimitive.Content
       ref={ref}
       className={cn(sheetVariants({ side }), className)}
+      aria-describedby={!props['aria-describedby'] ? undefined : props['aria-describedby']}
       {...props}
     >
+      {children}
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
-      {children}
     </SheetPrimitive.Content>
   </SheetPortal>
 ))

frontend/src/lib/types.ts

@@ -3,6 +3,15 @@ export interface Message {
   content: string;
   role: "user" | "assistant" | "system";
   timestamp: Date;
+  media?: {
+    images?: string[];
+    videos?: string[];
+    links?: Array<{
+      text: string;
+      url: string;
+    }>;
+    references?: any[];
+  };
 }
 
 export interface ChatState {