feat(frontend): LanderCanvas + App wiring cursor and state to WebSocket

Frontend/src/App.tsx

@@ -1,3 +1,34 @@
-export function App() {
-  return <div style={{ padding: 20 }}>Frontend placeholder</div>;
+import { useGameSocket } from './hooks/useGameSocket';
+import { LanderCanvas } from './LanderCanvas';
+
+// Vite dev server proxies `/ws` → `ws://localhost:5100`. In prod the backend
+// serves the built static files, so same-origin works there too.
+function buildWsUrl(): string {
+  const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${proto}//${window.location.host}/ws/game`;
+}
+
+export function App() {
+  const { connected, state, sendCursor } = useGameSocket(buildWsUrl());
+
+  return (
+    <>
+      <LanderCanvas state={state} onCursor={sendCursor} />
+      <StatusBar connected={connected} step={state?.step ?? 0} />
+    </>
+  );
+}
+
+interface StatusBarProps { connected: boolean; step: number; }
+function StatusBar({ connected, step }: StatusBarProps) {
+  return (
+    <div style={{
+      position: 'fixed', top: 8, left: 8, padding: '4px 10px',
+      background: 'rgba(0,0,0,0.5)', borderRadius: 4, fontSize: 12,
+      pointerEvents: 'none',
+    }}>
+      <span style={{ color: connected ? '#5f5' : '#f55' }}>●</span>{' '}
+      {connected ? 'connected' : 'disconnected'} · step {step}
+    </div>
+  );
 }