commaai · fedyk · Nov 21, 2024 · Nov 21, 2024 · Nov 22, 2024 · Nov 22, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,10 +6,7 @@
     "node": true
   },
   "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react/jsx-runtime",
-    "plugin:react-hooks/recommended"
+    "eslint:recommended"
   ],
   "ignorePatterns": [
     "node_modules",
@@ -25,24 +22,13 @@
       "version": "detect"
     }
   },
-  "plugins": [
-    "react-refresh"
-  ],
   "rules": {
     "no-constant-condition": [
       "error",
       {
         "checkLoops": false
       }
     ],
-    "no-inner-declarations": "off",
-    "react/jsx-no-target-blank": "off",
-    "react/prop-types": "off",
-    "react-refresh/only-export-components": [
-      "warn",
-      {
-        "allowConstantExport": true
-      }
-    ]
+    "no-inner-declarations": "off"
   }
 }
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -14,27 +14,19 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
-  build:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v1
-
       - run: bun install
-      - run: bun run build
-
+      - uses: actions/configure-pages@v3
       - uses: actions/upload-pages-artifact@v3
         with:
-          path: ./dist
-
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/master'
-    needs: build
-    steps:
+          path: '.'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
@@ -20,4 +20,4 @@ jobs:
 
       - run: bun install
       - run: bun lint
-      - run: bun vitest
+      - run: bun test
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -2,17 +2,197 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/app/icon.svg" />
+    <link rel="icon" type="image/svg+xml" href="src/app/icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
       content="Update your comma device to the latest software"
     />
     <title>flash.comma.ai</title>
