✨ Switch to UV

Also removed features unused json endpoint data

.github/workflows/deploy.yml

@@ -36,6 +36,11 @@ jobs:
           cache: "pnpm"
           cache-dependency-path: "./app/pnpm-lock.yaml"
 
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
+        with:
+          version: "27.x"
+
       - run: pnpm install
       - run: pnpm run build
 

.github/workflows/embedded-build.yml

@@ -18,6 +18,8 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
+        with:
+          submodules: "recursive"
       - uses: actions/cache@v3
         with:
           path: |
@@ -32,6 +34,12 @@ jobs:
       - name: Install PlatformIO Core
         run: pip install --upgrade platformio
 
+      - name: Install Python dependencies for nanopb
+        run: pip install protobuf grpcio-tools
+
+      - name: Build Protocol Buffers (nanopb)
+        run: python ./submodules/nanopb/generator/nanopb_generator.py -I "./platform_shared/" -D esp32/src/platform_shared ./platform_shared/message.proto
+
       - name: Build PlatformIO Project
         run: pio run
 

.github/workflows/frontend-tests.yml

@@ -2,14 +2,14 @@ name: Frontend Tests
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
     paths:
-        - 'app/**'  
+      - "app/**"
   pull_request:
-    branches: [ master ]
+    branches: [master]
     paths:
-        - 'app/**'  
-    
+      - "app/**"
+
 permissions:
   contents: read
 
@@ -20,22 +20,31 @@ jobs:
       run:
         working-directory: ./app
     steps:
-    - uses: actions/checkout@v4
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 9
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9
 
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: 'latest'
-        cache: 'pnpm'
-        cache-dependency-path: './app/pnpm-lock.yaml'
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "latest"
+          cache: "pnpm"
+          cache-dependency-path: "./app/pnpm-lock.yaml"
 
-    - name: Install dependencies
-      run: pnpm install
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
+        with:
+          version: "27.x"
 
-    - name: Run tests
-      run: pnpm test
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Generate Proto
+        run: pnpm proto
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run tests
+        run: pnpm test

.github/workflows/proto-build.yml

@@ -0,0 +1,59 @@
+name: Proto Build
+
+on:
+  push:
+    branches: [master, protobuf-playground]
+  pull_request:
+    branches: [master, protobuf-playground]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./
+    env:
+      BASE_PATH: /SpotMicroESP32-Leika
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          submodules: "recursive"
+
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: "3.x"
+
+      - name: Install Python dependencies
+        run: pip install protobuf grpcio-tools
+
+      - name: Build Protocol Buffers (nanopb)
+        run: python ./submodules/nanopb/generator/nanopb_generator.py -I "./platform_shared/" -D esp32/src/platform_shared ./platform_shared/message.proto
+
+      - name: Setup Protocol Buffers compiler
+        uses: arduino/setup-protoc@v3
+        with:
+          version: "25.x"
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+          cache-dependency-path: "./app/pnpm-lock.yaml"
+
+      - name: Install dependencies
+        run: pnpm install
+        working-directory: ./app
+
+      - name: Build Protocol Buffers (Typescript)
+        run: pnpm proto
+        working-directory: ./app

.gitignore

@@ -6,3 +6,12 @@ __pycache__/
 *.py[cod]
 *$py.class
 .pio
+managed_components/
+dependencies.lock
+sdkconfig
+sdkconfig.*
+!sdkconfig.defaults
+esp32/src/platform_shared/*
+!esp32/src/platform_shared/.gitkeep
+app/src/lib/platform_shared/*
+!app/src/lib/platform_shared/.gitkeep

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "submodules/nanopb"]
+	path = submodules/nanopb
+	url = https://github.com/nanopb/nanopb
+	branch = master

.vscode/settings.json

@@ -13,7 +13,7 @@
     },
     "editor.tabSize": 4,
     "editor.detectIndentation": false,
-    "cmake.sourceDirectory": "C:/data/repos/Hardware/Spot Micro - Leika/.pio/libdeps/esp32cam/esp32-camera",
+    "cmake.sourceDirectory": "C:/data/repos/Hardware/Spot_Micro_Leika",
     "cSpell.words": [
       "Adafruit",
       "IRAM",

CMakeLists.txt

@@ -0,0 +1,3 @@
+cmake_minimum_required(VERSION 3.16.0)
+include($ENV{IDF_PATH}/tools/cmake/project.cmake)
+project(Spot_Micro_Leika)

app/.env

@@ -1,3 +1 @@
-PUBLIC_VITE_USE_HOST_NAME=true
-PUBLIC_USE_JSON=true
-PUBLIC_USE_MSGPACK=true
+PUBLIC_VITE_USE_HOST_NAME=true

app/.eslintignore

@@ -1,13 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock

app/.eslintrc.cjs

@@ -1,31 +0,0 @@
-/** @type { import("eslint").Linter.Config } */
-module.exports = {
-    root: true,
-    extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:svelte/recommended',
-        'prettier'
-    ],
-    parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint'],
-    parserOptions: {
-        sourceType: 'module',
-        ecmaVersion: 2020,
-        extraFileExtensions: ['.svelte']
-    },
-    env: {
-        browser: true,
-        es2017: true,
-        node: true
-    },
-    overrides: [
-        {
-            files: ['*.svelte'],
-            parser: 'svelte-eslint-parser',
-            parserOptions: {
-                parser: '@typescript-eslint/parser'
-            }
-        }
-    ]
-}

app/env.d.ts

@@ -1,8 +1,8 @@
-declare module 'app-env' {
-    interface ENV {
-        VITE_USE_HOST_NAME: boolean
-    }
+declare module "app-env" {
+  interface ENV {
+    VITE_USE_HOST_NAME: boolean;
+  }
 
-    const appEnv: ENV
-    export default appEnv
+  const appEnv: ENV;
+  export default appEnv;
 }

app/eslint.config.js

@@ -0,0 +1,44 @@
+import js from '@eslint/js'
+import ts from 'typescript-eslint'
+import svelte from 'eslint-plugin-svelte'
+import prettier from 'eslint-config-prettier'
+import globals from 'globals'
+
+export default ts.config(
+    js.configs.recommended,
+    ...ts.configs.recommended,
+    ...svelte.configs['flat/recommended'],
+    prettier,
+    ...svelte.configs['flat/prettier'],
+    {
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node
+            }
+        }
+    },
+    {
+        files: ['**/*.svelte'],
+        languageOptions: {
+            parserOptions: {
+                parser: ts.parser
+            }
+        }
+    },
+    {
+        ignores: [
+            '.DS_Store',
+            'node_modules/',
+            'build/',
+            '.svelte-kit/',
+            'package/',
+            '.env',
+            '.env.*',
+            '!.env.example',
+            'pnpm-lock.yaml',
+            'package-lock.json',
+            'yarn.lock'
+        ]
+    }
+)

app/package.json

@@ -4,7 +4,7 @@
     "private": true,
     "scripts": {
         "dev": "vite dev --host",
-        "build": "vite build",
+        "build": "pnpm proto && vite build",
         "build:embedded": "cross-env VITE_USE_HOST_NAME=true vite build",
         "preview": "vite preview",
         "test": "pnpm run test:integration && pnpm run test:unit",
@@ -13,9 +13,11 @@
         "lint": "prettier --check . && eslint .",
         "format": "prettier --write .",
         "test:integration": "playwright test",
-        "test:unit": "vitest"
+        "test:unit": "vitest",
+        "proto": "node scripts/compile_protos.js"
     },
     "devDependencies": {
+        "@eslint/js": "^9.39.2",
         "@iconify-json/mdi": "^1.2.3",
         "@iconify-json/tabler": "^1.2.23",
         "@playwright/test": "^1.56.0",
@@ -24,12 +26,14 @@
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
         "@types/eslint": "^9.6.1",
         "@types/three": "^0.180.0",
+        "@types/ws": "^8.18.1",
         "@typescript-eslint/eslint-plugin": "^8.46.0",
         "@typescript-eslint/parser": "^8.46.0",
         "autoprefixer": "^10.4.21",
         "eslint": "^9.37.0",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-svelte": "^3.12.4",
+        "globals": "^17.0.0",
         "jsdom": "^27.0.0",
         "prettier": "^3.6.2",
         "prettier-plugin-svelte": "^3.4.0",
@@ -37,15 +41,18 @@
         "svelte-check": "^4.3.3",
         "svelte-focus-trap": "^1.2.0",
         "tailwindcss": "^4.1.14",
+        "ts-proto-descriptors": "^2.1.0",
         "tslib": "^2.8.1",
         "typescript": "^5.9.3",
+        "typescript-eslint": "^8.51.0",
         "unplugin-icons": "^22.4.2",
         "vite": "^7.1.9",
-        "vitest": "^3.2.4"
+        "vitest": "^3.2.4",
+        "ws": "^8.18.3"
     },
     "type": "module",
     "dependencies": {
-        "@msgpack/msgpack": "^3.1.2",
+        "@bufbuild/protobuf": "^2.10.2",
         "@niku/vite-env-caster": "^1.1.2",
         "@sveltejs/adapter-auto": "^6.1.1",
         "@tailwindcss/vite": "^4.1.14",
@@ -57,6 +64,7 @@
         "svelte-dnd-list": "^0.1.8",
         "svelte-modals": "^2.0.1",
         "three": "^0.180.0",
+        "ts-proto": "^2.10.1",
         "urdf-loader": "^0.12.6",
         "uzip": "^0.20201231.0",
         "xacro-parser": "^0.3.10"

app/pnpm-lock.yaml

@@ -8,9 +8,9 @@ importers:
 
   .:
     dependencies:
-      '@msgpack/msgpack':
-        specifier: ^3.1.2
-        version: 3.1.2
+      '@bufbuild/protobuf':
+        specifier: ^2.10.2
+        version: 2.10.2
       '@niku/vite-env-caster':
         specifier: ^1.1.2
         version: 1.1.2
@@ -44,6 +44,9 @@ importers:
       three:
         specifier: ^0.180.0
         version: 0.180.0
+      ts-proto:
+        specifier: ^2.10.1
+        version: 2.10.1
       urdf-loader:
         specifier: ^0.12.6
         version: 0.12.6(three@0.180.0)
@@ -54,6 +57,9 @@ importers:
         specifier: ^0.3.10
         version: 0.3.10
     devDependencies:
+      '@eslint/js':
+        specifier: ^9.39.2
+        version: 9.39.2
       '@iconify-json/mdi':
         specifier: ^1.2.3
         version: 1.2.3
@@ -78,6 +84,9 @@ importers:
       '@types/three':
         specifier: ^0.180.0
         version: 0.180.0
+      '@types/ws':
+        specifier: ^8.18.1
+        version: 8.18.1
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.46.0
         version: 8.46.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
@@ -96,6 +105,9 @@ importers:
       eslint-plugin-svelte:
         specifier: ^3.12.4
         version: 3.12.4(eslint@9.37.0(jiti@2.6.1))(svelte@5.39.11)
+      globals:
+        specifier: ^17.0.0
+        version: 17.0.0
       jsdom:
         specifier: ^27.0.0
         version: 27.0.0(postcss@8.5.6)
@@ -117,12 +129,18 @@ importers:
       tailwindcss:
         specifier: ^4.1.14
         version: 4.1.14
+      ts-proto-descriptors:
+        specifier: ^2.1.0
+        version: 2.1.0
       tslib:
         specifier: ^2.8.1
         version: 2.8.1
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
+      typescript-eslint:
+        specifier: ^8.51.0
+        version: 8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
       unplugin-icons:
         specifier: ^22.4.2
         version: 22.4.2(svelte@5.39.11)
@@ -132,6 +150,9 @@ importers:
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/node@24.7.1)(jiti@2.6.1)(jsdom@27.0.0(postcss@8.5.6))(lightningcss@1.30.2)(yaml@2.8.1)
+      ws:
+        specifier: ^8.18.3
+        version: 8.18.3
 
 packages:
 
@@ -150,6 +171,9 @@ packages:
   '@asamuzakjp/nwsapi@2.3.9':
     resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
 
+  '@bufbuild/protobuf@2.10.2':
+    resolution: {integrity: sha512-uFsRXwIGyu+r6AMdz+XijIIZJYpoWeYzILt5yZ2d3mCjQrWUTVpVD9WL/jZAbvp+Ed04rOhrsk7FiTcEDseB5A==}
+
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
     engines: {node: '>=18'}
