✨ 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,13 +2,13 @@ name: Frontend Tests
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
     paths:
-        - 'app/**'  
+      - "app/**"
   pull_request:
-    branches: [ master ]
+    branches: [master]
     paths:
-        - 'app/**'  
+      - "app/**"
 
 permissions:
   contents: read
@@ -28,12 +28,21 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-        node-version: 'latest'
-        cache: 'pnpm'
-        cache-dependency-path: './app/pnpm-lock.yaml'
+          node-version: "latest"
+          cache: "pnpm"
+          cache-dependency-path: "./app/pnpm-lock.yaml"
+
+      - name: Install Protoc
+        uses: arduino/setup-protoc@v3
+        with:
+          version: "27.x"
 
       - name: Install dependencies
         run: pnpm install
+
+      - name: Generate Proto
+        run: pnpm proto
+
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
 

.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

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/.prettierrc

@@ -1,13 +1,12 @@
 {
     "useTabs": false,
     "singleQuote": true,
-    "tabWidth": 2,
+    "tabWidth": 4,
     "trailingComma": "none",
     "arrowParens": "avoid",
     "experimentalTernaries": true,
     "printWidth": 100,
     "semi": false,
-    "svelteBracketNewLine": false,
     "plugins": ["prettier-plugin-svelte"],
     "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

app/.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-	"recommendations": ["svelte.svelte-vscode", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode"]
+    "recommendations": [
+        "svelte.svelte-vscode",
+        "bradlc.vscode-tailwindcss",
+        "esbenp.prettier-vscode"
+    ]
 }

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,53 +13,61 @@
         "lint": "prettier --check . && eslint .",
         "format": "prettier --write .",
         "test:integration": "playwright test",
-    "test:unit": "vitest"
+        "test:unit": "vitest",
+        "proto": "node scripts/compile_protos.js"
     },
     "devDependencies": {
-    "@iconify-json/mdi": "^1.1.64",
-    "@iconify-json/tabler": "^1.1.109",
-    "@playwright/test": "^1.49.1",
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.27",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@types/eslint": "^8.56.0",
-    "@types/three": "^0.162.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.45.1",
-    "jsdom": "^24.0.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.2.6",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
+        "@eslint/js": "^9.39.2",
+        "@iconify-json/mdi": "^1.2.3",
+        "@iconify-json/tabler": "^1.2.23",
+        "@playwright/test": "^1.56.0",
+        "@sveltejs/adapter-static": "^3.0.10",
+        "@sveltejs/kit": "^2.46.4",
+        "@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",
+        "svelte": "^5.39.11",
+        "svelte-check": "^4.3.3",
         "svelte-focus-trap": "^1.2.0",
-    "tailwindcss": "^4.0.12",
-    "tslib": "^2.6.1",
-    "typescript": "^5.5.0",
-    "unplugin-icons": "^0.18.5",
-    "vite": "^6.2.1",
-    "vitest": "^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",
+        "ws": "^8.18.3"
     },
     "type": "module",
     "dependencies": {
-    "@msgpack/msgpack": "^3.1.2",
-    "@niku/vite-env-caster": "^1.0.2",
-    "@sveltejs/adapter-auto": "^4.0.0",
-    "@tailwindcss/vite": "^4.0.12",
-    "chart.js": "^4.4.2",
-    "compare-versions": "^6.1.0",
-    "cross-env": "^7.0.3",
-    "daisyui": "^5.0.0",
-    "nipplejs": "^0.10.1",
+        "@bufbuild/protobuf": "^2.10.2",
+        "@niku/vite-env-caster": "^1.1.2",
+        "@sveltejs/adapter-auto": "^6.1.1",
+        "@tailwindcss/vite": "^4.1.14",
+        "chart.js": "^4.5.0",
+        "compare-versions": "^6.1.1",
+        "cross-env": "^10.1.0",
+        "daisyui": "^5.2.0",
+        "nipplejs": "^0.10.2",
         "svelte-dnd-list": "^0.1.8",
-    "svelte-modals": "^2.0.0",
-    "three": "^0.162.0",
-    "urdf-loader": "^0.12.1",
+        "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.9"
+        "xacro-parser": "^0.3.10"
     },
     "packageManager": "pnpm@9.3.0"
 }

app/playwright.config.ts

@@ -1,4 +1,4 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from '@playwright/test'
 
 const config: PlaywrightTestConfig = {
     webServer: {
@@ -7,6 +7,6 @@ const config: PlaywrightTestConfig = {
     },
     testDir: 'tests/integration',
     testMatch: /(.+\.)?(test|spec)\.[jt]s/
-};
+}
 
-export default config;
+export default config

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/app.css

@@ -23,6 +23,14 @@
     --base-content: oklch(0.3 0.012 256);
 }
 
+button {
+    cursor: pointer;
+}
+
+button:disabled {
+    cursor: not-allowed;
+}
+
 #nipple_0_0,
 #nipple_1_1 {
     z-index: 10 !important;

app/src/app.d.ts

@@ -10,4 +10,4 @@ declare global {
     }
 }
 
-export {};
+export {}

app/src/app.html

@@ -3,7 +3,10 @@
     <head>
         <meta charset="utf-8" />
         <link rel="icon" href="%sveltekit.assets%/logo512.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
+        />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="mobile-web-app-capable" content="yes" />
         %sveltekit.head%

app/src/index.test.ts

@@ -1,7 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-describe('sum test', () => {
-	it('adds 1 + 2 to equal 3', () => {
-		expect(1 + 2).toBe(3);
-	});
-});

app/src/lib/api.ts

@@ -1,22 +1,29 @@
-import { get } from 'svelte/store';
-import { Err, Ok, type Result } from './utilities';
-import { location } from './stores';
+import { get } from 'svelte/store'
+import { Err, Ok, type Result } from './utilities'
+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 namespace api {
-    export function get<TResponse>(endpoint: string, params?: RequestInit) {
-        return sendRequest<TResponse>(endpoint, 'GET', null, params);
-    }
+export const api = {
+    get<TResponse>(endpoint: string, params?: RequestInit) {
+        return sendRequest<TResponse>(endpoint, 'GET', null, params)
+    },
 
-    export function post<TResponse>(endpoint: string, data?: unknown) {
-        return sendRequest<TResponse>(endpoint, 'POST', data);
-    }
+    post<TResponse>(endpoint: string, data?: unknown) {
+        return sendRequest<TResponse>(endpoint, 'POST', data)
+    },
 
-    export function put<TResponse>(endpoint: string, data?: unknown) {
-        return sendRequest<TResponse>(endpoint, 'PUT', data);
-    }
+    post_proto<TResponse>(endpoint: string, data: Request) {
+        return sendRequest<TResponse>(endpoint, 'POST', Request.encode(data))
+    },
 
-    export function remove<TResponse>(endpoint: string) {
-        return sendRequest<TResponse>(endpoint, 'DELETE');
+    put<TResponse>(endpoint: string, data?: unknown) {
+        return sendRequest<TResponse>(endpoint, 'PUT', data)
+    },
+
+    remove<TResponse>(endpoint: string) {
+        return sendRequest<TResponse>(endpoint, 'DELETE')
     }
 }
 
@@ -26,8 +33,12 @@ async function sendRequest<TResponse>(
     data?: unknown,
     params?: RequestInit
 ): Promise<Result<TResponse, Error>> {
-    endpoint = resolveUrl(endpoint);
-    const body = data !== null && typeof data !== 'undefined' ? JSON.stringify(data) : undefined;
+    endpoint = resolveUrl(endpoint)
+
+    const isProtobuf = data instanceof BinaryWriter
+    const body = data !== null && typeof data !== 'undefined'
+        ? (isProtobuf ? data.finish() : JSON.stringify(data))
+        : undefined
 
     const request = {
         ...params,
@@ -36,45 +47,47 @@ async function sendRequest<TResponse>(
         headers: {
             ...params?.headers,
             Authorization: 'Basic',
-            'Content-Type': 'application/json'
+            'Content-Type': isProtobuf ? 'application/x-protobuf' : 'application/json'
+        }
     }
-    };
 
-    let response;
+    let response
 
     try {
-        response = await fetch(endpoint, request);
-    } catch (error) {
-        return Err.new(new Error(), 'An error has occurred');
+        response = await fetch(endpoint, request)
+    } catch {
+        return Err.new(new Error(), 'An error has occurred')
     }
 
-    const isResponseOk = response.status >= 200 && response.status < 400;
+    const isResponseOk = response.status >= 200 && response.status < 400
     if (!isResponseOk) {
         if (response.status === 401) {
-            return Err.new(new ApiError(response), 'User was not authorized');
+            return Err.new(new ApiError(response), 'User was not authorized')
         }
-        return Err.new(new ApiError(response), 'An error has occurred');
+        return Err.new(new ApiError(response), 'An error has occurred')
     }
 
-    const contentType =
-        response.headers.get('Content-Type') ?? response.headers.get('Content-Type');
+    const contentType = response.headers.get('Content-Type') ?? response.headers.get('Content-Type')
     if (contentType && contentType.includes('application/json')) {
-        const data = await response.json();
-        return Ok.new(data as TResponse);
+        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);
+        return Ok.new(null as TResponse)
     }
 }
 
 function resolveUrl(url: string): string {
-    if (url.startsWith('http') || !get(location)) return url;
-    const protocol = window.location.protocol;
-    return `${protocol}//${get(location)}${url.startsWith('/') ? '' : '/'}${url}`;
+    if (url.startsWith('http') || !get(apiLocation)) return url
+    const protocol = window.location.protocol
+    return `${protocol}//${get(apiLocation)}${url.startsWith('/') ? '' : '/'}${url}`
 }
 
 export class ApiError extends Error {
     constructor(public readonly response: Response) {
-        super(`${response.status}`);
+        super(`${response.status}`)
     }
 }

app/src/lib/components/Collapsible.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-    import { slide } from 'svelte/transition';
-    import { cubicOut } from 'svelte/easing';
-    import { Down } from './icons';
+    import { slide } from 'svelte/transition'
+    import { cubicOut } from 'svelte/easing'
+    import { Down } from './icons'
 
     function openCollapsible() {
-        open = !open;
+        open = !open
         if (open) {
-            opened();
+            opened()
         } else {
-            closed();
+            closed()
         }
     }
 
-    let { icon, title, children, open, opened, closed, class: klass } = $props();
+    let { icon, title, children, open, opened, closed, class: klass } = $props()
 </script>
 
 <div class="{klass} relative grid w-full max-w-2xl self-center overflow-hidden">

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/ConfirmDialog.svelte

@@ -23,15 +23,20 @@
         class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
         transition:fly={{ y: 50 }}
         use:exitBeforeEnter
-    use:focusTrap>
+        use:focusTrap
+    >
         <div
-      class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
+            class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
+        >
             <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
             <div class="divider my-2"></div>
             <p class="text-base-content mb-1 text-start">{message}</p>
             <div class="divider my-2"></div>
             <div class="flex justify-end gap-2">
-        <button class="btn btn-error inline-flex items-center" onclick={() => modals.close()}>
+                <button
+                    class="btn btn-error inline-flex items-center"
+                    onclick={() => modals.close()}
+                >
                     <labels.cancel.icon class="mr-2 h-5 w-5" /><span>{labels?.cancel.label}</span>
                 </button>
                 <button class="btn btn-primary inline-flex items-center" onclick={onConfirm}>

app/src/lib/components/GithubUpdateDialog.svelte

@@ -1,61 +1,61 @@
 <script lang="ts">
-    import { focusTrap } from 'svelte-focus-trap';
-    import { fly } from 'svelte/transition';
-    import { telemetry } from '$lib/stores/telemetry';
-    import { Cancel } from './icons';
-    import { modals, exitBeforeEnter, onBeforeClose } from 'svelte-modals';
+    import { focusTrap } from 'svelte-focus-trap'
+    import { fly } from 'svelte/transition'
+    import { telemetry } from '$lib/stores/telemetry'
+    import { Cancel } from './icons'
+    import { modals, exitBeforeEnter, onBeforeClose } from 'svelte-modals'
 
     // provided by <Modals />
     interface Props {
-        isOpen: boolean;
+        isOpen: boolean
     }
 
-    let { isOpen }: Props = $props();
+    let { isOpen }: Props = $props()
 
-    let updating = $state(true);
+    let updating = $state(true)
 
-    let progress = $state(0);
+    let progress = $state(0)
     $effect(() => {
         if ($telemetry.download_ota.status == 'progress') {
-            progress = $telemetry.download_ota.progress;
+            progress = $telemetry.download_ota.progress
         }
-    });
+    })
 
     $effect(() => {
         if ($telemetry.download_ota.status == 'error') {
-            updating = false;
+            updating = false
         }
-    });
+    })
 
