feat: auto-save session options and restore on modal open

- Add GET /api/sessions/:id/respawn/config endpoint for reading saved config
- PUT /api/sessions/:id/respawn/config now works without running controller
  (saves pre-config to screens.json for when respawn starts)
- Respawn start/enable merges pre-saved config from screens.json
- Frontend auto-saves respawn config, auto-compact, auto-clear on field change
- Frontend loads saved config when opening session options modal
- Updated CLAUDE.md with state persistence docs, new API endpoint,
  SessionState fields table, state lifecycle, and session setting guide

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

src/web/public/app.js

@@ -1608,6 +1608,16 @@ class ClaudemanApp {
     // Reset duration presets to default (unlimited)
     this.selectDurationPreset('');
 
+    // Populate respawn config from saved state
+    this.loadSavedRespawnConfig(sessionId);
+
+    // Populate auto-compact/clear from session state
+    document.getElementById('modalAutoCompactEnabled').checked = session.autoClear?.autoCompact?.enabled ?? false;
+    document.getElementById('modalAutoCompactThreshold').value = session.autoClear?.autoCompact?.threshold ?? 110000;
+    document.getElementById('modalAutoCompactPrompt').value = session.autoClear?.autoCompact?.prompt ?? '';
+    document.getElementById('modalAutoClearEnabled').checked = session.autoClear?.enabled ?? false;
+    document.getElementById('modalAutoClearThreshold').value = session.autoClear?.threshold ?? 140000;
+
     // Populate Ralph Wiggum form with current session values
     const ralphState = this.ralphStates.get(sessionId);
     this.populateRalphForm({
@@ -1621,6 +1631,80 @@ class ClaudemanApp {
     document.getElementById('sessionOptionsModal').classList.add('active');
   }
 
+  async autoSaveAutoCompact() {
+    if (!this.editingSessionId) return;
+    try {
+      await fetch(`/api/sessions/${this.editingSessionId}/auto-compact`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          enabled: document.getElementById('modalAutoCompactEnabled').checked,
+          threshold: parseInt(document.getElementById('modalAutoCompactThreshold').value) || 110000,
+          prompt: document.getElementById('modalAutoCompactPrompt').value.trim() || undefined
+        })
+      });
+    } catch { /* silent */ }
+  }
+
+  async autoSaveAutoClear() {
+    if (!this.editingSessionId) return;
+    try {
+      await fetch(`/api/sessions/${this.editingSessionId}/auto-clear`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          enabled: document.getElementById('modalAutoClearEnabled').checked,
+          threshold: parseInt(document.getElementById('modalAutoClearThreshold').value) || 140000
+        })
+      });
+    } catch { /* silent */ }
+  }
+
+  async autoSaveRespawnConfig() {
+    if (!this.editingSessionId) return;
+    const config = {
+      updatePrompt: document.getElementById('modalRespawnPrompt').value,
+      sendClear: document.getElementById('modalRespawnSendClear').checked,
+      sendInit: document.getElementById('modalRespawnSendInit').checked,
+      kickstartPrompt: document.getElementById('modalRespawnKickstart').value.trim() || undefined,
+    };
+    try {
+      await fetch(`/api/sessions/${this.editingSessionId}/respawn/config`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config)
+      });
+    } catch {
+      // Silent save - don't interrupt user
+    }
+  }
+
+  async loadSavedRespawnConfig(sessionId) {
+    try {
+      const res = await fetch(`/api/sessions/${sessionId}/respawn/config`);
+      const data = await res.json();
+      if (data.success && data.config) {
+        const c = data.config;
+        document.getElementById('modalRespawnPrompt').value = c.updatePrompt || 'update all the docs and CLAUDE.md';
+        document.getElementById('modalRespawnSendClear').checked = c.sendClear ?? true;
+        document.getElementById('modalRespawnSendInit').checked = c.sendInit ?? true;
+        document.getElementById('modalRespawnKickstart').value = c.kickstartPrompt || '';
+        // Restore duration if set
+        if (c.durationMinutes) {
+          const presetBtn = document.querySelector(`.duration-preset-btn[data-minutes="${c.durationMinutes}"]`);
+          if (presetBtn) {
+            this.selectDurationPreset(String(c.durationMinutes));
+          } else {
+            this.selectDurationPreset('custom');
+            document.getElementById('modalRespawnDuration').value = c.durationMinutes;
+          }
+        }
+      }
+    } catch {
+      // Ignore - use defaults
+    }
+  }
+
   // Handle duration preset selection
   selectDurationPreset(value) {
     // Remove active from all buttons

src/web/public/index.html

@@ -310,18 +310,18 @@
 
             <div class="form-row">
               <label>Update Prompt</label>
-              <input type="text" id="modalRespawnPrompt" value="update all the docs and CLAUDE.md" placeholder="Prompt to send when idle">
+              <input type="text" id="modalRespawnPrompt" value="update all the docs and CLAUDE.md" placeholder="Prompt to send when idle" onchange="app.autoSaveRespawnConfig()">
             </div>
 
             <div class="form-row">
               <label>After Update Prompt</label>
               <div class="checkbox-group-inline">
                 <label class="checkbox-inline">
-                  <input type="checkbox" id="modalRespawnSendClear" checked>
+                  <input type="checkbox" id="modalRespawnSendClear" checked onchange="app.autoSaveRespawnConfig()">
                   <span>Send /clear</span>
                 </label>
                 <label class="checkbox-inline">
-                  <input type="checkbox" id="modalRespawnSendInit" checked>
+                  <input type="checkbox" id="modalRespawnSendInit" checked onchange="app.autoSaveRespawnConfig()">
                   <span>Send /init</span>
                 </label>
               </div>
@@ -329,7 +329,7 @@
 
             <div class="form-row">
               <label>Kickstart Prompt</label>
-              <input type="text" id="modalRespawnKickstart" value="" placeholder="Optional: prompt if /init doesn't trigger work">
+              <input type="text" id="modalRespawnKickstart" value="" placeholder="Optional: prompt if /init doesn't trigger work" onchange="app.autoSaveRespawnConfig()">
               <span class="form-hint">Sent only when /init completes but Claude stays idle</span>
             </div>
 
@@ -337,15 +337,15 @@
               <label>Auto-Compact Context</label>
               <div class="auto-clear-row">
                 <label class="checkbox-inline">
-                  <input type="checkbox" id="modalAutoCompactEnabled">
+                  <input type="checkbox" id="modalAutoCompactEnabled" onchange="app.autoSaveAutoCompact()">
                   <span>Enable at</span>
                 </label>
                 <div class="input-suffix input-suffix-sm">
-                  <input type="number" id="modalAutoCompactThreshold" value="110000" min="10000" max="500000" step="10000">
+                  <input type="number" id="modalAutoCompactThreshold" value="110000" min="10000" max="500000" step="10000" onchange="app.autoSaveAutoCompact()">
                   <span>tokens</span>
                 </div>
               </div>
-              <input type="text" id="modalAutoCompactPrompt" value="" placeholder="Optional: focus prompt for compact" class="mt-sm">
+              <input type="text" id="modalAutoCompactPrompt" value="" placeholder="Optional: focus prompt for compact" class="mt-sm" onchange="app.autoSaveAutoCompact()">
               <span class="form-hint">Summarizes context while preserving key information</span>
             </div>
 
@@ -353,11 +353,11 @@
               <label>Auto-Clear Context</label>
               <div class="auto-clear-row">
                 <label class="checkbox-inline">
-                  <input type="checkbox" id="modalAutoClearEnabled">
+                  <input type="checkbox" id="modalAutoClearEnabled" onchange="app.autoSaveAutoClear()">
                   <span>Enable at</span>
                 </label>
                 <div class="input-suffix input-suffix-sm">
-                  <input type="number" id="modalAutoClearThreshold" value="140000" min="10000" max="500000" step="10000">
+                  <input type="number" id="modalAutoClearThreshold" value="140000" min="10000" max="500000" step="10000" onchange="app.autoSaveAutoClear()">
                   <span>tokens</span>
                 </div>
               </div>