ui: group Settings into boxed sections, move persona to bottom

frontend/src/App.css

@@ -186,8 +186,33 @@ html.aj-hide-pointer * {
   box-shadow: var(--lc-shadow);
 }
 
+.aj-options-section {
+  padding: 14px;
+  border-radius: 10px;
+  border: 1px solid var(--lc-border);
+  background: var(--lc-bg);
+}
+
+.aj-options-section + .aj-options-section {
+  margin-top: 12px;
+}
+
+.aj-options-section-title {
+  margin: 0 0 10px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--lc-muted);
+}
+
+.aj-options-section-title + .aj-field,
+.aj-options-section-title + .aj-field-checkbox {
+  margin-top: 0;
+}
+
 .aj-options-hint {
-  margin: 10px 0 0;
+  margin: 8px 0 0;
   font-size: 12px;
   color: var(--lc-muted);
   line-height: 1.45;

frontend/src/App.jsx

@@ -1397,49 +1397,55 @@ export default function App() {
           </button>
           {optionsOpen && (
             <div id="aj-options-panel" className="aj-options-panel" role="dialog" aria-label="Options" onMouseDown={(e) => e.stopPropagation()}>
-              <label className="aj-field">
-                <span>Additional persona instructions</span>
-                <textarea
-                  value={extraPersona}
-                  onChange={(e) => setExtraPersona(e.target.value)}
-                  placeholder="Optional — style, tone, domain focus… The assistant stays AI Jerry."
-                  rows={10}
-                  disabled={streaming}
-                />
-              </label>
-              <p className="aj-options-hint">
-                Merged into the system prompt for this session. The chat label remains <strong>AI Jerry</strong>.
-              </p>
-              <label className="aj-field aj-field-checkbox">
-                <input
-                  type="checkbox"
-                  checked={alwaysSpeak}
-                  onChange={(e) => setAlwaysSpeak(e.target.checked)}
-                  disabled={streaming}
-                />
-                <span>Always speak responses</span>
-              </label>
-              <p className="aj-options-hint">
-                When enabled, each assistant reply is read aloud automatically after it finishes generating (uses text-to-speech).
-              </p>
-              <label className="aj-field">
-                <span>Playback speed</span>
-                <div className="aj-speed-options">
-                  {TTS_SPEED_OPTIONS.map(s => (
-                    <button
-                      key={s}
-                      type="button"
-                      className={`aj-speed-option${ttsSpeed === s ? ' aj-speed-option--active' : ''}`}
-                      onClick={() => setTtsSpeed(s)}
-                    >
-                      {s}x
-                    </button>
-                  ))}
-                </div>
-              </label>
-              <p className="aj-options-hint">
-                Controls how fast text-to-speech audio plays. Applies to all messages.
-              </p>
+              <div className="aj-options-section">
+                <h4 className="aj-options-section-title">Voice</h4>
+                <label className="aj-field aj-field-checkbox">
+                  <input
+                    type="checkbox"
+                    checked={alwaysSpeak}
+                    onChange={(e) => setAlwaysSpeak(e.target.checked)}
+                    disabled={streaming}
+                  />
+                  <span>Always speak responses</span>
+                </label>
+                <p className="aj-options-hint">
+                  Read each assistant reply aloud automatically (text-to-speech).
+                </p>
+                <label className="aj-field">
+                  <span>Playback speed</span>
+                  <div className="aj-speed-options">
+                    {TTS_SPEED_OPTIONS.map(s => (
+                      <button
+                        key={s}
+                        type="button"
+                        className={`aj-speed-option${ttsSpeed === s ? ' aj-speed-option--active' : ''}`}
+                        onClick={() => setTtsSpeed(s)}
+                      >
+                        {s}x
+                      </button>
+                    ))}
+                  </div>
+                </label>
+                <p className="aj-options-hint">
+                  Controls how fast text-to-speech audio plays.
+                </p>
+              </div>
+              <div className="aj-options-section">
+                <h4 className="aj-options-section-title">Persona</h4>
+                <label className="aj-field">
+                  <span>Additional persona instructions</span>
+                  <textarea
+                    value={extraPersona}
+                    onChange={(e) => setExtraPersona(e.target.value)}
+                    placeholder="Optional — style, tone, domain focus… The assistant stays AI Jerry."
+                    rows={10}
+                    disabled={streaming}
+                  />
+                </label>
+                <p className="aj-options-hint">
+                  Merged into the system prompt for this session. The chat label remains <strong>AI Jerry</strong>.
+                </p>
+              </div>
             </div>
           )}
         </div>