Merge remote-tracking branch 'gui/main' into merge-gui-and-server

.github/workflows/build-gui.yml

@@ -0,0 +1,48 @@
+name: Build GUI
+
+on: 
+  push:
+    paths:
+      - gui/**
+      - package*.json
+  pull_request:
+    paths:
+      - gui/**
+      - package*.json
+
+jobs:
+  build:
+    runs-on: windows-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    env:
+      # Don't mark warnings as errors
+      CI: false
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Cache cargo dependencies
+        uses: Swatinem/rust-cache@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Build
+        run: |
+          npm ci
+          npm run tauri build
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v3.1.0
+        with:
+          # Artifact name
+          name: SlimeVR-GUI
+          # A file, directory or wildcard pattern that describes what to upload
+          path: gui/target/release/slimevr-ui.exe

.gitignore

@@ -1,33 +1,12 @@
 # Ignore Gradle project-specific cache directory
 .gradle
 
-# Ignore Gradle build output directory
-build
-
-/bin/
-
-# Ignore .idea
-.idea
-
 # Syncthing ignore file
 .stignore
 
-MagnetoLib.dll
-vrconfig.yml
+# Ignore .idea
+.idea
 
-# BVH
-BVH Recordings
-
-# AutoBone
-Recordings
-AutoBone Recordings
-Load AutoBone Recordings
-
-# Logs
-*.log.*
-*.log.lck
-*.log
-logs/
 
 # Ignore eclipse stuff
 .project
@@ -36,3 +15,12 @@ logs/
 
 # VSCode stuff
 /.vscode/settings.json
+
+# Ignore eclipse stuff
+.project
+.classpath
+.settings
+
+# Node Stuff
+/node_modules
+.husky

.vscode/extensions.json

@@ -5,6 +5,10 @@
 	"recommendations": [
 		"richardwillis.vscode-spotless-gradle",
 		"gaborv.flatbuffers",
+		"dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "rust-lang.rust-analyzer",
+    "bradlc.vscode-tailwindcss"
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": []

gui/.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "spaced-comment": "error",
+    "quotes": ["error", "single"],
+    "no-duplicate-imports": "error",
+    "no-inline-styles": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "react/no-unescaped-entities": "off",
+    "prettier/prettier": "warn"
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {}
+    },
+    "react": {
+      "version": "detect"
+    }
+  }
+}

gui/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

gui/.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# JS/TS dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# Build artifacts
+/build
+/target
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*.log

gui/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

gui/Cargo.toml

@@ -0,0 +1,3 @@
+[workspace]
+resolver = "2"
+members = ["src-tauri"]

gui/LICENSE

@@ -0,0 +1,6 @@
+This codebase is dual-licensed under either
+
+* MIT License (docs/LICENSE-MIT or http://opensource.org/licenses/MIT)
+* Apache License, Version 2.0 (docs/LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
+
+at your option.

gui/README.md

@@ -0,0 +1,54 @@
+# SlimeVR UI
+
+This is the GUI of SlimeVR, it uses the SolarXR protocol to communicate with the server and is completely isolated from the server logic.
+
+This project is written in Typescript + React for the frontend and uses Tauri + Rust as a small backend. This makes the application more lightweight than electron.
+
+## Compiling
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org) 16 (We recommend the use of `nvm` instead of installing Node.js directly)
+- Windows Webview
+- SlimeVR server installed
+- [Rust](https://rustup.rs)
+
+```
+npm install
+```
+
+Build for production
+
+```
+npm run tauri build
+```
+
+Launch in dev mode
+
+```
+npm run tauri dev
+```
+
+## Contributing
+
+By contributing to this project you are placing all your code under MIT or less restricting licenses, and you certify that the code you have used is compatible with those licenses or is authored by you. If you're doing so on your work time, you certify that your employer is okay with this.
+
+## License
+
+All code in this repository is dual-licensed under either:
+
+- MIT License ([LICENSE-MIT](docs/LICENSE-MIT))
+- Apache License, Version 2.0 ([LICENSE-APACHE](docs/LICENSE-APACHE))
+
+at your option. This means you can select the license you prefer!
+
+Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.
+
+### Complying with the license
+
+Please note that these licenses are very permissive, but if you wish to distribute software based on this code, you need to be aware of the following limits of these licenses:
+
+- When distributing any software that uses or is based on SlimeVR, you have to provide to the end-user the original, unmodified `LICENSE-MIT` or `LICENSE-APACHE` file (or both) from SlimeVR. This includes the `Copyright (c) 2022 SlimeVR Contributors` part of the license. It is not sufficient to use a generic MIT/Apache License, it must be the original license file.
+- This applies even if you distribute software without the source code. In this case, one way to provide it to the end-user is to have a menu in your application that lists all the open source licenses used, including SlimeVR's.
+
+Please refer to the original license files if you are at any point uncertain what the exact the requirements are.

gui/config/env.js

@@ -0,0 +1,104 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+        // We support configuring the sockjs pathname during development.
+        // These settings let a developer run multiple simultaneous projects.
+        // They are used as the connection `hostname`, `pathname` and `port`
+        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
+        // and `sockPort` options in webpack-dev-server.
+        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
+        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
+        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+        // Whether or not react-refresh is enabled.
+        // It is defined here so it is available in the webpackHotDevClient.
+        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+      }
+    );
+  // Stringify all values so we can feed into webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

gui/config/getHttpsConfig.js

@@ -0,0 +1,66 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const chalk = require('react-dev-utils/chalk');
+const paths = require('./paths');
+
+// Ensure the certificate and key provided are valid and if not
+// throw an easy to debug error
+function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
+  let encrypted;
+  try {
+    // publicEncrypt will throw an error with an invalid cert
+    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+  } catch (err) {
+    throw new Error(
+      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
+    );
+  }
+
+  try {
+    // privateDecrypt will throw an error with an invalid key
+    crypto.privateDecrypt(key, encrypted);
+  } catch (err) {
+    throw new Error(
+      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
+        err.message
+      }`
+    );
+  }
+}
+
+// Read file and throw an error if it doesn't exist
+function readEnvFile(file, type) {
+  if (!fs.existsSync(file)) {
+    throw new Error(
+      `You specified ${chalk.cyan(
+        type
+      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
+    );
+  }
+  return fs.readFileSync(file);
+}
+
+// Get the https config
+// Return cert files if provided in env, otherwise just true or false
+function getHttpsConfig() {
+  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
+  const isHttps = HTTPS === 'true';
+
+  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
+    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
+    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
+    const config = {
+      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
+      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+    };
+
+    validateKeyAndCerts({ ...config, keyFile, crtFile });
+    return config;
+  }
+  return isHttps;
+}
+
+module.exports = getHttpsConfig;

gui/config/jest/babelTransform.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const babelJest = require('babel-jest').default;
+
+const hasJsxRuntime = (() => {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+    return false;
+  }
+
+  try {
+    require.resolve('react/jsx-runtime');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
+module.exports = babelJest.createTransformer({
+  presets: [
+    [
+      require.resolve('babel-preset-react-app'),
+      {
+        runtime: hasJsxRuntime ? 'automatic' : 'classic',
+      },
+    ],
+  ],
+  babelrc: false,
+  configFile: false,
+});

gui/config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

gui/config/jest/fileTransform.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const path = require('path');
+const camelcase = require('camelcase');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
+      return `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};

gui/config/modules.js

@@ -0,0 +1,134 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+const chalk = require('react-dev-utils/chalk');
+const resolve = require('resolve');
+
+/**
+ * Get additional module paths based on the baseUrl of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getAdditionalModulePaths(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return '';
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
+  // the default behavior.
+  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+    return null;
+  }
+
+  // Allow the user set the `baseUrl` to `appSrc`.
+  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+    return [paths.appSrc];
+  }
+
+  // If the path is equal to the root directory we ignore it here.
+  // We don't want to allow importing from the root directly as source files are
+  // not transpiled outside of `src`. We do allow importing them with the
+  // absolute path (e.g. `src/Components/Button.js`) but we set that up with
+  // an alias.
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return null;
+  }
+
+  // Otherwise, throw an error.
+  throw new Error(
+    chalk.red.bold(
+      "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
+        ' Create React App does not support other values at this time.'
+    )
+  );
+}
+
+/**
+ * Get webpack aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getWebpackAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      src: paths.appSrc,
+    };
+  }
+}
+
+/**
+ * Get jest aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getJestAliases(options = {}) {
+  const baseUrl = options.baseUrl;
+
+  if (!baseUrl) {
+    return {};
+  }
+
+  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+  if (path.relative(paths.appPath, baseUrlResolved) === '') {
+    return {
+      '^src/(.*)$': '<rootDir>/src/$1',
+    };
+  }
+}
+
+function getModules() {
+  // Check if TypeScript is setup
+  const hasTsConfig = fs.existsSync(paths.appTsConfig);
+  const hasJsConfig = fs.existsSync(paths.appJsConfig);
+
+  if (hasTsConfig && hasJsConfig) {
+    throw new Error(
+      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
+    );
+  }
+
+  let config;
+
+  // If there's a tsconfig.json we assume it's a
+  // TypeScript project and set up the config
+  // based on tsconfig.json
+  if (hasTsConfig) {
+    const ts = require(resolve.sync('typescript', {
+      basedir: paths.appNodeModules,
+    }));
+    config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
+    // Otherwise we'll check if there is jsconfig.json
+    // for non TS projects.
+  } else if (hasJsConfig) {
+    config = require(paths.appJsConfig);
+  }
+
+  config = config || {};
+  const options = config.compilerOptions || {};
+
+  const additionalModulePaths = getAdditionalModulePaths(options);
+
+  return {
+    additionalModulePaths: additionalModulePaths,
+    webpackAliases: getWebpackAliases(options),
+    jestAliases: getJestAliases(options),
+    hasTsConfig,
+  };
+}
+
+module.exports = getModules();

gui/config/paths.js

@@ -0,0 +1,77 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+const publicUrlOrPath = getPublicUrlOrPath(
+  process.env.NODE_ENV === 'development',
+  require(resolveApp('package.json')).homepage,
+  process.env.PUBLIC_URL
+);
+
+const buildPath = process.env.BUILD_PATH || 'build';
+
+const moduleFileExtensions = [
+  'web.mjs',
+  'mjs',
+  'web.js',
+  'js',
+  'web.ts',
+  'ts',
+  'web.tsx',
+  'tsx',
+  'json',
+  'web.jsx',
+  'jsx',
+];
+
+// Resolve file paths in the same order as webpack
+const resolveModule = (resolveFn, filePath) => {
+  const extension = moduleFileExtensions.find(extension =>
+    fs.existsSync(resolveFn(`${filePath}.${extension}`))
+  );
+
+  if (extension) {
+    return resolveFn(`${filePath}.${extension}`);
+  }
+
+  return resolveFn(`${filePath}.js`);
+};
+
+// config after eject: we're in ./config/
+module.exports = {
+  dotenv: resolveApp('.env'),
+  appPath: resolveApp('.'),
+  appBuild: resolveApp(buildPath),
+  appPublic: resolveApp('public'),
+  appHtml: resolveApp('public/index.html'),
+  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appPackageJson: resolveApp('package.json'),
+  appSrc: resolveApp('src'),
+  appTsConfig: resolveApp('tsconfig.json'),
+  appJsConfig: resolveApp('jsconfig.json'),
+  yarnLockFile: resolveApp('yarn.lock'),
+  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
+  proxySetup: resolveApp('src/setupProxy.js'),
+  appNodeModules: resolveApp('node_modules'),
+  appWebpackCache: resolveApp('node_modules/.cache'),
+  appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
+  swSrc: resolveModule(resolveApp, 'src/service-worker'),
+  publicUrlOrPath,
+};
+
+
+
+module.exports.moduleFileExtensions = moduleFileExtensions;

gui/config/webpack.config.js

@@ -0,0 +1,753 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const resolve = require('resolve');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+const ESLintPlugin = require('eslint-webpack-plugin');
+const paths = require('./paths');
+const modules = require('./modules');
+const getClientEnvironment = require('./env');
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const ForkTsCheckerWebpackPlugin =
+  process.env.TSC_COMPILE_ON_ERROR === 'true'
+    ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
+    : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
+const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+
+const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
+const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
+  '@pmmmwh/react-refresh-webpack-plugin'
+);
+const babelRuntimeEntry = require.resolve('babel-preset-react-app');
+const babelRuntimeEntryHelpers = require.resolve(
+  '@babel/runtime/helpers/esm/assertThisInitialized',
+  { paths: [babelRuntimeEntry] }
+);
+const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
+  paths: [babelRuntimeEntry],
+});
+
+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
+// makes for a smoother build process.
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+
+const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
+const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
+
+const imageInlineSizeLimit = parseInt(
+  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+);
+
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
+// Check if Tailwind config exists
+const useTailwind = fs.existsSync(
+  path.join(paths.appPath, 'tailwind.config.js')
+);
+
+// Get the path to the uncompiled service worker (if it exists).
+const swSrc = paths.swSrc;
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+const hasJsxRuntime = (() => {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+    return false;
+  }
+
+  try {
+    require.resolve('react/jsx-runtime');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+module.exports = function (webpackEnv) {
+  const isEnvDevelopment = webpackEnv === 'development';
+  const isEnvProduction = webpackEnv === 'production';
+
+  // Variable used for enabling profiling in Production
+  // passed into alias object. Uses a flag if passed into the build command
+  const isEnvProductionProfile =
+    isEnvProduction && process.argv.includes('--profile');
+
+  // We will provide `paths.publicUrlOrPath` to our app
+  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+  // Get environment variables to inject into our app.
+  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+
+  const shouldUseReactRefresh = env.raw.FAST_REFRESH;
+
+  // common function to get style loaders
+  const getStyleLoaders = (cssOptions, preProcessor) => {
+    const loaders = [
+      isEnvDevelopment && require.resolve('style-loader'),
+      isEnvProduction && {
+        loader: MiniCssExtractPlugin.loader,
+        // css is located in `static/css`, use '../../' to locate index.html folder
+        // in production `paths.publicUrlOrPath` can be a relative path
+        options: paths.publicUrlOrPath.startsWith('.')
+          ? { publicPath: '../../' }
+          : {},
+      },
+      {
+        loader: require.resolve('css-loader'),
+        options: cssOptions,
+      },
+      {
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve('postcss-loader'),
+        options: {
+          postcssOptions: {
+            // Necessary for external CSS imports to work
+            // https://github.com/facebook/create-react-app/issues/2677
+            ident: 'postcss',
+            config: false,
+            plugins: !useTailwind
+              ? [
+                  'postcss-flexbugs-fixes',
+                  [
+                    'postcss-preset-env',
+                    {
+                      autoprefixer: {
+                        flexbox: 'no-2009',
+                      },
+                      stage: 3,
+                    },
+                  ],
+                  // Adds PostCSS Normalize as the reset css with default options,
+                  // so that it honors browserslist config in package.json
+                  // which in turn let's users customize the target behavior as per their needs.
+                  'postcss-normalize',
+                ]
+              : [
+                  'tailwindcss',
+                  'postcss-flexbugs-fixes',
+                  [
+                    'postcss-preset-env',
+                    {
+                      autoprefixer: {
+                        flexbox: 'no-2009',
+                      },
+                      stage: 3,
+                    },
+                  ],
+                ],
+          },
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+        },
+      },
+    ].filter(Boolean);
+    if (preProcessor) {
+      loaders.push(
+        {
+          loader: require.resolve('resolve-url-loader'),
+          options: {
+            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+            root: paths.appSrc,
+          },
+        },
+        {
+          loader: require.resolve(preProcessor),
+          options: {
+            sourceMap: true,
+          },
+        }
+      );
+    }
+    return loaders;
+  };
+
+  return {
+    target: ['browserslist'],
+    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+    // Stop compilation early in production
+    bail: isEnvProduction,
+    devtool: isEnvProduction
+      ? shouldUseSourceMap
+        ? 'source-map'
+        : false
+      : isEnvDevelopment && 'cheap-module-source-map',
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: paths.appIndexJs,
+    output: {
+      // The build folder.
+      path: paths.appBuild,
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: isEnvDevelopment,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].js'
+        : isEnvDevelopment && 'static/js/bundle.js',
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].chunk.js'
+        : isEnvDevelopment && 'static/js/[name].chunk.js',
+      assetModuleFilename: 'static/media/[name].[hash][ext]',
+      // webpack uses `publicPath` to determine where the app is being served from.
+      // It requires a trailing slash, or the file assets will get an incorrect path.
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      publicPath: paths.publicUrlOrPath,
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: isEnvProduction
+        ? info =>
+            path
+              .relative(paths.appSrc, info.absoluteResourcePath)
+              .replace(/\\/g, '/')
+        : isEnvDevelopment &&
+          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+    },
+    cache: {
+      type: 'filesystem',
+      version: createEnvironmentHash(env.raw),
+      cacheDirectory: paths.appWebpackCache,
+      store: 'pack',
+      buildDependencies: {
+        defaultWebpack: ['webpack/lib/'],
+        config: [__filename],
+        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
+          fs.existsSync(f)
+        ),
+      },
+    },
+    infrastructureLogging: {
+      level: 'none',
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      minimizer: [
+        // This is only used in production mode
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+              // We want terser to parse ecma 8 code. However, we don't want it
+              // to apply any minification steps that turns valid ecma 5 code
+              // into invalid ecma 5 code. This is why the 'compress' and 'output'
+              // sections only apply transformations that are ecma 5 safe
+              // https://github.com/facebook/create-react-app/pull/4234
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+              // Disabled because of an issue with Terser breaking valid code:
+              // https://github.com/facebook/create-react-app/issues/5250
+              // Pending further investigation:
+              // https://github.com/terser-js/terser/issues/120
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+            },
+            // Added for profiling in devtools
+            keep_classnames: isEnvProductionProfile,
+            keep_fnames: isEnvProductionProfile,
+            output: {
+              ecma: 5,
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+        }),
+        // This is only used in production mode
+        new CssMinimizerPlugin(),
+      ],
+    },
+    resolve: {
+      // This allows you to set a fallback for where webpack should look for modules.
+      // We placed these paths second because we want `node_modules` to "win"
+      // if there are any conflicts. This matches Node resolution mechanism.
+      // https://github.com/facebook/create-react-app/issues/253
+      modules: ['node_modules', paths.appNodeModules].concat(
+        modules.additionalModulePaths || []
+      ),
+      // These are the reasonable defaults supported by the Node ecosystem.
+      // We also include JSX as a common component filename extension to support
+      // some tools, although we do not recommend using it, see:
+      // https://github.com/facebook/create-react-app/issues/290
+      // `web` extension prefixes have been added for better support
+      // for React Native Web.
+      extensions: paths.moduleFileExtensions
+        .map(ext => `.${ext}`)
+        .filter(ext => useTypeScript || !ext.includes('ts')),
+      alias: {
+        // Support React Native Web
+        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+        'react-native': 'react-native-web',
+        // Allows for better profiling with ReactDevTools
+        ...(isEnvProductionProfile && {
+          'react-dom$': 'react-dom/profiling',
+          'scheduler/tracing': 'scheduler/tracing-profiling',
+        }),
+        ...(modules.webpackAliases || {}),
+      },
+      plugins: [
+        // Prevents users from importing files from outside of src/ (or node_modules/).
+        // This often causes confusion because we only process files within src/ with babel.
+        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+        // please link the files into your node_modules/ and let module-resolution kick in.
+        // Make sure your source files are compiled, as they will not be processed in any way.
+        new ModuleScopePlugin(paths.appSrc, [
+          paths.appPackageJson,
+          reactRefreshRuntimeEntry,
+          reactRefreshWebpackPluginRuntimeEntry,
+          babelRuntimeEntry,
+          babelRuntimeEntryHelpers,
+          babelRuntimeRegenerator,
+        ]),
+      ],
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+        // Handle node_modules packages that contain sourcemaps
+        shouldUseSourceMap && {
+          enforce: 'pre',
+          exclude: /@babel(?:\/|\\{1,2})runtime/,
+          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
+          loader: require.resolve('source-map-loader'),
+        },
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            // TODO: Merge this config once `image/avif` is in the mime-db
+            // https://github.com/jshttp/mime-db
+            {
+              test: [/\.avif$/],
+              type: 'asset',
+              mimetype: 'image/avif',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
+              },
+            },
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              type: 'asset',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
+              },
+            },
+            {
+              test: /\.svg$/,
+              use: [
+                {
+                  loader: require.resolve('@svgr/webpack'),
+                  options: {
+                    prettier: false,
+                    svgo: false,
+                    svgoConfig: {
+                      plugins: [{ removeViewBox: false }],
+                    },
+                    titleProp: true,
+                    ref: true,
+                  },
+                },
+                {
+                  loader: require.resolve('file-loader'),
+                  options: {
+                    name: 'static/media/[name].[hash].[ext]',
+                  },
+                },
+              ],
+              issuer: {
+                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+              },
+            },
+            // Process application JS with Babel.
+            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+            {
+              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              include: paths.appSrc,
+              loader: require.resolve('babel-loader'),
+              options: {
+                customize: require.resolve(
+                  'babel-preset-react-app/webpack-overrides'
+                ),
+                presets: [
+                  [
+                    require.resolve('babel-preset-react-app'),
+                    {
+                      runtime: hasJsxRuntime ? 'automatic' : 'classic',
+                    },
+                  ],
+                ],
+                
+                plugins: [
+                  isEnvDevelopment &&
+                    shouldUseReactRefresh &&
+                    require.resolve('react-refresh/babel'),
+                ].filter(Boolean),
+                // This is a feature of `babel-loader` for webpack (not Babel itself).
+                // It enables caching results in ./node_modules/.cache/babel-loader/
+                // directory for faster rebuilds.
+                cacheDirectory: true,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
+                compact: isEnvProduction,
+              },
+            },
+            // Process any JS outside of the app with Babel.
+            // Unlike the application JS, we only compile the standard ES features.
+            {
+              test: /\.(js|mjs)$/,
+              exclude: /@babel(?:\/|\\{1,2})runtime/,
+              loader: require.resolve('babel-loader'),
+              options: {
+                babelrc: false,
+                configFile: false,
+                compact: false,
+                presets: [
+                  [
+                    require.resolve('babel-preset-react-app/dependencies'),
+                    { helpers: true },
+                  ],
+                ],
+                cacheDirectory: true,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
+                
+                // Babel sourcemaps are needed for debugging into node_modules
+                // code.  Without the options below, debuggers like VSCode
+                // show incorrect code and set breakpoints on the wrong lines.
+                sourceMaps: shouldUseSourceMap,
+                inputSourceMap: shouldUseSourceMap,
+              },
+            },
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
+            // By default we support CSS Modules with the extension .module.css
+            {
+              test: cssRegex,
+              exclude: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
+                modules: {
+                  mode: 'icss',
+                },
+              }),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+            // using the extension .module.css
+            {
+              test: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
+                modules: {
+                  mode: 'local',
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
+              }),
+            },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
+                  modules: {
+                    mode: 'icss',
+                  },
+                },
+                'sass-loader'
+              ),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
+                  modules: {
+                    mode: 'local',
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
+                },
+                'sass-loader'
+              ),
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise be processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpacks internal loaders.
+              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              type: 'asset/resource',
+            },
+            // ** STOP ** Are you adding a new loader?
+            // Make sure to add the new loader(s) before the "file" loader.
+          ],
+        },
+      ].filter(Boolean),
+    },
+    plugins: [
+      // Generates an `index.html` file with the <script> injected.
+      new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
+            inject: true,
+            template: paths.appHtml,
+          },
+          isEnvProduction
+            ? {
+                minify: {
+                  removeComments: true,
+                  collapseWhitespace: true,
+                  removeRedundantAttributes: true,
+                  useShortDoctype: true,
+                  removeEmptyAttributes: true,
+                  removeStyleLinkTypeAttributes: true,
+                  keepClosingSlash: true,
+                  minifyJS: true,
+                  minifyCSS: true,
+                  minifyURLs: true,
+                },
+              }
+            : undefined
+        )
+      ),
+      // Inlines the webpack runtime script. This script is too small to warrant
+      // a network request.
+      // https://github.com/facebook/create-react-app/issues/5358
+      isEnvProduction &&
+        shouldInlineRuntimeChunk &&
+        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
+      // Makes some environment variables available in index.html.
+      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // It will be an empty string unless you specify "homepage"
+      // in `package.json`, in which case it will be the pathname of that URL.
+      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+      // This gives some necessary context to module not found errors, such as
+      // the requesting resource.
+      new ModuleNotFoundPlugin(paths.appPath),
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+      // It is absolutely essential that NODE_ENV is set to production
+      // during a production build.
+      // Otherwise React will be compiled in the very slow development mode.
+      new webpack.DefinePlugin(env.stringified),
+      // Experimental hot reloading for React .
+      // https://github.com/facebook/react/tree/main/packages/react-refresh
+      isEnvDevelopment &&
+        shouldUseReactRefresh &&
+        new ReactRefreshWebpackPlugin({
+          overlay: false,
+        }),
+      // Watcher doesn't work well if you mistype casing in a path so we use
+      // a plugin that prints an error when you attempt to do this.
+      // See https://github.com/facebook/create-react-app/issues/240
+      isEnvDevelopment && new CaseSensitivePathsPlugin(),
+      isEnvProduction &&
+        new MiniCssExtractPlugin({
+          // Options similar to the same options in webpackOptions.output
+          // both options are optional
+          filename: 'static/css/[name].[contenthash:8].css',
+          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+        }),
+      // Generate an asset manifest file with the following content:
+      // - "files" key: Mapping of all asset filenames to their corresponding
+      //   output file so that tools can pick it up without having to parse
+      //   `index.html`
+      // - "entrypoints" key: Array of files which are included in `index.html`,
+      //   can be used to reconstruct the HTML if necessary
+      new WebpackManifestPlugin({
+        fileName: 'asset-manifest.json',
+        publicPath: paths.publicUrlOrPath,
+        generate: (seed, files, entrypoints) => {
+          const manifestFiles = files.reduce((manifest, file) => {
+            manifest[file.name] = file.path;
+            return manifest;
+          }, seed);
+          const entrypointFiles = entrypoints.main.filter(
+            fileName => !fileName.endsWith('.map')
+          );
+
+          return {
+            files: manifestFiles,
+            entrypoints: entrypointFiles,
+          };
+        },
+      }),
+      // Moment.js is an extremely popular library that bundles large locale files
+      // by default due to how webpack interprets its code. This is a practical
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You can remove this if you don't use Moment.js:
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      }),
+      // Generate a service worker script that will precache, and keep up to date,
+      // the HTML & assets that are part of the webpack build.
+      isEnvProduction &&
+        fs.existsSync(swSrc) &&
+        new WorkboxWebpackPlugin.InjectManifest({
+          swSrc,
+          dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
+          exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
+          // Bump up the default maximum size (2mb) that's precached,
+          // to make lazy-loading failure scenarios less likely.
+          // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
+          maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+        }),
+      // TypeScript type checking
+      useTypeScript &&
+        new ForkTsCheckerWebpackPlugin({
+          async: isEnvDevelopment,
+          typescript: {
+            typescriptPath: resolve.sync('typescript', {
+              basedir: paths.appNodeModules,
+            }),
+            configOverwrite: {
+              compilerOptions: {
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
+                skipLibCheck: true,
+                inlineSourceMap: false,
+                declarationMap: false,
+                noEmit: true,
+                incremental: true,
+                tsBuildInfoFile: paths.appTsBuildInfoFile,
+              },
+            },
+            context: paths.appPath,
+            diagnosticOptions: {
+              syntactic: true,
+            },
+            mode: 'write-references',
+            // profile: true,
+          },
+          issue: {
+            // This one is specifically to match during CI tests,
+            // as micromatch doesn't match
+            // '../cra-template-typescript/template/src/App.tsx'
+            // otherwise.
+            include: [
+              { file: '../**/src/**/*.{ts,tsx}' },
+              { file: '**/src/**/*.{ts,tsx}' },
+            ],
+            exclude: [
+              { file: '**/src/**/__tests__/**' },
+              { file: '**/src/**/?(*.){spec|test}.*' },
+              { file: '**/src/setupProxy.*' },
+              { file: '**/src/setupTests.*' },
+            ],
+          },
+          logger: {
+            infrastructure: 'silent',
+          },
+        }),
+      !disableESLintPlugin &&
+        new ESLintPlugin({
+          // Plugin options
+          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+          formatter: require.resolve('react-dev-utils/eslintFormatter'),
+          eslintPath: require.resolve('eslint'),
+          failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
+          context: paths.appSrc,
+          cache: true,
+          cacheLocation: path.resolve(
+            paths.appNodeModules,
+            '.cache/.eslintcache'
+          ),
+          // ESLint class options
+          cwd: paths.appPath,
+          resolvePluginsRelativeTo: __dirname,
+          baseConfig: {
+            extends: [require.resolve('eslint-config-react-app/base')],
+            rules: {
+              ...(!hasJsxRuntime && {
+                'react/react-in-jsx-scope': 'error',
+              }),
+            },
+          },
+        }),
+    ].filter(Boolean),
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false,
+  };
+};

