render Observed At time into user local time and move Snake Status and Thinking Boxes around to look more better

server/templates/dashboard.html

@@ -775,6 +775,20 @@
       return String(value);
     }
 
+    function formatObservedAtLocal(value) {
+      if (value === null || value === undefined || value === "") return "-";
+      const raw = String(value).trim();
+      const parsed = new Date(raw);
+      if (Number.isNaN(parsed.getTime())) {
+        return safeString(raw).slice(11, 19);
+      }
+      return parsed.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      });
+    }
+
     function renderStats(summary) {
       const finished = summary.finished_games || 0;
       const wins = summary.wins || 0;
@@ -1295,27 +1309,12 @@
           <div class="chip"><span class="k">Chosen Move</span><span class="v">${safeString(turn.my_move)}</span></div>
           <div class="chip"><span class="k">Snake Type</span><span class="v">${snakeType}</span></div>
           <div class="chip"><span class="k">Snake Version</span><span class="v">${snakeVersion}</span></div>
-          <div class="chip"><span class="k">Observed At</span><span class="v">${safeString(turn.observed_at).slice(11, 19)}</span></div>
+          <div class="chip"><span class="k">Observed At</span><span class="v">${formatObservedAtLocal(turn.observed_at)}</span></div>
           <div class="chip"><span class="k">Food Count</span><span class="v">${Array.isArray(turn.food) ? turn.food.length : 0}</span></div>
           <div class="chip"><span class="k">Hazard Count</span><span class="v">${Array.isArray(turn.hazards) ? turn.hazards.length : 0}</span></div>
         </div>
 
-        <section>
-          <p class="section-title">Decision Summary</p>
-          <ul class="reason-list">${reasonList}</ul>
-        </section>
-
-        <section class="scores-section">
-          <p class="section-title">Move Scores</p>
-          <table class="score-table">
-            <colgroup><col style="width:50%"><col style="width:50%"></colgroup>
-            <thead><tr><th>Move</th><th>Score</th></tr></thead>
-            <tbody>${buildScoresRows(reasoning)}</tbody>
-          </table>
-        </section>
-
         <section class="snakes-section">
-          <p class="section-title">Snake State This Turn</p>
           <table class="score-table">
             <colgroup>
               <col style="width:32%">
@@ -1331,6 +1330,20 @@
           </table>
         </section>
 
+        <section class="scores-section">
+          <p class="section-title">Move Scores</p>
+          <table class="score-table">
+            <colgroup><col style="width:50%"><col style="width:50%"></colgroup>
+            <thead><tr><th>Move</th><th>Score</th></tr></thead>
+            <tbody>${buildScoresRows(reasoning)}</tbody>
+          </table>
+        </section>
+
+        <section>
+          <p class="section-title">Decision Summary</p>
+          <ul class="reason-list">${reasonList}</ul>
+        </section>
+
         <section class="raw-block">
           <p class="section-title">Raw Reasoning Payload</p>
           <pre class="mono">${JSON.stringify(reasoning, null, 2)}</pre>