+    <link href="./node_modules/@fontsource-variable/inter/index.css" rel="stylesheet">
+    <link href="./node_modules/@fontsource-variable/jetbrains-mono/index.css" rel="stylesheet">
+    <link href="./src/tailwindcss.css" rel="stylesheet">
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <div class="flex flex-col lg:flex-row flex-wrap">
+      <main class="p-12 md:p-16 lg:p-20 xl:p-24 w-screen max-w-none lg:max-w-prose lg:w-auto h-auto lg:h-screen lg:overflow-y-auto prose dark:prose-invert prose-green bg-white dark:bg-gray-900">
+        <section>
+          <img src="src/assets/comma.svg" alt="comma" width="128" height="128" class="dark:invert" />
+          <h1>flash.comma.ai</h1>
+          <p>This tool allows you to flash AGNOS onto your comma device.</p>
+          <p>
+            AGNOS is the Ubuntu-based operating system for your 
+            <a href="https://comma.ai/shop/comma-3x" target="_blank">comma 3/3X</a>.
+          </p>
+        </section>
+        <hr />
+
+        <section>
+          <h2>Requirements</h2>
+          <ul>
+            <li>
+              A web browser which supports WebUSB (such as Google Chrome, Microsoft Edge, Opera), running on Windows, macOS, Linux, or Android.
+            </li>
+            <li>
+              A USB-C cable to power your device outside the car.
+            </li>
+            <li>
+              Another USB-C cable to connect the device to your computer.
+            </li>
+          </ul>
+          <h3>USB Driver</h3>
+          <p>
+            You need additional driver software for Windows before you connect
+            your device.
+          </p>
+          <ol>
+            <li>
+              Download and install <a href="https://zadig.akeo.ie/">Zadig</a>.
+            </li>
+            <li>
+              Under <code>Device</code> in the menu bar, select <code>Create New Device</code>.
+              <img
+                src="src/assets/zadig_create_new_device.png"
+                alt="Zadig Create New Device"
+                width="575"
+                height="254"
+              />
+            </li>
+            <li>
+              Fill in three fields. The first field is just a description and
+              you can fill in anything.  The next two fields are very important.
+              Fill them in with <code>05C6</code> and <code>9008</code> respectively.
+              Press &quot;Install Driver&quot; and give it a few minutes to install.
+              <img
+                src="src/assets/zadig_form.png"
+                alt="Zadig Form"
+                width="575"
+                height="254"
+              />
+            </li>
+          </ol>
+          <p>
+            No additional software is required for macOS or Linux.
+          </p>
+        </section>
+        <hr />
+
+        <section>
+          <h2>QDL Mode</h2>
+          <p>Follow these steps to put your device into QDL mode:</p>
+          <ol>
+            <li>Power off the device and wait for the LEDs to switch off.</li>
+            <li>Connect the device to your computer using the USB-C port <strong>(port 2)</strong>.</li>
+            <li>Connect power to the OBD-C port <strong>(port 1)</strong>.</li>
+            <li>The device then should be visible as an option when choosing the device to flash</li>
+          </ol>
+          <img
+            src="src/assets/fastboot-ports.svg"
+            alt="image showing comma three and two ports. the upper port is labeled 1. the lower port is labeled 2."
+            width="450"
+            height="300"
+          />
+        </section>
+        <hr />
+
+        <section>
+          <h2>Flashing</h2>
+          <p>
+            After your device is in QDL mode, you can click the button to start flashing. A prompt may appear to
+            select a device; choose the device starts with <code>QUSB_BULK</code>.
+          </p>
+          <p>
+            The process can take 30+ minutes depending on your internet connection and system performance. Do not
+            unplug the device until all steps are complete.
+          </p>
+        </section>
+        <hr />
+
+        <section>
+          <h2>Troubleshooting</h2>
+          <h3>Too slow</h3>
+          <p>
+            It is recommended that you use a USB 3.0 cable when flashing since it will speed up the flashing time by a lot.
+          </p>
+          <h3>Cannot enter QDL</h3>
+          <p>
+            Try using a different USB cable or USB port. Sometimes USB 2.0 ports work better than USB 3.0 (blue) ports.
+            If you&apos;re using a USB hub, try connecting the device directly to your computer, or alternatively use a
+            USB hub between your computer and the device.
+          </p>
+          <h3>My device&apos;s screen is blank</h3>
+          <p>
+            The device screen will be blank in QDL mode, but you can verify that it is in QDL if the device shows up
+            when you press the Flash icon.
+          </p>
+          <h3>After flashing, device says unable to mount data partition</h3>
+          <p>
+            This is expected after the filesystem is erased. Press confirm to finish resetting your device.
+          </p>
+          <h3>General Tips</h3>
+          <ul>
+            <li>Try another computer or OS</li>
+            <li>Try different USB ports on your computer</li>
+            <li>Try different USB-C cables, including the OBD-C cable that came with the device</li>
+          </ul>
+          <h3>Other questions</h3>
+          <p>
+            If you need help, join our <a href="https://discord.comma.ai" target="_blank">Discord server</a> and go to
+            the <strong>#hw-three-3x</strong> channel.
+          </p>
+        </section>
+
+        <div class="hidden lg:block">
+          <hr />
+          flash.comma.ai version: <code>dev</code>
+        </div>
+      </main>
+
+      <div id="root" class="lg:flex-1 h-[700px] lg:h-screen bg-gray-100 dark:bg-gray-800">
+        <div class="text-black dark:text-white">Loading...</div>
+      </div>
+
+      <div class="w-screen max-w-none p-12 md:p-16 prose dark:prose-invert bg-white dark:bg-gray-900 lg:hidden">
+        flash.comma.ai version: <code>dev</code>
+      </div>
+    </div>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "preact": "./node_modules/preact/dist/preact.mjs",
+          "preact/hooks": "./node_modules/preact/hooks/dist/hooks.mjs",
+          "comlink": "./node_modules/comlink/dist/esm/comlink.mjs",
+          "crc-32": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
+          "jssha": "./node_modules/jssha/dist/sha.mjs",
+          "xz-decompress": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
+        }
+      }
+    </script>
+    <link rel="modulepreload" href="node_modules/preact/dist/preact.mjs" />
+    <link rel="modulepreload" href="node_modules/preact/hooks/dist/hooks.mjs" />
+    <link rel="modulepreload" href="node_modules/comlink/dist/esm/comlink.mjs" />
+    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm" />
+    <link rel="modulepreload" href="node_modules/jssha/dist/sha.mjs" />
+    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm" />
+    <link rel="modulepreload" href="src/app/Flash.js" />
+    <link rel="modulepreload" href="src/config.js" />
+    <link rel="modulepreload" href="src/QDL/utils.js" />
+    <link rel="modulepreload" href="src/QDL/qdl.js" />
+    <link rel="modulepreload" href="src/QDL/gpt.js" />
+    <link rel="modulepreload" href="src/QDL/usblib.js" />
+    <link rel="modulepreload" href="src/QDL/sahara.js" />
+    <link rel="modulepreload" href="src/QDL/firehose.js" />
+    <link rel="modulepreload" href="src/QDL/saharaDefs.js" />
+    <link rel="modulepreload" href="src/QDL/xmlParser.js" />
+    <link rel="modulepreload" href="src/QDL/sparse.js" />
+    <link rel="modulepreload" href="src/utils/flash.js" />
+    <link rel="modulepreload" href="src/utils/blob.js" />
+    <link rel="modulepreload" href="src/utils/image.js" />
+    <link rel="modulepreload" href="src/utils/manifest.js" />
+    <link rel="modulepreload" href="src/utils/progress.js" />
+    <link rel="modulepreload" href="src/workers/image.worker.js" />
+    <script type="module" src="src/main.js"></script>
     <script
       defer
       data-domain="flash.comma.ai"

