Frontend: reorder panel — Goal/SoC/Trace promoted to top

frontend/index.html

@@ -129,6 +129,22 @@
     .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);
+      border: 1px solid #2a2630; border-radius: 4px;
+      white-space: pre-wrap; word-break: break-word;
+      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;
@@ -207,34 +223,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">
+      <div class="row config">
         <div class="label">Personality</div>
         <textarea id="s-pers"></textarea>
         <button class="save" id="s-save">Save personality</button>
       </div>
-      <div class="row">
-        <div class="label">Goal</div>
-        <div id="s-goal" style="font-style: italic;"></div>
-      </div>
-      <div class="row">
+      <div class="row config">
         <div class="label">Traits</div>
         <div id="s-traits" class="trait-grid"></div>
       </div>
-      <div class="row">
+      <div class="row config">
         <div class="label">Inventory · Locker</div>
         <div id="s-stuff"></div>
       </div>
-      <div class="row">
+      <div class="row config">
         <div class="label">Journal</div>
         <ul id="journal"></ul>
       </div>
-      <div class="row">
-        <div class="label">Trace · newest at top</div>
-        <div id="trace"></div>
-      </div>
     </div>
   </div>
 
@@ -272,7 +292,8 @@
     const elSModel = document.getElementById("s-model");
     const elSPers = document.getElementById("s-pers");
     const elSSave = document.getElementById("s-save");
-    const elSGoal = document.getElementById("s-goal");
+    const elSGoal = document.getElementById("s-goal-big");
+    const elSoc = document.getElementById("soc");
     const elSTraits = document.getElementById("s-traits");
     const elSStuff = document.getElementById("s-stuff");
     const elJournal = document.getElementById("journal");
@@ -353,6 +374,13 @@
       elSArch.textContent = c.archetype;
       elSPers.value = c.personality;
       elSGoal.textContent = c.goal;
+      if (c.stream_of_consciousness && c.stream_of_consciousness.trim()) {
+        elSoc.classList.remove("empty");
+        elSoc.textContent = c.stream_of_consciousness;
+      } else {
+        elSoc.classList.add("empty");
+        elSoc.textContent = "(no monologue yet — refreshes every 10 decisions)";
+      }
 
       // Model dropdown
       elSModel.innerHTML = "";