feat: emit statespace graph for explainability

backend/knet.py

@@ -149,17 +149,18 @@ class Schema:
 
 
 class ResearchProgress:
-    def __init__(self, callback):
+    def __init__(self, callback, master_node: ResearchNode):
         self.progress = 0
         self.callback = callback
+        self.master_node = master_node
 
     async def update(self, progress: int, message: str):
         self.progress = int(min(100, self.progress + progress))  # max 100
-        await self.callback({"progress": self.progress, "message": message})
+        await self.callback({"progress": self.progress, "message": message, "research_tree": self.master_node.build_tree_structure()})
 
     async def setter(self, progress: int, message: str):
         self.progress = int(min(100, progress))  # max 100
-        await self.callback({"progress": self.progress, "message": message})
+        await self.callback({"progress": self.progress, "message": message, "research_tree": self.master_node.build_tree_structure()})
 
 
 class KNet:
@@ -180,6 +181,7 @@ class KNet:
         self.num_sites_per_query = num_sites_per_query
 
         # Global State
+        self.master_node = ResearchNode()
         self.research_plan: list[str] = []
         self.idx_research_plan: int = 0
         self.ctx_researcher: list[str] = []
@@ -188,7 +190,7 @@ class KNet:
 
     async def conduct_research(self, topic: str, progress_callback, max_depth: int, num_sites_per_query: int) -> dict | bool:
         # Local Runtime State
-        self.progress = ResearchProgress(progress_callback)
+        self.progress = ResearchProgress(progress_callback, self.master_node)
         self.max_depth = max_depth
         self.num_sites_per_query = num_sites_per_query
 
@@ -209,8 +211,6 @@ class KNet:
             ]
             self.logger.info(f"Research plan:\n{json.dumps(self.research_plan, indent=2)}")
 
-            master_node = ResearchNode()
-
             await self.progress.update(0, "Starting research...")
 
             # Iterate on research plan
@@ -227,7 +227,7 @@ class KNet:
                 )["branches"][0]
 
                 root_node = ResearchNode(query)
-                master_node.add_child(root_node.query, node=root_node)
+                self.master_node.add_child(root_node.query, node=root_node)
                 to_explore = deque([(root_node, 1)])  # (node, depth) pairs
                 explored_queries = set()  # {string, string, ...}
 
@@ -261,9 +261,9 @@ class KNet:
 
             # Generate final report
             await self.progress.update(100 / (len(self.research_plan) + 1), "Generating final report...")
-            final_report = await self._generate_final_report(master_node, topic)
+            final_report = await self._generate_final_report(topic)
 
-            self.logger.info(f"Research completed. Explored {len(explored_queries)} queries across {master_node.max_depth()} levels")
+            self.logger.info(f"Research completed. Explored {len(explored_queries)} queries across {self.master_node.max_depth()} levels")
             await self.progress.update(100, "Research complete!")
 
             with open("output.log.json", "w", encoding="utf-8") as f:
@@ -282,7 +282,7 @@ class KNet:
         if asyncio.current_task() and asyncio.current_task().cancelled():
             raise asyncio.CancelledError("Research task was cancelled")
 
-    async def _generate_final_report(self, root_node: ResearchNode, topic: str, retry_count: int = 1) -> Dict[str, Any]:
+    async def _generate_final_report(self, topic: str, retry_count: int = 1) -> Dict[str, Any]:
         try:
             self._check_cancelled()
 
@@ -322,7 +322,7 @@ class KNet:
 
             # Collate multimedia content
             media_content = {"images": [], "videos": [], "links": []}
-            all_sources_data = root_node.get_all_data()
+            all_sources_data = self.master_node.get_all_data()
             for data in all_sources_data:
                 if data.get("images"):
                     media_content["images"].extend(data["images"])
@@ -336,28 +336,16 @@ class KNet:
             media_content["links"] = list({json.dumps(d, sort_keys=True) for d in media_content["links"]})
             media_content["links"] = [json.loads(d) for d in media_content["links"]]
 
-            # Build research tree structure
-            def build_tree_structure(node: ResearchNode) -> Dict:
-                if not node:
-                    return {}
-                sources = [d["url"] for d in node.data if d.get("url")]
-                return {
-                    "query": node.query,
-                    "depth": node.depth,
-                    "sources": sources,
-                    "children": [build_tree_structure(child) for child in node.children],
-                }
-
             return {
                 "topic": topic,
                 "timestamp": datetime.now().isoformat(),
                 "content": raster_report,
                 "media": media_content,
-                "research_tree": build_tree_structure(root_node),
+                "research_tree": self.master_node.build_tree_structure(),
                 "metadata": {
-                    "total_queries": root_node.total_children(),
+                    "total_queries": self.master_node.total_children(),
                     "total_sources": len(all_sources_data),
-                    "max_depth_reached": root_node.max_depth(),
+                    "max_depth_reached": self.master_node.max_depth(),
                     "total_tokens": self.token_count,
                 },
             }
