feat(01-01): create device registry, show store, FastAPI app, API routes, and frontend shell

- DeviceRegistry with load/save/add/remove/instantiate and _DEVICE_CLASSES dict
- ShowStore with save/load/list_ids using aiofiles for async I/O
- FastAPI app with lifespan hook (startup: load registry/store, shutdown: save registry)
- API routes: GET/POST /api/devices/, DELETE /api/devices/{id}, GET/POST /api/shows/, GET /api/shows/{id}
- WebSocket stub at /ws with ConnectionManager and ack echo
- Frontend shell: DAW layout with header, sidebar (DEVICES + ANIMATIONS), TIMELINE, TRANSPORT
- Terminal aesthetic: dark theme, cyan accents, monospace fonts, no drop shadows
- .gitignore for runtime data (devices.json, shows/, __pycache__, .venv)
This commit is contained in:
Claude
2026-04-05 18:47:25 +00:00
parent 061edfcf6a
commit 5e10272c69
13 changed files with 564 additions and 0 deletions

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LIGHTSYNC</title>
<link rel="stylesheet" href="/style.css">
<!-- JetBrains Mono via Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="app-shell">
<header class="header">
<span class="header-title">&#9632; LIGHTSYNC</span>
<div class="status-dot" id="status-dot"></div>
<span id="status-text" class="text-dim">OFFLINE</span>
<span id="show-name" class="text-dim">&#8212; no show loaded &#8212;</span>
</header>
<aside class="sidebar">
<div class="panel" style="flex: 1; min-height: 0;">
<div class="panel-header">DEVICES</div>
<div class="panel-content" id="device-list">
<span class="text-dim">loading...</span>
</div>
</div>
<div class="panel" style="flex: 0 0 120px;">
<div class="panel-header">ANIMATIONS</div>
<div class="panel-content text-dim">[ PHASE 3+ ]</div>
</div>
</aside>
<main class="main-area">
<span>[ TIMELINE &#8212; PHASE 2+ ]</span>
</main>
<footer class="transport-bar">
<span>[ TRANSPORT &#8212; PHASE 2+ ]</span>
</footer>
</div>
<script src="/app.js" type="module"></script>
</body>
</html>