-    let message = $state('Preparing ...');
+    let message = $state('Preparing ...')
 
     $effect(() => {
         if ($telemetry.download_ota.status == 'progress') {
-            message = 'Downloading ...';
+            message = 'Downloading ...'
         } else if ($telemetry.download_ota.status == 'error') {
-            message = $telemetry.download_ota.error;
+            message = $telemetry.download_ota.error
         } else if ($telemetry.download_ota.status == 'finished') {
-            message = 'Restarting ...';
-            progress = 0;
+            message = 'Restarting ...'
+            progress = 0
             // Reload page after 5 sec
             setTimeout(() => {
-                modals.closeAll();
-                location.reload();
-            }, 5000);
+                modals.closeAll()
+                location.reload()
+            }, 5000)
         }
-    });
+    })
 
     onBeforeClose(() => {
         if (updating) {
             // prevents modal from closing
-            return false;
+            return false
         } else {
-            $telemetry.download_ota.status = 'idle';
-            $telemetry.download_ota.error = '';
-            $telemetry.download_ota.progress = 0;
-            return true;
+            $telemetry.download_ota.status = 'idle'
+            $telemetry.download_ota.error = ''
+            $telemetry.download_ota.progress = 0
+            return true
         }
-    });
+    })
 </script>
 
 {#if isOpen}
@@ -89,8 +89,8 @@
                     class="btn btn-warning text-warning-content inline-flex flex-none items-center"
                     disabled={updating}
                     onclick={() => {
-                        modals.closeAll();
-                        location.reload();
+                        modals.closeAll()
+                        location.reload()
                     }}
                 >
                     <Cancel class="mr-2 h-5 w-5" /><span>Close</span></button

app/src/lib/components/InfoDialog.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { focusTrap } from 'svelte-focus-trap';
-  import { fly } from 'svelte/transition';
-  import { Check } from './icons';
-  import { exitBeforeEnter, type ModalProps } from 'svelte-modals';
+    import { focusTrap } from 'svelte-focus-trap'
+    import { fly } from 'svelte/transition'
+    import { Check } from './icons'
+    import { exitBeforeEnter, type ModalProps } from 'svelte-modals'
 
     let {
         isOpen,
@@ -10,9 +10,9 @@
         message,
         onDismiss,
         labels = {
-      dismiss: { label: 'Dismiss', icon: Check },
-    },
-  }: ModalProps = $props();
+            dismiss: { label: 'Dismiss', icon: Check }
+        }
+    }: ModalProps = $props()
 </script>
 
 {#if isOpen}
@@ -21,9 +21,11 @@
         class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
         transition:fly={{ y: 50 }}
         use:exitBeforeEnter
-    use:focusTrap>
+        use:focusTrap
+    >
         <div
-      class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
+            class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
+        >
             <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
             <div class="divider my-2"></div>
             <p class="text-base-content mb-1 text-start">{message}</p>
@@ -31,7 +33,8 @@
             <div class="flex justify-end gap-2">
                 <button
                     class="btn btn-warning text-warning-content inline-flex items-center"
-          onclick={onDismiss}>
+                    onclick={onDismiss}
+                >
                     <labels.dismiss.icon class="mr-2 h-5 w-5" /><span>{labels.dismiss.label}</span>
                 </button>
             </div>

app/src/lib/components/OrientationIndicator.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import * as THREE from 'three';
-  import { imu } from '$lib/stores/imu';
-  import SceneBuilder from '$lib/sceneBuilder';
+    import { onMount, onDestroy } from 'svelte'
+    import * as THREE from 'three'
+    import { imu } from '$lib/stores/imu'
+    import SceneBuilder from '$lib/sceneBuilder'
 
-  let canvas: HTMLCanvasElement;
-  let sceneBuilder: SceneBuilder;
-  let cube: THREE.Mesh;
-  let targetRotation = new THREE.Euler();
-  let lastUpdateTime = 0;
-  const LERP_SPEED = 5; // rotations per second
+    let canvas: HTMLCanvasElement
+    let sceneBuilder: SceneBuilder
+    let cube: THREE.Mesh
+    let targetRotation = new THREE.Euler()
+    let lastUpdateTime = 0
+    const LERP_SPEED = 5 // rotations per second
 
     const initThreeJS = () => {
         sceneBuilder = new SceneBuilder()
@@ -18,59 +18,59 @@
             .addOrbitControls(1, 10, false)
             .addAmbientLight({ color: 0x404040, intensity: 0.5 })
             .addDirectionalLight({ color: 0xffffff, intensity: 3, x: 10, y: 20, z: 7 })
-      .fillParent();
+            .fillParent()
 
-    const geometry = new THREE.BoxGeometry(1, 1, 1);
+        const geometry = new THREE.BoxGeometry(1, 1, 1)
         const material = new THREE.MeshPhongMaterial({
             color: 0x00ff00,
             transparent: true,
-      opacity: 0.8,
-    });
-    cube = new THREE.Mesh(geometry, material);
-    sceneBuilder.scene.add(cube);
+            opacity: 0.8
+        })
+        cube = new THREE.Mesh(geometry, material)
+        sceneBuilder.scene.add(cube)
 
         sceneBuilder.addRenderCb(() => {
-      if (!cube) return;
-      const currentTime = performance.now();
-      const deltaTime = (currentTime - lastUpdateTime) / 1000; // convert to seconds
-      lastUpdateTime = currentTime;
+            if (!cube) return
+            const currentTime = performance.now()
+            const deltaTime = (currentTime - lastUpdateTime) / 1000 // convert to seconds
+            lastUpdateTime = currentTime
 
-      const lerpFactor = Math.min(1, LERP_SPEED * deltaTime);
-      cube.rotation.x = THREE.MathUtils.lerp(cube.rotation.x, targetRotation.x, lerpFactor);
-      cube.rotation.y = THREE.MathUtils.lerp(cube.rotation.y, targetRotation.y, lerpFactor);
-      cube.rotation.z = THREE.MathUtils.lerp(cube.rotation.z, targetRotation.z, lerpFactor);
-    });
+            const lerpFactor = Math.min(1, LERP_SPEED * deltaTime)
+            cube.rotation.x = THREE.MathUtils.lerp(cube.rotation.x, targetRotation.x, lerpFactor)
+            cube.rotation.y = THREE.MathUtils.lerp(cube.rotation.y, targetRotation.y, lerpFactor)
+            cube.rotation.z = THREE.MathUtils.lerp(cube.rotation.z, targetRotation.z, lerpFactor)
+        })
 
-    sceneBuilder.startRenderLoop();
-  };
+        sceneBuilder.startRenderLoop()
+    }
 
     const updateOrientation = () => {
-    if (!cube) return;
+        if (!cube) return
 
-    const y = -$imu.x[$imu.x.length - 1] || 0;
-    const x = $imu.y[$imu.y.length - 1] || 0;
-    const z = -$imu.z[$imu.z.length - 1] || 0;
+        const y = -$imu.x[$imu.x.length - 1] || 0
+        const x = $imu.y[$imu.y.length - 1] || 0
+        const z = -$imu.z[$imu.z.length - 1] || 0
 
         targetRotation.set(
             THREE.MathUtils.degToRad(x),
             THREE.MathUtils.degToRad(y),
             THREE.MathUtils.degToRad(z)
-    );
-  };
+        )
+    }
 
     onMount(() => {
-    initThreeJS();
-  });
+        initThreeJS()
+    })
 
     onDestroy(() => {
-    sceneBuilder?.renderer?.dispose();
-  });
+        sceneBuilder?.renderer?.dispose()
+    })
 
     $effect(() => {
         if ($imu) {
-      updateOrientation();
+            updateOrientation()
         }
-  });
+    })
 </script>
 
 <div class="h-60 w-60 border-2 border-base-300 rounded-md">

app/src/lib/components/SettingsCard.svelte

@@ -11,14 +11,23 @@
         right?: import('svelte').Snippet
     }
 
-  let { open = $bindable(true), collapsible = true, icon, title, children, right }: Props = $props()
+    let {
+        open = $bindable(true),
+        collapsible = true,
+        icon,
+        title,
+        children,
+        right
+    }: Props = $props()
 </script>
 
 {#if collapsible}
     <div
-    class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg">
+        class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
+    >
         <div
-      class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
+            class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
+        >
             <span class="inline-flex items-baseline">
                 {@render icon?.()}
                 {@render title?.()}
@@ -27,26 +36,33 @@
                 class="btn btn-circle btn-ghost btn-sm"
                 onclick={() => {
                     open = !open
-        }}>
+                }}
+            >
                 <Down
-          class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open ?
+                    class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {(
+                        open
+                    ) ?
                         'rotate-180'
-          : ''}" />
+                    :   ''}"
+                />
             </button>
         </div>
         {#if open}
             <div
                 class="flex flex-col gap-2 p-4 pt-0"
-        transition:slide|local={{ duration: 300, easing: cubicOut }}>
+                transition:slide|local={{ duration: 300, easing: cubicOut }}
+            >
                 {@render children?.()}
             </div>
         {/if}
     </div>
 {:else}
     <div
-    class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg">
+        class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
+    >
         <div
-      class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
+            class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
+        >
             <span class="inline-flex items-baseline">
                 {@render icon?.()}
                 {@render title?.()}

app/src/lib/components/Spinner.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { Loader } from "./icons";
-
+    import { Loader } from './icons'
 </script>
 
 <div class="flex h-full w-full flex-col items-center justify-center p-6">

app/src/lib/components/StatusItem.svelte

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

app/src/lib/components/Stream.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { onDestroy } from 'svelte';
-    import { location } from '$lib/stores';
+    import { onDestroy } from 'svelte'
+    import { apiLocation } from '$lib/stores'
 
-    let source = $state(`${$location}/api/camera/stream`);
+    let source = $state(`${$apiLocation}/api/camera/stream`)
 
-    onDestroy(() => (source = '#'));
+    onDestroy(() => (source = '#'))
 </script>
 
 <div class="w-full h-full">

app/src/lib/components/Toast.svelte

@@ -1,22 +1,24 @@
 <script>
-	import { flip } from 'svelte/animate';
-	import { fly } from 'svelte/transition';
-	import { notifications } from '$lib/components/toasts/notifications';
-	import { error, info, success, warning } from './icons';
-
+    import { flip } from 'svelte/animate'
+    import { fly } from 'svelte/transition'
+    import { notifications } from '$lib/components/toasts/notifications'
+    import { error, info, success, warning } from './icons'
 
     /** @type {{theme?: any, icon?: any}} */
-	let { theme = {
+    let {
+        theme = {
             error: 'alert-error',
             success: 'alert-success',
             warning: 'alert-warning',
             info: 'alert-info'
-	}, icon = {
+        },
+        icon = {
             error: error,
             success: success,
             warning: warning,
             info: info
-	} } = $props();
+        }
+    } = $props()
 </script>
 
 <div class="toast toast-end mr-4">

app/src/lib/components/Visualization.svelte

@@ -1,93 +1,106 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte'
     import {
-    BufferGeometry,
-    Line,
-    LineBasicMaterial,
         Mesh,
         MeshBasicMaterial,
         type Object3D,
         SphereGeometry,
         Vector3,
-    type NormalBufferAttributes,
-    type Object3DEventMap
+        type Object3DEventMap,
+        Color
     } from 'three'
     import {
-    ModesEnum,
-    kinematicData,
         mode,
         model,
-    outControllerData,
+        input,
         servoAnglesOut,
         servoAngles,
         mpu,
         jointNames,
         currentKinematic,
         walkGait,
-    walkGaits,
-    walkGaitToMode
+        kinematicData
     } from '$lib/stores'
-  import {
-    extractFootColor,
-    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 {
-    sky?: boolean
+        defaultColor?: string | null
         orbit?: boolean
         panel?: boolean
         debug?: boolean
         ground?: boolean
     }
 
-  let { sky = true, orbit = false, panel = true, debug = false, ground = true }: Props = $props()
+    let {
+        defaultColor = '#0091ff',
+        orbit = false,
+        panel = true,
+        debug = false,
+        ground = true
+    }: Props = $props()
 
     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 feet_trace = new Array(4).fill([])
-  let trace_lines: BufferGeometry<NormalBufferAttributes>[] = []
     let target: Object3D<Object3DEventMap>
 
     let target_position = { x: 0, z: 0, yaw: 0 }
 
     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()
+        feet: kinematic.getDefaultFeetPos(),
+        cumulative_x: 0,
+        cumulative_y: 0,
+        cumulative_z: 0,
+        cumulative_roll: 0,
+        cumulative_pitch: 0,
+        cumulative_yaw: 0
     }
 
     let settings = {
@@ -97,31 +110,37 @@
         '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: 'black'
+        Background: defaultColor
     }
 
     onMount(async () => {
         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
@@ -150,23 +169,31 @@
         visibility.add(settings, 'Trace points', 1, 1000, 1)
         visibility.add(settings, 'Target position')
         visibility.add(settings, 'Smooth motion')
-    visibility.addColor(settings, 'Background')
+        visibility.addColor(settings, 'Background').onChange(setSceneBackground).listen()
     }
 
     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))