@@ -369,7 +357,7 @@ class KNet:
                 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, topic, retry_count + 1)
+                return await self._generate_final_report(topic, retry_count + 1)
             self.logger.error("Error generating final report", exc_info=True)
             raise
 
@@ -470,7 +458,7 @@ class KNet:
             raise
 
     async def test(self, topic: str, progress_callback):
-        self.progress = ResearchProgress(progress_callback)
+        self.progress = ResearchProgress(progress_callback, self.master_node)
         try:
             for i in range(5):
                 self._check_cancelled()

backend/research_node.py

@@ -1,16 +1,16 @@
 import copy
-from typing import Any, Dict, List, Optional
+from typing import Any, Dict, List, Optional, Self
 
 
 class ResearchNode:
-    def __init__(self, query: str = "_", parent: Optional["ResearchNode"] = None, depth: int = 0):
+    def __init__(self, query: str = "_", parent: Optional[Self] = None, depth: int = 0):
         self.query = query
         self.parent = parent
         self.depth = depth
         self.children: List[ResearchNode] = []
         self.data: List[Dict[str, Any]] = []
 
-    def add_child(self, query: str, node: Optional["ResearchNode"] = None) -> "ResearchNode":
+    def add_child(self, query: str, node: Optional[Self] = None) -> Self:
         if node:
             child = node
             child.parent = self
@@ -48,10 +48,14 @@ class ResearchNode:
             data.extend(child.get_all_data())
         return data
 
-    def __repr__(self) -> dict:
+    # Build research tree structure
+    def build_tree_structure(self) -> Dict:
+        if not self:
+            return {}
+        sources = {d["url"]: d["text"] for d in self.data if d.get("url") and d.get("text")}
         return {
             "query": self.query,
             "depth": self.depth,
-            "children": [child.__repr__() for child in self.children],
-            "data": self.data,
+            "sources": sources,
+            "children": [child.build_tree_structure() for child in self.children],
         }

frontend/bun.lock

@@ -18,6 +18,7 @@
         "@types/react-syntax-highlighter": "^15.5.13",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "d3": "^7.9.0",
         "eslint-config-next": "^15.2.4",
         "lucide-react": "^0.479.0",
         "next": "^15.2.4",
@@ -32,9 +33,11 @@
         "socket.io-client": "^4.8.1",
         "tailwind-merge": "^3.0.2",
         "tailwindcss-animate": "^1.0.7",
