From 2cae71f8a85ca258dfda9ade25a0b5dbb6993626 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Tue, 9 Jun 2026 18:45:23 -0400
Subject: [PATCH] feat(DevicesPage): enhance cassette URL input with browser
 button and media selection

---
 src/app/components/DevicesPage.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/app/components/DevicesPage.tsx b/src/app/components/DevicesPage.tsx
index e21509c..1a8527a 100644
--- a/src/app/components/DevicesPage.tsx
+++ b/src/app/components/DevicesPage.tsx
@@ -288,10 +288,31 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
         </div> */}
         <div className="p-4">
           <label className="text-sm text-neutral-500 block mb-2">URL</label>
-          <input type="text" value={cassette.url || ''} onChange={(e) => updateSetting(['cassette', 'url'], e.target.value)} className="w-full px-3 py-2 border border-neutral-300 rounded-lg" />
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={cassette.url || ''}
+              onChange={(e) => updateSetting(['cassette', 'url'], e.target.value)}
+              className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
+            />
+            <button
+              onClick={() => setShowCassetteUrlBrowser(true)}
+              className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
+            >
+              <FolderOpen className="w-5 h-5" />
+            </button>
+          </div>
         </div>
       </div>
 
+      {showCassetteUrlBrowser && (
+        <MediaBrowser
+          currentPath={cassette.url || '/'}
+          onSelect={(p) => updateSetting(['cassette', 'url'], p)}
+          onClose={() => setShowCassetteUrlBrowser(false)}
+        />
+      )}
+
       {/* ── Hardware ── */}
       <h2 className="text-sm text-neutral-500 pt-4">User Port</h2>
       <div className="bg-white border border-neutral-200 rounded-lg divide-y divide-neutral-200">