gui/config/webpack/persistentCache/createEnvironmentHash.js

@@ -0,0 +1,9 @@
+'use strict';
+const { createHash } = require('crypto');
+
+module.exports = env => {
+  const hash = createHash('md5');
+  hash.update(JSON.stringify(env));
+
+  return hash.digest('hex');
+};

gui/config/webpackDevServer.config.js

@@ -0,0 +1,127 @@
+'use strict';
+
+const fs = require('fs');
+const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
+const ignoredFiles = require('react-dev-utils/ignoredFiles');
+const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
+const paths = require('./paths');
+const getHttpsConfig = require('./getHttpsConfig');
+
+const host = process.env.HOST || '0.0.0.0';
+const sockHost = process.env.WDS_SOCKET_HOST;
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
+const sockPort = process.env.WDS_SOCKET_PORT;
+
+module.exports = function (proxy, allowedHost) {
+  const disableFirewall =
+    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
+  return {
+    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
+    // websites from potentially accessing local content through DNS rebinding:
+    // https://github.com/webpack/webpack-dev-server/issues/887
+    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
+    // However, it made several existing use cases such as development in cloud
+    // environment or subdomains in development significantly more complicated:
+    // https://github.com/facebook/create-react-app/issues/2271
+    // https://github.com/facebook/create-react-app/issues/2233
+    // While we're investigating better solutions, for now we will take a
+    // compromise. Since our WDS configuration only serves files in the `public`
+    // folder we won't consider accessing them a vulnerability. However, if you
+    // use the `proxy` feature, it gets more dangerous because it can expose
+    // remote code execution vulnerabilities in backends like Django and Rails.
+    // So we will disable the host check normally, but enable it if you have
+    // specified the `proxy` setting. Finally, we let you override it if you
+    // really know what you're doing with a special environment variable.
+    // Note: ["localhost", ".localhost"] will support subdomains - but we might
+    // want to allow setting the allowedHosts manually for more complex setups
+    allowedHosts: disableFirewall ? 'all' : [allowedHost],
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': '*',
+      'Access-Control-Allow-Headers': '*',
+    },
+    // Enable gzip compression of generated files.
+    compress: true,
+    static: {
+      // By default WebpackDevServer serves physical files from current directory
+      // in addition to all the virtual build products that it serves from memory.
+      // This is confusing because those files won’t automatically be available in
+      // production build folder unless we copy them. However, copying the whole
+      // project directory is dangerous because we may expose sensitive files.
+      // Instead, we establish a convention that only files in `public` directory
+      // get served. Our build script will copy `public` into the `build` folder.
+      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+      // Note that we only recommend to use `public` folder as an escape hatch
+      // for files like `favicon.ico`, `manifest.json`, and libraries that are
+      // for some reason broken when imported through webpack. If you just want to
+      // use an image, put it in `src` and `import` it from JavaScript instead.
+      directory: paths.appPublic,
+      publicPath: [paths.publicUrlOrPath],
+      // By default files from `contentBase` will not trigger a page reload.
+      watch: {
+        // Reportedly, this avoids CPU overload on some systems.
+        // https://github.com/facebook/create-react-app/issues/293
+        // src/node_modules is not ignored to support absolute imports
+        // https://github.com/facebook/create-react-app/issues/1065
+        ignored: ignoredFiles(paths.appSrc),
+      },
+    },
+    client: {
+      webSocketURL: {
+        // Enable custom sockjs pathname for websocket connection to hot reloading server.
+        // Enable custom sockjs hostname, pathname and port for websocket connection
+        // to hot reloading server.
+        hostname: sockHost,
+        pathname: sockPath,
+        port: sockPort,
+      },
+      overlay: {
+        errors: true,
+        warnings: false,
+      },
+    },
+    devMiddleware: {
+      // It is important to tell WebpackDevServer to use the same "publicPath" path as
+      // we specified in the webpack config. When homepage is '.', default to serving
+      // from the root.
+      // remove last slash so user can land on `/test` instead of `/test/`
+      publicPath: paths.publicUrlOrPath.slice(0, -1),
+    },
+
+    https: getHttpsConfig(),
+    host,
+    historyApiFallback: {
+      // Paths with dots should still use the history fallback.
+      // See https://github.com/facebook/create-react-app/issues/387.
+      disableDotRule: true,
+      index: paths.publicUrlOrPath,
+    },
+    // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
+    proxy,
+    onBeforeSetupMiddleware(devServer) {
+      // Keep `evalSourceMapMiddleware`
+      // middlewares before `redirectServedPath` otherwise will not have any effect
+      // This lets us fetch source contents from webpack for the error overlay
+      devServer.app.use(evalSourceMapMiddleware(devServer));
+
+      if (fs.existsSync(paths.proxySetup)) {
+        // This registers user provided middleware for proxy reasons
+        require(paths.proxySetup)(devServer.app);
+      }
+    },
+    onAfterSetupMiddleware(devServer) {
+      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
+
+      // This service worker file is effectively a 'no-op' that will reset any
+      // previous service worker registered for the same host:port combination.
+      // We do this in development to avoid hitting the production cache if
+      // it used the same host and port.
+      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+    },
+  };
+};

gui/docs/LICENSE-APACHE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2022 SlimeVR Contributors
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

gui/docs/LICENSE-MIT

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 SlimeVR Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

gui/package.json

@@ -0,0 +1,185 @@
+{
+  "name": "slimevr-ui",
+  "version": "0.2.0",
+  "private": true,
+  "dependencies": {
+    "@babel/core": "^7.16.0",
+    "@fontsource/poppins": "^4.5.8",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@svgr/webpack": "^6.2.1",
+    "@tauri-apps/api": "^1.0.2",
+    "add": "^2.0.6",
+    "babel-jest": "^27.4.2",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-preset-react-app": "^10.0.1",
+    "bfj": "^7.0.2",
+    "browserslist": "^4.18.1",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "classnames": "^2.3.1",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.2.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-webpack-plugin": "^3.1.1",
+    "file-loader": "^6.2.0",
+    "flatbuffers": "^2.0.6",
+    "fs-extra": "^10.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "ip-num": "^1.4.1",
+    "jest": "^27.4.3",
+    "jest-resolve": "^27.4.2",
+    "jest-watch-typeahead": "^1.0.0",
+    "math3d": "^0.2.2",
+    "mini-css-extract-plugin": "^2.4.5",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
+    "prompts": "^2.4.2",
+    "quaternion": "^1.3.0",
+    "react": "^18.0.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.0",
+    "react-dom": "^18.0.0",
+    "react-hook-form": "^7.29.0",
+    "react-modal": "^3.15.1",
+    "react-refresh": "^0.11.0",
+    "react-router-dom": "^6.2.2",
+    "resolve": "^1.20.0",
+    "resolve-url-loader": "^4.0.0",
+    "sass-loader": "^12.3.0",
+    "semver": "^7.3.5",
+    "solarxr-protocol": "github:SlimeVR/SolarXR-Protocol",
+    "source-map-loader": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.2",
+    "terser-webpack-plugin": "^5.2.5",
+    "typescript": "^4.6.3",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.64.4",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "workbox-webpack-plugin": "^6.4.1"
+  },
+  "scripts": {
+    "start": "cross-env BROWSER=none node scripts/start.js",
+    "build": "node scripts/build.js",
+    "test": "node scripts/test.js",
+    "dev": "tauri dev",
+    "tauri": "tauri",
+    "lint": "eslint src/**/*.{js,jsx,ts,tsx,json}",
+    "lint:fix": "eslint --fix src/**/*.{js,jsx,ts,tsx,json}",
+    "format": "prettier --write src/**/*.{js,jsx,ts,tsx,css,md,json} --config ./.prettierrc"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.0",
+    "@tauri-apps/cli": "^1.0.2",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/math3d": "^0.2.3",
+    "@types/node": "^16.11.26",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-modal": "^3.13.1",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
+    "autoprefixer": "^10.4.4",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.18.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.1.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-prettier": "^4.1.0",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.0",
+    "node-polyfill-webpack-plugin": "^1.1.4",
+    "postcss": "^8.4.12",
+    "prettier": "^2.7.1",
+    "pretty-quick": "^3.1.3",
+    "tailwindcss": "^3.0.23"
+  },
+  "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "modulePaths": [],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ],
+    "resetMocks": true
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  }
+}

gui/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

gui/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

gui/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

gui/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

gui/rust-toolchain.toml

@@ -0,0 +1,2 @@
+[toolchain]
+channel = "stable"

gui/scripts/build.js

@@ -0,0 +1,217 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const path = require('path');
+const chalk = require('react-dev-utils/chalk');
+const fs = require('fs-extra');
+const bfj = require('bfj');
+const webpack = require('webpack');
+const configFactory = require('../config/webpack.config');
+const paths = require('../config/paths');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
+const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
+const printBuildError = require('react-dev-utils/printBuildError');
+
+const measureFileSizesBeforeBuild =
+  FileSizeReporter.measureFileSizesBeforeBuild;
+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
+const useYarn = fs.existsSync(paths.yarnLockFile);
+
+// These sizes are pretty large. We'll warn for bundles exceeding them.
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+const argv = process.argv.slice(2);
+const writeStatsJson = argv.indexOf('--stats') !== -1;
+
+// Generate configuration
+const config = configFactory('production');
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // First, read the current file sizes in build directory.
+    // This lets us display how much they changed later.
+    return measureFileSizesBeforeBuild(paths.appBuild);
+  })
+  .then(previousFileSizes => {
+    // Remove all content but keep the directory so that
+    // if you're in it, you don't end up in Trash
+    fs.emptyDirSync(paths.appBuild);
+    // Merge with the public folder
+    copyPublicFolder();
+    // Start the webpack build
+    return build(previousFileSizes);
+  })
+  .then(
+    ({ stats, previousFileSizes, warnings }) => {
+      if (warnings.length) {
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        console.log(warnings.join('\n\n'));
+        console.log(
+          '\nSearch for the ' +
+            chalk.underline(chalk.yellow('keywords')) +
+            ' to learn more about each warning.'
+        );
+        console.log(
+          'To ignore, add ' +
+            chalk.cyan('// eslint-disable-next-line') +
+            ' to the line before.\n'
+        );
+      } else {
+        console.log(chalk.green('Compiled successfully.\n'));
+      }
+
+      console.log('File sizes after gzip:\n');
+      printFileSizesAfterBuild(
+        stats,
+        previousFileSizes,
+        paths.appBuild,
+        WARN_AFTER_BUNDLE_GZIP_SIZE,
+        WARN_AFTER_CHUNK_GZIP_SIZE
+      );
+      console.log();
+
+      const appPackage = require(paths.appPackageJson);
+      const publicUrl = paths.publicUrlOrPath;
+      const publicPath = config.output.publicPath;
+      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
+      );
+    },
+    err => {
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+      if (tscCompileOnError) {
+        console.log(
+          chalk.yellow(
+            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+          )
+        );
+        printBuildError(err);
+      } else {
+        console.log(chalk.red('Failed to compile.\n'));
+        printBuildError(err);
+        process.exit(1);
+      }
+    }
+  )
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });
+
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  console.log('Creating an optimized production build...');
+
+  const compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      let messages;
+      if (err) {
+        if (!err.message) {
+          return reject(err);
+        }
+
+        let errMessage = err.message;
+
+        // Add additional information for postcss errors
+        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
+          errMessage +=
+            '\nCompileError: Begins at CSS selector ' +
+            err['postcssNode'].selector;
+        }
+
+        messages = formatWebpackMessages({
+          errors: [errMessage],
+          warnings: [],
+        });
+      } else {
+        messages = formatWebpackMessages(
+          stats.toJson({ all: false, warnings: true, errors: true })
+        );
+      }
+      if (messages.errors.length) {
+        // Only keep the first error. Others are often indicative
+        // of the same problem, but confuse the reader with noise.
+        if (messages.errors.length > 1) {
+          messages.errors.length = 1;
+        }
+        return reject(new Error(messages.errors.join('\n\n')));
+      }
+      if (
+        process.env.CI &&
+        (typeof process.env.CI !== 'string' ||
+          process.env.CI.toLowerCase() !== 'false') &&
+        messages.warnings.length
+      ) {
+        // Ignore sourcemap warnings in CI builds. See #8227 for more info.
+        const filteredWarnings = messages.warnings.filter(
+          w => !/Failed to parse source map/.test(w)
+        );
+        if (filteredWarnings.length) {
+          console.log(
+            chalk.yellow(
+              '\nTreating warnings as errors because process.env.CI = true.\n' +
+                'Most CI servers set it automatically.\n'
+            )
+          );
+          return reject(new Error(filteredWarnings.join('\n\n')));
+        }
+      }
+
+      const resolveArgs = {
+        stats,
+        previousFileSizes,
+        warnings: messages.warnings,
+      };
+
+      if (writeStatsJson) {
+        return bfj
+          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
+          .then(() => resolve(resolveArgs))
+          .catch(error => reject(new Error(error)));
+      }
+
+      return resolve(resolveArgs);
+    });
+  });
+}
+
+function copyPublicFolder() {
+  fs.copySync(paths.appPublic, paths.appBuild, {
+    dereference: true,
+    filter: file => file !== paths.appHtml,
+  });
+}

gui/scripts/start.js

