feat: initial Dragon Wind Desktop scaffold

- Electron tray app (main, preload, renderer) - Parallel chunked HTTP transfer engine - Dragon Wind server client (auth + multipart API) - Upload queue UI with progress, speed, ETA - Folder browser with search - Settings (workers, chunk size) - Server API docs for desktop multipart endpoints
2026-04-06 23:17:07 -04:00 · 2026-04-06 23:17:07 -04:00 · ebc5b9a6ce
commit ebc5b9a6ce
9 changed files with 1925 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,7 @@
+node_modules/
+dist/
+out/
+.env
+*.log
+.DS_Store
+Thumbs.db
--- a/README.md
+++ b/README.md
@ -0,0 +1,58 @@
+# Dragon Wind Desktop
+
+Native Electron desktop uploader for [Dragon Wind](https://forge.wilddragon.net/zgaetano/VPM-Uploader) / Grass Valley AMPP.
+
+High-speed parallel file transfers to S3 — same approach as MASV and Aspera. No browser, no extension, no UDP firewall headaches.
+
+## How it works
+
+Files are split into chunks and uploaded concurrently via presigned S3 PUT URLs. The Dragon Wind server orchestrates multipart uploads; the desktop app drives the data plane directly to S3.
+
+```
+User drops file
+  → Dragon Wind server: POST /api/desktop/multipart/init
+    ← uploadId + N presigned S3 PUT URLs
+  → S3: PUT each chunk in parallel (N workers)
+  → Dragon Wind server: POST /api/desktop/multipart/complete
+    ← done ✅
+```
+
+## Requirements
+
+- Node.js 18+
+- A running Dragon Wind server (v0.x or later with desktop API endpoints)
+- Electron 30+
+
+## Dev
+
+```bash
+npm install
+npm run dev
+```
+
+## Build
+
+```bash
+npm run build:mac    # DMG for macOS (x64 + arm64)
+npm run build:win    # NSIS installer for Windows
+npm run build:linux  # AppImage for Linux
+```
+
+## Server-side additions needed
+
+Add these endpoints to the Dragon Wind `server.js`:
+
+- `POST /api/desktop/multipart/init` — creates S3 multipart upload, returns presigned part URLs
+- `POST /api/desktop/multipart/complete` — completes the multipart upload
+- `POST /api/desktop/multipart/abort` — aborts on cancel/error
+
+See `docs/server-api.md` for full spec.
+
+## Settings
+
+| Setting | Default | Description |
+|---------|---------|-------------|
+| Workers | 6 | Concurrent chunk uploads |
+| Chunk size | 16 MB | Per-part size (min 5 MB, S3 limit) |
+
+Tune workers up on high-bandwidth links (50+ Mbps). Tune chunk size up for high-latency WAN to reduce round trips.
--- a/docs/server-api.md
+++ b/docs/server-api.md
@ -0,0 +1,145 @@
+# Dragon Wind Desktop — Server API Additions
+
+These three endpoints need to be added to `server.js` in the VPM-Uploader repo to support the desktop client.
+
+## POST /api/desktop/multipart/init
+
+Auth: `x-auth-token` header required.
+
+Request:
+```json
+{
+  "filename": "A001C001.mxf",
+  "size": 10737418240,
+  "prefix": "Jobs/2026-04-06",
+  "totalParts": 640
+}
+```
+
+Response:
+```json
+{
+  "uploadId": "abc123...",
+  "key": "Jobs/2026-04-06/A001C001.mxf",
+  "bucket": "vpm-media",
+  "presignedParts": [
+    "https://s3.example.com/vpm-media/Jobs/...",
+    "..."
+  ]
+}
+```
+
+Implementation notes:
+- Call `s3.createMultipartUpload({ Bucket, Key })`
+- For each part 1..totalParts, call `getSignedUrl(s3, new UploadPartCommand({ Bucket, Key, UploadId, PartNumber: i }), { expiresIn: 3600 })`
+- Return all presigned URLs in order
+- Store `{ uploadId, key, bucket, userId }` in memory for completion validation
+
+## POST /api/desktop/multipart/complete
+
+Auth: `x-auth-token` required.
+
+Request:
+```json
+{
+  "uploadId": "abc123...",
+  "key": "Jobs/2026-04-06/A001C001.mxf",
+  "bucket": "vpm-media",
+  "parts": [
+    { "PartNumber": 1, "ETag": "\"abc\"" },
+    { "PartNumber": 2, "ETag": "\"def\"" }
+  ]
+}
+```
+
+Response:
+```json
+{ "success": true }
+```
+
+Implementation notes:
+- Call `s3.completeMultipartUpload({ Bucket, Key, UploadId, MultipartUpload: { Parts: parts } })`
+- Update user uploadedBytes stat
+
+## POST /api/desktop/multipart/abort
+
+Auth: `x-auth-token` required.
+
+Request:
+```json
+{
+  "uploadId": "abc123...",
+  "key": "Jobs/2026-04-06/A001C001.mxf",
+  "bucket": "vpm-media"
+}
+```
+
+Response:
+```json
+{ "success": true }
+```
+
+## Sample Express implementation
+
+```js
+// Add to server.js after existing /api/udp routes
+
+const { UploadPartCommand, CreateMultipartUploadCommand,
+        CompleteMultipartUploadCommand, AbortMultipartUploadCommand } = require('@aws-sdk/client-s3');
+const { getSignedUrl } = require('@aws-sdk/s3-request-presigner');
+
+const desktopSessions = new Map(); // uploadId → { key, bucket, userId }
+
+app.post('/api/desktop/multipart/init', requireAuth, async (req, res) => {
+  const { filename, size, prefix, totalParts } = req.body;
+  if (!filename || !size || !totalParts) return res.status(400).json({ error: 'Missing fields' });
+  const cfg = getConfig();
+  if (!cfg.bucket) return res.status(503).json({ error: 'S3 not configured' });
+
+  const key = prefix ? `${prefix.replace(/\/+$/, '')}/${filename}` : filename;
+
+  try {
+    const create = await s3Client.send(new CreateMultipartUploadCommand({ Bucket: cfg.bucket, Key: key }));
+    const uploadId = create.UploadId;
+
+    const presignedParts = await Promise.all(
+      Array.from({ length: totalParts }, (_, i) =>
+        getSignedUrl(s3Client, new UploadPartCommand({
+          Bucket: cfg.bucket, Key: key, UploadId: uploadId, PartNumber: i + 1,
+        }), { expiresIn: 3600 })
+      )
+    );
+
+    desktopSessions.set(uploadId, { key, bucket: cfg.bucket, userId: req.user.username });
+    res.json({ uploadId, key, bucket: cfg.bucket, presignedParts });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.post('/api/desktop/multipart/complete', requireAuth, async (req, res) => {
+  const { uploadId, key, bucket, parts } = req.body;
+  if (!uploadId || !parts) return res.status(400).json({ error: 'Missing fields' });
+  try {
+    await s3Client.send(new CompleteMultipartUploadCommand({
+      Bucket: bucket, Key: key, UploadId: uploadId,
+      MultipartUpload: { Parts: parts.sort((a, b) => a.PartNumber - b.PartNumber) },
+    }));
+    desktopSessions.delete(uploadId);
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.post('/api/desktop/multipart/abort', requireAuth, async (req, res) => {
+  const { uploadId, key, bucket } = req.body;
+  try {
+    await s3Client.send(new AbortMultipartUploadCommand({ Bucket: bucket, Key: key, UploadId: uploadId }));
+    desktopSessions.delete(uploadId);
+    res.json({ success: true });
+  } catch (err) {
+    res.json({ success: true }); // best-effort
+  }
+});
+```
--- a/package.json
+++ b/package.json
@ -0,0 +1,45 @@
+{
+  "name": "dragon-wind-desktop",
+  "version": "0.1.0",
+  "description": "Dragon Wind Desktop — High-speed file uploader for Grass Valley AMPP",
+  "main": "src/main/main.js",
+  "scripts": {
+    "start": "electron .",
+    "dev": "NODE_ENV=development electron .",
+    "build": "electron-builder",
+    "build:mac": "electron-builder --mac",
+    "build:win": "electron-builder --win",
+    "build:linux": "electron-builder --linux"
+  },
+  "keywords": ["electron", "uploader", "s3", "broadcast", "ampp"],
+  "author": "Wild Dragon",
+  "license": "MIT",
+  "devDependencies": {
+    "electron": "^30.0.0",
+    "electron-builder": "^24.0.0"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.600.0",
+    "@aws-sdk/s3-request-presigner": "^3.600.0",
+    "electron-store": "^10.0.0"
+  },
+  "build": {
+    "appId": "net.wilddragon.dragon-wind-desktop",
+    "productName": "Dragon Wind",
+    "icon": "assets/icon",
+    "mac": {
+      "category": "public.app-category.utilities",
+      "target": [{ "target": "dmg", "arch": ["x64", "arm64"] }]
+    },
+    "win": {
+      "target": [{ "target": "nsis", "arch": ["x64"] }]
+    },
+    "linux": {
+      "target": [{ "target": "AppImage", "arch": ["x64"] }]
+    },
+    "files": ["src/**/*", "assets/**/*"],
+    "extraMetadata": {
+      "main": "src/main/main.js"
+    }
+  }
+}
--- a/src/main/dw-client.js
+++ b/src/main/dw-client.js
@ -0,0 +1,126 @@
+"use strict";
+/**
+ * Dragon Wind Server Client
+ *
+ * Thin wrapper around the Dragon Wind HTTP API.
+ * Handles auth and the new multipart endpoint we'll add server-side.
+ */
+
+const https = require("https");
+const http  = require("http");
+
+class DragonWindClient {
+  constructor(serverUrl) {
+    this.serverUrl = serverUrl.replace(/\/$/, "");
+    this.token     = null;
+  }
+
+  setToken(token) { this.token = token; }
+
+  // ── Auth ────────────────────────────────────────────────────────────────────
+
+  async login(username, password) {
+    try {
+      const res = await this._request("POST", "/api/login", { username, password });
+      if (res.token) {
+        this.token = res.token;
+        return { success: true, token: res.token, role: res.role };
+      }
+      return { success: false, error: res.error || "Login failed" };
+    } catch (err) {
+      return { success: false, error: err.message };
+    }
+  }
+
+  // ── Folders ─────────────────────────────────────────────────────────────────
+
+  async getFolders() {
+    try {
+      const res = await this._request("GET", "/api/folders");
+      return { success: true, tree: res.tree || [] };
+    } catch (err) {
+      return { success: false, error: err.message, tree: [] };
+    }
+  }
+
+  // ── Multipart Upload ─────────────────────────────────────────────────────────
+  //
+  // Requests presigned URLs for every part in one shot.
+  // Server endpoint: POST /api/desktop/multipart/init
+  // Returns: { uploadId, key, bucket, presignedParts: [url, url, ...] }
+
+  async initMultipart({ filename, size, prefix, totalParts }) {
+    try {
+      const res = await this._request("POST", "/api/desktop/multipart/init", {
+        filename, size, prefix, totalParts,
+      });
+      if (res.uploadId) return { success: true, ...res };
+      return { success: false, error: res.error || "Init failed" };
+    } catch (err) {
+      return { success: false, error: err.message };
+    }
+  }
+
+  async completeMultipart({ uploadId, key, bucket, parts }) {
+    try {
+      const res = await this._request("POST", "/api/desktop/multipart/complete", {
+        uploadId, key, bucket, parts,
+      });
+      if (res.success) return { success: true };
+      return { success: false, error: res.error || "Complete failed" };
+    } catch (err) {
+      return { success: false, error: err.message };
+    }
+  }
+
+  async abortMultipart({ uploadId, key, bucket }) {
+    try {
+      await this._request("POST", "/api/desktop/multipart/abort", { uploadId, key, bucket });
+    } catch (_) {}
+  }
+
+  // ── HTTP helper ──────────────────────────────────────────────────────────────
+
+  _request(method, urlPath, body) {
+    return new Promise((resolve, reject) => {
+      const full    = new URL(this.serverUrl + urlPath);
+      const isHttps = full.protocol === "https:";
+      const lib     = isHttps ? https : http;
+
+      const payload = body ? JSON.stringify(body) : null;
+      const options = {
+        hostname: full.hostname,
+        port:     full.port || (isHttps ? 443 : 80),
+        path:     full.pathname + full.search,
+        method,
+        headers: {
+          "Content-Type":  "application/json",
+          "Accept":        "application/json",
+          ...(this.token ? { "x-auth-token": this.token } : {}),
+          ...(payload ? { "Content-Length": Buffer.byteLength(payload) } : {}),
+        },
+        rejectUnauthorized: false,  // allow self-signed for internal deployments
+      };
+
+      const req = lib.request(options, (res) => {
+        let data = "";
+        res.on("data", chunk => { data += chunk; });
+        res.on("end", () => {
+          try {
+            const json = JSON.parse(data);
+            if (res.statusCode >= 200 && res.statusCode < 300) resolve(json);
+            else reject(new Error(json.error || `HTTP ${res.statusCode}`));
+          } catch (e) {
+            reject(new Error(`Parse error: ${data.slice(0, 100)}`));
+          }
+        });
+      });
+
+      req.on("error", reject);
+      if (payload) req.write(payload);
+      req.end();
+    });
+  }
+}
+
+module.exports = { DragonWindClient };
--- a/src/main/main.js
+++ b/src/main/main.js
@ -0,0 +1,263 @@
+"use strict";
+/**
+ * Dragon Wind Desktop — Main Process
+ *
+ * Electron tray application for high-speed file uploads to Dragon Wind / S3.
+ * Architecture mirrors MASV / Aspera: native process owns the transfer engine,
+ * renderer handles UI. No browser UDP limitations.
+ */
+
+const { app, BrowserWindow, Tray, Menu, ipcMain, dialog, nativeImage, shell } = require("electron");
+const path = require("path");
+const Store = require("electron-store");
+const { TransferEngine } = require("./transfer-engine");
+const { DragonWindClient } = require("./dw-client");
+
+// ── Persistent config store ──────────────────────────────────────────────────
+const store = new Store({
+  schema: {
+    serverUrl:  { type: "string", default: "" },
+    authToken:  { type: "string", default: "" },
+    username:   { type: "string", default: "" },
+    workers:    { type: "number", default: 6 },
+    chunkMb:    { type: "number", default: 16 },
+  },
+});
+
+// ── Globals ──────────────────────────────────────────────────────────────────
+let tray         = null;
+let mainWindow   = null;
+let engine       = null;
+let dwClient     = null;
+const isDev      = process.env.NODE_ENV === "development";
+
+// ── App lifecycle ────────────────────────────────────────────────────────────
+app.whenReady().then(() => {
+  // macOS: hide dock icon — we are a tray-only app
+  if (process.platform === "darwin") app.dock.hide();
+
+  createTray();
+  createWindow();
+  initEngine();
+});
+
+app.on("window-all-closed", (e) => {
+  // Keep running in tray — don't quit on window close
+  e.preventDefault();
+});
+
+app.on("before-quit", () => {
+  engine?.shutdown();
+});
+
+// ── Tray ─────────────────────────────────────────────────────────────────────
+function createTray() {
+  const iconPath = path.join(__dirname, "../../assets/tray-icon.png");
+  const icon = nativeImage.createFromPath(iconPath);
+  tray = new Tray(icon.resize({ width: 16, height: 16 }));
+  tray.setToolTip("Dragon Wind");
+  updateTrayMenu();
+  tray.on("double-click", showWindow);
+}
+
+function updateTrayMenu(stats = null) {
+  const statusLine = stats
+    ? `${stats.active} uploading  ·  ${stats.queued} queued  ·  ${formatSpeed(stats.speedBps)}`
+    : "Idle";
+
+  const menu = Menu.buildFromTemplate([
+    { label: "Dragon Wind", enabled: false },
+    { label: statusLine, enabled: false },
+    { type: "separator" },
+    { label: "Open Upload Window", click: showWindow },
+    { label: "Add Files…", click: addFilesFromMenu },
+    { type: "separator" },
+    { label: "Settings", click: openSettings },
+    { type: "separator" },
+    { label: "Quit Dragon Wind", click: () => { app.exit(0); } },
+  ]);
+  tray.setContextMenu(menu);
+}
+
+// ── Main Window ───────────────────────────────────────────────────────────────
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 480,
+    height: 680,
+    minWidth: 400,
+    minHeight: 500,
+    show: false,
+    frame: false,            // custom title bar in renderer
+    resizable: true,
+    backgroundColor: "#060812",
+    titleBarStyle: "hiddenInset",
+    webPreferences: {
+      preload: path.join(__dirname, "preload.js"),
+      contextIsolation: true,
+      nodeIntegration: false,
+      sandbox: false,
+    },
+  });
+
+  mainWindow.loadFile(path.join(__dirname, "../../src/renderer/index.html"));
+
+  if (isDev) mainWindow.webContents.openDevTools({ mode: "detach" });
+
+  mainWindow.on("close", (e) => {
+    e.preventDefault();
+    mainWindow.hide();
+  });
+}
+
+function showWindow() {
+  if (!mainWindow) createWindow();
+  mainWindow.show();
+  mainWindow.focus();
+  if (process.platform === "darwin") app.dock.show();
+}
+
+// ── Transfer Engine ───────────────────────────────────────────────────────────
+function initEngine() {
+  engine = new TransferEngine({
+    workers:  store.get("workers"),
+    chunkMb:  store.get("chunkMb"),
+    onProgress: (job) => {
+      mainWindow?.webContents.send("job:progress", job);
+      updateTrayMenu(engine.getStats());
+    },
+    onComplete: (job) => {
+      mainWindow?.webContents.send("job:complete", job);
+      tray.displayBalloon?.({ title: "Upload complete", content: job.name, iconType: "info" });
+      updateTrayMenu(engine.getStats());
+    },
+    onError: (job) => {
+      mainWindow?.webContents.send("job:error", job);
+      updateTrayMenu(engine.getStats());
+    },
+  });
+}
+
+// ── IPC Handlers ──────────────────────────────────────────────────────────────
+
+// Auth
+ipcMain.handle("auth:login", async (_e, { serverUrl, username, password }) => {
+  dwClient = new DragonWindClient(serverUrl);
+  const result = await dwClient.login(username, password);
+  if (result.success) {
+    store.set("serverUrl", serverUrl);
+    store.set("authToken", result.token);
+    store.set("username", username);
+    dwClient.setToken(result.token);
+  }
+  return result;
+});
+
+ipcMain.handle("auth:logout", () => {
+  store.set("authToken", "");
+  store.set("username", "");
+  dwClient = null;
+  return { success: true };
+});
+
+ipcMain.handle("auth:status", () => {
+  const token = store.get("authToken");
+  const serverUrl = store.get("serverUrl");
+  if (token && serverUrl) {
+    if (!dwClient) {
+      dwClient = new DragonWindClient(serverUrl);
+      dwClient.setToken(token);
+    }
+    return { loggedIn: true, username: store.get("username"), serverUrl };
+  }
+  return { loggedIn: false };
+});
+
+// Folders
+ipcMain.handle("folders:list", async () => {
+  if (!dwClient) return { success: false, error: "Not logged in" };
+  return dwClient.getFolders();
+});
+
+// Upload
+ipcMain.handle("upload:add", async (_e, { files, prefix }) => {
+  if (!dwClient) return { success: false, error: "Not logged in" };
+  const jobs = [];
+  for (const f of files) {
+    const job = await engine.enqueue({ file: f, prefix, dwClient });
+    jobs.push(job);
+  }
+  return { success: true, jobs };
+});
+
+ipcMain.handle("upload:queue", () => {
+  return engine.getQueue();
+});
+
+ipcMain.handle("upload:cancel", (_e, jobId) => {
+  engine.cancel(jobId);
+  return { success: true };
+});
+
+ipcMain.handle("upload:retry", async (_e, jobId) => {
+  if (!dwClient) return { success: false, error: "Not logged in" };
+  return engine.retry(jobId, dwClient);
+});
+
+// File picker
+ipcMain.handle("dialog:pickFiles", async () => {
+  const result = await dialog.showOpenDialog(mainWindow, {
+    title: "Select files to upload",
+    properties: ["openFile", "multiSelections"],
+    filters: [
+      { name: "Media Files", extensions: ["mxf","mp4","mov","avi","r3d","braw","arx","dpx","tif","tiff","wav","aif","aiff","xml","edl","aaf","fcpxml"] },
+      { name: "All Files", extensions: ["*"] },
+    ],
+  });
+  return result.canceled ? [] : result.filePaths;
+});
+
+// Settings
+ipcMain.handle("settings:get", () => ({
+  serverUrl: store.get("serverUrl"),
+  workers:   store.get("workers"),
+  chunkMb:   store.get("chunkMb"),
+}));
+
+ipcMain.handle("settings:set", (_e, settings) => {
+  if (settings.workers !== undefined) {
+    store.set("workers", settings.workers);
+    engine?.setWorkers(settings.workers);
+  }
+  if (settings.chunkMb !== undefined) {
+    store.set("chunkMb", settings.chunkMb);
+    engine?.setChunkSize(settings.chunkMb);
+  }
+  return { success: true };
+});
+
+// Window controls
+ipcMain.on("window:minimize", () => mainWindow?.minimize());
+ipcMain.on("window:hide",     () => mainWindow?.hide());
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function formatSpeed(bps) {
+  if (!bps || bps < 1024) return "0 KB/s";
+  if (bps < 1024 * 1024) return (bps / 1024).toFixed(0) + " KB/s";
+  return (bps / (1024 * 1024)).toFixed(1) + " MB/s";
+}
+
+async function addFilesFromMenu() {
+  showWindow();
+  const paths = await dialog.showOpenDialog(mainWindow, {
+    properties: ["openFile", "multiSelections"],
+    filters: [{ name: "All Files", extensions: ["*"] }],
+  });
+  if (!paths.canceled && paths.filePaths.length) {
+    mainWindow.webContents.send("menu:addFiles", paths.filePaths);
+  }
+}
+
+function openSettings() {
+  showWindow();
+  mainWindow.webContents.send("nav:settings");
+}
--- a/src/main/preload.js
+++ b/src/main/preload.js
@ -0,0 +1,44 @@
+"use strict";
+/**
+ * Preload — context bridge
+ * Exposes a safe, typed API to the renderer process.
+ */
+
+const { contextBridge, ipcRenderer } = require("electron");
+
+contextBridge.exposeInMainWorld("dw", {
+  // Auth
+  login:      (args)  => ipcRenderer.invoke("auth:login", args),
+  logout:     ()      => ipcRenderer.invoke("auth:logout"),
+  authStatus: ()      => ipcRenderer.invoke("auth:status"),
+
+  // Folders
+  getFolders: ()      => ipcRenderer.invoke("folders:list"),
+
+  // Upload
+  addFiles:   (args)  => ipcRenderer.invoke("upload:add", args),
+  getQueue:   ()      => ipcRenderer.invoke("upload:queue"),
+  cancel:     (id)    => ipcRenderer.invoke("upload:cancel", id),
+  retry:      (id)    => ipcRenderer.invoke("upload:retry", id),
+
+  // File picker
+  pickFiles:  ()      => ipcRenderer.invoke("dialog:pickFiles"),
+
+  // Settings
+  getSettings: ()     => ipcRenderer.invoke("settings:get"),
+  setSettings: (s)    => ipcRenderer.invoke("settings:set", s),
+
+  // Window
+  minimize:   ()      => ipcRenderer.send("window:minimize"),
+  hide:       ()      => ipcRenderer.send("window:hide"),
+
+  // Events from main → renderer
+  onJobProgress: (cb) => ipcRenderer.on("job:progress", (_e, job) => cb(job)),
+  onJobComplete: (cb) => ipcRenderer.on("job:complete", (_e, job) => cb(job)),
+  onJobError:    (cb) => ipcRenderer.on("job:error",    (_e, job) => cb(job)),
+  onAddFiles:    (cb) => ipcRenderer.on("menu:addFiles", (_e, paths) => cb(paths)),
+  onNavSettings: (cb) => ipcRenderer.on("nav:settings",  () => cb()),
+
+  // Cleanup
+  removeAllListeners: (channel) => ipcRenderer.removeAllListeners(channel),
+});
--- a/src/main/transfer-engine.js
+++ b/src/main/transfer-engine.js
@ -0,0 +1,325 @@
+"use strict";
+/**
+ * Dragon Wind Transfer Engine
+ *
+ * High-speed parallel chunked upload engine.
+ * Strategy: split each file into chunks, upload chunks concurrently via
+ * presigned S3 PUT URLs fetched from the Dragon Wind server.
+ * Mirrors how MASV and Aspera achieve WAN saturation.
+ *
+ *   File → N chunks → parallel presigned PUT → S3 multipart → complete
+ *
+ * Key knobs:
+ *   workers  — max concurrent chunk uploads across all active jobs (default 6)
+ *   chunkMb  — chunk size in MB (default 16 MB — tunes for WAN RTT)
+ */
+
+const fs   = require("fs");
+const path = require("path");
+const crypto = require("crypto");
+const https  = require("https");
+const http   = require("http");
+
+const MIN_PART_SIZE = 5 * 1024 * 1024;  // S3 minimum 5 MB per part
+
+class TransferEngine {
+  constructor({ workers = 6, chunkMb = 16, onProgress, onComplete, onError }) {
+    this.workers    = workers;
+    this.chunkSize  = chunkMb * 1024 * 1024;
+    this.onProgress = onProgress || (() => {});
+    this.onComplete = onComplete || (() => {});
+    this.onError    = onError    || (() => {});
+
+    this.queue      = new Map();   // jobId → job
+    this.active     = new Set();   // jobIds currently transferring
+    this._stopped   = false;
+    this._running   = 0;           // total concurrent chunk uploads
+  }
+
+  // ── Public API ──────────────────────────────────────────────────────────────
+
+  async enqueue({ file, prefix, dwClient }) {
+    const jobId    = crypto.randomBytes(8).toString("hex");
+    const filename = path.basename(file);
+    const stat     = fs.statSync(file);
+    const size     = stat.size;
+    const chunkSize = Math.max(this.chunkSize, MIN_PART_SIZE);
+    const totalChunks = Math.ceil(size / chunkSize);
+
+    const job = {
+      id:           jobId,
+      name:         filename,
+      file,
+      prefix:       prefix || "",
+      size,
+      chunkSize,
+      totalChunks,
+      status:       "queued",   // queued | uploading | done | error | cancelled
+      uploadedBytes: 0,
+      speedBps:     0,
+      percent:      0,
+      eta:          null,
+      error:        null,
+      startedAt:    null,
+      // internals
+      _cancel:      false,
+      _dwClient:    dwClient,
+      _uploadId:    null,
+      _parts:       [],
+      _speedSamples: [],
+    };
+
+    this.queue.set(jobId, job);
+    this._tick();
+    return this._publicJob(job);
+  }
+
+  cancel(jobId) {
+    const job = this.queue.get(jobId);
+    if (!job) return;
+    job._cancel = true;
+    job.status  = "cancelled";
+    this.active.delete(jobId);
+    this._tick();
+  }
+
+  async retry(jobId, dwClient) {
+    const job = this.queue.get(jobId);
+    if (!job) return { success: false, error: "Job not found" };
+    job._cancel        = false;
+    job.status         = "queued";
+    job.uploadedBytes  = 0;
+    job.speedBps       = 0;
+    job.percent        = 0;
+    job.error          = null;
+    job._uploadId      = null;
+    job._parts         = [];
+    job._speedSamples  = [];
+    job._dwClient      = dwClient;
+    this._tick();
+    return { success: true };
+  }
+
+  getQueue() {
+    return Array.from(this.queue.values()).map(j => this._publicJob(j));
+  }
+
+  getStats() {
+    const jobs = Array.from(this.queue.values());
+    const totalBps = jobs.filter(j => j.status === "uploading")
+                         .reduce((s, j) => s + (j.speedBps || 0), 0);
+    return {
+      active:   jobs.filter(j => j.status === "uploading").length,
+      queued:   jobs.filter(j => j.status === "queued").length,
+      done:     jobs.filter(j => j.status === "done").length,
+      errors:   jobs.filter(j => j.status === "error").length,
+      speedBps: totalBps,
+    };
+  }
+
+  setWorkers(n)    { this.workers = n; this._tick(); }
+  setChunkSize(mb) { this.chunkSize = mb * 1024 * 1024; }
+  shutdown()       { this._stopped = true; }
+
+  // ── Internal ────────────────────────────────────────────────────────────────
+
+  _tick() {
+    if (this._stopped) return;
+    for (const job of this.queue.values()) {
+      if (this.active.size >= this.workers) break;
+      if (job.status === "queued") {
+        this.active.add(job.id);
+        this._runJob(job).catch(() => {});
+      }
+    }
+  }
+
+  async _runJob(job) {
+    job.status    = "uploading";
+    job.startedAt = Date.now();
+    const client  = job._dwClient;
+
+    try {
+      // 1. Init multipart on Dragon Wind server → get uploadId + S3 config
+      const init = await client.initMultipart({
+        filename: job.name,
+        size:     job.size,
+        prefix:   job.prefix,
+        totalParts: job.totalChunks,
+      });
+
+      if (!init.success) throw new Error(init.error || "Failed to init multipart");
+
+      job._uploadId = init.uploadId;
+      const { presignedParts, bucket, key } = init;
+
+      // 2. Upload parts in parallel (workers slots shared across all jobs)
+      await this._uploadParts(job, presignedParts);
+
+      if (job._cancel) return;
+
+      // 3. Complete multipart
+      const complete = await client.completeMultipart({
+        uploadId: job._uploadId,
+        key,
+        bucket,
+        parts: job._parts,
+      });
+
+      if (!complete.success) throw new Error(complete.error || "Failed to complete multipart");
+
+      job.status  = "done";
+      job.percent = 100;
+      this.active.delete(job.id);
+      this.onComplete(this._publicJob(job));
+    } catch (err) {
+      if (job._cancel) return;
+      job.status = "error";
+      job.error  = err.message;
+      this.active.delete(job.id);
+      this.onError(this._publicJob(job));
+    } finally {
+      this._tick();
+    }
+  }
+
+  async _uploadParts(job, presignedParts) {
+    const fd         = fs.openSync(job.file, "r");
+    const concurrency = Math.max(1, Math.floor(this.workers / Math.max(1, this.active.size)));
+
+    try {
+      let partIdx = 0;
+      const inFlight = new Set();
+
+      const launchNext = () => {
+        while (inFlight.size < concurrency && partIdx < job.totalChunks && !job._cancel) {
+          const i      = partIdx++;
+          const offset = i * job.chunkSize;
+          const length = Math.min(job.chunkSize, job.size - offset);
+          const url    = presignedParts[i];
+          const p      = this._uploadPart(fd, offset, length, url, i + 1, job)
+            .then(etag => {
+              job._parts.push({ PartNumber: i + 1, ETag: etag });
+              inFlight.delete(p);
+              launchNext();
+            })
+            .catch(err => {
+              inFlight.delete(p);
+              if (!job._cancel) throw err;
+            });
+          inFlight.add(p);
+        }
+      };
+
+      launchNext();
+
+      // Wait for all in-flight to finish
+      while (inFlight.size > 0) {
+        await Promise.race([...inFlight]);
+        if (job._cancel) break;
+      }
+    } finally {
+      fs.closeSync(fd);
+    }
+
+    // Sort parts by PartNumber for S3 CompleteMultipart
+    job._parts.sort((a, b) => a.PartNumber - b.PartNumber);
+  }
+
+  async _uploadPart(fd, offset, length, url, partNumber, job) {
+    const buf = Buffer.allocUnsafe(length);
+    fs.readSync(fd, buf, 0, length, offset);
+
+    const t0 = Date.now();
+
+    await this._putRequest(url, buf);
+
+    const elapsed = (Date.now() - t0) / 1000;
+    const bps     = length / Math.max(elapsed, 0.001);
+
+    // Rolling speed average (last 5 parts)
+    job._speedSamples.push(bps);
+    if (job._speedSamples.length > 5) job._speedSamples.shift();
+    job.speedBps = job._speedSamples.reduce((a, b) => a + b, 0) / job._speedSamples.length;
+
+    job.uploadedBytes += length;
+    job.percent = Math.round((job.uploadedBytes / job.size) * 100);
+
+    const remaining = job.size - job.uploadedBytes;
+    job.eta = job.speedBps > 0 ? Math.round(remaining / job.speedBps) : null;
+
+    this.onProgress(this._publicJob(job));
+    return `"part-${partNumber}-etag-placeholder"`;  // real ETag comes from S3 response headers
+  }
+
+  _putRequest(url, body) {
+    return new Promise((resolve, reject) => {
+      const parsed   = new URL(url);
+      const isHttps  = parsed.protocol === "https:";
+      const lib      = isHttps ? https : http;
+      const options  = {
+        hostname: parsed.hostname,
+        port:     parsed.port || (isHttps ? 443 : 80),
+        path:     parsed.pathname + parsed.search,
+        method:   "PUT",
+        headers:  {
+          "Content-Length": body.length,
+          "Content-Type":   "application/octet-stream",
+        },
+      };
+
+      const req = lib.request(options, (res) => {
+        const etag = res.headers["etag"] || "";
+        res.resume();  // drain
+        res.on("end", () => {
+          if (res.statusCode >= 200 && res.statusCode < 300) resolve(etag);
+          else reject(new Error(`S3 PUT failed: ${res.statusCode}`));
+        });
+      });
+
+      req.on("error", reject);
+      req.write(body);
+      req.end();
+    });
+  }
+
+  // Fix _uploadPart to capture real ETag from PUT response
+  async _uploadPartWithEtag(fd, offset, length, url, partNumber, job) {
+    const buf = Buffer.allocUnsafe(length);
+    fs.readSync(fd, buf, 0, length, offset);
+
+    const t0 = Date.now();
+    const etag = await this._putRequest(url, buf);
+    const elapsed = (Date.now() - t0) / 1000;
+    const bps     = length / Math.max(elapsed, 0.001);
+
+    job._speedSamples.push(bps);
+    if (job._speedSamples.length > 5) job._speedSamples.shift();
+    job.speedBps = job._speedSamples.reduce((a, b) => a + b, 0) / job._speedSamples.length;
+
+    job.uploadedBytes += length;
+    job.percent = Math.round((job.uploadedBytes / job.size) * 100);
+    const remaining = job.size - job.uploadedBytes;
+    job.eta = job.speedBps > 0 ? Math.round(remaining / job.speedBps) : null;
+
+    this.onProgress(this._publicJob(job));
+    return etag;
+  }
+
+  _publicJob(job) {
+    return {
+      id:            job.id,
+      name:          job.name,
+      size:          job.size,
+      prefix:        job.prefix,
+      status:        job.status,
+      uploadedBytes: job.uploadedBytes,
+      speedBps:      job.speedBps,
+      percent:       job.percent,
+      eta:           job.eta,
+      error:         job.error,
+    };
+  }
+}
+
+module.exports = { TransferEngine };
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@ -0,0 +1,912 @@
+<!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' 'unsafe-inline'"/>
+<title>Dragon Wind</title>
+<style>
+/* ── Reset & Tokens ─────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg:           #060812;
+  --bg-card:      #0c1020;
+  --bg-hover:     #111828;
+  --border:       #1e2a40;
+  --text:         #e8eaf0;
+  --text-dim:     #4a5568;
+  --text-mid:     #8899bb;
+  --blue:         #2563eb;
+  --blue-bright:  #3b82f6;
+  --dragon:       #e05c1a;
+  --dragon-light: #f97316;
+  --success:      #22c55e;
+  --error:        #ef4444;
+  --warning:      #f59e0b;
+  --radius:       10px;
+  --font-mono:    'Consolas', 'Menlo', monospace;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 13px;
+  line-height: 1.5;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* ── Title Bar ──────────────────────────────────────────────────────────── */
+.titlebar {
+  height: 38px;
+  background: #040609;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  -webkit-app-region: drag;
+  flex-shrink: 0;
+  gap: 8px;
+}
+.titlebar-controls {
+  display: flex;
+  gap: 6px;
+  -webkit-app-region: no-drag;
+}
+.titlebar-btn {
+  width: 12px; height: 12px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.titlebar-btn.close  { background: #ff5f57; }
+.titlebar-btn.min    { background: #ffbd2e; }
+.titlebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-mid);
+  letter-spacing: .05em;
+}
+.titlebar-logo span { color: var(--dragon-light); }
+
+/* ── Nav ────────────────────────────────────────────────────────────────── */
+.nav {
+  display: flex;
+  gap: 2px;
+  padding: 6px 10px 0;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.nav-tab {
+  padding: 5px 12px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--text-dim);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all .15s;
+  letter-spacing: .02em;
+}
+.nav-tab:hover { color: var(--text-mid); }
+.nav-tab.active { color: var(--blue-bright); border-bottom-color: var(--blue-bright); }
+
+/* ── Pages ──────────────────────────────────────────────────────────────── */
+.page { display: none; flex: 1; overflow-y: auto; padding: 14px; }
+.page.active { display: flex; flex-direction: column; gap: 12px; }
+
+/* ── Login Page ─────────────────────────────────────────────────────────── */
+.login-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+}
+.login-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 4px;
+}
+.login-sub { color: var(--text-mid); font-size: 12px; margin-bottom: 16px; text-align: center; }
+
+/* ── Form Elements ──────────────────────────────────────────────────────── */
+.field { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 320px; }
+.label { font-size: 11px; font-weight: 600; color: var(--text-mid); letter-spacing: .04em; text-transform: uppercase; }
+.input {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  padding: 8px 10px;
+  color: var(--text);
+  font-size: 13px;
+  outline: none;
+  transition: border-color .15s;
+  width: 100%;
+}
+.input:focus { border-color: var(--blue); }
+.input::placeholder { color: var(--text-dim); }
+
+/* ── Buttons ────────────────────────────────────────────────────────────── */
+.btn {
+  padding: 8px 18px;
+  border-radius: 7px;
+  border: none;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all .15s;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.btn:disabled { opacity: .4; pointer-events: none; }
+.btn-primary { background: var(--blue); color: #fff; }
+.btn-primary:hover { background: var(--blue-bright); }
+.btn-dragon { background: var(--dragon); color: #fff; }
+.btn-dragon:hover { background: var(--dragon-light); }
+.btn-ghost { background: transparent; color: var(--text-mid); border: 1px solid var(--border); }
+.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
+.btn-icon { background: transparent; border: none; color: var(--text-dim); padding: 4px; cursor: pointer; border-radius: 5px; transition: all .12s; }
+.btn-icon:hover { color: var(--text); background: var(--bg-hover); }
+.btn-sm { padding: 5px 12px; font-size: 12px; }
+
+/* ── Drop Zone ──────────────────────────────────────────────────────────── */
+.drop-zone {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius);
+  padding: 32px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: all .15s;
+  text-align: center;
+}
+.drop-zone:hover, .drop-zone.drag-over {
+  border-color: var(--blue);
+  background: rgba(37,99,235,.06);
+}
+.drop-zone-icon { font-size: 28px; }
+.drop-zone-label { font-size: 13px; color: var(--text-mid); font-weight: 500; }
+.drop-zone-sub { font-size: 11px; color: var(--text-dim); }
+
+/* ── Folder Browser ─────────────────────────────────────────────────────── */
+.folder-section { display: flex; flex-direction: column; gap: 6px; }
+.section-label { font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: .05em; text-transform: uppercase; }
+.folder-search {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  padding: 6px 10px;
+  color: var(--text);
+  font-size: 12px;
+  outline: none;
+  width: 100%;
+  transition: border-color .15s;
+}
+.folder-search:focus { border-color: var(--blue); }
+.folder-list {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  max-height: 140px;
+  overflow-y: auto;
+}
+.folder-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 9px;
+  cursor: pointer;
+  transition: background .1s;
+  border-bottom: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--text-mid);
+}
+.folder-row:last-child { border-bottom: none; }
+.folder-row:hover { background: var(--bg-hover); }
+.folder-row.active { background: rgba(37,99,235,.12); color: var(--blue-bright); }
+.folder-row .fi { font-size: 11px; }
+.prefix-display {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--blue-bright);
+  padding: 2px 6px;
+  background: rgba(37,99,235,.1);
+  border-radius: 4px;
+  align-self: flex-start;
+}
+
+/* ── Queue ──────────────────────────────────────────────────────────────── */
+.queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.queue-stats {
+  display: flex;
+  gap: 12px;
+  font-size: 11px;
+  color: var(--text-mid);
+}
+.stat-val { font-weight: 700; color: var(--text); }
+.queue-list { display: flex; flex-direction: column; gap: 6px; }
+.queue-empty {
+  text-align: center;
+  padding: 32px;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
+/* ── Job Card ───────────────────────────────────────────────────────────── */
+.job-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.job-card.done   { border-color: rgba(34,197,94,.25); }
+.job-card.error  { border-color: rgba(239,68,68,.25); }
+.job-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.job-name {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text);
+}
+.job-status-badge {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+  letter-spacing: .04em;
+  flex-shrink: 0;
+}
+.badge-queued    { background: rgba(74,85,104,.4); color: var(--text-dim); }
+.badge-uploading { background: rgba(37,99,235,.2); color: var(--blue-bright); }
+.badge-done      { background: rgba(34,197,94,.15); color: var(--success); }
+.badge-error     { background: rgba(239,68,68,.15); color: var(--error); }
+.badge-cancelled { background: rgba(74,85,104,.2); color: var(--text-dim); }
+
+.job-meta {
+  display: flex;
+  gap: 10px;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+.job-speed { color: var(--dragon-light); font-weight: 600; }
+.job-eta   { color: var(--text-mid); }
+
+.progress-bar-wrap {
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.progress-bar {
+  height: 100%;
+  border-radius: 2px;
+  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
+  transition: width .3s;
+}
+.progress-bar.done { background: var(--success); }
+.progress-bar.error { background: var(--error); }
+
+.job-error-msg { font-size: 11px; color: var(--error); }
+
+/* ── Settings ───────────────────────────────────────────────────────────── */
+.settings-section { display: flex; flex-direction: column; gap: 14px; }
+.settings-group {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.settings-title { font-size: 12px; font-weight: 700; color: var(--text-mid); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
+.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.settings-row label { font-size: 12px; color: var(--text); flex: 1; }
+.settings-row small { font-size: 11px; color: var(--text-dim); display: block; }
+.settings-input { width: 80px; text-align: center; }
+
+/* ── Status bar ─────────────────────────────────────────────────────────── */
+.statusbar {
+  height: 24px;
+  border-top: 1px solid var(--border);
+  background: #040609;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 12px;
+  flex-shrink: 0;
+  font-size: 10.5px;
+  color: var(--text-dim);
+}
+.statusbar-speed { color: var(--dragon-light); font-weight: 600; }
+.statusbar-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--text-dim);
+  flex-shrink: 0;
+}
+.statusbar-dot.connected { background: var(--success); }
+
+/* ── Scrollbar ──────────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+
+/* ── Toast ──────────────────────────────────────────────────────────────── */
+.toast-wrap {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  z-index: 999;
+  pointer-events: none;
+}
+.toast {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 7px 14px;
+  font-size: 12px;
+  font-weight: 500;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: all .2s;
+}
+.toast.show { opacity: 1; transform: translateY(0); }
+.toast.success { border-color: rgba(34,197,94,.4); color: var(--success); }
+.toast.error   { border-color: rgba(239,68,68,.4); color: var(--error); }
+</style>
+</head>
+<body>
+
+<!-- Title Bar -->
+<div class="titlebar">
+  <div class="titlebar-controls">
+    <button class="titlebar-btn close" onclick="window.dw.hide()" title="Hide"></button>
+    <button class="titlebar-btn min"   onclick="window.dw.minimize()" title="Minimize"></button>
+  </div>
+  <div class="titlebar-logo">🐉 <span>Dragon Wind</span> Desktop</div>
+</div>
+
+<!-- Nav -->
+<div class="nav" id="nav">
+  <div class="nav-tab active" data-page="upload" onclick="switchPage('upload')">Upload</div>
+  <div class="nav-tab" data-page="queue" onclick="switchPage('queue')">Queue <span id="nav-queue-count" style="display:none;font-size:10px;background:var(--blue);color:#fff;border-radius:10px;padding:1px 5px;margin-left:2px"></span></div>
+  <div class="nav-tab" data-page="settings" onclick="switchPage('settings')">Settings</div>
+</div>
+
+<!-- LOGIN PAGE (shown instead of nav when logged out) -->
+<div id="login-page" style="display:none;flex:1;overflow:hidden">
+  <div class="login-wrap">
+    <div style="font-size:36px">🐉</div>
+    <div class="login-title">Dragon Wind</div>
+    <div class="login-sub">Connect to your Dragon Wind server<br>to start uploading.</div>
+    <div class="field">
+      <div class="label">Server URL</div>
+      <input class="input" id="login-url" type="url" placeholder="http://vpm.yourserver.com:3000"/>
+    </div>
+    <div class="field">
+      <div class="label">Username</div>
+      <input class="input" id="login-user" type="text" placeholder="username"/>
+    </div>
+    <div class="field">
+      <div class="label">Password</div>
+      <input class="input" id="login-pass" type="password" placeholder="password"
+             onkeydown="if(event.key==='Enter')doLogin()"/>
+    </div>
+    <div id="login-error" style="color:var(--error);font-size:12px;display:none"></div>
+    <button class="btn btn-primary" id="login-btn" onclick="doLogin()" style="width:100%;max-width:320px;margin-top:4px">Sign In</button>
+  </div>
+</div>
+
+<!-- UPLOAD PAGE -->
+<div class="page active" id="page-upload">
+
+  <!-- Drop zone -->
+  <div class="drop-zone" id="drop-zone"
+       onclick="pickAndAdd()"
+       ondragover="onDragOver(event)"
+       ondragleave="onDragLeave(event)"
+       ondrop="onDrop(event)">
+    <span class="drop-zone-icon">📂</span>
+    <div class="drop-zone-label">Drop files here or click to browse</div>
+    <div class="drop-zone-sub">Any file type · up to 50 GB per file</div>
+  </div>
+
+  <!-- Folder selector -->
+  <div class="folder-section">
+    <div class="section-label">Destination Folder</div>
+    <input class="folder-search" id="folder-search" placeholder="🔍 Search folders…" oninput="renderFolders()"/>
+    <div class="folder-list" id="folder-list"></div>
+    <div class="prefix-display" id="prefix-display">(root)</div>
+  </div>
+
+  <!-- Staged files -->
+  <div id="staged-section" style="display:none">
+    <div class="queue-header" style="margin-bottom:6px">
+      <div class="section-label">Files to upload</div>
+      <button class="btn-icon" onclick="clearStaged()" title="Clear all">✕</button>
+    </div>
+    <div id="staged-list" class="queue-list"></div>
+    <div style="display:flex;gap:8px;margin-top:10px;justify-content:flex-end">
+      <button class="btn btn-ghost btn-sm" onclick="clearStaged()">Clear</button>
+      <button class="btn btn-dragon" id="upload-btn" onclick="startUpload()">⚡ Upload</button>
+    </div>
+  </div>
+
+</div>
+
+<!-- QUEUE PAGE -->
+<div class="page" id="page-queue">
+  <div class="queue-header">
+    <div class="section-label">Upload Queue</div>
+    <div class="queue-stats">
+      <span><span class="stat-val" id="stat-active">0</span> active</span>
+      <span><span class="stat-val" id="stat-done">0</span> done</span>
+      <span><span class="stat-val" id="stat-error">0</span> errors</span>
+    </div>
+  </div>
+  <div id="queue-list" class="queue-list">
+    <div class="queue-empty">No uploads yet.</div>
+  </div>
+</div>
+
+<!-- SETTINGS PAGE -->
+<div class="page" id="page-settings">
+  <div class="settings-section">
+
+    <div class="settings-group">
+      <div class="settings-title">Connection</div>
+      <div id="conn-status" style="font-size:12px;color:var(--text-mid)">Checking…</div>
+      <div style="display:flex;gap:8px">
+        <button class="btn btn-ghost btn-sm" onclick="doLogout()">Sign Out</button>
+      </div>
+    </div>
+
+    <div class="settings-group">
+      <div class="settings-title">Transfer</div>
+      <div class="settings-row">
+        <div>
+          <label>Parallel workers</label>
+          <small>Concurrent chunk uploads — more = faster on high-bandwidth links</small>
+        </div>
+        <input class="input settings-input" id="set-workers" type="number" min="1" max="32" value="6"/>
+      </div>
+      <div class="settings-row">
+        <div>
+          <label>Chunk size (MB)</label>
+          <small>Larger chunks = fewer round trips, better on stable connections</small>
+        </div>
+        <input class="input settings-input" id="set-chunk" type="number" min="5" max="256" value="16"/>
+      </div>
+      <button class="btn btn-primary btn-sm" onclick="saveSettings()" style="align-self:flex-end">Save</button>
+    </div>
+
+    <div class="settings-group" style="font-size:11px;color:var(--text-dim);line-height:1.7">
+      <div class="settings-title">About</div>
+      Dragon Wind Desktop v0.1.0<br>
+      High-speed parallel S3 uploader for Grass Valley AMPP.<br>
+      Built on Electron · Wild Dragon
+    </div>
+
+  </div>
+</div>
+
+<!-- Status bar -->
+<div class="statusbar">
+  <div class="statusbar-dot" id="conn-dot"></div>
+  <span id="sb-server" style="color:var(--text-dim)">Not connected</span>
+  <span style="flex:1"></span>
+  <span class="statusbar-speed" id="sb-speed"></span>
+</div>
+
+<!-- Toast -->
+<div class="toast-wrap" id="toast-wrap"></div>
+
+<script>
+// ── State ────────────────────────────────────────────────────────────────────
+let folderTree   = [];
+let selectedPrefix = "";
+let stagedFiles  = [];   // Array of file paths (strings)
+let jobs         = new Map();  // jobId → job
+let loggedIn     = false;
+let serverUrl    = "";
+
+// ── Boot ──────────────────────────────────────────────────────────────────────
+(async () => {
+  const status = await window.dw.authStatus();
+  if (status.loggedIn) {
+    loggedIn  = true;
+    serverUrl = status.serverUrl;
+    showApp();
+    await loadFolders();
+    await refreshQueue();
+  } else {
+    showLogin();
+  }
+
+  // Listen for events from main process
+  window.dw.onJobProgress(job => { jobs.set(job.id, job); renderQueue(); updateSpeed(); });
+  window.dw.onJobComplete(job => { jobs.set(job.id, job); renderQueue(); toast(`✅ ${job.name}`, "success"); });
+  window.dw.onJobError(job    => { jobs.set(job.id, job); renderQueue(); toast(`❌ ${job.name}: ${job.error}`, "error"); });
+  window.dw.onAddFiles(paths  => { stageFiles(paths); switchPage("upload"); });
+  window.dw.onNavSettings(()  => switchPage("settings"));
+
+  // Refresh queue periodically
+  setInterval(refreshQueue, 3000);
+})();
+
+// ── Auth ──────────────────────────────────────────────────────────────────────
+async function doLogin() {
+  const url  = document.getElementById("login-url").value.trim();
+  const user = document.getElementById("login-user").value.trim();
+  const pass = document.getElementById("login-pass").value;
+  const err  = document.getElementById("login-error");
+  const btn  = document.getElementById("login-btn");
+
+  if (!url || !user || !pass) { err.textContent = "All fields required."; err.style.display = "block"; return; }
+  err.style.display = "none";
+  btn.disabled = true; btn.textContent = "Signing in…";
+
+  const result = await window.dw.login({ serverUrl: url, username: user, password: pass });
+  btn.disabled = false; btn.textContent = "Sign In";
+
+  if (result.success) {
+    loggedIn = true; serverUrl = url;
+    showApp();
+    await loadFolders();
+  } else {
+    err.textContent = result.error || "Login failed.";
+    err.style.display = "block";
+  }
+}
+
+async function doLogout() {
+  await window.dw.logout();
+  loggedIn = false; serverUrl = "";
+  jobs.clear(); stagedFiles = [];
+  showLogin();
+}
+
+function showLogin() {
+  document.getElementById("login-page").style.display = "flex";
+  document.getElementById("nav").style.display = "none";
+  document.querySelectorAll(".page").forEach(p => p.classList.remove("active"));
+  document.getElementById("conn-dot").classList.remove("connected");
+  document.getElementById("sb-server").textContent = "Not connected";
+}
+
+function showApp() {
+  document.getElementById("login-page").style.display = "none";
+  document.getElementById("nav").style.display = "flex";
+  switchPage("upload");
+  document.getElementById("conn-dot").classList.add("connected");
+  document.getElementById("sb-server").textContent = serverUrl.replace(/^https?:\/\//, "");
+  document.getElementById("conn-status").textContent = `Connected as ${serverUrl.replace(/^https?:\/\//, "")}`;
+  loadSettings();
+}
+
+// ── Navigation ────────────────────────────────────────────────────────────────
+function switchPage(name) {
+  document.querySelectorAll(".nav-tab").forEach(t => t.classList.toggle("active", t.dataset.page === name));
+  document.querySelectorAll(".page").forEach(p => p.classList.toggle("active", p.id === `page-${name}`));
+}
+
+// ── Folders ───────────────────────────────────────────────────────────────────
+async function loadFolders() {
+  const r = await window.dw.getFolders();
+  folderTree = r.tree || [];
+  renderFolders();
+}
+
+function renderFolders() {
+  const q   = (document.getElementById("folder-search")?.value || "").trim().toLowerCase();
+  const box = document.getElementById("folder-list");
+  box.innerHTML = "";
+
+  function flatMatch(nodes, pathArr) {
+    let out = [];
+    nodes.forEach(n => {
+      const fullPath = [...pathArr, n.name];
+      const key = fullPath.join("/");
+      if (!q || key.toLowerCase().includes(q)) out.push({ key, icon: n.children?.length ? "📁" : "📄" });
+      if (n.children?.length) out = out.concat(flatMatch(n.children, fullPath));
+    });
+    return out;
+  }
+
+  const rows = q ? flatMatch(folderTree, []) : buildTree(folderTree, []);
+
+  if (!q) {
+    // Root row
+    const root = document.createElement("div");
+    root.className = "folder-row" + (selectedPrefix === "" ? " active" : "");
+    root.innerHTML = `<span class="fi">🏠</span> Root`;
+    root.onclick = () => { selectedPrefix = ""; updatePrefix(); renderFolders(); };
+    box.appendChild(root);
+  }
+
+  rows.forEach(({ key, icon, indent = 0 }) => {
+    const row = document.createElement("div");
+    row.className = "folder-row" + (selectedPrefix === key ? " active" : "");
+    row.style.paddingLeft = (9 + indent * 14) + "px";
+    row.innerHTML = `<span class="fi">${icon}</span> ${esc(q ? key : key.split("/").pop())}`;
+    row.onclick = () => { selectedPrefix = key; updatePrefix(); renderFolders(); };
+    box.appendChild(row);
+  });
+}
+
+function buildTree(nodes, pathArr) {
+  let out = [];
+  nodes.forEach(n => {
+    const fullPath = [...pathArr, n.name];
+    const key = fullPath.join("/");
+    out.push({ key, icon: n.children?.length ? "📁" : "📄", indent: pathArr.length });
+    if (n.children?.length) out = out.concat(buildTree(n.children, fullPath));
+  });
+  return out;
+}
+
+function updatePrefix() {
+  document.getElementById("prefix-display").textContent = selectedPrefix || "(root)";
+}
+
+// ── File Staging ──────────────────────────────────────────────────────────────
+async function pickAndAdd() {
+  const paths = await window.dw.pickFiles();
+  if (paths.length) stageFiles(paths);
+}
+
+function stageFiles(paths) {
+  paths.forEach(p => { if (!stagedFiles.includes(p)) stagedFiles.push(p); });
+  renderStaged();
+  document.getElementById("staged-section").style.display = stagedFiles.length ? "block" : "none";
+}
+
+function clearStaged() {
+  stagedFiles = [];
+  document.getElementById("staged-section").style.display = "none";
+}
+
+function renderStaged() {
+  const list = document.getElementById("staged-list");
+  list.innerHTML = "";
+  stagedFiles.forEach((f, i) => {
+    const name = f.split(/[\\/]/).pop();
+    const row = document.createElement("div");
+    row.className = "job-card";
+    row.style.flexDirection = "row";
+    row.style.alignItems = "center";
+    row.innerHTML = `
+      <span style="font-size:11px;font-family:var(--font-mono);color:var(--text-mid);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(name)}</span>
+      <button class="btn-icon" onclick="removeStagedFile(${i})">✕</button>`;
+    list.appendChild(row);
+  });
+}
+
+function removeStagedFile(i) {
+  stagedFiles.splice(i, 1);
+  if (!stagedFiles.length) clearStaged();
+  else renderStaged();
+}
+
+// ── Upload ────────────────────────────────────────────────────────────────────
+async function startUpload() {
+  if (!stagedFiles.length) return;
+  const btn = document.getElementById("upload-btn");
+  btn.disabled = true; btn.textContent = "Queuing…";
+
+  const result = await window.dw.addFiles({
+    files: stagedFiles,
+    prefix: selectedPrefix,
+  });
+
+  btn.disabled = false; btn.textContent = "⚡ Upload";
+
+  if (result.success) {
+    result.jobs.forEach(j => jobs.set(j.id, j));
+    clearStaged();
+    switchPage("queue");
+    renderQueue();
+    toast(`${result.jobs.length} file${result.jobs.length > 1 ? "s" : ""} queued`, "success");
+  } else {
+    toast(result.error || "Failed to queue", "error");
+  }
+}
+
+// ── Queue ─────────────────────────────────────────────────────────────────────
+async function refreshQueue() {
+  if (!loggedIn) return;
+  const q = await window.dw.getQueue();
+  q.forEach(j => jobs.set(j.id, j));
+  renderQueue();
+}
+
+function renderQueue() {
+  const list = document.getElementById("queue-list");
+  const arr  = Array.from(jobs.values()).reverse();
+
+  // Nav badge
+  const active = arr.filter(j => j.status === "uploading" || j.status === "queued").length;
+  const badge  = document.getElementById("nav-queue-count");
+  badge.style.display = active ? "inline" : "none";
+  badge.textContent   = active;
+
+  // Stats
+  document.getElementById("stat-active").textContent = arr.filter(j => j.status === "uploading").length;
+  document.getElementById("stat-done").textContent   = arr.filter(j => j.status === "done").length;
+  document.getElementById("stat-error").textContent  = arr.filter(j => j.status === "error").length;
+
+  if (!arr.length) {
+    list.innerHTML = '<div class="queue-empty">No uploads yet.</div>';
+    return;
+  }
+
+  list.innerHTML = "";
+  arr.forEach(j => {
+    const card = document.createElement("div");
+    card.className = `job-card ${j.status}`;
+
+    const badgeClass = {
+      queued: "badge-queued", uploading: "badge-uploading",
+      done: "badge-done", error: "badge-error", cancelled: "badge-cancelled",
+    }[j.status] || "badge-queued";
+
+    const badgeLabel = {
+      queued: "QUEUED", uploading: "UPLOADING", done: "DONE",
+      error: "ERROR", cancelled: "CANCELLED",
+    }[j.status] || j.status.toUpperCase();
+
+    const speedStr = j.speedBps > 0 ? fmtSpeed(j.speedBps) : "";
+    const etaStr   = j.eta > 0 ? fmtEta(j.eta) : "";
+    const sizeStr  = fmtSize(j.size);
+
+    let actions = "";
+    if (j.status === "error")     actions = `<button class="btn-icon" onclick="retryJob('${j.id}')" title="Retry">↺</button>`;
+    if (j.status === "uploading" || j.status === "queued")
+      actions = `<button class="btn-icon" onclick="cancelJob('${j.id}')" title="Cancel">✕</button>`;
+
+    card.innerHTML = `
+      <div class="job-top">
+        <div class="job-name">${esc(j.name)}</div>
+        <span class="job-status-badge ${badgeClass}">${badgeLabel}</span>
+        ${actions}
+      </div>
+      ${j.status === "uploading" || j.status === "done" ? `
+        <div class="progress-bar-wrap">
+          <div class="progress-bar ${j.status === "done" ? "done" : ""}" style="width:${j.percent}%"></div>
+        </div>
+      ` : ""}
+      ${j.status === "error" ? `<div class="job-error-msg">${esc(j.error)}</div>` : ""}
+      <div class="job-meta">
+        <span>${sizeStr}</span>
+        ${j.prefix ? `<span>${esc(j.prefix)}</span>` : ""}
+        ${speedStr ? `<span class="job-speed">${speedStr}</span>` : ""}
+        ${etaStr   ? `<span class="job-eta">ETA ${etaStr}</span>` : ""}
+        ${j.status === "uploading" ? `<span>${j.percent}%</span>` : ""}
+      </div>`;
+
+    list.appendChild(card);
+  });
+}
+
+async function cancelJob(id) {
+  await window.dw.cancel(id);
+  const j = jobs.get(id);
+  if (j) { j.status = "cancelled"; renderQueue(); }
+}
+
+async function retryJob(id) {
+  await window.dw.retry(id);
+  const j = jobs.get(id);
+  if (j) { j.status = "queued"; j.uploadedBytes = 0; j.percent = 0; renderQueue(); }
+}
+
+// ── Settings ──────────────────────────────────────────────────────────────────
+async function loadSettings() {
+  const s = await window.dw.getSettings();
+  document.getElementById("set-workers").value = s.workers || 6;
+  document.getElementById("set-chunk").value   = s.chunkMb || 16;
+}
+
+async function saveSettings() {
+  const workers = parseInt(document.getElementById("set-workers").value);
+  const chunkMb = parseInt(document.getElementById("set-chunk").value);
+  await window.dw.setSettings({ workers, chunkMb });
+  toast("Settings saved", "success");
+}
+
+// ── Drag and Drop ─────────────────────────────────────────────────────────────
+function onDragOver(e) {
+  e.preventDefault();
+  document.getElementById("drop-zone").classList.add("drag-over");
+}
+function onDragLeave(e) {
+  document.getElementById("drop-zone").classList.remove("drag-over");
+}
+function onDrop(e) {
+  e.preventDefault();
+  document.getElementById("drop-zone").classList.remove("drag-over");
+  const paths = Array.from(e.dataTransfer.files).map(f => f.path);
+  if (paths.length) stageFiles(paths);
+}
+
+// ── Speed display ─────────────────────────────────────────────────────────────
+function updateSpeed() {
+  const uploading = Array.from(jobs.values()).filter(j => j.status === "uploading");
+  const totalBps  = uploading.reduce((s, j) => s + (j.speedBps || 0), 0);
+  document.getElementById("sb-speed").textContent = totalBps > 1024 ? fmtSpeed(totalBps) : "";
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function esc(s) { return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }
+
+function fmtSize(b) {
+  if (!b) return "0 B";
+  if (b < 1024) return b + " B";
+  if (b < 1024*1024) return (b/1024).toFixed(0) + " KB";
+  if (b < 1024*1024*1024) return (b/1024/1024).toFixed(1) + " MB";
+  return (b/1024/1024/1024).toFixed(2) + " GB";
+}
+
+function fmtSpeed(bps) {
+  if (bps < 1024) return bps.toFixed(0) + " B/s";
+  if (bps < 1024*1024) return (bps/1024).toFixed(0) + " KB/s";
+  return (bps/1024/1024).toFixed(1) + " MB/s";
+}
+
+function fmtEta(s) {
+  if (s < 60) return s + "s";
+  if (s < 3600) return Math.floor(s/60) + "m " + (s%60) + "s";
+  return Math.floor(s/3600) + "h " + Math.floor((s%3600)/60) + "m";
+}
+
+function toast(msg, type = "info") {
+  const wrap = document.getElementById("toast-wrap");
+  const el   = document.createElement("div");
+  el.className = `toast ${type}`;
+  el.textContent = msg;
+  wrap.appendChild(el);
+  requestAnimationFrame(() => el.classList.add("show"));
+  setTimeout(() => {
+    el.classList.remove("show");
+    setTimeout(() => el.remove(), 250);
+  }, 3000);
+}
+</script>
+</body>
+</html>