+            })
+        )
     }
 
     const createScene = async () => {
@@ -177,7 +204,7 @@
             .addDirectionalLight({ x: 10, y: 20, z: 10, color: 0xffffff, intensity: 3 })
             .addAmbientLight({ color: 0xffffff, intensity: 0.5 })
             .addFogExp2(0xcccccc, 0.015)
-      .addModel($model)
+            .addModel($model as URDFRobot)
             .addTransformControls(sceneManager.model)
             .fillParent()
             .addRenderCb(render)
@@ -191,32 +218,13 @@
         sceneManager.scene.add(target)
 
         if (debug) {
-      sceneManager.addDragControl(updateAngles)
-    }
-    if (sky) sceneManager.addSky()
-
-    for (let i = 0; i < 4; i++) {
-      const geometry = new BufferGeometry()
-      const material = new LineBasicMaterial({ color: extractFootColor() })
-      const line = new Line(geometry, material)
-      trace_lines.push(geometry)
-      sceneManager.scene.add(line)
-    }
-  }
-
-  const renderTraceLines = (foot_positions: Vector3[]) => {
-    if (!settings['Trace feet']) {
-      if (!feet_trace.length) return
-      trace_lines.forEach((line, i) => line.setFromPoints(feet_trace[i].slice(-1)))
-      feet_trace = new Array(4).fill([])
-      return
-    }
-
-    trace_lines.forEach((line, i) => {
-      feet_trace[i].push(foot_positions[i])
-      feet_trace[i] = feet_trace[i].slice(-settings['Trace points'])
-      line.setFromPoints(feet_trace[i])
+            sceneManager.addDragControl(angles => {
+                Object.entries(angles).forEach(([name, angle]) => {
+                    updateAngles(name, angle)
                 })
+            })
+        }
+        if (defaultColor) setSceneBackground(settings['Background'] || defaultColor)
     }
 
     const calculate_kinematics = () => {
@@ -228,28 +236,71 @@
             xm: settings.xm,
             ym: settings.ym,
             zm: settings.zm,
-      feet: body_state.feet
+            feet: body_state.feet,
+            cumulative_x: body_state.cumulative_x,
+            cumulative_y: body_state.cumulative_y,
+            cumulative_z: body_state.cumulative_z,
+            cumulative_roll: body_state.cumulative_roll,
+            cumulative_pitch: body_state.cumulative_pitch,
+            cumulative_yaw: body_state.cumulative_yaw
         }
 
         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[]) => {
         if (settings['Robot transform controls'] || !settings['Auto orient robot']) return
         robot.position.y = robot.position.y - Math.min(...toes.map(toe => toe.y))
 
-    robot.position.z = smooth(robot.position.z, -settings.xm, 0.1)
-    robot.position.x = smooth(robot.position.x, -settings.zm, 0.1)
+        const cumulativeYaw = body_state.cumulative_yaw
+        const headingYaw = degToRad(-settings.phi + $mpu.heading)
+        const totalYaw = headingYaw + cumulativeYaw
 
-    robot.rotation.z = smooth(robot.rotation.z, degToRad(-settings.phi + $mpu.heading + 90), 0.1)
-    robot.rotation.y = smooth(robot.rotation.y, degToRad(settings.omega), 0.1)
-    robot.rotation.x = smooth(robot.rotation.x, degToRad(settings.psi - 90), 0.1)
+        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
+
+        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
+
+        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,
+            SMOOTH_AMOUNT
+        )
+        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) => {
@@ -258,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
@@ -289,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 = () => {
@@ -305,7 +346,6 @@
 
         const toes = getToeWorldPositions(robot)
 
-    renderTraceLines(toes)
         update_camera(robot)
         update_gait()
         calculate_kinematics()
@@ -316,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/InputPassword.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { MdiEyeOffOutline, MdiEyeOutline } from "../icons";
+    import { MdiEyeOffOutline, MdiEyeOutline } from '../icons'
 
     interface Props {
-        show?: boolean;
-        value?: string;
-        id?: string;
+        show?: boolean
+        value?: string
+        id?: string
     }
 
-    let { show = $bindable(false), value = $bindable(''), id = '' }: Props = $props();
+    let { show = $bindable(false), value = $bindable(''), id = '' }: Props = $props()
 
-	let type = $derived(show ? 'text' : 'password');
+    let type = $derived(show ? 'text' : 'password')
 
-	const handleInput = (e: any) => value = e.target.value
+    const handleInput = (e: Event) => (value = (e.target as HTMLInputElement).value)
 
-    const togglePassword = () => show = !show
+    const togglePassword = () => (show = !show)
 </script>
 
 <label class="input input-bordered flex items-center gap-2">

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

@@ -3,8 +3,8 @@
         min?: number
         max?: number
         step?: number
-    value?: any
-    oninput?: any
+        value?: number
+        oninput?: (value: Event) => void
     }
 
     let {
@@ -24,7 +24,8 @@
     {max}
     {step}
     bind:value
-  {...rest} />
+    {...rest}
+/>
 
 <style>
     input[type='range']::-webkit-slider-runnable-track {

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

@@ -1,2 +1,2 @@
-export { default as PasswordInput } from './InputPassword.svelte';
-export { default as VerticalSlider } from './VerticalSlider.svelte';
+export { default as PasswordInput } from './InputPassword.svelte'
+export { default as VerticalSlider } from './VerticalSlider.svelte'

app/src/lib/components/layout/Widget.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     interface Props {
-        children?: import('svelte').Snippet;
+        children?: import('svelte').Snippet
     }
 
-    let { children }: Props = $props();
+    let { children }: Props = $props()
 </script>
 
 <div class="box-border overflow-hidden flex-1">

app/src/lib/components/layout/WidgetContainer.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-  import WidgetContainer from './WidgetContainer.svelte';
+    import WidgetContainer from './WidgetContainer.svelte'
     import {
         WidgetComponents,
         type WidgetContainerConfig,
-    isWidgetConfig,
-  } from '$lib/stores/application';
-  import Widget from './Widget.svelte';
+        isWidgetConfig
+    } from '$lib/stores/application'
+    import Widget from './Widget.svelte'
 
     interface Props {
-    container: WidgetContainerConfig;
+        container: WidgetContainerConfig
     }
 
-  let { container }: Props = $props();
+    let { container }: Props = $props()
 </script>
 
 <div class="w-full h-full flex flex-col overflow-hidden">
@@ -19,7 +19,8 @@
         class="flex w-full h-full"
         class:flex-row={container.layout === 'column'}
         class:flex-col={container.layout === 'row'}
-    class:flex-wrap={container.layout === 'wrap'}>
+        class:flex-wrap={container.layout === 'wrap'}
+    >
         {#each container.widgets as widget, index (widget.id + '-' + index)}
             <Widget>
                 {#if isWidgetConfig(widget)}
@@ -32,8 +33,8 @@
             {#if index !== container.widgets.length - 1}
                 <div
                     class="divider bg-base-300 m-0"
-          class:divider-horizontal={container.layout === 'column'}>
-        </div>
+                    class:divider-horizontal={container.layout === 'column'}
+                ></div>
             {/if}
         {/each}
     </div>

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

@@ -1,14 +1,15 @@
 <script lang="ts">
-	import { Github } from "../icons";
+    import { Github } from '../icons'
 
     interface Props {
-		github: any;
+        github: { href: string; active?: boolean }
     }
 
-	let { github }: Props = $props();
+    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/LogoButton.svelte

@@ -1,12 +1,13 @@
 <script>
-	import logo from '$lib/assets/logo512.png';
+    import logo from '$lib/assets/logo512.png'
+    import { resolve } from '$app/paths'
 
     /** @type {{appName: any}} */
-	let { appName } = $props();
+    let { appName } = $props()
 </script>
 
 <a
-	href="/"
+    href={resolve('/')}
     class="rounded-box mb-4 flex items-center hover:scale-[1.02] active:scale-[0.98]"
 >
     <img src={logo} alt="Logo" class="h-12 w-12" />

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,9 +33,11 @@
 
     const github = { href: 'https://github.com/' + page.data.github, active: true }
 
+    import type { Component } from 'svelte'
+
     type menuItem = {
         title: string
-    icon: ConstructorOfATypedSvelteComponent
+        icon: Component
         href?: string
         feature: boolean
         active?: boolean
@@ -43,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,
@@ -77,7 +81,7 @@
                         title: 'Camera',
                         icon: Camera,
                         href: withBase('/peripherals/camera'),
-            feature: $features.camera
+                        feature: true
                     },
                     {
                         title: 'Servo',
@@ -89,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',
@@ -116,7 +120,7 @@
                         href: withBase('/wifi/mdns'),
                         feature: true
                     }
-        ]
+                ].map(sub => ({ ...sub, active: sub.title === activeTitle }))
             },
             {
                 title: 'System',
@@ -145,33 +149,20 @@
                         title: 'Firmware Update',
                         icon: Update,
                         href: withBase('/system/update'),
-            feature: $features.ota || $features.upload_firmware || $features.download_firmware
+                        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: any) => {
-    setActiveMenuItem(event.details)
-  }
 </script>
 
 <div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">
@@ -181,7 +172,8 @@
         {menuItems}
         select={updateMenu}
         class="grow flex-nowrap overflow-y-auto overflow-x-hidden"
-    level="0" />
+        level="0"
+    />
 
     <div class="divider my-0"></div>
 

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

@@ -1,8 +1,10 @@
 <script lang="ts">
     import MenuList from './MenuList.svelte'
+    import type { Component } from 'svelte'
+
     type MenuItem = {
         title: string
-    icon: ConstructorOfATypedSvelteComponent
+        icon: Component
         href?: string
         feature: boolean
         active?: boolean
@@ -17,7 +19,7 @@
 </script>
 
 <ul class={klass + ' menu w-full'}>
-  {#each menuItems as MenuItem[] as menuItem, i (menuItem.title)}
+    {#each menuItems as MenuItem[] as menuItem (menuItem.title)}
         {#if menuItem.feature}
             <li>
                 {#if menuItem.submenu}
@@ -27,17 +29,23 @@
                             {menuItem.title}
                         </summary>
                         <div class="pl-4">
-              <MenuList menuItems={menuItem.submenu} level={level + 1} {select} class={klass} />
+                            <MenuList
+                                menuItems={menuItem.submenu}
+                                level={level + 1}
+                                {select}
+                                class={klass}
+                            />
                         </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}
                         class:text-lg={level === 0}
                         class:text-md={level === 1}
-            onclick={() => selectMenuItem(menuItem.title)}>
+                        onclick={() => selectMenuItem(menuItem.title)}
+                    >
                         <menuItem.icon class="h-6 w-6" />
                         {menuItem.title}
                     </a>

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { isFullscreen, toggleFullscreen } from '$lib/stores';
-	import { MdiFullscreenExit, MdiFullscreen } from '../icons';
+    import { isFullscreen, toggleFullscreen } from '$lib/stores'
+    import { MdiFullscreenExit, MdiFullscreen } from '../icons'
 
-    const SvelteComponent = $derived($isFullscreen ? MdiFullscreenExit : MdiFullscreen);
+    const SvelteComponent = $derived($isFullscreen ? MdiFullscreenExit : MdiFullscreen)
 </script>
 
 <button onclick={toggleFullscreen}>

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

@@ -1,26 +1,26 @@
 <script lang="ts">
-	import { WiFi, WiFi0, WiFi1, WiFi2, WifiOff } from "../icons";
+    import { WiFi, WiFi0, WiFi1, WiFi2, WifiOff } from '../icons'
 
     interface Props {
-		showDBm?: boolean;
-		rssi?: number;
+        showDBm?: boolean
+        rssi?: number
     }
 
-	let { showDBm = false, rssi = 0 }: Props = $props();
+    let { showDBm = false, rssi = 0 }: Props = $props()
 
     const getWiFiIcon = () => {
-		if (rssi === 0) return WifiOff;
-		if (rssi >= -55) return WiFi;
-		if (rssi >= -75) return WiFi2;
-		if (rssi >= -85) return WiFi1;
-		return WiFi0;
-	};
+        if (rssi === 0) return WifiOff
+        if (rssi >= -55) return WiFi
+        if (rssi >= -75) return WiFi2
+        if (rssi >= -85) return WiFi1
+        return WiFi0
+    }
 
-	const SvelteComponent = $derived(getWiFiIcon());
+    const SvelteComponent = $derived(getWiFiIcon())
 </script>
 
 <div class="indicator">
-	<div class="tooltip tooltip-left" data-tip={rssi + " dBm"}>
+    <div class="tooltip tooltip-left" data-tip={rssi + ' dBm'}>
         {#if showDBm}
             <span class="indicator-item indicator-start badge badge-accent badge-outline badge-xs">
                 {rssi} dBm

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-    import { useFeatureFlags } from '$lib/stores';
-    import { modals } from 'svelte-modals';
-    import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
-    import { api } from '$lib/api';
-    import { Cancel, Power } from '../icons';
+    import { useFeatureFlags } from '$lib/stores'
+    import { modals } from 'svelte-modals'
+    import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
+    import { api } from '$lib/api'
+    import { Cancel, Power } from '../icons'
 
-    const features = useFeatureFlags();
+    const features = useFeatureFlags()
 
-    const postSleep = async () => await api.post('/api/system/sleep');
+    const postSleep = async () => await api.post('/api/system/sleep')
 
     const confirmSleep = () => {
         modals.open(ConfirmDialog, {
@@ -18,11 +18,11 @@
                 confirm: { label: 'Switch Off', icon: Power }
             },
             onConfirm: () => {
-                modals.close();
-                postSleep();
+                modals.close()
+                postSleep()
+            }
+        })
     }
-        });
-    };
 </script>
 
 {#if $features.sleep}

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

@@ -1,10 +1,10 @@
 <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>
 
-
 <button onclick={deactivate} class="bg-error text-white btn rounded-none">STOP</button>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { MdiWeatherSunny, MdiMoonAndStars } from "../icons";
+    import { MdiWeatherSunny, MdiMoonAndStars } from '../icons'
 </script>
 
 <label class="swap swap-rotate">

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

@@ -1,11 +1,12 @@
 <script lang="ts">
-    import {Hamburger} from '../icons'
+    import { Hamburger } from '../icons'
+    import { resolve } from '$app/paths'
 </script>
 
 <div class="topbar absolute left-0 top-0 w-full z-20 flex justify-between bg-zinc-800">
     <div class="flex gap-2 p-2">
-        <a href="/">
-            <Hamburger class="h-8 w-8"/>
+        <a href={resolve('/')}>
+            <Hamburger class="h-8 w-8" />
         </a>
     </div>
 </div>

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

@@ -98,9 +98,11 @@
     <div class="indicator flex-none">
         <button
             class="btn btn-square btn-ghost h-9 w-9"
-      onclick={() => confirmGithubUpdate(firmwareDownloadLink)}>
+            onclick={() => confirmGithubUpdate(firmwareDownloadLink)}
+        >
             <span
-        class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1">
+                class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"
+            >
                 {firmwareVersion}
             </span>
             <Firmware class="h-7 w-7" />

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { selectedView, views } from "$lib/stores/application";
-	import Selector from "../widget/Selector.svelte";
+    import { selectedView, views } from '$lib/stores/application'
+    import Selector from '../widget/Selector.svelte'
 </script>
 
-<Selector bind:selectedOption={$selectedView} options={$views.map((v) => v.name)} />
+<Selector bind:selectedOption={$selectedView} options={$views.map(v => v.name)} />

app/src/lib/components/toasts/Toast.svelte

@@ -1,22 +1,24 @@
 <script>
-	import { flip } from 'svelte/animate';
-	import { fly } from 'svelte/transition';
-	import { notifications } from '$lib/components/toasts/notifications';
-	import { error, info, success, warning } from '../icons';
-
+    import { flip } from 'svelte/animate'
+    import { fly } from 'svelte/transition'
+    import { notifications } from '$lib/components/toasts/notifications'
+    import { error, info, success, warning } from '../icons'
 
     /** @type {{theme?: any, icon?: any}} */
-	let { theme = {
+    let {
+        theme = {
             error: 'alert-error',
             success: 'alert-success',
             warning: 'alert-warning',
             info: 'alert-info'
-	}, icon = {
+        },
+        icon = {
             error: error,
             success: success,
             warning: warning,
             info: info
-	} } = $props();
+        }
+    } = $props()
 </script>
 
 <div class="toast toast-end mr-4 z-20">

app/src/lib/components/toasts/notifications.ts

@@ -1,4 +1,4 @@
-import { writable, derived, type Writable } from 'svelte/store'
+import { writable } from 'svelte/store'
 
 type StateType = 'info' | 'success' | 'warning' | 'error'
 

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

@@ -1,22 +1,22 @@
 <script lang="ts">
-  import { daisyColor } from '$lib/utilities';
-  import { Chart, registerables } from 'chart.js';
-  import { onMount } from 'svelte';
-  import { cubicOut } from 'svelte/easing';
-  import { slide } from 'svelte/transition';
+    import { daisyColor } from '$lib/utilities'
+    import { Chart, registerables } from 'chart.js'
+    import { onMount } from 'svelte'
+    import { cubicOut } from 'svelte/easing'
+    import { slide } from 'svelte/transition'
 
-  let chartElement: HTMLCanvasElement;
-  let chart: Chart;
+    let chartElement: HTMLCanvasElement
+    let chart: Chart<'line', number[], number>
 
     interface Props {
-    label: any;
-    data: number[];
-    title: any;
+        label: string
+        data: number[]
+        title: string
     }
 
-  let { label, data, title }: Props = $props();
+    let { label, data, title }: Props = $props()
 
-  Chart.register(...registerables);
+    Chart.register(...registerables)
 
     onMount(() => {
         chart = new Chart(chartElement, {
@@ -30,36 +30,36 @@
                         backgroundColor: daisyColor('--p', 50),
                         borderWidth: 2,
                         data,
-            yAxisID: 'y',
-          },
-        ],
+                        yAxisID: 'y'
+                    }
+                ]
             },
             options: {
                 maintainAspectRatio: false,
                 responsive: true,
                 plugins: {
                     legend: {
-            display: true,
+                        display: true
                     },
                     tooltip: {
                         mode: 'index',
-            intersect: false,
-          },
+                        intersect: false
+                    }
                 },
                 elements: {
                     point: {
-            radius: 0,
-          },
+                        radius: 0
+                    }
                 },
                 scales: {
                     x: {
                         grid: {
-              color: daisyColor('--bc', 10),
+                            color: daisyColor('--bc', 10)
                         },
                         ticks: {
-              color: daisyColor('--bc'),
+                            color: daisyColor('--bc')
                         },
-            display: false,
+                        display: false
                     },
                     y: {
                         type: 'linear',
@@ -69,33 +69,34 @@
                             color: daisyColor('--bc'),
                             font: {
                                 size: 16,
-                weight: 'bold',
-              },
+                                weight: 'bold'
+                            }
                         },
                         position: 'left',
                         min: 0,
                         max: 100,
                         grid: { color: daisyColor('--bc', 10) },
                         ticks: {
-              color: daisyColor('--bc'),
+                            color: daisyColor('--bc')
                         },
-            border: { color: daisyColor('--bc', 10) },
-          },
-        },
-      },
-    });
+                        border: { color: daisyColor('--bc', 10) }
+                    }
+                }
+            }
+        })
 
         setInterval(() => {
-      chart.data.labels = data;
-      chart.data.datasets[0].data = data;
-    }, 500);
-  });
+            chart.data.labels = data
+            chart.data.datasets[0].data = data
+        }, 500)
+    })
 </script>
 
 <div class="w-full h-full overflow-x-auto">
     <div
         class="flex w-full flex-col space-y-1 h-60"
