# Meatloaf Manipulator

A Progressive Web App (PWA) for configuring and managing [Meatloaf](https://meatloaf.cc) devices — open-source Commodore 64/128 hardware that adds modern networking, storage, and peripheral support.

## Features

- **Status** — live system status, activity log, file info, loading progress, directory and disk map overlays; WebSocket connection status; reset device or host (sends command via WebSocket)
- **Devices** — browse and manage attached IEC devices; Rescan Bus sends `iec scan` via WebSocket
- **IEC** — configure the IEC serial bus (fastloaders, chainloaders, directory options)
- **Network** — manage WiFi networks (scan, connect, remove); clicking a known network reconnects and moves it to the top; all connect/scan actions send commands via WebSocket
- **Media Manager** — WebDAV file browser with per-row action menus, folder configuration (`.config` editor), media set detection with existence checks, and smart `base_url` mount logic
- **Reality Override** — full-screen WebSocket command display over a Three.js Digital Tokamak vortex; double-tap to toggle background; twinkling star field when hidden
- **Reality Override Admin** — command palette for Image/Audio/Video conversion commands plus freeform input; broadcasts to all connected clients via WebSocket
- **Apps** — built-in tools grouped by category:
  - **Management**: Media Manager, Print Manager, Serial Console, 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
  - **Display**: Idle Animation, Loading Animation, Reality Override, Override Admin
- **PWA** — installable on desktop and mobile; runs offline via service worker; fullscreen-capable with safe-area insets for notched phones

## Architecture Highlights

### Shared WebSocket
A single `WebSocket` connection to `ws://<device-hostname>/ws` is managed by `WsProvider` (`src/app/ws.tsx`) and shared app-wide via React Context. Any component can send commands or subscribe to incoming frames via `useWs()`. The connection auto-reconnects every 3 s on drop.

### Split Config Storage
Device settings are stored in two separate files on the device (LittleFS erase-block friendly, ≤ 4 096 bytes each):

| File | Contents |
|---|---|
| `/.sys/config.json` | General, host, hardware, WiFi, network, Bluetooth, modem, cassette, BOIP, IEC bus settings |
| `/.sys/devices.json` | IEC device list (`iec.devices`) |

`useSettings()` loads both files in parallel and merges them; saves split them back automatically. A bundled fallback (`src/imports/config.json`) is used as the initial UI state while the device is being contacted.

### WebDAV Layer
All file I/O goes through `src/app/webdav.ts`, which wraps the vendored `webdav-component` (browser-native `fetch` + `DOMParser`, no npm dependencies).

## Requirements

- Node.js 18+
- npm or pnpm

## Installation

```bash
npm install
# or
pnpm install
```

## Development

```bash
npm run dev
```

The app is served at `http://localhost:5173/config/` by default.

Start the local WebDAV + WebSocket dev server (requires Python 3):

```bash
python webdav3.py
```

This serves `files/` over WebDAV and provides a `/ws` WebSocket endpoint on port 80.

To use a different base path:

```bash
BASE_PATH=/my-path/ npm run dev
```

## Production Build

```bash
npm run build
```

Output is written to `dist/`. The build uses `/config/` as the base path by default. Override with the `BASE_PATH` environment variable at build time:

```bash
BASE_PATH=/config/ npm run build
```

Deploy the contents of `dist/` to the Meatloaf device web server under the configured base path.