diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..d6c9537
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index c17da87..a60d103 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -36,8 +36,4 @@
     font-size: var(--codex-font-size);
     color-scheme: dark;
   }
-
-  p {
-    margin: 0;
-  }
 </style>
diff --git a/package-lock.json b/package-lock.json
index 67620e4..a028f61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,12 @@
         "@storybook/react-vite": "^8.2.9",
         "@storybook/test": "^8.2.9",
         "@tanstack/react-query": "^5.51.24",
+        "@typescript-eslint/eslint-plugin": "^7.15.0",
+        "@typescript-eslint/parser": "^7.15.0",
         "@vitejs/plugin-react": "^4.3.1",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.7",
         "glob": "^7.2.3",
         "prettier": "^3.3.3",
         "react": "^18.3.1",
@@ -39,7 +44,6 @@
       },
       "peerDependencies": {
         "@codex/sdk-js": "@codex/sdk-js#master",
-        "@tanstack/react-query": "^5.51.24",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       }
@@ -2542,6 +2546,146 @@
         "node": ">=12"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
+      "integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
+      "dev": true,
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/@eslint/eslintrc/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true
+    },
     "node_modules/@jest/schemas": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
@@ -4328,6 +4472,256 @@
       "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
       "dev": true
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
+      "integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/type-utils": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^7.0.0",
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz",
+      "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.18.0.tgz",
+      "integrity": "sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz",
+      "integrity": "sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "7.18.0",
+        "@typescript-eslint/utils": "7.18.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.18.0.tgz",
+      "integrity": "sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==",
+      "dev": true,
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz",
+      "integrity": "sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/visitor-keys": "7.18.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
+      "integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "7.18.0",
+        "@typescript-eslint/types": "7.18.0",
+        "@typescript-eslint/typescript-estree": "7.18.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.56.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.18.0.tgz",
+      "integrity": "sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "7.18.0",
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -4743,6 +5137,15 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "dev": true
     },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/assertion-error": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
@@ -5039,6 +5442,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001651",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
@@ -5436,6 +5848,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
+    },
     "node_modules/defaults": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -5517,6 +5935,27 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dir-glob/node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -5702,6 +6141,276 @@
         "source-map": "~0.6.1"
       }
     },
+    "node_modules/eslint": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.11.tgz",
+      "integrity": "sha512-wrAKxMbVr8qhXTtIKfXqAn5SAtRZt0aXxe5P23Fh4pUAdC6XEsybGLB8P0PI4j1yYqOgUEUlzKAGDfo7rJOjcw==",
+      "dev": true,
+      "peerDependencies": {
+        "eslint": ">=7"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/eslint/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/eslint/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/eslint/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree/node_modules/acorn": {
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -5715,6 +6424,30 @@
         "node": ">=4"
       }
     },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/estraverse": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
@@ -5850,6 +6583,18 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -5868,6 +6613,18 @@
         "walk-up-path": "^3.0.1"
       }
     },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
     "node_modules/filesize": {
       "version": "10.1.4",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.4.tgz",
@@ -5955,6 +6712,42 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flat-cache/node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
+      "dev": true
+    },
     "node_modules/flow-parser": {
       "version": "0.243.0",
       "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.243.0.tgz",
@@ -6237,6 +7030,12 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -6435,6 +7234,22 @@
         "node": ">= 4"
       }
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/import-lazy": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
@@ -6609,6 +7424,15 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-plain-object": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
@@ -6683,6 +7507,24 @@
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/js-yaml/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "node_modules/jscodeshift": {
       "version": "0.15.2",
       "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.15.2.tgz",
@@ -6786,12 +7628,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
+    },
     "node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true
     },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -6816,6 +7670,15 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -6849,6 +7712,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/local-pkg": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
@@ -6892,6 +7768,12 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "dev": true
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -7288,6 +8170,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -7565,6 +8453,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/ora": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@@ -7691,6 +8596,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse-ms": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
@@ -7944,6 +8861,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/prettier": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
@@ -8439,6 +9365,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/restore-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -9102,6 +10037,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -9147,6 +10088,18 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
     "node_modules/ts-dedent": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