+        "three": "^0.175.0",
         "uuid": "^11.1.0",
       },
       "devDependencies": {
+        "@types/d3": "^7.4.3",
         "@types/node": "^20.17.28",
         "@types/react": "^18.3.20",
         "@types/react-dom": "^18.3.5",
@@ -336,12 +339,76 @@
 
     "@types/cookie": ["@types/cookie@0.6.0", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="],
 
+    "@types/d3": ["@types/d3@7.4.3", "", { "dependencies": { "@types/d3-array": "*", "@types/d3-axis": "*", "@types/d3-brush": "*", "@types/d3-chord": "*", "@types/d3-color": "*", "@types/d3-contour": "*", "@types/d3-delaunay": "*", "@types/d3-dispatch": "*", "@types/d3-drag": "*", "@types/d3-dsv": "*", "@types/d3-ease": "*", "@types/d3-fetch": "*", "@types/d3-force": "*", "@types/d3-format": "*", "@types/d3-geo": "*", "@types/d3-hierarchy": "*", "@types/d3-interpolate": "*", "@types/d3-path": "*", "@types/d3-polygon": "*", "@types/d3-quadtree": "*", "@types/d3-random": "*", "@types/d3-scale": "*", "@types/d3-scale-chromatic": "*", "@types/d3-selection": "*", "@types/d3-shape": "*", "@types/d3-time": "*", "@types/d3-time-format": "*", "@types/d3-timer": "*", "@types/d3-transition": "*", "@types/d3-zoom": "*" } }, "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww=="],
+
+    "@types/d3-array": ["@types/d3-array@3.2.1", "", {}, "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="],
+
+    "@types/d3-axis": ["@types/d3-axis@3.0.6", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw=="],
+
+    "@types/d3-brush": ["@types/d3-brush@3.0.6", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A=="],
+
+    "@types/d3-chord": ["@types/d3-chord@3.0.6", "", {}, "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg=="],
+
+    "@types/d3-color": ["@types/d3-color@3.1.3", "", {}, "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="],
+
+    "@types/d3-contour": ["@types/d3-contour@3.0.6", "", { "dependencies": { "@types/d3-array": "*", "@types/geojson": "*" } }, "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg=="],
+
+    "@types/d3-delaunay": ["@types/d3-delaunay@6.0.4", "", {}, "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw=="],
+
+    "@types/d3-dispatch": ["@types/d3-dispatch@3.0.6", "", {}, "sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ=="],
+
+    "@types/d3-drag": ["@types/d3-drag@3.0.7", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ=="],
+
+    "@types/d3-dsv": ["@types/d3-dsv@3.0.7", "", {}, "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g=="],
+
+    "@types/d3-ease": ["@types/d3-ease@3.0.2", "", {}, "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="],
+
+    "@types/d3-fetch": ["@types/d3-fetch@3.0.7", "", { "dependencies": { "@types/d3-dsv": "*" } }, "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA=="],
+
+    "@types/d3-force": ["@types/d3-force@3.0.10", "", {}, "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw=="],
+
+    "@types/d3-format": ["@types/d3-format@3.0.4", "", {}, "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g=="],
+
+    "@types/d3-geo": ["@types/d3-geo@3.1.0", "", { "dependencies": { "@types/geojson": "*" } }, "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ=="],
+
+    "@types/d3-hierarchy": ["@types/d3-hierarchy@3.1.7", "", {}, "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg=="],
+
+    "@types/d3-interpolate": ["@types/d3-interpolate@3.0.4", "", { "dependencies": { "@types/d3-color": "*" } }, "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA=="],
+
+    "@types/d3-path": ["@types/d3-path@3.1.1", "", {}, "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="],
+
+    "@types/d3-polygon": ["@types/d3-polygon@3.0.2", "", {}, "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA=="],
+
+    "@types/d3-quadtree": ["@types/d3-quadtree@3.0.6", "", {}, "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg=="],
+
+    "@types/d3-random": ["@types/d3-random@3.0.3", "", {}, "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ=="],
+
+    "@types/d3-scale": ["@types/d3-scale@4.0.9", "", { "dependencies": { "@types/d3-time": "*" } }, "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw=="],
+
+    "@types/d3-scale-chromatic": ["@types/d3-scale-chromatic@3.1.0", "", {}, "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ=="],
+
+    "@types/d3-selection": ["@types/d3-selection@3.0.11", "", {}, "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w=="],
+
+    "@types/d3-shape": ["@types/d3-shape@3.1.7", "", { "dependencies": { "@types/d3-path": "*" } }, "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg=="],
+
+    "@types/d3-time": ["@types/d3-time@3.0.4", "", {}, "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="],
+
+    "@types/d3-time-format": ["@types/d3-time-format@4.0.3", "", {}, "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg=="],
+
+    "@types/d3-timer": ["@types/d3-timer@3.0.2", "", {}, "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="],
+
+    "@types/d3-transition": ["@types/d3-transition@3.0.9", "", { "dependencies": { "@types/d3-selection": "*" } }, "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg=="],
+
+    "@types/d3-zoom": ["@types/d3-zoom@3.0.8", "", { "dependencies": { "@types/d3-interpolate": "*", "@types/d3-selection": "*" } }, "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw=="],
+
     "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],
 
     "@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],
 
     "@types/estree-jsx": ["@types/estree-jsx@1.0.5", "", { "dependencies": { "@types/estree": "*" } }, "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg=="],
 
+    "@types/geojson": ["@types/geojson@7946.0.16", "", {}, "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="],
+
     "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
 
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
@@ -562,6 +629,68 @@
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
+    "d3": ["d3@7.9.0", "", { "dependencies": { "d3-array": "3", "d3-axis": "3", "d3-brush": "3", "d3-chord": "3", "d3-color": "3", "d3-contour": "4", "d3-delaunay": "6", "d3-dispatch": "3", "d3-drag": "3", "d3-dsv": "3", "d3-ease": "3", "d3-fetch": "3", "d3-force": "3", "d3-format": "3", "d3-geo": "3", "d3-hierarchy": "3", "d3-interpolate": "3", "d3-path": "3", "d3-polygon": "3", "d3-quadtree": "3", "d3-random": "3", "d3-scale": "4", "d3-scale-chromatic": "3", "d3-selection": "3", "d3-shape": "3", "d3-time": "3", "d3-time-format": "4", "d3-timer": "3", "d3-transition": "3", "d3-zoom": "3" } }, "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA=="],
+
+    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
+
+    "d3-axis": ["d3-axis@3.0.0", "", {}, "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="],
+
+    "d3-brush": ["d3-brush@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-drag": "2 - 3", "d3-interpolate": "1 - 3", "d3-selection": "3", "d3-transition": "3" } }, "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ=="],
+
+    "d3-chord": ["d3-chord@3.0.1", "", { "dependencies": { "d3-path": "1 - 3" } }, "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g=="],
+
+    "d3-color": ["d3-color@3.1.0", "", {}, "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="],
+
+    "d3-contour": ["d3-contour@4.0.2", "", { "dependencies": { "d3-array": "^3.2.0" } }, "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA=="],
+
+    "d3-delaunay": ["d3-delaunay@6.0.4", "", { "dependencies": { "delaunator": "5" } }, "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A=="],
+
+    "d3-dispatch": ["d3-dispatch@3.0.1", "", {}, "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="],
+
+    "d3-drag": ["d3-drag@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-selection": "3" } }, "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg=="],
+
+    "d3-dsv": ["d3-dsv@3.0.1", "", { "dependencies": { "commander": "7", "iconv-lite": "0.6", "rw": "1" }, "bin": { "csv2json": "bin/dsv2json.js", "csv2tsv": "bin/dsv2dsv.js", "dsv2dsv": "bin/dsv2dsv.js", "dsv2json": "bin/dsv2json.js", "json2csv": "bin/json2dsv.js", "json2dsv": "bin/json2dsv.js", "json2tsv": "bin/json2dsv.js", "tsv2csv": "bin/dsv2dsv.js", "tsv2json": "bin/dsv2json.js" } }, "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q=="],
+
+    "d3-ease": ["d3-ease@3.0.1", "", {}, "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="],
+
+    "d3-fetch": ["d3-fetch@3.0.1", "", { "dependencies": { "d3-dsv": "1 - 3" } }, "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw=="],
+
+    "d3-force": ["d3-force@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-quadtree": "1 - 3", "d3-timer": "1 - 3" } }, "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg=="],
+
+    "d3-format": ["d3-format@3.1.0", "", {}, "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="],
+
+    "d3-geo": ["d3-geo@3.1.1", "", { "dependencies": { "d3-array": "2.5.0 - 3" } }, "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q=="],
+
+    "d3-hierarchy": ["d3-hierarchy@3.1.2", "", {}, "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="],
+
+    "d3-interpolate": ["d3-interpolate@3.0.1", "", { "dependencies": { "d3-color": "1 - 3" } }, "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g=="],
+
+    "d3-path": ["d3-path@3.1.0", "", {}, "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="],
+
+    "d3-polygon": ["d3-polygon@3.0.1", "", {}, "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="],
+
+    "d3-quadtree": ["d3-quadtree@3.0.1", "", {}, "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="],
+
+    "d3-random": ["d3-random@3.0.1", "", {}, "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="],
+
+    "d3-scale": ["d3-scale@4.0.2", "", { "dependencies": { "d3-array": "2.10.0 - 3", "d3-format": "1 - 3", "d3-interpolate": "1.2.0 - 3", "d3-time": "2.1.1 - 3", "d3-time-format": "2 - 4" } }, "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ=="],
+
+    "d3-scale-chromatic": ["d3-scale-chromatic@3.1.0", "", { "dependencies": { "d3-color": "1 - 3", "d3-interpolate": "1 - 3" } }, "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ=="],
+
+    "d3-selection": ["d3-selection@3.0.0", "", {}, "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="],
+
+    "d3-shape": ["d3-shape@3.2.0", "", { "dependencies": { "d3-path": "^3.1.0" } }, "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA=="],
+
+    "d3-time": ["d3-time@3.1.0", "", { "dependencies": { "d3-array": "2 - 3" } }, "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q=="],
+
+    "d3-time-format": ["d3-time-format@4.1.0", "", { "dependencies": { "d3-time": "1 - 3" } }, "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg=="],
+
+    "d3-timer": ["d3-timer@3.0.1", "", {}, "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="],
+
+    "d3-transition": ["d3-transition@3.0.1", "", { "dependencies": { "d3-color": "1 - 3", "d3-dispatch": "1 - 3", "d3-ease": "1 - 3", "d3-interpolate": "1 - 3", "d3-timer": "1 - 3" }, "peerDependencies": { "d3-selection": "2 - 3" } }, "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w=="],
+
+    "d3-zoom": ["d3-zoom@3.0.0", "", { "dependencies": { "d3-dispatch": "1 - 3", "d3-drag": "2 - 3", "d3-interpolate": "1 - 3", "d3-selection": "2 - 3", "d3-transition": "2 - 3" } }, "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw=="],
+
     "damerau-levenshtein": ["damerau-levenshtein@1.0.8", "", {}, "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="],
 
     "data-uri-to-buffer": ["data-uri-to-buffer@4.0.1", "", {}, "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A=="],
