diff --git a/package-lock.json b/package-lock.json
index 2b8ad3e..6541be9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,8 @@
         "react-d3-tree": "^3.6.6",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.3.5",
+        "react-markdown": "^10.1.0",
+        "remark-gfm": "^4.0.1",
         "sharp": "^0.34.4",
         "tailwind-merge": "^3.3.1",
         "undici": "^7.9.0",
@@ -2143,6 +2145,30 @@
         "@types/d3-selection": "*"
       }
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/form-data": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-2.5.2.tgz",
@@ -2158,6 +2184,15 @@
       "integrity": "sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA==",
       "license": "MIT"
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/js-yaml": {
       "version": "4.0.9",
       "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
@@ -2170,6 +2205,21 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.17.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.12.tgz",
@@ -2183,14 +2233,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "devOptional": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/react": {
       "version": "18.3.18",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
       "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -2207,6 +2255,12 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -2332,8 +2386,7 @@
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
-      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
-      "dev": true
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="
     },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.10",
@@ -2743,6 +2796,16 @@
         "deep-equal": "^2.0.5"
       }
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2951,6 +3014,16 @@
       "resolved": "https://registry.npmjs.org/canonicalize/-/canonicalize-1.0.8.tgz",
       "integrity": "sha512-0CNTVCLZggSh7bc5VkX5WWPWO+cyZbNd07IHIsSXLia/eAq+r836hgk+8BKoEh7949Mda87VUOitx5OddVj64A=="
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chain-function": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz",
@@ -2973,6 +3046,46 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -3089,6 +3202,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -3168,8 +3291,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/d3": {
       "version": "7.9.0",
@@ -3659,7 +3781,6 @@
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
       "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -3672,6 +3793,19 @@
         }
       }
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -3784,6 +3918,19 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -4488,6 +4635,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -4513,6 +4670,12 @@
         "node": ">=0.4.x"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5090,6 +5253,56 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -5157,6 +5370,12 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
     "node_modules/internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -5180,6 +5399,30 @@
         "node": ">=12"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -5322,6 +5565,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -5378,6 +5631,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -5435,6 +5698,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -5878,6 +6153,16 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5906,6 +6191,16 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -5914,96 +6209,940 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
       },
-      "engines": {
-        "node": ">=8.6"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
+      "integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
+      "license": "MIT",
       "dependencies": {
-        "mime-db": "1.52.0"
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
       },
-      "engines": {
-        "node": ">= 0.6"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
       },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/motion-dom": {
-      "version": "12.23.12",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
-      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
       "license": "MIT",
       "dependencies": {
-        "motion-utils": "^12.23.6"
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/motion-utils": {
-      "version": "12.23.6",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
       "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
       "license": "MIT"
     },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/mz": {
       "version": "2.7.0",
@@ -6519,6 +7658,31 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -6828,6 +7992,16 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -7003,6 +8177,33 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
       "license": "MIT"
     },
+    "node_modules/react-markdown": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+      "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
@@ -7202,6 +8403,72 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -7563,6 +8830,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -7756,6 +9033,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -7802,6 +9093,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -7981,6 +9290,26 @@
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -8163,6 +9492,93 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
@@ -8286,6 +9702,34 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
@@ -8586,6 +10030,16 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 52259e1..5169fdc 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,8 @@
     "react-d3-tree": "^3.6.6",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.3.5",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "sharp": "^0.34.4",
     "tailwind-merge": "^3.3.1",
     "undici": "^7.9.0",
diff --git a/public/atlasabstract.png b/public/atlasabstract.png
new file mode 100644
index 0000000..f020320
Binary files /dev/null and b/public/atlasabstract.png differ
diff --git a/public/meet_graph_logo.png b/public/meet_graph_logo.png
new file mode 100644
index 0000000..0a127f4
Binary files /dev/null and b/public/meet_graph_logo.png differ
diff --git a/public/semantic_concept_mapper_logo_tr.png b/public/semantic_concept_mapper_logo_tr.png
new file mode 100644
index 0000000..ade3bbd
Binary files /dev/null and b/public/semantic_concept_mapper_logo_tr.png differ
diff --git a/public/structsense-logo.png b/public/structsense-logo.png
new file mode 100644
index 0000000..a805dd8
Binary files /dev/null and b/public/structsense-logo.png differ
diff --git a/public/structsense_horizontal.png b/public/structsense_horizontal.png
new file mode 100644
index 0000000..3e6df78
Binary files /dev/null and b/public/structsense_horizontal.png differ
diff --git a/public/synthscholar-logo.png b/public/synthscholar-logo.png
new file mode 100644
index 0000000..b85fc57
Binary files /dev/null and b/public/synthscholar-logo.png differ
diff --git a/src/app/Footer.tsx b/src/app/Footer.tsx
index 0209006..204a029 100644
--- a/src/app/Footer.tsx
+++ b/src/app/Footer.tsx
@@ -1,27 +1,23 @@
 "use client";
 
 /**
- * Footer — ported from sensein/brainkb-ui-prototype's Landing footer.
- *
- * Wraps itself in <Theme> so the --bkb-* tokens resolve regardless of where
- * the parent renders this (the root layout drops it after every route).
+ * Footer — dark editorial treatment that flows out of the landing page's
+ * "Powered by AI agents" section. Wraps itself in <Theme> so it renders
+ * consistently after every route; colours are hard-set for the dark surface
+ * rather than relying on the light --bkb-* tokens.
  */
 
 import React from "react";
 import Link from "next/link";
-import Image from "next/image";
 import { FONTS, Theme } from "@/src/app/components/design-system";
 