@@ -9182,6 +10135,18 @@
       "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==",
       "dev": true
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/type-detect": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.1.0.tgz",
@@ -9687,6 +10652,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index dc8a412..718f823 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
   },
   "peerDependencies": {
     "@codex/sdk-js": "@codex/sdk-js#master",
+    "@tanstack/react-query": "^5.51.24",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -53,6 +54,11 @@
     "@storybook/test": "^8.2.9",
     "@tanstack/react-query": "^5.51.24",
     "@vitejs/plugin-react": "^4.3.1",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint": "^8.57.0",
     "glob": "^7.2.3",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index b95def7..cd46a05 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -38,10 +38,8 @@ export function Alert({
       style={style}
       {...rest}
     >
-      <p>
-        <b className="alert-message">{variant} ! </b>
-      </p>
-      <p>{message}</p>
+      <b className="alert-message">{variant} ! </b>
+      <div>{message}</div>
     </div>
   );
 }
diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx
new file mode 100644
index 0000000..fad7f08
--- /dev/null
+++ b/src/components/AppBar/AppBar.tsx
@@ -0,0 +1,23 @@
+import { Menu } from "lucide-react";
+import "./appBar.css";
+import { ReactNode } from "react";
+
+type Props = {
+  onExpand: () => void;
+
+  Right: ReactNode;
+};
+
+export function AppBar({ onExpand, Right }: Props) {
+  return (
+    <div className="appBar">
+      <div className="appBar-left">
+        <a className="appBar-burger" onClick={onExpand}>
+          <Menu size={"1.25rem"} />
+        </a>
+        <span>Home</span>
+      </div>
+      <div className="appBar-right">{Right}</div>
+    </div>
+  );
+}
diff --git a/src/components/AppBar/appBar.css b/src/components/AppBar/appBar.css
new file mode 100644
index 0000000..f2be905
--- /dev/null
+++ b/src/components/AppBar/appBar.css
@@ -0,0 +1,32 @@
+.appBar {
+  height: 40px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--codex-border-color);
+  view-transition-name: main-header;
+  display: flex;
+  padding: 0.75rem 1.5rem;
+}
+
+.appBar-burger {
+  cursor: pointer;
+  color: var(--codex-color);
+  display: flex;
+}
+
+.appBar,
+.appBar-left,
+.appBar-right {
+  display: flex;
+  align-items: center;
+}
+
+.appBar-left,
+.appBar-right {
+  gap: 0.75rem;
+}
+
+@media (min-width: 1000px) {
+  .appBar-burger {
+    display: none;
+  }
+}
diff --git a/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx b/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx
index a049c91..f5f82ac 100644
--- a/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx
+++ b/src/components/EmptyPlaceholder/EmptyPlaceholder.tsx
@@ -13,7 +13,7 @@ export function EmptyPlaceholder({ title, message, onRetry }: Props) {
     <div className="emptyPlaceholder">
       <EmptyPlaceholderIcon className="emptyPlaceholder-icon" width={178} />
       <b className="emptyPlaceholder-title">{title}</b>
-      <p className="emptyPlaceholder-message">{message} </p>
+      <div className="emptyPlaceholder-message">{message} </div>
 
       {onRetry && (
         <Button
diff --git a/src/components/Failure/Failure.tsx b/src/components/Failure/Failure.tsx
index 3ef2b8c..b25f514 100644
--- a/src/components/Failure/Failure.tsx
+++ b/src/components/Failure/Failure.tsx
@@ -35,7 +35,7 @@ export function Failure({
     <div className="failure">
       <h1 className="failure-code">{code}</h1>
       <h2 className="failure-title">{title}</h2>
-      <p className="failure-message">{message}</p>
+      <div className="failure-message">{message}</div>
       {onClick && <Button label={button} onClick={onClick} />}
     </div>
   );
diff --git a/src/components/Logo/LogoInverse.tsx b/src/components/Logo/LogoInverse.tsx
new file mode 100644
index 0000000..f6cd391
--- /dev/null
+++ b/src/components/Logo/LogoInverse.tsx
@@ -0,0 +1,28 @@
+type Props = {
+  width?: number;
+};
+
+export function LogoInverse({ width = 40 }: Props) {
+  return (
+    <svg
+      width={width}
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_274_4287)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M19.7001 32.7386C19.7705 32.7792 19.8502 32.8001 19.9306 32.8001C20.0111 32.8001 20.188 32.7225 20.188 32.7225L30.85 26.581C30.8555 26.5783 30.8632 26.5744 30.8706 26.5701C30.942 26.5295 31.0002 26.4707 31.0406 26.4008C31.0819 26.3302 31.1036 26.25 31.1036 26.1685C31.1036 26.1588 31.1032 26.1499 31.1028 26.1432V13.8597C31.1036 13.8486 31.1036 13.8387 31.1036 13.8337L31.1036 13.8324C31.1036 13.7507 31.0818 13.671 31.0413 13.6009C31.0008 13.5302 30.9421 13.4718 30.872 13.4313C30.8644 13.4268 30.8564 13.4225 30.8484 13.4186L20.1868 7.27756C20.179 7.27228 20.1714 7.26767 20.165 7.26389L20.1644 7.26354C20.0937 7.22255 20.0136 7.20151 19.9325 7.20151H19.9306C19.8495 7.20151 19.77 7.22295 19.701 7.26233C19.692 7.26733 19.6837 7.27257 19.6762 7.27763L9.01204 13.4202C9.00655 13.4229 8.99886 13.4269 8.99144 13.4311C8.92049 13.4717 8.86173 13.531 8.82123 13.6011C8.78067 13.6712 8.75879 13.7509 8.75879 13.8327C8.75879 13.8425 8.75919 13.8513 8.75956 13.858V26.1419C8.75876 26.153 8.75878 26.1629 8.75879 26.1679L8.75879 26.1692C8.75879 26.2508 8.78058 26.3312 8.82193 26.4018C8.86238 26.4712 8.92065 26.5296 8.98909 26.5693L8.99047 26.5701L8.99187 26.5708C9.00023 26.5754 9.00781 26.5793 9.01357 26.5822L19.6768 32.7241C19.6818 32.7275 19.6906 32.7332 19.7001 32.7386ZM30.8023 26.4503C30.7969 26.4533 30.7908 26.4564 30.7847 26.4594C30.788 26.4578 30.7915 26.4561 30.7946 26.4544C30.7973 26.4531 30.7999 26.4517 30.8023 26.4503ZM30.9649 26.1472C30.9651 26.1495 30.9652 26.152 30.9653 26.1545C30.9655 26.1589 30.9657 26.1636 30.9657 26.1685C30.9657 26.167 30.9657 26.1655 30.9656 26.164C30.9655 26.158 30.9652 26.1523 30.9649 26.1472ZM20.3983 26.9771L24.3592 29.2549L20.3951 31.538L20.3983 26.9771ZM15.5034 29.2548L19.4645 26.9769L19.4676 31.538L15.5034 29.2548ZM25.7528 23.8924L29.7137 26.1701L25.7497 28.4532L25.7528 23.8924ZM20.3984 25.3628V20.8084L24.3514 23.0856L20.3984 25.3628ZM15.0439 22.2784V17.724L18.9969 20.0012L15.0439 22.2784ZM20.3984 19.1932V14.6388L24.3514 16.916L20.3984 19.1932ZM19.4649 13.0247L15.5038 10.7468L19.468 8.4636L19.4649 13.0247ZM10.1491 26.1701L14.1131 28.4532L14.11 23.8921L10.1491 26.1701ZM24.8194 23.8927L24.8225 28.4527L20.8658 26.1705L24.8194 23.8927ZM15.0438 23.8927L15.0406 28.4527L18.9974 26.1705L15.0438 23.8927ZM26.2198 23.0856L30.178 20.8025V25.3687L26.2198 23.0856ZM9.68483 20.8025V25.3687L13.643 23.0856L9.68483 20.8025ZM15.5111 23.085L19.4644 25.3624V20.8076L15.5111 23.085ZM29.7125 20.0004L25.7529 17.7227V22.2781L29.7125 20.0004ZM10.1503 20.0008L14.1099 22.2785V17.7231L10.1503 20.0008ZM24.8189 17.7232V22.278L20.8656 20.0006L24.8189 17.7232ZM30.178 14.6329V19.1991L26.2198 16.916L30.178 14.6329ZM13.643 16.916L9.68483 19.1991V14.6329L13.643 16.916ZM19.4644 14.6384V19.1928L15.5114 16.9156L19.4644 14.6384ZM29.7141 13.8315L25.7497 11.5482L25.7528 16.1095L29.7141 13.8315ZM14.1135 11.5484L14.1104 16.1095L10.1491 13.8315L14.1135 11.5484ZM24.8225 11.5489L24.8194 16.1089L20.8658 13.8311L24.8225 11.5489ZM18.9974 13.8311L15.0438 16.1089L15.0406 11.5489L18.9974 13.8311ZM24.3596 10.7467L20.3951 8.46359L20.3983 13.0247L24.3596 10.7467Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_274_4287">
+          <rect width="40" height="40" fill="black" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
new file mode 100644
index 0000000..a92a202
--- /dev/null
+++ b/src/components/Menu/Menu.tsx
@@ -0,0 +1,80 @@
+import { attributes } from "../../utils/attributes";
+import "./menu.css";
+import { LogoInverse } from "../Logo/LogoInverse";
+import { ComponentType, useEffect } from "react";
+import { Backdrop } from "../Backdrop/Backdrop";
+
+export type MenuItemComponentProps = {
+  onClick: () => void;
+  className: string;
+};
+
+export type MenuItem =
+  | {
+      type: "separator";
+    }
+  | {
+      type: "menu-item";
+      Component: ComponentType<MenuItemComponentProps>;
+    }
+  | {
+      type: "menu-title";
+      title: string;
+    };
+
+type Props = {
+  expanded: boolean;
+
+  onClose: () => void;
+
+  onOpen?: () => void;
+
+  items: MenuItem[];
+
+  className?: string;
+};
+
+export function Menu({ expanded, onClose, onOpen, items, className }: Props) {
+  useEffect(() => {
+    if (expanded && onOpen) {
+      onOpen();
+    }
+  }, [expanded, onOpen]);
+
+  const renderItem = (i: MenuItem, index: number) => {
+    switch (i.type) {
+      case "separator":
+        return <hr className="menu-item-separator" key={index}></hr>;
+      case "menu-title":
+        return (
+          <small className="menu-title" key={i.title}>
+            {i.title}
+          </small>
+        );
+      case "menu-item":
+        return (
+          <i.Component onClick={onClose} className="menu-item" key={index} />
+        );
+    }
+  };
+
+  return (
+    <>
+      <Backdrop onClose={onClose} open={expanded} />
+
+      <aside
+        className={`menu ${className}`}
+        {...attributes({ "aria-expanded": expanded })}
+      >
+        <div className="menu-container">
+          <div className="menu-header">
+            <LogoInverse width={50} />
+            <span className="menu-separator">|</span>
+            <span className="menu-name">Codex</span>
+          </div>
+          {items.map((item, index) => renderItem(item, index))}
+        </div>
+      </aside>
+    </>
+  );
+}
diff --git a/src/components/Menu/menu.css b/src/components/Menu/menu.css
new file mode 100644
index 0000000..e29517f
--- /dev/null
+++ b/src/components/Menu/menu.css
@@ -0,0 +1,72 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--codex-background-secondary);
+  border-radius: var(--codex-border-radius);
+  transform: translatex(-500px);
+  transition: transform 0.25s;
+  position: fixed;
+  min-width: 200px;
+  z-index: 1;
+  view-transition-name: main-menu;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.menu-container {
+  padding: 0.75rem;
+}
+
+.menu-backdrop {
+  display: none;
+}
+
+.menu[aria-expanded] {
+  transform: translatex(0);
+  min-width: 200px;
+}
+
+.menu-header {
+  margin-bottom: 0.75rem;
+}
+
+.menu-item,
+.menu-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.menu-item {
+  padding: 0.75rem;
+  color: var(--codex-color);
+  margin-bottom: 0.75rem;
+  text-decoration: none;
+}
+
+.menu-item:hover,
+.menu-item.active {
+  background-color: var(--codex-background-light);
+}
+
+.menu-title {
+  text-transform: uppercase;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 0.75rem;
+  display: inline-block;
+  font-weight: 500;
+}
+
+.menu-item-separator {
+  border: 0.1px solid var(--codex-border-color);
+  width: 100%;
+}
+
+@media (min-width: 1000px) {
+  .menu {
+    transform: translatex(0px);
+    position: inherit;
+  }
+}
diff --git a/src/components/NetworkIndicator/NetworkIndicator.tsx b/src/components/NetworkIndicator/NetworkIndicator.tsx
new file mode 100644
index 0000000..8e270fd
--- /dev/null
+++ b/src/components/NetworkIndicator/NetworkIndicator.tsx
@@ -0,0 +1,22 @@
+import { classnames } from "../../utils/classnames";
+import "./networkIndicator.css";
+
+type Props = {
+  online: boolean;
+  text: string;
+};
+
+export function NetworkIndicator({ online, text }: Props) {
+  return (
+    <div className="networkIndicator">
+      <div
+        className={classnames(
+          ["networkIndicator-point"],
+          ["networkIndicator-point--online", online],
+          ["networkIndicator-point--offline", !online]
+        )}
+      ></div>
+      <span>{text}</span>
+    </div>
+  );
+}
diff --git a/src/components/NetworkIndicator/networkIndicator.css b/src/components/NetworkIndicator/networkIndicator.css
new file mode 100644
index 0000000..46fc428
--- /dev/null
+++ b/src/components/NetworkIndicator/networkIndicator.css
@@ -0,0 +1,35 @@
+.networkIndicator {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.networkIndicator-point {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  animation-duration: 3s;
+  animation-name: flash;
+  animation-iteration-count: infinite;
+  transition: none;
+}
+
+.networkIndicator-point--online {
+  background-color: var(--codex-color-primary);
+}
+
+.networkIndicator-point--offline {
+  background-color: rgb(217, 53, 38);
+}
+
+@keyframes flash {
+  0% {
+    opacity: 1;
+  }
+  40% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
new file mode 100644
index 0000000..0284560
--- /dev/null
+++ b/src/components/Page/Page.tsx
@@ -0,0 +1,110 @@
+import { ReactNode, useState } from "react";
+import { Menu, MenuItem, MenuItemComponentProps } from "../Menu/Menu";
+import { AppBar } from "../AppBar/AppBar";
+import { NetworkIndicator } from "../NetworkIndicator/NetworkIndicator";
+import "./page.css";
+import {
+  Home,
+  Star,
+  ShoppingBag,
+  Server,
+  Settings,
+  HelpCircle,
+} from "lucide-react";
+
+type Props = {
+  children: ReactNode;
+};
+
+export function Page({ children }: Props) {
+  const [open, setOpen] = useState(false);
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
+  const onExpand = () => {
+    setOpen(true);
+  };
+
+  const Right = <NetworkIndicator online={true} text="Online" />;
+
+  const items = [
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <Home size={"1.25rem"} /> Dashboard
+        </a>
+      ),
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <Star size={"1.25rem"} /> Favorties
+        </a>
+      ),
+    },
+    {
+      type: "separator",
+    },
+    {
+      type: "menu-title",
+      title: "rent",
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <ShoppingBag size={"1.25rem"} /> Purchases
+        </a>
+      ),
+    },
+    {
+      type: "separator",
+    },
+    {
+      type: "menu-title",
+      title: "host",
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <Server size={"1.25rem"} /> Availabilities
+        </a>
+      ),
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <Settings size={"1.25rem"} /> Settings
+        </a>
+      ),
+    },
+    {
+      type: "separator",
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <HelpCircle size={"1.25rem"} /> Help
+        </a>
+      ),
+    },
+  ] satisfies MenuItem[];
+
+  return (
+    <div className="page">
+      <Menu expanded={open} onClose={onClose} items={items}></Menu>
+
+      <main className="page-main">
+        <AppBar onExpand={onExpand} Right={Right} />
+        {children}
+      </main>
+    </div>
+  );
+}
diff --git a/src/components/Page/page.css b/src/components/Page/page.css
new file mode 100644
index 0000000..c59cc35
--- /dev/null
+++ b/src/components/Page/page.css
@@ -0,0 +1,7 @@
+.page {
+  display: flex;
+}
+
+.page-main {
+  flex: 1;
+}
diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx
index 41e0419..579ae8d 100644
--- a/src/components/Stepper/Stepper.tsx
+++ b/src/components/Stepper/Stepper.tsx
@@ -118,14 +118,3 @@ export function Stepper({
     </div>
   );
 }