-    transition:slide|local={{ duration: 300, easing: cubicOut }}>
+        transition:slide|local={{ duration: 300, easing: cubicOut }}
+    >
         <canvas bind:this={chartElement}></canvas>
     </div>
 </div>

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

@@ -1,19 +1,20 @@
 <script lang="ts">
     interface Props {
-    options?: string[];
-    selectedOption?: string;
-    change?: () => void;
-    [key: string]: any;
+        options?: string[]
+        selectedOption?: string
+        change?: () => void
+        [key: string]: unknown
     }
 
-  let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props();
+    let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props()
 </script>
 
 <select
     bind:value={selectedOption}
     {...rest}
-  class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}">
-  {#each options as option}
+    class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
+>
+    {#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,41 +53,54 @@ 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
+
+        if (body_state.cumulative_x === undefined) {
+            body_state.cumulative_x = 0
+            body_state.cumulative_y = 0
+            body_state.cumulative_z = 0
+            body_state.cumulative_roll = 0
+            body_state.cumulative_pitch = 0
+            body_state.cumulative_yaw = 0
+        }
+
         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: ControllerData) {
+        super.step(body_state, command)
+        return body_state
+    }
 }
 
 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
@@ -93,13 +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
@@ -109,12 +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
     }
@@ -125,8 +145,8 @@ export class BezierState extends GaitState {
     protected phase = 0
     protected phase_num = 0
     protected step_length = 0
-  protected stand_offset = 0.85
-  protected mode: 'crawl' | 'trot' = 'trot'
+    protected stand_offset = 0.75
+    protected mode: WalkGaits = WalkGaits.TROT
     protected speed_factor = 1
     offset = [0, 0.5, 0.75, 0.25]
 
@@ -135,6 +155,10 @@ export class BezierState extends GaitState {
     protected shift_start_time = 0
     protected current_shift_leg = -1
 
+    protected last_body_state: body_state_t | null = null
+    protected cumulative_position = { x: 0, y: 0, z: 0 }
+    protected cumulative_orientation = { roll: 0, pitch: 0, yaw: 0 }
+
     constructor() {
         super()
         this.set_mode(this.mode)
@@ -144,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]
@@ -167,13 +189,16 @@ 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()
         this.update_body_position()
         this.update_feet_positions()
+        this.update_cumulative_position()
         return this.body_state
     }
 
@@ -195,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()
 
@@ -316,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)
@@ -328,6 +354,51 @@ export class BezierState extends GaitState {
 
         return this.body_state.feet[index]
     }
