Merge guided flow

README.md

@@ -16,3 +16,10 @@ bun dev
 Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
 
 You can start editing the page by modifying `src/app/index.jsx`. The page auto-updates as you edit the file.
+
+
+**Helpful for debugging**
+* [chrome://usb-internals/](chrome://usb-internals/)
+* [chrome://device-log/](chrome://device-log/)
+* Add `?fast=1` to the URL to skip flashing the system partition (the slowest). Useful for testing the full flow quickly.
+* Add `?windows=1` to the URL to force Windows mode (shows Zadig driver instructions). Useful for testing the Windows flow on other platforms.

deploy-preview.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+set -e
+
+BRANCH="${1:-$(git branch --show-current)}"
+
+bun run build
+bunx wrangler pages deploy dist --project-name=connect --branch="$BRANCH"
+
+echo ""
+echo "Preview URL: https://${BRANCH}.connect-d5y.pages.dev"

src/app.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
-      content="Update your comma device to the latest software"
+      content="Restore your comma device to a fresh factory state"
     />
     <title>flash.comma.ai</title>
     %sveltekit.head%

src/lib/config.js

@@ -3,7 +3,6 @@ const config = {
     release_mici: 'https://raw.githubusercontent.com/commaai/openpilot/ccf7361798a2b7ff36f5065dffb602eb40c22302/system/hardware/tici/all-partitions.json',
     release_tizi: 'https://raw.githubusercontent.com/commaai/openpilot/927548621be1be0c2c9063868b93d1f5020904de/system/hardware/tici/all-partitions.json',
     release_tici: 'https://raw.githubusercontent.com/commaai/openpilot/927548621be1be0c2c9063868b93d1f5020904de/system/hardware/tici/all-partitions.json',
-    master: 'https://raw.githubusercontent.com/commaai/openpilot/master/system/hardware/tici/all-partitions.json',
   },
   loader: {
     url: 'https://raw.githubusercontent.com/commaai/flash/master/src/QDL/programmer.bin',

src/lib/icons/CommaIcon.svelte

@@ -0,0 +1,7 @@
+<script>
+  let {class: className} = $props();
+</script>
+
+<svg class={className} viewBox="2 3 42 42" fill="currentColor">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.6964 40C16.6964 39.2596 16.6385 38.6393 16.7236 38.0415C16.7599 37.7865 17.0575 37.5135 17.3001 37.3595C18.4832 36.6087 19.7684 36.0092 20.8699 35.1481C24.4378 32.3587 26.5526 28.6866 26.6682 23.9166C26.7009 22.5622 26.203 22.2238 25.0654 22.7514C21.7817 24.2746 18.2505 23.3815 16.3659 20.5509C14.3107 17.4636 14.6001 13.3531 17.0626 10.6562C20.2079 7.21156 25.3833 7.10849 28.9522 10.3982C31.09 12.3688 32.1058 14.9132 32.3591 17.8074C33.2084 27.5032 28.3453 35.495 19.4941 39.0057C18.6181 39.353 17.7198 39.6382 16.6964 40Z" />
+</svg>

src/lib/icons/DiscordIcon.svelte

@@ -0,0 +1,7 @@
+<script>
+  let {class: className} = $props();
+</script>
+
+<svg class={className} viewBox="0 0 24 24" fill="currentColor">
+  <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+</svg>

src/lib/icons/GitHubIcon.svelte

@@ -0,0 +1,7 @@
+<script>
+  let {class: className} = $props();
+</script>
+
+<svg class={className} viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
+</svg>

src/lib/utils/image.js

@@ -9,7 +9,7 @@ import { fetchStream } from "./stream";
  * @returns {void}
  */
 
-const MIN_QUOTA_MB = 5250;
+const MIN_QUOTA_GB = 5.25;
 
 export class ImageManager {
   /** @type {FileSystemDirectoryHandle} */
@@ -18,14 +18,22 @@ export class ImageManager {
   async init() {
     if (!this.root) {
       this.root = await globalThis.navigator.storage.getDirectory()
-      await this.root.remove({ recursive: true })
+      // Clean up any leftover files from previous sessions
+      try {
+        await this.root.remove({ recursive: true })
+      } catch (e) {
+        // Ignore errors - directory might not exist or be empty
+        console.debug('[ImageManager] Could not remove old directory:', e)
+      }
+      // Re-get the directory after removal
+      this.root = await navigator.storage.getDirectory()
       console.info('[ImageManager] Initialized')
     }
 
     const estimate = await globalThis.navigator.storage.estimate()
-    const quotaMB = (estimate.quota || 0) / (1024 ** 2)
-    if (quotaMB < MIN_QUOTA_MB) {
-      throw new Error(`Not enough storage: ${quotaMB.toFixed(0)}MB free, need ${MIN_QUOTA_MB.toFixed(0)}MB`)
+    const quotaGB = (estimate.quota || 0) / (1024 ** 3)
+    if (quotaGB < MIN_QUOTA_GB) {
+      throw new Error(`Not enough storage: ${quotaGB.toFixed(1)}GB free, need ${MIN_QUOTA_GB.toFixed(1)}GB`)
     }
   }