@@ -0,0 +1,154 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const fs = require('fs');
+const chalk = require('react-dev-utils/chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
+const semver = require('semver');
+const paths = require('../config/paths');
+const configFactory = require('../config/webpack.config');
+const createDevServerConfig = require('../config/webpackDevServer.config');
+const getClientEnvironment = require('../config/env');
+const react = require(require.resolve('react', { paths: [paths.appPath] }));
+
+const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+const useYarn = fs.existsSync(paths.yarnLockFile);
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Tools like Cloud9 rely on this.
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+if (process.env.HOST) {
+  console.log(
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST)
+      )}`
+    )
+  );
+  console.log(
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+  );
+  console.log(
+    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
+  );
+  console.log();
+}
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // We attempt to use the default port but if it is busy, we offer the user to
+    // run on a different port. `choosePort()` Promise resolves to the next free port.
+    return choosePort(HOST, DEFAULT_PORT);
+  })
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+
+    const config = configFactory('development');
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+
+    const useTypeScript = fs.existsSync(paths.appTsConfig);
+    const urls = prepareUrls(
+      protocol,
+      HOST,
+      port,
+      paths.publicUrlOrPath.slice(0, -1)
+    );
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler({
+      appName,
+      config,
+      urls,
+      useYarn,
+      useTypeScript,
+      webpack,
+    });
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(
+      proxySetting,
+      paths.appPublic,
+      paths.publicUrlOrPath
+    );
+    // Serve webpack assets generated by the compiler over a web server.
+    const serverConfig = {
+      ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
+      host: HOST,
+      port,
+    };
+    const devServer = new WebpackDevServer(serverConfig, compiler);
+    // Launch WebpackDevServer.
+    devServer.startCallback(() => {
+      if (isInteractive) {
+        clearConsole();
+      }
+
+      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
+        console.log(
+          chalk.yellow(
+            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
+          )
+        );
+      }
+
+      console.log(chalk.cyan('Starting the development server...\n'));
+      openBrowser(urls.localUrlForBrowser);
+    });
+
+    ['SIGINT', 'SIGTERM'].forEach(function (sig) {
+      process.on(sig, function () {
+        devServer.close();
+        process.exit();
+      });
+    });
+
+    if (process.env.CI !== 'true') {
+      // Gracefully exit when stdin ends
+      process.stdin.on('end', function () {
+        devServer.close();
+        process.exit();
+      });
+    }
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });

gui/scripts/test.js

@@ -0,0 +1,52 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const jest = require('jest');
+const execSync = require('child_process').execSync;
+let argv = process.argv.slice(2);
+
+function isInGitRepository() {
+  try {
+    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isInMercurialRepository() {
+  try {
+    execSync('hg --cwd . root', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Watch unless on CI or explicitly running all tests
+if (
+  !process.env.CI &&
+  argv.indexOf('--watchAll') === -1 &&
+  argv.indexOf('--watchAll=false') === -1
+) {
+  // https://github.com/facebook/create-react-app/issues/5210
+  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
+  argv.push(hasSourceControl ? '--watch' : '--watchAll');
+}
+
+
+jest.run(argv);

gui/src-tauri/.gitignore

@@ -0,0 +1,4 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+WixTools

gui/src-tauri/Cargo.toml

@@ -0,0 +1,34 @@
+[package]
+name = "slimevr_ui"
+version = "0.1.0"
+description = "SlimeVR GUI Application"
+license = "MIT OR Apache-2.0"
+repository = ""
+default-run = "slimevr_ui"
+edition = "2021"
+rust-version = "1.59"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[features]
+# by default Tauri runs in production mode
+# when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL
+default = ["custom-protocol"]
+# this feature is used used for production builds where `devPath` points to the filesystem
+# DO NOT remove this
+custom-protocol = ["tauri/custom-protocol"]
+
+[build-dependencies]
+tauri-build = { version = "1", features = [] }
+
+[dependencies]
+serde_json = "1"
+serde = { version = "1", features = ["derive"] }
+tauri = { version = "1.1.1", features = ["cli", "devtools", "fs-all", "path-all", "shell-execute", "window-close", "window-maximize", "window-minimize", "window-set-resizable", "window-set-title", "window-start-dragging", "window-unmaximize", "window-unminimize"] }
+pretty_env_logger = "0.4"
+log = "0.4"
+clap-verbosity-flag = "1"
+tauri-plugin-window-state = "0.1.0"
+
+[target.'cfg(windows)'.dependencies]
+win32job = "1"

gui/src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

gui/src-tauri/run.bat.old

@@ -0,0 +1,11 @@
+@echo off
+setlocal enableextensions
+
+echo "TEST"
+
+cd /d "C:\Program Files (x86)\SlimeVR Server"
+
+jre\bin\java.exe -Xmx512M -jar slimevr.jar --no-gui
+if %errorlevel% NEQ 0 (
+    pause
+)

gui/src-tauri/src/main.rs

@@ -0,0 +1,127 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use clap::Parser;
+use clap_verbosity_flag::{InfoLevel, Verbosity};
+use std::env;
+use std::path::PathBuf;
+use tauri::api::clap;
+use tauri::api::process::Command;
+use tauri::Manager;
+
+#[derive(Parser)]
+#[clap(version, about)]
+struct Cli {
+    #[clap(short, long)]
+    display_console: bool,
+    #[clap(long)]
+    launch_from_path: Option<PathBuf>,
+    #[clap(flatten)]
+    verbosity: Verbosity<InfoLevel>,
+}
+
+fn is_valid_path(path: &PathBuf) -> bool {
+
+    let java_folder = path.join("jre");
+    let server_path = path.join("slimevr.jar");
+
+    return java_folder.exists() && server_path.exists();
+}
+
+fn get_launch_path(cli: Cli) -> Option<PathBuf> {
+    let mut path = cli.launch_from_path.unwrap_or_default();
+    if path.exists() && is_valid_path(&path) {
+        return Some(path);
+    }
+
+    path = env::current_dir().unwrap();
+    if path.exists() && is_valid_path(&path) {
+        return Some(path);
+    }
+    
+    path = PathBuf::from(env!("CARGO_MANIFEST_DIR"));
+    if path.exists() && is_valid_path(&path) {
+        return Some(path);
+    }
+   
+    None
+}
+
+fn main() {
+    let cli = Cli::parse();
+
+    // Set up loggers and global handlers
+    {
+        if std::env::var_os("RUST_LOG").is_none() {
+            std::env::set_var("RUST_LOG", "info")
+        }
+        pretty_env_logger::init();
+    }
+
+    // Ensure child processes die when spawned on windows
+    #[cfg(target_os = "windows")]
+    {
+        use win32job::{ExtendedLimitInfo, Job};
+
+        let mut info = ExtendedLimitInfo::new();
+        info.limit_kill_on_job_close();
+        let job = Job::create_with_limit_info(&mut info).expect("Failed to create Job");
+        job.assign_current_process()
+            .expect("Failed to assign current process to Job");
+
+        // We don't do anything with the job anymore, but we shouldn't drop it because that would
+        // terminate our process tree. So we intentionally leak it instead.
+        std::mem::forget(job);
+    }
+
+    // Spawn server process
+    let run_path = get_launch_path(cli);
+
+    let stdout_recv = if let Some(p) = run_path {
+        log::info!("Server found on path: {}", p.to_str().unwrap());
+        
+        let java_folder = p.join("jre");
+        let (recv, _child) = Command::new(java_folder.join("bin/java").to_str().unwrap())
+            .current_dir(p)
+            .args(["-Xmx512M", "-jar", "slimevr.jar", "--no-gui"])
+            .spawn()
+            .expect("Unable to start the server jar");
+        Some(recv)
+    } else {
+        log::warn!("No server found. We will not start the server.");
+        None
+    };
+
+    tauri::Builder::default()
+        .plugin(tauri_plugin_window_state::Builder::default().build())
+        .setup(|app| {
+            if let Some(mut recv) = stdout_recv {
+                let app_handle = app.app_handle();
+                tauri::async_runtime::spawn(async move {
+                    use tauri::api::process::CommandEvent;
+
+                    while let Some(cmd_event) = recv.recv().await {
+                        let emit_me = match cmd_event {
+                            CommandEvent::Stderr(s) => ("stderr", s),
+                            CommandEvent::Stdout(s) => ("stdout", s),
+                            CommandEvent::Error(s) => ("error", s),
+                            CommandEvent::Terminated(s) => ("terminated", format!("{s:?}")),
+                            _ => ("other", "".to_string()),
+                        };
+                        app_handle
+                            .emit_all("server-status", emit_me)
+                            .expect("Failed to emit");
+                    }
+                    app_handle
+                        .emit_all("server-status", ("other", "receiver cancelled"))
+                        .expect("Failed to emit");
+                });
+            }
+            Ok(())
+        })
+        //
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

gui/src-tauri/tauri.conf.json

@@ -0,0 +1,86 @@
+{
+  "package": {
+    "productName": "slimevr-ui",
+    "version": "0.1.0"
+  },
+  "build": {
+    "distDir": "../build",
+    "devPath": "http://localhost:3000",
+    "beforeDevCommand": "npm run start",
+    "beforeBuildCommand": "npm run build"
+  },
+  "tauri": {
+    "bundle": {
+      "active": true,
+      "targets": "all",
+      "identifier": "slimevr.dev",
+      "icon": ["icons/icon.ico"],
+      "resources": [],
+      "externalBin": [],
+      "copyright": "",
+      "category": "DeveloperTool",
+      "shortDescription": "",
+      "longDescription": "",
+      "deb": {
+        "depends": []
+      },
+      "macOS": {
+        "frameworks": [],
+        "exceptionDomain": "",
+        "signingIdentity": null,
+        "providerShortName": null,
+        "entitlements": null
+      },
+      "windows": {
+        "certificateThumbprint": null,
+        "digestAlgorithm": "sha256",
+        "timestampUrl": ""
+      }
+    },
+    "updater": {
+      "active": false
+    },
+    "allowlist": {
+      "shell": {
+        "all": false,
+        "execute": true
+      },
+      "fs": {
+        "scope": ["$APP/*", "$APP"],
+        "all": true
+      },
+      "path": {
+        "all": true
+      },
+      "window": {
+        "setResizable": true,
+        "setTitle": true,
+        "maximize": true,
+        "unmaximize": true,
+        "minimize": true,
+        "unminimize": true,
+        "close": true,
+        "startDragging": true
+      }
+    },
+    "windows": [
+      {
+        "title": "Slimevr UI",
+        "width": 1289,
+        "height": 709,
+        "minWidth": 880,
+        "minHeight": 740,
+        "resizable": true,
+        "fullscreen": false,
+        "decorations": false,
+        "transparent": false,
+        "fileDropEnabled": false,
+        "visible": true
+      }
+    ],
+    "security": {
+      "csp": null
+    },
+    "cli": {}
+  }
+}

gui/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

gui/src/App.tsx

@@ -0,0 +1,172 @@
+import {
+  useProvideWebsocketApi,
+  WebSocketApiContext,
+} from './hooks/websocket-api';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Outlet,
+} from 'react-router-dom';
+import { Home } from './components/home/Home';
+import { AppContextProvider } from './components/providers/AppContext';
+import { useEffect } from 'react';
+import { MainLayoutRoute } from './components/MainLayout';
+import { SettingsLayoutRoute } from './components/settings/SettingsLayout';
+import { GeneralSettings } from './components/settings/pages/GeneralSettings';
+import { Serial } from './components/settings/pages/Serial';
+
+import { Event, listen } from '@tauri-apps/api/event';
+import { TopBar } from './components/TopBar';
+import { ConfigContextProvider } from './components/providers/ConfigContext';
+import { OnboardingLayout } from './components/onboarding/OnboardingLayout';
+import { HomePage } from './components/onboarding/pages/Home';
+import { WifiCredsPage } from './components/onboarding/pages/WifiCreds';
+import { ConnectTrackersPage } from './components/onboarding/pages/ConnectTracker';
+import { OnboardingContextProvider } from './components/onboarding/OnboardingContextProvicer';
+import { TrackersAssignPage } from './components/onboarding/pages/trackers-assign/TrackerAssignment';
+import { EnterVRPage } from './components/onboarding/pages/EnterVR';
+import { AutomaticMountingPage } from './components/onboarding/pages/mounting/AutomaticMounting';
+import { ManualMountingPage } from './components/onboarding/pages/mounting/ManualMounting';
+import { ResetTutorialPage } from './components/onboarding/pages/ResetTutorial';
+import { AutomaticProportionsPage } from './components/onboarding/pages/body-proportions/AutomaticProportions';
+import { ManualProportionsPage } from './components/onboarding/pages/body-proportions/ManualProportions';
+import { TrackerSettingsPage } from './components/tracker/TrackerSettings';
+import { DonePage } from './components/onboarding/pages/Done';
+
+function Layout() {
+  return (
+    <>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <MainLayoutRoute>
+              <Home />
+            </MainLayoutRoute>
+          }
+        />
+        <Route
+          path="/tracker/:trackernum/:deviceid"
+          element={
+            <MainLayoutRoute background={false}>
+              <TrackerSettingsPage />
+            </MainLayoutRoute>
+          }
+        />
+        <Route
+          path="/settings"
+          element={
+            <SettingsLayoutRoute>
+              <Outlet></Outlet>
+            </SettingsLayoutRoute>
+          }
+        >
+          <Route path="trackers" element={<GeneralSettings />} />
+          <Route path="serial" element={<Serial />} />
+        </Route>
+        <Route
+          path="/onboarding"
+          element={
+            <OnboardingLayout>
+              <Outlet></Outlet>
+            </OnboardingLayout>
+          }
+        >
+          <Route path="home" element={<HomePage />} />
+          <Route path="wifi-creds" element={<WifiCredsPage />} />
+          <Route path="connect-trackers" element={<ConnectTrackersPage />} />
+          <Route path="trackers-assign" element={<TrackersAssignPage />} />
+          <Route path="enter-vr" element={<EnterVRPage />} />
+          <Route path="mounting/auto" element={<AutomaticMountingPage />} />
+          <Route path="mounting/manual" element={<ManualMountingPage />} />
+          <Route path="reset-tutorial" element={<ResetTutorialPage />} />
+          <Route
+            path="body-proportions/auto"
+            element={<AutomaticProportionsPage />}
+          />
+          <Route
+            path="body-proportions/manual"
+            element={<ManualProportionsPage />}
+          />
+          <Route path="done" element={<DonePage />} />
+        </Route>
+        <Route path="*" element={<TopBar></TopBar>}></Route>
+      </Routes>
+    </>
+  );
+}
+
+function App() {
+  const websocketAPI = useProvideWebsocketApi();
+
+  useEffect(() => {
+    const unlisten = listen(
+      'server-status',
+      (event: Event<[string, string]>) => {
+        const [event_type, s] = event.payload;
+        if ('stderr' === event_type) {
+          // This strange invocation is what lets us lose the line information in the console
+          // See more here: https://stackoverflow.com/a/48994308
+          setTimeout(
+            console.log.bind(
+              console,
+              `%c[SERVER] %c${s}`,
+              'color:cyan',
+              'color:red'
+            )
+          );
+        } else if (event_type === 'stdout') {
+          setTimeout(
+            console.log.bind(
+              console,
+              `%c[SERVER] %c${s}`,
+              'color:cyan',
+              'color:green'
+            )
+          );
+        } else if (event_type === 'error') {
+          console.error('Error: %s', s);
+        } else if (event_type === 'terminated') {
+          console.error('Server Process Terminated: %s', s);
+        } else if (event_type === 'other') {
+          console.log('Other process event: %s', s);
+        }
+      }
+    );
+    return () => {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      unlisten.then(() => {});
+    };
+  }, []);
+
+  return (
+    <Router>
+      <ConfigContextProvider>
+        <WebSocketApiContext.Provider value={websocketAPI}>
+          <AppContextProvider>
+            <OnboardingContextProvider>
+              <div className="h-full w-full text-standard bg-background-80 text-background-10">
+                <div className="flex-col h-full">
+                  {!websocketAPI.isConnected && (
+                    <>
+                      <TopBar></TopBar>
+                      <div className="flex w-full h-full justify-center items-center p-2">
+                        {websocketAPI.isFistConnection
+                          ? 'Connecting to the server'
+                          : 'Connection lost to the server. Trying to reconnect...'}
+                      </div>
+                    </>
+                  )}
+                  {websocketAPI.isConnected && <Layout></Layout>}
+                </div>
+              </div>
+            </OnboardingContextProvider>
+          </AppContextProvider>
+        </WebSocketApiContext.Provider>
+      </ConfigContextProvider>
+    </Router>
+  );
+}
+
+export default App;

gui/src/components/BVHButton.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import { RpcMessage } from 'solarxr-protocol';
+import { RecordBVHRequestT } from 'solarxr-protocol/protocol/typescript/dist/solarxr-protocol/rpc/record-bvhrequest';
+import { RecordBVHStatusT } from 'solarxr-protocol/protocol/typescript/dist/solarxr-protocol/rpc/record-bvhstatus';
+import { useWebsocketAPI } from '../hooks/websocket-api';
+import { BigButton } from './commons/BigButton';
+import { RecordIcon } from './commons/icon/RecordIcon';
+
+export function BVHButton() {
+  const { useRPCPacket, sendRPCPacket } = useWebsocketAPI();
+  const [recording, setRecording] = useState(false);
+
+  const toggleBVH = () => {
+    const record = new RecordBVHRequestT();
+    record.stop = recording;
+    sendRPCPacket(RpcMessage.RecordBVHRequest, record);
+  };
+
+  useRPCPacket(RpcMessage.RecordBVHStatus, (data: RecordBVHStatusT) => {
+    setRecording(data.recording);
+  });
+
+  return (
+    <BigButton
+      text={recording ? 'Recording...' : 'Record BVH'}
+      icon={<RecordIcon width={20} />}
+      onClick={toggleBVH}
+    ></BigButton>
+  );
+}

gui/src/components/MainLayout.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { ResetType } from 'solarxr-protocol';
+import { useLayout } from '../hooks/layout';
+import { BVHButton } from './BVHButton';
+import { Navbar } from './Navbar';
+import { ResetButton } from './home/ResetButton';
+import { TopBar } from './TopBar';
+import classNames from 'classnames';
+import { OverlayWidget } from './widgets/OverlayWidget';
+
+export function MainLayoutRoute({
+  children,
+  background = true,
+  widgets = true,
+}: {
+  children: ReactNode;
+  background?: boolean;
+  widgets?: boolean;
+}) {
+  const { layoutHeight, ref } = useLayout<HTMLDivElement>();
+  const { layoutWidth, ref: refw } = useLayout<HTMLDivElement>();
+
+  return (
+    <>
+      <TopBar></TopBar>
+      <div ref={ref} className="flex-grow" style={{ height: layoutHeight }}>
+        <div className="flex h-full pb-3">
+          <Navbar></Navbar>
+          <div
+            className="flex gap-2 pr-3 w-full"
+            ref={refw}
+            style={{ minWidth: layoutWidth }}
+          >
+            <div
+              className={classNames(
+                'flex flex-col rounded-xl w-full overflow-hidden',
+                background && 'bg-background-70'
+              )}
+            >
+              {children}
+            </div>
+            {widgets && (
+              <div className="flex flex-col px-2 min-w-[274px] w-[274px] gap-2 pt-2 rounded-xl overflow-y-auto bg-background-70">
+                <div className="grid grid-cols-2 gap-2 w-full">
+                  <ResetButton type={ResetType.Quick}></ResetButton>
+                  <ResetButton type={ResetType.Full}></ResetButton>
+                  <ResetButton type={ResetType.Mounting}></ResetButton>
+                  <BVHButton></BVHButton>
+                </div>
+                <div className="w-full">
+                  <OverlayWidget></OverlayWidget>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

gui/src/components/Navbar.tsx

@@ -0,0 +1,102 @@
+import classnames from 'classnames';
+import { ReactChild } from 'react';
+import { useMatch, NavLink } from 'react-router-dom';
+import { CubeIcon } from './commons/icon/CubeIcon';
+import { GearIcon } from './commons/icon/GearIcon';
+
+export function NavButton({
+  to,
+  children,
+  match,
+  state = {},
+  icon,
+}: {
+  to: string;
+  children: ReactChild;
+  match?: string;
+  state?: any;
+  icon: ReactChild;
+}) {
+  const doesMatch = useMatch({
+    path: match || to,
+  });
+
+  return (
+    <NavLink
+      to={to}
+      state={state}
+      className={classnames(
+        'flex flex-col justify-center gap-4 w-[85px] h-[85px] rounded-md group select-text',
+        {
+          'bg-accent-background-50 fill-accent-background-20': doesMatch,
+          'hover:bg-background-70': !doesMatch,
+        }
+      )}
+    >
+      <div className="flex justify-around">
+        <div
+          className={classnames('scale-150', {
+            'fill-accent-lighter': doesMatch,
+            'fill-background-50': !doesMatch,
+          })}
+        >
+          {icon}
+        </div>
+      </div>
+      <div
+        className={classnames('text-center', {
+          'text-accent-background-10': doesMatch,
+          'text-background-10': !doesMatch,
+        })}
+      >
+        {children}
+      </div>
+    </NavLink>
+  );
+}
+
+export function Navbar() {
+  return (
+    <div className="flex flex-col px-2 pt-2">
+      <div className="flex flex-col flex-grow gap-2">
+        <NavButton to="/" icon={<CubeIcon></CubeIcon>}>
+          Home
+        </NavButton>
+        <NavButton
+          to="/onboarding/body-proportions/auto"
+          match="/onboarding/body-proportions/*"
+          state={{ alonePage: true }}
+          icon={<GearIcon></GearIcon>}
+        >
+          Body proportions
+        </NavButton>
+        <NavButton
+          to="/onboarding/trackers-assign"
+          state={{ alonePage: true }}
+          icon={<GearIcon></GearIcon>}
+        >
+          Tracker assignment
+        </NavButton>
+        <NavButton
+          to="/onboarding/mounting/auto"
+          match="/onboarding/mounting/*"
+          state={{ alonePage: true }}
+          icon={<GearIcon></GearIcon>}
+        >
+          Mounting Calibration
+        </NavButton>
+        <NavButton to="/onboarding/home" icon={<GearIcon></GearIcon>}>
+          Setup Wizard
+        </NavButton>
+      </div>
+      <NavButton
+        to="/settings/trackers"
+        match="/settings/*"
+        state={{ scrollTo: 'steamvr' }}
+        icon={<GearIcon></GearIcon>}
+      >
+        Settings
+      </NavButton>
+    </div>
+  );
+}

gui/src/components/TopBar.tsx

@@ -0,0 +1,81 @@
+import { ReactChild } from 'react';
+import { NavLink } from 'react-router-dom';
+import { CloseIcon } from './commons/icon/CloseIcon';
+import { MaximiseIcon } from './commons/icon/MaximiseIcon';
+import { MinimiseIcon } from './commons/icon/MinimiseIcon';
+import { SlimeVRIcon } from './commons/icon/SimevrIcon';
+import { appWindow } from '@tauri-apps/api/window';
+import { ProgressBar } from './commons/ProgressBar';
+import { Typography } from './commons/Typography';
+import packagejson from '../../package.json';
+
+export function TopBar({
+  progress,
+}: {
+  children?: ReactChild;
+  progress?: number;
+}) {
+  return (
+    <div data-tauri-drag-region className="flex gap-2 h-[38px] z-50">
+      <div
+        className="flex px-2 pb-1 mt-3 justify-around z-50"
+        data-tauri-drag-region
+      >
+        <div className="flex gap-1" data-tauri-drag-region>
+          <NavLink
+            to="/"
+            className="flex justify-around flex-col select-all"
+            data-tauri-drag-region
+          >
+            <SlimeVRIcon></SlimeVRIcon>
+          </NavLink>
+          <div className="flex justify-around flex-col" data-tauri-drag-region>
+            <Typography>SlimeVR</Typography>
+          </div>
+          <div
+            className="mx-2 flex justify-around flex-col text-standard-bold text-status-success bg-status-success bg-opacity-20 rounded-lg px-3"
+            data-tauri-drag-region
+          >
+            v{packagejson.version}
+          </div>
+        </div>
+      </div>
+      <div
+        className="flex flex-grow items-center h-full justify-center z-50"
+        data-tauri-drag-region
+      >
+        <div
+          className="flex max-w-xl h-full items-center w-full"
+          data-tauri-drag-region
+        >
+          {progress !== undefined && (
+            <ProgressBar progress={progress} height={3} parts={3}></ProgressBar>
+          )}
+        </div>
+      </div>
+      <div
+        className="flex justify-end items-center px-2 gap-2 z-50"
+        data-tauri-drag-region
+      >
+        <div
+          className="flex items-center justify-center hover:bg-background-60 rounded-full w-7 h-7"
+          onClick={() => appWindow.minimize()}
+        >
+          <MinimiseIcon></MinimiseIcon>
+        </div>
+        <div
+          className="flex items-center justify-center hover:bg-background-60 rounded-full w-7 h-7"
+          onClick={() => appWindow.toggleMaximize()}
+        >
+          <MaximiseIcon></MaximiseIcon>
+        </div>
+        <div
+          className="flex items-center justify-center hover:bg-background-60 rounded-full w-7 h-7"
+          onClick={() => appWindow.close()}
+        >
+          <CloseIcon></CloseIcon>
+        </div>
+      </div>
+    </div>
+  );
+}

gui/src/components/commons/ArrowLink.tsx

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import { ReactChild, useMemo } from 'react';
+import { NavLink } from 'react-router-dom';
+import { ArrowLeftIcon, ArrowRightIcon } from './icon/ArrowIcons';
+
+export function ArrowLink({
+  to,
+  children,
+  direction = 'left',
+  variant = 'flat',
+}: {
+  to: string;
+  children: ReactChild;
+  direction?: 'left' | 'right';
+  variant?: 'flat' | 'boxed';
+}) {
+  const classes = useMemo(() => {
+    const variantsMap = {
+      flat: classNames('justify-start'),
+      boxed: classNames(
+        'justify-between bg-background-70 rounded-md hover:bg-background-60 p-3'
+      ),
+    };
+    return classNames(
+      variantsMap[variant],
+      'flex gap-2 hover:fill-background-10 hover:text-background-10 fill-background-30 text-background-30'
+    );
+  }, [variant]);
+
+  return (
+    <NavLink to={to} className={classes}>
+      {direction === 'left' && (
+        <div className="flex flex-col justify-center">
+          <ArrowLeftIcon></ArrowLeftIcon>
+        </div>
+      )}
+      {children}
+      {direction === 'right' && (
+        <div className="flex flex-col justify-center">
+          <ArrowRightIcon></ArrowRightIcon>
+        </div>
+      )}
+    </NavLink>
+  );
+}

gui/src/components/commons/BigButton.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+import React, { ReactChild } from 'react';
+
+export function BigButton({
+  text,
+  icon,
+  disabled,
+  onClick,
+  ...props
+}: {
+  text: string;
+  disabled?: boolean;
+  icon: ReactChild;
+} & React.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      disabled={disabled}
+      onClick={onClick}
+      {...props}
+      type="button"
+      className={classNames(
+        'flex flex-col justify-center rounded-md py-3 gap-1 px-3 cursor-pointer items-center ',
+        {
+          'bg-background-60 hover:bg-background-60 cursor-not-allowed text-background-40 fill-background-40':
+            disabled,
+          'bg-background-60 hover:bg-background-50 text-standard fill-background-10':
+            !disabled,
+        },
+        props.className
+      )}
+    >
+      <div className="flex justify-around">{icon}</div>
+      <div className="flex text-default flex-grow">{text}</div>
+    </button>
+  );
+}

gui/src/components/commons/BodyDisplay.tsx

@@ -0,0 +1,197 @@
+import classNames from 'classnames';
+import {
+  ReactChild,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { BodyPart, TrackerDataT } from 'solarxr-protocol';
+import { FlatDeviceTracker } from '../../hooks/app';
+import { useTracker } from '../../hooks/tracker';
+import { PersonFrontIcon } from './PersonFrontIcon';
+import { Typography } from './Typography';
+
+interface SlotDot {
+  id: string;
+  left: number;
+  top: number;
+  height: number;
+  width: number;
+  buttonOffset: {
+    left: number;
+    top: number;
+  };
+}
+
+type DotParams = {
+  dotSize: number;
+  trackers: FlatDeviceTracker[];
+} & SlotDot;
+
+function Tracker({
+  tracker,
+  updateVelocity,
+}: {
+  tracker: TrackerDataT;
+  updateVelocity: (velocity: number) => void;
+}) {
+  const { useVelocity } = useTracker(tracker);
+
+  const velocity = useVelocity();
+
+  useEffect(() => {
+    updateVelocity(velocity);
+  }, [velocity]);
+
+  return <></>;
+}
+
+function Dot({
+  top,
+  height,
+  width,
+  buttonOffset,
+  id,
+  left,
+  dotSize,
+  trackers,
+}: DotParams) {
+  const [velocities, setVelocities] = useState<number[]>([]);
+
+  const updateVelocity = (vel: number) => {
+    if (velocities.length > 3) {
+      velocities.shift();
+    }
+    velocities.push(vel);
+    setVelocities(velocities);
+  };
+
+  const globalVelocity = useMemo(
+    () => velocities.reduce((curr, v) => curr + v, 0) / (trackers?.length || 1),
+    [velocities, trackers]
+  );
+
+  return (
+    <div
+      key={id}
+      className="absolute z-10"
+      style={{
+        top: top + height / 2 - dotSize / 2 + buttonOffset.top,
+        left: left + width / 2 - dotSize / 2 + buttonOffset.left,
+      }}
+    >
+      <div
+        className={classNames(
+          'rounded-full outline outline-2 outline-accent-background-20 bg-background-10 transition-transform'
+        )}
+        style={{
+          width: dotSize,
+          height: dotSize,
+          outlineWidth: globalVelocity * 2 + 2,
+        }}
+      ></div>
+      {trackers?.map(({ tracker }, index) => (
+        <Tracker
+          tracker={tracker}
+          key={index}
+          updateVelocity={(vel) => updateVelocity(vel)}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function BodyDisplay({
+  leftControls,
+  rightControls,
+  trackers,
+  width = 228,
+  dotsSize = 20,
+  variant = 'tracker-select',
+}: {
+  leftControls?: ReactChild;
+  rightControls?: ReactChild;
+  width?: number;
+  dotsSize?: number;
+  variant?: 'dots' | 'tracker-select';
+  trackers: FlatDeviceTracker[];
+}) {
+  const personRef = useRef<HTMLDivElement | null>(null);
+  const [slotsButtonsPos, setSlotsButtonPos] = useState<SlotDot[]>([]);
+
+  const getSlotsPos = () => {
+    return (
+      (personRef.current && [
+        ...(personRef.current.querySelectorAll('.body-part-circle') as any),
+      ]) ||
+      []
+    );
+  };
+
+  const getOffset = (el: HTMLDivElement, offset = { left: 0, top: 0 }) => {
+    const rect = el.getBoundingClientRect();
+    return {
+      left: rect.left - (offset.left || 0),
+      top: rect.top - (offset.top || 0),
+      width: rect.width || el.offsetWidth,
+      height: rect.height || el.offsetHeight,
+    };
+  };
+
+  useLayoutEffect(() => {
+    if (!personRef.current) return;
+
+    const slotsPos = getSlotsPos();
+    const personBox = personRef.current.getBoundingClientRect();
+    const slots = slotsPos.map((slot: HTMLDivElement) => {
+      const slotPosition = getOffset(slot, personBox);
+      return {
+        ...slotPosition,
+        id: slot.id,
+        buttonOffset: {
+          left: personBox.left - personBox.left,
+          top: personBox.top - personBox.top,
+        },
+      };
+    });
+    setSlotsButtonPos(slots);
+  }, [leftControls, rightControls, variant]);
+
+  const trackerPartGrouped = useMemo(
+    () =>
+      trackers.reduce<{ [key: number]: FlatDeviceTracker[] }>((curr, td) => {
+        if (!td) return curr;
+
+        const key = td.tracker.info?.bodyPart || BodyPart.NONE;
+        return {
+          ...curr,
+          [key]: [...(curr[key] || []), td],
+        };
+      }, {}),
+    [trackers]
+  );
+
+  return (
+    <div className="flex">
+      <div
+        ref={personRef}
+        className={classNames(
+          'relative w-full flex justify-center',
+          variant === 'tracker-select' && 'mx-10'
+        )}
+      >
+        <PersonFrontIcon width={width}></PersonFrontIcon>
+        {slotsButtonsPos.map((dotData) => (
+          <Dot
+            {...dotData}
+            dotSize={dotsSize}
+            key={dotData.id}
+            trackers={trackerPartGrouped[(BodyPart as any)[dotData.id]]}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

gui/src/components/commons/BodyInteractions.tsx

@@ -0,0 +1,200 @@
+import classNames from 'classnames';
+import {
+  ReactChild,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { BodyPart } from 'solarxr-protocol';
+import { PersonFrontIcon } from './PersonFrontIcon';
+
+export function BodyInteractions({
+  leftControls,
+  rightControls,
+  assignedRoles,
+  width = 228,
+  dotsSize = 20,
+  variant = 'tracker-select',
+}: {
+  leftControls?: ReactChild;
+  rightControls?: ReactChild;
+  width?: number;
+  dotsSize?: number;
+  variant?: 'dots' | 'tracker-select';
+  assignedRoles: BodyPart[];
+}) {
+  const personRef = useRef<HTMLDivElement | null>(null);
+  const leftContainerRef = useRef<HTMLDivElement | null>(null);
+  const rightContainerRef = useRef<HTMLDivElement | null>(null);
+  const canvasRefRef = useRef<HTMLCanvasElement | null>(null);
+  const [slotsButtonsPos, setSlotsButtonPos] = useState<
+    {
+      id: string;
+      left: number;
+      top: number;
+      height: number;
+      width: number;
+      hidden: boolean;
+      buttonOffset: {
+        left: number;
+        top: number;
+      };
+    }[]
+  >([]);
+
+  const getSlotsPos = () => {
+    return (
+      (personRef.current && [
+        ...(personRef.current.querySelectorAll('.body-part-circle') as any),
+      ]) ||
+      []
+    );
+  };
+
+  const getControlsPos = () => {
+    const pos = (container: HTMLDivElement) =>
+      [...(container.querySelectorAll('.control') as any)].filter(
+        ({ id }) => !!id
+      );
+
+    const left =
+      (leftContainerRef.current && pos(leftContainerRef.current)) || [];
+    const right =
+      (rightContainerRef.current && pos(rightContainerRef.current)) || [];
+    return [...left, ...right];
+  };
+
+  const getOffset = (el: HTMLDivElement, offset = { left: 0, top: 0 }) => {
+    const rect = el.getBoundingClientRect();
+    return {
+      left: rect.left - (offset.left || 0),
+      top: rect.top - (offset.top || 0),
+      width: rect.width || el.offsetWidth,
+      height: rect.height || el.offsetHeight,
+    };
+  };
+
+  useLayoutEffect(() => {
+    if (
+      !(
+        personRef.current &&
+        canvasRefRef.current &&
+        rightContainerRef.current &&
+        leftContainerRef.current
+      )
+    )
+      return;
+
+    const ctx = canvasRefRef.current.getContext('2d');
+    if (!ctx) return;
+    const slotsPos = getSlotsPos();
+    const controlsPos = getControlsPos();
+
+    canvasRefRef.current.width = canvasRefRef.current.offsetWidth;
+    canvasRefRef.current.height = canvasRefRef.current.offsetHeight;
+
+    ctx.strokeStyle = '#608AAB';
+    ctx.lineWidth = 1;
+
+    const canvasBox = canvasRefRef.current.getBoundingClientRect();
+    const personBox = personRef.current.getBoundingClientRect();
+
+    const controlsPosIds = controlsPos.map(({ id: cid }) => cid);
+    const slots = slotsPos.map((slot: HTMLDivElement) => {
+      const slotPosition = getOffset(slot, canvasBox);
+      return {
+        ...slotPosition,
+        id: slot.id,
+        hidden:
+          variant === 'tracker-select' && !controlsPosIds.includes(slot.id),
+        buttonOffset: {
+          left: canvasBox.left - personBox.left,
+          top: canvasBox.top - personBox.top,
+        },
+      };
+    });
+
+    if (variant === 'tracker-select') {
+      slots.forEach((slot) => {
+        const controls = controlsPos.filter(({ id }) => id === slot.id);
+        controls.forEach((control) => {
+          const controlPosition = getOffset(control, canvasBox);
+
+          const offsetX =
+            controlPosition.left < slot.left ? controlPosition.width : 0;
+
+          const constolLeft = controlPosition.left + offsetX;
+          const LINE_BREAK_WIDTH = 40;
+          const leftOffsetX =
+            LINE_BREAK_WIDTH * (controlPosition.left < slot.left ? -1 : 1);
+
+          ctx.beginPath();
+          ctx.moveTo(
+            constolLeft,
+            controlPosition.top + controlPosition.height / 2
+          );
+          ctx.lineTo(
+            constolLeft - leftOffsetX,
+            controlPosition.top + controlPosition.height / 2
+          );
+          ctx.lineTo(slot.left + slot.width / 2, slot.top + slot.height / 2);
+          ctx.stroke();
+        });
+      });
+    }
+    setSlotsButtonPos(slots);
+  }, [leftControls, rightControls, variant]);
+
+  return (
+    <div className="relative">
+      <canvas
+        ref={canvasRefRef}
+        className="absolute w-full h-full top-0 z-10"
+        width="100%"
+        height="100%"
+      ></canvas>
+      <div className="flex">
+        <div ref={leftContainerRef} className="z-10">
+          {leftControls}
+        </div>
+        <div
+          ref={personRef}
+          className={classNames(
+            'relative w-full flex justify-center',
+            variant === 'tracker-select' && 'mx-10'
+          )}
+        >
+          <PersonFrontIcon width={width}></PersonFrontIcon>
+          {slotsButtonsPos.map(
+            ({ top, left, height, width, id, hidden, buttonOffset }) => (
+              <div
+                key={id}
+                className="absolute z-10"
+                style={{
+                  top: top + height / 2 - dotsSize / 2 + buttonOffset.top,
+                  left: left + width / 2 - dotsSize / 2 + buttonOffset.left,
+                }}
+              >
+                <div
+                  className={classNames(
+                    'rounded-full outline outline-2 outline-background-20 transition-opacity',
+                    (assignedRoles.includes((BodyPart as any)[id]) &&
+                      'bg-background-70') ||
+                      'bg-background-10',
+                    (hidden && 'opacity-0') || 'opacity-100'
+                  )}
+                  style={{ width: dotsSize, height: dotsSize }}
+                ></div>
+              </div>
+            )
+          )}
+        </div>
+        <div ref={rightContainerRef} className="z-10">
+          {rightControls}
+        </div>
+      </div>
+    </div>
+  );
+}

gui/src/components/commons/Button.tsx

@@ -0,0 +1,103 @@
+import classNames from 'classnames';
+import React, { ReactChild, useMemo } from 'react';
+import { NavLink } from 'react-router-dom';
+import { LoaderIcon } from './icon/LoaderIcon';
+
+function ButtonContent({
+  loading,
+  icon,
+  children,
+}: {
+  loading: boolean;
+  icon?: ReactChild;
+  children: ReactChild;
+}) {
+  return (
+    <>
+      <div
+        className={classNames(
+          { 'opacity-0': loading },
+          'flex flex-row gap-2 justify-center'
+        )}
+      >
+        {icon && (
+          <div className="flex justify-center items-center fill-background-10 w-5 h-5">
+            {icon}
+          </div>
+        )}
+        {children}
+      </div>
+      {loading && (
+        <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center fill-background-10">
+          <LoaderIcon youSpinMeRightRoundBabyRightRound></LoaderIcon>
+        </div>
+      )}
+    </>
+  );
+}
+
+export function Button({
+  children,
+  variant,
+  disabled,
+  to,
+  loading = false,
+  state = {},
+  icon,
+  rounded = false,
+  ...props
+}: {
+  children: ReactChild;
+  icon?: ReactChild;
+  variant: 'primary' | 'secondary' | 'tierciary';
+  to?: string;
+  loading?: boolean;
+  rounded?: boolean;
+  state?: any;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const classes = useMemo(() => {
+    const variantsMap = {
+      primary: classNames({
+        'bg-accent-background-30 hover:bg-accent-background-20 text-standard text-background-10':
+          !disabled,
+        'bg-accent-background-40 hover:bg-accent-background-40 cursor-not-allowed text-accent-background-10':
+          disabled,
+      }),
+      secondary: classNames({
+        'bg-background-60 hover:bg-background-50 text-standard text-background-10':
+          !disabled,
+        'bg-background-60 hover:bg-background-60 cursor-not-allowed text-background-40':
+          disabled,
+      }),
+      tierciary: classNames({
+        'bg-background-50 hover:bg-background-40 text-standard text-background-10':
+          !disabled,
+        'bg-background-50 hover:bg-background-50 cursor-not-allowed text-background-40':
+          disabled,
+      }),
+    };
+    return classNames(
+      variantsMap[variant],
+      'focus:ring-4 text-center relative',
+      {
+        'rounded-full p-2 text-center min-h-[35px] min-w-[35px]': rounded,
+        'rounded-md px-5 py-2.5': !rounded,
+      },
+      props.className
+    );
+  }, [variant, disabled, rounded]);
+
+  return to ? (
+    <NavLink to={to} className={classes} state={state}>
+      <ButtonContent icon={icon} loading={loading}>
+        {children}
+      </ButtonContent>
+    </NavLink>
+  ) : (
+    <button type="button" {...props} className={classes} disabled={disabled}>
+      <ButtonContent icon={icon} loading={loading}>
+        {children}
+      </ButtonContent>
+    </button>
+  );
+}

gui/src/components/commons/Checkbox.tsx

@@ -0,0 +1,87 @@
+import classNames from 'classnames';
+import { ReactChild, useMemo } from 'react';
+import { Control, Controller } from 'react-hook-form';
+
+export function CheckBox({
+  label,
+  variant = 'checkbox',
+  control,
+  outlined,
+  name,
+  ...props
+}: {
+  label: string | ReactChild;
+  control: Control<any>;
+  name: string;
+  variant?: 'checkbox' | 'toggle';
+  outlined?: boolean;
+}) {
+  const classes = useMemo(() => {
+    const vriantsMap = {
+      checkbox: {
+        checkbox: classNames(
+          'bg-background-50 border-background-50 rounded-md w-5 h-5 text-accent-background-30 focus:border-accent-background-40 focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent'
+        ),
+        toggle: '',
+        pin: '',
+      },
+      toggle: {
+        checkbox: classNames('hidden'),
+        toggle: classNames('w-10 h-4 rounded-full relative transition-colors'),
+        pin: classNames('h-2 w-2 bg-background-10 rounded-full absolute m-1'),
+      },
+    };
+    return vriantsMap[variant];
+  }, [variant]);
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onChange, value, ref, onBlur, name } }) => (
+        <div
+          className={classNames(
+            {
+              'bg-background-60 rounded-lg text-white': outlined,
+              'text-background-30': !outlined,
+            },
+            'flex items-center gap-2 w-full'
+          )}
+        >
+          <label
+            className={classNames(
+              'w-full py-3 flex gap-2 items-center text-standard-bold',
+              { 'px-3': outlined }
+            )}
+          >
+            <input
+              ref={ref}
+              onChange={onChange}
+              checked={value}
+              name={name}
+              className={classes.checkbox}
+              type="checkbox"
+              {...props}
+            />
+            {variant === 'toggle' && (
+              <div
+                className={classNames(classes.toggle, {
+                  'bg-accent-background-30': value,
+                  'bg-background-50': !value,
+                })}
+              >
+                <div
+                  className={classNames(classes.pin, {
+                    'left-0': !value,
+                    'right-0': value,
+                  })}
+                ></div>
+              </div>
+            )}
+            {label}
+          </label>
+        </div>
+      )}
+    />
+  );
+}

gui/src/components/commons/Input.tsx

@@ -0,0 +1,54 @@
+import classNames from 'classnames';
+import {
+  forwardRef,
+  HTMLInputTypeAttribute,
+  MouseEvent,
+  useState,
+} from 'react';
+import { EyeIcon } from './icon/EyeIcon';
+
+export interface InputProps {
+  type: HTMLInputTypeAttribute;
+  placeholder?: string;
+  label?: string;
+  autocomplete?: boolean;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function AppInput(
+  { type, placeholder, label, autocomplete, ...props },
+  ref
+) {
+  const [forceText, setForceText] = useState(false);
+
+  const togglePassword = (e: MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setForceText(!forceText);
+  };
+
+  return (
+    <label className="flex flex-col gap-1">
+      {label}
+      <div className="relative w-full">
+        <input
+          type={forceText ? 'text' : type}
+          ref={ref}
+          className={classNames(
+            'w-full focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent rounded-md bg-background-60 border-background-60 focus:border-accent-background-40 placeholder:text-background-30 text-standard relative',
+            { 'pr-10': type === 'password' }
+          )}
+          placeholder={placeholder}
+          autoComplete={autocomplete ? 'off' : 'on'}
+          {...props}
+        ></input>
+        {type === 'password' && (
+          <div
+            className="fill-background-10 absolute top-0 h-full flex flex-col justify-center right-0 p-4"
+            onClick={togglePassword}
+          >
+            <EyeIcon></EyeIcon>
+          </div>
+        )}
+      </div>
+    </label>
+  );
+});

gui/src/components/commons/Modal.tsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import { ReactChild } from 'react';
+import ReactModal from 'react-modal';
+
+export function EmptyModal({
+  children,
+  ...props
+}: { children?: ReactChild } & ReactModal.Props) {
+  return (
+    <ReactModal
+      {...props}
+      shouldCloseOnOverlayClick
+      shouldCloseOnEsc
+      overlayClassName={classNames(
+        'fixed top-0 right-0 left-0 bottom-0 flex flex-col justify-center items-center w-full h-full bg-background-90 bg-opacity-60 z-20'
+      )}
+      className={classNames(
+        props.className,
+        'items-center focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent outline-none'
+      )}
+    >
+      {children}
+    </ReactModal>
+  );
+}

gui/src/components/commons/NumberSelector.tsx

@@ -0,0 +1,63 @@
+import { Control, Controller } from 'react-hook-form';
+import { Button } from './Button';
+import { Typography } from './Typography';
+
+export function NumberSelector({
+  label,
+  valueLabelFormat,
+  control,
+  name,
+  min,
+  max,
+  step,
+}: {
+  label: string;
+  valueLabelFormat?: (value: number) => string;
+  control: Control<any>;
+  name: string;
+  min: number;
+  max: number;
+  step: number | ((value: number, add: boolean) => number);
+}) {
+  const stepFn =
+    typeof step === 'function'
+      ? step
+      : (value: number, add: boolean) => (add ? value + step : value - step);
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onChange, value } }) => (
+        <div className="flex flex-col gap-1 w-full">
+          <Typography bold>{label}</Typography>
+          <div className="flex gap-2 bg-background-60 p-2 rounded-lg">
+            <div className="flex">
+              <Button
+                variant="tierciary"
+                rounded
+                onClick={() => onChange(stepFn(value, false))}
+                disabled={stepFn(value, false) < min}
+              >
+                -
+              </Button>
+            </div>
+            <div className="flex flex-grow justify-center items-center w-10">
+              {valueLabelFormat ? valueLabelFormat(value) : value}
+            </div>
+            <div className="flex">
+              <Button
+                variant="tierciary"
+                rounded
+                onClick={() => onChange(stepFn(value, true))}
+                disabled={stepFn(value, true) > max}
+              >
+                +
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    />
+  );
+}

gui/src/components/commons/PersonFrontIcon.tsx

@@ -0,0 +1,151 @@
+import { BodyPart } from 'solarxr-protocol';
+
+export function PersonFrontIcon({ width }: { width?: number }) {
+  const CIRCLE_RADIUS = 0.0001;
+
+  return (
+    <svg
+      width={width || 240}
+      viewBox="0 0 165 392"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M84.53 224.074C83.953 230.874 88.569 266.874 90.951 280.984C92.085 287.671 95.195 298.565 94.076 304.349C92.476 312.411 92.017 322.843 92.896 328.918C93.451 332.607 95.196 349.618 92.696 355.845C91.389 359.108 88.996 375.832 88.996 375.832C82.756 391.587 86.278 390.812 86.278 390.812C88.21 393.183 91.519 390.998 91.519 390.998C92.1549 391.464 92.9388 391.682 93.7241 391.612C94.5094 391.542 95.2421 391.188 95.785 390.616C97.949 392.407 100.471 390.396 100.471 390.396C103.189 391.807 105.71 389.205 105.71 389.205C107.271 389.991 107.653 388.998 107.653 388.998C112.337 388.698 105.039 373.706 105.039 373.706C103.291 360.242 106.773 352.748 106.773 352.748C118.178 318.926 118.758 309.948 114.199 297.204C112.915 293.524 112.59 292.067 113.181 290.47C114.547 286.783 113.551 271.953 115.217 266.064C118.431 254.706 121.602 225.903 123.254 212.464C125.475 194.364 115.388 170.088 115.388 170.088C113.179 160.21 116.418 125.016 116.418 125.016C120.941 132.054 120.768 144.477 120.768 144.477C120.05 157.506 131.294 177.42 131.294 177.42C136.694 185.649 138.742 193.456 138.742 194.036C138.742 196.407 138.223 202.145 138.223 202.145L138.43 207.145C138.803 209.721 139.034 212.316 139.123 214.918C138.28 227.953 140.35 225.501 140.35 225.501C142.098 225.501 144.018 215.011 144.018 215.011C144.018 217.711 143.357 225.811 144.818 228.869C146.564 232.512 147.848 228.244 147.871 227.387C148.333 210.787 149.33 215.138 149.33 215.138C150.301 228.602 151.494 231.644 153.63 230.591C155.25 229.818 153.769 214.433 153.769 214.433C156.544 223.572 158.649 225.027 158.649 225.027C163.229 228.243 160.397 219.361 159.76 217.602C156.371 208.256 156.267 205.017 156.267 205.017C160.501 213.417 163.692 213.104 163.692 213.104C167.822 211.786 160.083 199.894 155.548 194.197C153.234 191.297 150.248 187.408 149.384 185.097C147.973 181.188 146.907 168.62 146.907 168.62C146.48 153.79 142.813 147.348 142.813 147.348C136.544 137.314 135.365 118.598 135.365 118.598L135.09 87C132.89 65.445 117.01 65.29 117.01 65.29C100.957 62.9 98.723 57.714 98.723 57.714C95.323 52.821 97.266 43.44 97.266 43.44C100.087 41.145 101.175 35.053 101.175 35.053C105.859 31.461 105.63 26.205 103.466 26.262C101.73 26.308 102.123 24.87 102.123 24.87C105.052 1.208 84.046 0 84.046 0H80.836C80.836 0 59.821 1.208 62.746 24.864C62.746 24.864 63.139 26.304 61.388 26.256C59.23 26.199 59.029 31.456 63.696 35.047C63.696 35.047 64.783 41.137 67.605 43.434C67.605 43.434 69.548 52.814 66.148 57.708C66.148 57.708 63.922 62.894 47.861 65.284C47.861 65.284 31.952 65.44 29.788 86.994L29.488 118.594C29.488 118.594 28.331 137.311 22.038 147.344C22.038 147.344 18.389 153.787 17.967 168.616C17.967 168.616 16.898 181.184 15.492 185.093C14.635 187.393 11.653 191.276 9.32001 194.193C4.74601 199.878 -2.94199 211.745 1.17101 213.1C1.17101 213.1 4.37901 213.412 8.59601 205.013C8.59601 205.013 8.50901 208.229 5.12501 217.598C4.46001 219.334 1.63201 228.217 6.21301 225.024C6.21301 225.024 8.33501 223.567 11.093 214.43C11.093 214.43 9.61301 229.815 11.26 230.588C13.412 231.642 14.586 228.599 15.56 215.135C15.56 215.135 16.56 210.787 17.017 227.384C17.04 228.241 18.295 232.509 20.049 228.866C21.529 225.811 20.864 217.727 20.864 215.008C20.864 215.008 22.764 225.498 24.536 225.498C24.536 225.498 26.624 227.95 25.767 214.915C25.628 212.786 26.375 208.415 26.467 207.142L26.667 202.142C26.667 202.142 26.146 196.417 26.146 194.033C26.146 193.442 28.194 185.646 33.594 177.417C33.594 177.417 44.826 157.494 44.103 144.474C44.103 144.474 43.947 132.051 48.47 125.013C48.47 125.013 51.68 160.205 49.505 170.085C49.505 170.085 39.405 194.358 41.629 212.461C43.27 225.937 46.435 254.702 49.657 266.061C51.34 271.938 50.345 286.761 51.693 290.467C52.301 292.076 51.982 293.558 50.675 297.201C46.141 309.947 46.718 318.925 58.123 352.745C58.123 352.745 61.633 360.239 59.859 373.703C59.859 373.703 52.572 388.695 57.239 388.995C57.239 388.995 57.604 389.988 59.182 389.202C59.182 389.202 61.703 391.802 64.427 390.393C64.427 390.393 66.95 392.407 69.106 390.613C69.6451 391.185 70.3751 391.54 71.158 391.61C71.9409 391.681 72.7225 391.462 73.355 390.995C73.355 390.995 76.664 393.227 78.63 390.809C78.63 390.809 82.123 391.584 75.904 375.829C75.904 375.829 73.522 359.129 72.209 355.842C69.709 349.621 71.474 332.57 72.009 328.915C72.87 322.806 72.409 312.398 70.835 304.346C69.684 298.575 72.801 287.679 73.952 280.981C76.317 266.881 80.952 230.881 80.373 224.071L82.288 224.743C83.0863 224.756 83.8692 224.522 84.53 224.074Z" />
+      <circle
+        className="body-part-circle"
+        cx="82.004"
+        cy="120"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.CHEST]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="82.004"
+        cy="181"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.HIP]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="82.004"
+        cy="181"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.WAIST]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="82"
+        cy="50"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.NECK]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="82"
+        cy="50"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.HEAD]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="139.004"
+        cy="170"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.LEFT_HAND]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="122"
+        cy="93"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.LEFT_UPPER_ARM]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="122"
+        cy="93"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.LEFT_SHOULDER]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="139.004"
+        cy="170"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.LEFT_LOWER_ARM]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="97.004"
+        cy="360"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.LEFT_LOWER_LEG]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="103.004"
+        cy="260"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.LEFT_UPPER_LEG]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="97.004"
+        cy="360"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.LEFT_FOOT]}
+      />
+
+      <circle
+        className="body-part-circle"
+        cx="26.004"
+        cy="170"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.RIGHT_HAND]}
+      />
+
+      <circle
+        className="body-part-circle"
+        cx="43"
+        cy="93"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.RIGHT_UPPER_ARM]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="43"
+        cy="93"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.RIGHT_SHOULDER]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="26.004"
+        cy="170"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.RIGHT_LOWER_ARM]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="67.004"
+        cy="360"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.RIGHT_LOWER_LEG]}
+      />
+
+      <circle
+        className="body-part-circle"
+        cx="61.004"
+        cy="260"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.RIGHT_UPPER_LEG]}
+      />
+      <circle
+        className="body-part-circle"
+        cx="67.004"
+        cy="360"
+        r={CIRCLE_RADIUS}
+        id={BodyPart[BodyPart.RIGHT_FOOT]}
+      />
+    </svg>
+  );
+}

gui/src/components/commons/ProgressBar.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import { useMemo } from 'react';
+
+export function ProgressBar({
+  progress,
+  parts = 1,
+  height = 10,
+}: {
+  progress: number;
+  parts?: number;
+  height?: number;
+}) {
+  const Bar = ({ index }: { index: number }) => {
+    const value = useMemo(
+      () => Math.min(Math.max((progress * parts) / 1 - index, 0), 1),
+      [index, progress]
+    );
+    return (
+      <div
+        className="flex relative flex-grow bg-background-50 rounded-lg overflow-hidden"
+        style={{ height: `${height}px` }}
+      >
+        <div
+          className={classNames(
+            'bg-accent-background-20 rounded-lg overflow-hidden absolute top-0'
+          )}
+          style={{
+            width: `${value * 100}%`,
+            height: `${height}px`,
+          }}
+        ></div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex w-full flex-row gap-2">
+      {Array.from({ length: parts }).map((_, key) => (
+        <Bar index={key} key={key}></Bar>
+      ))}
+    </div>
+  );
+}

gui/src/components/commons/Radio.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames';
+import { Control, Controller } from 'react-hook-form';
+import { Typography } from './Typography';
+
+export function Radio({
+  control,
+  name,
+  label,
+  value,
+  desciption,
+}: {
+  control: Control<any>;
+  name: string;
+  label: string;
+  value: string | number;
+  desciption?: string;
+}) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onChange, ref, name, value: checked } }) => (
+        <label
+          className={classNames(
+            'w-full bg-background-60 p-3 rounded-md flex gap-3 border-2',
+            {
+              'border-accent-background-30': value == checked,
+              'border-transparent': value != checked,
+            }
+          )}
+        >
+          <input
+            type="radio"
+            className="text-accent-background-30 focus:ring-transparent focus:ring-offset-transparent focus:outline-transparent"
+            name={name}
+            ref={ref}
+            onChange={onChange}
+            value={value}
+            checked={value == checked}
+          ></input>
+          <div className="flex flex-col gap-2">
+            <Typography bold>{label}</Typography>
+            {desciption && (
+              <Typography variant="standard" color="secondary">
+                {desciption}
+              </Typography>
+            )}
+          </div>
+        </label>
+      )}
+    />
+  );
+}

gui/src/components/commons/TipBox.tsx

@@ -0,0 +1,16 @@
+import { ReactChild } from 'react';
+import { BulbIcon } from './icon/BulbIcon';
+import { Typography } from './Typography';
+
+export function TipBox({ children }: { children: ReactChild }) {
+  return (
+    <div className="flex flex-row gap-4 bg-accent-background-50 p-4 rounded-md">
+      <div className="fill-accent-background-20 flex flex-col justify-center">
+        <BulbIcon></BulbIcon>
+      </div>
+      <div className="flex flex-col">
+        <Typography color="text-accent-background-10">{children}</Typography>
+      </div>
+    </div>
+  );
+}

gui/src/components/commons/Typography.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import { createElement, ReactNode, useMemo } from 'react';
+
+export function Typography({
+  variant = 'standard',
+  bold = false,
+  color = 'primary',
+  children,
+}: {
+  variant?: 'main-title' | 'section-title' | 'standard' | 'vr-accessible';
+  bold?: boolean;
+  block?: boolean;
+  color?: 'primary' | 'secondary' | string;
+  children: ReactNode;
+}) {
+  const tag = useMemo(() => {
+    const tags = {
+      'main-title': 'h1',
+      'section-title': 'h2',
+      standard: 'p',
+      'vr-accessible': 'p',
+    };
+    return tags[variant];
+  }, [variant]);
+
+  return createElement(
+    tag,
+    {
+      className: classNames([
+        variant === 'main-title' && 'text-main-title',
+        variant === 'section-title' && 'text-section-title',
+        variant === 'standard' &&
+          (bold ? 'text-standard-bold' : 'text-standard'),
+        variant === 'vr-accessible' &&
+          (bold ? 'text-vr-accesible-bold' : 'text-vr-accesible'),
+        color === 'primary' && 'text-background-10',
+        color === 'secondary' && 'text-background-30',
+        typeof color === 'string' && color,
+      ]),
+    },
+    children
+  );
+}

gui/src/components/commons/icon/ArrowIcons.tsx

@@ -0,0 +1,48 @@
+export function ArrowDownIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      version="1.1"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
+    </svg>
+  );
+}
+
+export function ArrowLeftIcon() {
+  return (
+    <svg
+      width="12"
+      height="10"
+      viewBox="0 0 12 10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 5C12 5.18941 11.921 5.37106 11.7804 5.50499C11.6397 5.63892 11.449 5.71416 11.2501 5.71416H2.56155L5.7817 8.77932C5.85142 8.84572 5.90673 8.92455 5.94446 9.0113C5.9822 9.09805 6.00162 9.19104 6.00162 9.28494C6.00162 9.37884 5.9822 9.47183 5.94446 9.55858C5.90673 9.64534 5.85142 9.72417 5.7817 9.79056C5.71197 9.85696 5.6292 9.90964 5.5381 9.94557C5.447 9.98151 5.34936 10 5.25075 10C5.15215 10 5.05451 9.98151 4.96341 9.94557C4.87231 9.90964 4.78954 9.85696 4.71981 9.79056L0.220316 5.50562C0.150479 5.43928 0.0950707 5.36048 0.0572652 5.27371C0.0194598 5.18695 0 5.09394 0 5C0 4.90606 0.0194598 4.81305 0.0572652 4.72629C0.0950707 4.63952 0.150479 4.56072 0.220316 4.49438L4.71981 0.209436C4.86063 0.0753365 5.05161 0 5.25075 0C5.4499 0 5.64088 0.0753365 5.7817 0.209436C5.92251 0.343536 6.00162 0.525414 6.00162 0.715059C6.00162 0.904705 5.92251 1.08658 5.7817 1.22068L2.56155 4.28584H11.2501C11.449 4.28584 11.6397 4.36108 11.7804 4.49502C11.921 4.62895 12 4.81059 12 5Z"
+      />
+    </svg>
+  );
+}
+
+export function ArrowRightIcon() {
+  return (
+    <svg
+      width="12"
+      height="10"
+      viewBox="0 0 12 10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M-3.2717e-07 5C-3.2717e-07 4.81059 0.0790079 4.62894 0.219644 4.49501C0.360281 4.36108 0.551026 4.28584 0.749916 4.28584L9.43845 4.28584L6.2183 1.22068C6.14858 1.15428 6.09327 1.07545 6.05554 0.9887C6.0178 0.901945 5.99838 0.808961 5.99838 0.715058C5.99838 0.621155 6.0178 0.528172 6.05554 0.441417C6.09327 0.354662 6.14858 0.275834 6.2183 0.209435C6.28803 0.143036 6.3708 0.0903648 6.4619 0.0544297C6.553 0.0184946 6.65064 -2.87569e-07 6.74925 -2.87569e-07C6.84785 -2.87569e-07 6.94549 0.0184946 7.03659 0.0544297C7.12769 0.0903648 7.21046 0.143036 7.28019 0.209435L11.7797 4.49438C11.8495 4.56072 11.9049 4.63952 11.9427 4.72629C11.9805 4.81305 12 4.90606 12 5C12 5.09394 11.9805 5.18695 11.9427 5.27371C11.9049 5.36048 11.8495 5.43928 11.7797 5.50562L7.28019 9.79056C7.13937 9.92466 6.94839 10 6.74925 10C6.5501 10 6.35912 9.92466 6.2183 9.79056C6.07749 9.65646 5.99838 9.47459 5.99838 9.28494C5.99838 9.0953 6.07749 8.91342 6.2183 8.77932L9.43845 5.71416L0.749916 5.71416C0.551026 5.71416 0.360281 5.63891 0.219644 5.50498C0.0790079 5.37105 -3.2717e-07 5.18941 -3.2717e-07 5Z"
+      />
+    </svg>
+  );
+}

gui/src/components/commons/icon/BatteryIcon.tsx

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import { useMemo } from 'react';
+
+export function BatteryIcon({
+  value,
+  disabled = false,
+}: {
+  value: number;
+  disabled?: boolean;
+}) {
+  const col = useMemo(() => {
+    const colorsMap: { [key: number]: string } = {
+      0.4: 'fill-status-success',
+      0.2: 'fill-status-warning',
+      0: 'fill-status-critical',
+    };
+
+    const val = Object.keys(colorsMap)
+      .filter((key) => +key < value)
+      .sort((a, b) => +b - +a)[0];
+    return disabled
+      ? 'fill-background-40'
+      : colorsMap[+val] || 'fill-background-10';
+  }, [value, disabled]);
+
+  return (
+    <svg
+      width="19"
+      height="9"
+      viewBox="0 0 19 9"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.0833 0H1.31203C0.995003 0.00131561 0.691347 0.121213 0.467167 0.333594C0.242986 0.545976 0.116428 0.83365 0.115039 1.134V7.383C0.114754 7.68458 0.240506 7.97399 0.464808 8.18799C0.689109 8.40198 0.993714 8.52315 1.31203 8.525H11.0833V0Z"
+        fill="#3D6381"
+      />
+      <path
+        d="M15.0005 8.525C15.3175 8.52368 15.6212 8.40379 15.8454 8.19141C16.0696 7.97902 16.1961 7.69135 16.1975 7.391V5.968H17.9972V2.558H16.1975V1.134C16.1961 0.83365 16.0696 0.545976 15.8454 0.333594C15.6212 0.121213 15.3175 0.00131561 15.0005 0H10.9672V8.525H15.0005Z"
+        fill="#3D6381"
+      />
+      <mask
+        id="mask0_4_39"
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="18"
+        height="9"
+      >
+        <path
+          d="M11.0833 0H1.31203C0.995003 0.00131561 0.691347 0.121213 0.467167 0.333594C0.242986 0.545976 0.116428 0.83365 0.115039 1.134V7.383C0.114754 7.68458 0.240506 7.97399 0.464808 8.18799C0.689109 8.40198 0.993714 8.52315 1.31203 8.525H11.0833V0Z"
+          fill="#3D6381"
+        />
+        <path
+          d="M15.0005 8.525C15.3175 8.52368 15.6212 8.40379 15.8454 8.19141C16.0696 7.97902 16.1961 7.69135 16.1975 7.391V5.968H17.9972V2.558H16.1975V1.134C16.1961 0.83365 16.0696 0.545976 15.8454 0.333594C15.6212 0.121213 15.3175 0.00131561 15.0005 0H10.9672V8.525H15.0005Z"
+          fill="#3D6381"
+        />
+      </mask>
+      <g mask="url(#mask0_4_39)" className={classNames(col, 'opacity-100')}>
+        <rect width={value * 18} height="9" />
+      </g>
+    </svg>
+  );
+}

gui/src/components/commons/icon/BulbIcon.tsx

@@ -0,0 +1,12 @@
+export function BulbIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 352 512"
+    >
+      <path d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/CheckIcon.tsx

@@ -0,0 +1,19 @@
+export function CheckIcon(props: any) {
+  return (
+    <svg
+      width="9"
+      height="7"
+      viewBox="0 0 9 7"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_548_761)">
+        <path d="M3.05666 6.86296L0.132685 3.81321C0.0906355 3.76962 0.0572652 3.71778 0.034494 3.66068C0.0117228 3.60358 0 3.54235 0 3.48051C0 3.41867 0.0117228 3.35744 0.034494 3.30035C0.0572652 3.24325 0.0906355 3.19141 0.132685 3.14781L0.770644 2.48241C0.812442 2.43856 0.862143 2.40375 0.916885 2.38C0.971628 2.35625 1.03033 2.34402 1.08962 2.34402C1.14891 2.34402 1.20762 2.35625 1.26236 2.38C1.3171 2.40375 1.3668 2.43856 1.4086 2.48241L3.37883 4.53739L7.59946 0.135219C7.64126 0.0913603 7.69096 0.0565546 7.7457 0.0328039C7.80044 0.00905319 7.85915 -0.00317383 7.91844 -0.00317383C7.97773 -0.00317383 8.03643 0.00905319 8.09117 0.0328039C8.14592 0.0565546 8.19562 0.0913603 8.23742 0.135219L8.87537 0.800618C8.91742 0.844214 8.95079 0.896052 8.97357 0.95315C8.99634 1.01025 9.00806 1.07148 9.00806 1.13332C9.00806 1.19516 8.99634 1.25639 8.97357 1.31349C8.95079 1.37058 8.91742 1.42242 8.87537 1.46602L3.69303 6.86296C3.65126 6.90657 3.60166 6.94116 3.54706 6.96477C3.49246 6.98837 3.43394 7.00052 3.37484 7.00052C3.31574 7.00052 3.25722 6.98837 3.20263 6.96477C3.14803 6.94116 3.09843 6.90657 3.05666 6.86296Z" />
+      </g>
+      <defs>
+        <clipPath id="clip0_548_761">
+          <rect width="9" height="7" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

gui/src/components/commons/icon/CircleIcon.tsx

@@ -0,0 +1,13 @@
+export function CircleIcon(props: any) {
+  return (
+    <svg
+      {...props}
+      width="10"
+      height="10"
+      viewBox="0 0 6 6"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M3 6C4.65685 6 6 4.65685 6 3C6 1.34315 4.65685 0 3 0C1.34315 0 0 1.34315 0 3C0 4.65685 1.34315 6 3 6Z" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/CloseIcon.tsx

@@ -0,0 +1,29 @@
+export function CloseIcon({
+  className,
+  size = 35,
+}: {
+  className?: string;
+  size?: number;
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      className={className}
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.3804 17.8804L12.619 11.119"
+        stroke="#C0A1D8"
+        strokeLinecap="round"
+      />
+      <path
+        d="M12.6196 17.8804L19.381 11.119"
+        stroke="#C0A1D8"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

gui/src/components/commons/icon/CrossIcon.tsx

@@ -0,0 +1,11 @@
+export function CrossIcon() {
+  return (
+    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  );
+}

gui/src/components/commons/icon/CubeIcon.tsx

@@ -0,0 +1,15 @@
+export function CubeIcon(props: any) {
+  return (
+    <svg
+      {...props}
+      width="20"
+      height="20"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M14.835 3.752L8.377 0.852002C8.31295 0.823464 8.24362 0.808716 8.1735 0.808716C8.10338 0.808716 8.03405 0.823464 7.97 0.852002L1.509 3.752C1.45917 3.77586 1.4169 3.81302 1.38684 3.85938C1.35678 3.90573 1.34011 3.95949 1.33867 4.01472C1.33722 4.06995 1.35105 4.12451 1.37863 4.17237C1.40622 4.22024 1.44649 4.25956 1.495 4.286L7.938 7.679C8.00997 7.71812 8.09058 7.73862 8.1725 7.73862C8.25442 7.73862 8.33503 7.71812 8.407 7.679L14.85 4.286C14.8985 4.25947 14.9387 4.22008 14.9662 4.17215C14.9937 4.12423 15.0074 4.06964 15.0059 4.01441C15.0043 3.95918 14.9875 3.90545 14.9574 3.85915C14.9272 3.81284 14.8849 3.77577 14.835 3.752Z" />
+      <path d="M9.04301 15.774L15.537 12.338C15.5774 12.3112 15.6104 12.2748 15.6331 12.232C15.6558 12.1892 15.6674 12.1414 15.667 12.093V5.429C15.6697 5.38221 15.6601 5.33552 15.6392 5.29359C15.6182 5.25166 15.5867 5.21596 15.5476 5.19006C15.5085 5.16415 15.4634 5.14894 15.4166 5.14595C15.3698 5.14296 15.3231 5.15228 15.281 5.173L8.78701 8.519C8.74073 8.54365 8.70214 8.58059 8.6755 8.62576C8.64886 8.67092 8.63519 8.72257 8.63601 8.775V15.529C8.63442 15.5774 8.64577 15.6253 8.6689 15.6679C8.69203 15.7104 8.7261 15.746 8.76758 15.771C8.80907 15.796 8.85647 15.8094 8.90489 15.8099C8.95331 15.8105 9.00099 15.7981 9.04301 15.774Z" />
+      <path d="M0.67101 5.428V12.088C0.670579 12.1364 0.682243 12.1842 0.704943 12.227C0.727644 12.2698 0.760664 12.3062 0.80101 12.333L7.29601 15.769C7.33755 15.7933 7.38493 15.8059 7.43307 15.8055C7.48122 15.805 7.52834 15.7915 7.5694 15.7663C7.61046 15.7412 7.64392 15.7053 7.66622 15.6627C7.68851 15.62 7.69881 15.5721 7.69601 15.524V8.771C7.69683 8.71856 7.68317 8.66692 7.65652 8.62175C7.62988 8.57659 7.59129 8.53965 7.54501 8.515L1.05501 5.169C1.01276 5.14923 0.966102 5.14076 0.919596 5.14439C0.87309 5.14802 0.828319 5.16364 0.789646 5.18973C0.750973 5.21581 0.719718 5.25147 0.698927 5.29323C0.678135 5.33498 0.668517 5.38142 0.67101 5.428Z" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/EyeIcon.tsx

@@ -0,0 +1,12 @@
+export function EyeIcon() {
+  return (
+    <svg
+      width="14"
+      height="10"
+      viewBox="0 0 14 10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9.09817 4.99914C9.09817 6.11133 8.15709 7.01294 6.9962 7.01294C5.83532 7.01294 4.89424 6.11133 4.89424 4.99914C4.89424 3.88693 5.83532 2.98533 6.9962 2.98533C8.15709 2.98532 9.09817 3.88694 9.09817 4.99914ZM7 0.806091C5.79804 0.811423 4.55217 1.10403 3.37279 1.66426C2.49711 2.09735 1.64372 2.70838 0.90293 3.46257C0.539093 3.84756 0.0750283 4.40501 0 4.99979C0.00886667 5.515 0.561517 6.15093 0.90293 6.53703C1.5976 7.2616 2.42877 7.85557 3.37279 8.33578C4.47262 8.86954 5.68997 9.17685 7 9.19395C8.2031 9.18853 9.44869 8.89255 10.6268 8.33578C11.5024 7.90269 12.3563 7.29122 13.0971 6.53703C13.4609 6.15204 13.925 5.59457 14 4.99979C13.9911 4.48458 13.4385 3.84863 13.0971 3.46254C12.4024 2.73797 11.5708 2.14446 10.6268 1.66423C9.52751 1.13088 8.30716 0.82568 7 0.806091ZM6.99911 1.84732C8.8205 1.84732 10.297 3.25891 10.297 5.00025C10.297 6.74157 8.8205 8.15316 6.99911 8.15316C5.17773 8.15316 3.70124 6.74156 3.70124 5.00025C3.70124 3.25891 5.17773 1.84732 6.99911 1.84732Z" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/FootIcon.tsx

@@ -0,0 +1,12 @@
+export function FootIcon({ width }: { width?: number }) {
+  return (
+    <svg
+      width={width || 28}
+      viewBox="0 0 28 28"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="28" height="28" rx="2" fill="#56407B" />
+      <path d="M18.5981 6.05798L18.1461 7.57104C18.0991 7.72904 18.0361 7.92496 18.0061 8.00696C17.8731 8.3476 17.7678 8.69847 17.6911 9.05603C17.6078 9.35662 17.595 9.67231 17.6538 9.97864C17.7126 10.285 17.8414 10.5737 18.0301 10.822C18.0651 10.866 18.2771 11.2161 18.5031 11.6021C18.7291 11.9881 18.9321 12.3339 18.9581 12.3719C19.0375 12.4967 19.1065 12.6279 19.1641 12.764C19.2954 13.1107 19.3199 13.4887 19.2346 13.8494C19.1492 14.2101 18.9578 14.5369 18.6851 14.788C18.3588 15.1236 17.9785 15.4021 17.5601 15.6119C16.885 15.93 16.3258 16.4504 15.9601 17.101C15.8219 17.345 15.6665 17.579 15.4951 17.801C15.3751 17.967 15.1531 18.292 15.0011 18.524C14.7241 18.945 14.5201 19.2441 14.3791 19.4301C14.0713 19.8357 13.7085 20.1964 13.3011 20.502L12.9011 20.796C12.4511 21.131 12.4491 21.132 12.2011 21.146C12.0364 21.1349 11.8735 21.1855 11.7441 21.288C11.6483 21.3637 11.5381 21.4192 11.4201 21.451C11.3022 21.4829 11.179 21.4904 11.0581 21.473C10.8581 21.473 10.8231 21.4731 10.7951 21.451C10.7435 21.4122 10.7026 21.3609 10.6761 21.302C10.6746 21.2885 10.6682 21.276 10.6581 21.267C10.6411 21.254 10.6301 21.26 10.5821 21.306C10.5023 21.376 10.4081 21.4276 10.3061 21.457C10.2078 21.4797 10.1066 21.4871 10.0061 21.479H9.7921L9.7121 21.438C9.67073 21.4185 9.63235 21.3933 9.5981 21.363L9.5641 21.328H9.3391C9.0311 21.328 8.9941 21.32 8.8991 21.228C8.84921 21.1797 8.79222 21.1392 8.7301 21.108C8.61137 21.0413 8.50891 20.9491 8.4301 20.838C8.41279 20.7935 8.40728 20.7453 8.4141 20.698L8.4201 20.604L8.5061 20.515C8.5961 20.423 8.6061 20.39 8.5811 20.337C8.53854 20.293 8.48119 20.2662 8.4201 20.262C8.32553 20.2388 8.24225 20.1828 8.1851 20.104C8.09834 20.0317 8.03903 19.9318 8.0171 19.821C7.98191 19.6196 8.00125 19.4124 8.0731 19.2209C8.1321 19.0639 8.1321 19.064 8.3671 19.063C8.57004 19.0815 8.77415 19.0437 8.9571 18.954C9.02435 18.9097 9.10263 18.8851 9.1831 18.8829C9.2331 18.8829 9.2711 18.862 9.5831 18.671C9.83458 18.5055 10.1027 18.3666 10.3831 18.257L10.4881 18.223L10.5591 18.0229C10.7588 17.4891 10.9019 16.9357 10.9861 16.3719C11.0496 15.9465 11.1422 15.5259 11.2631 15.113C11.3728 14.7304 11.5064 14.355 11.6631 13.989C12.0182 13.0652 12.2417 12.096 12.3271 11.11C12.3801 10.764 12.4431 10.3661 12.4661 10.2271C12.4891 10.0881 12.5171 9.89894 12.5281 9.80994C12.5391 9.72094 12.5631 9.51606 12.5821 9.35706C12.6011 9.19806 12.6291 8.96499 12.6421 8.83899C12.6551 8.71299 12.6771 8.51101 12.6901 8.38501C12.7441 7.88501 12.8191 7.11596 12.8711 6.53796C12.8901 6.31196 12.9111 6.09799 12.9151 6.06299L12.9221 6H18.6161L18.5981 6.05798Z" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/GearIcon.tsx

@@ -0,0 +1,12 @@
+export function GearIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 14 13"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M7.00099 11.9C7.31948 11.9003 7.63041 11.997 7.89283 12.1775C8.15524 12.3579 8.35682 12.6137 8.47099 12.911C9.11419 12.757 9.72885 12.5018 10.292 12.155C10.2026 11.9531 10.1559 11.7348 10.155 11.514C10.1546 11.2516 10.2198 10.9933 10.3448 10.7626C10.4697 10.5319 10.6505 10.3362 10.8705 10.1932C11.0905 10.0503 11.3427 9.96464 11.6043 9.94417C11.8659 9.92369 12.1284 9.96902 12.368 10.076C12.7147 9.51424 12.9699 8.90091 13.124 8.259C12.8268 8.1447 12.5711 7.9431 12.3906 7.68071C12.2102 7.41833 12.1134 7.10745 12.113 6.789C12.1134 6.47055 12.2102 6.15968 12.3906 5.89729C12.5711 5.6349 12.8268 5.4333 13.124 5.319C12.97 4.6758 12.7148 4.06115 12.368 3.498C12.1284 3.60499 11.8659 3.65031 11.6043 3.62983C11.3427 3.60936 11.0905 3.52374 10.8705 3.38078C10.6505 3.23782 10.4697 3.04207 10.3448 2.81138C10.2198 2.58068 10.1546 2.32237 10.155 2.06C10.1543 1.83899 10.201 1.62041 10.292 1.419C9.72669 1.07498 9.11135 0.820948 8.46799 0.666C8.35405 0.963474 8.15253 1.21938 7.89007 1.39989C7.6276 1.5804 7.31654 1.67703 6.99799 1.677C6.67886 1.67742 6.36711 1.581 6.10393 1.40049C5.84075 1.21998 5.63853 0.963872 5.52399 0.666C4.882 0.821335 4.26872 1.07752 3.70699 1.425C3.83599 1.71551 3.87394 2.03828 3.81586 2.35079C3.75778 2.66329 3.60638 2.95087 3.38162 3.17563C3.15686 3.40039 2.86928 3.55178 2.55678 3.60987C2.24427 3.66795 1.9215 3.62999 1.63099 3.501C1.28471 4.06442 1.02957 4.67899 0.874993 5.322C1.17184 5.43574 1.42719 5.63685 1.60733 5.89878C1.78746 6.1607 1.8839 6.47111 1.8839 6.789C1.8839 7.10689 1.78746 7.4173 1.60733 7.67922C1.42719 7.94115 1.17184 8.14226 0.874993 8.256C1.02899 8.8992 1.28417 9.51385 1.63099 10.077C1.92149 9.94858 2.24405 9.91106 2.55627 9.96935C2.86849 10.0276 3.15577 10.179 3.38036 10.4036C3.60495 10.6282 3.75634 10.9155 3.81464 11.2277C3.87294 11.5399 3.83541 11.8625 3.70699 12.153C4.26924 12.4985 4.88243 12.7533 5.52399 12.908C5.6399 12.6107 5.84296 12.3554 6.10653 12.1755C6.37011 11.9956 6.68189 11.8996 7.00099 11.9ZM4.45399 6.817C4.4536 6.31238 4.60287 5.81897 4.88294 5.3992C5.16301 4.97942 5.56128 4.65214 6.02738 4.45876C6.49348 4.26537 7.00646 4.21457 7.50144 4.31277C7.99642 4.41098 8.45115 4.65378 8.80811 5.01046C9.16508 5.36715 9.40824 5.82169 9.50683 6.31659C9.60542 6.81149 9.55502 7.32451 9.362 7.79076C9.16898 8.25701 8.84201 8.65554 8.42246 8.93594C8.00291 9.21634 7.50962 9.366 7.00499 9.366C6.67012 9.36613 6.3385 9.3003 6.02907 9.17228C5.71964 9.04425 5.43846 8.85653 5.20158 8.61983C4.96469 8.38313 4.77675 8.1021 4.64848 7.79277C4.52021 7.48344 4.45412 7.15187 4.45399 6.817Z" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/LoaderIcon.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+
+export function LoaderIcon({
+  youSpinMeRightRoundBabyRightRound = false,
+}: {
+  youSpinMeRightRoundBabyRightRound?: boolean;
+}) {
+  return (
+    <svg
+      width="19"
+      height="19"
+      viewBox="0 0 19 19"
+      xmlns="http://www.w3.org/2000/svg"
+      className={classNames({
+        'animate-spin': youSpinMeRightRoundBabyRightRound,
+      })}
+    >
+      <path d="M16.0312 8.90625H13.0625C12.7359 8.90625 12.4688 9.17344 12.4688 9.5C12.4688 9.82656 12.7359 10.0938 13.0625 10.0938H16.0312C16.3578 10.0938 16.625 9.82656 16.625 9.5C16.625 9.17344 16.3578 8.90625 16.0312 8.90625Z" />
+      <path d="M6.53125 9.5C6.53125 9.17344 6.26406 8.90625 5.9375 8.90625H2.96875C2.64219 8.90625 2.375 9.17344 2.375 9.5C2.375 9.82656 2.64219 10.0938 2.96875 10.0938H5.9375C6.26406 10.0938 6.53125 9.82656 6.53125 9.5Z" />
+      <path d="M9.5 12.4688C9.17344 12.4688 8.90625 12.7359 8.90625 13.0625V16.0312C8.90625 16.3578 9.17344 16.625 9.5 16.625C9.82656 16.625 10.0938 16.3578 10.0938 16.0312V13.0625C10.0938 12.7359 9.82656 12.4688 9.5 12.4688Z" />
+      <path d="M9.5 2.375C9.17344 2.375 8.90625 2.64219 8.90625 2.96875V5.9375C8.90625 6.26406 9.17344 6.53125 9.5 6.53125C9.82656 6.53125 10.0938 6.26406 10.0938 5.9375V2.96875C10.0938 2.64219 9.82656 2.375 9.5 2.375Z" />
+      <path d="M12.0716 8.01562C12.2349 8.30137 12.5986 8.39785 12.8843 8.23457L15.456 6.75019C15.7417 6.58691 15.8382 6.22324 15.6749 5.9375C15.5117 5.65176 15.148 5.55527 14.8623 5.71855L12.2906 7.20293C12.0048 7.36992 11.9083 7.72988 12.0716 8.01562Z" />
+      <path d="M6.92836 10.9844C6.76508 10.6986 6.40141 10.6021 6.11567 10.7654L3.54399 12.2498C3.25825 12.4131 3.16176 12.7768 3.32505 13.0625C3.48833 13.3482 3.852 13.4447 4.13774 13.2814L6.70942 11.7971C6.99516 11.6301 7.09165 11.2701 6.92836 10.9844Z" />
+      <path d="M11.7971 12.2869C11.6338 12.0012 11.2702 11.9047 10.9844 12.068C10.6987 12.2312 10.6022 12.5949 10.7655 12.8807L12.2498 15.4523C12.4131 15.7381 12.7768 15.8346 13.0625 15.6713C13.3483 15.508 13.4448 15.1443 13.2815 14.8586L11.7971 12.2869Z" />
+      <path d="M6.75024 3.54765C6.58696 3.26191 6.22329 3.16543 5.93754 3.32871C5.6518 3.49199 5.55532 3.85566 5.7186 4.1414L7.20297 6.71308C7.36626 6.99882 7.72993 7.09531 8.01567 6.93203C8.30141 6.76875 8.3979 6.40507 8.23461 6.11933L6.75024 3.54765Z" />
+      <path d="M10.9844 6.92832C11.2702 7.0916 11.6301 6.99512 11.7971 6.70937L13.2815 4.13769C13.4448 3.85195 13.3483 3.49199 13.0625 3.325C12.7768 3.16172 12.4168 3.2582 12.2498 3.54394L10.7655 6.11562C10.6022 6.40137 10.6987 6.76504 10.9844 6.92832Z" />
+      <path d="M8.01567 12.0717C7.72993 11.9084 7.36997 12.0049 7.20297 12.2906L5.7186 14.8623C5.55532 15.148 5.6518 15.508 5.93754 15.675C6.22329 15.8383 6.58325 15.7418 6.75024 15.456L8.23461 12.8844C8.3979 12.5986 8.30141 12.235 8.01567 12.0717Z" />
+      <path d="M15.4523 12.2498L12.8807 10.7654C12.5949 10.6021 12.235 10.6986 12.068 10.9844C11.9047 11.2701 12.0012 11.6301 12.2869 11.7971L14.8586 13.2814C15.1443 13.4447 15.5043 13.3482 15.6713 13.0625C15.8346 12.7768 15.7381 12.4168 15.4523 12.2498Z" />
+      <path d="M3.54765 6.75019L6.11933 8.23457C6.40507 8.39785 6.76504 8.30137 6.93203 8.01562C7.09902 7.72988 6.99882 7.36992 6.71308 7.20293L4.1414 5.71855C3.85566 5.55527 3.4957 5.65176 3.32871 5.9375C3.16543 6.22324 3.26191 6.5832 3.54765 6.75019Z" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/MaximiseIcon.tsx

@@ -0,0 +1,17 @@
+export function MaximiseIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="35"
+      height="35"
+      className={className}
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18 11.5H14C13.1716 11.5 12.5 12.1716 12.5 13V17C12.5 17.8284 13.1716 18.5 14 18.5H18C18.8284 18.5 19.5 17.8284 19.5 17V13C19.5 12.1716 18.8284 11.5 18 11.5Z"
+        stroke="#C0A1D8"
+      />
+    </svg>
+  );
+}

gui/src/components/commons/icon/MinimiseIcon.tsx

@@ -0,0 +1,13 @@
+export function MinimiseIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="35"
+      height="35"
+      className={className}
+      viewBox="0 0 31 29"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M20.5 15.5H10.5" stroke="#C0A1D8" strokeLinecap="round" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/RecordIcon.tsx

@@ -0,0 +1,7 @@
+export function RecordIcon({ width = 33 }: { width?: number }) {
+  return (
+    <svg width={width} height="29" viewBox="0 0 24 29">
+      <path d="M20.84 2.18L16.91 2.96L19.65 6.5L21.62 6.1L20.84 2.18M13.97 3.54L12 3.93L14.75 7.46L16.71 7.07L13.97 3.54M9.07 4.5L7.1 4.91L9.85 8.44L11.81 8.05L9.07 4.5M4.16 5.5L3.18 5.69A2 2 0 0 0 1.61 8.04L2 10L6.9 9.03L4.16 5.5M2 10V20C2 21.11 2.9 22 4 22H20C21.11 22 22 21.11 22 20V10H2Z" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/ResetIcon.tsx

@@ -0,0 +1,84 @@
+export function ResetIcon({ width = 33 }: { width?: number }) {
+  return (
+    <svg
+      width={width}
+      height="29"
+      viewBox="0 0 33 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.39801 3.061V11.524H10.861"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.93801 18.576C6.85461 21.1713 8.58991 23.3983 10.8824 24.9215C13.1749 26.4447 15.9003 27.1816 18.648 27.021C21.3957 26.8604 24.0168 25.8111 26.1162 24.0312C28.2157 22.2514 29.6797 19.8373 30.2878 17.153C30.8958 14.4686 30.6149 11.6593 29.4874 9.14845C28.3599 6.63762 26.4468 4.56127 24.0365 3.23233C21.6262 1.90339 18.8493 1.39384 16.1242 1.7805C13.3991 2.16715 10.8735 3.42904 8.92801 5.376L2.39301 11.523"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function QuickResetIcon({ width = 33 }: { width?: number }) {
+  return (
+    <svg
+      width={width}
+      height="29"
+      viewBox="0 0 33 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.39804 3.04599V11.509H10.861"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.93804 18.561C6.85464 21.1563 8.58994 23.3833 10.8824 24.9065C13.1749 26.4297 15.9003 27.1666 18.648 27.006C21.3957 26.8454 24.0168 25.7961 26.1163 24.0162C28.2157 22.2363 29.6798 19.8223 30.2878 17.1379C30.8959 14.4536 30.615 11.6443 29.4874 9.13344C28.3599 6.6226 26.4468 4.54626 24.0365 3.21732C21.6262 1.88837 18.8493 1.37883 16.1242 1.76548C13.3991 2.15213 10.8735 3.41402 8.92804 5.36099L2.39304 11.508"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.633 9.33699C17.879 11.837 14.133 13.083 14.133 15.581C14.133 18.079 16.633 19.327 16.633 19.327C15.407 16.855 19.133 15.581 19.133 13.083C19.133 10.585 16.633 9.33699 16.633 9.33699ZM20.377 13.083C21.626 15.583 17.877 16.829 17.877 19.327H21.626C22.126 19.327 22.875 18.703 22.875 16.827C22.875 14.337 20.377 13.083 20.377 13.083Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function MountingResetIcon({ width = 33 }: { width?: number }) {
+  return (
+    <svg
+      width={width}
+      height="29"
+      viewBox="0 0 33 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.39801 3.061V11.524H10.861"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.93801 18.576C6.85461 21.1713 8.58991 23.3983 10.8824 24.9215C13.1749 26.4447 15.9003 27.1816 18.648 27.021C21.3957 26.8604 24.0168 25.8111 26.1162 24.0312C28.2157 22.2514 29.6797 19.8373 30.2878 17.153C30.8958 14.4686 30.6149 11.6593 29.4874 9.14845C28.3599 6.63762 26.4468 4.56127 24.0365 3.23233C21.6262 1.90339 18.8493 1.39384 16.1242 1.7805C13.3991 2.16715 10.8735 3.42904 8.92801 5.376L2.39301 11.523"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

gui/src/components/commons/icon/SimevrIcon.tsx

@@ -0,0 +1,31 @@
+export function SlimeVRIcon({ drag }: { drag?: boolean }) {
+  return (
+    <svg
+      width="49"
+      height="29"
+      viewBox="0 0 49 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      data-tauri-drag-region={drag}
+    >
+      <path
+        d="M2 26.996C10.44 25.59 29.16 23.1571 46.509 26.9091C46.509 26.9091 48.89 -0.199966 35.761 2.14503"
+        stroke="#A44FED"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+      <path
+        d="M7.52161 15.0107L12.3649 9.20459L17.5044 13.9572"
+        stroke="#A44FED"
+        strokeWidth="3.00157"
+        strokeLinecap="round"
+      />
+      <path
+        d="M27.9566 14.1435L33.7372 9.27062L37.9695 14.8458"
+        stroke="#A44FED"
+        strokeWidth="3.00136"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

gui/src/components/commons/icon/SquaresIcon.tsx

@@ -0,0 +1,15 @@
+export function SquaresIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6.425 0.125H0.125V6.425H6.425V0.125Z" />
+      <path d="M6.425 9.57495H0.125V15.875H6.425V9.57495Z" />
+      <path d="M9.57501 9.57495H15.875V15.875H9.57501V9.57495Z" />
+      <path d="M15.875 0.125H9.57501V6.425H15.875V0.125Z" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/SteamIcon.tsx

@@ -0,0 +1,12 @@
+export function SteamIcon() {
+  return (
+    <svg
+      width="20"
+      height="18"
+      viewBox="0 0 20 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M17.6562 5.32031C17.6562 6.10938 17.3903 6.7832 16.8583 7.3418C16.3263 7.90039 15.6845 8.17969 14.933 8.17969C14.1815 8.17969 13.5398 7.90039 13.0078 7.3418C12.4758 6.7832 12.2098 6.10938 12.2098 5.32031C12.2098 4.53125 12.4758 3.85742 13.0078 3.29883C13.5398 2.74023 14.1815 2.46094 14.933 2.46094C15.6845 2.46094 16.3263 2.74023 16.8583 3.29883C17.3903 3.85742 17.6562 4.53125 17.6562 5.32031ZM9.0625 14.0156C9.0625 13.2031 8.79092 12.5117 8.24777 11.9414C7.70461 11.3711 7.04613 11.0859 6.27232 11.0859C6.07143 11.0859 5.87054 11.1094 5.66964 11.1562L6.83036 11.6484C7.40327 11.8906 7.81064 12.3066 8.05246 12.8965C8.29427 13.4863 8.29985 14.0781 8.0692 14.6719C7.83854 15.2734 7.44048 15.6992 6.875 15.9492C6.30952 16.1992 5.74405 16.2031 5.17857 15.9609C5.02232 15.8984 4.79167 15.8027 4.48661 15.6738C4.18155 15.5449 3.95461 15.4492 3.8058 15.3867C4.0439 15.8555 4.38244 16.2324 4.82143 16.5176C5.26042 16.8027 5.74405 16.9453 6.27232 16.9453C7.04613 16.9453 7.70461 16.6602 8.24777 16.0898C8.79092 15.5195 9.0625 14.8281 9.0625 14.0156ZM18.3259 5.33203C18.3259 4.34766 17.9929 3.50586 17.327 2.80664C16.6611 2.10742 15.8594 1.75781 14.9219 1.75781C13.9769 1.75781 13.1715 2.10742 12.5056 2.80664C11.8397 3.50586 11.5067 4.34766 11.5067 5.33203C11.5067 6.32422 11.8397 7.16797 12.5056 7.86328C13.1715 8.55859 13.9769 8.90625 14.9219 8.90625C15.8594 8.90625 16.6611 8.55859 17.327 7.86328C17.9929 7.16797 18.3259 6.32422 18.3259 5.33203ZM20 5.33203C20 6.80859 19.5033 8.06641 18.51 9.10547C17.5167 10.1445 16.3207 10.6641 14.9219 10.6641L10.0446 14.4023C9.95536 15.4102 9.54985 16.2617 8.82812 16.957C8.1064 17.6523 7.25446 18 6.27232 18C5.37202 18 4.57589 17.7031 3.88393 17.1094C3.19196 16.5156 2.75298 15.7656 2.56696 14.8594L0 13.7812V8.75391L4.34152 10.5938C4.92932 10.2188 5.57292 10.0312 6.27232 10.0312C6.36905 10.0312 6.49926 10.0391 6.66295 10.0547L9.83259 5.28516C9.84747 3.82422 10.3516 2.57812 11.3449 1.54688C12.3382 0.515625 13.5305 0 14.9219 0C16.3207 0 17.5167 0.521484 18.51 1.56445C19.5033 2.60742 20 3.86328 20 5.33203Z" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/WifiIcon.tsx

@@ -0,0 +1,68 @@
+import classNames from 'classnames';
+import { useMemo } from 'react';
+
+export function WifiIcon({
+  value,
+  disabled = false,
+}: {
+  value: number;
+  disabled?: boolean;
+}) {
+  const percent = useMemo(
+    () =>
+      value
+        ? Math.max(
+            Math.min(((value - -95) * (100 - 0)) / (-40 - -95) + 0, 100)
+          ) / 100
+        : 0,
+    [value]
+  );
+
+  const y = useMemo(() => (percent ? (1 - percent) * 13 : 0), [percent]);
+
+  const col = useMemo(() => {
+    const colorsMap: { [key: number]: string } = {
+      0.4: 'fill-status-success',
+      0.2: 'fill-status-warning',
+      0: 'fill-status-critical',
+    };
+
+    const val = Object.keys(colorsMap)
+      .filter((key) => +key < percent)
+      .sort((a, b) => +b - +a)[0];
+    return disabled
+      ? 'fill-background-40'
+      : colorsMap[+val] || 'fill-background-10';
+  }, [percent, disabled]);
+
+  return (
+    <svg
+      width="16"
+      height="13"
+      viewBox="0 0 16 13"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.799 12.378L15.585 2.67801C13.3492 0.95947 10.6129 0.01903 7.793 1.00136e-05C4.9725 0.0172 2.23528 0.95782 0 2.67801L7.786 12.378L7.793 12.385L7.799 12.378Z"
+        fill="#3D6381"
+      />
+      <mask
+        id="mask0_0_1"
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        width="16"
+        height="13"
+        className={classNames(col, 'opacity-100')}
+      >
+        <path d="M0 2.712L7.782 12.392V12.407L7.795 12.396L15.577 2.716C13.3449 0.980306 10.6044 0.026036 7.777 0C4.95656 0.021826 2.22242 0.975276 0 2.712Z" />
+      </mask>
+      <g mask="url(#mask0_0_1)" className={classNames(col)}>
+        <path
+          style={{ transform: `translateY(${y}px)` }}
+          d="M0 2.712L7.782 12.392V12.407L7.795 12.396L15.577 2.716C13.3449 0.980306 10.6044 0.026036 7.777 0C4.95656 0.021826 2.22242 0.975276 0 2.712Z"
+        />
+      </g>
+    </svg>
+  );
+}

gui/src/components/commons/icon/WrenchIcons.tsx

@@ -0,0 +1,12 @@
+export function WrenchIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M16.4015 0.321751C14.4783 -0.370266 12.2436 0.0539342 10.7026 1.595C9.1615 3.13605 8.73728 5.3707 9.42928 7.29395L0 16.7233L3.27673 20L12.706 10.5707C14.6293 11.2627 16.864 10.8385 18.405 9.2974C19.9461 7.75635 20.3703 5.5217 19.6783 3.59845L16.3624 6.91435L14.0006 5.99942L13.0856 3.63762L16.4015 0.321751ZM3.93633 16.0637C4.31238 16.4397 4.31238 17.0494 3.93633 17.4254C3.5603 17.8015 2.95062 17.8015 2.57458 17.4254C2.19853 17.0494 2.19853 16.4397 2.57458 16.0637C2.95062 15.6876 3.5603 15.6876 3.93633 16.0637Z" />
+    </svg>
+  );
+}

gui/src/components/home/Home.tsx

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { TrackerDataT } from 'solarxr-protocol';
+import { useConfig } from '../../hooks/config';
+import { useTrackers } from '../../hooks/tracker';
+import { Typography } from '../commons/Typography';
+import { TrackerCard } from '../tracker/TrackerCard';
+import { TrackersTable } from '../tracker/TrackersTable';
+
+export function Home() {
+  const { config } = useConfig();
+  const { useAssignedTrackers, useUnassignedTrackers } = useTrackers();
+  const navigate = useNavigate();
+
+  const assignedTrackers = useAssignedTrackers();
+  const unasignedTrackers = useUnassignedTrackers();
+
+  const trackers = useMemo(
+    () => [...assignedTrackers, ...unasignedTrackers],
+    [assignedTrackers, unasignedTrackers]
+  );
+
+  const sendToSettings = (tracker: TrackerDataT) => {
+    navigate(
+      `/tracker/${tracker.trackerId?.trackerNum}/${tracker.trackerId?.deviceId?.id}`
+    );
+  };
+
+  return (
+    <div className="overflow-y-auto flex flex-col gap-2">
+      {trackers.length === 0 && (
+        <div className="flex px-5 pt-5 justify-center">
+          <Typography variant="standard">
+            No trackers detected or assigned
+          </Typography>
+        </div>
+      )}
+
+      {!config?.debug && trackers.length > 0 && (
+        <div className="grid sm:grid-cols-1 md:grid-cols-2 gap-3  px-4 my-4">
+          {trackers.map(({ tracker, device }, index) => (
+            <TrackerCard
+              key={index}
+              tracker={tracker}
+              device={device}
+              onClick={() => sendToSettings(tracker)}
+              smol
+              interactable
+            />
+          ))}{' '}
+        </div>
+      )}
+      {config?.debug && trackers.length > 0 && (
+        <div className="flex px-2 pt-5 justify-center  overflow-x-auto">
+          <TrackersTable
+            flatTrackers={trackers}
+            clickedTracker={(tracker) => sendToSettings(tracker)}
+          ></TrackersTable>
+        </div>
+      )}
+    </div>
+  );
+}

gui/src/components/home/ResetButton.tsx

@@ -0,0 +1,79 @@
+import { useRef, useState } from 'react';
+import { ResetRequestT, ResetType, RpcMessage } from 'solarxr-protocol';
+import { useWebsocketAPI } from '../../hooks/websocket-api';
+import { BigButton } from '../commons/BigButton';
+import {
+  MountingResetIcon,
+  QuickResetIcon,
+  ResetIcon,
+} from '../commons/icon/ResetIcon';
+
+export function ResetButton({ type }: { type: ResetType }) {
+  const timerid = useRef<NodeJS.Timer | null>(null);
+  const [reseting, setReseting] = useState(false);
+  const [timer, setTimer] = useState(0);
+  const { sendRPCPacket } = useWebsocketAPI();
+
+  const getText = () => {
+    switch (type) {
+      case ResetType.Quick:
+        return 'Quick Reset';
+      case ResetType.Mounting:
+        return 'Reset Mounting';
+    }
+    return 'Reset';
+  };
+
+  const getIcon = () => {
+    switch (type) {
+      case ResetType.Quick:
+        return <QuickResetIcon width={20} />;
+      case ResetType.Mounting:
+        return <MountingResetIcon width={20} />;
+    }
+    return <ResetIcon width={20} />;
+  };
+
+  const reset = () => {
+    const req = new ResetRequestT();
+    req.resetType = type;
+    setReseting(true);
+    setTimer(0);
+    if (type !== ResetType.Quick) {
+      if (timerid.current) clearInterval(timerid.current);
+      timerid.current = setInterval(() => {
+        setTimer((timer) => {
+          const newTimer = timer + 1;
+          if (newTimer >= 3) {
+            // Stop the current interval
+            if (timerid.current) clearInterval(timerid.current);
+
+            // Only actually reset on exactly 0 so it doesn't repeatedly reset if bugged
+            if (newTimer === 3) sendRPCPacket(RpcMessage.ResetRequest, req);
+            else
+              console.warn(
+                `Reset timer is still running after 3 seconds (newTimer = ${newTimer})`
+              );
+
+            // Reset the state
+            // Don't reset the timer in-case the interval keeps running
+            setReseting(false);
+          }
+          return newTimer;
+        });
+      }, 1000);
+    } else {
+      sendRPCPacket(RpcMessage.ResetRequest, req);
+      setReseting(false);
+    }
+  };
+
+  return (
+    <BigButton
+      text={!reseting || timer >= 3 ? getText() : `${3 - timer}`}
+      icon={getIcon()}
+      onClick={reset}
+      disabled={reseting}
+    ></BigButton>
+  );
+}

gui/src/components/onboarding/BodyAssignment.tsx

@@ -0,0 +1,250 @@
+import { useMemo } from 'react';
+import { BodyPart } from 'solarxr-protocol';
+import { FlatDeviceTracker } from '../../hooks/app';
+import { useTrackers } from '../../hooks/tracker';
+import { BodyInteractions } from '../commons/BodyInteractions';
+import { TrackerPartCard } from '../tracker/TrackerPartCard';
+
+export function BodyAssignment({
+  advanced,
+  onRoleSelected,
+  onlyAssigned = false,
+}: {
+  advanced: boolean;
+  onlyAssigned: boolean;
+  onRoleSelected: (role: BodyPart) => void;
+}) {
+  const { useAssignedTrackers } = useTrackers();
+
+  const assignedTrackers = useAssignedTrackers();
+
+  const trackerPartGrouped = useMemo(
+    () =>
+      assignedTrackers.reduce<{ [key: number]: FlatDeviceTracker[] }>(
+        (curr, td) => {
+          if (!td && onlyAssigned) return curr;
+
+          const key = td.tracker.info?.bodyPart || BodyPart.NONE;
+          return {
+            ...curr,
+            [key]: [...(curr[key] || []), td],
+          };
+        },
+        {}
+      ),
+    [assignedTrackers]
+  );
+
+  const assignedRoles = useMemo(
+    () =>
+      assignedTrackers.map(
+        ({ tracker }) => tracker.info?.bodyPart || BodyPart.NONE,
+        {}
+      ),
+    [assignedTrackers]
+  );
+
+  return (
+    <>
+      <BodyInteractions
+        assignedRoles={assignedRoles}
+        leftControls={
+          <div className="flex flex-col justify-between h-full">
+            <div className="flex flex-col gap-2">
+              {advanced && (
+                <TrackerPartCard
+                  label="HEAD"
+                  onlyAssigned={onlyAssigned}
+                  td={trackerPartGrouped[BodyPart.HEAD]}
+                  role={BodyPart.HEAD}
+                  onClick={() => onRoleSelected(BodyPart.HEAD)}
+                  direction="right"
+                />
+              )}
+              {advanced && (
+                <TrackerPartCard
+                  label="NECK"
+                  onlyAssigned={onlyAssigned}
+                  td={trackerPartGrouped[BodyPart.NECK]}
+                  role={BodyPart.NECK}
+                  onClick={() => onRoleSelected(BodyPart.NECK)}
+                  direction="right"
+                />
+              )}
+            </div>
+
+            <div className="flex flex-col gap-2">
+              {advanced && (
+                <TrackerPartCard
+                  label="RIGHT SHOULDER"
+                  onlyAssigned={onlyAssigned}
+                  td={trackerPartGrouped[BodyPart.RIGHT_SHOULDER]}
+                  role={BodyPart.RIGHT_SHOULDER}
+                  onClick={() => onRoleSelected(BodyPart.RIGHT_SHOULDER)}
+                  direction="right"
+                />
+              )}
+              <TrackerPartCard
+                label="RIGHT UPPER ARM"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.RIGHT_UPPER_ARM]}
+                role={BodyPart.RIGHT_UPPER_ARM}
+                onClick={() => onRoleSelected(BodyPart.RIGHT_UPPER_ARM)}
+                direction="right"
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <TrackerPartCard
+                label="RIGHT LOWER ARM"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.RIGHT_LOWER_ARM]}
+                role={BodyPart.RIGHT_LOWER_ARM}
+                onClick={() => onRoleSelected(BodyPart.RIGHT_LOWER_ARM)}
+                direction="right"
+              />
+
+              {advanced && (
+                <TrackerPartCard
+                  label="RIGHT HAND"
+                  onlyAssigned={onlyAssigned}
+                  td={trackerPartGrouped[BodyPart.RIGHT_HAND]}
+                  role={BodyPart.RIGHT_HAND}
+                  onClick={() => onRoleSelected(BodyPart.RIGHT_HAND)}
+                  direction="right"
+                />
+              )}
+            </div>
+            <div className="flex flex-col gap-2">
+              <TrackerPartCard
+                label="RIGHT UPPER LEG"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.RIGHT_UPPER_LEG]}
+                role={BodyPart.RIGHT_UPPER_LEG}
+                onClick={() => onRoleSelected(BodyPart.RIGHT_UPPER_LEG)}
+                direction="right"
+              />
+
+              <TrackerPartCard
+                label="RIGHT LOWER LEG"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.RIGHT_LOWER_LEG]}
+                role={BodyPart.RIGHT_LOWER_LEG}
+                onClick={() => onRoleSelected(BodyPart.RIGHT_LOWER_LEG)}
+                direction="right"
+              />
+              <TrackerPartCard
+                label="RIGHT FOOT"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.RIGHT_FOOT]}
+                role={BodyPart.RIGHT_FOOT}
+                onClick={() => onRoleSelected(BodyPart.RIGHT_FOOT)}
+                direction="right"
+              />
+            </div>
+          </div>
+        }
+        rightControls={
+          <div className="flex flex-col justify-between h-full">
+            <TrackerPartCard
+              label="CHEST"
+              onlyAssigned={onlyAssigned}
+              td={trackerPartGrouped[BodyPart.CHEST]}
+              role={BodyPart.CHEST}
+              onClick={() => onRoleSelected(BodyPart.CHEST)}
+              direction="left"
+            />
+
+            <div className="flex flex-col gap-2">
+              {advanced && (
+                <TrackerPartCard
+                  label="LEFT SHOULDER"
+                  onlyAssigned={onlyAssigned}
+                  td={trackerPartGrouped[BodyPart.LEFT_SHOULDER]}
+                  role={BodyPart.LEFT_SHOULDER}
+                  onClick={() => onRoleSelected(BodyPart.LEFT_SHOULDER)}
+                  direction="left"
+                />
+              )}
+
+              <TrackerPartCard
+                label="LEFT UPPER ARM"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.LEFT_UPPER_ARM]}
+                role={BodyPart.LEFT_UPPER_ARM}
+                onClick={() => onRoleSelected(BodyPart.LEFT_UPPER_ARM)}
+                direction="left"
+              />
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <TrackerPartCard
+                label="LEFT LOWER ARM"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.LEFT_LOWER_ARM]}
+                role={BodyPart.LEFT_LOWER_ARM}
+                onClick={() => onRoleSelected(BodyPart.LEFT_LOWER_ARM)}
+                direction="left"
+              />
+              {advanced && (
+                <TrackerPartCard
+                  label="LEFT HAND"
+                  onlyAssigned={onlyAssigned}
+                  td={trackerPartGrouped[BodyPart.LEFT_HAND]}
+                  onClick={() => onRoleSelected(BodyPart.LEFT_HAND)}
+                  role={BodyPart.LEFT_HAND}
+                  direction="left"
+                />
+              )}
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <TrackerPartCard
+                label="WAIST"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.WAIST]}
+                onClick={() => onRoleSelected(BodyPart.WAIST)}
+                role={BodyPart.WAIST}
+                direction="left"
+              />
+              <TrackerPartCard
+                label="HIP"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.HIP]}
+                onClick={() => onRoleSelected(BodyPart.HIP)}
+                role={BodyPart.HIP}
+                direction="left"
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <TrackerPartCard
+                label="LEFT UPPER LEG"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.LEFT_UPPER_LEG]}
+                role={BodyPart.LEFT_UPPER_LEG}
+                onClick={() => onRoleSelected(BodyPart.LEFT_UPPER_LEG)}
+                direction="left"
+              />
+
+              <TrackerPartCard
+                label="LEFT LOWER LEG"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.LEFT_LOWER_LEG]}
+                role={BodyPart.LEFT_LOWER_LEG}
+                onClick={() => onRoleSelected(BodyPart.LEFT_LOWER_LEG)}
+                direction="left"
+              />
+              <TrackerPartCard
+                label="LEFT FOOT"
+                onlyAssigned={onlyAssigned}
+                td={trackerPartGrouped[BodyPart.LEFT_FOOT]}
+                role={BodyPart.LEFT_FOOT}
+                onClick={() => onRoleSelected(BodyPart.LEFT_FOOT)}
+                direction="left"
+              />
+            </div>
+          </div>
+        }
+      ></BodyInteractions>
+    </>
+  );
+}

gui/src/components/onboarding/OnboardingContextProvicer.tsx

@@ -0,0 +1,19 @@
+import { ReactChild } from 'react';
+import {
+  OnboardingContextC,
+  useProvideOnboarding,
+} from '../../hooks/onboarding';
+
+export function OnboardingContextProvider({
+  children,
+}: {
+  children: ReactChild;
+}) {
+  const context = useProvideOnboarding();
+
+  return (
+    <OnboardingContextC.Provider value={context}>
+      {children}
+    </OnboardingContextC.Provider>
+  );
+}

gui/src/components/onboarding/OnboardingLayout.tsx

@@ -0,0 +1,27 @@
+import { ReactChild } from 'react';
+import { useLayout } from '../../hooks/layout';
+import { useOnboarding } from '../../hooks/onboarding';
+import { MainLayoutRoute } from '../MainLayout';
+import { TopBar } from '../TopBar';
+
+export function OnboardingLayout({ children }: { children: ReactChild }) {
+  const { layoutHeight, ref } = useLayout<HTMLDivElement>();
+  const { state } = useOnboarding();
+
+  return !state.alonePage ? (
+    <>
+      <TopBar progress={state.progress}></TopBar>
+      <div
+        ref={ref}
+        className="flex-grow pt-10 mx-4"
+        style={{ height: layoutHeight }}
+      >
+        {children}
+      </div>
+    </>
+  ) : (
+    <MainLayoutRoute widgets={false}>
+      <div className="flex-grow pt-10 mx-4">{children}</div>
+    </MainLayoutRoute>
+  );
+}

gui/src/components/onboarding/pages/ConnectTracker.tsx

@@ -0,0 +1,224 @@
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  CloseSerialRequestT,
+  OpenSerialRequestT,
+  RpcMessage,
+  SerialUpdateResponseT,
+  SetWifiRequestT,
+} from 'solarxr-protocol';
+import { useLayout } from '../../../hooks/layout';
+import { useOnboarding } from '../../../hooks/onboarding';
+import { useTrackers } from '../../../hooks/tracker';
+import { useWebsocketAPI } from '../../../hooks/websocket-api';
+import { ArrowLink } from '../../commons/ArrowLink';
+import { Button } from '../../commons/Button';
+import { LoaderIcon } from '../../commons/icon/LoaderIcon';
+import { TipBox } from '../../commons/TipBox';
+import { Typography } from '../../commons/Typography';
+import { TrackerCard } from '../../tracker/TrackerCard';
+
+const BOTTOM_HEIGHT = 80;
+type ConnectionStatus =
+  | 'CONNECTING'
+  | 'CONNECTED'
+  | 'HANDSHAKE'
+  | 'ERROR'
+  | 'START-CONNECTING';
+
+const statusLabelMap = {
+  ['CONNECTING']: 'Sending wifi credentials',
+  ['CONNECTED']: 'Connected to WiFi',
+  ['ERROR']: 'Unable to connect to Wifi',
+  ['START-CONNECTING']: 'Looking for trackers',
+  ['HANDSHAKE']: 'Connected to the Server',
+};
+
+export function ConnectTrackersPage() {
+  const { layoutHeight, ref } = useLayout<HTMLDivElement>();
+  const { trackers, useConnectedTrackers } = useTrackers();
+  const { applyProgress, state, skipSetup } = useOnboarding();
+  const navigate = useNavigate();
+  const { sendRPCPacket, useRPCPacket } = useWebsocketAPI();
+  const [isSerialOpen, setSerialOpen] = useState(false);
+  const [connectionStatus, setConnectionStatus] =
+    useState<ConnectionStatus>('START-CONNECTING');
+
+  applyProgress(0.4);
+
+  const connectedTrackers = useConnectedTrackers();
+
+  useEffect(() => {
+    if (!state.wifi) {
+      navigate('/onboarding/wifi-creds');
+    }
+
+    sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT());
+    return () => {
+      sendRPCPacket(RpcMessage.CloseSerialRequest, new CloseSerialRequestT());
+    };
+  }, []);
+
+  useRPCPacket(
+    RpcMessage.SerialUpdateResponse,
+    (data: SerialUpdateResponseT) => {
+      if (data.closed) {
+        setSerialOpen(false);
+        setConnectionStatus('START-CONNECTING');
+        setTimeout(() => {
+          sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT());
+        }, 1000);
+      }
+
+      if (!data.closed && !isSerialOpen) {
+        setSerialOpen(true);
+        setConnectionStatus('START-CONNECTING');
+      }
+
+      if (data.log) {
+        const log = data.log as string;
+        if (connectionStatus === 'START-CONNECTING' && state.wifi) {
+          setConnectionStatus('CONNECTING');
+          if (!state.wifi) return;
+          const wifi = new SetWifiRequestT();
+          wifi.ssid = state.wifi.ssid;
+          wifi.password = state.wifi.password;
+          sendRPCPacket(RpcMessage.SetWifiRequest, wifi);
+        }
+
+        if (log.includes('Connected successfully to SSID')) {
+          setConnectionStatus('CONNECTED');
+        }
+
+        if (log.includes('Handshake successful')) {
+          setConnectionStatus('HANDSHAKE');
+          setTimeout(() => {
+            setConnectionStatus('START-CONNECTING');
+          }, 3000);
+        }
+
+        if (
+          // eslint-disable-next-line quotes
+          log.includes("Can't connect from any credentials")
+        ) {
+          setConnectionStatus('ERROR');
+        }
+      }
+    }
+  );
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      if (!isSerialOpen)
+        sendRPCPacket(RpcMessage.OpenSerialRequest, new OpenSerialRequestT());
+      else clearInterval(id);
+    }, 1000);
+
+    return () => {
+      clearInterval(id);
+    };
+  }, [isSerialOpen, sendRPCPacket]);
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="flex gap-10 w-full max-w-7xl ">
+        <div className="flex flex-col w-full max-w-sm">
+          <ArrowLink to="/onboarding/wifi-creds">
+            Go Back to WiFi credentials
+          </ArrowLink>
+          <Typography variant="main-title">Connect trackers</Typography>
+          <Typography color="secondary">
+            Now onto the fun part, connecting all the trackers!
+          </Typography>
+          <Typography color="secondary">
+            Simply connect all that aren't connected yet, through a USB port.
+          </Typography>
+          <div className="flex flex-col gap-2 py-5">
+            {/* <ArrowLink
+              to="/onboarding/connect"
+              direction="right"
+              variant="boxed"
+            >
+              I have other types of trackers
+            </ArrowLink> */}
+            <ArrowLink to="/settings/serial" direction="right" variant="boxed">
+              I'm having trouble connecting!
+            </ArrowLink>
+          </div>
+          <TipBox>
+            Not sure which tracker is which? Shake a tracker and it will
+            highlight the corresponding item.
+          </TipBox>
+
+          <div
+            className={classNames(
+              'rounded-xl bg-background-70 h-16 flex gap-2 p-3 lg:w-full mt-4',
+              connectionStatus === 'ERROR' && 'border-2 border-status-critical'
+            )}
+          >
+            <div className="flex flex-col justify-center fill-background-10">
+              <LoaderIcon
+                youSpinMeRightRoundBabyRightRound={connectionStatus !== 'ERROR'}
+              ></LoaderIcon>
+            </div>
+            <div className="flex flex-col">
+              <Typography bold>USB Tracker</Typography>
+              <Typography color="secondary">
+                {statusLabelMap[connectionStatus]}
+              </Typography>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col flex-grow">
+          <Typography color="secondary" bold>
+            {connectedTrackers.length} trackers connected
+          </Typography>
+
+          <div
+            className="flex-grow overflow-y-scroll"
+            ref={ref}
+            style={{ height: layoutHeight - BOTTOM_HEIGHT }}
+          >
+            <div className="grid lg:grid-cols-2 md:grid-cols-1 gap-2 mx-3 pt-3">
+              {Array.from({
+                ...connectedTrackers,
+                length: Math.max(trackers.length, 20),
+              }).map((tracker, index) => (
+                <div key={index}>
+                  {!tracker && (
+                    <div className="rounded-xl bg-background-70 h-16"></div>
+                  )}
+                  {tracker && (
+                    <TrackerCard
+                      tracker={tracker.tracker}
+                      device={tracker.device}
+                      smol
+                    ></TrackerCard>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        style={{ height: BOTTOM_HEIGHT }}
+        className="flex items-center w-full"
+      >
+        <div className="w-full flex">
+          <div className="flex flex-grow">
+            <Button variant="secondary" to="/" onClick={skipSetup}>
+              Skip setup
+            </Button>
+          </div>
+          <div className="flex gap-3">
+            <Button variant="primary" to="/onboarding/trackers-assign">
+              I connected all my trackers
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

gui/src/components/onboarding/pages/Done.tsx

@@ -0,0 +1,28 @@
+import { NavLink } from 'react-router-dom';
+import { useOnboarding } from '../../../hooks/onboarding';
+import { Button } from '../../commons/Button';
+import { SlimeVRIcon } from '../../commons/icon/SimevrIcon';
+import { Typography } from '../../commons/Typography';
+
+export function DonePage() {
+  const { applyProgress, skipSetup } = useOnboarding();
+
+  applyProgress(1);
+
+  return (
+    <div className="flex flex-col gap-5 h-full items-center w-full justify-center">
+      <div className="flex flex-col gap-5 items-center z-10">
+        <SlimeVRIcon></SlimeVRIcon>
+        <Typography variant="main-title">You're all set!</Typography>
+        <div className="flex flex-col items-center">
+          <Typography color="secondary">
+            Enjoy your full body experience
+          </Typography>
+        </div>
+        <Button variant="primary" to="/" onClick={skipSetup}>
+          Close the guide
+        </Button>
+      </div>
+    </div>
+  );
+}

gui/src/components/onboarding/pages/EnterVR.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { BodyPart } from 'solarxr-protocol';
+import { useOnboarding } from '../../../hooks/onboarding';
+import { useTrackers } from '../../../hooks/tracker';
+import { ArrowLink } from '../../commons/ArrowLink';
+import { Button } from '../../commons/Button';
+import { Typography } from '../../commons/Typography';
+
+export function EnterVRPage() {
+  const { applyProgress, skipSetup } = useOnboarding();
+
+  applyProgress(0.6);
+
+  return (
+    <>
+      <div className="flex flex-col gap-5 h-full items-center w-full justify-center">
+        <div className="flex flex-col w-full h-full justify-center items-center">
+          <div className="flex gap-8">
+            <div className="flex flex-col max-w-md gap-3">
+              <ArrowLink to="/onboarding/trackers-assign" direction="left">
+                Go Back to Tracker assignent
+              </ArrowLink>
+              <Typography variant="main-title">Time to enter VR!</Typography>
+              <Typography color="secondary">
+                Put on all your trackers and then enter VR!
+              </Typography>
+            </div>
+            {/* <div className="flex flex-col flex-grow gap-3 rounded-xl fill-background-50">
+              <Typography variant="main-title">Illustration HERE</Typography>
+            </div> */}
+          </div>
+        </div>
+        <div className="w-full py-4 flex flex-row">
+          <div className="flex flex-grow">
+            <Button variant="secondary" to="/" onClick={skipSetup}>
+              Skip setup
+            </Button>
+          </div>
+          <div className="flex gap-3">
+            <Button variant="primary" to="/onboarding/mounting/auto">
+              I'm ready
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

gui/src/components/onboarding/pages/Home.tsx

@@ -0,0 +1,59 @@
+import { NavLink } from 'react-router-dom';
+import { useOnboarding } from '../../../hooks/onboarding';
+import { Button } from '../../commons/Button';
+import { SlimeVRIcon } from '../../commons/icon/SimevrIcon';
+import { Typography } from '../../commons/Typography';
+
+export function HomePage() {
+  const { applyProgress, skipSetup } = useOnboarding();
+
+  applyProgress(0.1);
+
+  return (
+    <div className="flex flex-col gap-5 h-full items-center w-full justify-center">
+      <div className="flex flex-col gap-5 items-center z-10">
+        <SlimeVRIcon></SlimeVRIcon>
+        <Typography variant="main-title">Welcome to SlimeVR</Typography>
+        <div className="flex flex-col items-center">
+          <Typography color="secondary">Bringing full-body tracking</Typography>
+          <Typography color="secondary">to everyone</Typography>
+        </div>
+        <Button variant="primary" to="/onboarding/wifi-creds">
+          Lets get setup!
+        </Button>
+        <NavLink to="/" onClick={skipSetup}>
+          <Typography color="secondary">Skip setup</Typography>
+        </NavLink>
+      </div>
+
+      <div
+        className="absolute bg-accent-background-50 w-full rounded-full"
+        style={{
+          bottom: 'calc(-300vw / 1.04)',
+          height: '300vw',
+          width: '300vw',
+        }}
+      ></div>
+      <img
+        className="absolute"
+        src="/images/slime-girl.png"
+        style={{
+          width: '40%',
+          maxWidth: 800,
+          bottom: '1%',
+          left: '9%',
+        }}
+      />
+      <img
+        className="absolute"
+        src="/images/slimes.png"
+        style={{
+          width: '40%',
+          maxWidth: 800,
+          bottom: '1%',
+          right: '9%',
+        }}
+      />
+    </div>
+  );
+}

gui/src/components/onboarding/pages/ResetTutorial.tsx

@@ -0,0 +1,47 @@
+import { useOnboarding } from '../../../hooks/onboarding';
+import { ArrowLink } from '../../commons/ArrowLink';
+import { Button } from '../../commons/Button';
+import { Typography } from '../../commons/Typography';
+
+export function ResetTutorialPage() {
+  const { applyProgress, skipSetup } = useOnboarding();
+
+  applyProgress(0.8);
+
+  return (
+    <>
+      <div className="flex flex-col gap-5 h-full items-center w-full justify-center">
+        <div className="flex flex-col w-full h-full justify-center px-20">
+          <div className="flex gap-8">
+            <div className="flex flex-col max-w-md gap-3">
+              <ArrowLink to="/onboarding/mounting/auto" direction="left">
+                Go Back to Mounting calibration
+              </ArrowLink>
+              <Typography variant="main-title">
+                Reset tutorial
+                <span className="mx-2 p-1 bg-accent-background-30 text-standard rounded-md">
+                  Work in progress
+                </span>
+              </Typography>
+              <Typography color="secondary">
+                This feature isn't done, just press continue
+              </Typography>
+            </div>
+          </div>
+        </div>
+        <div className="w-full py-4 flex flex-row">
+          <div className="flex flex-grow">
+            <Button variant="secondary" to="/" onClick={skipSetup}>
+              Skip setup
+            </Button>
+          </div>
+          <div className="flex gap-3">
+            <Button variant="primary" to="/onboarding/body-proportions/auto">
+              Continue
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

gui/src/components/onboarding/pages/WifiCreds.tsx

@@ -0,0 +1,92 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { useOnboarding } from '../../../hooks/onboarding';
+import { ArrowLink } from '../../commons/ArrowLink';
+import { Button } from '../../commons/Button';
+import { Input } from '../../commons/Input';
+import { Typography } from '../../commons/Typography';
+
+export interface WifiForm {
+  ssid: string;
+  password: string;
+}
+
+export function WifiCredsPage() {
+  const navigate = useNavigate();
+  const { applyProgress, state, setWifiCredentials, skipSetup } =
+    useOnboarding();
+  const { register, reset, handleSubmit, formState } = useForm<WifiForm>({
+    defaultValues: {},
+    mode: 'onChange',
+  });
+
+  applyProgress(0.2);
+
+  useEffect(() => {
+    if (state.wifi) {
+      reset({
+        ssid: state.wifi.ssid,
+        password: state.wifi.password,
+      });
+    }
+  }, []);
+
+  const submitWifiCreds = (value: WifiForm) => {
+    setWifiCredentials(value.ssid, value.password);
+    navigate('/onboarding/connect-trackers');
+  };
+
+  return (
+    <form
+      className="flex flex-col w-full h-full"
+      onSubmit={handleSubmit(submitWifiCreds)}
+    >
+      <div className="flex flex-col w-full h-full justify-center items-center">
+        <div className="flex gap-10">
+          <div className="flex flex-col max-w-sm">
+            <ArrowLink to="/onboarding/home" direction="left">
+              Go Back to introduction
+            </ArrowLink>
+            <Typography variant="main-title">Input WiFi credentials</Typography>
+            <Typography color="secondary">
+              The Trackers will use these credentials to connect wirelessly
+            </Typography>
+            <Typography color="secondary">
+              please use the credentials that you are currently connected to
+            </Typography>
+          </div>
+          <div className="flex flex-col bg-background-70 gap-3 p-10 rounded-xl max-w-sm">
+            <Input
+              {...register('ssid', { required: true })}
+              type="text"
+              label="SSID"
+              placeholder="Enter SSID"
+            />
+            <Input
+              {...register('password')}
+              type="password"
+              label="Password"
+              placeholder="Enter password"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="w-full py-4 flex flex-row">
+        <div className="flex flex-grow">
+          <Button variant="secondary" to="/" onClick={skipSetup}>
+            Skip setup
+          </Button>
+        </div>
+        <div className="flex gap-3">
+          <Button variant="secondary" to="/onboarding/trackers-assign">
+            Skip wifi settings
+          </Button>
+          <Button type="submit" variant="primary" disabled={!formState.isValid}>
+            Submit!
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}