From 4ded92c82208ce03ad98bb139cdfb74685a865f5 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Sat, 18 Apr 2026 19:50:32 +0200
Subject: [PATCH] Add terrain details to App component

---
 src/app/App.tsx | 51 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index c7cab9bc..359e93fb 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -15043,6 +15043,57 @@ export function App({ store, initialStatusMessage }: AppProps) {
                     </div>
                   </div>
                 </>
+              ) : selectedTerrain !== null ? (
+                <>
+                  <div className="stat-card">
+                    <div className="label">Terrain</div>
+                    <div className="value">
+                      {getTerrainLabelById(selectedTerrain.id, terrainList)}
+                    </div>
+                    <div className="material-summary">
+                      {selectedTerrain.sampleCountX} x {selectedTerrain.sampleCountZ} samples
+                      {" · "}
+                      {selectedTerrain.cellSize}m cells
+                    </div>
+                    <div className="material-summary">{selectedTerrain.id}</div>
+                  </div>
+
+                  <div className="form-section">
+                    <div className="label">Authored State</div>
+                    <div className="material-summary">
+                      {formatAuthoredObjectStateSummary(selectedTerrain) ??
+                        "Visible and enabled"}
+                    </div>
+                    <div className="material-summary">
+                      Terrain editing tools land in a later inspector slice. This foundation keeps the authored grid and derived mesh selectable and inspectable.
+                    </div>
+                  </div>
+
+                  <div className="form-section">
+                    <div className="label">Grid</div>
+                    <div className="material-summary">
+                      {(selectedTerrain.sampleCountX - 1) * selectedTerrain.cellSize}m x{" "}
+                      {(selectedTerrain.sampleCountZ - 1) * selectedTerrain.cellSize}m footprint
+                    </div>
+                    <div className="material-summary">
+                      {selectedTerrain.heights.length} height samples
+                    </div>
+                    {selectedTerrainHeightRange === null ? null : (
+                      <div className="material-summary">
+                        Height range {selectedTerrainHeightRange.min}m to{" "}
+                        {selectedTerrainHeightRange.max}m
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="form-section">
+                    <div className="label">Origin</div>
+                    <div className="material-summary">
+                      X {selectedTerrain.position.x} · Y {selectedTerrain.position.y} · Z{" "}
+                      {selectedTerrain.position.z}
+                    </div>
+                  </div>
+                </>
               ) : selectedModelInstance !== null ? (
                 <>
                   <div className="stat-card">