From 3131b076006e63bb26e77b1b558b7043724e712c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 27 Oct 2025 18:30:41 +0000 Subject: [PATCH 1/4] Initial plan From 011ad221b17580461d4373556868780ce38036c4 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 27 Oct 2025 18:35:48 +0000 Subject: [PATCH 2/4] Add WebUSB file manager with file browsing and editing capabilities Co-authored-by: simonw <9599+simonw@users.noreply.github.com> --- usb-file-manager.docs.md | 24 ++ usb-file-manager.html | 629 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 653 insertions(+) create mode 100644 usb-file-manager.docs.md create mode 100644 usb-file-manager.html diff --git a/usb-file-manager.docs.md b/usb-file-manager.docs.md new file mode 100644 index 0000000..8e16c2c --- /dev/null +++ b/usb-file-manager.docs.md @@ -0,0 +1,24 @@ +A WebUSB-based file manager that allows you to browse, view, and edit files on USB devices directly from your web browser. Connect a compatible USB device, navigate through directories, edit text files, and manage content without installing any software. + +The tool uses the WebUSB API to communicate with USB devices that expose a file system interface. This includes devices with Mass Storage Class (MSC) implementations or custom vendor-specific protocols. You can upload files from your computer to the device, download files from the device, and edit text files in-place with a built-in code editor. + +**Browser Requirements:** This tool requires a Chromium-based browser (Chrome, Edge, Opera, or Brave) with WebUSB support enabled. + +**Device Compatibility:** The device must support WebUSB and expose a file system interface. The current implementation includes mock data for demonstration purposes. To connect a real device, the USB communication protocol needs to be adapted to match your device's specific protocol (MTP, MSC, or vendor-specific). + +**Features:** +- Browse files and directories on USB devices +- View and edit text files with syntax highlighting +- Upload files from your computer to the device +- Download files from the device to your computer +- Navigate through directory structures with breadcrumb navigation +- Drag-and-drop file upload support + +**Implementation Note:** The actual USB communication protocol varies by device. Common protocols include: +- **MTP (Media Transfer Protocol)** - Used by Android devices and many modern storage devices +- **MSC (Mass Storage Class)** - Standard USB storage protocol +- **Vendor-specific protocols** - Custom protocols for specialized devices like MicroPython boards + +To adapt this tool for a specific device, you'll need to implement the appropriate USB communication protocol in the `readFile()`, `writeFile()`, and `listFiles()` functions. + + \ No newline at end of file diff --git a/usb-file-manager.html b/usb-file-manager.html new file mode 100644 index 0000000..a96283b --- /dev/null +++ b/usb-file-manager.html @@ -0,0 +1,629 @@ + + + + + + USB File Manager — WebUSB File Browser + + + +
+

USB File Manager — WebUSB File Browser

+
+ Disconnected + + + +
+
+ +
+ + +
+
+
+
📄
+
Select a file to view or edit
+
+
+
+
+ + + + From 090f184ab17ba9fcb5272e8e014ff499b3dc0595 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 27 Oct 2025 18:39:02 +0000 Subject: [PATCH 3/4] Add demo mode to USB file manager for testing without device Co-authored-by: simonw <9599+simonw@users.noreply.github.com> --- usb-file-manager.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/usb-file-manager.html b/usb-file-manager.html index a96283b..543d402 100644 --- a/usb-file-manager.html +++ b/usb-file-manager.html @@ -137,6 +137,7 @@

USB File Manager — WebUSB File Browser

Disconnected +
@@ -186,6 +187,7 @@

USB File Manager — WebUSB File Browser

// DOM elements const connectBtn = document.getElementById('connectBtn'); + const demoBtn = document.getElementById('demoBtn'); const disconnectBtn = document.getElementById('disconnectBtn'); const refreshBtn = document.getElementById('refreshBtn'); const statusIndicator = document.getElementById('statusIndicator'); @@ -208,6 +210,14 @@

USB File Manager — WebUSB File Browser

CREATE_DIR: 0x05 }; + // Connect to USB device (Demo Mode) + async function connectDemo() { + // Simulate device connection for demo purposes + state.device = { demo: true }; + updateConnectionStatus(true); + await listFiles(state.currentPath); + } + // Connect to USB device async function connectDevice() { if (!('usb' in navigator)) { @@ -611,6 +621,7 @@

USB File Manager — WebUSB File Browser

// Event listeners connectBtn.addEventListener('click', connectDevice); + demoBtn.addEventListener('click', connectDemo); disconnectBtn.addEventListener('click', disconnectDevice); refreshBtn.addEventListener('click', () => listFiles(state.currentPath)); From 98546cdb0656585dd5dd9fc5f8b7623ad77d61ac Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 27 Oct 2025 18:41:58 +0000 Subject: [PATCH 4/4] Address code review feedback: improve demo button styling and error handling Co-authored-by: simonw <9599+simonw@users.noreply.github.com> --- usb-file-manager.html | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/usb-file-manager.html b/usb-file-manager.html index 543d402..c1d147c 100644 --- a/usb-file-manager.html +++ b/usb-file-manager.html @@ -37,6 +37,7 @@ } button:hover { background: #202437; } button.primary { background: var(--accent); border-color: #5858ff; color: #fff; } + button.secondary { background: #1d2030; border-color: #2d3550; } button.danger { background: #2b1b1b; border-color: #3a2525; color: #ffc5c5; } button:disabled { opacity: .5; cursor: not-allowed; } .pill { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); font-size: 12px; color: var(--muted); } @@ -137,7 +138,7 @@

USB File Manager — WebUSB File Browser

Disconnected - +
@@ -210,12 +211,17 @@

USB File Manager — WebUSB File Browser

CREATE_DIR: 0x05 }; - // Connect to USB device (Demo Mode) + // Demo Mode: Simulate USB device connection with mock data async function connectDemo() { - // Simulate device connection for demo purposes - state.device = { demo: true }; - updateConnectionStatus(true); - await listFiles(state.currentPath); + try { + // Simulate device connection for demo purposes + state.device = { demo: true }; + updateConnectionStatus(true); + await listFiles(state.currentPath); + } catch (error) { + console.error('Demo mode failed:', error); + showError('Failed to initialize demo mode: ' + error.message); + } } // Connect to USB device