From ead4839df4df701781a4ff7890c2d6082196b6c9 Mon Sep 17 00:00:00 2001
From: "claude (duplicate_chess)" <claude@sethpc.xyz>
Date: Tue, 19 May 2026 01:13:00 -0400
Subject: [PATCH] feat(ui): assemble the duplicate chess sandbox app

Wire Compass, Panel, and PromotionDialog into App.svelte; apply dark-theme
base styles in app.css. Build passes, 26 tests pass, smoke render confirmed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.svelte | 25 +++++++++++++++++++++++--
 src/app.css    |  8 ++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 69a0cac..3386e96 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,4 +1,25 @@
-<main>
+<script lang="ts">
+  import Compass from './lib/Compass.svelte';
+  import Panel from './lib/Panel.svelte';
+  import PromotionDialog from './lib/PromotionDialog.svelte';
+</script>
+
+<header>
   <h1>Duplicate Chess</h1>
-  <p>Sandbox under construction.</p>
+  <p>Local sandbox — operator drives all four players. Click a piece on the
+     glowing boards to see its synchronized-legal moves.</p>
+</header>
+
+<main>
+  <Compass />
+  <Panel />
 </main>
+
+<PromotionDialog />
+
+<style>
+  header { padding: 14px 22px; border-bottom: 1px solid #333845; }
+  header h1 { margin: 0; font-size: 17px; }
+  header p { margin: 4px 0 0; font-size: 12px; color: #9aa0aa; }
+  main { display: flex; gap: 22px; padding: 20px 22px; align-items: flex-start; }
+</style>
diff --git a/src/app.css b/src/app.css
index e69de29..b9ba296 100644
--- a/src/app.css
+++ b/src/app.css
@@ -0,0 +1,8 @@
+:root { color-scheme: dark; }
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: #15171c;
+  color: #e6e8ec;
+  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
+}