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,32 +318,76 @@ export default function DeviceDetailOverlay({
                 </button>
               </div>
 
-              {deviceData.url !== undefined && (
+              {deviceData.base_url !== undefined && (
                 <div>
-                  <label className="text-sm text-neutral-500 block mb-2">URL</label>
+                  <label className="text-sm text-neutral-500 block mb-2">Base URL</label>
                   <div className="flex gap-2">
                     <input
                       type="text"
-                      value={deviceData.url}
+                      value={deviceData.base_url ?? ''}
                       onChange={(e) => {
                         const path = getDevicePath();
-                        updateDeviceSetting([...path, 'url'], e.target.value);
+                        updateDeviceSetting([...path, 'base_url'], e.target.value);
                       }}
                       className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
                     />
                     <button
-                      onClick={() => setShowMediaBrowser(true)}
+                      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>
+              )}
               
-                  {mediaSetFiles && (
+              <div>
-                    <div className="mt-3">
+                <label className="text-sm text-neutral-500 block mb-2">URL</label>
-                      <MediaSet files={mediaSetFiles} activeUrl={deviceData.url ?? ''} onSwitch={switchMedia} />
+                <div className="flex gap-2">
-                    </div>
+                  <input
-                  )}
+                    type="text"
+                    value={deviceData.url}
+                    onChange={(e) => {
+                      const path = getDevicePath();
+                      updateDeviceSetting([...path, 'url'], e.target.value);
+                    }}
+                    className="flex-1 px-3 py-2 border border-neutral-300 rounded-lg"
+                  />
+                  <button
+                    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" />
+                  </button>
+                </div>
+
+                {mediaSetFiles && (
+                  <div className="mt-3">
+                    <MediaSet files={mediaSetFiles} activeUrl={deviceData.url ?? ''} onSwitch={switchMedia} />
+                  </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>
               )}
 
@@ -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" />