From 3f16594c48571355779edd86b791ad18edeaeaf4 Mon Sep 17 00:00:00 2001
From: Aswanidev <apploginer123@gmail.com>
Date: Sat, 8 Aug 2026 12:00:45 +0530
Subject: [PATCH] fix: harden Android completion and responsive UI

---
 .../main/java/com/wails/app/MainActivity.java |  27 +++-
 frontend/src/components/common/Toast.vue      |   4 +-
 frontend/src/components/layout/AppLayout.vue  |  51 ++++---
 frontend/src/components/pair/PairModal.vue    |   4 +-
 .../components/receive/IncomingRequest.vue    |   4 +-
 frontend/src/components/transfer/FileRow.vue  |   8 +-
 .../src/components/transfer/TransferArea.vue  |  10 +-
 frontend/src/styles/index.css                 |  39 ++++-
 frontend/src/views/ReceiveView.vue            |  12 +-
 frontend/src/views/SendView.vue               |   8 +-
 frontend/src/views/SettingsView.vue           |  12 +-
 .../light/filetransfer_integration_test.go    | 141 ++++++++++++++++++
 12 files changed, 261 insertions(+), 59 deletions(-)
 create mode 100644 internal/light/filetransfer_integration_test.go

diff --git a/build/android/app/src/main/java/com/wails/app/MainActivity.java b/build/android/app/src/main/java/com/wails/app/MainActivity.java
index b23ef93..e3f0e09 100644
--- a/build/android/app/src/main/java/com/wails/app/MainActivity.java
+++ b/build/android/app/src/main/java/com/wails/app/MainActivity.java
@@ -436,23 +436,37 @@ public void copyToFolder(final String json) {
                 java.io.File source = new java.io.File(o.getString("sourcePath"));
                 if (!source.exists()) {
                     bridge.emitEvent("android:copyDone",
-                            "{\"ok\":false,\"error\":\"staging file missing\"}");
+                            "{\"ok\":false,\"error\":" + JSONObject.quote("staging file missing") + "}");
                     return;
                 }
 
+                if (!DocumentsContract.isTreeUri(treeUri)) {
+                    throw new IllegalArgumentException("Invalid folder URI");
+                }
+
+                // createDocument expects a document URI. The folder picker
+                // returns a tree URI, so first resolve that tree's root
+                // document URI before asking the provider to create a file.
+                String treeDocumentId = DocumentsContract.getTreeDocumentId(treeUri);
+                Uri parentDocumentUri = DocumentsContract.buildDocumentUriUsingTree(
+                        treeUri, treeDocumentId);
+
                 // Create the destination document in the chosen folder.
                 String mime = android.webkit.MimeTypeMap.getSingleton()
                         .getMimeTypeFromExtension(fileName.contains(".")
                                 ? fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase()
                                 : "");
                 Uri docUri = DocumentsContract.createDocument(getContentResolver(),
-                        treeUri, mime != null ? mime : "application/octet-stream", fileName);
+                        parentDocumentUri, mime != null ? mime : "application/octet-stream", fileName);
+                if (docUri == null) {
+                    throw new IllegalStateException("could not create destination file");
+                }
 
                 try (InputStream in = new FileInputStream(source);
                      OutputStream out = getContentResolver().openOutputStream(docUri)) {
                     if (out == null) {
                         bridge.emitEvent("android:copyDone",
-                                "{\"ok\":false,\"error\":\"cannot open destination\"}");
+                                "{\"ok\":false,\"error\":" + JSONObject.quote("cannot open destination") + "}");
                         return;
                     }
                     byte[] buf = new byte[64 * 1024];