+const INK = "#f0eee9";
+const MUTED = "rgba(240,238,233,0.62)";
+const SUBTLE = "rgba(240,238,233,0.42)";
+const ACCENT = "#3ecf8e";
+const HAIRLINE = "rgba(255,255,255,0.1)";
+
 const COLUMNS: { h: string; items: { label: string; href?: string }[] }[] = [
-//   {
-//     h: "Product",
-//     items: [
-//       { label: "Explorer", href: "/knowledge-base" },
-//       { label: "Dashboard", href: "/user/dashboard" },
-//       { label: "SPARQL API", href: "/about" },
-//       { label: "Changelog", href: "/about" },
-//     ],
-//   },
   {
     h: "Resources",
     items: [
@@ -33,8 +29,6 @@ const COLUMNS: { h: string; items: { label: string; href?: string }[] }[] = [
   {
     h: "About",
     items: [
-//       { label: "Team", href: "/about" },
-//       { label: "Governance", href: "/about" },
       { label: "Privacy", href: "/privacy-policy" },
       { label: "Contact", href: "/contact" },
     ],
@@ -44,12 +38,12 @@ const COLUMNS: { h: string; items: { label: string; href?: string }[] }[] = [
 const Footer: React.FC = () => {
   const year = new Date().getFullYear();
   return (
-    <Theme theme="light" style={{ background: "#f0eee9" }}>
+    <Theme theme="dark" style={{ background: "#0b1410" }}>
       <footer
         style={{
-          background: "var(--bkb-surface)",
-          borderTop: "1px solid var(--bkb-border)",
-          padding: "48px 64px 32px",
+          background: "#0b1410",
+          borderTop: `1px solid ${HAIRLINE}`,
+          padding: "64px 64px 36px",
         }}
       >
         <div
@@ -57,47 +51,57 @@ const Footer: React.FC = () => {
             maxWidth: 1200,
             margin: "0 auto",
             display: "grid",
-            gridTemplateColumns: "1.5fr 1fr 1fr 1fr",
+            gridTemplateColumns: "1.6fr 1fr 1fr",
             gap: 48,
           }}
         >
           <div>
-            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
-              <Image src="/brainkb_logo.png" alt="BrainKB" width={32} height={32} priority />
-              <div style={{ fontFamily: FONTS.display, fontSize: 22, letterSpacing: "-0.02em" }}>BrainKB</div>
+            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
+              <div
+                style={{
+                  width: 34,
+                  height: 34,
+                  borderRadius: 9,
+                  background: "#1db981",
+                  color: "#0b1410",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontFamily: FONTS.display,
+                  fontSize: 20,
+                  lineHeight: 1,
+                }}
+              >
+                B
+              </div>
+              <div style={{ fontFamily: FONTS.display, fontSize: 24, letterSpacing: "-0.02em", color: INK }}>BrainKB</div>
             </div>
-            <div style={{ fontSize: 12, color: "var(--bkb-textMuted)", lineHeight: 1.6, maxWidth: 320 }}>
-              An open neuroscience knowledge graph supported by U24MH130918 (BICAN Knowledgebase), P41EB019936 (ReproNim), U24MH136628 (BBQS), UM1NS132358 (Brain Connects), and MIT MGAIC consortium.
+            <div style={{ fontSize: 13, color: MUTED, lineHeight: 1.65, maxWidth: 380 }}>
+              An open neuroscience knowledge graph supported by U24MH130918 (BICAN Knowledgebase), P41EB019936 (ReproNim), U24MH136628 (BBQS), UM1NS132358 (Brain Connects), and the MIT MGAIC consortium.
             </div>
           </div>
           {COLUMNS.map((col) => (
             <div key={col.h}>
               <div
                 style={{
-                  fontSize: 11,
-                  color: "var(--bkb-textSubtle)",
-                  letterSpacing: "0.1em",
+                  fontFamily: FONTS.mono,
+                  fontSize: 11.5,
+                  color: ACCENT,
+                  letterSpacing: "0.14em",
                   textTransform: "uppercase",
-                  marginBottom: 14,
+                  marginBottom: 16,
                 }}
               >
                 {col.h}
               </div>
               {col.items.map((it) => (
-                <div key={it.label} style={{ padding: "4px 0" }}>
+                <div key={it.label} style={{ padding: "5px 0" }}>
                   {it.href ? (
-                    <Link
-                      href={it.href}
-                      style={{
-                        fontSize: 13,
-                        color: "var(--bkb-textMuted)",
-                        textDecoration: "none",
-                      }}
-                    >
+                    <Link href={it.href} style={{ fontSize: 14, color: MUTED, textDecoration: "none" }}>
                       {it.label}
                     </Link>
                   ) : (
-                    <span style={{ fontSize: 13, color: "var(--bkb-textMuted)" }}>{it.label}</span>
+                    <span style={{ fontSize: 14, color: MUTED }}>{it.label}</span>
                   )}
                 </div>
               ))}
@@ -108,11 +112,11 @@ const Footer: React.FC = () => {
         <div
           style={{
             maxWidth: 1200,
-            margin: "40px auto 0",
-            paddingTop: 20,
-            borderTop: "1px solid var(--bkb-border)",
-            fontSize: 11,
-            color: "var(--bkb-textSubtle)",
+            margin: "48px auto 0",
+            paddingTop: 22,
+            borderTop: `1px solid ${HAIRLINE}`,
+            fontSize: 12,
+            color: SUBTLE,
           }}
         >
           © {year} BrainKB ·{" "}
@@ -120,7 +124,7 @@ const Footer: React.FC = () => {
             href="https://sensein.group"
             target="_blank"
             rel="noopener noreferrer"
-            style={{ color: "var(--bkb-textMuted)", textDecoration: "none" }}
+            style={{ color: MUTED, textDecoration: "none" }}
           >
             Senseable Intelligence Group
           </Link>
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index e14045f..72f7afc 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,148 +1,127 @@
 "use client";
 
-import { Target, Zap, CheckCircle } from "lucide-react";
+/**
+ * About — editorial direction, consistent with the landing and tools pages.
+ * What is BrainKB (numbered columns) → Objectives → Expected Outcomes.
+ */
+
+import { Target, Zap } from "lucide-react";
+import { FONTS } from "@/src/app/components/design-system";
 import yaml from "@/src/config/yaml/about.yaml";
 
+function Eyebrow({ children, color = "var(--bkb-accent)" }: { children: React.ReactNode; color?: string }) {
+  return (
+    <div style={{ fontFamily: FONTS.mono, fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color, fontWeight: 600, marginBottom: 18 }}>
+      {children}
+    </div>
+  );
+}
+
+function CardGrid({ points, Icon, accent }: { points: any[]; Icon: any; accent: string }) {
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
+      {points?.map((p: any, i: number) => (
+        <div
+          key={i}
+          className="bkb-card"
+          style={{ padding: 28, borderRadius: 16, background: "var(--bkb-surfaceAlt)", height: "100%", display: "flex", flexDirection: "column" }}
+        >
+          <span
+            style={{
+              width: 44,
+              height: 44,
+              borderRadius: 11,
+              background: accent,
+              color: "#fff",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              marginBottom: 18,
+            }}
+          >
+            <Icon style={{ width: 20, height: 20 }} />
+          </span>
+          <h3 style={{ fontFamily: FONTS.display, fontSize: 20, fontWeight: 400, letterSpacing: "-0.01em", margin: "0 0 10px", lineHeight: 1.25 }}>
+            {p.title}
+          </h3>
+          {p.description && (
+            <p style={{ fontSize: 13.5, color: "var(--bkb-textMuted)", lineHeight: 1.6, margin: 0 }}>{p.description}</p>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export default function About() {
   const sections = yaml.sections;
-  const objectivesSection = sections.find(s => s.section === "objectives");
-  const expectedOutcomeSection = sections.find(s => s.section === "expectedoutcome");
-  const whatIsSection = sections.find(s => s.section === "whatisbrainkb");
+  const whatIs = sections.find((s) => s.section === "whatisbrainkb");
+  const objectives = sections.find((s) => s.section === "objectives");
+  const outcomes = sections.find((s) => s.section === "expectedoutcome");
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-sky-50">
-      {/* Hero Section */}
-      <section className="py-20 bg-gradient-to-br from-sky-50 via-white to-emerald-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mt-[30px]">
-            <h1 className="text-5xl sm:text-6xl font-extrabold mb-6">
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-600 via-blue-600 to-emerald-600">
-                About BrainKB
-              </span>
-            </h1>
-            <p className="text-xl sm:text-2xl text-gray-700 max-w-3xl mx-auto leading-relaxed">
-              Learn about our mission, objectives, and expected outcomes
-            </p>
+    <div style={{ background: "#f0eee9" }}>
+      {/* ── About / What is BrainKB ───────────────────────────────── */}
+      {whatIs && (
+        <section style={{ padding: "96px 64px 72px", maxWidth: 1200, margin: "0 auto" }}>
+          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 72, alignItems: "start", marginBottom: 56 }}>
+            <div>
+              <Eyebrow>About</Eyebrow>
+              <h1 style={{ fontFamily: FONTS.display, fontSize: 52, lineHeight: 1.05, margin: 0, letterSpacing: "-0.02em", fontWeight: 400 }}>
+                {whatIs.title}
+              </h1>
+            </div>
+            {whatIs.subtitle && (
+              <p style={{ fontSize: 17, color: "var(--bkb-textMuted)", lineHeight: 1.7, margin: 0, paddingTop: 6 }}>{whatIs.subtitle}</p>
+            )}
           </div>
-        </div>
-      </section>
 
-      {/* What is BrainKB Section */}
-      {whatIsSection && (
-        <section className="py-20 bg-white">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="text-center mb-16">
-              <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
-                {whatIsSection.title}
-              </h2>
-              {whatIsSection.subtitle && (
-                <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12">
-                  {whatIsSection.subtitle}
-                </p>
-              )}
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                {whatIsSection.bullet_points?.map((point, index) => (
-                  <div
-                    key={index}
-                    className="bg-gradient-to-br from-sky-50 to-emerald-50 rounded-xl p-6 border border-sky-100 hover:shadow-lg transition-all duration-300"
-                  >
-                    <CheckCircle className="w-8 h-8 text-sky-600 mb-4" />
-                    <p className="text-gray-700 font-medium leading-relaxed">
-                      {point.title}
-                    </p>
+          {Array.isArray(whatIs.bullet_points) && (
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--bkb-border)" }}>
+              {whatIs.bullet_points.map((p: any, i: number) => (
+                <div key={i} style={{ padding: "30px 30px 0", borderLeft: i ? "1px solid var(--bkb-border)" : "none" }}>
+                  <div style={{ fontFamily: FONTS.mono, fontSize: 13, color: "var(--bkb-accent)", marginBottom: 22 }}>
+                    {String(i + 1).padStart(2, "0")}
                   </div>
-                ))}
-              </div>
+                  <p style={{ fontSize: 14, color: "var(--bkb-textMuted)", lineHeight: 1.6, margin: 0 }}>{p.title}</p>
+                </div>
+              ))}
             </div>
-          </div>
+          )}
         </section>
       )}
 
-      {/* Objectives Section */}
-      {objectivesSection && (
-        <section className="py-20 bg-gradient-to-br from-gray-50 to-sky-50">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="text-center mb-16">
-              <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
-                {objectivesSection.title}
+      {/* ── Objectives (white) ────────────────────────────────────── */}
+      {objectives && (
+        <section style={{ background: "var(--bkb-surface)", borderTop: "1px solid var(--bkb-border)", borderBottom: "1px solid var(--bkb-border)" }}>
+          <div style={{ padding: "96px 64px", maxWidth: 1200, margin: "0 auto" }}>
+            <div style={{ maxWidth: 720, marginBottom: 48 }}>
+              <Eyebrow>Mission</Eyebrow>
+              <h2 style={{ fontFamily: FONTS.display, fontSize: 46, lineHeight: 1.06, margin: 0, letterSpacing: "-0.02em", fontWeight: 400 }}>
+                {objectives.title}
               </h2>
-              {objectivesSection.subtitle && (
-                <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-                  {objectivesSection.subtitle}
-                </p>
+              {objectives.subtitle && (
+                <p style={{ fontSize: 16, color: "var(--bkb-textMuted)", lineHeight: 1.65, margin: "16px 0 0" }}>{objectives.subtitle}</p>
               )}
             </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {objectivesSection.bullet_points?.map((point, index) => (
-                <div
-                  key={index}
-                  className="group bg-gradient-to-br from-sky-50 to-white rounded-xl p-6 border-2 border-gray-100 hover:border-sky-300 hover:shadow-lg transition-all duration-300"
-                >
-                  <div className="flex items-start gap-4">
-                    <div className="flex-shrink-0">
-                      <div className="w-12 h-12 bg-gradient-to-br from-sky-500 to-blue-500 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
-                        <Target className="w-6 h-6 text-white" />
-                      </div>
-                    </div>
-                    <div className="flex-1">
-                      <h3 className="text-lg font-bold text-gray-900 mb-2">
-                        {point.title}
-                      </h3>
-                      {point.description && (
-                        <p className="text-gray-600 text-sm leading-relaxed">
-                          {point.description}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
+            <CardGrid points={objectives.bullet_points} Icon={Target} accent="var(--bkb-accent)" />
           </div>
         </section>
       )}
 
-      {/* Expected Outcomes Section */}
-      {expectedOutcomeSection && (
-        <section className="py-20 bg-white">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="text-center mb-16">
-              <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
-                {expectedOutcomeSection.title}
-              </h2>
-              {expectedOutcomeSection.subtitle && (
-                <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-4">
-                  {expectedOutcomeSection.subtitle}
-                </p>
-              )}
-            </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {expectedOutcomeSection.bullet_points?.map((point, index) => (
-                <div
-                  key={index}
-                  className="group bg-gradient-to-br from-emerald-50 to-sky-50 rounded-xl p-6 border-2 border-gray-100 hover:border-emerald-300 hover:shadow-lg transition-all duration-300"
-                >
-                  <div className="flex items-start gap-4">
-                    <div className="flex-shrink-0">
-                      <div className="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
-                        <Zap className="w-6 h-6 text-white" />
-                      </div>
-                    </div>
-                    <div className="flex-1">
-                      <h3 className="text-lg font-bold text-gray-900 mb-2">
-                        {point.title}
-                      </h3>
-                      {point.description && (
-                        <p className="text-gray-600 text-sm leading-relaxed">
-                          {point.description}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
+      {/* ── Expected Outcomes (cream) ─────────────────────────────── */}
+      {outcomes && (
+        <section style={{ padding: "96px 64px", maxWidth: 1200, margin: "0 auto" }}>
+          <div style={{ maxWidth: 720, marginBottom: 48 }}>
+            <Eyebrow color="#b4451f">Outcomes</Eyebrow>
+            <h2 style={{ fontFamily: FONTS.display, fontSize: 46, lineHeight: 1.06, margin: 0, letterSpacing: "-0.02em", fontWeight: 400 }}>
+              {outcomes.title}
+            </h2>
+            {outcomes.subtitle && (
+              <p style={{ fontSize: 16, color: "var(--bkb-textMuted)", lineHeight: 1.65, margin: "16px 0 0" }}>{outcomes.subtitle}</p>
+            )}
           </div>
+          <CardGrid points={outcomes.bullet_points} Icon={Zap} accent="#b4451f" />
         </section>
       )}
     </div>
diff --git a/src/app/components/design-system/BkbHero.tsx b/src/app/components/design-system/BkbHero.tsx
index 1487d21..5161f2d 100644
--- a/src/app/components/design-system/BkbHero.tsx
+++ b/src/app/components/design-system/BkbHero.tsx
@@ -12,6 +12,7 @@
  */
 
 import React from "react";
+import Link from "next/link";
 import { FONTS } from "./index";
 
 function FloatingGraph() {
@@ -128,7 +129,9 @@ function FloatingGraph() {
   );
 }
 
-export function BkbHero() {
+export type HeroStat = { value: string | number; label: string; href?: string };
+
+export function BkbHero({ stats }: { stats?: HeroStat[] }) {
   return (
     <section
       className="bkb"
@@ -183,7 +186,7 @@ export function BkbHero() {
             }}
           >
             <span className="bkb-pulse-dot" style={{ background: "oklch(0.74 0.14 170)" }} />
-            BrainKB
+            Open neuroscience infrastructure
           </div>
 
           <h1
@@ -213,7 +216,7 @@ export function BkbHero() {
               fontWeight: 300,
             }}
           >
-            Building open, trustworthy knowledge graph infrastructure to integrate fragmented neuroscience knowledge and data to accelerate reproducible discovery.
+          Trustworthy knowledge-graph infrastructure that integrates fragmented neuroscience literature, data, and evidence — enabling researchers to make reproducible discoveries and helping funders identify, evaluate, and invest in high-impact science.
           </p>
         </div>
 
@@ -228,6 +231,62 @@ export function BkbHero() {
           <FloatingGraph />
         </div>
       </div>
+
+      {/* Stat strip — auto-counted tools / use cases + orchestration tag */}
+      {Array.isArray(stats) && stats.length > 0 && (
+        <div
+          style={{
+            position: "relative",
+            maxWidth: 1320,
+            margin: "64px auto 0",
+            paddingTop: 32,
+            borderTop: "1px solid oklch(0.74 0.14 170 / 0.18)",
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 64,
+          }}
+        >
+          {stats.map((s, i) => {
+            const inner = (
+              <>
+                <div
+                  style={{
+                    fontFamily: FONTS.display,
+                    fontSize: 38,
+                    fontWeight: 400,
+                    lineHeight: 1,
+                    letterSpacing: "-0.02em",
+                    color: "oklch(0.96 0.006 85)",
+                  }}
+                >
+                  {s.value}
+                </div>
+                <div
+                  style={{
+                    fontSize: 13,
+                    color: "oklch(0.72 0.03 195)",
+                    marginTop: 10,
+                    letterSpacing: "0.01em",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 5,
+                  }}
+                >
+                  {s.label}
+                  {s.href && <span aria-hidden style={{ fontSize: 12 }}>↗</span>}
+                </div>
+              </>
+            );
+            return s.href ? (
+              <Link key={i} href={s.href} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
+                {inner}
+              </Link>
+            ) : (
+              <div key={i}>{inner}</div>
+            );
+          })}
+        </div>
+      )}
     </section>
   );
 }
diff --git a/src/app/components/layout/Navbar.tsx b/src/app/components/layout/Navbar.tsx
index 574eb47..93a3b14 100644
--- a/src/app/components/layout/Navbar.tsx
+++ b/src/app/components/layout/Navbar.tsx
@@ -182,7 +182,9 @@ const Navbar: React.FC = () => {
 //                                 { href: "/knowledge-base/genomeannotation", label: "Genome Annotation" },
                                 { href: "/knowledge-base/ner", label: "Neuroscientific NER" },
                                 { href: "/knowledge-base/resources", label: "Structured Resources" },
-                                { href: "/knowledge-base/synth-scholar", label: "Public Reviews" }
+                                { href: "/knowledge-base/synth-scholar", label: "Public Reviews" },
+                                { href: "https://abstractatlas.brainkb.org", target:"_blank", label: "AbstractAtlas" }
+
                             ]}
                             isOpen={isKnowledgeBaseOpen}
                             onToggle={() => setIsKnowledgeBaseOpen(!isKnowledgeBaseOpen)}
diff --git a/src/app/components/synth-scholar/InfoPopover.tsx b/src/app/components/synth-scholar/InfoPopover.tsx
new file mode 100644
index 0000000..fa18fb3
--- /dev/null
+++ b/src/app/components/synth-scholar/InfoPopover.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+/**
+ * InfoPopover — small "(i)" affordance that reveals a short description
+ * (and an optional reference link) for a form field.
+ *
+ * Usage:
+ *
+ *   <label>
+ *     Population
+ *     <InfoPopover
+ *       title="P — Population"
+ *       description="Who or what is being studied: condition, demographic, or sample group."
+ *       link={{ href: "https://www.cochranelibrary.com/about-pico", label: "PICO at Cochrane" }}
+ *     />
+ *   </label>
+ *
+ * Click-triggered (not hover) so it works on touch devices and lets users
+ * copy-paste the description / click the link without it disappearing.
+ */
+
+import React from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/src/app/components/ui/popover";
+import { Icon } from "@/src/app/components/design-system";
+
+export type InfoLink = { href: string; label?: string };
+
+type Props = {
+  title?: string;
+  description: React.ReactNode;
+  link?: InfoLink;
+  /** Visually hide the icon and use the wrapped child as the trigger. */
+  asChild?: boolean;
+  children?: React.ReactNode;
+};
+
+export function InfoPopover({ title, description, link, asChild, children }: Props) {
+  const trigger = asChild ? (
+    children
+  ) : (
+    <button
+      type="button"
+      className="bkb-info-pop"
+      aria-label={title ? `Info: ${title}` : "Field info"}
+      style={{
+        background: "transparent",
+        border: "none",
+        cursor: "help",
+        padding: 0,
+        marginLeft: 6,
+        color: "var(--bkb-textSubtle)",
+        verticalAlign: "middle",
+        display: "inline-flex",
+        alignItems: "center",
+      }}
+    >
+      <Icon name="info" size={13} />
+    </button>
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent
+        className="bkb-card"
+        style={{
+          padding: 12,
+          maxWidth: 320,
+          fontSize: 12,
+          lineHeight: 1.5,
+          color: "var(--bkb-textMuted)",
+          background: "var(--bkb-surface)",
+          border: "1px solid var(--bkb-border)",
+        }}
+        sideOffset={6}
+      >
+        {title && (
+          <div
+            style={{
+              fontSize: 11,
+              fontWeight: 600,
+              letterSpacing: "0.04em",
+              textTransform: "uppercase",
+              color: "var(--bkb-textSubtle)",
+              marginBottom: 6,
+            }}
+          >
+            {title}
+          </div>
+        )}
+        <div>{description}</div>
+        {link && (
+          <a
+            href={link.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 4,
+              marginTop: 8,
+              fontSize: 11,
+              color: "var(--bkb-accent)",
+              textDecoration: "underline",
+            }}
+          >
+            {link.label ?? "Learn more"} ↗
+          </a>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/app/components/synth-scholar/MarkdownContent.tsx b/src/app/components/synth-scholar/MarkdownContent.tsx
new file mode 100644
index 0000000..203d5b8
--- /dev/null
+++ b/src/app/components/synth-scholar/MarkdownContent.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+/**
+ * MarkdownContent — render review synthesis / introduction / conclusion text
+ * as proper HTML (headings, bold, italic, lists, tables, blockquotes, hr).
+ *
+ * The agent emits Markdown for these long-form fields. Rendering them as
+ * plain text (whitespace-pre-wrap) was leaking the source syntax (#, **,
+ * |, >) to the page, especially on the public review URL where users can't
+ * just download the .md export to read it cleanly.
+ *
+ * Uses react-markdown + remark-gfm for GitHub-flavored markdown (tables,
+ * task lists, strikethrough, autolinks). Builds a React tree directly —
+ * no dangerouslySetInnerHTML — so this is XSS-safe by construction.
+ */
+
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+type Props = {
+  children: string;
+  /** Optional className passed to the wrapper. */
+  className?: string;
+  /** Inline styles for the wrapper (e.g. fontSize / lineHeight overrides). */
+  style?: React.CSSProperties;
+};
+
+export function MarkdownContent({ children, className, style }: Props) {
+  return (
+    <div className={className} style={{ ...DEFAULT_STYLE, ...style }}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          // Headings: keep the visual hierarchy distinct without huge fonts —
+          // these often appear inside cards that already have their own h2.
+          h1: ({ ...p }) => <h2 style={{ fontSize: "1.4em", fontWeight: 600, margin: "0.8em 0 0.4em" }} {...p} />,
+          h2: ({ ...p }) => <h3 style={{ fontSize: "1.2em", fontWeight: 600, margin: "0.8em 0 0.3em" }} {...p} />,
+          h3: ({ ...p }) => <h4 style={{ fontSize: "1.05em", fontWeight: 600, margin: "0.7em 0 0.25em" }} {...p} />,
+          h4: ({ ...p }) => <h5 style={{ fontSize: "1em",    fontWeight: 600, margin: "0.6em 0 0.2em"  }} {...p} />,
+          // Paragraphs + lists with breathing room
+          p:  ({ ...p }) => <p  style={{ margin: "0.6em 0" }} {...p} />,
+          ul: ({ ...p }) => <ul style={{ margin: "0.5em 0", paddingLeft: "1.5em" }} {...p} />,
+          ol: ({ ...p }) => <ol style={{ margin: "0.5em 0", paddingLeft: "1.5em" }} {...p} />,
+          li: ({ ...p }) => <li style={{ margin: "0.2em 0" }} {...p} />,
+          // Blockquote
+          blockquote: ({ ...p }) => (
+            <blockquote
+              style={{
+                margin: "0.8em 0",
+                padding: "0.4em 0.9em",
+                borderLeft: "3px solid var(--bkb-accent, #4a4a4a)",
+                background: "var(--bkb-surfaceAlt, #f5f5f0)",
+                color: "var(--bkb-textMuted, #4a4a4a)",
+                borderRadius: "0 4px 4px 0",
+              }}
+              {...p}
+            />
+          ),
+          // Inline + block code
+          code: ({ ...p }) => (
+            <code
+              style={{
+                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                fontSize: "0.9em",
+                background: "var(--bkb-surfaceAlt, #f0f0eb)",
+                padding: "0.1em 0.35em",
+                borderRadius: 3,
+              }}
+              {...p}
+            />
+          ),
+          pre: ({ ...p }) => (
+            <pre
+              style={{
+                margin: "0.8em 0",
+                padding: "0.8em 1em",
+                background: "var(--bkb-surfaceAlt, #f5f5f0)",
+                border: "1px solid var(--bkb-border, #e5e5e0)",
+                borderRadius: 6,
+                fontSize: "0.85em",
+                lineHeight: 1.5,
+                overflowX: "auto",
+              }}
+              {...p}
+            />
+          ),
+          // GFM tables — give them visible borders and a touch of padding
+          // so the cells don't run together.
+          table: ({ ...p }) => (
+            <div style={{ overflowX: "auto", margin: "0.8em 0" }}>
+              <table
+                style={{
+                  borderCollapse: "collapse",
+                  width: "100%",
+                  fontSize: "0.95em",
+                }}
+                {...p}
+              />
+            </div>
+          ),
+          th: ({ ...p }) => (
+            <th
+              style={{
+                textAlign: "left",
+                padding: "8px 10px",
+                borderBottom: "2px solid var(--bkb-border, #e5e5e0)",
+                background: "var(--bkb-surfaceAlt, #f5f5f0)",
+                fontWeight: 600,
+              }}
+              {...p}
+            />
+          ),
+          td: ({ ...p }) => (
+            <td
+              style={{
+                padding: "6px 10px",
+                borderBottom: "1px solid var(--bkb-border, #e5e5e0)",
+                verticalAlign: "top",
+              }}
+              {...p}
+            />
+          ),
+          // Horizontal rule — agent uses --- between sections
+          hr: () => (
+            <hr
+              style={{
+                margin: "1.4em 0",
+                border: "none",
+                borderTop: "1px solid var(--bkb-border, #e5e5e0)",
+              }}
+            />
+          ),
+          // Links open in a new tab; keep the visual subtle
+          a: ({ ...p }) => (
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: "var(--bkb-accent, #1a73e8)", textDecoration: "underline" }}
+              {...p}
+            />
+          ),
+        }}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+const DEFAULT_STYLE: React.CSSProperties = {
+  fontSize: 14,
+  lineHeight: 1.65,
+  color: "var(--bkb-text, #1a1a1a)",
+  wordBreak: "break-word",
+};
diff --git a/src/app/components/synth-scholar/PlanConfirmDialog.tsx b/src/app/components/synth-scholar/PlanConfirmDialog.tsx
index 9a35520..61e0960 100644
--- a/src/app/components/synth-scholar/PlanConfirmDialog.tsx
+++ b/src/app/components/synth-scholar/PlanConfirmDialog.tsx
@@ -75,7 +75,10 @@ export function PlanConfirmDialog({
             background: "rgba(20, 24, 32, 0.55)",
             backdropFilter: "blur(10px)",
             WebkitBackdropFilter: "blur(10px)",
-            zIndex: 50,
+            // High z so the overlay covers the BrainKB navbar — otherwise
+            // the navbar would render on top of the dim and break the
+            // "this is the foreground" feel.
+            zIndex: 999,
           }}
         />
         <Dialog.Content
@@ -84,34 +87,39 @@ export function PlanConfirmDialog({
           aria-describedby={undefined}
           style={{
             position: "fixed",
-            top: "50%",
+            // Anchor below the BrainKB navbar (~80px). Centring the modal
+            // vertically with maxHeight: 90vh used to push the modal's top
+            // behind the navbar, hiding the close button and the header
+            // top padding. 96px clears the navbar with a small gap.
+            top: 96,
             left: "50%",
-            transform: "translate(-50%, -50%)",
-            // Fully opaque, theme-aligned. var(--bkb-surface) is the white
-            // surface token used by every other bkb-card on the site — keeps
-            // the dialog visually consistent with the rest of the UI.
-            // Important: NO alpha or color-mix on this background — the box
-            // must read as a solid sheet over the dimmed page.
-            background: "var(--bkb-surface)",
+            transform: "translateX(-50%)",
+            // Fully opaque white surface — has a fallback in case
+            // var(--bkb-surface) ever goes undefined during a theme refactor.
+            background: "var(--bkb-surface, #ffffff)",
             border: "1px solid var(--bkb-border)",
             borderRadius: 12,
             width: "min(960px, 94vw)",
-            maxHeight: "90vh",
+            // Limit height so the modal always fits between the navbar
+            // (96px from top) and a 32px gap at the viewport bottom.
+            maxHeight: "calc(100vh - 128px)",
             display: "flex",
             flexDirection: "column",
             // Strong shadow lifts the card off the dimmed page.
             boxShadow:
               "0 32px 80px -20px rgba(0, 0, 0, 0.55), 0 12px 30px -8px rgba(0, 0, 0, 0.35)",
-            zIndex: 51,
+            // Aggressively above any sticky navbar / page chrome.
+            zIndex: 1000,
             overflow: "hidden",
           }}
         >
-          {/* Sticky header */}
+          {/* Sticky header — generous top + bottom padding so the title
+              doesn't feel cramped, especially on the wider modal layout. */}
           <div
             style={{
-              padding: "20px 28px 16px",
+              padding: "32px 32px 22px",
               borderBottom: "1px solid var(--bkb-border)",
-              background: "var(--bkb-surface)",
+              background: "var(--bkb-surface, #ffffff)",
             }}
           >
             <div style={{ display: "flex", alignItems: "start", justifyContent: "space-between", gap: 16 }}>
@@ -168,9 +176,9 @@ export function PlanConfirmDialog({
             className="bkb-scroll"
             style={{
               overflowY: "auto",
-              padding: "20px 28px",
+              padding: "24px 32px 32px",
               flex: 1,
-              background: "var(--bkb-surface)",
+              background: "var(--bkb-surface, #ffffff)",
             }}
           >
             {mode === "revise" ? (
@@ -188,9 +196,9 @@ export function PlanConfirmDialog({
           {/* Sticky footer with primary actions */}
           <div
             style={{
-              padding: "14px 28px",
+              padding: "20px 32px",
               borderTop: "1px solid var(--bkb-border)",
-              background: "var(--bkb-surfaceAlt)",
+              background: "var(--bkb-surfaceAlt, #f5f5f0)",
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
diff --git a/src/app/components/synth-scholar/ProvenanceTimelineOwner.tsx b/src/app/components/synth-scholar/ProvenanceTimelineOwner.tsx
new file mode 100644
index 0000000..b227b8a
--- /dev/null
+++ b/src/app/components/synth-scholar/ProvenanceTimelineOwner.tsx
@@ -0,0 +1,551 @@
+"use client";
+
+/**
+ * ProvenanceTimelineOwner — bkb-* token-styled animated provenance timeline
+ * for the owner view (matches the user-side SynthScholar UI).
+ *
+ * Same step model as ProvenanceTimelinePublic but rendered in BrainKB's
+ * design language (bkb-card, bkb-mono, bkb-chip, var(--bkb-*) tokens, FONTS,
+ * Icon component) so it sits naturally inside the user app shell.
+ *
+ * Optionally renders an owner-only Run Configuration card up top — toggle
+ * with the showRunConfig prop.
+ */
+
+import React from "react";
+import { FONTS, Icon } from "@/src/app/components/design-system";
+import type { LogEvent } from "@/src/types/synthScholar";
+
+type ReviewLike = {
+  search_queries?: string[];
+  flow?: {
+    total_identified: number;
+    duplicates_removed: number;
+    after_dedup: number;
+    screened_title_abstract: number;
+    excluded_title_abstract: number;
+    sought_fulltext: number;
+    assessed_eligibility: number;
+    excluded_eligibility: number;
+    included_synthesis: number;
+  } | null;
+  included_articles?: ReadonlyArray<{ rob_overall?: string }>;
+  evidence_spans?: ReadonlyArray<unknown>;
+  data_charting_rubrics?: ReadonlyArray<unknown>;
+  bias_assessment?: string;
+  grade_assessments?: ReadonlyArray<{ outcome: string; overall_certainty: string }>;
+  synthesis_text?: string;
+  completed_at?: string | null;
+  run_request?: {
+    model?: string;
+    compare_mode?: boolean;
+    compare_models?: string[];
+    max_results_per_query?: number;
+    related_depth?: number;
+    biorxiv_days?: number;
+    enable_cache?: boolean;
+    extract_data?: boolean;
+    max_plan_iterations?: number;
+    output_synthesis_style?: string;
+    concurrency?: number;
+    protocol?: { max_hops?: number; rob_tool?: string };
+  } | null;
+};
+
+export function ProvenanceTimelineOwner({
+  review,
+  logEvents,
+  log,
+  showRunConfig = true,
+}: {
+  review: ReviewLike;
+  logEvents: LogEvent[];
+  log: string[];
+  showRunConfig?: boolean;
+}) {
+  const events: LogEvent[] =
+    logEvents.length > 0
+      ? logEvents
+      : log.map((msg, i) => ({ step: i + 1, message: msg, timestamp: "" }));
+  const steps = buildSteps(review, events);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+      {showRunConfig && <RunConfigCard review={review} />}
+
+      <div className="bkb-card" style={{ padding: 18 }}>
+        <h2
+          style={{
+            fontFamily: FONTS.display,
+            fontSize: 18,
+            margin: "0 0 16px",
+            fontWeight: 500,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+          }}
+        >
+          <Icon name="agent" size={14} /> Pipeline timeline
+        </h2>
+        <div style={{ position: "relative" }}>
+          <div
+            className="prov-line"
+            style={{
+              position: "absolute",
+              left: 13,
+              top: 6,
+              bottom: 6,
+              width: 1,
+              background:
+                "linear-gradient(to bottom, var(--bkb-accent), color-mix(in oklch, var(--bkb-accent), transparent 70%))",
+            }}
+          />
+          <ol style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
+            {steps.map((step, idx) => (
+              <Step key={step.id} step={step} index={idx} />
+            ))}
+          </ol>
+        </div>
+      </div>
+
+      <style jsx>{`
+        @keyframes prov-step-in {
+          0% { opacity: 0; transform: translateY(8px); }
+          100% { opacity: 1; transform: translateY(0); }
+        }
+        :global(.prov-step) {
+          animation: prov-step-in 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+        }
+        @keyframes prov-pulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.85; transform: scale(1.06); }
+        }
+        :global(.prov-dot) {
+          animation: prov-pulse 2.4s ease-in-out infinite;
+        }
+        @keyframes prov-line-grow {
+          0% { transform: scaleY(0); transform-origin: top; }
+          100% { transform: scaleY(1); transform-origin: top; }
+        }
+        :global(.prov-line) {
+          animation: prov-line-grow 700ms ease-out 150ms both;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+// ── Run config (owner-only) ──────────────────────────────────────────
+
+function RunConfigCard({ review }: { review: ReviewLike }) {
+  const rr = review.run_request;
+  if (!rr) return null;
+  const rows: Array<[string, React.ReactNode]> = [
+    ["Model", rr.model || "—"],
+    rr.compare_mode && rr.compare_models?.length
+      ? ["Compare models", rr.compare_models.join(", ")]
+      : ["Mode", "Single model"],
+    ["Max results / query", rr.max_results_per_query ?? "—"],
+    ["Related-articles depth", rr.related_depth ?? "—"],
+    ["Citation hops", rr.protocol?.max_hops ?? "—"],
+    ["Concurrency", rr.concurrency ?? "—"],
+    ["bioRxiv lookback (days)", rr.biorxiv_days ?? "—"],
+    ["Max plan iterations", rr.max_plan_iterations ?? "—"],
+    ["RoB tool", rr.protocol?.rob_tool ?? "—"],
+    ["Synthesis style", rr.output_synthesis_style ?? "—"],
+    ["Cache enabled", String(rr.enable_cache ?? false)],
+    ["Extract data", String(rr.extract_data ?? false)],
+  ];
+  return (
+    <div className="bkb-card" style={{ padding: 18 }}>
+      <h2
+        style={{
+          fontFamily: FONTS.display,
+          fontSize: 18,
+          margin: "0 0 12px",
+          fontWeight: 500,
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        <Icon name="settings" size={14} /> Run configuration
+        <span
+          style={{
+            fontSize: 10,
+            fontWeight: 600,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+            color: "var(--bkb-textSubtle)",
+            marginLeft: 6,
+            border: "1px solid var(--bkb-border)",
+            padding: "2px 6px",
+            borderRadius: 4,
+          }}
+        >
+          owner-only
+        </span>
+      </h2>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 10 }}>
+        {rows.map(([label, value]) => (
+          <div
+            key={label as string}
+            style={{
+              padding: 10,
+              background: "var(--bkb-surfaceAlt)",
+              borderRadius: 6,
+              border: "1px solid var(--bkb-border)",
+            }}
+          >
+            <div
+              style={{
+                fontSize: 10,
+                letterSpacing: "0.06em",
+                textTransform: "uppercase",
+                color: "var(--bkb-textSubtle)",
+                fontWeight: 600,
+                marginBottom: 4,
+              }}
+            >
+              {label}
+            </div>
+            <div className="bkb-mono" style={{ fontSize: 12, color: "var(--bkb-text)", wordBreak: "break-word" }}>
+              {value}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div style={{ marginTop: 12, fontSize: 11, color: "var(--bkb-textSubtle)", fontStyle: "italic" }}>
+        Full LLM-call telemetry (per-invocation tokens, prompts, retries) is in the JSON / Markdown
+        export. The OpenRouter API key is intentionally not persisted with this review.
+      </div>
+    </div>
+  );
+}
+
+// ── Step types + builder ───────────────────────────────────────────────
+
+type StepKind = "search" | "screen" | "fulltext" | "extract" | "rob" | "synthesis" | "done";
+type ProvStep = { id: string; kind: StepKind; title: string; subtitle?: string; body: React.ReactNode };
+
+function buildSteps(review: ReviewLike, events: LogEvent[]): ProvStep[] {
+  const out: ProvStep[] = [];
+
+  if (review.search_queries?.length) {
+    out.push({
+      id: "search",
+      kind: "search",
+      title: "Search strategy",
+      subtitle: `${review.search_queries.length} approved ${review.search_queries.length === 1 ? "query" : "queries"}`,
+      body: (
+        <ul style={{ margin: 0, paddingLeft: 18 }}>
+          {review.search_queries.map((q, i) => (
+            <li
+              key={i}
+              className="bkb-mono"
+              style={{ fontSize: 11, color: "var(--bkb-textMuted)", lineHeight: 1.55, wordBreak: "break-word", padding: "2px 0" }}
+            >
+              {q}
+            </li>
+          ))}
+        </ul>
+      ),
+    });
+  }
+
+  if (review.flow) {
+    const f = review.flow;
+    out.push({
+      id: "flow",
+      kind: "screen",
+      title: "PRISMA identification & screening",
+      subtitle: `${f.total_identified} → ${f.included_synthesis} included`,
+      body: (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(110px, 1fr))", gap: 6 }}>
+          {[
+            ["Identified", f.total_identified],
+            ["After dedup", f.after_dedup],
+            ["T/A screened", f.screened_title_abstract],
+            ["Excluded T/A", f.excluded_title_abstract],
+            ["Full-text", f.sought_fulltext],
+            ["Eligibility", f.assessed_eligibility],
+            ["Excluded elig.", f.excluded_eligibility],
+            ["Included", f.included_synthesis],
+          ].map(([label, value]) => (
+            <div
+              key={String(label)}
+              style={{
+                padding: 6,
+                background: "var(--bkb-surfaceAlt)",
+                border: "1px solid var(--bkb-border)",
+                borderRadius: 4,
+              }}
+            >
+              <div style={{ fontSize: 9, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--bkb-textSubtle)", fontWeight: 600 }}>
+                {label}
+              </div>
+              <div style={{ fontSize: 18, fontWeight: 300, color: "var(--bkb-text)", fontVariantNumeric: "tabular-nums" }}>
+                {value as number}
+              </div>
+            </div>
+          ))}
+        </div>
+      ),
+    });
+  }
+
+  if (review.included_articles?.length) {
+    out.push({
+      id: "fulltext",
+      kind: "fulltext",
+      title: "Full-text retrieval & inclusion",
+      subtitle: `${review.included_articles.length} studies included`,
+      body: (
+        <div style={{ fontSize: 12, color: "var(--bkb-textMuted)" }}>
+          Full text was resolved for <strong>{review.included_articles.length}</strong> included
+          studies via the OA chain (Europe PMC OA-XML → Unpaywall → OpenAlex → Semantic Scholar →
+          publisher direct).
+        </div>
+      ),
+    });
+  }
+
+  const ev = review.evidence_spans?.length ?? 0;
+  const ch = review.data_charting_rubrics?.length ?? 0;
+  if (ev > 0 || ch > 0) {
+    out.push({
+      id: "extract",
+      kind: "extract",
+      title: "Evidence extraction & charting",
+      subtitle: `${ev} grounded span${ev === 1 ? "" : "s"} · ${ch} charting record${ch === 1 ? "" : "s"}`,
+      body: (
+        <div style={{ fontSize: 12, color: "var(--bkb-textMuted)" }}>
+          Per-article spans below the relevance threshold are filtered before reaching the synthesis.
+        </div>
+      ),
+    });
+  }
+
+  const robCounts = robBreakdown(review.included_articles ?? []);
+  if (review.bias_assessment || robCounts.total > 0) {
+    out.push({
+      id: "rob",
+      kind: "rob",
+      title: "Risk-of-bias assessment",
+      subtitle: robCounts.total > 0
+        ? Object.entries(robCounts.byRating).map(([r, n]) => `${n} ${r}`).join(" · ")
+        : undefined,
+      body: robCounts.total > 0 ? (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
+          {Object.entries(robCounts.byRating).map(([r, n]) => (
+            <span key={r} className="bkb-chip" style={{ fontSize: 10, ...robChipStyle(r) }}>
+              {r}: {n}
+            </span>
+          ))}
+        </div>
+      ) : (
+        <div style={{ fontSize: 12, color: "var(--bkb-textMuted)", fontStyle: "italic" }}>
+          See main review tab for the narrative RoB assessment.
+        </div>
+      ),
+    });
+  }
+
+  if (review.grade_assessments?.length) {
+    out.push({
+      id: "grade",
+      kind: "rob",
+      title: "GRADE — certainty of evidence",
+      subtitle: `${review.grade_assessments.length} outcome${review.grade_assessments.length === 1 ? "" : "s"}`,
+      body: (
+        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+          {review.grade_assessments.map((g, i) => (
+            <li
+              key={i}
+              style={{
+                display: "flex",
+                alignItems: "baseline",
+                justifyContent: "space-between",
+                gap: 8,
+                fontSize: 12,
+                padding: "4px 0",
+              }}
+            >
+              <span style={{ color: "var(--bkb-text)" }}>{g.outcome}</span>
+              <span className="bkb-chip" style={{ fontSize: 10, ...certaintyStyle(g.overall_certainty) }}>
+                {g.overall_certainty}
+              </span>
+            </li>
+          ))}
+        </ul>
+      ),
+    });
+  }
+
+  if (review.synthesis_text) {
+    const wordCount = review.synthesis_text.trim().split(/\s+/).length;
+    out.push({
+      id: "synthesis",
+      kind: "synthesis",
+      title: "Narrative synthesis",
+      subtitle: `${wordCount.toLocaleString()} words`,
+      body: (
+        <div style={{ fontSize: 12, color: "var(--bkb-textMuted)" }}>
+          The full synthesis text is on the Review tab.
+        </div>
+      ),
+    });
+  }
+
+  if (events.length > 0) {
+    out.push({
+      id: "log",
+      kind: "done",
+      title: "Pipeline event trail",
+      subtitle: `${events.length} event${events.length === 1 ? "" : "s"}`,
+      body: (
+        <div
+          className="bkb-scroll bkb-mono"
+          style={{
+            maxHeight: 220,
+            overflowY: "auto",
+            padding: 8,
+            background: "var(--bkb-surfaceAlt)",
+            border: "1px solid var(--bkb-border)",
+            borderRadius: 4,
+            fontSize: 10.5,
+            color: "var(--bkb-textMuted)",
+            lineHeight: 1.55,
+          }}
+        >
+          {events.map((e, i) => (
+            <div key={i} style={{ padding: "1px 0", whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
+              <span style={{ color: "var(--bkb-textSubtle)", marginRight: 8, fontVariantNumeric: "tabular-nums" }}>
+                {String(e.step ?? i + 1).padStart(3, "0")}
+              </span>
+              {e.message}
+            </div>
+          ))}
+        </div>
+      ),
+    });
+  }
+
+  out.push({
+    id: "done",
+    kind: "done",
+    title: "Review completed",
+    subtitle: review.completed_at ? new Date(review.completed_at).toLocaleString() : undefined,
+    body: (
+      <div style={{ fontSize: 12, color: "var(--bkb-textMuted)" }}>
+        Output exported as Markdown / BibTeX / JSON / Turtle from the Review tab.
+      </div>
+    ),
+  });
+
+  return out;
+}
+
+function Step({ step, index }: { step: ProvStep; index: number }) {
+  return (
+    <li className="prov-step" style={{ position: "relative", paddingLeft: 36, animationDelay: `${index * 80}ms` }}>
+      <div
+        className="prov-dot"
+        style={{
+          position: "absolute",
+          left: 9,
+          top: 14,
+          width: 9,
+          height: 9,
+          borderRadius: "50%",
+          background: kindColor(step.kind),
+          boxShadow: "0 0 0 4px var(--bkb-surface)",
+        }}
+      />
+      <div
+        className="bkb-card"
+        style={{
+          padding: 12,
+          background: "var(--bkb-surface)",
+          border: "1px solid var(--bkb-border)",
+          borderRadius: 8,
+          transition: "border-color 150ms ease",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
+          <div
+            style={{
+              width: 24,
+              height: 24,
+              borderRadius: 6,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: kindColor(step.kind),
+              color: "#fff",
+              flexShrink: 0,
+            }}
+          >
+            <Icon name={kindIcon(step.kind)} size={12} />
+          </div>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ fontSize: 13, fontWeight: 600, color: "var(--bkb-text)" }}>{step.title}</div>
+            {step.subtitle && (
+              <div style={{ fontSize: 11, color: "var(--bkb-textSubtle)", marginTop: 1 }}>
+                {step.subtitle}
+              </div>
+            )}
+          </div>
+        </div>
+        <div style={{ marginLeft: 32 }}>{step.body}</div>
+      </div>
+    </li>
+  );
+}
+
+function kindColor(kind: StepKind): string {
+  switch (kind) {
+    case "search":    return "var(--bkb-accent, #2e7d6e)";
+    case "screen":    return "var(--bkb-primary, #1f6feb)";
+    case "fulltext":  return "var(--bkb-publication, #7e57c2)";
+    case "extract":   return "var(--bkb-agent, #2e7d6e)";
+    case "rob":       return "var(--bkb-publication, #b66a8d)";
+    case "synthesis": return "var(--bkb-accent, #4caf50)";
+    case "done":      return "var(--bkb-textMuted, #4a4a4a)";
+  }
+}
+function kindIcon(kind: StepKind): string {
+  switch (kind) {
+    case "search":    return "search";
+    case "screen":    return "evidence";
+    case "fulltext":  return "pub";
+    case "extract":   return "evidence";
+    case "rob":       return "agent";
+    case "synthesis": return "graph";
+    case "done":      return "check";
+  }
+}
+function robBreakdown(articles: ReadonlyArray<{ rob_overall?: string }>) {
+  const byRating: Record<string, number> = {};
+  for (const a of articles) {
+    const r = (a.rob_overall || "Unclear").trim() || "Unclear";
+    byRating[r] = (byRating[r] ?? 0) + 1;
+  }
+  return { total: articles.length, byRating };
+}
+function robChipStyle(r: string): React.CSSProperties {
+  const v = r.toLowerCase();
+  if (v.includes("low"))   return { borderColor: "var(--bkb-agent)", color: "var(--bkb-agent)" };
+  if (v.includes("high"))  return { borderColor: "var(--bkb-danger)", color: "var(--bkb-danger)" };
+  if (v.includes("some") || v.includes("moderate"))
+    return { borderColor: "var(--bkb-publication)", color: "var(--bkb-publication)" };
+  return {};
+}
+function certaintyStyle(c: string): React.CSSProperties {
+  const v = (c || "").toLowerCase();
+  if (v.includes("very low")) return { borderColor: "var(--bkb-danger)", color: "var(--bkb-danger)" };
+  if (v.includes("low"))      return { borderColor: "var(--bkb-publication)", color: "var(--bkb-publication)" };
+  if (v.includes("high"))     return { borderColor: "var(--bkb-agent)", color: "var(--bkb-agent)" };
+  if (v.includes("moderate")) return { borderColor: "var(--bkb-primary)", color: "var(--bkb-primary)" };
+  return {};
+}
diff --git a/src/app/components/synth-scholar/ProvenanceTimelinePublic.tsx b/src/app/components/synth-scholar/ProvenanceTimelinePublic.tsx
new file mode 100644
index 0000000..6a7a6f5
--- /dev/null
+++ b/src/app/components/synth-scholar/ProvenanceTimelinePublic.tsx
@@ -0,0 +1,374 @@
+"use client";
+
+/**
+ * ProvenanceTimelinePublic — Tailwind-styled animated provenance timeline
+ * for the public review page.
+ *
+ * Renders the pipeline as a vertical timeline: search → screening → full
+ * text → extraction → RoB → GRADE → synthesis → event log → done.
+ * Animations are pure CSS keyframes scoped via styled-jsx so the component
+ * is self-contained and can be embedded as a page tab.
+ */
+
+import React from "react";
+import {
+  Search,
+  Filter,
+  FileText,
+  ClipboardCheck,
+  ShieldCheck,
+  Sparkles,
+  CheckCircle2,
+} from "lucide-react";
+import type { LogEvent } from "@/src/types/synthScholar";
+
+// Loose review type — we only consume specific fields. Avoids tight coupling
+// to the full ReviewDetail type so future schema changes don't ripple.
+type ReviewLike = {
+  search_queries?: string[];
+  flow?: {
+    total_identified: number;
+    duplicates_removed: number;
+    after_dedup: number;
+    screened_title_abstract: number;
+    excluded_title_abstract: number;
+    sought_fulltext: number;
+    assessed_eligibility: number;
+    excluded_eligibility: number;
+    included_synthesis: number;
+  } | null;
+  included_articles?: ReadonlyArray<{ rob_overall?: string }>;
+  evidence_spans?: ReadonlyArray<unknown>;
+  data_charting_rubrics?: ReadonlyArray<unknown>;
+  bias_assessment?: string;
+  grade_assessments?: ReadonlyArray<{ outcome: string; overall_certainty: string }>;
+  synthesis_text?: string;
+  completed_at?: string | null;
+};
+
+export function ProvenanceTimelinePublic({
+  review,
+  logEvents,
+  log,
+}: {
+  review: ReviewLike;
+  logEvents: LogEvent[];
+  log: string[];
+}) {
+  const events: LogEvent[] =
+    logEvents.length > 0
+      ? logEvents
+      : log.map((msg, i) => ({ step: i + 1, message: msg, timestamp: "" }));
+  const steps = buildSteps(review, events);
+
+  return (
+    <div className="relative">
+      <div
+        className="prov-line absolute left-[27px] top-6 bottom-6 w-px bg-gradient-to-b from-emerald-300 via-sky-300 to-indigo-300"
+        aria-hidden="true"
+      />
+      <ol className="relative space-y-4">
+        {steps.map((step, idx) => (
+          <Step key={step.id} step={step} index={idx} />
+        ))}
+      </ol>
+      <p className="text-xs text-gray-500 mt-8 pl-14 italic">
+        AI-assisted components were verified before publication. The full
+        machine-readable provenance trail (per-LLM-call telemetry) is in the
+        JSON / Markdown export.
+      </p>
+      <style jsx>{`
+        @keyframes prov-step-in {
+          0% { opacity: 0; transform: translateY(8px); }
+          100% { opacity: 1; transform: translateY(0); }
+        }
+        :global(.prov-step) {
+          animation: prov-step-in 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+        }
+        @keyframes prov-pulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.85; transform: scale(1.08); }
+        }
+        :global(.prov-dot) {
+          animation: prov-pulse 2.4s ease-in-out infinite;
+        }
+        @keyframes prov-line-grow {
+          0% { transform: scaleY(0); transform-origin: top; }
+          100% { transform: scaleY(1); transform-origin: top; }
+        }
+        :global(.prov-line) {
+          animation: prov-line-grow 800ms ease-out 200ms both;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+// ── Step types + builder ───────────────────────────────────────────────
+
+type StepKind = "search" | "screen" | "fulltext" | "extract" | "rob" | "synthesis" | "done";
+type ProvStep = { id: string; kind: StepKind; title: string; subtitle?: string; body: React.ReactNode };
+
+function buildSteps(review: ReviewLike, events: LogEvent[]): ProvStep[] {
+  const out: ProvStep[] = [];
+
+  if (review.search_queries && review.search_queries.length > 0) {
+    out.push({
+      id: "search",
+      kind: "search",
+      title: "Search strategy",
+      subtitle: `${review.search_queries.length} approved ${review.search_queries.length === 1 ? "query" : "queries"}`,
+      body: (
+        <ul className="list-disc pl-5 space-y-1.5">
+          {review.search_queries.map((q, i) => (
+            <li key={i} className="font-mono text-[11px] text-gray-700 break-words leading-relaxed">
+              {q}
+            </li>
+          ))}
+        </ul>
+      ),
+    });
+  }
+
+  if (review.flow) {
+    const f = review.flow;
+    out.push({
+      id: "flow",
+      kind: "screen",
+      title: "PRISMA identification & screening",
+      subtitle: `${f.total_identified} → ${f.included_synthesis} included`,
+      body: (
+        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+          {[
+            ["Identified", f.total_identified],
+            ["After dedup", f.after_dedup],
+            ["T/A screened", f.screened_title_abstract],
+            ["Excluded T/A", f.excluded_title_abstract],
+            ["Full-text sought", f.sought_fulltext],
+            ["Eligibility assessed", f.assessed_eligibility],
+            ["Excluded eligibility", f.excluded_eligibility],
+            ["Included", f.included_synthesis],
+          ].map(([label, value]) => (
+            <div key={String(label)} className="rounded border border-gray-200 bg-white p-2">
+              <div className="text-[9px] uppercase tracking-wider text-gray-500 font-semibold">{label}</div>
+              <div className="text-lg font-light text-gray-900 tabular-nums">{value as number}</div>
+            </div>
+          ))}
+        </div>
+      ),
+    });
+  }
+
+  if (review.included_articles && review.included_articles.length > 0) {
+    out.push({
+      id: "fulltext",
+      kind: "fulltext",
+      title: "Full-text retrieval & inclusion",
+      subtitle: `${review.included_articles.length} studies included in synthesis`,
+      body: (
+        <p className="text-sm text-gray-700">
+          Full-text was resolved and verified for{" "}
+          <strong>{review.included_articles.length}</strong> included studies via the OA chain
+          (Europe PMC OA-XML → Unpaywall → OpenAlex → Semantic Scholar → publisher direct).
+        </p>
+      ),
+    });
+  }
+
+  const ev = review.evidence_spans?.length ?? 0;
+  const ch = review.data_charting_rubrics?.length ?? 0;
+  if (ev > 0 || ch > 0) {
+    out.push({
+      id: "extract",
+      kind: "extract",
+      title: "Evidence extraction & charting",
+      subtitle: `${ev} grounded span${ev === 1 ? "" : "s"} · ${ch} charting record${ch === 1 ? "" : "s"}`,
+      body: (
+        <p className="text-sm text-gray-700">
+          The pipeline extracted evidence spans grounded in the included articles and produced one
+          charting record per study. Spans below the relevance threshold are filtered before they
+          reach the synthesis.
+        </p>
+      ),
+    });
+  }
+
+  const robCounts = robBreakdown(review.included_articles ?? []);
+  if (review.bias_assessment || robCounts.total > 0) {
+    out.push({
+      id: "rob",
+      kind: "rob",
+      title: "Risk-of-bias assessment",
+      subtitle: robCounts.total > 0 ? Object.entries(robCounts.byRating).map(([r, n]) => `${n} ${r}`).join(" · ") : undefined,
+      body: robCounts.total > 0 ? (
+        <div className="flex flex-wrap gap-2">
+          {Object.entries(robCounts.byRating).map(([r, n]) => (
+            <span
+              key={r}
+              className={`text-[11px] uppercase tracking-wider font-semibold px-2.5 py-1 rounded border ${robClass(r)}`}
+            >
+              {r}: {n}
+            </span>
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm text-gray-700 italic">
+          Detailed risk-of-bias narrative on the Review tab.
+        </p>
+      ),
+    });
+  }
+
+  if (review.grade_assessments && review.grade_assessments.length > 0) {
+    out.push({
+      id: "grade",
+      kind: "rob",
+      title: "GRADE — certainty of evidence",
+      subtitle: `${review.grade_assessments.length} outcome${review.grade_assessments.length === 1 ? "" : "s"}`,
+      body: (
+        <ul className="space-y-1.5">
+          {review.grade_assessments.map((g, i) => (
+            <li key={i} className="flex items-baseline justify-between gap-3 text-sm">
+              <span className="text-gray-800">{g.outcome}</span>
+              <span className={`text-[10px] uppercase tracking-wider font-semibold px-2 py-0.5 rounded border ${certaintyClass(g.overall_certainty)}`}>
+                {g.overall_certainty}
+              </span>
+            </li>
+          ))}
+        </ul>
+      ),
+    });
+  }
+
+  if (review.synthesis_text) {
+    const wordCount = review.synthesis_text.trim().split(/\s+/).length;
+    out.push({
+      id: "synthesis",
+      kind: "synthesis",
+      title: "Narrative synthesis",
+      subtitle: `${wordCount.toLocaleString()} words`,
+      body: (
+        <p className="text-sm text-gray-700">
+          The narrative synthesis aggregates evidence across all included studies. The full text
+          is on the Review tab.
+        </p>
+      ),
+    });
+  }
+
+  if (events.length > 0) {
+    out.push({
+      id: "log",
+      kind: "done",
+      title: "Pipeline event trail",
+      subtitle: `${events.length} event${events.length === 1 ? "" : "s"} recorded`,
+      body: (
+        <div className="max-h-64 overflow-y-auto rounded border border-gray-200 bg-gray-50 p-2 font-mono text-[10.5px] leading-relaxed text-gray-700">
+          {events.map((e, i) => (
+            <div key={i} className="whitespace-pre-wrap break-words py-0.5">
+              <span className="text-gray-400 mr-2 tabular-nums">
+                {String(e.step ?? i + 1).padStart(3, "0")}
+              </span>
+              {e.message}
+            </div>
+          ))}
+        </div>
+      ),
+    });
+  }
+
+  out.push({
+    id: "done",
+    kind: "done",
+    title: "Review completed",
+    subtitle: review.completed_at ? new Date(review.completed_at).toLocaleString() : undefined,
+    body: (
+      <p className="text-sm text-gray-700">
+        Output exported as Markdown / BibTeX / JSON / Turtle from the Review tab.
+      </p>
+    ),
+  });
+
+  return out;
+}
+
+function Step({ step, index }: { step: ProvStep; index: number }) {
+  const Icon = stepIcon(step.kind);
+  return (
+    <li className="prov-step relative pl-14" style={{ animationDelay: `${index * 90}ms` }}>
+      <div className="absolute left-3 top-3 w-7 h-7 flex items-center justify-center">
+        <div className={`prov-dot w-3 h-3 rounded-full ${stepDotClass(step.kind)} ring-4 ring-white`} />
+      </div>
+      <div className="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow p-5">
+        <div className="flex items-start gap-3 mb-2">
+          <div className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center ${stepIconBg(step.kind)}`}>
+            <Icon className="w-4 h-4 text-white" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <h2 className="text-base font-semibold text-gray-900">{step.title}</h2>
+            {step.subtitle && <p className="text-xs text-gray-500 mt-0.5">{step.subtitle}</p>}
+          </div>
+        </div>
+        <div className="ml-11">{step.body}</div>
+      </div>
+    </li>
+  );
+}
+
+function stepIcon(kind: StepKind) {
+  switch (kind) {
+    case "search":     return Search;
+    case "screen":     return Filter;
+    case "fulltext":   return FileText;
+    case "extract":    return ClipboardCheck;
+    case "rob":        return ShieldCheck;
+    case "synthesis":  return Sparkles;
+    case "done":       return CheckCircle2;
+  }
+}
+function stepIconBg(kind: StepKind) {
+  switch (kind) {
+    case "search":    return "bg-gradient-to-br from-emerald-400 to-emerald-600";
+    case "screen":    return "bg-gradient-to-br from-sky-400 to-sky-600";
+    case "fulltext":  return "bg-gradient-to-br from-blue-400 to-blue-600";
+    case "extract":   return "bg-gradient-to-br from-indigo-400 to-indigo-600";
+    case "rob":       return "bg-gradient-to-br from-violet-400 to-violet-600";
+    case "synthesis": return "bg-gradient-to-br from-fuchsia-400 to-fuchsia-600";
+    case "done":      return "bg-gradient-to-br from-emerald-500 to-teal-600";
+  }
+}
+function stepDotClass(kind: StepKind) {
+  switch (kind) {
+    case "search":    return "bg-emerald-500";
+    case "screen":    return "bg-sky-500";
+    case "fulltext":  return "bg-blue-500";
+    case "extract":   return "bg-indigo-500";
+    case "rob":       return "bg-violet-500";
+    case "synthesis": return "bg-fuchsia-500";
+    case "done":      return "bg-teal-500";
+  }
+}
+function robBreakdown(articles: ReadonlyArray<{ rob_overall?: string }>) {
+  const byRating: Record<string, number> = {};
+  for (const a of articles) {
+    const r = (a.rob_overall || "Unclear").trim() || "Unclear";
+    byRating[r] = (byRating[r] ?? 0) + 1;
+  }
+  return { total: articles.length, byRating };
+}
+function robClass(rating: string) {
+  const r = rating.toLowerCase();
+  if (r.includes("low"))   return "bg-emerald-50 text-emerald-700 border-emerald-200";
+  if (r.includes("high"))  return "bg-red-50 text-red-700 border-red-200";
+  if (r.includes("some") || r.includes("moderate"))
+    return "bg-amber-50 text-amber-700 border-amber-200";
+  return "bg-gray-50 text-gray-700 border-gray-200";
+}
+function certaintyClass(c: string) {
+  const v = c.toLowerCase();
+  if (v.includes("very low")) return "bg-red-50 text-red-700 border-red-200";
+  if (v.includes("low"))      return "bg-amber-50 text-amber-700 border-amber-200";
+  if (v.includes("moderate")) return "bg-sky-50 text-sky-700 border-sky-200";
+  if (v.includes("high"))     return "bg-emerald-50 text-emerald-700 border-emerald-200";
+  return "bg-gray-50 text-gray-700 border-gray-200";
+}
diff --git a/src/app/components/synth-scholar/ReviewActionsDropdown.tsx b/src/app/components/synth-scholar/ReviewActionsDropdown.tsx
new file mode 100644
index 0000000..bb7e9e2
--- /dev/null
+++ b/src/app/components/synth-scholar/ReviewActionsDropdown.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+/**
+ * ReviewActionsDropdown — split-button retry control for failed/cancelled reviews.
+ *
+ * Mirrors aep-knowledge-synthesis/ui/src/pages/PRISMAReview.tsx (~lines 1836–1898),
+ * adapted to brainkb-ui's bkb-* design tokens and the local Icon component.
+ *
+ * The primary button performs the most useful default action:
+ *   - "Resume from step N" when a checkpoint exists (last_completed_step > 0)
+ *   - "Retry" otherwise
+ *
+ * The dropdown caret reveals all four options:
+ *   1. Resume from step N         (resume: true) — only shown when step > 0
+ *   2. Full restart               (resume: false)
+ *   3. Retry (use cache)          (enable_cache: true)
+ *   4. Retry (fresh search)       (enable_cache: false)
+ */
+
+import React from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/src/app/components/ui/dropdown-menu";
+import { Icon } from "@/src/app/components/design-system";
+
+type RetryBody = { enable_cache?: boolean; resume?: boolean };
+
+type Props = {
+  /** Step the pipeline last checkpointed at; 0 / undefined → no checkpoint. */
+  lastCompletedStep?: number;
+  /** True while a retry mutation is in flight (disables the buttons). */
+  isPending: boolean;
+  /** Caller wires this to `useRetryReview().mutate` for a specific reviewId. */
+  onRetry: (body?: RetryBody) => void;
+};
+
+export function ReviewActionsDropdown({
+  lastCompletedStep,
+  isPending,
+  onRetry,
+}: Props) {
+  const step = lastCompletedStep ?? 0;
+  const canResume = step > 0;
+
+  // Default click on the primary button = the most useful action: resume if
+  // we have a checkpoint, otherwise plain retry.
+  const primaryAction = () => {
+    onRetry(canResume ? { resume: true } : undefined);
+  };
+
+  return (
+    <div style={{ display: "inline-flex", alignItems: "stretch" }}>
+      {/* Primary button — left half of the split control */}
+      <button
+        className="bkb-btn bkb-btn-ghost"
+        onClick={primaryAction}
+        disabled={isPending}
+        style={{
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          borderRight: "none",
+        }}
+        aria-label={canResume ? `Resume from step ${step}` : "Retry"}
+      >
+        <Icon name={canResume ? "play" : "history"} size={11} />
+        {canResume ? `Resume from step ${step}` : "Retry"}
+      </button>
+
+      {/* Caret — right half opens the menu */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            className="bkb-btn bkb-btn-ghost"
+            disabled={isPending}
+            style={{
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+              padding: "0 8px",
+            }}
+            aria-label="More retry options"
+          >
+            <Icon name="down" size={11} />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {canResume && (
+            <DropdownMenuItem onClick={() => onRetry({ resume: true })}>
+              <Icon name="play" size={12} />
+              <span style={{ marginLeft: 8 }}>Resume from step {step}</span>
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem onClick={() => onRetry({ resume: false })}>
+            <Icon name="history" size={12} />
+            <span style={{ marginLeft: 8 }}>Full restart</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => onRetry({ enable_cache: true })}>
+            <span style={{ marginLeft: 20 }}>Retry (use cache)</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => onRetry({ enable_cache: false })}>
+            <span style={{ marginLeft: 20 }}>Retry (fresh search)</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/src/app/components/synth-scholar/ReviewFormGuide.tsx b/src/app/components/synth-scholar/ReviewFormGuide.tsx
new file mode 100644
index 0000000..dd46fdc
--- /dev/null
+++ b/src/app/components/synth-scholar/ReviewFormGuide.tsx
@@ -0,0 +1,317 @@
+"use client";
+
+/**
+ * ReviewFormGuide — a Dialog that shows ALL field descriptions in one place.
+ *
+ * Used on the /user/synth-scholar?mode=new page as an alternative to clicking
+ * each (i) icon individually. Lets a new user read through every option as a
+ * single onboarding document, or come back later to look up a specific field.
+ *
+ * Renders FIELD_GUIDES grouped by the 6 protocol sections so the layout
+ * mirrors the form itself.
+ *
+ * Implementation note: uses Radix primitives directly (mirroring
+ * PlanConfirmDialog) rather than the shared ui/dialog.tsx wrapper. The
+ * shared wrapper styles the content with the Tailwind `bg-background`
+ * token, which isn't defined in BrainKB's theme — that's why an early
+ * version of this component rendered transparent over the page.
+ */
+
+import React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { FONTS, Icon } from "@/src/app/components/design-system";
+import { FIELD_GUIDES, type FieldGuide } from "./fieldGuides";
+
+// Section ordering and the FIELD_GUIDES keys that belong to each. Keep in
+// sync with the form sections in user/synth-scholar/page.tsx so the guide
+// reads top-to-bottom in the same order the user fills the form.
+const SECTIONS: ReadonlyArray<{ title: string; keys: ReadonlyArray<keyof typeof FIELD_GUIDES> }> = [
+  {
+    title: "Protocol — basics",
+    keys: ["title", "objective", "population", "intervention", "comparison", "outcome", "inclusion", "exclusion"],
+  },
+  {
+    title: "Search strategy",
+    keys: ["databases", "date_range", "hops"],
+  },
+  {
+    title: "Registration & disclosures",
+    keys: ["registration", "protocol_url", "funding", "competing_interests"],
+  },
+  {
+    title: "Risk-of-bias & charting",
+    keys: ["rob_tool", "charting_questions", "appraisal_domains"],
+  },
+  {
+    title: "Per-group analysis",
+    keys: ["grouping_dimension", "default_group_questions"],
+  },
+  {
+    title: "Run configuration",
+    keys: [
+      "mode", "model", "consensus_model",
+      "max_results", "related_depth", "biorxiv_days",
+      "max_articles", "concurrency", "max_plan_iterations",
+      "synthesis_style", "data_items",
+      "enable_cache", "extract_data", "pause_for_review",
+    ],
+  },
+];
+
+function GuideEntry({ guide }: { guide: FieldGuide }) {
+  return (
+    <div
+      style={{
+        padding: "18px 0",
+        borderBottom: "1px solid var(--bkb-border)",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 14,
+          fontWeight: 600,
+          color: "var(--bkb-text)",
+          marginBottom: 8,
+        }}
+      >
+        {guide.title}
+      </div>
+      <div
+        style={{
+          fontSize: 13,
+          lineHeight: 1.65,
+          color: "var(--bkb-textMuted)",
+        }}
+      >
+        {guide.description}
+      </div>
+      {guide.link && (
+        <a
+          href={guide.link.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4,
+            marginTop: 10,
+            fontSize: 12,
+            color: "var(--bkb-accent)",
+            textDecoration: "underline",
+          }}
+        >
+          {guide.link.label ?? "Reference"} ↗
+        </a>
+      )}
+    </div>
+  );
+}
+
+export function ReviewFormGuide({
+  trigger,
+}: {
+  /** Optional custom trigger; defaults to a small "Open full guide" button. */
+  trigger?: React.ReactNode;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Trigger asChild>
+        {trigger ?? (
+          <button
+            type="button"
+            className="bkb-btn bkb-btn-ghost"
+            style={{
+              fontSize: 12,
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+            }}
+          >
+            <Icon name="evidence" size={12} /> Open full guide
+          </button>
+        )}
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          style={{
+            position: "fixed",
+            inset: 0,
+            // Same recipe as PlanConfirmDialog: moderate dim + heavy blur so
+            // the page is clearly pushed back. The dialog box below is fully
+            // opaque so it reads as a solid sheet over the dimmed page.
+            background: "rgba(20, 24, 32, 0.55)",
+            backdropFilter: "blur(10px)",
+            WebkitBackdropFilter: "blur(10px)",
+            // High z-index so the overlay covers the navbar too — otherwise
+            // the navbar (sticky, often z-index 30-50) would render on top
+            // of the dim and break the modal's "this is the foreground" feel.
+            zIndex: 999,
+          }}
+        />
+        <Dialog.Content
+          aria-describedby="review-form-guide-description"
+          style={{
+            position: "fixed",
+            // Anchor below the navbar instead of vertically centring. The
+            // BrainKB navbar is ~80px tall; centring with maxHeight: 90vh
+            // pushed the modal's top behind the navbar, hiding the close
+            // button and the header padding. 96px clears the navbar with
+            // a small breathing gap.
+            top: 96,
+            left: "50%",
+            transform: "translateX(-50%)",
+            // Fully opaque white surface — no alpha, no color-mix, no
+            // Tailwind variable that might be undefined in this theme.
+            background: "var(--bkb-surface, #ffffff)",
+            border: "1px solid var(--bkb-border)",
+            borderRadius: 12,
+            // Wider so descriptions don't break into 3+ lines per sentence.
+            // Caps at 96vw on small screens.
+            width: "min(1200px, 96vw)",
+            // Height limited so the modal always fits between the navbar
+            // (96px from top) and a 32px gap at the bottom of the viewport.
+            maxHeight: "calc(100vh - 128px)",
+            display: "flex",
+            flexDirection: "column",
+            boxShadow:
+              "0 32px 80px -20px rgba(0, 0, 0, 0.55), 0 12px 30px -8px rgba(0, 0, 0, 0.35)",
+            // Aggressively above any navbar / sticky header z-index in the
+            // app shell. The Radix overlay sits at 50 below this.
+            zIndex: 1000,
+            overflow: "hidden",
+          }}
+        >
+          {/* Sticky header — generous top padding so the title doesn't feel
+              cramped against the modal's top edge. */}
+          <div
+            style={{
+              padding: "40px 32px 20px",
+              borderBottom: "1px solid var(--bkb-border)",
+              background: "var(--bkb-surface, #ffffff)",
+              display: "flex",
+              alignItems: "start",
+              justifyContent: "space-between",
+              gap: 16,
+              position: "relative",
+            }}
+          >
+            <div style={{ minWidth: 0, flex: 1 }}>
+              <div
+                style={{
+                  fontSize: 11,
+                  color: "var(--bkb-textSubtle)",
+                  letterSpacing: "0.12em",
+                  textTransform: "uppercase",
+                  marginBottom: 6,
+                  fontWeight: 600,
+                }}
+              >
+                Field reference
+              </div>
+              <Dialog.Title
+                style={{
+                  fontFamily: FONTS.display,
+                  fontSize: 24,
+                  fontWeight: 400,
+                  letterSpacing: "-0.01em",
+                  margin: 0,
+                }}
+              >
+                Review form — full field guide
+              </Dialog.Title>
+              <Dialog.Description
+                id="review-form-guide-description"
+                style={{
+                  marginTop: 8,
+                  fontSize: 13,
+                  color: "var(--bkb-textMuted)",
+                  lineHeight: 1.55,
+                  maxWidth: 720,
+                }}
+              >
+                Every option on the protocol form, grouped by section, with
+                authoritative references (PICO, PRISMA, RoB tool docs).
+              </Dialog.Description>
+            </div>
+            {/* Close button — fixed top-right, high-contrast so it's always
+                visible. Uses absolute positioning so it doesn't get squashed
+                by long titles on narrow viewports. */}
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                aria-label="Close guide"
+                style={{
+                  position: "absolute",
+                  top: 16,
+                  right: 16,
+                  background: "var(--bkb-surfaceAlt, #f5f5f0)",
+                  border: "1px solid var(--bkb-border)",
+                  borderRadius: 8,
+                  width: 36,
+                  height: 36,
+                  cursor: "pointer",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "var(--bkb-text)",
+                  fontSize: 18,
+                  fontWeight: 500,
+                  lineHeight: 1,
+                  padding: 0,
+                  transition: "background 120ms ease",
+                }}
+                onMouseEnter={(e) => {
+                  (e.currentTarget as HTMLButtonElement).style.background =
+                    "var(--bkb-border, #e5e5e0)";
+                }}
+                onMouseLeave={(e) => {
+                  (e.currentTarget as HTMLButtonElement).style.background =
+                    "var(--bkb-surfaceAlt, #f5f5f0)";
+                }}
+              >
+                <Icon name="x" size={14} />
+              </button>
+            </Dialog.Close>
+          </div>
+
+          {/* Scrollable body */}
+          <div
+            className="bkb-scroll"
+            style={{
+              overflowY: "auto",
+              padding: "20px 28px 32px",
+              flex: 1,
+              background: "var(--bkb-surface, #ffffff)",
+            }}
+          >
+            {SECTIONS.map((section) => (
+              <section key={section.title} style={{ marginTop: 32 }}>
+                <h3
+                  style={{
+                    margin: "0 0 8px",
+                    fontSize: 11,
+                    fontWeight: 600,
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                    color: "var(--bkb-textSubtle)",
+                    paddingBottom: 6,
+                    borderBottom: "1px solid var(--bkb-border)",
+                  }}
+                >
+                  {section.title}
+                </h3>
+                {section.keys.map((k) => {
+                  const guide = FIELD_GUIDES[k];
+                  if (!guide) return null;
+                  return <GuideEntry key={k} guide={guide} />;
+                })}
+              </section>
+            ))}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/src/app/components/synth-scholar/fieldGuides.tsx b/src/app/components/synth-scholar/fieldGuides.tsx
new file mode 100644
index 0000000..2d4b64d
--- /dev/null
+++ b/src/app/components/synth-scholar/fieldGuides.tsx
@@ -0,0 +1,504 @@
+"use client";
+
+/**
+ * fieldGuides — descriptions + reference links for SynthScholar form fields.
+ *
+ * Each entry is rendered inside an InfoPopover on the create-review form.
+ * Centralizing them here keeps the JSX of the form readable and lets us
+ * iterate on copy / links without hunting through hundreds of lines of UI.
+ */
+
+import React from "react";
+import type { InfoLink } from "./InfoPopover";
+
+export type FieldGuide = {
+  title: string;
+  description: React.ReactNode;
+  link?: InfoLink;
+};
+
+const PICO_LINK: InfoLink = {
+  href: "https://www.cochranelibrary.com/about-pico",
+  label: "PICO at Cochrane Library",
+};
+
+const PRISMA_LINK: InfoLink = {
+  href: "https://www.prisma-statement.org/prisma-2020",
+  label: "PRISMA 2020 statement",
+};
+
+/**
+ * Example block — small bordered card with a "Dummy example" tag and one or
+ * more lines. Used for fields where seeing a concrete shape is more useful
+ * than another sentence of prose.
+ */
+function Example({ lines }: { lines: ReadonlyArray<React.ReactNode> }) {
+  return (
+    <div
+      style={{
+        marginTop: 10,
+        padding: "8px 10px",
+        background: "var(--bkb-surfaceAlt, #f5f5f0)",
+        border: "1px dashed var(--bkb-border)",
+        borderRadius: 6,
+        fontSize: 11.5,
+        lineHeight: 1.55,
+      }}
+    >
+      <div
+        style={{
+          fontSize: 10,
+          fontWeight: 600,
+          letterSpacing: "0.06em",
+          textTransform: "uppercase",
+          color: "var(--bkb-textSubtle)",
+          marginBottom: 4,
+        }}
+      >
+        Dummy example
+      </div>
+      {lines.map((ln, i) => (
+        <div key={i} style={{ fontFamily: "inherit", color: "var(--bkb-textMuted)" }}>
+          {ln}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const FIELD_GUIDES: Record<string, FieldGuide> = {
+  // ── Protocol — basics ─────────────────────────────────────────────────
+  title: {
+    title: "Title",
+    description: (
+      <>
+        A concise, descriptive name for your review. Aim for the population +
+        intervention + outcome in one phrase, e.g. <em>"GLP-1 agonists for
+        type-2 diabetes: efficacy and safety"</em>.
+      </>
+    ),
+  },
+  objective: {
+    title: "Objective / research question",
+    description: (
+      <>
+        The single research question your review answers. Often phrased as
+        "What is the effect of <em>I</em> compared to <em>C</em> on <em>O</em>
+        in <em>P</em>?". Defaults to the title if blank. For scoping reviews,
+        a list of mapping objectives is also fine.
+        <Example
+          lines={[
+            "Characterise participant populations across included sources, including whether samples are clinical or drawn from the general population, and what demographic information is reported",
+            "Characterise study designs, including whether studies are cross-sectional or longitudinal, and (if longitudinal) the duration and frequency of data collection",
+            "Identify whether studies use within-subjects or between-subjects designs",
+          ]}
+        />
+      </>
+    ),
+  },
+
+  // ── PICO ───────────────────────────────────────────────────────────────
+  population: {
+    title: "P — Population",
+    description: (
+      <>
+        Who is being studied: condition, demographic, sample group. Be
+        specific about disease severity, age range, setting (hospital,
+        community), and any inclusion-defining traits.
+      </>
+    ),
+    link: PICO_LINK,
+  },
+  intervention: {
+    title: "I — Intervention",
+    description: (
+      <>
+        The treatment, exposure, diagnostic test, or risk factor under study.
+        Specify dose / frequency / duration if relevant.
+      </>
+    ),
+    link: PICO_LINK,
+  },
+  comparison: {
+    title: "C — Comparison",
+    description: (
+      <>
+        The control group or alternative the intervention is measured against —
+        placebo, standard of care, no treatment, or a different active
+        intervention.
+      </>
+    ),
+    link: PICO_LINK,
+  },
+  outcome: {
+    title: "O — Outcome",
+    description: (
+      <>
+        The clinical endpoints you'll measure: mortality, symptom score,
+        quality of life, biomarker change, adverse events, etc. Distinguish
+        primary vs. secondary outcomes.
+      </>
+    ),
+    link: PICO_LINK,
+  },
+
+  inclusion: {
+    title: "Inclusion criteria",
+    description: (
+      <>
+        Eligibility rules a study must meet to be included — required by{" "}
+        <strong>PRISMA 2020 item 5</strong> (eligibility criteria). Common
+        axes: study design (RCT, cohort, case-control), language, publication
+        date range, peer-review status. One rule per line is best.
+      </>
+    ),
+    link: {
+      href: "https://www.prisma-statement.org/prisma-2020",
+      label: "PRISMA 2020 — Item 5 (eligibility criteria)",
+    },
+  },
+  exclusion: {
+    title: "Exclusion criteria",
+    description: (
+      <>
+        Reasons to drop a study — also under <strong>PRISMA 2020 item 5</strong>.
+        Examples: editorials, conference abstracts, animal-only studies,
+        retracted papers, n &lt; some threshold. Should be non-overlapping with
+        inclusion criteria.
+      </>
+    ),
+    link: {
+      href: "https://www.prisma-statement.org/prisma-2020",
+      label: "PRISMA 2020 — Item 5 (eligibility criteria)",
+    },
+  },
+
+  // ── Search strategy ───────────────────────────────────────────────────
+  databases: {
+    title: "Databases",
+    description: (
+      <>
+        Which bibliographic sources the search agent will query. PubMed and
+        bioRxiv/medRxiv cover most biomedical literature; OpenAlex and CORE
+        broaden coverage to grey literature and OA preprints.
+      </>
+    ),
+  },
+  date_range: {
+    title: "Publication date range",
+    description: (
+      <>
+        Optional YYYY-MM-DD bounds restricting which articles are searched.
+        Leave blank for no date filter. Useful when the field's terminology
+        or guidelines have shifted recently.
+      </>
+    ),
+  },
+  hops: {
+    title: "Citation hops",
+    description: (
+      <>
+        How many citation-chain traversals to perform after the initial
+        search. <strong>0</strong> = no traversal, search-results only.
+        Higher values surface seminal works cited by your seed set but
+        increase runtime and cost.
+      </>
+    ),
+  },
+
+  // ── Registration & disclosures ────────────────────────────────────────
+  registration: {
+    title: "Registration number",
+    description: (
+      <>
+        PROSPERO, OSF, or other registry ID for this protocol. Required by
+        many journals for systematic reviews.
+      </>
+    ),
+    link: {
+      href: "https://www.crd.york.ac.uk/PROSPERO/",
+      label: "PROSPERO registry",
+    },
+  },
+  protocol_url: {
+    title: "Protocol URL",
+    description: (
+      <>
+        Public link to your pre-registered protocol document. Helps reviewers
+        check that what you ran matches what you planned.
+      </>
+    ),
+  },
+  funding: {
+    title: "Funding sources",
+    description: (
+      <>
+        Grants and institutional support that paid for this review. Required
+        for transparent reporting per PRISMA 2020 item 26.
+      </>
+    ),
+    link: PRISMA_LINK,
+  },
+  competing_interests: {
+    title: "Competing interests",
+    description: (
+      <>
+        Financial / non-financial conflicts of interest of the review team.
+        PRISMA 2020 item 26 — required for publication in most journals.
+      </>
+    ),
+    link: PRISMA_LINK,
+  },
+
+  // ── Risk-of-bias & charting ───────────────────────────────────────────
+  rob_tool: {
+    title: "Risk-of-bias tool",
+    description: (
+      <>
+        The framework the agent will use to score bias for each included
+        study. Pick the one that matches your study designs:
+        <ul style={{ margin: "6px 0 0 16px", padding: 0 }}>
+          <li><strong>RoB 2</strong> — randomised trials</li>
+          <li><strong>ROBINS-I</strong> — non-randomised intervention studies</li>
+          <li><strong>QUADAS-2</strong> — diagnostic accuracy</li>
+          <li><strong>Newcastle-Ottawa</strong> — observational</li>
+          <li><strong>SYRCLE</strong> — animal studies</li>
+        </ul>
+      </>
+    ),
+    link: {
+      // riskofbias.info is the canonical site maintained by the RoB 2 and
+      // ROBINS-I tool authors — covers all the tools above. The earlier
+      // Cochrane methods URL has been retired (returns 404). For the RoB 2
+      // -specific Cochrane page, see:
+      // https://methods.cochrane.org/bias/resources/rob-2-revised-cochrane-risk-bias-tool-randomized-trials
+      href: "https://www.riskofbias.info/",
+      label: "RoB 2 / ROBINS-I tool home (riskofbias.info)",
+    },
+  },
+  charting_questions: {
+    title: "Charting questions",
+    description: (
+      <>
+        Custom data-extraction prompts the LLM will answer for every included
+        article. Use the question text verbatim as the field key in the
+        output. Leave empty to use built-in PRISMA-style charting fields.
+        <Example
+          lines={[
+            "What was the total sample size?",
+            "What primary outcome was measured and how?",
+            "What was the median follow-up duration (in weeks)?",
+            "What statistical test was used for the primary analysis?",
+          ]}
+        />
+      </>
+    ),
+  },
+  appraisal_domains: {
+    title: "Appraisal domains",
+    description: (
+      <>
+        Quality / methodological domains the LLM scores per study (max 4).
+        Pick the four that matter most for your study designs.
+        <Example
+          lines={[
+            "Risk of bias in participant selection",
+            "Validity of outcome measurement",
+            "Appropriateness of statistical analysis",
+            "Generalisability of findings",
+          ]}
+        />
+      </>
+    ),
+  },
+
+  // ── Per-group analysis ────────────────────────────────────────────────
+  grouping_dimension: {
+    title: "Grouping dimension",
+    description: (
+      <>
+        Optional attribute the synthesis will stratify by. The LLM partitions
+        studies on this attribute and produces a per-group narrative + Q&A.
+        <Example
+          lines={[
+            <code key="1">disorder_cohort</code>,
+            <code key="2">age_group  (children / adolescents / adults)</code>,
+            <code key="3">severity  (mild / moderate / severe)</code>,
+            <code key="4">intervention_class  (pharmacological / behavioural)</code>,
+          ]}
+        />
+      </>
+    ),
+  },
+  default_group_questions: {
+    title: "Default per-group questions",
+    description: (
+      <>
+        Questions answered separately within each group (max 10, one per
+        line). Use these for cross-cutting questions you want answered for
+        every cohort: prevalence, response rate, comparative effects, etc.
+        <Example
+          lines={[
+            "What is the prevalence in this group?",
+            "Which interventions show the largest effect size for this group?",
+            "What adverse events are most commonly reported in this group?",
+            "How does follow-up duration affect outcomes here?",
+          ]}
+        />
+      </>
+    ),
+  },
+
+  // ── Run configuration ─────────────────────────────────────────────────
+  mode: {
+    title: "Single vs. compare mode",
+    description: (
+      <>
+        <strong>Single</strong> — one model produces the review.{" "}
+        <strong>Compare</strong> — 2–5 models run in parallel and a consensus
+        model merges them. Compare mode costs more but surfaces disagreements
+        between models that the consensus call resolves.
+      </>
+    ),
+  },
+  model: {
+    title: "Model",
+    description: (
+      <>
+        The LLM that drives every agent in the pipeline (planner, screener,
+        extractor, appraiser, synthesizer). OpenRouter slug format —
+        <code>provider/model-name</code>. Larger models reason better but
+        cost more per article processed.
+      </>
+    ),
+    link: {
+      href: "https://openrouter.ai/models",
+      label: "OpenRouter model catalogue",
+    },
+  },
+  consensus_model: {
+    title: "Consensus model",
+    description: (
+      <>
+        In compare mode, the model that synthesizes the per-model outputs into
+        a single review. Pick a strong reasoning model — it sees N reviews
+        and must reconcile contradictions.
+      </>
+    ),
+  },
+  max_results: {
+    title: "Max results per query",
+    description: (
+      <>
+        How many search hits to retain per database query. Higher values
+        improve recall but slow down screening and cost more LLM tokens.
+        Typical range: 50–300.
+      </>
+    ),
+  },
+  related_depth: {
+    title: "Related-articles depth",
+    description: (
+      <>
+        How many "related work" expansion rounds. <strong>0</strong> =
+        search-only. <strong>1</strong> = pull related articles for each seed.
+        <strong> 2+</strong> = recursive related-of-related. Increases recall
+        of seminal and adjacent papers.
+      </>
+    ),
+  },
+  biorxiv_days: {
+    title: "bioRxiv lookback days",
+    description: (
+      <>
+        How far back to scan bioRxiv / medRxiv preprints. The bioRxiv API is
+        time-sliced rather than keyword-indexed, so this is a coverage
+        window, not a publication-date filter. Typical: 365–730 days.
+      </>
+    ),
+  },
+  max_articles: {
+    title: "Max articles",
+    description: (
+      <>
+        Hard cap on total articles processed after deduplication. The
+        re-ranker keeps the top N by relevance. Useful for quick test runs
+        or budget control. Leave blank for no cap.
+      </>
+    ),
+  },
+  concurrency: {
+    title: "Concurrency",
+    description: (
+      <>
+        How many articles the per-article agent stages process in parallel.
+        Higher values finish faster but bump up against provider rate limits.
+        <strong> 5–10</strong> is a good default; <strong>20+</strong> only
+        with a paid OpenRouter tier.
+      </>
+    ),
+  },
+  max_plan_iterations: {
+    title: "Max plan iterations",
+    description: (
+      <>
+        How many times the search-strategy agent will regenerate the search
+        plan if you reject it. Only meaningful with{" "}
+        <em>"Pause for me to review"</em> enabled.
+      </>
+    ),
+  },
+  synthesis_style: {
+    title: "Synthesis style",
+    description: (
+      <>
+        Output format for the narrative synthesis section.{" "}
+        <strong>Paragraph</strong> = traditional prose,{" "}
+        <strong>Q&A</strong> = research-question-driven,{" "}
+        <strong>Bullet list</strong> = scannable findings,{" "}
+        <strong>Table</strong> = structured comparison rows.
+      </>
+    ),
+  },
+  data_items: {
+    title: "Data-extraction items",
+    description: (
+      <>
+        Custom data fields to extract from every included article (one per
+        line). Examples: <em>sample size</em>, <em>follow-up duration</em>,
+        <em> primary outcome value</em>. Leave blank for the built-in
+        PRISMA-style item set.
+      </>
+    ),
+  },
+  enable_cache: {
+    title: "Enable cache",
+    description: (
+      <>
+        Reuse cached articles + LLM responses from prior runs of similar
+        protocols (when Postgres caching is configured). Faster + cheaper
+        re-runs; turn off for fresh, audit-grade runs.
+      </>
+    ),
+  },
+  extract_data: {
+    title: "Extract data",
+    description: (
+      <>
+        Run the per-article data-charting and critical-appraisal stages.
+        Required for tables, narrative rows, and per-group Q&A. Disable for
+        protocol-only runs or quick screening triage.
+      </>
+    ),
+  },
+  pause_for_review: {
+    title: "Pause for me to review the search strategy",
+    description: (
+      <>
+        When enabled, the pipeline pauses after the planner produces the
+        search query so you can approve, revise, or reject it. Recommended
+        for high-stakes reviews. Maps to <code>auto_confirm = false</code>.
+      </>
+    ),
+  },
+};
diff --git a/src/app/components/ui/popover.tsx b/src/app/components/ui/popover.tsx
new file mode 100644
index 0000000..242795a
--- /dev/null
+++ b/src/app/components/ui/popover.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/src/app/components/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return (
+    <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+  )
+}
+
+function PopoverContent({
+  className,
+  align = "start",
+  sideOffset = 6,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-3 shadow-md outline-none",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/src/app/knowledge-base/synth-scholar/[id]/page.tsx b/src/app/knowledge-base/synth-scholar/[id]/page.tsx
index 10b7eee..ccd98d8 100644
--- a/src/app/knowledge-base/synth-scholar/[id]/page.tsx
+++ b/src/app/knowledge-base/synth-scholar/[id]/page.tsx
@@ -1,36 +1,77 @@
 "use client";
 
 /**
- * /knowledge-base/synth-scholar/[id] — public detail page for a completed
- * PRISMA review that the author has marked Public from /user/synth-scholar.
+ * /knowledge-base/synth-scholar/[id] — public review detail.
  *
- * Intentionally minimal: only the synthesis text + a small set of downloads
- * (full report as Markdown, bibliography as BibTeX). No editing, no protocol
- * controls, no progress / sharing widgets — those live behind the authoring
- * UI at /user/synth-scholar.
+ * Tabbed UI (Review | Provenance) that swaps content inline using a URL hash
+ * (#provenance) — no full-page navigation, shareable state, browser
+ * back/forward respected via the hashchange listener.
+ *
+ * The Review tab renders the full long-form content (abstract → intro →
+ * methods → flow → studies → synthesis → RoB → GRADE → limitations →
+ * conclusions → references). The Provenance tab renders the animated
+ * pipeline timeline component.
  */
 
 import React from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { ArrowLeft, Download, BookOpen, Loader2, AlertCircle } from "lucide-react";
-import { useReview, useExportReview } from "@/src/hooks/useSynthScholar";
+import {
+  ArrowLeft,
+  Download,
+  BookOpen,
+  Loader2,
+  AlertCircle,
+  Activity,
+  FileText,
+} from "lucide-react";
+import {
+  useReview,
+  useReviewLog,
+  useExportReview,
+} from "@/src/hooks/useSynthScholar";
+import { MarkdownContent } from "@/src/app/components/synth-scholar/MarkdownContent";
+import { ProvenanceTimelinePublic } from "@/src/app/components/synth-scholar/ProvenanceTimelinePublic";
+import type {
+  ArticleSummary,
+  GRADEAssessment,
+} from "@/src/types/synthScholar";
 
 export default function PublicReviewDetailPage() {
   const params = useParams();
   const reviewId = decodeURIComponent((params?.id as string) || "");
   const { data, isLoading, error } = useReview(reviewId || undefined);
+  const log = useReviewLog(reviewId || undefined);
   const exportMut = useExportReview();
 
   const isPublicCompleted =
     data?.is_public === true && data?.status === "completed";
 
+  // Tab state synced to URL hash so it's shareable + survives refresh.
+  const [activeTab, setActiveTab] = React.useState<"review" | "provenance">("review");
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const sync = () =>
+      setActiveTab(window.location.hash === "#provenance" ? "provenance" : "review");
+    sync();
+    window.addEventListener("hashchange", sync);
+    return () => window.removeEventListener("hashchange", sync);
+  }, []);
+  const switchTab = (tab: "review" | "provenance") => {
+    setActiveTab(tab);
+    if (typeof window !== "undefined") {
+      const url = new URL(window.location.href);
+      url.hash = tab === "provenance" ? "provenance" : "";
+      window.history.replaceState(null, "", url.toString());
+    }
+  };
+
   return (
     <div className="kb-page-margin">
-      {/* Hero header */}
+      {/* Hero */}
       <div className="grid fix-left-margin grid-cols-1 mb-8">
         <div className="relative overflow-hidden bg-gradient-to-br from-sky-500 via-blue-500 to-emerald-500 rounded-2xl shadow-xl">
-          <div className="absolute inset-0 bg-gradient-to-r from-sky-600/20 to-transparent"></div>
+          <div className="absolute inset-0 bg-gradient-to-r from-sky-600/20 to-transparent" />
           <div className="relative px-8 py-10">
             <Link
               href="/knowledge-base/synth-scholar"
@@ -45,6 +86,11 @@ export default function PublicReviewDetailPage() {
               {data?.title || (isLoading ? "Loading…" : "Review")}
             </h1>
             <p className="font-mono text-xs text-sky-100/90">{reviewId}</p>
+            {data?.completed_at && (
+              <p className="text-xs text-sky-100/80 mt-2">
+                Completed {new Date(data.completed_at).toLocaleString()}
+              </p>
+            )}
           </div>
         </div>
       </div>
@@ -62,9 +108,7 @@ export default function PublicReviewDetailPage() {
             <div className="flex items-center gap-3">
               <AlertCircle className="w-6 h-6 text-red-500" />
               <div>
-                <h3 className="text-lg font-semibold text-red-800">
-                  Could not load review
-                </h3>
+                <h3 className="text-lg font-semibold text-red-800">Could not load review</h3>
                 <p className="text-red-700">{(error as Error).message}</p>
               </div>
             </div>
@@ -80,8 +124,8 @@ export default function PublicReviewDetailPage() {
                   Review not publicly available
                 </h3>
                 <p className="text-amber-700">
-                  This review is either still running or has not been shared
-                  publicly by its author.
+                  This review is either still running or has not been shared publicly by its
+                  author.
                 </p>
               </div>
             </div>
@@ -90,64 +134,328 @@ export default function PublicReviewDetailPage() {
 
         {!isLoading && !error && data && isPublicCompleted && (
           <>
-            {/* Downloads */}
-            <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
-              <div className="flex items-center gap-2 mb-4">
-                <Download className="w-5 h-5 text-sky-600" />
-                <h2 className="text-lg font-semibold text-gray-900">
-                  Downloads
-                </h2>
-              </div>
-              <div className="flex flex-wrap gap-3">
-                <button
-                  type="button"
-                  onClick={() =>
-                    exportMut.mutate({ reviewId, format: "markdown" })
-                  }
-                  disabled={exportMut.isPending}
-                  className="inline-flex items-center gap-2 px-4 py-2 bg-sky-600 text-white rounded-lg hover:bg-sky-700 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  <BookOpen className="w-4 h-4" /> Full report (Markdown)
-                </button>
-                <button
-                  type="button"
-                  onClick={() =>
-                    exportMut.mutate({ reviewId, format: "bibtex" })
-                  }
-                  disabled={exportMut.isPending}
-                  className="inline-flex items-center gap-2 px-4 py-2 border border-sky-600 text-sky-700 rounded-lg hover:bg-sky-50 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  <Download className="w-4 h-4" /> BibTeX (.bib)
-                </button>
+            {/* Tabs + downloads */}
+            <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+              <div className="border-b border-gray-200 px-2 flex items-center justify-between flex-wrap gap-2">
+                <nav className="flex" role="tablist" aria-label="Review tabs">
+                  <button
+                    type="button"
+                    role="tab"
+                    aria-selected={activeTab === "review"}
+                    onClick={() => switchTab("review")}
+                    className={`flex items-center gap-2 px-5 py-3 text-sm font-medium transition-colors border-b-2 -mb-px ${
+                      activeTab === "review"
+                        ? "border-sky-500 text-sky-700"
+                        : "border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300"
+                    }`}
+                  >
+                    <FileText className="w-4 h-4" /> Review
+                  </button>
+                  <button
+                    type="button"
+                    role="tab"
+                    aria-selected={activeTab === "provenance"}
+                    onClick={() => switchTab("provenance")}
+                    className={`flex items-center gap-2 px-5 py-3 text-sm font-medium transition-colors border-b-2 -mb-px ${
+                      activeTab === "provenance"
+                        ? "border-emerald-500 text-emerald-700"
+                        : "border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300"
+                    }`}
+                  >
+                    <Activity className="w-4 h-4" /> Provenance
+                  </button>
+                </nav>
+                <div className="flex flex-wrap gap-2 px-3 py-2">
+                  <button
+                    type="button"
+                    onClick={() => exportMut.mutate({ reviewId, format: "markdown" })}
+                    disabled={exportMut.isPending}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-sky-600 text-white rounded hover:bg-sky-700 transition-colors text-xs font-medium disabled:opacity-50"
+                  >
+                    <BookOpen className="w-3.5 h-3.5" /> Markdown
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => exportMut.mutate({ reviewId, format: "bibtex" })}
+                    disabled={exportMut.isPending}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 border border-sky-600 text-sky-700 rounded hover:bg-sky-50 transition-colors text-xs font-medium disabled:opacity-50"
+                  >
+                    <Download className="w-3.5 h-3.5" /> BibTeX
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => exportMut.mutate({ reviewId, format: "json" })}
+                    disabled={exportMut.isPending}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 border border-gray-300 text-gray-700 rounded hover:bg-gray-50 transition-colors text-xs font-medium disabled:opacity-50"
+                  >
+                    <Download className="w-3.5 h-3.5" /> JSON
+                  </button>
+                </div>
               </div>
               {exportMut.error && (
-                <p className="text-sm text-red-600 mt-3">
+                <p className="text-xs text-red-600 px-5 py-2 border-t border-red-100">
                   {(exportMut.error as Error).message}
                 </p>
               )}
             </div>
 
-            {/* Synthesis */}
-            <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-8">
-              <h2 className="text-xl font-semibold text-gray-900 mb-4">
-                Synthesis
-              </h2>
-              {data.synthesis_text ? (
-                <div
-                  className="text-gray-800 leading-relaxed whitespace-pre-wrap"
-                  style={{ fontSize: 15 }}
-                >
-                  {data.synthesis_text}
-                </div>
-              ) : (
-                <p className="text-gray-500 italic">
-                  No synthesis text available for this review.
-                </p>
-              )}
-            </div>
+            {/* ── Provenance tab ───────────────────────────────────── */}
+            {activeTab === "provenance" && (
+              <ProvenanceTimelinePublic
+                review={data}
+                logEvents={log.data?.log_events ?? []}
+                log={log.data?.log ?? []}
+              />
+            )}
+
+            {/* ── Review tab ──────────────────────────────────────── */}
+            {activeTab === "review" && (
+              <>
+                {data.structured_abstract && (
+                  <Section title="Abstract">
+                    <MarkdownContent>{data.structured_abstract}</MarkdownContent>
+                  </Section>
+                )}
+
+                {data.introduction_text && (
+                  <Section title="Introduction">
+                    <MarkdownContent>{data.introduction_text}</MarkdownContent>
+                  </Section>
+                )}
+
+                {(data.search_queries?.length ?? 0) > 0 && (
+                  <Section title="Methods — search strategy">
+                    <p className="text-sm text-gray-600 mb-3">
+                      Final approved search queries used across all configured databases:
+                    </p>
+                    <ul className="list-disc pl-5 space-y-1.5">
+                      {data.search_queries.map((q: string, i: number) => (
+                        <li key={i} className="font-mono text-xs text-gray-800 break-words">
+                          {q}
+                        </li>
+                      ))}
+                    </ul>
+                  </Section>
+                )}
+
+                {data.flow && <PRISMAFlowCard flow={data.flow} />}
+
+                {data.included_articles && data.included_articles.length > 0 && (
+                  <Section title={`Included studies (${data.included_articles.length})`}>
+                    <div className="overflow-x-auto -mx-2">
+                      <table className="w-full text-sm">
+                        <thead className="bg-gray-50 text-xs text-gray-700 uppercase tracking-wider">
+                          <tr>
+                            <th className="px-3 py-2 text-left">PMID / DOI</th>
+                            <th className="px-3 py-2 text-left">Year</th>
+                            <th className="px-3 py-2 text-left">Title</th>
+                            <th className="px-3 py-2 text-left">Authors</th>
+                            <th className="px-3 py-2 text-left">RoB</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-100">
+                          {data.included_articles.map((a: ArticleSummary) => (
+                            <tr key={a.pmid || a.doi || a.title} className="align-top">
+                              <td className="px-3 py-2 font-mono text-xs text-gray-700 whitespace-nowrap">
+                                {a.pmid || a.doi || "—"}
+                              </td>
+                              <td className="px-3 py-2 text-xs text-gray-600 whitespace-nowrap">
+                                {a.year || "—"}
+                              </td>
+                              <td className="px-3 py-2 text-gray-900">
+                                {a.title || "(untitled)"}
+                                {a.journal && (
+                                  <span className="block text-xs text-gray-500 mt-0.5">
+                                    {a.journal}
+                                  </span>
+                                )}
+                              </td>
+                              <td className="px-3 py-2 text-xs text-gray-600">
+                                {a.authors || "—"}
+                              </td>
+                              <td className="px-3 py-2">
+                                <RoBChip rating={a.rob_overall} />
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </Section>
+                )}
+
+                {data.synthesis_text && (
+                  <Section title="Synthesis">
+                    <MarkdownContent>{data.synthesis_text}</MarkdownContent>
+                  </Section>
+                )}
+
+                {data.bias_assessment && (
+                  <Section title="Risk of bias assessment">
+                    <MarkdownContent>{data.bias_assessment}</MarkdownContent>
+                  </Section>
+                )}
+
+                {data.grade_assessments && data.grade_assessments.length > 0 && (
+                  <Section title="GRADE — certainty of evidence">
+                    <div className="space-y-4">
+                      {data.grade_assessments.map((g: GRADEAssessment, i: number) => (
+                        <div
+                          key={i}
+                          className="border border-gray-200 rounded-lg p-4 bg-gray-50/50"
+                        >
+                          <div className="flex items-baseline justify-between flex-wrap gap-2 mb-2">
+                            <h3 className="text-base font-semibold text-gray-900">
+                              {g.outcome}
+                            </h3>
+                            <CertaintyChip certainty={g.overall_certainty} />
+                          </div>
+                          {g.summary && (
+                            <p className="text-sm text-gray-700 leading-relaxed">{g.summary}</p>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </Section>
+                )}
+
+                {data.limitations && (
+                  <Section title="Limitations">
+                    <MarkdownContent>{data.limitations}</MarkdownContent>
+                  </Section>
+                )}
+
+                {data.conclusions_text && (
+                  <Section title="Conclusions">
+                    <MarkdownContent>{data.conclusions_text}</MarkdownContent>
+                  </Section>
+                )}
+
+                {data.included_articles && data.included_articles.length > 0 && (
+                  <Section title="References">
+                    <ol className="list-decimal pl-5 space-y-2 text-sm">
+                      {data.included_articles.map((a: ArticleSummary, i: number) => (
+                        <li key={i} className="text-gray-800">
+                          {a.authors && <span>{a.authors}. </span>}
+                          {a.year && <span>({a.year}). </span>}
+                          <span className="font-medium">{a.title || "(untitled)"}</span>
+                          {a.journal && (
+                            <span>
+                              . <em>{a.journal}</em>
+                            </span>
+                          )}
+                          {a.doi && (
+                            <span>
+                              .{" "}
+                              <a
+                                href={`https://doi.org/${a.doi.replace(/^https?:\/\/doi\.org\//, "")}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-sky-600 hover:underline break-all"
+                              >
+                                {a.doi}
+                              </a>
+                            </span>
+                          )}
+                        </li>
+                      ))}
+                    </ol>
+                  </Section>
+                )}
+              </>
+            )}
           </>
         )}
       </div>
     </div>
   );
 }
+
+// ── Sub-components ─────────────────────────────────────────────────────
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section className="bg-white rounded-xl border border-gray-200 shadow-sm p-6 sm:p-8">
+      <h2 className="text-xl font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-100">
+        {title}
+      </h2>
+      <div className="text-gray-800">{children}</div>
+    </section>
+  );
+}
+
+function PRISMAFlowCard({
+  flow,
+}: {
+  flow: NonNullable<ReturnType<typeof useReview>["data"]>["flow"];
+}) {
+  if (!flow) return null;
+  const cells: Array<[string, number | string]> = [
+    ["Identified", flow.total_identified],
+    ["Duplicates removed", flow.duplicates_removed],
+    ["After dedup", flow.after_dedup],
+    ["T/A screened", flow.screened_title_abstract],
+    ["Excluded (T/A)", flow.excluded_title_abstract],
+    ["Full-text sought", flow.sought_fulltext],
+    ["Eligibility assessed", flow.assessed_eligibility],
+    ["Excluded (eligibility)", flow.excluded_eligibility],
+    ["Included in synthesis", flow.included_synthesis],
+  ];
+  return (
+    <Section title="PRISMA flow">
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+        {cells.map(([label, value]) => (
+          <div
+            key={label}
+            className="rounded-lg border border-gray-200 bg-gradient-to-br from-gray-50 to-white p-3"
+          >
+            <div className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">
+              {label}
+            </div>
+            <div className="text-2xl font-light text-gray-900 mt-1 tabular-nums">{value}</div>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}
+
+function RoBChip({ rating }: { rating?: string }) {
+  if (!rating) return <span className="text-xs text-gray-400">—</span>;
+  const r = rating.toLowerCase();
+  const cls = r.includes("low")
+    ? "bg-emerald-50 text-emerald-700 border-emerald-200"
+    : r.includes("high")
+      ? "bg-red-50 text-red-700 border-red-200"
+      : r.includes("some") || r.includes("moderate")
+        ? "bg-amber-50 text-amber-700 border-amber-200"
+        : "bg-gray-50 text-gray-700 border-gray-200";
+  return (
+    <span
+      className={`inline-block text-[10px] uppercase tracking-wider font-semibold px-2 py-0.5 rounded border ${cls}`}
+    >
+      {rating}
+    </span>
+  );
+}
+
+function CertaintyChip({ certainty }: { certainty?: string }) {
+  if (!certainty) return null;
+  const c = certainty.toLowerCase();
+  const cls = c.includes("high")
+    ? "bg-emerald-50 text-emerald-700 border-emerald-200"
+    : c.includes("very low")
+      ? "bg-red-50 text-red-700 border-red-200"
+      : c.includes("low")
+        ? "bg-amber-50 text-amber-700 border-amber-200"
+        : c.includes("moderate")
+          ? "bg-sky-50 text-sky-700 border-sky-200"
+          : "bg-gray-50 text-gray-700 border-gray-200";
+  return (
+    <span
+      className={`inline-block text-[10px] uppercase tracking-wider font-semibold px-2.5 py-1 rounded-full border ${cls}`}
+    >
+      {certainty}
+    </span>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f83b99c..be4ae97 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,24 +1,26 @@
 "use client";
 
 /**
- * Home — landing page.
+ * Home — landing page (editorial direction).
  *
- * Content (Key Features, What is BrainKB, Use Cases, Statistics, Structured
- * Models, Publications) and the YAML / /api/statistics data loading flow are
- * preserved verbatim from the original implementation; only the visual layer
- * was updated to use the bkb design tokens (FONTS.display, --bkb-* colours,
- * .bkb-card, .bkb-btn, .bkb-chip) so this page lines up with the dashboard
- * and admin treatment.
+ * Narrative order: Hero → What is BrainKB (what it is) → AbstractAtlas (what
+ * users can explore) → Use Cases (where it applies) → BrainKB Tools (which
+ * tools enable it) → Video (how it works) → Structured Models (what models
+ * support it) → Powered by AI agents (technical credibility).
+ * All copy is content-managed from config-home.yaml; the /api/statistics flow
+ * is preserved.
  */
 
 import yaml from "@/src/config/yaml/config-home.yaml";
+import toolsLib from "@/src/config/yaml/tools-libraries.yaml";
 import { useEffect, useState } from "react";
 import {
   Brain, Database, FileText, Users, Sparkles, ExternalLink, Network, CheckCircle,
   FileCheck, Code, Layers as LayersIcon, BookOpen, Search, UsersRound, Globe, FolderTree,
-  FileSearch, FileJson, Tag, MessageSquare, Eye, AlertCircle,
+  FileSearch, FileJson, Tag, MessageSquare, Eye, AlertCircle, Play,
 } from "lucide-react";
 import Link from "next/link";
+import Image from "next/image";
 import { BkbHero } from "@/src/app/components/design-system/BkbHero";
 import { Theme, FONTS } from "@/src/app/components/design-system";
 import "./user/dashboard/fonts.css";
@@ -45,15 +47,15 @@ const ICON_MAP: Record<string, any> = {
 };
 const iconBySlug = (s?: string) => ICON_MAP[s?.toLowerCase() ?? ""] ?? Database;
 
-// ─── Section primitives (visual only — no introduced copy) ───────────────
+// ─── Section primitives ──────────────────────────────────────────────────
 
-function SectionTitle({ children, size = 44 }: { children: React.ReactNode; size?: number }) {
+function SectionTitle({ children, size = 46 }: { children: React.ReactNode; size?: number }) {
   return (
     <h2
       style={{
         fontFamily: FONTS.display,
         fontSize: size,
-        lineHeight: 1.05,
+        lineHeight: 1.06,
         margin: 0,
         letterSpacing: "-0.02em",
         fontWeight: 400,
@@ -66,12 +68,263 @@ function SectionTitle({ children, size = 44 }: { children: React.ReactNode; size
 
 function SectionLead({ children }: { children: React.ReactNode }) {
   return (
-    <p style={{ fontSize: 16, color: "var(--bkb-textMuted)", lineHeight: 1.6, margin: "12px 0 0", maxWidth: 720 }}>
+    <p style={{ fontSize: 16, color: "var(--bkb-textMuted)", lineHeight: 1.65, margin: "16px 0 0", maxWidth: 720 }}>
       {children}
     </p>
   );
 }
 
+function Eyebrow({ children, color = "var(--bkb-accent)" }: { children: React.ReactNode; color?: string }) {
+  return (
+    <div
+      style={{
+        fontFamily: FONTS.mono,
+        fontSize: 12,
+        letterSpacing: "0.18em",
+        textTransform: "uppercase",
+        color,
+        fontWeight: 600,
+        marginBottom: 18,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Underlined accent link used in section headers ("View all … →").
+function MoreLink({ href, children, external = true }: { href: string; children: React.ReactNode; external?: boolean }) {
+  const style: React.CSSProperties = {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "var(--bkb-accent)",
+    textDecoration: "none",
+    borderBottom: "2px solid color-mix(in oklch, var(--bkb-accent), transparent 60%)",
+    paddingBottom: 2,
+    whiteSpace: "nowrap",
+  };
+  return external ? (
+    <a href={href} target="_blank" rel="noopener noreferrer" style={style}>{children}</a>
+  ) : (
+    <Link href={href} style={style}>{children}</Link>
+  );
+}
+
+// VideoPlayer — lightweight YouTube facade. Shows the thumbnail + a play
+// button; only loads the (autoplaying) iframe once the user clicks, so the
+// landing page stays fast even with several videos.
+function VideoPlayer({ id, title, onPlay }: { id: string; title?: string; onPlay?: () => void }) {
+  const [playing, setPlaying] = useState(false);
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        paddingTop: "56.25%",
+        borderRadius: 14,
+        overflow: "hidden",
+        background: "linear-gradient(135deg, #14241c, #0d1813)",
+        boxShadow: "0 18px 40px -18px rgba(0,0,0,0.45)",
+      }}
+    >
+      {playing ? (
+        <iframe
+          src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1`}
+          title={title || "Video"}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
+        />
+      ) : (
+        <button
+          onClick={() => {
+            onPlay?.();
+            setPlaying(true);
+          }}
+          aria-label={`Play ${title || "video"}`}
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            border: 0,
+            padding: 0,
+            cursor: "pointer",
+            background: "transparent",
+            display: "block",
+          }}
+        >
+          {/* thumbnail (plain img — external host, no next/image config needed).
+              maxresdefault only exists for HD videos / once processed, so fall
+              back to hqdefault, which YouTube always generates. */}
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={`https://i.ytimg.com/vi/${id}/maxresdefault.jpg`}
+            alt=""
+            onError={(e) => {
+              const img = e.currentTarget;
+              if (!img.dataset.fallback) {
+                img.dataset.fallback = "1";
+                img.src = `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
+              }
+            }}
+            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.5 }}
+          />
+          {title && (
+            <span
+              style={{
+                position: "absolute",
+                top: 22,
+                left: 26,
+                right: 26,
+                textAlign: "left",
+                fontFamily: FONTS.display,
+                fontSize: 18,
+                color: "rgba(255,255,255,0.92)",
+                letterSpacing: "-0.01em",
+              }}
+            >
+              {title}
+            </span>
+          )}
+          <span
+            style={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              width: 66,
+              height: 66,
+              borderRadius: "50%",
+              background: "#fff",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: "0 6px 20px rgba(0,0,0,0.3)",
+            }}
+          >
+            <Play style={{ width: 24, height: 24, marginLeft: 3 }} fill="#d12c2c" color="#d12c2c" />
+          </span>
+        </button>
+      )}
+    </div>
+  );
+}
+
+// Status pill styling for use-case rows
+const STATUS_PILL: Record<string, { label: string; fg: string; bg: string }> = {
+  available: { label: "Available", fg: "#0f7a52", bg: "color-mix(in oklch, #1db981, transparent 86%)" },
+  partially_available: { label: "Partially available", fg: "#1d6fb8", bg: "color-mix(in oklch, #2b8fe0, transparent 86%)" },
+  in_development: { label: "In development", fg: "#b4451f", bg: "color-mix(in oklch, #e0682b, transparent 86%)" },
+  in_review: { label: "In review", fg: "#9a6a12", bg: "color-mix(in oklch, #e0a52b, transparent 84%)" },
+  coming_soon: { label: "Coming soon", fg: "var(--bkb-textMuted)", bg: "color-mix(in oklch, var(--bkb-textMuted), transparent 88%)" },
+};
+
+// Shared accent palette for tool badges (falls back when YAML omits `color`)
+const TOOL_COLORS = ["#0f7a52", "#2563eb", "#b45309", "#7c3aed"];
+
+// VideoCarousel — featured player on the left, copy on the right. With more
+// than one video it auto-advances (pausing once the viewer interacts or hits
+// play); the headline/description swap to match the active video.
+function VideoCarousel({
+  videos,
+  eyebrow,
+  headline,
+  description,
+  buttonText,
+}: {
+  videos: any[];
+  eyebrow?: string;
+  headline?: string;
+  description?: string;
+  buttonText?: string;
+}) {
+  const [active, setActive] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const n = videos.length;
+
+  useEffect(() => {
+    if (paused || n <= 1) return;
+    const t = setInterval(() => setActive((a) => (a + 1) % n), 6500);
+    return () => clearInterval(t);
+  }, [paused, n]);
+
+  const cur = videos[active] || {};
+  const go = (i: number) => {
+    setPaused(true);
+    setActive(((i % n) + n) % n);
+  };
+
+  const navBtn: React.CSSProperties = {
+    width: 38,
+    height: 38,
+    borderRadius: 999,
+    border: "1px solid var(--bkb-border)",
+    background: "var(--bkb-surface)",
+    color: "var(--bkb-text)",
+    cursor: "pointer",
+    fontSize: 16,
+    lineHeight: 1,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+  };
+
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 56, alignItems: "center" }}>
+      <VideoPlayer key={active} id={cur.youtube_id} title={cur.title} onPlay={() => setPaused(true)} />
+      <div>
+        {/* eyebrow + headline are fixed; only the video and its description cycle */}
+        <Eyebrow>{eyebrow || "See It in Action"}</Eyebrow>
+        <SectionTitle size={40}>{headline || "See It in Action"}</SectionTitle>
+        {(cur.description || description) && (
+          <p style={{ fontSize: 16, color: "var(--bkb-textMuted)", lineHeight: 1.7, margin: "16px 0 28px" }}>
+            {cur.description || description}
+          </p>
+        )}
+        <a
+          href={`https://youtu.be/${cur.youtube_id}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="bkb-btn bkb-btn-primary"
+          style={{ textDecoration: "none" }}
+        >
+          {buttonText || "Watch on YouTube"} →
+        </a>
+
+        {n > 1 && (
+          <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 32 }}>
+            <button onClick={() => go(active - 1)} aria-label="Previous video" style={navBtn}>←</button>
+            <div style={{ display: "flex", gap: 8 }}>
+              {videos.map((_, i) => (
+                <button
+                  key={i}
+                  onClick={() => go(i)}
+                  aria-label={`Go to video ${i + 1}`}
+                  style={{
+                    width: i === active ? 26 : 9,
+                    height: 9,
+                    borderRadius: 999,
+                    border: 0,
+                    padding: 0,
+                    cursor: "pointer",
+                    transition: "all .3s ease",
+                    background: i === active ? "var(--bkb-accent)" : "var(--bkb-border)",
+                  }}
+                />
+              ))}
+            </div>
+            <button onClick={() => go(active + 1)} aria-label="Next video" style={navBtn}>→</button>
+            <span style={{ fontFamily: FONTS.mono, fontSize: 12, color: "var(--bkb-textSubtle)", marginLeft: 4 }}>
+              {String(active + 1).padStart(2, "0")} / {String(n).padStart(2, "0")}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
 // ─── Page ────────────────────────────────────────────────────────────────
 
 export default function Home() {
@@ -99,493 +352,397 @@ export default function Home() {
     })();
   }, []);
 
+  const videos: any[] = Array.isArray(yaml.videos?.items) ? yaml.videos.items : [];
+
+  // "open-source tools" counts everything on the Tools & Libraries page —
+  // the flagship apps plus the Python libraries.
+  const tl: any = toolsLib;
+  const openSourceCount =
+    (Array.isArray(tl.tools) ? tl.tools.length : 0) +
+    (Array.isArray(tl.libraries) ? tl.libraries.length : 0);
+
+  const heroStats = [
+    { value: openSourceCount, label: "open-source tools", href: "/tools-and-libraries" },
+    { value: Array.isArray(yaml.usecases?.cases) ? yaml.usecases.cases.length : 0, label: "active use cases" },
+    { value: "Multi-agent", label: "orchestration" },
+  ];
+
   return (
     <div style={{ background: "#f0eee9" }}>
       <Theme theme="light" style={{ background: "transparent" }}>
-        <BkbHero />
-
-        {/* ── Key Features ─────────────────────────────────────────── */}
-        <section style={{ padding: "96px 64px", maxWidth: 1200, margin: "0 auto" }}>
-          <div style={{ maxWidth: 720, marginBottom: 56 }}>
-            <SectionTitle>{yaml.keyfeatures?.title || "Key Features"}</SectionTitle>
-            <SectionLead>
-              {yaml.keyfeatures?.subtitle ||
-                "Powerful tools for neuroscience knowledge extraction and management"}
-            </SectionLead>
-            <div style={{ fontSize: 12, color: "var(--bkb-textSubtle)", marginTop: 8, fontStyle: "italic" }}>
-              Login by clicking the button on the top-right navbar to use these features.
+        <BkbHero stats={heroStats} />
+
+        {/* ── What is BrainKB (what it is) ─────────────────────────── */}
+        {yaml.whatisbrainkb && (
+          <section style={{ padding: "104px 64px", maxWidth: 1200, margin: "0 auto" }}>
+            <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 72, alignItems: "start", marginBottom: 64 }}>
+              <div>
+                <Eyebrow>{yaml.whatisbrainkb.eyebrow || "What is BrainKB"}</Eyebrow>
+                <SectionTitle>{yaml.whatisbrainkb.headline || yaml.whatisbrainkb.title || "What is BrainKB?"}</SectionTitle>
+              </div>
+              <p style={{ fontSize: 17, color: "var(--bkb-textMuted)", lineHeight: 1.7, margin: 0, paddingTop: 6 }}>
+                {yaml.whatisbrainkb.description || yaml.whatisbrainkb.subtitle}
+              </p>
             </div>
-          </div>
-          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 20 }}>
-            {Array.isArray(yaml.keyfeatures?.features) &&
-              yaml.keyfeatures.features.map((f: any, i: number) => {
-                const Icon = iconBySlug(f.icon_slug);
-                const accent =
-                  f.color_theme === "green"
-                    ? "var(--bkb-accent)"
-                    : f.color_theme === "purple"
-                      ? "var(--bkb-evidence)"
-                      : f.color_theme === "publication"
-                        ? "var(--bkb-publication)"
-                        : "var(--bkb-primary)";
-                return (
-                  <Link
-                    key={i}
-                    href={f.link}
-                    className="bkb-card"
-                    style={{
-                      padding: 28,
-                      textDecoration: "none",
-                      color: "inherit",
-                      display: "block",
-                      borderTop: `2px solid ${accent}`,
-                      borderRadius: 0,
-                    }}
-                  >
-                    <div
-                      style={{
-                        width: 44,
-                        height: 44,
-                        borderRadius: 8,
-                        background: `color-mix(in oklch, ${accent}, transparent 90%)`,
-                        color: accent,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        marginBottom: 16,
-                      }}
-                    >
-                      <Icon className="w-5 h-5" />
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", borderTop: "1px solid var(--bkb-border)" }}>
+              {Array.isArray(yaml.whatisbrainkb.bullet_points) &&
+                yaml.whatisbrainkb.bullet_points.map((p: any, i: number) => (
+                  <div key={i} style={{ padding: "30px 30px 0", borderLeft: i ? "1px solid var(--bkb-border)" : "none" }}>
+                    <div style={{ fontFamily: FONTS.mono, fontSize: 13, color: "var(--bkb-accent)", marginBottom: 24 }}>
+                      {String(i + 1).padStart(2, "0")}
                     </div>
-                    <h3
-                      style={{
-                        fontFamily: FONTS.display,
-                        fontSize: 22,
-                        margin: "0 0 6px",
-                        letterSpacing: "-0.01em",
-                        fontWeight: 400,
-                      }}
-                    >
-                      {f.title}
+                    <h3 style={{ fontFamily: FONTS.display, fontSize: 22, fontWeight: 400, letterSpacing: "-0.01em", margin: "0 0 10px" }}>
+                      {p.heading}
                     </h3>
-                    <div style={{ fontSize: 12, color: "var(--bkb-textSubtle)", marginBottom: 12 }}>
-                      {f.short_description}
-                    </div>
-                    <p style={{ fontSize: 13, color: "var(--bkb-textMuted)", lineHeight: 1.6, margin: 0 }}>
-                      {f.description}
-                    </p>
-                  </Link>
-                );
-              })}
-          </div>
-        </section>
-
-        {/* ── What is BrainKB ──────────────────────────────────────── */}
-        <section
-          style={{
-            padding: "96px 64px",
-            background: "var(--bkb-surfaceAlt)",
-            borderTop: "1px solid var(--bkb-border)",
-            borderBottom: "1px solid var(--bkb-border)",
-          }}
-        >
-          <div style={{ maxWidth: 1200, margin: "0 auto" }}>
-            <div style={{ maxWidth: 720, marginBottom: 56 }}>
-              <SectionTitle>{yaml.whatisbrainkb?.title || "What is BrainKB?"}</SectionTitle>
-              <SectionLead>
-                {yaml.whatisbrainkb?.subtitle ||
-                  "BrainKB is a platform designed to support neuroscience research by structuring and organizing scientific knowledge using knowledge graphs (KGs) for delivering evidence-based insights."}
-              </SectionLead>
+                    <p style={{ fontSize: 13.5, color: "var(--bkb-textMuted)", lineHeight: 1.6, margin: 0 }}>{p.title}</p>
+                  </div>
+                ))}
             </div>
-            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
-              {Array.isArray(yaml.whatisbrainkb?.bullet_points) &&
-                yaml.whatisbrainkb.bullet_points.map((p: any, i: number) => {
-                  const Icon = iconBySlug(p.icon_slug);
-                  return (
-                    <div key={i} className="bkb-card" style={{ padding: 24 }}>
-                      <div
-                        style={{
-                          width: 36,
-                          height: 36,
-                          borderRadius: 6,
-                          background: "var(--bkb-surfaceAlt)",
-                          color: "var(--bkb-primary)",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          marginBottom: 14,
-                        }}
-                      >
-                        <Icon className="w-4 h-4" />
-                      </div>
-                      <h3
-                        style={{
-                          fontFamily: FONTS.display,
-                          fontSize: 18,
-                          margin: "0 0 8px",
-                          letterSpacing: "-0.01em",
-                          fontWeight: 400,
-                        }}
-                      >
-                        {p.heading}
-                      </h3>
-                      <p style={{ fontSize: 12, color: "var(--bkb-textMuted)", lineHeight: 1.55, margin: 0 }}>
-                        {p.title}
-                      </p>
-                    </div>
-                  );
-                })}
+          </section>
+        )}
+
+        {/* ── AbstractAtlas (what users can explore) ───────────────── */}
+        {yaml.abstractatlas && (
+          <section style={{ background: "linear-gradient(135deg, #e7efe9 0%, #eef2ed 100%)", borderTop: "1px solid var(--bkb-border)", borderBottom: "1px solid var(--bkb-border)" }}>
+            <div style={{ padding: "104px 64px", maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }}>
+              <div>
+                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
+                  <span style={{ fontFamily: FONTS.mono, fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--bkb-accent)", fontWeight: 600 }}>
+                    {yaml.abstractatlas.eyebrow || "Explore"}
+                  </span>
+                  {yaml.abstractatlas.badge && (
+                    <span style={{ fontFamily: FONTS.mono, fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--bkb-publication)", border: "1px solid color-mix(in oklch, var(--bkb-publication), transparent 55%)", borderRadius: 999, padding: "2px 9px" }}>
+                      {yaml.abstractatlas.badge}
+                    </span>
+                  )}
+                </div>
+                <SectionTitle size={42}>{yaml.abstractatlas.title}</SectionTitle>
+                {yaml.abstractatlas.description && (
+                  <p style={{ fontSize: 16, color: "var(--bkb-textMuted)", lineHeight: 1.7, margin: "18px 0 28px", maxWidth: 520 }}>
+                    {yaml.abstractatlas.description}
+                  </p>
+                )}
+                <a
+                  href={yaml.abstractatlas.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="bkb-btn bkb-btn-primary"
+                  style={{ textDecoration: "none" }}
+                >
+                  {yaml.abstractatlas.button_text || "Open AbstractAtlas"} →
+                </a>
+              </div>
+              <a
+                href={yaml.abstractatlas.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  display: "block",
+                  borderRadius: 16,
+                  overflow: "hidden",
+                  border: "1px solid var(--bkb-border)",
+                  background: "#fff",
+                  boxShadow: "0 24px 50px -26px rgba(0,0,0,0.25)",
+                  padding: 8,
+                }}
+              >
+                <Image
+                  src={yaml.abstractatlas.image}
+                  alt="AbstractAtlas — interactive map of the neuroscience literature"
+                  width={1200}
+                  height={680}
+                  style={{ width: "100%", height: "auto", display: "block", borderRadius: 10 }}
+                />
+              </a>
             </div>
-          </div>
-        </section>
+          </section>
+        )}
 
-        {/* ── Use Cases ────────────────────────────────────────────── */}
+        {/* ── Use Cases (where it applies) ─────────────────────────── */}
         {yaml.usecases && (
-          <section style={{ padding: "96px 64px", maxWidth: 1200, margin: "0 auto" }}>
-            <div style={{ maxWidth: 720, marginBottom: 56 }}>
+          <section style={{ padding: "104px 64px", maxWidth: 1200, margin: "0 auto" }}>
+            <div style={{ maxWidth: 720, marginBottom: 48 }}>
+              <Eyebrow color="#b4451f">{yaml.usecases.eyebrow || "In Practice"}</Eyebrow>
               <SectionTitle>{yaml.usecases.title || "Use Cases"}</SectionTitle>
               <SectionLead>{yaml.usecases.subtitle}</SectionLead>
-              {yaml.usecases.description && (
-                <div style={{ fontSize: 12, color: "var(--bkb-textSubtle)", marginTop: 8, fontStyle: "italic" }}>
-                  {yaml.usecases.description}
-                </div>
-              )}
             </div>
 
-            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 24 }}>
-              {Array.isArray(yaml.usecases?.cases) &&
+            <div className="bkb-card" style={{ padding: 0, borderRadius: 16, overflow: "hidden" }}>
+              {Array.isArray(yaml.usecases.cases) &&
                 yaml.usecases.cases.map((c: any, i: number) => {
-                  const Icon = iconBySlug(c.icon_slug);
-                  const isFuture = c.is_future || false;
-                  const statusChip = c.status === "available"
-                    ? { label: "Available", color: "var(--bkb-accent)" }
-                    : c.status === "partially_available"
-                      ? { label: "Partially available", color: "var(--bkb-primary)" }
-                      : c.status === "in_development"
-                        ? { label: "In development", color: "var(--bkb-publication)" }
-                        : { label: "Coming soon", color: "var(--bkb-textMuted)" };
+                  const pill = STATUS_PILL[c.status] || STATUS_PILL.coming_soon;
+                  const href = c.use_link || c.discussion_link || null;
+                  const linkExternal = href?.startsWith?.("http");
                   return (
                     <div
                       key={i}
-                      className="bkb-card"
                       style={{
-                        padding: 22,
-                        borderStyle: isFuture ? "dashed" : "solid",
-                        opacity: isFuture ? 0.7 : 1,
+                        display: "grid",
+                        gridTemplateColumns: "110px minmax(190px, 1fr) 1.4fr 150px 64px",
+                        gap: 24,
+                        alignItems: "center",
+                        padding: "26px 32px",
+                        borderTop: i ? "1px solid var(--bkb-border)" : "none",
                       }}
                     >
-                      <div style={{ display: "flex", alignItems: "start", gap: 14, marginBottom: 12 }}>
-                        <div
-                          style={{
-                            width: 36,
-                            height: 36,
-                            borderRadius: 6,
-                            background: "var(--bkb-surfaceAlt)",
-                            color: "var(--bkb-primary)",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            flexShrink: 0,
-                          }}
-                        >
-                          <Icon className="w-4 h-4" />
-                        </div>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <h3
-                            style={{
-                              fontFamily: FONTS.display,
-                              fontSize: 19,
-                              margin: "0 0 2px",
-                              letterSpacing: "-0.01em",
-                              fontWeight: 400,
-                            }}
-                          >
-                            {c.title}
-                          </h3>
-                          <div style={{ fontSize: 11, color: "var(--bkb-textSubtle)" }}>{c.case_number}</div>
-                        </div>
+                      <div style={{ fontFamily: FONTS.mono, fontSize: 12, color: "var(--bkb-textSubtle)", letterSpacing: "0.06em" }}>
+                        {`Case ${String(i + 1).padStart(2, "0")}`}
                       </div>
-                      <p style={{ fontSize: 13, color: "var(--bkb-textMuted)", lineHeight: 1.55, margin: "0 0 14px" }}>
-                        {c.description}
-                      </p>
-                      <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 11, color: "var(--bkb-textMuted)", marginBottom: 14 }}>
-                        {isFuture ? (
-                          <span>
-                            <CheckCircle className="inline w-3 h-3 mr-1" /> Coming soon
-                          </span>
-                        ) : (
-                          <>
-                            <span><CheckCircle className="inline w-3 h-3 mr-1" /> Ingestion process</span>
-                            <span><Eye className="inline w-3 h-3 mr-1" /> Public view & interactions</span>
-                            <span><MessageSquare className="inline w-3 h-3 mr-1" /> Public feedback</span>
-                          </>
-                        )}
-                      </div>
-                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
-                        <span
-                          className="bkb-chip"
-                          style={{ borderColor: statusChip.color, color: statusChip.color, background: "transparent" }}
-                        >
-                          {statusChip.label}
+                      <h3 style={{ fontFamily: FONTS.display, fontSize: 21, fontWeight: 400, letterSpacing: "-0.01em", margin: 0 }}>{c.title}</h3>
+                      <p style={{ fontSize: 13.5, color: "var(--bkb-textMuted)", lineHeight: 1.55, margin: 0 }}>{c.description}</p>
+                      <div>
+                        <span style={{ fontSize: 12, fontWeight: 600, padding: "5px 12px", borderRadius: 999, color: pill.fg, background: pill.bg, whiteSpace: "nowrap" }}>
+                          {pill.label}
                         </span>
-                        {c.discussion_link && (
-                          <a
-                            href={c.discussion_link}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            style={{ fontSize: 12, color: "var(--bkb-primary)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 4 }}
+                      </div>
+                      <div style={{ textAlign: "right" }}>
+                        {href && (
+                          <Link
+                            href={href}
+                            target={linkExternal ? "_blank" : "_self"}
+                            rel={linkExternal ? "noopener noreferrer" : ""}
+                            style={{ fontSize: 13, fontWeight: 600, color: "var(--bkb-accent)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 4 }}
                           >
-                            View discussion <ExternalLink className="w-3 h-3" />
-                          </a>
+                            View <span>→</span>
+                          </Link>
                         )}
                       </div>
-                      {(c.status === "available" || c.status === "partially_available") && c.use_link && (
-                        <Link
-                          href={c.use_link}
-                          className="bkb-btn bkb-btn-ghost"
-                          style={{ marginTop: 12, width: "100%", justifyContent: "center", textDecoration: "none" }}
-                        >
-                          {c.use_link_text || "Open"}
-                        </Link>
-                      )}
                     </div>
                   );
                 })}
             </div>
 
-            {yaml.usecases.info_box && (
-              <div className="bkb-card" style={{ padding: 24, background: "var(--bkb-surfaceAlt)" }}>
-                <div style={{ display: "flex", gap: 14, alignItems: "start" }}>
-                  <div
-                    style={{
-                      width: 36,
-                      height: 36,
-                      borderRadius: 6,
-                      background: "var(--bkb-surface)",
-                      color: "var(--bkb-primary)",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      flexShrink: 0,
-                    }}
-                  >
-                    <AlertCircle className="w-4 h-4" />
-                  </div>
-                  <div style={{ flex: 1 }}>
-                    <h3
-                      style={{
-                        fontFamily: FONTS.display,
-                        fontSize: 20,
-                        margin: "0 0 8px",
-                        letterSpacing: "-0.01em",
-                        fontWeight: 400,
-                      }}
-                    >
-                      {yaml.usecases.info_box.title}
-                    </h3>
-                    <p style={{ fontSize: 13, color: "var(--bkb-textMuted)", lineHeight: 1.6, margin: "0 0 14px" }}>
-                      {yaml.usecases.info_box.description}
-                    </p>
-                    {Array.isArray(yaml.usecases?.info_box?.components) && (
-                      <ul style={{ margin: "0 0 18px", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
-                        {yaml.usecases.info_box.components.map((comp: any, ci: number) => (
-                          <li key={ci} style={{ fontSize: 13, color: "var(--bkb-textMuted)", lineHeight: 1.5 }}>
-                            <span style={{ color: "var(--bkb-primary)", marginRight: 6 }}>•</span>
-                            <strong style={{ color: "var(--bkb-text)" }}>{comp.label}:</strong> {comp.description}
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                    {yaml.usecases.info_box.footer_note && (
-                      <p style={{ fontSize: 12, color: "var(--bkb-textSubtle)", fontStyle: "italic", margin: 0 }}>
-                        {yaml.usecases.info_box.footer_note}
-                      </p>
-                    )}
-                    {yaml.usecases.info_box.discussion_link && (
-                      <a
-                        href={yaml.usecases.info_box.discussion_link}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        style={{ marginTop: 10, fontSize: 12, color: "var(--bkb-primary)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 4 }}
-                      >
-                        {yaml.usecases.info_box.link_text || "View full planning discussion"} <ExternalLink className="w-3 h-3" />
-                      </a>
-                    )}
-                  </div>
+            {yaml.usecases.how_it_works && (
+              <div
+                style={{
+                  marginTop: 28,
+                  background: "linear-gradient(135deg, #14241c, #0e1a14)",
+                  borderRadius: 20,
+                  padding: "48px 52px",
+                  display: "grid",
+                  gridTemplateColumns: "1.25fr 1fr 1fr 1fr",
+                  gap: 40,
+                }}
+              >
+                <div>
+                  <h3 style={{ fontFamily: FONTS.display, fontSize: 27, fontWeight: 400, color: "#f0eee9", margin: "0 0 14px", letterSpacing: "-0.01em" }}>
+                    {yaml.usecases.how_it_works.title}
+                  </h3>
+                  <p style={{ fontSize: 13.5, color: "rgba(240,238,233,0.6)", lineHeight: 1.6, margin: 0 }}>{yaml.usecases.how_it_works.subtitle}</p>
                 </div>
+                {Array.isArray(yaml.usecases.how_it_works.phases) &&
+                  yaml.usecases.how_it_works.phases.map((ph: any, i: number) => (
+                    <div key={i}>
+                      <div style={{ fontFamily: FONTS.mono, fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "#3ecf8e", marginBottom: 14 }}>
+                        {`${String(i + 1).padStart(2, "0")} · ${ph.label}`}
+                      </div>
+                      <p style={{ fontSize: 13.5, color: "rgba(240,238,233,0.75)", lineHeight: 1.6, margin: 0 }}>{ph.description}</p>
+                    </div>
+                  ))}
               </div>
             )}
           </section>
         )}
 
-        {/* ── Statistics ─────────────────────────────────────────────
-        <section
-          style={{
-            padding: "96px 64px",
-            background: "var(--bkb-surfaceAlt)",
-            borderTop: "1px solid var(--bkb-border)",
-            borderBottom: "1px solid var(--bkb-border)",
-          }}
-        >
-          <div style={{ maxWidth: 1200, margin: "0 auto" }}>
-            <div style={{ maxWidth: 720, marginBottom: 56 }}>
-              <SectionTitle>Knowledge Graph Metrics</SectionTitle>
-              <SectionLead>Number of unique samples from different models.</SectionLead>
-              <div style={{ fontSize: 12, color: "var(--bkb-textSubtle)", marginTop: 8, fontStyle: "italic" }}>
-                As of November 2025
+        {/* ── BrainKB Tools (which tools enable it) ────────────────── */}
+        {yaml.tools && (
+          <section style={{ background: "var(--bkb-surface)", borderTop: "1px solid var(--bkb-border)", borderBottom: "1px solid var(--bkb-border)" }}>
+            <div style={{ padding: "104px 64px", maxWidth: 1200, margin: "0 auto" }}>
+              <div style={{ marginBottom: 56 }}>
+                <Eyebrow>{yaml.tools.eyebrow || "The Toolkit"}</Eyebrow>
+                <SectionTitle>{yaml.tools.title || "BrainKB Tools"}</SectionTitle>
+                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, marginTop: 18, flexWrap: "wrap" }}>
+                  <p style={{ fontSize: 16, color: "var(--bkb-textMuted)", lineHeight: 1.65, margin: 0, maxWidth: 640 }}>{yaml.tools.subtitle}</p>
+                  {yaml.tools.more_link && (
+                    <MoreLink href={yaml.tools.more_link} external={false}>
+                      {yaml.tools.more_text || "View all tools"} →
+                    </MoreLink>
+                  )}
+                </div>
               </div>
-            </div>
-            <div
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(4, 1fr)",
-                gap: 1,
-                background: "var(--bkb-border)",
-                border: "1px solid var(--bkb-border)",
-                borderRadius: 8,
-                overflow: "hidden",
-              }}
-            >
-              {Array.isArray(dataCount) &&
-                dataCount.map((count, i) => {
-                  const meta = yaml.boxiconsstatisticscount[i] ?? {};
-                  const Icon = iconBySlug(meta.icon_slug);
-                  const accent = ["var(--bkb-primary)", "var(--bkb-evidence)", "var(--bkb-publication)", "var(--bkb-agent)"][i % 4];
-                  return (
-                    <div key={i} style={{ background: "var(--bkb-surface)", padding: "28px 24px" }}>
-                      <Icon className="w-5 h-5" style={{ color: accent, marginBottom: 14 }} />
-                      <div
-                        style={{
-                          fontFamily: FONTS.display,
-                          fontSize: 44,
-                          letterSpacing: "-0.02em",
-                          color: accent,
-                          fontWeight: 400,
-                          lineHeight: 1,
-                        }}
-                      >
-                        {count || "—"}
-                      </div>
-                      <div style={{ fontSize: 12, color: "var(--bkb-textMuted)", marginTop: 8 }}>{meta.name}</div>
-                      {meta.short_description && (
-                        <div style={{ fontSize: 11, color: "var(--bkb-textSubtle)", marginTop: 4, lineHeight: 1.5 }}>
-                          {meta.short_description}
+              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 22 }}>
+                {Array.isArray(yaml.tools.items) &&
+                  yaml.tools.items.map((t: any, i: number) => {
+                    const isExternal = t.link?.startsWith?.("http");
+                    const isComingSoon = !t.link || t.link === "#";
+                    const color = t.color || TOOL_COLORS[i % TOOL_COLORS.length];
+                    // Mixed-orientation logos: horizontal wordmarks fill width and
+                    // stay short; square/stacked logos fill the tile height so the
+                    // two kinds carry comparable visual weight.
+                    const isSquareLogo = t.logo_orientation === "square";
+                    const logoImgStyle: React.CSSProperties = isSquareLogo
+                      ? { width: "auto", height: "150px", maxWidth: "70%", objectFit: "contain" }
+                      : { width: "auto", height: "auto", maxWidth: "94%", maxHeight: 150, objectFit: "contain" };
+                    const Inner = (
+                      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+                        {t.category && (
+                          <div style={{ fontFamily: FONTS.mono, fontSize: 11, letterSpacing: "0.13em", textTransform: "uppercase", color: "var(--bkb-textSubtle)", marginBottom: 18, textAlign: "right" }}>
+                            {t.category}
+                          </div>
+                        )}
+                        {/* logo — no box; orientation-aware sizing */}
+                        <div
+                          style={{
+                            height: 96,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-start",
+                            marginBottom: 22,
+                          }}
+                        >
+                          {t.logo ? (
+                            <Image src={t.logo} alt={t.name} width={280} height={150} style={logoImgStyle} />
+                          ) : (
+                            <span style={{ fontFamily: FONTS.display, fontSize: 28, color }}>{t.name}</span>
+                          )}
                         </div>
-                      )}
-                    </div>
-                  );
-                })}
-            </div>
-          </div>
-        </section>
-*/}
-        {/* ── Structured Models ────────────────────────────────────── */}
-        <section style={{ padding: "96px 64px", maxWidth: 1200, margin: "0 auto" }}>
-          <div style={{ maxWidth: 720, marginBottom: 56 }}>
-            <SectionTitle>{structuedModelHeaderTitle || "Structured Models"}</SectionTitle>
-            <p
-              style={{ fontSize: 16, color: "var(--bkb-textMuted)", lineHeight: 1.6, margin: "12px 0 0", maxWidth: 720 }}
-              dangerouslySetInnerHTML={{
-                __html: structuedModelHeaderSubTitle || "Structured models used in BrainKB.",
-              }}
-            />
-          </div>
-          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
-            {Array.isArray(yaml.structuredmodelsbox) &&
-              yaml.structuredmodelsbox.map((m: any, i: number) => {
-                const Icon = iconBySlug(m.icon_slug);
-                return (
-                  <Link
-                    key={i}
-                    href={m.links}
-                    target={m.links?.startsWith?.("http") ? "_blank" : "_self"}
-                    rel={m.links?.startsWith?.("http") ? "noopener noreferrer" : ""}
-                    className="bkb-card"
-                    style={{
-                      padding: 22,
+                        <p style={{ fontSize: 14, color: "var(--bkb-textMuted)", lineHeight: 1.65, margin: "0 0 20px", flex: 1 }}>{t.description}</p>
+                        <div style={{ fontSize: 13, fontWeight: 600, color: isComingSoon ? "var(--bkb-textSubtle)" : "var(--bkb-accent)", display: "inline-flex", alignItems: "center", gap: 5 }}>
+                          {isComingSoon ? (
+                            <>{t.link_text || "Coming soon"}</>
+                          ) : (
+                            <>
+                              {t.link_text || "Learn more"}
+                              {isExternal ? <ExternalLink className="w-3.5 h-3.5" /> : <span>→</span>}
+                            </>
+                          )}
+                        </div>
+                      </div>
+                    );
+                    const cardStyle: React.CSSProperties = {
+                      padding: 30,
+                      borderRadius: 16,
                       textDecoration: "none",
                       color: "inherit",
                       display: "block",
-                    }}
-                  >
-                    <div
-                      style={{
-                        width: 36,
-                        height: 36,
-                        borderRadius: 6,
-                        background: "var(--bkb-surfaceAlt)",
-                        color: "var(--bkb-primary)",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        marginBottom: 14,
-                      }}
-                    >
-                      <Icon className="w-4 h-4" />
+                      height: "100%",
+                      background: "var(--bkb-surfaceAlt)",
+                    };
+                    return isComingSoon ? (
+                      <div key={i} className="bkb-card" style={cardStyle}>{Inner}</div>
+                    ) : (
+                      <Link
+                        key={i}
+                        href={t.link}
+                        target={isExternal ? "_blank" : "_self"}
+                        rel={isExternal ? "noopener noreferrer" : ""}
+                        className="bkb-card"
+                        style={cardStyle}
+                      >
+                        {Inner}
+                      </Link>
+                    );
+                  })}
+              </div>
+            </div>
+          </section>
+        )}
+
+        {/* ── See It in Action (how it works) ──────────────────────── */}
+        {videos.length > 0 && (
+          <section style={{ padding: "104px 64px", maxWidth: 1200, margin: "0 auto" }}>
+            <VideoCarousel
+              videos={videos}
+              eyebrow={yaml.videos.eyebrow}
+              headline={yaml.videos.headline || yaml.videos.title}
+              description={yaml.videos.description}
+              buttonText={yaml.videos.button_text}
+            />
+          </section>
+        )}
+
+        {/* ── Structured Models (what models support it) ───────────── */}
+        <section style={{ background: "var(--bkb-surface)", borderTop: "1px solid var(--bkb-border)", borderBottom: "1px solid var(--bkb-border)" }}>
+          <div style={{ padding: "104px 64px", maxWidth: 1200, margin: "0 auto" }}>
+            <div style={{ marginBottom: 48 }}>
+              <Eyebrow>Foundations</Eyebrow>
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 32, flexWrap: "wrap" }}>
+                <SectionTitle>{structuedModelHeaderTitle || "Structured Models"}</SectionTitle>
+                <MoreLink href="https://sensein.group/brainkbdocs/">View all models →</MoreLink>
+              </div>
+              <p style={{ fontSize: 16, color: "var(--bkb-textMuted)", lineHeight: 1.65, margin: "16px 0 0", maxWidth: 660 }}>
+                These models provide the shared structure behind BrainKB&apos;s graph, tools, and use cases.
+              </p>
+            </div>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
+              {Array.isArray(yaml.structuredmodelsbox) &&
+                yaml.structuredmodelsbox.map((m: any, i: number) => {
+                  const external = m.links?.startsWith?.("http");
+                  const coming = m.links === "#";
+                  const Inner = (
+                    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+                      <div style={{ fontFamily: FONTS.mono, fontSize: 15, color: "#b4451f", marginBottom: 18 }}>&lt;/&gt;</div>
+                      <h3 style={{ fontFamily: FONTS.display, fontSize: 20, fontWeight: 400, letterSpacing: "-0.01em", margin: "0 0 10px", lineHeight: 1.2 }}>{m.title}</h3>
+                      <p style={{ fontSize: 13, color: "var(--bkb-textMuted)", lineHeight: 1.55, margin: "0 0 18px", flex: 1 }}>{m.description}</p>
+                      <div style={{ fontSize: 13, fontWeight: 600, color: coming ? "var(--bkb-textSubtle)" : "var(--bkb-accent)", display: "inline-flex", alignItems: "center", gap: 5 }}>
+                        {coming ? (
+                          "Coming soon"
+                        ) : (
+                          <>
+                            Read more {external ? <ExternalLink className="w-3.5 h-3.5" /> : <span>→</span>}
+                          </>
+                        )}
+                      </div>
                     </div>
-                    <h3
-                      style={{
-                        fontFamily: FONTS.display,
-                        fontSize: 18,
-                        margin: "0 0 8px",
-                        letterSpacing: "-0.01em",
-                        fontWeight: 400,
-                      }}
+                  );
+                  const cs: React.CSSProperties = {
+                    padding: 24,
+                    borderRadius: 14,
+                    textDecoration: "none",
+                    color: "inherit",
+                    display: "block",
+                    height: "100%",
+                    background: "var(--bkb-surfaceAlt)",
+                  };
+                  return coming ? (
+                    <div key={i} className="bkb-card" style={cs}>{Inner}</div>
+                  ) : (
+                    <Link
+                      key={i}
+                      href={m.links}
+                      target={external ? "_blank" : "_self"}
+                      rel={external ? "noopener noreferrer" : ""}
+                      className="bkb-card"
+                      style={cs}
                     >
-                      {m.title}
-                    </h3>
-                    <p style={{ fontSize: 12, color: "var(--bkb-textMuted)", lineHeight: 1.55, margin: "0 0 14px", minHeight: 48 }}>
-                      {m.description}
-                    </p>
-                    <div style={{ fontSize: 12, color: "var(--bkb-primary)", display: "inline-flex", alignItems: "center", gap: 4, fontWeight: 500 }}>
-                      {m.links === "#" ? "Coming soon" : "Read more"} →
-                    </div>
-                  </Link>
-                );
-              })}
+                      {Inner}
+                    </Link>
+                  );
+                })}
+            </div>
           </div>
         </section>
 
-        {/* ── Publications ─────────────────────────────────────────── */}
-        <section
-          style={{
-            padding: "96px 64px",
-            background: "var(--bkb-surfaceAlt)",
-            borderTop: "1px solid var(--bkb-border)",
-          }}
-        >
-          <div style={{ maxWidth: 1000, margin: "0 auto" }} className="bkb-card">
-            <div style={{ padding: "40px 44px" }}>
-              <SectionTitle size={32}>
-                {yaml.publications?.title || "Powered by Advanced AI Agents"}
-              </SectionTitle>
-              <p style={{ fontSize: 15, color: "var(--bkb-textMuted)", lineHeight: 1.65, margin: "12px 0 0" }}>
-                {yaml.publications?.description}
-              </p>
+        {/* ── Powered by AI agents (technical credibility, dark) ───── */}
+        <section style={{ background: "linear-gradient(160deg, #15271e 0%, #0c1611 60%)", borderTop: "1px solid rgba(255,255,255,0.06)" }}>
+          <div style={{ padding: "104px 64px", maxWidth: 1200, margin: "0 auto" }}>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
+              <div>
+                <div style={{ fontFamily: FONTS.mono, fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "#3ecf8e", fontWeight: 600, marginBottom: 18 }}>
+                  {yaml.publications?.eyebrow || "Under the Hood"}
+                </div>
+                <h2 style={{ fontFamily: FONTS.display, fontSize: 44, fontWeight: 400, color: "#f0eee9", letterSpacing: "-0.02em", lineHeight: 1.1, margin: 0 }}>
+                  {yaml.publications?.title || "Powered by advanced AI agents."}
+                </h2>
+                <p style={{ fontSize: 16, color: "rgba(240,238,233,0.7)", lineHeight: 1.7, margin: "20px 0 0", maxWidth: 480 }}>
+                  {yaml.publications?.description}
+                </p>
+              </div>
               {yaml.publications?.citation && (
-                <div
-                  style={{
-                    marginTop: 28,
-                    padding: 22,
-                    background: "var(--bkb-surfaceAlt)",
-                    borderLeft: "3px solid var(--bkb-evidence)",
-                    borderRadius: 4,
-                  }}
-                >
-                  <div style={{ fontSize: 11, color: "var(--bkb-textSubtle)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 8 }}>
-                    {yaml.publications.citation.label}
+                <div style={{ border: "1px solid rgba(255,255,255,0.14)", borderRadius: 18, padding: 36, background: "rgba(255,255,255,0.02)" }}>
+                  <div style={{ fontFamily: FONTS.mono, fontSize: 11.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "#3ecf8e", marginBottom: 18 }}>
+                    {(yaml.publications.citation.label || "Research Citation").replace(/:\s*$/, "")}
                   </div>
-                  <p style={{ fontSize: 14, color: "var(--bkb-text)", lineHeight: 1.65, margin: "0 0 16px" }}>
+                  <p style={{ fontFamily: FONTS.mono, fontSize: 13.5, color: "rgba(240,238,233,0.85)", lineHeight: 1.7, margin: "0 0 24px" }}>
                     {yaml.publications.citation.text}
                   </p>
                   <a
                     href={yaml.publications.citation.link}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="bkb-btn bkb-btn-primary"
-                    style={{ textDecoration: "none" }}
+                    style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "#1db981", color: "#0c1611", fontWeight: 600, fontSize: 14, padding: "11px 20px", borderRadius: 10, textDecoration: "none" }}
                   >
-                    <Sparkles className="w-3 h-3" /> {yaml.publications.citation.button_text || "See research paper"}
+                    <Sparkles className="w-3.5 h-3.5" /> {yaml.publications.citation.button_text || "See research paper"} →
                   </a>
                 </div>
               )}
diff --git a/src/app/tools-and-libraries/page.tsx b/src/app/tools-and-libraries/page.tsx
index e31afc9..f5569c8 100644
--- a/src/app/tools-and-libraries/page.tsx
+++ b/src/app/tools-and-libraries/page.tsx
@@ -1,162 +1,157 @@
 "use client";
 
-import { Wrench, ExternalLink, Code, Network, Database, Sparkles, CheckCircle } from "lucide-react";
+/**
+ * Tools & Libraries — editorial direction, consistent with the landing page.
+ * Header + capabilities, then a single unified grid of flagship apps (with
+ * logos) and open-source Python libraries.
+ */
+
+import { ExternalLink, Wrench, CheckCircle } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { FONTS } from "@/src/app/components/design-system";
 import yaml from "@/src/config/yaml/tools-libraries.yaml";
 
+function Eyebrow({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ fontFamily: FONTS.mono, fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--bkb-accent)", fontWeight: 600, marginBottom: 18 }}>
+      {children}
+    </div>
+  );
+}
+
+const CAPABILITIES = [
+  { h: "Knowledge Extraction", d: "Extract structured data from text, PDFs, and other unstructured sources." },
+  { h: "Provenance Tracking", d: "Track data lineage and changes across the knowledge graph over time." },
+  { h: "Advanced Analytics", d: "Compare, analyze, and reason over structured neuroscience knowledge." },
+];
+
 export default function ToolsLibraries() {
-    const libraries = yaml.libraries;
+  const libraries = yaml.libraries;
+  const tools = (yaml as any).tools as any[] | undefined;
 
-    return (
-        <div className="min-h-screen bg-gradient-to-br from-gray-50 to-sky-50">
-            {/* Hero Section */}
-            <section className="py-20 bg-gradient-to-br from-sky-50 via-white to-emerald-50">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="text-center mt-[30px]">
-                        <div className="inline-flex items-center justify-center mb-6">
-                            <div className="w-16 h-16 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg flex items-center justify-center">
-                                <Wrench className="w-8 h-8 text-white" />
-                            </div>
-                        </div>
-                        <h1 className="text-5xl sm:text-6xl font-extrabold mb-6">
-                            <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-600 via-blue-600 to-emerald-600">
-                                Tools & Libraries
-                            </span>
-                        </h1>
-                        <p className="text-xl sm:text-2xl text-gray-700 max-w-3xl mx-auto leading-relaxed">
-                            Open-source Python libraries designed to support and enhance neuroscience research
-                        </p>
-                    </div>
-                </div>
-            </section>
+  // One unified list: flagship apps (with logos) first, then libraries.
+  const items = [
+    ...(Array.isArray(tools) ? tools.map((t: any) => ({ ...t, _kind: "tool" })) : []),
+    ...(Array.isArray(libraries) ? libraries.map((l: any) => ({ ...l, _kind: "lib" })) : []),
+  ];
 
-            {/* Overview Section */}
-            <section className="py-20 bg-white">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="relative overflow-hidden bg-gradient-to-br from-sky-50 via-white to-emerald-50 rounded-2xl p-8 md:p-12 border-2 border-sky-200 shadow-xl">
-                        {/* Decorative background elements */}
-                        <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-sky-200/20 to-emerald-200/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
-                        <div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-emerald-200/20 to-sky-200/20 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2"></div>
-                        
-                        <div className="relative z-10">
-                            <div className="flex items-center gap-4 mb-8">
-                                <div className="w-14 h-14 bg-gradient-to-br from-sky-500 to-emerald-500 rounded-xl flex items-center justify-center shadow-lg">
-                                    <Code className="w-7 h-7 text-white" />
-                                </div>
-                                <h2 className="text-4xl sm:text-5xl font-bold text-gray-900">
-                                    Overview
-                                </h2>
-                            </div>
-                            
-                            <p className="text-lg sm:text-xl text-gray-700 leading-relaxed mb-8 max-w-4xl">
-                                BrainKB provides a set of tools and libraries designed to support and enhance neuroscience research. 
-                                Developed as part of the BrainKB project, these tools and libraries facilitate operations such as 
-                                knowledge extraction, structured representation, provenance tracking, and advanced analytics.
-                            </p>
-                            
-                            <div className="bg-white/60 backdrop-blur-sm rounded-xl p-6 border border-sky-100 shadow-md">
-                                <p className="text-base text-gray-700 font-medium mb-4 flex items-center gap-2">
-                                    <Sparkles className="w-5 h-5 text-sky-600" />
-                                    <span>Flexible Integration</span>
-                                </p>
-                                <p className="text-gray-600 leading-relaxed">
-                                    While these tools are (or will be) integrated into the BrainKB platform to support the BrainKB objective, 
-                                    they are also designed for <strong className="text-gray-900">independent use</strong>, offering flexibility 
-                                    for researchers and developers working in neuroscience and related fields.
-                                </p>
-                            </div>
-                            
-                            {/* Key Capabilities */}
-                            <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
-                                <div className="flex items-start gap-3 p-4 bg-white/60 backdrop-blur-sm rounded-lg border border-sky-100">
-                                    <CheckCircle className="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" />
-                                    <div>
-                                        <h3 className="font-semibold text-gray-900 mb-1">Knowledge Extraction</h3>
-                                        <p className="text-sm text-gray-600">Extract structured data from various sources</p>
-                                    </div>
-                                </div>
-                                <div className="flex items-start gap-3 p-4 bg-white/60 backdrop-blur-sm rounded-lg border border-sky-100">
-                                    <CheckCircle className="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" />
-                                    <div>
-                                        <h3 className="font-semibold text-gray-900 mb-1">Provenance Tracking</h3>
-                                        <p className="text-sm text-gray-600">Track data lineage and changes</p>
-                                    </div>
-                                </div>
-                                <div className="flex items-start gap-3 p-4 bg-white/60 backdrop-blur-sm rounded-lg border border-sky-100">
-                                    <CheckCircle className="w-5 h-5 text-emerald-600 flex-shrink-0 mt-0.5" />
-                                    <div>
-                                        <h3 className="font-semibold text-gray-900 mb-1">Advanced Analytics</h3>
-                                        <p className="text-sm text-gray-600">Perform complex data analysis</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
+  return (
+    <div style={{ background: "#f0eee9" }}>
+      {/* ── Header + capabilities ─────────────────────────────────── */}
+      <section style={{ padding: "96px 64px 64px", maxWidth: 1200, margin: "0 auto" }}>
+        <div style={{ maxWidth: 760 }}>
+          <Eyebrow>Open Source</Eyebrow>
+          <h1 style={{ fontFamily: FONTS.display, fontSize: 52, lineHeight: 1.05, margin: 0, letterSpacing: "-0.02em", fontWeight: 400 }}>
+            Tools &amp; libraries for neuroscience research.
+          </h1>
+          <p style={{ fontSize: 17, color: "var(--bkb-textMuted)", lineHeight: 1.7, margin: "20px 0 0" }}>
+            BrainKB provides a set of tools and libraries that facilitate knowledge extraction, structured
+            representation, provenance tracking, and advanced analytics. While integrated into the BrainKB
+            platform, each is also designed for <strong style={{ color: "var(--bkb-text)" }}>independent use</strong> in
+            your own research.
+          </p>
+        </div>
+
+        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderTop: "1px solid var(--bkb-border)" }}>
+          {CAPABILITIES.map((c, i) => (
+            <div key={i} style={{ padding: "30px 30px 0", borderLeft: i ? "1px solid var(--bkb-border)" : "none" }}>
+              <CheckCircle style={{ width: 20, height: 20, color: "var(--bkb-accent)", marginBottom: 16 }} />
+              <h3 style={{ fontFamily: FONTS.display, fontSize: 21, fontWeight: 400, letterSpacing: "-0.01em", margin: "0 0 10px" }}>{c.h}</h3>
+              <p style={{ fontSize: 13.5, color: "var(--bkb-textMuted)", lineHeight: 1.6, margin: 0 }}>{c.d}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ── Tools & Libraries grid (white) ────────────────────────── */}
+      <section style={{ background: "var(--bkb-surface)", borderTop: "1px solid var(--bkb-border)", borderBottom: "1px solid var(--bkb-border)" }}>
+        <div style={{ padding: "96px 64px", maxWidth: 1200, margin: "0 auto" }}>
+          <div style={{ maxWidth: 720, marginBottom: 48 }}>
+            <Eyebrow>The Toolkit</Eyebrow>
+            <h2 style={{ fontFamily: FONTS.display, fontSize: 46, lineHeight: 1.06, margin: 0, letterSpacing: "-0.02em", fontWeight: 400 }}>
+              Tools &amp; Libraries
+            </h2>
+            <p style={{ fontSize: 16, color: "var(--bkb-textMuted)", lineHeight: 1.65, margin: "16px 0 0" }}>
+              End-to-end applications and open-source Python libraries built on BrainKB — usable within the platform
+              and standalone in your own research.
+            </p>
+          </div>
 
-            {/* Libraries Section */}
-            <section className="py-20 bg-gradient-to-br from-gray-50 to-sky-50">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="text-center mb-16">
-                        <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
-                            Available Libraries
-                        </h2>
-                        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-                            These tools facilitate operations such as knowledge extraction, structured representation, 
-                            provenance tracking, and advanced analytics. While integrated into BrainKB, they are also 
-                            designed for independent use.
-                        </p>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 22 }}>
+            {items.map((it, index) => {
+              const isExternal = it.link?.startsWith?.("http");
+              const isComingSoon = it._kind === "tool" && (!it.link || it.link === "#");
+              const isSquareLogo = it.logo_orientation === "square";
+              const typeLabel = it._kind === "lib" ? "Python Library" : "Application";
+              const logoStyle: React.CSSProperties = isSquareLogo
+                ? { height: "100%", width: "auto", maxWidth: "70%", objectFit: "contain" }
+                : { height: "auto", width: "auto", maxHeight: 110, maxWidth: "92%", objectFit: "contain" };
+              const linkStyle: React.CSSProperties = {
+                fontSize: 13,
+                fontWeight: 600,
+                color: "var(--bkb-accent)",
+                textDecoration: "none",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 5,
+              };
+              return (
+                <div
+                  key={index}
+                  className="bkb-card"
+                  style={{ padding: 30, borderRadius: 16, background: "var(--bkb-surfaceAlt)", display: "flex", flexDirection: "column" }}
+                >
+                  <div style={{ fontFamily: FONTS.mono, fontSize: 11, letterSpacing: "0.13em", textTransform: "uppercase", color: "var(--bkb-textSubtle)", marginBottom: 18, textAlign: "right" }}>
+                    {typeLabel}
+                  </div>
+
+                  {/* media: big logo, or icon + name for libraries */}
+                  {it.logo ? (
+                    <div style={{ height: 130, display: "flex", alignItems: "center", justifyContent: "flex-start", marginBottom: 20 }}>
+                      <Image src={it.logo} alt={it.name} width={340} height={130} style={logoStyle} />
                     </div>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        {libraries.map((lib, index) => (
-                            <div
-                                key={index}
-                                className="group bg-white rounded-xl p-6 border-2 border-gray-200 hover:border-sky-400 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
-                            >
-                                <div className="flex items-start gap-4">
-                                    <div className="flex-shrink-0">
-                                        <div className="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
-                                            <Wrench className="w-6 h-6 text-white" />
-                                        </div>
-                                    </div>
-                                    <div className="flex-1">
-                                        <h3 className="text-xl font-bold text-gray-900 mb-3">
-                                            {lib.name}
-                                        </h3>
-                                        <p className="text-gray-600 mb-4 leading-relaxed">
-                                            {lib.description}
-                                        </p>
-                                        <div className="flex flex-wrap gap-3">
-                                            {lib.link_library && (
-                                                <a
-                                                    href={lib.link_library}
-                                                    target="_blank"
-                                                    rel="noopener noreferrer"
-                                                    className="inline-flex items-center gap-2 px-4 py-2 bg-sky-600 text-white rounded-lg text-sm font-medium hover:bg-sky-700 transition-colors shadow-md hover:shadow-lg"
-                                                >
-                                                    <ExternalLink className="w-4 h-4" />
-                                                    Visit Library
-                                                </a>
-                                            )}
-                                            {lib.link_example && (
-                                                <a
-                                                    href={lib.link_example}
-                                                    target="_blank"
-                                                    rel="noopener noreferrer"
-                                                    className="inline-flex items-center gap-2 px-4 py-2 bg-white text-sky-600 border-2 border-sky-600 rounded-lg text-sm font-medium hover:bg-sky-50 transition-colors"
-                                                >
-                                                    <ExternalLink className="w-4 h-4" />
-                                                    View Example
-                                                </a>
-                                            )}
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
+                  ) : (
+                    <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 20, minHeight: 56 }}>
+                      <span style={{ width: 48, height: 48, borderRadius: 12, background: "var(--bkb-accent)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
+                        <Wrench style={{ width: 22, height: 22 }} />
+                      </span>
+                      <h3 style={{ fontFamily: FONTS.display, fontSize: 26, fontWeight: 400, letterSpacing: "-0.01em", margin: 0 }}>{it.name}</h3>
                     </div>
+                  )}
+
+                  <p style={{ fontSize: 14, color: "var(--bkb-textMuted)", lineHeight: 1.65, margin: "0 0 20px", flex: 1 }}>{it.description}</p>
+
+                  <div style={{ display: "flex", flexWrap: "wrap", gap: 22 }}>
+                    {it._kind === "tool" &&
+                      (isComingSoon ? (
+                        <span style={{ ...linkStyle, color: "var(--bkb-textSubtle)" }}>{it.link_text || "Coming soon"}</span>
+                      ) : isExternal ? (
+                        <a href={it.link} target="_blank" rel="noopener noreferrer" style={linkStyle}>
+                          {it.link_text || "Learn more"} <ExternalLink style={{ width: 14, height: 14 }} />
+                        </a>
+                      ) : (
+                        <Link href={it.link} style={linkStyle}>
+                          {it.link_text || "Open"} <span>→</span>
+                        </Link>
+                      ))}
+                    {it.link_library && (
+                      <a href={it.link_library} target="_blank" rel="noopener noreferrer" style={linkStyle}>
+                        Visit library <ExternalLink style={{ width: 14, height: 14 }} />
+                      </a>
+                    )}
+                    {it.link_example && (
+                      <a href={it.link_example} target="_blank" rel="noopener noreferrer" style={{ ...linkStyle, color: "var(--bkb-textMuted)" }}>
+                        View example <ExternalLink style={{ width: 14, height: 14 }} />
+                      </a>
+                    )}
+                  </div>
                 </div>
-            </section>
+              );
+            })}
+          </div>
         </div>
-    );
+      </section>
+    </div>
+  );
 }
diff --git a/src/app/user/synth-scholar/page.tsx b/src/app/user/synth-scholar/page.tsx
index 38ff778..6d166c3 100644
--- a/src/app/user/synth-scholar/page.tsx
+++ b/src/app/user/synth-scholar/page.tsx
@@ -26,6 +26,7 @@ import { FONTS, Icon } from "@/src/app/components/design-system";
 import {
   useReviews,
   useReview,
+  useReviewLog,
   useCreateReview,
   useCreateCompareReview,
   useDeleteReview,
@@ -45,6 +46,12 @@ import type {
   RunReviewRequest,
 } from "@/src/types/synthScholar";
 import { PlanConfirmDialog } from "@/src/app/components/synth-scholar/PlanConfirmDialog";
+import { ReviewActionsDropdown } from "@/src/app/components/synth-scholar/ReviewActionsDropdown";
+import { InfoPopover } from "@/src/app/components/synth-scholar/InfoPopover";
+import { FIELD_GUIDES } from "@/src/app/components/synth-scholar/fieldGuides";
+import { ReviewFormGuide } from "@/src/app/components/synth-scholar/ReviewFormGuide";
+import { MarkdownContent } from "@/src/app/components/synth-scholar/MarkdownContent";
+import { ProvenanceTimelineOwner } from "@/src/app/components/synth-scholar/ProvenanceTimelineOwner";
 
 // OpenRouter model catalogue. Slugs use Anthropic's API-ID format (hyphens, not
 // dots) — `anthropic/claude-opus-4.7` is NOT a valid OpenRouter slug; OpenRouter
@@ -231,6 +238,84 @@ const EXAMPLES: ExampleProtocol[] = [
       auto_confirm: false,
     }),
   },
+  {
+    id: "voice-mh",
+    label: "Vocal biomarkers: depression & anxiety (PRISMA-ScR)",
+    description:
+      "Scoping review of speech/voice biomarkers for depression and anxiety, grouped by disorder cohort. Custom charting questions covering populations, speech tasks, features, models and comorbidity; QUADAS-2 appraisal; pauses for plan review.",
+    apply: (base) => ({
+      ...base,
+      title: "Vocal Biomarkers for Depression and Anxiety Detection: A Scoping Review",
+      objective:
+        "Map the evidence base on vocal biomarkers — acoustic, prosodic, articulatory, and learned/DNN speech representations — for depression and anxiety in adults. Catalogue populations, study designs, speech tasks, extracted features, modeling approaches, and reported performance; identify gaps (underrepresented demographics, feature types, comorbidity reporting); and compare the depression and anxiety literatures side by side.",
+      pico_population:
+        "Adults (18+) with depression or anxiety, identified by clinically validated diagnosis OR validated self-report instruments (PHQ-9, BDI, HAM-D for depression; GAD-7, HAM-A, STAI for anxiety) in general-population samples. Speakers of any language.",
+      pico_intervention:
+        "Vocal biomarkers derived from speech: hand-crafted acoustic/prosodic/articulatory features (jitter, shimmer, F0, HNR, MFCCs, formants) and/or learned DNN embeddings (wav2vec, HuBERT, Whisper), analysed via correlation, statistical models, or ML/AI models to detect the disorder or estimate its severity.",
+      pico_comparison:
+        "Healthy controls, between-disorder contrasts, or continuous disorder-severity measures (no control group required for inclusion).",
+      pico_outcome:
+        "Reported model/analysis performance (accuracy, AUC, F1, RMSE, R², correlation) and, where present, feature-importance findings. No pooling or standardization across studies.",
+      inclusion_criteria:
+        "Adults 18+. Investigates vocal/speech biomarkers in relation to depression and/or anxiety (diagnosis or severity). Reports which speech task(s) participants performed and which features were used. Reports model performance and, where applicable, statistical significance. Primary empirical, peer-reviewed research published 2010–2026; English language.",
+      exclusion_criteria:
+        "Animal-only or simulation studies with no human participants; no voice/speech data collected or analysed; no reporting of features used; no description of the speech task; conference abstracts without a full paper; theoretical papers with no empirical data; narrative/systematic reviews and meta-analyses; preprints with no peer-reviewed version, theses, dissertations, editorials, opinion pieces; non-English papers; published outside 2010–2026; pediatric-only (<18) samples; no relevance to depression or anxiety.",
+      date_range_start: "2010-01-01",
+      date_range_end: "2026-12-31",
+      rob_tool: "QUADAS-2",
+      charting_questions: [
+        "What population was studied — clinical or general-population sample, and what demographics (age, gender, language) were reported?",
+        "Was the study cross-sectional or longitudinal, and if longitudinal, what was the duration and data-collection frequency?",
+        "Was the design within-subjects, between-subjects, or mixed?",
+        "Was the modeling task framed as classification (diagnostic category) or regression (continuous severity)?",
+        "What speech tasks did participants perform (sustained vowel, read speech, picture description, spontaneous speech, interview)?",
+        "What vocal feature types were extracted (acoustic, linguistic, articulatory, DNN embeddings) and which specific features and extraction tools/libraries (openSMILE, librosa, torchaudio, parselmouth) were used?",
+        "What modeling approach and specific algorithms were used (statistical, classical ML, deep learning)?",
+        "What performance metrics and headline results were reported (accuracy, AUC, F1, RMSE, R²)?",
+        "If feature importance was reported, what method was used, which features were most associated with the disorder, and did they increase or decrease relative to controls/severity?",
+        "Did the study compare hand-crafted features vs DNN embeddings, and what was the reported performance of each?",
+        "Were comorbidities explicitly handled (Yes/No/Not Reported), which comorbidities were allowed in the cohort, and which were excluded?",
+        "How was diagnosis or disorder status assessed (DSM-5, clinician diagnosis, PHQ-9/GAD-7 cutoff, etc.)?",
+      ],
+      appraisal_domains: [
+        "Participant and Sample Quality",
+        "Data Collection Quality",
+        "Feature and Model Quality",
+        "Bias and Transparency",
+      ],
+      // Group studies by disorder cohort (depression vs anxiety), ask each
+      // group the cross-cohort defaults plus the per-cohort overrides below.
+      grouping_dimension: "disorder_cohort",
+      default_group_questions_text: [
+        "How many studies fall in this cohort, and what diagnostic/severity instruments dominate?",
+        "Which speech tasks and feature types are most common in this cohort?",
+        "What modeling approaches and performance ranges are reported in this cohort?",
+        "How is comorbidity handled across studies in this cohort, and which comorbidities recur?",
+        "What demographic or methodological gaps are evident within this cohort?",
+      ].join("\n"),
+      per_group_questions: [
+        {
+          label: "depression",
+          questions: [
+            "Which depression instruments were used (PHQ-9, BDI, HAM-D) and at what cutoffs?",
+            "Which vocal features were most predictive of depression, and in which direction?",
+            "Are severity-regression studies more or less common than binary classification here?",
+          ],
+        },
+        {
+          label: "anxiety",
+          questions: [
+            "Which anxiety instruments were used (GAD-7, HAM-A, STAI) and at what cutoffs?",
+            "Which vocal features were most predictive of anxiety, and in which direction?",
+            "Is anxiety more often studied as a comorbidity than as the primary target?",
+          ],
+        },
+      ],
+      max_results_per_query: 50,
+      biorxiv_days: 730,
+      auto_confirm: false,
+    }),
+  },
 ];
 
 // ── Status chip ─────────────────────────────────────────────────────
@@ -367,10 +452,23 @@ function _splitLines(text: string): string[] {
     .filter(Boolean);
 }
 
-function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
+function StartReviewForm({
+  onCreated,
+  fullPage = false,
+}: {
+  onCreated: (id: string) => void;
+  /** Render inline as a card (side-panel use) vs. expanded layout for the
+      ?mode=new full-page experience. fullPage opens all sections by default
+      and drops the inner card wrapper since the page already supplies one. */
+  fullPage?: boolean;
+}) {
   const [form, setForm] = React.useState<StartFormState>(INITIAL_FORM);
   const [keyStatus, setKeyStatus] = React.useState<{ source: "personal" | "shared" | "none"; checked: boolean }>({ source: "none", checked: false });
-  const [openSections, setOpenSections] = React.useState({ protocol: true, search: false, metadata: false, rob: false, group: false, run: false });
+  const [openSections, setOpenSections] = React.useState(
+    fullPage
+      ? { protocol: true, search: true, metadata: true, rob: true, group: true, run: true }
+      : { protocol: true, search: false, metadata: false, rob: false, group: false, run: false },
+  );
   const [submitError, setSubmitError] = React.useState<string | null>(null);
   const create = useCreateReview();
   const createCompare = useCreateCompareReview();
@@ -499,15 +597,26 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
   const isSubmitting = create.isPending || createCompare.isPending;
 
   return (
-    <form onSubmit={submit} className="bkb-card" style={{ padding: 18, display: "flex", flexDirection: "column", gap: 12 }}>
-      <div>
-        <h2 style={{ fontFamily: FONTS.display, fontSize: 22, margin: 0, letterSpacing: "-0.01em", fontWeight: 400 }}>
-          Start a new review
-        </h2>
-        <div style={{ fontSize: 12, color: "var(--bkb-textMuted)", marginTop: 4 }}>
-          Configure protocol, search strategy, and run options. Sections are collapsible.
+    <form
+      onSubmit={submit}
+      className={fullPage ? "" : "bkb-card"}
+      style={{
+        padding: fullPage ? 0 : 18,
+        display: "flex",
+        flexDirection: "column",
+        gap: fullPage ? 18 : 12,
+      }}
+    >
+      {!fullPage && (
+        <div>
+          <h2 style={{ fontFamily: FONTS.display, fontSize: 22, margin: 0, letterSpacing: "-0.01em", fontWeight: 400 }}>
+            Start a new review
+          </h2>
+          <div style={{ fontSize: 12, color: "var(--bkb-textMuted)", marginTop: 4 }}>
+            Configure protocol, search strategy, and run options. Sections are collapsible.
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Load-example shortcut. Pre-fills the form with one of the seeded
           protocols so the user can hit Start right away or tweak one field
@@ -586,7 +695,7 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
 
       {/* ── Protocol — basics ─────────────────────────── */}
       <Section title="Protocol — basics" open={openSections.protocol} onToggle={() => toggleSection("protocol")}>
-        <Field label="Title" required>
+        <Field label="Title" required info="title">
           <input
             className="bkb-input"
             required
@@ -595,7 +704,7 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
             placeholder="e.g. Efficacy of CRISPR therapies in monogenic disorders"
           />
         </Field>
-        <Field label="Objective (optional)">
+        <Field label="Objective (optional)" info="objective">
           <input
             className="bkb-input"
             value={form.objective}
@@ -604,30 +713,30 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
           />
         </Field>
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
-          <Field label="P – Population">
+          <Field label="P – Population" info="population">
             <input className="bkb-input" value={form.pico_population} onChange={(e) => update("pico_population", e.target.value)} />
           </Field>
-          <Field label="I – Intervention">
+          <Field label="I – Intervention" info="intervention">
             <input className="bkb-input" value={form.pico_intervention} onChange={(e) => update("pico_intervention", e.target.value)} />
           </Field>
-          <Field label="C – Comparison">
+          <Field label="C – Comparison" info="comparison">
             <input className="bkb-input" value={form.pico_comparison} onChange={(e) => update("pico_comparison", e.target.value)} />
           </Field>
-          <Field label="O – Outcome">
+          <Field label="O – Outcome" info="outcome">
             <input className="bkb-input" value={form.pico_outcome} onChange={(e) => update("pico_outcome", e.target.value)} />
           </Field>
         </div>
-        <Field label="Inclusion criteria">
+        <Field label="Inclusion criteria" info="inclusion">
           <textarea className="bkb-input" rows={2} value={form.inclusion_criteria} onChange={(e) => update("inclusion_criteria", e.target.value)} style={{ fontFamily: FONTS.body, resize: "vertical" }} />
         </Field>
-        <Field label="Exclusion criteria">
+        <Field label="Exclusion criteria" info="exclusion">
           <textarea className="bkb-input" rows={2} value={form.exclusion_criteria} onChange={(e) => update("exclusion_criteria", e.target.value)} style={{ fontFamily: FONTS.body, resize: "vertical" }} />
         </Field>
       </Section>
 
       {/* ── Search strategy ─────────────────────────── */}
       <Section title="Search strategy" open={openSections.search} onToggle={() => toggleSection("search")}>
-        <Field label="Databases (toggle each one)">
+        <Field label="Databases (toggle each one)" info="databases">
           <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
             {ALL_DATABASES.map((db) => {
               const on = form.databases.includes(db.id);
@@ -651,13 +760,13 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
           </div>
         </Field>
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
-          <Field label="Date range start (YYYY-MM-DD)">
+          <Field label="Date range start (YYYY-MM-DD)" info="date_range">
             <input className="bkb-input" value={form.date_range_start} onChange={(e) => update("date_range_start", e.target.value)} placeholder="2019-01-01" />
           </Field>
-          <Field label="Date range end (YYYY-MM-DD)">
+          <Field label="Date range end (YYYY-MM-DD)" info="date_range">
             <input className="bkb-input" value={form.date_range_end} onChange={(e) => update("date_range_end", e.target.value)} placeholder="2024-12-31" />
           </Field>
-          <Field label="Citation hops">
+          <Field label="Citation hops" info="hops">
             <input type="number" className="bkb-input" min={0} max={10} value={form.max_hops} onChange={(e) => update("max_hops", Math.max(0, Math.min(10, Number(e.target.value) || 0)))} />
           </Field>
         </div>
@@ -666,24 +775,24 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
       {/* ── Registration & disclosures ─────────────── */}
       <Section title="Registration & disclosures" open={openSections.metadata} onToggle={() => toggleSection("metadata")}>
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
-          <Field label="Registration number (e.g. PROSPERO)">
+          <Field label="Registration number (e.g. PROSPERO)" info="registration">
             <input className="bkb-input" value={form.registration_number} onChange={(e) => update("registration_number", e.target.value)} />
           </Field>
-          <Field label="Protocol URL">
+          <Field label="Protocol URL" info="protocol_url">
             <input className="bkb-input" value={form.protocol_url} onChange={(e) => update("protocol_url", e.target.value)} />
           </Field>
         </div>
-        <Field label="Funding sources">
+        <Field label="Funding sources" info="funding">
           <textarea className="bkb-input" rows={2} value={form.funding_sources} onChange={(e) => update("funding_sources", e.target.value)} style={{ fontFamily: FONTS.body, resize: "vertical" }} />
         </Field>
-        <Field label="Competing interests">
+        <Field label="Competing interests" info="competing_interests">
           <textarea className="bkb-input" rows={2} value={form.competing_interests} onChange={(e) => update("competing_interests", e.target.value)} style={{ fontFamily: FONTS.body, resize: "vertical" }} />
         </Field>
       </Section>
 
       {/* ── Risk-of-bias & charting ───────────────── */}
       <Section title="Risk-of-bias & charting" open={openSections.rob} onToggle={() => toggleSection("rob")}>
-        <Field label="Risk-of-bias tool">
+        <Field label="Risk-of-bias tool" info="rob_tool">
           <select className="bkb-input" value={form.rob_tool} onChange={(e) => update("rob_tool", e.target.value)}>
             {ROB_TOOLS.map((t) => (
               <option key={t} value={t}>{t}</option>
@@ -711,10 +820,10 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
 
       {/* ── Per-group analysis ─────────────────────── */}
       <Section title="Per-group analysis" open={openSections.group} onToggle={() => toggleSection("group")}>
-        <Field label="Grouping dimension (DataChartingRubric attribute)">
+        <Field label="Grouping dimension (DataChartingRubric attribute)" info="grouping_dimension">
           <input className="bkb-input" value={form.grouping_dimension} onChange={(e) => update("grouping_dimension", e.target.value)} placeholder="disorder_cohort" />
         </Field>
-        <Field label="Default per-group questions (one per line, max 10)">
+        <Field label="Default per-group questions (one per line, max 10)" info="default_group_questions">
           <textarea className="bkb-input" rows={3} value={form.default_group_questions_text} onChange={(e) => update("default_group_questions_text", e.target.value)} style={{ fontFamily: FONTS.body, resize: "vertical" }} />
         </Field>
         <PerGroupQuestionsEditor
@@ -725,7 +834,7 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
 
       {/* ── Run configuration ─────────────────────── */}
       <Section title="Run configuration" open={openSections.run} onToggle={() => toggleSection("run")}>
-        <Field label="Mode">
+        <Field label="Mode" info="mode">
           <div style={{ display: "flex", gap: 6 }}>
             <button type="button" className="bkb-chip" onClick={() => update("compare_mode", false)} style={{ cursor: "pointer", borderColor: !form.compare_mode ? "var(--bkb-primary)" : "var(--bkb-border)", color: !form.compare_mode ? "var(--bkb-primary)" : "var(--bkb-textMuted)" }}>
               Single model
@@ -737,7 +846,7 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
         </Field>
 
         {!form.compare_mode ? (
-          <Field label="Model">
+          <Field label="Model" info="model">
             <select className="bkb-input" value={form.model} onChange={(e) => update("model", e.target.value)}>
               {MODELS_BY_PROVIDER.map(({ provider, models }) => (
                 <optgroup key={provider} label={provider}>
@@ -753,7 +862,7 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
           </Field>
         ) : (
           <>
-            <Field label={`Compare models (pick 2 to 5 — ${form.compare_models.length} selected)`}>
+            <Field label={`Compare models (pick 2 to 5 — ${form.compare_models.length} selected)`} info="model">
               <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                 {MODELS_BY_PROVIDER.map(({ provider, models }) => (
                   <div key={provider}>
@@ -822,7 +931,7 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
                 ))}
               </div>
             </Field>
-            <Field label="Consensus model (defaults to first compare model)">
+            <Field label="Consensus model (defaults to first compare model)" info="consensus_model">
               <select
                 className="bkb-input"
                 value={form.consensus_model}
@@ -843,27 +952,27 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
         )}
 
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
-          <Field label="Max results per query">
+          <Field label="Max results per query" info="max_results">
             <input type="number" className="bkb-input" min={5} max={1000} value={form.max_results_per_query} onChange={(e) => update("max_results_per_query", Math.max(5, Math.min(1000, Number(e.target.value) || 20)))} />
           </Field>
-          <Field label="Related-articles depth">
+          <Field label="Related-articles depth" info="related_depth">
             <input type="number" className="bkb-input" min={0} max={10} value={form.related_depth} onChange={(e) => update("related_depth", Math.max(0, Math.min(10, Number(e.target.value) || 0)))} />
           </Field>
-          <Field label="bioRxiv lookback (days)">
+          <Field label="bioRxiv lookback (days)" info="biorxiv_days">
             <input type="number" className="bkb-input" min={30} max={730} value={form.biorxiv_days} onChange={(e) => update("biorxiv_days", Math.max(30, Math.min(730, Number(e.target.value) || 180)))} />
           </Field>
-          <Field label="Max articles (cap, blank = no cap)">
+          <Field label="Max articles (cap, blank = no cap)" info="max_articles">
             <input type="number" className="bkb-input" min={10} max={10000} value={form.max_articles ?? ""} onChange={(e) => update("max_articles", e.target.value ? Math.max(10, Math.min(10000, Number(e.target.value))) : null)} />
           </Field>
-          <Field label="Concurrency">
+          <Field label="Concurrency" info="concurrency">
             <input type="number" className="bkb-input" min={1} max={50} value={form.concurrency} onChange={(e) => update("concurrency", Math.max(1, Math.min(50, Number(e.target.value) || 5)))} />
           </Field>
-          <Field label="Max plan iterations">
+          <Field label="Max plan iterations" info="max_plan_iterations">
             <input type="number" className="bkb-input" min={1} max={10} value={form.max_plan_iterations} onChange={(e) => update("max_plan_iterations", Math.max(1, Math.min(10, Number(e.target.value) || 3)))} />
           </Field>
         </div>
 
-        <Field label="Synthesis style">
+        <Field label="Synthesis style" info="synthesis_style">
           <select className="bkb-input" value={form.output_synthesis_style} onChange={(e) => update("output_synthesis_style", e.target.value as StartFormState["output_synthesis_style"])}>
             {SYNTHESIS_STYLES.map((s) => (
               <option key={s.id} value={s.id}>{s.label}</option>
@@ -871,7 +980,7 @@ function StartReviewForm({ onCreated }: { onCreated: (id: string) => void }) {
           </select>
         </Field>
 
-        <Field label="Data-extraction items (one per line; leave empty for default set)">
+        <Field label="Data-extraction items (one per line; leave empty for default set)" info="data_items">
           <textarea className="bkb-input" rows={3} value={form.data_items_text} onChange={(e) => update("data_items_text", e.target.value)} style={{ fontFamily: FONTS.body, resize: "vertical" }} />
         </Field>
 
@@ -1254,11 +1363,30 @@ function ApiKeyBanner({ status }: { status: { source: "personal" | "shared" | "n
   );
 }
 
-function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
+function Field({
+  label,
+  required,
+  info,
+  children,
+}: {
+  label: string;
+  required?: boolean;
+  /** Key into FIELD_GUIDES — when present, renders an info-popover next to the label. */
+  info?: keyof typeof FIELD_GUIDES;
+  children: React.ReactNode;
+}) {
+  const guide = info ? FIELD_GUIDES[info] : null;
   return (
     <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-      <span style={{ fontSize: 11, color: "var(--bkb-textMuted)" }}>
+      <span style={{ fontSize: 11, color: "var(--bkb-textMuted)", display: "inline-flex", alignItems: "center" }}>
         {label} {required && <span style={{ color: "var(--bkb-danger)" }}>*</span>}
+        {guide && (
+          <InfoPopover
+            title={guide.title}
+            description={guide.description}
+            link={guide.link}
+          />
+        )}
       </span>
       {children}
     </label>
@@ -1267,6 +1395,29 @@ function Field({ label, required, children }: { label: string; required?: boolea
 
 // ── Reviews list ───────────────────────────────────────────────────
 
+// ── Reviews list filters ────────────────────────────────────────────────
+//
+// At the top of the list we expose a small toolbar so the page stays usable
+// with hundreds of reviews:
+//   • Search box — substring match on title or review_id
+//   • Status filter chips — All / Running / Completed / Failed / Cancelled
+//     (with per-status counts)
+//   • Sort dropdown — newest first (default), oldest first, or by status
+// All client-side; no server-side pagination yet (the /reviews endpoint
+// returns the user's own list, which scales fine in the hundreds).
+
+type StatusFilter = ReviewStatus | "all";
+type SortOrder = "newest" | "oldest" | "status";
+
+const STATUS_FILTERS: ReadonlyArray<{ id: StatusFilter; label: string }> = [
+  { id: "all", label: "All" },
+  { id: "running", label: "Running" },
+  { id: "plan_pending", label: "Plan pending" },
+  { id: "completed", label: "Completed" },
+  { id: "failed", label: "Failed" },
+  { id: "cancelled", label: "Cancelled" },
+];
+
 function ReviewsList({
   selectedId,
   onSelect,
@@ -1275,27 +1426,156 @@ function ReviewsList({
   onSelect: (id: string) => void;
 }) {
   const reviews = useReviews();
+  const [search, setSearch] = React.useState("");
+  const [statusFilter, setStatusFilter] = React.useState<StatusFilter>("all");
+  const [sortOrder, setSortOrder] = React.useState<SortOrder>("newest");
+
+  // Counts per status for the filter chips — computed once over the raw list,
+  // not the filtered one, so users can see how many reviews exist in each
+  // bucket regardless of the current filter.
+  const counts = React.useMemo(() => {
+    const m: Record<string, number> = { all: reviews.data?.length ?? 0 };
+    for (const r of (reviews.data ?? []) as ReviewSummary[]) {
+      m[r.status] = (m[r.status] ?? 0) + 1;
+    }
+    return m;
+  }, [reviews.data]);
+
+  // Apply search → status filter → sort, in that order.
+  const visible = React.useMemo<ReviewSummary[]>(() => {
+    if (!reviews.data) return [];
+    const q = search.trim().toLowerCase();
+    let out = reviews.data as ReviewSummary[];
+    if (q) {
+      out = out.filter((r: ReviewSummary) =>
+        (r.title ?? "").toLowerCase().includes(q) ||
+        (r.review_id ?? "").toLowerCase().includes(q),
+      );
+    }
+    if (statusFilter !== "all") {
+      out = out.filter((r: ReviewSummary) => r.status === statusFilter);
+    }
+    if (sortOrder === "newest") {
+      out = [...out].sort((a: ReviewSummary, b: ReviewSummary) => (b.created_at ?? "").localeCompare(a.created_at ?? ""));
+    } else if (sortOrder === "oldest") {
+      out = [...out].sort((a: ReviewSummary, b: ReviewSummary) => (a.created_at ?? "").localeCompare(b.created_at ?? ""));
+    } else if (sortOrder === "status") {
+      const order: Record<string, number> = { running: 0, plan_pending: 1, pending: 2, failed: 3, cancelled: 4, completed: 5 };
+      out = [...out].sort((a: ReviewSummary, b: ReviewSummary) => (order[a.status] ?? 99) - (order[b.status] ?? 99));
+    }
+    return out;
+  }, [reviews.data, search, statusFilter, sortOrder]);
+
+  const total = reviews.data?.length ?? 0;
+  const filtered = visible.length;
 
   return (
     <div className="bkb-card" style={{ padding: 0, overflow: "hidden" }}>
-      <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--bkb-border)" }}>
-        <div style={{ fontSize: 13, fontWeight: 500 }}>Your reviews</div>
-        <div style={{ fontSize: 11, color: "var(--bkb-textMuted)", marginTop: 2 }}>
-          {reviews.isLoading ? "Loading…" : `${reviews.data?.length ?? 0} entries`}
+      <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--bkb-border)", display: "flex", flexDirection: "column", gap: 10 }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
+          <div style={{ fontSize: 13, fontWeight: 500 }}>Your reviews</div>
+          <div style={{ fontSize: 11, color: "var(--bkb-textMuted)" }}>
+            {reviews.isLoading
+              ? "Loading…"
+              : filtered === total
+                ? `${total} ${total === 1 ? "entry" : "entries"}`
+                : `${filtered} of ${total}`}
+          </div>
         </div>
+
+        {/* Search box. Hidden when there are <=3 reviews — the toolbar would
+            cost more screen real-estate than it saves. */}
+        {total > 3 && (
+          <>
+            <div style={{ position: "relative" }}>
+              <div style={{ position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", color: "var(--bkb-textSubtle)", display: "flex", alignItems: "center" }}>
+                <Icon name="search" size={12} />
+              </div>
+              <input
+                type="search"
+                className="bkb-input"
+                placeholder="Search by title or review ID…"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                style={{ paddingLeft: 28, fontSize: 12 }}
+                aria-label="Filter reviews"
+              />
+            </div>
+
+            {/* Status chips. Per-status counts come from the raw list so the
+                user sees how many reviews exist in each bucket regardless of
+                what they've typed in search. */}
+            <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
+              {STATUS_FILTERS.map((f) => {
+                const n = counts[f.id] ?? 0;
+                if (f.id !== "all" && n === 0) return null;  // hide empty buckets
+                const on = statusFilter === f.id;
+                return (
+                  <button
+                    key={f.id}
+                    type="button"
+                    onClick={() => setStatusFilter(f.id)}
+                    className="bkb-chip"
+                    style={{
+                      cursor: "pointer",
+                      fontSize: 10,
+                      padding: "3px 8px",
+                      borderColor: on ? "var(--bkb-primary)" : "var(--bkb-border)",
+                      color: on ? "var(--bkb-primary)" : "var(--bkb-textMuted)",
+                      background: on ? "color-mix(in oklch, var(--bkb-primary), transparent 92%)" : "transparent",
+                    }}
+                  >
+                    {f.label} <span style={{ opacity: 0.6 }}>({n})</span>
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Sort */}
+            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <label style={{ fontSize: 10, color: "var(--bkb-textSubtle)", letterSpacing: "0.06em", textTransform: "uppercase" }}>
+                Sort
+              </label>
+              <select
+                className="bkb-input"
+                value={sortOrder}
+                onChange={(e) => setSortOrder(e.target.value as SortOrder)}
+                style={{ fontSize: 11, padding: "3px 6px", flex: 1 }}
+                aria-label="Sort reviews"
+              >
+                <option value="newest">Newest first</option>
+                <option value="oldest">Oldest first</option>
+                <option value="status">By status (active first)</option>
+              </select>
+            </div>
+          </>
+        )}
       </div>
-      <div style={{ maxHeight: 540, overflowY: "auto" }} className="bkb-scroll">
+
+      <div style={{ maxHeight: 600, overflowY: "auto" }} className="bkb-scroll">
         {reviews.error && (
           <div style={{ padding: 14, fontSize: 12, color: "var(--bkb-danger)" }}>
             {(reviews.error as Error).message}
           </div>
         )}
-        {reviews.data?.length === 0 && !reviews.isLoading && (
+        {total === 0 && !reviews.isLoading && (
+          <div style={{ padding: 14, fontSize: 12, color: "var(--bkb-textMuted)" }}>
+            No reviews yet — click <strong>Start a new review</strong> above to begin.
+          </div>
+        )}
+        {total > 0 && filtered === 0 && (
           <div style={{ padding: 14, fontSize: 12, color: "var(--bkb-textMuted)" }}>
-            No reviews yet — start one from the form on the left.
+            No reviews match your filters.{" "}
+            <button
+              type="button"
+              onClick={() => { setSearch(""); setStatusFilter("all"); }}
+              style={{ background: "transparent", border: "none", color: "var(--bkb-accent)", cursor: "pointer", padding: 0, fontSize: 12, textDecoration: "underline" }}
+            >
+              Clear filters
+            </button>
           </div>
         )}
-        {reviews.data?.map((r) => (
+        {visible.map((r: ReviewSummary) => (
           <ReviewListItem key={r.review_id} review={r} active={r.review_id === selectedId} onClick={() => onSelect(r.review_id)} />
         ))}
       </div>
@@ -1372,6 +1652,7 @@ function ReviewListItem({
 
 function ReviewDetail({ reviewId }: { reviewId: string }) {
   const detail = useReview(reviewId);
+  const reviewLog = useReviewLog(reviewId);
   const cancel = useCancelReview();
   const retry = useRetryReview();
   const del = useDeleteReview();
@@ -1383,6 +1664,12 @@ function ReviewDetail({ reviewId }: { reviewId: string }) {
   const [pendingPlan, setPendingPlan] = React.useState<ReviewPlan | null>(null);
   const [planIteration, setPlanIteration] = React.useState(0);
 
+  // Local tab state for completed reviews. Two tabs: review content (default)
+  // and provenance timeline. Not URL-synced because the user-side review
+  // detail is part of a 2-column layout where the URL is already used for
+  // ?review=<id> selection.
+  const [resultTab, setResultTab] = React.useState<"review" | "provenance">("review");
+
   const isLive = detail.data
     ? ["running", "pending", "plan_pending"].includes(detail.data.status)
     : false;
@@ -1403,6 +1690,16 @@ function ReviewDetail({ reviewId }: { reviewId: string }) {
     }
   }, [detail.data?.status, pendingPlan]);
 
+  // 1-second tick used by the progress card to render "last update Ns ago".
+  // Without it the seconds-since-last-event display would only refresh when
+  // a new event arrives — defeating the whole point of a stuck-detector.
+  const [nowTick, setNowTick] = React.useState(() => Date.now());
+  React.useEffect(() => {
+    if (!isLive) return;
+    const id = setInterval(() => setNowTick(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [isLive]);
+
   if (!detail.data && detail.isLoading) {
     return (
       <div className="bkb-card" style={{ padding: 18, fontSize: 13, color: "var(--bkb-textMuted)" }}>
@@ -1444,24 +1741,69 @@ function ReviewDetail({ reviewId }: { reviewId: string }) {
           {(r.status === "running" || r.status === "pending" || r.status === "plan_pending") && (
             <button
               className="bkb-btn bkb-btn-ghost"
-              onClick={() => cancel.mutate(reviewId)}
+              onClick={() => {
+                if (cancel.isPending) return;
+                cancel.mutate(reviewId, {
+                  onError: (err: unknown) => {
+                    // Make a failed cancel visible to the user instead of
+                    // silently looking like the button "doesn't work".
+                    const msg = err instanceof Error ? err.message : "unknown error";
+                    alert(
+                      `Cancel failed: ${msg}.\n\n` +
+                      "If this happens repeatedly, the worker that owns the " +
+                      "pipeline may be unreachable. The review will still " +
+                      "transition to cancelled within a few seconds via the " +
+                      "DB-poll fallback.",
+                    );
+                  },
+                });
+              }}
               disabled={cancel.isPending}
-              style={{ borderColor: "var(--bkb-publication)", color: "var(--bkb-publication)" }}
+              style={{
+                borderColor: "var(--bkb-publication)",
+                color: "var(--bkb-publication)",
+                opacity: cancel.isPending ? 0.6 : 1,
+              }}
+              title={
+                cancel.isPending
+                  ? "Cancel request sent. Waiting for the pipeline to reach a cancel checkpoint…"
+                  : "Cancel this review"
+              }
             >
-              <Icon name="x" size={11} /> Cancel
+              <Icon name="x" size={11} />{" "}
+              {cancel.isPending ? "Cancelling…" : "Cancel"}
             </button>
           )}
           {(r.status === "failed" || r.status === "cancelled") && (
-            <button
-              className="bkb-btn bkb-btn-ghost"
-              onClick={() => retry.mutate({ reviewId })}
-              disabled={retry.isPending}
-            >
-              <Icon name="arrow" size={11} /> Retry
-            </button>
+            <ReviewActionsDropdown
+              lastCompletedStep={r.last_completed_step}
+              isPending={retry.isPending}
+              onRetry={async (body?: { enable_cache?: boolean; resume?: boolean }) => {
+                // The backend never persists the OpenRouter key with a review
+                // (run_request is stored excluding it). On every retry/resume
+                // we must resolve the user's currently configured key — from
+                // sessionStorage (personal) or admin-shared — and pass it in
+                // the retry body. Without this, the pipeline aborts with the
+                // exact "No OpenRouter API key available" 400 the user has
+                // been hitting.
+                const { key } = await resolveOpenRouterKey();
+                if (!key) {
+                  alert(
+                    "No OpenRouter API key available. Configure one on the dashboard's API key tab, then try again.",
+                  );
+                  return;
+                }
+                retry.mutate({
+                  reviewId,
+                  body: { ...(body ?? {}), openrouter_api_key: key },
+                });
+              }}
+            />
           )}
           {r.status === "completed" && (
             <>
+              {/* Provenance is now an inline tab on the result detail
+                  below — no longer a separate-page link. */}
               <button
                 className="bkb-btn bkb-btn-ghost"
                 onClick={() => exportMut.mutate({ reviewId, format: "markdown" })}
@@ -1615,27 +1957,99 @@ function ReviewDetail({ reviewId }: { reviewId: string }) {
 
       {/* Live progress — stage/counters come from the latest classified SSE
           event (set by the backend's progress_events.merge_into_state) since
-          the detail endpoint doesn't echo them in its response body. */}
-      {(isLive || progress.events.length > 0) && (() => {
+          the detail endpoint doesn't echo them in its response body.
+          Hidden once the review settles into a terminal state — completed /
+          failed / cancelled reviews surface the same event trail (and more)
+          inside the Provenance tab below, so the redundant Progress card
+          would just push the result content further off-screen. */}
+      {isLive && (() => {
         const latest = [...progress.events].reverse().find((e) => e.kind && e.kind !== "log") ?? progress.events[progress.events.length - 1];
+        // Overall pipeline progress — 18 top-level stages in PRISMA pipeline,
+        // populated as stage_index / stage_total on every classified SSE event.
+        const overallPct = (latest?.stage_index != null && latest?.stage_total)
+          ? Math.min(100, Math.round((latest.stage_index / latest.stage_total) * 100))
+          : null;
+        // Within-stage progress (e.g. "47 of 100 articles charted").
+        const stageHasItems = latest?.stage_done != null && latest?.stage_total != null && latest.stage_total > 0;
+        const stagePct = stageHasItems
+          ? Math.min(100, Math.round((latest.stage_done! / latest.stage_total!) * 100))
+          : null;
+        // Stuck detector: live runs that haven't emitted an event for >60s
+        // are likely either deep in a long stage or genuinely stalled. Show
+        // a "last update Ns ago" hint so the user can tell the difference.
+        const sinceLast = (isLive && progress.lastEventAt)
+          ? Math.round((nowTick - progress.lastEventAt) / 1000)
+          : null;
+        const stale = sinceLast != null && sinceLast > 60;
         return (
         <div className="bkb-card" style={{ padding: 18 }}>
-          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 10 }}>
-            <div>
-              <h3 style={{ fontFamily: FONTS.display, fontSize: 16, margin: 0, fontWeight: 500 }}>Progress</h3>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 10, gap: 12 }}>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <h3 style={{ fontFamily: FONTS.display, fontSize: 16, margin: 0, fontWeight: 500 }}>
+                Progress {overallPct != null && (
+                  <span style={{ color: "var(--bkb-textMuted)", fontWeight: 400, fontSize: 14, marginLeft: 6 }}>
+                    {overallPct}%
+                  </span>
+                )}
+              </h3>
               <div style={{ fontSize: 11, color: "var(--bkb-textMuted)", marginTop: 2 }}>
                 {latest?.stage ? latest.stage : "Awaiting first event"}
-                {latest?.stage_total != null && (
+                {latest?.stage_index != null && latest?.stage_total != null && (
+                  <span style={{ marginLeft: 6, color: "var(--bkb-textSubtle)" }}>
+                    · stage {latest.stage_index} of {latest.stage_total}
+                  </span>
+                )}
+                {stagePct != null && (
                   <span style={{ marginLeft: 6, color: "var(--bkb-textSubtle)" }}>
-                    · step {latest.stage_done ?? 0} of {latest.stage_total}
+                    · {latest!.stage_done}/{latest!.stage_total} ({stagePct}%)
                   </span>
                 )}
               </div>
             </div>
-            <span className="bkb-mono" style={{ fontSize: 11, color: "var(--bkb-textSubtle)" }}>
-              {progress.step} events
-            </span>
+            <div style={{ textAlign: "right", display: "flex", flexDirection: "column", gap: 2 }}>
+              <span className="bkb-mono" style={{ fontSize: 11, color: "var(--bkb-textSubtle)" }}>
+                {progress.events.length} events · step {progress.step}
+              </span>
+              {sinceLast != null && (
+                <span
+                  className="bkb-mono"
+                  style={{
+                    fontSize: 10,
+                    color: stale ? "var(--bkb-publication)" : "var(--bkb-textSubtle)",
+                  }}
+                >
+                  {stale ? "⚠ " : ""}last update {sinceLast}s ago
+                  {stale && " (long stage or stalled)"}
+                </span>
+              )}
+            </div>
           </div>
+          {/* Top-level pipeline progress bar */}
+          {overallPct != null && (
+            <div
+              style={{
+                width: "100%",
+                height: 4,
+                background: "var(--bkb-surfaceAlt)",
+                borderRadius: 2,
+                overflow: "hidden",
+                marginBottom: 10,
+              }}
+              role="progressbar"
+              aria-valuenow={overallPct}
+              aria-valuemin={0}
+              aria-valuemax={100}
+            >
+              <div
+                style={{
+                  width: `${overallPct}%`,
+                  height: "100%",
+                  background: stale ? "var(--bkb-publication)" : "var(--bkb-accent)",
+                  transition: "width 250ms ease-out, background 200ms ease",
+                }}
+              />
+            </div>
+          )}
           <div
             className="bkb-scroll"
             style={{
@@ -1671,39 +2085,196 @@ function ReviewDetail({ reviewId }: { reviewId: string }) {
         );
       })()}
 
-      {/* Synthesis text (when done) */}
+      {/* Result detail (when done) — tabbed: Review | Provenance */}
       {r.status === "completed" && (
         <>
-          {r.flow && <FlowCountsCard flow={r.flow} />}
-          {r.synthesis_text && (
-            <div className="bkb-card" style={{ padding: 18 }}>
-              <h3 style={{ fontFamily: FONTS.display, fontSize: 18, margin: "0 0 8px", fontWeight: 500 }}>Synthesis</h3>
-              <div style={{ fontSize: 13, color: "var(--bkb-text)", lineHeight: 1.6, whiteSpace: "pre-wrap" }}>
-                {r.synthesis_text}
-              </div>
+          {/* Tab strip */}
+          <div className="bkb-card" style={{ padding: 0, overflow: "hidden" }}>
+            <div
+              style={{
+                display: "flex",
+                borderBottom: "1px solid var(--bkb-border)",
+                background: "var(--bkb-surface)",
+              }}
+              role="tablist"
+              aria-label="Review result tabs"
+            >
+              {(["review", "provenance"] as const).map((tab) => {
+                const on = resultTab === tab;
+                return (
+                  <button
+                    key={tab}
+                    type="button"
+                    role="tab"
+                    aria-selected={on}
+                    onClick={() => setResultTab(tab)}
+                    style={{
+                      background: "transparent",
+                      border: "none",
+                      borderBottom: on ? "2px solid var(--bkb-accent)" : "2px solid transparent",
+                      color: on ? "var(--bkb-accent)" : "var(--bkb-textMuted)",
+                      fontWeight: on ? 600 : 500,
+                      padding: "12px 18px",
+                      cursor: "pointer",
+                      fontSize: 13,
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 6,
+                      marginBottom: -1,
+                      transition: "color 120ms ease, border-color 120ms ease",
+                    }}
+                  >
+                    <Icon name={tab === "review" ? "evidence" : "agent"} size={12} />
+                    {tab === "review" ? "Review" : "Provenance"}
+                  </button>
+                );
+              })}
             </div>
+          </div>
+
+          {/* Provenance tab */}
+          {resultTab === "provenance" && (
+            <ProvenanceTimelineOwner
+              review={r}
+              logEvents={reviewLog.data?.log_events ?? []}
+              log={reviewLog.data?.log ?? []}
+            />
           )}
-          {r.included_articles.length > 0 && (
-            <div className="bkb-card" style={{ padding: 18 }}>
-              <h3 style={{ fontFamily: FONTS.display, fontSize: 18, margin: "0 0 8px", fontWeight: 500 }}>
-                Included articles ({r.included_articles.length})
-              </h3>
-              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
-                {r.included_articles.slice(0, 50).map((a) => (
-                  <li key={a.pmid} style={{ paddingBottom: 8, borderBottom: "1px solid var(--bkb-border)" }}>
-                    <div style={{ fontSize: 13, fontWeight: 500 }}>{a.title}</div>
-                    <div style={{ fontSize: 11, color: "var(--bkb-textMuted)" }}>
-                      {a.authors} · {a.journal} · {a.year} · <span className="bkb-mono">{a.source || "—"}</span>
+
+          {/* Review tab — full long-form content */}
+          {resultTab === "review" && (
+            <>
+              {r.flow && <FlowCountsCard flow={r.flow} />}
+
+              {r.structured_abstract && (
+                <DetailCard title="Abstract">
+                  <MarkdownContent style={{ fontSize: 13, lineHeight: 1.65 }}>
+                    {r.structured_abstract}
+                  </MarkdownContent>
+                </DetailCard>
+              )}
+
+              {r.introduction_text && (
+                <DetailCard title="Introduction">
+                  <MarkdownContent style={{ fontSize: 13, lineHeight: 1.65 }}>
+                    {r.introduction_text}
+                  </MarkdownContent>
+                </DetailCard>
+              )}
+
+              {(r.search_queries?.length ?? 0) > 0 && (
+                <DetailCard title="Search strategy">
+                  <ul style={{ margin: 0, paddingLeft: 18 }}>
+                    {r.search_queries.map((q: string, i: number) => (
+                      <li
+                        key={i}
+                        className="bkb-mono"
+                        style={{ fontSize: 11, color: "var(--bkb-textMuted)", padding: "2px 0", wordBreak: "break-word" }}
+                      >
+                        {q}
+                      </li>
+                    ))}
+                  </ul>
+                </DetailCard>
+              )}
+
+              {r.synthesis_text && (
+                <DetailCard title="Synthesis">
+                  <MarkdownContent style={{ fontSize: 13, lineHeight: 1.65 }}>
+                    {r.synthesis_text}
+                  </MarkdownContent>
+                </DetailCard>
+              )}
+
+              {r.bias_assessment && (
+                <DetailCard title="Risk of bias assessment">
+                  <MarkdownContent style={{ fontSize: 13, lineHeight: 1.65 }}>
+                    {r.bias_assessment}
+                  </MarkdownContent>
+                </DetailCard>
+              )}
+
+              {r.grade_assessments && r.grade_assessments.length > 0 && (
+                <DetailCard title="GRADE — certainty of evidence">
+                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+                    {r.grade_assessments.map((g, i: number) => (
+                      <div
+                        key={i}
+                        style={{
+                          padding: 10,
+                          border: "1px solid var(--bkb-border)",
+                          borderRadius: 6,
+                          background: "var(--bkb-surfaceAlt)",
+                        }}
+                      >
+                        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8, marginBottom: 4 }}>
+                          <strong style={{ fontSize: 13, color: "var(--bkb-text)" }}>{g.outcome}</strong>
+                          <span
+                            className="bkb-chip"
+                            style={{
+                              fontSize: 10,
+                              ...gradeChipStyle(g.overall_certainty),
+                            }}
+                          >
+                            {g.overall_certainty}
+                          </span>
+                        </div>
+                        {g.summary && (
+                          <div style={{ fontSize: 12, color: "var(--bkb-textMuted)", lineHeight: 1.55 }}>
+                            {g.summary}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </DetailCard>
+              )}
+
+              {r.limitations && (
+                <DetailCard title="Limitations">
+                  <MarkdownContent style={{ fontSize: 13, lineHeight: 1.65 }}>
+                    {r.limitations}
+                  </MarkdownContent>
+                </DetailCard>
+              )}
+
+              {r.conclusions_text && (
+                <DetailCard title="Conclusions">
+                  <MarkdownContent style={{ fontSize: 13, lineHeight: 1.65 }}>
+                    {r.conclusions_text}
+                  </MarkdownContent>
+                </DetailCard>
+              )}
+
+              {r.included_articles.length > 0 && (
+                <DetailCard title={`Included articles (${r.included_articles.length})`}>
+                  <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
+                    {r.included_articles.slice(0, 50).map((a) => (
+                      <li key={a.pmid} style={{ paddingBottom: 8, borderBottom: "1px solid var(--bkb-border)" }}>
+                        <div style={{ fontSize: 13, fontWeight: 500 }}>{a.title}</div>
+                        <div style={{ fontSize: 11, color: "var(--bkb-textMuted)" }}>
+                          {a.authors} · {a.journal} · {a.year} ·{" "}
+                          <span className="bkb-mono">{a.source || "—"}</span>
+                          {a.rob_overall && (
+                            <span
+                              className="bkb-chip"
+                              style={{ fontSize: 9, marginLeft: 6, ...robChipStyle(a.rob_overall) }}
+                            >
+                              RoB: {a.rob_overall}
+                            </span>
+                          )}
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                  {r.included_articles.length > 50 && (
+                    <div style={{ fontSize: 11, color: "var(--bkb-textSubtle)", marginTop: 8 }}>
+                      Showing first 50 of {r.included_articles.length}. Use export for full list.
                     </div>
-                  </li>
-                ))}
-              </ul>
-              {r.included_articles.length > 50 && (
-                <div style={{ fontSize: 11, color: "var(--bkb-textSubtle)", marginTop: 8 }}>
-                  Showing first 50 of {r.included_articles.length}. Use export for full list.
-                </div>
+                  )}
+                </DetailCard>
               )}
-            </div>
+            </>
           )}
         </>
       )}
@@ -1754,35 +2325,159 @@ function FlowCountsCard({ flow }: { flow: NonNullable<ReturnType<typeof useRevie
   );
 }
 
+// ── Detail-card helpers used by the user-side review-detail Review tab ──
+
+function DetailCard({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="bkb-card" style={{ padding: 18 }}>
+      <h3
+        style={{
+          fontFamily: FONTS.display,
+          fontSize: 18,
+          margin: "0 0 8px",
+          fontWeight: 500,
+        }}
+      >
+        {title}
+      </h3>
+      {children}
+    </div>
+  );
+}
+
+function gradeChipStyle(certainty: string): React.CSSProperties {
+  const v = (certainty || "").toLowerCase();
+  if (v.includes("very low")) return { borderColor: "var(--bkb-danger)", color: "var(--bkb-danger)" };
+  if (v.includes("low"))      return { borderColor: "var(--bkb-publication)", color: "var(--bkb-publication)" };
+  if (v.includes("high"))     return { borderColor: "var(--bkb-agent)", color: "var(--bkb-agent)" };
+  if (v.includes("moderate")) return { borderColor: "var(--bkb-primary)", color: "var(--bkb-primary)" };
+  return {};
+}
+
+function robChipStyle(rating: string): React.CSSProperties {
+  const v = (rating || "").toLowerCase();
+  if (v.includes("low"))   return { borderColor: "var(--bkb-agent)", color: "var(--bkb-agent)" };
+  if (v.includes("high"))  return { borderColor: "var(--bkb-danger)", color: "var(--bkb-danger)" };
+  if (v.includes("some") || v.includes("moderate"))
+    return { borderColor: "var(--bkb-publication)", color: "var(--bkb-publication)" };
+  return {};
+}
+
 // ── Page ─────────────────────────────────────────────────────────────
 
 export default function SynthScholarPage() {
   const [selectedId, setSelectedId] = React.useState<string | null>(null);
+  const [mode, setMode] = React.useState<"list" | "new">("list");
 
-  // Auto-select a review when arriving via ?review=… (e.g. from
-  // /knowledge-base/synth-scholar). Falls back to no selection if absent.
+  // Auto-select a review when arriving via ?review=…, or open the full-page
+  // form when ?mode=new. Both controlled via window.location so navigation
+  // back/forward and shareable URLs work.
   React.useEffect(() => {
     if (typeof window === "undefined") return;
-    const id = new URLSearchParams(window.location.search).get("review");
+    const params = new URLSearchParams(window.location.search);
+    const id = params.get("review");
     if (id) setSelectedId(id);
+    if (params.get("mode") === "new") setMode("new");
+  }, []);
+
+  // Listen for browser back/forward navigation between list and new modes.
+  React.useEffect(() => {
+    const onPop = () => {
+      const params = new URLSearchParams(window.location.search);
+      setMode(params.get("mode") === "new" ? "new" : "list");
+      const id = params.get("review");
+      if (id) setSelectedId(id);
+    };
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
   }, []);
 
+  const goToNew = () => {
+    setMode("new");
+    if (typeof window !== "undefined") {
+      const url = new URL(window.location.href);
+      url.searchParams.set("mode", "new");
+      url.searchParams.delete("review");
+      window.history.pushState({}, "", url.toString());
+    }
+  };
+  const goToList = () => {
+    setMode("list");
+    if (typeof window !== "undefined") {
+      const url = new URL(window.location.href);
+      url.searchParams.delete("mode");
+      window.history.pushState({}, "", url.toString());
+    }
+  };
+  const onCreatedFromFullPage = (id: string) => {
+    setSelectedId(id);
+    goToList();
+  };
+
+  // ── Full-page "Start a new review" experience ──────────────────────
+  if (mode === "new") {
+    return (
+      <div style={{ maxWidth: 980, margin: "0 auto", padding: "32px 32px 64px" }}>
+        <div style={{ marginBottom: 20 }}>
+          <button
+            type="button"
+            onClick={goToList}
+            className="bkb-btn bkb-btn-ghost"
+            style={{ fontSize: 12, marginBottom: 16 }}
+          >
+            ← Back to reviews
+          </button>
+          <div style={{ fontSize: 11, color: "var(--bkb-textSubtle)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 6 }}>
+            New review
+          </div>
+          <div style={{ display: "flex", alignItems: "start", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
+            <h1 style={{ fontFamily: FONTS.display, fontSize: 32, margin: 0, letterSpacing: "-0.02em", fontWeight: 400 }}>
+              Start a new review
+            </h1>
+            <ReviewFormGuide />
+          </div>
+          <div style={{ fontSize: 14, color: "var(--bkb-textMuted)", marginTop: 6, maxWidth: 700, lineHeight: 1.5 }}>
+            Configure the protocol, search strategy, and run options. Click the
+            <span style={{ color: "var(--bkb-text)" }}> ⓘ </span>icon next to
+            any field for a description and a link to authoritative guidance
+            (PICO, PRISMA, RoB tools, …), or use{" "}
+            <strong>Open full guide</strong> on the right to read every option
+            in one place.
+          </div>
+        </div>
+        <div className="bkb-card" style={{ padding: 24 }}>
+          <StartReviewForm fullPage onCreated={onCreatedFromFullPage} />
+        </div>
+      </div>
+    );
+  }
+
+  // ── Default 3-column list view ──────────────────────────────────────
   return (
     <div style={{ maxWidth: 1480, margin: "0 auto", padding: "32px 32px 64px" }}>
-      <div style={{ marginBottom: 24 }}>
-        <div style={{ fontSize: 11, color: "var(--bkb-textSubtle)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 6 }}>
-          Tool
-        </div>
-        <h1 style={{ fontFamily: FONTS.display, fontSize: 36, margin: 0, letterSpacing: "-0.02em", fontWeight: 400 }}>
-          SynthScholar
-        </h1>
-        <div style={{ fontSize: 14, color: "var(--bkb-textMuted)", marginTop: 4 }}>
-          Literature review (PRISMA-guided).
+      <div style={{ marginBottom: 24, display: "flex", alignItems: "end", justifyContent: "space-between", gap: 16 }}>
+        <div>
+          <div style={{ fontSize: 11, color: "var(--bkb-textSubtle)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 6 }}>
+            Tool
+          </div>
+          <h1 style={{ fontFamily: FONTS.display, fontSize: 36, margin: 0, letterSpacing: "-0.02em", fontWeight: 400 }}>
+            SynthScholar
+          </h1>
+          <div style={{ fontSize: 14, color: "var(--bkb-textMuted)", marginTop: 4 }}>
+            Literature review (PRISMA-guided).
+          </div>
         </div>
+        <button
+          type="button"
+          onClick={goToNew}
+          className="bkb-btn bkb-btn-primary"
+          style={{ fontSize: 13 }}
+        >
+          <Icon name="plus" size={12} /> Start a new review
+        </button>
       </div>
 
-      <div style={{ display: "grid", gridTemplateColumns: "minmax(360px, 1fr) minmax(260px, 320px) minmax(420px, 2fr)", gap: 16, alignItems: "start" }}>
-        <StartReviewForm onCreated={setSelectedId} />
+      <div style={{ display: "grid", gridTemplateColumns: "minmax(280px, 1fr) minmax(420px, 2fr)", gap: 16, alignItems: "start" }}>
         <ReviewsList selectedId={selectedId} onSelect={setSelectedId} />
         <div
           className="bkb-scroll"
@@ -1797,8 +2492,14 @@ export default function SynthScholarPage() {
           {selectedId ? (
             <ReviewDetail reviewId={selectedId} />
           ) : (
-            <div className="bkb-card" style={{ padding: 18, fontSize: 13, color: "var(--bkb-textMuted)" }}>
-              Select a review on the left to see live progress and results.
+            <div className="bkb-card" style={{ padding: 24, fontSize: 13, color: "var(--bkb-textMuted)", textAlign: "center" }}>
+              <div style={{ fontSize: 14, color: "var(--bkb-text)", marginBottom: 8 }}>
+                Select a review on the left to see live progress and results.
+              </div>
+              <div>
+                Or click <strong>Start a new review</strong> above to configure
+                a new PRISMA-guided literature review with full guidance.
+              </div>
             </div>
           )}
         </div>
diff --git a/src/config/yaml/config-home.yaml b/src/config/yaml/config-home.yaml
index f236a9a..4f8a33f 100644
--- a/src/config/yaml/config-home.yaml
+++ b/src/config/yaml/config-home.yaml
@@ -93,63 +93,36 @@ boxiconsstatisticscount:
       }
 
 whatisbrainkb:
+  eyebrow: "What is BrainKB"
   title: "What is BrainKB?"
+  headline: "A platform that turns scattered neuroscience knowledge into evidence you can query."
+  description: "BrainKB structures and organizes scientific knowledge using knowledge graphs (KGs) — delivering evidence-based insights with provenance. Every assertion is traceable, every contribution reviewable, every dataset connected."
   subtitle: "BrainKB is a platform designed to support neuroscience research by structuring and organizing scientific knowledge using knowledge graphs (KGs) for delivering evidence-based insights."
   bullet_points:
-    - title: "BrainKB structures neuroscience knowledge into an accessible and scalable knowledge graph."
-      heading: "Structured Knowledge"
-      icon_slug: "network"
-      gradient: "from-sky-500 to-blue-500"
-    - title: "It provides tools for searching, exploring, visualizing, and analyzing neuroscience data."
-      heading: "Data Exploration"
-      icon_slug: "search"
-      gradient: "from-emerald-500 to-teal-500"
-    - title: "Researchers can contribute new findings, represented as assertions with supporting evidence from publications."
-      heading: "Community Contribution"
-      icon_slug: "usersround"
-      gradient: "from-purple-500 to-pink-500"
-    - title: "BrainKB aims to be the go-to resource for neuroscientists worldwide, fostering collaboration and accelerating discoveries."
-      heading: "Collaboration Hub"
-      icon_slug: "globe"
-      gradient: "from-purple-500 to-pink-500"
-
-keyfeatures:
-  title: "Key Features"
-  subtitle: "Powerful tools for neuroscience knowledge extraction and management"
-  features:
-    - title: "Ingest Knowledge Graphs"
-      short_description: "Easily upload neuroscience KGs in JSON-LD or TTL"
-      description: "Upload Knowledge Graph files in JSON-LD or Turtle format. Seamlessly integrate your neuroscience data into the BrainKB ecosystem."
-      link: "/user/ingest-kg"
-      button_text: "Login to try now"
-      icon_slug: "database"
-      color_theme: "blue"
-    - title: "NER Extraction"
-      short_description: "Extract neuroscience entities using AI agents"
-      description: "Extract Neuroscience Named Entities from text using multi-agent systems. Leverage advanced AI to identify and classify neuroscience concepts automatically."
-      link: "/user/sie"
-      button_text: "Login to try now"
-      icon_slug: "brain"
-      color_theme: "green"
-    - title: "Resource Extraction"
-      short_description: "Transform documents into structured knowledge"
-      description: "Extract structured resources from unstructured sources and documents. Transform raw text and PDFs into structured, queryable knowledge."
-      link: "/user/extract-resource"
-      button_text: "Login to try now"
-      icon_slug: "filetext"
-      color_theme: "purple"
-    - title: "SynthScholar"
-      short_description: "PRISMA-guided literature reviews with AI"
-      description: "Run end-to-end PRISMA literature reviews — from search strategy to synthesis, screening, and critical appraisal — orchestrated across multiple LLMs."
-      link: "/user/synth-scholar"
-      button_text: "Login to try now"
-      icon_slug: "bookopen"
-      color_theme: "publication"
+    - heading: "Structured Knowledge"
+      title: "Capture neuroscience findings as structured, queryable evidence in a shared knowledge graph."
+    - heading: "Data Exploration"
+      title: "Search, visualize, and analyze the graph through accessible, interactive tools."
+    - heading: "Community Contribution"
+      title: "Researchers contribute, review, and validate evidence with provenance."
+    - heading: "Collaboration Hub"
+      title: "A common workbench for neuroscientists to build on each other's findings."
 
 usecases:
+  eyebrow: "In Practice"
   title: "Use Cases"
-  subtitle: "BrainKB is actively developing use cases to support neuroscience research and knowledge management"
+  subtitle: "Where the toolkit meets real research. Each use case is developed in the open — with public inspection, interaction, and feedback at every stage."
   description: "Each use case includes ingestion, public view, and feedback components integrated with our Knowledge Graph"
+  how_it_works:
+    title: "How use cases work"
+    subtitle: "Three open phases combine into one transparent knowledge-management system."
+    phases:
+      - label: "Inspection"
+        description: "Data-provision mechanisms — public or member-only — depending on the use case."
+      - label: "Public View"
+        description: "Accessible interfaces for exploring and interacting with the knowledge graph."
+      - label: "Public Feedback"
+        description: "Community-driven validation mechanisms keep the graph trustworthy."
   cases:
     - title: "HMBA Taxonomy"
       case_number: "Case 1"
@@ -233,6 +206,24 @@ usecases:
       status: "available"
       use_link: "/knowledge-base/synth-scholar"
       use_link_text: "View public reviews"
+    - title: "Literature Landscape (AbstractAtlas)"
+      case_number: "Case 7"
+      description: "Explore the neuroscience literature as an interactive UMAP map — semantic search and faceted filtering across OHBM 2026 and PubMed abstracts."
+      icon_slug: "search"
+      discussion_link: ""
+      is_future: false
+      status: "available"
+      use_link: "https://abstractatlas.brainkb.org/"
+      use_link_text: "Open"
+    - title: "Voice to Knowledge Graph (MeetGraph)"
+      case_number: "Case 8"
+      description: "Voice → knowledge graph: turn meeting audio and notes into structured, queryable graphs — capturing decisions, action items, and key concepts automatically."
+      icon_slug: "network"
+      discussion_link: ""
+      is_future: false
+      status: "available"
+      use_link: "https://github.com/sensein/meetgraph"
+      use_link_text: "View"
     - title: "Brain Visualization"
       case_number: "Future Consideration"
       description: "Connect all information through interactive brain visualization for comprehensive knowledge exploration."
@@ -275,9 +266,81 @@ usecases:
     discussion_link: "https://github.com/sensein/BrainKB/discussions/23"
     link_text: "View Full Planning Discussion"
 
+tools:
+  eyebrow: "The Toolkit"
+  title: "BrainKB Tools"
+  subtitle: "Open, modular tools that integrate with BrainKB applications or operate independently within your own research pipelines."
+  more_link: "/tools-and-libraries"
+  more_text: "View all tools"
+  items:
+    - name: "StructSense"
+      category: "Entity Extraction"
+      badge: "St"
+      color: "#0f7a52"
+      logo: "/structsense-logo.png"
+      logo_orientation: "horizontal"
+      description: "A task-agnostic agentic framework for structured information extraction from text and documents — with human-in-the-loop evaluation and benchmarking."
+      link: "https://github.com/sensein/structsense"
+      link_text: "Learn more"
+    - name: "SynthScholar"
+      category: "Literature Review"
+      badge: "Sy"
+      color: "#2563eb"
+      logo: "/synthscholar-logo.png"
+      logo_orientation: "horizontal"
+      description: "PRISMA-guided literature review — from search strategy to screening, critical appraisal, and synthesis — orchestrated across multiple LLMs."
+      link: "https://github.com/sensein/synthscholar"
+      link_text: "Learn more"
+    - name: "MeetGraph"
+      category: "Knowledge Capture"
+      badge: "Mg"
+      color: "#b45309"
+      logo: "/meet_graph_logo.png"
+      logo_orientation: "square"
+      description: "Turn meeting audio and notes into actionable knowledge graphs — extracting decisions, action items, and key concepts automatically."
+      link: "https://github.com/sensein/meetgraph"
+      link_text: "Learn more"
+    - name: "Semantic Concept Mapper"
+      category: "Ontology Mapping"
+      badge: "Sm"
+      color: "#7c3aed"
+      logo: "/semantic_concept_mapper_logo_tr.png"
+      logo_orientation: "square"
+      description: "Map terms and concepts to standardized ontologies for consistent, interoperable, and machine-readable knowledge representations."
+      link: "https://github.com/sensein/search_hybrid"
+      link_text: "Learn more"
+
+videos:
+  # ── Fixed section header (stays constant as the carousel cycles) ──
+  eyebrow: "See It in Action"
+  title: "See It in Action"
+  headline: "Watch BrainKB's tools work in practice."
+  button_text: "Watch on YouTube"
+  # Default supporting text — shown when the active video has no `description`
+  description: ""
+  # ── Per-video items (the player + its description cycle) ──
+  items:
+    - title: "MeetGraph · Turning meetings into a knowledge graph"
+      description: "From a raw meeting recording to a structured, queryable knowledge graph in minutes — see how MeetGraph captures decisions, action items, and key concepts automatically."
+      youtube_id: "GKdy1pDAbqo"
+
+    - title: "SynthScholar · PRISMA-guided multi-agent system for systematic reviews"
+      description: "From a research question to a structured, provenance-rich systematic review — SynthScholar uses multi-agent workflows to support literature discovery, screening, evidence extraction, appraisal, synthesis, and export."
+      youtube_id: "DhHVc4Udfe0"
+
+abstractatlas:
+  eyebrow: "Explore"
+  badge: ""
+  title: "Browse the neuroscience landscape."
+  description: "AbstractAtlas maps thousands of neuroscience abstracts — OHBM 2026 and NeuroScape PubMed 1999–2023 corpus — into an interactive 2D/3D UMAP projection. Search semantically, filter by facet, and see where any study sits within the wider literature."
+  image: "/atlasabstract.png"
+  link: "https://abstractatlas.brainkb.org/"
+  button_text: "Open AbstractAtlas"
+
 publications:
-  title: "Powered by Advanced AI Agents"
-  description: "BrainKB leverages cutting-edge agentic frameworks for structured information extraction. Our platform utilizes STRUCTSENSE, a task-agnostic agentic framework that enables sophisticated structured information extraction. SynthScholar extends this foundation to support PRISMA-guided literature synthesis, including structured data extraction and critical appraisal of scientific studies."
+  eyebrow: "Under the Hood"
+  title: "Powered by advanced AI agents."
+  description: "BrainKB runs on cutting-edge agentic frameworks. StructSense enables sophisticated structured-information extraction; SynthScholar extends it to PRISMA-guided literature synthesis and critical appraisal across multiple LLMs."
   citation:
     label: "Research Citation:"
     text: "Chhetri, T.R., Chen, Y., Trivedi, P., Jarecka, D., Haobsh, S., Ray, P., Ng, L. and Ghosh, S.S., 2025. STRUCTSENSE: A Task-Agnostic Agentic Framework for Structured Information Extraction with Human-In-The-Loop Evaluation and Benchmarking. arXiv preprint arXiv:2507.03674."
diff --git a/src/config/yaml/tools-libraries.yaml b/src/config/yaml/tools-libraries.yaml
index 9a2bb70..72444a2 100644
--- a/src/config/yaml/tools-libraries.yaml
+++ b/src/config/yaml/tools-libraries.yaml
@@ -1,3 +1,29 @@
+tools:
+  - name: "StructSense"
+    logo: "/structsense-logo.png"
+    logo_orientation: "horizontal"
+    description: "A task-agnostic agentic framework for structured information extraction from text and documents, with human-in-the-loop evaluation and benchmarking."
+    link: "https://github.com/sensein/structsense"
+    link_text: "Learn more"
+  - name: "SynthScholar"
+    logo: "/synthscholar-logo.png"
+    logo_orientation: "horizontal"
+    description: "Run end-to-end PRISMA literature reviews — from search strategy to screening, critical appraisal, and synthesis — orchestrated across multiple LLMs."
+    link: "https://github.com/sensein/synthscholar"
+    link_text: "Learn more"
+  - name: "MeetGraph"
+    logo: "/meet_graph_logo.png"
+    logo_orientation: "square"
+    description: "Turn meeting audio and notes into structured, queryable knowledge graphs — capturing decisions, action items, and key concepts automatically."
+    link: "https://github.com/sensein/meetgraph"
+    link_text: "Learn more"
+  - name: "Semantic Concept Mapper"
+    logo: "/semantic_concept_mapper_logo_tr.png"
+    logo_orientation: "square"
+    description: "Map terms and concepts to standardized ontologies for consistent, interoperable, and machine-readable knowledge representation."
+    link: "https://github.com/sensein/search_hybrid"
+    link_text: "Learn more"
+
 libraries:
   - name: "EviSense"
     description: "A Python library to extract evidence and rationales for specific terms within documents, including scientific publications. It supports multiple LLM providers (e.g., Ollama and OpenRouter) and allows the use of multiple models for greater flexibility."
diff --git a/src/hooks/useSynthScholar.ts b/src/hooks/useSynthScholar.ts
index 43778e6..c8a789b 100644
--- a/src/hooks/useSynthScholar.ts
+++ b/src/hooks/useSynthScholar.ts
@@ -96,6 +96,18 @@ export function useReview(reviewId: string | undefined) {
   });
 }
 
+/** One-shot fetch of the persisted log/event trail for a completed review.
+    Used by the public provenance page to render the at-rest pipeline timeline
+    (no SSE — the review is already done by the time provenance is viewed). */
+export function useReviewLog(reviewId: string | undefined) {
+  return useQuery({
+    queryKey: ["synth-scholar", "review-log", reviewId],
+    queryFn: () => getReviewLog(reviewId!),
+    enabled: !!reviewId,
+    staleTime: 60_000, // log of a completed review doesn't change
+  });
+}
+
 export function useReviewStatus(reviewId: string | undefined) {
   return useQuery({
     queryKey: ["synth-scholar", "review-status", reviewId],
@@ -197,6 +209,12 @@ export function useExportReview() {
 
 // ── SSE Progress ────────────────────────────────────────────────────
 
+// Build a stable signature for dedup. Step + message + timestamp identifies
+// an event uniquely across the seed-from-DB path and the live SSE path.
+function _eventSignature(e: ProgressEvent): string {
+  return `${e.step}|${e.message}|${e.timestamp ?? ""}`;
+}
+
 export function useProgressStream(
   reviewId: string | undefined,
   shouldStream: boolean,
@@ -207,11 +225,21 @@ export function useProgressStream(
   const [latestMessage, setLatestMessage] = useState("");
   const [step, setStep] = useState(0);
   const [isDone, setIsDone] = useState(false);
+  // Wall-clock timestamp of the most recent non-keepalive event. Used by the
+  // UI to show "last update Ns ago" so a long-running stage with no
+  // intermediate events is distinguishable from a stuck/disconnected stream.
+  const [lastEventAt, setLastEventAt] = useState<number | null>(null);
   const queryClient = useQueryClient();
   const shouldReconnectRef = useRef(false);
   const isDoneRef = useRef(false);
   const onPlanReviewRef = useRef(onPlanReview);
   onPlanReviewRef.current = onPlanReview;
+  // Signatures of every event we've ever appended for this review_id. Lets
+  // us skip duplicates when the SSE reconnects (which the backend treats by
+  // re-sending the full history, causing the user to see the same
+  // "Generating search strategy" / "Plan ready for review" lines repeatedly
+  // after a tab visibility change or transient network blip).
+  const seenSigsRef = useRef<Set<string>>(new Set());
 
   const start = useCallback(() => {
     if (!reviewId) return;
@@ -225,9 +253,16 @@ export function useProgressStream(
       reviewId,
       (event) => {
         if (event.event_type === "keepalive") return;
+        const sig = _eventSignature(event);
+        if (seenSigsRef.current.has(sig)) {
+          // Reconnect-replay or duplicate from the backend — drop silently.
+          return;
+        }
+        seenSigsRef.current.add(sig);
         setEvents((prev) => [...prev, event]);
         setLatestMessage(event.message);
         setStep((prev) => Math.max(prev, event.step));
+        setLastEventAt(Date.now());
         if (event.event_type === "plan_review" && event.plan && onPlanReviewRef.current) {
           onPlanReviewRef.current(event.plan as ReviewPlan, event);
         }
@@ -251,6 +286,7 @@ export function useProgressStream(
   useEffect(() => {
     if (!reviewId) return;
     setEvents([]);
+    seenSigsRef.current = new Set();  // fresh review → fresh dedup window
     getReviewLog(reviewId).then((data) => {
       setStep((prev) => Math.max(prev, data.step_count));
       const source = data.log_events?.length
@@ -271,7 +307,13 @@ export function useProgressStream(
           event_type: "progress" as const,
           source: null,
         }));
-        setEvents((prev) => (prev.length === 0 ? seedEvents : prev));
+        // Seed both the rendered list and the dedup window so the live SSE
+        // doesn't re-add events we already loaded from /reviews/{id}/log.
+        setEvents((prev) => {
+          if (prev.length > 0) return prev;
+          for (const e of seedEvents) seenSigsRef.current.add(_eventSignature(e));
+          return seedEvents;
+        });
       }
     }).catch(() => {});
   }, [reviewId]);
@@ -293,7 +335,25 @@ export function useProgressStream(
     }
   }, [isStreaming, isDone, reviewId, start]);
 
-  return { events, isStreaming, latestMessage, step, isDone };
+  // Reset the "last update Ns ago" clock when the user comes back to the
+  // tab. While the tab was hidden, browsers throttle timers / pause some
+  // network activity, so the freshness clock would show a misleading large
+  // gap (the "⚠ last update 70s ago" the user reported on tab return). Just
+  // bumping lastEventAt to "now" on visibility change keeps the warning
+  // honest — it'll only re-trigger if events genuinely stop arriving AFTER
+  // the user is back on this tab.
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const onVisibility = () => {
+      if (document.visibilityState === "visible" && isStreaming) {
+        setLastEventAt(Date.now());
+      }
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, [isStreaming]);
+
+  return { events, isStreaming, latestMessage, step, isDone, lastEventAt };
 }
 
 export function usePlanResponse() {
@@ -323,11 +383,17 @@ export function useCancelReview() {
 export function useRetryReview() {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: ({ reviewId, body }: { reviewId: string; body?: { enable_cache?: boolean; resume?: boolean } }) =>
-      retryReview(reviewId, body),
+    mutationFn: ({ reviewId, body }: {
+      reviewId: string;
+      body?: {
+        enable_cache?: boolean;
+        resume?: boolean;
+        openrouter_api_key?: string;
+      };
+    }) => retryReview(reviewId, body),
     onSuccess: (data) => {
       queryClient.invalidateQueries({ queryKey: ["synth-scholar", "reviews"] });
-      queryClient.setQueryData(["synth-scholar", "review", data.review_id], undefined);
+      queryClient.invalidateQueries({ queryKey: ["synth-scholar", "review", data.review_id] });
     },
   });
 }
diff --git a/src/services/api/synthScholar.ts b/src/services/api/synthScholar.ts
index c1c47e3..052c84e 100644
--- a/src/services/api/synthScholar.ts
+++ b/src/services/api/synthScholar.ts
@@ -182,7 +182,14 @@ export async function cancelReview(reviewId: string): Promise<ReviewSummary> {
 
 export async function retryReview(
   reviewId: string,
-  body?: { enable_cache?: boolean; resume?: boolean },
+  body?: {
+    enable_cache?: boolean;
+    resume?: boolean;
+    /** Required by the backend — the key is intentionally not persisted with
+        the original review (see RetryRequest in schemas.py), so every retry
+        must provide it again. Resolve via resolveOpenRouterKey() before call. */
+    openrouter_api_key?: string;
+  },
 ): Promise<ReviewSummary> {
   return fetchJSON(`/reviews/${reviewId}/retry`, {
     method: "POST",
diff --git a/yarn.lock b/yarn.lock
index 14201bd..3922d49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -782,6 +782,25 @@
     "@types/d3-transition" "*"
     "@types/d3-zoom" "*"
 
+"@types/debug@^4.0.0":
+  version "4.1.13"
+  resolved "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz"
+  integrity sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==
+  dependencies:
+    "@types/ms" "*"
+
+"@types/estree-jsx@^1.0.0":
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz"
+  integrity sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==
+  dependencies:
+    "@types/estree" "*"
+
+"@types/estree@*", "@types/estree@^1.0.0":
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz"
+  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
+
 "@types/form-data@^2.5.2":
   version "2.5.2"
   resolved "https://registry.npmjs.org/@types/form-data/-/form-data-2.5.2.tgz"
@@ -794,6 +813,13 @@
   resolved "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.15.tgz"
   integrity sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA==
 
+"@types/hast@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz"
+  integrity sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/js-yaml@^4.0.9":
   version "4.0.9"
   resolved "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz"
@@ -804,6 +830,18 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/mdast@^4.0.0":
+  version "4.0.4"
+  resolved "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz"
+  integrity sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==
+  dependencies:
+    "@types/unist" "*"
+
+"@types/ms@*":
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz"
+  integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==
+
 "@types/node@*", "@types/node@^20.17.12":
   version "20.17.12"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.17.12.tgz"
@@ -821,7 +859,7 @@
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz"
   integrity sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==
 
-"@types/react@*", "@types/react@^18.0.0", "@types/react@^18.2.0":
+"@types/react@*", "@types/react@^18.0.0", "@types/react@^18.2.0", "@types/react@>=18":
   version "18.3.18"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz"
   integrity sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==
@@ -829,6 +867,16 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/unist@*", "@types/unist@^3.0.0":
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz"
+  integrity sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==
+
+"@types/unist@^2.0.0":
+  version "2.0.11"
+  resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz"
+  integrity sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==
+
 "@types/ws@^8.5.13":
   version "8.18.1"
   resolved "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz"
@@ -882,7 +930,7 @@
     "@typescript-eslint/types" "7.2.0"
     eslint-visitor-keys "^3.4.1"
 
-"@ungap/structured-clone@^1.2.0":
+"@ungap/structured-clone@^1.0.0", "@ungap/structured-clone@^1.2.0":
   version "1.3.0"
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz"
   integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==
@@ -1141,6 +1189,11 @@ axobject-query@~3.1.1:
   dependencies:
     deep-equal "^2.0.5"
 
+bail@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz"
+  integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -1261,6 +1314,11 @@ canonicalize@^1.0.1:
   resolved "https://registry.npmjs.org/canonicalize/-/canonicalize-1.0.8.tgz"
   integrity sha512-0CNTVCLZggSh7bc5VkX5WWPWO+cyZbNd07IHIsSXLia/eAq+r836hgk+8BKoEh7949Mda87VUOitx5OddVj64A==
 
+ccount@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz"
+  integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
+
 chain-function@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz"
@@ -1274,6 +1332,26 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+character-entities-html4@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz"
+  integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==
+
+character-entities-legacy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz"
+  integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==
+
+character-entities@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz"
+  integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
+
+character-reference-invalid@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz"
+  integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
+
 chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
@@ -1340,6 +1418,11 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz"
+  integrity sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==
+
 commander@^4.0.0:
   version "4.1.1"
   resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
@@ -1696,13 +1779,20 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@^4.0.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.5"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz"
   integrity sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==
   dependencies:
     ms "2.1.2"
 
+decode-named-character-reference@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz"
+  integrity sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==
+  dependencies:
+    character-entities "^2.0.0"
+
 deep-equal@^2.0.5:
   version "2.2.3"
   resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz"
@@ -1762,7 +1852,7 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-dequal@^2.0.2:
+dequal@^2.0.0, dequal@^2.0.2:
   version "2.0.3"
   resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
@@ -1777,6 +1867,13 @@ detect-node-es@^1.1.0:
   resolved "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz"
   integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
 
+devlop@^1.0.0, devlop@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz"
+  integrity sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==
+  dependencies:
+    dequal "^2.0.0"
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
@@ -1997,6 +2094,11 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
+escape-string-regexp@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz"
+  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
+
 eslint-config-next@14.2.5:
   version "14.2.5"
   resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.5.tgz"
@@ -2205,6 +2307,11 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
+estree-util-is-identifier-name@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz"
+  integrity sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
@@ -2225,6 +2332,11 @@ events@1.1.1:
   resolved "https://registry.npmjs.org/events/-/events-1.1.1.tgz"
   integrity sha512-kEcvvCBByWXGnZy6JUlgAp2gBIUjfCAV6P6TgT1/aaQKcmuAEC4OZTV1I4EWQLz2gxZw76atuVyvHhTxvi0Flw==
 
+extend@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
@@ -2558,6 +2670,39 @@ hasown@^2.0.0, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+hast-util-to-jsx-runtime@^2.0.0:
+  version "2.3.6"
+  resolved "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz"
+  integrity sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    "@types/hast" "^3.0.0"
+    "@types/unist" "^3.0.0"
+    comma-separated-tokens "^2.0.0"
+    devlop "^1.0.0"
+    estree-util-is-identifier-name "^3.0.0"
+    hast-util-whitespace "^3.0.0"
+    mdast-util-mdx-expression "^2.0.0"
+    mdast-util-mdx-jsx "^3.0.0"
+    mdast-util-mdxjs-esm "^2.0.0"
+    property-information "^7.0.0"
+    space-separated-tokens "^2.0.0"
+    style-to-js "^1.0.0"
+    unist-util-position "^5.0.0"
+    vfile-message "^4.0.0"
+
+hast-util-whitespace@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz"
+  integrity sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==
+  dependencies:
+    "@types/hast" "^3.0.0"
+
+html-url-attributes@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz"
+  integrity sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==
+
 iconv-lite@0.6:
   version "0.6.3"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz"
@@ -2606,6 +2751,11 @@ inherits@^2.0.3, inherits@2:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+inline-style-parser@0.2.7:
+  version "0.2.7"
+  resolved "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz"
+  integrity sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==
+
 internal-slot@^1.0.4, internal-slot@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz"
@@ -2620,6 +2770,19 @@ internal-slot@^1.0.4, internal-slot@^1.0.7:
   resolved "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz"
   integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
 
+is-alphabetical@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz"
+  integrity sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==
+
+is-alphanumerical@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz"
+  integrity sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==
+  dependencies:
+    is-alphabetical "^2.0.0"
+    is-decimal "^2.0.0"
+
 is-arguments@^1.0.4, is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz"
@@ -2691,6 +2854,11 @@ is-date-object@^1.0.1, is-date-object@^1.0.5:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-decimal@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz"
+  integrity sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
@@ -2722,6 +2890,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz"
+  integrity sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==
+
 is-map@^2.0.2, is-map@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz"
@@ -2749,6 +2922,11 @@ is-path-inside@^3.0.3:
   resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
+is-plain-obj@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz"
+  integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
+
 is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz"
@@ -3007,6 +3185,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+longest-streak@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz"
+  integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
@@ -3031,16 +3214,474 @@ lucide-react@^0.487.0:
   resolved "https://registry.npmjs.org/lucide-react/-/lucide-react-0.487.0.tgz"
   integrity sha512-aKqhOQ+YmFnwq8dWgGjOuLc8V1R9/c/yOd+zDY4+ohsR2Jo05lSGc3WsstYPIzcTpeosN7LoCkLReUUITvaIvw==
 
+markdown-table@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz"
+  integrity sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==
+
 math-intrinsics@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz"
   integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
 
+mdast-util-find-and-replace@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz"
+  integrity sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    escape-string-regexp "^5.0.0"
+    unist-util-is "^6.0.0"
+    unist-util-visit-parents "^6.0.0"
+
+mdast-util-from-markdown@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz"
+  integrity sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    "@types/unist" "^3.0.0"
+    decode-named-character-reference "^1.0.0"
+    devlop "^1.0.0"
+    mdast-util-to-string "^4.0.0"
+    micromark "^4.0.0"
+    micromark-util-decode-numeric-character-reference "^2.0.0"
+    micromark-util-decode-string "^2.0.0"
+    micromark-util-normalize-identifier "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+    unist-util-stringify-position "^4.0.0"
+
+mdast-util-gfm-autolink-literal@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz"
+  integrity sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    ccount "^2.0.0"
+    devlop "^1.0.0"
+    mdast-util-find-and-replace "^3.0.0"
+    micromark-util-character "^2.0.0"
+
+mdast-util-gfm-footnote@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz"
+  integrity sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    devlop "^1.1.0"
+    mdast-util-from-markdown "^2.0.0"
+    mdast-util-to-markdown "^2.0.0"
+    micromark-util-normalize-identifier "^2.0.0"
+
+mdast-util-gfm-strikethrough@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz"
+  integrity sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    mdast-util-from-markdown "^2.0.0"
+    mdast-util-to-markdown "^2.0.0"
+
+mdast-util-gfm-table@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz"
+  integrity sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    devlop "^1.0.0"
+    markdown-table "^3.0.0"
+    mdast-util-from-markdown "^2.0.0"
+    mdast-util-to-markdown "^2.0.0"
+
+mdast-util-gfm-task-list-item@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz"
+  integrity sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    devlop "^1.0.0"
+    mdast-util-from-markdown "^2.0.0"
+    mdast-util-to-markdown "^2.0.0"
+
+mdast-util-gfm@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz"
+  integrity sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==
+  dependencies:
+    mdast-util-from-markdown "^2.0.0"
+    mdast-util-gfm-autolink-literal "^2.0.0"
+    mdast-util-gfm-footnote "^2.0.0"
+    mdast-util-gfm-strikethrough "^2.0.0"
+    mdast-util-gfm-table "^2.0.0"
+    mdast-util-gfm-task-list-item "^2.0.0"
+    mdast-util-to-markdown "^2.0.0"
+
+mdast-util-mdx-expression@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz"
+  integrity sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^3.0.0"
+    "@types/mdast" "^4.0.0"
+    devlop "^1.0.0"
+    mdast-util-from-markdown "^2.0.0"
+    mdast-util-to-markdown "^2.0.0"
+
+mdast-util-mdx-jsx@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz"
+  integrity sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^3.0.0"
+    "@types/mdast" "^4.0.0"
+    "@types/unist" "^3.0.0"
+    ccount "^2.0.0"
+    devlop "^1.1.0"
+    mdast-util-from-markdown "^2.0.0"
+    mdast-util-to-markdown "^2.0.0"
+    parse-entities "^4.0.0"
+    stringify-entities "^4.0.0"
+    unist-util-stringify-position "^4.0.0"
+    vfile-message "^4.0.0"
+
+mdast-util-mdxjs-esm@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz"
+  integrity sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==
+  dependencies:
+    "@types/estree-jsx" "^1.0.0"
+    "@types/hast" "^3.0.0"
+    "@types/mdast" "^4.0.0"
+    devlop "^1.0.0"
+    mdast-util-from-markdown "^2.0.0"
+    mdast-util-to-markdown "^2.0.0"
+
+mdast-util-phrasing@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz"
+  integrity sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    unist-util-is "^6.0.0"
+
+mdast-util-to-hast@^13.0.0:
+  version "13.2.1"
+  resolved "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz"
+  integrity sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    "@types/mdast" "^4.0.0"
+    "@ungap/structured-clone" "^1.0.0"
+    devlop "^1.0.0"
+    micromark-util-sanitize-uri "^2.0.0"
+    trim-lines "^3.0.0"
+    unist-util-position "^5.0.0"
+    unist-util-visit "^5.0.0"
+    vfile "^6.0.0"
+
+mdast-util-to-markdown@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz"
+  integrity sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    "@types/unist" "^3.0.0"
+    longest-streak "^3.0.0"
+    mdast-util-phrasing "^4.0.0"
+    mdast-util-to-string "^4.0.0"
+    micromark-util-classify-character "^2.0.0"
+    micromark-util-decode-string "^2.0.0"
+    unist-util-visit "^5.0.0"
+    zwitch "^2.0.0"
+
+mdast-util-to-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz"
+  integrity sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+micromark-core-commonmark@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz"
+  integrity sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    devlop "^1.0.0"
+    micromark-factory-destination "^2.0.0"
+    micromark-factory-label "^2.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-factory-title "^2.0.0"
+    micromark-factory-whitespace "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-chunked "^2.0.0"
+    micromark-util-classify-character "^2.0.0"
+    micromark-util-html-tag-name "^2.0.0"
+    micromark-util-normalize-identifier "^2.0.0"
+    micromark-util-resolve-all "^2.0.0"
+    micromark-util-subtokenize "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-extension-gfm-autolink-literal@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz"
+  integrity sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-sanitize-uri "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-extension-gfm-footnote@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz"
+  integrity sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==
+  dependencies:
+    devlop "^1.0.0"
+    micromark-core-commonmark "^2.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-normalize-identifier "^2.0.0"
+    micromark-util-sanitize-uri "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-extension-gfm-strikethrough@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz"
+  integrity sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==
+  dependencies:
+    devlop "^1.0.0"
+    micromark-util-chunked "^2.0.0"
+    micromark-util-classify-character "^2.0.0"
+    micromark-util-resolve-all "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-extension-gfm-table@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz"
+  integrity sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==
+  dependencies:
+    devlop "^1.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-extension-gfm-tagfilter@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz"
+  integrity sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==
+  dependencies:
+    micromark-util-types "^2.0.0"
+
+micromark-extension-gfm-task-list-item@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz"
+  integrity sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==
+  dependencies:
+    devlop "^1.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-extension-gfm@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz"
+  integrity sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==
+  dependencies:
+    micromark-extension-gfm-autolink-literal "^2.0.0"
+    micromark-extension-gfm-footnote "^2.0.0"
+    micromark-extension-gfm-strikethrough "^2.0.0"
+    micromark-extension-gfm-table "^2.0.0"
+    micromark-extension-gfm-tagfilter "^2.0.0"
+    micromark-extension-gfm-task-list-item "^2.0.0"
+    micromark-util-combine-extensions "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-destination@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz"
+  integrity sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-label@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz"
+  integrity sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==
+  dependencies:
+    devlop "^1.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-space@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz"
+  integrity sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-title@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz"
+  integrity sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==
+  dependencies:
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-factory-whitespace@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz"
+  integrity sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==
+  dependencies:
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-character@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz"
+  integrity sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-chunked@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz"
+  integrity sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-classify-character@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz"
+  integrity sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-combine-extensions@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz"
+  integrity sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==
+  dependencies:
+    micromark-util-chunked "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-decode-numeric-character-reference@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz"
+  integrity sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-decode-string@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz"
+  integrity sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-decode-numeric-character-reference "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-encode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz"
+  integrity sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==
+
+micromark-util-html-tag-name@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz"
+  integrity sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==
+
+micromark-util-normalize-identifier@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz"
+  integrity sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==
+  dependencies:
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-resolve-all@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz"
+  integrity sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==
+  dependencies:
+    micromark-util-types "^2.0.0"
+
+micromark-util-sanitize-uri@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz"
+  integrity sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==
+  dependencies:
+    micromark-util-character "^2.0.0"
+    micromark-util-encode "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+
+micromark-util-subtokenize@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz"
+  integrity sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==
+  dependencies:
+    devlop "^1.0.0"
+    micromark-util-chunked "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
+micromark-util-symbol@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz"
+  integrity sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==
+
+micromark-util-types@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz"
+  integrity sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==
+
+micromark@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz"
+  integrity sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==
+  dependencies:
+    "@types/debug" "^4.0.0"
+    debug "^4.0.0"
+    decode-named-character-reference "^1.0.0"
+    devlop "^1.0.0"
+    micromark-core-commonmark "^2.0.0"
+    micromark-factory-space "^2.0.0"
+    micromark-util-character "^2.0.0"
+    micromark-util-chunked "^2.0.0"
+    micromark-util-combine-extensions "^2.0.0"
+    micromark-util-decode-numeric-character-reference "^2.0.0"
+    micromark-util-encode "^2.0.0"
+    micromark-util-normalize-identifier "^2.0.0"
+    micromark-util-resolve-all "^2.0.0"
+    micromark-util-sanitize-uri "^2.0.0"
+    micromark-util-subtokenize "^2.0.0"
+    micromark-util-symbol "^2.0.0"
+    micromark-util-types "^2.0.0"
+
 micromatch@^4.0.4, micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"
@@ -3358,6 +3999,19 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-entities@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz"
+  integrity sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    character-entities-legacy "^3.0.0"
+    character-reference-invalid "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    is-alphanumerical "^2.0.0"
+    is-decimal "^2.0.0"
+    is-hexadecimal "^2.0.0"
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
@@ -3521,6 +4175,11 @@ prop-types@^15.5.6, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-information@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz"
+  integrity sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
@@ -3610,6 +4269,23 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-markdown@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz"
+  integrity sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    "@types/mdast" "^4.0.0"
+    devlop "^1.0.0"
+    hast-util-to-jsx-runtime "^2.0.0"
+    html-url-attributes "^3.0.0"
+    mdast-util-to-hast "^13.0.0"
+    remark-parse "^11.0.0"
+    remark-rehype "^11.0.0"
+    unified "^11.0.0"
+    unist-util-visit "^5.0.0"
+    vfile "^6.0.0"
+
 react-remove-scroll-bar@^2.3.7:
   version "2.3.8"
   resolved "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz"
@@ -3637,7 +4313,7 @@ react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
     get-nonce "^1.0.0"
     tslib "^2.0.0"
 
-"react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react@^17.0.2 || ^18 || ^19", "react@^18 || ^19", "react@^18 || ^19 || ^19.0.0-rc", "react@^18.0.0 || ^19.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16 || ^19.0.0-rc", "react@>= 16.8 || 18.0.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.8.0, "react@16.x || 17.x || 18.x || 19.x":
+"react@^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react@^17.0.2 || ^18 || ^19", "react@^18 || ^19", "react@^18 || ^19 || ^19.0.0-rc", "react@^18.0.0 || ^19.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16 || ^19.0.0-rc", "react@>= 16.8 || 18.0.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.8.0, react@>=18, "react@16.x || 17.x || 18.x || 19.x":
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -3697,6 +4373,48 @@ regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2:
     es-errors "^1.3.0"
     set-function-name "^2.0.1"
 
+remark-gfm@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz"
+  integrity sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    mdast-util-gfm "^3.0.0"
+    micromark-extension-gfm "^3.0.0"
+    remark-parse "^11.0.0"
+    remark-stringify "^11.0.0"
+    unified "^11.0.0"
+
+remark-parse@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz"
+  integrity sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    mdast-util-from-markdown "^2.0.0"
+    micromark-util-types "^2.0.0"
+    unified "^11.0.0"
+
+remark-rehype@^11.0.0:
+  version "11.1.2"
+  resolved "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz"
+  integrity sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    "@types/mdast" "^4.0.0"
+    mdast-util-to-hast "^13.0.0"
+    unified "^11.0.0"
+    vfile "^6.0.0"
+
+remark-stringify@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz"
+  integrity sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==
+  dependencies:
+    "@types/mdast" "^4.0.0"
+    mdast-util-to-markdown "^2.0.0"
+    unified "^11.0.0"
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@@ -3911,6 +4629,11 @@ source-map-js@^1.0.2, source-map-js@^1.2.1:
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
+space-separated-tokens@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz"
+  integrity sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
@@ -4024,6 +4747,14 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
+stringify-entities@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz"
+  integrity sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==
+  dependencies:
+    character-entities-html4 "^2.0.0"
+    character-entities-legacy "^3.0.0"
+
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
@@ -4055,6 +4786,20 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+style-to-js@^1.0.0:
+  version "1.1.21"
+  resolved "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz"
+  integrity sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==
+  dependencies:
+    style-to-object "1.0.14"
+
+style-to-object@1.0.14:
+  version "1.0.14"
+  resolved "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz"
+  integrity sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==
+  dependencies:
+    inline-style-parser "0.2.7"
+
 styled-jsx@5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz"
@@ -4161,6 +4906,16 @@ tr46@~0.0.3:
   resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+trim-lines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz"
+  integrity sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==
+
+trough@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz"
+  integrity sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==
+
 ts-api-utils@^1.0.1:
   version "1.3.0"
   resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz"
@@ -4279,6 +5034,57 @@ undici@^7.9.0:
   resolved "https://registry.npmjs.org/undici/-/undici-7.9.0.tgz"
   integrity sha512-e696y354tf5cFZPXsF26Yg+5M63+5H3oE6Vtkh2oqbvsE2Oe7s2nIbcQh5lmG7Lp/eS29vJtTpw9+p6PX0qNSg==
 
+unified@^11.0.0:
+  version "11.0.5"
+  resolved "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz"
+  integrity sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    bail "^2.0.0"
+    devlop "^1.0.0"
+    extend "^3.0.0"
+    is-plain-obj "^4.0.0"
+    trough "^2.0.0"
+    vfile "^6.0.0"
+
+unist-util-is@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz"
+  integrity sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==
+  dependencies:
+    "@types/unist" "^3.0.0"
+
+unist-util-position@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz"
+  integrity sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==
+  dependencies:
+    "@types/unist" "^3.0.0"
+
+unist-util-stringify-position@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz"
+  integrity sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==
+  dependencies:
+    "@types/unist" "^3.0.0"
+
+unist-util-visit-parents@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz"
+  integrity sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    unist-util-is "^6.0.0"
+
+unist-util-visit@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz"
+  integrity sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    unist-util-is "^6.0.0"
+    unist-util-visit-parents "^6.0.0"
+
 update-browserslist-db@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz"
@@ -4343,6 +5149,22 @@ uuid@8.0.0:
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.0.0.tgz"
   integrity sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==
 
+vfile-message@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz"
+  integrity sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    unist-util-stringify-position "^4.0.0"
+
+vfile@^6.0.0:
+  version "6.0.3"
+  resolved "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz"
+  integrity sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    vfile-message "^4.0.0"
+
 warning@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz"
@@ -4485,3 +5307,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zwitch@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz"
+  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==