diff --git a/package.json b/package.json
@@ -5,9 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "start": "vite preview",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives",
+    "start": "python3 -m http.server 5173",
+    "lint": "eslint . --ext js --report-unused-disable-directives",
     "test": "vitest"
   },
   "engines": {
@@ -17,29 +16,10 @@
     "@fontsource-variable/inter": "^5.0.18",
     "@fontsource-variable/jetbrains-mono": "^5.0.21",
     "comlink": "^4.4.1",
-    "crc-32": "^1.2.2",
     "jssha": "^3.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "xz-decompress": "^0.2.1"
+    "preact": "^10.25.0"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.13",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "autoprefixer": "10.4.14",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "jsdom": "^22.1.0",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
-    "vite": "^5.2.12",
-    "vite-svg-loader": "^5.1.0",
-    "vitest": "^1.6.0"
+    "eslint": "^8.57.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/src/QDL/firehose.js b/src/QDL/firehose.js
@@ -1,6 +1,6 @@
-import { xmlParser } from "./xmlParser"
-import { concatUint8Array, containsBytes, compareStringToBytes, sleep, readBlobAsBuffer } from "./utils"
-import * as Sparse from "./sparse"
+import { xmlParser } from "./xmlParser.js"
+import { concatUint8Array, containsBytes, compareStringToBytes, sleep, readBlobAsBuffer } from "./utils.js"
+import * as Sparse from "./sparse.js"
 
 
 class response {

diff --git a/src/QDL/gpt.js b/src/QDL/gpt.js
@@ -1,12 +1,13 @@
-import { containsBytes, bytes2Number } from "./utils"
-import { buf as crc32 } from "crc-32"
+import { containsBytes, bytes2Number } from "./utils.js"
+import CRC32 from "crc-32"
 
 export const AB_FLAG_OFFSET = 6;
 export const AB_PARTITION_ATTR_SLOT_ACTIVE = (0x1 << 2);
 export const PART_ATT_PRIORITY_BIT = BigInt(48)
 export const PART_ATT_ACTIVE_BIT = BigInt(50)
 export const PART_ATT_ACTIVE_VAL = BigInt(0x1) << PART_ATT_ACTIVE_BIT
 
+const crc32 = CRC32.buf
 const efiType = {
   0x00000000 : "EFI_UNUSED",
   0xEBD0A0A2 : "EFI_BASIC_DATA",

diff --git a/src/QDL/qdl.js b/src/QDL/qdl.js
@@ -1,8 +1,8 @@
-import * as gpt from "./gpt"
-import { usbClass } from "./usblib"
-import { Sahara } from  "./sahara"
-import { Firehose } from "./firehose"
-import { concatUint8Array, runWithTimeout, containsBytes } from "./utils"
+import * as gpt from "./gpt.js"
+import { usbClass } from "./usblib.js"
+import { Sahara } from  "./sahara.js"
+import { Firehose } from "./firehose.js"
+import { concatUint8Array, runWithTimeout, containsBytes } from "./utils.js"
 
 
 export class qdlDevice {

diff --git a/src/QDL/sahara.js b/src/QDL/sahara.js
@@ -1,6 +1,6 @@
-import { CommandHandler, cmd_t, sahara_mode_t, status_t, exec_cmd_t } from "./saharaDefs"
-import { concatUint8Array, packGenerator, readBlobAsBuffer } from "./utils";
-import config from "@/config"
+import { CommandHandler, cmd_t, sahara_mode_t, status_t, exec_cmd_t } from "./saharaDefs.js"
+import { concatUint8Array, packGenerator, readBlobAsBuffer } from "./utils.js";
+import config from "../config.js"
 
 
 export class Sahara {

diff --git a/src/QDL/saharaDefs.js b/src/QDL/saharaDefs.js
@@ -1,4 +1,4 @@
-import { structHelper_io } from "./utils"
+import { structHelper_io } from "./utils.js"
 
 
 export const cmd_t = {

diff --git a/src/QDL/sparse.js b/src/QDL/sparse.js
@@ -1,4 +1,4 @@
-import { readBlobAsBuffer } from "./utils";
+import { readBlobAsBuffer } from "./utils.js";
 
 const FILE_MAGIC = 0xed26ff3a;
 export const FILE_HEADER_SIZE = 28;

diff --git a/src/QDL/usblib.js b/src/QDL/usblib.js
@@ -1,4 +1,4 @@
-import { concatUint8Array, sleep } from "./utils";
+import { concatUint8Array, sleep } from "./utils.js";
 
 const vendorID = 0x05c6;
 const productID = 0x9008;