Bind approval UI to current request and verify panel cleanup

ui/assistant.html

@@ -11,6 +11,7 @@ a { color:#70c9ff } section { background:#202d3c; border:1px solid #425268; bord
 label { display:block; margin:14px 0 } input:not([type=checkbox]),textarea { display:block; width:100%; margin-top:6px; padding:12px; background:#101923; color:inherit; border:1px solid #728398; border-radius:6px; font:inherit }
 input[type=checkbox] { width:24px; height:24px; vertical-align:middle; margin-right:10px } button { font:inherit; padding:12px 24px; min-height:52px; border:1px solid #728398; border-radius:6px; background:#30445b; color:white; cursor:pointer; margin:6px 12px 6px 0 }
 button.primary { background:#176b9c } button:disabled { opacity:.5; cursor:wait } :focus-visible { outline:3px solid #70c9ff; outline-offset:3px }
+summary { overflow-wrap:anywhere; cursor:pointer }
 pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; max-height:380px; overflow:auto } [hidden] { display:none!important } #status { min-height:1.5em } small { color:#b8c6d5 }
 </style>
 <header><h1>Frame Control · Assistant</h1><a href="/">Back to Frame Control</a></header>
@@ -24,7 +25,7 @@ pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; max-height:380
 <h2 id="chat-title">Ask your chosen model</h2>
 <p>Nothing is sent until you opt in and press Send. Each request sends only the message below and, if selected, a fresh headset screenshot. Replies cannot operate your Frame.</p>
 <form id="chat">
-<details id="settings" open><summary>Endpoint and model settings</summary>
+<details id="settings" open><summary id="settings-label">Endpoint and model settings</summary>
 <label>Chat-completions endpoint<input id="endpoint" type="url" placeholder="http://127.0.0.1:1234/v1/chat/completions" required autocomplete="off"></label>
 <small>Use an OpenAI-compatible endpoint. Loopback means the computer running Frame Control. Remote endpoints require HTTPS.</small>
 <label>Model<input id="model" required placeholder="Model name from your endpoint" autocomplete="off"></label>
@@ -53,35 +54,38 @@ async function api(path, body) {
 function revoke() { $('consent').checked = false; $('screenshot').checked = false; }
 $('endpoint').addEventListener('input', revoke);
 $('model').addEventListener('input', revoke);
-$('clear').onclick = () => { generation++; $('chat').reset(); $('settings').open = true; $('reply').textContent = ''; $('status').textContent = 'Cleared. A request already sent cannot be recalled.'; };
+$('clear').onclick = () => { generation++; $('chat').reset(); $('settings').open = true; $('settings-label').textContent = 'Endpoint and model settings'; $('reply').textContent = ''; $('status').textContent = 'Cleared. A request already sent cannot be recalled.'; };
 $('chat').onsubmit = async event => {
   event.preventDefault();
   if (!$('consent').checked) { $('status').textContent = 'Opt in before sending a message.'; return; }
   const current = ++generation;
   const body = Object.fromEntries(['endpoint','model','key','prompt'].map(id => [id,$(id).value]));
   Object.assign(body, {consent:true,screenshot:$('screenshot').checked});
-  $('settings').open = false; $('send').disabled = true; $('reply').textContent = ''; $('status').textContent = 'Sending to ' + body.endpoint + '…'; revoke();
+  $('settings-label').textContent = body.model + ' at ' + body.endpoint; $('settings').open = false; $('send').disabled = true; $('reply').textContent = ''; $('status').textContent = 'Sending to ' + body.endpoint + '…'; revoke();
   try { const data = await api('/api/assistant/chat', body); if (current === generation) { $('reply').textContent = data.reply; $('status').textContent = 'Reply received.'; } }
   catch (error) { if (current === generation) $('status').textContent = error.message; }
   finally { $('send').disabled = false; }
 };
-let confirmation;
+let confirmation, approvalGeneration = 0;
 async function loadApproval() {
+  const current = ++approvalGeneration;
   confirmation = new URLSearchParams(location.hash.slice(1)).get('confirm');
   $('approval').hidden = !confirmation;
   if (!confirmation) return;
   $('approve').disabled = $('reject').disabled = true;
   try {
     const data = await api('/api/agent/approval?confirmation=' + encodeURIComponent(confirmation));
+    if (current !== approvalGeneration) return;
     $('action').textContent = JSON.stringify(data.action, null, 2);
     $('approval-status').textContent = data.approved ? 'Already approved. Ask the agent to retry.' : '';
     $('approve').disabled = data.approved; $('reject').disabled = false;
-  } catch (error) { $('action').textContent = ''; $('approval-status').textContent = error.message; }
+  } catch (error) { if (current === approvalGeneration) { $('action').textContent = ''; $('approval-status').textContent = error.message; } }
 }
 for (const [id, accept] of [['approve',true],['reject',false]]) $(id).onclick = async () => {
+  const current = approvalGeneration;
   $('approve').disabled = $('reject').disabled = true;
-  try { const data = await api('/api/agent/approval', {confirmation,accept}); $('approval-status').textContent = data.message + (accept ? '. Ask the agent to retry now.' : '.'); }
-  catch (error) { $('approval-status').textContent = error.message; }
+  try { const data = await api('/api/agent/approval', {confirmation,accept}); if (current !== approvalGeneration) return; $('approval-status').textContent = data.message + (accept ? '. Ask the agent to retry now.' : '.'); }
+  catch (error) { if (current === approvalGeneration) $('approval-status').textContent = error.message; }
 };
 window.addEventListener('hashchange', loadApproval); loadApproval();
 </script>