diff --git a/AGENTS.md b/AGENTS.md index 693555a..f150116 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -10,6 +10,7 @@ - **Styling**: Tailwind CSS 4 (via `@tailwindcss/vite`) - **UI components**: Radix UI primitives, Lucide React icons - **3D / animation**: Three.js r0.160 (`WebGLRenderer`, `EffectComposer`, `UnrealBloomPass`, custom GLSL shaders) +- **Terminal**: xterm.js (`@xterm/xterm`, `@xterm/addon-fit`) — SerialConsolePage only - **Routing**: React Router 7 (single-page, page state managed in `App.tsx`) - **Build base path**: `/config/` (overridable via `BASE_PATH` env var) @@ -18,12 +19,16 @@ ``` src/ app/ - App.tsx # Root component: routing, nav, layout, SaveStatusBadge, WsProvider wrapper + App.tsx # Root component: routing, nav, layout, WsProvider wrapper + # fileManagerInitialPath / fileManagerReturnPage state for + # deep-linking into MediaManager from StatusPage settings.ts # useSettings() hook — loads config.json + devices.json, saves split webdav.ts # WebDAV abstraction (listDirectory, stat, put/get, fileExists, etc.) ws.tsx # WsProvider + useWs() — single shared WebSocket connection context components/ StatusPage.tsx # System status, activity log, reset (via WS), WS status indicator + # Active Device panel: FolderOpen → MediaManager, DirectorySlideshow + # or per-entry cover image, MediaSet with named entries DevicesPage.tsx # Device list, Rescan Bus (sends "iec scan" via WS) DeviceDetailOverlay.tsx GeneralPage.tsx # General/settings @@ -36,11 +41,31 @@ src/ MediaManager.tsx # WebDAV file browser: file icons by type, kebab actions, # Configure Folder (.config editor), base_url mount logic, # media set existence check, navigate into new folder + # initialPath takes priority over localStorage when set + MediaBrowser.tsx # Lightweight file picker (used in device mount dialogs) + MediaEntry.tsx # Shared entry row: icon by extension, hover highlight (blue left border), + # leftSlot / nameSlot props; exports EntryIcon + extension sets + MediaViewerEditor.tsx # Viewer/editor shell: tiled icon background (z-index:-1), toolbar + MediaSet.tsx # Disk-swap button row; MediaSetEntry = string | {url, name?}; + # exports mediaSetEntryUrl() helper + DirectorySlideshow.tsx # Auto-advancing image slideshow from a WebDAV directory; + # prev/next arrows, dot indicators, centered pause/play button; + # controls appear on hover or tap; paused + idx persisted to localStorage + HexEditor.tsx # Hex viewer: responsive 8/16 col via ResizeObserver; bright address col + ConfigEditor.tsx # YAML-style .config editor + CodeEditor.tsx # CodeMirror code editor (transparent background) + SerialConsolePage.tsx # xterm.js terminal over shared WS; line-buffered input with echo + # suppression; tiled background overlay + ProfilePage.tsx # Full-page profile menu (replaced dropdown); iOS-style grouped list + AboutMeatloafPage.tsx # Project info table, GPL3 license RealityOverridePage.tsx # Full-screen WS command display; Three.js Digital Tokamak # vortex + star field; double-tap to toggle background RealityOverrideAdminPage.tsx # Command palette (Image/Audio/Video); freeform input; WS send figma/ # Figma-generated components - ui/ # shadcn/Radix UI wrappers + ui/ + lazy-loader.tsx # Animated progress bar for Suspense fallbacks (staged steps) + confirm-dialog.tsx + # … other shadcn/Radix UI wrappers vendor/ webdav-component/ # Vendored ESM WebDAV client (no external deps) esm/index.js @@ -67,24 +92,25 @@ vite.config.ts Bottom tab bar + header icons: -| Nav item | Page key | Component | -|-------------|-------------|------------------| -| Status | `status` | StatusPage | -| Devices | `devices` | DevicesPage | -| IEC | `iec` | IECPage | -| Network | `network` | NetworkPage | -| More | `other` | OtherPage | -| (header) | `apps` | Apps grid | -| (profile) | `general` | GeneralPage | -| (profile) | `tools` | ToolsPage | +| Nav item | Page key | Component | +|-------------|-------------------|------------------| +| Status | `status` | StatusPage | +| Devices | `devices` | DevicesPage | +| IEC | `iec` | IECPage | +| Network | `network` | NetworkPage | +| System | `tools` | ToolsPage | +| (header) | `apps` | Apps grid | +| (header) | `profile` | ProfilePage | +| (profile) | `general` | GeneralPage | +| (profile) | `about-meatloaf` | AboutMeatloafPage | -Header also has: fullscreen toggle (Maximize2/Minimize2), search, apps grid, save-status badge, profile menu. Logo click → status page. +Header: fullscreen toggle, search, apps grid, profile button (→ ProfilePage). Logo click → status page. Toast messages appear `bottom-center` just above the navbar (`offset="calc(4rem + env(safe-area-inset-bottom))"`). ## Apps Page Grid of app cards grouped by category, each navigates to a stub `AppPage` unless implemented: -- **Management**: Media Manager, Print Manager, Serial Console, Short Codes +- **Management**: Media Manager, Print Manager, **Serial Console** (implemented), Short Codes - **Disk**: RAM/ROM Explorer, BAM Editor, Directory Editor, Sector Editor, Disk Visualizer, Dump/Write Disk Image - **Cartridge**: PRG to CRT, Magic Desk Cart Builder, Easy Flash Cart Builder - **Development**: Basic Editor, Assembler, Sprite Editor, Character Set Editor, Petscii Editor @@ -130,13 +156,27 @@ Grid of app cards grouped by category, each navigates to a stub `AppPage` unless 36. **WiFi Scan via WebSocket** — NetworkPage "Scan" button sends `"scan"` via shared WS before opening overlay 37. **WiFi connect via WebSocket** — WiFiScanOverlay "Connect" sends `"connect "` or `"connect "`; NetworkPage known-network click sends same command, marks network `enabled: 1`, moves it to top of list 38. **Split config / devices storage** — `settings.ts` loads `/.sys/config.json` and `/.sys/devices.json` in parallel; merges with one-level deep merge (so `iec.devices` from devices.json is merged into `iec` from config.json); saves with split: `iec.devices` → `devices.json`, everything else (including remaining `iec` bus settings) → `config.json`; `beforeunload` flush also split across both files +39. **SerialConsolePage** — xterm.js terminal (`@xterm/xterm` + `@xterm/addon-fit`) over shared `useWs()`; line-buffered input: printable chars echoed locally, `\r` sends buffer, `\x7f` backspaces, `\x03` clears; echo suppression via `echoQueue` ref; tiled icon background; lazy-loaded +40. **LazyLoader component** — `ui/lazy-loader.tsx`: animated progress bar with staged percentage steps (30 → 60 → 80 → 92%) for Suspense fallbacks; replaces inline `PageLoader` in `App.tsx` +41. **MediaViewerEditor tiled background** — icon tile overlay (`z-index: -1`) inside a `z-index: 0` stacking context; sub-components (HexEditor, ConfigEditor, CodeEditor) use transparent backgrounds so the tile shows through +42. **HexEditor responsive columns** — `ResizeObserver` on scroll container switches between 8 columns (< 600px) and 16 columns (≥ 600px); address column brightened to `text-neutral-400` +43. **ProfilePage** — `ProfilePage.tsx` replaces the header dropdown; iOS-style grouped list with Preferences → GeneralPage, Notifications (stub), Documentation (stub), About Meatloaf → AboutMeatloafPage, Log Out; profile button in header navigates to `'profile'` page key +44. **AboutMeatloafPage** — `AboutMeatloafPage.tsx`: logo, project info table (Project, Platform, Website, GitHub), GPL3 license note +45. **MediaEntry hover highlight** — `border-l-2 border-l-transparent` always reserves space (no layout shift); `hover:bg-blue-50 hover:border-l-blue-400`; selected state mirrors hover; also applied to `..` (navigate-up) rows in MediaBrowser and MediaManager +46. **Toast position** — `` — toasts appear just above the navbar on all devices +47. **StatusPage: Browse active device** — `FolderOpen` button in Active Device panel header opens MediaManager at `base_url` (if set) or parent directory of `url`; uses `fileManagerInitialPath` / `fileManagerReturnPage` state in `App.tsx`; Apps page card clears `fileManagerInitialPath` so normal navigation restores last-visited path from localStorage +48. **MediaManager initialPath priority** — `initialPath` prop now takes priority over `localStorage` when explicitly set (uses `??` instead of `||`); default changed from `'/'` to `undefined` +49. **DirectorySlideshow component** — `DirectorySlideshow.tsx`: lists a WebDAV directory, filters for image files, auto-advances every 4 s; prev/next arrow buttons + dot indicators + centered pause/play button; all controls fade in on hover or tap (3 s auto-hide on touch); `paused` persisted to `localStorage` key `slideshow.paused`; `idx` persisted to `localStorage` key `slideshow.idx:` (per directory, clamped to image count on restore) +50. **MediaSet named entries** — `MediaSetEntry = string | { url: string; name?: string }`; `MediaSet.tsx` exports the type and `mediaSetEntryUrl()` helper; `name` field displayed instead of filename when provided; `DeviceDetailOverlay` and `StatusPage` updated to use `MediaSetEntry[]` +51. **StatusPage: Active Device cover image** — when `activeDevice.url` has a matching image in the same directory, it is shown (fixed `h-48`) instead of the `DirectorySlideshow`; matching is case-insensitive with `_`/`-`/space normalization via a single `listDirectory` call; the media_set entry's `name` field is tried first, URL base name second ## Known Issues / Open Work - **Service worker 404**: `https://meatloaf.cc/service-worker.js` returns 404. The SW is not being served at the correct path relative to the `/config/` base. -- **App pages**: Most individual app pages are stubs. Reality Override and Override Admin are implemented; all others show "coming soon". +- **App pages**: Most individual app pages are stubs. Reality Override, Override Admin, and Serial Console are implemented; all others show "coming soon". - **WiFi scan results**: Currently mock data. Needs real scan results delivered over WebSocket from the device. - **Reset confirmation**: The "in-progress" and "done" states are simulated with `setTimeout`. Needs real completion signal from the device over WebSocket. +- **StatusPage mock data**: Last File Access, Size, Transfer Speed, Uptime, IP/MAC, WiFi status, and memory stats are all hardcoded mock values. ## Configuration Shape @@ -151,6 +191,20 @@ The `useSettings()` hook in `settings.ts` loads both files on mount, merges them The bundled `src/imports/config.json` is used as the initial UI state while the server fetch is in flight. It contains the full merged shape (including `iec.devices`) so the UI renders immediately without waiting. +### media_set format + +`media_set` entries can be plain strings (URL) or named objects: + +```json +"media_set": [ + { "url": "/sd/game/1.d64", "name": "Boot Disk" }, + { "url": "/sd/game/2.d64", "name": "Disk 1 - Side A" }, + "/sd/game/3.d64" +] +``` + +When a `name` is present, it is shown in the MediaSet UI instead of the filename, and is used as the primary candidate when looking for a matching cover image. + ## WebSocket Layer A single `WebSocket` connection to `ws:///ws` is managed by `WsProvider` in `ws.tsx` and shared app-wide via React Context. diff --git a/src/app/components/DevicesPage.tsx b/src/app/components/DevicesPage.tsx index fd7fdd3..61245b2 100644 --- a/src/app/components/DevicesPage.tsx +++ b/src/app/components/DevicesPage.tsx @@ -144,16 +144,17 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp onChange={(e) => updateSetting(['host', 'model'], e.target.value)} className="w-full px-3 py-2 border border-neutral-300 rounded-lg" > - - - - - - - - + + + + + + + + +
@@ -195,7 +196,7 @@ export default function DevicesPage({ config, setConfig, openDeviceId, onClearOp
-

IEC Devices

+

IEC Serial Devices