feat(ui): anteprima area nella sidebar

- Aggiunta descrizione area corrente tra Missioni e Aree
- Mostra nome, descrizione e atmosfera dell'area
- Sezione visibile solo quando si e' in una area
- Dati arricchiti con description/atmosphere/features

src/web/server.py

@@ -249,6 +249,9 @@ def _build_state(campaign_id: int) -> dict:
             "name": full.get("name", aid),
             "visited": bool(sa.get("visited")),
             "connections": conn_names,
+            "description": full.get("description", "")[:300],
+            "atmosphere": full.get("atmosphere", ""),
+            "features": full.get("features", []),
         })
     return {
         "turn": ctx.turn,

src/web/static/index.html

@@ -274,6 +274,23 @@ html, body {
   border-left: 2px solid transparent;
   transition: border-color 0.2s, background 0.2s;
 }
+
+/* Area preview */
+#area-preview-section { display: none; }
+#area-preview-section.visible { display: block; }
+#area-preview-title {
+  font-family: var(--font-display);
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--gold);
+  margin-bottom: 4px;
+}
+#area-preview-desc {
+  font-size: 13px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
 .area-item.visited { color: var(--text-secondary); }
 .area-item.current {
   color: var(--gold-bright);
@@ -839,6 +856,11 @@ html, body {
       <h2>Missioni</h2>
       <div id="quest-display"><div class="empty-state">Nessuna missione</div></div>
     </div>
+    <div class="sidebar-section" id="area-preview-section" style="display:none;">
+      <h2 id="area-preview-title">Luogo</h2>
+      <div id="area-preview-desc"></div>
+      <div id="area-preview-atmo" style="font-size:12px;color:var(--text-muted);font-style:italic;margin-top:4px;"></div>
+    </div>
     <div class="sidebar-section" id="area-section">
       <h2>Aree</h2>
       <div id="area-display"><div class="empty-state">Nessuna area</div></div>
@@ -1077,6 +1099,7 @@ function applyState(s) {
   renderChar(s.characters);
   renderQuests(s.quests);
   renderAreas(s.areas);
+  renderAreaPreview(s.areas, s.current_area_id);
 }
 
 // ================================================================
@@ -1139,11 +1162,26 @@ function renderCharSelector(chars) {
 
 function selectChar(id) {
   selectedCharId = selectedCharId === id ? null : id;
-  // Re-render selector to update active state
   renderCharSelector(state.characters);
   input.focus();
 }
 
+function renderAreaPreview(areas, currentId) {
+  const section = document.getElementById('area-preview-section');
+  const title = document.getElementById('area-preview-title');
+  const desc = document.getElementById('area-preview-desc');
+  const atmo = document.getElementById('area-preview-atmo');
+  const area = areas?.find(a => a.id === currentId);
+  if (area) {
+    section.classList.add('visible');
+    title.textContent = area.name || currentId;
+    desc.textContent = area.description || '';
+    atmo.textContent = area.atmosphere || '';
+  } else {
+    section.classList.remove('visible');
+  }
+}
+
 async function replaceFunnelDead() {
   const resp = await fetch(`${BASE}/api/campaign/${campaignId}/character`, { method: 'POST' });
   const data = await resp.json();