@@ -586,6 +715,8 @@
 
     "define-properties": ["define-properties@1.2.1", "", { "dependencies": { "define-data-property": "^1.0.1", "has-property-descriptors": "^1.0.0", "object-keys": "^1.1.1" } }, "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg=="],
 
+    "delaunator": ["delaunator@5.0.1", "", { "dependencies": { "robust-predicates": "^3.0.2" } }, "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw=="],
+
     "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
 
     "detect-libc": ["detect-libc@2.0.3", "", {}, "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw=="],
@@ -788,6 +919,8 @@
 
     "human-signals": ["human-signals@4.3.1", "", {}, "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ=="],
 
+    "iconv-lite": ["iconv-lite@0.6.3", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="],
+
     "ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],
 
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
@@ -802,6 +935,8 @@
 
     "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=="],
 
+    "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
+
     "is-alphabetical": ["is-alphabetical@1.0.4", "", {}, "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="],
 
     "is-alphanumerical": ["is-alphanumerical@1.0.4", "", { "dependencies": { "is-alphabetical": "^1.0.0", "is-decimal": "^1.0.0" } }, "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A=="],
@@ -1224,8 +1359,12 @@
 
     "reusify": ["reusify@1.0.4", "", {}, "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="],
 
+    "robust-predicates": ["robust-predicates@3.0.2", "", {}, "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="],
+
     "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
 
