Meatloaf Manipulator — Agent Context

Project Overview

Meatloaf Manipulator is a React/Vite PWA for configuring and managing Meatloaf devices (Commodore 64 retro computing hardware). It is served at https://meatloaf.cc/config/.

Tech Stack

Framework: React 18 + Vite 6
Styling: Tailwind CSS 4 (via @tailwindcss/vite)
UI components: Radix UI primitives, MUI icons (@mui/icons-material), Lucide React icons
Routing: React Router 7 (single-page, page state managed in App.tsx)
Build base path: /config/ (overridable via BASE_PATH env var)

Project Structure

src/
  app/
    App.tsx               # Root component: routing, nav, layout
    components/
      StatusPage.tsx       # System status, activity log, file info, progress, overlays
      DevicesPage.tsx      # Device list
      DeviceDetailOverlay.tsx
      GeneralPage.tsx      # General/settings
      IECPage.tsx          # IEC bus configuration
      NetworkPage.tsx      # Network settings
      OtherPage.tsx        # Misc settings
      ToolsPage.tsx        # Tools
      SearchOverlay.tsx
      WiFiScanOverlay.tsx
      FileBrowser.tsx
      figma/               # Figma-generated components
      ui/                  # shadcn/Radix UI wrappers
  imports/
    logo.svg
    config.json            # Device config data shape
  main.tsx
  styles/
public/
  manifest.webmanifest
  icon.192.png / icon.512.png
  service-worker.js        # PWA service worker
index.html
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

Apps Page

Grid of app cards grouped by category, each navigates to a stub AppPage:

Disk: Directory Editor, Sector Editor, BAM Editor, Disk Visualizer, RAM/ROM Explorer, Dump Disk Image, 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

All individual app pages are currently stubs (AppPage component with "coming soon" message).

Work to Date (chronological)

Initial commit — project scaffolded with basic pages
StatusPage enhancements — file info display, loading progress bar
StatusPage overlays — reset functionality, directory map overlay, disk map overlay
SearchOverlay polish — improved layout, responsiveness, background opacity
DeviceDetailOverlay — media button titles improved
Apps page — added apps nav item; built AppCard grid with category groupings; added stub AppPage for all individual apps
StatusPage layout — reorganized action buttons; enhanced system status display and activity log
PWA support — added manifest.webmanifest, service worker, PWA icons (icon.192.png, icon.512.png)
Vite base path — set base: process.env.BASE_PATH || '/config/' in vite.config.ts
Icon/manifest path fix — updated icon paths in manifest and HTML; adjusted service worker registration

Known Issues / Open Work

Service worker 404: https://meatloaf.cc/service-worker.js returns 404. The SW is likely not being copied to the dist output at the correct path, or the registration URL does not account for the /config/ base path.
App pages: All individual app pages (Directory Editor, Sector Editor, etc.) are stubs. Actual implementations are pending.
apple-mobile-web-app-capable deprecation: Already resolved in index.html (uses mobile-web-app-capable instead).

Configuration Shape

Config is loaded from src/imports/config.json and passed as props (config, setConfig) to all page components.

4.1 KiB Raw Blame History