feat: mvp frontend

.gitignore

@@ -1,3 +1,5 @@
+**/.env
+
 # Flask ignore files
 backend/__pycache__/
 backend/*.pyc
@@ -6,6 +8,8 @@ backend/*.pyd
 backend/*.pyo
 backend/.venv/
 backend/.env*
+backend/downloads/*
+backend/output.json
 
 # Next.js ignore files
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

KnowledgeNet.excalidraw

@@ -3990,7 +3990,7 @@
       "version": 92,
       "versionNonce": 1221535793,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410117898,
       "link": null,
       "locked": false,
@@ -4005,10 +4005,10 @@
       "lineHeight": 1.25
     },
     {
-      "id": "QwQpbmMZYUJCdK5IFIkvr",
+      "id": "Hd85L_o2whuQ37yZPmET7",
       "type": "text",
-      "x": 3952.7474993968267,
-      "y": -357.5833329999999,
+      "x": 3834.7474993968267,
+      "y": -385.5833329999999,
       "width": 727.5238647460938,
       "height": 105,
       "angle": 0,
@@ -4023,12 +4023,12 @@
       "frameId": null,
       "index": "b0I",
       "roundness": null,
-      "seed": 925609498,
-      "version": 342,
-      "versionNonce": 71133361,
+      "seed": 1112393545,
+      "version": 573,
+      "versionNonce": 1303852039,
       "isDeleted": false,
       "boundElements": [],
-      "updated": 1740410131106,
+      "updated": 1741576813086,
       "link": null,
       "locked": false,
       "text": "Use Case Diagram",
@@ -4111,7 +4111,7 @@
       "version": 166,
       "versionNonce": 854836337,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410330502,
       "link": null,
       "locked": false,
@@ -4187,7 +4187,7 @@
       "version": 24,
       "versionNonce": 1896009777,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410209932,
       "link": null,
       "locked": false,
@@ -4279,7 +4279,7 @@
       "version": 121,
       "versionNonce": 628335089,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410219593,
       "link": null,
       "locked": false,
@@ -4355,7 +4355,7 @@
       "version": 261,
       "versionNonce": 481340991,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410234474,
       "link": null,
       "locked": false,
@@ -4443,7 +4443,7 @@
       "version": 295,
       "versionNonce": 86343071,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410412315,
       "link": null,
       "locked": false,
@@ -4480,7 +4480,7 @@
       "version": 85,
       "versionNonce": 745306257,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410342893,
       "link": null,
       "locked": false,
@@ -4551,7 +4551,7 @@
       "version": 64,
       "versionNonce": 1485153297,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410346276,
       "link": null,
       "locked": false,
@@ -4614,7 +4614,7 @@
       "version": 115,
       "versionNonce": 1416571167,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410351698,
       "link": null,
       "locked": false,
@@ -4685,7 +4685,7 @@
       "version": 113,
       "versionNonce": 694937969,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410359339,
       "link": null,
       "locked": false,
@@ -4756,7 +4756,7 @@
       "version": 99,
       "versionNonce": 1591321329,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410373406,
       "link": null,
       "locked": false,
@@ -4827,7 +4827,7 @@
       "version": 105,
       "versionNonce": 1997100959,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410388128,
       "link": null,
       "locked": false,
@@ -4898,7 +4898,7 @@
       "version": 44,
       "versionNonce": 1743458015,
       "isDeleted": false,
-      "boundElements": null,
+      "boundElements": [],
       "updated": 1740410394139,
       "link": null,
       "locked": false,
@@ -4945,6 +4945,2179 @@
       "fixedSegments": null,
       "startIsSpecial": null,
       "endIsSpecial": null
+    },
+    {
+      "id": "_DXsWPZLu9Lg_N3cYUbAP",
+      "type": "rectangle",
+      "x": 6143.606589566099,
+      "y": -106.7448757200093,
+      "width": 1541.4296875,
+      "height": 768.1015948763029,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1c",
+      "roundness": null,
+      "seed": 2136851817,
+      "version": 92,
+      "versionNonce": 750499017,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957668,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "hh-vJczGSvSCpkhjc-ZFd",
+      "type": "rectangle",
+      "x": 6884.735501342112,
+      "y": 712.7366477728008,
+      "width": 64.6875,
+      "height": 44,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b1d",
+      "roundness": null,
+      "seed": 808661065,
+      "version": 154,
+      "versionNonce": 1545689785,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "zSH_0RVoAH6FqvlC-qOEe"
+        },
+        {
+          "id": "uuVJhiL1l0abY9oNZiD10",
+          "type": "arrow"
+        },
+        {
+          "id": "RG4hRN73PDSPg9TvjEABI",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1741577112903,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "5rQwEFQ0OLt7lCCh6ROrl",
+      "type": "rectangle",
+      "x": 6816.856929026729,
+      "y": -77.24788666946003,
+      "width": 245.24902833716055,
+      "height": 51.91470072896671,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1e",
+      "roundness": null,
+      "seed": 1020804905,
+      "version": 101,
+      "versionNonce": 692196601,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "YN7Z_MhrnVfus-HHFPTk1"
+        },
+        {
+          "id": "Gr_IecqseQ5STfEBPzVML",
+          "type": "arrow"
+        },
+        {
+          "id": "uuVJhiL1l0abY9oNZiD10",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1741577060675,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "lcNOx1PJ1LukZ3eN5WcGs",
+      "type": "rectangle",
+      "x": 6658.135474507539,
+      "y": 33.66079216060521,
+      "width": 184.00590482095765,
+      "height": 51.91470072896671,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1f",
+      "roundness": null,
+      "seed": 1404596745,
+      "version": 104,
+      "versionNonce": 210016041,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "A45yyUfo1lPMEY8TmwNAv"
+        },
+        {
+          "id": "Gr_IecqseQ5STfEBPzVML",
+          "type": "arrow"
+        },
+        {
+          "id": "jXazvlSAB2utF1woHHpxJ",
+          "type": "arrow"
+        },
+        {
+          "id": "3raa-F9gTwZ7ZG2sCiVMU",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1741576957669,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "YPquWrf902Bx_VzPe5ZKo",
+      "type": "rectangle",
+      "x": 6733.988825412842,
+      "y": 144.56947099067045,
+      "width": 308.5753767050585,
+      "height": 51.91470072896671,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1g",
+      "roundness": null,
+      "seed": 1238321385,
+      "version": 108,
+      "versionNonce": 1116994953,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "fXbbtx_NcVZBC_fsO1Uff"
+        },
+        {
+          "id": "jXazvlSAB2utF1woHHpxJ",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1741576957669,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "O4ynYwner8EHSv-cUHyx0",
+      "type": "rectangle",
+      "x": 6653.296124741433,
+      "y": 289.69465711937283,
+      "width": 469.9607780478762,
+      "height": 51.91470072896671,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1h",
+      "roundness": null,
+      "seed": 1218986953,
+      "version": 112,
+      "versionNonce": 199055049,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "V3UN0NpFvZDTX16OkuBNR"
+        },
+        {
+          "id": "hktnzSdCZsg2XG9eDy1n-",
+          "type": "arrow"
+        },
+        {
+          "id": "fMbl9KWZiggWCvF5xaMRT",
+          "type": "arrow"
+        },
+        {
+          "id": "QTMS_iw6t6ynVYi-LOM0h",
+          "type": "arrow"
+        },
+        {
+          "id": "FCEWIaj7DywBOG0ukJrRU",
+          "type": "arrow"
+        },
+        {
+          "id": "vZM--SBjM4zyowOgs3hDv",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1741576992554,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "d-Obq1jyhqw7abPHd6_i5",
+      "type": "rectangle",
+      "x": 6233.346569847856,
+      "y": 434.81984324807524,
+      "width": 220.0659739352541,
+      "height": 51.91470072896671,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1i",
+      "roundness": null,
+      "seed": 1012851369,
+      "version": 113,
+      "versionNonce": 1896293513,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "lKO9DytZCWjoMyMUO9WnK"
+        },
+        {
+          "id": "3raa-F9gTwZ7ZG2sCiVMU",
+          "type": "arrow"
+        },
+        {
+          "id": "fMbl9KWZiggWCvF5xaMRT",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1741576957670,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "SLQjJ54OvcwHKgE0saBYW",
+      "type": "rectangle",
+      "x": 6553.568648323342,
+      "y": 434.81984324807524,
+      "width": 298.06707435580034,
+      "height": 51.91470072896671,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1j",
+      "roundness": null,
+      "seed": 27174281,
+      "version": 106,
+      "versionNonce": 448796681,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "ZIBlXFowG3rpzs7ZAmiZZ"
+        },
+        {
+          "id": "QTMS_iw6t6ynVYi-LOM0h",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1741576957670,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "SmhmRdO5OootjWvVdhZVC",
+      "type": "rectangle",
+      "x": 6910.6297007802405,
+      "y": 434.81984324807524,
+      "width": 326.64228249851993,
+      "height": 51.91470072896671,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1k",
+      "roundness": null,
+      "seed": 1403194473,
+      "version": 104,
+      "versionNonce": 1977506121,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "avhHlotKdqzZ5gQytgcwQ"
+        },
+        {
+          "id": "FCEWIaj7DywBOG0ukJrRU",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1741576964302,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "-AKHuCF8e7h2_yxWV-Lgt",
+      "type": "rectangle",
+      "x": 7406.898105937576,
+      "y": 434.81984324807524,
+      "width": 236.842386457754,
+      "height": 51.91470072896671,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1l",
+      "roundness": null,
+      "seed": 2050463561,
+      "version": 109,
+      "versionNonce": 928298601,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "GHHkKHEJHxyvjEsluWanq"
+        },
+        {
+          "id": "vZM--SBjM4zyowOgs3hDv",
+          "type": "arrow"
+        },
+        {
+          "id": "F704_xUi4glbWWo1UMSZD",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1741577012386,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "W854nPSz0p4lut302JyEo",
+      "type": "rectangle",
+      "x": 6547.033221686829,
+      "y": 579.9450293767776,
+      "width": 311.13792762882497,
+      "height": 51.91470072896671,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1m",
+      "roundness": null,
+      "seed": 934790697,
+      "version": 107,
+      "versionNonce": 1443202297,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "-7qd6ZmMNssePA_ZVXOds"
+        },
+        {
+          "id": "eXqdTotBC05JGtmSBdiba",
+          "type": "arrow"
+        },
+        {
+          "id": "RG4hRN73PDSPg9TvjEABI",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1741577112902,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "zkIptPJSdTc7fyDulV4Nc",
+      "type": "rectangle",
+      "x": 7406.235244066099,
+      "y": 532.5354253333344,
+      "width": 236.28111124423486,
+      "height": 44,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b1n",
+      "roundness": null,
+      "seed": 1997478153,
+      "version": 154,
+      "versionNonce": 717019239,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "yhuAJFICJoRjDFmjFzM6C"
+        },
+        {
+          "id": "F704_xUi4glbWWo1UMSZD",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1741577022253,
+      "link": null,
+      "locked": false
+    },
+    {
+      "id": "hktnzSdCZsg2XG9eDy1n-",
+      "type": "arrow",
+      "x": 6888.2769562202075,
+      "y": 197.07411150064814,
+      "width": 0.00048490204972040374,
+      "height": 85.77724415899723,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1r",
+      "roundness": {
+        "type": 2
+      },
+      "seed": 2095697033,
+      "version": 259,
+      "versionNonce": 1243141799,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957690,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          0,
+          46.015302918856854
+        ],
+        [
+          -0.00048490204972040374,
+          85.77724415899723
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": null,
+      "endBinding": {
+        "elementId": "O4ynYwner8EHSv-cUHyx0",
+        "focus": -0.0000018829436698626987,
+        "gap": 6.843301459727456
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": false
+    },
+    {
+      "id": "eXqdTotBC05JGtmSBdiba",
+      "type": "arrow",
+      "x": 6702.601669303934,
+      "y": 487.3244837580529,
+      "width": 9.094947017729282e-13,
+      "height": 85.77724415899729,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b1x",
+      "roundness": {
+        "type": 2
+      },
+      "seed": 2118324681,
+      "version": 261,
+      "versionNonce": 1203561479,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "urJkseY3HJY69Oariem4m"
+        }
+      ],
+      "updated": 1741576957690,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          0,
+          46.015302918856854
+        ],
+        [
+          -9.094947017729282e-13,
+          85.77724415899729
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": null,
+      "endBinding": {
+        "elementId": "W854nPSz0p4lut302JyEo",
+        "focus": -0.0000033181252662927257,
+        "gap": 6.8433014597274
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": false
+    },
+    {
+      "id": "zSH_0RVoAH6FqvlC-qOEe",
+      "type": "text",
+      "x": 6894.8592730095925,
+      "y": 722.2366477728008,
+      "width": 44.43995666503906,
+      "height": 25,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b21",
+      "roundness": null,
+      "seed": 1023108425,
+      "version": 141,
+      "versionNonce": 1817672585,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741577040688,
+      "link": null,
+      "locked": false,
+      "text": "User",
+      "fontSize": 20,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "hh-vJczGSvSCpkhjc-ZFd",
+      "originalText": "User",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "YN7Z_MhrnVfus-HHFPTk1",
+      "type": "text",
+      "x": 6833.114194660153,
+      "y": -66.0390308302513,
+      "width": 212.7344970703125,
+      "height": 29.496989050549267,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b22",
+      "roundness": null,
+      "seed": 1288819753,
+      "version": 112,
+      "versionNonce": 441046665,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957668,
+      "link": null,
+      "locked": false,
+      "text": "AWS API Gateway",
+      "fontSize": 23.597591240439414,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "5rQwEFQ0OLt7lCCh6ROrl",
+      "originalText": "AWS API Gateway",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "A45yyUfo1lPMEY8TmwNAv",
+      "type": "text",
+      "x": 6679.344878334033,
+      "y": 44.869647999813935,
+      "width": 141.58709716796875,
+      "height": 29.496989050549267,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b23",
+      "roundness": null,
+      "seed": 968320777,
+      "version": 116,
+      "versionNonce": 471452169,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957669,
+      "link": null,
+      "locked": false,
+      "text": "AWS Lambda",
+      "fontSize": 23.597591240439414,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "lcNOx1PJ1LukZ3eN5WcGs",
+      "originalText": "AWS Lambda",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "fXbbtx_NcVZBC_fsO1Uff",
+      "type": "text",
+      "x": 6752.7992341022855,
+      "y": 155.77832682987918,
+      "width": 270.9545593261719,
+      "height": 29.496989050549267,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b24",
+      "roundness": null,
+      "seed": 1579654633,
+      "version": 120,
+      "versionNonce": 2083349609,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957669,
+      "link": null,
+      "locked": false,
+      "text": "AWS SQS (Task Queue)",
+      "fontSize": 23.597591240439414,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "YPquWrf902Bx_VzPe5ZKo",
+      "originalText": "AWS SQS (Task Queue)",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "V3UN0NpFvZDTX16OkuBNR",
+      "type": "text",
+      "x": 6684.789361665762,
+      "y": 300.90351295858153,
+      "width": 406.97430419921875,
+      "height": 29.496989050549267,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b25",
+      "roundness": null,
+      "seed": 959314121,
+      "version": 112,
+      "versionNonce": 1184395529,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957669,
+      "link": null,
+      "locked": false,
+      "text": "Celery Workers (Distributed Tasks)",
+      "fontSize": 23.597591240439414,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "O4ynYwner8EHSv-cUHyx0",
+      "originalText": "Celery Workers (Distributed Tasks)",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "lKO9DytZCWjoMyMUO9WnK",
+      "type": "text",
+      "x": 6252.558107535698,
+      "y": 446.02869908728394,
+      "width": 181.6428985595703,
+      "height": 29.496989050549267,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b26",
+      "roundness": null,
+      "seed": 1550186409,
+      "version": 112,
+      "versionNonce": 1604561769,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957670,
+      "link": null,
+      "locked": false,
+      "text": "AWS DynamoDB",
+      "fontSize": 23.597591240439414,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "d-Obq1jyhqw7abPHd6_i5",
+      "originalText": "AWS DynamoDB",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "ZIBlXFowG3rpzs7ZAmiZZ",
+      "type": "text",
+      "x": 6574.75627638259,
+      "y": 446.02869908728394,
+      "width": 255.6918182373047,
+      "height": 29.496989050549267,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b27",
+      "roundness": null,
+      "seed": 435886729,
+      "version": 120,
+      "versionNonce": 1559375593,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957670,
+      "link": null,
+      "locked": false,
+      "text": "AWS S3 (File Storage)",
+      "fontSize": 23.597591240439414,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "SLQjJ54OvcwHKgE0saBYW",
+      "originalText": "AWS S3 (File Storage)",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "avhHlotKdqzZ5gQytgcwQ",
+      "type": "text",
+      "x": 6933.366338855672,
+      "y": 446.02869908728394,
+      "width": 281.16900634765625,
+      "height": 29.496989050549267,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b28",
+      "roundness": null,
+      "seed": 1923670377,
+      "version": 120,
+      "versionNonce": 748899209,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957670,
+      "link": null,
+      "locked": false,
+      "text": "AWS SNS (Notifications)",
+      "fontSize": 23.597591240439414,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "SmhmRdO5OootjWvVdhZVC",
+      "originalText": "AWS SNS (Notifications)",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "GHHkKHEJHxyvjEsluWanq",
+      "type": "text",
+      "x": 7430.640893404734,
+      "y": 446.02869908728394,
+      "width": 189.3568115234375,
+      "height": 29.496989050549267,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b29",
+      "roundness": null,
+      "seed": 1136315465,
+      "version": 112,
+      "versionNonce": 150350889,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957670,
+      "link": null,
+      "locked": false,
+      "text": "AWS CloudWatch",
+      "fontSize": 23.597591240439414,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "-AKHuCF8e7h2_yxWV-Lgt",
+      "originalText": "AWS CloudWatch",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "-7qd6ZmMNssePA_ZVXOds",
+      "type": "text",
+      "x": 6571.94904829421,
+      "y": 591.1538852159863,
+      "width": 261.3062744140625,
+      "height": 29.496989050549267,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b2A",
+      "roundness": null,
+      "seed": 890002217,
+      "version": 112,
+      "versionNonce": 396251049,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957670,
+      "link": null,
+      "locked": false,
+      "text": "AWS CloudFront (CDN)",
+      "fontSize": 23.597591240439414,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "W854nPSz0p4lut302JyEo",
+      "originalText": "AWS CloudFront (CDN)",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "yhuAJFICJoRjDFmjFzM6C",
+      "type": "text",
+      "x": 7432.925856145735,
+      "y": 542.0354253333344,
+      "width": 182.89988708496094,
+      "height": 25,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2B",
+      "roundness": null,
+      "seed": 1728646665,
+      "version": 148,
+      "versionNonce": 1559308967,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741577022253,
+      "link": null,
+      "locked": false,
+      "text": "DevOps Monitoring",
+      "fontSize": 20,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "zkIptPJSdTc7fyDulV4Nc",
+      "originalText": "DevOps Monitoring",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "urJkseY3HJY69Oariem4m",
+      "type": "text",
+      "x": 6614.139244072,
+      "y": 518.5912921516351,
+      "width": 176.9248504638672,
+      "height": 29.496989050549267,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [
+        "wjqPa5lw_KjJSGahompw4"
+      ],
+      "frameId": null,
+      "index": "b2I",
+      "roundness": null,
+      "seed": 1695539753,
+      "version": 103,
+      "versionNonce": 1733728649,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957670,
+      "link": null,
+      "locked": false,
+      "text": "Serves Content",
+      "fontSize": 23.597591240439414,
+      "fontFamily": 5,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "eXqdTotBC05JGtmSBdiba",
+      "originalText": "Serves Content",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "QwQpbmMZYUJCdK5IFIkvr",
+      "type": "text",
+      "x": 6544.071555396827,
+      "y": -344.4583329999999,
+      "width": 849.491943359375,
+      "height": 105,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2K",
+      "roundness": null,
+      "seed": 925609498,
+      "version": 680,
+      "versionNonce": 1532562041,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741577153339,
+      "link": null,
+      "locked": false,
+      "text": "Cloud Infrastructure",
+      "fontSize": 84,
+      "fontFamily": 5,
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "Cloud Infrastructure",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "Gr_IecqseQ5STfEBPzVML",
+      "type": "arrow",
+      "x": 6939.381443195309,
+      "y": -20.33318594049333,
+      "width": 189.343016277292,
+      "height": 48.99397810109854,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2L",
+      "roundness": null,
+      "seed": 1516912969,
+      "version": 12,
+      "versionNonce": 742760681,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957669,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          0,
+          24.496989050549274
+        ],
+        [
+          -189.343016277292,
+          24.496989050549274
+        ],
+        [
+          -189.343016277292,
+          48.99397810109854
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": {
+        "elementId": "5rQwEFQ0OLt7lCCh6ROrl",
+        "fixedPoint": [
+          0.49959225118778955,
+          1.096311833253238
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "endBinding": {
+        "elementId": "lcNOx1PJ1LukZ3eN5WcGs",
+        "fixedPoint": [
+          0.4994565391795548,
+          -0.0963118332532381
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": true,
+      "fixedSegments": null,
+      "startIsSpecial": null,
+      "endIsSpecial": null
+    },
+    {
+      "id": "jXazvlSAB2utF1woHHpxJ",
+      "type": "arrow",
+      "x": 6750.038426918017,
+      "y": 90.5754928895719,
+      "width": 138.13808684735432,
+      "height": 48.99397810109855,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2M",
+      "roundness": null,
+      "seed": 535680231,
+      "version": 12,
+      "versionNonce": 1337388873,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576957669,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          0,
+          24.496989050549274
+        ],
+        [
+          138.13808684735432,
+          24.496989050549274
+        ],
+        [
+          138.13808684735432,
+          48.99397810109855
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": {
+        "elementId": "lcNOx1PJ1LukZ3eN5WcGs",
+        "fixedPoint": [
+          0.4994565391795548,
+          1.096311833253238
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "endBinding": {
+        "elementId": "YPquWrf902Bx_VzPe5ZKo",
+        "fixedPoint": [
+          0.4996759300723609,
+          -0.0963118332532381
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": true,
+      "fixedSegments": null,
+      "startIsSpecial": null,
+      "endIsSpecial": null
+    },
+    {
+      "id": "3raa-F9gTwZ7ZG2sCiVMU",
+      "type": "arrow",
+      "x": 6228.346569847856,
+      "y": 460.6771936125586,
+      "width": 459.7889046596829,
+      "height": 401.15905108747006,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2N",
+      "roundness": null,
+      "seed": 1355940775,
+      "version": 13,
+      "versionNonce": 449599049,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "N-p9QoQ7IUIthn6hq46No"
+        }
+      ],
+      "updated": 1741576957670,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -35,
+          0
+        ],
+        [
+          -35,
+          -401.15905108747006
+        ],
+        [
+          424.7889046596829,
+          -401.15905108747006
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": {
+        "elementId": "d-Obq1jyhqw7abPHd6_i5",
+        "fixedPoint": [
+          -0.02272045928132014,
+          0.4980737633349352
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "endBinding": {
+        "elementId": "lcNOx1PJ1LukZ3eN5WcGs",
+        "fixedPoint": [
+          -0.02717304102205375,
+          0.49807376333493464
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": true,
+      "fixedSegments": null,
+      "startIsSpecial": null,
+      "endIsSpecial": null
+    },
+    {
+      "id": "N-p9QoQ7IUIthn6hq46No",
+      "type": "text",
+      "x": 6106.646611046586,
+      "y": 245.59254412216723,
+      "width": 173.39991760253906,
+      "height": 30,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2O",
+      "roundness": null,
+      "seed": 121996329,
+      "version": 51,
+      "versionNonce": 1428605609,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576898934,
+      "link": null,
+      "locked": false,
+      "text": "Provides Data",
+      "fontSize": 24,
+      "fontFamily": 1,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "3raa-F9gTwZ7ZG2sCiVMU",
+      "originalText": "Provides Data",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "fMbl9KWZiggWCvF5xaMRT",
+      "type": "arrow",
+      "x": 6648.296124741433,
+      "y": 315.5520074838562,
+      "width": 305.01656792595077,
+      "height": 114.26783576421906,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2P",
+      "roundness": null,
+      "seed": 1912476361,
+      "version": 12,
+      "versionNonce": 89957673,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "TrZYRDh3Zbhh-Y8oME2XA"
+        }
+      ],
+      "updated": 1741576957670,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -305.01656792595077,
+          0
+        ],
+        [
+          -305.01656792595077,
+          114.26783576421906
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": {
+        "elementId": "O4ynYwner8EHSv-cUHyx0",
+        "fixedPoint": [
+          -0.010639185722623509,
+          0.4980737633349352
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "endBinding": {
+        "elementId": "d-Obq1jyhqw7abPHd6_i5",
+        "fixedPoint": [
+          0.4995455908143719,
+          -0.0963118332532381
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": true,
+      "fixedSegments": null,
+      "startIsSpecial": null,
+      "endIsSpecial": null
+    },
+    {
+      "id": "TrZYRDh3Zbhh-Y8oME2XA",
+      "type": "text",
+      "x": 6242.311600272514,
+      "y": 301.04688353719985,
+      "width": 201.9359130859375,
+      "height": 30,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2Q",
+      "roundness": null,
+      "seed": 1768413353,
+      "version": 21,
+      "versionNonce": 876256521,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576917613,
+      "link": null,
+      "locked": false,
+      "text": "Processes Tasks",
+      "fontSize": 24,
+      "fontFamily": 1,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "fMbl9KWZiggWCvF5xaMRT",
+      "originalText": "Processes Tasks",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "QTMS_iw6t6ynVYi-LOM0h",
+      "type": "arrow",
+      "x": 6763.232639511854,
+      "y": 342.66514912265495,
+      "width": 60.73045401061245,
+      "height": 87.15469412542029,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2R",
+      "roundness": null,
+      "seed": 735937097,
+      "version": 15,
+      "versionNonce": 41839049,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "izQ2ocL7VnsI6ZPX9Eijt"
+        }
+      ],
+      "updated": 1741576957670,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          0,
+          45.549451425552434
+        ],
+        [
+          -60.73045401061245,
+          45.549451425552434
+        ],
+        [
+          -60.73045401061245,
+          87.15469412542029
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": {
+        "elementId": "O4ynYwner8EHSv-cUHyx0",
+        "fixedPoint": [
+          0.23392699966809058,
+          1.020337038632418
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "endBinding": {
+        "elementId": "SLQjJ54OvcwHKgE0saBYW",
+        "fixedPoint": [
+          0.4996645050439854,
+          -0.0963118332532381
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": true,
+      "fixedSegments": null,
+      "startIsSpecial": null,
+      "endIsSpecial": null
+    },
+    {
+      "id": "izQ2ocL7VnsI6ZPX9Eijt",
+      "type": "text",
+      "x": 6700.622463165728,
+      "y": 382.45947660155105,
+      "width": 64.48989868164062,
+      "height": 12.5,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2S",
+      "roundness": null,
+      "seed": 1834674953,
+      "version": 47,
+      "versionNonce": 128581577,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576945070,
+      "link": null,
+      "locked": false,
+      "text": "Uploads Files",
+      "fontSize": 10,
+      "fontFamily": 1,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "QTMS_iw6t6ynVYi-LOM0h",
+      "originalText": "Uploads Files",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "FCEWIaj7DywBOG0ukJrRU",
+      "type": "arrow",
+      "x": 6967.973318464036,
+      "y": 343.24522078594714,
+      "width": 105.87752356546389,
+      "height": 86.5746224621281,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2T",
+      "roundness": null,
+      "seed": 582166663,
+      "version": 16,
+      "versionNonce": 408267401,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "iJzD-V1Ye1tztyDSMKCCB"
+        }
+      ],
+      "updated": 1741576972987,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          0,
+          44.969379762260246
+        ],
+        [
+          105.87752356546389,
+          44.969379762260246
+        ],
+        [
+          105.87752356546389,
+          86.5746224621281
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": {
+        "elementId": "O4ynYwner8EHSv-cUHyx0",
+        "fixedPoint": [
+          0.6695818213377501,
+          1.031510591694403
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "endBinding": {
+        "elementId": "SmhmRdO5OootjWvVdhZVC",
+        "fixedPoint": [
+          0.4996938546986774,
+          -0.0963118332532381
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": true,
+      "fixedSegments": null,
+      "startIsSpecial": null,
+      "endIsSpecial": null
+    },
+    {
+      "id": "iJzD-V1Ye1tztyDSMKCCB",
+      "type": "text",
+      "x": 6951.498681504092,
+      "y": 380.0896005482074,
+      "width": 138.82679748535156,
+      "height": 16.25,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2U",
+      "roundness": null,
+      "seed": 921728519,
+      "version": 34,
+      "versionNonce": 1066665031,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576971298,
+      "link": null,
+      "locked": false,
+      "text": "Triggers Notifications",
+      "fontSize": 13,
+      "fontFamily": 1,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "FCEWIaj7DywBOG0ukJrRU",
+      "originalText": "Triggers Notifications",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "vZM--SBjM4zyowOgs3hDv",
+      "type": "arrow",
+      "x": 7128.25690278931,
+      "y": 315.5520074838562,
+      "width": 396.9623963771428,
+      "height": 114.26783576421906,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2V",
+      "roundness": null,
+      "seed": 1147991273,
+      "version": 19,
+      "versionNonce": 675995913,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "10MDw0etYuPh4CpgAeTg0"
+        }
+      ],
+      "updated": 1741577001129,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          396.9623963771428,
+          0
+        ],
+        [
+          396.9623963771428,
+          114.26783576421906
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": {
+        "elementId": "O4ynYwner8EHSv-cUHyx0",
+        "fixedPoint": [
+          1.0106391857226238,
+          0.4980737633349352
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "endBinding": {
+        "elementId": "-AKHuCF8e7h2_yxWV-Lgt",
+        "fixedPoint": [
+          0.49957777827906663,
+          -0.0963118332532381
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": true,
+      "fixedSegments": null,
+      "startIsSpecial": null,
+      "endIsSpecial": null
+    },
+    {
+      "id": "10MDw0etYuPh4CpgAeTg0",
+      "type": "text",
+      "x": 7451.974365084421,
+      "y": 303.6770074838562,
+      "width": 146.4898681640625,
+      "height": 23.75,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2W",
+      "roundness": null,
+      "seed": 2022324935,
+      "version": 27,
+      "versionNonce": 1790563783,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741576999044,
+      "link": null,
+      "locked": false,
+      "text": "Logs Metadata",
+      "fontSize": 19,
+      "fontFamily": 1,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "vZM--SBjM4zyowOgs3hDv",
+      "originalText": "Logs Metadata",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "F704_xUi4glbWWo1UMSZD",
+      "type": "arrow",
+      "x": 7401.898105937576,
+      "y": 460.6771936125586,
+      "width": 35.66286187147671,
+      "height": 93.75823172077577,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2X",
+      "roundness": null,
+      "seed": 495535463,
+      "version": 157,
+      "versionNonce": 772975431,
+      "isDeleted": false,
+      "boundElements": [],
+      "updated": 1741577022658,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -35,
+          0
+        ],
+        [
+          -35.66286187147671,
+          93.75823172077577
+        ],
+        [
+          -0.9613871411438595,
+          93.75823172077577
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": {
+        "elementId": "-AKHuCF8e7h2_yxWV-Lgt",
+        "fixedPoint": [
+          -0.021111086046634895,
+          0.4980737633349352
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "endBinding": {
+        "elementId": "zkIptPJSdTc7fyDulV4Nc",
+        "fixedPoint": [
+          -0.02242466713384723,
+          0.4977272727272722
+        ],
+        "focus": 0,
+        "gap": 1
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": true,
+      "fixedSegments": null,
+      "startIsSpecial": null,
+      "endIsSpecial": null
+    },
+    {
+      "id": "uuVJhiL1l0abY9oNZiD10",
+      "type": "arrow",
+      "x": 6954.423001342112,
+      "y": 734.6366477728008,
+      "width": 782.0369581018585,
+      "height": 877.5492649993116,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2Y",
+      "roundness": null,
+      "seed": 1564607801,
+      "version": 173,
+      "versionNonce": 1278975575,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "_MRgU8xvGUK87XtjZCVdB"
+        }
+      ],
+      "updated": 1741577087661,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          766.9953999550553,
+          0
+        ],
+        [
+          766.9953999550553,
+          -877.5492649993116
+        ],
+        [
+          -15.041558146803254,
+          -877.5492649993116
+        ],
+        [
+          -15.041558146803254,
+          -816.8845344422608
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": {
+        "elementId": "hh-vJczGSvSCpkhjc-ZFd",
+        "fixedPoint": [
+          1.077294685990338,
+          0.4977272727272722
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "endBinding": {
+        "elementId": "5rQwEFQ0OLt7lCCh6ROrl",
+        "fixedPoint": [
+          0.49959225118778955,
+          -0.09631183325323865
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": true,
+      "fixedSegments": [
+        {
+          "index": 2,
+          "start": [
+            766.9953999550553,
+            0
+          ],
+          "end": [
+            766.9953999550553,
+            -877.5492649993116
+          ]
+        },
+        {
+          "index": 3,
+          "start": [
+            766.9953999550553,
+            -877.5492649993116
+          ],
+          "end": [
+            -15.041558146803254,
+            -877.5492649993116
+          ]
+        }
+      ],
+      "startIsSpecial": false,
+      "endIsSpecial": false
+    },
+    {
+      "id": "_MRgU8xvGUK87XtjZCVdB",
+      "type": "text",
+      "x": 7603.199948843554,
+      "y": -162.28761722651086,
+      "width": 236.43690490722656,
+      "height": 38.75,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2Z",
+      "roundness": null,
+      "seed": 345379383,
+      "version": 26,
+      "versionNonce": 1436350681,
+      "isDeleted": false,
+      "boundElements": null,
+      "updated": 1741577085801,
+      "link": null,
+      "locked": false,
+      "text": "Research Query",
+      "fontSize": 31,
+      "fontFamily": 1,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "uuVJhiL1l0abY9oNZiD10",
+      "originalText": "Research Query",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "RG4hRN73PDSPg9TvjEABI",
+      "type": "arrow",
+      "x": 6702.502185501241,
+      "y": 636.8597301057443,
+      "width": 177.233315840871,
+      "height": 97.77691766705641,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2a",
+      "roundness": null,
+      "seed": 316962359,
+      "version": 30,
+      "versionNonce": 1935335577,
+      "isDeleted": false,
+      "boundElements": [
+        {
+          "type": "text",
+          "id": "p7DsZCuKDJztbRiwgmN-N"
+        }
+      ],
+      "updated": 1741577120714,
+      "link": null,
+      "locked": false,
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          0,
+          97.77691766705641
+        ],
+        [
+          177.233315840871,
+          97.77691766705641
+        ]
+      ],
+      "lastCommittedPoint": null,
+      "startBinding": {
+        "elementId": "W854nPSz0p4lut302JyEo",
+        "fixedPoint": [
+          0.49967859913202245,
+          1.0963118332532389
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "endBinding": {
+        "elementId": "hh-vJczGSvSCpkhjc-ZFd",
+        "fixedPoint": [
+          -0.07729468599033816,
+          0.4977272727272722
+        ],
+        "focus": 0,
+        "gap": 0
+      },
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "elbowed": true,
+      "fixedSegments": null,
+      "startIsSpecial": null,
+      "endIsSpecial": null
+    },
+    {
+      "id": "p7DsZCuKDJztbRiwgmN-N",
+      "type": "text",
+      "x": 6600.489734329366,
+      "y": 719.0116477728008,
+      "width": 204.02490234375,
+      "height": 31.25,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2b",
+      "roundness": null,
+      "seed": 701652887,
+      "version": 22,
+      "versionNonce": 973861687,
+      "isDeleted": false,
+      "boundElements": null,
+      "updated": 1741577118639,
+      "link": null,
+      "locked": false,
+      "text": "Delivers Content",
+      "fontSize": 25,
+      "fontFamily": 1,
+      "textAlign": "center",
+      "verticalAlign": "middle",
+      "containerId": "RG4hRN73PDSPg9TvjEABI",
+      "originalText": "Delivers Content",
+      "autoResize": true,
+      "lineHeight": 1.25
+    },
+    {
+      "id": "upANbd9gbvPyDVaixKhNb",
+      "type": "text",
+      "x": 6551.937202258377,
+      "y": -259.4249996465235,
+      "width": 171.4839630126953,
+      "height": 53.75,
+      "angle": 0,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "transparent",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "groupIds": [],
+      "frameId": null,
+      "index": "b2c",
+      "roundness": null,
+      "seed": 631705881,
+      "version": 58,
+      "versionNonce": 1454583383,
+      "isDeleted": false,
+      "boundElements": null,
+      "updated": 1741577165072,
+      "link": null,
+      "locked": false,
+      "text": "Ex: AWS",
+      "fontSize": 43,
+      "fontFamily": 1,
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "Ex: AWS",
+      "autoResize": true,
+      "lineHeight": 1.25
     }
   ],
   "appState": {

backend/.gitignore

@@ -1 +0,0 @@
-downloads/*

backend/app.py

@@ -1,20 +1,21 @@
 # pip install asyncio eventlet
 # pip install google-genai beautifulsoup4 selenium newspaper3k lxml_html_clean
 from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
 import socketio
 import json, logging
 from knet import KNet
 from scraper import CrawlForAIScraper, WebScraper
 from dotenv import load_dotenv
 load_dotenv()
-import asyncio
 
 # Configure logging
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
 app = FastAPI()
-# Increased pingTimeout and added logger
+app.add_middleware(CORSMiddleware, allow_origins=["*"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"])
+
 sio = socketio.AsyncServer(cors_allowed_origins="*", ping_timeout=60, ping_interval=10, async_mode="asgi")
 app.mount('/', socketio.ASGIApp(sio))
 
@@ -43,7 +44,7 @@ async def health_check(sid, data):
 @sio.event
 async def start_research(sid, data):
     try:
-        data = json.loads(data)
+        data = json.loads(data) if type(data) != dict else data
         topic = data.get("topic")
         session_id = sid
         logger.info(f"Starting research for client {session_id} on topic: {topic}")
@@ -56,25 +57,19 @@ async def start_research(sid, data):
                 logger.error(f"Error in progress callback: {str(e)}")
                 raise e
 
-        try:
-            research_results = await knet.conduct_research(topic, progress_callback)
-            logger.info(f"Research completed for topic: {topic}")
-            await sio.emit("research_complete", research_results, room=session_id)
-        except Exception as e:
-            logger.error(f"Research error: {str(e)}")
-            await sio.emit("error", {"message": str(e)}, room=session_id)
-            raise e
+        research_results = await knet.conduct_research(topic, progress_callback)
+        logger.info(f"Research completed for topic: {topic}")
+        await sio.emit("research_complete", research_results, room=session_id)
 
     except Exception as e:
-        logger.error(f"Error handling research request: {str(e)}")
-        await sio.emit("error", {"message": str(e)}, room=sid)
-        raise e
+        logger.error(f"Research error: {str(e)}")
+        await sio.emit("error", {"message": str(e)}, room=session_id)
 
 
 @sio.event
 async def test(sid, data):
     print("Testing...")
-    data = json.loads(data)
+    data = json.loads(data) if type(data) != dict else data
     res = await knet.scraper._scrape_page(data["url"])
     print(json.dumps(res, indent=2))
     await scraper_instance.close()

backend/knet.py

@@ -1,4 +1,5 @@
-from typing import Dict, List, Optional, Any
+from typing import Dict, List, Any
+from textwrap import dedent
 import google.generativeai as genai
 from google.ai.generativelanguage_v1beta.types import content
 import logging
@@ -8,7 +9,6 @@ from datetime import datetime
 from dotenv import load_dotenv
 from research_node import ResearchNode
 from collections import deque
-import asyncio
 
 # Load environment variables
 load_dotenv()
@@ -36,15 +36,40 @@ class KNet:
         genai.configure(api_key=self.api_key)
 
         # Keep both models with original configurations
+        generation_config = {"temperature": 0.9}
+        safe = [
+            {
+                "category": "HARM_CATEGORY_DANGEROUS",
+                "threshold": "BLOCK_NONE",
+            },
+            {
+                "category": "HARM_CATEGORY_HARASSMENT",
+                "threshold": "BLOCK_NONE",
+            },
+            {
+                "category": "HARM_CATEGORY_HATE_SPEECH",
+                "threshold": "BLOCK_NONE",
+            },
+            {
+                "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
+                "threshold": "BLOCK_NONE",
+            },
+            {
+                "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
+                "threshold": "BLOCK_NONE",
+            },
+        ]
         self.llm = genai.GenerativeModel(
             "gemini-2.0-flash-lite-preview-02-05",
-            generation_config={"temperature": 0.7},
+            generation_config=generation_config,
+            safety_settings=safe,
         )
         self.ctx_researcher = []
 
         self.research_manager = genai.GenerativeModel(
             "gemini-2.0-flash-lite-preview-02-05",
-            generation_config={"temperature": 0.3},
+            generation_config=generation_config,
+            safety_settings=safe,
         )
         self.ctx_manager = []
 
@@ -118,30 +143,37 @@ class KNet:
     def _track_tokens(self, tokens: int) -> None:
         self.token_count += tokens
 
-    def _should_branch_deeper(self, node: ResearchNode, topic: str) -> bool:
-        # Generate summary of key findings into research_manager's context
-        if node.data:
-            findings = ("\n" + "-"*10 + "Next data" + "-"*10 + "\n").join([json.dumps(d, indent=2) for d in node.data])
-            response = self.llm.generate_content(f"Extract key findings from the following data related to the topic '{topic}':\n{findings}")
+    def _should_branch_deeper(self, node: ResearchNode, topic: str, retry_count=0) -> bool:
+        try:
+            # Generate summary of key findings into research_manager's context
+            if node.data:
+                findings = ("\n" + "-"*10 + "Next data" + "-"*10 + "\n").join([json.dumps(d, indent=2) for d in node.data])
+                response = self.llm.generate_content(f"Extract key findings from the following data related to the topic '{topic}':\n{findings}")
+                self._track_tokens(response.usage_metadata.total_token_count)
+                findings = response.text
+                self.ctx_manager.append(findings)
+
+            # Research manager takes decision to proceed or not
+            prompt = self.branch_decision_prompt.format(
+                query=node.query,
+                depth=node.depth,
+                path=" -> ".join(node.get_path_to_root()),
+                findings="\n".join(self.ctx_manager),
+            )
+            response = self.research_manager.generate_content(
+                prompt, generation_config={**self.branch_schema}
+            )
             self._track_tokens(response.usage_metadata.total_token_count)
-            findings = response.text
-            self.ctx_manager.append(findings)
-
-        # Research manager takes decision to proceed or not
-        prompt = self.branch_decision_prompt.format(
-            query=node.query,
-            depth=node.depth,
-            path=" -> ".join(node.get_path_to_root()),
-            findings="\n".join(self.ctx_manager),
-        )
-        response = self.research_manager.generate_content(
-            prompt, generation_config={**self.branch_schema}
-        )
-        self._track_tokens(response.usage_metadata.total_token_count)
-        result = json.loads(response.text)
-        self.logger.info(f"Branch decision for '{node.query}': {result['decision']}")
+            result = json.loads(response.text)
+            self.logger.info(f"Branch decision for '{node.query}': {result['decision']}")
 
-        return result["decision"]
+            return result["decision"]
+        except Exception as e:
+            if result["candidates"][0]["finishReason"] == "RECITATION":
+                self.logger.error(f"Retrying branch decision: {str(e)}\nC:{retry_count/3}")
+                self._should_branch_deeper(node, topic, retry_count+1)
+            self.logger.error(f"Branch decision failed: {str(e)}")
+            raise e
 
     async def conduct_research(self, topic: str, progress_callback=None) -> Dict[str, Any]:
         self.token_count = 0
@@ -184,7 +216,7 @@ class KNet:
             self.logger.info(f"Research completed. Explored {len(explored_queries)} queries across {root_node.max_depth()} levels")
             await progress.update(100, "Research complete!")
 
-            with open("output.json", "w") as f:
+            with open("output.json", "a") as f:
                 json.dump(final_report, f, indent=2)
             return final_report
 
@@ -192,23 +224,23 @@ class KNet:
             self.logger.error(f"Research failed: {str(e)}")
             raise e
 
-    def _analyze_and_branch(self, node: ResearchNode, topic: str) -> List[ResearchNode]:
-        if not node.data:
-            return []
+    def _analyze_and_branch(self, node: ResearchNode, topic: str, retry_count=0) -> List[ResearchNode]:
+        try:
+            if not node.data:
+                return []
 
-        analysis_prompt = f"""Based on the following findings about "{topic}", suggest new research directions.
-        Findings:
-        {json.dumps(self.ctx_manager, indent=2)}
+            analysis_prompt = dedent(f"""Based on the following findings about "{topic}", suggest new research directions.
+            Findings:
+            {json.dumps(self.ctx_manager, indent=2)}
 
-        Suggest up to {self.max_breadth} specific google search queries that would help data which:
-        - Builds upon these findings
-        - Explores different aspects
-        - Goes deeper into important details
+            Suggest up to {self.max_breadth} specific google search queries that would help data which:
+            - Builds upon these findings
+            - Explores different aspects
+            - Goes deeper into important details
 
-        Return as JSON array of objects with properties:
-        - query (string)"""
+            Return as JSON array of objects with properties:
+            - query (string)""")
 
-        try:
             response = self.research_manager.generate_content(
                 analysis_prompt, generation_config={**self.analysis_schema}
             )
@@ -227,56 +259,65 @@ class KNet:
             return new_nodes
 
         except Exception as e:
+            if result["candidates"][0]["finishReason"] == "RECITATION" and retry_count <= 3:
+                self.logger.error(f"Retrying analysis: {str(e)}\nC:{retry_count/3}")
+                self._analyze_and_branch(node, topic, retry_count+1)
             self.logger.error(f"Branch analysis failed: {str(e)}")
-            return []
-
-    def _generate_final_report(self, root_node: ResearchNode) -> Dict[str, Any]:
-        findings = "\n".join(self.ctx_manager)
-        print(f"""----------------- Findings -----------------""")
-        print(findings)
-        print(f"""----------------- Findings -----------------""")
-        prompt = f"""Generate a comprehensive report on the topic "{root_node.query}" based on the following research findings:
-        {findings}
-        """
-        response = self.research_manager.generate_content(prompt)
-        self._track_tokens(response.usage_metadata.total_token_count)
-
-        # Collate multimedia content
-        media_content = {"images": [], "videos": [], "links": [], "references": []}
-        all_sources_data = root_node.get_all_data()
-        for data in all_sources_data:
-            if data.get("images"):
-                media_content["images"].extend(data["images"])
-            if data.get("videos"):
-                media_content["videos"].extend(data["videos"])
-            if data.get("links"):
-                media_content["links"].extend([{"url": l["href"], "text": l["text"]} for l in data["links"]])
-        # Deduplicate
-        media_content["images"] = list(set(media_content["images"]))
-        media_content["videos"] = list(set(media_content["videos"]))
-        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 {}
+            raise e
+
+    def _generate_final_report(self, root_node: ResearchNode, retry_count=0) -> Dict[str, Any]:
+        try:
+            findings = "\n".join(self.ctx_manager)
+            with open("output.json", "w") as f:
+                f.write(findings)
+            prompt = f"""Generate a comprehensive report on the topic "{root_node.query}" based on the following research findings:
+            {findings}
+            """
+            response = self.research_manager.generate_content(prompt)
+            self._track_tokens(response.usage_metadata.total_token_count)
+
+            # Collate multimedia content
+            media_content = {"images": [], "videos": [], "links": [], "references": []}
+            all_sources_data = root_node.get_all_data()
+            for data in all_sources_data:
+                if data.get("images"):
+                    media_content["images"].extend(data["images"])
+                if data.get("videos"):
+                    media_content["videos"].extend(data["videos"])
+                if data.get("links"):
+                    media_content["links"].extend([{"url": l["href"], "text": l["text"]} for l in data["links"]])
+            # Deduplicate
+            media_content["images"] = list(set(media_content["images"]))
+            media_content["videos"] = list(set(media_content["videos"]))
+            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 {}
+                return {
+                    "query": node.query,
+                    "depth": node.depth,
+                    "children": [build_tree_structure(child) for child in node.children],
+                }
+
             return {
-                "query": node.query,
-                "depth": node.depth,
-                "children": [build_tree_structure(child) for child in node.children],
+                "topic": root_node.query,
+                "timestamp": datetime.now().isoformat(),
+                "content": response.text,
+                "media": media_content,
+                "research_tree": build_tree_structure(root_node),
+                "metadata": {
+                    "total_queries": root_node.total_children(),
+                    "total_sources": len(all_sources_data),
+                    "max_depth_reached": root_node.max_depth(),
+                    "total_tokens": self.token_count,
+                },
             }
-
-        return {
-            "topic": root_node.query,
-            "timestamp": datetime.now().isoformat(),
-            "content": response.text,
-            "media": media_content,
-            "research_tree": build_tree_structure(root_node),
-            "metadata": {
-                "total_queries": root_node.total_children(),
-                "total_sources": len(all_sources_data),
-                "max_depth_reached": root_node.max_depth(),
-                "total_tokens": self.token_count,
-            },
-        }
+        except Exception as e:
+            if response["candidates"][0]["finishReason"] == "RECITATION":
+                self.logger.error(f"Retrying final report: {str(e)}\nC:{retry_count/3}")
+                self._generate_final_report(root_node, retry_count+1)
+            self.logger.error(f"Error generating final report: {str(e)}")
+            raise e

frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

frontend/package.json

@@ -9,16 +9,40 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.479.0",
+    "next": "14.2.24",
+    "next-themes": "^0.4.5",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.24"
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^2.1.7",
+    "remark-gfm": "^4.0.1",
+    "shadcn": "^2.4.0-canary.12",
+    "socket.io-client": "^4.8.1",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^10.0.0",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

frontend/src/app/globals.css

@@ -2,26 +2,78 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
 }
 
-@media (prefers-color-scheme: dark) {
+
+@layer base {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
   }
-}
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+
+
+@layer base {
+  * {
+    @apply border-border;
   }
-}
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/src/app/layout.tsx

@@ -1,34 +1,19 @@
+import { ThemeProvider } from "@/components/theme-provider";
 import type { Metadata } from "next";
-import localFont from "next/font/local";
 import "./globals.css";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Research Chatbot",
+  description: "Deep research assistant with real-time updates",
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );

frontend/src/app/page.tsx

@@ -1,5 +1,5 @@
+import ChatInterface from '@/components/ChatInterface';
+
 export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"></div>
-  );
+  return <ChatInterface />;
 }

frontend/src/components/ChatHistory.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Message as MessageType } from "@/lib/types";
+import { Loader2 } from "lucide-react";
+import React, { useEffect, useRef } from "react";
+import Message from "./Message";
+
+interface ChatHistoryProps {
+  messages: MessageType[];
+  isLoading: boolean;
+}
+
+const ChatHistory: React.FC<ChatHistoryProps> = ({ messages, isLoading }) => {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return (
+    <ScrollArea tabIndex={-1}>
+      <div className="pb-24 focus-visible:outline-0" tabIndex={-1}>
+        {messages.length === 0 ? (
+          <div className="h-full flex flex-col items-center justify-center p-8 text-center">
+            <div className="max-w-md space-y-2">
+              <h2 className="text-2xl font-bold">Welcome to Deep Research</h2>
+              <p className="text-muted-foreground">Ask any research question to get started. The assistant will provide detailed answers backed by research and sources.</p>
+            </div>
+          </div>
+        ) : (
+          messages.map((message) => <Message key={message.id} message={message} />)
+        )}
+
+        {isLoading && (
+          <div className="my-2 mx-4">
+            <div className="max-w-2xl mx-auto flex gap-4 relative">
+              <div className="h-8 w-8 rounded-full shrink-0 bg-muted flex items-center justify-center absolute -left-12 top-0">
+                <Loader2 className="h-5 w-5 animate-spin" />
+              </div>
+              <div className="flex-1">
+                <div className="flex items-center gap-2 mb-1">
+                  <div className="text-xs text-muted-foreground">Just now</div>
+                  <div className="font-medium">Research Assistant</div>
+                </div>
+                <div className="mt-1 bg-muted/50 p-3 rounded-2xl rounded-tl-sm">
+                  <div className="flex space-x-2">
+                    <div className="w-2 h-2 rounded-full bg-muted-foreground/30 animate-pulse"></div>
+                    <div className="w-2 h-2 rounded-full bg-muted-foreground/30 animate-pulse" style={{ animationDelay: "300ms" }}></div>
+                    <div className="w-2 h-2 rounded-full bg-muted-foreground/30 animate-pulse" style={{ animationDelay: "600ms" }}></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+    </ScrollArea>
+  );
+};
+
+export default ChatHistory;

frontend/src/components/ChatInterface.tsx

@@ -0,0 +1,274 @@
+"use client";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { disconnectSocket, getSocket, initializeSocket } from "@/lib/socket";
+import { ChatData, ChatState, Conversation, Message, ResearchOptions, ResearchResults, StatusUpdate } from "@/lib/types";
+import { useEffect, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+import ChatHistory from "./ChatHistory";
+import MessageInput from "./MessageInput";
+import ResearchControls from "./ResearchControls";
+import ChatLayout from "./ui/ChatLayout";
+import ConversationList from "./ui/ConversationList";
+
+const saveToStorage = (data: ChatData) => {
+  if (typeof window !== "undefined") {
+    localStorage.setItem("chatData", JSON.stringify(data));
+  }
+};
+
+const loadFromStorage = (): ChatData => {
+  if (typeof window === "undefined") {
+    return { conversations: [], currentConversationId: null };
+  }
+  const data = localStorage.getItem("chatData");
+  if (!data) {
+    return { conversations: [], currentConversationId: null };
+  }
+  try {
+    const parsed = JSON.parse(data);
+    return {
+      conversations: Array.isArray(parsed.conversations) ? parsed.conversations : [],
+      currentConversationId: parsed.currentConversationId,
+    };
+  } catch (e) {
+    return { conversations: [], currentConversationId: null };
+  }
+};
+
+const ChatInterface = () => {
+  const [chatState, setChatState] = useState<ChatState>({ messages: [], isLoading: false, error: null });
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [currentConversationId, setCurrentConversationId] = useState<string | null>(null);
+
+  const [researchOptions, setResearchOptions] = useState<ResearchOptions>({
+    depth: "basic",
+    sources: true,
+    citations: false,
+  });
+
+  // Initialize socket once
+  useEffect(() => {
+    const socket = initializeSocket();
+
+    socket.on("connect", () => {
+      console.log("Connected to research server");
+    });
+
+    socket.on("disconnect", () => {
+      console.log("Disconnected from research server");
+    });
+
+    socket.on("status", (data: StatusUpdate) => {
+      setChatState((prevState) => {
+        const messages = [...prevState.messages];
+        const progressText = `(${data.progress}%) ${data.message}`;
+
+        // Find the last assistant message that is a progress update
+        const lastProgressIndex = messages.findLastIndex((msg) => msg.role === "assistant" && msg.content.includes("%)"));
+
+        if (lastProgressIndex !== -1) {
+          // Update existing progress message
+          messages[lastProgressIndex] = {
+            ...messages[lastProgressIndex],
+            content: progressText,
+          };
+        } else {
+          // Add new progress message
+          messages.push({
+            id: uuidv4(),
+            content: progressText,
+            role: "assistant",
+            timestamp: new Date(),
+          });
+        }
+
+        return {
+          ...prevState,
+          messages,
+          isLoading: true,
+        };
+      });
+    });
+
+    socket.on("research_complete", (results: ResearchResults) => {
+      setChatState((prevState) => {
+        const messages = [...prevState.messages];
+
+        // Remove the last progress message if it exists
+        const lastProgressIndex = messages.findLastIndex((msg) => msg.role === "assistant" && msg.content.includes("%)"));
+        if (lastProgressIndex !== -1) {
+          messages.splice(lastProgressIndex, 1);
+        }
+
+        // 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("");
+
+        const newMessages = [
+          ...messages,
+          {
+            id: uuidv4(),
+            content: formattedResponse,
+            role: "assistant" as const,
+            timestamp: new Date(results.timestamp),
+          },
+        ];
+
+        return {
+          ...prevState,
+          isLoading: false,
+          messages: newMessages,
+        };
+      });
+    });
+
+    socket.on("error", (error: { message: string }) => {
+      setChatState((prevState) => ({
+        ...prevState,
+        error: error.message,
+        isLoading: false,
+      }));
+    });
+
+    return () => {
+      disconnectSocket();
+    };
+  }, []); // Empty dependency array
+
+  // Load initial data
+  useEffect(() => {
+    const data = loadFromStorage();
+    setConversations(data.conversations);
+    setCurrentConversationId(data.currentConversationId);
+
+    if (data.currentConversationId) {
+      const currentConv = data.conversations.find((c) => c.id === data.currentConversationId);
+      if (currentConv) {
+        setChatState((prev) => ({ ...prev, messages: currentConv.messages }));
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const currentConv = conversations.find((c) => c.id === currentConversationId);
+
+    const data: ChatData = {
+      conversations: conversations.map((conv) => ({
+        ...conv,
+        messages: conv.id === currentConversationId ? chatState.messages : conv.messages || [],
+      })),
+      currentConversationId,
+    };
+
+    saveToStorage(data);
+  }, [conversations, currentConversationId, chatState.messages]);
+
+  const handleSendMessage = (content: string) => {
+    if (!content.trim()) return;
+
+    let conversationId = currentConversationId;
+    const newMessage: Message = {
+      id: uuidv4(),
+      content,
+      role: "user",
+      timestamp: new Date(),
+    };
+
+    // Create a new conversation if none exists
+    if (!conversationId) {
+      conversationId = uuidv4();
+      setCurrentConversationId(conversationId);
+      setConversations((prev) => [
+        {
+          id: conversationId as string,
+          title: content.length > 30 ? `${content.substring(0, 30)}...` : content,
+          lastUpdated: new Date().toISOString(),
+          messages: [newMessage],
+          active: true,
+        },
+        ...prev.map((c) => ({ ...c, active: false })),
+      ]);
+    } else {
+      // Update the existing conversation
+      setConversations((prev) =>
+        prev.map((conv) => ({
+          ...conv,
+          lastUpdated: conv.id === conversationId ? new Date().toISOString() : conv.lastUpdated,
+          active: conv.id === conversationId,
+          messages: conv.id === conversationId ? [...(conv.messages || []), newMessage] : conv.messages || [],
+        }))
+      );
+    }
+
+    setChatState((prevState) => ({
+      ...prevState,
+      messages: [...prevState.messages, newMessage],
+      isLoading: true,
+      error: null,
+    }));
+
+    // Send message to server via socket
+    try {
+      const socket = getSocket();
+      socket.emit("start_research", {
+        topic: content,
+      });
+    } catch (error) {
+      setChatState((prevState) => ({
+        ...prevState,
+        error: "Failed to connect to research server",
+        isLoading: false,
+      }));
+    }
+  };
+
+  const handleNewConversation = () => {
+    setCurrentConversationId(null);
+    setChatState({
+      messages: [],
+      isLoading: false,
+      error: null,
+    });
+  };
+
+  const handleSelectConversation = (id: string) => {
+    const data = loadFromStorage();
+    const conversation = data.conversations.find((c) => c.id === id);
+
+    setCurrentConversationId(id);
+    setChatState((prev) => ({
+      ...prev,
+      messages: conversation?.messages || [],
+      isLoading: false,
+      error: null,
+    }));
+    setConversations((prev) =>
+      prev.map((conv) => ({
+        ...conv,
+        active: conv.id === id,
+      }))
+    );
+  };
+
+  const sidebar = <ConversationList conversations={conversations} onNewConversation={handleNewConversation} onSelectConversation={handleSelectConversation} />;
+
+  const mainContent = (
+    <div className="flex flex-col w-full h-full relative" tabIndex={-1}>
+      <ChatHistory messages={chatState.messages} isLoading={chatState.isLoading} />
+
+      {chatState.error && (
+        <Alert variant="destructive" className="mx-2 my-2 mb-28 w-90 bg-red-950 text-red-50">
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{chatState.error}</AlertDescription>
+        </Alert>
+      )}
+
+      <MessageInput onSendMessage={handleSendMessage} isLoading={chatState.isLoading} />
+    </div>
+  );
+
+  return <ChatLayout sidebar={sidebar} mainContent={mainContent} settingsPanel={<ResearchControls options={researchOptions} onOptionChange={setResearchOptions} />} />;
+};
+
+export default ChatInterface;

frontend/src/components/Message.tsx

@@ -0,0 +1,97 @@
+import { Avatar } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+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 ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+const MarkdownComponents: Record<string, React.ComponentType<any>> = {
+  h1: ({ children }) => <h1 className="text-2xl font-bold mb-4">{children}</h1>,
+  h2: ({ children }) => <h2 className="text-xl font-bold mb-3">{children}</h2>,
+  h3: ({ children }) => <h3 className="text-lg font-bold mb-3">{children}</h3>,
+  p: ({ children }) => <p className="mb-4 last:mb-0">{children}</p>,
+  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 }) => (
+    <code className={`${inline ? "bg-muted px-1 py-0.5 rounded-md text-sm" : "block bg-muted/50 p-3 rounded-lg text-sm overflow-x-auto"}`} {...props}>
+      {children}
+    </code>
+  ),
+  pre: ({ children }) => <pre className="bg-transparent p-0">{children}</pre>,
+  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>,
+};
+
+interface MessageProps {
+  message: MessageType;
+}
+
+const Message: React.FC<MessageProps> = ({ message }) => {
+  const isUser = message.role === "user";
+  const isProgress = message.content.includes("%)") && message.role === "assistant";
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(message.content);
+  };
+
+  return (
+    <div className="py-2 px-4">
+      <div className={`max-w-2xl mx-auto flex gap-4 relative ${isUser ? "flex-row-reverse" : ""}`}>
+        <Avatar className={`h-8 w-8 shrink-0 absolute justify-center item-center ${isUser ? "-right-12" : "-left-12"} top-0`}>{isUser ? <User2 className="h-5 w-5" /> : <Bot className="h-5 w-5" />}</Avatar>
+
+        <div className={`flex-1 ${isUser ? "items-end" : "items-start"}`}>
+          <div className={`flex items-center gap-2 mb-1 ${isUser ? "justify-end" : "justify-start"}`}>
+            <div className="text-xs text-muted-foreground">{new Date(message.timestamp).toLocaleTimeString()}</div>
+            <div className="font-medium">{isUser ? "You" : "Research Assistant"}</div>
+
+            {!isUser && (
+              <div className="ml-auto flex items-center gap-2">
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button size="icon" variant="ghost" className="h-8 w-8" onClick={copyToClipboard}>
+                        <Copy className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Copy to clipboard</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button size="icon" variant="ghost" className="h-8 w-8">
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={copyToClipboard}>Copy text</DropdownMenuItem>
+                    <DropdownMenuItem>Show sources</DropdownMenuItem>
+                    <DropdownMenuItem>View in visualizations</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            )}
+          </div>
+
+          <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}
+            </ReactMarkdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Message;

frontend/src/components/MessageInput.tsx

@@ -0,0 +1,75 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { AutosizeTextarea } from "@/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Mic, Paperclip, Send } from "lucide-react";
+import React, { useState } from "react";
+
+interface MessageInputProps {
+  onSendMessage: (content: string) => void;
+  isLoading: boolean;
+}
+
+const MessageInput: React.FC<MessageInputProps> = ({ onSendMessage, isLoading }) => {
+  const [message, setMessage] = useState("");
+
+  const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessage(e.target.value);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (message.trim() && !isLoading) {
+      onSendMessage(message);
+      setMessage("");
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <div className="p-4 absolute bottom-0 left-0 right-0 bg-transparent mb-4">
+      <form onSubmit={handleSubmit} className="max-w-4xl mx-auto">
+        <div className="relative flex items-center bg-background shadow-lg rounded-[2rem] border overflow-hidden h-full">
+          <AutosizeTextarea placeholder="Ask a research question..." maxHeight={500} minHeight={52} className="pr-36 pl-6 py-4 font-medium border-none h-auto resize-none" value={message} onChange={handleMessageChange} onKeyDown={handleKeyDown} disabled={isLoading} rows={1} autoFocus />
+
+          <div className="absolute right-3 flex items-center gap-2 h-full">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button type="button" size="icon" variant="ghost" className="h-9 w-9" disabled={isLoading}>
+                    <Paperclip className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Attach files (coming soon)</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button type="button" size="icon" variant="ghost" className="h-9 w-9" disabled={isLoading}>
+                    <Mic className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Voice input (coming soon)</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            <Button type="submit" size="icon" className="h-9 w-9 rounded-full" disabled={isLoading || !message.trim()}>
+              <Send className="h-4 w-4" />
+              <span className="sr-only">Send message</span>
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default MessageInput;

frontend/src/components/ResearchControls.tsx

@@ -0,0 +1,73 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { ResearchOptions } from "@/lib/types";
+import React from "react";
+
+interface ResearchControlsProps {
+  options: ResearchOptions;
+  onOptionChange: (options: ResearchOptions) => void;
+}
+
+const ResearchControls: React.FC<ResearchControlsProps> = ({ options, onOptionChange }) => {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-3">
+        <Label htmlFor="research-depth">Research Depth</Label>
+        <Select value={options.depth} onValueChange={(value: ResearchOptions["depth"]) => onOptionChange({ ...options, depth: value })}>
+          <SelectTrigger id="research-depth" className="w-full">
+            <SelectValue placeholder="Select depth" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="basic">Basic</SelectItem>
+            <SelectItem value="intermediate">Intermediate</SelectItem>
+            <SelectItem value="deep">Deep</SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground">Determines how extensively the assistant will research your query.</p>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-3">
+        <Label>Inclusions</Label>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox id="sources" checked={options.sources} onCheckedChange={(checked) => onOptionChange({ ...options, sources: checked as boolean })} />
+          <Label htmlFor="sources" className="text-sm font-normal">
+            Include sources
+          </Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox id="citations" checked={options.citations} onCheckedChange={(checked) => onOptionChange({ ...options, citations: checked as boolean })} />
+          <Label htmlFor="citations" className="text-sm font-normal">
+            Include citations
+          </Label>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-3">
+        <Label>Coming Soon</Label>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="visualize" disabled />
+          <Label htmlFor="visualize" className="text-sm font-normal text-muted-foreground">
+            Generate visualizations
+          </Label>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox id="video-content" disabled />
+          <Label htmlFor="video-content" className="text-sm font-normal text-muted-foreground">
+            Include video content
+          </Label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResearchControls;

frontend/src/components/theme-provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import * as React from "react";
+
+export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

frontend/src/components/ui/ChatLayout.tsx

@@ -0,0 +1,85 @@
+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 { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { LayoutGrid, MessageCircle, Settings } from "lucide-react";
+import React from "react";
+import { ThemeToggle } from "./ThemeToggle";
+
+interface ChatLayoutProps {
+  sidebar: React.ReactNode;
+  mainContent: React.ReactNode;
+  settingsPanel: React.ReactNode;
+}
+
+const ChatLayout: React.FC<ChatLayoutProps> = ({ sidebar, mainContent, settingsPanel }) => {
+  return (
+    <div className="h-screen flex flex-col">
+      <header className="border-b-2 h-14 flex items-center px-6">
+        <h1 className="text-xl font-semibold">Deep Research Assistant</h1>
+        <div className="flex-1" />
+        <ThemeToggle />
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="icon">
+              <Settings size={20} />
+            </Button>
+          </SheetTrigger>
+          <SheetContent>
+            <div className="py-4">
+              <h2 className="text-lg font-semibold mb-4">Research Settings</h2>
+              {settingsPanel}
+            </div>
+          </SheetContent>
+        </Sheet>
+      </header>
+
+      <div className="flex-1 overflow-hidden">
+        <ResizablePanelGroup direction="horizontal">
+          <ResizablePanel defaultSize={20} minSize={15} maxSize={30} className="hidden md:block">
+            <Card className="h-full rounded-none border-r border-t-0 border-l-0 border-b-0">
+              <ScrollArea className="h-full">{sidebar}</ScrollArea>
+            </Card>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle className="hidden md:flex" />
+
+          <ResizablePanel defaultSize={80}>
+            <Tabs defaultValue="chat" className="h-full flex flex-col">
+              <div className="p-4">
+                <TabsList className="">
+                  <TabsTrigger value="chat" className="flex items-center gap-2">
+                    <MessageCircle size={16} />
+                    <span>Chat</span>
+                  </TabsTrigger>
+                  <TabsTrigger value="visualizations" className="flex items-center gap-2">
+                    <LayoutGrid size={16} />
+                    <span>Visualizations</span>
+                  </TabsTrigger>
+                </TabsList>
+              </div>
+
+              <TabsContent value="chat" className="overflow-auto flex flex-1" 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>
+            </Tabs>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  );
+};
+
+export default ChatLayout;

frontend/src/components/ui/ConversationList.tsx

@@ -0,0 +1,52 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { MessageSquare, PlusCircle } from "lucide-react";
+import React from "react";
+
+interface Conversation {
+  id: string;
+  title: string;
+  lastUpdated: string;
+  active?: boolean;
+}
+
+interface ConversationListProps {
+  conversations: Conversation[];
+  onNewConversation: () => void;
+  onSelectConversation: (id: string) => void;
+}
+
+const ConversationList: React.FC<ConversationListProps> = ({ conversations, onNewConversation, onSelectConversation }) => {
+  const handleSelectConversation = (id: string) => {
+    onSelectConversation(id);
+  };
+
+  return (
+    <div className="flex flex-col h-full py-2">
+      <div className="px-4 py-2">
+        <Button onClick={onNewConversation} className="w-full justify-start" variant="outline">
+          <PlusCircle className="mr-2 h-4 w-4" />
+          New Research
+        </Button>
+      </div>
+
+      <div className="px-2 py-2">
+        <h2 className="text-sm font-semibold px-2 mb-2">Recent Research</h2>
+        <div className="space-y-1">
+          {conversations.length === 0 ? (
+            <p className="text-sm text-muted-foreground px-2">No conversations yet</p>
+          ) : (
+            conversations.map((conversation) => (
+              <Button key={conversation.id} variant={conversation.active ? "secondary" : "ghost"} className={`w-full justify-start text-left truncate ${conversation.active ? "bg-accent" : ""}`} onClick={() => handleSelectConversation(conversation.id)}>
+                <MessageSquare className="mr-2 h-4 w-4 shrink-0" />
+                <span className="truncate">{conversation.title}</span>
+              </Button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConversationList;

frontend/src/components/ui/ThemeToggle.tsx

@@ -0,0 +1,34 @@
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Laptop, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 transition-all dark:-rotate-90 dark:hidden" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] hidden rotate-90 transition-all dark:rotate-0 dark:block" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          <Sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          <Moon className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          <Laptop className="mr-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

frontend/src/components/ui/alert.tsx

@@ -0,0 +1,27 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", {
+  variants: {
+    variant: {
+      default: "bg-background text-foreground",
+      destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+const Alert = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>>(({ className, variant, ...props }, ref) => <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />);
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />);
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertDescription, AlertTitle };

frontend/src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

frontend/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

frontend/src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

frontend/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

frontend/src/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    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",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "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
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.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-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

frontend/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

frontend/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

frontend/src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

frontend/src/components/ui/resizable.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

frontend/src/components/ui/scroll-area.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<React.ElementRef<typeof ScrollAreaPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>, React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar ref={ref} orientation={orientation} className={cn("flex touch-none select-none transition-colors", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]", className)} {...props}>
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

frontend/src/components/ui/select.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

frontend/src/components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

frontend/src/components/ui/sheet.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ 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",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+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",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "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",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <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>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

frontend/src/components/ui/tabs.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>>(({ className, ...props }, ref) => <TabsPrimitive.List ref={ref} className={cn("inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", className)} {...props} />);
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger ref={ref} className={cn("inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow", className)} {...props} />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className)} {...props} />);
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+

frontend/src/components/ui/textarea.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { useImperativeHandle } from "react";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return <textarea className={cn("flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className)} ref={ref} {...props} />;
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+
+interface UseAutosizeTextAreaProps {
+  textAreaRef: React.MutableRefObject<HTMLTextAreaElement | null>;
+  minHeight?: number;
+  maxHeight?: number;
+  triggerAutoSize: string;
+}
+
+export const useAutosizeTextArea = ({ textAreaRef, triggerAutoSize, maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 0 }: UseAutosizeTextAreaProps) => {
+  const [init, setInit] = React.useState(true);
+  React.useEffect(() => {
+    // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+    const offsetBorder = 0;
+    const textAreaElement = textAreaRef.current;
+    if (textAreaElement) {
+      if (init) {
+        textAreaElement.style.minHeight = `${minHeight + offsetBorder}px`;
+        if (maxHeight > minHeight) {
+          textAreaElement.style.maxHeight = `${maxHeight}px`;
+        }
+        setInit(false);
+      }
+      textAreaElement.style.height = `${minHeight + offsetBorder}px`;
+      const scrollHeight = textAreaElement.scrollHeight;
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      if (scrollHeight > maxHeight) {
+        textAreaElement.style.height = `${maxHeight}px`;
+      } else {
+        textAreaElement.style.height = `${scrollHeight + offsetBorder}px`;
+      }
+    }
+  }, [textAreaRef.current, triggerAutoSize]);
+};
+
+export type AutosizeTextAreaRef = {
+  textArea: HTMLTextAreaElement;
+  maxHeight: number;
+  minHeight: number;
+};
+
+type AutosizeTextAreaProps = {
+  maxHeight?: number;
+  minHeight?: number;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const AutosizeTextarea = React.forwardRef<AutosizeTextAreaRef, AutosizeTextAreaProps>(({ maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 52, className, onChange, value, ...props }: AutosizeTextAreaProps, ref: React.Ref<AutosizeTextAreaRef>) => {
+  const textAreaRef = React.useRef<HTMLTextAreaElement | null>(null);
+  const [triggerAutoSize, setTriggerAutoSize] = React.useState("");
+
+  useAutosizeTextArea({
+    textAreaRef,
+    triggerAutoSize: triggerAutoSize,
+    maxHeight,
+    minHeight,
+  });
+
+  useImperativeHandle(ref, () => ({
+    textArea: textAreaRef.current as HTMLTextAreaElement,
+    focus: () => textAreaRef?.current?.focus(),
+    maxHeight,
+    minHeight,
+  }));
+
+  React.useEffect(() => {
+    setTriggerAutoSize(value as string);
+  }, [props?.defaultValue, value]);
+
+  return (
+    <textarea
+      {...props}
+      value={value}
+      ref={textAreaRef}
+      className={cn("flex w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className)}
+      onChange={(e) => {
+        setTriggerAutoSize(e.target.value);
+        onChange?.(e);
+      }}
+    />
+  );
+});
+AutosizeTextarea.displayName = "AutosizeTextarea";

frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

frontend/src/lib/socket.ts

@@ -0,0 +1,30 @@
+import { io, Socket } from "socket.io-client";
+
+let socket: Socket | null = null;
+
+export const initializeSocket = (url: string = process.env.NEXT_PUBLIC_KNET_BACKEND!) => {
+  url = process.env.NEXT_PUBLIC_KNET_BACKEND || "http://127.0.0.1:5000";
+  if (!socket) {
+    socket = io(url, {
+      transports: ["websocket"],
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1000,
+    });
+  }
+  return socket;
+};
+
+export const getSocket = () => {
+  if (!socket) {
+    throw new Error("Socket not initialized. Call initializeSocket first.");
+  }
+  return socket;
+};
+
+export const disconnectSocket = () => {
+  if (socket) {
+    socket.disconnect();
+    socket = null;
+  }
+};

frontend/src/lib/types.ts

@@ -0,0 +1,60 @@
+export interface Message {
+  id: string;
+  content: string;
+  role: "user" | "assistant" | "system";
+  timestamp: Date;
+}
+
+export interface ChatState {
+  messages: Message[];
+  isLoading: boolean;
+  error: string | null;
+}
+
+export interface ResearchOptions {
+  depth: "basic" | "intermediate" | "deep";
+  sources: boolean;
+  citations: boolean;
+}
+
+export interface ChatData {
+  conversations: Conversation[];
+  currentConversationId: string | null;
+}
+
+export interface Conversation {
+  id: string;
+  title: string;
+  lastUpdated: string;
+  messages: Message[];
+  active: boolean;
+}
+
+export interface StatusUpdate {
+  message: string;
+  progress: number;
+}
+
+export interface ResearchNode {
+  query: string;
+  children?: ResearchNode[];
+}
+
+export interface ResearchMetadata {
+  total_queries: number;
+  total_sources: number;
+  max_depth_reached: number;
+  total_tokens: number;
+}
+
+export interface ResearchResults {
+  topic: string;
+  timestamp: string;
+  content: string;
+  media?: {
+    images?: string[];
+    videos?: string[];
+  };
+  research_tree: ResearchNode;
+  metadata: ResearchMetadata;
+}

frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

frontend/tailwind.config.ts

@@ -1,19 +1,63 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  content: [
+    darkMode: ["class"],
+    content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
+  	extend: {
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		}
+  	}
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 };
 export default config;