+    "rw": ["rw@1.3.3", "", {}, "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="],
+
     "safe-array-concat": ["safe-array-concat@1.1.3", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.2", "get-intrinsic": "^1.2.6", "has-symbols": "^1.1.0", "isarray": "^2.0.5" } }, "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q=="],
 
     "safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
@@ -1234,6 +1373,8 @@
 
     "safe-regex-test": ["safe-regex-test@1.1.0", "", { "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", "is-regex": "^1.2.1" } }, "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw=="],
 
+    "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
+
     "scheduler": ["scheduler@0.26.0", "", {}, "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="],
 
     "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
@@ -1340,6 +1481,8 @@
 
     "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
 
+    "three": ["three@0.175.0", "", {}, "sha512-nNE3pnTHxXN/Phw768u0Grr7W4+rumGg/H6PgeseNJojkJtmeHJfZWi41Gp2mpXl1pg1pf1zjwR4McM1jTqkpg=="],
+
     "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
 
     "tinyglobby": ["tinyglobby@0.2.12", "", { "dependencies": { "fdir": "^6.4.3", "picomatch": "^4.0.2" } }, "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww=="],
@@ -1510,6 +1653,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=="],
 
+    "d3-dsv/commander": ["commander@7.2.0", "", {}, "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="],
+
     "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=="],

frontend/package.json

@@ -23,6 +23,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "d3": "^7.9.0",
     "eslint-config-next": "^15.2.4",
     "lucide-react": "^0.479.0",
     "next": "^15.2.4",
@@ -37,9 +38,11 @@
     "socket.io-client": "^4.8.1",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
+    "three": "^0.175.0",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
+    "@types/d3": "^7.4.3",
     "@types/node": "^20.17.28",
     "@types/react": "^18.3.20",
     "@types/react-dom": "^18.3.5",

frontend/src/components/ui/ChatLayout.tsx

@@ -1,14 +1,17 @@
+"use client";
 import { Button } from "@/components/ui/button";
 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, Menu, MessageCircle, Settings } from "lucide-react";