+
+    update_cumulative_position() {
+        if (this.last_body_state === null) {
+            this.last_body_state = { ...this.body_state }
+            this.body_state.cumulative_x = 0
+            this.body_state.cumulative_y = 0
+            this.body_state.cumulative_z = 0
+            this.body_state.cumulative_roll = 0
+            this.body_state.cumulative_pitch = 0
+            this.body_state.cumulative_yaw = 0
+            return
+        }
+
+        const m = this.gait_state
+        const moving = m.step_x !== 0 || m.step_z !== 0 || m.step_angle !== 0
+
+        if (moving) {
+            const step_displacement_x_local =
+                m.step_x * m.step_velocity * this.dt * this.speed_factor
+            const step_displacement_z_local =
+                m.step_z * m.step_velocity * this.dt * this.speed_factor
+            const step_displacement_yaw =
+                m.step_angle * m.step_velocity * this.dt * this.speed_factor
+
+            const cos_yaw = Math.cos(this.cumulative_orientation.yaw)
+            const sin_yaw = Math.sin(this.cumulative_orientation.yaw)
+            const step_displacement_x =
+                step_displacement_x_local * cos_yaw - step_displacement_z_local * sin_yaw
+            const step_displacement_z =
+                step_displacement_x_local * sin_yaw + step_displacement_z_local * cos_yaw
+
+            this.cumulative_position.x += step_displacement_x
+            this.cumulative_position.z += step_displacement_z
+            this.cumulative_orientation.yaw += step_displacement_yaw
+        }
+
+        this.body_state.cumulative_x = this.cumulative_position.x
+        this.body_state.cumulative_y = this.cumulative_position.y
+        this.body_state.cumulative_z = this.cumulative_position.z
+        this.body_state.cumulative_roll = this.cumulative_orientation.roll
+        this.body_state.cumulative_pitch = this.cumulative_orientation.pitch
+        this.body_state.cumulative_yaw = this.cumulative_orientation.yaw
+
+        this.last_body_state = { ...this.body_state }
+    }
 }
 
 const stance_curve = (length: number, angle: number, depth: number, phase: number): number[] => {

app/src/lib/kinematic.ts

@@ -6,6 +6,12 @@ export interface body_state_t {
     ym: number
     zm: number
     feet: number[][]
+    cumulative_x: number
+    cumulative_y: number
+    cumulative_z: number
+    cumulative_roll: number
+    cumulative_pitch: number
+    cumulative_yaw: number
 }
 
 export interface position {
@@ -44,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],
@@ -60,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[] {
@@ -101,11 +138,17 @@ export default class Kinematic {
                 pz = bz - mz
 
             const lx =
-        this.invMountRot[0][0] * px + this.invMountRot[0][1] * py + this.invMountRot[0][2] * pz
+                this.invMountRot[0][0] * px +
+                this.invMountRot[0][1] * py +
+                this.invMountRot[0][2] * pz
             const ly =
-        this.invMountRot[1][0] * px + this.invMountRot[1][1] * py + this.invMountRot[1][2] * pz
+                this.invMountRot[1][0] * px +
+                this.invMountRot[1][1] * py +
+                this.invMountRot[1][2] * pz
             const lz =
-        this.invMountRot[2][0] * px + this.invMountRot[2][1] * py + this.invMountRot[2][2] * pz
+                this.invMountRot[2][0] * px +
+                this.invMountRot[2][1] * py +
+                this.invMountRot[2][2] * pz
 
             const xLocal = i % 2 === 1 ? -lx : lx
             return this.legIK(xLocal, ly, lz)
@@ -118,7 +161,8 @@ export default class Kinematic {
         const H = sqrt(G * G + z * z)
         const t1 = -atan2(y, x) - atan2(F, -this.coxa)
         const D =
-      (H * H - this.femur * this.femur - this.tibia * this.tibia) / (2 * this.femur * this.tibia)
+            (H * H - this.femur * this.femur - this.tibia * this.tibia) /
+            (2 * this.femur * this.tibia)
         const t3 = acos(max(-1, min(1, D)))
         const t2 = atan2(z, G) - atan2(this.tibia * sin(t3), this.femur + this.tibia * cos(t3))
         return [t1, t2, t3]

app/src/lib/sceneBuilder.ts

@@ -17,18 +17,16 @@ import {
     MeshPhongMaterial,
     EquirectangularReflectionMapping,
     ACESFilmicToneMapping,
-  MathUtils,
     Group,
     MeshBasicMaterial,
-  RepeatWrapping
+    RepeatWrapping,
+    type Object3D
 } from 'three'
-import { Sky } from 'three/addons/objects/Sky.js'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
 import { Reflector } from 'three/examples/jsm/objects/Reflector.js'
 import { type URDFJoint, type URDFMimicJoint, type URDFRobot } from 'urdf-loader'
 import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls'
-import { sunCalculator } from './utilities/position-utilities'
 
 export const addScene = () => new Scene()
 
@@ -58,15 +56,13 @@ export default class SceneBuilder {
     public ground!: Mesh
     public renderer!: WebGLRenderer
     public orbit: OrbitControls
-  public callback: Function | undefined
+    public callback: (() => void) | undefined
     public gridHelper!: GridHelper
     public model!: URDFRobot
     public liveStreamTexture!: CanvasTexture
     private fog!: FogExp2
     private isLoaded: boolean = false
     public isDragging: boolean = false
-  highlightMaterial: any
-  sky!: Sky
     transformControl: TransformControls
     public modelGroup!: Group
 
@@ -89,34 +85,6 @@ export default class SceneBuilder {
         return this
     }
 
-  public addSky = () => {
-    this.sky = new Sky()
-    this.sky.scale.setScalar(450000)
-    this.scene.add(this.sky)
-    const effectController = {
-      turbidity: 10,
-      rayleigh: 3,
-      mieCoefficient: 0.005,
-      mieDirectionalG: 0.7,
-      elevation: sunCalculator.calculateSunElevation(),
-      azimuth: 200,
-      exposure: this.renderer.toneMappingExposure
-    }
-    const uniforms = this.sky.material.uniforms
-    uniforms['turbidity'].value = effectController.turbidity
-    uniforms['rayleigh'].value = effectController.rayleigh
-    uniforms['mieCoefficient'].value = effectController.mieCoefficient
-    uniforms['mieDirectionalG'].value = effectController.mieDirectionalG
-    this.renderer.toneMappingExposure = 0.5
-    const phi = MathUtils.degToRad(90 - effectController.elevation)
-    const theta = MathUtils.degToRad(effectController.azimuth)
-    const sun = new Vector3()
-
-    sun.setFromSphericalCoords(1, phi, theta)
-    uniforms['sunPosition'].value.copy(sun)
-    return this
-  }
-
     public addPerspectiveCamera = (options: position) => {
         this.camera = new PerspectiveCamera()
         this.camera.position.set(options.x ?? 0, options.y ?? 2.7, options.z ?? 0)
@@ -229,7 +197,7 @@ export default class SceneBuilder {
         return this
     }
 
-  public addRenderCb = (callback: Function) => {
+    public addRenderCb = (callback: () => void) => {
         this.callback = callback
         return this
     }
@@ -275,7 +243,7 @@ export default class SceneBuilder {
     isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed'
 
     highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
-    const traverse = (c: any) => {
+        const traverse = (c: Object3D) => {
             if (c.type === 'Mesh') {
                 if (revert) {
                     c.material = c.__origMaterial
@@ -298,9 +266,9 @@ export default class SceneBuilder {
         traverse(m)
     }
 
-  public addTransformControls = (model: any) => {
+    public addTransformControls = (model: Object3D) => {
         this.transformControl = new TransformControls(this.camera, this.renderer.domElement)
-    this.transformControl.addEventListener('dragging-changed', (event: any) => {
+        this.transformControl.addEventListener('dragging-changed', (event: { value: boolean }) => {
             this.orbit.enabled = !event.value
             this.isDragging = !event.value
         })
@@ -310,7 +278,7 @@ export default class SceneBuilder {
         return this
     }
 
-  public addModel = (model: any) => {
+    public addModel = (model: URDFRobot) => {
         this.modelGroup = new Group()
         this.modelGroup.add(model)
         this.model = model
@@ -318,7 +286,7 @@ export default class SceneBuilder {
         return this
     }
 
-  public addDragControl = (updateAngle: any) => {
+    public addDragControl = (updateAngle: (angles: Record<string, number>) => void) => {
         const highlightColor = '#FFFFFF'
         const highlightMaterial = new MeshPhongMaterial({
             shininess: 10,
@@ -334,7 +302,7 @@ export default class SceneBuilder {
         )
         dragControls.updateJoint = (joint: URDFMimicJoint, angle: number) => {
             this.setJointValue(joint.name, angle)
-      updateAngle(joint.name, angle)
+            updateAngle({ [joint.name]: angle })
         }
         dragControls.onDragStart = () => {
             this.orbit.enabled = false

app/src/lib/services/file-service.ts

@@ -1,54 +1,53 @@
-import { Result } from '$lib/utilities/result';
-import { browser } from '$app/environment';
+import { Result } from '$lib/utilities/result'
+import { browser } from '$app/environment'
 
 class FileService {
-	private dbPromise: Promise<Result<IDBDatabase, string>> | null = browser
-		? this.openDatabase()
-		: null;
+    private dbPromise: Promise<Result<IDBDatabase, string>> | null =
+        browser ? this.openDatabase() : null
 
     private async openDatabase(): Promise<Result<IDBDatabase, string>> {
-		return new Promise((resolve) => {
-			const request = indexedDB.open('fileStorageDB', 1);
+        return new Promise(resolve => {
+            const request = indexedDB.open('fileStorageDB', 1)
 
             request.onupgradeneeded = () => {
-				request.result.createObjectStore('files');
-			};
-			request.onsuccess = () => resolve(Result.ok(request.result));
-			request.onerror = () => resolve(Result.err('Error opening database'));
-		});
+                request.result.createObjectStore('files')
+            }
+            request.onsuccess = () => resolve(Result.ok(request.result))
+            request.onerror = () => resolve(Result.err('Error opening database'))
+        })
     }
 
     private async getStore(mode: IDBTransactionMode): Promise<Result<IDBObjectStore, string>> {
         if (!browser || !this.dbPromise)
-			return Result.err('Not running in browser or DB not initialized');
-		const dbResult = await this.dbPromise;
-		if (dbResult.isErr()) return Result.err('Database not initialized');
-		const store = dbResult.inner.transaction('files', mode).objectStore('files');
-		return Result.ok(store);
+            return Result.err('Not running in browser or DB not initialized')
+        const dbResult = await this.dbPromise
+        if (dbResult.isErr()) return Result.err('Database not initialized')
+        const store = dbResult.inner.transaction('files', mode).objectStore('files')
+        return Result.ok(store)
     }
 
     public async saveFile(key: string, file: Uint8Array): Promise<Result<IDBValidKey, string>> {
-		const storeResult = await this.getStore('readwrite');
-		if (storeResult.isErr()) return Result.err('Failed to access store');
+        const storeResult = await this.getStore('readwrite')
+        if (storeResult.isErr()) return Result.err('Failed to access store')
 
-		return new Promise((resolve) => {
-			const request = storeResult.inner.put(file, key);
-			request.onsuccess = () => resolve(Result.ok(request.result));
-			request.onerror = () => resolve(Result.err('Failed to save file'));
-		});
+        return new Promise(resolve => {
+            const request = storeResult.inner.put(file, key)
+            request.onsuccess = () => resolve(Result.ok(request.result))
+            request.onerror = () => resolve(Result.err('Failed to save file'))
+        })
     }
 
     public async getFile(key: string): Promise<Result<Uint8Array | undefined, string>> {
-		const storeResult = await this.getStore('readonly');
-		if (storeResult.isErr()) return Result.err('Failed to access store');
+        const storeResult = await this.getStore('readonly')
+        if (storeResult.isErr()) return Result.err('Failed to access store')
 
-		return new Promise((resolve) => {
-			const request = storeResult.inner.get(key);
+        return new Promise(resolve => {
+            const request = storeResult.inner.get(key)
             request.onsuccess = () =>
-				resolve(request.result ? Result.ok(request.result) : Result.err('File not found'));
-			request.onerror = () => resolve(Result.err('Failed to retrieve file'));
-		});
+                resolve(request.result ? Result.ok(request.result) : Result.err('File not found'))
+            request.onerror = () => resolve(Result.err('Failed to retrieve file'))
+        })
     }
 }
 
-export default browser ? new FileService() : null;
+export default browser ? new FileService() : null

app/src/lib/services/index.ts

@@ -1,2 +1,2 @@
-export { default as fileService } from './file-service';
-export { default as resultService } from './result-service';
+export { default as fileService } from './file-service'
+export { default as resultService } from './result-service'

app/src/lib/services/result-service.ts

@@ -1,19 +1,19 @@
-import { errorLogs, latestErrorLog } from '$lib/stores';
-import type { Result } from '$lib/utilities';
+import { errorLogs, latestErrorLog } from '$lib/stores'
+import type { Result } from '$lib/utilities'
 
 class ResultService {
     public handleResult(result: Result<unknown, string>, tag?: string) {
         if (result.isErr()) {
-			const errorLogEntry = { tag, message: result.inner, exception: result.exception };
-			latestErrorLog.set(errorLogEntry);
-			errorLogs.update((entries) => {
-				entries.push(errorLogEntry);
-				return entries;
-			});
+            const errorLogEntry = { tag, message: result.inner, exception: result.exception }
+            latestErrorLog.set(errorLogEntry)
+            errorLogs.update(entries => {
+                entries.push(errorLogEntry)
+                return entries
+            })
         }
 
-		return result;
+        return result
     }
 }
 
-export default new ResultService();
+export default new ResultService()

app/src/lib/stores/analytics.ts

@@ -1,55 +1,36 @@
-import { type Analytics } from '$lib/types/models';
-import { writable } from 'svelte/store';
+import { AnalyticsData } from '$lib/platform_shared/message'
+import { writable } from 'svelte/store'
+import { socket } from './socket'
 
-let 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[]>[]
-};
-
-const maxAnalyticsData = 100;
+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
+            }
+        }
     }
-	};
 }
 
-export const analytics = createAnalytics();
+export const analytics = createAnalytics()

app/src/lib/stores/application.ts

@@ -1,47 +1,39 @@
-import { persistentStore } from '$lib/utilities';
-import { get, type Writable } from 'svelte/store';
+import { persistentStore } from '$lib/utilities'
+import { get, type Writable } from 'svelte/store'
 
-import Visualization from '$lib/components/Visualization.svelte';
-import Stream from '$lib/components/Stream.svelte';
-import ChartWidget from '$lib/components/widget/ChartWidget.svelte';
+import Visualization from '$lib/components/Visualization.svelte'
+import Stream from '$lib/components/Stream.svelte'
+import ChartWidget from '$lib/components/widget/ChartWidget.svelte'
 
 export interface WidgetConfig {
-	id: string | number;
-	component: keyof typeof WidgetComponents;
-	props?: Record<string, any>;
+    id: string | number
+    component: keyof typeof WidgetComponents
+    props?: Record<string, unknown>
 }
 
 export interface WidgetContainerConfig {
-	id: string | number;
-	layout?: 'row' | 'column' | 'wrap';
-	header?: string;
-	widgets: Array<WidgetConfig | WidgetContainerConfig>;
+    id: string | number
+    layout?: 'row' | 'column' | 'wrap'
+    header?: string
+    widgets: Array<WidgetConfig | WidgetContainerConfig>
 }
 
 export const isWidgetConfig = (
     widget: WidgetConfig | WidgetContainerConfig
-): widget is WidgetConfig => 'component' in widget;
+): widget is WidgetConfig => 'component' in widget
 
 export const WidgetComponents = {
     Visualization,
     Stream,
     ChartWidget
-};
+}
 
 interface View {
-	name: string;
-	content: WidgetContainerConfig;
+    name: string
+    content: WidgetContainerConfig
 }
 
 const defaultViews: View[] = [
-	{
-		name: 'Stream',
-		content: {
-			id: 'root',
-			layout: 'column',
-			widgets: [{ id: 2, component: 'Stream' }]
-		}
-	},
     {
         name: '3D representation',
         content: {
@@ -50,6 +42,14 @@ const defaultViews: View[] = [
             widgets: [{ id: 2, component: 'Visualization', props: { debug: true } }]
         }
     },
+    {
+        name: 'Stream',
+        content: {
+            id: 'root',
+            layout: 'column',
+            widgets: [{ id: 2, component: 'Stream' }]
+        }
+    },
     {
         name: 'Split screen',
         content: {
@@ -60,8 +60,8 @@ const defaultViews: View[] = [
             ]
         }
     }
-];
+]
 
-export const views: Writable<View[]> = persistentStore('views', defaultViews);
+export const views: Writable<View[]> = persistentStore('views', defaultViews)
 
-export const selectedView = persistentStore('selected_view', get(views)[0].name);
+export const selectedView = persistentStore('selected_view', get(views)[0].name)

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 { base } from '$app/paths'
+import { resolve } from '$app/paths'
+import { socket } from '$lib/stores'
 
 let featureFlagsStore: Writable<Record<string, boolean | string>>
 
@@ -11,40 +11,50 @@ 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
 }
 
+const base = resolve('/')
+
 export const variants = {
     SPOTMICRO_ESP32: {
-    model: `${base}/spot_micro.urdf.xacro`,
-    stl: `${base}/stl.zip`,
+        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`,
+        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

@@ -1,24 +1,25 @@
-import { writable } from 'svelte/store';
+import { writable } from 'svelte/store'
 
-export const isFullscreen = writable(false);
+export const isFullscreen = writable(false)
 
 export function toggleFullscreen() {
-	isFullscreen.update((state) => {
-		!state ? document.documentElement.requestFullscreen() : document.exitFullscreen();
-		return !state;
-	});
+    isFullscreen.update(state => {
+        if (!state) document.documentElement.requestFullscreen()
+        else document.exitFullscreen()
+        return !state
+    })
 }
 
 export function enterFullscreen() {
     if (!document.fullscreenElement) {
-		document.documentElement.requestFullscreen();
-		isFullscreen.set(true);
+        document.documentElement.requestFullscreen()
+        isFullscreen.set(true)
     }
 }
 
 export function exitFullscreen() {
     if (document.fullscreenElement) {
-		document.exitFullscreen();
-		isFullscreen.set(false);
+        document.exitFullscreen()
+        isFullscreen.set(false)
     }
 }

app/src/lib/stores/gamepad.ts

@@ -5,43 +5,83 @@ export type GamepadState = {
     gamepads: Gamepad[]
 }
 
+const DEADZONE = 0.15
+const dz = (x: number) => {
+    const a = Math.abs(x)
+    if (a < DEADZONE) return 0
+    return ((a - DEADZONE) / (1 - DEADZONE)) * Math.sign(x)
+}
+
+let raf = 0
+let running = false
+
 export const gamepads = readable<GamepadState>({ available: false, gamepads: [] }, set => {
     const update = () => {
-    const hasGamepadAPI = 'getGamepads' in navigator
-    if (!hasGamepadAPI) {
-      set({ available: false, gamepads: [] })
-      return
-    }
-
-    const gps = navigator.getGamepads?.() ?? []
-    const validGamepads = gps.filter(Boolean) as Gamepad[]
-    set({
-      available: true,
-      gamepads: validGamepads
-    })
+        const pads = navigator.getGamepads?.() ?? []
+        const list = Array.from(pads)
+            .map(p => p || null)
+            .filter(Boolean) as Gamepad[]
+        set({ available: 'getGamepads' in navigator, gamepads: list })
         raf = requestAnimationFrame(update)
     }
 
-  window.addEventListener('gamepadconnected', update)
-  window.addEventListener('gamepaddisconnected', update)
-  let raf = requestAnimationFrame(update)
+    const onConnect = () => update()
+    const onDisconnect = () => update()
+    const onVis = () => {
+        if (document.hidden) {
+            running = false
+            cancelAnimationFrame(raf)
+        } else if (!running) {
+            running = true
+            raf = requestAnimationFrame(update)
+        }
+    }
+
+    window.addEventListener('gamepadconnected', onConnect)
+    window.addEventListener('gamepaddisconnected', onDisconnect)
+    document.addEventListener('visibilitychange', onVis)
+
+    running = true
+    raf = requestAnimationFrame(update)
 
     return () => {
+        running = false
         cancelAnimationFrame(raf)
-    window.removeEventListener('gamepadconnected', update)
-    window.removeEventListener('gamepaddisconnected', update)
+        window.removeEventListener('gamepadconnected', onConnect)
+        window.removeEventListener('gamepaddisconnected', onDisconnect)
+        document.removeEventListener('visibilitychange', onVis)
     }
 })
 
-export const gamepad = derived(gamepads, $gamepads =>
-  $gamepads.available && $gamepads.gamepads.length > 0 ? $gamepads.gamepads[0] : null
+export const gamepad = derived(gamepads, s =>
+    s.available && s.gamepads.length ? s.gamepads[0] : null
 )
 
-export const gamepadAxes = derived(gamepad, $gamepad => $gamepad?.axes ?? [0, 0, 0, 0])
+export const hasGamepad = derived(gamepads, s => s.available && s.gamepads.length > 0)
 
-export const gamepadButtons = derived(gamepad, $gamepad => $gamepad?.buttons ?? [])
+export const gamepadAxes = derived(gamepad, g => (g ? g.axes.map(dz) : [0, 0, 0, 0]))
 
-export const hasGamepad = derived(
-  gamepads,
-  $gamepads => $gamepads.available && $gamepads.gamepads.length > 0
-)
+type ButtonEdge = { pressed: boolean; value: number; justPressed: boolean; justReleased: boolean }
+const prev = new Map<number, { pressed: boolean; value: number }[]>()
+
+export const gamepadButtons = derived(gamepad, g => g?.buttons ?? [])
+
+export const gamepadButtonsEdges = derived(gamepad, g => {
+    if (!g) return [] as ButtonEdge[]
+    const p = prev.get(g.index) || []
+    const out = g.buttons.map((b, i): ButtonEdge => {
+        const pr = p[i] || { pressed: false, value: 0 }
+        const pressed = !!b.pressed || b.value > 0.5
+        return {
+            pressed,
+            value: b.value,
+            justPressed: pressed && !pr.pressed,
+            justReleased: !pressed && pr.pressed
+        }
+    })
+    prev.set(
+        g.index,
+        out.map(x => ({ pressed: x.pressed, value: x.value }))
+    )
+    return out
+})

app/src/lib/stores/imu.ts

@@ -1,27 +1,34 @@
-import { writable } from 'svelte/store';
-import type { IMU } from '$lib/types/models';
+import { writable } from 'svelte/store'
+import { IMUData } from '$lib/platform_shared/message'
+import { socket } from './socket'
 
-const maxIMUData = 100;
+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: IMU) => {
-        update(data => {
-            (Object.keys(content) as (keyof IMU)[]).forEach(key => {
-                data[key] = [...data[key], content[key]].slice(-maxIMUData);
-            });
-            return data;
-        });
-    };
+    let unsubscribe: (() => void) | null = null
+    let listenerCount = 0
 
-    return { subscribe, addData };
-})();
+    const addData = (content: IMUData) => {
+        update(data => [...data, content].slice(-maxIMUData))
+    }
+
+    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/index.ts

@@ -1,9 +1,9 @@
-export * from './socket-store';
-export * from './logging-store';
-export * from './model-store';
-export * from './socket';
-export * from './fullscreen';
-export * from './telemetry';
-export * from './analytics';
-export * from './featureFlags';
-export * from './location-store';
+export * from './socket-store'
+export * from './logging-store'
+export * from './model-store'
+export * from './socket'
+export * from './fullscreen'
+export * from './telemetry'
+export * from './analytics'
+export * from './featureFlags'
+export * from './location-store'

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

@@ -1,5 +1,6 @@
-import { persistentStore } from '$lib/utilities';
-import { writable } from 'svelte/store';
-import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public';
+import { persistentStore } from '$lib/utilities'
+import { writable } from 'svelte/store'
+import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
 
-export const location = PUBLIC_VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '');
+export const apiLocation =
+    PUBLIC_VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '')

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

@@ -1,11 +1,11 @@
-import { writable, type Writable } from 'svelte/store';
+import { writable, type Writable } from 'svelte/store'
 
 export interface errorLog {
-	message: unknown;
-	tag?: string;
-	exception?: unknown;
+    message: unknown
+    tag?: string
+    exception?: unknown
 }
 
-export const latestErrorLog: Writable<errorLog> = writable();
+export const latestErrorLog: Writable<errorLog> = writable()
 
-export const errorLogs: Writable<errorLog[]> = writable([]);
+export const errorLogs: Writable<errorLog[]> = writable([])

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 enum WalkGaits {
-  Trot = 0,
-  Crawl = 1
-}
-
-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({
+export const input: Writable<ControllerData> = writable(
+    ControllerData.create({
         left: { x: 0, y: 0 },
         right: { x: 0, y: 0 },
-  height: 0.5,
-  speed: 0.5,
-  s1: 0.05
-})
+        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>
+    }
+}
+
+const modesData = enumToValuesAndLabels<ModesEnum>(ModesEnum)
+export const modes = modesData.values
+export const modeLabels = modesData.labels
+
+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 { writable, type Writable } from 'svelte/store';
-import { type angles } from '$lib/types/models';
+import { AnglesData } from '$lib/platform_shared/message'
+import { writable, type Writable } from 'svelte/store'
 
-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 mpu = writable({ heading: 0 });
-export const sonar = writable([0, 0]);
-export const distances = writable({});
+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 interface socketDataCollection {
-	angles: Writable<angles>;
-	logs: Writable<string[]>;
-	mpu: Writable<unknown>;
-	distances: Writable<unknown>;
-}
-
-export const socketData = {
-	angles: servoAngles,
-	logs,
-	mpu,
-	distances
-};
+export const mpu = writable({ heading: 0 })
+export const sonar = writable([0, 0])

app/src/lib/stores/socket.ts

@@ -1,160 +1,311 @@
-import { writable } from 'svelte/store';
-import { encode, decode } from '@msgpack/msgpack';
+import { writable } from 'svelte/store'
+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?];
+type CorrelationRequestData = Omit<CorrelationRequest, 'correlationId'>
+type PendingRequest = {
+    resolve: (response: CorrelationResponse) => void
+    reject: (error: Error) => void
+    timeoutId: ReturnType<typeof setTimeout>
+}
 
-let useBinary = false;
+// Combine references from both message.proto and filesystem.proto
+const combinedReferences: Record<string, MessageFns<unknown>> = {
+    ...protoMetadata.references,
+    ...filesystemProtoMetadata.references
+}
 
-const decodeMessage = (data: string | ArrayBuffer): SocketMessage | null => {
-  useBinary = data instanceof ArrayBuffer;
+const MessageType = protoMetadata.fileDescriptor.messageType?.find(
+    (msg: { name: string }) => msg.name === 'Message'
+)
 
-  try {
-    if (useBinary) {
-      return decode(new Uint8Array(data as ArrayBuffer)) as SocketMessage;
+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)
             }
-    return JSON.parse(data as string);
-  } catch (error) {
-    console.error(`Could not decode data: ${new Uint8Array(data as ArrayBuffer)} - ${error}`);
         }
-  return null;
-};
+    }
+}
 
-const encodeMessage = (data: unknown) => {
-  try {
-    return useBinary ? encode(data) : JSON.stringify(data);
-  } catch (error) {
-    console.error(`Could not encode data: ${data} - ${error}`);
+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 { subscribe, set } = writable(false);
-  const reconnectTimeoutTime = 5000;
-  let unresponsiveTimeoutId: ReturnType<typeof setTimeout>;
-  let reconnectTimeoutId: ReturnType<typeof setTimeout>;
-  let ws: WebSocket;
-  let socketUrl: string | URL;
+    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 = 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();
+        socketUrl = url
+        connect()
     }
 
     function disconnect(reason: SocketEvent, event?: Event) {
-    ws.close();
-    set(false);
-    clearTimeout(unresponsiveTimeoutId);
-    clearTimeout(reconnectTimeoutId);
-    listeners.get(reason)?.forEach(listener => listener(event));
-    reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime);
+        ws.close()
+        set(false)
+        clearTimeout(unresponsiveTimeoutId)
+        clearTimeout(reconnectTimeoutId)
+        event_listeners.get(reason)?.forEach(listener => listener(event))
+        reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime)
     }
 
     function connect() {
-    ws = new WebSocket(socketUrl);
-    ws.binaryType = 'arraybuffer';
+        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);
+            ping()
+            set(true)
+            clearTimeout(reconnectTimeoutId)
+            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));
-    };
-    ws.onerror = ev => disconnect('error', ev);
-    ws.onclose = ev => disconnect('close', ev);
+            resetUnresponsiveCheck()
+
+            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)
             }
 
-  function unsubscribe(event: string, listener?: (data: unknown) => void) {
-    const eventListeners = listeners.get(event);
-    if (!eventListeners) return;
+            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)
+    }
 
-    if (!eventListeners.size) {
-      unsubscribeToEvent(event);
+    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
+
+        message_listeners_totag?.delete(listener as (data?: unknown) => void)
+        if (message_listeners_totag.size == 0) {
+            unsubscribeToMessageFromServer(event_type)
         }
-    if (listener) {
-      eventListeners?.delete(listener);
-    } else {
-      listeners.delete(event);
     }
+
+    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);
+        clearTimeout(unresponsiveTimeoutId)
+        unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime)
     }
 
-  function sendEvent(event: string, data: unknown) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return;
-    send([2, event, data]);
+    function emit<T>(event: MessageFns<T>, data: T) {
+        if (!ws || ws.readyState !== WebSocket.OPEN) return
+        const type = getNameFromMessageType(event)
+        const wsm = Message.create() as Record<string, unknown>
+        wsm[type] = data
+        send(wsm as Message)
     }
 
-  function unsubscribeToEvent(event: string) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return;
-    send([1, event]);
+    function unsubscribeToMessageFromServer<T>(event_type: MessageFns<T>) {
+        if (!ws || ws.readyState !== WebSocket.OPEN) return
+        const unsub_msg = Messages.UnsubscribeNotification.create({
+            tag: getTagFromMessageType(event_type)
+        })
+        send(Message.create({ unsubNotif: unsub_msg }))
     }
 
-  function subscribeToEvent(event: string) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return;
-    send([0, event]);
+    function subscribeToEvent<T>(event_type: MessageFns<T>) {
+        if (!ws || ws.readyState !== WebSocket.OPEN) return
+        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: {} }))
     }
-    ws.send(serialized);
+
+    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)
+        }
+        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);
+        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 = new Set();
-        listeners.set(event, eventListeners);
-      }
-      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 })
+                }
+            })
+        }
+    }
 }
 
-export const socket = createWebSocket();
+export const socket = createWebSocket()

app/src/lib/stores/telemetry.ts

@@ -1,35 +1,33 @@
-import type { DownloadOTA } from '$lib/types/models';
-import { writable } from 'svelte/store';
+import { DownloadOTAData, RSSIData } from '$lib/platform_shared/message'
+import { writable } from 'svelte/store'
 
-let 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, set, update } = writable(telemetry_data);
+    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
+            })
+        }
     }
-    };
 }
 
-export const telemetry = createTelemetry();
+export const telemetry = createTelemetry()

app/src/lib/types/mathutils.d.ts

@@ -1,17 +1,17 @@
 declare module 'three/src/math/MathUtils' {
-	export function generateUUID(): string;
-	export function clamp(value: number, min: number, max: number): number;
-	export function euclideanModulo(n: number, m: number): number;
-	export function mapLinear(x: number, a1: number, a2: number, b1: number, b2: number): number;
-	export function lerp(x: number, y: number, t: number): number;
-	export function smoothstep(x: number, min: number, max: number): number;
-	export function smootherstep(x: number, min: number, max: number): number;
-	export function randInt(low: number, high: number): number;
-	export function randFloat(low: number, high: number): number;
-	export function randFloatSpread(range: number): number;
-	export function degToRad(degrees: number): number;
-	export function radToDeg(radians: number): number;
-	export function isPowerOfTwo(value: number): boolean;
-	export function ceilPowerOfTwo(value: number): number;
-	export function floorPowerOfTwo(value: number): number;
+    export function generateUUID(): string
+    export function clamp(value: number, min: number, max: number): number
+    export function euclideanModulo(n: number, m: number): number
+    export function mapLinear(x: number, a1: number, a2: number, b1: number, b2: number): number
+    export function lerp(x: number, y: number, t: number): number
+    export function smoothstep(x: number, min: number, max: number): number
+    export function smootherstep(x: number, min: number, max: number): number
+    export function randInt(low: number, high: number): number
+    export function randFloat(low: number, high: number): number
+    export function randFloatSpread(range: number): number
+    export function degToRad(degrees: number): number
+    export function radToDeg(radians: number): number
+    export function isPowerOfTwo(value: number): boolean
+    export function ceilPowerOfTwo(value: number): number
+    export function floorPowerOfTwo(value: number): number
 }

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,165 +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 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
@@ -209,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/types/uzip.d.ts

@@ -1,14 +1,14 @@
 declare module 'uzip' {
     interface UZIP {
-		parse(data: Uint8Array | ArrayBuffer): any;
-		compress(data: any): Uint8Array | ArrayBuffer;
-		compressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer;
-		decompress(data: Uint8Array | ArrayBuffer): any;
-		decompressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer;
-		encode(data: any): Uint8Array | ArrayBuffer;
-		decode(data: Uint8Array | ArrayBuffer): any;
+        parse(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
+        compress(data: Record<string, Uint8Array>): Uint8Array | ArrayBuffer
+        compressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer
+        decompress(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
+        decompressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer
+        encode(data: Record<string, Uint8Array>): Uint8Array | ArrayBuffer
+        decode(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
     }
 
-	const uzip: UZIP;
-	export default uzip;
+    const uzip: UZIP
+    export default uzip
 }

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

@@ -1,15 +1,15 @@
-export class throttler {
-	private _throttlePause: boolean;
+export class Throttler {
+    private _throttlePause: boolean
     constructor() {
-		this._throttlePause = false;
+        this._throttlePause = false
     }
-	throttle = (callback: Function, time: number) => {
-		if (this._throttlePause) return;
+    throttle = (callback: () => void, time: number) => {
+        if (this._throttlePause) return
 
-		this._throttlePause = true;
+        this._throttlePause = true
         setTimeout(() => {
-			callback();
-			this._throttlePause = false;
-		}, time);
-	};
+            callback()
+            this._throttlePause = false
+        }, time)
+    }
 }

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

@@ -1,6 +1,6 @@
 export const daisyColor = (name: string, opacity: number = 100) => {
-  const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-  if (opacity >= 100) return color;
-  const alpha = Math.min(Math.max(opacity, 0), 100) / 100;
-  return `${color.replace(/(\/\s*\d+(\.\d+)?\))|\)$/, '')} / ${alpha})`;
-};
+    const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+    if (opacity >= 100) return color
+    const alpha = Math.min(Math.max(opacity, 0), 100) / 100
+    return `${color.replace(/(\/\s*\d+(\.\d+)?\))|\)$/, '')} / ${alpha})`
+}

app/src/lib/utilities/index.ts

@@ -1,9 +1,9 @@
-export * from './result';
-export * from './string-utilities';
-export * from './svelte-utilities';
-export * from './math-utilities';
-export * from './buffer-utilities';
-export * from './model-utilities';
-export * from './position-utilities';
-export * from './string-utilities';
-export * from './color-utilities';
+export * from './result'
+export * from './string-utilities'
+export * from './svelte-utilities'
+export * from './math-utilities'
+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/math-utilities.ts

@@ -1,18 +1,18 @@
 export const toUint8 = (number: number, min: number, max: number) => {
-	number = Math.max(min, Math.min(max, number));
-	let scaled = ((number - min) / (max - min)) * 255;
-	return Math.round(scaled) & 0xff;
-};
+    number = Math.max(min, Math.min(max, number))
+    const scaled = ((number - min) / (max - min)) * 255
+    return Math.round(scaled) & 0xff
+}
 
 export const toInt8 = (number: number, min: number, max: number) => {
-	number = Math.max(min, Math.min(max, number));
-	let scaled = ((number - min) / (max - min)) * 255 - 128;
-	return Math.max(-128, Math.min(127, Math.round(scaled))) | 0;
-};
+    number = Math.max(min, Math.min(max, number))
+    const scaled = ((number - min) / (max - min)) * 255 - 128
+    return Math.max(-128, Math.min(127, Math.round(scaled))) | 0
+}
 
 export const fromInt8 = (int8: number, min: number, max: number) => {
-	int8 = Math.max(-128, Math.min(127, int8));
-	const scaled = (int8 + 128) / 255;
-	const number = scaled * (max - min) + min;
-	return number;
-};
+    int8 = Math.max(-128, Math.min(127, int8))
+    const scaled = (int8 + 128) / 255
+    const number = scaled * (max - min) + min
+    return number
+}

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'
@@ -6,6 +6,7 @@ import { currentVariant, jointNames, model } from '$lib/stores'
 import uzip from 'uzip'
 import { fileService } from '$lib/services'
 import { get } from 'svelte/store'
+import { resolve } from '$app/paths'
 
 let model_xml: XMLDocument
 
@@ -27,16 +28,18 @@ export const cacheModelFiles = async () => {
     const files = uzip.parse(await data.arrayBuffer())
 
     for (const [path, data] of Object.entries(files) as [path: string, data: Uint8Array][]) {
-    const url = new URL(path, window.location.href)
-    fileService?.saveFile(url.toString(), data)
+        const normalizedPath = path.startsWith('/') ? path : '/' + path
+        const resolvedUrl = `${resolve('/')}${normalizedPath}`
+        fileService?.saveFile(resolvedUrl, data)
+        fileService?.saveFile(normalizedPath, data)
     }
 }
 
 export const loadModel = async (url: string): Promise<Result<[URDFRobot, string[]], string>> => {
     const urdfLoader = new URDFLoader()
-  urdfLoader.workingPath = LoaderUtils.extractUrlBase(url)
 
-  let xml = url.endsWith('.xacro') ? await loadXacro(url) : await fetch(url).then(res => res.text())
+    let xml =
+        url.endsWith('.xacro') ? await loadXacro(url) : await fetch(url).then(res => res.text())
 
     if (typeof xml === 'string') {
         xml = new window.DOMParser().parseFromString(xml, 'text/xml')

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

@@ -1,84 +0,0 @@
-class SunCalculator {
-	calculateSunElevation(lat: number = 55, lon: number = 12) {
-		const now = new Date();
-		const JD = this.getJulianDate(now);
-		const solarDec = this.getSolarDeclination(JD);
-		const solarTime = this.getSolarTime(now, lon);
-
-		const hourAngle = (solarTime - 12) * 15;
-		const elevation = Math.asin(
-			Math.sin(this.degToRad(lat)) * Math.sin(solarDec) +
-				Math.cos(this.degToRad(lat)) * Math.cos(solarDec) * Math.cos(this.degToRad(hourAngle))
-		);
-
-		return this.radToDeg(elevation);
-	}
-
-	getJulianDate(date: Date) {
-		const Y = date.getUTCFullYear();
-		const M = date.getUTCMonth() + 1;
-		const D =
-			date.getUTCDate() +
-			date.getUTCHours() / 24 +
-			date.getUTCMinutes() / 1440 +
-			date.getUTCSeconds() / 86400;
-		const A = Math.floor((14 - M) / 12);
-		const Y1 = Y + 4800 - A;
-		const M1 = M + 12 * A - 3;
-		return (
-			D +
-			Math.floor((153 * M1 + 2) / 5) +
-			365 * Y1 +
-			Math.floor(Y1 / 4) -
-			Math.floor(Y1 / 100) +
-			Math.floor(Y1 / 400) -
-			32045
-		);
-	}
-
-	getSolarDeclination(JulianDate: number) {
-		const n = JulianDate - 2451545;
-		const L = (280.46 + 0.9856474 * n) % 360;
-		const g = this.degToRad((357.528 + 0.9856003 * n) % 360);
-		const lambda = this.degToRad(L + 1.915 * Math.sin(g) + 0.02 * Math.sin(2 * g));
-		return Math.asin(Math.sin(lambda) * Math.sin(this.degToRad(23.44)));
-	}
-
-	getSolarTime(date: Date, lon: number) {
-		const EoT = this.getEquationOfTime(date);
-		const offset = date.getTimezoneOffset() / 60;
-		const standardMeridian = Math.round(lon / 15) * 15;
-		const solarTime =
-			date.getUTCHours() +
-			(date.getUTCMinutes() + (4 * (standardMeridian - lon) + EoT)) / 60 -
-			offset;
-		return (solarTime + 24) % 24;
-	}
-
-	getEquationOfTime(date: Date) {
-		const JD = this.getJulianDate(date);
-		const n = JD - 2451545;
-		const g = this.degToRad((357.528 + 0.9856003 * n) % 360);
-		const q = this.degToRad((280.46 + 0.9856474 * n) % 360);
-		return (
-			4 *
-			this.radToDeg(
-				0.000075 +
-					0.001868 * Math.cos(q) -
-					0.032077 * Math.sin(g) -
-					0.014615 * Math.cos(2 * q) -
-					0.040849 * Math.sin(2 * g)
-			)
-		);
-	}
-
-	degToRad(deg: number) {
-		return deg * (Math.PI / 180);
-	}
-
-	radToDeg(rad: number) {
-		return rad * (180 / Math.PI);
-	}
-}
-
-export const sunCalculator = new SunCalculator();

app/src/lib/utilities/result/err.ts

@@ -1,18 +1,18 @@
 export class Err<T, U> {
-	#inner: T;
-	#exception?: U;
+    #inner: T
+    #exception?: U
 
     constructor(inner: T, exception?: U) {
-		this.#inner = inner;
-		this.#exception = exception;
+        this.#inner = inner
+        this.#exception = exception
     }
 
     get inner(): T {
-		return this.#inner;
+        return this.#inner
     }
 
     get exception(): U | undefined {
-		return this.#exception;
+        return this.#exception
     }
 
     /**
@@ -20,7 +20,7 @@ export class Err<T, U> {
      * @returns `true` if `Ok`; `false` if `Err`
      */
     isOk(): false {
-		return false;
+        return false
     }
 
     /**
@@ -28,7 +28,7 @@ export class Err<T, U> {
      * @returns `true` if `Err`; `false` if `Ok`
      */
     isErr(): this is Err<T, U> {
-		return true;
+        return true
     }
 
     /**
@@ -37,6 +37,6 @@ export class Err<T, U> {
      * @returns `Err(inner)`
      */
     static new<E, F>(inner: E, exception: F): Err<E, F> {
-		return new Err<E, F>(inner, exception);
+        return new Err<E, F>(inner, exception)
     }
 }

app/src/lib/utilities/result/index.ts

@@ -1,3 +1,3 @@
-export * from './err';
-export * from './ok';
-export * from './result';
+export * from './err'
+export * from './ok'
+export * from './result'

app/src/lib/utilities/result/ok.ts

@@ -1,12 +1,12 @@
 export class Ok<T> {
-	#inner: T;
+    #inner: T
 
     constructor(inner: T) {
-		this.#inner = inner;
+        this.#inner = inner
     }
 
     get inner(): T {
-		return this.#inner;
+        return this.#inner
     }
 
     /**
@@ -14,7 +14,7 @@ export class Ok<T> {
      * @returns `true` if `Ok`; `false` if `Err`
      */
     isOk(): this is Ok<T> {
-		return true;
+        return true
     }
 
     /**
@@ -22,7 +22,7 @@ export class Ok<T> {
      * @returns `true` if `Err`; `false` if `Ok`
      */
     isErr(): false {
-		return false;
+        return false
     }
 
     /**
@@ -31,7 +31,7 @@ export class Ok<T> {
      * @returns `Ok(inner)`
      */
     static new<T>(inner: T): Ok<T> {
-		return new Ok<T>(inner);
+        return new Ok<T>(inner)
     }
 
     /**
@@ -39,6 +39,6 @@ export class Ok<T> {
      * @returns `Ok(void)`
      */
     static void(): Ok<void> {
-		return new Ok(undefined);
+        return new Ok(undefined)
     }
 }

app/src/lib/utilities/result/result.ts

@@ -1,20 +1,20 @@
-import { Err } from './err';
-import { Ok } from './ok';
+import { Err } from './err'
+import { Ok } from './ok'
 
-export type Result<T = unknown, E = unknown, F = unknown> = Ok<T> | Err<E, F>;
+export type Result<T = unknown, E = unknown, F = unknown> = Ok<T> | Err<E, F>
 
-export namespace Result {
+export const Result = {
     /**
      * @returns `Ok<T>`
      */
-	export function ok<T = unknown>(value: T) {
-		return Ok.new(value);
-	}
+    ok<T = unknown>(value: T) {
+        return Ok.new(value)
+    },
 
     /**
      * @returns `Err<E, F>`
      */
-	export function err<E = unknown, F = unknown>(error: E, exception?: F) {
-		return Err.new(error, exception);
+    err<E = unknown, F = unknown>(error: E, exception?: F) {
+        return Err.new(error, exception)
     }
 }

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

@@ -1,16 +1,16 @@
-import { writable } from 'svelte/store';
-import { browser } from '$app/environment';
+import { writable } from 'svelte/store'
+import { browser } from '$app/environment'
 
 export const persistentStore = <T>(key: string, initialValue: T) => {
-	const savedValue = browser ? localStorage.getItem(key) : null;
-	const data: T = savedValue !== null ? JSON.parse(savedValue) : initialValue;
-	const store = writable<T>();
+    const savedValue = browser ? localStorage.getItem(key) : null
+    const data: T = savedValue !== null ? JSON.parse(savedValue) : initialValue
+    const store = writable<T>()
 
     store.subscribe(value => {
-		if (browser) localStorage.setItem(key, JSON.stringify(value));
-	});
+        if (browser) localStorage.setItem(key, JSON.stringify(value))
+    })
 
-	store.set(data);
+    store.set(data)
 
-	return store;
-};
+    return store
+}

app/src/routes/+error.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
     import { page } from '$app/state'
+    import { resolve } from '$app/paths'
 </script>
 
 <div class="flex justify-center items-center w-full h-full">
     <h1>{page.status} {page.error?.message}</h1>
-  <span>Go to <a class="btn btn-primary" href="/">Home page</a></span>
+    <span>Go to <a class="btn btn-primary" href={resolve('/')}>Home page</a></span>
 </div>

app/src/routes/+layout.svelte

@@ -10,20 +10,27 @@
     import Statusbar from '../lib/components/statusbar/statusbar.svelte'
     import {
         telemetry,
-    analytics,
-    ModesEnum,
         kinematicData,
         mode,
-    outControllerData,
+        input,
         servoAngles,
         servoAnglesOut,
         socket,
-    location,
+        apiLocation,
         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,64 +39,60 @@
     let { children }: Props = $props()
 
     const features = useFeatureFlags()
+    const throttler = new Throttler()
 
     onMount(async () => {
-    const ws = $location ? $location : window.location.host
-    socket.init(`ws://${ws}/api/ws/events`)
+        const ws = $apiLocation ? $apiLocation : window.location.host
+        socket.init(`ws://${ws}/api/ws`)
 
         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: any) => console.error(data)
-
-  const handleAnalytics = (data: Analytics) => analytics.addData(data)
-
-  const handleNetworkStatus = (data: number) => telemetry.setRSSI(data)
-
-  const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data)
+    const handleError = (data: unknown) => console.error(data)
 
     let menuOpen = $state(false)
 </script>
@@ -115,14 +118,15 @@
 </div>
 
 <Modals>
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
     {#snippet backdrop()}
         <div
             class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur-sm"
             transition:fade
-      onclick={modals.closeAll}>
-    </div>
+            onclick={modals.closeAll}
+            onkeydown={e => e.key === 'Escape' && modals.closeAll()}
+            role="button"
+            tabindex="0"
+        ></div>
     {/snippet}
 </Modals>
 

app/src/routes/+layout.ts

@@ -6,8 +6,22 @@ const registerFetchIntercept = async () => {
     const fileService = (await import('$lib/services/file-service')).default
     window.fetch = async (resource, config) => {
         const url = resource instanceof Request ? resource.url : resource.toString()
-    const file = await fileService?.getFile(url)
-    return file?.isOk() ? new Response(file.inner) : originalFetch(resource, config)
+
+        let file = await fileService?.getFile(url)
+        if (file?.isOk() && file.inner) return new Response(new Uint8Array(file.inner))
+
+        if (url.startsWith('http')) {
+            try {
+                const urlObj = new URL(url)
+                const pathOnly = urlObj.pathname
+                file = await fileService?.getFile(pathOnly)
+                if (file?.isOk() && file.inner) return new Response(new Uint8Array(file.inner))
+            } catch {
+                console.error('Failed to get file for ', url)
+            }
+        }
+
+        return originalFetch(resource, config)
     }
 }
 

app/src/routes/+page.svelte

@@ -3,11 +3,12 @@
     import Visualization from '$lib/components/Visualization.svelte'
     import { socket } from '$lib/stores'
     import { onMount } from 'svelte'
+    import { resolve } from '$app/paths'
 
     onMount(() => {
         socket.subscribe(isConnected => {
             if (isConnected) {
-        goto('/controller')
+                goto(resolve('/controller'))
             }
         })
     })
@@ -16,12 +17,14 @@
 <div class="hero bg-base-100 h-screen">
     <div class="card md:card-side bg-base-200 shadow-2xl flex justify-center items-center">
         <div class="w-64 h-64">
-      <Visualization sky={false} orbit panel={false} ground={false} />
+            <Visualization defaultColor={null} orbit panel={false} ground={false} />
         </div>
         <div class="card-body w-80">
             <h2 class="card-title text-center text-2xl">Begin you journey</h2>
             <p class="py-6 text-center"></p>
-      <a class="btn btn-primary" href={$socket ? '/controller' : '/connection'}> Add Robot Dog </a>
+            <a class="btn btn-primary" href={resolve($socket ? '/controller' : '/connection')}>
+                Add Robot Dog
+            </a>
         </div>
     </div>
 </div>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Connection from './Connection.svelte';
+    import Connection from './Connection.svelte'
 </script>
 
 <div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">

app/src/routes/connection/+page.ts

@@ -1,7 +1,7 @@
-import type { PageLoad } from './$types';
+import type { PageLoad } from './$types'
 
 export const load = (async () => {
     return {
         title: 'Connection'
-	};
-}) satisfies PageLoad;
+    }
+}) satisfies PageLoad