feat(DeviceDetailOverlay, StatusPage): update device URL handling to include base URL and cache options

src/app/components/DeviceDetailOverlay.tsx

@@ -37,7 +37,7 @@ export default function DeviceDetailOverlay({
 }: DeviceDetailOverlayProps) {
   const [touchStart, setTouchStart] = useState(0);
   const [touchEnd, setTouchEnd] = useState(0);
-  const [showMediaBrowser, setShowMediaBrowser] = useState(false);
+  const [browsingField, setBrowsingField] = useState<'url' | 'base_url' | 'cache' | null>(null);
   const [showCommandMenu, setShowCommandMenu] = useState(false);
 
   const minSwipeDistance = 50;
@@ -318,7 +318,29 @@ export default function DeviceDetailOverlay({
                 </button>
               </div>
 
-              {deviceData.url !== undefined && (
+              {deviceData.base_url !== undefined && (
+                <div>
+                  <label className="text-sm text-neutral-500 block mb-2">Base URL</label>
+                  <div className="flex gap-2">
+                    <input
+                      type="text"
+                      value={deviceData.base_url ?? ''}
+                      onChange={(e) => {
+                        const path = getDevicePath();
+                        updateDeviceSetting([...path, 'base_url'], e.target.value);
+                      }}
+                      className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
+                    />
+                    <button
+                      onClick={() => setBrowsingField('base_url')}
+                      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>
                 <label className="text-sm text-neutral-500 block mb-2">URL</label>
                 <div className="flex gap-2">
@@ -332,7 +354,7 @@ export default function DeviceDetailOverlay({
                     className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
                   />
                   <button
-                      onClick={() => setShowMediaBrowser(true)}
+                    onClick={() => setBrowsingField('url')}
                     className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
                   >
                     <FolderOpen className="w-5 h-5" />
@@ -345,6 +367,28 @@ export default function DeviceDetailOverlay({
                   </div>
                 )}
               </div>
+
+              {deviceData.cache !== undefined && (
+                <div>
+                  <label className="text-sm text-neutral-500 block mb-2">Cache</label>
+                  <div className="flex gap-2">
+                    <input
+                      type="text"
+                      value={deviceData.cache ?? ''}
+                      onChange={(e) => {
+                        const path = getDevicePath();
+                        updateDeviceSetting([...path, 'cache'], e.target.value);
+                      }}
+                      className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
+                    />
+                    <button
+                      onClick={() => setBrowsingField('cache')}
+                      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>
               )}
 
               {deviceData.mode !== undefined && (
@@ -395,11 +439,23 @@ export default function DeviceDetailOverlay({
             </div>
           </div>
 
-          {showMediaBrowser && (
+          {browsingField && (
             <MediaBrowser
-              currentPath={deviceData.url || '/'}
+              currentPath={
-              onSelect={(path) => { void handleFileSelect(path); setShowMediaBrowser(false); }}
+                browsingField === 'cache'    ? (deviceData.cache    || '/') :
-              onClose={() => setShowMediaBrowser(false)}
+                browsingField === 'base_url' ? (deviceData.base_url || '/') :
+                (deviceData.url || '/')
+              }
+              onSelect={(selectedPath: string) => {
+                if (browsingField === 'url') {
+                  void handleFileSelect(selectedPath);
+                } else {
+                  const devPath = getDevicePath();
+                  updateDeviceSetting([...devPath, browsingField], selectedPath);
+                }
+                setBrowsingField(null);
+              }}
+              onClose={() => setBrowsingField(null)}
             />
           )}
         </motion.div>

src/app/components/StatusPage.tsx

@@ -146,7 +146,9 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
                 </div>
                 <div>
                   <div className="font-medium">Device #{activeDevice.number}</div>
-                  <div className="text-sm text-neutral-500">{activeDevice.url}</div>
+                  <div className="text-sm text-neutral-500">
+                    {[activeDevice.base_url, activeDevice.url].filter(Boolean).join('') || '—'}
+                  </div>
                 </div>
               </button>
               <div className="w-2 h-2 rounded-full bg-green-500" />