-
-// <div className="stepper-success">
-// <video src="/animations/success.webm" autoPlay />
-// <p>
-//   <b>Success ! </b>
-// </p>
-// <p className="text-center">
-//   Your request has been submitted. Check your purchases list to get
-//   more information about the status.
-// </p>
-// </div>
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index a9c15d4..974ec08 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -72,7 +72,7 @@ export function Toast({
     if (message) {
       timeout.current = window.setTimeout(() => setMsg(""), duration);
     }
-  }, [message, time]);
+  }, [message, time, duration]);
 
   const onClose = () => {
     if (timeout.current) {
diff --git a/src/components/Upload/Upload.tsx b/src/components/Upload/Upload.tsx
index a01d5a1..cd333bd 100644
--- a/src/components/Upload/Upload.tsx
+++ b/src/components/Upload/Upload.tsx
@@ -89,7 +89,7 @@ const defaultProvider = () =>
       return Promise.resolve({
         abort: () => {},
         result: Promise.resolve({
-          error: false as false,
+          error: false,
           data: Date.now().toString(),
         }),
       } satisfies UploadResponse);
diff --git a/src/components/Upload/UploadFile.tsx b/src/components/Upload/UploadFile.tsx
index feb4fbe..aad9116 100644
--- a/src/components/Upload/UploadFile.tsx
+++ b/src/components/Upload/UploadFile.tsx
@@ -1,4 +1,11 @@
-import { useRef, useState, useReducer, Reducer, useEffect } from "react";
+import {
+  useRef,
+  useState,
+  useReducer,
+  Reducer,
+  useEffect,
+  useCallback,
+} from "react";
 import { attributes } from "../utils/attributes";
 import { PrettyBytes } from "../utils/bytes";
 import { Toast } from "../Toast/Toast";
@@ -161,20 +168,23 @@ export function UploadFile({
   });
   const init = useRef(false);
 
-  const onInternalSuccess = (cid: string) => {
-    worker.current?.terminate();
+  const onInternalSuccess = useCallback(
+    (cid: string) => {
+      worker.current?.terminate();
 
-    queryClient.invalidateQueries({
-      queryKey: ["cids"],
-    });
+      queryClient.invalidateQueries({
+        queryKey: ["cids"],
+      });
 
-    if (onSuccess) {
-      onSuccess(cid);
-      dispatch({ type: "reset" });
-    } else {
-      dispatch({ type: "completed", cid });
-    }
-  };
+      if (onSuccess) {
+        onSuccess(cid);
+        dispatch({ type: "reset" });
+      } else {
+        dispatch({ type: "completed", cid });
+      }
+    },
+    [onSuccess, dispatch, queryClient]
+  );
 
   const onProgress = (loaded: number, total: number) => {
     dispatch({
@@ -238,7 +248,7 @@ export function UploadFile({
       console.info("running file !!");
       mutateAsync(file);
     }
-  }, []);
+  }, [file, mutateAsync, onInternalSuccess, useWorker, provider]);
 
   const onCancel = () => {
     if (worker.current) {
diff --git a/stories/AppBar.stories.tsx b/stories/AppBar.stories.tsx
new file mode 100644
index 0000000..e1b5777
--- /dev/null
+++ b/stories/AppBar.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AppBar } from "../src/components/AppBar/AppBar";
+import { fn } from "@storybook/test";
+import { NetworkIndicator } from "../src/components/NetworkIndicator/NetworkIndicator";
+
+const meta = {
+  title: "Components/AppBar",
+  component: AppBar,
+  parameters: {
+    layout: "fullwidth",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof AppBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    onExpand: fn(),
+    Right: <NetworkIndicator online={true} text="Online" />,
+  },
+};
diff --git a/stories/Card.stories.ts b/stories/Card.stories.ts
index cb1a441..a57fc22 100644
--- a/stories/Card.stories.ts
+++ b/stories/Card.stories.ts
@@ -18,14 +18,14 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: "Hello",
-    children: React.createElement("p", {}, "Hello World !"),
+    children: React.createElement("div", {}, "Hello World !"),
   },
 };
 
 export const CustomStyle: Story = {
   args: {
     title: "Hello",
-    children: React.createElement("p", {}, "Hello World !"),
+    children: React.createElement("div", {}, "Hello World !"),
     style: { "--codex-border-radius": "0px" },
   },
 };
diff --git a/stories/Menu.stories.css b/stories/Menu.stories.css
new file mode 100644
index 0000000..cb728e8
--- /dev/null
+++ b/stories/Menu.stories.css
@@ -0,0 +1,14 @@
+.menu-story {
+  min-height: 500px;
+}
+
+@media (min-width: 1000px) {
+  .menu-noSticky {
+    transform: translatex(-500px) !important;
+    position: fixed;
+  }
+}
+
+.menu-noSticky[aria-expanded] {
+  transform: translatex(0) !important;
+}
diff --git a/stories/Menu.stories.tsx b/stories/Menu.stories.tsx
new file mode 100644
index 0000000..d5d5810
--- /dev/null
+++ b/stories/Menu.stories.tsx
@@ -0,0 +1,134 @@
+import type { Meta } from "@storybook/react";
+import {
+  Menu,
+  MenuItem,
+  MenuItemComponentProps,
+} from "../src/components/Menu/Menu";
+import { useState } from "react";
+import { fn } from "@storybook/test";
+import {
+  HelpCircle,
+  Home,
+  Server,
+  Settings,
+  ShoppingBag,
+  Star,
+} from "lucide-react";
+import "./Menu.stories.css";
+
+const meta = {
+  title: "Overlays/Menu",
+  component: Menu,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {
+    onClose: fn(),
+    onOpen: fn(),
+  },
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+
+type Props = {
+  onClose: () => void;
+  onOpen: () => void;
+};
+
+const Template = (p: Props) => {
+  const [open, setOpen] = useState(false);
+
+  const onClose = () => {
+    p.onClose();
+    setOpen(false);
+  };
+
+  const onOpen = () => {
+    setOpen(true);
+  };
+
+  const items = [
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <Home size={"1.25rem"} /> Dashboard
+        </a>
+      ),
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <Star size={"1.25rem"} /> Favorties
+        </a>
+      ),
+    },
+    {
+      type: "separator",
+    },
+    {
+      type: "menu-title",
+      title: "rent",
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <ShoppingBag size={"1.25rem"} /> Purchases
+        </a>
+      ),
+    },
+    {
+      type: "separator",
+    },
+    {
+      type: "menu-title",
+      title: "host",
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <Server size={"1.25rem"} /> Availabilities
+        </a>
+      ),
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <Settings size={"1.25rem"} /> Settings
+        </a>
+      ),
+    },
+    {
+      type: "separator",
+    },
+    {
+      type: "menu-item",
+      Component: (p: MenuItemComponentProps) => (
+        <a {...p}>
+          <HelpCircle size={"1.25rem"} /> Help
+        </a>
+      ),
+    },
+  ] satisfies MenuItem[];
+
+  return (
+    <div className="menu-story">
+      <button onClick={onOpen}>Open menu</button>
+      <Menu
+        expanded={open}
+        onClose={onClose}
+        onOpen={p.onOpen}
+        items={items}
+        className="menu-noSticky"
+      ></Menu>
+    </div>
+  );
+};
+
+export const Default = Template;
diff --git a/stories/NetworkIndicator.stories.ts b/stories/NetworkIndicator.stories.ts
new file mode 100644
index 0000000..4fd41ad
--- /dev/null
+++ b/stories/NetworkIndicator.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NetworkIndicator } from "../src/components/NetworkIndicator/NetworkIndicator";
+
+const meta = {
+  title: "Components/NetworkIndicator",
+  component: NetworkIndicator,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof NetworkIndicator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Online: Story = {
+  args: {
+    online: true,
+    text: "Online",
+  },
+};
+
+export const Offline: Story = {
+  args: {
+    online: false,
+    text: "Offline",
+  },
+};
diff --git a/stories/Page.stories.css b/stories/Page.stories.css
new file mode 100644
index 0000000..c6ca154
--- /dev/null
+++ b/stories/Page.stories.css
@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+}
+
+.page {
+  height: 100vh;
+}
diff --git a/stories/Page.stories.tsx b/stories/Page.stories.tsx
new file mode 100644
index 0000000..c3fc5df
--- /dev/null
+++ b/stories/Page.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Page } from "../src/components/Page/Page";
+import "./Page.stories.css";
+
+const meta = {
+  title: "Layouts/Page",
+  component: Page,
+  parameters: {
+    layout: "fullwidth",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof Page>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <span style={{ padding: "1rem", display: "block" }}>Hello World</span>
+    ),
+  },
+};
diff --git a/stories/Stepper.stories.tsx b/stories/Stepper.stories.tsx
index d7e203e..4f62286 100644
--- a/stories/Stepper.stories.tsx
+++ b/stories/Stepper.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import { Stepper } from "../src/components/Stepper/Stepper";
 import React, { useState } from "react";
 import { fn } from "@storybook/test";
