feat(extension): make the side panel usable

The settings were 18 rows on one level: the broker URL, the pace in
milliseconds and the model all shouted equally loud, although one is set
once and the other is changed daily.

- Model picker moved into the header. It is the switch you touch every day
  and it sat at the end of the settings list. Source depends on driveMode:
  the verified gateway models in direct mode, the broker's list otherwise;
  hidden when there is nothing to choose.
- Settings grouped into five collapsible sections (Verbindung & Antrieb,
  Verhalten, Anzeige & Sicherheit, Modell & Zugang, Memory). Only "Modell &
  Zugang" starts open — that is what first-time setup needs.
- Existing rows were wrapped in place, not moved, so every element id and
  every binding stays intact.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/sidepanel/index.html

@@ -234,6 +234,54 @@
     .settings[open] > summary::before { content: '▾ '; }
     .settings > summary:hover { color: var(--text); }
     .settings-body { padding: 2px 10px 10px; }
+
+    /* Klappbare Abschnitte: 18 Zeilen auf einer Ebene sind keine Bedienung,
+       sondern eine Liste. Was man taeglich anfasst, steht offen; der Rest
+       liegt zugeklappt darunter. */
+    .sgroup { border-top: 1px solid var(--border); margin-top: 6px; }
+    .sgroup > summary {
+      padding: 6px 0 5px;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+      color: var(--text-mute);
+      cursor: pointer;
+      user-select: none;
+      list-style: none;
+      outline: none;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+    .sgroup > summary::-webkit-details-marker { display: none; }
+    .sgroup > summary::before {
+      content: '';
+      width: 0; height: 0;
+      border-left: 4px solid currentColor;
+      border-top: 3px solid transparent;
+      border-bottom: 3px solid transparent;
+      transition: transform 0.15s;
+      flex: 0 0 auto;
+    }
+    .sgroup[open] > summary::before { transform: rotate(90deg); }
+    .sgroup > summary:hover { color: var(--text); }
+    .sgroup-body { padding: 1px 0 7px; }
+
+    /* Modellwahl in der Kopfzeile — der am haeufigsten benutzte Schalter
+       gehoert nicht ans Ende einer Einstellungsliste. */
+    #headerModel {
+      font-size: 10px;
+      max-width: 116px;
+      padding: 2px 4px;
+      background: var(--surface2);
+      color: var(--text-dim);
+      border: 1px solid var(--border-lt);
+      border-radius: 4px;
+      font-family: inherit;
+      cursor: pointer;
+    }
+    #headerModel:hover { color: var(--text); border-color: var(--accent); }
     .row {
       display: flex;
       align-items: center;
@@ -896,6 +944,7 @@
       <span id="usageBarLabel"></span>
     </div>
     <span class="mcp-status" id="mcpStatus"></span>
+    <select id="headerModel" title="Aktives Modell"></select>
     <span class="status-text" id="statusText">getrennt</span>
     <button class="icon-btn" id="settingsToggle" type="button" title="Einstellungen ein-/ausklappen" aria-label="Einstellungen">⚙</button>
     <button class="icon-btn" id="diagToggle" type="button" title="Diagnose / Tests" aria-label="Diagnose">🔬</button>
@@ -980,6 +1029,8 @@
   <details class="settings" id="settingsPanel">
     <summary>Einstellungen</summary>
     <div class="settings-body">
+
+      <details class="sgroup"><summary>Verbindung &amp; Antrieb</summary><div class="sgroup-body">
       <div class="row">
         <label for="brokerUrl">Broker</label>
         <input type="text" id="brokerUrl" spellcheck="false" autocomplete="off" placeholder="ws://127.0.0.1:8765/ext/ws">
@@ -1013,6 +1064,9 @@
           <div class="hint" id="nexusModelHint"></div>
         </div>
       </div>
+      </div></details>
+
+      <details class="sgroup"><summary>Verhalten</summary><div class="sgroup-body">
       <div class="row">
         <label for="inputMode">Eingabe</label>
         <select id="inputMode">
@@ -1029,6 +1083,9 @@
         <label for="paceMs">Tempo (ms)</label>
         <input type="number" id="paceMs" min="0" max="5000" step="100" title="Pause zwischen Aktionen in Millisekunden. 0 = keine Pause.">
       </div>
+      </div></details>
+
+      <details class="sgroup"><summary>Anzeige &amp; Sicherheit</summary><div class="sgroup-body">
       <div class="row">
         <label for="pageOverlay">Anzeige</label>
         <select id="pageOverlay" title="Sichtbare Rückmeldung auf der Seite, an der der Agent arbeitet.">
@@ -1047,8 +1104,10 @@
         <label for="blockMailSend" title="Klicks auf Senden-Schaltflächen in Mail-Oberflächen werden abgelehnt. Der Agent legt nur Entwürfe an.">Senden in Mails blockieren (nur Entwürfe)</label>
       </div>
 
+      </div></details>
+
+      <details class="sgroup" open id="directSection"><summary>Modell &amp; Zugang</summary><div class="sgroup-body">
       <div id="directGroup" hidden>
-        <div class="group-title">Direkter Modell-Zugriff</div>
         <div class="row">
           <label for="provider">Anbieter</label>
           <select id="provider">
@@ -1085,7 +1144,9 @@
         </div>
       </div>
 
-      <div class="group-title">Memory (memory.cnull.net)</div>
+      </div></details>
+
+      <details class="sgroup"><summary>Memory (memory.cnull.net)</summary><div class="sgroup-body">
       <div class="row check">
         <input type="checkbox" id="memoryEnabled">
         <label for="memoryEnabled">Memory-Server anbinden</label>
@@ -1128,6 +1189,8 @@
       </div>
 
       <div class="hint">Änderungen werden sofort gespeichert.</div>
+      </div></details>
+
     </div>
   </details>