-import React from "react";
+import { LayoutGrid, Menu, MessageCircle, Network, Settings } from "lucide-react";
+import React, { useState } 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";
+import ResearchGraph from "@/components/visualizations/ResearchGraph";
+import { useChatContext } from "@/lib/store/ChatContext";
 
 interface ChatLayoutProps {
   sidebar: React.ReactNode;
@@ -17,6 +20,25 @@ interface ChatLayoutProps {
 }
 
 const ChatLayout: React.FC<ChatLayoutProps> = ({ sidebar, mainContent, settingsPanel }) => {
+  const { chatState } = useChatContext();
+  const [activeTab, setActiveTab] = useState<string>("chat");
+  const [visualizationType, setVisualizationType] = useState<"d3" | "reactflow">("d3");
+
+  // Get the latest research tree from messages
+  const latestResearchTree = React.useMemo(() => {
+    // First look for the most recent completed research message
+    const completedResearch = [...chatState.messages].reverse().find((msg) => msg.role === "assistant" && !msg.isProgress && msg.research_tree);
+
+    if (completedResearch?.research_tree) {
+      return completedResearch.research_tree;
+    }
+
+    // If no completed research, look for progress messages
+    const progressMessage = [...chatState.messages].reverse().find((msg) => msg.role === "assistant" && msg.isProgress && msg.research_tree);
+
+    return progressMessage?.research_tree;
+  }, [chatState.messages]);
+
   return (
     <div className="h-screen flex flex-col">
       <header className="border-b-2 h-14 flex items-center px-6">
@@ -70,7 +92,7 @@ const ChatLayout: React.FC<ChatLayoutProps> = ({ sidebar, mainContent, settingsP
           <ResizableHandle withHandle className="hidden md:flex" />
 
           <ResizablePanel defaultSize={85} className="w-full md:w-auto">
-            <Tabs defaultValue="chat" className="h-full flex flex-col">
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full flex flex-col">
               <div className="p-4">
                 <TabsList className="">
                   <TabsTrigger value="chat" className="flex items-center gap-2">
@@ -84,18 +106,12 @@ const ChatLayout: React.FC<ChatLayoutProps> = ({ sidebar, mainContent, settingsP
                 </TabsList>
               </div>
 
-              <TabsContent value="chat" className="overflow-auto flex flex-1 !mt-0" tabIndex={-1}>
+              <TabsContent value="chat" className="overflow-auto flex-1 !mt-0" tabIndex={-1}>
                 {mainContent}
               </TabsContent>
 
-              <TabsContent value="visualizations" className="p-4 flex-1">
-                <div className="h-full flex items-center justify-center text-muted-foreground">
-                  <div className="text-center">
-                    <LayoutGrid className="mx-auto h-12 w-12 mb-4 opacity-30" />
-                    <h3 className="text-lg font-medium mb-2">Visualizations Coming Soon</h3>
-                    <p>View graphs, charts, and other visual representations of your research data.</p>
-                  </div>
-                </div>
+              <TabsContent value="visualizations" className="p-4 pt-0 overflow-auto flex-1 !mt-0" tabIndex={-1}>
+                <ResearchGraph researchTree={latestResearchTree} />
               </TabsContent>
             </Tabs>
           </ResizablePanel>

frontend/src/components/visualizations/ResearchGraph.tsx

@@ -0,0 +1,244 @@
+"use client";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { ResearchTree } from "@/lib/types";
+import * as d3 from "d3";
+import React, { useEffect, useRef, useState } from "react";
+
+interface GraphNode extends d3.SimulationNodeDatum {
+  id: string;
+  name: string;
+  size: number;
+  depth: number;
+  url?: string;
+  width?: number;
+  height?: number;
+  sources?: Record<string, string>;
+}
+
+interface GraphLink extends d3.SimulationLinkDatum<GraphNode> {
+  source: string | GraphNode;
+  target: string | GraphNode;
+}
+
+interface ResearchGraphProps {
+  researchTree: ResearchTree | undefined;
+}
+
+const ResearchGraph: React.FC<ResearchGraphProps> = ({ researchTree }) => {
+  const selectedNodeRef = useRef<GraphNode | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedNodeContent, setSelectedNodeContent] = useState<{ title: string; sources: Record<string, string> }>({
+    title: "",
+    sources: {},
+  });
+  const [nodePositions, setNodePositions] = useState<Record<string, { x: number; y: number }>>({});
+  const [nodesState, setNodesState] = useState<GraphNode[]>([]); // Store nodes for both D3 and rendering
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 1200, height: 800 });
+
+  // Resize observer to update graph size
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const handleResize = () => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (rect) {
+        setDimensions({ width: rect.width, height: rect.height });
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (!researchTree) return;
+
+    // Prepare data
+    const nodes: GraphNode[] = [];
+    const links: GraphLink[] = [];
+
+    const processTree = (tree: ResearchTree, parentId?: string) => {
+      const nodeId = `${tree.query}_${tree.depth}`;
+      const textLength = tree.query.length;
+      const nodeWidth = Math.max(120, Math.min(300, textLength * 6));
+      const nodeHeight = 60;
+
+      nodes.push({
+        id: nodeId,
+        name: tree.query,
+        size: Object.keys(tree.sources).length + 10,
+        depth: tree.depth,
+        width: nodeWidth,
+        height: nodeHeight,
+        sources: tree.sources,
+      });
+
+      if (parentId) {
+        links.push({
+          source: parentId,
+          target: nodeId,
+        });
+      }
+
+      tree.children.forEach((child) => {
+        processTree(child, nodeId);
+      });
+    };
+
+    processTree(researchTree);
+    setNodesState([...nodes]); // Save nodes for rendering
+
+    const { width, height } = dimensions;
+    const simulation = d3
+      .forceSimulation<GraphNode>(nodes)
+      .force(
+        "link",
+        d3
+          .forceLink<GraphNode, GraphLink>()
+          .id((d: GraphNode) => d.id)
+          .links(links)
+          .distance(80)
+      )
+      .force("charge", d3.forceManyBody().strength(-800))
+      .force("center", d3.forceCenter(width / 2, height / 2))
+      .force(
+        "collision",
+        d3.forceCollide().radius((d: d3.SimulationNodeDatum) => {
+          const node = d as GraphNode;
+          return Math.max(node.width || 0, node.height || 0) / 2 + 40;
+        })
+      )
+      .on("tick", () => {
+        setNodePositions((prev) => {
+          const updated: Record<string, { x: number; y: number }> = {};
+          nodes.forEach((n) => {
+            // Clamp positions to container
+            updated[n.id] = {
+              x: Math.max((n.width || 120) / 2, Math.min(n.x || 0, width - (n.width || 120) / 2)),
+              y: Math.max((n.height || 60) / 2, Math.min(n.y || 0, height - (n.height || 60) / 2)),
+            };
+          });
+          return updated;
+        });
+      });
+
+    return () => {
+      simulation.stop();
+    };
+  }, [researchTree, dimensions]);
+
+  const formatSourceContent = () => {
+    return Object.entries(selectedNodeContent.sources).map(([url, content]) => (
+      <div key={url} className="mb-6 border-b pb-4">
+        <h3 className="text-base font-semibold mb-2">
+          <a href={url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline break-words">
+            {url}
+          </a>
+        </h3>
+        <div className="prose prose-sm dark:prose-invert max-w-none break-words">{content}</div>
+      </div>
+    ));
+  };
+
+  const renderNodeCard = (node: GraphNode) => {
+    const pos = nodePositions[node.id] || { x: 0, y: 0 };
+    return (
+      <div
+        key={node.id}
+        style={{
+          position: "absolute",
+          left: pos.x - (node.width || 120) / 2,
+          top: pos.y - (node.height || 60) / 2,
+          width: node.width || 120,
+          zIndex: 2,
+          cursor: node.url ? "pointer" : "default",
+          userSelect: "none",
+          pointerEvents: "auto",
+        }}
+        tabIndex={0}
+        className="select-none focus:outline-none"
+        onClick={(e) => {
+          e.stopPropagation();
+          selectedNodeRef.current = node;
+          if (node.url) {
+            window.open(node.url, "_blank");
+          } else if (node.sources && Object.keys(node.sources).length > 0) {
+            setSelectedNodeContent({ title: node.name, sources: node.sources });
+            setDialogOpen(true);
+          }
+        }}
+        onMouseDown={(e) => e.stopPropagation()}>
+        <Card className={"bg-muted text-white cursor-pointer" + (node.name === "_" ? " w-32 h-[5rem]" : "")}>
+          <CardTitle className={`p-2 pb-0 text-sm ${node.name === "_" ? "text-lg grid place-items-center h-4/5 w-full" : ""}`} title={node.name}>
+            {node.name === "_" ? "Master Node" : node.name}
+          </CardTitle>
+          {node.name !== "_" && (
+            <CardContent className="p-2 flex flex-wrap gap-1 w-full">
+              <Badge variant="secondary" className="w-full bg-white/20 text-white border-white/20 grid place-items-center" title={node.name}>
+                Source
+              </Badge>
+            </CardContent>
+          )}
+        </Card>
+      </div>
+    );
+  };
+
+  return (
+    <div ref={containerRef} className="flex flex-col h-full flex-1 relative" style={{ minHeight: 600 }} onClick={() => setDialogOpen(false)}>
+      <Card className="p-4 mb-4" id="graph-info-panel">
+        <h3 className="text-lg font-medium">Research Visualization</h3>
+        <p className="text-sm text-muted-foreground">Click on a node to see details. Source nodes are shown in purple. Click a node to open its source or view sources.</p>
+      </Card>
+      <div className="flex-1 border rounded-lg bg-card flex relative overflow-hidden" style={{ minHeight: 600 }}>
+        {!researchTree ? (
+          <div className="h-full w-full flex items-center justify-center text-muted-foreground">
+            <p>No research data available yet. Start a conversation to begin research.</p>
+          </div>
+        ) : (
+          <div style={{ width: "100%", height: "100%", position: "relative" }}>
+            {/* Background for interaction */}
+            <div style={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "auto" }} onClick={() => setDialogOpen(false)} />
+            {/* SVG for links only */}
+            <svg width={dimensions.width} height={dimensions.height} style={{ position: "absolute", top: 0, left: 0, zIndex: 1, pointerEvents: "none" }}>
+              {(() => {
+                if (!researchTree) return null;
+                const nodes: GraphNode[] = [];
+                const links: GraphLink[] = [];
+                const processTree = (tree: ResearchTree, parentId?: string) => {
+                  const nodeId = `${tree.query}_${tree.depth}`;
+                  nodes.push({ id: nodeId, name: tree.query, size: 10, depth: tree.depth });
+                  if (parentId) {
+                    links.push({ source: parentId, target: nodeId });
+                  }
+                  tree.children.forEach((child) => processTree(child, nodeId));
+                };
+                processTree(researchTree);
+                return links.map((l, i) => {
+                  const src = nodePositions[(typeof l.source === "string" ? l.source : l.source.id) as string];
+                  const tgt = nodePositions[(typeof l.target === "string" ? l.target : l.target.id) as string];
+                  if (!src || !tgt) return null;
+                  return <line key={i} x1={src.x} y1={src.y} x2={tgt.x} y2={tgt.y} stroke="#bbb" strokeWidth={2} strokeOpacity={0.7} />;
+                });
+              })()}
+            </svg>
+            {/* Render node cards using nodesState */}
+            {nodesState.map(renderNodeCard)}
+          </div>
+        )}
+      </div>
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle className="text-xl font-semibold">Sources for: {selectedNodeContent.title}</DialogTitle>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto py-4">{formatSourceContent()}</div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default ResearchGraph;

frontend/src/lib/store/ChatContext.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChatData, ChatState, Conversation, Message, ResearchOptions, ResearchResults, StatusUpdate } from "@/lib/types";
+import { ChatData, ChatState, Conversation, Message, ResearchOptions, ResearchResults, ResearchTree, StatusUpdate } from "@/lib/types";
 import { ReactNode, createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { disconnectSocket, getSocket, initializeSocket } from "@/lib/socket";
@@ -101,13 +101,9 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
       if (conversation) {
         // Check if any loaded message has isProgress true
         let messages = conversation.messages;
-        if (messages.some(msg => msg.isProgress === true)) {
+        if (messages.some((msg) => msg.isProgress === true)) {
           // Convert any progress messages to error messages
-          messages = messages.map(msg =>
-            msg.isProgress === true
-              ? { ...msg, content: "Connection error", isProgress: false }
-              : msg
-          );
+          messages = messages.map((msg) => (msg.isProgress === true ? { ...msg, content: "Connection error", isProgress: false } : msg));
         }
 
         setChatState((prev) => ({ ...prev, messages, isLoading: false }));
@@ -128,17 +124,13 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
 
       // When socket disconnects, update any progress messages to show connection error
       setChatState((prevState) => {
-        const updatedMessages = prevState.messages.map(msg =>
-          msg.isProgress === true
-            ? { ...msg, content: "Connection error", isProgress: false }
-            : msg
-        );
+        const updatedMessages = prevState.messages.map((msg) => (msg.isProgress === true ? { ...msg, content: "Connection error", isProgress: false } : msg));
 
         return {
           ...prevState,
           messages: updatedMessages,
           isLoading: false,
-          error: "Lost connection to research server"
+          error: "Lost connection to research server",
         };
       });
     });
@@ -153,15 +145,16 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
         const lastProgressIndex = messages.findLastIndex((msg) => msg.role === "assistant" && msg.isProgress === true);
 
         if (lastProgressIndex !== -1) {
-          // Update existing progress message
+          // Update existing progress message with research_tree data
           messages[lastProgressIndex] = {
             ...messages[lastProgressIndex],
             content: progressText,
             progress: progress,
             timestamp: new Date(),
+            research_tree: data.research_tree, // Update the research_tree in real-time
           };
         } else {
-          // Add new progress message
+          // Add new progress message with research_tree
           messages.push({
             id: uuidv4(),
             content: progressText,
@@ -169,6 +162,8 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
             timestamp: new Date(),
             progress: progress,
             isProgress: true,
+            research_tree: data.research_tree, // Include the research_tree
+            media: {}, // Initialize empty media object
           });
         }
 

frontend/src/lib/types.ts

@@ -42,6 +42,7 @@ export interface Conversation {
 export interface StatusUpdate {
   message: string;
   progress: number;
+  research_tree: ResearchTree;
 }
 
 // Simplified research results based on actual server output
@@ -49,22 +50,22 @@ export interface ResearchResults {
   topic: string;
   timestamp: string;
   // Optional fields not present in basic server response
-  content?: string;
-  media?: {
-    images?: string[];
-    videos?: string[];
-    links?: Array<{
+  content: string;
+  media: {
+    images: string[];
+    videos: string[];
+    links: Array<{
       text: string;
       url: string;
     }>;
   };
-  research_tree?: ResearchTree;
+  research_tree: ResearchTree;
 }
 
 export interface ResearchTree {
   query: string;
   depth: number;
-  sources: string[];
+  sources: Record<string, string>; // it's like { "https://...": "Webpage text..." }
   children: ResearchTree[];
 }