diff --git a/.aegir.js b/.aegir.js
index e7782801e..d2aeda92e 100644
--- a/.aegir.js
+++ b/.aegir.js
@@ -51,6 +51,7 @@ export default {
       'jest-environment-jsdom', // in npm script via --env=jsdom
       '@testing-library/react', // jsx is not tested properly
       '@testing-library/jest-dom', // jsx is not tested properly
+      '@testing-library/user-event', // jsx is not tested properly
 
 
       // storybook deps
diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml
index bd062b85d..d59d26d40 100644
--- a/.github/workflows/test-e2e.yml
+++ b/.github/workflows/test-e2e.yml
@@ -113,7 +113,7 @@ jobs:
         if: failure()
         uses: actions/upload-artifact@v4
         with:
-          name: test-results
+          name: test-results-shard-${{ matrix.shardIndex }}
           path: test-results/
           retention-days: 7
 
diff --git a/.gitignore b/.gitignore
index 2d5d3ef71..418195036 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@
 test/e2e/setup/ipfs-backend.json
 test/e2e/state.json
 storybook-static
+test-results/
 
 # production
 /build
diff --git a/package-lock.json b/package-lock.json
index ee587b8d9..a71fcc881 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -106,6 +106,7 @@
         "@svgr/cli": "^8.1.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^12.1.5",
+        "@testing-library/user-event": "^13.5.0",
         "@types/esm": "^3.2.0",
         "@types/jest": "^29.5.14",
         "@types/node": "^14.18.36",
@@ -139,7 +140,8 @@
         "ipfsd-ctl": "^15.0.2",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "kubo": "^0.36.0",
+        "jest-mock": "^30.0.5",
+        "kubo": "^0.37.0",
         "npm-run-all": "^4.1.5",
         "nyc": "^15.1.0",
         "os-browserify": "^0.3.0",
@@ -5602,6 +5604,39 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@jest/environment/node_modules/jest-mock": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
+      "integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-util": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/environment/node_modules/jest-util": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
+      "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/@jest/expect": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-29.7.0.tgz",
@@ -5706,6 +5741,21 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/@jest/fake-timers/node_modules/jest-mock": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
+      "integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-util": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/@jest/fake-timers/node_modules/jest-util": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
@@ -5778,6 +5828,63 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@jest/globals/node_modules/jest-mock": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
+      "integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-util": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/globals/node_modules/jest-util": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
+      "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/pattern": {
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/@jest/pattern/-/pattern-30.0.1.tgz",
+      "integrity": "sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "jest-regex-util": "30.0.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/pattern/node_modules/jest-regex-util": {
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-30.0.1.tgz",
+      "integrity": "sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
     "node_modules/@jest/reporters": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-29.7.0.tgz",
@@ -17834,6 +17941,76 @@
         "react": "^15.0.0-0 || ^16.0.0"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -17988,6 +18165,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
+      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tokenizer/token": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz",
@@ -44751,6 +44945,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jest-environment-jsdom/node_modules/jest-mock": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
+      "integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-util": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/jest-environment-jsdom/node_modules/jest-util": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
@@ -44825,6 +45034,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jest-environment-node/node_modules/jest-mock": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
+      "integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-util": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/jest-environment-node/node_modules/jest-util": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
@@ -45590,74 +45814,104 @@
       "license": "MIT"
     },
     "node_modules/jest-mock": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
-      "integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-30.0.5.tgz",
+      "integrity": "sha512-Od7TyasAAQX/6S+QCbN6vZoWOMwlTtzzGuxJku1GhGanAjz9y+QsQkpScDmETvdc9aSXyJ/Op4rhpMYBWW91wQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jest/types": "^29.6.3",
+        "@jest/types": "30.0.5",
         "@types/node": "*",
-        "jest-util": "^29.7.0"
+        "jest-util": "30.0.5"
       },
       "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
     "node_modules/jest-mock/node_modules/@jest/schemas": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-30.0.5.tgz",
+      "integrity": "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@sinclair/typebox": "^0.27.8"
+        "@sinclair/typebox": "^0.34.0"
       },
       "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
     "node_modules/jest-mock/node_modules/@jest/types": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
-      "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-30.0.5.tgz",
+      "integrity": "sha512-aREYa3aku9SSnea4aX6bhKn4bgv3AXkgijoQgbYV3yvbiGt6z+MQ85+6mIhx9DsKW2BuB/cLR/A+tcMThx+KLQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
+        "@jest/pattern": "30.0.1",
+        "@jest/schemas": "30.0.5",
+        "@types/istanbul-lib-coverage": "^2.0.6",
+        "@types/istanbul-reports": "^3.0.4",
         "@types/node": "*",