@@ -41,7 +41,7 @@ const Template = (p: Props) => {
 
   return (
     <Stepper
-      Body={() => React.createElement("p", {}, title)}
+      Body={() => React.createElement("div", {}, title)}
       titles={titles}
       onChangeStep={onChangeStep}
       progress={progress}
diff --git a/stories/Toast.stories.tsx b/stories/Toast.stories.tsx
index 2f8ee59..b15f250 100644
--- a/stories/Toast.stories.tsx
+++ b/stories/Toast.stories.tsx
@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import { CircleCheck } from "lucide-react";
 import { Toast } from "../src/components/Toast/Toast";
-import { MouseEvent, useState } from "react";
+import { useState } from "react";
 
 const meta = {
   title: "Overlays/Toast",
@@ -17,12 +17,11 @@ const meta = {
 } satisfies Meta<typeof Toast>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 const Template = () => {
   const [time, setTime] = useState(0);
 
-  const onClick = (_: MouseEvent) => setTime(Date.now());
+  const onClick = () => setTime(Date.now());
 
   return (
     <div style={{ padding: "2rem" }}>
diff --git a/stories/Upload.stories.css b/stories/Upload.stories.css
new file mode 100644
index 0000000..f00811f
--- /dev/null
+++ b/stories/Upload.stories.css
@@ -0,0 +1,3 @@
+.upload {
+  min-width: 400px;
+}
diff --git a/stories/Upload.stories.tsx b/stories/Upload.stories.tsx
index eb2c88c..7c7ac7b 100644
--- a/stories/Upload.stories.tsx
+++ b/stories/Upload.stories.tsx
@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { UploadResponse } from "@codex/sdk-js";
 import { Upload } from "../src/components/Upload/Upload";
 import { fn } from "@storybook/test";
+import "./Upload.stories.css";
 
 const meta = {
   title: "Advanced/Upload",
@@ -69,7 +70,7 @@ const slowProvider = () =>
                 window.clearInterval(timeout);
 
                 resolve({
-                  error: false as false,
+                  error: false,
                   data: Date.now().toString(),
                 });
               }
diff --git a/vite.config.ts b/vite.config.ts
index 33111ca..17ff1c7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,7 +12,7 @@ const { glob } = pkg;
 export default defineConfig({
   worker: {
     rollupOptions: {
-      external: ["@codex/sdk-js"],
+      external: ["@codex/sdk-js", "@tanstack/react-query"],
       output: {
         globals: {
           "@codex/sdk-js": "codex-sdk-js",