feat(DeviceDetailOverlay, StatusPage): integrate MediaSet component for media switching functionality

feat(FileManager): persist filter, sort key, and sort order in local storage

src/app/components/DeviceDetailOverlay.tsx

@@ -1,7 +1,10 @@
 import { useEffect, useState } from 'react';
 import { X, ChevronLeft, ChevronRight, Printer, HardDrive, Network, Box, FolderOpen, MoreVertical, Play, Pause, SkipForward, SkipBack, RotateCcw } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
+import { toast } from 'sonner';
+import { getFileContents, joinPath } from '../webdav';
 import FileBrowser from './FileBrowser';
+import MediaSet from './MediaSet';
 
 interface Device {
   id: string;
@@ -36,7 +39,6 @@ export default function DeviceDetailOverlay({
   const [touchEnd, setTouchEnd] = useState(0);
   const [showFileBrowser, setShowFileBrowser] = useState(false);
   const [showCommandMenu, setShowCommandMenu] = useState(false);
-  const [selectedMediaIndex, setSelectedMediaIndex] = useState(0);
 
   const minSwipeDistance = 50;
 
@@ -144,13 +146,48 @@ export default function DeviceDetailOverlay({
     };
   };
 
-  const mediaSet = detectMediaSet();
+  // Prefer an explicit .lst-derived mediaSet stored in config; fall back to pattern detection.
+  const mediaSetFiles: string[] | null = (() => {
+    if (Array.isArray(deviceData.mediaSet) && deviceData.mediaSet.length > 0) {
+      return deviceData.mediaSet as string[];
+    }
+    const detected = detectMediaSet();
+    return detected ? detected.files : null;
+  })();
 
-  const switchMedia = (index: number) => {
+  const switchMedia = (file: string) => {
-    if (!mediaSet) return;
     const path = getDevicePath();
-    updateDeviceSetting([...path, 'url'], mediaSet.files[index]);
+    updateDeviceSetting([...path, 'url'], file);
-    setSelectedMediaIndex(index);
+  };
+
+  const handleFileSelect = async (selectedPath: string) => {
+    const devicePath = getDevicePath();
+    if (selectedPath.toLowerCase().endsWith('.lst')) {
+      try {
+        const text = await (await getFileContents(selectedPath)).text();
+        const dir   = selectedPath.split('/').slice(0, -1).join('/') || '/';
+        const files = text.split('\n')
+          .map(l => l.trim())
+          .filter(l => l.length > 0 && !l.startsWith('#'))
+          .map(l => l.startsWith('/') ? l : joinPath(dir, l));
+        if (files.length === 0) { toast.error('Swap list is empty'); return; }
+        const newConfig = JSON.parse(JSON.stringify(config));
+        let dev = newConfig;
+        for (const k of devicePath) dev = dev[k];
+        dev.url      = files[0];
+        dev.mediaSet = files;
+        setConfig(newConfig);
+      } catch (e: any) {
+        toast.error(`Failed to read swap list: ${e?.message ?? e}`);
+      }
+    } else {
+      const newConfig = JSON.parse(JSON.stringify(config));
+      let dev = newConfig;
+      for (const k of devicePath) dev = dev[k];
+      dev.url = selectedPath;
+      delete dev.mediaSet;
+      setConfig(newConfig);
+    }
   };
 
   const sendCommand = (command: string) => {
@@ -173,7 +210,7 @@ export default function DeviceDetailOverlay({
           animate={{ y: 0 }}
           exit={{ y: '100%' }}
           transition={{ type: 'spring', damping: 30, stiffness: 300 }}
-          className="absolute inset-0 bg-white overflow-y-auto"
+          className="fixed inset-0 bg-white overflow-y-auto z-50"
           onClick={(e) => e.stopPropagation()}
           onTouchStart={onTouchStart}
           onTouchMove={onTouchMove}
@@ -210,26 +247,6 @@ export default function DeviceDetailOverlay({
                   <RotateCcw className="w-4 h-4" />
                   Reset Device
                 </button>
-                <button
-                  onClick={() => sendCommand('EJECT')}
-                  className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
-                >
-                  <SkipBack className="w-4 h-4" />
-                  Eject Media
-                </button>
-                <button
-                  onClick={() => sendCommand('MOUNT')}
-                  className="w-full px-4 py-2 text-left hover:bg-neutral-50 flex items-center gap-2"
-                >
-                  <Play className="w-4 h-4" />
-                  Mount Media
-                </button>
-                <button
-                  onClick={() => sendCommand('STATUS')}
-                  className="w-full px-4 py-2 text-left hover:bg-neutral-50"
-                >
-                  Get Status
-                </button>
               </div>
             )}
 
@@ -322,31 +339,9 @@ export default function DeviceDetailOverlay({
                     </button>
                   </div>
 
-                  {mediaSet && (
+                  {mediaSetFiles && (
                     <div className="mt-3">
-                      <label className="text-sm text-neutral-500 block mb-2">Media Set</label>
+                      <MediaSet files={mediaSetFiles} activeUrl={deviceData.url ?? ''} onSwitch={switchMedia} />
-                      <div className="flex gap-2 flex-wrap">
-                        {mediaSet.files.slice(0, 5).map((file, index) => {
-                          // Attempt to extract a title from the filename, fallback to filename
-                          // Example: /path/to/Game Disk.d64 or /path/to/disk1.d64
-                          const fileName = file.split('/').pop() || file;
-                          // If you have a title mapping, replace this logic
-                          const title = fileName.replace(/\.[^.]+$/, '');
-                          return (
-                            <button
-                              key={index}
-                              onClick={() => switchMedia(index)}
-                              className={`px-3 py-1.5 rounded-lg text-sm ${
-                                deviceData.url === file
-                                  ? 'bg-blue-600 text-white'
-                                  : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
-                              }`}
-                            >
-                              {`${index + 1}: ${title}`}
-                            </button>
-                          );
-                        })}
-                      </div>
                     </div>
                   )}
                 </div>
@@ -403,10 +398,7 @@ export default function DeviceDetailOverlay({
           {showFileBrowser && (
             <FileBrowser
               currentPath={deviceData.url || '/'}
-              onSelect={(path) => {
+              onSelect={(path) => { void handleFileSelect(path); setShowFileBrowser(false); }}
-                const devicePath = getDevicePath();
-                updateDeviceSetting([...devicePath, 'url'], path);
-              }}
               onClose={() => setShowFileBrowser(false)}
             />
           )}

src/app/components/FileBrowser.tsx

@@ -2,6 +2,9 @@ import { useEffect, useRef, useState } from 'react';
 import {
   Folder,
   File,
+  FileText,
+  HardDrive,
+  Image as ImageIcon,
   ChevronRight,
   Home,
   RefreshCw,
@@ -34,6 +37,19 @@ import {
   DialogDescription,
 } from './ui/dialog';
 
+const TEXT_EXTS  = new Set(['txt','cfg','ini','bas','asm','seq','rel','prg','log','csv','s','lst','md','markdown','json','xml','svg','html','htm']);
+const IMAGE_EXTS = new Set(['png','jpg','jpeg','gif','bmp','webp']);
+const DISK_EXTS  = new Set(['d64','d71','d81','d82','g64','g71','t64','tap','crt','nib']);
+
+function EntryIcon({ entry }: { entry: EntryInfo }) {
+  if (entry.type === 'folder') return <Folder    className="w-5 h-5 text-blue-500 flex-shrink-0" />;
+  const ext = entry.name.split('.').pop()?.toLowerCase() ?? '';
+  if (IMAGE_EXTS.has(ext)) return <ImageIcon  className="w-5 h-5 text-purple-500 flex-shrink-0" />;
+  if (DISK_EXTS.has(ext))  return <HardDrive  className="w-5 h-5 text-amber-500 flex-shrink-0" />;
+  if (TEXT_EXTS.has(ext))  return <FileText   className="w-5 h-5 text-green-600 flex-shrink-0" />;
+  return                           <File       className="w-5 h-5 text-neutral-400 flex-shrink-0" />;
+}
+
 interface FileBrowserProps {
   currentPath: string;
   onSelect: (path: string) => void;
@@ -335,13 +351,7 @@ export default function FileBrowser({ currentPath, onSelect, onClose }: FileBrow
                     }}
                     className="flex-1 flex items-center gap-3 text-left min-w-0"
                   >
-                    <div className={entry.type === 'folder' ? 'text-blue-600' : 'text-neutral-400'}>
+                    <EntryIcon entry={entry} />
-                      {entry.type === 'folder' ? (
-                        <Folder className="w-5 h-5" />
-                      ) : (
-                        <File className="w-5 h-5" />
-                      )}
-                    </div>
                     <div className="min-w-0 flex-1">
                       <div className="text-neutral-900 truncate">{entry.name}</div>
                       {entry.type === 'file' && (

src/app/components/FileManager.tsx

@@ -197,6 +197,7 @@ function MarkdownEditor({ text, onSave }: { text: string; onSave?: (s: string) =
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center gap-2 px-3 py-1.5 bg-neutral-900 border-b border-neutral-700 flex-shrink-0 text-xs">
+        {onSave && (
           <button
             onClick={() => setEditMode(v => !v)}
             className={editMode
@@ -205,6 +206,7 @@ function MarkdownEditor({ text, onSave }: { text: string; onSave?: (s: string) =
           >
             {editMode ? <><Eye className="w-3.5 h-3.5" /> View</> : <><Pencil className="w-3.5 h-3.5" /> Edit</>}
           </button>
+        )}
         {editMode && onSave && (
           <button onClick={() => void save()} disabled={saving}
             className="px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 inline-flex items-center gap-1">
@@ -251,6 +253,52 @@ interface FileManagerProps {
   onNavigateToDevice?: (deviceId: string) => void;
 }
 
+// ─── File cache (session + localStorage) ─────────────────────────────────────
+
+const _sessionCache = new Map<string, Uint8Array>();
+const FM_LS_MAX     = 2 * 1024 * 1024; // only persist ≤ 2 MB to localStorage
+
+function _cacheKey(path: string, size: number, mtime: string | null) {
+  return `${path}|${size}|${mtime ?? ''}`;
+}
+
+function _lsGet(key: string): Uint8Array | null {
+  try {
+    const raw = localStorage.getItem('fmcache:' + key);
+    if (!raw) return null;
+    const bin = atob(raw);
+    const out = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+    return out;
+  } catch { return null; }
+}
+
+function _lsSet(key: string, data: Uint8Array) {
+  if (data.length > FM_LS_MAX) return;
+  try {
+    let b64 = '';
+    for (let i = 0; i < data.length; i += 8192) {
+      b64 += btoa(
+        String.fromCharCode.apply(null, data.slice(i, Math.min(i + 8192, data.length)) as unknown as number[]),
+      );
+    }
+    localStorage.setItem('fmcache:' + key, b64);
+  } catch { /* quota exceeded — skip */ }
+}
+
+async function _getEntryBytes(entry: EntryInfo): Promise<Uint8Array> {
+  const key = _cacheKey(entry.path, entry.size, entry.lastModified?.toISOString() ?? null);
+  const sess = _sessionCache.get(key);
+  if (sess) return sess;
+  const ls = _lsGet(key);
+  if (ls) { _sessionCache.set(key, ls); return ls; }
+  const blob = await getFileContents(entry.path);
+  const data = new Uint8Array(await blob.arrayBuffer());
+  _sessionCache.set(key, data);
+  _lsSet(key, data);
+  return data;
+}
+
 // ─── Main component ───────────────────────────────────────────────────────────
 
 const FM_PATH_KEY = 'fileManager.path';
@@ -261,9 +309,9 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
   const [loading, setLoading] = useState(false);
   const [error, setError]     = useState<string | null>(null);
   const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [filter, setFilter]   = useState('');
+  const [filter, setFilter]   = useState(() => localStorage.getItem('fileManager.filter') ?? '');
-  const [sortKey, setSortKey] = useState<SortKey>('name');
+  const [sortKey, setSortKey] = useState<SortKey>(() => (localStorage.getItem('fileManager.sortKey') as SortKey) ?? 'name');
-  const [sortAsc, setSortAsc] = useState(true);
+  const [sortAsc, setSortAsc] = useState(() => localStorage.getItem('fileManager.sortAsc') !== 'false');
   const [clipboard, setClipboard] = useState<Clipboard | null>(null);
   const [actionEntry, setActionEntry] = useState<EntryInfo | null>(null);
   const [dragOver, setDragOver] = useState(false);
@@ -271,7 +319,6 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
   // Viewer
   const [viewEntry, setViewEntry]   = useState<EntryInfo | null>(null);
   const [viewMode, setViewMode]     = useState<ViewMode | null>(null);
-  const [viewBlob, setViewBlob]     = useState<Blob | null>(null);
   const [viewText, setViewText]     = useState<string | null>(null);
   const [viewImgUrl, setViewImgUrl] = useState<string | null>(null);
   const [viewHexData, setViewHexData] = useState<Uint8Array | null>(null);
@@ -305,6 +352,9 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
   }, []);
 
   useEffect(() => { void load(path); }, [path, load]);
+  useEffect(() => { localStorage.setItem('fileManager.filter',  filter);        }, [filter]);
+  useEffect(() => { localStorage.setItem('fileManager.sortKey', sortKey);       }, [sortKey]);
+  useEffect(() => { localStorage.setItem('fileManager.sortAsc', String(sortAsc)); }, [sortAsc]);
 
   const navigateTo = (p: string) => {
     const norm = normalizePath(p);
@@ -344,30 +394,26 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
 
   // ── File viewer ──────────────────────────────────────────────────────────
 
-  const processBlob = async (blob: Blob, mode: ViewMode) => {
-    setViewImgUrl(prev => { if (prev) URL.revokeObjectURL(prev); return null; });
-    setViewText(null);
-    setViewHexData(null);
-    if      (mode === 'image') setViewImgUrl(URL.createObjectURL(blob));
-    else if (mode === 'hex')   setViewHexData(new Uint8Array(await blob.arrayBuffer()));
-    else                       setViewText(await blob.text());
-  };
-
   const openEntry = async (entry: EntryInfo, mode?: ViewMode) => {
     if (renameEntry !== null) return;
     if (entry.type === 'folder') { navigateTo(joinPath(path, entry.name)); return; }
     const targetMode = mode ?? defaultViewMode(entry);
     setViewEntry(entry);
     setViewMode(targetMode);
-    setViewBlob(null);
     setViewText(null);
-    setViewImgUrl(null);
+    setViewImgUrl(prev => { if (prev) URL.revokeObjectURL(prev); return null; });
     setViewHexData(null);
     setViewLoading(true);
     try {
-      const blob = await getFileContents(entry.path);
+      const bytes = await _getEntryBytes(entry);
-      setViewBlob(blob);
+      if (targetMode === 'image') {
-      await processBlob(blob, targetMode);
+        const ab = bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength) as ArrayBuffer;
+        setViewImgUrl(URL.createObjectURL(new Blob([ab])));
+      } else if (targetMode === 'hex') {
+        setViewHexData(bytes);
+      } else {
+        setViewText(new TextDecoder().decode(bytes));
+      }
     } catch (e: any) {
       toast.error(`Failed to open ${entry.name}: ${e?.message ?? e}`);
       setViewEntry(null);
@@ -378,27 +424,42 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
   };
 
   const switchViewMode = async (mode: ViewMode) => {
-    if (!viewBlob) return;
+    if (!viewEntry) return;
     setViewMode(mode);
     setViewLoading(true);
-    try { await processBlob(viewBlob, mode); } finally { setViewLoading(false); }
+    try {
+      const bytes = await _getEntryBytes(viewEntry);
+      if (mode === 'image') {
+        const ab = bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength) as ArrayBuffer;
+        setViewImgUrl(prev => { if (prev) URL.revokeObjectURL(prev); return URL.createObjectURL(new Blob([ab])); });
+      } else if (mode === 'hex') {
+        setViewHexData(bytes);
+      } else {
+        setViewText(new TextDecoder().decode(bytes));
+      }
+    } finally {
+      setViewLoading(false);
+    }
   };
 
   const closeViewer = () => {
     setViewImgUrl(prev => { if (prev) URL.revokeObjectURL(prev); return null; });
-    setViewEntry(null); setViewMode(null); setViewBlob(null);
+    setViewEntry(null); setViewMode(null);
     setViewText(null);  setViewHexData(null);
   };
 
   const saveViewFile = async (content: string | Uint8Array) => {
     if (!viewEntry) throw new Error('No file open');
-    await putFileContents(viewEntry.path, content);
+    const bytes: Uint8Array = typeof content === 'string'
-    const newBlob = typeof content === 'string'
+      ? new TextEncoder().encode(content)
-      ? new Blob([content], { type: 'text/plain' })
+      : content;
-      : new Blob([content.buffer.slice(content.byteOffset, content.byteOffset + content.byteLength) as ArrayBuffer], { type: 'application/octet-stream' });
+    await putFileContents(viewEntry.path, bytes);
-    setViewBlob(newBlob);
     if (typeof content === 'string') setViewText(content);
-    else setViewHexData(new Uint8Array(content));
+    else setViewHexData(bytes);
+    // Keep cache coherent within this session
+    const key = _cacheKey(viewEntry.path, viewEntry.size, viewEntry.lastModified?.toISOString() ?? null);
+    _sessionCache.set(key, bytes);
+    _lsSet(key, bytes);
     toast.success(`Saved ${viewEntry.name}`);
     void load(path);
   };
@@ -467,7 +528,7 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
 
   // ── Mount ────────────────────────────────────────────────────────────────
 
-  const mountOnDevice = (deviceType: 'drive' | 'meatloaf', key: string) => {
+  const mountOnDevice = async (deviceType: 'drive' | 'meatloaf', key: string) => {
     if (!mountEntry || !setConfig || !config) return;
     const newConfig = JSON.parse(JSON.stringify(config));
     if (!newConfig.iec) newConfig.iec = {};
@@ -475,16 +536,43 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
     if (!newConfig.iec.devices[deviceType]) newConfig.iec.devices[deviceType] = {};
     if (!newConfig.iec.devices[deviceType][key]) newConfig.iec.devices[deviceType][key] = {};
     const dev = newConfig.iec.devices[deviceType][key];
+
+    if (mountEntry.name.toLowerCase().endsWith('.lst')) {
+      try {
+        const text = await (await getFileContents(mountEntry.path)).text();
+        const dir  = splitPath(mountEntry.path).parent;
+        const files = text.split('\n')
+          .map(l => l.trim())
+          .filter(l => l.length > 0 && !l.startsWith('#'))
+          .map(l => l.startsWith('/') ? l : joinPath(dir, l));
+        if (files.length === 0) {
+          toast.error(`${mountEntry.name}: swap list is empty`);
+          return;
+        }
+        dev.url      = files[0];
+        dev.mediaSet = files;
+      } catch (e: any) {
+        toast.error(`Failed to read ${mountEntry.name}: ${e?.message ?? e}`);
+        return;
+      }
+    } else {
       dev.url = mountEntry.path;
+      delete dev.mediaSet;
+    }
+
     if (!dev.enabled) dev.enabled = 1;
     setConfig(newConfig);
+    setMountEntry(null);
     const deviceId = `${deviceType}-${key}`;
-    toast.success(`Mounted "${mountEntry.name}" on ${deviceType} #${key}`, {
+    const isLst = mountEntry.name.toLowerCase().endsWith('.lst');
+    const label  = isLst
+      ? `Loaded swap list "${mountEntry.name}" (${(dev.mediaSet as string[]).length} disks) on ${deviceType} #${key}`
+      : `Mounted "${mountEntry.name}" on ${deviceType} #${key}`;
+    toast.success(label, {
       action: onNavigateToDevice
         ? { label: 'View Device', onClick: () => onNavigateToDevice(deviceId) }
         : undefined,
     });
-    setMountEntry(null);
   };
 
   // ── Clipboard ────────────────────────────────────────────────────────────
@@ -760,7 +848,11 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
                   className="w-4 h-4 flex-shrink-0"
                 />
                 <button
-                  onClick={() => void openEntry(entry)}
+                  onClick={() => {
+                    if (renameEntry !== null) return;
+                    if (entry.type === 'folder') navigateTo(joinPath(path, entry.name));
+                    else setMountEntry(entry);
+                  }}
                   className="flex-1 flex items-center gap-3 text-left min-w-0"
                 >
                   <EntryIcon entry={entry} />
@@ -835,19 +927,39 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
             </DialogDescription>
           </DialogHeader>
           <div className="flex flex-col gap-2">
-            {/* Default open */}
+            {/* Folder: open */}
+            {actionEntry?.type === 'folder' && (
               <button
                 onClick={() => { const e = actionEntry; setActionEntry(null); if (e) void openEntry(e); }}
                 className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-blue-50 hover:border-blue-300 inline-flex items-center gap-3"
               >
-              {actionEntry?.type === 'folder'
+                <Folder className="w-4 h-4 text-blue-600" />
-                ? <Folder className="w-4 h-4 text-blue-600" />
+                <span>Open folder</span>
-                : <Eye    className="w-4 h-4 text-blue-600" />}
-              <span className="flex-1">{actionEntry?.type === 'folder' ? 'Open folder' : 'Open / View'}</span>
-              {actionEntry?.type === 'file' && (
-                <span className="text-xs text-neutral-400">{VIEWER_LABEL[defaultViewMode(actionEntry)]}</span>
-              )}
               </button>
+            )}
+
+            {/* File: mount (primary default) */}
+            {actionEntry?.type === 'file' && (
+              <button
+                onClick={() => { const e = actionEntry; setActionEntry(null); if (e) setMountEntry(e); }}
+                className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-blue-50 hover:border-blue-300 inline-flex items-center gap-3"
+              >
+                <HardDrive className="w-4 h-4 text-amber-600" />
+                <span>Mount on virtual drive</span>
+              </button>
+            )}
+
+            {/* File: open/view */}
+            {actionEntry?.type === 'file' && (
+              <button
+                onClick={() => { const e = actionEntry; setActionEntry(null); if (e) void openEntry(e); }}
+                className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-neutral-50 inline-flex items-center gap-3"
+              >
+                <Eye className="w-4 h-4 text-blue-600" />
+                <span className="flex-1">Open / View</span>
+                <span className="text-xs text-neutral-400">{VIEWER_LABEL[defaultViewMode(actionEntry)]}</span>
+              </button>
+            )}
 
             {/* Alternate viewers */}
             {actionEntry?.type === 'file' && availableViewers(actionEntry)
@@ -875,15 +987,6 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
               </button>
             )}
 
-            {actionEntry?.type === 'file' && (
-              <button
-                onClick={() => { const e = actionEntry; setActionEntry(null); if (e) setMountEntry(e); }}
-                className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-neutral-50 inline-flex items-center gap-3"
-              >
-                <HardDrive className="w-4 h-4 text-amber-600" /> <span>Mount on virtual drive</span>
-              </button>
-            )}
-
             <div className="border-t border-neutral-100" />
 
             <button
@@ -917,12 +1020,12 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
       {/* ── File viewer overlay ── */}
       {viewEntry && (
         <div className="fixed inset-0 bg-neutral-950 z-50 flex flex-col">
+          {/* Title + mode switcher */}
           <div className="bg-neutral-900 flex items-center px-4 py-2 gap-3 border-b border-neutral-700 flex-shrink-0">
             <button onClick={closeViewer} className="p-1.5 rounded hover:bg-neutral-700">
               <X className="w-5 h-5 text-white" />
             </button>
             <span className="font-medium truncate flex-1 text-sm text-white">{viewEntry.name}</span>
-            {/* Mode switcher */}
             <div className="flex items-center gap-1">
               {viewMode && availableViewers(viewEntry).map(mode => (
                 <button
@@ -957,13 +1060,13 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
               </div>
             )}
             {!viewLoading && viewMode === 'hex' && viewHexData && (
-              <HexEditor data={viewHexData} onSave={d => saveViewFile(d)} />
+              <HexEditor key={viewEntry.path} data={viewHexData} onSave={d => saveViewFile(d)} />
             )}
             {!viewLoading && viewMode === 'markdown' && viewText !== null && (
-              <MarkdownEditor text={viewText} onSave={s => saveViewFile(s)} />
+              <MarkdownEditor key={viewEntry.path} text={viewText} onSave={s => saveViewFile(s)} />
             )}
             {!viewLoading && (viewMode === 'text' || viewMode === 'json' || viewMode === 'xml') && viewText !== null && (
-              <CodeEditor text={viewText} mode={viewMode} onSave={s => saveViewFile(s)} />
+              <CodeEditor key={viewEntry.path} text={viewText} mode={viewMode} onSave={s => saveViewFile(s)} />
             )}
           </div>
         </div>
@@ -990,7 +1093,7 @@ export default function FileManager({ initialPath = '/', config, setConfig, onBa
                 {devices.map(dev => (
                   <button
                     key={`${dev.type}-${dev.key}`}
-                    onClick={() => mountOnDevice(dev.type, dev.key)}
+                    onClick={() => void mountOnDevice(dev.type, dev.key)}
                     className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-blue-50 hover:border-blue-300 inline-flex items-center gap-3"
                   >
                     <HardDrive className={`w-5 h-5 flex-shrink-0 ${dev.enabled ? 'text-blue-500' : 'text-neutral-400'}`} />

src/app/components/HexEditor.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
 import { Eye, Pencil, Redo2, Save, Search, Undo2, X } from 'lucide-react';
 
 const BYTES_PER_ROW = 16;
-const MAX_DISPLAY   = 65536;
+const ROW_HEIGHT    = 20; // px — matches leading-5 at Tailwind's 16px base
+const CHUNK_ROWS    = 256; // virtual-scroll overscan: render prev+curr+next windows
 
 // ── History ───────────────────────────────────────────────────────────────────
 
@@ -74,8 +75,16 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
   const [searchType, setSearchType] = useState<'text' | 'hex'>('text');
   const [matchIdx, setMatchIdx]     = useState(-1);
 
-  const containerRef = useRef<HTMLDivElement>(null);
+  // Virtual scroll
+  const scrollRef  = useRef<HTMLDivElement>(null);
   const searchRef  = useRef<HTMLInputElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+
+  const totalRows       = Math.ceil(current.length / BYTES_PER_ROW);
+  const firstRenderRow  = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - CHUNK_ROWS);
+  const lastRenderRow   = Math.min(totalRows, firstRenderRow + CHUNK_ROWS * 3);
+  const paddingTop      = firstRenderRow * ROW_HEIGHT;
+  const paddingBottom   = (totalRows - lastRenderRow) * ROW_HEIGHT;
 
   const needle    = query.trim() ? (searchType === 'text' ? new TextEncoder().encode(query) : parseHex(query)) : null;
   const matches   = needle ? matchAll(current, needle) : [];
@@ -84,20 +93,30 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
   const canUndo   = hist.idx > 0;
   const canRedo   = hist.idx < hist.stack.length - 1;
 
+  // Reset history when the data prop changes (e.g. after a save that updates the prop)
+  useEffect(() => {
+    dispatch({ type: 'reset', data: data.slice() });
+  }, [data]);
+
   // Jump to first result when query / search type changes
   useEffect(() => {
     if (matches.length > 0) { setMatchIdx(0); setCursor(matches[0]); }
     else setMatchIdx(-1);
-  // matches is derived from query+searchType+current — depend on the inputs, not matches itself
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [query, searchType]);
 
-  // Scroll cursor row into view
+  // Scroll cursor row into view (programmatic, works with virtual scroll)
   useEffect(() => {
     if (cursor < 0) return;
-    containerRef.current
+    const row    = Math.floor(cursor / BYTES_PER_ROW);
-      ?.querySelector(`[data-byte="${cursor}"]`)
+    const rowTop = row * ROW_HEIGHT + 12; // 12 = top padding equivalent
-      ?.scrollIntoView({ block: 'nearest' });
+    const el = scrollRef.current;
+    if (!el) return;
+    if (rowTop < el.scrollTop) {
+      el.scrollTop = rowTop;
+    } else if (rowTop + ROW_HEIGHT > el.scrollTop + el.clientHeight) {
+      el.scrollTop = rowTop + ROW_HEIGHT - el.clientHeight;
+    }
   }, [cursor]);
 
   const pushByte = useCallback((offset: number, value: number) => {
@@ -122,7 +141,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
     const i = ((idx % matches.length) + matches.length) % matches.length;
     setMatchIdx(i);
     setCursor(matches[i]);
-    containerRef.current?.focus();
+    scrollRef.current?.focus();
   };
 
   const openSearch = () => {
@@ -132,7 +151,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
   const closeSearch = () => {
     setSearchOpen(false);
     setQuery('');
-    containerRef.current?.focus();
+    scrollRef.current?.focus();
   };
 
   const onKeyDown = (e: React.KeyboardEvent) => {
@@ -178,9 +197,6 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
     }
   };
 
-  const view    = current.length > MAX_DISPLAY ? current.slice(0, MAX_DISPLAY) : current;
-  const numRows = Math.ceil(view.length / BYTES_PER_ROW);
-
   // Highlight sets
   const allMatchSet = new Set<number>();
   for (const pos of matches) { for (let i = 0; i < needleLen; i++) allMatchSet.add(pos + i); }
@@ -195,7 +211,7 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
       <div className="flex items-center gap-2 px-3 py-1.5 bg-neutral-900 border-b border-neutral-700 flex-shrink-0 text-xs">
         {!readOnly && (
           <button
-            onClick={() => { setEditMode(v => !v); containerRef.current?.focus(); }}
+            onClick={() => { setEditMode(v => !v); scrollRef.current?.focus(); }}
             className={`px-2 py-1 rounded inline-flex items-center gap-1 ${editMode ? 'bg-amber-600 text-white' : 'bg-neutral-700 text-neutral-300 hover:bg-neutral-600'}`}
           >
             {editMode ? <><Eye className="w-3.5 h-3.5" /> View</> : <><Pencil className="w-3.5 h-3.5" /> Edit</>}
@@ -220,9 +236,6 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
           </>
         )}
         <div className="flex-1" />
-        {current.length > MAX_DISPLAY && (
-          <span className="text-amber-400 mr-2">First {MAX_DISPLAY.toLocaleString()} bytes</span>
-        )}
         <span className="text-neutral-500 mr-1">{current.length.toLocaleString()} bytes</span>
         <button
           onClick={openSearch}
@@ -272,21 +285,27 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
         </div>
       )}
 
-      {/* ── Hex grid ── */}
+      {/* ── Hex grid (virtual scroll) ── */}
       <div
-        ref={containerRef}
+        ref={scrollRef}
         tabIndex={0}
         onKeyDown={onKeyDown}
-        className="flex-1 overflow-auto p-3 focus:outline-none select-none"
+        onScroll={e => setScrollTop(e.currentTarget.scrollTop)}
-        onClick={() => containerRef.current?.focus()}
+        className="flex-1 overflow-auto focus:outline-none select-none"
+        onClick={() => scrollRef.current?.focus()}
       >
-        {cursor < 0 && (
+        {/* top spacer — 12px mimics former p-3 top padding */}
-          <div className="text-neutral-600 text-xs mb-2 font-mono">
+        <div style={{ height: paddingTop + 12 }} />
+
+        {cursor < 0 && firstRenderRow === 0 && (
+          <div className="px-3 text-neutral-600 text-xs mb-2 font-mono">
             Click a cell to position cursor{editMode ? ' · type hex digits or ASCII to edit' : ''}
           </div>
         )}
-        <div className="font-mono text-xs leading-5 whitespace-nowrap">
+
-          {Array.from({ length: numRows }, (_, row) => {
+        <div className="px-3 font-mono text-xs leading-5 whitespace-nowrap">
+          {Array.from({ length: lastRenderRow - firstRenderRow }, (_, i) => {
+            const row  = firstRenderRow + i;
             const base = row * BYTES_PER_ROW;
             return (
               <div key={row} className="flex items-center">
@@ -300,27 +319,24 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
                 <div className="flex mr-2">
                   {Array.from({ length: BYTES_PER_ROW }, (_, col) => {
                     const idx = base + col;
-                    if (idx >= view.length) {
+                    if (idx >= current.length) {
                       return <span key={col} className={`inline-block w-6 text-center${col === 8 ? ' ml-2' : ''}`} />;
                     }
-                    const byte       = view[idx];
+                    const byte       = current[idx];
                     const isCursor   = idx === cursor;
                     const isCurMatch = curMatchSet.has(idx);
                     const isAllMatch = allMatchSet.has(idx) && !isCurMatch;
-
                     const color = isCurMatch  ? 'bg-orange-500 text-white'
                                 : isAllMatch  ? 'bg-yellow-800 text-yellow-200'
                                 : byte === 0  ? 'text-neutral-700'
                                 :               'text-green-400';
                     const ring  = isCursor && pane === 'hex' ? ' ring-1 ring-inset ring-blue-400' : '';
                     const gap   = col === 8 ? ' ml-2' : '';
-
                     return (
                       <span
                         key={col}
-                        data-byte={idx}
                         className={`inline-block w-6 text-center cursor-pointer${gap} ${color}${ring}`}
-                        onClick={() => { setCursor(idx); setNibble(0); setPane('hex'); containerRef.current?.focus(); }}
+                        onClick={() => { setCursor(idx); setNibble(0); setPane('hex'); scrollRef.current?.focus(); }}
                       >
                         {byte.toString(16).padStart(2, '0').toUpperCase()}
                       </span>
@@ -335,25 +351,23 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
                 <div className="flex">
                   {Array.from({ length: BYTES_PER_ROW }, (_, col) => {
                     const idx = base + col;
-                    if (idx >= view.length) return <span key={col} className="inline-block w-[9px]" />;
+                    if (idx >= current.length) return <span key={col} className="inline-block w-[9px]" />;
-                    const byte       = view[idx];
+                    const byte       = current[idx];
                     const printable  = byte >= 32 && byte < 127;
                     const char       = printable ? String.fromCharCode(byte) : '·';
                     const isCursor   = idx === cursor;
                     const isCurMatch = curMatchSet.has(idx);
                     const isAllMatch = allMatchSet.has(idx) && !isCurMatch;
-
                     const color = isCurMatch ? 'bg-orange-500 text-white'
                                 : isAllMatch ? 'bg-yellow-800 text-yellow-200'
                                 : printable  ? 'text-blue-300'
                                 :              'text-neutral-700';
                     const ring  = isCursor && pane === 'ascii' ? ' ring-1 ring-inset ring-blue-400' : '';
-
                     return (
                       <span
                         key={col}
                         className={`inline-block w-[9px] text-center cursor-pointer ${color}${ring}`}
-                        onClick={() => { setCursor(idx); setPane('ascii'); containerRef.current?.focus(); }}
+                        onClick={() => { setCursor(idx); setPane('ascii'); scrollRef.current?.focus(); }}
                       >
                         {char}
                       </span>
@@ -365,6 +379,9 @@ export default function HexEditor({ data, readOnly = false, onSave }: HexEditorP
             );
           })}
         </div>
+
+        {/* bottom spacer */}
+        <div style={{ height: paddingBottom + 12 }} />
       </div>
     </div>
   );

src/app/components/MediaSet.tsx

@@ -0,0 +1,33 @@
+interface MediaSetProps {
+  files: string[];
+  activeUrl: string;
+  onSwitch: (file: string) => void;
+}
+
+export default function MediaSet({ files, activeUrl, onSwitch }: MediaSetProps) {
+  return (
+    <div>
+      <div className="text-sm text-neutral-500 mb-2">Media Set</div>
+      <div className="flex gap-2 flex-wrap">
+        {files.map((file, index) => {
+          const fileName = file.split('/').pop() || file;
+          const title    = fileName.replace(/\.[^.]+$/, '');
+          const active   = activeUrl === file;
+          return (
+            <button
+              key={file}
+              onClick={() => onSwitch(file)}
+              className={`px-3 py-1.5 rounded-lg text-sm ${
+                active
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200'
+              }`}
+            >
+              {`${index + 1}: ${title}`}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/app/components/StatusPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { HardDrive, Activity, Wifi, Signal, Clock, RefreshCw, FolderOpen, Map, Loader2 } from 'lucide-react';
 import DeviceDetailOverlay from './DeviceDetailOverlay';
+import MediaSet from './MediaSet';
 import { ImageWithFallback } from './figma/ImageWithFallback';
 import { Dialog, DialogContent, DialogTitle, DialogDescription } from './ui/dialog';
 import DirectoryListing from './DirectoryListing';
@@ -34,6 +35,24 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
 
   const activeDevice = findActiveDevice();
 
+  const mediaSetFiles: string[] | null = (() => {
+    if (!activeDevice?.url) return null;
+    if (Array.isArray(activeDevice.mediaSet) && activeDevice.mediaSet.length > 0)
+      return activeDevice.mediaSet as string[];
+    const match = (activeDevice.url as string).match(/^(.+?)(\d+)(\.[^.]+)$/);
+    if (!match) return null;
+    const [, prefix, , ext] = match;
+    return Array.from({ length: 10 }, (_, i) => `${prefix}${i + 1}${ext}`);
+  })();
+
+  const switchActiveMedia = (file: string) => {
+    const newConfig = JSON.parse(JSON.stringify(config));
+    if (newConfig.iec?.devices?.drive?.[activeDevice!.number]) {
+      newConfig.iec.devices.drive[activeDevice!.number].url = file;
+      setConfig(newConfig);
+    }
+  };
+
   // Mock activity log - in a real app this would come from device monitoring
   const activityLog = [
     { time: '14:32:15', event: 'File opened: game.d64', type: 'info' },
@@ -133,6 +152,12 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
               <div className="w-2 h-2 rounded-full bg-green-500" />
             </div>
 
+            {mediaSetFiles && (
+              <div className="mt-2">
+                <MediaSet files={mediaSetFiles} activeUrl={activeDevice.url ?? ''} onSwitch={switchActiveMedia} />
+              </div>
+            )}
+
             {/* Directory and Disk Map buttons at bottom */}
 
             {/* New device info cards */}
@@ -170,47 +195,6 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
               </div>
             )}
 
-            {/* Media switch buttons if media set is detected */}
-            {(() => {
-              // Media set detection logic (copied from DeviceDetailOverlay)
-              const url = activeDevice.url;
-              if (!url) return null;
-              const match = url.match(/^(.+?)(\d+)(\.[^.]+)$/);
-              if (!match) return null;
-              const [, prefix, num, ext] = match;
-              const currentNum = parseInt(num);
-              const mediaSet = [];
-              for (let i = 1; i <= 10; i++) {
-                mediaSet.push(`${prefix}${i}${ext}`);
-              }
-              return (
-                <div className="flex flex-wrap gap-2 mt-2">
-                  {mediaSet.map((file, idx) => {
-                    const fileName = file.split('/').pop() || file;
-                    const title = fileName.replace(/\.[^.]+$/, '');
-                    return (
-                      <button
-                        key={file}
-                        className={`px-2 py-1 rounded text-xs border ${url === file ? 'bg-blue-600 text-white border-blue-600' : 'bg-neutral-100 text-neutral-700 border-neutral-300'}`}
-                        onClick={e => {
-                          e.stopPropagation();
-                          if (setConfig) {
-                            const newConfig = JSON.parse(JSON.stringify(config));
-                            let current = newConfig;
-                            if (current.iec && current.iec.devices && current.iec.devices.drive && current.iec.devices.drive[num]) {
-                              current.iec.devices.drive[num].url = file;
-                              setConfig(newConfig);
-                            }
-                          }
-                        }}
-                      >
-                        {`${idx + 1}: ${title}`}
-                      </button>
-                    );
-                  })}
-                </div>
-              );
-            })()}
             <div className="flex flex-col gap-2 mt-6">
               <button
                 className="flex items-center justify-center gap-2 px-3 py-3 rounded bg-neutral-200 text-neutral-700 hover:bg-blue-600 hover:text-white transition text-base font-medium w-full"
@@ -249,9 +233,9 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
 
           {/* Directory Overlay */}
           {showDirectory && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center">
+            <>
-              <div className="absolute inset-0 bg-black/40 backdrop-blur-md" onClick={() => setShowDirectory(false)} />
+              <div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-md" onClick={() => setShowDirectory(false)} />
-              <div className="relative w-full h-full bg-white/90 shadow-2xl overflow-auto flex flex-col" onClick={(e) => e.stopPropagation()}>
+              <div className="fixed inset-0 z-50 bg-white shadow-2xl flex flex-col" onClick={(e) => e.stopPropagation()}>
                 <div className="flex items-center justify-between p-4 border-b">
                   <div className="min-w-0">
                     <h2 className="text-xl font-medium">Directory</h2>
@@ -261,7 +245,7 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
                   </div>
                   <button onClick={() => setShowDirectory(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' /></svg></button>
                 </div>
-                <div className="flex-1 overflow-auto flex flex-col">
+                <div className="flex-1 min-h-0 flex flex-col">
                   {!activeDevice?.url && (
                     <div className="p-8 text-center text-neutral-500 text-sm">
                       No file mounted on this device.
@@ -294,23 +278,23 @@ export default function StatusPage({ config, setConfig }: StatusPageProps) {
                   )}
                 </div>
             </div>
-            </div>
+            </>
           )}
 
           {/* Disk Map Overlay */}
           {showDiskMap && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center">
+            <>
-              <div className="absolute inset-0 bg-black/40 backdrop-blur-md" onClick={() => setShowDiskMap(false)} />
+              <div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-md" onClick={() => setShowDiskMap(false)} />
-              <div className="relative w-full h-full max-w-2xl sm:rounded-xl bg-white/90 shadow-2xl overflow-auto flex flex-col mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0" style={{ maxHeight: '100dvh' }}>
+              <div className="fixed inset-0 z-50 bg-white shadow-2xl flex flex-col" onClick={(e) => e.stopPropagation()}>
                 <div className="flex items-center justify-between p-4 border-b">
                   <h2 className="text-xl font-medium">Disk Map</h2>
                   <button onClick={() => setShowDiskMap(false)} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"><svg xmlns='http://www.w3.org/2000/svg' className='w-6 h-6' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' /></svg></button>
                 </div>
-                <div className="flex-1 overflow-auto flex items-center justify-center text-neutral-500 p-4">
+                <div className="flex-1 min-h-0 overflow-auto flex items-center justify-center text-neutral-500 p-4">
                   <span>Disk map visualization goes here.</span>
                 </div>
             </div>
-            </div>
+            </>
           )}
       {/* Reset Activity Modal */}
       <Dialog open={!!showResetModal} onOpenChange={open => !open && setShowResetModal(null)}>

src/app/webdav.ts

@@ -317,6 +317,19 @@ export async function getFileContents(path: string): Promise<Blob> {
   return r.blob();
 }
 
+/**
+ * Fetch a byte range of a file using HTTP Range requests.
+ * Returns a Blob containing the requested bytes. Falls back to a full
+ * fetch if the server responds 200 (no Range support).
+ */
+export async function getFileRange(path: string, start: number, end: number): Promise<Blob> {
+  const base = getWebDAVClient().client.baseUrl;
+  const url  = pathToUrl(normalizePath(path), base);
+  const r    = await fetch(url, { headers: { Range: `bytes=${start}-${end}` } });
+  if (r.status === 206 || r.status === 200) return r.blob();
+  throw new Error(`GET range failed: ${r.status} ${r.statusText}`);
+}
+
 // ----- Helpers --------------------------------------------------------
 
 /** Convert a server-relative path to an absolute URL on the configured base. */