@@ -464,12 +478,13 @@ public void copyToFolder(final String json) {
                 // Staging copy is no longer needed.
                 boolean deleted = source.delete();
                 bridge.emitEvent("android:copyDone",
-                        "{\"ok\":true,\"fileName\":\"" + fileName.replace("\"", "\\\"")
-                                + "\",\"deleted\":" + deleted + "}");
+                        "{\"ok\":true,\"fileName\":" + JSONObject.quote(fileName)
+                                + ",\"deleted\":" + deleted + "}");
             } catch (Exception e) {
                 Log.e(TAG, "copyToFolder failed", e);
                 bridge.emitEvent("android:copyDone",
-                        "{\"ok\":false,\"error\":\"" + e.getMessage() + "\"}");
+                        "{\"ok\":false,\"error\":"
+                                + JSONObject.quote(e.getMessage() != null ? e.getMessage() : "copy failed") + "}");
             }
         }).start();
     }
diff --git a/frontend/src/components/common/Toast.vue b/frontend/src/components/common/Toast.vue
index 692767d..36f3afc 100644
--- a/frontend/src/components/common/Toast.vue
+++ b/frontend/src/components/common/Toast.vue
@@ -6,12 +6,12 @@ const { toasts } = useUI()
 </script>
 
 <template>
-  <div class="pointer-events-none fixed inset-x-0 top-4 z-[200] flex flex-col items-center gap-2 px-4">
+  <div class="pointer-events-none fixed inset-x-0 top-[max(1rem,env(safe-area-inset-top))] z-[200] flex flex-col items-center gap-2 px-4">
     <TransitionGroup name="toast">
       <div
         v-for="t in toasts"
         :key="t.id"
-        class="glass pointer-events-auto flex items-center gap-2 rounded-lg px-4 py-2 text-sm shadow-lg"
+        class="glass pointer-events-auto flex max-w-[calc(100vw-2rem)] items-center gap-2 rounded-lg px-4 py-2 text-sm shadow-lg"
         :class="t.type === 'error' ? 'text-danger' : t.type === 'success' ? 'text-ok' : 'text-content'"
       >
         <Icon v-if="t.type === 'error'" name="warning" :size="16" />
