Frontend: revert panel order — SoC between Journal and Trace

frontend/index.html

@@ -129,13 +129,6 @@
     .trait-grid .t b { color: var(--text); float: right; }
     #journal { max-height: 140px; overflow-y: auto; }
     #journal li { font-size: 11px; color: #cbb; margin: 2px 0; }
-    #s-goal-big {
-      font-size: 14px; line-height: 1.4; color: var(--text);
-      font-style: italic; padding: 8px 10px;
-      background: rgba(235, 124, 73, 0.08);
-      border-left: 3px solid var(--accent);
-      border-radius: 0 4px 4px 0;
-    }
     #soc {
       font-size: 12px; line-height: 1.5; color: #cbb;
       padding: 10px; background: var(--bg-deep);
@@ -144,7 +137,6 @@
       max-height: 140px; overflow-y: auto;
     }
     #soc.empty { color: var(--muted); font-style: italic; }
-    .row.config { opacity: 0.85; }
     #trace {
       height: 400px; overflow-y: auto;
       background: var(--bg-deep); border: 1px solid #333; border-radius: 4px;
@@ -223,38 +215,38 @@
         <div><b id="s-name">—</b> · <span id="s-arch" style="color: var(--muted);"></span></div>
       </div>
       <div class="row">
-        <div class="label">Goal</div>
-        <div id="s-goal-big"></div>
-      </div>
-      <div class="row">
-        <div class="label">Stream of consciousness</div>
-        <div id="soc" class="empty">(no monologue yet)</div>
-      </div>
-      <div class="row">
-        <div class="label">Trace · newest at top</div>
-        <div id="trace"></div>
-      </div>
-      <div class="row config">
         <div class="label">Model</div>
         <select id="s-model"></select>
       </div>
-      <div class="row config">
+      <div class="row">
         <div class="label">Personality</div>
         <textarea id="s-pers"></textarea>
         <button class="save" id="s-save">Save personality</button>
       </div>
-      <div class="row config">
+      <div class="row">
+        <div class="label">Goal</div>
+        <div id="s-goal" style="font-style: italic;"></div>
+      </div>
+      <div class="row">
         <div class="label">Traits</div>
         <div id="s-traits" class="trait-grid"></div>
       </div>
-      <div class="row config">
+      <div class="row">
         <div class="label">Inventory · Locker</div>
         <div id="s-stuff"></div>
       </div>
-      <div class="row config">
+      <div class="row">
         <div class="label">Journal</div>
         <ul id="journal"></ul>
       </div>
+      <div class="row">
+        <div class="label">Stream of consciousness</div>
+        <div id="soc" class="empty">(no monologue yet)</div>
+      </div>
+      <div class="row">
+        <div class="label">Trace · newest at top</div>
+        <div id="trace"></div>
+      </div>
     </div>
   </div>
 
@@ -292,7 +284,7 @@
     const elSModel = document.getElementById("s-model");
     const elSPers = document.getElementById("s-pers");
     const elSSave = document.getElementById("s-save");
-    const elSGoal = document.getElementById("s-goal-big");
+    const elSGoal = document.getElementById("s-goal");
     const elSoc = document.getElementById("soc");
     const elSTraits = document.getElementById("s-traits");
     const elSStuff = document.getElementById("s-stuff");