npm - openship - Versions diffs - 0.1.0 → 0.1.1 - Mend

openship 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (531) hide show

package/apps/desktop/src/preload/index.ts ADDED Viewed

@@ -0,0 +1,88 @@
+/**
+ * Preload script — exposes a safe API to the renderer (onboarding + dashboard).
+ *
+ * This bridges Electron's main process with the web UI via contextBridge.
+ * The renderer never gets direct access to Node.js APIs.
+ */
+import { contextBridge, ipcRenderer } from "electron";
+contextBridge.exposeInMainWorld("desktop", {
+  /** Whether the app is running inside Electron */
+  isDesktop: true,
+  /** Persistent config store */
+  config: {
+    get: (key: string) => ipcRenderer.invoke("config:get", key),
+    set: (key: string, value: unknown) =>
+      ipcRenderer.invoke("config:set", key, value),
+    getAll: () => ipcRenderer.invoke("config:getAll"),
+  },
+  /** App metadata */
+  app: {
+    version: () => ipcRenderer.invoke("app:version"),
+    platform: process.platform,
+    cloudUrls: () => ipcRenderer.invoke("app:cloud-urls"),
+    localUrls: () => ipcRenderer.invoke("app:local-urls"),
+  },
+  /** Navigation */
+  navigate: (url: string) => ipcRenderer.invoke("navigate", url),
+  /** Onboarding helpers */
+  onboarding: {
+    /** Mark onboarding as done, push settings to API, and load the dashboard */
+    complete: (
+      apiUrl: string,
+      dashboardUrl: string,
+      sshPayload?: Record<string, unknown> | null,
+      buildMode?: string,
+    ) =>
+      ipcRenderer.invoke(
+        "onboarding:complete",
+        apiUrl,
+        dashboardUrl,
+        sshPayload,
+        buildMode,
+      ),
+    /** Open a URL in the system browser */
+    openExternal: (url: string) =>
+      ipcRenderer.invoke("onboarding:open-external", url),
+    /** Start cloud authentication flow (opens system browser) */
+    cloudAuth: () => ipcRenderer.invoke("onboarding:cloud-auth"),
+    /** Poll for cloud auth completion — returns { status: "pending" | "resolved" | "expired" } */
+    cloudAuthPoll: (nonce: string) =>
+      ipcRenderer.invoke("onboarding:cloud-auth-poll", nonce),
+    /** Browse for a file (e.g. SSH key) */
+    browseFile: () => ipcRenderer.invoke("onboarding:browse-file"),
+  },
+  /** System utilities */
+  system: {
+    /** Native folder picker — returns absolute path or null */
+    browseFolder: () => ipcRenderer.invoke("system:browse-folder"),
+    /** Get local system settings (SSH creds, etc.) */
+    getSettings: () => ipcRenderer.invoke("system:get-settings"),
+    /** Update local system settings (partial merge) */
+    updateSettings: (settings: Record<string, unknown>) =>
+      ipcRenderer.invoke("system:update-settings", settings),
+  },
+  /** Cloud connection from settings (reconnect without onboarding side-effects) */
+  cloud: {
+    /** Start cloud connect flow — opens system browser with PKCE */
+    connect: () => ipcRenderer.invoke("cloud:connect"),
+    /** Poll for connect completion */
+    connectPoll: (nonce: string) => ipcRenderer.invoke("cloud:connect-poll", nonce),
+  },
+  /** Reset config and return to onboarding */
+  reset: () => ipcRenderer.invoke("app:reset"),
+});

package/apps/desktop/src/renderer/index.html ADDED Viewed