diff --git a/frontend/src/components/layout/AppLayout.vue b/frontend/src/components/layout/AppLayout.vue
index 5e33862..d6ff18e 100644
--- a/frontend/src/components/layout/AppLayout.vue
+++ b/frontend/src/components/layout/AppLayout.vue
@@ -16,30 +16,39 @@ const nav = [
 </script>
 
 <template>
-  <div class="flex h-full flex-col bg-ink-deep md:flex-row">
-    <!-- Desktop sidebar -->
-    <aside class="hidden w-72 shrink-0 flex-col border-r border-white/5 bg-surface-0 md:flex">
-      <div class="drag-region border-b border-white/5 px-5 py-5"></div>
+  <div class="flex h-[100dvh] min-h-0 flex-col bg-ink-deep md:flex-row">
+    <!-- Tablet rail / desktop sidebar -->
+    <aside class="hidden w-[76px] shrink-0 flex-col border-r border-white/5 bg-surface-0 md:flex lg:w-64">
+      <div class="drag-region flex min-h-20 items-center border-b border-white/5 px-3 lg:px-5">
+        <div class="brand-lockup">
+          <span class="brand-mark">L</span>
+          <div class="hidden min-w-0 lg:block">
+            <div class="text-sm font-bold tracking-[0.18em] text-content">LIGHT</div>
+            <div class="text-[9px] uppercase tracking-[0.16em] text-content-faint">Local transfer</div>
+          </div>
+        </div>
+      </div>
 
-      <nav class="flex flex-col gap-1 px-3">
+      <nav class="flex flex-col gap-1 px-2 pt-4 lg:px-3">
         <RouterLink
           v-for="n in nav"
           :key="n.to"
           :to="n.to"
-          class="nav-item"
+          :title="n.label"
+          class="nav-item justify-center lg:justify-start"
           active-class="nav-item--active"
         >
-          <Icon :name="n.icon" />
-          <span>{{ n.label }}</span>
+          <Icon :name="n.icon" :size="20" />
+          <span class="hidden lg:inline">{{ n.label }}</span>
         </RouterLink>
       </nav>
 
       <div class="mt-auto border-t border-white/5 p-3">
-        <button class="btn-ghost w-full justify-start" @click="showPair = true">
-          <Icon name="qrcode" />
-          <span>Pair device</span>
+        <button class="btn-ghost w-full justify-center lg:justify-start" @click="showPair = true">
+          <Icon name="qrcode" :size="20" />
+          <span class="hidden lg:inline">Pair device</span>
         </button>
-        <div class="mt-3 flex items-center gap-2 px-2 text-xs text-content-faint">
+        <div class="mt-3 hidden items-center gap-2 px-2 text-xs text-content-faint lg:flex">
           <span class="h-2 w-2 rounded-full" :class="count ? 'bg-ok' : 'bg-content-faint'"></span>
           {{ count }} device{{ count === 1 ? '' : 's' }} nearby
         </div>
@@ -47,19 +56,26 @@ const nav = [
     </aside>
 
     <!-- Mobile header -->
-    <header class="drag-region flex items-center justify-end border-b border-white/5 bg-surface-0 px-4 py-3 md:hidden">
+    <header class="drag-region flex min-h-16 items-center justify-between border-b border-white/5 bg-surface-0 px-4 py-3 md:hidden">
+      <div class="brand-lockup">
+        <span class="brand-mark h-8 w-8 rounded-lg text-xs">L</span>
+        <div>
+          <div class="text-xs font-bold tracking-[0.18em] text-content">LIGHT</div>
+          <div class="text-[9px] uppercase tracking-[0.14em] text-content-faint">Local transfer</div>
+        </div>
+      </div>
       <button class="btn-ghost" @click="showPair = true" aria-label="Pair device">
-        <Icon name="qrcode" />
+        <Icon name="qrcode" :size="20" />
       </button>
     </header>
 
     <!-- Content -->
-    <main class="flex-1 overflow-hidden">
+    <main class="min-h-0 flex-1 overflow-hidden">
       <slot />
     </main>
 
     <!-- Mobile bottom nav -->
-    <nav class="flex border-t border-white/5 bg-surface-0 pb-[env(safe-area-inset-bottom)] md:hidden">
+    <nav class="mobile-nav grid grid-cols-4 border-t border-white/5 bg-surface-0 md:hidden">
       <RouterLink
         v-for="n in nav"
         :key="n.to"
@@ -67,7 +83,8 @@ const nav = [
         class="nav-item-mobile"
         active-class="nav-item-mobile--active"
       >
-        <Icon :name="n.icon" :size="24" />
+        <Icon :name="n.icon" :size="20" />
+        <span class="truncate">{{ n.label }}</span>
       </RouterLink>
     </nav>
   </div>
diff --git a/frontend/src/components/pair/PairModal.vue b/frontend/src/components/pair/PairModal.vue
index c92dadc..2b29cbe 100644
--- a/frontend/src/components/pair/PairModal.vue
+++ b/frontend/src/components/pair/PairModal.vue
@@ -143,11 +143,11 @@ onBeforeUnmount(() => {
 
 <template>
   <div
-    class="fixed inset-x-0 bottom-0 top-0 z-[1100] flex items-end justify-center bg-black/50 sm:items-center sm:p-4"
+    class="fixed inset-x-0 bottom-0 top-0 z-[1100] flex items-end justify-center bg-black/50 pb-[max(1rem,env(safe-area-inset-bottom))] sm:items-center sm:p-4"
     :style="{ height: viewportHeight }"
     @click.self="close"
   >
-    <div class="card w-full max-w-md animate-slideUp overflow-y-auto p-5" :class="scanning ? '' : 'max-h-[85vh]'">
+    <div class="card w-full max-w-md animate-slideUp overflow-y-auto p-5" :class="scanning ? 'max-h-[calc(100dvh-1rem)]' : 'max-h-[85vh]'">
       <div class="mb-4 flex items-center justify-between">
         <h2 class="flex items-center gap-2 font-semibold">
           <Icon name="qrcode" /> Pair a device
diff --git a/frontend/src/components/receive/IncomingRequest.vue b/frontend/src/components/receive/IncomingRequest.vue
index 2e62e0c..db079a2 100644
--- a/frontend/src/components/receive/IncomingRequest.vue
+++ b/frontend/src/components/receive/IncomingRequest.vue
@@ -28,10 +28,10 @@ async function reject() {
 <template>
   <div
     v-if="pendingReceive"
-    class="fixed inset-0 z-[1000] flex items-end justify-center bg-black/50 p-4 sm:grid sm:place-items-center"
+    class="fixed inset-0 z-[1000] flex items-end justify-center bg-black/50 p-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:grid sm:place-items-center"
     @click.self="reject"
   >
-    <div class="card w-full max-w-md animate-slideUp p-5">
+    <div class="card max-h-[calc(100dvh-1rem)] w-full max-w-md animate-slideUp overflow-y-auto p-5">
       <div class="mb-1 flex items-center gap-2 text-accent">
         <Icon name="receive" />
         <span class="font-semibold">Incoming files</span>
diff --git a/frontend/src/components/transfer/FileRow.vue b/frontend/src/components/transfer/FileRow.vue
index aceed71..0a1ae13 100644
--- a/frontend/src/components/transfer/FileRow.vue
+++ b/frontend/src/components/transfer/FileRow.vue
@@ -22,14 +22,14 @@ const statusLabel: Record<string, string> = {
 </script>
 
 <template>
-  <div class="card flex items-center gap-3 p-3">
-    <div class="grid h-10 w-10 place-items-center rounded-lg bg-surface-2 text-content-muted">
+  <div class="card grid grid-cols-[auto_minmax(0,1fr)] gap-3 p-3 sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:items-center sm:p-3.5">
+    <div class="grid h-10 w-10 place-items-center rounded-lg bg-surface-2 text-content-muted sm:h-11 sm:w-11">
       <Icon name="file" />
     </div>
     <div class="min-w-0 flex-1">
       <div class="flex items-center justify-between gap-2">
         <span class="truncate font-medium">{{ transfer.filename }}</span>
-        <span class="shrink-0 text-xs text-content-faint">{{ statusLabel[transfer.status] || transfer.status }}</span>
+        <span class="shrink-0 rounded-full bg-white/5 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-content-faint">{{ statusLabel[transfer.status] || transfer.status }}</span>
       </div>
       <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-content-faint">
         <span class="font-mono">{{ formatBytes(transfer.transferred) }} / {{ formatBytes(transfer.size) }}</span>
@@ -40,7 +40,7 @@ const statusLabel: Record<string, string> = {
         <ProgressBar :percent="transfer.percent" :active="transfer.status === 'active'" :failed="transfer.status === 'failed'" />
       </div>
     </div>
-    <div class="flex shrink-0 items-center gap-1">
+    <div class="col-start-2 flex items-center gap-1 sm:col-start-auto">
       <button
         v-if="transfer.status === 'active'"
         class="btn-ghost px-2"
diff --git a/frontend/src/components/transfer/TransferArea.vue b/frontend/src/components/transfer/TransferArea.vue
index e842a96..aa450d1 100644
--- a/frontend/src/components/transfer/TransferArea.vue
+++ b/frontend/src/components/transfer/TransferArea.vue
@@ -50,9 +50,9 @@ const hasTransfers = computed(() => transfers.value.length > 0)
 </script>
 
 <template>
-  <div class="flex h-full flex-col gap-5 p-4 sm:p-5 md:p-8">
+  <div class="flex h-full min-h-0 flex-col gap-4 p-4 sm:gap-5 sm:p-6 lg:p-8 xl:p-10">
     <div
-      class="flex cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-white/10 bg-surface-0/30 px-4 py-8 text-center transition hover:border-accent/40 hover:bg-accent-soft/30 sm:px-6 sm:py-12"
+      class="drop-zone flex min-h-44 cursor-pointer touch-manipulation flex-col items-center justify-center rounded-2xl border-2 border-dashed border-white/10 bg-surface-0/30 px-4 py-8 text-center transition hover:border-accent/40 hover:bg-accent-soft/30 sm:min-h-52 sm:px-6 sm:py-12"
       :class="dragOver ? 'border-accent bg-accent-soft' : ''"
       @click="pickFiles"
       @dragover.prevent="dragOver = true"
@@ -62,11 +62,11 @@ const hasTransfers = computed(() => transfers.value.length > 0)
       <div class="mb-3 grid h-12 w-12 place-items-center rounded-full bg-surface-2 text-accent sm:h-14 sm:w-14">
         <Icon name="upload" :size="24" />
       </div>
-      <p class="min-w-0 font-medium">Drop files or click to browse</p>
-      <p class="min-w-0 text-sm text-content-faint">Sending to {{ device.name }}</p>
+      <p class="min-w-0 max-w-full truncate font-medium">Drop files or click to browse</p>
+      <p class="min-w-0 max-w-full truncate text-sm text-content-faint">Sending to {{ device.name }}</p>
     </div>
 
-    <div class="flex-1 overflow-auto">
+    <div class="min-h-0 flex-1 overflow-y-auto pr-0.5">
       <p v-if="!hasTransfers" class="grid h-full place-items-center text-sm text-content-faint">No transfers yet</p>
       <div v-else class="flex flex-col gap-2">
         <FileRow
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index ef798df..f16fb2c 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -10,6 +10,7 @@
   html,
   body,
   #app {
+    min-height: 100%;
     height: 100%;
   }
 
@@ -22,6 +23,11 @@
     overscroll-behavior: none;
   }
 
+  button,
+  a {
+    -webkit-tap-highlight-color: transparent;
+  }
+
   :focus-visible {
     outline: 2px solid theme('colors.accent.DEFAULT');
     outline-offset: 2px;
@@ -42,7 +48,7 @@
   }
 
   .btn {
-    @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition no-drag;
+    @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition no-drag;
   }
   .btn-accent {
     @apply btn bg-accent text-ink shadow-[0_8px_20px_rgba(240,165,0,0.16)] hover:brightness-110;
@@ -52,13 +58,13 @@
   }
 
   .nav-item {
-    @apply flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-content-muted transition no-drag hover:text-content hover:bg-white/5;
+    @apply flex min-h-11 items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-content-muted transition no-drag hover:bg-white/5 hover:text-content;
   }
   .nav-item--active {
     @apply bg-accent-soft text-accent;
   }
   .nav-item-mobile {
-    @apply flex flex-1 flex-col items-center justify-center gap-1 py-2.5 text-content-faint no-drag transition-colors;
+    @apply flex min-w-0 flex-1 flex-col items-center justify-center gap-1 px-1 py-2 text-[10px] font-medium tracking-wide text-content-faint no-drag transition-colors;
   }
   .nav-item-mobile--active {
     @apply text-accent;
@@ -69,11 +75,11 @@
   }
 
   .page {
-    @apply flex h-full flex-col overflow-auto p-4 sm:p-5 md:p-8;
+    @apply flex h-full min-h-0 flex-col overflow-auto px-4 pb-5 pt-5 sm:px-6 sm:py-6 lg:px-8 lg:py-8 xl:px-10;
   }
 
   .page-header {
-    @apply mb-6 flex items-end justify-between gap-4;
+    @apply mb-5 flex items-end justify-between gap-4 sm:mb-6;
   }
 
   .page-kicker {
@@ -107,6 +113,23 @@
   .toggle-thumb--on {
     @apply translate-x-5;
   }
+
+  .brand-lockup {
+    @apply flex items-center gap-2.5;
+  }
+
+  .brand-mark {
+    @apply grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-accent text-sm font-black tracking-[-0.08em] text-ink shadow-[0_8px_22px_rgba(240,165,0,0.2)];
+  }
+
+  .mobile-nav {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .drop-zone {
+    background-image: linear-gradient(135deg, rgba(240, 165, 0, 0.04), transparent 48%),
+      radial-gradient(circle at 50% 0%, rgba(52, 211, 153, 0.08), transparent 42%);
+  }
 }
 
 @layer utilities {
@@ -124,3 +147,9 @@
   background: rgba(255, 255, 255, 0.12);
   border-radius: 999px;
 }
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .page {
+    @apply px-6 py-7;
+  }
+}
diff --git a/frontend/src/views/ReceiveView.vue b/frontend/src/views/ReceiveView.vue
index f893640..0b0c254 100644
--- a/frontend/src/views/ReceiveView.vue
+++ b/frontend/src/views/ReceiveView.vue
@@ -24,7 +24,7 @@ const needsFolder = computed(
 
     <div
       v-if="needsFolder"
-      class="card mb-5 flex items-center gap-3 border-danger/30 bg-danger/10 p-4"
+      class="card mb-4 flex flex-wrap items-center gap-3 border-danger/30 bg-danger/10 p-4 sm:mb-5 sm:flex-nowrap"
     >
       <div class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-danger/20 text-danger">
         <Icon name="warning" />
@@ -35,26 +35,26 @@ const needsFolder = computed(
           You can't receive files until you pick a download folder in Settings.
         </div>
       </div>
-      <RouterLink to="/settings" class="btn-ghost shrink-0 border border-white/10">Set folder</RouterLink>
+      <RouterLink to="/settings" class="btn-ghost w-full shrink-0 border border-white/10 sm:w-auto">Set folder</RouterLink>
     </div>
 
-    <div class="card mb-5 flex flex-wrap items-center gap-3 p-4 md:p-5">
+    <div class="card mb-4 flex flex-wrap items-center gap-3 p-4 sm:mb-5 sm:flex-nowrap sm:p-5">
       <div class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-ok/15 text-ok">
         <Icon name="receive" />
       </div>
       <div class="min-w-0 flex-1">
         <div class="font-medium">Ready to receive</div>
         <div class="truncate text-xs text-content-faint">
-          Downloads to {{ settings.downloadDir }} · Port {{ settings.port }}
+          Downloads to {{ settings.downloadDir }} / Port {{ settings.port }}
         </div>
       </div>
       <span class="shrink-0 rounded-full bg-ok/20 px-2 py-0.5 text-xs text-ok">Active</span>
     </div>
 
-    <p v-if="transfers.length === 0" class="grid flex-1 place-items-center text-sm text-content-faint">
+    <p v-if="transfers.length === 0" class="grid min-h-40 flex-1 place-items-center text-center text-sm text-content-faint">
       Incoming transfers will appear here.
     </p>
-    <div v-else class="flex flex-1 flex-col gap-2">
+    <div v-else class="min-h-0 flex-1 space-y-2 overflow-y-auto pr-0.5">
       <FileRow
         v-for="t in transfers"
         :key="t.id"
diff --git a/frontend/src/views/SendView.vue b/frontend/src/views/SendView.vue
index 8a7e5c1..cde8e38 100644
--- a/frontend/src/views/SendView.vue
+++ b/frontend/src/views/SendView.vue
@@ -9,19 +9,19 @@ const { selected, select } = useDiscovery()
 </script>
 
 <template>
-  <div class="flex h-full">
+  <div class="flex h-full min-h-0">
     <!-- Device list (desktop always visible; mobile only when nothing selected) -->
     <div
-      class="w-full border-r border-white/5 bg-surface-0/40 p-5 md:w-80 md:shrink-0 md:p-6"
+      class="w-full overflow-y-auto border-r border-white/5 bg-surface-0/40 p-4 sm:p-5 md:w-[18rem] md:shrink-0 md:p-5 lg:w-64 lg:p-6"
       :class="selected ? 'hidden md:block' : 'block'"
     >
       <DeviceList />
     </div>
 
     <!-- Transfer area -->
-    <div class="flex-1" :class="selected ? 'block' : 'hidden md:block'">
+    <div class="min-w-0 flex-1" :class="selected ? 'block' : 'hidden md:block'">
       <div v-if="selected" class="flex h-full flex-col">
-        <div class="flex items-center gap-2 border-b border-white/5 px-4 py-3 md:hidden">
+        <div class="flex min-h-14 items-center gap-2 border-b border-white/5 px-4 py-3 md:hidden">
           <button class="btn-ghost px-2" @click="select(selected.id)" aria-label="Back">
             <Icon name="back" />
           </button>
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 8e51202..0941a60 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -96,7 +96,7 @@ onUnmounted(() => {
   <div class="page">
     <div class="page-header"><div><div class="page-kicker">Preferences</div><h1 class="page-title">Settings</h1></div></div>
 
-    <div class="card flex max-w-2xl flex-col gap-6 p-5 md:p-6">
+    <div class="card flex w-full max-w-3xl flex-col gap-5 p-4 sm:gap-6 sm:p-5 lg:p-6">
       <!-- Device name -->
       <div>
         <label class="field-label">Device name</label>
@@ -109,13 +109,13 @@ onUnmounted(() => {
       <!-- Download directory -->
       <div>
         <label class="field-label">Download folder</label>
-        <div class="flex gap-2">
+        <div class="flex flex-col gap-2 sm:flex-row">
           <input
             v-model="local.downloadDir"
             class="field-input flex-1 font-mono"
           />
-          <button class="btn-ghost border border-white/10" @click="pickFolder">Browse</button>
-          <button class="btn-ghost border border-white/10" @click="reset">Reset</button>
+          <button class="btn-ghost w-full border border-white/10 sm:w-auto" @click="pickFolder">Browse</button>
+          <button class="btn-ghost w-full border border-white/10 sm:w-auto" @click="reset">Reset</button>
         </div>
       </div>
 
@@ -127,7 +127,7 @@ onUnmounted(() => {
           type="number"
           min="1"
           max="65535"
-          class="field-input w-32"
+          class="field-input w-full sm:w-32"
         />
       </div>
 
@@ -152,7 +152,7 @@ onUnmounted(() => {
       </div>
 
       <!-- Save -->
-      <button class="btn-accent self-start" @click="save">Save settings</button>
+      <button class="btn-accent w-full self-start sm:w-auto" @click="save">Save settings</button>
     </div>
   </div>
 </template>
diff --git a/internal/light/filetransfer_integration_test.go b/internal/light/filetransfer_integration_test.go
new file mode 100644
index 0000000..a45d9ae
--- /dev/null
+++ b/internal/light/filetransfer_integration_test.go
@@ -0,0 +1,141 @@
+package light
+
+import (
+	"bytes"
+	"crypto/sha256"
+	"encoding/hex"
+	"encoding/json"
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"os"
+	"path/filepath"
+	"strconv"
+	"strings"
+	"testing"
+)
+
+func TestFileTransferHTTPIntegration(t *testing.T) {
+	home := t.TempDir()
+	t.Setenv("HOME", home)
+	t.Setenv("USERPROFILE", home)
+
+	downloadDir := t.TempDir()
+	manager := &TransferManager{active: make(map[string]*Transfer)}
+	settings := &SettingsService{cfg: Settings{
+		DownloadDir: downloadDir,
+		AutoAccept:  true,
+	}}
+	service := NewFileTransferService(nil, manager, settings, nil)
+	mux := http.NewServeMux()
+	mux.HandleFunc("/api/prepare", service.handlePrepare)
+	mux.HandleFunc("/api/transfer", service.handleTransfer)
+	server := httptest.NewServer(mux)
+	t.Cleanup(server.Close)
+
+	transferID := "integration-transfer"
+	filename := "Bleach ghost phonk edit [final].mkv"
+	payload := []byte("integration transfer payload")
+	sum := sha256.Sum256(payload)
+	checksum := hex.EncodeToString(sum[:])
+
+	prepareBody, err := json.Marshal(PreparePayload{
+		TransferID: transferID,
+		SenderName: "integration sender",
+		Files:      []FileManifestEntry{{Name: filename, Size: int64(len(payload)), Checksum: checksum}},
+	})
+	if err != nil {
+		t.Fatal(err)
+	}
+	prepareResponse, err := http.Post(server.URL+"/api/prepare", "application/json", bytes.NewReader(prepareBody))
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer prepareResponse.Body.Close()
+	if prepareResponse.StatusCode != http.StatusOK {
+		t.Fatalf("prepare status = %d, want %d", prepareResponse.StatusCode, http.StatusOK)
+	}
+
+	transferRequest, err := http.NewRequest(http.MethodPut, server.URL+"/api/transfer", bytes.NewReader(payload))
+	if err != nil {
+		t.Fatal(err)
+	}
+	transferRequest.Header.Set("X-Transfer-Id", transferID)
+	transferRequest.Header.Set("X-Filename", filename)
+	transferRequest.Header.Set("X-File-Size", strconv.FormatInt(int64(len(payload)), 10))
+	transferRequest.Header.Set("X-Checksum-Sha256", checksum)
+	transferResponse, err := http.DefaultClient.Do(transferRequest)
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer transferResponse.Body.Close()
+	if transferResponse.StatusCode != http.StatusOK {
+		body, _ := io.ReadAll(transferResponse.Body)
+		t.Fatalf("transfer status = %d, want %d: %s", transferResponse.StatusCode, http.StatusOK, strings.TrimSpace(string(body)))
+	}
+
+	stored, err := os.ReadFile(filepath.Join(downloadDir, filename))
+	if err != nil {
+		t.Fatal(err)
+	}
+	if !bytes.Equal(stored, payload) {
+		t.Fatalf("stored payload = %q, want %q", stored, payload)
+	}
+	history := manager.GetHistory(1)
+	if len(history) != 1 || history[0].Status != StatusCompleted || history[0].FilePath == "" {
+		t.Fatalf("history = %#v, want one completed transfer with a file path", history)
+	}
+}
+
+func TestFileTransferHTTPIntegrationRejectsChecksumMismatch(t *testing.T) {
+	home := t.TempDir()
+	t.Setenv("HOME", home)
+	t.Setenv("USERPROFILE", home)
+
+	downloadDir := t.TempDir()
+	manager := &TransferManager{active: make(map[string]*Transfer)}
+	settings := &SettingsService{cfg: Settings{DownloadDir: downloadDir, AutoAccept: true}}
+	service := NewFileTransferService(nil, manager, settings, nil)
+	mux := http.NewServeMux()
+	mux.HandleFunc("/api/prepare", service.handlePrepare)
+	mux.HandleFunc("/api/transfer", service.handleTransfer)
+	server := httptest.NewServer(mux)
+	t.Cleanup(server.Close)
+
+	transferID := "checksum-mismatch"
+	filename := "broken.bin"
+	payload := []byte("payload")
+	prepareBody, err := json.Marshal(PreparePayload{
+		TransferID: transferID,
+		Files:      []FileManifestEntry{{Name: filename, Size: int64(len(payload)), Checksum: strings.Repeat("0", 64)}},
+	})
+	if err != nil {
+		t.Fatal(err)
+	}
+	prepareResponse, err := http.Post(server.URL+"/api/prepare", "application/json", bytes.NewReader(prepareBody))
+	if err != nil {
+		t.Fatal(err)
+	}
+	prepareResponse.Body.Close()
+
+	request, err := http.NewRequest(http.MethodPut, server.URL+"/api/transfer", bytes.NewReader(payload))
+	if err != nil {
+		t.Fatal(err)
+	}
+	request.Header.Set("X-Transfer-Id", transferID)
+	request.Header.Set("X-Filename", filename)
+	request.Header.Set("X-File-Size", strconv.FormatInt(int64(len(payload)), 10))
+	request.Header.Set("X-Checksum-Sha256", strings.Repeat("0", 64))
+	response, err := http.DefaultClient.Do(request)
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer response.Body.Close()
+	if response.StatusCode != http.StatusBadRequest {
+		t.Fatalf("checksum status = %d, want %d", response.StatusCode, http.StatusBadRequest)
+	}
+	history := manager.GetHistory(1)
+	if len(history) != 1 || history[0].Status != StatusFailed || history[0].Error != "checksum mismatch" {
+		t.Fatalf("history = %#v, want checksum failure", history)
+	}
+}