@@ -376,6 +400,10 @@ packages:
     resolution: {integrity: sha512-jaS+NJ+hximswBG6pjNX0uEJZkrT0zwpVi3BA3vX22aFGjJjmgSTSmPpZCRKmoBL5VY/M6p0xsSJx7rk7sy5gg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/js@9.39.2':
+    resolution: {integrity: sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/object-schema@2.1.6':
     resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -435,10 +463,6 @@ packages:
   '@kurkle/color@0.3.4':
     resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
 
-  '@msgpack/msgpack@3.1.2':
-    resolution: {integrity: sha512-JEW4DEtBzfe8HvUYecLU9e6+XJnKDlUAIve8FvPzF3Kzs6Xo/KuZkZJsDH0wJXl/qEZbeeE7edxDNY3kMs39hQ==}
-    engines: {node: '>= 18'}
-
   '@niku/vite-env-caster@1.1.2':
     resolution: {integrity: sha512-6I/8REFdmfeGnK92H3nYHGc6lExwjm72jLxAsDPlfji97Eej4rOMl6WuYGLgsQI0pl5RrMRMveeRdijdL6hW+Q==}
 
@@ -741,6 +765,9 @@ packages:
   '@types/webxr@0.5.24':
     resolution: {integrity: sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==}
 
+  '@types/ws@8.18.1':
+    resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
+
   '@typescript-eslint/eslint-plugin@8.46.0':
     resolution: {integrity: sha512-hA8gxBq4ukonVXPy0OKhiaUh/68D0E88GSmtC1iAEnGaieuDi38LhS7jdCHRLi6ErJBNDGCzvh5EnzdPwUc0DA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -749,6 +776,14 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/eslint-plugin@8.51.0':
+    resolution: {integrity: sha512-XtssGWJvypyM2ytBnSnKtHYOGT+4ZwTnBVl36TA4nRO2f4PRNGz5/1OszHzcZCvcBMh+qb7I06uoCmLTRdR9og==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.51.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/parser@8.46.0':
     resolution: {integrity: sha512-n1H6IcDhmmUEG7TNVSspGmiHHutt7iVKtZwRppD7e04wha5MrkV1h3pti9xQLcCMt6YWsncpoT0HMjkH1FNwWQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -756,22 +791,45 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/parser@8.51.0':
+    resolution: {integrity: sha512-3xP4XzzDNQOIqBMWogftkwxhg5oMKApqY0BAflmLZiFYHqyhSOxv/cd/zPQLTcCXr4AkaKb25joocY0BD1WC6A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/project-service@8.46.0':
     resolution: {integrity: sha512-OEhec0mH+U5Je2NZOeK1AbVCdm0ChyapAyTeXVIYTPXDJ3F07+cu87PPXcGoYqZ7M9YJVvFnfpGg1UmCIqM+QQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/project-service@8.51.0':
+    resolution: {integrity: sha512-Luv/GafO07Z7HpiI7qeEW5NW8HUtZI/fo/kE0YbtQEFpJRUuR0ajcWfCE5bnMvL7QQFrmT/odMe8QZww8X2nfQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/scope-manager@8.46.0':
     resolution: {integrity: sha512-lWETPa9XGcBes4jqAMYD9fW0j4n6hrPtTJwWDmtqgFO/4HF4jmdH/Q6wggTw5qIT5TXjKzbt7GsZUBnWoO3dqw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/scope-manager@8.51.0':
+    resolution: {integrity: sha512-JhhJDVwsSx4hiOEQPeajGhCWgBMBwVkxC/Pet53EpBVs7zHHtayKefw1jtPaNRXpI9RA2uocdmpdfE7T+NrizA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/tsconfig-utils@8.46.0':
     resolution: {integrity: sha512-WrYXKGAHY836/N7zoK/kzi6p8tXFhasHh8ocFL9VZSAkvH956gfeRfcnhs3xzRy8qQ/dq3q44v1jvQieMFg2cw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/tsconfig-utils@8.51.0':
+    resolution: {integrity: sha512-Qi5bSy/vuHeWyir2C8u/uqGMIlIDu8fuiYWv48ZGlZ/k+PRPHtaAu7erpc7p5bzw2WNNSniuxoMSO4Ar6V9OXw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/type-utils@8.46.0':
     resolution: {integrity: sha512-hy+lvYV1lZpVs2jRaEYvgCblZxUoJiPyCemwbQZ+NGulWkQRy0HRPYAoef/CNSzaLt+MLvMptZsHXHlkEilaeg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -779,16 +837,33 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/type-utils@8.51.0':
+    resolution: {integrity: sha512-0XVtYzxnobc9K0VU7wRWg1yiUrw4oQzexCG2V2IDxxCxhqBMSMbjB+6o91A+Uc0GWtgjCa3Y8bi7hwI0Tu4n5Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/types@8.46.0':
     resolution: {integrity: sha512-bHGGJyVjSE4dJJIO5yyEWt/cHyNwga/zXGJbJJ8TiO01aVREK6gCTu3L+5wrkb1FbDkQ+TKjMNe9R/QQQP9+rA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/types@8.51.0':
+    resolution: {integrity: sha512-TizAvWYFM6sSscmEakjY3sPqGwxZRSywSsPEiuZF6d5GmGD9Gvlsv0f6N8FvAAA0CD06l3rIcWNbsN1e5F/9Ag==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/typescript-estree@8.46.0':
     resolution: {integrity: sha512-ekDCUfVpAKWJbRfm8T1YRrCot1KFxZn21oV76v5Fj4tr7ELyk84OS+ouvYdcDAwZL89WpEkEj2DKQ+qg//+ucg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/typescript-estree@8.51.0':
+    resolution: {integrity: sha512-1qNjGqFRmlq0VW5iVlcyHBbCjPB7y6SxpBkrbhNWMy/65ZoncXCEPJxkRZL8McrseNH6lFhaxCIaX+vBuFnRng==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/utils@8.46.0':
     resolution: {integrity: sha512-nD6yGWPj1xiOm4Gk0k6hLSZz2XkNXhuYmyIrOWcHoPuAhjT9i5bAG+xbWPgFeNR8HPHHtpNKdYUXJl/D3x7f5g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -796,10 +871,21 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/utils@8.51.0':
+    resolution: {integrity: sha512-11rZYxSe0zabiKaCP2QAwRf/dnmgFgvTmeDTtZvUvXG3UuAdg/GU02NExmmIXzz3vLGgMdtrIosI84jITQOxUA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/visitor-keys@8.46.0':
     resolution: {integrity: sha512-FrvMpAK+hTbFy7vH5j1+tMYHMSKLE6RzluFJlkFNKD0p9YsUT75JlBSmr5so3QRzvMwU5/bIEdeNrxm8du8l3Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/visitor-keys@8.51.0':
+    resolution: {integrity: sha512-mM/JRQOzhVN1ykejrvwnBRV3+7yTKK8tVANVN3o1O0t0v7o+jqdVu9crPy5Y9dov15TJk/FTIgoUGHrTOVL3Zg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@vitest/expect@3.2.4':
     resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
@@ -915,6 +1001,10 @@ packages:
   caniuse-lite@1.0.30001749:
     resolution: {integrity: sha512-0rw2fJOmLfnzCRbkm8EyHL8SvI2Apu5UbnQuTsJ0ClgrH8hcwFooJ1s5R0EP8o8aVrFu8++ae29Kt9/gZAZp/Q==}
 
+  case-anything@2.1.13:
+    resolution: {integrity: sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==}
+    engines: {node: '>=12.13'}
+
   chai@5.3.3:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
@@ -1022,6 +1112,11 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
@@ -1029,6 +1124,9 @@ packages:
   devalue@5.3.2:
     resolution: {integrity: sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw==}
 
+  dprint-node@1.0.8:
+    resolution: {integrity: sha512-iVKnUtYfGrYcW1ZAlfR/F59cUVL8QIhWoBJoSjkkdua/dkWIgjZfiLMeTjiB06X0ZLkQ0M2C1VbUj/CxkIf1zg==}
+
   electron-to-chromium@1.5.234:
     resolution: {integrity: sha512-RXfEp2x+VRYn8jbKfQlRImzoJU01kyDvVPBmG39eU2iuRVhuS6vQNocB8J0/8GrIMLnPzgz4eW6WiRnJkTuNWg==}
 
@@ -1220,6 +1318,10 @@ packages:
     resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
     engines: {node: '>=18'}
 
+  globals@17.0.0:
+    resolution: {integrity: sha512-gv5BeD2EssA793rlFWVPMMCqefTlpusw6/2TbAVMy0FzcG8wKJn4O+NqJ4+XWmmwrayJgw5TzrmWjFgmz1XPqw==}
+    engines: {node: '>=18'}
+
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
@@ -1880,6 +1982,22 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-api-utils@2.4.0:
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-poet@6.12.0:
+    resolution: {integrity: sha512-xo+iRNMWqyvXpFTaOAvLPA5QAWO6TZrSUs5s4Odaya3epqofBu/fMLHEWl8jPmjhA0s9sgj9sNvF1BmaQlmQkA==}
+
+  ts-proto-descriptors@2.1.0:
+    resolution: {integrity: sha512-S5EZYEQ6L9KLFfjSRpZWDIXDV/W7tAj8uW7pLsihIxyr62EAVSiKuVPwE8iWnr849Bqa53enex1jhDUcpgquzA==}
+
+  ts-proto@2.10.1:
+    resolution: {integrity: sha512-4sOE1hCs0uobJgdRCtcEwdbc8MAyKP+LJqUIKxZIiKac0rPBlVKsRGEGo2oQ1MnKA2Wwk0KuGP2POkiCwPtebw==}
+    hasBin: true
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -1887,6 +2005,13 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
+  typescript-eslint@8.51.0:
+    resolution: {integrity: sha512-jh8ZuM5oEh2PSdyQG9YAEM1TCGuWenLSuSUhf/irbVUNW9O5FhbFVONviN2TgMTBnUmyHv7E56rYnfLZK6TkiA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
@@ -2148,6 +2273,8 @@ snapshots:
 
   '@asamuzakjp/nwsapi@2.3.9': {}
 
+  '@bufbuild/protobuf@2.10.2': {}
+
   '@csstools/color-helpers@5.1.0': {}
 
   '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
@@ -2293,6 +2420,8 @@ snapshots:
 
   '@eslint/js@9.37.0': {}
 
+  '@eslint/js@9.39.2': {}
+
   '@eslint/object-schema@2.1.6': {}
 
   '@eslint/plugin-kit@0.4.0':
@@ -2359,8 +2488,6 @@ snapshots:
 
   '@kurkle/color@0.3.4': {}
 
-  '@msgpack/msgpack@3.1.2': {}
-
   '@niku/vite-env-caster@1.1.2':
     dependencies:
       chalk: 4.1.2
@@ -2596,7 +2723,6 @@ snapshots:
   '@types/node@24.7.1':
     dependencies:
       undici-types: 7.14.0
-    optional: true
 
   '@types/stats.js@0.17.4': {}
 
@@ -2612,6 +2738,10 @@ snapshots:
 
   '@types/webxr@0.5.24': {}
 
+  '@types/ws@8.18.1':
+    dependencies:
+      '@types/node': 24.7.1
+
   '@typescript-eslint/eslint-plugin@8.46.0(@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -2629,6 +2759,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/eslint-plugin@8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/type-utils': 8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.51.0
+      eslint: 9.37.0(jiti@2.6.1)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/parser@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.46.0
@@ -2641,6 +2787,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/parser@8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.51.0
+      debug: 4.4.3
+      eslint: 9.37.0(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/project-service@8.46.0(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.46.0(typescript@5.9.3)
@@ -2650,15 +2808,33 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/project-service@8.51.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.51.0
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/scope-manager@8.46.0':
     dependencies:
       '@typescript-eslint/types': 8.46.0
       '@typescript-eslint/visitor-keys': 8.46.0
 
+  '@typescript-eslint/scope-manager@8.51.0':
+    dependencies:
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/visitor-keys': 8.51.0
+
   '@typescript-eslint/tsconfig-utils@8.46.0(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
+  '@typescript-eslint/tsconfig-utils@8.51.0(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
   '@typescript-eslint/type-utils@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.46.0
@@ -2671,8 +2847,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/type-utils@8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.37.0(jiti@2.6.1)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/types@8.46.0': {}
 
+  '@typescript-eslint/types@8.51.0': {}
+
   '@typescript-eslint/typescript-estree@8.46.0(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.46.0(typescript@5.9.3)
@@ -2689,6 +2879,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/typescript-estree@8.51.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/visitor-keys': 8.51.0
+      debug: 4.4.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/utils@8.46.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
@@ -2700,11 +2905,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/utils@8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.37.0(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.51.0
+      '@typescript-eslint/types': 8.51.0
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      eslint: 9.37.0(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/visitor-keys@8.46.0':
     dependencies:
       '@typescript-eslint/types': 8.46.0
       eslint-visitor-keys: 4.2.1
 
+  '@typescript-eslint/visitor-keys@8.51.0':
+    dependencies:
+      '@typescript-eslint/types': 8.51.0
+      eslint-visitor-keys: 4.2.1
+
   '@vitest/expect@3.2.4':
     dependencies:
       '@types/chai': 5.2.2
@@ -2823,6 +3044,8 @@ snapshots:
 
   caniuse-lite@1.0.30001749: {}
 
+  case-anything@2.1.13: {}
+
   chai@5.3.3:
     dependencies:
       assertion-error: 2.0.1
@@ -2917,10 +3140,16 @@ snapshots:
 
   deepmerge@4.3.1: {}
 
+  detect-libc@1.0.3: {}
+
   detect-libc@2.1.2: {}
 
   devalue@5.3.2: {}
 
+  dprint-node@1.0.8:
+    dependencies:
+      detect-libc: 1.0.3
+
   electron-to-chromium@1.5.234: {}
 
   emoji-regex@8.0.0: {}
@@ -3142,6 +3371,8 @@ snapshots:
 
   globals@16.4.0: {}
 
+  globals@17.0.0: {}
+
   graceful-fs@4.2.11: {}
 
   graphemer@1.4.0: {}
@@ -3734,18 +3965,47 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  ts-api-utils@2.4.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  ts-poet@6.12.0:
+    dependencies:
+      dprint-node: 1.0.8
+
+  ts-proto-descriptors@2.1.0:
+    dependencies:
+      '@bufbuild/protobuf': 2.10.2
+
+  ts-proto@2.10.1:
+    dependencies:
+      '@bufbuild/protobuf': 2.10.2
+      case-anything: 2.1.13
+      ts-poet: 6.12.0
+      ts-proto-descriptors: 2.1.0
+
   tslib@2.8.1: {}
 
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
 
+  typescript-eslint@8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.37.0(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   typescript@5.9.3: {}
 
   ufo@1.6.1: {}
 
-  undici-types@7.14.0:
-    optional: true
+  undici-types@7.14.0: {}
 
   unplugin-icons@22.4.2(svelte@5.39.11):
     dependencies:

app/scripts/compile_protos.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process'
+import path from 'path'
+import os from 'os'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const isWindows = os.platform() === 'win32'
+const projectRoot = path.resolve(__dirname, '..')
+const platformSharedDir = path.resolve(projectRoot, '..', 'platform_shared')
+const outputDir = path.resolve(projectRoot, 'src', 'lib', 'platform_shared')
+
+const pluginPath =
+    isWindows ?
+        path.join(projectRoot, 'node_modules', '.bin', 'protoc-gen-ts_proto.cmd')
+    :   path.join(projectRoot, 'node_modules', '.bin', 'protoc-gen-ts_proto')
+
+const protoFiles = ['filesystem.proto', 'message.proto', "api.proto"]
+
+const tsProtoOpts = ['useExactTypes=false', 'outputExtensions=true', 'outputSchema=true'].join(',')
+
+const cmd = [
+    'protoc',
+    `--plugin=protoc-gen-ts_proto=${pluginPath}`,
+    `--ts_proto_out=${outputDir}`,
+    `--ts_proto_opt=${tsProtoOpts}`,
+    `-I${platformSharedDir}`,
+    ...protoFiles.map(f => path.join(platformSharedDir, f))
+].join(' ')
+
+console.log('Compiling protos...')
+console.log(`  Platform: ${os.platform()}`)
+console.log(`  Output: ${outputDir}`)
+
+try {
+    execSync(cmd, { stdio: 'inherit', cwd: projectRoot })
+    console.log('Proto compilation complete!')
+} catch (error) {
+    console.error('Proto compilation failed!', error)
+    process.exit(1)
+}

app/src/lib/api.ts

@@ -1,6 +1,9 @@
 import { get } from 'svelte/store'
 import { Err, Ok, type Result } from './utilities'
-import { apiLocation } from './stores'
+import { apiLocation } from './stores/location-store'
+import type { MessageFns } from './platform_shared/filesystem'
+import { Request, Response as ProtoResponse } from './platform_shared/api'
+import { BinaryWriter } from '@bufbuild/protobuf/wire'
 
 export const api = {
     get<TResponse>(endpoint: string, params?: RequestInit) {
@@ -11,6 +14,10 @@ export const api = {
         return sendRequest<TResponse>(endpoint, 'POST', data)
     },
 
+    post_proto<TResponse>(endpoint: string, data: Request) {
+        return sendRequest<TResponse>(endpoint, 'POST', Request.encode(data))
+    },
+
     put<TResponse>(endpoint: string, data?: unknown) {
         return sendRequest<TResponse>(endpoint, 'PUT', data)
     },
@@ -27,7 +34,11 @@ async function sendRequest<TResponse>(
     params?: RequestInit
 ): Promise<Result<TResponse, Error>> {
     endpoint = resolveUrl(endpoint)
-    const body = data !== null && typeof data !== 'undefined' ? JSON.stringify(data) : undefined
+
+    const isProtobuf = data instanceof BinaryWriter
+    const body = data !== null && typeof data !== 'undefined'
+        ? (isProtobuf ? data.finish() : JSON.stringify(data))
+        : undefined
 
     const request = {
         ...params,
@@ -36,7 +47,7 @@ async function sendRequest<TResponse>(
         headers: {
             ...params?.headers,
             Authorization: 'Basic',
-            'Content-Type': 'application/json'
+            'Content-Type': isProtobuf ? 'application/x-protobuf' : 'application/json'
         }
     }
 
@@ -60,6 +71,9 @@ async function sendRequest<TResponse>(
     if (contentType && contentType.includes('application/json')) {
         const data = await response.json()
         return Ok.new(data as TResponse)
+    } else if (contentType && contentType.includes('application/x-protobuf')) {
+        let data: ProtoResponse = ProtoResponse.decode(await response.bytes());
+        return Ok.new(data as TResponse)
     } else {
         // Handle empty object as response
         return Ok.new(null as TResponse)

app/src/lib/components/Compass.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    interface Props {
+        heading?: number
+        size?: string
+    }
+
+    let { heading = 0, size = 'w-48 h-48' }: Props = $props()
+
+    const getCardinalDirection = (h: number) => {
+        if (h >= 337.5 || h < 22.5) return 'N'
+        if (h >= 22.5 && h < 67.5) return 'NE'
+        if (h >= 67.5 && h < 112.5) return 'E'
+        if (h >= 112.5 && h < 157.5) return 'SE'
+        if (h >= 157.5 && h < 202.5) return 'S'
+        if (h >= 202.5 && h < 247.5) return 'SW'
+        if (h >= 247.5 && h < 292.5) return 'W'
+        return 'NW'
+    }
+
+    const ticks = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]
+</script>
+
+<div class="flex flex-col items-center">
+    <div class="relative {size}">
+        <svg viewBox="0 0 200 200" class="w-full h-full">
+            <circle
+                cx="100"
+                cy="100"
+                r="90"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                class="opacity-30"
+            />
+            <circle
+                cx="100"
+                cy="100"
+                r="70"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1"
+                class="opacity-20"
+            />
+            <circle
+                cx="100"
+                cy="100"
+                r="50"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1"
+                class="opacity-20"
+            />
+
+            <text x="100" y="20" text-anchor="middle" class="fill-current text-sm font-bold">N</text>
+            <text x="180" y="105" text-anchor="middle" class="fill-current text-sm font-bold">E</text>
+            <text x="100" y="190" text-anchor="middle" class="fill-current text-sm font-bold">S</text>
+            <text x="20" y="105" text-anchor="middle" class="fill-current text-sm font-bold">W</text>
+
+            {#each ticks as tick}
+                <line
+                    x1={100 + 85 * Math.sin((tick * Math.PI) / 180)}
+                    y1={100 - 85 * Math.cos((tick * Math.PI) / 180)}
+                    x2={100 + 78 * Math.sin((tick * Math.PI) / 180)}
+                    y2={100 - 78 * Math.cos((tick * Math.PI) / 180)}
+                    stroke="currentColor"
+                    stroke-width={tick % 90 === 0 ? 2 : 1}
+                    class="opacity-50"
+                />
+            {/each}
+
+            <g transform="rotate({heading}, 100, 100)">
+                <polygon points="100,25 93,100 100,90 107,100" class="fill-error" />
+                <polygon points="100,175 93,100 100,110 107,100" class="fill-base-300" />
+            </g>
+
+            <circle cx="100" cy="100" r="8" class="fill-base-content" />
+        </svg>
+    </div>
+    <div class="text-2xl font-mono font-bold mt-2">{heading.toFixed(1)}°</div>
+    <div class="text-sm opacity-70">{getCardinalDirection(heading)}</div>
+</div>

app/src/lib/components/StatusItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { ComponentType } from 'svelte'
+    import type { Component } from 'svelte'
 
     type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
 
@@ -11,12 +11,12 @@
         class: klass = '',
         children = null
     } = $props<{
-        icon?: ComponentType
+        icon?: Component
         title: string
         description?: string | number
         variant?: Variant
         class?: string
-        children?: () => ComponentType
+        children?: () => Component
     }>()
 
     const Icon = $derived(icon)

app/src/lib/components/Visualization.svelte

@@ -10,28 +10,34 @@
         Color
     } from 'three'
     import {
-        ModesEnum,
-        kinematicData,
         mode,
         model,
-        outControllerData,
+        input,
         servoAnglesOut,
         servoAngles,
         mpu,
         jointNames,
         currentKinematic,
         walkGait,
-        walkGaitToMode
+        kinematicData
     } from '$lib/stores'
-    import { populateModelCache, throttler, getToeWorldPositions } from '$lib/utilities'
+    import { populateModelCache, getToeWorldPositions } from '$lib/utilities'
     import SceneBuilder from '$lib/sceneBuilder'
     import { lerp, degToRad } from 'three/src/math/MathUtils'
     import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
     import { type body_state_t } from '$lib/kinematic'
-    import { BezierState, CalibrationState, IdleState, RestState, StandState } from '$lib/gait'
+    import {
+        BezierState,
+        CalibrationState,
+        GaitState,
+        IdleState,
+        RestState,
+        StandState
+    } from '$lib/gait'
     import { radToDeg } from 'three/src/math/MathUtils.js'
     import type { URDFRobot } from 'urdf-loader'
     import { get } from 'svelte/store'
+    import { AnglesData, KinematicData, ModesEnum } from '$lib/platform_shared/message'
 
     interface Props {
         defaultColor?: string | null
@@ -51,11 +57,14 @@
 
     let sceneManager = $state(new SceneBuilder())
     let canvas: HTMLCanvasElement
+    const NUM_ANGLES = 12 // TODO: This number should come from the robot
 
-    let currentModelAngles: number[] = new Array(12).fill(0)
-    let modelTargetAngles: number[] = new Array(12).fill(0)
+    let currentModelAngles: AnglesData = AnglesData.create({
+        angles: new Array(NUM_ANGLES).fill(0)
+    })
+    let modelTargetAngles: AnglesData = AnglesData.create({ angles: new Array(NUM_ANGLES).fill(0) })
     let gui_panel: GUI
-    let Throttler = new throttler()
+    const SMOOTH_AMOUNT = 0.2
 
     let target: Object3D<Object3DEventMap>
 
@@ -63,24 +72,27 @@
 
     let kinematic = get(currentKinematic)
 
-    let planners = {
-        [ModesEnum.Deactivated]: new IdleState(),
-        [ModesEnum.Idle]: new IdleState(),
-        [ModesEnum.Calibration]: new CalibrationState(),
-        [ModesEnum.Rest]: new RestState(),
-        [ModesEnum.Stand]: new StandState(),
-        [ModesEnum.Walk]: new BezierState()
+    const planners: Record<ModesEnum, GaitState> = {
+        [ModesEnum.DEACTIVATED]: new IdleState(),
+        [ModesEnum.IDLE]: new IdleState(),
+        [ModesEnum.CALIBRATION]: new CalibrationState(),
+        [ModesEnum.REST]: new RestState(),
+        [ModesEnum.STAND]: new StandState(),
+        [ModesEnum.WALK]: new BezierState(),
+        [ModesEnum.UNRECOGNIZED]: new IdleState()
     }
     let lastTick = performance.now()
+    let lastRobotPosition = new Vector3()
 
     const dir = [1, -1, -1, -1, -1, -1, 1, -1, -1, -1, -1, -1]
+    const THREEJS_SCALE = 10
 
     let body_state = {
         omega: 0,
         phi: 0,
         psi: 0,
         xm: 0,
-        ym: 0.5,
+        ym: 0.15,
         zm: 0,
         feet: kinematic.getDefaultFeetPos(),
         cumulative_x: 0,
@@ -98,13 +110,12 @@
         'Trace feet': debug,
         'Target position': false,
         'Trace points': 30,
-        'Fix camera on robot': true,
         'Smooth motion': true,
         omega: 0,
         phi: 0,
         psi: 0,
         xm: 0,
-        ym: 0.7,
+        ym: 0.15,
         zm: 0,
         Background: defaultColor
     }
@@ -113,16 +124,23 @@
         await populateModelCache()
         await createScene()
         servoAngles.subscribe(updateAnglesFromStore)
-        walkGait.subscribe(gait => planners[ModesEnum.Walk].set_mode(walkGaitToMode(gait)))
+        walkGait.subscribe(gait => {
+            const walkPlanner = planners[ModesEnum.WALK]
+            if (!(walkPlanner instanceof BezierState)) {
+                throw new Error(
+                    `Expected BezierState for WALK mode, got ${walkPlanner.constructor.name}`
+                )
+            }
+            walkPlanner.set_mode(gait.gait)
+        })
         if (panel) createPanel()
     })
 
     onDestroy(() => {
-        canvas.remove()
         gui_panel?.destroy()
     })
 
-    const updateAnglesFromStore = (angles: number[]) => {
+    const updateAnglesFromStore = (angles: AnglesData) => {
         if (sceneManager.isDragging) return
         if (settings['Internal kinematic']) return
         modelTargetAngles = angles
@@ -155,23 +173,26 @@
     }
 
     const updateKinematicPosition = () => {
-        kinematicData.set([
-            settings.omega,
-            settings.phi,
-            settings.psi,
-            settings.xm,
-            settings.ym,
-            settings.zm
-        ])
+        kinematicData.set(
+            KinematicData.create({
+                omega: settings.omega,
+                phi: settings.phi,
+                psi: settings.psi,
+                xm: settings.xm,
+                ym: settings.ym,
+                zm: settings.zm
+            })
+        )
     }
 
     const setSceneBackground = (c: string | null) => (sceneManager.scene.background = new Color(c!))
 
     const updateAngles = (name: string, angle: number) => {
-        modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI)
-        Throttler.throttle(
-            () => servoAnglesOut.set(modelTargetAngles.map(num => Math.round(num))),
-            100
+        modelTargetAngles.angles[$jointNames.indexOf(name)] = angle * (180 / Math.PI)
+        servoAnglesOut.set(
+            AnglesData.create({
+                angles: modelTargetAngles.angles.map(num => Math.round(num))
+            })
         )
     }
 
@@ -225,7 +246,7 @@
         }
 
         let new_angles = kinematic.calcIK(position).map((x, i) => radToDeg(x * dir[i]))
-        modelTargetAngles = new_angles
+        modelTargetAngles.angles = new_angles
     }
 
     const orient_robot = (robot: URDFRobot, toes: Vector3[]) => {
@@ -233,30 +254,53 @@
         robot.position.y = robot.position.y - Math.min(...toes.map(toe => toe.y))
 
         const cumulativeYaw = body_state.cumulative_yaw
+        const headingYaw = degToRad(-settings.phi + $mpu.heading)
+        const totalYaw = headingYaw + cumulativeYaw
 
-        const cosYaw = Math.cos(cumulativeYaw)
-        const sinYaw = Math.sin(cumulativeYaw)
-        const rotatedXm = settings.xm * cosYaw - settings.zm * sinYaw
-        const rotatedZm = settings.xm * sinYaw + settings.zm * cosYaw
+        const cosTotal = Math.cos(totalYaw)
+        const sinTotal = Math.sin(totalYaw)
+        const rotatedXm = settings.xm * cosTotal - settings.zm * sinTotal
+        const rotatedZm = settings.xm * sinTotal + settings.zm * cosTotal
 
-        robot.position.x = smooth(robot.position.x, -rotatedZm - body_state.cumulative_z * 1.2, 0.1)
-        robot.position.z = smooth(robot.position.z, -rotatedXm - body_state.cumulative_x * 1.2, 0.1)
+        const mpuHeadingRad = degToRad($mpu.heading)
+        const cosHead = Math.cos(mpuHeadingRad)
+        const sinHead = Math.sin(mpuHeadingRad)
+        const rotatedCumX = body_state.cumulative_x * cosHead - body_state.cumulative_z * sinHead
+        const rotatedCumZ = body_state.cumulative_x * sinHead + body_state.cumulative_z * cosHead
 
-        const pitch = degToRad(settings.psi - 90) + body_state.cumulative_pitch
-        const roll = degToRad(settings.omega) + body_state.cumulative_roll
+        robot.position.x = smooth(
+            robot.position.x,
+            (-rotatedZm - rotatedCumZ) * THREEJS_SCALE,
+            SMOOTH_AMOUNT
+        )
+        robot.position.z = smooth(
+            robot.position.z,
+            (-rotatedXm - rotatedCumX) * THREEJS_SCALE,
+            SMOOTH_AMOUNT
+        )
+
+        const cosYaw = Math.cos(totalYaw)
+        const sinYaw = Math.sin(totalYaw)
+        const cmdPitch = degToRad(settings.psi)
+        const cmdRoll = degToRad(settings.omega)
+        const pitch =
+            degToRad(-90) + cmdPitch * cosYaw - cmdRoll * sinYaw + body_state.cumulative_pitch
+        const roll = cmdPitch * sinYaw + cmdRoll * cosYaw + body_state.cumulative_roll
 
         robot.rotation.z = smooth(
             robot.rotation.z,
             degToRad(-settings.phi + $mpu.heading + 90) + cumulativeYaw,
-            0.1
+            SMOOTH_AMOUNT
         )
-        robot.rotation.y = smooth(robot.rotation.y, roll, 0.1)
-        robot.rotation.x = smooth(robot.rotation.x, pitch, 0.1)
+        robot.rotation.y = smooth(robot.rotation.y, roll, SMOOTH_AMOUNT)
+        robot.rotation.x = smooth(robot.rotation.x, pitch, SMOOTH_AMOUNT)
     }
 
     const update_camera = (robot: URDFRobot) => {
-        if (!settings['Fix camera on robot']) return
-        sceneManager.orbit.target = robot.position.clone()
+        const delta = robot.position.clone().sub(lastRobotPosition)
+        sceneManager.orbit.target.add(delta)
+        sceneManager.camera.position.add(delta)
+        lastRobotPosition.copy(robot.position)
     }
 
     const smooth = (start: number, end: number, amount: number) => {
@@ -265,23 +309,13 @@
 
     const update_gait = () => {
         if (sceneManager.isDragging || !settings['Internal kinematic']) return
-        const controlData = get(outControllerData)
-        const data = {
-            lx: controlData[0],
-            ly: controlData[1],
-            rx: controlData[2],
-            ry: controlData[3],
-            h: controlData[4],
-            s: controlData[5],
-            s1: controlData[6]
-        }
-        body_state.ym = data.h
+        const controlData = get(input)
 
-        let planner = planners[get(mode)]
+        let planner = planners[get(mode).mode]
         const delta = performance.now() - lastTick
         lastTick = performance.now()
 
-        body_state = planner.step(body_state, data, delta)
+        body_state = planner.step(body_state, controlData, delta)
 
         settings.omega = body_state.omega
         settings.phi = body_state.phi
@@ -296,14 +330,14 @@
         settings.omega = radToDeg(robot.rotation.y)
         settings.phi = radToDeg(robot.rotation.z) + $mpu.heading - 90
         settings.psi = radToDeg(robot.rotation.x) + 90
-        settings.xm = robot.position.z * 100
-        settings.zm = -robot.position.x * 100
+        settings.xm = robot.position.z / THREEJS_SCALE
+        settings.zm = -robot.position.x / THREEJS_SCALE
     }
 
     const updateTargetPosition = () => {
         target.visible = settings['Target position']
-        target.position.x = smooth(target.position.x, target_position.x, 0.5)
-        target.position.z = smooth(target.position.z, target_position.z, 0.5)
+        target.position.x = smooth(target.position.x, target_position.x, SMOOTH_AMOUNT)
+        target.position.z = smooth(target.position.z, target_position.z, SMOOTH_AMOUNT)
     }
 
     const render = () => {
@@ -322,12 +356,12 @@
         sceneManager.transformControl.showZ = settings['Robot transform controls']
 
         for (let i = 0; i < $jointNames.length; i++) {
-            currentModelAngles[i] = smooth(
+            currentModelAngles.angles[i] = smooth(
                 (robot.joints[$jointNames[i]].angle as number) * (180 / Math.PI),
-                modelTargetAngles[i],
-                0.1
+                modelTargetAngles.angles[i],
+                SMOOTH_AMOUNT
             )
-            robot.joints[$jointNames[i]].setJointValue(degToRad(currentModelAngles[i]))
+            robot.joints[$jointNames[i]].setJointValue(degToRad(currentModelAngles.angles[i]))
         }
 
         orient_robot(robot, toes)

app/src/lib/components/filesystem/FileManager.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+    import { fileSystemClient } from '$lib/filesystem/chunkedTransfer'
+    import type { TransferProgress } from '$lib/types/models'
+    import { onMount } from 'svelte'
+
+    let currentPath = '/'
+    let files: Array<{ name: string; size: number }> = []
+    let directories: Array<{ name: string }> = []
+    let loading = false
+    let error = ''
+    let uploadProgress: TransferProgress | null = null
+    let downloadProgress: TransferProgress | null = null
+
+    const joinPath = (name: string) => (currentPath === '/' ? '/' + name : currentPath + '/' + name)
+    const getError = (e: unknown, fallback: string) =>
+        e instanceof Error ? e.message : (e as { error?: string })?.error || fallback
+
+    async function loadDirectory() {
+        loading = true
+        error = ''
+        try {
+            const result = await fileSystemClient.listDirectory(currentPath)
+            if (result.success) {
+                files = result.files
+                directories = result.directories
+            } else {
+                error = result.error || 'Failed to load directory'
+            }
+        } catch (e) {
+            error = getError(e, 'Unknown error')
+        } finally {
+            loading = false
+        }
+    }
+
+    async function navigateTo(path: string) {
+        currentPath = path
+        await loadDirectory()
+    }
+
+    async function handleFileUpload(event: Event) {
+        const input = event.target as HTMLInputElement
+        const file = input.files?.[0]
+        if (!file) return
+
+        uploadProgress = null
+        error = ''
+
+        try {
+            const result = await fileSystemClient.uploadFileFromBrowser(
+                joinPath(file.name),
+                file,
+                p => (uploadProgress = p)
+            )
+            if (result.success) await loadDirectory()
+            else error = result.error || 'Upload failed'
+        } catch (e) {
+            error = getError(e, 'Upload error')
+        } finally {
+            uploadProgress = null
+            input.value = ''
+        }
+    }
+
+    async function handleDownload(filename: string) {
+        downloadProgress = null
+        error = ''
+
+        try {
+            const result = await fileSystemClient.downloadFileAndSave(
+                joinPath(filename),
+                filename,
+                p => (downloadProgress = p)
+            )
+            if (!result.success) error = result.error || 'Download failed'
+        } catch (e) {
+            error = getError(e, 'Download error')
+        } finally {
+            downloadProgress = null
+        }
+    }
+
+    async function handleDelete(name: string, isDirectory: boolean) {
+        if (!confirm(`Delete ${isDirectory ? 'directory' : 'file'} "${name}"?`)) return
+        error = ''
+
+        try {
+            const result = await fileSystemClient.deleteFile(joinPath(name))
+            if (result.success) await loadDirectory()
+            else error = result.error || 'Delete failed'
+        } catch (e) {
+            error = getError(e, 'Delete error')
+        }
+    }
+
+    async function handleCreateDirectory() {
+        const name = prompt('Enter directory name:')
+        if (!name) return
+        error = ''
+
+        try {
+            const result = await fileSystemClient.createDirectory(joinPath(name))
+            if (result.success) await loadDirectory()
+            else error = result.error || 'Failed to create directory'
+        } catch (e) {
+            error = getError(e, 'Error creating directory')
+        }
+    }
+
+    function formatBytes(bytes: number): string {
+        if (bytes === 0) return '0 B'
+        const k = 1024
+        const sizes = ['B', 'KB', 'MB', 'GB']
+        const i = Math.floor(Math.log(bytes) / Math.log(k))
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+    }
+
+    onMount(loadDirectory)
+</script>
+
+<div class="max-w-3xl mx-auto my-8 p-4 border border-gray-300 rounded-lg bg-white">
+    <div class="mb-4">
+        <h2 class="m-0 mb-2">File Manager</h2>
+        <div class="font-mono bg-gray-100 p-2 rounded mb-2">Current: {currentPath}</div>
+        <div class="flex gap-2">
+            <button
+                class="px-4 py-2 bg-blue-600 text-white rounded cursor-pointer hover:bg-blue-700"
+                on:click={handleCreateDirectory}>New Folder</button
+            >
+            <label
+                class="px-4 py-2 bg-blue-600 text-white rounded cursor-pointer hover:bg-blue-700"
+            >
+                Upload File
+                <input type="file" on:change={handleFileUpload} class="hidden" />
+            </label>
+            <button
+                class="px-4 py-2 bg-blue-600 text-white rounded cursor-pointer hover:bg-blue-700"
+                on:click={loadDirectory}>Refresh</button
+            >
+        </div>
+    </div>
+
+    {#if error}
+        <div class="bg-red-100 text-red-800 p-3 rounded mb-4">{error}</div>
+    {/if}
+
+    {#if uploadProgress}
+        <div class="mb-4">
+            <div class="mb-2 text-sm">
+                Uploading: {uploadProgress.percentage.toFixed(1)}% ({formatBytes(
+                    uploadProgress.bytesTransferred
+                )} / {formatBytes(uploadProgress.totalBytes)})
+            </div>
+            <div class="h-5 bg-gray-200 rounded overflow-hidden">
+                <div
+                    class="h-full bg-green-600 transition-all duration-300"
+                    style="width: {uploadProgress.percentage}%"
+                ></div>
+            </div>
+        </div>
+    {/if}
+
+    {#if downloadProgress}
+        <div class="mb-4">
+            <div class="mb-2 text-sm">
+                Downloading: {downloadProgress.percentage.toFixed(1)}% ({formatBytes(
+                    downloadProgress.bytesTransferred
+                )} / {formatBytes(downloadProgress.totalBytes)})
+            </div>
+            <div class="h-5 bg-gray-200 rounded overflow-hidden">
+                <div
+                    class="h-full bg-green-600 transition-all duration-300"
+                    style="width: {downloadProgress.percentage}%"
+                ></div>
+            </div>
+        </div>
+    {/if}
+
+    <div class="border border-gray-300 rounded min-h-[200px]">
+        {#if loading}
+            <div class="text-center p-8 text-gray-500">Loading...</div>
+        {:else}
+            {#if currentPath !== '/'}
+                <div
+                    class="flex items-center p-3 border-b border-gray-100 gap-2 bg-gray-50 cursor-pointer"
+                    on:click={() => navigateTo('/')}
+                >
+                    <span class="text-2xl">📁</span>
+                    <span class="flex-1 hover:underline">..</span>
+                </div>
+            {/if}
+
+            {#each directories as dir}
+                <div class="flex items-center p-3 border-b border-gray-100 gap-2 bg-gray-50">
+                    <span class="text-2xl">📁</span>
+                    <span
+                        class="flex-1 cursor-pointer hover:underline"
+                        on:click={() => navigateTo(currentPath + '/' + dir.name)}>{dir.name}</span
+                    >
+                    <button
+                        class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700"
+                        on:click={() => handleDelete(dir.name, true)}>Delete</button
+                    >
+                </div>
+            {/each}
+
+            {#each files as file}
+                <div class="flex items-center p-3 border-b border-gray-100 gap-2 last:border-b-0">
+                    <span class="text-2xl">📄</span>
+                    <span class="flex-1">{file.name}</span>
+                    <span class="text-gray-500 text-sm">{formatBytes(file.size)}</span>
+                    <button
+                        class="px-3 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700"
+                        on:click={() => handleDownload(file.name)}>Download</button
+                    >
+                    <button
+                        class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700"
+                        on:click={() => handleDelete(file.name, false)}>Delete</button
+                    >
+                </div>
+            {/each}
+
+            {#if files.length === 0 && directories.length === 0}
+                <div class="text-center p-8 text-gray-500">Directory is empty</div>
+            {/if}
+        {/if}
+    </div>
+</div>

app/src/lib/components/icons/index.ts

@@ -38,6 +38,8 @@ export { default as FolderOpenOutline } from '~icons/mdi/folder-open-outline'
 export { default as TrashIcon } from '~icons/mdi/trash'
 export { default as RotateCcw } from '~icons/mdi/rotate-left'
 export { default as RotateCw } from '~icons/mdi/rotate-right'
+export { default as UploadIcon } from '~icons/mdi/upload'
+export { default as DownloadIcon } from '~icons/mdi/download'
 
 export { default as Down } from '~icons/tabler/chevron-down'
 export { default as Cancel } from '~icons/tabler/x'

app/src/lib/components/input/VerticalSlider.svelte

@@ -4,7 +4,7 @@
         max?: number
         step?: number
         value?: number
-        oninput?: (value: number) => void
+        oninput?: (value: Event) => void
     }
 
     let {

app/src/lib/components/menu/GithubButton.svelte

@@ -2,13 +2,14 @@
     import { Github } from '../icons'
 
     interface Props {
-        github: { url: string; version: string; active?: boolean; href?: string }
+        github: { href: string; active?: boolean }
     }
 
     let { github }: Props = $props()
 </script>
 
 {#if github.active}
+    <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- external URL -->
     <a href={github.href} class="btn btn-ghost" target="_blank" rel="noopener noreferrer">
         <Github class="h-5 w-5" />
     </a>

app/src/lib/components/menu/Menu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/state'
-    import { base } from '$app/paths'
+    import { resolve } from '$app/paths'
     import { useFeatureFlags } from '$lib/stores/featureFlags'
     import GithubButton from '../menu/GithubButton.svelte'
     import LogoButton from '../menu/LogoButton.svelte'
@@ -33,11 +33,11 @@
 
     const github = { href: 'https://github.com/' + page.data.github, active: true }
 
-    import type { ComponentType } from 'svelte'
+    import type { Component } from 'svelte'
 
     type menuItem = {
         title: string
-        icon: ComponentType
+        icon: Component
         href?: string
         feature: boolean
         active?: boolean
@@ -45,13 +45,15 @@
     }
 
     function withBase(path: string) {
-        return `${base}${path.startsWith('/') ? path : '/' + path}`
+        return `${resolve('/')}${path.startsWith('/') ? path.slice(1) : path}`
     }
 
-    let menuItems = $state<menuItem[]>([])
+    const { menuClicked } = $props()
 
-    $effect(() => {
-        menuItems = [
+    const activeTitle = $derived(page.data.title)
+
+    const menuItems = $derived<menuItem[]>(
+        [
             {
                 title: 'Connection',
                 icon: WiFi,
@@ -79,7 +81,7 @@
                         title: 'Camera',
                         icon: Camera,
                         href: withBase('/peripherals/camera'),
-                        feature: $features.camera
+                        feature: true
                     },
                     {
                         title: 'Servo',
@@ -91,9 +93,9 @@
                         title: 'IMU',
                         icon: Rotate3d,
                         href: withBase('/peripherals/imu'),
-                        feature: $features.imu || $features.mag || $features.bmp
+                        feature: true
                     }
-                ]
+                ].map(sub => ({ ...sub, active: sub.title === activeTitle }))
             },
             {
                 title: 'WiFi',
@@ -118,7 +120,7 @@
                         href: withBase('/wifi/mdns'),
                         feature: true
                     }
-                ]
+                ].map(sub => ({ ...sub, active: sub.title === activeTitle }))
             },
             {
                 title: 'System',
@@ -147,36 +149,20 @@
                         title: 'Firmware Update',
                         icon: Update,
                         href: withBase('/system/update'),
-                        feature:
+                        feature: !!(
                             $features.ota ||
                             $features.upload_firmware ||
                             $features.download_firmware
+                        )
                     }
-                ]
+                ].map(sub => ({ ...sub, active: sub.title === activeTitle }))
             }
-        ] as menuItem[]
-    })
+        ].map(item => ({ ...item, active: item.title === activeTitle }))
+    )
 
-    const { menuClicked } = $props()
-
-    function setActiveMenuItem(targetTitle: string) {
-        menuItems.forEach(item => {
-            item.active = item.title === targetTitle
-            item.submenu?.forEach(subItem => {
-                subItem.active = subItem.title === targetTitle
-            })
-        })
-        menuItems = menuItems
+    const updateMenu = () => {
         menuClicked()
     }
-
-    $effect(() => {
-        setActiveMenuItem(page.data.title)
-    })
-
-    const updateMenu = (event: CustomEvent) => {
-        setActiveMenuItem(event.details)
-    }
 </script>
 
 <div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">

app/src/lib/components/menu/MenuList.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
     import MenuList from './MenuList.svelte'
-    import type { ComponentType } from 'svelte'
+    import type { Component } from 'svelte'
 
     type MenuItem = {
         title: string
-        icon: ComponentType
+        icon: Component
         href?: string
         feature: boolean
         active?: boolean
@@ -38,7 +38,7 @@
                         </div>
                     </details>
                 {:else}
-                    <a
+                    <!-- eslint-disable-next-line svelte/no-navigation-without-resolve --><a
                         href={menuItem.href}
                         class="font-bold"
                         class:bg-base-100={menuItem.active}

app/src/lib/components/statusbar/StopButton.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { mode, modes } from '$lib/stores'
+    import { ModeData, ModesEnum } from '$lib/platform_shared/message'
+    import { mode } from '$lib/stores'
 
     const deactivate = async () => {
-        mode.set(modes.indexOf('deactivated'))
+        mode.set(ModeData.create({ mode: ModesEnum.DEACTIVATED }))
     }
 </script>
 

app/src/lib/components/widget/Selector.svelte

@@ -14,7 +14,7 @@
     {...rest}
     class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
 >
-    {#each options as option}
+    {#each options as option (option)}
         <option value={option}>{option}</option>
     {/each}
 </select>

app/src/lib/filesystem/chunkedTransfer.ts

@@ -0,0 +1,470 @@
+import { socket } from '$lib/stores/socket'
+import * as FSMessages from '$lib/platform_shared/filesystem'
+import type {
+	FSDeleteRequest,
+	FSMkdirRequest,
+	FSListRequest,
+	FSDownloadRequest,
+	FSDownloadMetadata,
+	FSDownloadData,
+	FSDownloadComplete,
+	FSUploadStart,
+	FSUploadData,
+	FSUploadComplete,
+	FSCancelTransfer
+} from '$lib/platform_shared/filesystem'
+import type { Result, DataResult, ListResult, ProgressCallback } from '$lib/types/models'
+
+const MAX_CHUNK_SIZE = 2 ** 14
+
+type TimeoutId = ReturnType<typeof setTimeout>
+type CleanupFn = (() => void) | null
+
+interface TransferBase<T extends Result> {
+	resolve: (result: T) => void
+	reject: (error: Error) => void
+	onProgress?: ProgressCallback
+	timeoutId: TimeoutId
+}
+
+interface ActiveDownload extends TransferBase<DataResult> {
+	path: string
+	buffer: Uint8Array
+	fileSize: number
+	totalChunks: number
+	chunksReceived: number
+	bytesReceived: number
+}
+
+interface ActiveUpload extends TransferBase<Result> {
+	path: string
+	transferId: number
+	totalChunks: number
+	chunksSent: number
+}
+
+export class FileSystemClient {
+	private activeDownloads = new Map<number, ActiveDownload>()
+	private activeUploads = new Map<number, ActiveUpload>()
+	private pendingDownloads = new Map<string, TransferBase<DataResult>>()
+	private metadataListenerCleanup: CleanupFn = null
+	private downloadListenerCleanup: CleanupFn = null
+	private completeListenerCleanup: CleanupFn = null
+	private uploadCompleteListenerCleanup: CleanupFn = null
+	private transferTimeout = 60000
+
+	constructor() {
+		this.setupListeners()
+	}
+
+	private setupListeners() {
+		// Listen for download metadata (sent first with file size)
+		this.metadataListenerCleanup = socket.on(
+			FSMessages.FSDownloadMetadata,
+			(metadata: FSDownloadMetadata) => {
+				this.handleDownloadMetadata(metadata)
+			}
+		)
+
+		// Listen for download data chunks
+		this.downloadListenerCleanup = socket.on(
+			FSMessages.FSDownloadData,
+			(data: FSDownloadData) => {
+				this.handleDownloadData(data)
+			}
+		)
+
+		// Listen for download completion
+		this.completeListenerCleanup = socket.on(
+			FSMessages.FSDownloadComplete,
+			(complete: FSDownloadComplete) => {
+				this.handleDownloadComplete(complete)
+			}
+		)
+
+		// Listen for upload completion
+		this.uploadCompleteListenerCleanup = socket.on(
+			FSMessages.FSUploadComplete,
+			(complete: FSUploadComplete) => {
+				this.handleUploadComplete(complete)
+			}
+		)
+	}
+
+	private handleDownloadMetadata(metadata: FSDownloadMetadata) {
+		// Find the pending download by path (we don't have transferId yet)
+		// The metadata arrives in response to a download request
+		const pending = this.pendingDownloads.values().next().value
+		if (!pending) {
+			console.warn(`Received download metadata but no pending download`)
+			return
+		}
+
+		// Clear initial timeout
+		clearTimeout(pending.timeoutId)
+
+		// Get the path from the pending downloads (first one)
+		const [path] = this.pendingDownloads.keys()
+		this.pendingDownloads.delete(path)
+
+		if (!metadata.success) {
+			pending.resolve({ success: false, error: metadata.error || 'Download failed' })
+			return
+		}
+
+		const transferId = metadata.transferId
+
+		// Now we know the exact file size - allocate properly sized buffer
+		const buffer = new Uint8Array(metadata.fileSize)
+
+		const download: ActiveDownload = {
+			path,
+			buffer,
+			fileSize: metadata.fileSize,
+			totalChunks: metadata.totalChunks,
+			chunksReceived: 0,
+			bytesReceived: 0,
+			resolve: pending.resolve,
+			reject: pending.reject,
+			onProgress: pending.onProgress,
+			timeoutId: setTimeout(() => {
+				this.activeDownloads.delete(transferId)
+				pending.reject(new Error('Download timeout'))
+			}, this.transferTimeout)
+		}
+
+		this.activeDownloads.set(transferId, download)
+	}
+
+	private handleDownloadData(data: FSDownloadData) {
+		const download = this.activeDownloads.get(data.transferId)
+		if (!download) {
+			console.warn(`Received download data for unknown transfer: ${data.transferId}`)
+			return
+		}
+
+		// Reset timeout
+		clearTimeout(download.timeoutId)
+		download.timeoutId = setTimeout(() => {
+			this.activeDownloads.delete(data.transferId)
+			download.reject(new Error('Download timeout'))
+		}, this.transferTimeout)
+
+		// Copy chunk data to buffer
+		if (data.data && data.data.length > 0) {
+			const offset = data.chunkIndex * MAX_CHUNK_SIZE
+			download.buffer.set(data.data, offset)
+			download.bytesReceived += data.data.length
+			download.chunksReceived++
+		}
+
+		// Report progress
+		if (download.onProgress) {
+			download.onProgress({
+				transferId: data.transferId,
+				bytesTransferred: download.bytesReceived,
+				totalBytes: download.fileSize,
+				chunksCompleted: download.chunksReceived,
+				totalChunks: download.totalChunks,
+				percentage: (download.chunksReceived / download.totalChunks) * 100
+			})
+		}
+	}
+
+	private handleDownloadComplete(complete: FSDownloadComplete) {
+		const download = this.activeDownloads.get(complete.transferId)
+		if (!download) {
+			// This is normal for error cases where transferId wasn't set
+			if (complete.error) {
+				console.warn(`Download failed: ${complete.error}`)
+			}
+			return
+		}
+
+		clearTimeout(download.timeoutId)
+		this.activeDownloads.delete(complete.transferId)
+
+		if (complete.success) {
+			// Trim buffer to actual file size
+			const finalData = download.buffer.slice(0, complete.fileSize)
+			download.resolve({ success: true, data: finalData })
+		} else {
+			download.resolve({ success: false, error: complete.error || 'Download failed' })
+		}
+	}
+
+	private handleUploadComplete(complete: FSUploadComplete) {
+		const upload = this.activeUploads.get(complete.transferId)
+		if (!upload) {
+			console.warn(`Received upload complete for unknown transfer: ${complete.transferId}`)
+			return
+		}
+
+		clearTimeout(upload.timeoutId)
+		this.activeUploads.delete(complete.transferId)
+
+		if (complete.success) {
+			upload.resolve({ success: true })
+		} else {
+			upload.resolve({ success: false, error: complete.error || 'Upload failed' })
+		}
+	}
+
+	/** Delete a file or directory on the ESP32 */
+	async deleteFile(path: string): Promise<Result> {
+		const request: FSDeleteRequest = { path }
+
+		const response = await socket.request({
+			fsDeleteRequest: request
+		})
+
+		if (response.fsDeleteResponse) {
+			return {
+				success: response.fsDeleteResponse.success,
+				error: response.fsDeleteResponse.error || undefined
+			}
+		}
+
+		return { success: false, error: 'No response received' }
+	}
+
+	/** Create a directory on the ESP32 */
+	async createDirectory(path: string): Promise<Result> {
+		const request: FSMkdirRequest = { path }
+
+		const response = await socket.request({
+			fsMkdirRequest: request
+		})
+
+		if (response.fsMkdirResponse) {
+			return {
+				success: response.fsMkdirResponse.success,
+				error: response.fsMkdirResponse.error || undefined
+			}
+		}
+
+		return { success: false, error: 'No response received' }
+	}
+
+	/** List files and directories at the given path */
+	async listDirectory(path = '/'): Promise<ListResult> {
+		const request: FSListRequest = { path }
+
+		const response = await socket.request({
+			fsListRequest: request
+		})
+
+		if (response.fsListResponse) {
+			const resp = response.fsListResponse
+			return {
+				success: resp.success,
+				error: resp.error || undefined,
+				files: (resp.files || []).map((f) => ({ name: f.name, size: f.size })),
+				directories: (resp.directories || []).map((d) => ({ name: d.name }))
+			}
+		}
+
+		return { success: false, error: 'No response received', files: [], directories: [] }
+	}
+
+	/** Download a file from the ESP32 using streaming transfer */
+	async downloadFile(path: string, onProgress?: ProgressCallback): Promise<DataResult> {
+		return new Promise((resolve, reject) => {
+			// Send download request - server will send metadata first, then stream chunks
+			const request: FSDownloadRequest = { path }
+
+			// Set up timeout for initial metadata response
+			const initialTimeout = setTimeout(() => {
+				this.pendingDownloads.delete(path)
+				reject(new Error('Download request timeout - no metadata received'))
+			}, this.transferTimeout)
+
+			// Track this pending download - will be converted to active when metadata arrives
+			this.pendingDownloads.set(path, {
+				resolve,
+				reject,
+				onProgress,
+				timeoutId: initialTimeout
+			})
+
+			// Send the download request (server will respond with metadata, then stream data)
+			socket.request({ fsDownloadRequest: request }).catch((err) => {
+				clearTimeout(initialTimeout)
+				this.pendingDownloads.delete(path)
+				reject(err)
+			})
+		})
+	}
+
+	/** Upload a file to the ESP32 using streaming transfer */
+	async uploadFile(path: string, data: Uint8Array, onProgress?: ProgressCallback): Promise<Result> {
+		const fileSize = data.length
+		const chunkSize = MAX_CHUNK_SIZE
+		const totalChunks = Math.ceil(fileSize / chunkSize) || 1
+
+		// Start upload - get transfer ID
+		const startRequest: FSUploadStart = {
+			path,
+			fileSize,
+			totalChunks
+		}
+
+		const startResponse = await socket.request({
+			fsUploadStart: startRequest
+		})
+
+		if (!startResponse.fsUploadStartResponse) {
+			return { success: false, error: 'Failed to start upload' }
+		}
+
+		const startResp = startResponse.fsUploadStartResponse
+
+		if (!startResp.success) {
+			return { success: false, error: startResp.error || 'Failed to start upload' }
+		}
+
+		const transferId = startResp.transferId
+
+		return new Promise((resolve, reject) => {
+			// Set up upload tracking
+			const upload: ActiveUpload = {
+				path,
+				transferId,
+				totalChunks,
+				chunksSent: 0,
+				resolve,
+				reject,
+				onProgress,
+				timeoutId: setTimeout(() => {
+					this.activeUploads.delete(transferId)
+					reject(new Error('Upload timeout - no completion received'))
+				}, this.transferTimeout)
+			}
+
+			this.activeUploads.set(transferId, upload)
+
+			// Stream all chunks without waiting for ACKs
+			for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
+				const offset = chunkIndex * chunkSize
+				const end = Math.min(offset + chunkSize, fileSize)
+				const chunkData = data.slice(offset, end)
+
+				const uploadData: FSUploadData = {
+					transferId,
+					chunkIndex,
+					data: chunkData
+				}
+
+				// Send chunk as fire-and-forget message
+				socket.emit(FSMessages.FSUploadData, uploadData)
+
+				upload.chunksSent++
+
+				// Report progress
+				if (onProgress) {
+					onProgress({
+						transferId,
+						bytesTransferred: end,
+						totalBytes: fileSize,
+						chunksCompleted: chunkIndex + 1,
+						totalChunks,
+						percentage: ((chunkIndex + 1) / totalChunks) * 100
+					})
+				}
+			}
+
+			// All chunks sent - now wait for completion message from server
+			// The timeout will handle if server doesn't respond
+		})
+	}
+
+	/** Cancel an ongoing transfer */
+	async cancelTransfer(transferId: number): Promise<Pick<Result, 'success'>> {
+		const request: FSCancelTransfer = { transferId }
+
+		// Clean up local state
+		const download = this.activeDownloads.get(transferId)
+		if (download) {
+			clearTimeout(download.timeoutId)
+			this.activeDownloads.delete(transferId)
+			download.resolve({ success: false, error: 'Transfer cancelled' })
+		}
+
+		const upload = this.activeUploads.get(transferId)
+		if (upload) {
+			clearTimeout(upload.timeoutId)
+			this.activeUploads.delete(transferId)
+			upload.resolve({ success: false, error: 'Transfer cancelled' })
+		}
+
+		const response = await socket.request({
+			fsCancelTransfer: request
+		})
+
+		if (response.fsCancelTransferResponse) {
+			return { success: response.fsCancelTransferResponse.success }
+		}
+
+		return { success: false }
+	}
+
+	/** Upload a File object from browser */
+	async uploadFileFromBrowser(
+		destinationPath: string,
+		file: File,
+		onProgress?: ProgressCallback
+	): Promise<Result> {
+		const arrayBuffer = await file.arrayBuffer()
+		const data = new Uint8Array(arrayBuffer)
+		return this.uploadFile(destinationPath, data, onProgress)
+	}
+
+	/** Download a file and save it to browser */
+	async downloadFileAndSave(
+		path: string,
+		filename: string,
+		onProgress?: ProgressCallback
+	): Promise<Result> {
+		const result = await this.downloadFile(path, onProgress)
+
+		if (!result.success || !result.data) {
+			return { success: false, error: result.error }
+		}
+
+		// Create blob and trigger download
+		const blob = new Blob([result.data.buffer as ArrayBuffer])
+		const url = URL.createObjectURL(blob)
+		const a = document.createElement('a')
+		a.href = url
+		a.download = filename
+		document.body.appendChild(a)
+		a.click()
+		document.body.removeChild(a)
+		URL.revokeObjectURL(url)
+
+		return { success: true }
+	}
+
+	/** Cleanup listeners when no longer needed */
+	destroy() {
+		this.metadataListenerCleanup?.()
+		this.downloadListenerCleanup?.()
+		this.completeListenerCleanup?.()
+		this.uploadCompleteListenerCleanup?.()
+
+		// Cancel all active transfers
+		for (const [, download] of this.activeDownloads) {
+			clearTimeout(download.timeoutId)
+			download.reject(new Error('FileSystemClient destroyed'))
+		}
+		this.activeDownloads.clear()
+
+		for (const [, upload] of this.activeUploads) {
+			clearTimeout(upload.timeoutId)
+			upload.reject(new Error('FileSystemClient destroyed'))
+		}
+		this.activeUploads.clear()
+	}
+}
+
+export const fileSystemClient = new FileSystemClient()

app/src/lib/gait.ts

@@ -1,6 +1,7 @@
 import { get } from 'svelte/store'
 import type { body_state_t } from './kinematic'
 import { currentKinematic } from './stores/featureFlags'
+import { ControllerData, WalkGaits } from './platform_shared/message'
 
 export interface gait_state_t {
     step_height: number
@@ -11,36 +12,39 @@ export interface gait_state_t {
     step_depth: number
 }
 
-export interface ControllerCommand {
-    lx: number
-    ly: number
-    rx: number
-    ry: number
-    h: number
-    s: number
-    s1: number
-}
-
 export abstract class GaitState {
     protected abstract name: string
 
     protected dt = 0.02
     protected body_state!: body_state_t
+
+    protected get kinematic() {
+        return get(currentKinematic)
+    }
+
     protected gait_state: gait_state_t = {
-        step_height: 0.4,
+        step_height: 0,
         step_x: 0,
         step_z: 0,
         step_angle: 0,
         step_velocity: 1,
-        step_depth: 0.002
+        step_depth: 0
     }
 
     public get default_feet_pos() {
-        return get(currentKinematic).getDefaultFeetPos()
+        return this.kinematic.getDefaultFeetPos()
     }
 
     protected get default_height() {
-        return 0.5
+        return this.kinematic.default_body_height
+    }
+
+    protected get default_step_depth() {
+        return this.kinematic.default_step_depth
+    }
+
+    protected get default_step_height() {
+        return this.kinematic.default_step_height
     }
 
     begin() {
@@ -49,7 +53,7 @@ export abstract class GaitState {
     end() {
         console.log('Ending', this.name)
     }
-    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+    step(body_state: body_state_t, command: ControllerData, dt: number = 0.02) {
         this.map_command(command)
         this.body_state = body_state
         this.dt = dt / 1000
@@ -66,24 +70,22 @@ export abstract class GaitState {
         return body_state
     }
 
-    map_command(command: ControllerCommand) {
-        const newCommand = {
-            step_height: 0.4 + (command.s1 + 1) / 2,
-            step_x: command.ly,
-            step_z: -command.lx,
-            step_velocity: command.s,
-            step_angle: command.rx,
-            step_depth: 0.002
+    map_command(command: ControllerData) {
+        const kin = this.kinematic
+        this.gait_state = {
+            step_height: command.s1 * kin.max_step_height,
+            step_x: command.left!.y * kin.max_step_length,
+            step_z: -command.left!.x * kin.max_step_length,
+            step_velocity: command.speed,
+            step_angle: command.right!.x,
+            step_depth: kin.default_step_depth
         }
-
-        this.gait_state = newCommand
     }
 }
 
 export class IdleState extends GaitState {
     protected name = 'Idle'
-
-    step(body_state: body_state_t, command: ControllerCommand) {
+    step(body_state: body_state_t, command: ControllerData) {
         super.step(body_state, command)
         return body_state
     }
@@ -92,14 +94,13 @@ export class IdleState extends GaitState {
 export class CalibrationState extends GaitState {
     protected name = 'Calibration'
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    step(body_state: body_state_t, _command: ControllerCommand) {
+    step(body_state: body_state_t, _command: ControllerData) {
         super.step(body_state, _command)
         body_state.omega = 0
         body_state.phi = 0
         body_state.psi = 0
         body_state.xm = 0
-        body_state.ym = this.default_height * 10
+        body_state.ym = this.kinematic.max_body_height
         body_state.zm = 0
         body_state.feet = this.default_feet_pos
         return body_state
@@ -109,14 +110,13 @@ export class CalibrationState extends GaitState {
 export class RestState extends GaitState {
     protected name = 'Rest'
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    step(body_state: body_state_t, _command: ControllerCommand) {
+    step(body_state: body_state_t, _command: ControllerData) {
         super.step(body_state, _command)
         body_state.omega = 0
         body_state.phi = 0
         body_state.psi = 0
         body_state.xm = 0
-        body_state.ym = this.default_height / 2
+        body_state.ym = this.kinematic.min_body_height
         body_state.zm = 0
         body_state.feet = this.default_feet_pos
         return body_state
@@ -126,13 +126,15 @@ export class RestState extends GaitState {
 export class StandState extends GaitState {
     protected name = 'Stand'
 
-    step(body_state: body_state_t, command: ControllerCommand) {
+    step(body_state: body_state_t, command: ControllerData) {
         super.step(body_state, command)
+        const kin = this.kinematic
         body_state.omega = 0
-        body_state.phi = command.rx * 10 * (Math.PI / 2)
-        body_state.psi = command.ry * 10 * (Math.PI / 2)
-        body_state.xm = command.ly / 4
-        body_state.zm = command.lx / 4
+        body_state.ym = kin.min_body_height + command.height * kin.body_height_range
+        body_state.psi = command.right!.y * kin.max_pitch
+        body_state.phi = command.right!.x * kin.max_roll
+        body_state.xm = command.left!.y * kin.max_body_shift_x
+        body_state.zm = command.left!.x * kin.max_body_shift_z
         body_state.feet = this.default_feet_pos
         return body_state
     }
@@ -144,7 +146,7 @@ export class BezierState extends GaitState {
     protected phase_num = 0
     protected step_length = 0
     protected stand_offset = 0.75
-    protected mode: 'crawl' | 'trot' = 'trot'
+    protected mode: WalkGaits = WalkGaits.TROT
     protected speed_factor = 1
     offset = [0, 0.5, 0.75, 0.25]
 
@@ -166,11 +168,9 @@ export class BezierState extends GaitState {
         super.begin()
     }
 
-    set_mode(mode: 'crawl' | 'trot', duty?: number, order?: [number, number, number, number]) {
-        console.log('BezierState set_mode', mode)
-
+    set_mode(mode: WalkGaits, duty?: number, order?: [number, number, number, number]) {
         this.mode = mode
-        if (mode === 'crawl') {
+        if (mode === WalkGaits.CRAWL) {
             this.speed_factor = 0.5
             this.stand_offset = duty ?? 0.85
             const o = order ?? [3, 0, 2, 1]
@@ -189,8 +189,10 @@ export class BezierState extends GaitState {
         super.end()
     }
 
-    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+    step(body_state: body_state_t, command: ControllerData, dt: number = 0.02) {
         super.step(body_state, command, dt)
+        const kin = this.kinematic
+        this.body_state.ym = kin.min_body_height + command.height * kin.body_height_range
         this.step_length = Math.sqrt(this.gait_state.step_x ** 2 + this.gait_state.step_z ** 2)
         if (this.gait_state.step_x < 0) this.step_length = -this.step_length
         this.update_phase()
@@ -218,7 +220,7 @@ export class BezierState extends GaitState {
         const moving = m.step_x !== 0 || m.step_z !== 0 || m.step_angle !== 0
         if (!moving) return
 
-        if (this.mode !== 'crawl') return
+        if (this.mode !== WalkGaits.CRAWL) return
 
         const { stance, swing, next_swing, time_to_lift } = this.get_leg_states()
 
@@ -339,7 +341,8 @@ export class BezierState extends GaitState {
         let angle = Math.atan2(this.gait_state.step_z, this.step_length) * 2
         const delta_pos = controller(length, angle, ...args, phase)
 
-        length = this.gait_state.step_angle * 2
+        const kin = this.kinematic
+        length = this.gait_state.step_angle * kin.max_step_length
         angle = yawArc(this.default_feet_pos[index], this.body_state.feet[index])
 
         const delta_rot = controller(length, angle, ...args, phase)

app/src/lib/kinematic.ts

@@ -50,7 +50,22 @@ export default class Kinematic {
 
     DEG2RAD = DEG2RAD
 
+    max_roll: number
+    max_pitch: number
+    max_body_shift_x: number
+    max_body_shift_z: number
+    max_leg_reach: number
+    min_body_height: number
+    max_body_height: number
+    body_height_range: number
+    max_step_length: number
+    max_step_height: number
+    default_step_depth: number
+    default_body_height: number
+    default_step_height: number
+
     mountOffsets: number[][]
+    default_feet_positions: number[][]
 
     invMountRot = [
         [0, 0, -1],
@@ -66,18 +81,34 @@ export default class Kinematic {
         this.L = params.L
         this.W = params.W
 
+        this.max_roll = 15 * (Math.PI / 2)
+        this.max_pitch = 15 * (Math.PI / 2)
+        this.max_body_shift_x = this.W / 3
+        this.max_body_shift_z = this.W / 3
+        this.max_leg_reach = this.femur + this.tibia - this.coxa_offset
+        this.min_body_height = this.max_leg_reach * 0.45
+        this.max_body_height = this.max_leg_reach * 1
+        this.body_height_range = this.max_body_height - this.min_body_height
+        this.max_step_length = this.max_leg_reach * 0.8
+        this.max_step_height = this.max_leg_reach / 2
+        this.default_step_depth = 0.002
+        this.default_body_height = this.min_body_height + this.body_height_range / 2
+        this.default_step_height = this.default_body_height / 2
+
         this.mountOffsets = [
             [this.L / 2, 0, this.W / 2],
             [this.L / 2, 0, -this.W / 2],
             [-this.L / 2, 0, this.W / 2],
             [-this.L / 2, 0, -this.W / 2]
         ]
+
+        this.default_feet_positions = this.mountOffsets.map((offset, i) => {
+            return [offset[0], 0, offset[2] + (i % 2 === 1 ? -this.coxa : this.coxa)]
+        })
     }
 
     getDefaultFeetPos(): number[][] {
-        return this.mountOffsets.map((offset, i) => {
-            return [offset[0], -1, offset[2] + (i % 2 === 1 ? -this.coxa : this.coxa)]
-        })
+        return this.default_feet_positions.map(pos => [...pos])
     }
 
     calcIK(p: body_state_t): number[] {

app/src/lib/sceneBuilder.ts

@@ -20,7 +20,7 @@ import {
     Group,
     MeshBasicMaterial,
     RepeatWrapping,
-    Object3D
+    type Object3D
 } from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls'

app/src/lib/stores/analytics.ts

@@ -1,67 +1,34 @@
-import { type Analytics } from '$lib/types/models'
+import { AnalyticsData } from '$lib/platform_shared/message'
 import { writable } from 'svelte/store'
-
-const analytics_data = {
-    uptime: <number[]>[],
-    free_heap: <number[]>[],
-    total_heap: <number[]>[],
-    used_heap: <number[]>[],
-    min_free_heap: <number[]>[],
-    max_alloc_heap: <number[]>[],
-    fs_used: <number[]>[],
-    fs_total: <number[]>[],
-    core_temp: <number[]>[],
-    cpu0_usage: <number[]>[],
-    cpu1_usage: <number[]>[],
-    cpu_usage: <number[]>[]
-}
+import { socket } from './socket'
 
 const maxAnalyticsData = 100
 
 function createAnalytics() {
-    const { subscribe, update } = writable(analytics_data)
+    const { subscribe, update } = writable<AnalyticsData[]>([])
+
+    let unsubscribe: (() => void) | null = null
+    let listenerCount = 0
+
+    const addData = (content: AnalyticsData) => {
+        update(data => [...data, content].slice(-maxAnalyticsData))
+    }
 
     return {
         subscribe,
-        addData: (content: Analytics) => {
-            update(analytics_data => ({
-                ...analytics_data,
-                uptime: [...analytics_data.uptime, content.uptime].slice(-maxAnalyticsData),
-                free_heap: [...analytics_data.free_heap, content.free_heap / 1000].slice(
-                    -maxAnalyticsData
-                ),
-                total_heap: [...analytics_data.total_heap, content.total_heap / 1000].slice(
-                    -maxAnalyticsData
-                ),
-                used_heap: [
-                    ...analytics_data.used_heap,
-                    (content.total_heap - content.free_heap) / 1000
-                ].slice(-maxAnalyticsData),
-                min_free_heap: [
-                    ...analytics_data.min_free_heap,
-                    content.min_free_heap / 1000
-                ].slice(-maxAnalyticsData),
-                max_alloc_heap: [
-                    ...analytics_data.max_alloc_heap,
-                    content.max_alloc_heap / 1000
-                ].slice(-maxAnalyticsData),
-                fs_used: [...analytics_data.fs_used, content.fs_used / 1000].slice(
-                    -maxAnalyticsData
-                ),
-                fs_total: [...analytics_data.fs_total, content.fs_total / 1000].slice(
-                    -maxAnalyticsData
-                ),
-                core_temp: [...analytics_data.core_temp, content.core_temp].slice(
-                    -maxAnalyticsData
-                ),
-                cpu0_usage: [...analytics_data.cpu0_usage, content.cpu0_usage].slice(
-                    -maxAnalyticsData
-                ),
-                cpu1_usage: [...analytics_data.cpu1_usage, content.cpu1_usage].slice(
-                    -maxAnalyticsData
-                ),
-                cpu_usage: [...analytics_data.cpu_usage, content.cpu_usage].slice(-maxAnalyticsData)
-            }))
+        addData,
+        listen: () => {
+            listenerCount++
+            if (!unsubscribe) {
+                unsubscribe = socket.on(AnalyticsData, addData)
+            }
+        },
+        stop: () => {
+            listenerCount = Math.max(0, listenerCount - 1)
+            if (listenerCount === 0 && unsubscribe) {
+                unsubscribe()
+                unsubscribe = null
+            }
         }
     }
 }

app/src/lib/stores/featureFlags.ts

@@ -1,9 +1,9 @@
-import { api } from '$lib/api'
 import { notifications } from '$lib/components/toasts/notifications'
 import Kinematic from '$lib/kinematic'
 import { persistentStore } from '$lib/utilities'
 import { derived, type Writable } from 'svelte/store'
 import { resolve } from '$app/paths'
+import { socket } from '$lib/stores'
 
 let featureFlagsStore: Writable<Record<string, boolean | string>>
 
@@ -11,12 +11,20 @@ export function useFeatureFlags() {
     if (!featureFlagsStore) {
         featureFlagsStore = persistentStore<Record<string, boolean | string>>('FeatureFlags', {})
 
-        api.get<Record<string, boolean>>('/api/features').then(result => {
-            if (result.isOk()) featureFlagsStore.set(result.inner)
-            else {
-                notifications.error('Feature flag could not be fetched', 2500)
-            }
-        })
+        socket
+            .request({ featuresDataRequest: {} })
+            .then(response => {
+                if (response.featuresDataResponse) {
+                    featureFlagsStore.set(
+                        response.featuresDataResponse as unknown as Record<string, boolean | string>
+                    )
+                } else {
+                    notifications.error('Feature flags could not be fetched', 2500)
+                }
+            })
+            .catch(() => {
+                notifications.error('Feature flags could not be fetched', 2500)
+            })
     }
 
     return featureFlagsStore
@@ -29,24 +37,24 @@ export const variants = {
         model: `${base}spot_micro.urdf.xacro`,
         stl: `${base}stl.zip`,
         kinematics: {
-            coxa: 60.5 / 100,
-            coxa_offset: 10 / 100,
-            femur: 111.7 / 100,
-            tibia: 118.5 / 100,
-            L: 207.5 / 100,
-            W: 78 / 100
+            coxa: 0.0605,
+            coxa_offset: 0.01,
+            femur: 0.1112,
+            tibia: 0.1185,
+            L: 0.2075,
+            W: 0.078
         }
     },
     SPOTMICRO_YERTLE: {
         model: `${base}yertle.URDF`,
         stl: `${base}URDF.zip`,
         kinematics: {
-            coxa: 35 / 100,
-            coxa_offset: 0 / 100,
-            femur: 130 / 100,
-            tibia: 130 / 100,
-            L: 240 / 100,
-            W: 78 / 100
+            coxa: 0.035,
+            coxa_offset: 0.0,
+            femur: 0.13,
+            tibia: 0.13,
+            L: 0.24,
+            W: 0.078
         }
     }
 }

app/src/lib/stores/fullscreen.ts

@@ -4,7 +4,8 @@ export const isFullscreen = writable(false)
 
 export function toggleFullscreen() {
     isFullscreen.update(state => {
-        !state ? document.documentElement.requestFullscreen() : document.exitFullscreen()
+        if (!state) document.documentElement.requestFullscreen()
+        else document.exitFullscreen()
         return !state
     })
 }

app/src/lib/stores/imu.ts

@@ -1,40 +1,34 @@
 import { writable } from 'svelte/store'
-import type { IMUMsg } from '$lib/types/models'
+import { IMUData } from '$lib/platform_shared/message'
+import { socket } from './socket'
 
 const maxIMUData = 100
 
 export const imu = (() => {
-    const { subscribe, update } = writable({
-        x: [] as number[],
-        y: [] as number[],
-        z: [] as number[],
-        heading: [] as number[],
-        altitude: [] as number[],
-        pressure: [] as number[],
-        bmp_temp: [] as number[]
-    })
+    const { subscribe, update } = writable<IMUData[]>([])
 
-    const addData = (content: IMUMsg) => {
-        update(data => {
-            if (content.imu && content.imu[4]) {
-                data.x = [...data.x, content.imu[0]].slice(-maxIMUData)
-                data.y = [...data.y, content.imu[1]].slice(-maxIMUData)
-                data.z = [...data.z, content.imu[2]].slice(-maxIMUData)
-            }
+    let unsubscribe: (() => void) | null = null
+    let listenerCount = 0
 
-            if (content.mag && content.mag[4]) {
-                data.heading = [...data.heading, content.mag[3]].slice(-maxIMUData)
-            }
-
-            if (content.bmp && content.bmp[3]) {
-                data.pressure = [...data.pressure, content.bmp[0]].slice(-maxIMUData)
-                data.altitude = [...data.altitude, content.bmp[1]].slice(-maxIMUData)
-                data.bmp_temp = [...data.bmp_temp, content.bmp[2]].slice(-maxIMUData)
-            }
-
-            return data
-        })
+    const addData = (content: IMUData) => {
+        update(data => [...data, content].slice(-maxIMUData))
     }
 
-    return { subscribe, addData }
+    return {
+        subscribe,
+        addData,
+        listen: () => {
+            listenerCount++
+            if (!unsubscribe) {
+                unsubscribe = socket.on(IMUData, addData)
+            }
+        },
+        stop: () => {
+            listenerCount = Math.max(0, listenerCount - 1)
+            if (listenerCount === 0 && unsubscribe) {
+                unsubscribe()
+                unsubscribe = null
+            }
+        }
+    }
 })()

app/src/lib/stores/model-store.ts

@@ -1,4 +1,12 @@
-import type { ControllerInput } from '$lib/types/models'
+import Kinematic from '$lib/kinematic'
+import {
+    ControllerData,
+    KinematicData,
+    ModeData,
+    ModesEnum,
+    WalkGaitData,
+    WalkGaits
+} from '$lib/platform_shared/message'
 import { persistentStore } from '$lib/utilities/svelte-utilities'
 import { writable, type Writable } from 'svelte/store'
 
@@ -8,47 +16,41 @@ export const jointNames = persistentStore('joint_names', <string[]>[])
 
 export const model = writable()
 
-export const modes = ['deactivated', 'idle', 'calibration', 'rest', 'stand', 'walk'] as const
+export const mode: Writable<ModeData> = writable(ModeData.create({ mode: ModesEnum.DEACTIVATED }))
 
-export type Modes = (typeof modes)[number]
+export const walkGait: Writable<WalkGaitData> = writable(
+    WalkGaitData.create({ gait: WalkGaits.TROT })
+)
 
-export enum ModesEnum {
-    Deactivated = 0,
-    Idle = 1,
-    Calibration = 2,
-    Rest = 3,
-    Stand = 4,
-    Walk = 5
+export const kinematicData = writable(KinematicData.create())
+
+export const input: Writable<ControllerData> = writable(
+    ControllerData.create({
+        left: { x: 0, y: 0 },
+        right: { x: 0, y: 0 },
+        height: 0.7,
+        s1: 0.5,
+        speed: 0.5
+    })
+)
+
+function enumToValuesAndLabels<T extends number>(enumObj: Record<string, T | string>) {
+    const entries = Object.entries(enumObj).filter(
+        ([key, v]) => typeof v === 'number' && key !== 'UNRECOGNIZED'
+    ) as [string, T][]
+
+    return {
+        values: entries.map(([, v]) => v),
+        labels: Object.fromEntries(
+            entries.map(([k, v]) => [v, k.charAt(0) + k.slice(1).toLowerCase()])
+        ) as Record<T, string>
+    }
 }
 
-export enum WalkGaits {
-    Trot = 0,
-    Crawl = 1
-}
+const modesData = enumToValuesAndLabels<ModesEnum>(ModesEnum)
+export const modes = modesData.values
+export const modeLabels = modesData.labels
 
-export const walkGaits = ['trot', 'crawl'] as const
-
-export const walkGaitLabels: Record<WalkGaits, string> = {
-    [WalkGaits.Trot]: 'Trot',
-    [WalkGaits.Crawl]: 'Crawl'
-}
-
-export const walkGaitToMode = (gait: WalkGaits): 'trot' | 'crawl' => {
-    return gait === WalkGaits.Trot ? 'trot' : 'crawl'
-}
-
-export const mode: Writable<ModesEnum> = writable(ModesEnum.Deactivated)
-
-export const walkGait: Writable<WalkGaits> = writable(WalkGaits.Trot)
-
-export const outControllerData = writable([0, 0, 0, 0, 0, 1, 0])
-
-export const kinematicData = writable([0, 0, 0, 0, 1, 0])
-
-export const input: Writable<ControllerInput> = writable({
-    left: { x: 0, y: 0 },
-    right: { x: 0, y: 0 },
-    height: 0.5,
-    speed: 0.5,
-    s1: 0.05
-})
+const walkGaitsData = enumToValuesAndLabels<WalkGaits>(WalkGaits)
+export const walkGaits = walkGaitsData.values
+export const walkGaitLabels = walkGaitsData.labels

app/src/lib/stores/socket-store.ts

@@ -1,27 +1,12 @@
+import { AnglesData } from '$lib/platform_shared/message'
 import { writable, type Writable } from 'svelte/store'
-import { type angles } from '$lib/types/models'
 
-export const servoAnglesOut: Writable<number[]> = writable([
-    0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-])
-export const servoAngles: Writable<number[]> = writable([
-    0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-])
-export const logs = writable([] as string[])
+export const servoAnglesOut: Writable<AnglesData> = writable(
+    AnglesData.create({ angles: [0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90] })
+)
+export const servoAngles: Writable<AnglesData> = writable(
+    AnglesData.create({ angles: [0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90] })
+)
+
 export const mpu = writable({ heading: 0 })
 export const sonar = writable([0, 0])
-export const distances = writable({})
-
-export interface socketDataCollection {
-    angles: Writable<angles>
-    logs: Writable<string[]>
-    mpu: Writable<unknown>
-    distances: Writable<unknown>
-}
-
-export const socketData = {
-    angles: servoAngles,
-    logs,
-    mpu,
-    distances
-}

app/src/lib/stores/socket.ts

@@ -1,44 +1,121 @@
 import { writable } from 'svelte/store'
-import { encode, decode } from '@msgpack/msgpack'
+import {
+    Message,
+    CorrelationRequest,
+    CorrelationResponse,
+    protoMetadata,
+    type MessageFns
+} from '$lib/platform_shared/message'
+import * as Messages from '$lib/platform_shared/message'
+import { protoMetadata as filesystemProtoMetadata } from '$lib/platform_shared/filesystem'
 
-const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const
-type SocketEvent = (typeof socketEvents)[number]
+export const MESSAGE_TYPE_TO_KEY = new Map<MessageFns<unknown>, string>()
+export const MESSAGE_TYPE_TO_TAG = new Map<MessageFns<unknown>, number>()
+export const MESSAGE_KEY_TO_TAG = new Map<string, number>()
+export const MESSAGE_TAG_TO_KEY = new Map<number, string>()
 
-type SocketMessage = [number, string?, unknown?]
-
-let useBinary = false
-
-const decodeMessage = (data: string | ArrayBuffer): SocketMessage | null => {
-    useBinary = data instanceof ArrayBuffer
-
-    try {
-        if (useBinary) {
-            return decode(new Uint8Array(data as ArrayBuffer)) as SocketMessage
-        }
-        return JSON.parse(data as string)
-    } catch (error) {
-        console.error(`Could not decode data: ${new Uint8Array(data as ArrayBuffer)} - ${error}`)
-    }
-    return null
+type CorrelationRequestData = Omit<CorrelationRequest, 'correlationId'>
+type PendingRequest = {
+    resolve: (response: CorrelationResponse) => void
+    reject: (error: Error) => void
+    timeoutId: ReturnType<typeof setTimeout>
 }
 
-const encodeMessage = (data: unknown) => {
-    try {
-        return useBinary ? encode(data) : JSON.stringify(data)
-    } catch (error) {
-        console.error(`Could not encode data: ${data} - ${error}`)
+// Combine references from both message.proto and filesystem.proto
+const combinedReferences: Record<string, MessageFns<unknown>> = {
+    ...protoMetadata.references,
+    ...filesystemProtoMetadata.references
+}
+
+const MessageType = protoMetadata.fileDescriptor.messageType?.find(
+    (msg: { name: string }) => msg.name === 'Message'
+)
+
+if (MessageType?.field) {
+    for (const field of MessageType.field) {
+        if (field.typeName) {
+            const messageFns = combinedReferences[field.typeName]
+            if (messageFns && field.jsonName && field.number) {
+                MESSAGE_TYPE_TO_KEY.set(messageFns, field.jsonName)
+                MESSAGE_TYPE_TO_TAG.set(messageFns, field.number)
+                MESSAGE_KEY_TO_TAG.set(field.jsonName, field.number)
+                MESSAGE_TAG_TO_KEY.set(field.number, field.jsonName)
+            }
+        }
     }
 }
 
+function getNameFromMessageType<T>(event_type: MessageFns<T>): string {
+    const event = MESSAGE_TYPE_TO_KEY.get(event_type as MessageFns<unknown>)
+    if (!event) {
+        throw new Error(
+            "Event type not found in 'Message'. The MessageFns you passed doesn't correspond to any Message field."
+        )
+    }
+    return event
+}
+
+function getTagFromMessageType<T>(event_type: MessageFns<T>): number {
+    const fieldNumber = MESSAGE_TYPE_TO_TAG.get(event_type as MessageFns<unknown>)
+    if (fieldNumber === undefined) {
+        throw new Error(
+            "Tag not found in 'Message'. The MessageFns you passed doesn't correspond to any Message field."
+        )
+    }
+    return fieldNumber
+}
+
+type SocketEvent = 'open' | 'close' | 'error' | 'message' | 'unresponsive'
+
+type TaggedMessage = { tag: number; msg: Message }
+
+export const decodeMessage = (data: ArrayBuffer): TaggedMessage => {
+    const decoded = Message.decode(new Uint8Array(data))
+    const values = Object.entries(decoded).filter(([, value]) => value !== undefined)
+    if (values.length != 1) {
+        throw new Error('Message included either 0 or more than 1 data point')
+    }
+    const fieldName = values[0][0]
+    const tag = MESSAGE_KEY_TO_TAG.get(fieldName)
+    if (tag === undefined) {
+        throw new Error(`Tag not found for field: ${fieldName}`)
+    }
+    return { tag: tag, msg: decoded }
+}
+
+export const encodeMessage = (data: Message): Uint8Array<ArrayBuffer> => {
+    const encoded = Message.encode(data).finish()
+    return encoded
+}
+
 function createWebSocket() {
-    const listeners = new Map<string, Set<(data?: unknown) => void>>()
+    const message_listeners = new Map<number, Set<(data?: unknown) => void>>()
+    const event_listeners = new Map<string, Set<(data?: unknown) => void>>()
+    const pending_requests = new Map<number, PendingRequest>()
+    const queued_requests = new Map<
+        string,
+        {
+            data: CorrelationRequestData
+            resolve: (r: CorrelationResponse) => void
+            reject: (e: Error) => void
+        }
+    >()
     const { subscribe, set } = writable(false)
-    const reconnectTimeoutTime = 5000
+    const reconnectTimeoutTime = 500000
+    const requestTimeoutTime = 30000
+    let correlationIdCounter = 0
     let unresponsiveTimeoutId: ReturnType<typeof setTimeout>
     let reconnectTimeoutId: ReturnType<typeof setTimeout>
     let ws: WebSocket
     let socketUrl: string | URL
 
+    function getRequestKey(data: CorrelationRequestData): string {
+        return (
+            Object.keys(data).find(k => data[k as keyof CorrelationRequestData] !== undefined) ??
+            'unknown'
+        )
+    }
+
     function init(url: string | URL) {
         socketUrl = url
         connect()
@@ -49,7 +126,7 @@ function createWebSocket() {
         set(false)
         clearTimeout(unresponsiveTimeoutId)
         clearTimeout(reconnectTimeoutId)
-        listeners.get(reason)?.forEach(listener => listener(event))
+        event_listeners.get(reason)?.forEach(listener => listener(event))
         reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime)
     }
 
@@ -57,102 +134,176 @@ function createWebSocket() {
         ws = new WebSocket(socketUrl)
         ws.binaryType = 'arraybuffer'
         ws.onopen = ev => {
-            ping()
-            useBinary = true
             ping()
             set(true)
             clearTimeout(reconnectTimeoutId)
-            listeners.get('open')?.forEach(listener => listener(ev))
-            for (const event of listeners.keys()) {
-                if (socketEvents.includes(event as SocketEvent)) continue
-                subscribeToEvent(event)
-            }
+            resubscribeAll()
+            flushQueuedRequests()
+            event_listeners.get('open')?.forEach(listener => listener(ev))
         }
         ws.onmessage = frame => {
             resetUnresponsiveCheck()
-            const message = decodeMessage(frame.data)
-            if (!message) return
-            const [, event, payload = undefined] = message
-            if (event) listeners.get(event)?.forEach(listener => listener(payload))
+
+            for (const [correlationId, pending] of pending_requests) {
+                clearTimeout(pending.timeoutId)
+                pending.timeoutId = setTimeout(() => {
+                    pending_requests.delete(correlationId)
+                    pending.reject(new Error(`Request timeout (id: ${correlationId})`))
+                }, requestTimeoutTime)
+            }
+
+            const { tag, msg } = decodeMessage(frame.data)
+            if (msg.correlationResponse) {
+                const pending = pending_requests.get(msg.correlationResponse.correlationId)
+                if (pending) {
+                    clearTimeout(pending.timeoutId)
+                    pending_requests.delete(msg.correlationResponse.correlationId)
+                    pending.resolve(msg.correlationResponse)
+                }
+                return
+            }
+            if (tag) {
+                const key = MESSAGE_TAG_TO_KEY.get(tag)!
+                message_listeners
+                    .get(tag)
+                    ?.forEach(listener => listener(msg[key as keyof typeof msg]))
+            }
         }
         ws.onerror = ev => disconnect('error', ev)
         ws.onclose = ev => disconnect('close', ev)
     }
 
-    function unsubscribe(event: string, listener?: (data: unknown) => void) {
-        const eventListeners = listeners.get(event)
-        if (!eventListeners) return
+    function unsubscribe<MT>(event_type: MessageFns<MT>, listener: (data: MT) => void) {
+        const tag = getTagFromMessageType(event_type)
+        const message_listeners_totag = message_listeners.get(tag)
+        if (!message_listeners_totag) return
 
-        if (!eventListeners.size) {
-            unsubscribeToEvent(event)
-        }
-        if (listener) {
-            eventListeners?.delete(listener)
-        } else {
-            listeners.delete(event)
+        message_listeners_totag?.delete(listener as (data?: unknown) => void)
+        if (message_listeners_totag.size == 0) {
+            unsubscribeToMessageFromServer(event_type)
         }
     }
 
+    function unsubscribeEvent(event_type: SocketEvent, listener: (data: unknown) => void) {
+        const message_listeners_totag = event_listeners.get(event_type)
+        if (!message_listeners_totag) return
+
+        message_listeners_totag?.delete(listener)
+    }
+
     function resetUnresponsiveCheck() {
         clearTimeout(unresponsiveTimeoutId)
         unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime)
     }
 
-    function sendEvent(event: string, data: unknown) {
+    function emit<T>(event: MessageFns<T>, data: T) {
         if (!ws || ws.readyState !== WebSocket.OPEN) return
-        send([2, event, data])
+        const type = getNameFromMessageType(event)
+        const wsm = Message.create() as Record<string, unknown>
+        wsm[type] = data
+        send(wsm as Message)
     }
 
-    function unsubscribeToEvent(event: string) {
+    function unsubscribeToMessageFromServer<T>(event_type: MessageFns<T>) {
         if (!ws || ws.readyState !== WebSocket.OPEN) return
-        send([1, event])
+        const unsub_msg = Messages.UnsubscribeNotification.create({
+            tag: getTagFromMessageType(event_type)
+        })
+        send(Message.create({ unsubNotif: unsub_msg }))
     }
 
-    function subscribeToEvent(event: string) {
+    function subscribeToEvent<T>(event_type: MessageFns<T>) {
         if (!ws || ws.readyState !== WebSocket.OPEN) return
-        send([0, event])
+        const sub_msg = Messages.SubscribeNotification.create({
+            tag: getTagFromMessageType(event_type)
+        })
+        send(Message.create({ subNotif: sub_msg }))
     }
 
-    function send(data: unknown) {
-        if (!ws || ws.readyState !== WebSocket.OPEN) return
-        const serialized = encodeMessage(data)
-        if (!serialized) {
-            console.error('Could not serialize data:', data)
-            return
+    function resubscribeAll() {
+        for (const tag of message_listeners.keys()) {
+            const sub_msg = Messages.SubscribeNotification.create({ tag })
+            send(Message.create({ subNotif: sub_msg }))
         }
-        ws.send(serialized)
+    }
+
+    function send(data: Message) {
+        if (!ws || ws.readyState !== WebSocket.OPEN) return
+        const encoded = encodeMessage(data)
+        ws.send(encoded)
     }
 
     function ping() {
-        const serialized = encodeMessage([4])
-        if (!serialized) {
-            console.error('Could not serialize message')
-            return
+        send(Message.create({ pingmsg: {} }))
+    }
+
+    function request(
+        data: CorrelationRequestData,
+        resolve: (r: CorrelationResponse) => void,
+        reject: (e: Error) => void
+    ) {
+        const correlationId = ++correlationIdCounter
+        const timeoutId = setTimeout(() => {
+            pending_requests.delete(correlationId)
+            reject(new Error(`Request timeout (id: ${correlationId})`))
+        }, requestTimeoutTime)
+
+        pending_requests.set(correlationId, { resolve, reject, timeoutId })
+
+        const request = CorrelationRequest.create({ correlationId, ...data })
+        send(Message.create({ correlationRequest: request }))
+    }
+
+    function flushQueuedRequests() {
+        for (const [, { data, resolve, reject }] of queued_requests) {
+            request(data, resolve, reject)
         }
-        ws.send(serialized)
+        queued_requests.clear()
     }
 
     return {
         subscribe,
-        sendEvent,
+        emit,
         init,
-        on: <T>(event: string, listener: (data: T) => void): (() => void) => {
-            let eventListeners = listeners.get(event)
-            if (!eventListeners) {
-                if (!socketEvents.includes(event as SocketEvent)) {
-                    subscribeToEvent(event)
-                }
-                eventListeners = new Set()
-                listeners.set(event, eventListeners)
+        on: <MT>(event_type: MessageFns<MT>, listener: (data: MT) => void): (() => void) => {
+            const tag = getTagFromMessageType(event_type)
+
+            let message_listeners_totag = message_listeners.get(tag)
+            if (!message_listeners_totag) {
+                message_listeners_totag = new Set()
+                message_listeners.set(tag, message_listeners_totag)
+                subscribeToEvent(event_type)
             }
-            eventListeners.add(listener as (data: unknown) => void)
+            message_listeners_totag.add(listener as (data: unknown) => void)
 
             return () => {
-                unsubscribe(event, listener as (data: unknown) => void)
+                unsubscribe(event_type, listener)
             }
         },
-        off: <T>(event: string, listener?: (data: T) => void) => {
-            unsubscribe(event, listener as (data: unknown) => void)
+        onEvent: (event_type: SocketEvent, listener: (data: unknown) => void): (() => void) => {
+            let listeners = event_listeners.get(event_type)
+            if (!listeners) {
+                listeners = new Set()
+                event_listeners.set(event_type, listeners)
+            }
+            listeners.add(listener)
+            return () => {
+                unsubscribeEvent(event_type, listener)
+            }
+        },
+        request: (data: CorrelationRequestData): Promise<CorrelationResponse> => {
+            return new Promise((resolve, reject) => {
+                if (ws && ws.readyState === WebSocket.OPEN) {
+                    request(data, resolve, reject)
+                } else {
+                    const key = getRequestKey(data)
+                    const existing = queued_requests.get(key)
+                    if (existing) {
+                        existing.reject(new Error('Request superseded by newer request'))
+                    }
+                    queued_requests.set(key, { data, resolve, reject })
+                }
+            })
         }
     }
 }

app/src/lib/stores/telemetry.ts

@@ -1,33 +1,31 @@
-import type { DownloadOTA } from '$lib/types/models'
+import { DownloadOTAData, RSSIData } from '$lib/platform_shared/message'
 import { writable } from 'svelte/store'
 
-const telemetry_data = {
-    rssi: {
-        rssi: 0
-    },
-    download_ota: {
-        status: 'none',
-        progress: 0,
-        error: ''
-    }
+type telemetry_data_type = {
+    rssi: RSSIData
+    download_ota: DownloadOTAData
 }
+const telemetry_data: telemetry_data_type = {
+    rssi: RSSIData.create(),
+    download_ota: DownloadOTAData.create()
+} // Note: perhaps init these as null instead of an undefined create()
 
 function createTelemetry() {
     const { subscribe, update } = writable(telemetry_data)
 
     return {
         subscribe,
-        setRSSI: (data: number) => {
-            update(telemetry_data => ({
-                ...telemetry_data,
-                rssi: { rssi: data }
-            }))
+        setRSSI: (data: RSSIData) => {
+            update(telemetry_data => {
+                telemetry_data.rssi = data
+                return telemetry_data
+            })
         },
-        setDownloadOTA: (data: DownloadOTA) => {
-            update(telemetry_data => ({
-                ...telemetry_data,
-                download_ota: { status: data.status, progress: data.progress, error: data.error }
-            }))
+        setDownloadOTA: (data: DownloadOTAData) => {
+            update(telemetry_data => {
+                telemetry_data.download_ota = data
+                return telemetry_data
+            })
         }
     }
 }

app/src/lib/types/models.ts

@@ -1,5 +1,6 @@
 export enum MessageTopic {
     imu = 'imu',
+    imuCalibrate = 'imuCalibrate',
     mode = 'mode',
     input = 'input',
     analytics = 'analytics',
@@ -18,14 +19,6 @@ export enum MessageTopic {
 
 export type vector = { x: number; y: number }
 
-export interface ControllerInput {
-    left: vector
-    right: vector
-    height: number
-    speed: number
-    s1: number
-}
-
 export type GithubRelease = {
     message: string
     tag_name: string
@@ -35,171 +28,11 @@ export type GithubRelease = {
     }>
 }
 
-export type angles = number[] | Int16Array
-
-export type WifiStatus = {
-    status: number
-    local_ip: string
-    mac_address: string
-    rssi: number
-    ssid: string
-    bssid: string
-    channel: number
-    subnet_mask: string
-    gateway_ip: string
-    dns_ip_1: string
-    dns_ip_2?: string
-}
-
-export type WifiSettings = {
-    hostname: string
-    priority_RSSI: boolean
-    wifi_networks: KnownNetworkItem[]
-}
-
-export type NetworkList = {
-    networks: NetworkItem[]
-}
-
-export type KnownNetworkItem = {
-    ssid: string
-    password: string
-    static_ip_config: boolean
-    local_ip?: string
-    subnet_mask?: string
-    gateway_ip?: string
-    dns_ip_1?: string
-    dns_ip_2?: string
-}
-
-export type NetworkItem = {
-    rssi: number
-    ssid: string
-    bssid: string
-    channel: number
-    encryption_type: number
-}
-
-export type ApStatus = {
-    status: number
-    ip_address: string
-    mac_address: string
-    station_num: number
-}
-
-export type ApSettings = {
-    provision_mode: number
-    ssid: string
-    password: string
-    channel: number
-    ssid_hidden: boolean
-    max_clients: number
-    local_ip: string
-    gateway_ip: string
-    subnet_mask: string
-}
-
-export type DownloadOTA = {
-    status: string
-    progress: number
-    error: string
-}
-
-export type Analytics = {
-    max_alloc_heap: number
-    psram_size: number
-    free_psram: number
-    free_heap: number
-    total_heap: number
-    min_free_heap: number
-    core_temp: number
-    fs_total: number
-    fs_used: number
-    uptime: number
-    cpu0_usage: number
-    cpu1_usage: number
-    cpu_usage: number
-}
-
 export type Rssi = {
     rssi: number
     ssid: string
 }
 
-export type StaticSystemInformation = {
-    esp_platform: string
-    firmware_version: string
-    cpu_freq_mhz: number
-    cpu_type: string
-    cpu_rev: number
-    cpu_cores: number
-    sketch_size: number
-    free_sketch_space: number
-    sdk_version: string
-    arduino_version: string
-    flash_chip_size: number
-    flash_chip_speed: number
-    cpu_reset_reason: string
-}
-
-export type SystemInformation = Analytics & StaticSystemInformation
-
-export type IMU = {
-    x: number
-    y: number
-    z: number
-    heading: number
-    altitude: number
-    bmp_temp: number
-    pressure: number
-}
-
-export type IMUMsg = {
-    imu: [number, number, number, number, boolean]
-    mag: [number, number, number, number, boolean]
-    bmp: [number, number, number, boolean]
-}
-
-export interface I2CDevice {
-    address: number
-    part_number: string
-    name: string
-}
-
-export type PinConfig = {
-    pin: number
-    mode: string
-    type: string
-    role: string
-}
-
-export type PeripheralsConfiguration = {
-    sda: number
-    scl: number
-    frequency: number
-    pins: PinConfig[]
-}
-
-export type CameraSettings = {
-    framesize: number
-    quality: number
-    brightness: number
-    contrast: number
-    saturation: number
-    sharpness: number
-    denoise: number
-    special_effect: number
-    wb_mode: number
-    vflip: boolean
-    hmirror: boolean
-}
-
-export type File = number
-
-export interface Directory {
-    [key: string]: File | Directory
-}
-
 export type Servo = {
     name: string
     channel: number
@@ -215,31 +48,36 @@ export type ServoConfiguration = {
     servos: Servo[]
 }
 
-export interface MDNSServiceQuery {
-    services: MDNSServiceItem[]
+export interface Result {
+    success: boolean
+    error?: string
 }
 
-export interface MDNSServiceItem {
-    ip: string
-    port: number
+export interface DataResult extends Result {
+    data?: Uint8Array
+}
+
+export interface FileInfo {
+    name: string
+    size: number
+}
+
+export interface DirectoryInfo {
     name: string
 }
 
-export interface MDNSService {
-    service: string
-    protocol: string
-    port: number
+export interface ListResult extends Result {
+    files: FileInfo[]
+    directories: DirectoryInfo[]
 }
 
-export interface MDNSTxtRecord {
-    key: string
-    value: string
+export interface TransferProgress {
+    transferId: number
+    bytesTransferred: number
+    totalBytes: number
+    chunksCompleted: number
+    totalChunks: number
+    percentage: number
 }
 
-export interface MDNSStatus {
-    started: boolean
-    hostname: string
-    instance: string
-    services: MDNSService[]
-    global_txt_records: MDNSTxtRecord[]
-}
+export type ProgressCallback = (progress: TransferProgress) => void

app/src/lib/utilities/buffer-utilities.ts

@@ -1,4 +1,4 @@
-export class throttler {
+export class Throttler {
     private _throttlePause: boolean
     constructor() {
         this._throttlePause = false

app/src/lib/utilities/index.ts

@@ -6,3 +6,4 @@ export * from './buffer-utilities'
 export * from './model-utilities'
 export * from './string-utilities'
 export * from './color-utilities'
+export * from './ip-utilities'

app/src/lib/utilities/ip-utilities.ts

@@ -0,0 +1,23 @@
+export function ipToUint32(ip: string): number {
+    const parts = ip.split('.')
+    if (parts.length !== 4) return 0
+    return (
+        (parseInt(parts[0], 10) |
+            (parseInt(parts[1], 10) << 8) |
+            (parseInt(parts[2], 10) << 16) |
+            (parseInt(parts[3], 10) << 24)) >>>
+        0
+    )
+}
+
+export function uint32ToIp(ip: number): string {
+    return [ip & 0xff, (ip >>> 8) & 0xff, (ip >>> 16) & 0xff, (ip >>> 24) & 0xff].join('.')
+}
+
+export function isValidIpString(ip: string | undefined): boolean {
+    if (!ip) return false
+    const regexExp =
+        /\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/
+    return regexExp.test(ip)
+}
+

app/src/lib/utilities/model-utilities.ts

@@ -1,4 +1,4 @@
-import { Color, LoaderUtils, Vector3 } from 'three'
+import { Color, Vector3 } from 'three'
 import URDFLoader, { type URDFRobot } from 'urdf-loader'
 import { XacroLoader } from 'xacro-parser'
 import { Result } from '$lib/utilities'
@@ -29,7 +29,7 @@ export const cacheModelFiles = async () => {
 
     for (const [path, data] of Object.entries(files) as [path: string, data: Uint8Array][]) {
         const normalizedPath = path.startsWith('/') ? path : '/' + path
-        const resolvedUrl = resolve(normalizedPath as any)
+        const resolvedUrl = `${resolve('/')}${normalizedPath}`
         fileService?.saveFile(resolvedUrl, data)
         fileService?.saveFile(normalizedPath, data)
     }

app/src/routes/+layout.svelte

@@ -10,11 +10,9 @@
     import Statusbar from '../lib/components/statusbar/statusbar.svelte'
     import {
         telemetry,
-        analytics,
-        ModesEnum,
         kinematicData,
         mode,
-        outControllerData,
+        input,
         servoAngles,
         servoAnglesOut,
         socket,
@@ -22,8 +20,17 @@
         useFeatureFlags,
         walkGait
     } from '$lib/stores'
-    import { type Analytics, type DownloadOTA } from '$lib/types/models'
-    import { MessageTopic } from '$lib/types/models'
+    import {
+        AnglesData,
+        DownloadOTAData,
+        ControllerData,
+        KinematicData,
+        ModeData,
+        RSSIData,
+        SonarData,
+        WalkGaitData
+    } from '$lib/platform_shared/message'
+    import { Throttler } from '$lib/utilities'
 
     interface Props {
         children?: import('svelte').Snippet
@@ -32,6 +39,7 @@
     let { children }: Props = $props()
 
     const features = useFeatureFlags()
+    const throttler = new Throttler()
 
     onMount(async () => {
         const ws = $apiLocation ? $apiLocation : window.location.host
@@ -39,58 +47,53 @@
 
         addEventListeners()
 
-        outControllerData.subscribe(data => socket.sendEvent(MessageTopic.input, data))
-        mode.subscribe(data => socket.sendEvent(MessageTopic.mode, data))
-        walkGait.subscribe(data => socket.sendEvent(MessageTopic.gait, data))
-        servoAnglesOut.subscribe(data => socket.sendEvent(MessageTopic.angles, data))
-        kinematicData.subscribe(data => socket.sendEvent(MessageTopic.position, data))
+        input.subscribe(data => throttler.throttle(() => socket.emit(ControllerData, data), 100))
+        mode.subscribe(data => socket.emit(ModeData, data))
+        walkGait.subscribe(data => socket.emit(WalkGaitData, data))
+        servoAnglesOut.subscribe(data =>
+            throttler.throttle(() => socket.emit(AnglesData, data), 100)
+        )
+        kinematicData.subscribe(data => socket.emit(KinematicData, data))
     })
 
     onDestroy(() => {
         removeEventListeners()
     })
 
+    const eventListeners: (() => void)[] = []
     const addEventListeners = () => {
-        socket.on('open', handleOpen)
-        socket.on('close', handleClose)
-        socket.on('error', handleError)
-        socket.on(MessageTopic.rssi, handleNetworkStatus)
-        socket.on(MessageTopic.mode, (data: ModesEnum) => mode.set(data))
-        socket.on(MessageTopic.analytics, handleAnalytics)
-        socket.on(MessageTopic.angles, (angles: number[]) => {
-            if (angles.length) servoAngles.set(angles)
-        })
+        eventListeners.push(
+            socket.onEvent('open', handleOpen),
+            socket.onEvent('close', handleClose),
+            socket.onEvent('error', handleError),
+            socket.on(RSSIData, data => telemetry.setRSSI(data)),
+            socket.on(ModeData, data => mode.set(data)),
+            socket.on(AnglesData, data => {
+                servoAngles.set(data)
+            })
+        )
         features.subscribe(data => {
-            if (data?.download_firmware) socket.on(MessageTopic.otastatus, handleOAT)
-            if (data?.sonar) socket.on(MessageTopic.sonar, data => console.log(data))
+            if (data?.download_firmware)
+                eventListeners.push(
+                    socket.on(DownloadOTAData, data => telemetry.setDownloadOTA(data))
+                )
+            if (data?.sonar) eventListeners.push(socket.on(SonarData, data => console.log(data)))
         })
     }
 
     const removeEventListeners = () => {
-        socket.off(MessageTopic.analytics, handleAnalytics)
-        socket.off('open', handleOpen)
-        socket.off('close', handleClose)
-        socket.off(MessageTopic.rssi, handleNetworkStatus)
-        socket.off(MessageTopic.otastatus, handleOAT)
+        eventListeners.forEach(offFunction => offFunction())
     }
 
-    const handleOpen = () => {
-        notifications.success('Connection to device established', 5000)
-    }
+    const handleOpen = () => notifications.success('Connection to device established', 5000)
 
     const handleClose = () => {
         notifications.error('Connection to device lost', 5000)
-        telemetry.setRSSI(0)
+        telemetry.setRSSI(RSSIData.create({ rssi: 0 }))
     }
 
     const handleError = (data: unknown) => console.error(data)
 
-    const handleAnalytics = (data: Analytics) => analytics.addData(data)
-
-    const handleNetworkStatus = (data: number) => telemetry.setRSSI(data)
-
-    const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data)
-
     let menuOpen = $state(false)
 </script>
 

app/src/routes/+layout.ts

@@ -16,7 +16,9 @@ const registerFetchIntercept = async () => {
                 const pathOnly = urlObj.pathname
                 file = await fileService?.getFile(pathOnly)
                 if (file?.isOk() && file.inner) return new Response(new Uint8Array(file.inner))
-            } catch {}
+            } catch {
+                console.error('Failed to get file for ', url)
+            }
         }
 
         return originalFetch(resource, config)

app/src/routes/connection/Connection.svelte

@@ -5,7 +5,7 @@
 
     const update = () => {
         const ws = $apiLocation ? $apiLocation : window.location.host
-        socket.init(`ws://${ws}/api/ws/events`)
+        socket.init(`ws://${ws}/api/ws`)
     }
 </script>
 

app/src/routes/controller/+page.svelte

@@ -5,12 +5,12 @@
     import { onMount } from 'svelte'
     import { mpu, socket } from '$lib/stores'
     import { imu } from '$lib/stores/imu'
-    import { MessageTopic, type IMU } from '$lib/types/models'
+    import { IMUData } from '$lib/platform_shared/message'
 
     let layout = $derived($views.find(v => v.name === $selectedView)!)
 
     onMount(() => {
-        socket.on(MessageTopic.imu, (data: IMU) => {
+        socket.on(IMUData, (data: IMUData) => {
             imu.addData(data)
             if (data.heading)
                 mpu.update(mpuData => {

app/src/routes/controller/Controls.svelte

@@ -1,30 +1,24 @@
 <script lang="ts">
     import nipplejs from 'nipplejs'
     import { onMount } from 'svelte'
-    import { capitalize, throttler } from '$lib/utilities'
     import {
         input,
-        outControllerData,
         mode,
-        modes,
-        type Modes,
-        ModesEnum,
-        WalkGaits,
         walkGait,
+        modes,
+        modeLabels,
+        walkGaits,
         walkGaitLabels
     } from '$lib/stores'
     import type { vector } from '$lib/types/models'
     import { VerticalSlider } from '$lib/components/input'
     import { gamepadAxes, gamepadButtonsEdges, hasGamepad } from '$lib/stores/gamepad'
     import { notifications } from '$lib/components/toasts/notifications'
+    import { ModeData, ModesEnum, WalkGaitData, WalkGaits } from '$lib/platform_shared/message'
 
-    let throttle = new throttler()
     let left: nipplejs.JoystickManager
     let right: nipplejs.JoystickManager
 
-    let throttle_timing = 40
-    let data = new Array(7)
-
     $effect(() => {
         if ($hasGamepad) {
             notifications.success('🎮 Gamepad connected', 3000)
@@ -40,18 +34,18 @@
         if (!$hasGamepad) return
         const b = $gamepadButtonsEdges
         if (!b.length) return
-        if (b[0]?.justPressed) mode.set(5)
-        if (b[1]?.justPressed) mode.set(4)
-        if (b[2]?.justPressed) mode.set(3)
-        if (b[3]?.justPressed) mode.set(0)
+        if (b[0]?.justPressed) mode.set(ModeData.create({ mode: ModesEnum.WALK }))
+        if (b[1]?.justPressed) mode.set(ModeData.create({ mode: ModesEnum.STAND }))
+        if (b[2]?.justPressed) mode.set(ModeData.create({ mode: ModesEnum.REST }))
+        if (b[3]?.justPressed) mode.set(ModeData.create({ mode: ModesEnum.DEACTIVATED }))
         if (b[12]?.justPressed)
             input.update(inputData => {
-                inputData['height'] = Math.min(inputData.height + 0.1, 1)
+                inputData.height = Math.min(inputData.height + 0.1, 1)
                 return inputData
             })
-        if (b[13]?.justPressed)
+        if (b[13].justPressed)
             input.update(inputData => {
-                inputData['height'] = Math.min(inputData.height - 0.1, 1)
+                inputData.height = Math.min(inputData.height - 0.1, 1)
                 return inputData
             })
     })
@@ -84,136 +78,120 @@
             inputData[key] = data
             return inputData
         })
-        throttle.throttle(updateData, throttle_timing)
-    }
-
-    const updateData = () => {
-        data[0] = $input.left.x
-        data[1] = $input.left.y
-        data[2] = $input.right.x
-        data[3] = $input.right.y
-        data[4] = $input.height
-        data[5] = $input.speed
-        data[6] = $input.s1
-
-        outControllerData.set(data)
     }
 
     const handleKeyup = (event: KeyboardEvent) => {
         const down = event.type === 'keydown'
         input.update(data => {
-            if (event.key === 'w') data.left.y = down ? 1 : 0
-            if (event.key === 'a') data.left.x = down ? -1 : 0
-            if (event.key === 's') data.left.y = down ? -1 : 0
-            if (event.key === 'd') data.left.x = down ? 1 : 0
-            if (event.key === 'ArrowLeft') data.right.x = down ? 1 : 0
-            if (event.key === 'ArrowRight') data.right.x = down ? -1 : 0
+            if (event.key === 'w') data.left!.y = down ? 1 : 0
+            if (event.key === 'a') data.left!.x = down ? -1 : 0
+            if (event.key === 's') data.left!.y = down ? -1 : 0
+            if (event.key === 'd') data.left!.x = down ? 1 : 0
+            if (event.key === 'ArrowLeft') data.right!.x = down ? 1 : 0
+            if (event.key === 'ArrowRight') data.right!.x = down ? -1 : 0
             return data
         })
-        throttle.throttle(updateData, throttle_timing)
     }
 
-    const handleRange = (event: Event, key: 'speed' | 'height' | 's1') => {
-        const value: number = Number((event.target as HTMLInputElement).value)
-
+    const handleRange = (value: number, key: 'speed' | 'height' | 's1') => {
         input.update(inputData => {
             inputData[key] = value
             return inputData
         })
-        throttle.throttle(updateData, throttle_timing)
     }
 
-    const changeMode = (modeValue: Modes) => {
-        mode.set(modes.indexOf(modeValue))
+    const changeMode = (modeValue: ModesEnum) => {
+        mode.set(ModeData.create({ mode: modeValue }))
     }
 
     const changeWalkGait = (walkGaitValue: WalkGaits) => {
-        walkGait.set(walkGaitValue)
+        walkGait.set(WalkGaitData.create({ gait: walkGaitValue }))
     }
 </script>
 
 <div class="absolute top-0 left-0 w-screen h-screen">
-    <div class="absolute top-0 left-0 h-full w-full flex portrait:hidden">
+    <div class="absolute top-0 left-0 h-full w-full flex max-[599px]:hidden">
         <div id="left" class="flex w-60 items-center justify-end"></div>
         <div class="flex-1"></div>
         <div id="right" class="flex w-60 items-center"></div>
     </div>
-    <div class="absolute bottom-0 right-0 p-4 z-10 gap-2 flex-col hidden lg:flex">
+    <div
+        class="absolute bottom-0 right-0 p-4 z-10 gap-1.5 flex-col hidden lg:flex opacity-40 hover:opacity-80 transition-opacity duration-300"
+    >
         <div class="flex justify-center w-full">
-            <kbd class="kbd">W</kbd>
+            <kbd class="kbd kbd-sm bg-base-100/80 border-base-content/20 shadow-md">W</kbd>
         </div>
-        <div class="flex justify-center gap-2 w-full">
-            <kbd class="kbd">A</kbd>
-            <kbd class="kbd">S</kbd>
-            <kbd class="kbd">D</kbd>
+        <div class="flex justify-center gap-1.5 w-full">
+            <kbd class="kbd kbd-sm bg-base-100/80 border-base-content/20 shadow-md">A</kbd>
+            <kbd class="kbd kbd-sm bg-base-100/80 border-base-content/20 shadow-md">S</kbd>
+            <kbd class="kbd kbd-sm bg-base-100/80 border-base-content/20 shadow-md">D</kbd>
         </div>
-        <div class="flex justify-center w-full"></div>
     </div>
-    <div class="absolute bottom-0 z-10 flex items-end">
+    <div class="absolute bottom-0 z-10 flex items-end pointer-events-none">
         <div
-            class="flex items-center flex-col bg-base-300 bg-opacity-50 p-3 pb-2 gap-2 rounded-tr-xl"
+            class="flex items-center flex-col backdrop-blur-sm bg-base-300/60 p-3 pb-2 gap-2 rounded-tr-2xl border-t border-base-content/5 pointer-events-auto"
         >
             <VerticalSlider
                 min={0}
                 max={1}
                 step={0.01}
-                oninput={(e: Event) => handleRange(e, 'height')}
+                oninput={e => handleRange(Number((e.target as HTMLInputElement).value), 'height')}
             />
-            <label for="height">Ht</label>
+            <label for="height" class="text-xs font-medium opacity-70">Ht</label>
         </div>
         <div
-            class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3 portrait:hidden"
+            class="flex items-end gap-4 backdrop-blur-sm bg-base-300/60 h-min rounded-tr-2xl pl-0 p-3 border-t border-r border-base-content/5 pointer-events-auto"
         >
-            <div class="join">
-                {#each modes as modeValue}
+            <div class="join shadow-lg">
+                {#each modes as modeValue (modeValue)}
                     <button
-                        class="btn join-item"
-                        class:btn-primary={$mode === modes.indexOf(modeValue)}
+                        class="btn join-item btn-sm transition-all duration-200"
+                        class:btn-primary={$mode.mode === modeValue}
                         onclick={() => changeMode(modeValue)}
                     >
-                        {capitalize(modeValue)}
+                        {modeLabels[modeValue]}
                     </button>
                 {/each}
             </div>
 
-            {#if $mode === ModesEnum.Walk}
-                <div class="join">
-                    {#each Object.values(WalkGaits) as gaitValue}
-                        {#if typeof gaitValue === 'number'}
-                            <button
-                                class="btn join-item btn-sm"
-                                class:btn-secondary={$walkGait === gaitValue}
-                                onclick={() => changeWalkGait(gaitValue)}
-                            >
-                                {walkGaitLabels[gaitValue]}
-                            </button>
-                        {/if}
+            {#if $mode.mode === ModesEnum.WALK}
+                <div class="join shadow-md">
+                    {#each walkGaits as gaitValue (gaitValue)}
+                        <button
+                            class="btn join-item btn-xs transition-all duration-200"
+                            class:btn-secondary={$walkGait.gait === gaitValue}
+                            onclick={() => changeWalkGait(gaitValue)}
+                        >
+                            {walkGaitLabels[gaitValue]}
+                        </button>
                     {/each}
                 </div>
 
                 <div class="flex gap-4">
-                    <div>
-                        <label for="s1">S1</label>
+                    <div class="flex flex-col gap-1">
+                        <label for="s1" class="text-xs font-medium opacity-70">Step height</label>
                         <input
                             type="range"
                             name="s1"
                             min="0"
                             step="0.01"
                             max="1"
-                            oninput={e => handleRange(e, 's1')}
-                            class="range range-sm range-primary"
+                            oninput={e =>
+                                handleRange(Number((e.target as HTMLInputElement).value), 's1')}
+                            class="range range-xs range-primary"
                         />
                     </div>
-                    <div>
-                        <label for="speed">Speed</label>
+                    <div class="flex flex-col gap-1">
+                        <label for="speed" class="text-xs font-medium opacity-70">Speed</label>
                         <input
                             type="range"
                             name="speed"
                             min="0"
                             step="0.01"
                             max="1"
-                            oninput={e => handleRange(e, 'speed')}
-                            class="range range-sm range-primary"
+                            oninput={e =>
+                                handleRange(Number((e.target as HTMLInputElement).value), 'speed')}
+                            class="range range-xs range-primary"
                         />
                     </div>
                 </div>

app/src/routes/peripherals/camera/CameraSetting.svelte

@@ -1,38 +1,40 @@
 <script lang="ts">
     import { api } from '$lib/api'
     import Spinner from '$lib/components/Spinner.svelte'
-    import type { CameraSettings } from '$lib/types/models'
-    let settings: CameraSettings = $state({
-        brightness: 0,
-        contrast: 0,
-        framesize: 0,
-        vflip: false,
-        hmirror: false,
-        special_effect: 0,
-        quality: 0,
-        saturation: 0,
-        sharpness: 0,
-        denoise: 0,
-        wb_mode: 0
-    })
+    import { CameraSettings, Request, type Response as ProtoResponse } from '$lib/platform_shared/api'
+
+    let settings = $state<CameraSettings>(CameraSettings.create({}))
 
     const getCameraSettings = async () => {
-        const result = await api.get<CameraSettings>('/api/camera/settings')
+        const result = await api.get<ProtoResponse>('/api/camera/settings')
         if (result.isErr()) {
             console.error('An error occurred', result.inner)
             return
         }
-        settings = result.inner
+        if (result.inner.cameraSettings) {
+            settings = result.inner.cameraSettings
+        }
     }
 
     const updateCameraSettings = async () => {
-        const result = await api.post<CameraSettings>('/api/camera/settings', settings)
+        const request = Request.create({
+            cameraSettings: settings
+        })
+        const result = await api.post_proto<ProtoResponse>('/api/camera/settings', request)
         if (result.isErr()) {
             console.error('An error occurred', result.inner)
             return
         }
-        settings = result.inner
+        if (result.inner.cameraSettings) {
+            settings = result.inner.cameraSettings
+        }
     }
+
+    // Helper to convert number (0/1) to boolean for checkbox binding
+    const getVflip = () => settings.vflip !== 0
+    const setVflip = (value: boolean) => (settings.vflip = value ? 1 : 0)
+    const getHmirror = () => settings.hmirror !== 0
+    const setHmirror = (value: boolean) => (settings.hmirror = value ? 1 : 0)
 </script>
 
 {#await getCameraSettings()}
@@ -78,19 +80,29 @@
 
         <label class="cursor-pointer flex items-center justify-between">
             Vertical flip
-            <input type="checkbox" class="toggle" bind:checked={settings.vflip} />
+            <input
+                type="checkbox"
+                class="toggle"
+                checked={getVflip()}
+                onchange={(e) => setVflip(e.currentTarget.checked)}
+            />
         </label>
 
         <label class="cursor-pointer flex items-center justify-between">
             Horizontal flip
-            <input type="checkbox" class="toggle" bind:checked={settings.hmirror} />
+            <input
+                type="checkbox"
+                class="toggle"
+                checked={getHmirror()}
+                onchange={(e) => setHmirror(e.currentTarget.checked)}
+            />
         </label>
 
         <label for="special_effect" class="flex items-center">
             <span class="basis-1/2">Special Effect</span>
             <select
                 class="select select-bordered select-sm w-full max-w-xs"
-                bind:value={settings.special_effect}
+                bind:value={settings.specialEffect}
             >
                 <option value={0}>No effect</option>
                 <option value={1}>Negative</option>

app/src/routes/peripherals/i2c/i2c.svelte

@@ -2,54 +2,25 @@
     import SettingsCard from '$lib/components/SettingsCard.svelte'
     import { onMount } from 'svelte'
     import { socket } from '$lib/stores'
-    import { MessageTopic, type I2CDevice } from '$lib/types/models'
     import { Connection } from '$lib/components/icons'
     import I2CSetting from './i2cSetting.svelte'
-
-    const i2cDevices = [
-        { address: 30, part_number: 'HMC5883', name: '3-Axis Digital Compass/Magnetometer IC' },
-        { address: 41, part_number: 'BNO055', name: '9-Axis Absolute Orientation Sensor' },
-        { address: 64, part_number: 'PCA9685', name: '16-channel PWM driver default address' },
-        { address: 72, part_number: 'ADS1115', name: '4-channel 16-bit ADC' },
-        {
-            address: 104,
-            part_number: 'MPU6050',
-            name: 'Six-Axis (Gyro + Accelerometer) MEMS MotionTracking™ Devices'
-        },
-        {
-            address: 105,
-            part_number: 'ICM20948',
-            name: 'Nine-Axis (Gyro + Accelerometer + Magnetometer) MEMS MotionTracking™ Device'
-        },
-        { address: 115, part_number: 'PAJ7620U2', name: 'Gesture sensor' },
-        { address: 119, part_number: 'BMP085', name: 'Temp/Barometric' }
-    ]
+    import type { I2CDevice } from '$lib/platform_shared/message'
 
     let active_devices: I2CDevice[] = $state([])
-
     let isLoading = $state(false)
 
     onMount(() => {
-        socket.on(MessageTopic.i2cScan, handleScan)
         triggerScan()
-        return () => socket.off(MessageTopic.i2cScan, handleScan)
     })
 
-    const handleScan = (data: { addresses: number[] }) => {
-        active_devices = data.addresses.map(
-            (address: number) =>
-                i2cDevices.find(device => device.address === address) || {
-                    address,
-                    part_number: 'Unknown',
-                    name: 'Unknown'
-                }
-        )
-        isLoading = false
-    }
-
-    const triggerScan = () => {
+    const triggerScan = async () => {
         isLoading = true
-        socket.sendEvent(MessageTopic.i2cScan, '')
+        try {
+            const response = await socket.request({ i2cScanDataRequest: {} })
+            active_devices = response.i2cScanData?.devices ?? []
+        } finally {
+            isLoading = false
+        }
     }
 </script>
 
@@ -76,8 +47,8 @@
         {#if active_devices.length === 0}
             <div>No I2C devices found</div>
         {:else}
-            {#each active_devices as device}
-                <div>[{device.address.toString(16)}] {device.part_number} - {device.name}</div>
+            {#each active_devices as device (device.address)}
+                <div>[{device.address.toString(16)}] {device.partNumber} - {device.name}</div>
             {/each}
         {/if}
     </div>

app/src/routes/peripherals/i2c/i2cSetting.svelte

@@ -1,22 +1,31 @@
 <script lang="ts">
     import { Cancel, Edit, EditOff, Power } from '$lib/components/icons'
-    import { socket } from '$lib/stores'
-    import { MessageTopic, type PeripheralsConfiguration } from '$lib/types/models'
+    import { api } from '$lib/api'
     import { onMount } from 'svelte'
     import { modals } from 'svelte-modals'
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
+    import {
+        type PeripheralSettings,
+        Request,
+        type Response as ProtoResponse
+    } from '$lib/platform_shared/api'
 
-    let settings: PeripheralsConfiguration | null = $state(null)
+    let settings = $state<PeripheralSettings | null>(null)
     let isEditing = $state(false)
 
     onMount(() => {
-        socket.on(MessageTopic.peripheralSettings, handleSettings)
-        socket.sendEvent(MessageTopic.peripheralSettings, '')
-        return () => socket.off(MessageTopic.peripheralSettings, handleSettings)
+        getPeripheralSettings()
     })
 
-    const handleSettings = (data: Record<string, unknown>) => {
-        settings = data as PeripheralsConfiguration
+    const getPeripheralSettings = async () => {
+        const result = await api.get<ProtoResponse>('/api/peripherals/settings')
+        if (result.isErr()) {
+            console.error('Error:', result.inner)
+            return
+        }
+        if (result.inner.peripheralSettings) {
+            settings = result.inner.peripheralSettings
+        }
     }
 
     const handleSave = () => {
@@ -28,9 +37,21 @@
                 cancel: { label: 'Cancel', icon: Cancel },
                 confirm: { label: 'Confirm', icon: Power }
             },
-            onConfirm: () => {
+            onConfirm: async () => {
                 modals.close()
-                socket.sendEvent(MessageTopic.peripheralSettings, settings)
+                if (!settings) return
+                const request = Request.create({
+                    peripheralSettings: settings
+                })
+                const result = await api.post_proto<ProtoResponse>('/api/peripherals/settings', request)
+                if (result.isErr()) {
+                    console.error('Error:', result.inner)
+                    return
+                }
+                if (result.inner.peripheralSettings) {
+                    settings = result.inner.peripheralSettings
+                }
+                isEditing = false
             }
         })
     }

app/src/routes/peripherals/imu/imu.svelte

@@ -1,29 +1,33 @@
 <script lang="ts">
     import SettingsCard from '$lib/components/SettingsCard.svelte'
+    import Compass from '$lib/components/Compass.svelte'
     import { imu } from '$lib/stores/imu'
     import { Chart, registerables } from 'chart.js'
     import { cubicOut } from 'svelte/easing'
     import { slide } from 'svelte/transition'
     import { onDestroy, onMount } from 'svelte'
-    import { socket } from '$lib/stores'
-    import { MessageTopic, type IMUMsg } from '$lib/types/models'
+    import { socket, mpu } from '$lib/stores'
     import { useFeatureFlags } from '$lib/stores/featureFlags'
     import { Rotate3d } from '$lib/components/icons'
 
+    import { type IMUCalibrateData } from '$lib/platform_shared/message'
+
     Chart.register(...registerables)
 
     const features = useFeatureFlags()
     let intervalId: ReturnType<typeof setInterval> | number
+    let isCalibrating = $state(false)
+    let calibrationResult = $state<IMUCalibrateData | null>(null)
 
-    let angleChartElement: HTMLCanvasElement
-    let tempChartElement: HTMLCanvasElement
-    let altitudeChartElement: HTMLCanvasElement
-    let magnetometerChartElement: HTMLCanvasElement
+    let angleChartElement: HTMLCanvasElement = $state()!
+    let tempChartElement: HTMLCanvasElement = $state()!
+    let altitudeChartElement: HTMLCanvasElement = $state()!
+    let headingChartElement: HTMLCanvasElement = $state()!
 
     let angleChart: Chart
     let tempChart: Chart
     let altitudeChart: Chart
-    let magnetometerChart: Chart
+    let headingChart: Chart
 
     const getChartColors = () => {
         const style = getComputedStyle(document.body)
@@ -65,145 +69,155 @@
         const colors = getChartColors()
         const baseConfig = createBaseChartConfig(colors.background)
 
-        angleChart = new Chart(angleChartElement, {
-            type: 'line',
-            data: {
-                datasets: [
-                    {
-                        label: 'x',
-                        borderColor: colors.primary,
-                        backgroundColor: colors.primary,
-                        borderWidth: 2,
-                        data: $imu.x,
-                        yAxisID: 'y'
-                    },
-                    {
-                        label: 'y',
-                        borderColor: colors.secondary,
-                        backgroundColor: colors.secondary,
-                        borderWidth: 2,
-                        data: $imu.y,
-                        yAxisID: 'y'
-                    },
-                    {
-                        label: 'z',
-                        borderColor: colors.accent,
-                        backgroundColor: colors.accent,
-                        borderWidth: 2,
-                        data: $imu.z,
-                        yAxisID: 'y'
-                    }
-                ]
-            },
-            options: {
-                ...baseConfig,
-                scales: {
-                    ...baseConfig.scales,
-                    y: {
-                        ...baseConfig.scales.y,
-                        title: {
-                            display: true,
-                            text: 'Angle [°]',
-                            color: colors.background,
-                            font: { size: 16, weight: 'bold' }
+        if (angleChartElement) {
+            angleChart = new Chart(angleChartElement, {
+                type: 'line',
+                data: {
+                    datasets: [
+                        {
+                            label: 'x',
+                            borderColor: colors.primary,
+                            backgroundColor: colors.primary,
+                            borderWidth: 2,
+                            data: $imu.map(datapoint => datapoint.x),
+                            yAxisID: 'y'
+                        },
+                        {
+                            label: 'y',
+                            borderColor: colors.secondary,
+                            backgroundColor: colors.secondary,
+                            borderWidth: 2,
+                            data: $imu.map(datapoint => datapoint.y),
+                            yAxisID: 'y'
+                        },
+                        {
+                            label: 'z',
+                            borderColor: colors.accent,
+                            backgroundColor: colors.accent,
+                            borderWidth: 2,
+                            data: $imu.map(datapoint => datapoint.z),
+                            yAxisID: 'y'
+                        }
+                    ]
+                },
+                options: {
+                    ...baseConfig,
+                    scales: {
+                        ...baseConfig.scales,
+                        y: {
+                            ...baseConfig.scales.y,
+                            title: {
+                                display: true,
+                                text: 'Angle [°]',
+                                color: colors.background,
+                                font: { size: 16, weight: 'bold' }
+                            }
                         }
                     }
                 }
-            }
-        })
+            })
+        }
 
-        tempChart = new Chart(tempChartElement, {
-            type: 'line',
-            data: {
-                datasets: [
-                    {
-                        label: 'Barometer temperature',
-                        borderColor: colors.secondary,
-                        backgroundColor: colors.secondary,
-                        borderWidth: 2,
-                        data: $imu.bmp_temp,
-                        yAxisID: 'y'
-                    }
-                ]
-            },
-            options: {
-                ...baseConfig,
-                scales: {
-                    ...baseConfig.scales,
-                    y: {
-                        ...baseConfig.scales.y,
-                        title: {
-                            display: true,
-                            text: 'Temperature [C°]',
-                            color: colors.background,
-                            font: { size: 16, weight: 'bold' }
+        if (tempChartElement) {
+            tempChart = new Chart(tempChartElement, {
+                type: 'line',
+                data: {
+                    datasets: [
+                        {
+                            label: 'Barometer temperature',
+                            borderColor: colors.secondary,
+                            backgroundColor: colors.secondary,
+                            borderWidth: 2,
+                            data: $imu.map(datapoint => datapoint.bmpTemp),
+                            yAxisID: 'y'
+                        }
+                    ]
+                },
+                options: {
+                    ...baseConfig,
+                    scales: {
+                        ...baseConfig.scales,
+                        y: {
+                            ...baseConfig.scales.y,
+                            title: {
+                                display: true,
+                                text: 'Temperature [C°]',
+                                color: colors.background,
+                                font: { size: 16, weight: 'bold' }
+                            }
                         }
                     }
                 }
-            }
-        })
+            })
+        }
 
-        altitudeChart = new Chart(altitudeChartElement, {
-            type: 'line',
-            data: {
-                datasets: [
-                    {
-                        label: 'Altitude',
-                        borderColor: colors.primary,
-                        backgroundColor: colors.primary,
-                        borderWidth: 2,
-                        data: $imu.altitude,
-                        yAxisID: 'y'
-                    }
-                ]
-            },
-            options: {
-                ...baseConfig,
-                scales: {
-                    ...baseConfig.scales,
-                    y: {
-                        ...baseConfig.scales.y,
-                        title: {
-                            display: true,
-                            text: 'Altitude [M]',
-                            color: colors.background,
-                            font: { size: 16, weight: 'bold' }
+        if (altitudeChartElement) {
+            altitudeChart = new Chart(altitudeChartElement, {
+                type: 'line',
+                data: {
+                    datasets: [
+                        {
+                            label: 'Altitude',
+                            borderColor: colors.primary,
+                            backgroundColor: colors.primary,
+                            borderWidth: 2,
+                            data: $imu.map(datapoint => datapoint.altitude),
+                            yAxisID: 'y'
+                        }
+                    ]
+                },
+                options: {
+                    ...baseConfig,
+                    scales: {
+                        ...baseConfig.scales,
+                        y: {
+                            ...baseConfig.scales.y,
+                            title: {
+                                display: true,
+                                text: 'Altitude [M]',
+                                color: colors.background,
+                                font: { size: 16, weight: 'bold' }
+                            }
                         }
                     }
                 }
-            }
-        })
+            })
+        }
 
-        magnetometerChart = new Chart(magnetometerChartElement, {
-            type: 'line',
-            data: {
-                datasets: [
-                    {
-                        label: 'Heading',
-                        borderColor: colors.primary,
-                        backgroundColor: colors.primary,
-                        borderWidth: 2,
-                        data: $imu.heading,
-                        yAxisID: 'y'
-                    }
-                ]
-            },
-            options: {
-                ...baseConfig,
-                scales: {
-                    ...baseConfig.scales,
-                    y: {
-                        ...baseConfig.scales.y,
-                        title: {
-                            display: true,
-                            text: 'Heading [°]',
-                            color: colors.background,
-                            font: { size: 16, weight: 'bold' }
+        if (headingChartElement) {
+            headingChart = new Chart(headingChartElement, {
+                type: 'line',
+                data: {
+                    datasets: [
+                        {
+                            label: 'Heading',
+                            borderColor: colors.accent,
+                            backgroundColor: colors.accent,
+                            borderWidth: 2,
+                            data: $imu.map(datapoint => datapoint.heading),
+                            yAxisID: 'y'
+                        }
+                    ]
+                },
+                options: {
+                    ...baseConfig,
+                    scales: {
+                        ...baseConfig.scales,
+                        y: {
+                            ...baseConfig.scales.y,
+                            min: 0,
+                            max: 360,
+                            title: {
+                                display: true,
+                                text: 'Heading [°]',
+                                color: colors.background,
+                                font: { size: 16, weight: 'bold' }
+                            }
                         }
                     }
                 }
-            }
-        })
+            })
+        }
     }
 
     const updateChartData = (chart: Chart, data: number[]) => {
@@ -215,42 +229,65 @@
     }
 
     const updateData = () => {
-        if ($features.imu) {
-            angleChart.data.labels = $imu.x
-            angleChart.data.datasets[0].data = $imu.x
-            angleChart.data.datasets[1].data = $imu.y
-            angleChart.data.datasets[2].data = $imu.z
+        if ($features.imu && angleChart) {
+            const x = $imu.map(datapoint => datapoint.x)
+            const y = $imu.map(datapoint => datapoint.y)
+            const z = $imu.map(datapoint => datapoint.z)
 
-            const allValues = [...$imu.x, ...$imu.y, ...$imu.z]
+            angleChart.data.labels = Array.from({ length: $imu.length }, (_, i) => i + 1)
+            angleChart.data.datasets[0].data = x
+            angleChart.data.datasets[1].data = y
+            angleChart.data.datasets[2].data = z
+
+            const allValues = [...x, ...y, ...z]
             angleChart.options.scales!.y!.min = Math.min(...allValues) - 1
             angleChart.options.scales!.y!.max = Math.max(...allValues) + 1
             angleChart.update('none')
         }
 
-        if ($features.mag) {
-            updateChartData(magnetometerChart, $imu.heading)
+        if ($features.bmp && tempChart && altitudeChart) {
+            updateChartData(
+                tempChart,
+                $imu.map(datapoint => datapoint.bmpTemp)
+            )
+            updateChartData(
+                altitudeChart,
+                $imu.map(datapoint => datapoint.altitude)
+            )
         }
 
-        if ($features.bmp) {
-            updateChartData(tempChart, $imu.bmp_temp)
-            updateChartData(altitudeChart, $imu.altitude)
+        if ($features.mag && headingChart) {
+            const headingData = $imu.map(datapoint => datapoint.heading)
+            headingChart.data.labels = headingData
+            headingChart.data.datasets[0].data = headingData
+            headingChart.update('none')
+
+            if ($imu.length > 0) {
+                mpu.set({ heading: $imu[$imu.length - 1].heading })
+            }
         }
     }
-
     onMount(() => {
-        socket.on(MessageTopic.imu, (data: IMUMsg) => {
-            console.log(data)
-            imu.addData(data)
-        })
-
+        imu.listen()
         initializeCharts()
         intervalId = setInterval(updateData, 200)
     })
 
     onDestroy(() => {
-        socket.off(MessageTopic.imu)
+        imu.stop()
         clearInterval(intervalId)
     })
+
+    async function startCalibration() {
+        isCalibrating = true
+        calibrationResult = null
+        try {
+            const response = await socket.request({ imuCalibrateExecute: {} })
+            calibrationResult = response.imuCalibrateData ?? null
+        } finally {
+            isCalibrating = false
+        }
+    }
 </script>
 
 <SettingsCard collapsible={false}>
@@ -261,6 +298,30 @@
         <span>IMU</span>
     {/snippet}
 
+    <div class="flex items-center gap-2 mb-4">
+        <button
+            class="btn btn-sm btn-primary"
+            onclick={startCalibration}
+            disabled={isCalibrating || !$features.imu}
+        >
+            {#if isCalibrating}
+                <span class="loading loading-spinner loading-xs"></span>
+                Calibrating...
+            {:else}
+                Calibrate IMU
+            {/if}
+        </button>
+        {#if calibrationResult}
+            <span
+                class="badge"
+                class:badge-success={calibrationResult.success}
+                class:badge-error={!calibrationResult.success}
+            >
+                {calibrationResult.success ? 'Calibrated' : 'Failed'}
+            </span>
+        {/if}
+    </div>
+
     {#if $features.imu}
         <div class="w-full overflow-x-auto">
             <div
@@ -273,17 +334,22 @@
     {/if}
 
     {#if $features.mag}
-        <div class="w-full overflow-x-auto">
-            <div
-                class="flex w-full flex-col space-y-1 h-60"
-                transition:slide|local={{ duration: 300, easing: cubicOut }}
-            >
-                <canvas bind:this={magnetometerChartElement}></canvas>
+        <div class="divider">Magnetometer</div>
+        <div class="flex flex-col lg:flex-row gap-4 items-center">
+            <Compass heading={$mpu.heading} />
+            <div class="flex-1 w-full overflow-x-auto">
+                <div
+                    class="flex w-full flex-col space-y-1 h-60"
+                    transition:slide|local={{ duration: 300, easing: cubicOut }}
+                >
+                    <canvas bind:this={headingChartElement}></canvas>
+                </div>
             </div>
         </div>
     {/if}
 
     {#if $features.bmp}
+        <div class="divider">Barometer</div>
         <div class="w-full overflow-x-auto">
             <div
                 class="flex w-full flex-col space-y-1 h-60"

app/src/routes/peripherals/servo/ServoTable.svelte

@@ -2,43 +2,48 @@
     import { api } from '$lib/api'
     import { onMount } from 'svelte'
     import { RotateCw, RotateCcw } from '$lib/components/icons'
+    import { Request, Response, type ServoSettings } from '$lib/platform_shared/api'
+    import { notifications } from '$lib/components/toasts/notifications'
+
     interface Props {
-        data?: Record<string, unknown>
+        servoSettings?: ServoSettings | null
         servoId?: number
         pwm?: number
     }
 
     let {
-        data = $bindable({
-            servos: []
-        }),
+        servoSettings = $bindable(null),
         pwm = $bindable(306),
         servoId = $bindable(0)
     }: Props = $props()
 
-    const updateValue = (event: Event, index: number, key: string) => {
-        data.servos[index][key] = Number((event.target as HTMLInputElement).value)
-    }
-
     const syncConfig = async () => {
-        await api.post('/api/servo/config', data)
+        if (!servoSettings) return
+        notifications.info("Uploading servo config...", 3000)
+        await api.post_proto<Response>('/api/servo/config', Request.create({ servoSettings }))
+        notifications.success('Servo config uploaded successfully', 3000)
     }
 
     const toggleDirection = async (index: number) => {
-        data.servos[index].direction = data.servos[index].direction === 1 ? -1 : 1
+        if (!servoSettings) return
+        servoSettings.servos[index].direction = servoSettings.servos[index].direction === 1 ? -1 : 1
         await syncConfig()
     }
 
     onMount(async () => {
-        const result = await api.get('/api/servo/config')
-        if (result.isOk()) {
-            data = result.inner
+        const result = await api.get<Response>('/api/servo/config')
+        if (result.isOk() && result.inner.servoSettings) {
+            servoSettings = result.inner.servoSettings
+        } else {
+            console.log("Failed to fetch servo config!")
+            console.log(result)
         }
     })
 
     const setCenterPWM = async () => {
+        if (!servoSettings) return
         console.log('setCenterPWM', servoId, pwm)
-        data.servos[servoId]['center_pwm'] = pwm
+        servoSettings.servos[servoId].centerPwm = pwm
         await syncConfig()
     }
 </script>
@@ -47,6 +52,7 @@
     <button class="btn btn-sm btn-primary" onclick={() => setCenterPWM()}>Set center pwm</button>
 </div>
 
+{#if servoSettings}
 <div class="overflow-x-auto">
     <table class="table table-xs">
         <thead>
@@ -59,16 +65,16 @@
             </tr>
         </thead>
         <tbody>
-            {#each data.servos as servo, index}
+            {#each servoSettings.servos as servo, index (index)}
                 <tr class="hover:bg-base-200">
                     <td class="font-medium">Servo {index}</td>
                     <td>
                         <input
                             type="number"
                             class="input input-sm input-bordered w-20"
-                            value={servo.center_pwm}
+                            value={servo.centerPwm}
                             onblur={syncConfig}
-                            oninput={event => updateValue(event, index, 'center_pwm')}
+                            oninput={event => servo.centerPwm = Number((event.target as HTMLInputElement).value)}
                             min="80"
                             max="600"
                         />
@@ -78,9 +84,9 @@
                             type="number"
                             step="0.1"
                             class="input input-sm input-bordered w-20"
-                            value={servo.center_angle}
+                            value={servo.centerAngle}
                             onblur={syncConfig}
-                            oninput={event => updateValue(event, index, 'center_angle')}
+                            oninput={event => servo.centerAngle = Number((event.target as HTMLInputElement).value)}
                             min="-90"
                             max="90"
                         />
@@ -105,7 +111,7 @@
                             class="input input-sm input-bordered w-20"
                             value={servo.conversion}
                             onblur={syncConfig}
-                            oninput={event => updateValue(event, index, 'conversion')}
+                            oninput={event => servo.conversion = Number((event.target as HTMLInputElement).value)}
                             min="0"
                             max="10"
                         />
@@ -115,3 +121,4 @@
         </tbody>
     </table>
 </div>
+{/if}

app/src/routes/peripherals/servo/servos.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+    import { ServoPWMData, ServoStateData } from '$lib/platform_shared/message'
     import { socket } from '$lib/stores'
-    import { MessageTopic } from '$lib/types/models'
-    import { throttler as Throttler } from '$lib/utilities'
+    import { Throttler } from '$lib/utilities'
 
     let { servoId = $bindable(0), pwm = $bindable(306) } = $props()
 
@@ -12,16 +12,16 @@
     const throttler = new Throttler()
 
     const activateServo = () => {
-        socket.sendEvent(MessageTopic.servoState, { active: 1 })
+        socket.emit(ServoStateData, ServoStateData.create({ active: true }))
     }
 
     const deactivateServo = () => {
-        socket.sendEvent(MessageTopic.servoState, { active: 0 })
+        socket.emit(ServoStateData, ServoStateData.create({ active: false }))
     }
 
     const updatePWM = () => {
         throttler.throttle(() => {
-            socket.sendEvent(MessageTopic.servoPWM, { servo_id: servoId, pwm })
+            socket.emit(ServoPWMData, ServoPWMData.create({ servoId: servoId, servoPwm: pwm }))
         }, 10)
     }
 
@@ -30,37 +30,56 @@
     }
 </script>
 
-<div class="flex flex-col">
-    <h2 class="text-lg">General servo configuration</h2>
-    <span>Servo</span>
-    <span>{pwm}</span>
-</div>
-<input
-    type="range"
-    min="80"
-    max="600"
-    bind:value={pwm}
-    oninput={updatePWM}
-    class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-/>
-
-<div class="flex flex-col">
-    <h2 class="text-lg">General servo configuration</h2>
-    <span>
-        <label for="mode">All servoes</label>
-        <input type="checkbox" class="toggle" bind:checked={allServos} onchange={toggleMode} />
-    </span>
-    <span>
-        <label for="active">Active</label>
+<div class="flex flex-col gap-6 p-4 bg-base-200 rounded-xl">
+    <div class="flex flex-col gap-2">
+        <h2 class="text-lg font-semibold">PWM Control</h2>
+        <div class="flex items-center justify-between">
+            <span class="text-sm opacity-70">PWM Value</span>
+            <span class="text-2xl font-mono font-bold text-primary">{pwm}</span>
+        </div>
         <input
-            type="checkbox"
-            class="toggle"
-            bind:checked={active}
-            onchange={active ? activateServo : deactivateServo}
+            type="range"
+            min="80"
+            max="600"
+            bind:value={pwm}
+            oninput={updatePWM}
+            class="range range-primary"
         />
-    </span>
-    <span class="flex items-center gap-2">
-        <label for="servoId">Servo active {servoId}</label>
-        <input type="range" min="0" max="11" step="1" bind:value={servoId} />
-    </span>
+    </div>
+
+    <div class="divider my-0"></div>
+
+    <div class="flex flex-col gap-3">
+        <h2 class="text-lg font-semibold">Servo Selection</h2>
+        <label class="flex items-center justify-between cursor-pointer">
+            <span>All servos</span>
+            <input
+                type="checkbox"
+                class="toggle toggle-primary"
+                bind:checked={allServos}
+                onchange={toggleMode}
+            />
+        </label>
+        <label class="flex items-center justify-between cursor-pointer">
+            <span>Active</span>
+            <input
+                type="checkbox"
+                class="toggle toggle-success"
+                bind:checked={active}
+                onchange={active ? activateServo : deactivateServo}
+            />
+        </label>
+        <label class="flex items-center justify-between">
+            <span>Servo {servoId}</span>
+            <input
+                type="range"
+                min="0"
+                max="11"
+                step="1"
+                bind:value={servoId}
+                class="range range-sm w-32"
+                disabled={allServos}
+            />
+        </label>
+    </div>
 </div>

app/src/routes/system/filesystem/FileSystem.svelte

@@ -1,182 +1,426 @@
 <script lang="ts">
-    import Spinner from '$lib/components/Spinner.svelte'
-    import Folder from './Folder.svelte'
-    import { api } from '$lib/api'
-    import type { Directory } from '$lib/types/models'
-    import { FolderIcon, Add, FileIcon } from '$lib/components/icons'
-    import { modals } from 'svelte-modals'
-    import NewFolderDialog from './NewFolderDialog.svelte'
-    import NewFileDialog from './NewFileDialog.svelte'
+	import Spinner from '$lib/components/Spinner.svelte'
+	import { fileSystemClient } from '$lib/filesystem/chunkedTransfer'
+	import type { TransferProgress } from '$lib/types/models'
+	import { FolderIcon, Add, FileIcon, UploadIcon, DownloadIcon, TrashIcon } from '$lib/components/icons'
+	import { modals } from 'svelte-modals'
+	import NewFolderDialog from './NewFolderDialog.svelte'
+	import NewFileDialog from './NewFileDialog.svelte'
+	import { api } from '$lib/api'
+	import type { Response } from '$lib/platform_shared/api'
 
-    let filename = $state('')
-    let content = $state('')
-    let isEditing = $state(false)
+	let currentPath = $state('/')
+	let files = $state<Array<{ name: string; size: number }>>([])
+	let directories = $state<Array<{ name: string }>>([])
+	let loading = $state(false)
+	let error = $state('')
 
-    const getFiles = async () => {
-        const result = await api.get<Directory>('/api/files')
-        if (result.isOk()) {
-            return result.inner
-        }
-        return { root: {} }
-    }
+	let selectedFile = $state('')
+	let fileContent = $state('')
+	let isEditing = $state(false)
+	let fileLoading = $state(false)
 
-    const getContent = async (name: string) => {
-        if (!name) return ''
-        const result = await api.get(`/api/config/${name}`)
-        if (result.isOk()) {
-            content = JSON.stringify(result.inner, null, 4)
-            return content
-        }
-        return ''
-    }
+	let uploadProgress = $state<TransferProgress | null>(null)
+	let downloadProgress = $state<TransferProgress | null>(null)
+	let uploadInputRef: HTMLInputElement
 
-    const saveContent = async () => {
-        if (!filename) return
-        const result = await api.post('/api/files/edit', {
-            file: '/config/' + filename,
-            content
-        })
-        if (result.isOk()) {
-            isEditing = false
-        }
-    }
+	async function loadDirectory(path: string = currentPath) {
+		loading = true
+		error = ''
+		try {
+			const result = await fileSystemClient.listDirectory(path)
+			if (result.success) {
+				files = result.files
+				directories = result.directories
+				currentPath = path
+			} else {
+				error = result.error || 'Failed to load directory'
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Unknown error'
+		} finally {
+			loading = false
+		}
+	}
 
-    const deleteFile = async (name: string) => {
-        if (!confirm(`Are you sure you want to delete ${name}?`)) return
-        const result = await api.post('/api/files/delete', { file: '/config/' + name })
-        if (result.isOk()) {
-            filename = ''
-            content = ''
-        }
-    }
+	async function navigateTo(dirName: string) {
+		const newPath = currentPath === '/' ? `/${dirName}` : `${currentPath}/${dirName}`
+		await loadDirectory(newPath)
+		selectedFile = ''
+		fileContent = ''
+	}
 
-    const createFolder = async (folderName: string) => {
-        if (!folderName) return
-        const result = await api.post('/api/files/mkdir', {
-            path: '/config/' + folderName
-        })
-        if (result.isOk()) {
-            // Refresh the file list
-            await getFiles()
-        }
-    }
+	async function navigateUp() {
+		if (currentPath === '/') return
+		const parts = currentPath.split('/').filter(Boolean)
+		parts.pop()
+		const newPath = parts.length === 0 ? '/' : '/' + parts.join('/')
+		await loadDirectory(newPath)
+		selectedFile = ''
+		fileContent = ''
+	}
 
-    const updateSelected = async (name: string) => {
-        filename = name
-        isEditing = false
-        await getContent(name)
-    }
+	async function loadFileContent(filename: string) {
+		fileLoading = true
+		error = ''
+		try {
+			const filePath = currentPath === '/' ? `/${filename}` : `${currentPath}/${filename}`
+			const result = await fileSystemClient.downloadFile(filePath)
 
-    const openNewFolderDialog = () => {
-        modals.open(NewFolderDialog, {
-            onConfirm: createFolder
-        })
-    }
+			if (result.success && result.data) {
+				// Convert bytes to string (assuming UTF-8 text file)
+				const decoder = new TextDecoder('utf-8')
+				fileContent = decoder.decode(result.data)
+				selectedFile = filename
+				isEditing = false
+			} else {
+				error = result.error || 'Failed to load file'
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load file'
+		} finally {
+			fileLoading = false
+		}
+	}
 
-    const createFile = async (fileName: string) => {
-        if (!fileName) return
-        const result = await api.post('/api/files/edit', {
-            file: '/config/' + fileName,
-            content: '{}' // Default empty JSON object
-        })
-        if (result.isOk()) {
-            // Refresh the file list and select the new file
-            await getFiles()
-            await updateSelected(fileName)
-        }
-    }
+	async function saveFileContent() {
+		if (!selectedFile) return
 
-    const openNewFileDialog = () => {
-        modals.open(NewFileDialog, {
-            onConfirm: createFile
-        })
-    }
+		error = ''
+		try {
+			const filePath = currentPath === '/' ? `/${selectedFile}` : `${currentPath}/${selectedFile}`
+			const data = new TextEncoder().encode(fileContent)
+
+			const result = await fileSystemClient.uploadFile(filePath, data)
+
+			if (result.success) {
+				isEditing = false
+				await loadDirectory() // Refresh to update file sizes
+			} else {
+				error = result.error || 'Failed to save file'
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to save file'
+		}
+	}
+
+	async function handleFileUpload(event: Event) {
+		const input = event.target as HTMLInputElement
+		const file = input.files?.[0]
+		if (!file) return
+
+		uploadProgress = null
+		error = ''
+
+		const destinationPath = currentPath === '/'
+			? `/${file.name}`
+			: `${currentPath}/${file.name}`
+
+		try {
+			const result = await fileSystemClient.uploadFileFromBrowser(
+				destinationPath,
+				file,
+				(progress) => {
+					uploadProgress = progress
+				}
+			)
+
+			if (result.success) {
+				await loadDirectory()
+			} else {
+				error = result.error || 'Upload failed'
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Upload error'
+		} finally {
+			uploadProgress = null
+			input.value = ''
+		}
+	}
+
+	async function handleDownload(filename: string) {
+		downloadProgress = null
+		error = ''
+
+		const filePath = currentPath === '/'
+			? `/${filename}`
+			: `${currentPath}/${filename}`
+
+		try {
+			const result = await fileSystemClient.downloadFileAndSave(filePath, filename, (progress) => {
+				downloadProgress = progress
+			})
+
+			if (!result.success) {
+				error = result.error || 'Download failed'
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Download error'
+		} finally {
+			downloadProgress = null
+		}
+	}
+
+	async function handleDelete(name: string, isDirectory: boolean) {
+		if (!confirm(`Delete ${isDirectory ? 'directory' : 'file'} "${name}"?`)) return
+
+		error = ''
+		const path = currentPath === '/' ? `/${name}` : `${currentPath}/${name}`
+
+		try {
+			const result = await fileSystemClient.deleteFile(path)
+			if (result.success) {
+				if (selectedFile === name) {
+					selectedFile = ''
+					fileContent = ''
+				}
+				await loadDirectory()
+			} else {
+				error = result.error || 'Delete failed'
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Delete error'
+		}
+	}
+
+	async function createFolder(folderName: string) {
+		if (!folderName) return
+
+		error = ''
+		const path = currentPath === '/' ? `/${folderName}` : `${currentPath}/${folderName}`
+
+		try {
+			const result = await api.post_proto<Response>('/api/files/mkdir', {
+				fileMkdirRequest: { path }
+			})
+
+			if (result.isOk() && result.inner.statusCode === 200) {
+				await loadDirectory()
+			} else if (result.isErr()) {
+				error = 'Failed to create directory'
+			} else {
+				error = result.inner.errorMessage || 'Failed to create directory'
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error creating directory'
+		}
+	}
+
+	async function createFile(fileName: string) {
+		if (!fileName) return
+
+		error = ''
+		const path = currentPath === '/' ? `/${fileName}` : `${currentPath}/${fileName}`
+
+		try {
+			const result = await fileSystemClient.uploadFile(path, new Uint8Array(0))
+
+			if (result.success) {
+				await loadDirectory()
+				await loadFileContent(fileName)
+			} else {
+				error = result.error || 'Failed to create file'
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error creating file'
+		}
+	}
+
+	function openNewFolderDialog() {
+		modals.open(NewFolderDialog, {
+			onConfirm: createFolder
+		})
+	}
+
+	function openNewFileDialog() {
+		modals.open(NewFileDialog, {
+			onConfirm: createFile
+		})
+	}
+
+	function formatBytes(bytes: number): string {
+		if (bytes === 0) return '0 B'
+		const k = 1024
+		const sizes = ['B', 'KB', 'MB', 'GB']
+		const i = Math.floor(Math.log(bytes) / Math.log(k))
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+	}
+
+	// Load initial directory
+	$effect(() => {
+		loadDirectory('/')
+	})
 </script>
 
-<!-- <SettingsCard collapsible={false}> -->
-<!-- {#snippet icon()} -->
 <FolderIcon class="flex-shrink-0 mr-2 h-6 w-6 self-end" />
-<!-- {/snippet}
-  {#snippet title()} -->
-<div class="flex justify-between items-center w-full gap-2">
-    <span>File System</span>
-    <div class="flex gap-2">
-        <button class="btn btn-sm btn-primary flex items-center gap-2" onclick={openNewFileDialog}>
-            <FileIcon class="w-4 h-4" />
-            New File
-        </button>
-        <button
-            class="btn btn-sm btn-primary flex items-center gap-2"
-            onclick={openNewFolderDialog}
-        >
-            <Add class="w-4 h-4" />
-            New Folder
-        </button>
-    </div>
+
+<div class="flex justify-between items-center w-full gap-2 mb-4">
+	<span class="text-xl font-bold">File System</span>
+	<div class="flex gap-2">
+		<button class="btn btn-sm btn-primary flex items-center gap-2" onclick={() => uploadInputRef.click()}>
+			<UploadIcon class="w-4 h-4" />
+			Upload File
+		</button>
+		<button class="btn btn-sm btn-primary flex items-center gap-2" onclick={openNewFileDialog}>
+			<FileIcon class="w-4 h-4" />
+			New File
+		</button>
+		<button class="btn btn-sm btn-primary flex items-center gap-2" onclick={openNewFolderDialog}>
+			<Add class="w-4 h-4" />
+			New Folder
+		</button>
+	</div>
 </div>
-<!-- {/snippet} -->
+
+<input
+	type="file"
+	bind:this={uploadInputRef}
+	onchange={handleFileUpload}
+	style="display: none;"
+/>
+
+{#if error}
+	<div class="alert alert-error mb-4">
+		<span>{error}</span>
+	</div>
+{/if}
+
+{#if uploadProgress}
+	<div class="mb-4">
+		<div class="flex justify-between text-sm mb-1">
+			<span>Uploading...</span>
+			<span>{uploadProgress.percentage.toFixed(1)}% ({formatBytes(uploadProgress.bytesTransferred)} / {formatBytes(uploadProgress.totalBytes)})</span>
+		</div>
+		<progress class="progress progress-primary w-full" value={uploadProgress.percentage} max="100"></progress>
+	</div>
+{/if}
+
+{#if downloadProgress}
+	<div class="mb-4">
+		<div class="flex justify-between text-sm mb-1">
+			<span>Downloading...</span>
+			<span>{downloadProgress.percentage.toFixed(1)}% ({formatBytes(downloadProgress.bytesTransferred)} / {formatBytes(downloadProgress.totalBytes)})</span>
+		</div>
+		<progress class="progress progress-primary w-full" value={downloadProgress.percentage} max="100"></progress>
+	</div>
+{/if}
 
 <div class="flex flex-col md:flex-row gap-4 w-full">
-    <!-- File Tree -->
-    <div
-        class="w-full md:w-[300px] md:min-w-[300px] md:max-w-[300px] border-b md:border-b-0 md:border-r pb-4 md:pb-0 md:pr-4"
-    >
-        {#await getFiles()}
-            <Spinner />
-        {:then files}
-            <Folder
-                name="/"
-                files={files.root}
-                expanded
-                selected={updateSelected}
-                onDelete={deleteFile}
-            />
-        {/await}
-    </div>
+	<!-- File Tree -->
+	<div class="w-full md:w-[300px] md:min-w-[300px] md:max-w-[300px] border-b md:border-b-0 md:border-r pb-4 md:pb-0 md:pr-4">
+		<!-- Current Path -->
+		<div class="mb-4 p-2 bg-base-200 rounded font-mono text-sm flex items-center justify-between">
+			<span class="truncate">{currentPath}</span>
+			{#if currentPath !== '/'}
+				<button class="btn btn-xs btn-ghost" onclick={navigateUp}>
+					↑ Up
+				</button>
+			{/if}
+		</div>
 
-    <!-- File Content -->
-    <div class="flex-1 min-w-0">
-        {#if filename}
-            <div
-                class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-2"
-            >
-                <h3 class="text-lg font-semibold truncate">{filename}</h3>
-                <div class="flex gap-2">
-                    {#if isEditing}
-                        <button class="btn btn-sm btn-primary" onclick={saveContent}>Save</button>
-                        <button
-                            class="btn btn-sm btn-secondary"
-                            onclick={() => (isEditing = false)}
-                        >
-                            Cancel
-                        </button>
-                    {:else}
-                        <button class="btn btn-sm btn-primary" onclick={() => (isEditing = true)}>
-                            Edit
-                        </button>
-                        <button class="btn btn-sm btn-danger" onclick={() => deleteFile(filename)}>
-                            Delete
-                        </button>
-                    {/if}
-                </div>
-            </div>
+		{#if loading}
+			<Spinner />
+		{:else}
+			<!-- Directories -->
+			{#each directories as dir (dir.name)}
+				<div class="flex items-center py-1 px-2 hover:bg-base-200 rounded group">
+					<button class="flex items-center gap-2 flex-1" onclick={() => navigateTo(dir.name)}>
+						<FolderIcon class="w-5 h-5 text-yellow-500" />
+						<span class="text-sm">{dir.name}</span>
+					</button>
+					<button
+						class="opacity-0 group-hover:opacity-100 btn btn-xs btn-ghost btn-square"
+						onclick={() => handleDelete(dir.name, true)}
+					>
+						<TrashIcon class="w-4 h-4 text-error" />
+					</button>
+				</div>
+			{/each}
 
-            {#await getContent(filename)}
-                <Spinner />
-            {:then}
-                {#if isEditing}
-                    <textarea
-                        class="w-full h-[300px] sm:h-[500px] font-mono p-2 bg-gray-800 text-white"
-                        bind:value={content}
-                    ></textarea>
-                {:else}
-                    <pre
-                        class="bg-gray-800 p-4 rounded overflow-auto max-h-[300px] sm:max-h-[500px]">{content}</pre>
-                {/if}
-            {/await}
-        {:else}
-            <div class="text-center text-gray-500">Select a file to view its contents</div>
-        {/if}
-    </div>
+			<!-- Files -->
+			{#each files as file (file.name)}
+				<div class="flex items-center py-1 px-2 hover:bg-base-200 rounded group">
+					<button
+						class="flex items-center gap-2 flex-1 min-w-0"
+						onclick={() => loadFileContent(file.name)}
+						class:font-bold={selectedFile === file.name}
+					>
+						<FileIcon class="w-4 h-4 flex-shrink-0" />
+						<span class="text-sm truncate">{file.name}</span>
+						<span class="text-xs opacity-60 ml-auto flex-shrink-0">{formatBytes(file.size)}</span>
+					</button>
+					<div class="flex gap-1 opacity-0 group-hover:opacity-100 flex-shrink-0">
+						<button
+							class="btn btn-xs btn-ghost btn-square"
+							onclick={() => handleDownload(file.name)}
+							title="Download"
+						>
+							<DownloadIcon class="w-4 h-4 text-info" />
+						</button>
+						<button
+							class="btn btn-xs btn-ghost btn-square"
+							onclick={() => handleDelete(file.name, false)}
+							title="Delete"
+						>
+							<TrashIcon class="w-4 h-4 text-error" />
+						</button>
+					</div>
+				</div>
+			{/each}
+
+			{#if files.length === 0 && directories.length === 0}
+				<div class="text-center text-base-content/50 py-8">
+					Directory is empty
+				</div>
+			{/if}
+		{/if}
+	</div>
+
+	<!-- File Content -->
+	<div class="flex-1 min-w-0">
+		{#if selectedFile}
+			<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-2">
+				<h3 class="text-lg font-semibold truncate">{selectedFile}</h3>
+				<div class="flex gap-2">
+					{#if isEditing}
+						<button class="btn btn-sm btn-primary" onclick={saveFileContent}>
+							Save
+						</button>
+						<button class="btn btn-sm btn-ghost" onclick={() => {
+							isEditing = false
+							loadFileContent(selectedFile)
+						}}>
+							Cancel
+						</button>
+					{:else}
+						<button class="btn btn-sm btn-primary" onclick={() => (isEditing = true)}>
+							Edit
+						</button>
+						<button class="btn btn-sm btn-ghost" onclick={() => handleDownload(selectedFile)}>
+							<DownloadIcon class="w-4 h-4 mr-1" />
+							Download
+						</button>
+						<button class="btn btn-sm btn-error" onclick={() => handleDelete(selectedFile, false)}>
+							Delete
+						</button>
+					{/if}
+				</div>
+			</div>
+
+			{#if fileLoading}
+				<Spinner />
+			{:else if isEditing}
+				<textarea
+					class="textarea textarea-bordered w-full h-[300px] sm:h-[500px] font-mono text-sm"
+					bind:value={fileContent}
+				></textarea>
+			{:else}
+				<pre class="bg-base-200 p-4 rounded overflow-auto max-h-[300px] sm:max-h-[500px] text-sm">{fileContent}</pre>
+			{/if}
+		{:else}
+			<div class="text-center text-base-content/50 py-16">
+				Select a file to view its contents
+			</div>
+		{/if}
+	</div>
 </div>
-<!-- </SettingsCard> -->

app/src/routes/system/filesystem/Folder.svelte

@@ -30,7 +30,7 @@
 
     {#if expanded}
         <ul class="ml-4 border-l border-gray-600 mt-1">
-            {#each Object.entries(files) as [itemName, content]}
+            {#each Object.entries(files) as [itemName, content] (itemName)}
                 <li class="py-1">
                     {#if typeof content === 'object'}
                         <Folder name={itemName} files={content} {selected} {onDelete} />

app/src/routes/system/metrics/SystemMetrics.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte'
+    import { onMount, onDestroy } from 'svelte'
     import SettingsCard from '$lib/components/SettingsCard.svelte'
     import { slide } from 'svelte/transition'
     import { cubicOut } from 'svelte/easing'
@@ -21,17 +21,18 @@
     let temperatureChart: Chart
 
     onMount(() => {
+        analytics.listen()
         heapChart = new Chart(heapChartElement, {
             type: 'line',
             data: {
-                labels: $analytics.uptime,
+                labels: $analytics.map(datapoint => datapoint.uptime),
                 datasets: [
                     {
                         label: 'Used Heap',
                         borderColor: daisyColor('--color-primary'),
                         backgroundColor: daisyColor('--color-primary', 50),
                         borderWidth: 2,
-                        data: $analytics.used_heap,
+                        data: $analytics.map(datapoint => datapoint.totalHeap - datapoint.freeHeap),
                         fill: true,
                         yAxisID: 'y'
                     }
@@ -77,7 +78,7 @@
                         },
                         position: 'left',
                         min: 0,
-                        max: Math.round($analytics.total_heap[0]),
+                        max: Math.round($analytics[0]?.totalHeap ?? 0),
                         grid: { color: daisyColor('--color-base-content', 10) },
                         ticks: {
                             color: daisyColor('--color-base-content')
@@ -90,14 +91,14 @@
         filesystemChart = new Chart(filesystemChartElement, {
             type: 'line',
             data: {
-                labels: $analytics.uptime,
+                labels: $analytics.map(datapoint => datapoint.uptime),
                 datasets: [
                     {
                         label: 'File System Used',
                         borderColor: daisyColor('--color-primary'),
                         backgroundColor: daisyColor('--color-primary', 50),
                         borderWidth: 2,
-                        data: $analytics.fs_used,
+                        data: $analytics.map(datapoint => datapoint.fsUsed),
                         fill: true,
                         yAxisID: 'y'
                     }
@@ -143,7 +144,7 @@
                         },
                         position: 'left',
                         min: 0,
-                        max: Math.round($analytics.fs_total[0]),
+                        max: Math.round($analytics[0]?.fsTotal ?? 0),
                         grid: { color: daisyColor('--color-base-content', 10) },
                         ticks: {
                             color: daisyColor('--color-base-content')
@@ -156,14 +157,14 @@
         temperatureChart = new Chart(temperatureChartElement, {
             type: 'line',
             data: {
-                labels: $analytics.uptime,
+                labels: $analytics.map(datapoint => datapoint.uptime),
                 datasets: [
                     {
                         label: 'Core Temperature',
                         borderColor: daisyColor('--color-primary'),
                         backgroundColor: daisyColor('--color-primary', 50),
                         borderWidth: 2,
-                        data: $analytics.core_temp,
+                        data: $analytics.map(datapoint => datapoint.coreTemp),
                         yAxisID: 'y'
                     }
                 ]
@@ -221,19 +222,23 @@
         setInterval(updateData, 500)
     })
 
+    onDestroy(() => analytics.stop())
+
     function updateData() {
-        heapChart.data.labels = $analytics.uptime
-        heapChart.data.datasets[0].data = $analytics.used_heap
-        heapChart.options.scales!.y!.max = Math.ceil($analytics.total_heap[0])
+        heapChart.data.labels = $analytics.map(datapoint => datapoint.uptime)
+        heapChart.data.datasets[0].data = $analytics.map(
+            datapoint => datapoint.totalHeap - datapoint.freeHeap
+        )
+        heapChart.options.scales!.y!.max = Math.ceil($analytics[0]?.totalHeap ?? 0)
         heapChart.update('none')
 
-        filesystemChart.data.labels = $analytics.uptime
-        filesystemChart.data.datasets[0].data = $analytics.fs_used
-        heapChart.options.scales!.y!.max = Math.ceil($analytics.fs_total[0])
+        filesystemChart.data.labels = $analytics.map(datapoint => datapoint.uptime)
+        filesystemChart.data.datasets[0].data = $analytics.map(datapoint => datapoint.fsUsed)
+        filesystemChart.options.scales!.y!.max = Math.ceil($analytics[0]?.fsTotal ?? 0)
         filesystemChart.update('none')
 
-        temperatureChart.data.labels = $analytics.uptime
-        temperatureChart.data.datasets[0].data = $analytics.core_temp
+        temperatureChart.data.labels = $analytics.map(datapoint => datapoint.uptime)
+        temperatureChart.data.datasets[0].data = $analytics.map(datapoint => datapoint.coreTemp)
         temperatureChart.update('none')
     }
 </script>

app/src/routes/system/status/SystemStatus.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte'
-    import type { ComponentType } from 'svelte'
+    import type { Component } from 'svelte'
     import { modals } from 'svelte-modals'
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
     import SettingsCard from '$lib/components/SettingsCard.svelte'
     import Spinner from '$lib/components/Spinner.svelte'
     import { slide } from 'svelte/transition'
     import { cubicOut } from 'svelte/easing'
-    import { type SystemInformation, type Analytics, MessageTopic } from '$lib/types/models'
     import { socket } from '$lib/stores/socket'
     import { api } from '$lib/api'
     import { convertSeconds } from '$lib/utilities'
@@ -32,29 +31,37 @@
     } from '$lib/components/icons'
     import StatusItem from '$lib/components/StatusItem.svelte'
     import ActionButton from './ActionButton.svelte'
+    import { AnalyticsData, type SystemInformation } from '$lib/platform_shared/message'
+    import Error from '../../+error.svelte'
+    import { notifications } from '$lib/components/toasts/notifications'
 
     const features = useFeatureFlags()
 
     let systemInformation: SystemInformation | null = $state(null)
 
     async function getSystemStatus() {
-        const result = await api.get<SystemInformation>('/api/system/status')
-        if (result.isErr()) {
-            console.error('Error:', result.inner)
-            return
-        }
-        systemInformation = result.inner
-        return systemInformation
+        socket
+            .request({ systemInformationRequest: {} })
+            .then(response => {
+                if (response.systemInformationResponse) {
+                    systemInformation = response.systemInformationResponse
+                    return systemInformation;
+                } else { throw new TypeError("System Information not found in reponse") }
+            })
+        return
     }
 
     const postFactoryReset = async () => await api.post('/api/system/reset')
 
     const postSleep = async () => await api.post('api/sleep')
 
-    onMount(() => socket.on(MessageTopic.analytics, handleSystemData))
+    let unsub: (() => void) | undefined = undefined
+    onMount(() => (unsub = socket.on(AnalyticsData, handleSystemData)))
+    onDestroy(() => {
+        if (unsub) unsub()
+    })
 
-    onDestroy(() => socket.off(MessageTopic.analytics, handleSystemData))
-    const handleSystemData = (data: Analytics) => {
+    const handleSystemData = (data: AnalyticsData) => {
         if (systemInformation) {
             systemInformation = {
                 ...systemInformation,
@@ -111,7 +118,7 @@
     }
 
     interface ActionButtonDef {
-        icon: ComponentType
+        icon: Component
         label: string
         onClick: () => void
         type?: string
@@ -159,58 +166,63 @@
                     <StatusItem
                         icon={CPU}
                         title="Chip"
-                        description={`${systemInformation.cpu_type} Rev ${systemInformation.cpu_rev}`}
+                        description={`${systemInformation.staticSystemInformation?.cpuType} Rev ${systemInformation.staticSystemInformation?.cpuRev}`}
                     />
 
                     <StatusItem
                         icon={SDK}
                         title="SDK Version"
-                        description={`ESP-IDF ${systemInformation.sdk_version} / Arduino ${systemInformation.arduino_version}`}
+                        description={`ESP-IDF ${systemInformation.staticSystemInformation?.sdkVersion} / Arduino ${systemInformation.staticSystemInformation?.arduinoVersion}`}
                     />
 
                     <StatusItem
                         icon={CPP}
                         title="Firmware Version"
-                        description={systemInformation.firmware_version}
+                        description={systemInformation.staticSystemInformation?.firmwareVersion}
                     />
 
                     <StatusItem
                         icon={Speed}
                         title="CPU Frequency"
-                        description={`${systemInformation.cpu_freq_mhz} MHz ${
-                            systemInformation.cpu_cores == 2 ? 'Dual Core' : 'Single Core'
+                        description={`${systemInformation.staticSystemInformation?.cpuFreqMhz} MHz ${
+                            systemInformation.staticSystemInformation?.cpuCores == 2 ?
+                                'Dual Core'
+                            :   'Single Core'
                         }`}
                     />
 
                     <StatusItem
                         icon={Heap}
                         title="Heap (Free / Max Alloc)"
-                        description={`${systemInformation.free_heap} / ${systemInformation.max_alloc_heap} bytes`}
+                        description={`${systemInformation.analyticsData?.freeHeap} / ${systemInformation.analyticsData?.maxAllocHeap} bytes`}
                     />
 
                     <StatusItem
                         icon={Pyramid}
                         title="PSRAM (Size / Free)"
-                        description={`${systemInformation.psram_size} / ${systemInformation.psram_size} bytes`}
+                        description={`${systemInformation.analyticsData!.psramSize - systemInformation.analyticsData!.freePsram} / ${systemInformation.analyticsData?.psramSize} bytes`}
                     />
 
                     <StatusItem
                         icon={Sketch}
                         title="Sketch (Used / Free)"
                         description={`${(
-                            (systemInformation.sketch_size / systemInformation.free_sketch_space) *
+                            (systemInformation.staticSystemInformation!.sketchSize /
+                                systemInformation.staticSystemInformation!.freeSketchSpace) *
                             100
                         ).toFixed(1)} % of
-                ${systemInformation.free_sketch_space / 1000000} MB used (${
-                    (systemInformation.free_sketch_space - systemInformation.sketch_size) / 1000000
+                ${systemInformation.staticSystemInformation!.freeSketchSpace / 1000000} MB used (${
+                    (systemInformation.staticSystemInformation!.freeSketchSpace -
+                        systemInformation.staticSystemInformation!.sketchSize) /
+                    1000000
                 } MB free)`}
                     />
 
                     <StatusItem
                         icon={Flash}
                         title="Flash Chip (Size / Speed)"
-                        description={`${systemInformation.flash_chip_size / 1000000} MB / ${
-                            systemInformation.flash_chip_speed / 1000000
+                        description={`${systemInformation.staticSystemInformation!.flashChipSize / 1000000} MB / ${
+                            systemInformation.staticSystemInformation!.flashChipSpeed / 1000000
                         } MHz`}
                     />
 
@@ -218,10 +230,15 @@
                         icon={Folder}
                         title="File System (Used / Total)"
                         description={`${(
-                            (systemInformation.fs_used / systemInformation.fs_total) *
+                            (systemInformation.analyticsData!.fsUsed /
+                                systemInformation.analyticsData!.fsTotal) *
                             100
-                        ).toFixed(1)} % of ${systemInformation.fs_total / 1000000} MB used (${
-                            (systemInformation.fs_total - systemInformation.fs_used) / 1000000
+                        ).toFixed(
+                            1
+                        )} % of ${systemInformation.analyticsData!.fsTotal / 1000000} MB used (${
+                            (systemInformation.analyticsData!.fsTotal -
+                                systemInformation.analyticsData!.fsUsed) /
+                            1000000
                         }
                 MB free)`}
                     />
@@ -230,22 +247,22 @@
                         icon={Temperature}
                         title="Core Temperature"
                         description={`${
-                            systemInformation.core_temp == 53.33 ?
+                            systemInformation.analyticsData!.coreTemp == 53.33 ?
                                 'NaN'
-                            :   systemInformation.core_temp.toFixed(2) + ' °C'
+                            :   systemInformation.analyticsData!.coreTemp.toFixed(2) + ' °C'
                         }`}
                     />
 
                     <StatusItem
                         icon={Stopwatch}
                         title="Uptime"
-                        description={convertSeconds(systemInformation.uptime)}
+                        description={convertSeconds(systemInformation.analyticsData!.uptime)}
                     />
 
                     <StatusItem
                         icon={Power}
                         title="Reset Reason"
-                        description={systemInformation.cpu_reset_reason}
+                        description={systemInformation.staticSystemInformation?.cpuResetReason}
                     />
                 </div>
             {/if}
@@ -253,7 +270,7 @@
     </div>
 
     <div class="mt-4 flex flex-wrap justify-end gap-2">
-        {#each actionButtons as button}
+        {#each actionButtons as button (button.label)}
             {#if button.condition === undefined || button.condition()}
                 <ActionButton
                     onclick={button.onClick}

app/src/routes/system/update/GithubFirmwareManager.svelte

@@ -108,7 +108,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        {#each githubReleases as release}
+                        {#each githubReleases as release (release.tag_name)}
                             <tr
                                 class={(
                                     compareVersions(
@@ -119,8 +119,8 @@
                                     'bg-primary text-primary-content'
                                 :   'bg-base-100 h-14'}
                             >
-                                <td align="left" class="text-base font-semibold">
-                                    <a
+                                <td align="left" class="text-base font-semibold"
+                                    ><!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- external URL --><a
                                         href={release.html_url}
                                         class="link link-hover"
                                         target="_blank"

app/src/routes/wifi/ap/Accesspoint.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { preventDefault } from 'svelte/legacy'
-
     import { onMount, onDestroy } from 'svelte'
     import { slide } from 'svelte/transition'
     import { cubicOut } from 'svelte/easing'
@@ -8,33 +6,46 @@
     import SettingsCard from '$lib/components/SettingsCard.svelte'
     import { notifications } from '$lib/components/toasts/notifications'
     import Spinner from '$lib/components/Spinner.svelte'
-    import type { ApSettings, ApStatus } from '$lib/types/models'
     import { api } from '$lib/api'
+    import { ipToUint32, uint32ToIp, isValidIpString } from '$lib/utilities'
     import { AP, Devices, Home, MAC } from '$lib/components/icons'
     import StatusItem from '$lib/components/StatusItem.svelte'
+    import { APSettings, APStatus, Request, Response } from '$lib/platform_shared/api'
+    import { input } from '$lib/stores'
 
-    let apSettings: ApSettings | null = $state(null)
-    let apStatus: ApStatus | null = $state(null)
+    let apSettings: APSettings  | null = $state(null)
+    let apStatus: APStatus | null = $state(null)
 
-    let formField: Record<string, unknown> = $state()
+    let ipDisplay = $state({
+        local_ip: '',
+        gateway_ip: '',
+        subnet_mask: ''
+    })
+
+    let formField: Record<string, unknown> = $state({})
 
     async function getAPStatus() {
-        const result = await api.get<ApStatus>('/api/wifi/ap/status')
+        const result = await api.get<Response>('/api/ap/status')
         if (result.isErr()) {
             console.error('Error:', result.inner)
             return
         }
-        apStatus = result.inner
-        return apStatus
+
+        apStatus = result.inner.apStatus!
     }
 
     async function getAPSettings() {
-        const result = await api.get<ApSettings>('/api/wifi/ap/settings')
+        const result = await api.get<Response>('/api/ap/settings')
         if (result.isErr()) {
             console.error('Error:', result.inner)
             return
         }
-        apSettings = result.inner
+        apSettings = result.inner.apSettings!
+        ipDisplay = {
+            local_ip: uint32ToIp(apSettings.localIp),
+            gateway_ip: uint32ToIp(apSettings.gatewayIp),
+            subnet_mask: uint32ToIp(apSettings.subnetMask)
+        }
         return apSettings
     }
 
@@ -76,22 +87,28 @@
         subnet_mask: false
     })
 
-    async function postAPSettings(data: ApSettings) {
-        const result = await api.post<ApSettings>('/api/wifi/ap/settings', data)
+    async function postAPSettings(data: APSettings) {
+        const result = await api.post_proto<Response>('/api/ap/settings', Request.create({ apSettings: data }))
         if (result.isErr()) {
             notifications.error('User not authorized.', 3000)
             console.error('Error:', result.inner)
             return
         }
+        if (result.inner.statusCode !== 200) {
+            notifications.error(result.inner.errorMessage || 'Failed to update settings', 3000)
+            return
+        }
+        if (result.inner.apSettings) {
+            apSettings = result.inner.apSettings
+        }
         notifications.success('Access Point settings updated.', 3000)
-        apSettings = result.inner
     }
 
-    function handleSubmitAP() {
+    function handleSubmitAP(e: Event) {
+        e.preventDefault()
         if (!apSettings) return
         let valid = true
 
-        // Validate SSID
         if (apSettings.ssid.length < 3 || apSettings.ssid.length > 32) {
             valid = false
             formErrors.ssid = true
@@ -99,7 +116,6 @@
             formErrors.ssid = false
         }
 
-        // Validate Channel
         let channel = Number(apSettings.channel)
         if (1 > channel || channel > 13) {
             valid = false
@@ -108,8 +124,7 @@
             formErrors.channel = false
         }
 
-        // Validate max_clients
-        let maxClients = Number(apSettings.max_clients)
+        let maxClients = Number(apSettings.maxClients)
         if (1 > maxClients || maxClients > 8) {
             valid = false
             formErrors.max_clients = true
@@ -117,36 +132,31 @@
             formErrors.max_clients = false
         }
 
-        // RegEx for IPv4
-        const regexExp =
-            /\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/
-
-        // Validate gateway IP
-        if (!regexExp.test(apSettings.gateway_ip)) {
+        if (!isValidIpString(ipDisplay.gateway_ip)) {
             valid = false
             formErrors.gateway_ip = true
         } else {
             formErrors.gateway_ip = false
         }
 
-        // Validate Subnet Mask
-        if (!regexExp.test(apSettings.subnet_mask)) {
+        if (!isValidIpString(ipDisplay.subnet_mask)) {
             valid = false
             formErrors.subnet_mask = true
         } else {
             formErrors.subnet_mask = false
         }
 
-        // Validate local IP
-        if (!regexExp.test(apSettings.local_ip)) {
+        if (!isValidIpString(ipDisplay.local_ip)) {
             valid = false
             formErrors.local_ip = true
         } else {
             formErrors.local_ip = false
         }
 
-        // Submit JSON to REST API
         if (valid) {
+            apSettings.localIp = ipToUint32(ipDisplay.local_ip)
+            apSettings.gatewayIp = ipToUint32(ipDisplay.gateway_ip)
+            apSettings.subnetMask = ipToUint32(ipDisplay.subnet_mask)
             postAPSettings(apSettings)
         }
     }
@@ -175,14 +185,18 @@
                         description={apStatusDescription[apStatus.status]}
                     />
 
-                    <StatusItem icon={Home} title="IP Address" description={apStatus.ip_address} />
+                    <StatusItem
+                        icon={Home}
+                        title="IP Address"
+                        description={uint32ToIp(apStatus.ipAddress)}
+                    />
 
-                    <StatusItem icon={MAC} title="MAC Address" description={apStatus.mac_address} />
+                    <StatusItem icon={MAC} title="MAC Address" description={apStatus.macAddress} />
 
                     <StatusItem
                         icon={Devices}
                         title="AP Clients"
-                        description={apStatus.station_num}
+                        description={apStatus.stationNum}
                     />
                 </div>
             {/if}
@@ -205,7 +219,7 @@
                 >
                     <form
                         class="grid w-full grid-cols-1 content-center gap-x-4 p-0s sm:grid-cols-2"
-                        onsubmit={preventDefault(handleSubmitAP)}
+                        onsubmit={handleSubmitAP}
                         novalidate
                         bind:this={formField}
                     >
@@ -216,9 +230,9 @@
                             <select
                                 class="select select-bordered w-full"
                                 id="apmode"
-                                bind:value={apSettings.provision_mode}
+                                bind:value={apSettings.provisionMode}
                             >
-                                {#each provisionMode as mode}
+                                {#each provisionMode as mode (mode.id)}
                                     <option value={mode.id}>
                                         {mode.text}
                                     </option>
@@ -296,7 +310,7 @@
                                 ) ?
                                     'border-error border-2'
                                 :   ''}"
-                                bind:value={apSettings.max_clients}
+                                bind:value={apSettings.maxClients}
                                 id="clients"
                                 required
                             />
@@ -320,7 +334,7 @@
                                 minlength="7"
                                 maxlength="15"
                                 size="15"
-                                bind:value={apSettings.local_ip}
+                                bind:value={ipDisplay.local_ip}
                                 id="localIP"
                                 required
                             />
@@ -345,7 +359,7 @@
                                 minlength="7"
                                 maxlength="15"
                                 size="15"
-                                bind:value={apSettings.gateway_ip}
+                                bind:value={ipDisplay.gateway_ip}
                                 id="gateway"
                                 required
                             />
@@ -369,7 +383,7 @@
                                 minlength="7"
                                 maxlength="15"
                                 size="15"
-                                bind:value={apSettings.subnet_mask}
+                                bind:value={ipDisplay.subnet_mask}
                                 id="subnet"
                                 required
                             />
@@ -384,7 +398,7 @@
                         <label class="label my-auto cursor-pointer justify-start gap-4">
                             <input
                                 type="checkbox"
-                                bind:checked={apSettings.ssid_hidden}
+                                bind:checked={apSettings.ssidHidden}
                                 class="checkbox checkbox-primary"
                             />
                             <span class="">Hide SSID</span>

app/src/routes/wifi/mdns/MDNS.svelte

@@ -6,33 +6,46 @@
     import StatusItem from '$lib/components/StatusItem.svelte'
     import { cubicOut } from 'svelte/easing'
     import { slide } from 'svelte/transition'
-    import type { MDNSStatus, MDNSServiceItem, MDNSServiceQuery } from '$lib/types/models'
+    import {
+        type MDNSStatus,
+        type MDNSQueryResult,
+        Request,
+        type Response as ProtoResponse
+    } from '$lib/platform_shared/api'
     import { compareIp } from '$lib/utilities'
 
-    let mdnsStatus: MDNSStatus | undefined = $state()
-    let services: MDNSServiceItem[] = $state([])
+    let mdnsStatus = $state<MDNSStatus | undefined>()
+    let services = $state<MDNSQueryResult[]>([])
     let isLoading = $state(false)
 
     const getMDNSStatus = async () => {
-        const result = await api.get<MDNSStatus>('/api/mdns/status')
+        const result = await api.get<ProtoResponse>('/api/mdns/status')
         if (result.isErr()) {
             console.error('Error:', result.inner)
             return
         }
-        mdnsStatus = result.inner
+        if (result.inner.mdnsStatus) {
+            mdnsStatus = result.inner.mdnsStatus
+        }
     }
 
     const queryMDNSServices = async () => {
         isLoading = true
-        const result = await api.post<MDNSServiceQuery>('/api/mdns/query', {
-            service: 'http',
-            protocol: 'tcp'
+        const request = Request.create({
+            mdnsQueryRequest: {
+                service: 'http',
+                protocol: 'tcp'
+            }
         })
+        const result = await api.post_proto<ProtoResponse>('/api/mdns/query', request)
         if (result.isErr()) {
             console.error('Error:', result.inner)
+            isLoading = false
             return
         }
-        services = result.inner.services.sort((a, b) => compareIp(a.ip, b.ip))
+        if (result.inner.mdnsQueryResponse) {
+            services = result.inner.mdnsQueryResponse.services.sort((a, b) => compareIp(a.ip, b.ip))
+        }
         isLoading = false
     }
 
@@ -88,7 +101,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        {#each services as service}
+                        {#each services as service (service.ip)}
                             <tr>
                                 <td><Devices class="h-6 w-6" /></td>
                                 <td>{service.name}</td>

app/src/routes/wifi/sta/Scan.svelte

@@ -3,14 +3,14 @@
     import { fly } from 'svelte/transition'
     import { onMount, onDestroy } from 'svelte'
     import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'
-    import type { NetworkItem, NetworkList } from '$lib/types/models'
+    import { type WifiNetworkScan, type Response as ProtoResponse } from '$lib/platform_shared/api'
     import { api } from '$lib/api'
     import { AP, Network, Reload, Cancel } from '$lib/components/icons'
     import { modals, exitBeforeEnter, type ModalProps } from 'svelte-modals'
 
     let { isOpen, storeNetwork }: ModalProps = $props()
 
-    const encryptionType = [
+    const encryptionTypes = [
         'Open',
         'WEP',
         'WPA PSK',
@@ -22,7 +22,7 @@
         'WAPI PSK'
     ]
 
-    let listOfNetworks: NetworkItem[] = $state([])
+    let listOfNetworks = $state<WifiNetworkScan[]>([])
 
     let scanActive = $state(false)
 
@@ -38,19 +38,21 @@
     }
 
     async function pollingResults() {
-        const result = await api.get<NetworkList>('/api/wifi/networks')
-        if (result.isErr()) {
+        const result = await api.get<ProtoResponse>('/api/wifi/networks')
+        if (result.isErr() || !result.inner) {
             console.error(`Error occurred while fetching: `, result.inner)
             return false
         }
-        let response = result.inner
-        listOfNetworks = response.networks
-        scanActive = false
-        if (listOfNetworks.length) {
+        // Check if scan is complete (status 200 means we have results)
+        if (result.inner.statusCode === 200 && result.inner.wifiNetworkList) {
+            listOfNetworks = result.inner.wifiNetworkList.networks ?? []
+            scanActive = false
             clearInterval(pollingId)
             pollingId = 0
+            return listOfNetworks.length
         }
-        return listOfNetworks.length
+        // Still scanning (status 202)
+        return 0
     }
 
     onMount(() => {
@@ -87,7 +89,7 @@
                     </div>
                 {:else}
                     <ul class="menu">
-                        {#each listOfNetworks as network}
+                        {#each listOfNetworks as network (network.ssid)}
                             <li>
                                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                                 <div
@@ -106,7 +108,7 @@
                                     <div>
                                         <div class="font-bold">{network.ssid}</div>
                                         <div class="text-sm opacity-75">
-                                            Security: {encryptionType[network.encryption_type]},
+                                            Security: {encryptionTypes[network.encryptionType]},
                                             Channel: {network.channel}
                                         </div>
                                     </div>

app/src/routes/wifi/sta/Wifi.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { onMount, onDestroy } from 'svelte'
     import { modals } from 'svelte-modals'
     import { slide } from 'svelte/transition'
     import { cubicOut } from 'svelte/easing'
@@ -12,13 +11,14 @@
     import Spinner from '$lib/components/Spinner.svelte'
     import InfoDialog from '$lib/components/InfoDialog.svelte'
     import {
-        MessageTopic,
-        type KnownNetworkItem,
+        type WifiStatus,
         type WifiSettings,
-        type WifiStatus
-    } from '$lib/types/models'
-    import { socket } from '$lib/stores'
+        type WifiNetwork,
+        type Response as ProtoResponse,
+        Request
+    } from '$lib/platform_shared/api'
     import { api } from '$lib/api'
+    import { ipToUint32, uint32ToIp, isValidIpString } from '$lib/utilities'
     import {
         Cancel,
         Delete,
@@ -40,18 +40,26 @@
     } from '$lib/components/icons'
     import StatusItem from '$lib/components/StatusItem.svelte'
 
-    let networkEditable: KnownNetworkItem = $state({
+    let networkEditable: WifiNetwork = $state({
         ssid: '',
         password: '',
-        static_ip_config: false,
-        local_ip: undefined,
-        subnet_mask: undefined,
-        gateway_ip: undefined,
-        dns_ip_1: undefined,
-        dns_ip_2: undefined
+        staticIpConfig: false,
+        localIp: 0,
+        subnetMask: 0,
+        gatewayIp: 0,
+        dnsIp1: 0,
+        dnsIp2: 0
     })
 
-    let static_ip_config = $state(false)
+    let ipDisplay = $state({
+        localIp: '',
+        subnetMask: '',
+        gatewayIp: '',
+        dnsIp1: '',
+        dnsIp2: ''
+    })
+
+    let staticIpConfig = $state(false)
 
     let newNetwork: boolean = $state(true)
     let showNetworkEditor: boolean = $state(false)
@@ -59,61 +67,60 @@
     let wifiStatus: WifiStatus | null = $state(null)
     let wifiSettings: WifiSettings | null = $state(null)
 
-    let dndNetworkList: KnownNetworkItem[] = $state([])
+    let dndNetworkList: WifiNetwork[] = $state([])
 
     let showWifiDetails = $state(false)
 
-    let formField: Record<string, unknown> = $state()
+    let formField: Record<string, unknown> = $state({})
 
     let formErrors = $state({
         ssid: false,
-        local_ip: false,
-        gateway_ip: false,
-        subnet_mask: false,
-        dns_1: false,
-        dns_2: false
+        localIp: false,
+        gatewayIp: false,
+        subnetMask: false,
+        dnsIp1: false,
+        dnsIp2: false
     })
 
     let formErrorhostname = $state(false)
 
     async function getWifiStatus() {
-        const result = await api.get<WifiStatus>('/api/wifi/sta/status')
+        const result = await api.get<ProtoResponse>('/api/wifi/sta/status')
         if (result.isErr()) {
             console.error(`Error occurred while fetching: `, result.inner)
             return
         }
-        wifiStatus = result.inner
+        if (result.inner.wifiStatus) {
+            wifiStatus = result.inner.wifiStatus
+        }
         return wifiStatus
     }
 
     async function getWifiSettings() {
-        const result = await api.get<WifiSettings>('/api/wifi/sta/settings')
+        const result = await api.get<ProtoResponse>('/api/wifi/sta/settings')
         if (result.isErr()) {
             console.error(`Error occurred while fetching: `, result.inner)
             return
         }
-        wifiSettings = result.inner
-        dndNetworkList = wifiSettings.wifi_networks
+        wifiSettings = result.inner.wifiSettings!
+        dndNetworkList = wifiSettings.wifiNetworks
         return wifiSettings
     }
 
-    onDestroy(() => socket.off(MessageTopic.WiFiSettings))
-
-    onMount(() => {
-        socket.on<WifiSettings>(MessageTopic.WiFiSettings, data => {
-            wifiSettings = data
-            dndNetworkList = wifiSettings.wifi_networks
-        })
-    })
-
     async function postWiFiSettings(data: WifiSettings) {
-        const result = await api.post<WifiSettings>('/api/wifi/sta/settings', data)
+        const result = await api.post_proto<ProtoResponse>('/api/wifi/sta/settings', Request.create({ wifiSettings: data }))
         if (result.isErr()) {
             console.error(`Error occurred while fetching: `, result.inner)
             notifications.error('User not authorized.', 3000)
             return
         }
-        wifiSettings = result.inner
+        if (result.inner.statusCode !== 200) {
+            notifications.error(result.inner.errorMessage || 'Failed to update settings', 3000)
+            return
+        }
+        if (result.inner.wifiSettings) {
+            wifiSettings = result.inner.wifiSettings
+        }
         notifications.success('Wi-Fi settings updated.', 3000)
     }
 
@@ -124,7 +131,7 @@
         } else {
             formErrorhostname = false
             // Update global wifiSettings object
-            wifiSettings.wifi_networks = dndNetworkList
+            wifiSettings.wifiNetworks = dndNetworkList
             // Post to REST API
             postWiFiSettings(wifiSettings)
             console.log(wifiSettings)
@@ -135,7 +142,6 @@
         event.preventDefault()
         let valid = true
 
-        // Validate SSID
         if (networkEditable.ssid.length < 3 || networkEditable.ssid.length > 32) {
             valid = false
             formErrors.ssid = true
@@ -143,60 +149,57 @@
             formErrors.ssid = false
         }
 
-        networkEditable.static_ip_config = static_ip_config
+        networkEditable.staticIpConfig = staticIpConfig
 
-        if (networkEditable.static_ip_config) {
-            // RegEx for IPv4
-            const regexExp =
-                /\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/
-
-            // Validate gateway IP
-            if (!regexExp.test(networkEditable.gateway_ip!)) {
+        if (networkEditable.staticIpConfig) {
+            if (!isValidIpString(ipDisplay.gatewayIp)) {
                 valid = false
-                formErrors.gateway_ip = true
+                formErrors.gatewayIp = true
             } else {
-                formErrors.gateway_ip = false
+                formErrors.gatewayIp = false
             }
 
-            // Validate Subnet Mask
-            if (!regexExp.test(networkEditable.subnet_mask!)) {
+            if (!isValidIpString(ipDisplay.subnetMask)) {
                 valid = false
-                formErrors.subnet_mask = true
+                formErrors.subnetMask = true
             } else {
-                formErrors.subnet_mask = false
+                formErrors.subnetMask = false
             }
 
-            // Validate local IP
-            if (!regexExp.test(networkEditable.local_ip!)) {
+            if (!isValidIpString(ipDisplay.localIp)) {
                 valid = false
-                formErrors.local_ip = true
+                formErrors.localIp = true
             } else {
-                formErrors.local_ip = false
+                formErrors.localIp = false
             }
 
-            // Validate DNS 1
-            if (!regexExp.test(networkEditable.dns_ip_1!)) {
+            if (!isValidIpString(ipDisplay.dnsIp1)) {
                 valid = false
-                formErrors.dns_1 = true
+                formErrors.dnsIp1 = true
             } else {
-                formErrors.dns_1 = false
+                formErrors.dnsIp1 = false
             }
 
-            // Validate DNS 2
-            if (!regexExp.test(networkEditable.dns_ip_2!)) {
+            if (!isValidIpString(ipDisplay.dnsIp2)) {
                 valid = false
-                formErrors.dns_2 = true
+                formErrors.dnsIp2 = true
             } else {
-                formErrors.dns_2 = false
+                formErrors.dnsIp2 = false
             }
+
+            networkEditable.localIp = ipToUint32(ipDisplay.localIp)
+            networkEditable.subnetMask = ipToUint32(ipDisplay.subnetMask)
+            networkEditable.gatewayIp = ipToUint32(ipDisplay.gatewayIp)
+            networkEditable.dnsIp1 = ipToUint32(ipDisplay.dnsIp1)
+            networkEditable.dnsIp2 = ipToUint32(ipDisplay.dnsIp2)
         } else {
-            formErrors.local_ip = false
-            formErrors.subnet_mask = false
-            formErrors.gateway_ip = false
-            formErrors.dns_1 = false
-            formErrors.dns_2 = false
+            formErrors.localIp = false
+            formErrors.subnetMask = false
+            formErrors.gatewayIp = false
+            formErrors.dnsIp1 = false
+            formErrors.dnsIp2 = false
         }
-        // Submit JSON to REST API
+
         if (valid) {
             if (newNetwork) {
                 dndNetworkList.push(networkEditable)
@@ -204,8 +207,12 @@
                 dndNetworkList.splice(dndNetworkList.indexOf(networkEditable), 1, networkEditable)
             }
             addNetwork()
-            dndNetworkList = [...dndNetworkList] //Trigger reactivity
+            dndNetworkList = [...dndNetworkList]
             showNetworkEditor = false
+            if (wifiSettings) {
+                wifiSettings.wifiNetworks = dndNetworkList
+                postWiFiSettings(wifiSettings)
+            }
         }
     }
 
@@ -225,12 +232,19 @@
         networkEditable = {
             ssid: '',
             password: '',
-            static_ip_config: false,
-            local_ip: undefined,
-            subnet_mask: undefined,
-            gateway_ip: undefined,
-            dns_ip_1: undefined,
-            dns_ip_2: undefined
+            staticIpConfig: false,
+            localIp: 0,
+            subnetMask: 0,
+            gatewayIp: 0,
+            dnsIp1: 0,
+            dnsIp2: 0
+        }
+        ipDisplay = {
+            localIp: '',
+            subnetMask: '',
+            gatewayIp: '',
+            dnsIp1: '',
+            dnsIp2: ''
         }
     }
 
@@ -238,6 +252,13 @@
         newNetwork = false
         showNetworkEditor = true
         networkEditable = dndNetworkList[index]
+        ipDisplay = {
+            localIp: networkEditable.localIp ? uint32ToIp(networkEditable.localIp) : '',
+            subnetMask: networkEditable.subnetMask ? uint32ToIp(networkEditable.subnetMask) : '',
+            gatewayIp: networkEditable.gatewayIp ? uint32ToIp(networkEditable.gatewayIp) : '',
+            dnsIp1: networkEditable.dnsIp1 ? uint32ToIp(networkEditable.dnsIp1) : '',
+            dnsIp2: networkEditable.dnsIp2 ? uint32ToIp(networkEditable.dnsIp2) : ''
+        }
     }
 
     function confirmDelete(index: number) {
@@ -316,7 +337,7 @@
                         <StatusItem
                             icon={Home}
                             title="IP Address"
-                            description={wifiStatus.local_ip}
+                            description={uint32ToIp(wifiStatus.localIp)}
                         />
 
                         <StatusItem icon={WiFi} title="RSSI" description={`${wifiStatus.rssi} dBm`}>
@@ -347,7 +368,7 @@
                         <StatusItem
                             icon={MAC}
                             title="MAC Address"
-                            description={wifiStatus.mac_address}
+                            description={wifiStatus.macAddress}
                         />
 
                         <StatusItem
@@ -359,16 +380,20 @@
                         <StatusItem
                             icon={Gateway}
                             title="Gateway IP"
-                            description={wifiStatus.gateway_ip}
+                            description={uint32ToIp(wifiStatus.gatewayIp)}
                         />
 
                         <StatusItem
                             icon={Subnet}
                             title="Subnet Mask"
-                            description={wifiStatus.subnet_mask}
+                            description={uint32ToIp(wifiStatus.subnetMask)}
                         />
 
-                        <StatusItem icon={DNS} title="DNS" description={wifiStatus.dns_ip_1} />
+                        <StatusItem
+                            icon={DNS}
+                            title="DNS"
+                            description={uint32ToIp(wifiStatus.dnsIp1)}
+                        />
                     </div>
                 {/if}
             {/if}
@@ -485,7 +510,7 @@
                             >
                                 <input
                                     type="checkbox"
-                                    bind:checked={wifiSettings.priority_RSSI}
+                                    bind:checked={wifiSettings.priorityRssi}
                                     class="checkbox checkbox-primary sm:-mb-5"
                                 />
                                 <span class="sm:-mb-5">Connect to strongest WiFi</span>
@@ -534,13 +559,13 @@
                                 >
                                     <input
                                         type="checkbox"
-                                        bind:checked={static_ip_config}
+                                        bind:checked={staticIpConfig}
                                         class="checkbox checkbox-primary sm:-mb-5"
                                     />
                                     <span class="sm:-mb-5">Static IP Config?</span>
                                 </label>
                             </div>
-                            {#if static_ip_config}
+                            {#if staticIpConfig}
                                 <div
                                     class="grid w-full grid-cols-1 content-center gap-x-4 px-4 sm:grid-cols-2"
                                     transition:slide|local={{ duration: 300, easing: cubicOut }}
@@ -552,21 +577,21 @@
                                         <input
                                             type="text"
                                             class="input input-bordered w-full {(
-                                                formErrors.local_ip
+                                                formErrors.localIp
                                             ) ?
                                                 'border-error border-2'
                                             :   ''}"
                                             minlength="7"
                                             maxlength="15"
                                             size="15"
-                                            bind:value={networkEditable.local_ip}
+                                            bind:value={ipDisplay.localIp}
                                             id="localIP"
                                             required
                                         />
                                         <label class="label" for="localIP">
                                             <span
                                                 class="label-text-alt text-error {(
-                                                    formErrors.local_ip
+                                                    formErrors.localIp
                                                 ) ?
                                                     ''
                                                 :   'hidden'}">Must be a valid IPv4 address</span
@@ -581,20 +606,20 @@
                                         <input
                                             type="text"
                                             class="input input-bordered w-full {(
-                                                formErrors.gateway_ip
+                                                formErrors.gatewayIp
                                             ) ?
                                                 'border-error border-2'
                                             :   ''}"
                                             minlength="7"
                                             maxlength="15"
                                             size="15"
-                                            bind:value={networkEditable.gateway_ip}
+                                            bind:value={ipDisplay.gatewayIp}
                                             required
                                         />
                                         <label class="label" for="gateway">
                                             <span
                                                 class="label-text-alt text-error {(
-                                                    formErrors.gateway_ip
+                                                    formErrors.gatewayIp
                                                 ) ?
                                                     ''
                                                 :   'hidden'}">Must be a valid IPv4 address</span
@@ -608,20 +633,20 @@
                                         <input
                                             type="text"
                                             class="input input-bordered w-full {(
-                                                formErrors.subnet_mask
+                                                formErrors.subnetMask
                                             ) ?
                                                 'border-error border-2'
                                             :   ''}"
                                             minlength="7"
                                             maxlength="15"
                                             size="15"
-                                            bind:value={networkEditable.subnet_mask}
+                                            bind:value={ipDisplay.subnetMask}
                                             required
                                         />
                                         <label class="label" for="subnet">
                                             <span
                                                 class="label-text-alt text-error {(
-                                                    formErrors.subnet_mask
+                                                    formErrors.subnetMask
                                                 ) ?
                                                     ''
                                                 :   'hidden'}"
@@ -636,18 +661,18 @@
                                         </label>
                                         <input
                                             type="text"
-                                            class="input input-bordered w-full {formErrors.dns_1 ?
+                                            class="input input-bordered w-full {formErrors.dnsIp1 ?
                                                 'border-error border-2'
                                             :   ''}"
                                             minlength="7"
                                             maxlength="15"
                                             size="15"
-                                            bind:value={networkEditable.dns_ip_1}
+                                            bind:value={ipDisplay.dnsIp1}
                                             required
                                         />
                                         <label class="label" for="gateway">
                                             <span
-                                                class="label-text-alt text-error {formErrors.dns_1 ?
+                                                class="label-text-alt text-error {formErrors.dnsIp1 ?
                                                     ''
                                                 :   'hidden'}"
                                             >
@@ -661,18 +686,18 @@
                                         </label>
                                         <input
                                             type="text"
-                                            class="input input-bordered w-full {formErrors.dns_2 ?
+                                            class="input input-bordered w-full {formErrors.dnsIp2 ?
                                                 'border-error border-2'
                                             :   ''}"
                                             minlength="7"
                                             maxlength="15"
                                             size="15"
-                                            bind:value={networkEditable.dns_ip_2}
+                                            bind:value={ipDisplay.dnsIp2}
                                             required
                                         />
                                         <label class="label" for="subnet">
                                             <span
-                                                class="label-text-alt text-error {formErrors.dns_2 ?
+                                                class="label-text-alt text-error {formErrors.dnsIp2 ?
                                                     ''
                                                 :   'hidden'}"
                                             >

app/svelte.config.js

@@ -17,6 +17,9 @@ const config = {
         }),
         paths: {
             base: basePath
+        },
+        output: {
+            bundleStrategy: 'single'
         }
     }
 }

app/tests/integration/test.ts

@@ -1,11 +1,11 @@
 import { expect, test } from '@playwright/test'
 
 test('has title', async ({ page }) => {
-  await page.goto('/')
-  await expect(page).toHaveTitle(/Spot micro controller/)
+    await page.goto('/')
+    await expect(page).toHaveTitle(/Spot micro controller/)
 })
 
 test('index page has expected h1', async ({ page }) => {
-  await page.goto('/')
-  await expect(page.getByRole('heading', { name: 'Spot micro controller' }).first()).toBeVisible()
+    await page.goto('/')
+    await expect(page.getByRole('heading', { name: 'Spot micro controller' }).first()).toBeVisible()
 })

app/tests/unit/byteformat.spec.ts

@@ -1,28 +1,28 @@
-import { describe, it, expect } from 'vitest';
-import { humanFileSize } from '../../src/lib/utilities/string-utilities';
+import { describe, it, expect } from 'vitest'
+import { humanFileSize } from '../../src/lib/utilities/string-utilities'
 
 describe('humanFileSize', () => {
-	it('returns "0B" for 0 bytes', () => {
-		expect(humanFileSize(0)).toBe('0B');
-	});
+    it('returns "0B" for 0 bytes', () => {
+        expect(humanFileSize(0)).toBe('0B')
+    })
 
-	it('returns the size in bytes correctly', () => {
-		expect(humanFileSize(500)).toBe('500B');
-	});
+    it('returns the size in bytes correctly', () => {
+        expect(humanFileSize(500)).toBe('500B')
+    })
 
-	it('returns the size in kB correctly', () => {
-		expect(humanFileSize(1024)).toBe('1kB');
-	});
+    it('returns the size in kB correctly', () => {
+        expect(humanFileSize(1024)).toBe('1kB')
+    })
 
-	it('returns the size in MB correctly', () => {
-		expect(humanFileSize(1048576)).toBe('1MB'); // 1024 * 1024
-	});
+    it('returns the size in MB correctly', () => {
+        expect(humanFileSize(1048576)).toBe('1MB') // 1024 * 1024
+    })
 
-	it('returns the size in GB correctly', () => {
-		expect(humanFileSize(1073741824)).toBe('1GB'); // 1024 * 1024 * 1024
-	});
+    it('returns the size in GB correctly', () => {
+        expect(humanFileSize(1073741824)).toBe('1GB') // 1024 * 1024 * 1024
+    })
 
-	it('rounds to 2 decimal places correctly', () => {
-		expect(humanFileSize(1536)).toBe('1.5kB'); // 1024 + 512
-	});
-});
+    it('rounds to 2 decimal places correctly', () => {
+        expect(humanFileSize(1536)).toBe('1.5kB') // 1024 + 512
+    })
+})

app/tests/unit/number-convert.spec.ts

@@ -1,44 +1,44 @@
-import { describe, it, expect } from 'vitest';
-import { toUint8, toInt8 } from '../../src/lib/utilities/math-utilities';
+import { describe, it, expect } from 'vitest'
+import { toUint8, toInt8 } from '../../src/lib/utilities/math-utilities'
 
 describe('toUint8', () => {
-	it('min interval value should get 0', () => {
-		expect(toUint8(-1, -1, 1)).toBe(0);
-	});
-	it('middle interval value should get 128', () => {
-		expect(toUint8(0, -1, 1)).toBe(128);
-	});
+    it('min interval value should get 0', () => {
+        expect(toUint8(-1, -1, 1)).toBe(0)
+    })
+    it('middle interval value should get 128', () => {
+        expect(toUint8(0, -1, 1)).toBe(128)
+    })
 
-	it('max interval value should get 255', () => {
-		expect(toUint8(1, -1, 1)).toBe(255);
-	});
+    it('max interval value should get 255', () => {
+        expect(toUint8(1, -1, 1)).toBe(255)
+    })
 
-	it('min value should be clamped', () => {
-		expect(toUint8(-2, -1, 1)).toBe(0);
-	});
+    it('min value should be clamped', () => {
+        expect(toUint8(-2, -1, 1)).toBe(0)
+    })
 
-	it('max value should be clamped', () => {
-		expect(toUint8(2, -1, 1)).toBe(255);
-	});
-});
+    it('max value should be clamped', () => {
+        expect(toUint8(2, -1, 1)).toBe(255)
+    })
+})
 
 describe('toInt8', () => {
-	it('min interval value should get -128', () => {
-		expect(toInt8(-1, -1, 1)).toBe(-128);
-	});
-	it('middle interval value should get 0', () => {
-		expect(toInt8(0, -1, 1)).toBe(0);
-	});
+    it('min interval value should get -128', () => {
+        expect(toInt8(-1, -1, 1)).toBe(-128)
+    })
+    it('middle interval value should get 0', () => {
+        expect(toInt8(0, -1, 1)).toBe(0)
+    })
 
-	it('max interval value should get 127', () => {
-		expect(toInt8(1, -1, 1)).toBe(127);
-	});
+    it('max interval value should get 127', () => {
+        expect(toInt8(1, -1, 1)).toBe(127)
+    })
 
-	it('min value should be clamped', () => {
-		expect(toInt8(-2, -1, 1)).toBe(-128);
-	});
+    it('min value should be clamped', () => {
+        expect(toInt8(-2, -1, 1)).toBe(-128)
+    })
 
-	it('max value should be clamped', () => {
-		expect(toInt8(2, -1, 1)).toBe(127);
-	});
-});
+    it('max value should be clamped', () => {
+        expect(toInt8(2, -1, 1)).toBe(127)
+    })
+})

app/tests/unit/result.spec.ts

@@ -1,39 +1,39 @@
-import { describe, it, expect } from 'vitest';
-import { Result } from '../../src/lib/utilities/result';
+import { describe, it, expect } from 'vitest'
+import { Result } from '../../src/lib/utilities/result'
 
 describe('Result', () => {
-	it('should create a success result correctly', () => {
-		const successValue = 'Success value';
-		const result = Result.ok(successValue);
+    it('should create a success result correctly', () => {
+        const successValue = 'Success value'
+        const result = Result.ok(successValue)
 
-		expect(result.isOk()).toBe(true);
-		expect(result.isErr()).toBe(false);
-		expect(result.inner).toBe(successValue);
-	});
+        expect(result.isOk()).toBe(true)
+        expect(result.isErr()).toBe(false)
+        expect(result.inner).toBe(successValue)
+    })
 
-	it('should create an error result correctly', () => {
-		const errorMessage = 'Error message';
-		const result = Result.err(errorMessage);
+    it('should create an error result correctly', () => {
+        const errorMessage = 'Error message'
+        const result = Result.err(errorMessage)
 
-		expect(result.isOk()).toBe(false);
-		expect(result.isErr()).toBe(true);
-		expect(result.inner).toBe(errorMessage);
-	});
+        expect(result.isOk()).toBe(false)
+        expect(result.isErr()).toBe(true)
+        expect(result.inner).toBe(errorMessage)
+    })
 
-	it('should type guard success and error results correctly', () => {
-		const successResult = Result.ok(123);
-		const errorResult = Result.err('Error');
+    it('should type guard success and error results correctly', () => {
+        const successResult = Result.ok(123)
+        const errorResult = Result.err('Error')
 
-		if (successResult.isOk()) {
-			expect(typeof successResult.inner).toBe('number');
-		} else {
-			throw new Error('Expected successResult to be ok');
-		}
+        if (successResult.isOk()) {
+            expect(typeof successResult.inner).toBe('number')
+        } else {
+            throw new Error('Expected successResult to be ok')
+        }
 
-		if (errorResult.isErr()) {
-			expect(typeof errorResult.inner).toBe('string');
-		} else {
-			throw new Error('Expected errorResult to be fail');
-		}
-	});
-});
+        if (errorResult.isErr()) {
+            expect(typeof errorResult.inner).toBe('string')
+        } else {
+            throw new Error('Expected errorResult to be fail')
+        }
+    })
+})

app/tests/unit/socket.spec.ts

@@ -0,0 +1,265 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { WebSocketServer } from 'ws'
+import { decodeMessage, MESSAGE_KEY_TO_TAG, socket } from '../../src/lib/stores/socket'
+import { IMUData, PingMsg, PongMsg, Message } from '../../src/lib/platform_shared/message'
+
+// Helper function to create encoded WebSocket messages
+function createEncodedMessage(messageType: 'imu' | 'rssi' | 'mode', data: unknown): Uint8Array {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const message: any = {}
+    message[messageType] = data
+    const wsMessage = Message.create(message)
+    return Message.encode(wsMessage).finish()
+}
+
+describe.sequential('WebSocket Integration Tests', () => {
+    let wss: WebSocketServer
+    let TEST_PORT = 8765
+
+    beforeEach(async () => {
+        // Use a different port for each test to avoid conflicts
+        TEST_PORT++
+
+        // Create real WebSocket server
+        wss = new WebSocketServer({ port: TEST_PORT })
+
+        // Wait for server to start
+        await new Promise<void>(resolve => {
+            wss.on('listening', () => resolve())
+        })
+    })
+
+    afterEach(async () => {
+        // Close all connections and server
+        wss.clients.forEach(client => client.close())
+        await new Promise<void>(resolve => {
+            wss.close(() => resolve())
+        })
+        // Wait a bit for cleanup
+        await new Promise(resolve => setTimeout(resolve, 100))
+    })
+
+    it('should connect to WebSocket server', async () => {
+        socket.init(`ws://localhost:${TEST_PORT}`)
+
+        // Wait for connection
+        await new Promise(resolve => setTimeout(resolve, 100))
+
+        let isConnected = false
+        socket.subscribe(value => {
+            isConnected = value
+        })()
+
+        expect(isConnected).toBe(true)
+    })
+
+    it('should receive and decode IMU data from server', async () => {
+        let receivedIMUData: IMUData = null
+
+        // Subscribe to IMU messages before connecting
+        const unsubscribe = socket.on(IMUData, data => {
+            receivedIMUData = data
+        })
+
+        // Connect socket
+        socket.init(`ws://localhost:${TEST_PORT}`)
+
+        // Wait for client to connect
+        await new Promise<void>(resolve => {
+            wss.on('connection', ws => {
+                // Server sends IMU data to client
+                const imuPayload = IMUData.create({
+                    x: 3.25,
+                    y: 2.5,
+                    z: 1.75,
+                    heading: 10,
+                    altitude: 11,
+                    bmpTemp: 22,
+                    pressure: 23
+                })
+
+                const encodedMessage = createEncodedMessage('imu', imuPayload)
+                ws.send(encodedMessage)
+
+                setTimeout(resolve, 50)
+            })
+        })
+
+        expect(receivedIMUData).toBeDefined()
+
+        expect(receivedIMUData.x).toBe(3.25)
+        expect(receivedIMUData.y).toBe(2.5)
+        expect(receivedIMUData.z).toBe(1.75)
+        expect(receivedIMUData.heading).toBe(10)
+        expect(receivedIMUData.altitude).toBe(11)
+        expect(receivedIMUData.bmpTemp).toBe(22)
+        expect(receivedIMUData.pressure).toBe(23)
+
+        unsubscribe()
+    })
+
+    it('should send IMU data from client to server using emit', async () => {
+        let serverReceivedData: any = null
+
+        // Connect socket
+        socket.init(`ws://localhost:${TEST_PORT}`)
+
+        // Wait for client to connect and send data
+        await new Promise<void>((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                reject(new Error('Test timeout - server did not receive message'))
+            }, 3000)
+
+            wss.on('connection', ws => {
+                // console.log('Server: Client connected')
+
+                // Server listens for messages from client
+                ws.on('message', (data: Buffer) => {
+                    // console.log('Server: Received message, length:', data.length)
+
+                    // Skip empty messages (from ping, etc.)
+                    if (data.length === 0) {
+                        console.log('Server: Skipping empty message (Probably a ping')
+                        return
+                    }
+
+                    try {
+                        // Decode the protobuf message
+                        const decoded = Message.decode(new Uint8Array(data))
+                        // console.log('Server: Decoded message:', JSON.stringify(decoded, null, 2))
+
+                        // Only resolve if we got actual IMU data
+                        if (decoded.imu) {
+                            serverReceivedData = decoded
+                            clearTimeout(timeout)
+                            resolve()
+                        } else {
+                            // console.log('Server: Message decoded but no IMU data, waiting...')
+                        }
+                    } catch (error) {
+                        console.error('Server: Failed to decode:', error)
+                        clearTimeout(timeout)
+                        reject(error)
+                    }
+                })
+            })
+
+            // Wait for WebSocket to be fully connected
+            setTimeout(() => {
+                console.log('Client: Sending IMU data...')
+                // Client sends IMU data to server
+                const imuData = IMUData.create({
+                    x: 3.25,
+                    y: 2.5,
+                    z: 1.75,
+                    heading: 10,
+                    altitude: 11,
+                    bmpTemp: 22,
+                    pressure: 23
+                })
+                socket.emit(IMUData, imuData)
+                console.log('Client: emit called')
+            }, 150)
+        })
+
+        // Verify server received the data
+        expect(serverReceivedData).toBeDefined()
+        expect(serverReceivedData?.imu).toBeDefined()
+
+        expect(serverReceivedData?.imu.x).toBe(3.25)
+        expect(serverReceivedData?.imu.y).toBe(2.5)
+        expect(serverReceivedData?.imu.z).toBe(1.75)
+        expect(serverReceivedData?.imu.heading).toBe(10)
+        expect(serverReceivedData?.imu.altitude).toBe(11)
+        expect(serverReceivedData?.imu.bmpTemp).toBe(22)
+        expect(serverReceivedData?.imu.pressure).toBe(23)
+    })
+
+    it('should fail to serialize data on emit', async () => {
+        // Connect socket
+        socket.init(`ws://localhost:${TEST_PORT}`)
+
+        await new Promise<void>((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                reject(new Error('Test timeout'))
+            }, 1000)
+
+            // Wait for WebSocket to be fully connected
+            setTimeout(() => {
+                console.log('Client: Sending invalid message type...')
+                // Send any invalid message type
+                const wsm = Message.create()
+                try {
+                    socket.emit(Message as any, wsm)
+                    clearTimeout(timeout)
+                    reject(new Error('Expected emit to throw, but it did not'))
+                } catch (e) {
+                    console.log('Client: emit correctly threw error:', e)
+                    clearTimeout(timeout)
+                    resolve()
+                }
+            }, 150)
+        })
+    })
+})
+
+describe('Message Protobuf Encoding/Decoding', () => {
+    it('should encode and decode IMU data correctly', () => {
+        const imuData = IMUData.create({
+            x: 3.25,
+            y: 2.5,
+            z: 1.75,
+            heading: 10,
+            altitude: 11,
+            bmpTemp: 22,
+            pressure: 23
+        })
+
+        const encoded = IMUData.encode(imuData).finish()
+        const decoded = IMUData.decode(encoded)
+
+        expect(decoded.x).toBe(3.25)
+        expect(decoded.y).toBe(2.5)
+        expect(decoded.z).toBe(1.75)
+        expect(decoded.heading).toBe(10)
+        expect(decoded.altitude).toBe(11)
+        expect(decoded.bmpTemp).toBe(22)
+        expect(decoded.pressure).toBe(23)
+    })
+
+    it('should encode and decode two empty types correctly', () => {
+        const encoded_ping = Message.encode(Message.create({ pingmsg: PingMsg.create() })).finish()
+        const decoded_ping = decodeMessage(encoded_ping.buffer)
+        expect(decoded_ping.tag).toBe(MESSAGE_KEY_TO_TAG.get('pingmsg'))
+
+        const encoded_pong = Message.encode(Message.create({ pongmsg: PongMsg.create() })).finish()
+        const decoded_pong = decodeMessage(encoded_pong.buffer)
+        expect(decoded_pong.tag).toBe(MESSAGE_KEY_TO_TAG.get('pongmsg'))
+    })
+
+    it('should encode and decode complete Message', () => {
+        const original = Message.create({
+            imu: IMUData.create({
+                x: 3.25,
+                y: 2.5,
+                z: 1.75,
+                heading: 10,
+                altitude: 11,
+                bmpTemp: 22,
+                pressure: 23
+            })
+        })
+
+        const encoded = Message.encode(original).finish()
+        const decoded = Message.decode(encoded)
+
+        expect(decoded.imu).toBeDefined()
+        expect(decoded.imu?.x).toBe(3.25)
+        expect(decoded.imu?.y).toBe(2.5)
+        expect(decoded.imu?.z).toBe(1.75)
+        expect(decoded.imu?.heading).toBe(10)
+        expect(decoded.imu?.altitude).toBe(11)
+        expect(decoded.imu?.bmpTemp).toBe(22)
+        expect(decoded.imu?.pressure).toBe(23)
+    })
+})

app/tests/unit/throttler.spec.ts

@@ -1,46 +1,46 @@
-import { describe, it, expect, beforeEach, afterEach, vitest } from 'vitest';
-import { throttler } from '../../src/lib/utilities/buffer-utilities';
+import { describe, it, expect, beforeEach, afterEach, vitest } from 'vitest'
+import { Throttler } from '../../src/lib/utilities/buffer-utilities'
 
 describe('throttler', () => {
-	let throttleInstance: throttler;
-	let callback: Function;
+    let throttleInstance: Throttler
+    let callback: () => void
 
-	beforeEach(() => {
-		vitest.useFakeTimers();
-		throttleInstance = new throttler();
-		callback = vitest.fn();
-	});
+    beforeEach(() => {
+        vitest.useFakeTimers()
+        throttleInstance = new Throttler()
+        callback = vitest.fn()
+    })
 
-	afterEach(() => {
-		vitest.useRealTimers();
-	});
+    afterEach(() => {
+        vitest.useRealTimers()
+    })
 
-	it('should call the callback function after the specified time', () => {
-		throttleInstance.throttle(callback, 1000);
-		expect(callback).not.toHaveBeenCalled();
+    it('should call the callback function after the specified time', () => {
+        throttleInstance.throttle(callback, 1000)
+        expect(callback).not.toHaveBeenCalled()
 
-		vitest.advanceTimersByTime(1000);
-		expect(callback).toHaveBeenCalledTimes(1);
-	});
+        vitest.advanceTimersByTime(1000)
+        expect(callback).toHaveBeenCalledTimes(1)
+    })
 
-	it('should not call the callback function if throttle is called again within the timeout period', () => {
-		throttleInstance.throttle(callback, 1000);
-		throttleInstance.throttle(callback, 1000);
+    it('should not call the callback function if throttle is called again within the timeout period', () => {
+        throttleInstance.throttle(callback, 1000)
+        throttleInstance.throttle(callback, 1000)
 
-		vitest.advanceTimersByTime(500);
-		expect(callback).not.toHaveBeenCalled();
+        vitest.advanceTimersByTime(500)
+        expect(callback).not.toHaveBeenCalled()
 
-		vitest.advanceTimersByTime(500);
-		expect(callback).toHaveBeenCalledTimes(1);
-	});
+        vitest.advanceTimersByTime(500)
+        expect(callback).toHaveBeenCalledTimes(1)
+    })
 
-	it('should allow the callback to be called again after the timeout period', () => {
-		throttleInstance.throttle(callback, 1000);
-		vitest.advanceTimersByTime(1000);
-		expect(callback).toHaveBeenCalledTimes(1);
+    it('should allow the callback to be called again after the timeout period', () => {
+        throttleInstance.throttle(callback, 1000)
+        vitest.advanceTimersByTime(1000)
+        expect(callback).toHaveBeenCalledTimes(1)
 
-		throttleInstance.throttle(callback, 1000);
-		vitest.advanceTimersByTime(1000);
-		expect(callback).toHaveBeenCalledTimes(2);
-	});
-});
+        throttleInstance.throttle(callback, 1000)
+        vitest.advanceTimersByTime(1000)
+        expect(callback).toHaveBeenCalledTimes(2)
+    })
+})

app/vitest.config.ts

@@ -1,12 +1,17 @@
 import { defineConfig, UserConfigExport } from 'vitest/config'
-import { svelte } from '@sveltejs/vite-plugin-svelte';
-
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import path from 'path'
 
 const config: UserConfigExport = {
-	plugins: [svelte()],
-	test: {
-		globals: true,
-		environment: 'jsdom'
-	}
-};
-export default defineConfig(config)
+    plugins: [svelte()],
+    resolve: {
+        alias: {
+            $lib: path.resolve(__dirname, './src/lib')
+        }
+    },
+    test: {
+        globals: true,
+        environment: 'jsdom'
+    }
+}
+export default defineConfig(config)

boards/esp32p4_dev.json

@@ -0,0 +1,33 @@
+{
+  "build": {
+    "core": "esp32",
+    "extra_flags": [
+      "-DBOARD_HAS_PSRAM"
+    ],
+    "f_cpu": "360000000L",
+    "f_flash": "80000000L",
+    "f_psram": "200000000L",
+    "flash_mode": "qio",
+    "mcu": "esp32p4",
+    "variant": "esp32p4"
+  },
+  "connectivity": [
+    "wifi"
+  ],
+  "debug": {
+    "openocd_target": "esp32p4.cfg"
+  },
+  "frameworks": [
+    "espidf"
+  ],
+  "name": "ESP32-P4 Dev Board (32MB PSRAM + 32MB Flash, C6 coprocessor)",
+  "upload": {
+    "flash_size": "32MB",
+    "maximum_ram_size": 786432,
+    "maximum_size": 33554432,
+    "require_upload_port": true,
+    "speed": 1500000
+  },
+  "url": "https://docs.espressif.com/projects/esp-dev-kits/en/latest/esp32p4/",
+  "vendor": "Espressif"
+}

changelog.md

@@ -2,7 +2,20 @@
 
 All notable changes to this project will be documented in this file.
 
-## [Unreleased]
+## [0.2.0]
+
+### Added
+
+- Implemented cumulative robot displacement in the visualization [#161](https://github.com/runeharlyk/SpotMicroESP32-Leika/pull/161)
+- Adds gesture control [#157](https://github.com/runeharlyk/SpotMicroESP32-Leika/pull/157)
+- Stand mode imu compensation [#155](https://github.com/runeharlyk/SpotMicroESP32-Leika/pull/155)
+
+### Changed
+
+- Protobuf replacement for JSON and MsgPack communication between Svelte and ESP32 [#164](https://github.com/runeharlyk/SpotMicroESP32-Leika/pull/164)
+- Removed the used of Arduino strings [#160](https://github.com/runeharlyk/SpotMicroESP32-Leika/pull/160)
+
+## [0.1.0]
 
 ### Added
 

docs/api.md

@@ -1,44 +1,80 @@
 # API
 
-<!-- https://dev.bostondynamics.com/docs/concepts/choreography/choreography_in_tablet.html -->
-
 The back end exposes a number of API endpoints which are referenced in the table below.
 
-| Method | Endpoint             | Authentication     | POST JSON Body                                                                                                                                                                                                                     | Info                                                                                    |
-| ------ | -------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
-| GET    | /rest/features       | `NONE_REQUIRED`    | none                                                                                                                                                                                                                               | Tells the client which features of the UI should be use                                 |
-| GET    | /rest/apStatus       | `IS_AUTHENTICATED` | none                                                                                                                                                                                                                               | Current AP status and client information                                                |
-| GET    | /rest/apSettings     | `IS_ADMIN`         | none                                                                                                                                                                                                                               | Current AP settings                                                                     |
-| POST   | /rest/apSettings     | `IS_ADMIN`         | `{"provision_mode": 1,"ssid": "ESP32-SvelteKit-e89f6d20372c","password": "esp-sveltekit","channel": 1,"ssid_hidden": false,"max_clients": 4,"local_ip": "192.168.4.1","gateway_ip": "192.168.4.1","subnet_mask": "255.255.255.0"}` | Update AP settings                                                                      |
-| GET    | /rest/wifiStatus     | `IS_AUTHENTICATED` | none                                                                                                                                                                                                                               | Current status of the wifi client connection                                            |
-| GET    | /rest/scanNetworks   | `IS_ADMIN`         | none                                                                                                                                                                                                                               | Async Scan for Networks in Range                                                        |
-| GET    | /rest/listNetworks   | `IS_ADMIN`         | none                                                                                                                                                                                                                               | List networks in range after successful scanning. Otherwise triggers scanning.          |
-| GET    | /rest/wifiSettings   | `IS_ADMIN`         | none                                                                                                                                                                                                                               | Current WiFi settings                                                                   |
-| POST   | /rest/wifiSettings   | `IS_ADMIN`         | `{"hostname":"esp32-f412fa4495f8","priority_RSSI":true,"wifi_networks":[{"ssid":"YourSSID","password":"YourPassword","static_ip_config":false}]}`                                                                                  | Update WiFi settings and credentials                                                    |
-| GET    | /rest/systemStatus   | `IS_AUTHENTICATED` | none                                                                                                                                                                                                                               | Get system information about the ESP.                                                   |
-| POST   | /rest/restart        | `IS_ADMIN`         | none                                                                                                                                                                                                                               | Restart the ESP32                                                                       |
-| POST   | /rest/factoryReset   | `IS_ADMIN`         | none                                                                                                                                                                                                                               | Reset the ESP32 and all settings to their default values                                |
-| POST   | /rest/uploadFirmware | `IS_ADMIN`         | none                                                                                                                                                                                                                               | File upload of firmware.bin                                                             |
-| POST   | /rest/sleep          | `IS_AUTHENTICATED` | none                                                                                                                                                                                                                               | Puts the device in deep sleep mode                                                      |
-| POST   | /rest/downloadUpdate | `IS_ADMIN`         | `{"download_url": "https://github.com/theelims/ESP32-sveltekit/releases/download/v0.1.0/firmware_esp32s3.bin"}`                                                                                                                    | Download link for OTA. This requires a valid SSL certificate and will follow redirects. |
+## System
 
-<!-- | HTTP Method | Endpoint       | Description                | Parameters                |
-|-------------|----------------|----------------------------|---------------------------|
-| GET         | /api/sensor/mpu       | Retrieve the mpu state |                       |
-| GET         | /api/sensor/magnetometer       | Retrieve the magnetometer state |                       |
-| GET         | /api/sensor/distances       | Retrieve the distances state |                      |
-| GET         | /api/sensor/distance/{position}       | Retrieve the distance state |    `position`: The position of the distance sensor **LEFT** and **RIGHT**                    |
-| GET         | /api/sensor/stream    | Retrieve the camera stream  | |
-| GET         | /api/actuator    | Retrieve the actuator states  | |
-| GET         | /api/actuator/{id}    | Retrieve the actuator state for `id`  | `id`: The ID of the actuator |
-| POST        | /api/actuator/{id}    | Set the actuator state  | `id`: The ID of the actuator|
-| GET         | /api/kinematics/feet    | Retrieve the current feet positions as (x, y, z) coordinates|                           |
-| GET         | /api/kinematics/body    | Retrieve the current body position as a (x, y, z) coordinates|                           |
-| GET         | /api/kinematics/bodystate    | Retrieve the current body and feet positions |                           |
-| GET         | /api/system/log    | Retrieve the system log  | |
-| GET         | /api/system/info    | Retrieve the system information  | |
-| GET         | /api/system/settings    | Retrieve the system settings  | |
-| POST        | /api/system/settings    | Set the system settings  | |
-| POST        | /api/system/reset    | Reset system  | |
-| POST        | /api/system/power/off    | Power of the system  | |
-| POST        | /api/system/stop    | Stop power to actuators  | `id`: The stop level **CUT**, **SETTLE_THEN_CUT**, **NONE** | -->
+| Method | Endpoint            | Description                                  |
+| ------ | ------------------- | -------------------------------------------- |
+| GET    | /api/features       | Get enabled features for the UI              |
+| GET    | /api/system/status  | Get system information about the ESP         |
+| POST   | /api/system/reset   | Reset the ESP32 and all settings to defaults |
+| POST   | /api/system/restart | Restart the ESP32                            |
+| POST   | /api/system/sleep   | Put the device in deep sleep mode            |
+
+## WiFi
+
+| Method | Endpoint               | Description                           |
+| ------ | ---------------------- | ------------------------------------- |
+| GET    | /api/wifi/sta/settings | Get current WiFi settings             |
+| POST   | /api/wifi/sta/settings | Update WiFi settings and credentials  |
+| GET    | /api/wifi/scan         | Trigger async scan for networks       |
+| GET    | /api/wifi/networks     | List networks in range after scanning |
+| GET    | /api/wifi/sta/status   | Get WiFi client connection status     |
+
+## Access Point
+
+| Method | Endpoint         | Description           |
+| ------ | ---------------- | --------------------- |
+| GET    | /api/ap/status   | Get current AP status |
+| GET    | /api/ap/settings | Get AP settings       |
+| POST   | /api/ap/settings | Update AP settings    |
+
+## Camera (if enabled)
+
+| Method | Endpoint             | Description            |
+| ------ | -------------------- | ---------------------- |
+| GET    | /api/camera/still    | Capture a still image  |
+| GET    | /api/camera/stream   | Get camera stream      |
+| GET    | /api/camera/settings | Get camera settings    |
+| POST   | /api/camera/settings | Update camera settings |
+
+## Servo
+
+| Method | Endpoint          | Description             |
+| ------ | ----------------- | ----------------------- |
+| GET    | /api/servo/config | Get servo configuration |
+| POST   | /api/servo/config | Update servo config     |
+
+## Peripherals
+
+| Method | Endpoint         | Description                |
+| ------ | ---------------- | -------------------------- |
+| GET    | /api/peripherals | Get peripheral settings    |
+| POST   | /api/peripherals | Update peripheral settings |
+
+## mDNS (if enabled)
+
+| Method | Endpoint         | Description          |
+| ------ | ---------------- | -------------------- |
+| GET    | /api/mdns        | Get mDNS settings    |
+| POST   | /api/mdns        | Update mDNS settings |
+| GET    | /api/mdns/status | Get mDNS status      |
+| POST   | /api/mdns/query  | Query mDNS services  |
+
+## Filesystem
+
+| Method | Endpoint          | Description      |
+| ------ | ----------------- | ---------------- |
+| GET    | /api/config/\*    | Get config file  |
+| GET    | /api/files        | List files       |
+| POST   | /api/files        | Upload file      |
+| POST   | /api/files/delete | Delete file      |
+| POST   | /api/files/edit   | Edit file        |
+| POST   | /api/files/mkdir  | Create directory |
+
+## WebSocket
+
+Real-time communication is handled via WebSocket at `/api/ws` using Protocol Buffers.
+
+See [websocket.md](websocket.md) for the full WebSocket API documentation.

docs/software_description.md

@@ -4,8 +4,6 @@ The software make use of a range of different libraries to enhance the functiona
 Up to date list can be seen in platformio.ini file.
 The libraries includes:
 
-- Esp32SvelteKit
-- PsychicHttp
 - ArduinoJson
 - Adafruit SSD1306
 - Adafruit GFX Library

docs/websocket.md

@@ -0,0 +1,47 @@
+# WebSocket API
+
+The ESP32 exposes a WebSocket endpoint at `/api/ws` for real-time bidirectional communication using Protocol Buffers (protobuf).
+
+## Connection
+
+Connect to the WebSocket at:
+
+```
+ws://<device-ip>/api/ws
+```
+
+All messages are binary-encoded protobuf `Message` wrappers defined in `platform_shared/message.proto`.
+
+## Message Flow
+
+The WebSocket supports three communication patterns:
+
+1. **Client to Server**: Commands like controller input, mode changes, servo control
+2. **Server to Client**: Periodic data broadcasts like IMU, system metrics, RSSI, servo angles
+3. **Request-Response**: Use `socket.request()` for operations requiring a response
+
+## Example: Sending Controller Input
+
+```typescript
+import { Message, ControllerData } from "./proto/message";
+
+const input: ControllerData = {
+  left: { x: 0.5, y: 0.0 },
+  right: { x: 0.0, y: 0.0 },
+  height: 0.1,
+  speed: 1.0,
+  s1: 0.0,
+};
+
+const message = Message.encode({ ControllerData: input }).finish();
+socket.send(message);
+```
+
+## Example: Request-Response
+
+```typescript
+const response = await socket.request({ imuCalibrateExecute: {} });
+const result = response.imuCalibrateData;
+```
+
+See `platform_shared/message.proto` for all available message types and their definitions.

esp32/build_settings.ini

@@ -2,7 +2,4 @@
 build_flags = 
     -D BUILD_TARGET=\"$PIOENV\"
     -D APPLICATION_CORE=0
-    -D EMBED_WEBAPP=1
-
-    -D USE_MSGPACK=1 ; Use either msgpack or json
-    -D USE_JSON=0    ; Use either msgpack or json
+    -D EMBED_WEBAPP=1

esp32/factory_settings.ini

@@ -1,9 +1,3 @@
-; The indicated settings support placeholder substitution as follows:
-;
-;  #{platform} - The microcontroller platform, e.g. "esp32" or "esp8266"
-;  #{unique_id} - A unique identifier derived from the MAC address, e.g. "0b0a859d6816"
-;  #{random} - A random number encoded as a hex string, e.g. "55722f94"
-
 [factory_settings]
 build_flags =
     -D APP_NAME=\"Spot-Micro\" ; [a-zA-Z0-9-_]
@@ -16,7 +10,7 @@ build_flags =
 
     ; Access point settings
     -D FACTORY_AP_PROVISION_MODE=AP_MODE_DISCONNECTED
-    -D FACTORY_AP_SSID=\"Spot-Micro-#{unique_id}\" ; 1-64 characters, supports placeholders
+    -D FACTORY_AP_SSID=\"Spot-Micro\" ; 1-64 characters
     -D FACTORY_AP_PASSWORD=\"spot-leika\" ; 8-64 characters
     -D FACTORY_AP_CHANNEL=1
     -D FACTORY_AP_SSID_HIDDEN=false
@@ -25,16 +19,9 @@ build_flags =
     -D FACTORY_AP_GATEWAY_IP=\"192.168.4.1\"
     -D FACTORY_AP_SUBNET_MASK=\"255.255.255.0\"
 
-    ; OTA settings
-    -D FACTORY_OTA_PORT=8266
-    -D FACTORY_OTA_PASSWORD=\"spot-leika\"
-    -D FACTORY_OTA_ENABLED=true
-
     ; Servo settings
-    -D FACTORY_SERVO_NUM=12
     -D FACTORY_SERVO_OSCILLATOR_FREQUENCY=27000000
     -D FACTORY_SERVO_PWM_FREQUENCY=50
-    -D FACTORY_SERVO_CENTER_ANGLE=90
 
     ; Deep Sleep Configuration
     -D WAKEUP_PIN_NUMBER=38 ; pin number to wake up the ESP

esp32/features.ini

@@ -13,8 +13,6 @@ build_flags =
   -D USE_HMC5883=0
   -D USE_BMP180=0
   -D USE_MPU6050=0
-  -D USE_ICM20948=1
-  -D USE_ICM20948_SPIMODE=1
   -D USE_WS2812=1
   -D USE_BNO055=0
   -D USE_USS=0

esp32/include/ap_service.h

@@ -1,10 +1,13 @@
+#pragma once
+
 #include <template/stateful_service.h>
-#include <template/stateful_endpoint.h>
+#include <template/stateful_proto_endpoint.h>
 #include <template/stateful_persistence.h>
 #include <settings/ap_settings.h>
 #include <utils/timing.h>
-#include <WiFi.h>
-#include "esp_timer.h"
+#include <wifi/wifi_idf.h>
+#include <wifi/dns_server.h>
+#include <esp_timer.h>
 #include <string>
 
 class APService : public StatefulService<APSettings> {
@@ -16,25 +19,23 @@ class APService : public StatefulService<APSettings> {
     void loop();
     void recoveryMode();
 
-    esp_err_t getStatus(PsychicRequest *request);
-    void status(JsonObject &root);
+    esp_err_t getStatusProto(httpd_req_t *request);
+    void statusProto(api_APStatus &proto);
     APNetworkStatus getAPNetworkStatus();
 
-    StatefulHttpEndpoint<APSettings> endpoint;
+    StatefulProtoEndpoint<APSettings, api_APSettings> protoEndpoint;
 
   private:
-    PsychicHttpServer *_server;
-    FSPersistence<APSettings> _persistence;
-
+    FSPersistencePB<APSettings> _persistence;
     DNSServer *_dnsServer;
 
     volatile unsigned long _lastManaged;
-    volatile boolean _reconfigureAp;
-    volatile boolean _recoveryMode = false;
+    volatile bool _reconfigureAp;
+    volatile bool _recoveryMode = false;
 
     void reconfigureAP();
     void manageAP();
     void startAP();
     void stopAP();
     void handleDNS();
-};
+};

esp32/include/communication/comm_base.hpp

@@ -1,141 +1,127 @@
 #pragma once
 
-#include <ArduinoJson.h>
+#include <esp_log.h>
+#include <freertos/FreeRTOS.h>
+#include <freertos/semphr.h>
 #include <functional>
-
-enum message_type_t { CONNECT = 0, DISCONNECT = 1, EVENT = 2, PING = 3, PONG = 4, BINARY_EVENT = 5 };
-
-typedef std::function<void(JsonVariant &root, int originId)> EventCallback;
-typedef std::function<void(const std::string &originId, bool sync)> SubscribeCallback;
+#include <list>
+#include <map>
+#include <type_traits>
+#include <communication/proto_helpers.h>
 
 class CommAdapterBase {
   public:
-    CommAdapterBase() { mutex_ = xSemaphoreCreateMutex(); }
+    CommAdapterBase() {
+        mutex_ = xSemaphoreCreateMutex();
+        decoder_.onSubscribe([this](int32_t tag, int cid) { subscribe(tag, cid); });
+        decoder_.onUnsubscribe([this](int32_t tag, int cid) { unsubscribe(tag, cid); });
+        decoder_.onPing([this](int cid) { sendPong(cid); });
+    }
     ~CommAdapterBase() { vSemaphoreDelete(mutex_); }
 
     virtual void begin() {}
 
-    bool hasSubscribers(const char *event) { return !client_subscriptions[event].empty(); }
-
-    void onEvent(std::string event, EventCallback callback) { event_callbacks[event].push_back(std::move(callback)); }
-
-    void onSubscribe(std::string event, SubscribeCallback callback) {
-        subscribe_callbacks[event].push_back(std::move(callback));
+    bool hasSubscribers(int32_t tag) {
+        xSemaphoreTake(mutex_, portMAX_DELAY);
+        bool result = !client_subscriptions_[tag].empty();
+        xSemaphoreGive(mutex_);
+        return result;
     }
 
-    void emit(const char *event, JsonVariant &payload, const char *originId = "", bool onlyToSameOrigin = false) {
-        int originSubscriptionId = originId[0] ? atoi(originId) : -1;
-        xSemaphoreTake(mutex_, portMAX_DELAY);
-        auto &subscriptions = client_subscriptions[event];
-        if (subscriptions.empty()) {
-            xSemaphoreGive(mutex_);
+    ProtoDecoder& decoder() { return decoder_; }
+
+    template <typename T>
+    void on(std::function<void(const T&, int)> handler) {
+        decoder_.on<T>(handler);
+    }
+
+    template <typename T>
+    void emit(const T& data, int clientId = -1) {
+        constexpr pb_size_t tag = MessageTraits<T>::tag;
+
+        if (clientId < 0 && !hasSubscribers(tag)) return;
+
+        msg_.which_message = tag;
+        MessageTraits<T>::assign(msg_, data);
+
+        size_t out_size;
+        pb_get_encoded_size(&out_size, socket_message_Message_fields, &msg_);
+        uint8_t* buffer = pb_heap_enc_buf;
+        if (out_size > sizeof(pb_heap_enc_buf)) { // If the encoded size exceeds our buffer size, we needs to malloc a
+                                                  // buffer of a proper size
+            buffer = (uint8_t*)malloc(out_size);
+        }
+
+        pb_ostream_t stream = pb_ostream_from_buffer(buffer, out_size);
+        if (!pb_encode(&stream, socket_message_Message_fields, &msg_)) {
+            ESP_LOGE("ProtoComm", "Failed to encode message (tag %d), buffer too small?", (int)tag);
             return;
         }
 
-        JsonDocument doc;
-        JsonArray array = doc.to<JsonArray>();
-        array.add(static_cast<uint8_t>(message_type_t::EVENT));
-        array.add(event);
-        array.add(payload);
+        if (clientId >= 0) {
+            send(buffer, stream.bytes_written, clientId);
+        } else {
+            sendToSubscribers(tag, buffer, stream.bytes_written);
+        }
 
-#if USE_MSGPACK
-        std::string bin;
-        serializeMsgPack(doc, bin);
-        xSemaphoreGive(mutex_);
-        send(reinterpret_cast<const uint8_t *>(bin.data()), bin.size(), -1);
-#else
-        String out;
-        serializeJson(doc, out);
-        xSemaphoreGive(mutex_);
-        send(out.c_str(), -1);
-#endif
+        if (pb_heap_enc_buf != buffer) {
+            free(buffer);
+        }
     }
 
   protected:
-    void send(const char *data, int cid = -1) { send(reinterpret_cast<const uint8_t *>(data), strlen(data), cid); }
-    virtual void send(const uint8_t *data, size_t len, int cid = -1) = 0;
+    virtual void send(const uint8_t* data, size_t len, int cid = -1) = 0;
 
-    void subscribe(const char *event, int cid = 0) { client_subscriptions[event].push_back(cid); }
-    void unsubscribe(const char *event, int cid = 0) { client_subscriptions[event].push_back(cid); }
+    void subscribe(int32_t tag, int cid = 0) {
+        xSemaphoreTake(mutex_, portMAX_DELAY);
+        client_subscriptions_[tag].push_back(cid);
+        xSemaphoreGive(mutex_);
+        ESP_LOGI("ProtoComm", "Client %d subscribed to tag %d", cid, (int)tag);
+    }
 
-    void handleEventCallbacks(std::string event, JsonVariant &jsonObject, int originId) {
-        for (auto &callback : event_callbacks[event]) {
-            callback(jsonObject, originId);
+    void unsubscribe(int32_t tag, int cid = 0) {
+        xSemaphoreTake(mutex_, portMAX_DELAY);
+        client_subscriptions_[tag].remove(cid);
+        xSemaphoreGive(mutex_);
+        ESP_LOGI("ProtoComm", "Client %d unsubscribed from tag %d", cid, (int)tag);
+    }
+
+    void removeClient(int cid) {
+        xSemaphoreTake(mutex_, portMAX_DELAY);
+        for (auto& [tag, clients] : client_subscriptions_) {
+            clients.remove(cid);
+        }
+        xSemaphoreGive(mutex_);
+    }
+
+    void handleIncoming(const uint8_t* data, size_t len, int cid) {
+        if (!decoder_.decode(data, len, cid)) {
+            ESP_LOGE("ProtoComm", "Failed to decode incoming message from client %d", cid);
         }
     }
 
-    virtual void handleIncoming(const uint8_t *data, size_t len, int cid = 0) {
-        JsonDocument doc;
-#if USE_MSGPACK
-        DeserializationError error = deserializeMsgPack(doc, data, len);
-#else
-        DeserializationError error = deserializeJson(doc, data, len);
-#endif
-        if (error) {
-            ESP_LOGE("Comm Base", "Failed to deserialize incoming: (%s)", error.c_str());
-            return;
+    void sendPong(int cid) {
+        uint8_t pongBuffer[16];
+        msg_.which_message = socket_message_Message_pongmsg_tag;
+        msg_.message.pongmsg = socket_message_PongMsg_init_zero;
+        pb_ostream_t stream = pb_ostream_from_buffer(pongBuffer, sizeof(pongBuffer));
+        if (pb_encode(&stream, socket_message_Message_fields, &msg_)) {
+            send(pongBuffer, stream.bytes_written, cid);
         }
-
-        JsonArray obj = doc.as<JsonArray>(); // TODO: Make const
-        message_type_t type = static_cast<message_type_t>(obj[0].as<uint8_t>());
-
-        switch (type) {
-            case message_type_t::CONNECT: {
-                const char *event = obj[1].as<const char *>();
-                ESP_LOGI("Comm Base", "CONNECT topic: %s (cid=%d)", event, cid);
-                subscribe(event, cid);
-                break;
-            }
-
-            case message_type_t::DISCONNECT: {
-                const char *event = obj[1].as<const char *>();
-                ESP_LOGI("Comm Base", "DISCONNECT topic: %s (cid=%d)", event, cid);
-                unsubscribe(event, cid);
-                break;
-            }
-
-            case message_type_t::EVENT: {
-                const char *event = obj[1].as<const char *>();
-                JsonVariant payload = obj[2].as<JsonVariant>();
-                handleEventCallbacks(event, payload, cid);
-                break;
-            }
-            case message_type_t::PING: {
-                ESP_LOGI("Comm Base", "PING (cid=%d)", cid);
-#if USE_MSGPACK
-                static const uint8_t pong[] = {0x91, 0x04};
-                send(pong, sizeof(pong), cid);
-#else
-                send("[4]", cid);
-#endif
-                break;
-            }
-            case message_type_t::PONG: ESP_LOGI("Comm Base", "PONG (cid=%d)", cid); break;
-            default: ESP_LOGW("Comm Base", "Unknown message type: %d", static_cast<int>(type)); break;
-        }
-
-        if (type == PONG) {
-            ESP_LOGV("EventSocket", "Pong");
-            return;
-        } else if (type == PING) {
-            ESP_LOGV("EventSocket", "Ping");
-            ping(cid);
-            return;
-        }
-    }
-
-    void ping(int cid) {
-#if USE_MSGPACK
-        const uint8_t out[] = {0x91, 0x04};
-        send(out, sizeof(out), cid);
-#else
-        const char *out = "[4]";
-        send(out, strlen(out), cid);
-#endif
     }
 
     SemaphoreHandle_t mutex_;
-    std::map<std::string, std::list<int>> client_subscriptions;
-    std::map<std::string, std::list<EventCallback>> event_callbacks;
-    std::map<std::string, std::list<SubscribeCallback>> subscribe_callbacks;
-};
+    std::map<int32_t, std::list<int>> client_subscriptions_;
+    ProtoDecoder decoder_;
+    socket_message_Message msg_ = socket_message_Message_init_zero;
+    uint8_t pb_heap_enc_buf[PROTO_BUFFER_SIZE];
+
+  private:
+    void sendToSubscribers(int32_t tag, const uint8_t* data, size_t len) {
+        xSemaphoreTake(mutex_, portMAX_DELAY);
+        for (int cid : client_subscriptions_[tag]) {
+            send(data, len, cid);
+        }
+        xSemaphoreGive(mutex_);
+    }
+};

esp32/include/communication/proto_helpers.h

@@ -0,0 +1,108 @@
+#pragma once
+
+#include <pb_encode.h>
+#include <pb_decode.h>
+#include <platform_shared/message.pb.h>
+#include <functional>
+#include <map>
+
+#define PROTO_BUFFER_SIZE 2048
+
+template <typename T>
+struct MessageTraits;
+
+#define DEFINE_MESSAGE_TRAITS(DataType, field)                                                   \
+    template <>                                                                                  \
+    struct MessageTraits<socket_message_##DataType> {                                            \
+        static constexpr pb_size_t tag = socket_message_Message_##field##_tag;                   \
+        static void assign(socket_message_Message& msg, const socket_message_##DataType& data) { \
+            msg.message.field = data;                                                            \
+        }                                                                                        \
+        static const socket_message_##DataType& access(const socket_message_Message& msg) {      \
+            return msg.message.field;                                                            \
+        }                                                                                        \
+    };
+
+DEFINE_MESSAGE_TRAITS(IMUData, imu)
+DEFINE_MESSAGE_TRAITS(ModeData, mode)
+DEFINE_MESSAGE_TRAITS(AnalyticsData, analytics)
+DEFINE_MESSAGE_TRAITS(AnglesData, angles)
+DEFINE_MESSAGE_TRAITS(RSSIData, rssi)
+DEFINE_MESSAGE_TRAITS(KinematicData, kinematic_data)
+DEFINE_MESSAGE_TRAITS(IMUCalibrateData, imu_calibrate)
+DEFINE_MESSAGE_TRAITS(I2CScanData, i2c_scan)
+DEFINE_MESSAGE_TRAITS(PeripheralSettingsData, peripheral_settings)
+DEFINE_MESSAGE_TRAITS(ControllerData, controller_data)
+DEFINE_MESSAGE_TRAITS(WalkGaitData, walk_gait)
+DEFINE_MESSAGE_TRAITS(IMUCalibrateExecute, imu_calibrate_execute)
+DEFINE_MESSAGE_TRAITS(I2CScanDataRequest, i2c_scan_data_request)
+DEFINE_MESSAGE_TRAITS(PeripheralSettingsDataRequest, peripheral_settings_data_request)
+DEFINE_MESSAGE_TRAITS(ServoPWMData, servo_pwm)
+DEFINE_MESSAGE_TRAITS(ServoStateData, servo_state)
+DEFINE_MESSAGE_TRAITS(CorrelationRequest, correlation_request)
+DEFINE_MESSAGE_TRAITS(CorrelationResponse, correlation_response)
+
+// Streaming file transfer messages
+DEFINE_MESSAGE_TRAITS(FSDownloadMetadata, fs_download_metadata)
+DEFINE_MESSAGE_TRAITS(FSDownloadData, fs_download_data)
+DEFINE_MESSAGE_TRAITS(FSDownloadComplete, fs_download_complete)
+DEFINE_MESSAGE_TRAITS(FSUploadData, fs_upload_data)
+DEFINE_MESSAGE_TRAITS(FSUploadComplete, fs_upload_complete)
+
+#undef DEFINE_MESSAGE_TRAITS
+
+class ProtoDecoder {
+  public:
+    using SubscribeHandler = std::function<void(int32_t tag, int clientId)>;
+    using UnsubscribeHandler = std::function<void(int32_t tag, int clientId)>;
+    using PingHandler = std::function<void(int clientId)>;
+
+    void onSubscribe(SubscribeHandler handler) { subscribeHandler_ = handler; }
+    void onUnsubscribe(UnsubscribeHandler handler) { unsubscribeHandler_ = handler; }
+    void onPing(PingHandler handler) { pingHandler_ = handler; }
+
+    template <typename T>
+    void on(std::function<void(const T&, int)> handler) {
+        handlers_[MessageTraits<T>::tag] = [handler, this](int clientId) {
+            handler(MessageTraits<T>::access(msg_), clientId);
+        };
+    }
+
+    bool decode(const uint8_t* data, size_t len, int clientId) {
+        pb_istream_t stream = pb_istream_from_buffer(data, len);
+
+        if (!pb_decode(&stream, socket_message_Message_fields, &msg_)) {
+            return false;
+        }
+
+        switch (msg_.which_message) {
+            case socket_message_Message_sub_notif_tag:
+                if (subscribeHandler_) subscribeHandler_(msg_.message.sub_notif.tag, clientId);
+                return true;
+
+            case socket_message_Message_unsub_notif_tag:
+                if (unsubscribeHandler_) unsubscribeHandler_(msg_.message.unsub_notif.tag, clientId);
+                return true;
+
+            case socket_message_Message_pingmsg_tag:
+                if (pingHandler_) pingHandler_(clientId);
+                return true;
+
+            default: {
+                auto it = handlers_.find(msg_.which_message);
+                if (it != handlers_.end()) {
+                    it->second(clientId);
+                    return true;
+                }
+                return false;
+            }
+        }
+    }
+
+  private:
+    socket_message_Message msg_ = socket_message_Message_init_zero;
+    SubscribeHandler subscribeHandler_;
+    UnsubscribeHandler unsubscribeHandler_;
+    PingHandler pingHandler_;
+    std::map<pb_size_t, std::function<void(int)>> handlers_;
+};

esp32/include/communication/webserver.h

@@ -0,0 +1,145 @@
+#pragma once
+
+#ifndef CONFIG_HTTPD_WS_SUPPORT
+#define CONFIG_HTTPD_WS_SUPPORT 1
+#endif
+
+#include <esp_http_server.h>
+#include <esp_log.h>
+#include <freertos/FreeRTOS.h>
+#include <freertos/semphr.h>
+#include <functional>
+#include <vector>
+#include <string>
+#include <map>
+#include <pb_encode.h>
+#include <pb_decode.h>
+#include <platform_shared/api.pb.h>
+#include <freertos/semphr.h>
+
+using HttpGetHandler = std::function<esp_err_t(httpd_req_t*)>;
+using HttpPostHandler = std::function<esp_err_t(httpd_req_t*, api_Request*)>;
+using WsFrameHandler = std::function<esp_err_t(httpd_req_t*, httpd_ws_frame_t*)>;
+using WsOpenHandler = std::function<void(httpd_req_t*)>;
+using WsCloseHandler = std::function<void(int)>;
+
+// Macro to register a proto endpoint that extracts a specific payload type
+// Usage: STAITC_PROTO_POST_ENDPOINT(server, "/api/files/delete", file_delete_request, FileSystem::handleDelete)
+// Handler signature: esp_err_t handleDelete(httpd_req_t* req, const api_FileDeleteRequest& payload)
+#define STAITC_PROTO_POST_ENDPOINT(server_ref, uri, payload_type, handler) \
+    (server_ref).on(uri, HTTP_POST, [&](httpd_req_t *request, api_Request *protoReq) { \
+        if (protoReq->which_payload != api_Request_##payload_type##_tag) { \
+            return WebServer::sendError(request, 400, "Invalid request payload"); \
+        } \
+        return handler(request, protoReq->payload.payload_type); \
+    })
+
+struct HttpRoute {
+    std::string uri;
+    httpd_method_t method;
+    HttpGetHandler getHandler;
+    HttpPostHandler postHandler;
+    bool isWebsocket;
+};
+
+class WebServer {
+  public:
+    WebServer();
+    ~WebServer();
+
+    void config(size_t maxUriHandlers, size_t stackSize);
+    esp_err_t listen(uint16_t port);
+    void stop();
+
+    void on(const char* uri, httpd_method_t method, HttpGetHandler handler);
+    void on(const char* uri, httpd_method_t method, HttpPostHandler handler);
+
+    void onWsFrame(WsFrameHandler handler);
+    void onWsOpen(WsOpenHandler handler);
+    void onWsClose(WsCloseHandler handler);
+    void registerWebsocket(const char* uri);
+
+    esp_err_t wsSend(int sockfd, const uint8_t* data, size_t len);
+    esp_err_t wsSendAll(const uint8_t* data, size_t len);
+    void addWsClient(int sockfd);
+    void removeWsClient(int sockfd);
+    std::vector<int> getWsClients();
+
+    void addDefaultHeader(const char* key, const char* value);
+
+    httpd_handle_t getHandle() { return server_; }
+
+    static esp_err_t sendError(httpd_req_t* req, int status, const char* message);
+    static esp_err_t sendOk(httpd_req_t* req);
+    static esp_err_t send(httpd_req_t* req, int status, const uint8_t* data, size_t len);
+
+    template <typename T>
+    static esp_err_t send(httpd_req_t* req, int status, const T& msg, const pb_msgdesc_t* fields) {
+        size_t size = 0;
+        if (!pb_get_encoded_size(&size, fields, &msg)) {
+            return sendError(req, 500, "Failed to calculate proto size");
+        }
+
+        uint8_t* buffer = (uint8_t*)malloc(size);
+        if (!buffer) {
+            return sendError(req, 500, "Failed to allocate memory for proto");
+        }
+
+        pb_ostream_t stream = pb_ostream_from_buffer(buffer, size);
+        if (!pb_encode(&stream, fields, &msg)) {
+            free(buffer);
+            return sendError(req, 500, "Failed to encode proto");
+        }
+
+        esp_err_t result = send(req, status, buffer, stream.bytes_written);
+        free(buffer);
+        return result;
+    }
+
+    template <typename T>
+    static bool receiveProto(httpd_req_t* req, T& msg, const pb_msgdesc_t* fields) {
+        size_t contentLen = req->content_len;
+        if (contentLen == 0 || contentLen > 4096) {
+            return false;
+        }
+        uint8_t* buffer = (uint8_t*)malloc(contentLen);
+        if (!buffer) {
+            return false;
+        }
+        int received = 0;
+        int remaining = contentLen;
+        while (remaining > 0) {
+            int ret = httpd_req_recv(req, (char*)buffer + received, remaining);
+            if (ret <= 0) {
+                free(buffer);
+                return false;
+            }
+            received += ret;
+            remaining -= ret;
+        }
+        pb_istream_t stream = pb_istream_from_buffer(buffer, contentLen);
+        bool success = pb_decode(&stream, fields, &msg);
+        free(buffer);
+        return success;
+    }
+
+  private:
+    httpd_handle_t server_ = nullptr;
+    httpd_config_t config_;
+    std::vector<HttpRoute> routes_;
+    std::map<std::string, std::string> defaultHeaders_;
+    std::vector<int> wsClients_;
+    SemaphoreHandle_t wsMutex_;
+
+    WsFrameHandler wsFrameHandler_;
+    WsOpenHandler wsOpenHandler_;
+    WsCloseHandler wsCloseHandler_;
+
+    static esp_err_t httpHandler(httpd_req_t* req);
+    static esp_err_t wsHandler(httpd_req_t* req);
+
+    void applyDefaultHeaders(httpd_req_t* req);
+    esp_err_t registerRoute(const HttpRoute& route);
+};
+
+extern WebServer server;

esp32/include/communication/websocket.h

@@ -0,0 +1,22 @@
+#pragma once
+
+#include <cstdint>
+#include <communication/webserver.h>
+#include <communication/comm_base.hpp>
+
+class Websocket : public CommAdapterBase {
+  public:
+    Websocket(WebServer& server, const char* route = "/api/ws");
+
+    void begin() override;
+
+  private:
+    WebServer& server_;
+    const char* route_;
+
+    void onWsOpen(httpd_req_t* req);
+    void onWsClose(int sockfd);
+    esp_err_t onFrame(httpd_req_t* req, httpd_ws_frame_t* frame);
+
+    void send(const uint8_t* data, size_t len, int cid = -1) override;
+};

esp32/include/communication/websocket_adapter.h

@@ -1,36 +0,0 @@
-#ifndef Socket_h
-#define Socket_h
-
-#include <PsychicHttp.h>
-#include <template/stateful_service.h>
-#include <list>
-#include <map>
-#include <vector>
-#include <string>
-
-#include <communication/comm_base.hpp>
-
-class Websocket : public CommAdapterBase {
-  public:
-    Websocket(PsychicHttpServer &server, const char *route = "/api/ws");
-
-    void begin() override;
-
-    void onEvent(std::string event, EventCallback callback);
-
-    void emit(const char *event, JsonVariant &payload, const char *originId = "", bool onlyToSameOrigin = false);
-
-  private:
-    PsychicWebSocketHandler _socket;
-    PsychicHttpServer &_server;
-    const char *_route;
-
-    void onWSOpen(PsychicWebSocketClient *client);
-    void onWSClose(PsychicWebSocketClient *client);
-    esp_err_t onFrame(PsychicWebSocketRequest *request, httpd_ws_frame *frame);
-
-    void send(const uint8_t *data, size_t len, int cid = -1) override;
-};
-
-#endif
-

esp32/include/compat/pgmspace.h

@@ -0,0 +1,21 @@
+#pragma once
+
+#ifndef PROGMEM
+#define PROGMEM
+#endif
+
+#ifndef PGM_P
+#define PGM_P const char *
+#endif
+
+#ifndef pgm_read_byte
+#define pgm_read_byte(addr) (*(const unsigned char *)(addr))
+#endif
+
+#ifndef pgm_read_word
+#define pgm_read_word(addr) (*(const unsigned short *)(addr))
+#endif
+
+#ifndef pgm_read_dword
+#define pgm_read_dword(addr) (*(const unsigned long *)(addr))
+#endif

esp32/include/features.h

@@ -1,72 +1,48 @@
-#ifndef Features_h
-#define Features_h
+#pragma once
 
-#include <WiFi.h>
-#include <ArduinoJson.h>
-#include <PsychicHttp.h>
+#include <sdkconfig.h>
+#include <wifi/wifi_idf.h>
+#include <esp_http_server.h>
+#include "platform_shared/message.pb.h"
 
 #define FT_ENABLED(feature) feature
 
-// ESP32 camera off by default
 #ifndef USE_CAMERA
 #define USE_CAMERA 0
 #endif
 
-// ESP32 IMU off by default
 #ifndef USE_MPU6050
 #define USE_MPU6050 0
 #endif
 
-// ESP32 IMU on by default
 #ifndef USE_BNO055
 #define USE_BNO055 1
 #endif
 
-// ESP32 IMU off by default
-#ifndef USE_ICM20948
-#define USE_ICM20948 0
-#endif
-#ifndef USE_ICM20948_SPIMODE // I2C on by default
-#define USE_ICM20948_SPIMODE 0
-#endif
-
-// ESP32 magnetometer on by default
 #ifndef USE_HMC5883
 #define USE_HMC5883 0
 #endif
 
-// ESP32 barometer off by default
 #ifndef USE_BMP180
 #define USE_BMP180 0
 #endif
 
-// ESP32 SONAR off by default
 #ifndef USE_USS
 #define USE_USS 0
 #endif
 
-// PCA9685 Servo controller on by default
 #ifndef USE_PCA9685
 #define USE_PCA9685 1
 #endif
 
-// ESP32 MDNS on by default
+#ifndef USE_WS2812
+#define USE_WS2812 0
+#endif
+
 #ifndef USE_MDNS
 #define USE_MDNS 1
 #endif
 
-// ESP32 MSGPACK on by default
-#ifndef USE_MSGPACK
-#define USE_MSGPACK 1
-#endif
-
-// ESP32 JSON off by default
-#ifndef USE_JSON
-#define USE_JSON 0
-#endif
-
-static_assert(!(USE_JSON == 1 && USE_MSGPACK == 1), "Cannot set both USE_JSON and USE_MSGPACK to 1 simultaneously");
-
 #if defined(SPOTMICRO_ESP32) && defined(SPOTMICRO_ESP32_MINI) && defined(SPOTMICRO_YERTLE)
 #error "Only one kinematics variant must be defined"
 #endif
@@ -89,10 +65,6 @@ namespace feature_service {
 
 void printFeatureConfiguration();
 
-void features(JsonObject &root);
-
-esp_err_t getFeatures(PsychicRequest *request);
+void features_request(const socket_message_FeaturesDataRequest& fd_req, socket_message_FeaturesDataResponse& fd_res);
 
 } // namespace feature_service
-
-#endif

esp32/include/filesystem.h

@@ -1,32 +1,45 @@
 #pragma once
 
-#include <PsychicHttp.h>
-
-#include <LittleFS.h>
+#include <esp_http_server.h>
+#include <esp_littlefs.h>
+#include <esp_vfs.h>
+#include <dirent.h>
+#include <sys/stat.h>
 #include <string>
+#include <cstdio>
+#include <platform_shared/api.pb.h>
 
-#define ESP_FS LittleFS
+#define MOUNT_POINT "/littlefs"
 
-#define AP_SETTINGS_FILE "/config/apSettings.json"
-#define CAMERA_SETTINGS_FILE "/config/cameraSettings.json"
-#define FS_CONFIG_DIRECTORY "/config"
-#define DEVICE_CONFIG_FILE "/config/peripheral.json"
-#define WIFI_SETTINGS_FILE "/config/wifiSettings.json"
-#define SERVO_SETTINGS_FILE "/config/servoSettings.json"
-#define MDNS_SETTINGS_FILE "/config/mdnsSettings.json"
+#define FS_CONFIG_DIRECTORY MOUNT_POINT "/config"
+#define DEVICE_CONFIG_FILE MOUNT_POINT "/config/peripheral.pb"
+#define CAMERA_SETTINGS_FILE MOUNT_POINT "/config/cameraSettings.pb"
+#define AP_SETTINGS_FILE MOUNT_POINT "/config/apSettings.pb"
+#define MDNS_SETTINGS_FILE MOUNT_POINT "/config/mdnsSettings.pb"
+#define WIFI_SETTINGS_FILE MOUNT_POINT "/config/wifiSettings.pb"
+#define PERIPHERAL_SETTINGS_FILE MOUNT_POINT "/config/peripheralSettings.pb"
+#define SERVO_SETTINGS_FILE MOUNT_POINT "/config/servoSettings.pb"
 
 namespace FileSystem {
-extern PsychicUploadHandler *uploadHandler;
 
+bool init();
+
+void listFilesProto(const std::string &directory, api_FileEntry *entry);
 std::string listFiles(const std::string &directory, bool isRoot = true);
 bool deleteFile(const char *filename);
+bool editFile(const char *filename, const uint8_t *content, size_t size);
 bool editFile(const char *filename, const char *content);
-esp_err_t uploadFile(PsychicRequest *request, const std::string &filename, uint64_t index, uint8_t *data, size_t len,
-                     bool last);
+bool fileExists(const char *filename);
+std::string readFile(const char *filename);
+bool writeFile(const char *filename, const char *content);
+bool writeFile(const char *filename, const uint8_t *content, size_t size);
+bool mkdirRecursive(const char *path);
 
-esp_err_t getFiles(PsychicRequest *request);
-esp_err_t handleDelete(PsychicRequest *request, JsonVariant &json);
-esp_err_t handleEdit(PsychicRequest *request, JsonVariant &json);
+esp_err_t getFilesProto(httpd_req_t *request);
+esp_err_t getFiles(httpd_req_t *request);
+esp_err_t getConfigFile(httpd_req_t *request);
+esp_err_t handleDelete(httpd_req_t *request, const api_FileDeleteRequest &req);
+esp_err_t handleEdit(httpd_req_t *request, const api_FileEditRequest &req);
+esp_err_t mkdir(httpd_req_t *request, const api_FileMkdirRequest &req);
 
-esp_err_t mkdir(PsychicRequest *request, JsonVariant &json);
-} // namespace FileSystem
+} // namespace FileSystem

esp32/include/filesystem_ws.h

@@ -0,0 +1,81 @@
+#pragma once
+
+#include <platform_shared/message.pb.h>
+#include <filesystem.h>
+#include <map>
+#include <string>
+#include <functional>
+#include <cstdio>
+
+#define FS_MAX_CHUNK_SIZE 16384
+#define FS_TRANSFER_TIMEOUT_MS 30000
+
+namespace FileSystemWS {
+
+struct DownloadState {
+    std::string path;
+    FILE* file;
+    uint32_t fileSize;
+    uint32_t chunkSize;
+    uint32_t totalChunks;
+    uint32_t chunksSent;
+    uint32_t lastActivityTime;
+    int clientId;
+};
+
+struct UploadState {
+    std::string path;
+    FILE* file;
+    uint32_t fileSize;
+    uint32_t totalChunks;
+    uint32_t chunksReceived;
+    uint32_t bytesReceived;
+    uint32_t lastActivityTime;
+    int clientId;
+    bool hasError;
+    std::string errorMessage;
+};
+
+using SendMetadataCallback = std::function<void(const socket_message_FSDownloadMetadata&, int clientId)>;
+using SendCallback = std::function<void(const socket_message_FSDownloadData&, int clientId)>;
+using SendCompleteCallback = std::function<void(const socket_message_FSDownloadComplete&, int clientId)>;
+using SendUploadCompleteCallback = std::function<void(const socket_message_FSUploadComplete&, int clientId)>;
+
+class FileSystemHandler {
+  public:
+    FileSystemHandler();
+
+    void setSendCallbacks(SendMetadataCallback sendMetadata, SendCallback sendData, SendCompleteCallback sendComplete,
+                          SendUploadCompleteCallback sendUploadComplete);
+
+    socket_message_FSDeleteResponse handleDelete(const socket_message_FSDeleteRequest& req);
+    socket_message_FSMkdirResponse handleMkdir(const socket_message_FSMkdirRequest& req);
+    socket_message_FSListResponse handleList(const socket_message_FSListRequest& req);
+    void handleDownloadRequest(const socket_message_FSDownloadRequest& req, int clientId);
+    socket_message_FSUploadStartResponse handleUploadStart(const socket_message_FSUploadStart& req, int clientId);
+    void handleUploadData(const socket_message_FSUploadData& req);
+    socket_message_FSCancelTransferResponse handleCancelTransfer(const socket_message_FSCancelTransfer& req);
+    void cleanupExpiredTransfers();
+    void processPendingDownloads();
+
+  private:
+    std::map<uint32_t, DownloadState> downloads_;
+    std::map<uint32_t, UploadState> uploads_;
+    uint32_t transferIdCounter_;
+
+    inline uint32_t generateTransferId() { return ++transferIdCounter_; }
+
+    SendMetadataCallback sendMetadataCallback_;
+    SendCallback sendDataCallback_;
+    SendCompleteCallback sendCompleteCallback_;
+    SendUploadCompleteCallback sendUploadCompleteCallback_;
+
+    void listDirectory(const std::string& path, socket_message_FSListResponse& response);
+    bool deleteRecursive(const std::string& path);
+    bool sendNextDownloadChunk(uint32_t transferId);
+    void finalizeUpload(uint32_t transferId, bool success, const std::string& error = "");
+};
+
+extern FileSystemHandler fsHandler;
+
+} // namespace FileSystemWS

esp32/include/global.h

@@ -1,49 +1,61 @@
 #pragma once
 
-#include <esp32-hal.h>
+#include <sdkconfig.h>
+#include <esp_system.h>
 
-#if CONFIG_IDF_TARGET_ESP32 // ESP32/PICO-D4
+#if CONFIG_IDF_TARGET_ESP32
 #include "esp32/rom/rtc.h"
-#ifndef ESP_PLATFORM
-#define ESP_PLATFORM "ESP32"
+#ifndef ESP_PLATFORM_NAME
+#define ESP_PLATFORM_NAME "ESP32"
 #endif
 #elif CONFIG_IDF_TARGET_ESP32S2
-#include "esp32/rom/rtc.h"
-#ifndef ESP_PLATFORM
-#define ESP_PLATFORM "ESP32-S2"
+#include "esp32s2/rom/rtc.h"
+#ifndef ESP_PLATFORM_NAME
+#define ESP_PLATFORM_NAME "ESP32-S2"
 #endif
 #elif CONFIG_IDF_TARGET_ESP32C3
 #include "esp32c3/rom/rtc.h"
-#ifndef ESP_PLATFORM
-#define ESP_PLATFORM "ESP32-C3"
+#ifndef ESP_PLATFORM_NAME
+#define ESP_PLATFORM_NAME "ESP32-C3"
 #endif
 #elif CONFIG_IDF_TARGET_ESP32S3
 #include "esp32s3/rom/rtc.h"
-#ifndef ESP_PLATFORM
-#define ESP_PLATFORM "ESP32-S3"
+#ifndef ESP_PLATFORM_NAME
+#define ESP_PLATFORM_NAME "ESP32-S3"
 #endif
+#elif CONFIG_IDF_TARGET_ESP32C6
+#include "esp32c6/rom/rtc.h"
+#ifndef ESP_PLATFORM_NAME
+#define ESP_PLATFORM_NAME "ESP32-C6"
+#endif
+#elif CONFIG_IDF_TARGET_ESP32P4
+#include "esp32p4/rom/rtc.h"
+#ifndef ESP_PLATFORM_NAME
+#define ESP_PLATFORM_NAME "ESP32-P4"
+#endif
+#define ESP32P4_USES_C6_COPROCESSOR 1
 #else
 #error Target CONFIG_IDF_TARGET is not supported
 #endif
 
-#ifndef ARDUINO_VERSION
-#ifndef STRINGIFY
-#define STRINGIFY(s) #s
-#endif
-#define ARDUINO_VERSION_STR(major, minor, patch) "v" STRINGIFY(major) "." STRINGIFY(minor) "." STRINGIFY(patch)
-#define ARDUINO_VERSION \
-    ARDUINO_VERSION_STR(ESP_ARDUINO_VERSION_MAJOR, ESP_ARDUINO_VERSION_MINOR, ESP_ARDUINO_VERSION_PATCH)
-#endif
-
 /*
  * I2C software connection
  */
+#if CONFIG_IDF_TARGET_ESP32P4
 #ifndef SDA_PIN
-#define SDA_PIN SDA
+#define SDA_PIN 7
 #endif
 #ifndef SCL_PIN
-#define SCL_PIN SCL
+#define SCL_PIN 8
+#endif
+#else
+#ifndef SDA_PIN
+#define SDA_PIN 21
+#endif
+#ifndef SCL_PIN
+#define SCL_PIN 22
+#endif
 #endif
 #ifndef I2C_FREQUENCY
-#define I2C_FREQUENCY 100000UL
-#endif
+#define I2C_FREQUENCY 1000000UL
+#endif

esp32/include/kinematics.h

@@ -6,26 +6,26 @@
 class KinConfig {
   public:
 #if defined(SPOTMICRO_ESP32)
-    static constexpr float coxa = 60.5f / 100.0f;
-    static constexpr float coxa_offset = 10.0f / 100.0f;
-    static constexpr float femur = 111.2f / 100.0f;
-    static constexpr float tibia = 118.5f / 100.0f;
-    static constexpr float L = 207.5f / 100.0f;
-    static constexpr float W = 78.0f / 100.0f;
+    static constexpr float coxa = 0.0605f;
+    static constexpr float coxa_offset = 0.010f;
+    static constexpr float femur = 0.1112f;
+    static constexpr float tibia = 0.1185f;
+    static constexpr float L = 0.2075f;
+    static constexpr float W = 0.078f;
 #elif defined(SPOTMICRO_ESP32_MINI)
-    static constexpr float coxa = 35.0f / 100.0f;
-    static constexpr float coxa_offset = 0.0f / 100.0f;
-    static constexpr float femur = 60.0f / 100.0f;
-    static constexpr float tibia = 60.0f / 100.0f;
-    static constexpr float L = 160.0f / 100.0f;
-    static constexpr float W = 80.0f / 100.0f;
-#elif defined(SPOTMICRO_YERTLE)
-    static constexpr float coxa = 35.0f / 100.0f;
+    static constexpr float coxa = 0.035f;
     static constexpr float coxa_offset = 0.0f;
-    static constexpr float femur = 130.0f / 100.0f;
-    static constexpr float tibia = 130.0f / 100.0f;
-    static constexpr float L = 240.0f / 100.0f;
-    static constexpr float W = 78.0f / 100.0f;
+    static constexpr float femur = 0.060f;
+    static constexpr float tibia = 0.060f;
+    static constexpr float L = 0.160f;
+    static constexpr float W = 0.080f;
+#elif defined(SPOTMICRO_YERTLE)
+    static constexpr float coxa = 0.035f;
+    static constexpr float coxa_offset = 0.0f;
+    static constexpr float femur = 0.130f;
+    static constexpr float tibia = 0.130f;
+    static constexpr float L = 0.240f;
+    static constexpr float W = 0.078f;
 #endif
 
     static constexpr float mountOffsets[4][3] = {
@@ -39,8 +39,8 @@ class KinConfig {
     };
 
     // Max constants
-    static constexpr float max_roll = 15 * (float)M_PI_2;
-    static constexpr float max_pitch = 15 * (float)M_PI_2;
+    static constexpr float max_roll = 20.0f;
+    static constexpr float max_pitch = 15.0f;
 
     static constexpr float max_body_shift_x = W / 3;
     static constexpr float max_body_shift_z = W / 3;
@@ -72,7 +72,7 @@ struct alignas(16) body_state_t {
             !IS_ALMOST_EQUAL(zm, other.zm)) {
             return false;
         }
-        return arrayEqual(feet, other.feet, 0.1f);
+        return arrayEqual(feet, other.feet, 0.001f);
     }
 };
 
@@ -184,13 +184,13 @@ class Kinematics {
     }
 
     inline void legIK(float x, float y, float z, float out[3]) {
-        float F = sqrt(max(0.0f, x * x + y * y - coxa * coxa));
+        float F = sqrt(fmax(0.0f, x * x + y * y - coxa * coxa));
         float G = F - coxa_offset;
         float H = sqrt(G * G + z * z);
 
         float theta1 = -atan2f(y, x) - atan2f(F, -coxa);
         float D = (H * H - femur * femur - tibia * tibia) / (2 * femur * tibia);
-        float theta3 = acosf(max(-1.0f, min(1.0f, D)));
+        float theta3 = acosf(fmax(-1.0f, fmin(1.0f, D)));
         float theta2 = atan2f(z, G) - atan2f(tibia * sinf(theta3), femur + tibia * cosf(theta3));
         out[0] = RAD_TO_DEG_F(theta1);
         out[1] = RAD_TO_DEG_F(theta2);

esp32/include/mdns_service.h

@@ -1,34 +1,31 @@
 #pragma once
 
-#include <PsychicHttp.h>
-#include <ESPmDNS.h>
+#include <esp_http_server.h>
+#include <mdns.h>
 #include <template/stateful_service.h>
-#include <template/stateful_endpoint.h>
+#include <template/stateful_proto_endpoint.h>
 #include <template/stateful_persistence.h>
 #include <settings/mdns_settings.h>
 #include <utils/timing.h>
-#include <string>
 
 class MDNSService : public StatefulService<MDNSSettings> {
-  private:
-    FSPersistence<MDNSSettings> _persistence;
-    bool _started {false};
-
-    void reconfigureMDNS();
-    void startMDNS();
-    void stopMDNS();
-    void addServices();
-
   public:
     MDNSService();
     ~MDNSService();
 
     void begin();
 
-    esp_err_t getStatus(PsychicRequest *request);
-    void getStatus(JsonVariant &root);
+    esp_err_t getStatus(httpd_req_t *request);
+    esp_err_t queryServices(httpd_req_t *request, api_Request *protoReq);
 
-    static esp_err_t queryServices(PsychicRequest *request, JsonVariant &json);
+    StatefulProtoEndpoint<MDNSSettings, api_MDNSSettings> protoEndpoint;
 
-    StatefulHttpEndpoint<MDNSSettings> endpoint;
-};
+  private:
+    FSPersistencePB<MDNSSettings> _persistence;
+    bool _started {false};
+
+    void reconfigureMDNS();
+    void startMDNS();
+    void stopMDNS();
+    void addServices();
+};

esp32/include/message_types.h

@@ -1,28 +1,17 @@
 #pragma once
 
-#include <ArduinoJson.h>
+#include <platform_shared/message.pb.h>
 
 struct CommandMsg {
     float lx, ly, rx, ry, h, s, s1;
-    friend void toJson(JsonVariant v, CommandMsg const &c) {
-        JsonArray arr = v.to<JsonArray>();
-        arr.add(c.lx);
-        arr.add(c.ly);
-        arr.add(c.rx);
-        arr.add(c.ry);
-        arr.add(c.h);
-        arr.add(c.s);
-        arr.add(c.s1);
-    }
 
-    void fromJson(JsonVariantConst o) {
-        JsonArrayConst arr = o.as<JsonArrayConst>();
-        lx = arr[0].as<float>();
-        ly = arr[1].as<float>();
-        rx = arr[2].as<float>();
-        ry = arr[3].as<float>();
-        h = arr[4].as<float>();
-        s = arr[5].as<float>();
-        s1 = arr[6].as<float>();
+    void fromProto(const socket_message_ControllerData& data) {
+        lx = data.has_left ? data.left.x : 0;
+        ly = data.has_left ? data.left.y : 0;
+        rx = data.has_right ? data.right.x : 0;
+        ry = data.has_right ? data.right.y : 0;
+        h = data.height;
+        s = data.speed;
+        s1 = data.s1;
     }
 };

esp32/include/motion.h

@@ -1,7 +1,6 @@
 #ifndef MotionService_h
 #define MotionService_h
 
-#include <ArduinoJson.h>
 #include "esp_timer.h"
 
 #include <kinematics.h>
@@ -22,23 +21,23 @@ class MotionService {
   public:
     void begin();
 
-    void anglesEvent(JsonVariant &root, int originId);
+    void handleAngles(const socket_message_AnglesData& data);
 
-    void handleInput(JsonVariant &root, int originId);
+    void handleInput(const socket_message_ControllerData& data);
 
-    void handleWalkGait(JsonVariant &root, int originId);
+    void handleWalkGait(const socket_message_WalkGaitData& data);
 
-    void handleMode(JsonVariant &root, int originId);
+    void handleMode(const socket_message_ModeData& data);
 
-    void setState(MotionState *newState);
+    void setState(MotionState* newState);
 
     void handleGestures(const gesture_t ges);
 
-    bool update(Peripherals *peripherals);
+    bool update(Peripherals* peripherals);
 
     bool update_angles(float new_angles[12], float angles[12]);
 
-    float *getAngles() { return angles; }
+    float* getAngles() { return angles; }
 
     inline bool isActive() { return state != nullptr; }
 
@@ -49,7 +48,7 @@ class MotionService {
 
     friend class MotionState;
 
-    MotionState *state = nullptr;
+    MotionState* state = nullptr;
 
     RestState restState;
     StandState standState;

esp32/include/motion_states/state.h

@@ -2,6 +2,8 @@
 
 #include <kinematics.h>
 #include <message_types.h>
+#include <utils/math_utils.h>
+#include <cstring>
 
 class MotionState {
   protected:
@@ -17,21 +19,24 @@ class MotionState {
         body_state.ym = lerp(body_state.ym, target_body_state.ym, smoothing_factor);
         body_state.zm = lerp(body_state.zm, target_body_state.zm, smoothing_factor);
         body_state.phi = lerp(body_state.phi, target_body_state.phi, smoothing_factor);
-        body_state.psi = lerp(body_state.psi, target_body_state.psi - imuCompensate * psi_offset, smoothing_factor);
-        body_state.omega =
-            lerp(body_state.omega, target_body_state.omega - imuCompensate * omega_offset, smoothing_factor);
+        const float target_psi =
+            clamp(target_body_state.psi - imuCompensate * psi_offset, -KinConfig::max_pitch, KinConfig::max_pitch);
+        const float target_omega =
+            clamp(target_body_state.omega - imuCompensate * omega_offset, -KinConfig::max_roll, KinConfig::max_roll);
+        body_state.psi = lerp(body_state.psi, target_psi, smoothing_factor);
+        body_state.omega = lerp(body_state.omega, target_omega, smoothing_factor);
     }
 
     void updateFeet(body_state_t& body_state, const float smoothing_factor = default_smoothing_factor) {
-        if (target_body_state.feet != body_state.feet) {
+        if (std::memcmp(target_body_state.feet, body_state.feet, sizeof(body_state.feet)) != 0) {
             body_state.updateFeet(target_body_state.feet);
         }
     }
 
   public:
-    void updateImuOffsets(const float omega_offset, const float psi_offset) {
-        this->omega_offset = omega_offset * RAD2DEG_F;
-        this->psi_offset = psi_offset * RAD2DEG_F;
+    void updateImuOffsets(const float new_omega, const float new_psi) {
+        omega_offset = RAD_TO_DEG_F(new_omega);
+        psi_offset = RAD_TO_DEG_F(new_psi);
     }
     virtual ~MotionState() {}
 

esp32/include/motion_states/walk_state.h

@@ -2,6 +2,7 @@
 
 #include <motion_states/state.h>
 #include <utils/math_utils.h>
+#include <algorithm>
 #include <array>
 #include <functional>
 
@@ -115,14 +116,16 @@ class WalkState : public MotionState {
         target_gait_state.step_depth = KinConfig::default_step_depth;
     }
 
-    static inline bool isZero(float num) { return std::fabs(num) < 0.01; }
+    static inline bool isZero(float num) { return std::fabs(num) < 0.001; }
 
     void updatePhase(float dt) {
-        if (isZero(gait_state.step_x) && isZero(gait_state.step_z) && isZero(gait_state.step_angle)) {
+        const bool moving = !isZero(gait_state.step_x) || !isZero(gait_state.step_z) || !isZero(gait_state.step_angle);
+        if (!moving) {
             phase_time = 0;
             return;
         }
-        phase_time = std::fmod(phase_time + dt * gait_state.step_velocity * speed_factor, 1.0f);
+        const float velocity = std::max(gait_state.step_velocity, 0.5f);
+        phase_time = std::fmod(phase_time + dt * velocity * speed_factor, 1.0f);
     }
 
     LegStates getLegStates() {
@@ -242,7 +245,7 @@ class WalkState : public MotionState {
         float angle = std::atan2(gait_state.step_z, step_length) * 2.0f;
         curve(length, angle, arg, phase, delta_pos);
 
-        length = gait_state.step_angle * 2.0f;
+        length = gait_state.step_angle * KinConfig::max_step_length;
         angle = yawArc(default_feet_pos[index], body_state.feet[index]);
         curve(length, angle, arg, phase, delta_rot);
 
@@ -275,7 +278,7 @@ class WalkState : public MotionState {
             point[1] += b * BEZIER_HEIGHTS[i] * *height;
             point[2] += b * BEZIER_STEPS[i] * length * Z_POLAR;
 
-            phase_power *= phase;
+            phase_power *= t;
             inv_phase_power /= one_minus_phase;
         }
     }

esp32/include/peripherals/barometer.h

@@ -1,68 +1,42 @@
 #pragma once
 
-#include <list>
-#include <SPI.h>
-#include <Wire.h>
-#include <ArduinoJson.h>
 #include <utils/math_utils.h>
-
-#include <Adafruit_BMP085_U.h>
-#include <Adafruit_Sensor.h>
-
 #include <peripherals/sensor.hpp>
+#include <peripherals/drivers/bmp180.h>
 
-struct BarometerMsg : public SensorMessageBase {
+struct BarometerMsg {
     float pressure {-1};
     float altitude {-1};
     float temperature {-1};
     bool success {false};
-
-    void toJson(JsonVariant v) const override {
-        JsonArray arr = v.to<JsonArray>();
-        arr.add(pressure);
-        arr.add(altitude);
-        arr.add(temperature);
-        arr.add(success);
-    }
-
-    void fromJson(JsonVariantConst v) override {
-        JsonArrayConst arr = v.as<JsonArrayConst>();
-        pressure = arr[0] | -1.0f;
-        altitude = arr[1] | -1.0f;
-        temperature = arr[2] | -1.0f;
-        success = arr[3] | false;
-    }
-
-    friend void toJson(JsonVariant v, BarometerMsg const& a) { a.toJson(v); }
 };
 
 class Barometer : public SensorBase<BarometerMsg> {
   public:
-    bool initialize(void* _) override {
+    bool initialize() override {
         _msg.success = _bmp.begin();
+        if (_msg.success) {
+            ESP_LOGI("BMP", "BMP180 initialized successfully");
+        } else {
+            ESP_LOGE("BMP", "BMP180 initialization failed");
+        }
         return _msg.success;
     }
 
     bool update() override {
         if (!_msg.success) return false;
-        _bmp.getTemperature(&_msg.temperature);
-        sensors_event_t event;
-        _bmp.getEvent(&event);
-        _msg.pressure = event.pressure;
-        _msg.altitude = _bmp.pressureToAltitude(seaLevelPressure, _msg.pressure);
+        if (!_bmp.update()) return false;
+        _msg.temperature = _bmp.getTemperature();
+        _msg.pressure = _bmp.getPressure();
+        _msg.altitude = _bmp.getAltitude();
         return true;
     }
 
     float getPressure() { return _msg.pressure; }
-
     float getAltitude() { return _msg.altitude; }
-
     float getTemperature() { return _msg.temperature; }
-
     bool active() { return _msg.success; }
 
   private:
-    Adafruit_BMP085_Unified _bmp {10085};
-
-    const float seaLevelPressure = SENSORS_PRESSURE_SEALEVELHPA;
-};
+    BMP180Driver _bmp;
+};