-        "@types/yargs": "^17.0.8",
-        "chalk": "^4.0.0"
+        "@types/yargs": "^17.0.33",
+        "chalk": "^4.1.2"
       },
       "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
     "node_modules/jest-mock/node_modules/@sinclair/typebox": {
-      "version": "0.27.8",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
-      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "version": "0.34.40",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.40.tgz",
+      "integrity": "sha512-gwBNIP8ZAYev/ORDWW0QvxdwPXwxBtLsdsJgSc7eDIRt8ubP+rxUBzPsrwnu16fgEF8Bx4lh/+mvQvJzcTM6Kw==",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jest-mock/node_modules/ci-info": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.0.tgz",
+      "integrity": "sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/jest-mock/node_modules/jest-util": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
-      "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-30.0.5.tgz",
+      "integrity": "sha512-pvyPWssDZR0FlfMxCBoc0tvM8iUEskaRFALUtGQYzVEAqisAztmy+R8LnU14KT4XA0H/a5HMVTXat1jLne010g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jest/types": "^29.6.3",
+        "@jest/types": "30.0.5",
         "@types/node": "*",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "graceful-fs": "^4.2.9",
-        "picomatch": "^2.2.3"
+        "chalk": "^4.1.2",
+        "ci-info": "^4.2.0",
+        "graceful-fs": "^4.2.11",
+        "picomatch": "^4.0.2"
       },
       "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-mock/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
     "node_modules/jest-pnp-resolver": {
@@ -46349,6 +46603,21 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/jest-runtime/node_modules/jest-mock": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
+      "integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-util": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/jest-runtime/node_modules/jest-regex-util": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.6.3.tgz",
@@ -47936,9 +48205,9 @@
       }
     },
     "node_modules/kubo": {
-      "version": "0.36.0",
-      "resolved": "https://registry.npmjs.org/kubo/-/kubo-0.36.0.tgz",
-      "integrity": "sha512-bZJ8RR+xtOzoU4TY3A7lfgNtLdvUJXddAUCVFwH2/yqITNsLpSEAJ2SsyIIkHr3beVqW2lzAIw4cQXz8RZSI/Q==",
+      "version": "0.37.0",
+      "resolved": "https://registry.npmjs.org/kubo/-/kubo-0.37.0.tgz",
+      "integrity": "sha512-TjU04/gbJd+pFvc2s2r0mKF2LhgSCWNko0TYpaWDiWI9HPX6k6PvNQinMfwnP8EvyQgfhH50MNrVXNvJQ5dfoQ==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
diff --git a/package.json b/package.json
index 3ff077c24..0d9859b4d 100644
--- a/package.json
+++ b/package.json
@@ -136,6 +136,7 @@
     "@svgr/cli": "^8.1.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^13.5.0",
     "@types/esm": "^3.2.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^14.18.36",
@@ -169,7 +170,8 @@
     "ipfsd-ctl": "^15.0.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "kubo": "^0.36.0",
+    "jest-mock": "^30.0.5",
+    "kubo": "^0.37.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "os-browserify": "^0.3.0",
diff --git a/public/locales/en/app.json b/public/locales/en/app.json
index c40e0a833..fee465c63 100644
--- a/public/locales/en/app.json
+++ b/public/locales/en/app.json
@@ -9,29 +9,25 @@
     "close": "Close",
     "copy": "Copy",
     "create": "Create",
+    "default": "Default",
     "remove": "Remove",
     "download": "Download",
     "edit": "Edit",
     "import": "Import",
     "inspect": "Inspect",
     "more": "More",
-    "moreInfo": "More info",
-    "noThanks": "No thanks",
-    "ok": "OK",
-    "pinVerb": "Pin",
     "rename": "Rename",
     "reset": "Reset",
     "save": "Save",
     "saving": "Saving…",
-    "selectAll": "Select all",
     "setPinning": "Set pinning",
     "submit": "Submit",
-    "unpin": "Unpin",
     "unselectAll": "Unselect all",
     "generate": "Generate",
     "publish": "Publish",
     "downloadCar": "Export CAR",
-    "done": "Done"
+    "done": "Done",
+    "checkRetrieval": "Check Retrieval"
   },
   "cliModal": {
     "description": "Paste the following into your terminal to do this task in Kubo via the command line. Remember that you'll need to replace placeholders with your specific parameters."
@@ -54,6 +50,10 @@
   "publicSubdomainGatewayForm": {
     "placeholder": "Enter a URL (https://dweb.link)"
   },
+  "ipfsCheckForm": {
+    "label": "Retrieval Check Service URL",
+    "placeholder": "Enter a URL (https://check.ipfs.network)"
+  },
   "terms": {
     "address": "Address",
     "addresses": "Addresses",
diff --git a/public/locales/en/diagnostics.json b/public/locales/en/diagnostics.json
new file mode 100644
index 000000000..6d1d289d9
--- /dev/null
+++ b/public/locales/en/diagnostics.json
@@ -0,0 +1,94 @@
+{
+  "title": "Diagnostics",
+  "tabs": {
+    "logs": "Logs",
+    "retrieval-check": "Retrieval Check"
+  },
+  "logs": {
+    "title": "Node Logs",
+    "streaming": {
+      "statusActive": "Streaming Active",
+      "statusStopped": "Streaming Stopped",
+      "rate": "{rate} logs/sec",
+      "highRate": "High Rate",
+      "autoDisabled": "Auto-disabled"
+    },
+    "entries": {
+      "noEntries": "No log entries yet. Start streaming to see logs.",
+      "noEntriesStreaming": "Listening for logs... (tip: increase log levels to see more activity)",
+      "loading": "Loading log subsystems...",
+      "tooltipGoToLatest": "Scroll to latest logs",
+      "tooltipExpand": "Expand logs",
+      "tooltipCollapse": "Collapse logs",
+      "tooltipPlay": "Start streaming",
+      "tooltipPause": "Stop streaming",
+      "tooltipSettings": "Configure streaming"
+    },
+    "storage": {
+      "title": "Storage Statistics",
+      "totalEntries": "Total Entries",
+      "estimatedSize": "Estimated Size",
+      "memoryBuffer": "Memory Buffer",
+      "trashTooltip": "Clear all logs"
+    },
+    "config": {
+      "title": "Buffer Configuration",
+      "memoryBuffer": "Memory Buffer (entries)",
+      "persistentBuffer": "Persistent Buffer (entries)",
+      "warnThreshold": "Warning Threshold (logs/sec)",
+      "autoDisableThreshold": "Auto-disable Threshold (logs/sec)"
+    },
+    "gologLevel": {
+      "title": "Log Level Configuration",
+      "placeholder": "e.g. error,bitswap=info,nat=debug",
+      "description": "Choose what gets logged and how much detail to show. Start with a base level like 'error' to see only problems, or add specific components to track (like 'error,nat=debug' to debug UPnP issues). Same syntax as GOLOG_LOG_LEVEL. <0>Learn more</0>",
+      "invalidSubsystemLevel": "Subsystem \"{subsystem}\" must be followed by an equal sign and a log level."
+    },
+    "autocomplete": {
+      "globalLevel": "Global level",
+      "subsystem": "Subsystem",
+      "level": "Log level"
+    },
+    "warnings": {
+      "potentialIssues": "Potential Issues:",
+      "recommendations": "Recommendations:",
+      "cancel": "Cancel",
+      "debugGlobal": {
+        "title": "Enable Debug Logging Globally?",
+        "message": "You are about to enable DEBUG level logging for all subsystems. This will generate a very high volume of logs and may impact browser performance.",
+        "detail1": "Debug logs can generate 100+ messages per second",
+        "detail2": "High CPU usage and memory consumption",
+        "detail3": "Potential browser tab crashes or freezing",
+        "suggestion1": "Consider enabling debug logs for specific subsystems only",
+        "suggestion2": "Use for short debugging sessions (< 5 minutes)",
+        "suggestion3": "Monitor the log rate indicator and disable if needed",
+        "confirm": "Enable Debug Globally"
+      },
+      "highRate": {
+        "title": "High Log Rate Detected",
+        "message": "Current log rate is {rate} logs/second, which may cause performance issues.",
+        "detail1": "High log rates can slow down the browser",
+        "detail2": "Memory usage will increase rapidly",
+        "suggestion1": "Consider reducing log levels for busy subsystems",
+        "suggestion2": "Use buffer configuration to limit memory usage",
+        "confirm": "Continue"
+      },
+      "autoDisable": {
+        "title": "Log Streaming Auto-Disabled",
+        "message": "Log streaming was automatically disabled due to extremely high rate ({rate} logs/sec).",
+        "detail1": "This protects your browser from potential crashes",
+        "detail2": "Logs are still being cached in persistent storage",
+        "suggestion1": "Reduce log levels before re-enabling streaming",
+        "suggestion2": "Check subsystem log levels and disable debug mode",
+        "confirm": "Understood"
+      }
+    },
+    "unsupported": {
+      "title": "Unsupported Kubo Version",
+      "description": "Your current version of Kubo ({version}) does not support the log level management feature required for this diagnostics page.",
+      "upgradeTitle": "Upgrade Required",
+      "upgradeDescription": "To use the log level management features, you need to upgrade to a newer version of Kubo that supports getting log levels and tailing logs from the RPC API endpoint.",
+      "downloadKubo": "Download Kubo"
+    }
+  }
+}
diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index a50098709..967e860b5 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -1,12 +1,9 @@
 {
   "title": "Files",
-  "home": "Home",
   "breadcrumbs": "Breadcrumbs",
-  "finished": "Finished!",
   "totalSize": "Total size: {size}",
   "filesSelected": "{count, plural, one {Item selected} other {Items selected}}",
   "menuOptions": "Options for selected item",
-  "selectedAllEntries": "Select all table entries",
   "individualFilesOnly": "Only available for individual files",
   "noPDFSupport": "Your browser does not support PDFs. Please download the PDF to view it:",
   "downloadPDF": "Download PDF",
diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json
index b76ed9a7c..98585c8e3 100644
--- a/public/locales/en/settings.json
+++ b/public/locales/en/settings.json
@@ -15,7 +15,7 @@
   "language": "Language",
   "analytics": "Analytics",
   "cliTutorMode": "CLI Tutor Mode",
-  "config": "IPFS Config",
+  "config": "Kubo Config",
   "languageModal": {
     "title": "Change language",
     "description": "Pick your preferred language.",
@@ -25,6 +25,10 @@
   "apiDescription": "<0>If your node is configured with a <1>custom Kubo RPC API address</1>, including a port other than the default 5001, enter it here.</0>",
   "publicSubdomainGatewayDescription": "<0>Select a default <1>Subdomain Gateway</1> for generating shareable links.</0>",
   "publicPathGatewayDescription": "<0>Select a fallback <1>Path Gateway</1> for generating shareable links for CIDs that exceed the 63-character DNS limit.</0>",
+  "retrievalDiagnosticService": {
+    "title": "Retrieval Diagnostic Service",
+    "description": "Configure the URL of the <0>ipfs-check</0> service used for <1>retrieval diagnostics</1>. This service checks if content can be successfully fetched from your node and other nodes hosting a specific CID, helping you troubleshoot sharing issues."
+  },
   "cliDescription": "<0>Enable this option to display a \"view code\" <1></1> icon next to common IPFS commands. Clicking it opens a modal with that command's CLI code, so you can paste it into the IPFS command-line interface in your terminal.</0>",
   "cliModal": {
     "extraNotesJsonConfig": "If you've made changes to the config in this page's code editor that you'd like to save, click the download icon next to the copy button to download it as a JSON file."
@@ -81,14 +85,14 @@
     "false": "Off"
   },
   "fetchingSettings": "Fetching settings...",
-  "ipfsDaemonOffline": "The IPFS daemon is offline. Please turn it on and try again.",
-  "settingsUnavailable": "Settings not available. Please check your IPFS daemon is running.",
+  "ipfsDaemonOffline": "The Kubo daemon is offline. Please turn it on and try again.",
+  "settingsUnavailable": "Settings not available. Please check your Kubo daemon is running.",
   "settingsHaveChanged": "The settings have changed; please click <1>Reset</1> to update the editor contents.",
   "errorOccured": "An error occured while saving your changes",
   "checkConsole": "Check the browser console for more info.",
   "changesSaved": "Your changes have been saved.",
-  "settingsWillBeUsedNextTime": "The new settings will be used next time you restart the IPFS daemon.",
-  "ipfsConfigDescription": "The IPFS config file is a JSON document. It is read once when the IPFS daemon is started. Save your changes, then restart the IPFS daemon to apply them.",
+  "settingsWillBeUsedNextTime": "The new settings will be used next time you restart the Kubo daemon.",
+  "ipfsConfigDescription": "The Kubo config file is a JSON document. It is read once when the Kubo daemon is started. Save your changes, then restart the Kubo daemon to apply them.",
   "ipfsConfigHelp": "Check the documentation for further information.",
   "AnalyticsToggle": {
     "label": "Help improve this app by sending anonymous usage data",
@@ -129,7 +133,7 @@
   "tour": {
     "step1": {
       "title": "Settings page",
-      "paragraph1": "Here you can change the settings of your Web UI and IPFS node.",
+      "paragraph1": "Here you can change the settings of your Web UI and Kubo node.",
       "paragraph2": "If you're running IPFS Desktop you'll have some specific settings for it too."
     },
     "step2": {
@@ -154,8 +158,8 @@
       "paragraph1": "Enable CLI tutor mode to see shortcuts to the command-line version of common IPFS commands — helpful if you're learning to use IPFS from the terminal, or if you just need a refresher."
     },
     "step7": {
-      "title": "IPFS Config",
-      "paragraph1": "You can change the config of your IPFS node right from Web UI!",
+      "title": "Kubo Config",
+      "paragraph1": "You can change the config of your Kubo node right from Web UI!",
       "paragraph2": "Don't forget to restart the daemon to apply the changes."
     }
   },
diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index bc59e465c..afc1ede8f 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -542,11 +542,11 @@ const actions = () => ({
   }),
 
   /**
-   * Triggers provide operation for a copied CID.
+   * Triggers provide operation for a CID.
    * @param {import('multiformats/cid').CID} cid
    */
-  doFilesCopyCidProvide: (cid) => perform('FILES_COPY_CID_PROVIDE', async (ipfs) => {
-    dispatchAsyncProvide(cid, ipfs, 'COPY')
+  doFilesCidProvide: (cid) => perform('FILES_CID_PROVIDE', async (ipfs) => {
+    dispatchAsyncProvide(cid, ipfs)
   }),
 
   doFilesShareLink: (/** @type {FileStat[]} */ files) => perform(ACTIONS.SHARE_LINK, async (ipfs, { store }) => {
@@ -556,7 +556,7 @@ const actions = () => ({
     const { link: shareableLink, cid } = await getShareableLink(files, publicGateway, publicSubdomainGateway, ipfs)
 
     // Trigger background provide operation with the CID from getShareableLink
-    dispatchAsyncProvide(cid, ipfs, 'SHARE')
+    dispatchAsyncProvide(cid, ipfs)
 
     return shareableLink
   }),
diff --git a/src/bundles/files/utils.js b/src/bundles/files/utils.js
index bedf575d7..38caab7fd 100644
--- a/src/bundles/files/utils.js
+++ b/src/bundles/files/utils.js
@@ -324,13 +324,12 @@ export const ensureMFS = (store) => {
  *
  * @param {CID|null|undefined} cid - The CID to provide
  * @param {IPFSService} ipfs - The IPFS service instance
- * @param {string} context - Context for logging
  */
-export const dispatchAsyncProvide = (cid, ipfs, context) => {
+export const dispatchAsyncProvide = (cid, ipfs) => {
   if (cid != null) {
-    console.debug(`[${context}] Dispatching one-time ad-hoc provide for root CID ${cid.toString()} (non-recursive) for improved performance when sharing today`)
+    console.debug(`Dispatching one-time ad-hoc provide for root CID ${cid.toString()} (non-recursive)`)
     void debouncedProvide(cid, ipfs).catch((error) => {
-      console.error(`[${context}] debouncedProvide failed:`, error)
+      console.error('debouncedProvide failed:', error)
     })
   }
 }
diff --git a/src/bundles/gateway.js b/src/bundles/gateway.js
index 978437cbd..15426a13f 100644
--- a/src/bundles/gateway.js
+++ b/src/bundles/gateway.js
@@ -3,6 +3,7 @@ import { readSetting, writeSetting } from './local-storage.js'
 // TODO: switch to dweb.link when https://github.com/ipfs/kubo/issues/7318
 export const DEFAULT_PATH_GATEWAY = 'https://ipfs.io'
 export const DEFAULT_SUBDOMAIN_GATEWAY = 'https://dweb.link'
+export const DEFAULT_IPFS_CHECK_URL = 'https://check.ipfs.network'
 const IMG_HASH_1PX = 'bafkreib6wedzfupqy7qh44sie42ub4mvfwnfukmw6s2564flajwnt4cvc4' // 1x1.png
 const IMG_ARRAY = [
   { id: 'IMG_HASH_1PX', name: '1x1.png', hash: IMG_HASH_1PX },
@@ -20,12 +21,22 @@ const readPublicSubdomainGatewaySetting = () => {
   return setting || DEFAULT_SUBDOMAIN_GATEWAY
 }
 
+const readIpfsCheckUrlSetting = () => {
+  const setting = readSetting('ipfsCheckUrl')
+  return setting || DEFAULT_IPFS_CHECK_URL
+}
+
 const init = () => ({
   availableGateway: null,
   publicGateway: readPublicGatewaySetting(),
-  publicSubdomainGateway: readPublicSubdomainGatewaySetting()
+  publicSubdomainGateway: readPublicSubdomainGatewaySetting(),
+  ipfsCheckUrl: readIpfsCheckUrlSetting()
 })
 
+/**
+ * @param {any} value
+ * @returns {boolean}
+ */
 export const checkValidHttpUrl = (value) => {
   let url
 
@@ -39,6 +50,7 @@ export const checkValidHttpUrl = (value) => {
 
 /**
  * Check if any hashes from IMG_ARRAY can be loaded from the provided gatewayUrl
+ * @param {string} gatewayUrl - The gateway URL to check
  * @see https://github.com/ipfs/ipfs-webui/issues/1937#issuecomment-1152894211 for more info
  */
 export const checkViaImgSrc = (gatewayUrl) => {
@@ -49,12 +61,17 @@ export const checkViaImgSrc = (gatewayUrl) => {
    * this is more robust check than loading js, as it won't be blocked
    * by privacy protections present in modern browsers or in extensions such as Privacy Badger
    */
+  // @ts-expect-error - Promise.any requires ES2021 but we're on ES2020
   return Promise.any(IMG_ARRAY.map(element => {
     const imgUrl = new URL(`${url.protocol}//${url.hostname}/ipfs/${element.hash}?now=${Date.now()}&filename=${element.name}#x-ipfs-companion-no-redirect`)
     return checkImgSrcPromise(imgUrl)
   }))
 }
 
+/**
+ * @param {URL} imgUrl - The image URL to check
+ * @returns {Promise<void>}
+ */
 const checkImgSrcPromise = (imgUrl) => {
   const imgCheckTimeout = 15000
 
@@ -66,6 +83,7 @@ const checkImgSrcPromise = (imgUrl) => {
       return true
     }
 
+    /** @type {NodeJS.Timeout | null} */
     let timer = setTimeout(() => { if (timeout()) reject(new Error(`Image load timed out after ${imgCheckTimeout / 1000} seconds for URL: ${imgUrl}`)) }, imgCheckTimeout)
     const img = new Image()
 
@@ -80,7 +98,7 @@ const checkImgSrcPromise = (imgUrl) => {
       resolve()
     }
 
-    img.src = imgUrl
+    img.src = imgUrl.toString()
   })
 }
 
@@ -131,7 +149,9 @@ export async function checkSubdomainGateway (gatewayUrl) {
     // avoid sending probe requests to the default gateway every time Settings page is opened
     return true
   }
+  /** @type {URL} */
   let imgSubdomainUrl
+  /** @type {URL} */
   let imgRedirectedPathUrl
   try {
     const gwUrl = new URL(gatewayUrl)
@@ -156,6 +176,11 @@ export async function checkSubdomainGateway (gatewayUrl) {
 const bundle = {
   name: 'gateway',
 
+  /**
+   * @param {any} state
+   * @param {any} action
+   * @returns {any}
+   */
   reducer: (state = init(), action) => {
     if (action.type === 'SET_AVAILABLE_GATEWAY') {
       return { ...state, availableGateway: action.payload }
@@ -169,26 +194,69 @@ const bundle = {
       return { ...state, publicSubdomainGateway: action.payload }
     }
 
+    if (action.type === 'SET_IPFS_CHECK_URL') {
+      return { ...state, ipfsCheckUrl: action.payload }
+    }
+
     return state
   },
 
+  /**
+   * @param {string} url
+   * @returns {function({dispatch: Function}): any}
+   */
   doSetAvailableGateway: url => ({ dispatch }) => dispatch({ type: 'SET_AVAILABLE_GATEWAY', payload: url }),
 
+  /**
+   * @param {string} address
+   * @returns {function({dispatch: Function}): Promise<void>}
+   */
   doUpdatePublicGateway: (address) => async ({ dispatch }) => {
     await writeSetting('ipfsPublicGateway', address)
     dispatch({ type: 'SET_PUBLIC_GATEWAY', payload: address })
   },
 
+  /**
+   * @param {string} address
+   * @returns {function({dispatch: Function}): Promise<void>}
+   */
   doUpdatePublicSubdomainGateway: (address) => async ({ dispatch }) => {
     await writeSetting('ipfsPublicSubdomainGateway', address)
     dispatch({ type: 'SET_PUBLIC_SUBDOMAIN_GATEWAY', payload: address })
   },
 
+  /**
+   * @param {string} url
+   * @returns {function({dispatch: Function}): Promise<void>}
+   */
+  doUpdateIpfsCheckUrl: (url) => async ({ dispatch }) => {
+    await writeSetting('ipfsCheckUrl', url)
+    dispatch({ type: 'SET_IPFS_CHECK_URL', payload: url })
+  },
+
+  /**
+   * @param {any} state
+   * @returns {string|null}
+   */
   selectAvailableGateway: (state) => state?.gateway?.availableGateway,
 
+  /**
+   * @param {any} state
+   * @returns {string}
+   */
   selectPublicGateway: (state) => state?.gateway?.publicGateway,
 
-  selectPublicSubdomainGateway: (state) => state?.gateway?.publicSubdomainGateway
+  /**
+   * @param {any} state
+   * @returns {string}
+   */
+  selectPublicSubdomainGateway: (state) => state?.gateway?.publicSubdomainGateway,
+
+  /**
+   * @param {any} state
+   * @returns {string}
+   */
+  selectIpfsCheckUrl: (state) => state?.gateway?.ipfsCheckUrl
 }
 
 export default bundle
diff --git a/src/bundles/index.js b/src/bundles/index.js
index 5e6f8312d..df5d6ad1d 100644
--- a/src/bundles/index.js
+++ b/src/bundles/index.js
@@ -1,4 +1,4 @@
-import { composeBundles, createCacheBundle } from 'redux-bundler'
+import { composeBundles, createCacheBundle, createSelector } from 'redux-bundler'
 import ipfsProvider from './ipfs-provider.js'
 import appIdle from './app-idle.js'
 import nodeBandwidthChartBundle from './node-bandwidth-chart.js'
@@ -23,8 +23,18 @@ import experimentsBundle from './experiments.js'
 import cliTutorModeBundle from './cli-tutor-mode.js'
 import gatewayBundle from './gateway.js'
 import ipnsBundle from './ipns.js'
+import { contextBridge } from '../helpers/context-bridge'
 
 export default composeBundles(
+  {
+    name: 'bridgedContextCatchAll',
+    reactRouteInfoToBridge: createSelector(
+      'selectRouteInfo',
+      (routeInfo) => {
+        contextBridge.setContext('selectRouteInfo', routeInfo)
+      }
+    )
+  },
   createCacheBundle({
     cacheFn: bundleCache.set
   }),
diff --git a/src/bundles/ipfs-provider.js b/src/bundles/ipfs-provider.js
index 310f6a0a4..fad79b0ee 100644
--- a/src/bundles/ipfs-provider.js
+++ b/src/bundles/ipfs-provider.js
@@ -539,6 +539,13 @@ const bundle = {
     contextBridge.setContext('doUpdateIpfsApiAddress', store.doUpdateIpfsApiAddress)
   },
 
+  reactIpfsReadyToBridge: createSelector(
+    'selectIpfsReady',
+    (ipfsReady) => {
+      contextBridge.setContext('selectIpfsReady', ipfsReady)
+    }
+  ),
+
   /**
    * Bridge ipfs instance to context bridge for use by React contexts
    */
diff --git a/src/bundles/routes-types.ts b/src/bundles/routes-types.ts
new file mode 100644
index 000000000..c2c8faf1d
--- /dev/null
+++ b/src/bundles/routes-types.ts
@@ -0,0 +1,33 @@
+import type React from 'react'
+
+/**
+ * src/bundles/routes.js creates a RouteBundle from redux-bundler that provides some objects that are not typed.
+ */
+
+/**
+ * The type for the object provided by `selectRouteInfo` selector.
+ *
+ * These types are not 100% accurate and only filled out as accurately as possible as needed.
+ */
+export interface RouteInfo {
+  /**
+   * The value of the currently matched pattern from src/bundles/routes.js
+   */
+  page: React.ReactNode
+
+  params: {
+    // if you are on #/diagnostics/logs, this will be equal to '/logs'
+    path: string
+  }
+
+  /**
+   * This will match whatever key is set in src/bundles/routes.js for the page that is currently active.
+   * For the diagnostics page, this will be equal to '/diagnostics*'
+   */
+  pattern: string
+
+  /**
+   * The hash of the url, without the hash symbol.
+   */
+  url: string
+}
diff --git a/src/bundles/routes.js b/src/bundles/routes.js
index 6dd314578..5b1915c9e 100644
--- a/src/bundles/routes.js
+++ b/src/bundles/routes.js
@@ -8,6 +8,7 @@ import AnalyticsPage from '../settings/AnalyticsPage.js'
 import WelcomePage from '../welcome/LoadableWelcomePage.js'
 import BlankPage from '../blank/BlankPage.js'
 import ExplorePageRenderer from '../explore/explore-page-renderer.jsx'
+import DiagnosticsPage from '../diagnostics/loadable-diagnostics-page'
 
 export default createRouteBundle({
   '/explore': ExplorePageRenderer,
@@ -21,6 +22,7 @@ export default createRouteBundle({
   '/settings*': SettingsPage,
   '/welcome': WelcomePage,
   '/blank': BlankPage,
+  '/diagnostics*': DiagnosticsPage,
   '/status*': StatusPage,
   '/': StatusPage,
   '': StatusPage
diff --git a/src/components/button/button.css b/src/components/button/button.css
index 3c6ed1ae2..d06be2c59 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -1,5 +1,7 @@
 .Button {
   opacity: 0.9;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .Button:hover {
@@ -11,6 +13,18 @@
   box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
 }
 
+.Button:focus {
+  outline: none;
+}
+
+/* Improve touch responsiveness */
+@media (hover: none) and (pointer: coarse) {
+  .Button {
+    min-height: 44px;
+    padding: 12px 16px;
+  }
+}
+
 .Button:disabled {
   opacity: 0.8;
   box-shadow: initial;
diff --git a/src/components/ipfs-check-form/IpfsCheckForm.js b/src/components/ipfs-check-form/IpfsCheckForm.js
new file mode 100644
index 000000000..3e569a267
--- /dev/null
+++ b/src/components/ipfs-check-form/IpfsCheckForm.js
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react'
+import { connect } from 'redux-bundler-react'
+import { withTranslation } from 'react-i18next'
+import Button from '../button/button.tsx'
+import { checkValidHttpUrl, DEFAULT_IPFS_CHECK_URL } from '../../bundles/gateway.js'
+
+const IpfsCheckForm = ({ t, doUpdateIpfsCheckUrl, ipfsCheckUrl }) => {
+  const [value, setValue] = useState(ipfsCheckUrl)
+  const initialIsValidUrl = !checkValidHttpUrl(value)
+  const [showFailState, setShowFailState] = useState(initialIsValidUrl)
+  const [isValidUrl, setIsValidUrl] = useState(initialIsValidUrl)
+
+  // Updates the border of the input to indicate validity
+  useEffect(() => {
+    setShowFailState(!isValidUrl)
+  }, [isValidUrl])
+
+  // Updates the border of the input to indicate validity
+  useEffect(() => {
+    const isValid = checkValidHttpUrl(value)
+    setIsValidUrl(isValid)
+    setShowFailState(!isValid)
+  }, [value])
+
+  const onChange = (event) => setValue(event.target.value)
+
+  const onSubmit = async (event) => {
+    event.preventDefault()
+
+    if (!isValidUrl) {
+      setShowFailState(true)
+      return
+    }
+
+    doUpdateIpfsCheckUrl(value)
+  }
+
+  const onDefault = async (event) => {
+    event.preventDefault()
+    setValue(DEFAULT_IPFS_CHECK_URL)
+    doUpdateIpfsCheckUrl(DEFAULT_IPFS_CHECK_URL)
+  }
+
+  const onKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      onSubmit(event)
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input
+        id='ipfs-check-url'
+        aria-label={t('ipfsCheckForm.label')}
+        placeholder={t('ipfsCheckForm.placeholder')}
+        type='text'
+        className={`w-100 lh-copy monospace f5 pl1 pv1 mb2 charcoal input-reset ba b--black-20 br1 ${showFailState ? 'focus-outline-red b--red-muted' : 'focus-outline-green b--green-muted'}`}
+        onChange={onChange}
+        onKeyPress={onKeyPress}
+        value={value}
+      />
+      <div className='tr'>
+        <Button
+          id='ipfs-check-default-button'
+          minWidth={100}
+          height={40}
+          bg='bg-charcoal'
+          className='tc'
+          disabled={value === DEFAULT_IPFS_CHECK_URL}
+          onClick={onDefault}>
+          {t('app:actions.reset')}
+        </Button>
+        <Button
+          id='ipfs-check-submit-button'
+          minWidth={100}
+          height={40}
+          className='mt2 mt0-l ml2-l tc'
+          disabled={!isValidUrl || value === ipfsCheckUrl}>
+          {t('actions.submit')}
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+export default connect(
+  'doUpdateIpfsCheckUrl',
+  'selectIpfsCheckUrl',
+  withTranslation('app')(IpfsCheckForm)
+)
diff --git a/src/components/is-not-connected/IsNotConnected.js b/src/components/is-not-connected/is-not-connected.tsx
similarity index 100%
rename from src/components/is-not-connected/IsNotConnected.js
rename to src/components/is-not-connected/is-not-connected.tsx
diff --git a/src/components/tooltip/icon-tooltip.css b/src/components/tooltip/icon-tooltip.css
new file mode 100644
index 000000000..1c33a1ac3
--- /dev/null
+++ b/src/components/tooltip/icon-tooltip.css
@@ -0,0 +1,8 @@
+/* Non-selectable tooltip content */
+.noselect {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/src/components/tooltip/icon-tooltip.tsx b/src/components/tooltip/icon-tooltip.tsx
new file mode 100644
index 000000000..20bcd8f75
--- /dev/null
+++ b/src/components/tooltip/icon-tooltip.tsx
@@ -0,0 +1,137 @@
+/**
+ * A simple tooltip component for icons that displays text on hover.
+ * Duplicates some of the code used in the Tooltip component.
+ *
+ * Example usage:
+ * <IconTooltip text="Settings" position="top"><GlyphSettings /></IconTooltip>
+ */
+
+import React, { ReactElement, useState, useMemo } from 'react'
+import './icon-tooltip.css'
+
+interface IconTooltipProps {
+  children: ReactElement
+  text: string
+  position: 'top' | 'bottom' | 'left' | 'right'
+  forceShow?: boolean
+}
+
+const IconTooltip: React.FC<IconTooltipProps> = ({ children, text, position, forceShow = false }) => {
+  const [show, setShow] = useState(false)
+
+  const onMouseOver = () => setShow(true)
+  const onMouseLeave = () => setShow(false)
+
+  const tooltipStyles = useMemo<React.CSSProperties>(() => {
+    const baseStyles = {
+      position: 'absolute' as const,
+      zIndex: 1000,
+      wordWrap: 'break-word' as const,
+      width: 'max-content' as const,
+      maxWidth: '200px'
+    }
+
+    switch (position) {
+      case 'top':
+        return {
+          ...baseStyles,
+          bottom: '100%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          marginBottom: '8px'
+        }
+      case 'bottom':
+        return {
+          ...baseStyles,
+          top: '100%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          marginTop: '8px'
+        }
+      case 'left':
+        return {
+          ...baseStyles,
+          right: '100%',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          marginRight: '8px'
+        }
+      case 'right':
+        return {
+          ...baseStyles,
+          left: '100%',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          marginLeft: '8px'
+        }
+    }
+  }, [position])
+
+  const arrowStyles = useMemo<React.CSSProperties>(() => {
+    const baseArrowStyles = {
+      position: 'absolute' as const,
+      width: '8px',
+      height: '8px',
+      zIndex: -1
+    }
+
+    switch (position) {
+      case 'top':
+        return {
+          ...baseArrowStyles,
+          top: '100%',
+          left: '50%',
+          transform: 'translate(-50%, -50%) rotate(45deg)',
+          borderRadius: '2px 0px 0px'
+        }
+      case 'bottom':
+        return {
+          ...baseArrowStyles,
+          bottom: '100%',
+          left: '50%',
+          transform: 'translate(-50%, 50%) rotate(45deg)',
+          borderRadius: '0px 0px 2px 0px'
+        }
+      case 'left':
+        return {
+          ...baseArrowStyles,
+          left: '100%',
+          top: '50%',
+          transform: 'translate(-50%, -50%) rotate(45deg)',
+          borderRadius: '0px 2px 0px 0px'
+        }
+      case 'right':
+        return {
+          ...baseArrowStyles,
+          right: '100%',
+          top: '50%',
+          transform: 'translate(50%, -50%) rotate(45deg)',
+          borderRadius: '0px 0px 0px 2px'
+        }
+    }
+  }, [position])
+
+  const tooltipDisplayClass = useMemo(() => (show || forceShow) ? 'db' : 'dn', [show, forceShow])
+
+  return (
+    <div className="relative" style={{ display: 'inline-block' }}>
+      <div
+        onMouseOver={onMouseOver}
+        onMouseLeave={onMouseLeave}
+        onFocus={onMouseOver}
+        onBlur={onMouseLeave}
+      >
+        {children}
+      </div>
+      <div
+        style={tooltipStyles}
+        className={`white z-max bg-navy-muted br2 pv2 ph3 f6 lh-copy fw5 absolute sans-serif noselect ${tooltipDisplayClass}`}
+      >
+        <div className='bg-navy-muted db bg-navy-muted absolute' style={arrowStyles} />
+        {text}
+      </div>
+    </div>
+  )
+}
+
+export default IconTooltip
diff --git a/src/components/unsupported-kubo-version/unsupported-kubo-version.tsx b/src/components/unsupported-kubo-version/unsupported-kubo-version.tsx
new file mode 100644
index 000000000..288ac2f5c
--- /dev/null
+++ b/src/components/unsupported-kubo-version/unsupported-kubo-version.tsx
@@ -0,0 +1,63 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Box from '../box/Box.js'
+import Button from '../button/button'
+import { useIdentity } from '../../contexts/identity-context'
+
+interface UnsupportedKuboVersionProps {
+}
+
+/**
+ * TODO: support various features and accept translation keys for each feature instead of hardcoding them only for the logs screen.
+ */
+const UnsupportedKuboVersion: React.FC<UnsupportedKuboVersionProps> = () => {
+  const { t } = useTranslation('diagnostics')
+  const { identity, agentVersionObject } = useIdentity()
+
+  // If user is using IPFS-Desktop, we need to send them to the IPFS-Desktop release page.
+  // Otherwise, we need to send them to the Kubo release page.
+  // TODO: do we need to link to any other release pages?
+  const openReleasePage = useCallback(() => {
+    let url = 'https://github.com/ipfs/kubo/releases'
+    if (agentVersionObject?.name === 'kubo' && agentVersionObject.suffix === 'desktop') {
+      url = 'https://github.com/ipfs/ipfs-desktop/releases'
+    }
+    window.open(url, '_blank')
+  }, [agentVersionObject])
+
+  if (agentVersionObject == null) {
+    return null
+  }
+
+  return (
+    <Box className='pa4 tc' style={{ width: '100%' }}>
+      <div className='mb4'>
+        <div className='f1 mb3'>⚠️</div>
+        <h3 className='montserrat fw6 charcoal ma0 f4 mb3'>
+          {t('logs.unsupported.title')}
+        </h3>
+        <p className='charcoal-muted f5 lh-copy mb4'>
+          {t('logs.unsupported.description', { version: identity?.agentVersion })}
+        </p>
+        <div className='mb4'>
+          <h4 className='montserrat fw6 charcoal ma0 f5 mb3'>
+            {t('logs.unsupported.upgradeTitle')}
+          </h4>
+          <p className='charcoal-muted f6 lh-copy mb3'>
+            {t('logs.unsupported.upgradeDescription')}
+          </p>
+          <div className='flex justify-center gap3'>
+            <Button
+              className='bg-blue white'
+              onClick={openReleasePage}
+            >
+              {t('logs.unsupported.downloadKubo')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Box>
+  )
+}
+
+export default UnsupportedKuboVersion
diff --git a/src/contexts/identity-context.tsx b/src/contexts/identity-context.tsx
index 45acc1b0c..61682cc80 100644
--- a/src/contexts/identity-context.tsx
+++ b/src/contexts/identity-context.tsx
@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useReducer, useEffect, useCallback, useMemo, ReactNode, useRef } from 'react'
+import { type AgentVersionObject, parseAgentVersion } from '../lib/parse-agent-version'
 import { useBridgeContext, useBridgeSelector } from '../helpers/context-bridge'
 
 /**
@@ -35,6 +36,10 @@ export interface IdentityContextValue {
    * Whether identity is being updated (loading, but we already have a good identity response)
    */
   isRefreshing: boolean
+  /**
+   * The parsed agent version object
+   */
+  agentVersionObject: AgentVersionObject | null
 }
 
 /**
@@ -165,14 +170,20 @@ const IdentityProviderImpl: React.FC<IdentityProviderProps> = ({ children }) =>
     return () => {}
   }, [shouldPoll, ipfsConnected, state.lastSuccess, fetchIdentity])
 
+  const agentVersionObject = useMemo(() => {
+    if (identityStable?.agentVersion == null) return null
+    return parseAgentVersion(identityStable.agentVersion)
+  }, [identityStable])
+
   const contextValue: IdentityContextValue = useMemo(() => ({
     identity: identityStable,
     isLoading: isInitialLoading,
     isRefreshing,
     hasError: state.hasError,
     lastSuccess: state.lastSuccess,
-    refetch: fetchIdentity
-  }), [identityStable, isInitialLoading, isRefreshing, state.hasError, state.lastSuccess, fetchIdentity])
+    refetch: fetchIdentity,
+    agentVersionObject
+  }), [identityStable, isInitialLoading, isRefreshing, state.hasError, state.lastSuccess, fetchIdentity, agentVersionObject])
 
   useBridgeContext('identity', contextValue)
 
diff --git a/src/contexts/logs/README.md b/src/contexts/logs/README.md
new file mode 100644
index 000000000..1cf28c21a
--- /dev/null
+++ b/src/contexts/logs/README.md
@@ -0,0 +1,52 @@
+# Logs System
+
+Real-time log streaming from IPFS nodes with batch processing and persistent storage.
+
+## Architecture
+
+```
+IPFS Node → Log Stream → Batch Processor → Log Storage → Context → Log Viewer
+```
+
+### Components
+
+- **LogsScreen**: Main UI component for logs display
+- **LogViewer**: Renders individual log entries in scrollable container
+- **LogsContext**: Central state management using React Context
+- **BatchProcessor**: Batches incoming logs (50 entries or 100ms timeout)
+- **LogStorage**: IndexedDB storage with circular buffer (200k entry limit)
+
+## Data Flow
+
+1. **Streaming**: `ipfs.log.tail()` provides raw log stream
+2. **Parsing**: Raw logs converted to `LogEntry` objects
+3. **Batching**: Batch processor collects entries and processes in batches
+4. **Storage**: Logs stored in IndexedDB, oldest entries removed when limit reached
+5. **UI**: Log viewer renders entries from React state
+
+## Configuration
+
+See `LogBufferConfig` interface in `reducer.ts` for buffer configuration options.
+
+## Usage
+
+```typescript
+const {
+  entries,
+  isStreaming,
+  startStreaming,
+  stopStreaming,
+  setLogLevelsBatch
+} = useLogs()
+```
+
+## File Structure
+
+```
+src/contexts/logs/
+├── logs-context.tsx      # Main context provider
+├── use-batch-processor.ts # Batch processing hook
+├── log-storage.ts        # IndexedDB storage
+├── reducer.ts            # State management
+└── api.ts                # IPFS API calls
+```
diff --git a/src/contexts/logs/api.ts b/src/contexts/logs/api.ts
new file mode 100644
index 000000000..ebcdec626
--- /dev/null
+++ b/src/contexts/logs/api.ts
@@ -0,0 +1,129 @@
+import type { KuboRPCClient } from 'kubo-rpc-client'
+
+/**
+ * Raw log entry from Kubo RPC API (before parsing)
+ */
+interface RawLogEntry {
+  /**
+   * The timestamp of the log
+   */
+  ts: string
+  /**
+   * The level of the log
+   */
+  level: string
+  /**
+   * The subsystem of the log
+   */
+  logger: string
+  /**
+   * The src line of code where the log was called from
+   */
+  caller: string
+  /**
+   * The message of the log
+   */
+  msg: string
+}
+
+/**
+ * Normalized log entry data structure
+ */
+export interface LogEntry {
+  timestamp: string
+  level: string
+  subsystem: string
+  message: string
+  id?: number
+}
+
+/**
+ * API Response types for type safety
+ */
+export interface LogLevelsResponse {
+  levels: Record<string, string>
+}
+
+/**
+ * Log subsystem data structure
+ */
+export interface LogSubsystem {
+  name: string
+  level: string
+}
+
+export async function getLogLevels (ipfs: KuboRPCClient, signal?: AbortSignal): Promise<LogLevelsResponse['levels']> {
+  try {
+    // @ts-expect-error - kubo-rpc-client is not typed correctly since https://github.com/ipfs/kubo/pull/10885 was merged.
+    const response = await ipfs.log.level('*', undefined, { signal }) as LogLevelsResponse
+    return response.levels
+  } catch (e) {
+    console.error('Failed to fetch log levels', e)
+    throw e
+  }
+}
+
+/**
+ * Set a single log level
+ */
+async function setLogLevel (ipfs: KuboRPCClient, subsystem: string, level: string, signal?: AbortSignal): Promise<void> {
+  try {
+    await ipfs.log.level(subsystem, level, { signal })
+  } catch (e) {
+    console.error(`Failed to set log level for ${subsystem} to ${level}`, e)
+    throw e
+  }
+}
+
+/**
+ * Set multiple log levels in batch and return the final state
+ */
+export async function setLogLevelsBatch (ipfs: KuboRPCClient, levels: Array<{ subsystem: string; level: string }>, signal?: AbortSignal): Promise<LogLevelsResponse['levels']> {
+  try {
+    // Separate global level from subsystem levels
+    const globalLevel = levels.find(({ subsystem }) => subsystem === '*' || subsystem === '(default)')
+    const subsystemLevels = levels.filter(({ subsystem }) => subsystem !== '*' && subsystem !== '(default)')
+
+    // Set global level first (if present)
+    if (globalLevel) {
+      await setLogLevel(ipfs, globalLevel.subsystem, globalLevel.level, signal)
+    }
+
+    // Then set individual subsystem levels
+    for (const { subsystem, level } of subsystemLevels) {
+      await setLogLevel(ipfs, subsystem, level, signal)
+    }
+
+    // Fetch the final state after all changes
+    return getLogLevels(ipfs, signal)
+  } catch (e) {
+    console.error('Failed to set log levels in batch', e)
+    throw e
+  }
+}
+
+/**
+ * Fetch subsystem list from IPFS instance
+ */
+export async function fetchLogSubsystems (ipfs: KuboRPCClient, signal?: AbortSignal): Promise<LogSubsystem[]> {
+  const response = await ipfs.log.ls({ signal })
+  const names: string[] = Array.isArray(response) ? response : response.Strings || []
+  const levels = await getLogLevels(ipfs, signal)
+  const subsystems = names.map(name => ({ name, level: levels[name] ?? levels['(default)'] ?? 'unknown' }))
+
+  // Sort subsystems alphabetically by name
+  return subsystems.sort((a, b) => a.name.localeCompare(b.name))
+}
+
+/**
+ * Parse raw log entry into structured LogEntry
+ */
+export function parseLogEntry (raw: unknown): LogEntry {
+  const obj = raw as RawLogEntry
+  return {
+    timestamp: obj.ts,
+    level: obj.level,
+    subsystem: obj.logger,
+    message: obj.msg
+  }
+}
diff --git a/src/contexts/logs/index.ts b/src/contexts/logs/index.ts
new file mode 100644
index 000000000..d12124f9c
--- /dev/null
+++ b/src/contexts/logs/index.ts
@@ -0,0 +1,7 @@
+// Export the context provider and hook
+export { LogsProvider, useLogs } from './logs-context'
+
+// Export utilities (optional, for advanced usage)
+export { getLogLevels, parseLogEntry } from './api'
+export { logsReducer, initLogsState } from './reducer'
+export { useBatchProcessor } from './use-batch-processor'
diff --git a/src/contexts/logs/log-storage.ts b/src/contexts/logs/log-storage.ts
new file mode 100644
index 000000000..6d07749bb
--- /dev/null
+++ b/src/contexts/logs/log-storage.ts
@@ -0,0 +1,318 @@
+/**
+ * IndexedDB-based log storage service
+ */
+import type { LogEntry } from './api'
+
+export interface LogStorageConfig {
+  dbName: string
+  storeName: string
+  maxEntries: number
+  version: number
+}
+
+export interface LogStorageStats {
+  totalEntries: number
+  oldestTimestamp: string | null
+  newestTimestamp: string | null
+  estimatedSize: number
+}
+
+const DEFAULT_CONFIG: LogStorageConfig = {
+  dbName: 'ipfs-webui-logs',
+  storeName: 'log-entries',
+  maxEntries: 10000,
+  version: 1
+}
+
+export class LogStorage {
+  private db: IDBDatabase | null = null
+  private config: LogStorageConfig
+  private initPromise: Promise<void> | null = null
+  // sentinal to prevent multiple trimming operations
+  private trimmingOldEntries = false
+  constructor (config: Partial<LogStorageConfig> = {}) {
+    this.config = { ...DEFAULT_CONFIG, ...config }
+  }
+
+  /**
+   * Initialize the IndexedDB connection
+   */
+  async init (): Promise<void> {
+    if (this.initPromise) {
+      return this.initPromise
+    }
+
+    this.initPromise = new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.config.dbName, this.config.version)
+
+      request.onerror = () => {
+        reject(new Error(`Failed to open IndexedDB: ${request.error?.message}`))
+      }
+
+      request.onsuccess = () => {
+        this.db = request.result
+        resolve()
+      }
+
+      request.onupgradeneeded = (event) => {
+        const db = (event.target as IDBOpenDBRequest).result
+
+        // Create object store if it doesn't exist
+        if (!db.objectStoreNames.contains(this.config.storeName)) {
+          const store = db.createObjectStore(this.config.storeName, {
+            keyPath: 'id',
+            autoIncrement: true
+          })
+
+          // Create index for timestamp-based queries
+          store.createIndex('timestamp', 'timestamp', { unique: false })
+          store.createIndex('level', 'level', { unique: false })
+          store.createIndex('subsystem', 'subsystem', { unique: false })
+        }
+      }
+    })
+
+    return this.initPromise
+  }
+
+  /**
+   * Append new log entries with circular buffer behavior
+   */
+  async appendLogs (entries: LogEntry[]): Promise<void> {
+    await this.init()
+    if (!this.db) throw new Error('Database not initialized')
+
+    const transaction = this.db.transaction([this.config.storeName], 'readwrite')
+    const store = transaction.objectStore(this.config.storeName)
+
+    const done = new Promise<void>((resolve, reject) => {
+      transaction.oncomplete = () => resolve()
+      transaction.onabort = () => reject(transaction.error ?? new Error('Transaction aborted'))
+      transaction.onerror = () => reject(transaction.error ?? new Error('Transaction error'))
+    })
+
+    // Queue all adds without per-item awaits
+    for (const entry of entries) {
+      const entryWithId: LogEntry = {
+        ...entry,
+        timestamp: entry.timestamp ?? new Date().toISOString()
+      }
+      const req = store.add(entryWithId)
+      req.onerror = () => { console.error(req.error) }
+    }
+
+    // shouldn't be necessary, but may help.
+    if (typeof transaction.commit === 'function') transaction.commit()
+
+    await done
+
+    // Implement circular buffer - remove old entries if we exceed maxEntries
+    void this.enforceMaxEntries()
+  }
+
+  /**
+   * Get the most recent logs
+   */
+  async getRecentLogs (limit = 500): Promise<LogEntry[]> {
+    await this.init()
+    if (!this.db) throw new Error('Database not initialized')
+
+    const tx = this.db.transaction([this.config.storeName], 'readonly')
+    const store = tx.objectStore(this.config.storeName)
+    const index = store.index('timestamp') // use your actual index name
+
+    // Pre-size and fill from the end so final order is oldest→newest without reverse()
+    const out: LogEntry[] = new Array(Math.max(0, limit))
+    let write = out.length - 1
+    let settled = false
+
+    return new Promise<LogEntry[]>((resolve, reject) => {
+      tx.onabort = () => {
+        if (!settled) reject(tx.error ?? new Error('Transaction aborted'))
+      }
+      tx.onerror = () => {
+        if (!settled) reject(tx.error ?? new Error('Transaction error'))
+      }
+
+      const req = index.openCursor(undefined, 'prev') // newest first
+      req.onerror = () => {
+      // don’t continue; let tx error/abort handlers fire
+      }
+
+      req.onsuccess = () => {
+        const cursor = req.result
+        if (!cursor || write < 0) {
+          if (!settled) {
+            settled = true
+            // slice to the filled portion (trim any leading holes if fewer than limit)
+            resolve(out.slice(write + 1))
+          }
+          return
+        }
+
+        out[write--] = cursor.value // Includes the auto-generated ID from IndexedDB
+
+        // Safe to continue while we're still in onsuccess (tx is active in this task)
+        cursor.continue()
+      }
+    })
+  }
+
+  /**
+   * Clear old entries to maintain circular buffer
+   */
+  private async enforceMaxEntries (): Promise<void> {
+    if (!this.db || this.trimmingOldEntries) return
+
+    const transaction = this.db.transaction([this.config.storeName], 'readwrite')
+    const store = transaction.objectStore('log-entries')
+
+    // Count total entries
+    const countRequest = store.count()
+
+    return new Promise<void>((resolve, reject) => {
+      countRequest.onsuccess = () => {
+        const totalCount = countRequest.result
+
+        if (totalCount <= this.config.maxEntries) {
+          resolve()
+          return
+        }
+        this.trimmingOldEntries = true
+
+        // Delete oldest entries
+        const entriesToDelete = totalCount - this.config.maxEntries
+        const index = store.index('timestamp')
+        const request = index.openCursor(null, 'next') // Oldest first
+
+        let deleted = 0
+
+        request.onsuccess = () => {
+          const cursor = request.result
+          if (cursor && deleted < entriesToDelete) {
+            cursor.delete()
+            deleted++
+            cursor.continue()
+          } else {
+            resolve()
+          }
+        }
+
+        request.onerror = () => reject(request.error)
+      }
+
+      countRequest.onerror = () => reject(countRequest.error)
+    }).finally(() => {
+      this.trimmingOldEntries = false
+    })
+  }
+
+  /**
+   * Get storage statistics
+   */
+  async getStorageStats (): Promise<LogStorageStats> {
+    await this.init()
+    if (!this.db) throw new Error('Database not initialized')
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([this.config.storeName], 'readonly')
+      const store = transaction.objectStore('log-entries')
+      const index = store.index('timestamp')
+
+      let totalEntries = 0
+      let oldestTimestamp: string | null = null
+      let newestTimestamp: string | null = null
+      let estimatedSize = 0
+
+      // Count entries and get timestamps
+      const countRequest = store.count()
+
+      countRequest.onsuccess = () => {
+        totalEntries = countRequest.result
+
+        if (totalEntries === 0) {
+          resolve({
+            totalEntries: 0,
+            oldestTimestamp: null,
+            newestTimestamp: null,
+            estimatedSize: 0
+          })
+          return
+        }
+
+        // Get oldest timestamp
+        const oldestRequest = index.openCursor(null, 'next')
+        oldestRequest.onsuccess = () => {
+          const cursor = oldestRequest.result
+          if (cursor) {
+            oldestTimestamp = cursor.value.timestamp
+
+            // Estimate size (rough calculation)
+            estimatedSize = totalEntries * JSON.stringify(cursor.value).length
+          }
+
+          // Get newest timestamp
+          const newestRequest = index.openCursor(null, 'prev')
+          newestRequest.onsuccess = () => {
+            const cursor = newestRequest.result
+            if (cursor) {
+              newestTimestamp = cursor.value.timestamp
+            }
+
+            resolve({
+              totalEntries,
+              oldestTimestamp,
+              newestTimestamp,
+              estimatedSize
+            })
+          }
+          newestRequest.onerror = () => reject(newestRequest.error)
+        }
+        oldestRequest.onerror = () => reject(oldestRequest.error)
+      }
+
+      countRequest.onerror = () => reject(countRequest.error)
+    })
+  }
+
+  /**
+   * Clear all stored logs
+   */
+  async clearAllLogs (): Promise<void> {
+    await this.init()
+    if (!this.db) throw new Error('Database not initialized')
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([this.config.storeName], 'readwrite')
+      const store = transaction.objectStore('log-entries')
+      const request = store.clear()
+
+      request.onsuccess = () => resolve()
+      request.onerror = () => reject(request.error)
+    })
+  }
+
+  /**
+   * Update configuration (requires reinit)
+   */
+  updateConfig (newConfig: Partial<LogStorageConfig>): void {
+    this.config = { ...this.config, ...newConfig }
+    // Reset init promise to force reinitialization
+    this.initPromise = null
+    this.db = null
+  }
+
+  /**
+   * Close the database connection
+   */
+  close (): void {
+    if (this.db) {
+      this.db.close()
+      this.db = null
+      this.initPromise = null
+    }
+  }
+}
+
+// Export singleton instance
+export const logStorage = new LogStorage()
diff --git a/src/contexts/logs/logs-context.tsx b/src/contexts/logs/logs-context.tsx
new file mode 100644
index 000000000..b55896a55
--- /dev/null
+++ b/src/contexts/logs/logs-context.tsx
@@ -0,0 +1,370 @@
+import React, { createContext, useContext, useReducer, useEffect, useCallback, useMemo, useRef, useState } from 'react'
+import { logsReducer, initLogsState } from './reducer'
+import { parseLogEntry, getLogLevels, setLogLevelsBatch as setLogLevelsBatchApi } from './api'
+import { useBatchProcessor } from './use-batch-processor'
+import { logStorage } from './log-storage'
+import { useBridgeSelector } from '../../helpers/context-bridge'
+import { calculateGologLevelString } from '../../lib/golog-level-utils'
+import type { KuboRPCClient } from 'kubo-rpc-client'
+import type { LogEntry } from './api'
+import type { LogBufferConfig, LogRateState } from './reducer'
+import type { LogStorageStats } from './log-storage'
+import { useAgentVersionMinimum } from '../../lib/hooks/use-agent-version-minimum'
+
+interface LogsProviderProps {
+  children: React.ReactNode
+  ipfs?: KuboRPCClient
+  ipfsConnected?: boolean
+}
+
+/**
+ * Logs context value
+ */
+export interface LogsContextValue {
+  // Log entries and streaming
+  entries: LogEntry[]
+  isStreaming: boolean
+
+  // Log levels
+  subsystemLevels: Record<string, string>
+  actualLogLevels: Record<string, string>
+  isLoadingLevels: boolean
+
+  // Configuration and monitoring
+  bufferConfig: LogBufferConfig
+  rateState: LogRateState
+  storageStats: LogStorageStats | null
+
+  // Computed values
+  gologLevelString: string | null
+  subsystems: Array<{ name: string; level: string }>
+  isAgentVersionSupported: boolean
+
+  // Actions
+  startStreaming: () => void
+  stopStreaming: () => void
+  clearEntries: () => void
+  setLogLevelsBatch: (levels: Array<{ subsystem: string; level: string }>) => Promise<void>
+  updateBufferConfig: (config: Partial<LogBufferConfig>) => void
+
+  fetchLogLevels: () => void
+  updateStorageStats: () => void
+  showWarning: () => void
+}
+
+/**
+ * Logs context
+ */
+const LogsContext = createContext<LogsContextValue | undefined>(undefined)
+LogsContext.displayName = 'LogsContext'
+
+/**
+ * Streamlined logs provider component with performance optimizations
+ */
+export const LogsProvider: React.FC<LogsProviderProps> = ({ children }) => {
+  // Use lazy initialization to avoid recreating deep objects on every render
+  const [state, dispatch] = useReducer(logsReducer, undefined, initLogsState)
+  const [bootstrapped, setBootstrapped] = useState(false)
+  const streamControllerRef = useRef<AbortController | null>(null)
+  const ipfs = useBridgeSelector('selectIpfs') as KuboRPCClient
+  const ipfsConnected = useBridgeSelector('selectIpfsConnected') as boolean
+
+  /**
+   * Kubo only adds support for getting log levels in version 0.37.0 and later.
+   *
+   * Kubo fixed log tailing in version 0.36.0 and later.
+   * @see https://github.com/ipfs/kubo/issues/10867
+   */
+  const { ok: isAgentVersionSupported } = useAgentVersionMinimum({
+    minimumVersion: '0.37.0',
+    requiredAgent: 'kubo'
+  })
+
+  // Use ref for mount status to avoid stale closures
+  const isMounted = useRef(true)
+  const addBatch = useCallback(async (entryCount: number) => {
+    // we always pull from storage to ensure we have the properly set logEntry with id
+    const entries = await logStorage.getRecentLogs(entryCount)
+    dispatch({ type: 'ADD_BATCH', entries })
+  }, [dispatch])
+  const onRateUpdate = useCallback((currentRate: number, recentCounts: Array<{ second: number; count: number }>, stats?: any) => {
+    dispatch({
+      type: 'UPDATE_RATE_STATE',
+      rateState: { currentRate, recentCounts }
+    })
+
+    // Update storage stats if provided
+    if (stats != null) {
+      dispatch({ type: 'UPDATE_STORAGE_STATS', stats })
+    }
+  }, [])
+  const onAutoDisable = useCallback(() => {
+    dispatch({ type: 'AUTO_DISABLE' })
+    streamControllerRef.current?.abort()
+  }, [])
+
+  // Use the improved batch processor hook
+  const batchProcessor = useBatchProcessor(
+    addBatch,
+    state.bufferConfig,
+    logStorage,
+    onRateUpdate,
+    onAutoDisable
+  )
+
+  const fetchLogLevelsInternal = useCallback(async () => {
+    if (!ipfsConnected || !ipfs) return
+    const controller = new AbortController()
+
+    try {
+      dispatch({ type: 'FETCH_LEVELS' })
+      const logLevels = await getLogLevels(ipfs, controller.signal)
+      dispatch({ type: 'UPDATE_LEVELS', levels: logLevels })
+    } catch (error: unknown) {
+      console.error('Failed to fetch log levels:', error)
+      dispatch({ type: 'UPDATE_LEVELS', levels: {} })
+    }
+    return () => {
+      controller.abort()
+    }
+  }, [ipfs, ipfsConnected])
+
+  const setLogLevelsBatch = useCallback(async (levels: Array<{ subsystem: string; level: string }>) => {
+    if (!ipfsConnected || !ipfs) return
+
+    try {
+      // Set all levels in batch and get the final state
+      const finalLevels = await setLogLevelsBatchApi(ipfs, levels)
+
+      // Update the state with the final levels from the API response
+      dispatch({ type: 'UPDATE_LEVELS', levels: finalLevels })
+    } catch (error) {
+      console.error('Failed to set log levels in batch:', error)
+      throw error
+    }
+  }, [ipfs, ipfsConnected])
+
+  const processStream = useCallback(async (stream: AsyncIterable<any>) => {
+    try {
+      for await (const entry of stream) {
+        if (streamControllerRef.current?.signal.aborted) break
+        const logEntry = parseLogEntry(entry)
+        if (logEntry) {
+          batchProcessor.addEntry(logEntry)
+        }
+      }
+    } catch (error) {
+      if (!streamControllerRef.current?.signal.aborted) {
+        console.error('Log streaming error:', error)
+        streamControllerRef.current?.abort()
+        dispatch({ type: 'STOP_STREAMING' })
+      }
+    }
+  }, [batchProcessor, dispatch])
+
+  const stopStreaming = useCallback(() => {
+    dispatch({ type: 'STOP_STREAMING' })
+    streamControllerRef.current?.abort()
+    batchProcessor.stop()
+  }, [batchProcessor, dispatch])
+
+  const startStreaming = useCallback(async () => {
+    if (!ipfsConnected || !ipfs) {
+      console.error('IPFS instance not available')
+      return
+    }
+
+    const controller = new AbortController()
+    streamControllerRef.current = controller
+    dispatch({ type: 'START_STREAMING' })
+    batchProcessor.start(streamControllerRef)
+
+    try {
+      await logStorage.init()
+
+      // Load recent logs from storage
+      try {
+        const recentLogs = await logStorage.getRecentLogs(state.bufferConfig.memory)
+        if (recentLogs.length > 0) {
+          dispatch({ type: 'ADD_BATCH', entries: recentLogs })
+        }
+
+        const stats = await logStorage.getStorageStats()
+        dispatch({ type: 'UPDATE_STORAGE_STATS', stats })
+      } catch (error) {
+        console.warn('Failed to load recent logs from storage:', error)
+      }
+
+      const stream = ipfs.log.tail({ signal: controller.signal })
+
+      if (stream && typeof stream[Symbol.asyncIterator] === 'function') {
+        void processStream(stream)
+      } else {
+        throw new Error('Log streaming not supported')
+      }
+    } catch (error) {
+      console.error('Failed to start log streaming:', error)
+      stopStreaming()
+    }
+  }, [ipfsConnected, ipfs, batchProcessor, state.bufferConfig.memory, processStream, stopStreaming])
+
+  const clearEntries = useCallback(async () => {
+    try {
+      await logStorage.clearAllLogs()
+    } catch (error) {
+      console.warn('Failed to clear IndexedDB logs:', error)
+    }
+    dispatch({ type: 'CLEAR_ENTRIES' })
+  }, [])
+
+  const updateBufferConfig = useCallback((config: Partial<LogBufferConfig>) => {
+    dispatch({ type: 'UPDATE_BUFFER_CONFIG', config })
+    if (config.indexedDB != null) {
+      logStorage.updateConfig({ maxEntries: config.indexedDB })
+    }
+  }, [])
+
+  const updateStorageStatsInternal = useCallback(async () => {
+    try {
+      const stats = await logStorage.getStorageStats()
+      dispatch({ type: 'UPDATE_STORAGE_STATS', stats })
+    } catch (error) {
+      console.error('Failed to update storage stats:', error)
+    }
+  }, [])
+
+  const loadExistingEntries = useCallback(async () => {
+    try {
+      await logStorage.init()
+      const recentLogs = await logStorage.getRecentLogs(state.bufferConfig.memory)
+      if (recentLogs.length > 0) {
+        dispatch({ type: 'ADD_BATCH', entries: recentLogs })
+      }
+    } catch (error) {
+      console.warn('Failed to load existing log entries:', error)
+    }
+  }, [state.bufferConfig.memory])
+
+  const showWarning = useCallback(() => {
+    dispatch({ type: 'SHOW_WARNING' })
+  }, [])
+
+  // Compute GOLOG_LOG_LEVEL equivalent string
+  const gologLevelString = useMemo(() => {
+    // Only calculate if log levels have been loaded
+    if (state.isLoadingLevels || Object.keys(state.actualLogLevels).length === 0) {
+      return null
+    }
+
+    return calculateGologLevelString(state.actualLogLevels)
+  }, [state.isLoadingLevels, state.actualLogLevels])
+
+  // Compute subsystems list from actual log levels
+  const subsystems = useMemo(() => {
+    return Object.entries(state.actualLogLevels)
+      .filter(([name]) => name !== '(default)')
+      .map(([name, level]) => ({
+        name,
+        level: level || 'info'
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name))
+  }, [state.actualLogLevels])
+
+  useEffect(() => {
+    // Update storage config with current buffer settings
+    logStorage.updateConfig({ maxEntries: state.bufferConfig.indexedDB })
+  }, [state.bufferConfig.indexedDB])
+
+  // Cleanup effect - stops streaming on unmount
+  useEffect(() => {
+    isMounted.current = true
+    return () => {
+      stopStreaming()
+      isMounted.current = false
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Initialize log storage and bootstrap data
+  useEffect(() => {
+    if (bootstrapped || !isAgentVersionSupported) return
+
+    async function bootstrap () {
+      if (!isMounted.current) return
+
+      try {
+        await logStorage.init()
+      } catch (error) {
+        console.warn('Failed to initialize log storage:', error)
+      }
+
+      if (!isMounted.current) return
+
+      // Load initial data in parallel when IPFS is connected
+      if (ipfsConnected && ipfs) {
+        await Promise.allSettled([
+          fetchLogLevelsInternal(),
+          updateStorageStatsInternal(),
+          loadExistingEntries()
+        ]).then(() => {
+          setBootstrapped(true)
+        })
+      }
+    }
+
+    bootstrap()
+  }, [ipfsConnected, ipfs, fetchLogLevelsInternal, updateStorageStatsInternal, loadExistingEntries, bootstrapped, isAgentVersionSupported])
+
+  // Group related actions for cleaner context value assembly
+  const logActions = useMemo(() => ({
+    startStreaming,
+    stopStreaming,
+    clearEntries,
+    setLogLevelsBatch,
+    updateBufferConfig,
+    fetchLogLevels: fetchLogLevelsInternal,
+    updateStorageStats: updateStorageStatsInternal,
+    loadExistingEntries,
+    showWarning
+  }), [
+    startStreaming,
+    stopStreaming,
+    clearEntries,
+    setLogLevelsBatch,
+    updateBufferConfig,
+    fetchLogLevelsInternal,
+    updateStorageStatsInternal,
+    loadExistingEntries,
+    showWarning
+  ])
+
+  // Ensure we have safe defaults for arrays
+  const safeLogEntries = useMemo(() => Array.from(state.entries.values()), [state.entries])
+
+  // Combine state, computed values, and actions - React will optimize this automatically
+  const contextValue: LogsContextValue = {
+    ...state,
+    ...logActions,
+    entries: safeLogEntries,
+    gologLevelString,
+    subsystems,
+    isAgentVersionSupported
+  }
+
+  return (
+    <LogsContext.Provider value={contextValue}>
+      {children}
+    </LogsContext.Provider>
+  )
+}
+
+/**
+ * Hook to consume the logs context
+ */
+export function useLogs (): LogsContextValue {
+  const context = useContext(LogsContext)
+  if (context === undefined) {
+    throw new Error('useLogs must be used within a LogsProvider')
+  }
+  return context
+}
diff --git a/src/contexts/logs/reducer.ts b/src/contexts/logs/reducer.ts
new file mode 100644
index 000000000..bae12e639
--- /dev/null
+++ b/src/contexts/logs/reducer.ts
@@ -0,0 +1,242 @@
+import type { LogEntry } from './api'
+import type { LogStorageStats } from './log-storage'
+
+/**
+ * Log buffer configuration
+ */
+export interface LogBufferConfig {
+  memory: number
+  indexedDB: number
+  warnThreshold: number
+  autoDisableThreshold: number
+}
+
+/**
+ * Log rate state for monitoring
+ */
+export interface LogRateState {
+  currentRate: number
+  recentCounts: Array<{ second: number; count: number }>
+  lastCountTime: number
+  hasWarned: boolean
+  autoDisabled: boolean
+}
+
+/**
+ * Logs state for the reducer
+ */
+export interface LogsState {
+  entries: Map<number, LogEntry>
+  isStreaming: boolean
+  bufferConfig: LogBufferConfig
+  rateState: LogRateState
+  storageStats: LogStorageStats | null
+  batchTimeout: number | null
+  subsystemLevels: Record<string, string>
+  actualLogLevels: Record<string, string>
+  isLoadingLevels: boolean
+}
+
+/**
+ * Actions for the logs reducer
+ */
+export type LogsAction =
+  | { type: 'START_STREAMING' }
+  | { type: 'STOP_STREAMING' }
+  /**
+   * Be sure to only provide entries sorted by timestamp (oldest first), otherwise the resulting log entries will be out of order.
+   */
+  | { type: 'ADD_BATCH'; entries: LogEntry[] }
+  | { type: 'CLEAR_ENTRIES' }
+  | { type: 'UPDATE_BUFFER_CONFIG'; config: Partial<LogBufferConfig> }
+  | { type: 'UPDATE_RATE_STATE'; rateState: Partial<LogRateState> }
+  | { type: 'UPDATE_STORAGE_STATS'; stats: LogStorageStats }
+  | { type: 'SHOW_WARNING' }
+  | { type: 'AUTO_DISABLE' }
+  | { type: 'RESET_WARNING' }
+  | { type: 'FETCH_LEVELS' }
+  | { type: 'UPDATE_LEVELS'; levels: Record<string, string> }
+
+/**
+ * Default buffer configuration
+ */
+export const DEFAULT_BUFFER_CONFIG: LogBufferConfig = {
+  memory: 1_000, // Keep last 1k entries in memory and rendered in the UI
+  indexedDB: 200_000, // Store up to 200k entries in IndexedDB
+  warnThreshold: 100,
+  autoDisableThreshold: 500
+}
+
+/**
+ * Default rate state
+ */
+export const DEFAULT_RATE_STATE: LogRateState = {
+  currentRate: 0,
+  recentCounts: [],
+  lastCountTime: Date.now(),
+  hasWarned: false,
+  autoDisabled: false
+}
+
+/**
+ * Initial empty state shell - will be populated by initLogsState
+ */
+const initialStateShell: Partial<LogsState> = {
+  entries: new Map(),
+  isStreaming: false,
+  storageStats: null,
+  batchTimeout: null,
+  subsystemLevels: {},
+  actualLogLevels: {},
+  isLoadingLevels: false
+}
+
+function trimMapToLastN<K, V> (m: Map<K, V>, n: number) {
+  if (m.size <= n) return
+  let toDrop = m.size - n
+  const it = m.keys()
+  while (toDrop-- > 0) {
+    const { value, done } = it.next()
+    if (done) break
+    m.delete(value)
+  }
+}
+
+/**
+ * Lazy initialization function to avoid recreating deep objects on every render
+ */
+export function initLogsState (): LogsState {
+  return {
+    ...initialStateShell,
+    bufferConfig: { ...DEFAULT_BUFFER_CONFIG },
+    rateState: { ...DEFAULT_RATE_STATE }
+  } as LogsState
+}
+
+/**
+ * Logs reducer with immutable state updates
+ */
+export function logsReducer (state: LogsState, action: LogsAction): LogsState {
+  switch (action.type) {
+    case 'START_STREAMING': {
+      return {
+        ...state,
+        isStreaming: true,
+        rateState: {
+          ...state.rateState,
+          autoDisabled: false
+          // Don't reset hasWarned - let it persist across streaming sessions
+        }
+      }
+    }
+
+    case 'STOP_STREAMING': {
+      // Clear batch timeout
+      if (state.batchTimeout) {
+        clearTimeout(state.batchTimeout)
+      }
+      return {
+        ...state,
+        isStreaming: false,
+        batchTimeout: null
+      }
+    }
+
+    case 'ADD_BATCH': {
+      const { entries: prevEntries, bufferConfig } = state
+      const memoryLimit = bufferConfig.memory
+
+      const entries = new Map(prevEntries)
+
+      // Append only new ids, preserving batch order (expecting timestamp sorted entries)
+      for (const e of action.entries) {
+        const id = e.id!
+        if (!entries.has(id)) {
+          entries.set(id, e)
+        }
+      }
+
+      // Keep only last N by arrival/time order (oldest are at the front)
+      trimMapToLastN(entries, memoryLimit)
+
+      return { ...state, entries, batchTimeout: null }
+    }
+
+    case 'CLEAR_ENTRIES': {
+      return {
+        ...state,
+        entries: new Map()
+      }
+    }
+
+    case 'UPDATE_BUFFER_CONFIG': {
+      return {
+        ...state,
+        bufferConfig: { ...state.bufferConfig, ...action.config }
+      }
+    }
+
+    case 'UPDATE_RATE_STATE': {
+      return {
+        ...state,
+        rateState: { ...state.rateState, ...action.rateState }
+      }
+    }
+
+    case 'UPDATE_STORAGE_STATS': {
+      return {
+        ...state,
+        storageStats: action.stats
+      }
+    }
+
+    case 'SHOW_WARNING': {
+      return {
+        ...state,
+        rateState: {
+          ...state.rateState,
+          hasWarned: true
+        }
+      }
+    }
+
+    case 'AUTO_DISABLE': {
+      return {
+        ...state,
+        isStreaming: false,
+        rateState: {
+          ...state.rateState,
+          autoDisabled: true
+        }
+      }
+    }
+
+    case 'RESET_WARNING': {
+      return {
+        ...state,
+        rateState: {
+          ...state.rateState,
+          hasWarned: false
+        }
+      }
+    }
+
+    case 'FETCH_LEVELS': {
+      return {
+        ...state,
+        isLoadingLevels: true
+      }
+    }
+
+    case 'UPDATE_LEVELS': {
+      return {
+        ...state,
+        actualLogLevels: action.levels,
+        isLoadingLevels: false
+      }
+    }
+
+    default:
+      return state
+  }
+}
diff --git a/src/contexts/logs/use-batch-processor.ts b/src/contexts/logs/use-batch-processor.ts
new file mode 100644
index 000000000..0160b8ce7
--- /dev/null
+++ b/src/contexts/logs/use-batch-processor.ts
@@ -0,0 +1,170 @@
+import { useRef, useCallback, useEffect } from 'react'
+import { type LogStorage } from './log-storage'
+import type { LogEntry } from './api'
+import type { LogBufferConfig } from './reducer'
+import type { MutableRefObject } from 'react'
+
+/**
+ * Batch processor interface
+ */
+export interface BatchProcessor {
+  start: (controller: MutableRefObject<AbortController | null>) => void
+  stop: () => void
+  addEntry: (entry: LogEntry) => void
+}
+
+/**
+ * Custom hook for batch processing logs with rate monitoring
+ * Uses refs to maintain mutable state without recreating on every render
+ */
+export function useBatchProcessor (
+  onBatch: (entryCount: number) => void,
+  bufferConfig: LogBufferConfig,
+  logStorage: LogStorage,
+  onRateUpdate?: (rate: number, counts: Array<{ second: number; count: number }>, stats?: any) => void,
+  onAutoDisable?: () => void
+): BatchProcessor {
+  // Use refs to hold mutable state that doesn't trigger re-renders
+  const controllerRef = useRef<AbortController | null>(null)
+  const pendingEntriesRef = useRef<LogEntry[]>([])
+  const lastBatchTimeRef = useRef(Date.now())
+  const entryCountsRef = useRef<Array<{ second: number; count: number }>>([])
+  const batchTimeoutRef = useRef<number | null>(null)
+  const autoDisabledRef = useRef(false)
+
+  const processBatch = useCallback(async () => {
+    if (pendingEntriesRef.current.length === 0) return
+
+    const entries = [...pendingEntriesRef.current]
+    pendingEntriesRef.current = []
+    batchTimeoutRef.current = null
+
+    // Update rate monitoring
+    const now = Date.now()
+    const currentSecond = Math.floor(now / 1000)
+
+    // Clean old counts (keep last 5 seconds for rate calculation)
+    entryCountsRef.current = entryCountsRef.current.filter(
+      ({ second }) => currentSecond - second < 5
+    )
+
+    // Add current batch count
+    const existingCount = entryCountsRef.current.find(
+      ({ second }) => second === currentSecond
+    )
+    if (existingCount) {
+      existingCount.count += entries.length
+    } else {
+      entryCountsRef.current.push({ second: currentSecond, count: entries.length })
+    }
+
+    // Calculate current rate (entries per second over last 5 seconds)
+    const totalEntries = entryCountsRef.current.reduce((sum, { count }) => sum + count, 0)
+    const currentRate = totalEntries / Math.max(entryCountsRef.current.length, 1)
+
+    // Update rate state via callback
+    if (onRateUpdate) {
+      onRateUpdate(currentRate, [...entryCountsRef.current])
+    }
+
+    // Check for warnings and auto-disable
+    if (currentRate > bufferConfig.autoDisableThreshold && !autoDisabledRef.current) {
+      console.warn(`Log rate too high (${currentRate.toFixed(1)}/s), auto-disabling streaming`)
+      autoDisabledRef.current = true
+      if (onAutoDisable) {
+        onAutoDisable()
+      }
+    }
+
+    // Store in IndexedDB (async, don't wait) - append new entries and remove old ones if needed
+    try {
+      // Always append new entries - the storage layer will handle circular buffer behavior
+      void logStorage.appendLogs(entries)
+
+      // Update storage stats after adding entries
+      try {
+        const updatedStats = await logStorage.getStorageStats()
+        if (onRateUpdate) {
+          // Pass updated stats via the rate update callback
+          onRateUpdate(currentRate, [...entryCountsRef.current], updatedStats)
+        }
+      } catch (error) {
+        console.warn('Failed to update storage stats:', error)
+      }
+    } catch (error) {
+      console.warn('Failed to store logs in IndexedDB:', error)
+    }
+
+    // Call the batch callback
+    onBatch(entries.length)
+    lastBatchTimeRef.current = now
+  }, [onBatch, bufferConfig, onRateUpdate, onAutoDisable, logStorage])
+
+  const start = useCallback((controller: MutableRefObject<AbortController | null>) => {
+    controllerRef.current = controller.current
+    // Reset rate counters when starting
+    autoDisabledRef.current = false
+    entryCountsRef.current = []
+    lastBatchTimeRef.current = Date.now()
+  }, [])
+
+  const stop = useCallback(() => {
+    // Clear any pending timeout
+    if (batchTimeoutRef.current) {
+      clearTimeout(batchTimeoutRef.current)
+      batchTimeoutRef.current = null
+    }
+
+    controllerRef.current?.abort()
+
+    // Clear the controller reference
+    controllerRef.current = null
+
+    // Process any remaining entries before stopping
+    if (pendingEntriesRef.current.length > 0) {
+      setTimeout(processBatch, 10)
+    }
+  }, [processBatch])
+
+  const addEntry = useCallback((entry: LogEntry) => {
+    if (!controllerRef.current || controllerRef.current.signal.aborted) return
+
+    pendingEntriesRef.current.push(entry)
+
+    // Process batch if we have enough entries or enough time has passed
+    const shouldProcess =
+      pendingEntriesRef.current.length >= 50 || // Batch size threshold
+      (Date.now() - lastBatchTimeRef.current) >= 100 // Time threshold (100ms)
+
+    // Clear any existing timeout before setting a new one
+    if (batchTimeoutRef.current) {
+      clearTimeout(batchTimeoutRef.current)
+      batchTimeoutRef.current = null
+    }
+
+    if (shouldProcess) {
+      batchTimeoutRef.current = window.setTimeout(processBatch, 100) // Process every 100ms
+    } else {
+      // Set a fallback timeout to ensure batches are processed even with low rates
+      batchTimeoutRef.current = window.setTimeout(processBatch, 1000)
+    }
+  }, [processBatch])
+
+  // Set up cleanup when controller changes
+  useEffect(() => {
+    const controller = controllerRef.current
+    if (!controller) return
+
+    const cleanup = () => {
+      if (batchTimeoutRef.current) {
+        clearTimeout(batchTimeoutRef.current)
+        batchTimeoutRef.current = null
+      }
+    }
+
+    controller.signal.onabort = cleanup
+    return cleanup
+  }, [])
+
+  return { start, stop, addEntry }
+}
diff --git a/src/diagnostics/check-screen/check-screen.tsx b/src/diagnostics/check-screen/check-screen.tsx
new file mode 100644
index 000000000..9f42353c2
--- /dev/null
+++ b/src/diagnostics/check-screen/check-screen.tsx
@@ -0,0 +1,88 @@
+import React, { useRef, useEffect, useState } from 'react'
+import { connect } from 'redux-bundler-react'
+import { useDebouncedCallback } from '../../lib/hooks/use-debounced-callback'
+import { DEFAULT_IPFS_CHECK_URL } from '../../bundles/gateway.js'
+
+interface CheckScreenProps {
+  cid?: string
+  ipfsCheckUrl?: string
+}
+
+const CheckScreen: React.FC<CheckScreenProps> = ({ cid, ipfsCheckUrl }) => {
+  const ipfsCheckBaseUrl = ipfsCheckUrl || DEFAULT_IPFS_CHECK_URL
+  const baseUrl = ipfsCheckBaseUrl.endsWith('/') ? ipfsCheckBaseUrl : `${ipfsCheckBaseUrl}/`
+  const ipfsCheckOrigin = new URL(baseUrl).origin
+  const ref = useRef<HTMLIFrameElement>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  const requestSize = useDebouncedCallback(() => {
+    const iframe = ref.current
+    if (!iframe?.contentWindow) return
+    iframe.contentWindow.postMessage({ type: 'iframe-size:request' }, ipfsCheckOrigin)
+  }, 100)
+
+  useEffect(() => {
+    const iframe = ref.current
+    if (!iframe) return
+
+    const onMsg = (e: MessageEvent<any>) => {
+      // Validate origin to prevent XSS attacks
+      if (e.origin !== ipfsCheckOrigin) return
+      if (e.data?.type !== 'iframe-size:report') return
+
+      // Hide loading message as soon as we get first message from iframe
+      setIsLoading(false)
+
+      // Update iframe height based on content
+      iframe.style.height = `${e.data.height}px`
+    }
+    const onLoad = () => {
+      setIsLoading(false)
+      requestSize()
+    }
+
+    window.addEventListener('message', onMsg)
+    window.addEventListener('resize', requestSize)
+    iframe.addEventListener('load', onLoad)
+
+    // initial size request since the iframe ref is available.
+    requestSize()
+
+    return () => {
+      window.removeEventListener('message', onMsg)
+      window.removeEventListener('resize', requestSize)
+      iframe.removeEventListener('load', onLoad)
+    }
+  }, [requestSize, ipfsCheckOrigin])
+
+  // Build the iframe URL with optional CID parameter
+  const iframeSrc = cid ? `${baseUrl}?cid=${encodeURIComponent(cid)}` : baseUrl
+
+  return (
+    <div className="relative">
+      {isLoading && (
+        <div className="absolute w-100 mt4 tc charcoal-muted f5 z-1" role="status" aria-live="polite">
+          <p className="ma0 sans-serif">Loading retrieval check...</p>
+        </div>
+      )}
+      <iframe
+        ref={ref}
+        className="db bn w-100 overflow-y-hidden overflow-x-hidden"
+        style={{ height: '80vh' }}
+        title={`ipfs-check @ ${baseUrl}`}
+        src={iframeSrc}
+        aria-busy={isLoading}
+        // Sandbox permissions:
+        // - allow-scripts: needed for check functionality
+        // - allow-forms: needed for the check form submission
+        // - allow-same-origin: needed for postMessage communication to work properly
+        sandbox="allow-scripts allow-forms allow-same-origin"
+      />
+    </div>
+  )
+}
+
+export default connect(
+  'selectIpfsCheckUrl',
+  CheckScreen
+)
diff --git a/src/diagnostics/diagnostics-content.tsx b/src/diagnostics/diagnostics-content.tsx
new file mode 100644
index 000000000..c1b6cfeb9
--- /dev/null
+++ b/src/diagnostics/diagnostics-content.tsx
@@ -0,0 +1,118 @@
+import React, { useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import LogsScreen from './logs-screen/logs-screen.js'
+import { LogsProvider } from '../contexts/logs/index'
+import { IdentityProvider } from '../contexts/identity-context'
+import CheckScreen from './check-screen/check-screen.js'
+import { useBridgeSelector } from '../helpers/context-bridge'
+import { RouteInfo } from '../bundles/routes-types'
+
+interface DiagnosticsContentProps {
+}
+
+type TabKey = 'logs' | 'retrieval-check'
+
+function getTabKeyFromUrl (path: string): { tab: TabKey, remainder?: string } {
+  const parts = path.split('/').filter(p => p) // Remove empty strings
+
+  if (parts.length === 0) {
+    // Default to logs for empty path
+    return { tab: 'logs' }
+  }
+
+  const tab = parts[0] as TabKey
+  const remainder = parts.slice(1).join('/')
+
+  return {
+    tab,
+    remainder: remainder || undefined
+  }
+}
+
+interface TabButtonProps {
+  tabKey: TabKey
+  label: string
+  active: boolean
+}
+
+const TabButton = ({ tabKey, label, active }: TabButtonProps) => (
+  <a
+    key={tabKey}
+    href={`#/diagnostics/${tabKey}`}
+    className={`pv2 ph3 mr2 br2 pointer fw5 no-underline transition-all ${
+      active
+        ? 'bg-teal white'
+        : 'bg-transparent charcoal-muted hover-bg-gray-muted hover-charcoal'
+    }`}
+    style={{
+      transition: 'all 0.2s ease',
+      ...(active && {
+        backgroundColor: '#378085',
+        color: 'white'
+      })
+    }}
+  >
+    {label}
+  </a>
+)
+
+const DiagnosticsContent: React.FC<DiagnosticsContentProps> = () => {
+  const { t } = useTranslation('diagnostics')
+  const routeInfo = useBridgeSelector<RouteInfo>('selectRouteInfo')
+  const path = routeInfo?.params.path ?? ''
+  const { tab: activeTab, remainder } = getTabKeyFromUrl(path)
+
+  // Redirect from /diagnostics or /diagnostics/ to /diagnostics/logs
+  useEffect(() => {
+    if (path === '' || path === '/') {
+      window.location.replace('#/diagnostics/logs')
+    }
+  }, [path])
+
+  const isMounted = useRef(false)
+  useEffect(() => {
+    isMounted.current = true
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'logs':
+        return (
+          <IdentityProvider>
+            <LogsProvider>
+              <LogsScreen />
+            </LogsProvider>
+          </IdentityProvider>
+        )
+      case 'retrieval-check':
+        return (
+          <CheckScreen cid={remainder} />
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div>
+      {/* Tab Navigation */}
+      <div className='mb4 pb2' style={{ borderBottom: '1px solid #e1e5eb' }}>
+        <nav className='flex items-center'>
+          <TabButton tabKey='logs' label={t('tabs.logs')} active={activeTab === 'logs'} />
+          <TabButton tabKey='retrieval-check' label={t('tabs.retrieval-check')} active={activeTab === 'retrieval-check'} />
+        </nav>
+      </div>
+
+      {/* Tab Content */}
+      {renderTabContent()}
+    </div>
+  )
+}
+
+/**
+ * @template {ReduxBundlerProps}
+ */
+export default DiagnosticsContent
diff --git a/src/diagnostics/diagnostics-page.tsx b/src/diagnostics/diagnostics-page.tsx
new file mode 100644
index 000000000..a691701a2
--- /dev/null
+++ b/src/diagnostics/diagnostics-page.tsx
@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Helmet } from 'react-helmet'
+import IsNotConnected from '../components/is-not-connected/is-not-connected'
+import DiagnosticsContent from './diagnostics-content'
+import { useBridgeSelector } from '../helpers/context-bridge'
+
+const DiagnosticsPage: React.FC = () => {
+  const { t } = useTranslation('diagnostics')
+  const ipfsConnected = useBridgeSelector('selectIpfsConnected')
+
+  const Component = useMemo(() => {
+    if (ipfsConnected) {
+      return DiagnosticsContent
+    }
+    return IsNotConnected
+  }, [ipfsConnected])
+
+  return (
+    <div data-id='DiagnosticsPage' className='mw9 center'>
+      <Helmet>
+        <title>{t('title')} | IPFS</title>
+      </Helmet>
+      <div className='flex'>
+        <div className='flex-auto'>
+          <Component key={ipfsConnected ? 'connected' : 'not-connected'} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * @template {ReduxBundlerProps}
+ */
+export default DiagnosticsPage
diff --git a/src/diagnostics/loadable-diagnostics-page.tsx b/src/diagnostics/loadable-diagnostics-page.tsx
new file mode 100644
index 000000000..bda3b562e
--- /dev/null
+++ b/src/diagnostics/loadable-diagnostics-page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import Loadable from '@loadable/component'
+import ComponentLoader from '../loader/ComponentLoader.js'
+
+const LoadableDiagnosticsPage = Loadable(() => import('./diagnostics-page'),
+  { fallback: <ComponentLoader/> }
+)
+
+export default LoadableDiagnosticsPage
diff --git a/src/diagnostics/logs-screen/buffer-config-modal.tsx b/src/diagnostics/logs-screen/buffer-config-modal.tsx
new file mode 100644
index 000000000..34466e746
--- /dev/null
+++ b/src/diagnostics/logs-screen/buffer-config-modal.tsx
@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import Modal from '../../components/modal/modal'
+import Overlay from '../../components/overlay/overlay'
+import Button from '../../components/button/button'
+import type { LogBufferConfig } from '../../contexts/logs/reducer'
+
+interface BufferConfigModalProps {
+  isOpen: boolean
+  onClose: () => void
+  currentConfig: LogBufferConfig
+  onApply: (config: LogBufferConfig) => void
+}
+
+export const BufferConfigModal: React.FC<BufferConfigModalProps> = ({
+  isOpen,
+  onClose,
+  currentConfig,
+  onApply
+}) => {
+  const { t } = useTranslation('diagnostics')
+  const [tempBufferConfig, setTempBufferConfig] = useState<LogBufferConfig>({ ...currentConfig })
+  const [displayValues, setDisplayValues] = useState({
+    memory: currentConfig.memory.toString(),
+    indexedDB: currentConfig.indexedDB.toString(),
+    warnThreshold: currentConfig.warnThreshold.toString(),
+    autoDisableThreshold: currentConfig.autoDisableThreshold.toString()
+  })
+
+  // Update temp config when current config changes
+  useEffect(() => {
+    setTempBufferConfig({ ...currentConfig })
+    setDisplayValues({
+      memory: currentConfig.memory.toString(),
+      indexedDB: currentConfig.indexedDB.toString(),
+      warnThreshold: currentConfig.warnThreshold.toString(),
+      autoDisableThreshold: currentConfig.autoDisableThreshold.toString()
+    })
+  }, [currentConfig])
+
+  const handleApply = () => {
+    // Parse display values and apply
+    const configToApply = {
+      memory: parseInt(displayValues.memory) || tempBufferConfig.memory,
+      indexedDB: parseInt(displayValues.indexedDB) || tempBufferConfig.indexedDB,
+      warnThreshold: parseInt(displayValues.warnThreshold) || tempBufferConfig.warnThreshold,
+      autoDisableThreshold: parseInt(displayValues.autoDisableThreshold) || tempBufferConfig.autoDisableThreshold
+    }
+    onApply(configToApply)
+    onClose()
+  }
+
+  const handleCancel = () => {
+    // Reset to current config
+    setTempBufferConfig({ ...currentConfig })
+    setDisplayValues({
+      memory: currentConfig.memory.toString(),
+      indexedDB: currentConfig.indexedDB.toString(),
+      warnThreshold: currentConfig.warnThreshold.toString(),
+      autoDisableThreshold: currentConfig.autoDisableThreshold.toString()
+    })
+    onClose()
+  }
+
+  return (
+    // @ts-expect-error - Overlay is not typed
+    <Overlay show={isOpen} onLeave={handleCancel}>
+      <Modal onCancel={handleCancel} className="outline-0">
+        <div className='pa4'>
+          <h3 className='montserrat fw4 charcoal ma0 f4 mb3'>{t('logs.config.title')}</h3>
+          <div className='mb4'>
+            <div className='mb3'>
+              <label htmlFor='buffer-config-memory' className='db fw6 mb1 f6 charcoal'>{t('logs.config.memoryBuffer')}</label>
+              <input
+                id='buffer-config-memory'
+                type='number'
+                className='input-reset charcoal ba b--black-20 br1 pa2 w-100 focus-outline'
+                value={displayValues.memory}
+                onChange={(e) => {
+                  const value = e.target?.value || ''
+                  setDisplayValues(prev => ({ ...prev, memory: value }))
+                }}
+                min='100'
+                max='2000'
+              />
+            </div>
+            <div className='mb3'>
+              <label htmlFor='buffer-config-indexeddb' className='db fw6 mb1 f6 charcoal'>{t('logs.config.persistentBuffer')}</label>
+              <input
+                id='buffer-config-indexeddb'
+                type='number'
+                className='input-reset charcoal ba b--black-20 br1 pa2 w-100 focus-outline'
+                value={displayValues.indexedDB}
+                onChange={(e) => {
+                  const value = e.target?.value || ''
+                  setDisplayValues(prev => ({ ...prev, indexedDB: value }))
+                }}
+                min='1000'
+                max='100000'
+              />
+            </div>
+            <div className='mb3'>
+              <label htmlFor='buffer-config-warn' className='db fw6 mb1 f6 charcoal'>{t('logs.config.warnThreshold')}</label>
+              <input
+                id='buffer-config-warn'
+                type='number'
+                className='input-reset charcoal ba b--black-20 br1 pa2 w-100 focus-outline'
+                value={displayValues.warnThreshold}
+                onChange={(e) => {
+                  const value = e.target?.value || ''
+                  setDisplayValues(prev => ({ ...prev, warnThreshold: value }))
+                }}
+                min='10'
+                max='1000'
+              />
+            </div>
+            <div>
+              <label htmlFor='buffer-config-autodisable' className='db fw6 mb1 f6 charcoal'>{t('logs.config.autoDisableThreshold')}</label>
+              <input
+                id='buffer-config-autodisable'
+                type='number'
+                className='input-reset charcoal ba b--black-20 br1 pa2 w-100 focus-outline'
+                value={displayValues.autoDisableThreshold}
+                onChange={(e) => {
+                  const value = e.target?.value || ''
+                  setDisplayValues(prev => ({ ...prev, autoDisableThreshold: value }))
+                }}
+                min='50'
+                max='2000'
+              />
+            </div>
+          </div>
+          <div className='flex flex-column flex-row-ns justify-end'>
+            <Button
+              id='buffer-config-cancel-button'
+              minWidth={100}
+              bg='bg-charcoal'
+              className='tc'
+              onClick={handleCancel}
+            >
+              {t('app:actions.cancel')}
+            </Button>
+            <Button
+              id='buffer-config-apply-button'
+              minWidth={100}
+              className='mt2 mt0-ns ml0 ml2-ns tc'
+              onClick={handleApply}
+            >
+              {t('app:actions.apply')}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </Overlay>
+  )
+}
diff --git a/src/diagnostics/logs-screen/golog-level-autocomplete.test.tsx b/src/diagnostics/logs-screen/golog-level-autocomplete.test.tsx
new file mode 100644
index 000000000..ca62c3207
--- /dev/null
+++ b/src/diagnostics/logs-screen/golog-level-autocomplete.test.tsx
@@ -0,0 +1,754 @@
+import React from 'react'
+import { render, screen, waitFor, cleanup } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { jest, describe, it, expect, beforeEach, afterEach } from '@jest/globals'
+import '@testing-library/jest-dom'
+import { GologLevelAutocomplete } from './golog-level-autocomplete'
+
+// Mock react-i18next
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'logs.autocomplete.globalLevel': 'Global level',
+        'logs.autocomplete.subsystem': 'Subsystem',
+        'logs.autocomplete.level': 'Log level'
+      }
+      return translations[key] || key
+    }
+  })
+}))
+
+interface LogSubsystem {
+  name: string
+  level: string
+}
+
+const mockSubsystems: LogSubsystem[] = [
+  { name: 'core', level: 'info' },
+  { name: 'network', level: 'warn' },
+  { name: 'storage', level: 'error' },
+  { name: 'routing', level: 'debug' },
+  { name: 'peer', level: 'info' }
+]
+
+const defaultProps = {
+  value: '',
+  onChange: jest.fn(),
+  subsystems: mockSubsystems,
+  disabled: false,
+  placeholder: 'Enter log levels...',
+  className: 'test-class'
+}
+
+describe('GologLevelAutocomplete', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  afterEach(() => {
+    cleanup()
+  })
+
+  describe('rendering', () => {
+    it('should render with default props', () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveValue('')
+      expect(input).toHaveAttribute('placeholder', 'Enter log levels...')
+      expect(input).not.toBeDisabled()
+    })
+
+    it('should render with initial value', () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info" />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveValue('info')
+    })
+
+    it('should render disabled state', () => {
+      render(<GologLevelAutocomplete {...defaultProps} disabled={true} />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toBeDisabled()
+    })
+
+    it('should apply custom className', () => {
+      render(<GologLevelAutocomplete {...defaultProps} className="custom-class" />)
+
+      const container = screen.getByRole('textbox').parentElement
+      expect(container).toHaveClass('custom-class')
+    })
+
+    it('should have monospace font styling via code class', () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveClass('code')
+    })
+  })
+
+  describe('input handling', () => {
+    it('should call onChange when input changes', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'debug')
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith('debug')
+    })
+
+    it('should update input value when prop changes', () => {
+      const { rerender } = render(<GologLevelAutocomplete {...defaultProps} value="" />)
+
+      let input = screen.getByRole('textbox')
+      expect(input).toHaveValue('')
+
+      rerender(<GologLevelAutocomplete {...defaultProps} value="info" />)
+      input = screen.getByRole('textbox')
+      expect(input).toHaveValue('info')
+    })
+  })
+
+  describe('suggestions for global levels', () => {
+    it('should show global level suggestions when input is empty', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+        expect(screen.getByText('info')).toBeInTheDocument()
+        expect(screen.getByText('warn')).toBeInTheDocument()
+        expect(screen.getByText('error')).toBeInTheDocument()
+        expect(screen.getByText('dpanic')).toBeInTheDocument()
+        expect(screen.getByText('panic')).toBeInTheDocument()
+        expect(screen.getByText('fatal')).toBeInTheDocument()
+      })
+    })
+
+    it('should filter global level suggestions based on input', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'de')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+        expect(screen.queryByText('info')).not.toBeInTheDocument()
+        expect(screen.queryByText('warn')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should select global level when clicked', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+      })
+
+      const debugOption = screen.getByText('debug')
+      await userEvent.click(debugOption)
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith('debug')
+    })
+  })
+
+  describe('suggestions for subsystems', () => {
+    it('should show subsystem suggestions after comma', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info," />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('core')).toBeInTheDocument()
+        expect(screen.getByText('network')).toBeInTheDocument()
+        expect(screen.getByText('storage')).toBeInTheDocument()
+        expect(screen.getByText('routing')).toBeInTheDocument()
+        expect(screen.getByText('peer')).toBeInTheDocument()
+      })
+    })
+
+    it('should filter subsystem suggestions based on input', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,ne" />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('network')).toBeInTheDocument()
+        expect(screen.queryByText('core')).not.toBeInTheDocument()
+        expect(screen.queryByText('storage')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should not show already used subsystems', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,core=debug," />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.queryByText('core')).not.toBeInTheDocument()
+        expect(screen.getByText('network')).toBeInTheDocument()
+        expect(screen.getByText('storage')).toBeInTheDocument()
+      })
+    })
+
+    it('should add equals sign when selecting subsystem', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info," />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('core')).toBeInTheDocument()
+      })
+
+      const coreOption = screen.getByText('core')
+      await userEvent.click(coreOption)
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith('info,core=')
+    })
+  })
+
+  describe('suggestions for levels after equals sign', () => {
+    it('should show level suggestions after subsystem equals sign', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,core=" />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+        expect(screen.getByText('info')).toBeInTheDocument()
+        expect(screen.getByText('warn')).toBeInTheDocument()
+        expect(screen.getByText('error')).toBeInTheDocument()
+      })
+    })
+
+    it('should filter level suggestions based on input', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,core=de" />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+        expect(screen.queryByText('info')).not.toBeInTheDocument()
+        expect(screen.queryByText('warn')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should complete subsystem=level when selecting level', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,core=" />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+      })
+
+      const debugOption = screen.getByText('debug')
+      await userEvent.click(debugOption)
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith('info,core=debug')
+    })
+  })
+
+  describe('keyboard navigation', () => {
+    it('should navigate suggestions with arrow keys', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+      })
+
+      // Press arrow down to select next item
+      await userEvent.keyboard('{ArrowDown}')
+
+      // The second item (info) should be highlighted
+      const infoOption = screen.getByText('info').closest('div')
+      expect(infoOption).toHaveClass('bg-light-blue')
+    })
+
+    it('should navigate suggestions with arrow up key', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+      })
+
+      // Press arrow down twice to go to third item
+      await userEvent.keyboard('{ArrowDown}')
+      await userEvent.keyboard('{ArrowDown}')
+
+      // Press arrow up to go back to second item
+      await userEvent.keyboard('{ArrowUp}')
+
+      // The second item (info) should be highlighted
+      const infoOption = screen.getByText('info').closest('div')
+      expect(infoOption).toHaveClass('bg-light-blue')
+    })
+
+    it('should select suggestion with Enter key', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+      })
+
+      await userEvent.keyboard('{Enter}')
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith('debug')
+    })
+
+    it('should close dropdown with Escape key', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+      })
+
+      await userEvent.keyboard('{Escape}')
+
+      await waitFor(() => {
+        expect(screen.queryByText('debug')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('dropdown behavior', () => {
+    it('should not show suggestions when at end of complete part', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,core=debug" />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      // Should not show suggestions when the last part is complete
+      await waitFor(() => {
+        expect(screen.queryByText('debug')).not.toBeInTheDocument()
+        expect(screen.queryByText('info')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should close dropdown when clicking outside', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+      })
+
+      // Click outside the component
+      await userEvent.click(document.body)
+
+      await waitFor(() => {
+        expect(screen.queryByText('debug')).not.toBeInTheDocument()
+      })
+    })
+
+    it('should show suggestion types in dropdown', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        // Use getAllByText since there are multiple "Global level" elements
+        const globalLevelElements = screen.getAllByText('Global level')
+        expect(globalLevelElements.length).toBeGreaterThan(0)
+      })
+    })
+  })
+
+  describe('complex scenarios', () => {
+    it('should handle multiple subsystem=level pairs', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,core=debug,network=" />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        expect(screen.getByText('warn')).toBeInTheDocument()
+        expect(screen.getByText('error')).toBeInTheDocument()
+      })
+
+      const warnOption = screen.getByText('warn')
+      await userEvent.click(warnOption)
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith('info,core=debug,network=warn')
+    })
+
+    it('should handle cursor position correctly and show appropriate suggestions', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,core=debug" />)
+
+      const input = screen.getByRole('textbox')
+
+      // Click to focus - cursor should be at the end of the complete part
+      await userEvent.click(input)
+
+      // Verify cursor is at the end by checking NO suggestions are shown
+      // (since we're at the end of a complete subsystem=level pair)
+      await waitFor(() => {
+        expect(screen.queryByText('debug')).not.toBeInTheDocument()
+        expect(screen.queryByText('info')).not.toBeInTheDocument()
+        expect(screen.queryByText('core')).not.toBeInTheDocument()
+      })
+
+      // Add a comma to move to the next subsystem selection mode
+      await userEvent.type(input, ',')
+
+      // Should now show subsystem suggestions immediately (excluding 'core' since it's already used)
+      await waitFor(() => {
+        expect(screen.getByText('network')).toBeInTheDocument()
+        expect(screen.getByText('storage')).toBeInTheDocument()
+        expect(screen.getByText('routing')).toBeInTheDocument()
+        expect(screen.queryByText('core')).not.toBeInTheDocument() // Already used
+      })
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith('info,core=debug,')
+    })
+
+    it('should handle invalid log levels gracefully', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,core=invalid" />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      // The component might not show suggestions in this scenario
+      // Let's just verify the input is still functional
+      expect(input).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('should have proper ARIA attributes', () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toBeInTheDocument()
+    })
+
+    it('should support keyboard navigation on dropdown items', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      await waitFor(() => {
+        // Find the dropdown container and check its children
+        const dropdown = screen.getByRole('textbox').parentElement?.querySelector('.absolute')
+        expect(dropdown).toBeInTheDocument()
+
+        // Check that dropdown items have proper attributes
+        const dropdownItems = dropdown?.querySelectorAll('[role="button"]')
+        expect(dropdownItems?.length).toBeGreaterThan(0)
+
+        if (dropdownItems && dropdownItems.length > 0) {
+          const firstItem = dropdownItems[0] as HTMLElement
+          expect(firstItem).toHaveAttribute('role', 'button')
+          expect(firstItem).toHaveAttribute('tabIndex', '0')
+        }
+      })
+    })
+  })
+
+  describe('error handling', () => {
+    it('should apply error styling to input when error is present', () => {
+      const errorMessage = 'Invalid log level provided'
+      render(<GologLevelAutocomplete {...defaultProps} value="invalid" error={errorMessage} />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveClass('b--red-muted')
+      expect(input).toHaveClass('focus-outline-red')
+    })
+
+    it('should not apply error styling when no error is present', () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info" />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveClass('b--black-20')
+      expect(input).not.toHaveClass('b--red-muted')
+      expect(input).not.toHaveClass('focus-outline-red')
+    })
+
+    it('should not display error message when error prop is empty', () => {
+      render(<GologLevelAutocomplete {...defaultProps} error="" />)
+
+      // Should not find any error message
+      expect(screen.queryByText('Invalid log level')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle empty subsystems array', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} subsystems={[]} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, 'info,')
+      await userEvent.click(input)
+
+      // Should not crash and should still show global level suggestions
+      expect(input).toBeInTheDocument()
+    })
+
+    it('should handle very long input values', () => {
+      const longValue = 'info,' + 'core=debug,'.repeat(50)
+      render(<GologLevelAutocomplete {...defaultProps} value={longValue} />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveValue(longValue)
+    })
+
+    it('should handle special characters in subsystem names', async () => {
+      const subsystemsWithSpecialChars: LogSubsystem[] = [
+        { name: 'core-api', level: 'info' },
+        { name: 'network_v2', level: 'warn' },
+        { name: 'storage.test', level: 'error' }
+      ]
+
+      render(<GologLevelAutocomplete {...defaultProps} subsystems={subsystemsWithSpecialChars} value="info," />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      // Should handle special characters without crashing
+      expect(input).toBeInTheDocument()
+    })
+
+    it('should handle invalid input gracefully', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,invalid" />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      // The component should handle invalid input without crashing
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveValue('info,invalid')
+    })
+
+    it('should handle async form submission with error', async () => {
+      const mockOnSubmit = jest.fn<(event?: React.FormEvent) => Promise<void>>().mockImplementation(() => Promise.reject(new Error('Submission failed')))
+      const mockOnValidityChange = jest.fn()
+      const mockOnErrorChange = jest.fn()
+
+      render(
+        <GologLevelAutocomplete
+          {...defaultProps}
+          value="info"
+          onSubmit={mockOnSubmit}
+          onValidityChange={mockOnValidityChange}
+          onErrorChange={mockOnErrorChange}
+        />
+      )
+
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, '{enter}')
+
+      // Wait for the async submission to complete and all state updates to finish
+      await waitFor(() => {
+        expect(mockOnSubmit).toHaveBeenCalled()
+      })
+
+      // Wait a bit for async state updates to complete
+      await waitFor(() => {
+        // The component should remain interactive after error
+        expect(input).not.toBeDisabled()
+      })
+
+      // Verify that the component remains interactive after error
+      expect(input).toHaveValue('info')
+    })
+
+    it('should handle async form submission with unknown error', async () => {
+      const mockOnSubmit = jest.fn<(event?: React.FormEvent) => Promise<void>>().mockImplementation(() => Promise.reject(new Error('Unknown error')))
+      const mockOnErrorChange = jest.fn()
+
+      render(
+        <GologLevelAutocomplete
+          {...defaultProps}
+          value="info"
+          onSubmit={mockOnSubmit}
+          onErrorChange={mockOnErrorChange}
+        />
+      )
+
+      const input = screen.getByRole('textbox')
+      await userEvent.type(input, '{enter}')
+
+      // Wait for the async submission to complete and all state updates to finish
+      await waitFor(() => {
+        expect(mockOnSubmit).toHaveBeenCalled()
+      })
+
+      // Wait a bit for async state updates to complete
+      await waitFor(() => {
+        // The component should remain interactive after error
+        expect(input).not.toBeDisabled()
+      })
+
+      // Verify that the component remains interactive after error
+      expect(input).toHaveValue('info')
+    })
+
+    it('should handle cursor positioning after suggestion selection', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info," />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      // Wait for suggestions to appear
+      await waitFor(() => {
+        expect(screen.getByText('core')).toBeInTheDocument()
+      })
+
+      // Select a subsystem suggestion
+      const suggestion = screen.getByText('core')
+      await userEvent.click(suggestion)
+
+      // Verify that the input value is updated correctly
+      await waitFor(() => {
+        expect(input).toHaveValue('info,core=')
+      })
+    })
+
+    it('should handle focus after suggestion selection', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,core=" />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      // Wait for suggestions to appear
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+      })
+
+      // Select a level suggestion
+      const suggestion = screen.getByText('debug')
+      await userEvent.click(suggestion)
+
+      // Verify that the input value is updated correctly
+      await waitFor(() => {
+        expect(input).toHaveValue('info,core=debug')
+      })
+    })
+
+    it('should call onErrorChange when error prop changes', () => {
+      const mockOnErrorChange = jest.fn()
+      const { rerender } = render(
+        <GologLevelAutocomplete
+          {...defaultProps}
+          error=""
+          onErrorChange={mockOnErrorChange}
+        />
+      )
+
+      // Change error prop
+      rerender(
+        <GologLevelAutocomplete
+          {...defaultProps}
+          error="New error message"
+          onErrorChange={mockOnErrorChange}
+        />
+      )
+
+      expect(mockOnErrorChange).toHaveBeenCalledWith('New error message')
+    })
+
+    it('should display suggestion type labels', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      // Wait for suggestions to appear
+      await waitFor(() => {
+        expect(screen.getByText('debug')).toBeInTheDocument()
+      })
+
+      // Check that suggestion type labels are rendered with translations
+      const labels = screen.getAllByText('Global level')
+      expect(labels.length).toBeGreaterThan(0)
+    })
+
+    it('should handle complete subsystem=level pairs', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info,core=debug" />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      // The component should handle complete pairs without showing suggestions
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveValue('info,core=debug')
+    })
+
+    it('should handle async UI updates after suggestion selection', async () => {
+      render(<GologLevelAutocomplete {...defaultProps} value="info," />)
+
+      const input = screen.getByRole('textbox')
+      await userEvent.click(input)
+
+      // Wait for suggestions to appear
+      await waitFor(() => {
+        expect(screen.getByText('core')).toBeInTheDocument()
+      })
+
+      // Select a subsystem suggestion to trigger async updates
+      const suggestion = screen.getByText('core')
+      await userEvent.click(suggestion)
+
+      // Wait for async updates to complete
+      await waitFor(() => {
+        expect(input).toHaveValue('info,core=')
+      })
+
+      // Should handle async updates without crashing
+      expect(input).toBeInTheDocument()
+    })
+
+    it('should integrate with validation logic', async () => {
+      const mockOnValidityChange = jest.fn()
+      render(
+        <GologLevelAutocomplete
+          {...defaultProps}
+          onValidityChange={mockOnValidityChange}
+        />
+      )
+
+      const input = screen.getByRole('textbox')
+
+      // Type invalid input
+      await userEvent.type(input, 'invalid')
+      expect(mockOnValidityChange).toHaveBeenCalledWith(false)
+
+      // Type valid input
+      await userEvent.clear(input)
+      await userEvent.type(input, 'info')
+      expect(mockOnValidityChange).toHaveBeenCalledWith(true)
+    })
+  })
+})
diff --git a/src/diagnostics/logs-screen/golog-level-autocomplete.tsx b/src/diagnostics/logs-screen/golog-level-autocomplete.tsx
new file mode 100644
index 000000000..54f0acabf
--- /dev/null
+++ b/src/diagnostics/logs-screen/golog-level-autocomplete.tsx
@@ -0,0 +1,432 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { LOG_LEVELS, validateGologLevelString, parseInputContext } from '../../lib/golog-level-utils'
+
+interface LogSubsystem {
+  name: string
+  level: string
+}
+
+interface GologLevelAutocompleteProps {
+  value: string
+  onChange: (value: string) => void
+  subsystems: LogSubsystem[]
+  disabled?: boolean
+  placeholder?: string
+  className?: string
+  onSubmit?: (event?: React.FormEvent) => (Promise<void> | void)
+  onValidityChange?: (isValid: boolean) => void
+  onErrorChange?: (errorMessage: string) => void
+  error?: string
+}
+
+export const GologLevelAutocomplete: React.FC<GologLevelAutocompleteProps> = ({
+  value,
+  onChange,
+  subsystems,
+  disabled = false,
+  placeholder = '',
+  className = '',
+  onSubmit,
+  error,
+  onValidityChange,
+  onErrorChange
+}) => {
+  const { t } = useTranslation('diagnostics')
+  const [isOpen, setIsOpen] = useState(false)
+  const [inputValue, setInputValue] = useState(value)
+  const [cursorPosition, setCursorPosition] = useState(0)
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [isTransitioning, setIsTransitioning] = useState(false)
+  const [errorMessage, setErrorMessage] = useState(error || '')
+  const [isFocused, setIsFocused] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setErrorMessage(error || '')
+    // Update validity when error prop changes
+    onValidityChange?.(!error)
+    onErrorChange?.(error || '')
+  }, [error, onValidityChange, onErrorChange])
+
+  const validateGologLevel = useCallback((input: string): { isValid: boolean; errorMessage: string } => {
+    const validSubsystems = subsystems.map(s => s.name)
+    const result = validateGologLevelString(input, validSubsystems)
+
+    if (!result.isValid) {
+      const translatedMessage = t(result.errorKey, result.errorParams)
+      return { isValid: false, errorMessage: typeof translatedMessage === 'string' ? translatedMessage : String(translatedMessage) }
+    }
+
+    return { isValid: true, errorMessage: '' }
+  }, [subsystems, t])
+
+  // Generate suggestions based on current context
+  const suggestions = useMemo(() => {
+    const context = parseInputContext(inputValue, cursorPosition)
+    const suggestions: Array<{ text: string; type: 'global' | 'subsystem' | 'level' }> = []
+
+    // Don't show suggestions if we're submitting, at the end of a complete part, or if the current part is complete
+    if (isSubmitting || context.isAtEndOfCompletePart || context.isComplete) {
+      return []
+    }
+
+    // Check if we're at the end of the input and the last part is complete
+    if (cursorPosition === inputValue.length) {
+      const parts = inputValue.split(',')
+      const lastPart = parts[parts.length - 1].trim()
+      if (lastPart.includes('=') && lastPart.substring(lastPart.indexOf('=') + 1).trim().length > 0) {
+        // Only return empty if it's a valid complete level
+        const levelAfterEquals = lastPart.substring(lastPart.indexOf('=') + 1).trim()
+        const isValidLevel = LOG_LEVELS.some(level => level.toLowerCase() === levelAfterEquals.toLowerCase())
+        if (isValidLevel) {
+          return []
+        }
+      }
+    }
+
+    // Get all existing subsystems from the input to avoid duplicates
+    const existingSubsystems = new Set<string>()
+    const parts = inputValue.split(',')
+    parts.forEach(part => {
+      const trimmedPart = part.trim()
+      if (trimmedPart.includes('=')) {
+        const subsystemName = trimmedPart.substring(0, trimmedPart.indexOf('=')).trim()
+        existingSubsystems.add(subsystemName)
+      }
+    })
+
+    if (context.currentPartIndex === 0) {
+      // First part - suggest global levels
+      LOG_LEVELS.forEach(level => {
+        if (level.toLowerCase().includes(context.currentPart.toLowerCase())) {
+          suggestions.push({ text: level, type: 'global' })
+        }
+      })
+    } else {
+      // Subsequent parts - suggest subsystems and levels
+      const currentPart = context.currentPart.trim()
+      const hasEquals = currentPart.includes('=')
+
+      if (!hasEquals) {
+        // No equals sign yet - suggest subsystems only (excluding already used ones)
+        subsystems.forEach(subsystem => {
+          if (subsystem.name.toLowerCase().includes(currentPart.toLowerCase()) &&
+              !existingSubsystems.has(subsystem.name)) {
+            suggestions.push({ text: subsystem.name, type: 'subsystem' })
+          }
+        })
+      } else {
+        // Has equals sign - suggest levels for the current subsystem
+        const equalIndex = currentPart.indexOf('=')
+        const levelInput = currentPart.substring(equalIndex + 1).trim()
+
+        LOG_LEVELS.forEach(level => {
+          if (level.toLowerCase().includes(levelInput.toLowerCase())) {
+            suggestions.push({ text: level, type: 'level' })
+          }
+        })
+      }
+    }
+
+    return suggestions // Show all suggestions without limit
+  }, [inputValue, cursorPosition, subsystems, isSubmitting])
+
+  // Handle input change
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value
+    const newCursorPosition = e.target.selectionStart || 0
+
+    setInputValue(newValue)
+    setCursorPosition(newCursorPosition)
+    setSelectedIndex(0)
+
+    onChange(newValue)
+
+    // Always validate on input change
+    const validation = validateGologLevel(newValue)
+
+    // Update validity state immediately
+    if (!validation.isValid) {
+      onValidityChange?.(false)
+    } else {
+      onValidityChange?.(true)
+    }
+  }, [onChange, validateGologLevel, onValidityChange])
+
+  // Handle suggestion selection
+  const handleSuggestionSelect = useCallback((suggestion: { text: string; type: string }) => {
+    const context = parseInputContext(inputValue, cursorPosition)
+    const parts = inputValue.split(',')
+
+    if (context.currentPartIndex === 0) {
+      // Replace global level
+      parts[0] = suggestion.text
+    } else {
+      // Handle subsystem/level selection
+      const currentPart = context.currentPart.trim()
+      const hasEquals = currentPart.includes('=')
+
+      if (suggestion.type === 'subsystem' && !hasEquals) {
+        // Selecting a subsystem - add equals sign to allow level input
+        parts[context.currentPartIndex] = suggestion.text + '='
+      } else if (suggestion.type === 'level' && hasEquals) {
+        // Selecting a level - complete the subsystem=level
+        const equalIndex = currentPart.indexOf('=')
+        const subsystemName = currentPart.substring(0, equalIndex).trim()
+        parts[context.currentPartIndex] = subsystemName + '=' + suggestion.text
+      } else {
+        // Fallback - just replace the part
+        parts[context.currentPartIndex] = suggestion.text
+      }
+    }
+
+    const newValue = parts.join(',')
+    setInputValue(newValue)
+    onChange(newValue)
+
+    // Validate after suggestion selection
+    const validation = validateGologLevel(newValue)
+    if (!validation.isValid) {
+      setErrorMessage(validation.errorMessage)
+      onValidityChange?.(false)
+    } else {
+      setErrorMessage('')
+      onValidityChange?.(true)
+    }
+
+    // Don't close dropdown if we just added an equals sign
+    if (suggestion.type === 'subsystem' && !context.currentPart.includes('=')) {
+      // Keep dropdown open and position cursor after equals sign
+      const newCursorPos = newValue.lastIndexOf('=') + 1
+      setIsTransitioning(true)
+      setCursorPosition(newCursorPos)
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus()
+          inputRef.current.setSelectionRange(newCursorPos, newCursorPos)
+        }
+        setIsTransitioning(false)
+      }, 10)
+    } else {
+      setIsOpen(false)
+      // Focus back to input
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus()
+          inputRef.current.setSelectionRange(newValue.length, newValue.length)
+        }
+      }, 0)
+    }
+  }, [inputValue, cursorPosition, onChange, validateGologLevel, onValidityChange])
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback(async (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+
+      // If dropdown is open and we have suggestions, select the current suggestion
+      if (isOpen && suggestions.length > 0) {
+        if (suggestions[selectedIndex]) {
+          handleSuggestionSelect(suggestions[selectedIndex])
+        }
+        return
+      }
+
+      // Otherwise, submit the form
+      if (onSubmit && !isSubmitting) {
+        // Validate one more time before submitting
+        const validation = validateGologLevel(inputValue)
+        onValidityChange?.(validation.isValid)
+
+        // Remove focus from input to close suggestions
+        inputRef.current?.blur()
+        setIsOpen(false)
+
+        setIsSubmitting(true)
+        try {
+          await onSubmit(undefined)
+        } catch (error: unknown) {
+          // Handle submission error if needed
+          console.error('Form submission error:', error)
+          setErrorMessage(error instanceof Error ? error.message : 'An unknown error occurred')
+        } finally {
+          setIsSubmitting(false)
+        }
+      }
+      return
+    }
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault()
+        setSelectedIndex(prev => (prev + 1) % suggestions.length)
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        setSelectedIndex(prev => (prev - 1 + suggestions.length) % suggestions.length)
+        break
+      case 'Escape':
+        setIsOpen(false)
+        break
+    }
+  }, [isOpen, suggestions, selectedIndex, handleSuggestionSelect, onSubmit, isSubmitting, validateGologLevel, onValidityChange, inputValue])
+
+  // Handle focus/blur
+  const handleFocus = useCallback(() => {
+    setIsFocused(true)
+
+    // Set cursor to end of input when focused
+    setTimeout(() => {
+      if (inputRef.current) {
+        const endPosition = inputValue.length
+        inputRef.current.setSelectionRange(endPosition, endPosition)
+        setCursorPosition(endPosition)
+      }
+    }, 0)
+
+    // Check if we should show suggestions based on current context
+    const context = parseInputContext(inputValue, inputValue.length)
+
+    // Don't show dropdown if we're at the end of a complete part
+    if (context.isAtEndOfCompletePart) {
+      setIsOpen(false)
+      return
+    }
+
+    // Only open dropdown if there are actual suggestions to show
+    if (suggestions.length > 0) {
+      setIsOpen(true)
+    }
+  }, [suggestions.length, inputValue])
+
+  const handleBlur = useCallback(() => {
+    // Don't close if we're in the middle of a transition
+    if (isTransitioning) {
+      return
+    }
+
+    // Delay closing to allow for suggestion clicks
+    setTimeout(() => {
+      // Only close if we're not in the middle of updating cursor position
+      if (!inputRef.current?.matches(':focus')) {
+        setIsOpen(false)
+        setIsFocused(false)
+        // Validate when losing focus
+        const validation = validateGologLevel(inputValue)
+        if (!validation.isValid) {
+          setErrorMessage(validation.errorMessage)
+          onValidityChange?.(false)
+        } else {
+          setErrorMessage('')
+          onValidityChange?.(true)
+        }
+      }
+    }, 150)
+  }, [isTransitioning, validateGologLevel, inputValue, onValidityChange])
+
+  // Update input value when prop changes
+  useEffect(() => {
+    setInputValue(value)
+  }, [value])
+
+  // Update cursor position when input is focused
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.setSelectionRange(cursorPosition, cursorPosition)
+    }
+  }, [cursorPosition])
+
+  // Handle dropdown state based on suggestions
+  useEffect(() => {
+    const context = parseInputContext(inputValue, cursorPosition)
+
+    // Don't show suggestions if we're submitting, at the end of a complete part, or if the current part is complete
+    if (isSubmitting || context.isAtEndOfCompletePart || context.isComplete) {
+      setIsOpen(false)
+    } else {
+      // Only open dropdown if there are suggestions available AND the component has focus
+      setIsOpen(suggestions.length > 0 && isFocused)
+    }
+  }, [inputValue, cursorPosition, suggestions.length, isFocused, isSubmitting])
+
+  // Handle error message display based on suggestions and validation
+  useEffect(() => {
+    // If error prop is provided, use it (external error takes precedence)
+    if (error) {
+      setErrorMessage(error)
+      onErrorChange?.(error)
+      return
+    }
+
+    const validation = validateGologLevel(inputValue)
+    const hasSuggestions = suggestions.length > 0
+
+    // Only show error if not focused, or if focused but no suggestions available
+    const shouldShowError = !isFocused || (isFocused && !hasSuggestions)
+
+    if (!validation.isValid && shouldShowError) {
+      setErrorMessage(validation.errorMessage)
+      onErrorChange?.(validation.errorMessage)
+    } else if (validation.isValid) {
+      setErrorMessage('')
+      onErrorChange?.('')
+    }
+  }, [inputValue, suggestions.length, validateGologLevel, isFocused, error, onErrorChange])
+
+  return (
+    <div className={`relative ${className}`}>
+      <input
+        ref={inputRef}
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        disabled={disabled}
+        placeholder={placeholder}
+        className={`input-reset ba pa2 bg-light-gray f6 w-100 code ${errorMessage ? 'b--red-muted focus-outline-red' : 'b--black-20'}`}
+        style={{
+          overflowX: 'auto',
+          whiteSpace: 'nowrap'
+        }}
+      />
+
+      {isOpen && suggestions.length > 0 && (
+        <div
+          ref={dropdownRef}
+          className="absolute top-100 left-0 right-0 bg-white ba b--black-20 shadow-2 z-999 max-h5 overflow-auto"
+          style={{ maxHeight: '200px' }}
+        >
+          {suggestions.map((suggestion, index) => (
+            <div
+              key={`${suggestion.text}-${index}`}
+              className={`z-999 pa2 pointer hover-bg-light-gray ${index === selectedIndex ? 'bg-light-blue' : ''}`}
+              onClick={() => handleSuggestionSelect(suggestion)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  handleSuggestionSelect(suggestion)
+                }
+              }}
+              role="button"
+              tabIndex={0}
+            >
+              <span className="f6">
+                {suggestion.text}
+              </span>
+              <span className="ml2 f7 gray">
+                {suggestion.type === 'global' && t('logs.autocomplete.globalLevel')}
+                {suggestion.type === 'subsystem' && t('logs.autocomplete.subsystem')}
+                {suggestion.type === 'level' && t('logs.autocomplete.level')}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/diagnostics/logs-screen/golog-level-section.tsx b/src/diagnostics/logs-screen/golog-level-section.tsx
new file mode 100644
index 000000000..c3ffc4d4b
--- /dev/null
+++ b/src/diagnostics/logs-screen/golog-level-section.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useCallback, useEffect, useMemo } from 'react'
+import { useTranslation, Trans } from 'react-i18next'
+import Box from '../../components/box/Box.js'
+import Button from '../../components/button/button'
+import { GologLevelAutocomplete } from './golog-level-autocomplete'
+import { useLogs } from '../../contexts/logs/index'
+import { parseGologLevelString, subsystemsToActualLevels, calculateGologLevelString } from '../../lib/golog-level-utils'
+
+const GologLevelSection: React.FC = () => {
+  const { t } = useTranslation('diagnostics')
+  const { gologLevelString, subsystems, setLogLevelsBatch } = useLogs()
+
+  // Component state for editing
+  const [value, setValue] = useState('')
+  const [isValid, setIsValid] = useState(true)
+  const [errorMessage, setErrorMessage] = useState('')
+
+  // Initialize value when gologLevelString is available
+  useEffect(() => {
+    if (gologLevelString !== null) {
+      setValue(gologLevelString)
+    }
+  }, [gologLevelString])
+
+  const onSubmit = useCallback(async (event?: React.FormEvent) => {
+    event?.preventDefault()
+
+    if (!isValid || value === gologLevelString) {
+      return
+    }
+
+    try {
+      // Parse the GOLOG_LOG_LEVEL string using the utility function
+      const levelsToSet = parseGologLevelString(value)
+
+      // Validate the parsed levels
+      for (const { subsystem, level } of levelsToSet) {
+        if (level.trim() === '') {
+          setErrorMessage(t('logs.gologLevel.invalidSubsystemLevel', { subsystem }))
+          return
+        }
+      }
+
+      await setLogLevelsBatch(levelsToSet)
+    } catch (error: unknown) {
+      console.error('Failed to save GOLOG_LOG_LEVEL:', error)
+      setIsValid(false)
+    }
+  }, [isValid, value, gologLevelString, setLogLevelsBatch, t])
+
+  const onCancel = useCallback((event: React.FormEvent) => {
+    event.preventDefault()
+    if (gologLevelString !== null) {
+      setValue(gologLevelString)
+      setIsValid(true)
+    }
+  }, [gologLevelString])
+
+  const onDefault = useCallback((event: React.FormEvent) => {
+    event.preventDefault()
+    setValue('error')
+    setIsValid(true)
+  }, [])
+
+  const canSubmit = useMemo(() => {
+    return isValid && errorMessage === '' && calculateGologLevelString(subsystemsToActualLevels(parseGologLevelString(value))) !== gologLevelString
+  }, [isValid, value, gologLevelString, errorMessage])
+
+  if (gologLevelString === null) {
+    return (
+      <Box className='mb3 pa4-l pa2'>
+        <div className='mb2'>
+          <h3 className='montserrat fw4 charcoal ma0 f5 mb2'>{t('logs.gologLevel.title')}</h3>
+          <p className='charcoal f6 mb3'>{t('logs.gologLevel.placeholder')}</p>
+          <div className='input-reset ba b--black-20 pa2 bg-light-gray f6 charcoal'>
+            {t('logs.entries.loading')}...
+          </div>
+        </div>
+      </Box>
+    )
+  }
+
+  return (
+    <Box className='mb3 pa4-l pa2'>
+      <div className='mb2'>
+        <h3 className='ttu tracked f6 fw4 teal mt0 mb3'>{t('logs.gologLevel.title')}</h3>
+        <p>
+          <Trans i18nKey='logs.gologLevel.description' t={t}>
+            <a className='link blue' href='https://github.com/ipfs/kubo/blob/master/docs/environment-variables.md#golog_log_level' target='_blank' rel='noopener noreferrer'> </a>
+          </Trans>
+        </p>
+        <form onSubmit={onSubmit}>
+          <GologLevelAutocomplete
+            value={value}
+            onChange={setValue}
+            subsystems={subsystems}
+            placeholder={t('logs.gologLevel.placeholder')}
+            className='w-100 lh-copy monospace f5 mb2 charcoal input-reset'
+            onSubmit={onSubmit}
+            onValidityChange={setIsValid}
+            onErrorChange={setErrorMessage}
+          />
+          {errorMessage && (
+            <div className='f6 red pa2 mb2'>
+              {errorMessage}
+            </div>
+          )}
+          <div className='flex flex-column flex-row-ns justify-end'>
+            <Button
+              id='golog-level-default-button'
+              minWidth={100}
+              bg='bg-charcoal'
+              className='tc'
+              onClick={onDefault}
+              disabled={value === 'error'}>
+              {t('app:actions.default')}
+            </Button>
+            <Button
+              id='golog-level-cancel-button'
+              minWidth={100}
+              bg='bg-charcoal'
+              className='mt2 mt0-ns ml0 ml2-ns tc'
+              disabled={value === gologLevelString}
+              onClick={onCancel}>
+              {t('app:actions.cancel')}
+            </Button>
+            <Button
+              id='golog-level-submit-button'
+              minWidth={100}
+              className='mt2 mt0-ns ml0 ml2-ns tc'
+              onClick={onSubmit}
+              disabled={!canSubmit}>
+              {t('app:actions.apply')}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </Box>
+  )
+}
+
+export default GologLevelSection
diff --git a/src/diagnostics/logs-screen/index.ts b/src/diagnostics/logs-screen/index.ts
new file mode 100644
index 000000000..43b4fb3ab
--- /dev/null
+++ b/src/diagnostics/logs-screen/index.ts
@@ -0,0 +1 @@
+export { StreamingStatus } from './streaming-status'
diff --git a/src/diagnostics/logs-screen/log-screen-footer.css b/src/diagnostics/logs-screen/log-screen-footer.css
new file mode 100644
index 000000000..840e91f61
--- /dev/null
+++ b/src/diagnostics/logs-screen/log-screen-footer.css
@@ -0,0 +1,30 @@
+.statsBar {
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding-top: .5em;
+}
+
+@media (max-width: 640px) {
+  .statsBar {
+    flex-direction: column;
+    align-items: flex-start !important;
+    gap: 0.5rem;
+  }
+  
+  .statsBar > div:first-child {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .statsBar > div:last-child {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+@media (max-width: 480px) {
+  .statsBar > div:first-child > span {
+    margin-right: 0.5rem !important;
+  }
+}
diff --git a/src/diagnostics/logs-screen/log-screen-footer.tsx b/src/diagnostics/logs-screen/log-screen-footer.tsx
new file mode 100644
index 000000000..5356546dc
--- /dev/null
+++ b/src/diagnostics/logs-screen/log-screen-footer.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { humanSize } from '../../lib/files.js'
+import { useLogs } from '../../contexts/logs/logs-context'
+import { StreamingStatus } from './streaming-status'
+import './log-screen-footer.css'
+
+export const LogScreenFooter: React.FC = () => {
+  const { t } = useTranslation('diagnostics')
+  const { bufferConfig, storageStats, entries } = useLogs()
+
+  if (!storageStats) {
+    return null
+  }
+
+  return (
+    <div className='pt0'>
+      <div className='statsBar flex items-center justify-between code'>
+        <div className='flex items-center'>
+          <h4 className='montserrat fw6 charcoal ma0 f7 mr2'>{t('logs.storage.title')}:</h4>
+          <span className='charcoal f7 mr3'>{t('logs.storage.totalEntries')}: {storageStats.totalEntries.toLocaleString()}</span>
+          {/* @ts-expect-error - humanSize is not typed properly */}
+          <span className='charcoal f7 mr3'>{t('logs.storage.estimatedSize')}: {humanSize(storageStats.estimatedSize)}</span>
+          <span className='charcoal f7'>{t('logs.storage.memoryBuffer')}: {entries.length}/{bufferConfig.memory}</span>
+        </div>
+        <StreamingStatus />
+      </div>
+    </div>
+  )
+}
diff --git a/src/diagnostics/logs-screen/log-viewer.css b/src/diagnostics/logs-screen/log-viewer.css
new file mode 100644
index 000000000..fac521456
--- /dev/null
+++ b/src/diagnostics/logs-screen/log-viewer.css
@@ -0,0 +1,114 @@
+/* Pulsating animation for Play button initial state */
+@keyframes pulsate {
+  0% {
+    transform: scale(1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(1.15);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.9;
+  }
+}
+
+.pulsate {
+  animation: pulsate 2s ease-in-out infinite;
+}
+
+/* Breathing animation for pause icon */
+@keyframes breathe {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+
+.breathe {
+  animation: breathe 3s ease-in-out infinite;
+}
+
+/* parent grid */
+.logs{
+  display: grid;
+  grid-template-columns: max-content max-content max-content minmax(0,1fr);
+  column-gap: .75rem;
+  row-gap: .5rem;
+  align-items: start;
+  font-variant-numeric: tabular-nums;
+
+  /* custom variables */
+  --icon-zone: 1.5rem; /* use to buffer text from appearing under icons */
+  --light-gray: #eee; /* Tachyons light-gray */
+}
+
+
+/* each row spans the parent and reuses its columns */
+.logs > .row{
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  align-items: start;
+  margin: 0;
+  padding: 0;
+  padding-left: 1rem;
+  padding-right: var(--icon-zone); /* prevents text under icons */
+}
+
+/* full-row hover/focus */
+.logs > .row:hover,
+.logs > .row:focus-within{
+  background-color: var(--light-gray);
+}
+
+.logs .lvl, .logs .sub { white-space: nowrap; }
+.logs .msg{
+  white-space: pre-wrap;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+@media (max-width: 640px){
+  /* 2 columns: timestamp | flexible */
+  .logs{
+    grid-template-columns: max-content minmax(0,1fr);
+    column-gap: .5rem;
+  }
+
+  .logs > .row{
+    grid-template-columns: subgrid;  /* reuse the 2 cols */
+    padding-left: .5rem;              /* a bit tighter on mobile */
+    padding-right: .5rem;             /* no icon zone needed on tiny screens */
+  }
+
+  /* timestamp (first span) in col 1, row 1 */
+  .logs > .row > :first-child{
+    grid-column: 1;
+  }
+
+  /* level in col 2, row 1 */
+  .logs > .row > .lvl{
+    grid-column: 2;
+    justify-self: start;
+  }
+
+  /* subsystem on its own full-width line */
+  .logs > .row > .sub{
+    grid-column: 1 / -1;
+    white-space: normal;     /* allow wrapping on small screens */
+    opacity: .9;             /* optional: slight de-emphasis */
+  }
+
+  /* message full-width below, still wraps aggressively */
+  .logs > .row > .msg{
+    grid-column: 1 / -1;
+  }
+}
diff --git a/src/diagnostics/logs-screen/log-viewer.stories.tsx b/src/diagnostics/logs-screen/log-viewer.stories.tsx
new file mode 100644
index 000000000..8c94fbcd8
--- /dev/null
+++ b/src/diagnostics/logs-screen/log-viewer.stories.tsx
@@ -0,0 +1,240 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { LogViewer } from './log-viewer'
+import { LogsProvider } from '../../contexts/logs'
+import type { LogEntry } from '../../contexts/logs/api'
+import { IdentityProvider } from '../../contexts/identity-context'
+
+const meta: Meta<typeof LogViewer> = {
+  title: 'Diagnostics/Logs/LogViewer',
+  component: LogViewer,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'A log viewer component that displays log entries with streaming capabilities and performance testing.'
+      }
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Mock log entry generator
+const generateMockLogEntry = (index: number, timestamp: Date): LogEntry => {
+  const levels = ['debug', 'info', 'warn', 'error'] as const
+  const subsystems = ['ipfs', 'libp2p', 'bitswap', 'dht', 'repo', 'blockstore'] as const
+
+  const level = levels[index % levels.length]
+  const subsystem = subsystems[index % subsystems.length]
+
+  return {
+    id: index,
+    timestamp: timestamp.toISOString(),
+    level,
+    subsystem,
+    message: `Mock log entry ${index} from ${subsystem} subsystem with ${level} level - this is a longer message to test text wrapping and display performance under load.`
+  }
+}
+
+// Performance test component wrapper
+const LogViewerPerformanceTest: React.FC<{
+  logsPerSecond: number
+  testDuration: number,
+  initialLogCount?: number
+}> = ({ logsPerSecond, testDuration, initialLogCount = 0 }) => {
+  const [logEntries, setLogEntries] = useState<LogEntry[]>([])
+  const [isStreaming, setIsStreaming] = useState(false)
+  const [testStats, setTestStats] = useState({
+    totalLogs: 0,
+    startTime: 0,
+    currentRate: 0,
+    isComplete: false
+  })
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const testStartTimeRef = useRef<number>(0)
+  const logCountRef = useRef(0)
+  const currentRateCountRef = useRef(0)
+
+  const logGenInterval = 100
+
+  useEffect(() => {
+    if (initialLogCount > 0) {
+      setLogEntries(Array.from({ length: initialLogCount }, (_, i) => generateMockLogEntry(i, new Date())))
+    }
+  }, [initialLogCount])
+
+  // Generate logs at specified rate
+  const generateLogs = useCallback(() => {
+    // this is called every <logGenInterval>ms no matter what, we need to figure out how many logs to generate based on the logsPerSecond
+    const logsToGenerate = Math.floor(logsPerSecond / (1000 / logGenInterval))
+    const now = new Date()
+
+    setLogEntries(prev => {
+      const updated = [...prev, ...Array.from({ length: logsToGenerate }, () => generateMockLogEntry(logCountRef.current++, now))]
+      // Keep only last 1000 entries in memory for performance
+      return updated.slice(-1000)
+    })
+    setTestStats(prev => ({
+      ...prev,
+      isComplete: false,
+      totalLogs: logCountRef.current
+    }))
+  }, [logsPerSecond])
+
+  // Start performance test
+  const startTest = useCallback(() => {
+    setIsStreaming(true)
+    setTestStats(prev => ({ ...prev, startTime: Date.now(), isComplete: false }))
+    testStartTimeRef.current = Date.now()
+    currentRateCountRef.current = logCountRef.current
+
+    // Start generating logs at specified rate
+    const interval = setInterval(() => {
+      generateLogs()
+    }, logGenInterval)
+
+    intervalRef.current = interval
+
+    // Stop test after duration
+    setTimeout(() => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+      setIsStreaming(false)
+      setTestStats(prev => ({
+        ...prev,
+        isComplete: true,
+        totalLogs: logCountRef.current
+      }))
+    }, testDuration * 1000)
+  }, [testDuration, generateLogs, logGenInterval])
+
+  // Stop test
+  const stopTest = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current)
+      intervalRef.current = null
+    }
+    setIsStreaming(false)
+  }, [])
+
+  // Update test stats
+  useEffect(() => {
+    if (!isStreaming) return
+
+    const updateStats = () => {
+      const elapsed = (Date.now() - testStartTimeRef.current) / 1000
+      const currentRate = elapsed > 0 ? (logCountRef.current - currentRateCountRef.current) / elapsed : 0
+
+      setTestStats(prev => ({
+        ...prev,
+        currentRate: Math.round(currentRate * 100) / 100
+      }))
+    }
+
+    const statsInterval = setInterval(updateStats, 100)
+    return () => clearInterval(statsInterval)
+  }, [isStreaming])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <div className="w-100">
+      {/* Test Controls */}
+      <div className="mb4 pa3 bg-light-gray br2">
+        <h3 className="mt0 mb3">Performance Test Controls</h3>
+        <div className="flex flex-wrap items-center" style={{ gap: '1rem' }}>
+          <div>
+            <span className="db mb1 f6 fw6">Logs per Second:</span>
+            <span className="f4 fw4">{logsPerSecond}</span>
+          </div>
+          <div>
+            <span className="db mb1 f6 fw6">Test Duration:</span>
+            <span className="f4 fw4">{testDuration}s</span>
+          </div>
+          <div>
+            <span className="db mb1 f6 fw6">Current Rate:</span>
+            <span className="f4 fw4">{testStats.currentRate}/s</span>
+          </div>
+          <div>
+            <span className="db mb1 f6 fw6">Total Logs:</span>
+            <span className="f4 fw4">{testStats.totalLogs}</span>
+          </div>
+        </div>
+
+        {testStats.isComplete && (
+          <div className="mt3 pa2 bg-green white br2">
+            <strong>Test Complete!</strong> Generated {logCountRef.current - currentRateCountRef.current} logs over {testDuration} seconds.
+            Average rate: {Math.round((logCountRef.current - currentRateCountRef.current) / testDuration)} logs/second.
+          </div>
+        )}
+      </div>
+
+      <IdentityProvider>
+        <LogsProvider>
+          <LogViewer
+            logEntries={logEntries}
+            isStreaming={isStreaming}
+            containerRef={containerRef}
+            startStreaming={startTest}
+            stopStreaming={stopTest}
+            clearEntries={() => setLogEntries([])}
+          />
+        </LogsProvider>
+      </IdentityProvider>
+    </div>
+  )
+}
+
+// Default story
+export const Default: Story = {
+  render: () => <LogViewerPerformanceTest logsPerSecond={10} testDuration={10} />
+}
+
+// High volume test story
+export const HighVolumeTest: Story = {
+  render: () => <LogViewerPerformanceTest logsPerSecond={100} testDuration={15} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Test the log viewer with high volume (100 logs/second) to verify performance under load.'
+      }
+    }
+  }
+}
+
+// Stress test story
+export const StressTest: Story = {
+  render: () => <LogViewerPerformanceTest logsPerSecond={500} testDuration={20} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Stress test with very high volume (500 logs/second) to identify performance bottlenecks.'
+      }
+    }
+  }
+}
+
+// any existing logs should load on initial render, and we should be scrolled to the bottom.
+export const LoadExistingLogs: Story = {
+  render: () => <LogViewerPerformanceTest logsPerSecond={20} testDuration={5} initialLogCount={100} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Test the log viewer with no logs to verify that existing logs load on initial render.'
+      }
+    }
+  }
+}
diff --git a/src/diagnostics/logs-screen/log-viewer.tsx b/src/diagnostics/logs-screen/log-viewer.tsx
new file mode 100644
index 000000000..bb395a072
--- /dev/null
+++ b/src/diagnostics/logs-screen/log-viewer.tsx
@@ -0,0 +1,321 @@
+import React, { type CSSProperties, useMemo, useState, useCallback, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import IconTooltip from '../../components/tooltip/icon-tooltip'
+import { GlyphShrink, GlyphExpand, GlyphPlay, GlyphPause, GlyphMoveDown, GlyphSettings, GlyphTrash } from '../../icons/all'
+import { BufferConfigModal } from './buffer-config-modal'
+import { useLogs } from '../../contexts/logs'
+import './log-viewer.css'
+import type { LogEntry as LogEntryType } from '../../contexts/logs/api'
+
+type LogLevelColor = 'gray' | 'blue' | 'orange' | 'red' | 'darkred' | 'black'
+
+const getLevelColor = (level: string): LogLevelColor => {
+  switch (level.toLowerCase()) {
+    case 'debug': return 'gray'
+    case 'info': return 'blue'
+    case 'warn': return 'orange'
+    case 'error': return 'red'
+    case 'dpanic':
+    case 'panic':
+    case 'fatal': return 'darkred'
+    default: return 'black'
+  }
+}
+
+const formatTimestamp = (timestamp: string): string => {
+  try {
+    return new Date(timestamp).toLocaleTimeString()
+  } catch {
+    return timestamp
+  }
+}
+
+interface TopControlsProps {
+  isExpanded: boolean
+  setIsExpanded: (isExpanded: boolean) => void
+  isStreaming: boolean
+  startStreaming: () => void
+  stopStreaming: () => void
+  onSettingsClick: () => void
+  isAtBottom: boolean
+  scrollToBottom: () => void
+  hasEntries: boolean
+  hasInteracted: boolean
+  setHasInteracted: (value: boolean) => void
+}
+
+const TopControls: React.FC<TopControlsProps> = ({ isExpanded, setIsExpanded, isStreaming, startStreaming, stopStreaming, onSettingsClick, isAtBottom, scrollToBottom, hasEntries, hasInteracted, setHasInteracted }) => {
+  const { t } = useTranslation('diagnostics')
+  const [showInitialTooltip, setShowInitialTooltip] = useState(true)
+
+  // Hide initial tooltip after 6 seconds or when user has interacted
+  useEffect(() => {
+    if (showInitialTooltip && !hasInteracted) {
+      const timer = setTimeout(() => {
+        setShowInitialTooltip(false)
+      }, 6000)
+      return () => clearTimeout(timer)
+    }
+    return undefined
+  }, [showInitialTooltip, hasInteracted])
+
+  // Hide tooltip once streaming starts or user has interacted
+  useEffect(() => {
+    if (isStreaming || hasInteracted) {
+      setShowInitialTooltip(false)
+    }
+  }, [isStreaming, hasInteracted])
+
+  // Reset tooltip when interaction state is reset
+  useEffect(() => {
+    if (!hasInteracted) {
+      setShowInitialTooltip(true)
+    }
+  }, [hasInteracted])
+
+  const SizeControl = useMemo(() => {
+    if (!isExpanded) {
+      return GlyphExpand
+    }
+    return GlyphShrink
+  }, [isExpanded])
+
+  const PlayPauseControl = useMemo(() => {
+    if (isStreaming) {
+      return GlyphPause
+    }
+    return GlyphPlay
+  }, [isStreaming])
+
+  const toggleStreaming = useCallback(() => {
+    setHasInteracted(true)
+    if (isStreaming) {
+      stopStreaming()
+    } else {
+      startStreaming()
+    }
+  }, [isStreaming, startStreaming, stopStreaming, setHasInteracted])
+
+  // because the settings icon is from ipfs-css and the others are from lucide, we need to adjust a little bit to make it look the same
+  const settingsIconStyle = { transformBox: 'fill-box', transformOrigin: 'center', transform: 'scale(1.50)' } as const
+
+  return (
+    <div className='absolute top-1 right-0 mr3 z-10 flex flex-column flex-start items-end'>
+      <IconTooltip key={isExpanded ? 'expanded' : 'collapsed'} text={isExpanded ? t('logs.entries.tooltipCollapse') : t('logs.entries.tooltipExpand')} position='left'>
+        <SizeControl width={32} height={32} className='pointer gray o-70 hover-o-100 hover-black mb1' onClick={() => setIsExpanded(!isExpanded)} />
+      </IconTooltip>
+      <IconTooltip text={t('logs.entries.tooltipSettings')} position='left'>
+        <GlyphSettings width={32} height={32} className='pointer gray o-70 hover-o-100 hover-black mb1 fill-current-color' style={settingsIconStyle} onClick={onSettingsClick} />
+      </IconTooltip>
+      <IconTooltip
+        text={isStreaming ? t('logs.entries.tooltipPause') : t('logs.entries.tooltipPlay')}
+        position='left'
+        forceShow={showInitialTooltip && !isStreaming && !hasEntries}
+      >
+        <PlayPauseControl
+          width={32}
+          height={32}
+          className={`pointer mb1 ${!isStreaming && !hasEntries && !hasInteracted ? 'navy-muted pulsate' : isStreaming ? 'gray breathe hover-black' : 'gray o-70 hover-o-100 hover-black'}`}
+          onClick={toggleStreaming}
+        />
+      </IconTooltip>
+      {!isAtBottom && (
+        <IconTooltip text={t('logs.entries.tooltipGoToLatest')} position='left'>
+          <GlyphMoveDown width={32} height={32} className='pointer gray o-70 hover-o-100 hover-black' onClick={scrollToBottom} />
+        </IconTooltip>
+      )}
+    </div>
+  )
+}
+
+interface BottomControlsProps {
+  clearEntries: () => void
+  onClear: () => void
+}
+
+const BottomControls: React.FC<BottomControlsProps> = ({ clearEntries, onClear }) => {
+  const { t } = useTranslation('diagnostics')
+
+  const handleClear = useCallback(() => {
+    clearEntries()
+    onClear()
+  }, [clearEntries, onClear])
+
+  return <div className='absolute bottom-1 right-0 mr3 z-10'>
+    <IconTooltip text={t('logs.storage.trashTooltip')} position='left'>
+      <GlyphTrash width={32} height={32} className='pointer gray o-70 hover-o-100 hover-black mb1 fill-current-color' onClick={handleClear} />
+    </IconTooltip>
+  </div>
+}
+
+export interface LogViewerProps {
+  logEntries: LogEntryType[]
+  isStreaming: boolean
+  containerRef: React.RefObject<HTMLDivElement>
+  style?: React.CSSProperties
+  startStreaming: () => void
+  stopStreaming: () => void
+  clearEntries: () => void
+}
+
+interface LogEntryProps {
+  logEntry: LogEntryType
+}
+const ROW_GAP = '0.3rem' as const
+const LogEntry = React.memo<LogEntryProps>(({ logEntry }) => {
+  const { timestamp, level, subsystem, message, id } = logEntry
+  return (
+    <div key={`${timestamp}-${subsystem}-${id}`} className="lh-copy ml2 pb3 mb3 row">
+      <span className="gray f7" title={timestamp}>
+        {formatTimestamp(timestamp)}
+      </span>
+      <span className="fw6 f7 lvl" style={{ color: getLevelColor(level), whiteSpace: 'nowrap' }}>
+        {level.toUpperCase()}
+      </span>
+      <span className="blue f7 sub" style={{ whiteSpace: 'nowrap' }} title={subsystem}>
+        {subsystem}
+      </span>
+      <span className="f7 pre-wrap mr4 lh-copy msg" style={{ lineHeight: `calc(1.5em + ${ROW_GAP})` }}>
+        {message}
+      </span>
+    </div>
+  )
+}, ({ logEntry: { id: prevId } }, { logEntry: { id: nextId } }) => {
+  // optimize object equality check, if id is different, the entire object is different.
+  // see https://react.dev/reference/react/memo#my-component-rerenders-when-a-prop-is-an-object-or-array
+  return prevId === nextId
+})
+
+interface LogEntryListProps {
+  logEntries: LogEntryType[]
+  isStreaming: boolean
+}
+
+const LogEntryList: React.FC<LogEntryListProps> = ({ logEntries, isStreaming }) => {
+  const { t } = useTranslation('diagnostics')
+
+  if (logEntries.length === 0) {
+    return (
+      <div className='mv4 tc charcoal-muted f5'>
+        <p className='ma0 sans-serif'>{t(isStreaming ? 'logs.entries.noEntriesStreaming' : 'logs.entries.noEntries')}</p>
+      </div>
+    )
+  }
+
+  return <div className='logs pv2' style={{ rowGap: `calc(1.5 * ${ROW_GAP})` }}>
+    {logEntries.map((logEntry) => (
+      <LogEntry key={logEntry.id} logEntry={logEntry} />
+    ))}
+  </div>
+}
+
+export const LogViewer: React.FC<LogViewerProps> = ({ logEntries, isStreaming, containerRef, style, startStreaming, stopStreaming, clearEntries }) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [isAtBottom, setIsAtBottom] = useState(true)
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false)
+  const [hasInteracted, setHasInteracted] = useState(false)
+  const lastLogEntryId = useMemo(() => logEntries[logEntries.length - 1]?.id, [logEntries])
+
+  const { bufferConfig: logBufferConfig, updateBufferConfig: doUpdateLogBufferConfig } = useLogs()
+
+  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    const container = e.currentTarget
+    const scrollTop = container.scrollTop
+    const scrollHeight = container.scrollHeight
+    const clientHeight = container.clientHeight
+
+    const isNearBottom = scrollTop + clientHeight >= scrollHeight - 50
+    setIsAtBottom(isNearBottom)
+  }, [])
+
+  const scrollToBottom = useCallback(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight
+    }
+  }, [containerRef])
+
+  useEffect(() => {
+    if (isAtBottom) {
+      scrollToBottom()
+    }
+    // only scroll to bottom if the last log entry id has changed, and we were previously at the bottom
+    // this will lock the view to the bottom of the logs list while the logs are streaming, unless the user scrolls up
+  }, [isAtBottom, scrollToBottom, lastLogEntryId])
+
+  const handleClearReset = useCallback(() => {
+    if (isStreaming) {
+      stopStreaming()
+    }
+    setHasInteracted(false)
+  }, [isStreaming, stopStreaming])
+
+  const styles = useMemo<CSSProperties>(() => {
+    const baseStyles = {
+      ...style
+    }
+    if (isExpanded) {
+      return {
+        height: '90vh',
+        width: '90vw',
+        position: 'fixed',
+        inset: '5%',
+        zIndex: 1000,
+        display: 'flex',
+        flexDirection: 'column',
+        ...baseStyles
+      }
+    }
+    return {
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      ...baseStyles
+    }
+  }, [style, isExpanded])
+
+  return (
+    <>
+      {isExpanded && (
+        // Backdrop overlay with blur effect to focus attention on the expanded log viewer
+        // Clicking or pressing Enter/Space on this backdrop will collapse the viewer
+        <div
+          className='fixed top-0 left-0 right-0 bottom-0'
+          style={{
+            backdropFilter: 'blur(4px)',
+            WebkitBackdropFilter: 'blur(4px)',
+            backgroundColor: 'rgba(255, 255, 255, 0.7)',
+            zIndex: 999
+          }}
+          role="button"
+          tabIndex={0}
+          aria-label="Click to collapse log viewer"
+          onClick={() => setIsExpanded(false)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              setIsExpanded(false)
+            }
+          }}
+        />
+      )}
+      <div className='relative code' style={styles}>
+        <TopControls isExpanded={isExpanded} setIsExpanded={setIsExpanded} isStreaming={isStreaming} startStreaming={startStreaming} stopStreaming={stopStreaming} onSettingsClick={() => setIsSettingsModalOpen(true)} isAtBottom={isAtBottom} scrollToBottom={scrollToBottom} hasEntries={logEntries.length > 0} hasInteracted={hasInteracted} setHasInteracted={setHasInteracted} />
+        <div
+          ref={containerRef}
+          className='ba b--black-20 bg-near-white f6 overflow-auto overflow-x-hidden flex-auto'
+          style={{ minHeight: 0 }}
+          onScroll={handleScroll}
+        >
+          <LogEntryList logEntries={logEntries} isStreaming={isStreaming} />
+          <BottomControls clearEntries={clearEntries} onClear={handleClearReset} />
+        </div>
+
+        <BufferConfigModal
+          isOpen={isSettingsModalOpen}
+          onClose={() => setIsSettingsModalOpen(false)}
+          currentConfig={logBufferConfig}
+          onApply={doUpdateLogBufferConfig}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/src/diagnostics/logs-screen/log-warning-modal.tsx b/src/diagnostics/logs-screen/log-warning-modal.tsx
new file mode 100644
index 000000000..99bf93e48
--- /dev/null
+++ b/src/diagnostics/logs-screen/log-warning-modal.tsx
@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Modal, ModalBody, ModalActions } from '../../components/modal/modal'
+import Overlay from '../../components/overlay/overlay'
+import Button from '../../components/button/button.js'
+
+export type WarningModalTypes = 'debug-global' | 'high-rate' | 'auto-disable' | null
+
+interface LogWarningModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+  warningType: WarningModalTypes
+  currentRate?: number
+}
+
+const LogWarningModal: React.FC<LogWarningModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  warningType,
+  currentRate = 0
+}) => {
+  const { t } = useTranslation('diagnostics')
+
+  const content = useMemo(() => {
+    switch (warningType) {
+      case 'debug-global':
+        return {
+          title: t('logs.warnings.debugGlobal.title'),
+          message: t('logs.warnings.debugGlobal.message'),
+          details: [
+            t('logs.warnings.debugGlobal.detail1'),
+            t('logs.warnings.debugGlobal.detail2'),
+            t('logs.warnings.debugGlobal.detail3')
+          ],
+          confirmText: t('logs.warnings.debugGlobal.confirm'),
+          suggestions: [
+            t('logs.warnings.debugGlobal.suggestion1'),
+            t('logs.warnings.debugGlobal.suggestion2'),
+            t('logs.warnings.debugGlobal.suggestion3')
+          ]
+        }
+      case 'high-rate':
+        return {
+          title: t('logs.warnings.highRate.title'),
+          message: t('logs.warnings.highRate.message', { rate: currentRate.toFixed(1) }),
+          details: [
+            t('logs.warnings.highRate.detail1'),
+            t('logs.warnings.highRate.detail2')
+          ],
+          confirmText: t('logs.warnings.highRate.confirm'),
+          suggestions: [
+            t('logs.warnings.highRate.suggestion1'),
+            t('logs.warnings.highRate.suggestion2')
+          ]
+        }
+      case 'auto-disable':
+        return {
+          title: t('logs.warnings.autoDisable.title'),
+          message: t('logs.warnings.autoDisable.message', { rate: currentRate.toFixed(1) }),
+          details: [
+            t('logs.warnings.autoDisable.detail1'),
+            t('logs.warnings.autoDisable.detail2')
+          ],
+          confirmText: t('logs.warnings.autoDisable.confirm'),
+          suggestions: [
+            t('logs.warnings.autoDisable.suggestion1'),
+            t('logs.warnings.autoDisable.suggestion2')
+          ]
+        }
+      default:
+        return {
+          title: 'Warning',
+          message: 'Unknown warning type',
+          details: [],
+          confirmText: 'OK',
+          suggestions: []
+        }
+    }
+  }, [warningType, t, currentRate])
+
+  if (warningType == null) return null
+
+  return (
+    // @ts-expect-error - Overlay is not typed
+    <Overlay show={isOpen} onLeave={onClose}>
+      <Modal onCancel={onClose} className="outline-0">
+        <ModalBody>
+          <div className="flex items-center mb3">
+            <span className="mr2 f3">⚠️</span>
+            <h3 className="montserrat fw4 charcoal ma0 f4">
+              {content.title}
+            </h3>
+          </div>
+
+          <p className="charcoal lh-copy mb3">{content.message}</p>
+
+          {content.details.length > 0 && (
+            <div className="mb3">
+              <h4 className="montserrat fw6 charcoal ma0 f5 mb2">
+                {t('logs.warnings.potentialIssues')}
+              </h4>
+              <ul className="ma0 pl3">
+                {content.details.map((detail, index) => (
+                  <li key={index} className="charcoal lh-copy mb1">
+                    {detail}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {content.suggestions.length > 0 && (
+            <div className="mb3">
+              <h4 className="montserrat fw6 charcoal ma0 f5 mb2">
+                {t('logs.warnings.recommendations')}
+              </h4>
+              <ul className="ma0 pl3">
+                {content.suggestions.map((suggestion, index) => (
+                  <li key={index} className="charcoal lh-copy mb1">
+                    {suggestion}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </ModalBody>
+
+        <ModalActions>
+          <Button
+            className="ma2 tc bg-gray white"
+            onClick={onClose}
+          >
+            {t('logs.warnings.cancel')}
+          </Button>
+          <Button
+            className="ma2 tc bg-red white"
+            onClick={() => {
+              onConfirm()
+              onClose()
+            }}
+          >
+            {content.confirmText}
+          </Button>
+        </ModalActions>
+      </Modal>
+    </Overlay>
+  )
+}
+
+export default LogWarningModal
diff --git a/src/diagnostics/logs-screen/logs-screen.css b/src/diagnostics/logs-screen/logs-screen.css
new file mode 100644
index 000000000..9c0267d40
--- /dev/null
+++ b/src/diagnostics/logs-screen/logs-screen.css
@@ -0,0 +1,14 @@
+.logs-screen-container {
+  display: flex;
+  flex-direction: column;
+  /* Mobile/tablet: account for top navbar + header + tabs */
+  height: calc(100vh - 400px);
+}
+
+/* Large screens (60em = 960px) - matches navbar breakpoint */
+@media only screen and (min-width: 60em) {
+  .logs-screen-container {
+    /* Desktop: account for left sidebar layout */
+    height: calc(100vh - 220px);
+  }
+}
\ No newline at end of file
diff --git a/src/diagnostics/logs-screen/logs-screen.tsx b/src/diagnostics/logs-screen/logs-screen.tsx
new file mode 100644
index 000000000..6a735ba31
--- /dev/null
+++ b/src/diagnostics/logs-screen/logs-screen.tsx
@@ -0,0 +1,98 @@
+import React, { useEffect, useState, useRef } from 'react'
+import Box from '../../components/box/Box.js'
+import LogWarningModal from './log-warning-modal'
+import { useLogs } from '../../contexts/logs/index'
+import GologLevelSection from './golog-level-section'
+import UnsupportedKuboVersion from '../../components/unsupported-kubo-version/unsupported-kubo-version'
+import type { WarningModalTypes } from './log-warning-modal'
+import { LogViewer } from './log-viewer'
+import { LogScreenFooter } from './log-screen-footer'
+import './logs-screen.css'
+
+const LogsScreen = () => {
+  const {
+    entries: safeLogEntries,
+    isStreaming: isLogStreaming,
+    bufferConfig: logBufferConfig,
+    rateState: logRateState,
+    setLogLevelsBatch: doSetLogLevelsBatch,
+    startStreaming: doStartLogStreaming,
+    stopStreaming: doStopLogStreaming,
+    clearEntries: doClearEntries,
+    showWarning: doShowWarning,
+    isAgentVersionSupported
+  } = useLogs()
+
+  // Component state
+  const [warningModal, setWarningModal] = useState<{ isOpen: boolean, type: WarningModalTypes }>({ isOpen: false, type: null })
+  const [pendingLevelChange, setPendingLevelChange] = useState<{ subsystem: string, level: string } | null>(null)
+  const logContainerRef = useRef<HTMLDivElement>(null)
+
+  // Monitor for warnings and auto-disable
+  useEffect(() => {
+    if (logRateState.currentRate > logBufferConfig.warnThreshold &&
+        !logRateState.hasWarned &&
+        !logRateState.autoDisabled &&
+        isLogStreaming) {
+      setWarningModal({ isOpen: true, type: 'high-rate' })
+      // Mark that warning has been shown to prevent it from showing again
+      doShowWarning()
+    }
+  }, [logRateState, logBufferConfig, isLogStreaming, doShowWarning])
+
+  useEffect(() => {
+    if (logRateState.autoDisabled) {
+      setWarningModal({ isOpen: true, type: 'auto-disable' })
+    }
+  }, [logRateState.autoDisabled])
+
+  const confirmLevelChange = async () => {
+    if (pendingLevelChange) {
+      try {
+        await doSetLogLevelsBatch([{
+          subsystem: pendingLevelChange.subsystem,
+          level: pendingLevelChange.level
+        }])
+        setPendingLevelChange(null)
+      } catch (error) {
+        console.error('Failed to set log level:', error)
+      }
+    }
+  }
+
+  // Show unsupported version message if log levels are not supported
+  if (!isAgentVersionSupported) {
+    return (
+      <UnsupportedKuboVersion />
+    )
+  }
+
+  return (
+    <div className='logs-screen-container'>
+      <GologLevelSection />
+
+      <Box className='' style={{ flex: '1 1 auto', minHeight: '15rem', display: 'flex', flexDirection: 'column' }}>
+        <LogViewer
+          logEntries={safeLogEntries}
+          isStreaming={isLogStreaming}
+          containerRef={logContainerRef}
+          startStreaming={doStartLogStreaming}
+          stopStreaming={doStopLogStreaming}
+          clearEntries={doClearEntries}
+        />
+      </Box>
+
+      <LogScreenFooter />
+
+      <LogWarningModal
+        isOpen={warningModal.isOpen}
+        warningType={warningModal.type}
+        currentRate={logRateState.currentRate}
+        onClose={() => setWarningModal({ isOpen: false, type: null })}
+        onConfirm={confirmLevelChange}
+      />
+    </div>
+  )
+}
+
+export default LogsScreen
diff --git a/src/diagnostics/logs-screen/streaming-status.tsx b/src/diagnostics/logs-screen/streaming-status.tsx
new file mode 100644
index 000000000..ab032e1c6
--- /dev/null
+++ b/src/diagnostics/logs-screen/streaming-status.tsx
@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLogs } from '../../contexts/logs/logs-context'
+
+export const StreamingStatus: React.FC<{ className?: string }> = ({ className }) => {
+  const { t } = useTranslation('diagnostics')
+  const { isStreaming, rateState, bufferConfig } = useLogs()
+
+  const streamingStatus = useMemo(() => {
+    if (!isStreaming) {
+      return t('logs.streaming.statusStopped')
+    }
+
+    return t('logs.streaming.statusActive')
+  }, [isStreaming, t])
+
+  const streamingColorClass = useMemo(() => {
+    if (!isStreaming) {
+      return 'red-muted'
+    }
+    return 'green'
+  }, [isStreaming])
+
+  const highRateWarning = useMemo(() => {
+    if (rateState.currentRate > bufferConfig.warnThreshold) {
+      return <span className='yellow f7'>{t('logs.streaming.highRate')}</span>
+    }
+    return null
+  }, [rateState.currentRate, bufferConfig.warnThreshold, t])
+
+  const autoDisabledWarning = useMemo(() => {
+    if (rateState.autoDisabled) {
+      return <span className='ml2 red f7'>{t('logs.streaming.autoDisabled')}</span>
+    }
+    return null
+  }, [rateState.autoDisabled, t])
+
+  return (
+    <div className={`flex items-center lh-solid ${className}`}>
+      <span className={`${streamingColorClass} f7 mr2`}>{streamingStatus}</span>
+      <span className='charcoal f7'>
+        {t('logs.streaming.rate', { rate: rateState.currentRate.toFixed(1) })}
+      </span>
+      {highRateWarning}
+      {autoDisabledWarning}
+    </div>
+  )
+}
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index ede996fd1..d6639a2e4 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -29,7 +29,7 @@ import Checkbox from '../components/checkbox/Checkbox.js'
 const FilesPage = ({
   doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doAddCarFile, doFilesBulkCidImport, doFilesAddPath, doUpdateHash,
   doFilesUpdateSorting, doFilesNavigateTo, doFilesMove, doSetCliOptions, doFetchRemotePins, remotePins, pendingPins, failedPins,
-  ipfsProvider, ipfsConnected, doFilesMakeDir, doFilesShareLink, doFilesCopyCidProvide, doFilesDelete, doSetPinning, onRemotePinClick, doPublishIpnsKey,
+  ipfsProvider, ipfsConnected, doFilesMakeDir, doFilesShareLink, doFilesCidProvide, doFilesDelete, doSetPinning, onRemotePinClick, doPublishIpnsKey,
   files, filesPathInfo, pinningServices, toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, cliOptions, t
 }) => {
   const { doExploreUserProvidedPath } = useExplore()
@@ -119,6 +119,10 @@ const FilesPage = ({
     doAddCarFile(files.path, file, name)
   }
   const onInspect = (cid) => doUpdateHash(`/explore/${cid}`)
+  const onCheckRetrieval = (cid) => {
+    doFilesCidProvide(cid) // Trigger background provide
+    doUpdateHash(`/diagnostics/retrieval-check/${cid}`)
+  }
   const showModal = (modal, files = null) => setModals({ show: modal, files })
   const hideModal = () => setModals({})
   /**
@@ -298,11 +302,12 @@ const FilesPage = ({
         onRemove={() => showModal(DELETE, [contextMenu.file])}
         onRename={() => showModal(RENAME, [contextMenu.file])}
         onInspect={() => onInspect(contextMenu.file.cid)}
+        onCheckRetrieval={() => onCheckRetrieval(contextMenu.file.cid)}
         onDownload={() => onDownload([contextMenu.file])}
         onDownloadCar={() => onDownloadCar([contextMenu.file])}
         onPinning={() => showModal(PINNING, [contextMenu.file])}
         onPublish={() => showModal(PUBLISH, [contextMenu.file])}
-        onCopyCid={(cid) => doFilesCopyCidProvide(cid)}
+        onCopyCid={(cid) => doFilesCidProvide(cid)}
         isCliTutorModeEnabled={isCliTutorModeEnabled}
         onCliTutorMode={() => showModal(CLI_TUTOR_MODE, [contextMenu.file])}
         doSetCliOptions={doSetCliOptions}
@@ -428,7 +433,7 @@ export default connect(
   'doFilesMove',
   'doFilesMakeDir',
   'doFilesShareLink',
-  'doFilesCopyCidProvide',
+  'doFilesCidProvide',
   'doFilesDelete',
   'doFilesAddPath',
   'doAddCarFile',
diff --git a/src/files/context-menu/ContextMenu.js b/src/files/context-menu/ContextMenu.js
index 7aafd6295..eafadab00 100644
--- a/src/files/context-menu/ContextMenu.js
+++ b/src/files/context-menu/ContextMenu.js
@@ -8,6 +8,7 @@ import StrokeShare from '../../icons/StrokeShare.js'
 import StrokeSpeaker from '../../icons/StrokeSpeaker.js'
 import StrokePencil from '../../icons/StrokePencil.js'
 import StrokeIpld from '../../icons/StrokeIpld.js'
+import StrokeLab from '../../icons/StrokeLab.js'
 import StrokeTrash from '../../icons/StrokeTrash.js'
 import StrokeDownload from '../../icons/StrokeDownload.js'
 import StrokeData from '../../icons/StrokeData.js'
@@ -45,7 +46,7 @@ class ContextMenu extends React.Component {
 
   render () {
     const {
-      t, onRename, onRemove, onDownload, onInspect, onShare, onDownloadCar, onPublish, onCopyCid,
+      t, onRename, onRemove, onDownload, onInspect, onCheckRetrieval, onShare, onDownloadCar, onPublish, onCopyCid,
       translateX, translateY, className, isMfs, isUnknown, isCliTutorModeEnabled
     } = this.props
     return (
@@ -122,6 +123,12 @@ class ContextMenu extends React.Component {
               {t('actions.publishWithIpns')}
             </Option>
           }
+          { onCheckRetrieval &&
+            <Option onClick={this.wrap('onCheckRetrieval')}>
+              <StrokeLab className='w2 mr2 fill-aqua' />
+              {t('app:actions.checkRetrieval')}
+            </Option>
+          }
         </DropdownMenu>
       </Dropdown>
     )
@@ -143,6 +150,7 @@ ContextMenu.propTypes = {
   onDownload: PropTypes.func,
   onDownloadCar: PropTypes.func,
   onInspect: PropTypes.func,
+  onCheckRetrieval: PropTypes.func,
   onShare: PropTypes.func,
   onPublish: PropTypes.func,
   onCopyCid: PropTypes.func,
diff --git a/src/i18n.js b/src/i18n.js
index ba3febf73..8f36e31d4 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -37,7 +37,7 @@ i18n
         }
       ]
     },
-    ns: ['app', 'welcome', 'status', 'files', 'explore', 'peers', 'settings', 'notify'],
+    ns: ['app', 'welcome', 'status', 'files', 'explore', 'peers', 'settings', 'diagnostics', 'notify'],
     defaultNS: 'app',
     fallbackNS: 'app',
     fallbackLng: {
diff --git a/src/icons/all.tsx b/src/icons/all.tsx
index 353268da7..ece075584 100644
--- a/src/icons/all.tsx
+++ b/src/icons/all.tsx
@@ -5,3 +5,4 @@
 export { default as GlyphPinCloud } from './hocs/GlyphPinCloud.js'
 export * from './stroke-icons.js'
 export * from './index.js'
+export * from './lucide/all.js'
diff --git a/src/icons/lucide/GlyphExpand.tsx b/src/icons/lucide/GlyphExpand.tsx
new file mode 100644
index 000000000..d87d81f8f
--- /dev/null
+++ b/src/icons/lucide/GlyphExpand.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import type { SVGProps } from 'react'
+const SvgGlyphExpand = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width={24}
+        height={24}
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        className="glyph_expand_svg__lucide glyph_expand_svg__lucide-expand-icon glyph_expand_svg__lucide-expand"
+        {...props}
+    >
+        <path d="m15 15 6 6M15 9l6-6M21 16v5h-5M21 8V3h-5M3 16v5h5M3 21l6-6M3 8V3h5M9 9 3 3" />
+    </svg>
+)
+export default SvgGlyphExpand
diff --git a/src/icons/lucide/GlyphMoveDown.tsx b/src/icons/lucide/GlyphMoveDown.tsx
new file mode 100644
index 000000000..10f48cd5c
--- /dev/null
+++ b/src/icons/lucide/GlyphMoveDown.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import type { SVGProps } from 'react'
+const SvgGlyphMoveDown = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width={24}
+        height={24}
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        className="glyph_movdeDown_svg__lucide glyph_movdeDown_svg__lucide-move-down-icon glyph_movdeDown_svg__lucide-move-down"
+        {...props}
+    >
+        <path d="m8 18 4 4 4-4M12 2v20" />
+    </svg>
+)
+export default SvgGlyphMoveDown
diff --git a/src/icons/lucide/GlyphPause.tsx b/src/icons/lucide/GlyphPause.tsx
new file mode 100644
index 000000000..f8bdbdb1a
--- /dev/null
+++ b/src/icons/lucide/GlyphPause.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import type { SVGProps } from 'react'
+const SvgGlyphPause = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width={24}
+        height={24}
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        className="glyph_pause_svg__lucide glyph_pause_svg__lucide-pause-icon glyph_pause_svg__lucide-pause"
+        {...props}
+    >
+        <rect width={5} height={18} x={14} y={3} rx={1} />
+        <rect width={5} height={18} x={5} y={3} rx={1} />
+    </svg>
+)
+export default SvgGlyphPause
diff --git a/src/icons/lucide/GlyphPlay.tsx b/src/icons/lucide/GlyphPlay.tsx
new file mode 100644
index 000000000..525726ba3
--- /dev/null
+++ b/src/icons/lucide/GlyphPlay.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import type { SVGProps } from 'react'
+const SvgGlyphPlay = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width={24}
+        height={24}
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        className="glyph_play_svg__lucide glyph_play_svg__lucide-play-icon glyph_play_svg__lucide-play"
+        {...props}
+    >
+        <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />
+    </svg>
+)
+export default SvgGlyphPlay
diff --git a/src/icons/lucide/GlyphShrink.tsx b/src/icons/lucide/GlyphShrink.tsx
new file mode 100644
index 000000000..0c488cccc
--- /dev/null
+++ b/src/icons/lucide/GlyphShrink.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import type { SVGProps } from 'react'
+const SvgGlyphShrink = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width={24}
+        height={24}
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        className="glyph_shrink_svg__lucide glyph_shrink_svg__lucide-shrink-icon glyph_shrink_svg__lucide-shrink"
+        {...props}
+    >
+        <path d="m15 15 6 6m-6-6v4.8m0-4.8h4.8M9 19.8V15m0 0H4.2M9 15l-6 6M15 4.2V9m0 0h4.8M15 9l6-6M9 4.2V9m0 0H4.2M9 9 3 3" />
+    </svg>
+)
+export default SvgGlyphShrink
diff --git a/src/icons/lucide/GlyphStop.tsx b/src/icons/lucide/GlyphStop.tsx
new file mode 100644
index 000000000..58bada88e
--- /dev/null
+++ b/src/icons/lucide/GlyphStop.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import type { SVGProps } from 'react'
+const SvgGlyphStop = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={24}
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        className="glyph_stop_svg__lucide glyph_stop_svg__lucide-square-icon glyph_stop_svg__lucide-square"
+        {...props}
+    >
+        <rect width={18} height={18} x={3} y={3} rx={2} />
+    </svg>
+)
+export default SvgGlyphStop
diff --git a/src/icons/lucide/all.ts b/src/icons/lucide/all.ts
new file mode 100644
index 000000000..70f4dc2c3
--- /dev/null
+++ b/src/icons/lucide/all.ts
@@ -0,0 +1,22 @@
+/**
+ * The icons in this folder are generated from the lucide icon set.
+ *
+ * Steps:
+ * 1. visit https://lucide.dev/icons/
+ * 2. search for the icon you want to use
+ * 3. click on the icon
+ * 4. click on the "Copy SVG" button
+ * 5. paste the SVG code into a file at src/icons/lucide/glyph_<IconName>.svg
+ * 6. run `npx svgr --ext tsx --typescript src/icons/lucide -d src/icons/lucide` to generate the icons
+ * 7. run `npx eslint --fix src/icons/lucide/**` to fix the linting errors
+ * 8. delete the svg files.
+ *
+ * Note: some icons may not scale properly: make sure you set the viewBox to "0 0 width height"
+ *
+ * Why not import `lucide` directly?
+ *
+ * We don't want to import the entire `lucide` library, as it's too large and contains icons we don't need. To prevent any
+ * tree-shaking issues, we only import the icons we need.
+ *
+ */
+export * from './index'
diff --git a/src/icons/lucide/index.tsx b/src/icons/lucide/index.tsx
new file mode 100644
index 000000000..f9981a919
--- /dev/null
+++ b/src/icons/lucide/index.tsx
@@ -0,0 +1,6 @@
+export { default as GlyphExpand } from './GlyphExpand'
+export { default as GlyphPause } from './GlyphPause'
+export { default as GlyphPlay } from './GlyphPlay'
+export { default as GlyphShrink } from './GlyphShrink'
+export { default as GlyphStop } from './GlyphStop'
+export { default as GlyphMoveDown } from './GlyphMoveDown'
diff --git a/src/index.css b/src/index.css
index 87793d8c3..0af210bc3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -38,3 +38,14 @@ html, body, #root {
   font-size: 14px !important;
   font-family: 'Montserrat';
 }
+
+/* =========================
+    Custom tachyons classes
+   ========================= */
+.hover-o-100:hover, .hover-o-100:focus {
+  opacity: 1;
+}
+
+.hover-o-90:hover, .hover-o-90:focus {
+  opacity: 0.9;
+}
diff --git a/src/lib/compare-version-strings.test.ts b/src/lib/compare-version-strings.test.ts
new file mode 100644
index 000000000..2d1c977a5
--- /dev/null
+++ b/src/lib/compare-version-strings.test.ts
@@ -0,0 +1,141 @@
+import { cmpVersionStrings } from './compare-version-strings'
+import { jest, describe, it, expect, beforeEach, afterEach } from '@jest/globals'
+import { Spied } from 'jest-mock'
+
+describe('cmpVersionStrings', () => {
+  let consoleWarnSpy: Spied<typeof console.warn>
+
+  beforeEach(() => {
+    consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    consoleWarnSpy.mockRestore()
+  })
+
+  describe('numeric version comparisons', () => {
+    it('compares identical versions as equal', () => {
+      expect(cmpVersionStrings('1.0.0', '1.0.0')).toBe(0)
+      expect(cmpVersionStrings('2.1.3', '2.1.3')).toBe(0)
+    })
+
+    it('compares version order correctly', () => {
+      expect(cmpVersionStrings('1.0.0', '1.0.1')).toBe(-1)
+      expect(cmpVersionStrings('1.0.1', '1.0.0')).toBe(1)
+      expect(cmpVersionStrings('1.0.0', '1.1.0')).toBe(-1)
+      expect(cmpVersionStrings('1.1.0', '1.0.0')).toBe(1)
+    })
+  })
+
+  describe('version segments', () => {
+    it('treats missing segments as equal', () => {
+      expect(cmpVersionStrings('1.0', '1.0.0')).toBe(0)
+      expect(cmpVersionStrings('1', '1.0.0')).toBe(0)
+    })
+
+    it('handles single segment versions', () => {
+      expect(cmpVersionStrings('1', '2')).toBe(-1)
+      expect(cmpVersionStrings('2', '1')).toBe(1)
+      expect(cmpVersionStrings('1', '1')).toBe(0)
+    })
+  })
+
+  describe('pre-release identifiers', () => {
+    it('strips pre-release identifiers and treats as equal', () => {
+      expect(cmpVersionStrings('1.0.0-alpha', '1.0.0')).toBe(0)
+      expect(cmpVersionStrings('1.0.0-beta', '1.0.0-alpha')).toBe(0)
+      expect(cmpVersionStrings('1.0.0-rc1', '1.0.0')).toBe(0)
+    })
+
+    it('compares different base versions correctly', () => {
+      expect(cmpVersionStrings('1.0.0-alpha', '1.0.1-beta')).toBe(-1)
+      expect(cmpVersionStrings('1.0.1-beta', '1.0.0-alpha')).toBe(1)
+    })
+  })
+
+  describe('build metadata', () => {
+    it('ignores build metadata in comparison', () => {
+      expect(cmpVersionStrings('1.0.0+build1', '1.0.0+build2')).toBe(0)
+      expect(cmpVersionStrings('1.0.0+build1', '1.0.0')).toBe(0)
+    })
+  })
+
+  describe('non-numeric segments', () => {
+    it('compares non-numeric segments lexicographically in last position', () => {
+      expect(cmpVersionStrings('1.0.0a', '1.0.0b')).toBe(-1)
+      expect(cmpVersionStrings('1.0.0b', '1.0.0a')).toBe(1)
+      expect(cmpVersionStrings('1.0.0a', '1.0.0a')).toBe(0)
+    })
+
+    it('warns for non-numeric segments in non-last positions', () => {
+      expect(cmpVersionStrings('1.a.0', '1.b.0')).toBe(-1)
+      expect(cmpVersionStrings('1.b.0', '1.a.0')).toBe(0)
+
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'Non-numeric segments in version strings:',
+        'a',
+        'b'
+      )
+    })
+  })
+
+  describe('edge cases', () => {
+    it('handles zero values', () => {
+      expect(cmpVersionStrings('0.0.0', '0.0.0')).toBe(0)
+      expect(cmpVersionStrings('0.0.0', '0.0.1')).toBe(-1)
+      expect(cmpVersionStrings('0.0.1', '0.0.0')).toBe(1)
+    })
+
+    it('handles large numbers', () => {
+      expect(cmpVersionStrings('999.999.999', '1000.0.0')).toBe(-1)
+      expect(cmpVersionStrings('1000.0.0', '999.999.999')).toBe(1)
+    })
+
+    it('handles empty strings', () => {
+      expect(cmpVersionStrings('', '1.0.0')).toBe(-1)
+      expect(cmpVersionStrings('1.0.0', '')).toBe(1)
+      expect(cmpVersionStrings('', '')).toBe(0)
+    })
+
+    it('handles leading zeros', () => {
+      expect(cmpVersionStrings('01.02.03', '1.2.3')).toBe(0)
+      expect(cmpVersionStrings('01.02.03', '1.2.4')).toBe(-1)
+    })
+
+    it('handles very long version strings', () => {
+      const longVersion = '1.2.3.4.5.6.7.8.9.10'
+      const longerVersion = '1.2.3.4.5.6.7.8.9.10.11'
+
+      expect(cmpVersionStrings(longVersion, longerVersion)).toBe(-1)
+      expect(cmpVersionStrings(longerVersion, longVersion)).toBe(1)
+    })
+
+    it('handles mixed pre-release and build metadata', () => {
+      expect(cmpVersionStrings('1.0.0-alpha+build1', '1.0.0+build2')).toBe(0)
+      expect(cmpVersionStrings('1.0.0-alpha+build1', '1.0.0-beta+build2')).toBe(0)
+    })
+  })
+
+  describe('real-world examples', () => {
+    it('handles IPFS version comparisons', () => {
+      expect(cmpVersionStrings('0.20.0', '0.21.0')).toBe(-1)
+      expect(cmpVersionStrings('0.21.0', '0.20.0')).toBe(1)
+      expect(cmpVersionStrings('0.21.0-rc1', '0.21.0')).toBe(0)
+    })
+
+    it('handles semantic versioning patterns', () => {
+      expect(cmpVersionStrings('1.0.0', '1.0.1')).toBe(-1)
+      expect(cmpVersionStrings('1.1.0', '1.0.9')).toBe(1)
+      expect(cmpVersionStrings('2.0.0', '1.9.9')).toBe(1)
+    })
+  })
+
+  describe('error handling', () => {
+    it('handles malformed version strings gracefully', () => {
+      expect(cmpVersionStrings('1.a.2', '1.b.2')).toBe(-1)
+      expect(cmpVersionStrings('1.b.2', '1.a.2')).toBe(0)
+      expect(cmpVersionStrings('1.0.a', '1.0.b')).toBe(-1)
+      expect(cmpVersionStrings('1.0.b', '1.0.a')).toBe(1)
+    })
+  })
+})
diff --git a/src/lib/compare-version-strings.ts b/src/lib/compare-version-strings.ts
new file mode 100644
index 000000000..848ff2ffb
--- /dev/null
+++ b/src/lib/compare-version-strings.ts
@@ -0,0 +1,52 @@
+/**
+ * Compare two "x.y.z" strings numerically. Returns -1, 0, 1.
+ *
+ * Implements simplified semantic versioning comparison where:
+ * - Numeric segments are compared numerically
+ * - Pre-release identifiers (alpha, beta, rc, etc.) are stripped and ignored
+ * - Build metadata is ignored in comparison
+ * - Non-numeric segments in non-last positions trigger warnings
+ *
+ * Returns:
+ * * -1 if a < b (or error comparing)
+ * * 0 if a === b
+ * * 1 if a > b
+ */
+export function cmpVersionStrings (a: string, b: string): -1 | 0 | 1 {
+  // Remove build metadata (everything after +) for comparison
+  const cleanA = a.split('+')[0]
+  const cleanB = b.split('+')[0]
+
+  // Remove pre-release identifiers (everything after -) for comparison
+  const versionA = cleanA.split('-')[0]
+  const versionB = cleanB.split('-')[0]
+
+  const pa = versionA.split('.')
+  const pb = versionB.split('.')
+
+  const len = Math.max(pa.length, pb.length)
+  for (let i = 0; i < len; i++) {
+    const segA = pa[i] ?? ''
+    const segB = pb[i] ?? ''
+
+    const numA = Number(segA)
+    const numB = Number(segB)
+
+    const isNumA = !Number.isNaN(numA)
+    const isNumB = !Number.isNaN(numB)
+
+    if (isNumA && isNumB) {
+      if (numA < numB) return -1
+      if (numA > numB) return 1
+    } else if (i === len - 1) {
+      // Last segment: compare lexicographically for non-numeric segments
+      if (segA < segB) return -1
+      if (segA > segB) return 1
+    } else {
+      console.warn('Non-numeric segments in version strings:', segA, segB)
+      // fallback: lexicographic compare on raw string
+      if (segA < segB) return -1
+    }
+  }
+  return 0
+}
diff --git a/src/lib/files.js b/src/lib/files.js
index 4fe6d92a5..489f7b880 100644
--- a/src/lib/files.js
+++ b/src/lib/files.js
@@ -170,7 +170,9 @@ export async function debouncedProvide (cid, ipfs) {
     const provideEvents = ipfs.routing.provide(cid, { recursive: false })
 
     for await (const event of provideEvents) {
-      console.debug(`[PROVIDE] ${cidStr}:`, event)
+      if (event.messageName === 'PUT_VALUE') {
+        console.debug(`[PROVIDE] ${cidStr}:`, event)
+      }
     }
 
     // Clean up old cache entries
diff --git a/src/lib/golog-level-utils.test.ts b/src/lib/golog-level-utils.test.ts
new file mode 100644
index 000000000..977ac8328
--- /dev/null
+++ b/src/lib/golog-level-utils.test.ts
@@ -0,0 +1,554 @@
+// @ts-check
+import { describe, it, expect } from '@jest/globals'
+import {
+  LOG_LEVELS,
+  parseGologLevelString,
+  validateGologLevelString,
+  subsystemsToActualLevels,
+  calculateGologLevelString,
+  parseInputContext,
+  isValidLogLevel,
+  getAutocompleteSuggestions
+} from './golog-level-utils'
+
+describe('golog-level-utils', () => {
+  describe('LOG_LEVELS constant', () => {
+    it('should contain all expected log levels', () => {
+      expect(LOG_LEVELS).toEqual(['debug', 'info', 'warn', 'error', 'dpanic', 'panic', 'fatal'])
+    })
+
+    it('should be an array', () => {
+      expect(LOG_LEVELS).toBeInstanceOf(Array)
+    })
+  })
+
+  describe('parseGologLevelString', () => {
+    describe('happy path cases', () => {
+      it('should parse empty string', () => {
+        const result = parseGologLevelString('')
+        expect(result).toEqual([])
+      })
+
+      it('should parse whitespace-only string', () => {
+        const result = parseGologLevelString('   ')
+        expect(result).toEqual([])
+      })
+
+      it('should parse global level only', () => {
+        const result = parseGologLevelString('debug')
+        expect(result).toEqual([{ subsystem: '*', level: 'debug' }])
+      })
+
+      it('should parse global level with whitespace', () => {
+        const result = parseGologLevelString('  info  ')
+        expect(result).toEqual([{ subsystem: '*', level: 'info' }])
+      })
+
+      it('should parse subsystem with level', () => {
+        const result = parseGologLevelString('ipfs=debug')
+        expect(result).toEqual([{ subsystem: 'ipfs', level: 'debug' }])
+      })
+
+      it('should parse subsystem with level and whitespace', () => {
+        const result = parseGologLevelString('  ipfs  =  debug  ')
+        expect(result).toEqual([{ subsystem: 'ipfs', level: 'debug' }])
+      })
+
+      it('should parse multiple subsystems', () => {
+        const result = parseGologLevelString('ipfs=debug,http=warn,libp2p=error')
+        expect(result).toEqual([
+          { subsystem: 'ipfs', level: 'debug' },
+          { subsystem: 'http', level: 'warn' },
+          { subsystem: 'libp2p', level: 'error' }
+        ])
+      })
+
+      it('should parse global level with subsystems', () => {
+        const result = parseGologLevelString('info,ipfs=debug,http=warn')
+        expect(result).toEqual([
+          { subsystem: 'ipfs', level: 'debug' },
+          { subsystem: 'http', level: 'warn' },
+          { subsystem: '*', level: 'info' }
+        ])
+      })
+
+      it('should parse complex mixed configuration', () => {
+        const result = parseGologLevelString('warn,ipfs=debug,http=error,libp2p=panic')
+        expect(result).toEqual([
+          { subsystem: 'ipfs', level: 'debug' },
+          { subsystem: 'http', level: 'error' },
+          { subsystem: 'libp2p', level: 'panic' },
+          { subsystem: '*', level: 'warn' }
+        ])
+      })
+
+      it('should handle empty subsystem level gracefully', () => {
+        const result = parseGologLevelString('ipfs=')
+        expect(result).toEqual([])
+      })
+
+      it('should handle whitespace-only subsystem level', () => {
+        const result = parseGologLevelString('ipfs=   ')
+        expect(result).toEqual([])
+      })
+    })
+
+    describe('edge cases', () => {
+      it('should handle multiple commas', () => {
+        const result = parseGologLevelString('debug,,,info')
+        expect(result).toEqual([{ subsystem: '*', level: 'debug' }])
+      })
+
+      it('should handle leading/trailing commas', () => {
+        const result = parseGologLevelString(',debug,')
+        expect(result).toEqual([{ subsystem: '*', level: 'debug' }])
+      })
+
+      it('should handle multiple equals signs', () => {
+        const result = parseGologLevelString('ipfs=debug=extra')
+        expect(result).toEqual([{ subsystem: 'ipfs', level: 'debug=extra' }])
+      })
+    })
+  })
+
+  describe('validateGologLevelString', () => {
+    const validSubsystems = ['ipfs', 'http', 'libp2p', 'dht', 'pubsub']
+
+    describe('happy path cases', () => {
+      it('should validate empty string', () => {
+        const result = validateGologLevelString('', validSubsystems)
+        expect(result).toEqual({
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidInput',
+          errorParams: {}
+        })
+      })
+
+      it('should validate valid global level', () => {
+        const result = validateGologLevelString('debug', validSubsystems)
+        expect(result).toEqual({
+          isValid: true,
+          errorKey: '',
+          errorParams: {}
+        })
+      })
+
+      it('should validate valid subsystem level', () => {
+        const result = validateGologLevelString('ipfs=debug', validSubsystems)
+        expect(result).toEqual({
+          isValid: true,
+          errorKey: '',
+          errorParams: {}
+        })
+      })
+
+      it('should validate multiple valid subsystems', () => {
+        const result = validateGologLevelString('ipfs=debug,http=warn', validSubsystems)
+        expect(result).toEqual({
+          isValid: true,
+          errorKey: '',
+          errorParams: {}
+        })
+      })
+
+      it('should validate global level with subsystems', () => {
+        const result = validateGologLevelString('info,ipfs=debug,http=warn', validSubsystems)
+        expect(result).toEqual({
+          isValid: true,
+          errorKey: '',
+          errorParams: {}
+        })
+      })
+
+      it('should validate all log levels', () => {
+        LOG_LEVELS.forEach(level => {
+          const result = validateGologLevelString(`ipfs=${level}`, validSubsystems)
+          expect(result.isValid).toBe(true)
+        })
+      })
+    })
+
+    describe('error cases', () => {
+      it('should reject invalid subsystem', () => {
+        const result = validateGologLevelString('invalid=debug', validSubsystems)
+        expect(result).toEqual({
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidSubsystem',
+          errorParams: { subsystem: 'invalid', subsystems: 'ipfs, http, libp2p, dht, pubsub' }
+        })
+      })
+
+      it('should reject invalid log level', () => {
+        const result = validateGologLevelString('ipfs=invalid', validSubsystems)
+        expect(result).toEqual({
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidLevel',
+          errorParams: { level: 'invalid' }
+        })
+      })
+
+      it('should reject invalid global level', () => {
+        const result = validateGologLevelString('invalid', validSubsystems)
+        expect(result).toEqual({
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidLevel',
+          errorParams: { level: 'invalid' }
+        })
+      })
+
+      it('should reject subsystem without level', () => {
+        const result = validateGologLevelString('ipfs=', validSubsystems)
+        expect(result).toEqual({
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidSubsystemLevel',
+          errorParams: { subsystem: 'ipfs', subsystems: 'ipfs, http, libp2p, dht, pubsub' }
+        })
+      })
+
+      it('should reject valid subsystem without equals', () => {
+        const result = validateGologLevelString('info,ipfs', validSubsystems)
+        expect(result).toEqual({
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidSubsystemLevel',
+          errorParams: { subsystem: 'ipfs', subsystems: 'ipfs, http, libp2p, dht, pubsub' }
+        })
+      })
+
+      it('should reject multiple global levels', () => {
+        const result = validateGologLevelString('debug,info', validSubsystems)
+        expect(result).toEqual({
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidSubsystem',
+          errorParams: { subsystem: 'info', subsystems: 'ipfs, http, libp2p, dht, pubsub' }
+        })
+      })
+
+      it('should reject invalid subsystem after global level', () => {
+        const result = validateGologLevelString('debug,invalid', validSubsystems)
+        expect(result).toEqual({
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidSubsystem',
+          errorParams: { subsystem: 'invalid', subsystems: 'ipfs, http, libp2p, dht, pubsub' }
+        })
+      })
+    })
+  })
+
+  describe('subsystemsToActualLevels', () => {
+    describe('happy path cases', () => {
+      it('should convert global level only', () => {
+        const subsystems = [{ subsystem: '*', level: 'debug' }]
+        const result = subsystemsToActualLevels(subsystems)
+        expect(result).toEqual({ '(default)': 'debug' })
+      })
+
+      it('should convert global level with different subsystem levels', () => {
+        const subsystems = [
+          { subsystem: '*', level: 'info' },
+          { subsystem: 'ipfs', level: 'debug' },
+          { subsystem: 'http', level: 'error' }
+        ]
+        const result = subsystemsToActualLevels(subsystems)
+        expect(result).toEqual({
+          '(default)': 'info',
+          ipfs: 'debug',
+          http: 'error'
+        })
+      })
+
+      it('should not include subsystems with same level as global', () => {
+        const subsystems = [
+          { subsystem: '*', level: 'info' },
+          { subsystem: 'ipfs', level: 'info' },
+          { subsystem: 'http', level: 'debug' }
+        ]
+        const result = subsystemsToActualLevels(subsystems)
+        expect(result).toEqual({
+          '(default)': 'info',
+          http: 'debug'
+        })
+      })
+
+      it('should handle (default) subsystem', () => {
+        const subsystems = [
+          { subsystem: '(default)', level: 'warn' },
+          { subsystem: 'ipfs', level: 'debug' }
+        ]
+        const result = subsystemsToActualLevels(subsystems)
+        expect(result).toEqual({
+          '(default)': 'warn',
+          ipfs: 'debug'
+        })
+      })
+
+      it('should use info as default when no global level', () => {
+        const subsystems = [
+          { subsystem: 'ipfs', level: 'debug' },
+          { subsystem: 'http', level: 'error' }
+        ]
+        const result = subsystemsToActualLevels(subsystems)
+        expect(result).toEqual({
+          '(default)': 'info',
+          ipfs: 'debug',
+          http: 'error'
+        })
+      })
+    })
+
+    describe('edge cases', () => {
+      it('should handle empty array', () => {
+        const result = subsystemsToActualLevels([])
+        expect(result).toEqual({ '(default)': 'info' })
+      })
+
+      it('should handle multiple global levels (use first)', () => {
+        const subsystems = [
+          { subsystem: '*', level: 'debug' },
+          { subsystem: '(default)', level: 'info' }
+        ]
+        const result = subsystemsToActualLevels(subsystems)
+        expect(result).toEqual({ '(default)': 'debug' })
+      })
+    })
+  })
+
+  describe('calculateGologLevelString', () => {
+    describe('happy path cases', () => {
+      it('should calculate from global level only', () => {
+        const actualLevels = { '(default)': 'debug' }
+        const result = calculateGologLevelString(actualLevels)
+        expect(result).toBe('debug')
+      })
+
+      it('should calculate from global level with subsystems', () => {
+        const actualLevels = {
+          '(default)': 'info',
+          ipfs: 'debug',
+          http: 'error'
+        }
+        const result = calculateGologLevelString(actualLevels)
+        expect(result).toBe('info,ipfs=debug,http=error')
+      })
+
+      it('should exclude subsystems with same level as global', () => {
+        const actualLevels = {
+          '(default)': 'info',
+          ipfs: 'info',
+          http: 'debug'
+        }
+        const result = calculateGologLevelString(actualLevels)
+        expect(result).toBe('info,http=debug')
+      })
+
+      it('should handle complex configuration', () => {
+        const actualLevels = {
+          '(default)': 'warn',
+          ipfs: 'debug',
+          http: 'error',
+          libp2p: 'panic',
+          dht: 'warn' // Same as global, should be excluded
+        }
+        const result = calculateGologLevelString(actualLevels)
+        expect(result).toBe('warn,ipfs=debug,http=error,libp2p=panic')
+      })
+    })
+
+    describe('edge cases', () => {
+      it('should return null for empty object', () => {
+        const result = calculateGologLevelString({})
+        expect(result).toBeNull()
+      })
+
+      it('should handle only global level', () => {
+        const actualLevels = { '(default)': 'info' }
+        const result = calculateGologLevelString(actualLevels)
+        expect(result).toBe('info')
+      })
+    })
+  })
+
+  describe('parseInputContext', () => {
+    describe('happy path cases', () => {
+      it('should parse cursor at start of empty input', () => {
+        const result = parseInputContext('', 0)
+        expect(result).toEqual({
+          currentPartIndex: 0,
+          currentPartStart: 0,
+          currentPart: '',
+          beforeCursor: '',
+          afterCursor: '',
+          isInSubsystemPart: false,
+          isComplete: false,
+          isAtEndOfCompletePart: false
+        })
+      })
+
+      it('should parse cursor in global level', () => {
+        const result = parseInputContext('debug', 2)
+        expect(result).toEqual({
+          currentPartIndex: 0,
+          currentPartStart: 0,
+          currentPart: 'debug',
+          beforeCursor: 'de',
+          afterCursor: 'bug',
+          isInSubsystemPart: false,
+          isComplete: true,
+          isAtEndOfCompletePart: false
+        })
+      })
+
+      it('should parse cursor at end of complete global level', () => {
+        const result = parseInputContext('debug', 5)
+        expect(result).toEqual({
+          currentPartIndex: 0,
+          currentPartStart: 0,
+          currentPart: 'debug',
+          beforeCursor: 'debug',
+          afterCursor: '',
+          isInSubsystemPart: false,
+          isComplete: true,
+          isAtEndOfCompletePart: true
+        })
+      })
+
+      it('should parse cursor in subsystem part', () => {
+        const result = parseInputContext('ipfs=debug', 6)
+        expect(result).toEqual({
+          currentPartIndex: 0,
+          currentPartStart: 0,
+          currentPart: 'ipfs=debug',
+          beforeCursor: 'ipfs=d',
+          afterCursor: 'ebug',
+          isInSubsystemPart: true,
+          isComplete: true,
+          isAtEndOfCompletePart: false
+        })
+      })
+
+      it('should parse cursor in second part', () => {
+        const result = parseInputContext('debug,ipfs=info', 8)
+        expect(result).toEqual({
+          currentPartIndex: 1,
+          currentPartStart: 6,
+          currentPart: 'ipfs=info',
+          beforeCursor: 'debug,ip',
+          afterCursor: 'fs=info',
+          isInSubsystemPart: false,
+          isComplete: true,
+          isAtEndOfCompletePart: false
+        })
+      })
+
+      it('should parse incomplete subsystem level', () => {
+        const result = parseInputContext('ipfs=', 5)
+        expect(result).toEqual({
+          currentPartIndex: 0,
+          currentPartStart: 0,
+          currentPart: 'ipfs=',
+          beforeCursor: 'ipfs=',
+          afterCursor: '',
+          isInSubsystemPart: true,
+          isComplete: false,
+          isAtEndOfCompletePart: false
+        })
+      })
+    })
+
+    describe('edge cases', () => {
+      it('should handle cursor beyond input length', () => {
+        const result = parseInputContext('debug', 10)
+        expect(result.currentPartIndex).toBe(0)
+        expect(result.currentPart).toBe('debug')
+      })
+
+      it('should handle multiple commas', () => {
+        const result = parseInputContext('debug,,,info', 8)
+        expect(result.currentPartIndex).toBe(3)
+        expect(result.currentPart).toBe('info')
+      })
+    })
+  })
+
+  describe('isValidLogLevel', () => {
+    describe('happy path cases', () => {
+      it('should validate all valid log levels', () => {
+        LOG_LEVELS.forEach(level => {
+          expect(isValidLogLevel(level)).toBe(true)
+        })
+      })
+
+      it('should validate case-insensitive levels', () => {
+        expect(isValidLogLevel('DEBUG')).toBe(true)
+        expect(isValidLogLevel('Debug')).toBe(true)
+        expect(isValidLogLevel('debug')).toBe(true)
+      })
+    })
+
+    describe('error cases', () => {
+      it('should reject invalid levels', () => {
+        expect(isValidLogLevel('invalid')).toBe(false)
+        expect(isValidLogLevel('')).toBe(false)
+        expect(isValidLogLevel('debugx')).toBe(false)
+        expect(isValidLogLevel('xdebug')).toBe(false)
+      })
+    })
+  })
+
+  describe('getAutocompleteSuggestions', () => {
+    const subsystems = [
+      { name: 'ipfs', level: 'info' },
+      { name: 'http', level: 'warn' },
+      { name: 'libp2p', level: 'debug' },
+      { name: 'dht', level: 'error' }
+    ]
+
+    describe('happy path cases', () => {
+      it('should suggest global levels for first part', () => {
+        const result = getAutocompleteSuggestions('', 0, subsystems)
+        expect(result).toHaveLength(LOG_LEVELS.length + subsystems.length)
+        expect(result.some(s => s.type === 'global' && s.value === 'debug')).toBe(true)
+        expect(result.some(s => s.type === 'subsystem' && s.value === 'ipfs=')).toBe(true)
+      })
+
+      it('should suggest levels for subsystem part', () => {
+        const result = getAutocompleteSuggestions('ipfs=', 5, subsystems)
+        expect(result).toHaveLength(LOG_LEVELS.length)
+        expect(result.every(s => s.type === 'level')).toBe(true)
+        expect(result.some(s => s.value === 'debug')).toBe(true)
+      })
+
+      it('should suggest levels for incomplete subsystem level', () => {
+        const result = getAutocompleteSuggestions('ipfs=de', 7, subsystems)
+        expect(result).toHaveLength(LOG_LEVELS.length)
+        expect(result.every(s => s.type === 'level')).toBe(true)
+      })
+
+      it('should filter subsystems by name', () => {
+        const result = getAutocompleteSuggestions('ip', 2, subsystems)
+        const subsystemSuggestions = result.filter(s => s.type === 'subsystem')
+        expect(subsystemSuggestions).toHaveLength(1)
+        expect(subsystemSuggestions[0].value).toBe('ipfs=')
+      })
+
+      it('should suggest subsystems for second part', () => {
+        const result = getAutocompleteSuggestions('debug,', 6, subsystems)
+        expect(result.some(s => s.type === 'subsystem' && s.value === 'ipfs=')).toBe(true)
+      })
+    })
+
+    describe('edge cases', () => {
+      it('should handle empty subsystems array', () => {
+        const result = getAutocompleteSuggestions('', 0, [])
+        expect(result).toHaveLength(LOG_LEVELS.length)
+        expect(result.every(s => s.type === 'global')).toBe(true)
+      })
+
+      it('should handle case-insensitive subsystem filtering', () => {
+        const result = getAutocompleteSuggestions('IPFS', 4, subsystems)
+        const subsystemSuggestions = result.filter(s => s.type === 'subsystem')
+        expect(subsystemSuggestions).toHaveLength(1)
+        expect(subsystemSuggestions[0].value).toBe('ipfs=')
+      })
+    })
+  })
+})
diff --git a/src/lib/golog-level-utils.ts b/src/lib/golog-level-utils.ts
new file mode 100644
index 000000000..ae8e078ad
--- /dev/null
+++ b/src/lib/golog-level-utils.ts
@@ -0,0 +1,303 @@
+/**
+ * GOLOG_LOG_LEVEL utility functions for parsing, validation, and calculation
+ */
+
+export const LOG_LEVELS = ['debug', 'info', 'warn', 'error', 'dpanic', 'panic', 'fatal'] as const
+export type LogLevel = typeof LOG_LEVELS[number]
+
+export interface LogSubsystem {
+  subsystem: string
+  level: string
+}
+
+export interface ValidationResult {
+  isValid: boolean
+  errorKey: string
+  errorParams: Record<string, any>
+}
+
+export interface InputContext {
+  currentPartIndex: number
+  currentPartStart: number
+  currentPart: string
+  beforeCursor: string
+  afterCursor: string
+  isInSubsystemPart: boolean
+  isComplete: boolean
+  isAtEndOfCompletePart: boolean
+}
+
+/**
+ * Parse a GOLOG_LOG_LEVEL string into an array of subsystem configurations
+ */
+export function parseGologLevelString (input: string): LogSubsystem[] {
+  if (!input.trim()) return []
+
+  const parts = input.split(',')
+  const levelsToSet: LogSubsystem[] = []
+  let globalLevel: string | null = null
+
+  // Parse all parts to find global level and subsystem levels
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i].trim()
+
+    if (part.includes('=')) {
+      // This is a subsystem=level part
+      const equalIndex = part.indexOf('=')
+      const subsystemName = part.substring(0, equalIndex).trim()
+      const level = part.substring(equalIndex + 1).trim()
+      if (level.trim() !== '') {
+        levelsToSet.push({ subsystem: subsystemName, level })
+      }
+    } else if (part && !globalLevel) {
+      // This is a global level (first non-empty part without equals)
+      globalLevel = part
+    }
+  }
+
+  // Add global level if found
+  if (globalLevel) {
+    levelsToSet.push({ subsystem: '*', level: globalLevel })
+  }
+
+  return levelsToSet
+}
+
+/**
+ * Validate a GOLOG_LOG_LEVEL string
+ */
+export function validateGologLevelString (input: string, validSubsystems: string[]): ValidationResult {
+  if (input.trim().length === 0) {
+    return { isValid: false, errorKey: 'logs.autocomplete.invalidInput', errorParams: {} }
+  }
+
+  const parts = input.split(',')
+  let seenGlobalLevel = false
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i].trim()
+    if (part.length === 0) continue
+
+    if (part.includes('=')) {
+      // This is a subsystem=level part
+      const equalIndex = part.indexOf('=')
+      const subsystemName = part.substring(0, equalIndex).trim()
+      const level = part.substring(equalIndex + 1).trim()
+
+      // Check if subsystem exists
+      if (!validSubsystems.includes(subsystemName)) {
+        return {
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidSubsystem',
+          errorParams: { subsystem: subsystemName, subsystems: validSubsystems.join(', ') }
+        }
+      }
+
+      if (level.length === 0) {
+        return {
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidSubsystemLevel',
+          errorParams: { subsystem: subsystemName, subsystems: validSubsystems.join(', ') }
+        }
+      }
+
+      // Check if level is valid
+      if (!isValidLogLevel(level)) {
+        return {
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidLevel',
+          errorParams: { level }
+        }
+      }
+    } else if (!seenGlobalLevel) {
+      // This is a global level
+      if (!isValidLogLevel(part)) {
+        return {
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidLevel',
+          errorParams: { level: part }
+        }
+      }
+      seenGlobalLevel = true
+    } else {
+      // We have already seen a global level, so they can't have another one
+      if (validSubsystems.includes(part)) {
+        // If it is a valid subsystem, then we need to display an error that they need to add an = and a level
+        return {
+          isValid: false,
+          errorKey: 'logs.autocomplete.invalidSubsystemLevel',
+          errorParams: { subsystem: part, subsystems: validSubsystems.join(', ') }
+        }
+      }
+      return {
+        isValid: false,
+        errorKey: 'logs.autocomplete.invalidSubsystem',
+        errorParams: { subsystem: part, subsystems: validSubsystems.join(', ') }
+      }
+    }
+  }
+
+  return { isValid: true, errorKey: '', errorParams: {} }
+}
+
+/**
+ * Convert subsystems array to actual log levels object
+ */
+export function subsystemsToActualLevels (subsystems: LogSubsystem[]): Record<string, string> {
+  const actualLevels: Record<string, string> = {}
+
+  // Find global level
+  const globalLevel = subsystems.find(({ subsystem }) => subsystem === '*' || subsystem === '(default)')
+  const globalLevelValue = globalLevel?.level || 'info'
+  actualLevels['(default)'] = globalLevelValue
+
+  // Add subsystem levels (only those that differ from global level)
+  subsystems.forEach(({ subsystem, level }) => {
+    if (subsystem !== '*' && subsystem !== '(default)' && level !== globalLevelValue) {
+      actualLevels[subsystem] = level
+    }
+  })
+
+  return actualLevels
+}
+
+/**
+ * Calculate GOLOG_LOG_LEVEL string from actual log levels
+ */
+export function calculateGologLevelString (actualLevels: Record<string, string>): string | null {
+  if (Object.keys(actualLevels).length === 0) {
+    return null
+  }
+
+  // Use the actual effective global level, fallback to stored global level
+  const effectiveGlobalLevel = actualLevels['(default)']
+  const parts = [effectiveGlobalLevel]
+
+  // Add subsystems that differ from the effective global level
+  Object.entries(actualLevels).forEach(([subsystem, level]) => {
+    if (subsystem !== '(default)' && level !== effectiveGlobalLevel) {
+      parts.push(`${subsystem}=${level}`)
+    }
+  })
+
+  return parts.join(',')
+}
+
+/**
+ * Parse input context for autocomplete functionality
+ */
+export function parseInputContext (input: string, cursorPos: number): InputContext {
+  const parts = input.split(',')
+  let currentPartIndex = 0
+  let currentPartStart = 0
+
+  // Find which part the cursor is in
+  for (let i = 0; i < parts.length; i++) {
+    const partEnd = currentPartStart + parts[i].length
+    if (cursorPos <= partEnd) {
+      currentPartIndex = i
+      break
+    }
+    currentPartStart = partEnd + 1 // +1 for the comma
+  }
+
+  const currentPart = parts[currentPartIndex] || ''
+  const beforeCursor = input.substring(0, cursorPos)
+  const afterCursor = input.substring(cursorPos)
+
+  // Check if we're in a subsystem=level part
+  const equalIndex = currentPart.indexOf('=')
+  const isInSubsystemPart = equalIndex > 0 && cursorPos > currentPartStart + equalIndex
+
+  // Check if the current part is complete
+  let isComplete = false
+
+  if (equalIndex > 0) {
+    // This is a subsystem=level part
+    const levelAfterEquals = currentPart.substring(equalIndex + 1).trim()
+    const isValidLevel = LOG_LEVELS.some(level => level.toLowerCase() === levelAfterEquals.toLowerCase())
+    isComplete = levelAfterEquals.length > 0 && isValidLevel
+  } else {
+    // This is a global level part
+    const isValidGlobalLevel = LOG_LEVELS.some(level => level.toLowerCase() === currentPart.trim().toLowerCase())
+    isComplete = currentPart.trim().length > 0 && isValidGlobalLevel
+  }
+
+  // Check if cursor is at the end of a complete part (ready for comma)
+  const isAtEndOfCompletePart = isComplete && cursorPos === currentPartStart + currentPart.length
+
+  return {
+    currentPartIndex,
+    currentPartStart,
+    currentPart,
+    beforeCursor,
+    afterCursor,
+    isInSubsystemPart,
+    isComplete,
+    isAtEndOfCompletePart
+  }
+}
+
+/**
+ * Check if a string is a valid log level
+ */
+export function isValidLogLevel (level: string): boolean {
+  return LOG_LEVELS.some(validLevel => validLevel.toLowerCase() === level.toLowerCase())
+}
+
+/**
+ * Get suggestions for autocomplete based on current input context
+ */
+export function getAutocompleteSuggestions (
+  input: string,
+  cursorPos: number,
+  subsystems: Array<{ name: string; level: string }>
+): Array<{ type: 'global' | 'subsystem' | 'level'; value: string; display: string }> {
+  const context = parseInputContext(input, cursorPos)
+  const suggestions: Array<{ type: 'global' | 'subsystem' | 'level'; value: string; display: string }> = []
+
+  if (context.isInSubsystemPart) {
+    // Suggest log levels for subsystem
+    LOG_LEVELS.forEach(level => {
+      suggestions.push({
+        type: 'level',
+        value: level,
+        display: level
+      })
+    })
+  } else if (context.currentPart.includes('=')) {
+    // Incomplete subsystem=level, suggest levels
+    LOG_LEVELS.forEach(level => {
+      suggestions.push({
+        type: 'level',
+        value: level,
+        display: level
+      })
+    })
+  } else {
+    // Suggest global level or subsystems
+    if (context.currentPartIndex === 0) {
+      // First part - suggest global levels
+      LOG_LEVELS.forEach(level => {
+        suggestions.push({
+          type: 'global',
+          value: level,
+          display: level
+        })
+      })
+    }
+
+    // Suggest subsystems
+    subsystems.forEach(({ name }) => {
+      if (name.toLowerCase().includes(context.currentPart.toLowerCase())) {
+        suggestions.push({
+          type: 'subsystem',
+          value: `${name}=`,
+          display: name
+        })
+      }
+    })
+  }
+
+  return suggestions
+}
diff --git a/src/lib/hooks/use-agent-version-minimum.test.tsx b/src/lib/hooks/use-agent-version-minimum.test.tsx
new file mode 100644
index 000000000..ae6be219e
--- /dev/null
+++ b/src/lib/hooks/use-agent-version-minimum.test.tsx
@@ -0,0 +1,456 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { describe, it, expect, jest, beforeEach } from '@jest/globals'
+import '@testing-library/jest-dom'
+import { useAgentVersionMinimum, type UseAgentVersionMinimumProps } from './use-agent-version-minimum'
+import { type AgentVersionObject } from '../parse-agent-version'
+import { useIdentity } from '../../contexts/identity-context'
+import * as compareVersionStringsModule from '../compare-version-strings'
+
+// Mock the identity context
+jest.mock('../../contexts/identity-context', () => ({
+  useIdentity: jest.fn()
+}))
+
+const mockUseIdentity = useIdentity as jest.MockedFunction<typeof useIdentity>
+
+// Spy on cmpVersionStrings to track calls while using real implementation
+const cmpVersionStringsSpy = jest.spyOn(compareVersionStringsModule, 'cmpVersionStrings')
+
+/**
+ * Test component to render the hook
+ * TODO: when we can upgrade react, we can use `renderHook` from `@testing-library/react` instead.
+ */
+const TestComponent: React.FC<{ props: UseAgentVersionMinimumProps }> = ({ props }) => {
+  const result = useAgentVersionMinimum(props)
+  return (
+    <div>
+      <span data-testid="ok">{result.ok.toString()}</span>
+      <span data-testid="parsed">{result.parsed ? JSON.stringify(result.parsed) : 'null'}</span>
+    </div>
+  )
+}
+
+/**
+ * Test data constants for consistent version testing
+ */
+const TEST_VERSIONS = {
+  BELOW_MINIMUM: '0.13.0',
+  EQUAL_TO_MINIMUM: '0.14.0',
+  ABOVE_MINIMUM: '0.15.0',
+  WELL_ABOVE_MINIMUM: '0.16.0',
+  MINIMUM_REQUIRED: '0.14.0'
+} as const
+
+const TEST_AGENTS = {
+  KUBO: 'kubo',
+  GO_IPFS: 'go-ipfs',
+  KUBO_UPPERCASE: 'KUBO'
+} as const
+
+const TEST_FLAVORS = {
+  DESKTOP: 'desktop',
+  CLI: 'cli',
+  DESKTOP_UPPERCASE: 'Desktop',
+  EMPTY: '',
+  COMPLEX: 'desktop-beta_v2.1'
+} as const
+
+describe('useAgentVersionMinimum', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  /**
+   * Test utilities
+   */
+  const createMockAgentVersion = (overrides: Partial<AgentVersionObject> = {}): AgentVersionObject => ({
+    name: TEST_AGENTS.KUBO,
+    version: TEST_VERSIONS.EQUAL_TO_MINIMUM,
+    suffix: TEST_FLAVORS.DESKTOP,
+    url: 'https://github.com/ipfs/kubo',
+    ...overrides
+  })
+
+  const setupMockIdentity = (agentVersion: AgentVersionObject | null): void => {
+    mockUseIdentity.mockReturnValue({
+      agentVersionObject: agentVersion
+      // as any - because we don't care about the rest of the Identity type that `useIdentity` returns
+    } as any)
+  }
+
+  const setupMockIdentitySequence = (...agentVersions: (AgentVersionObject | null)[]): void => {
+    agentVersions.forEach(version => {
+      mockUseIdentity.mockReturnValueOnce({ agentVersionObject: version } as any)
+    })
+  }
+
+  const expectHookResult = (
+    getByTestId: ReturnType<typeof render>['getByTestId'],
+    expectedOk: boolean,
+    expectedParsed: AgentVersionObject | null
+  ): void => {
+    expect(getByTestId('ok')).toHaveTextContent(expectedOk.toString())
+    expect(getByTestId('parsed')).toHaveTextContent(
+      expectedParsed ? JSON.stringify(expectedParsed) : 'null'
+    )
+  }
+
+  const createBasicProps = (overrides: Partial<UseAgentVersionMinimumProps> = {}): UseAgentVersionMinimumProps => ({
+    minimumVersion: TEST_VERSIONS.MINIMUM_REQUIRED,
+    ...overrides
+  })
+
+  describe('version comparison', () => {
+    it('returns true when agent version exceeds minimum', () => {
+      const mockAgentVersion = createMockAgentVersion({ version: TEST_VERSIONS.ABOVE_MINIMUM })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledWith(TEST_VERSIONS.ABOVE_MINIMUM, TEST_VERSIONS.MINIMUM_REQUIRED)
+    })
+
+    it('returns true when agent version equals minimum', () => {
+      const mockAgentVersion = createMockAgentVersion({ version: TEST_VERSIONS.EQUAL_TO_MINIMUM })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledWith(TEST_VERSIONS.EQUAL_TO_MINIMUM, TEST_VERSIONS.MINIMUM_REQUIRED)
+    })
+
+    it('returns false when agent version is below minimum', () => {
+      const mockAgentVersion = createMockAgentVersion({ version: TEST_VERSIONS.BELOW_MINIMUM })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, false, mockAgentVersion)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledWith(TEST_VERSIONS.BELOW_MINIMUM, TEST_VERSIONS.MINIMUM_REQUIRED)
+    })
+  })
+
+  describe('agent name filtering', () => {
+    it('returns true when required agent matches', () => {
+      const mockAgentVersion = createMockAgentVersion({ name: TEST_AGENTS.KUBO, version: TEST_VERSIONS.ABOVE_MINIMUM })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({ requiredAgent: TEST_AGENTS.KUBO })} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+    })
+
+    it('returns false when required agent does not match', () => {
+      const mockAgentVersion = createMockAgentVersion({ name: TEST_AGENTS.GO_IPFS, version: TEST_VERSIONS.ABOVE_MINIMUM })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({ requiredAgent: TEST_AGENTS.KUBO })} />)
+
+      expectHookResult(getByTestId, false, mockAgentVersion)
+      expect(cmpVersionStringsSpy).not.toHaveBeenCalled()
+    })
+
+    it('ignores agent requirement when not specified', () => {
+      const mockAgentVersion = createMockAgentVersion({ name: TEST_AGENTS.GO_IPFS, version: TEST_VERSIONS.ABOVE_MINIMUM })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledWith(TEST_VERSIONS.ABOVE_MINIMUM, TEST_VERSIONS.MINIMUM_REQUIRED)
+    })
+  })
+
+  describe('flavor/suffix filtering', () => {
+    it('returns true when required flavor matches', () => {
+      const mockAgentVersion = createMockAgentVersion({
+        version: TEST_VERSIONS.ABOVE_MINIMUM,
+        suffix: TEST_FLAVORS.DESKTOP
+      })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({ requiredFlavor: TEST_FLAVORS.DESKTOP })} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+    })
+
+    it('returns false when required flavor does not match', () => {
+      const mockAgentVersion = createMockAgentVersion({
+        version: TEST_VERSIONS.ABOVE_MINIMUM,
+        suffix: TEST_FLAVORS.CLI
+      })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({ requiredFlavor: TEST_FLAVORS.DESKTOP })} />)
+
+      expectHookResult(getByTestId, false, mockAgentVersion)
+      expect(cmpVersionStringsSpy).not.toHaveBeenCalled()
+    })
+
+    it('ignores flavor requirement when not specified', () => {
+      const mockAgentVersion = createMockAgentVersion({
+        version: TEST_VERSIONS.ABOVE_MINIMUM,
+        suffix: TEST_FLAVORS.DESKTOP
+      })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledWith(TEST_VERSIONS.ABOVE_MINIMUM, TEST_VERSIONS.MINIMUM_REQUIRED)
+    })
+
+    it('handles empty suffix correctly', () => {
+      const mockAgentVersion = createMockAgentVersion({
+        version: TEST_VERSIONS.ABOVE_MINIMUM,
+        suffix: TEST_FLAVORS.EMPTY
+      })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({ requiredFlavor: TEST_FLAVORS.EMPTY })} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+    })
+
+    it('returns false when agent has empty suffix but flavor is required', () => {
+      const mockAgentVersion = createMockAgentVersion({
+        version: TEST_VERSIONS.ABOVE_MINIMUM,
+        suffix: TEST_FLAVORS.EMPTY
+      })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({ requiredFlavor: TEST_FLAVORS.DESKTOP })} />)
+
+      expectHookResult(getByTestId, false, mockAgentVersion)
+      expect(cmpVersionStringsSpy).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('combined filtering', () => {
+    it('returns true when both agent and flavor match', () => {
+      const mockAgentVersion = createMockAgentVersion({
+        name: TEST_AGENTS.KUBO,
+        version: TEST_VERSIONS.ABOVE_MINIMUM,
+        suffix: TEST_FLAVORS.DESKTOP
+      })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({
+        requiredAgent: TEST_AGENTS.KUBO,
+        requiredFlavor: TEST_FLAVORS.DESKTOP
+      })} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledWith(TEST_VERSIONS.ABOVE_MINIMUM, TEST_VERSIONS.MINIMUM_REQUIRED)
+    })
+
+    it('returns false when agent matches but flavor does not', () => {
+      const mockAgentVersion = createMockAgentVersion({
+        name: TEST_AGENTS.KUBO,
+        version: TEST_VERSIONS.ABOVE_MINIMUM,
+        suffix: TEST_FLAVORS.CLI
+      })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({
+        requiredAgent: TEST_AGENTS.KUBO,
+        requiredFlavor: TEST_FLAVORS.DESKTOP
+      })} />)
+
+      expectHookResult(getByTestId, false, mockAgentVersion)
+      expect(cmpVersionStringsSpy).not.toHaveBeenCalled()
+    })
+
+    it('returns false when flavor matches but agent does not', () => {
+      const mockAgentVersion = createMockAgentVersion({
+        name: TEST_AGENTS.GO_IPFS,
+        version: TEST_VERSIONS.ABOVE_MINIMUM,
+        suffix: TEST_FLAVORS.DESKTOP
+      })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({
+        requiredAgent: TEST_AGENTS.KUBO,
+        requiredFlavor: TEST_FLAVORS.DESKTOP
+      })} />)
+
+      expectHookResult(getByTestId, false, mockAgentVersion)
+      expect(cmpVersionStringsSpy).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('edge cases', () => {
+    it('returns false when agentVersionObject is null', () => {
+      setupMockIdentity(null)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, false, null)
+      expect(cmpVersionStringsSpy).not.toHaveBeenCalled()
+    })
+
+    it('returns false when agentVersionObject is undefined', () => {
+      setupMockIdentity(undefined as any)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, false, null)
+      expect(cmpVersionStringsSpy).not.toHaveBeenCalled()
+    })
+
+    it('performs case-sensitive agent name matching', () => {
+      const mockAgentVersion = createMockAgentVersion({
+        name: TEST_AGENTS.KUBO_UPPERCASE,
+        version: TEST_VERSIONS.ABOVE_MINIMUM
+      })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({ requiredAgent: TEST_AGENTS.KUBO })} />)
+
+      expectHookResult(getByTestId, false, mockAgentVersion)
+      expect(cmpVersionStringsSpy).not.toHaveBeenCalled()
+    })
+
+    it('performs case-sensitive flavor matching', () => {
+      const mockAgentVersion = createMockAgentVersion({
+        version: TEST_VERSIONS.ABOVE_MINIMUM,
+        suffix: TEST_FLAVORS.DESKTOP_UPPERCASE
+      })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({ requiredFlavor: TEST_FLAVORS.DESKTOP })} />)
+
+      expectHookResult(getByTestId, false, mockAgentVersion)
+      expect(cmpVersionStringsSpy).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('return type validation', () => {
+    it('returns correct interface structure', () => {
+      const mockAgentVersion = createMockAgentVersion({ version: TEST_VERSIONS.ABOVE_MINIMUM })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps()} />)
+
+      expect(getByTestId('ok')).toBeInTheDocument()
+      expect(getByTestId('parsed')).toBeInTheDocument()
+      expect(getByTestId('ok')).toHaveTextContent('true')
+      expect(getByTestId('parsed')).toHaveTextContent(JSON.stringify(mockAgentVersion))
+    })
+  })
+
+  describe('version format handling', () => {
+    it('handles pre-release versions', () => {
+      const mockAgentVersion = createMockAgentVersion({ version: '0.15.0-rc1' })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledWith('0.15.0-rc1', TEST_VERSIONS.MINIMUM_REQUIRED)
+    })
+
+    it('handles build metadata versions', () => {
+      const mockAgentVersion = createMockAgentVersion({ version: '0.15.0+build.123' })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledWith('0.15.0+build.123', TEST_VERSIONS.MINIMUM_REQUIRED)
+    })
+
+    it('handles complex suffixes with special characters', () => {
+      const mockAgentVersion = createMockAgentVersion({
+        version: TEST_VERSIONS.ABOVE_MINIMUM,
+        suffix: TEST_FLAVORS.COMPLEX
+      })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({ requiredFlavor: TEST_FLAVORS.COMPLEX })} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+    })
+  })
+
+  describe('memoization', () => {
+    it('memoizes result when dependencies do not change', () => {
+      const mockAgentVersion = createMockAgentVersion({ version: TEST_VERSIONS.ABOVE_MINIMUM })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId, rerender } = render(<TestComponent props={createBasicProps()} />)
+
+      const firstOk = getByTestId('ok').textContent
+      const firstParsed = getByTestId('parsed').textContent
+
+      rerender(<TestComponent props={createBasicProps()} />)
+
+      expect(getByTestId('ok').textContent).toBe(firstOk)
+      expect(getByTestId('parsed').textContent).toBe(firstParsed)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledTimes(1)
+    })
+
+    it('recalculates when minimumVersion changes', () => {
+      const mockAgentVersion = createMockAgentVersion({ version: TEST_VERSIONS.ABOVE_MINIMUM })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId, rerender } = render(<TestComponent props={createBasicProps()} />)
+
+      const firstOk = getByTestId('ok').textContent
+
+      // Change to a higher minimum version that will make 0.15.0 < 0.16.0
+      rerender(<TestComponent props={createBasicProps({ minimumVersion: TEST_VERSIONS.WELL_ABOVE_MINIMUM })} />)
+
+      expect(getByTestId('ok').textContent).not.toBe(firstOk)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledTimes(2)
+    })
+
+    it('recalculates when agentVersionObject changes', () => {
+      const mockAgentVersion1 = createMockAgentVersion({ version: TEST_VERSIONS.ABOVE_MINIMUM })
+      const mockAgentVersion2 = createMockAgentVersion({ version: TEST_VERSIONS.WELL_ABOVE_MINIMUM })
+
+      setupMockIdentitySequence(mockAgentVersion1, mockAgentVersion2)
+
+      const { getByTestId, rerender } = render(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion1)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledTimes(1)
+
+      // This should trigger the second mock value
+      rerender(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion2)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('injectable cmpVersionStrings', () => {
+    it('uses custom cmpVersionStrings function when provided', () => {
+      const mockAgentVersion = createMockAgentVersion({ version: TEST_VERSIONS.ABOVE_MINIMUM })
+      setupMockIdentity(mockAgentVersion)
+
+      const customCmpVersionStrings = jest.fn().mockReturnValue(-1) // Always return "below minimum"
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps({
+        cmpVersionStrings: customCmpVersionStrings as typeof compareVersionStringsModule.cmpVersionStrings
+      })} />)
+
+      expectHookResult(getByTestId, false, mockAgentVersion)
+      expect(customCmpVersionStrings).toHaveBeenCalledWith(TEST_VERSIONS.ABOVE_MINIMUM, TEST_VERSIONS.MINIMUM_REQUIRED)
+      expect(cmpVersionStringsSpy).not.toHaveBeenCalled() // Should not use the default function
+    })
+
+    it('uses default cmpVersionStrings when custom function is not provided', () => {
+      const mockAgentVersion = createMockAgentVersion({ version: TEST_VERSIONS.ABOVE_MINIMUM })
+      setupMockIdentity(mockAgentVersion)
+
+      const { getByTestId } = render(<TestComponent props={createBasicProps()} />)
+
+      expectHookResult(getByTestId, true, mockAgentVersion)
+      expect(cmpVersionStringsSpy).toHaveBeenCalledWith(TEST_VERSIONS.ABOVE_MINIMUM, TEST_VERSIONS.MINIMUM_REQUIRED)
+    })
+  })
+})
diff --git a/src/lib/hooks/use-agent-version-minimum.ts b/src/lib/hooks/use-agent-version-minimum.ts
new file mode 100644
index 000000000..0237162d8
--- /dev/null
+++ b/src/lib/hooks/use-agent-version-minimum.ts
@@ -0,0 +1,54 @@
+import { useMemo } from 'react'
+import { useIdentity } from '../../contexts/identity-context'
+import { type AgentVersionObject } from '../parse-agent-version'
+import { cmpVersionStrings as defaultCmpVersionStrings } from '../compare-version-strings'
+
+export interface UseAgentVersionMinimumProps {
+  /**
+   * Minimum required semantic version in x.y.z format (numbers only).
+   * Example: "0.28.0"
+   */
+  minimumVersion: string
+  /**
+   * Optional required suffix/flavor, e.g. "desktop".
+   * If provided, hook returns false unless the agent's suffix exactly matches.
+   */
+  requiredFlavor?: string
+  /**
+   * Optional required agent name, e.g. "kubo".
+   * If provided, hook returns false unless the agent's name matches.
+   */
+  requiredAgent?: string
+  /**
+   * Optional version comparison function. Defaults to the built-in cmpVersionStrings.
+   * Useful for testing or custom version comparison logic.
+   */
+  cmpVersionStrings?: (a: string, b: string) => -1 | 0 | 1
+}
+
+export interface UseAgentVersionMinimumResult {
+  ok: boolean
+  parsed: AgentVersionObject | null
+}
+
+/**
+ * React hook that gates features based on the current node agent & version and potentially the suffix/flavor.
+ */
+export function useAgentVersionMinimum (props: UseAgentVersionMinimumProps): UseAgentVersionMinimumResult {
+  const { minimumVersion, requiredFlavor, requiredAgent, cmpVersionStrings = defaultCmpVersionStrings } = props
+  const { agentVersionObject } = useIdentity()
+
+  const ok = useMemo(() => {
+    if (agentVersionObject == null) return false
+
+    // If name is required, enforce it
+    if (requiredAgent != null && agentVersionObject.name !== requiredAgent) return false
+
+    // If flavor is required, enforce exact match
+    if (requiredFlavor != null && agentVersionObject.suffix !== requiredFlavor) return false
+
+    return cmpVersionStrings(agentVersionObject.version, minimumVersion) >= 0
+  }, [agentVersionObject, minimumVersion, requiredFlavor, requiredAgent, cmpVersionStrings])
+
+  return { ok, parsed: agentVersionObject }
+}
diff --git a/src/lib/hooks/use-debounced-callback.test.tsx b/src/lib/hooks/use-debounced-callback.test.tsx
new file mode 100644
index 000000000..9f7b618f9
--- /dev/null
+++ b/src/lib/hooks/use-debounced-callback.test.tsx
@@ -0,0 +1,251 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { describe, it, expect, jest, beforeEach, afterEach } from '@jest/globals'
+import '@testing-library/jest-dom'
+import { useDebouncedCallback } from './use-debounced-callback'
+
+/**
+ * Test component to render the hook
+ */
+const TestComponent: React.FC<{
+  debouncedFn: (...args: any[]) => void,
+  delay: number
+}> = ({ debouncedFn, delay }) => {
+  const debouncedCallback = useDebouncedCallback(debouncedFn, delay)
+
+  const handleClick = () => {
+    debouncedCallback('test-arg', 'second-arg')
+  }
+
+  const handleMultipleCalls = () => {
+    debouncedCallback('first')
+    debouncedCallback('second')
+    debouncedCallback('third')
+  }
+
+  return (
+    <div>
+      <button onClick={handleClick} data-testid="single-call">Single Call</button>
+      <button onClick={handleMultipleCalls} data-testid="multiple-calls">Multiple Calls</button>
+    </div>
+  )
+}
+
+describe('useDebouncedCallback', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+    jest.clearAllMocks()
+  })
+
+  describe('basic debouncing behavior', () => {
+    it('should only execute the last call after delay', async () => {
+      const mockFn = jest.fn()
+
+      const { getByTestId } = render(
+        <TestComponent debouncedFn={mockFn} delay={100} />
+      )
+
+      // trigger multiple rapid calls
+      fireEvent.click(getByTestId('multiple-calls'))
+
+      // should not have executed yet
+      expect(mockFn).not.toHaveBeenCalled()
+
+      // forward time
+      jest.advanceTimersByTime(100)
+
+      // should have executed only once with the last arguments
+      expect(mockFn).toHaveBeenCalledTimes(1)
+      expect(mockFn).toHaveBeenCalledWith('third')
+    })
+
+    it('should forward all arguments to the debounced function', async () => {
+      const mockFn = jest.fn()
+
+      const { getByTestId } = render(
+        <TestComponent debouncedFn={mockFn} delay={50} />
+      )
+
+      fireEvent.click(getByTestId('single-call'))
+
+      // forward time
+      jest.advanceTimersByTime(50)
+
+      expect(mockFn).toHaveBeenCalledWith('test-arg', 'second-arg')
+    })
+  })
+
+  describe('function reference updates', () => {
+    it('should call the new function when function reference changes', async () => {
+      const mockFn1 = jest.fn()
+      const mockFn2 = jest.fn()
+
+      const { getByTestId, rerender } = render(
+        <TestComponent debouncedFn={mockFn1} delay={100} />
+      )
+
+      fireEvent.click(getByTestId('single-call'))
+
+      jest.advanceTimersByTime(100)
+
+      expect(mockFn1).toHaveBeenCalledWith('test-arg', 'second-arg')
+      expect(mockFn1).toHaveBeenCalledTimes(1)
+      expect(mockFn2).not.toHaveBeenCalled()
+
+      // trigger call for first function and update to new function
+      fireEvent.click(getByTestId('single-call'))
+      rerender(<TestComponent debouncedFn={mockFn2} delay={100} />)
+
+      jest.advanceTimersByTime(100)
+      expect(mockFn1).toHaveBeenCalledTimes(1)
+      expect(mockFn2).toHaveBeenCalledTimes(0)
+
+      // trigger another call for new function
+      fireEvent.click(getByTestId('single-call'))
+
+      // forward time
+      jest.advanceTimersByTime(100)
+
+      expect(mockFn2).toHaveBeenCalledWith('test-arg', 'second-arg')
+      expect(mockFn2).toHaveBeenCalledTimes(1)
+      expect(mockFn1).toHaveBeenCalledTimes(1) // Still only called once
+    })
+  })
+
+  describe('cleanup on unmount', () => {
+    it('should clear timeout on component unmount', () => {
+      const mockFn = jest.fn()
+
+      const { getByTestId, unmount } = render(
+        <TestComponent debouncedFn={mockFn} delay={100} />
+      )
+
+      fireEvent.click(getByTestId('single-call'))
+
+      // unmount before timeout completes
+      unmount()
+
+      // forward time
+      jest.advanceTimersByTime(100)
+
+      // Function should not have been called
+      expect(mockFn).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle zero delay', async () => {
+      const mockFn = jest.fn()
+
+      const { getByTestId } = render(
+        <TestComponent debouncedFn={mockFn} delay={0} />
+      )
+
+      fireEvent.click(getByTestId('single-call'))
+
+      // should execute after next tick
+      jest.advanceTimersByTime(0) // to trigger next tick
+      expect(mockFn).toHaveBeenCalledWith('test-arg', 'second-arg')
+    })
+
+    it('should handle function that throws', async () => {
+      const throwingFn = jest.fn().mockImplementation(() => {
+        throw new Error('Test error')
+      })
+
+      const { getByTestId } = render(
+        <TestComponent debouncedFn={throwingFn} delay={50} />
+      )
+
+      // fn isnt called for 50ms so it won't throw yet.
+      expect(() => fireEvent.click(getByTestId('single-call'))).not.toThrow()
+
+      // forward time - the error will be thrown but caught by the timer
+      try {
+        jest.advanceTimersByTime(50)
+      } catch (error) {
+        // expected.. advanceTimersByTime propogates the error thrown within the setTimeout function
+      }
+
+      expect(throwingFn).toHaveBeenCalled()
+    })
+
+    it('should use new delay for subsequent calls after delay changes', async () => {
+      const mockFn = jest.fn()
+
+      const { getByTestId, rerender } = render(
+        <TestComponent debouncedFn={mockFn} delay={100} />
+      )
+
+      fireEvent.click(getByTestId('single-call'))
+
+      // forward time to let first call execute
+      jest.advanceTimersByTime(100)
+
+      expect(mockFn).toHaveBeenCalledWith('test-arg', 'second-arg')
+      expect(mockFn).toHaveBeenCalledTimes(1)
+
+      rerender(<TestComponent debouncedFn={mockFn} delay={200} />)
+
+      // call with new delay
+      fireEvent.click(getByTestId('single-call'))
+
+      // forward time by original delay (should not execute yet)
+      jest.advanceTimersByTime(100)
+      expect(mockFn).toHaveBeenCalledTimes(1)
+
+      // forward remaining time
+      jest.advanceTimersByTime(100)
+
+      expect(mockFn).toHaveBeenCalledTimes(2)
+      expect(mockFn).toHaveBeenNthCalledWith(2, 'test-arg', 'second-arg')
+    })
+
+    it('should adjust timeout when delay changes while pending', async () => {
+      const mockFn = jest.fn()
+
+      const { getByTestId, rerender } = render(<TestComponent debouncedFn={mockFn} delay={100} />)
+
+      fireEvent.click(getByTestId('single-call'))
+
+      // wait 50ms (halfway through original delay)
+      jest.advanceTimersByTime(50)
+      expect(mockFn).not.toHaveBeenCalled()
+
+      // change delay to 200ms (it should extend the timeout)
+      rerender(<TestComponent debouncedFn={mockFn} delay={200} />)
+
+      // wait another 50ms (the original delay of 100ms has elapsed, but the new delay is 200ms)
+      jest.advanceTimersByTime(50)
+      expect(mockFn).not.toHaveBeenCalled()
+
+      // wait another 100ms (total 200ms elapsed, it should execute now)
+      jest.advanceTimersByTime(100)
+      expect(mockFn).toHaveBeenCalledWith('test-arg', 'second-arg')
+      expect(mockFn).toHaveBeenCalledTimes(1)
+    })
+
+    it('should execute immediately when delay is reduced below elapsed time', async () => {
+      const mockFn = jest.fn()
+
+      const { getByTestId, rerender } = render(<TestComponent debouncedFn={mockFn} delay={100} />)
+
+      fireEvent.click(getByTestId('single-call'))
+
+      // wait 50ms (halfway through original delay)
+      jest.advanceTimersByTime(50)
+      expect(mockFn).not.toHaveBeenCalled()
+
+      // change delay to 30ms (it should execute immediately since 50ms > 30ms)
+      rerender(<TestComponent debouncedFn={mockFn} delay={30} />)
+
+      // it should execute immediately, no need to advance timers
+      expect(mockFn).toHaveBeenCalledWith('test-arg', 'second-arg')
+      expect(mockFn).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/src/lib/hooks/use-debounced-callback.ts b/src/lib/hooks/use-debounced-callback.ts
new file mode 100644
index 000000000..02cf5b777
--- /dev/null
+++ b/src/lib/hooks/use-debounced-callback.ts
@@ -0,0 +1,56 @@
+import { useCallback, useRef, useEffect } from 'react'
+
+/**
+ * Callback that will only execute the callback if the delay has passed and no other callback has been executed within the delay.
+ */
+export const useDebouncedCallback = <A extends any[], R extends any = void, T extends (...args: A) => R = (...args: A) => R>(debouncedFn: T, delay: number) => {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const callTimeRef = useRef<number | null>(null)
+  const callArgsRef = useRef<A | null>(null)
+  // clear timeout on unmount
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeoutRef.current)
+    }
+  }, [])
+
+  // clear timeout on function dependency change
+  useEffect(() => {
+    clearTimeout(timeoutRef.current)
+    timeoutRef.current = undefined
+  }, [debouncedFn])
+
+  /**
+   * reset delay on delay dependency change
+   *
+   * if delay is less than the elapsed time, execute immediately
+   * otherwise, set a new timeout with the remaining time
+   */
+  useEffect(() => {
+    if (timeoutRef.current && callTimeRef.current && callArgsRef.current != null) {
+      const callArgs: A = callArgsRef.current
+      const elapsed = Date.now() - callTimeRef.current
+      const remaining = Math.max(0, delay - elapsed)
+      if (remaining <= 0) {
+        debouncedFn(...callArgs)
+        return
+      }
+
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = setTimeout(() => {
+        debouncedFn(...callArgs)
+      }, remaining)
+    }
+    // only run this effect when the delay changes.. another hook will handle the function dependency change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [delay])
+
+  return useCallback((...args: Parameters<T>) => {
+    callTimeRef.current = Date.now()
+    callArgsRef.current = args
+    clearTimeout(timeoutRef.current)
+    timeoutRef.current = setTimeout(() => {
+      debouncedFn(...args)
+    }, delay)
+  }, [debouncedFn, delay])
+}
diff --git a/src/lib/parse-agent-version.ts b/src/lib/parse-agent-version.ts
index aab73e3a1..71ecb17c0 100644
--- a/src/lib/parse-agent-version.ts
+++ b/src/lib/parse-agent-version.ts
@@ -1,7 +1,19 @@
 export interface AgentVersionObject {
+  /**
+   * The supported IPFS node agents.
+   */
   name: string
   version: string
+  /**
+   * The suffix of the IPFS node agent. For IPFS-Desktop, the suffix is 'desktop'.
+   */
   suffix: string
+  /**
+   * The URL for the github repo of the IPFS node agent.
+   *
+   * This is used to link to the release page for the IPFS node agent, and must be specified in the `providers` object
+   * below.
+   */
   url: string | null
 }
 
diff --git a/src/navigation/NavBar.css b/src/navigation/NavBar.css
index 58fa811f0..728333cc9 100644
--- a/src/navigation/NavBar.css
+++ b/src/navigation/NavBar.css
@@ -2,6 +2,25 @@
   border-bottom: 5px solid rgba(201, 210, 215, .4);
 }
 
+.navbar-item-label {
+  white-space: pre-wrap;
+}
+
+@media only screen and (max-width: 480px) {
+  .navbar-item-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 60px;
+  }
+}
+
+@media only screen and (max-width: 410px) {
+  .navbar-item-label {
+    max-width: 46px;
+  }
+}
+
 @media only screen and (min-width: 60em) {
   .navbar-container {
     width: 9.25rem;
diff --git a/src/navigation/NavBar.js b/src/navigation/NavBar.js
index ceae85f30..6123f180f 100644
--- a/src/navigation/NavBar.js
+++ b/src/navigation/NavBar.js
@@ -9,6 +9,7 @@ import StrokeWeb from '../icons/StrokeWeb.js'
 import StrokeCube from '../icons/StrokeCube.js'
 import StrokeSettings from '../icons/StrokeSettings.js'
 import StrokeIpld from '../icons/StrokeIpld.js'
+import StrokeLab from '../icons/StrokeLab.js'
 
 // Styles
 import './NavBar.css'
@@ -50,7 +51,7 @@ const NavLink = ({
         <div className='db'>
           <Svg width='46' role='presentation' className={svgClass} />
         </div>
-        <div className={`${active ? 'o-100' : 'o-50'} db f6 tc montserrat ttu fw1 `} style={{ whiteSpace: 'pre-wrap' }}>
+        <div className={`${active ? 'o-100' : 'o-50'} db f6 tc montserrat ttu fw1 navbar-item-label`}>
           {children}
         </div>
       </div>
@@ -82,6 +83,7 @@ export const NavBar = ({ t }) => {
           <NavLink to='/explore' icon={StrokeIpld}>{t('explore:tabName')}</NavLink>
           <NavLink to='/peers' icon={StrokeCube}>{t('peers:title')}</NavLink>
           <NavLink to='/settings' icon={StrokeSettings}>{t('settings:title')}</NavLink>
+          <NavLink to='/diagnostics' icon={StrokeLab}>{t('diagnostics:title')}</NavLink>
         </div>
       </div>
       <div className='dn db-l navbar-footer mb2 tc center f7 o-80 glow'>
diff --git a/src/settings/SettingsPage.js b/src/settings/SettingsPage.js
index fc52316cc..d814c656b 100644
--- a/src/settings/SettingsPage.js
+++ b/src/settings/SettingsPage.js
@@ -18,6 +18,7 @@ import AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle.js'
 import ApiAddressForm from '../components/api-address-form/api-address-form'
 import PublicGatewayForm from '../components/public-gateway-form/PublicGatewayForm.js'
 import PublicSubdomainGatewayForm from '../components/public-subdomain-gateway-form/PublicSubdomainGatewayForm.js'
+import IpfsCheckForm from '../components/ipfs-check-form/IpfsCheckForm.js'
 import { JsonEditor } from './editor/JsonEditor.js'
 import Experiments from '../components/experiments/ExperimentsPanel.js'
 import Title from './Title.js'
@@ -99,6 +100,17 @@ export const SettingsPage = ({
       <PinningManager t={t} />
     </Box>
 
+    <Box className='mb3 pa4-l pa2'>
+      <Title>{t('retrievalDiagnosticService.title')}</Title>
+      <p className='ma0 mr2 lh-copy charcoal f6'>
+        <Trans i18nKey='retrievalDiagnosticService.description' t={t}>
+          <a className='link blue' href='https://github.com/ipfs/ipfs-check' target='_blank' rel='noopener noreferrer'>ipfs-check</a>
+          <a className='link blue' href='#/diagnostics/retrieval-check'>retrieval diagnostics</a>
+        </Trans>
+      </p>
+      <IpfsCheckForm/>
+    </Box>
+
     <Box className='mb3 pa4-l pa2'>
       <div className='joyride-settings-language'>
         <Title>{t('language')}</Title>
diff --git a/src/status/StatusPage.js b/src/status/StatusPage.js
index 214c5884e..2dbe7b853 100644
--- a/src/status/StatusPage.js
+++ b/src/status/StatusPage.js
@@ -6,7 +6,7 @@ import ReactJoyride from 'react-joyride'
 import { IdentityProvider } from '../contexts/identity-context.jsx'
 import StatusConnected from './StatusConnected.js'
 import BandwidthStatsDisabled from './BandwidthStatsDisabled.js'
-import IsNotConnected from '../components/is-not-connected/IsNotConnected.js'
+import IsNotConnected from '../components/is-not-connected/is-not-connected.js'
 import NodeInfo from './NodeInfo.js'
 import NodeInfoAdvanced from './NodeInfoAdvanced.js'
 import NodeBandwidthChart from './NodeBandwidthChart.js'
diff --git a/src/welcome/WelcomePage.js b/src/welcome/WelcomePage.js
index 9bd003194..a1146f551 100644
--- a/src/welcome/WelcomePage.js
+++ b/src/welcome/WelcomePage.js
@@ -9,7 +9,7 @@ import { getJoyrideLocales } from '../helpers/i8n.js'
 
 // Components
 import IsConnected from '../components/is-connected/IsConnected.js'
-import IsNotConnected from '../components/is-not-connected/IsNotConnected.js'
+import IsNotConnected from '../components/is-not-connected/is-not-connected'
 import AboutIpfs from '../components/about-ipfs/AboutIpfs.js'
 import AboutWebUI from '../components/about-webui/AboutWebUI.js'
 import ComponentLoader from '../loader/ComponentLoader.js'
@@ -58,7 +58,7 @@ const WelcomePage = ({ t, ipfsInitFailed, ipfsConnected, ipfsReady, toursEnabled
  *
  * @returns {JSX.Element}
  */
-const ConnectionStatus = ({ t: _t, connected, sameOrigin: _sameOrigin }) => {
+const ConnectionStatus = ({ t: _t, connected }) => {
   if (connected) {
     return (
       <div>
diff --git a/tsconfig.json b/tsconfig.json
index ab8da7f60..722f98599 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -66,9 +66,9 @@
     "src/bundles/ipfs-desktop.js",
     "src/bundles/ipfs-provider.js",
     "src/bundles/retry-init.js",
-    "src/bundles/retry-init.js",
     "src/bundles/local-storage.js",
     "src/bundles/task.js",
+    "src/bundles/gateway.js",
     "src/lib/count-dirs.js",
     "src/lib/sort.js",
     "src/lib/files.js",