@@ -0,0 +1,462 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src *; img-src 'self' data:; font-src 'self' https://cdn.oblien.com;"
+    />
+    <title>Openship</title>
+    <link rel="preconnect" href="https://cdn.oblien.com" crossorigin />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <!-- Aurora background -->
+    <div class="aurora">
+      <div class="aurora-blob aurora-core"></div>
+      <div class="aurora-blob aurora-left"></div>
+      <div class="aurora-blob aurora-right"></div>
+    </div>
+    <div id="app">
+      <!-- ═══ Top bar ═══ -->
+      <div class="top-bar">
+        <div class="logo">
+          <div class="logo-circle" aria-hidden="true"></div>
+          <span class="logo-text">Openship</span>
+        </div>
+        <div class="top-bar-links">
+          <button class="top-bar-link" id="link-website" title="Website">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+          </button>
+          <button class="top-bar-link" id="link-github" title="GitHub">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.1.82-.26.82-.58v-2.02c-3.34.73-4.04-1.61-4.04-1.61a3.18 3.18 0 0 0-1.33-1.76c-1.09-.74.08-.73.08-.73a2.52 2.52 0 0 1 1.84 1.24 2.56 2.56 0 0 0 3.5 1 2.56 2.56 0 0 1 .76-1.6c-2.67-.3-5.47-1.33-5.47-5.93a4.64 4.64 0 0 1 1.24-3.22 4.3 4.3 0 0 1 .12-3.18s1-.32 3.3 1.23a11.38 11.38 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23a4.3 4.3 0 0 1 .12 3.18 4.64 4.64 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92a2.87 2.87 0 0 1 .82 2.23v3.29c0 .32.21.7.82.58A12 12 0 0 0 12 .3"/></svg>
+          </button>
+        </div>
+      </div>
+      <!-- ═══ Screen 1: Choose path ═══ -->
+      <section id="screen-choose" class="screen active">
+        <div class="screen-inner screen-inner--wide">
+          <div class="choose-header anim-fade anim-d1">
+            <h1>Welcome to Openship</h1>
+            <p class="subtitle">Choose how you'd like to run Openship. Both options give you every feature — and you can switch anytime.</p>
+          </div>
+          <div class="cards-row anim-fade anim-d2">
+            <!-- Cloud card -->
+            <div class="choice-card" id="card-cloud">
+              <div class="card-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
+                </svg>
+              </div>
+              <h3>Openship Cloud</h3>
+              <p class="card-desc">We handle infrastructure, updates, and backups. Just sign in and start deploying.</p>
+              <ul class="card-perks">
+                <li>No server needed</li>
+                <li>Free tier included</li>
+                <li>Managed &amp; always up to date</li>
+              </ul>
+              <button id="btn-cloud" class="btn-card btn-card--accent">
+                Continue with Cloud
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+              </button>
+            </div>
+            <!-- Vertical divider -->
+            <div class="cards-divider">
+              <div class="divider-line"></div>
+              <span class="divider-label">or</span>
+              <div class="divider-line"></div>
+            </div>
+            <!-- Self-host card -->
+            <div class="choice-card" id="card-selfhost">
+              <div class="card-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="2" y="2" width="20" height="8" rx="2" />
+                  <rect x="2" y="14" width="20" height="8" rx="2" />
+                  <circle cx="6" cy="6" r="1" fill="currentColor" />
+                  <circle cx="6" cy="18" r="1" fill="currentColor" />
+                </svg>
+              </div>
+              <h3>Self-Hosted</h3>
+              <p class="card-desc">Run Openship on your own hardware. Connect a remote server or use this machine.</p>
+              <ul class="card-perks">
+                <li>Full data ownership</li>
+                <li>Remote server or this Mac</li>
+                <li>We handle the rest</li>
+              </ul>
+              <button id="btn-selfhost" class="btn-card btn-card--outline">
+                Set Up My Server
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+              </button>
+            </div>
+          </div>
+          <p class="migrate-note anim-fade anim-d3">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"/></svg>
+            Switch between Cloud and Self-Hosted anytime with one click — no lock-in, ever.
+          </p>
+          <p class="version-text anim-fade anim-d3" id="app-version"></p>
+        </div>
+      </section>
+      <!-- ═══ Screen 2: Self-host sub-choice ═══ -->
+      <section id="screen-selfhost-choice" class="screen">
+        <div class="screen-inner">
+          <button id="btn-selfhost-choice-back" class="btn-back" aria-label="Go back">
+            <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <div class="card-icon card-icon--center">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="2" width="20" height="8" rx="2" />
+              <rect x="2" y="14" width="20" height="8" rx="2" />
+              <circle cx="6" cy="6" r="1" fill="currentColor" />
+              <circle cx="6" cy="18" r="1" fill="currentColor" />
+            </svg>
+          </div>
+          <h2>Where should Openship run?</h2>
+          <p class="subtitle">Pick where to install the Openship platform.<br/>Both options give you full control and data ownership.</p>
+          <div class="selfhost-choices">
+            <!-- Another server -->
+            <button class="selfhost-choice-card" id="btn-choose-remote">
+              <div class="selfhost-choice-icon">
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M21 2H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/>
+                  <path d="M21 14H3a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1z"/>
+                  <circle cx="7" cy="7" r="1" fill="currentColor"/>
+                  <circle cx="7" cy="17" r="1" fill="currentColor"/>
+                </svg>
+              </div>
+              <div class="selfhost-choice-content">
+                <span class="selfhost-choice-title">Another Server</span>
+                <span class="selfhost-choice-desc">Connect to a remote server, VPS, or any machine on your network via SSH</span>
+              </div>
+              <svg class="selfhost-choice-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
+            </button>
+            <!-- This machine -->
+            <button class="selfhost-choice-card" id="btn-choose-local">
+              <div class="selfhost-choice-icon">
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="2" y="3" width="20" height="14" rx="2"/>
+                  <line x1="8" y1="21" x2="16" y2="21"/>
+                  <line x1="12" y1="17" x2="12" y2="21"/>
+                </svg>
+              </div>
+              <div class="selfhost-choice-content">
+                <span class="selfhost-choice-title">This Machine <span class="badge-beta">Beta</span></span>
+                <span class="selfhost-choice-desc">Install Openship right here — no SSH, no remote setup needed</span>
+              </div>
+              <svg class="selfhost-choice-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
+            </button>
+          </div>
+        </div>
+      </section>
+      <!-- ═══ Screen 3: Remote server setup (SSH) ═══ -->
+      <section id="screen-selfhost" class="screen">
+        <div class="screen-inner">
+          <button id="btn-back" class="btn-back" aria-label="Go back">
+            <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <div class="card-icon card-icon--center">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="2" width="20" height="8" rx="2" />
+              <rect x="2" y="14" width="20" height="8" rx="2" />
+              <circle cx="6" cy="6" r="1" fill="currentColor" />
+              <circle cx="6" cy="18" r="1" fill="currentColor" />
+            </svg>
+          </div>
+          <h2>Connect to your server</h2>
+          <p class="subtitle">Enter your server details and choose an auth method.<br/>We'll install and configure everything automatically.</p>
+          <div class="form-group">
+            <label for="input-server-ip">Server IP Address</label>
+            <input id="input-server-ip" type="text" placeholder="123.45.67.89" spellcheck="false" autocomplete="off" />
+          </div>
+          <div class="form-group">
+            <label for="input-server-user">Username</label>
+            <input id="input-server-user" type="text" placeholder="root" value="root" spellcheck="false" autocomplete="off" />
+          </div>
+          <div class="auth-toggle">
+            <button class="auth-tab active" data-auth="password">Password</button>
+            <button class="auth-tab" data-auth="key">SSH Key</button>
+          </div>
+          <div id="auth-password" class="auth-panel active">
+            <div class="form-group">
+              <label for="input-server-password">Password</label>
+              <input id="input-server-password" type="password" placeholder="Server password" autocomplete="off" />
+            </div>
+          </div>
+          <div id="auth-key" class="auth-panel">
+            <div class="form-group">
+              <label for="input-key-path">Key Path</label>
+              <div class="input-with-btn">
+                <input id="input-key-path" type="text" placeholder="~/.ssh/id_rsa" spellcheck="false" autocomplete="off" />
+                <button id="btn-browse-key" class="btn-browse" type="button">Browse</button>
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="input-key-passphrase">Passphrase <span class="label-hint">(optional)</span></label>
+              <input id="input-key-passphrase" type="password" placeholder="Leave blank if none" autocomplete="off" />
+            </div>
+          </div>
+          <!-- Advanced toggle -->
+          <button id="btn-advanced" class="btn-advanced" type="button">
+            <svg class="chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+            Advanced
+          </button>
+          <div id="advanced-panel" class="advanced-panel">
+            <div class="advanced-grid">
+              <div class="form-group">
+                <label for="input-ssh-port">SSH Port</label>
+                <input id="input-ssh-port" type="text" placeholder="22" spellcheck="false" autocomplete="off" />
+              </div>
+              <div class="form-group">
+                <label for="input-jump-host">Jump Host <span class="label-hint">(optional)</span></label>
+                <input id="input-jump-host" type="text" placeholder="user@bastion.example.com" spellcheck="false" autocomplete="off" />
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="input-ssh-args">Extra SSH Arguments <span class="label-hint">(optional)</span></label>
+              <input id="input-ssh-args" type="text" placeholder="-o StrictHostKeyChecking=no" spellcheck="false" autocomplete="off" />
+            </div>
+          </div>
+          <div id="connect-status" class="status-message"></div>
+          <button id="btn-connect" class="btn-primary">Save &amp; Continue</button>
+          <a id="link-tutorial" class="tutorial-link" href="#">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
+            Step-by-step setup tutorial
+          </a>
+        </div>
+      </section>
+      <!-- ═══ Screen 4: Internet access ═══ -->
+      <section id="screen-tunnel" class="screen">
+        <div class="screen-inner">
+          <button id="btn-tunnel-back" class="btn-back" aria-label="Go back">
+            <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <div class="card-icon card-icon--center">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"/>
+              <path d="M2 12h20"/>
+              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+            </svg>
+          </div>
+          <h2>Internet Access</h2>
+          <p class="subtitle">Your server needs a way to be reachable from the internet for webhooks, SSL, and public access.</p>
+          <div class="tunnel-choices">
+            <button class="tunnel-card active" data-tunnel="edge">
+              <div class="tunnel-card-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+                </svg>
+              </div>
+              <div class="tunnel-card-content">
+                <div class="tunnel-card-header">
+                  <span class="tunnel-card-title">Openship Edge</span>
+                  <span class="tunnel-card-badge">Recommended</span>
+                </div>
+                <span class="tunnel-card-desc">Zero config. Automatic SSL, high availability, and DDoS protection — all built in.</span>
+              </div>
+              <div class="tunnel-card-check">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+              </div>
+            </button>
+            <button class="tunnel-card" data-tunnel="cloudflare">
+              <div class="tunnel-card-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                </svg>
+              </div>
+              <div class="tunnel-card-content">
+                <span class="tunnel-card-title">Cloudflare Tunnel</span>
+                <span class="tunnel-card-desc">Use your own Cloudflare account. Free tier available.</span>
+              </div>
+              <div class="tunnel-card-check">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+              </div>
+            </button>
+            <button class="tunnel-card" data-tunnel="ngrok">
+              <div class="tunnel-card-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="4 17 10 11 4 5"/>
+                  <line x1="12" y1="19" x2="20" y2="19"/>
+                </svg>
+              </div>
+              <div class="tunnel-card-content">
+                <span class="tunnel-card-title">ngrok</span>
+                <span class="tunnel-card-desc">Expose services with your ngrok auth token.</span>
+              </div>
+              <div class="tunnel-card-check">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+              </div>
+            </button>
+          </div>
+          <!-- Token input (shown for cloudflare / ngrok) -->
+          <div id="tunnel-token-group" class="form-group" style="display:none;">
+            <label for="input-tunnel-token" id="tunnel-token-label">Token</label>
+            <input id="input-tunnel-token" type="password" placeholder="Paste your token" autocomplete="off" />
+          </div>
+          <!-- Edge login hint (shown when Edge is selected) -->
+          <div id="edge-login-hint" class="pref-hint" style="display:none">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
+            Openship Edge requires an Openship account. You'll sign in to continue.
+          </div>
+          <button id="btn-tunnel-continue" class="btn-primary">Continue</button>
+        </div>
+      </section>
+      <!-- ═══ Screen 5: Preferences ═══ -->
+      <section id="screen-preferences" class="screen">
+        <div class="screen-inner">
+          <button id="btn-pref-back" class="btn-back" aria-label="Go back">
+            <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <div class="card-icon card-icon--center">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+              <circle cx="12" cy="12" r="3"/>
+            </svg>
+          </div>
+          <h2>Build Preferences</h2>
+          <p class="subtitle">Choose how your projects are built when deploying.<br/>You can change this later in settings.</p>
+          <div class="pref-cards">
+            <button class="pref-card active" data-mode="auto">
+              <div class="pref-card-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
+                  <polyline points="7.5 4.21 12 6.81 16.5 4.21"/>
+                  <polyline points="7.5 19.79 7.5 14.6 3 12"/>
+                  <polyline points="21 12 16.5 14.6 16.5 19.79"/>
+                  <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
+                  <line x1="12" y1="22.08" x2="12" y2="12"/>
+                </svg>
+              </div>
+              <div class="pref-card-content">
+                <span class="pref-card-title">Auto</span>
+                <span class="pref-card-desc">We pick the best option per framework</span>
+              </div>
+              <div class="pref-card-check">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+              </div>
+            </button>
+            <button class="pref-card" data-mode="server">
+              <div class="pref-card-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/>
+                </svg>
+              </div>
+              <div class="pref-card-content">
+                <span class="pref-card-title">Remote</span>
+                <span class="pref-card-desc">Build on the deployment server directly</span>
+              </div>
+              <div class="pref-card-check">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+              </div>
+            </button>
+            <button class="pref-card" data-mode="local">
+              <div class="pref-card-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="2" y="3" width="20" height="14" rx="2"/>
+                  <line x1="8" y1="21" x2="16" y2="21"/>
+                  <line x1="12" y1="17" x2="12" y2="21"/>
+                </svg>
+              </div>
+              <div class="pref-card-content">
+                <span class="pref-card-title">Local</span>
+                <span class="pref-card-desc">Build on this Mac, then push to the server</span>
+              </div>
+              <div class="pref-card-check">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+              </div>
+            </button>
+          </div>
+          <p class="pref-hint">
+            Git push deployments always build on the server — this only applies to manual deploys.
+          </p>
+          <button id="btn-pref-continue" class="btn-primary">Continue</button>
+        </div>
+      </section>
+      <!-- ═══ Screen 6: Loading ═══ -->
+      <section id="screen-loading" class="screen">
+        <div class="screen-inner">
+          <div class="spinner" id="loading-spinner"></div>
+          <h2 id="loading-title">Connecting…</h2>
+          <p class="subtitle" id="loading-message">Verifying your server</p>
+          <!-- Action buttons — hidden by default, shown by onboarding.js -->
+          <div id="loading-actions" class="loading-actions">
+            <button id="loading-btn-retry" class="loading-btn loading-btn--accent">Retry</button>
+            <button id="loading-btn-open" class="loading-btn loading-btn--outline">Open in Browser</button>
+            <button id="loading-btn-back" class="loading-btn loading-btn--text">&larr; Back</button>
+          </div>
+        </div>
+      </section>
+    </div>
+    <script src="./onboarding.js"></script>
+  </body>
+</html>