Merge pull request #80 from esokullu/codex/fix-recommended-actions-overlay

esokullu · web-flow · commit f7f179399040 · 2026-07-06T03:14:05.000+03:00
[codex] Fix suggested action overlay
diff --git a/dist/webbrain-chrome-21.5.1.zip b/dist/webbrain-chrome-21.5.1.zip
diff --git a/dist/webbrain-edge-21.5.1.zip b/dist/webbrain-edge-21.5.1.zip
diff --git a/dist/webbrain-firefox-21.5.1.zip b/dist/webbrain-firefox-21.5.1.zip
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webbrain",
-  "version": "21.5.0",
+  "version": "21.5.1",
   "description": "Open-source AI browser agent — chat with pages, automate tasks, multi-provider LLM support.",
   "private": true,
   "type": "module",
diff --git a/src/chrome/ARCHITECTURE.md b/src/chrome/ARCHITECTURE.md
@@ -1,6 +1,6 @@
 # WebBrain Chrome/Edge Extension — Architecture
 
-> Version 21.5.0 · Manifest V3 · Service Worker background
+> Version 21.5.1 · Manifest V3 · Service Worker background
 
 ## High-Level Overview
 
diff --git a/src/chrome/manifest.json b/src/chrome/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "WebBrain",
-  "version": "21.5.0",
+  "version": "21.5.1",
   "description": "Open-source AI browser agent — chat with pages, automate tasks, multi-provider LLM support.",
   "permissions": [
     "sidePanel",
diff --git a/src/chrome/src/ui/settings.js b/src/chrome/src/ui/settings.js
@@ -19,7 +19,7 @@ import {
 
 // Version shown in the subtitle. Kept here so it only needs one update per
 // release; the subtitle string itself is translated.
-const EXT_VERSION = '21.5.0';
+const EXT_VERSION = '21.5.1';
 
 const providersContainer = document.getElementById('providers');
 const displaySettings = document.getElementById('display-settings');
diff --git a/src/chrome/src/ui/sidepanel.js b/src/chrome/src/ui/sidepanel.js
@@ -1464,6 +1464,7 @@ async function handleScheduledJobEvent(data, tabId) {
     isProcessing = true;
     abortRequested = false;
     syncSendButtonState();
+    hideRecommendedActions();
     currentAssistantEl = addMessage('assistant', '');
     if (jobId) currentAssistantEl.dataset.scheduledJobId = jobId;
     showActivity(t('sp.scheduled.running', { title }));
@@ -1481,6 +1482,7 @@ async function handleScheduledJobEvent(data, tabId) {
       clearActiveChatPayloadForTab(tabId ?? currentTabId);
       isProcessing = true;
       syncSendButtonState();
+      hideRecommendedActions();
     } else {
       isProcessing = false;
       syncSendButtonState();
@@ -2077,6 +2079,7 @@ function conversationHasUserMessages() {
 }
 
 function hideRecommendedActions() {
+  recommendationsRequestId += 1;
   if (!recommendedActionsEl || !recommendedActionsListEl) return;
   recommendedActionsListEl.replaceChildren();
   recommendedActionsEl.classList.add('hidden');
@@ -3790,6 +3793,7 @@ function renderClarifyCard(data) {
   const tabId = data?.scheduledTabId ?? data?.tabId ?? currentTabId;
   if (tabId == null) return;
   const scheduledJobId = data?.scheduledJobId ? String(data.scheduledJobId) : '';
+  if (scheduledJobId) hideRecommendedActions();
   let assistantEl = currentAssistantEl;
   if (scheduledJobId && data.forceNewScheduledCard) {
     assistantEl = addMessage('assistant', '');
@@ -4133,6 +4137,7 @@ function submitClarify(card, tabId, clarifyId, answer, source) {
     }
     isProcessing = true;
     syncSendButtonState();
+    hideRecommendedActions();
     showActivity(t('sp.activity.thinking'));
   }
   sendToBackground('clarify_response', { tabId, clarifyId, answer, source })
diff --git a/src/chrome/styles/sidepanel.css b/src/chrome/styles/sidepanel.css
@@ -1061,26 +1061,23 @@ body {
 
 
 
-/* Context-aware recommendations — centered pill row in the chat body */
+/* Context-aware recommendations — inline centered pill row in the chat body */
 .recommended-actions {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
   gap: 8px;
-  margin: 0;
-  padding: 16px 12px;
+  margin: 12px 0 4px;
+  padding: 0 4px;
   border: none;
   border-radius: 0;
   background: transparent;
-  pointer-events: none;
+  box-sizing: border-box;
+  width: 100%;
 }
 
 .recommended-actions.collapsed {
-  padding: 16px 12px;
+  margin-bottom: 0;
 }
 
 .recommended-actions.hidden {
@@ -1093,7 +1090,6 @@ body {
   justify-content: center;
   gap: 6px;
   margin-bottom: 0;
-  pointer-events: auto;
 }
 
 .recommended-actions.collapsed .recommended-actions-header {
@@ -1152,7 +1148,6 @@ body {
   gap: 6px;
   justify-content: center;
   max-width: min(100%, 340px);
-  pointer-events: auto;
 }
 
 .recommended-actions.collapsed .recommended-actions-list {
diff --git a/src/firefox/ARCHITECTURE.md b/src/firefox/ARCHITECTURE.md
@@ -1,6 +1,6 @@
 # WebBrain Firefox Extension — Architecture
 
-> Version 21.5.0 · Manifest V2 · Background Page
+> Version 21.5.1 · Manifest V2 · Background Page
 
 ## How Firefox Differs from Chrome
 
diff --git a/src/firefox/manifest.json b/src/firefox/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "WebBrain",
-  "version": "21.5.0",
+  "version": "21.5.1",
   "description": "Open-source AI browser agent — chat with pages, automate tasks, multi-provider LLM support.",
   "permissions": [
     "activeTab",
diff --git a/src/firefox/src/ui/settings.js b/src/firefox/src/ui/settings.js
@@ -19,7 +19,7 @@ import {
 
 // Version shown in the subtitle. Kept here so it only needs one update per
 // release; the subtitle string itself is translated.
-const EXT_VERSION = '21.5.0';
+const EXT_VERSION = '21.5.1';
 
 const providersContainer = document.getElementById('providers');
 const displaySettings = document.getElementById('display-settings');
diff --git a/src/firefox/src/ui/sidepanel.js b/src/firefox/src/ui/sidepanel.js
@@ -1440,6 +1440,7 @@ function handleScheduledJobEvent(data, tabId) {
     isProcessing = true;
     abortRequested = false;
     syncSendButtonState();
+    hideRecommendedActions();
     currentAssistantEl = addMessage('assistant', '');
     if (jobId) currentAssistantEl.dataset.scheduledJobId = jobId;
     showActivity(t('sp.scheduled.running', { title }));
@@ -1457,6 +1458,7 @@ function handleScheduledJobEvent(data, tabId) {
       clearActiveChatPayloadForTab(tabId ?? currentTabId);
       isProcessing = true;
       syncSendButtonState();
+      hideRecommendedActions();
     } else {
       isProcessing = false;
       syncSendButtonState();
@@ -2041,6 +2043,7 @@ function conversationHasUserMessages() {
 }
 
 function hideRecommendedActions() {
+  recommendationsRequestId += 1;
   if (!recommendedActionsEl || !recommendedActionsListEl) return;
   recommendedActionsListEl.replaceChildren();
   recommendedActionsEl.classList.add('hidden');
@@ -3458,6 +3461,7 @@ function renderClarifyCard(data) {
   const tabId = data?.scheduledTabId ?? data?.tabId ?? currentTabId;
   if (tabId == null) return;
   const scheduledJobId = data?.scheduledJobId ? String(data.scheduledJobId) : '';
+  if (scheduledJobId) hideRecommendedActions();
   let assistantEl = currentAssistantEl;
   if (scheduledJobId && data.forceNewScheduledCard) {
     assistantEl = addMessage('assistant', '');
@@ -3795,6 +3799,7 @@ function submitClarify(card, tabId, clarifyId, answer, source) {
     }
     isProcessing = true;
     syncSendButtonState();
+    hideRecommendedActions();
     showActivity(t('sp.activity.thinking'));
   }
   sendToBackground('clarify_response', { tabId, clarifyId, answer, source })
diff --git a/src/firefox/styles/sidepanel.css b/src/firefox/styles/sidepanel.css
@@ -1060,26 +1060,23 @@ body {
 
 
 
-/* Context-aware recommendations — centered pill row in the chat body */
+/* Context-aware recommendations — inline centered pill row in the chat body */
 .recommended-actions {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
   gap: 8px;
-  margin: 0;
-  padding: 16px 12px;
+  margin: 12px 0 4px;
+  padding: 0 4px;
   border: none;
   border-radius: 0;
   background: transparent;
-  pointer-events: none;
+  box-sizing: border-box;
+  width: 100%;
 }
 
 .recommended-actions.collapsed {
-  padding: 16px 12px;
+  margin-bottom: 0;
 }
 
 .recommended-actions.hidden {
@@ -1092,7 +1089,6 @@ body {
   justify-content: center;
   gap: 6px;
   margin-bottom: 0;
-  pointer-events: auto;
 }
 
 .recommended-actions.collapsed .recommended-actions-header {
@@ -1151,7 +1147,6 @@ body {
   gap: 6px;
   justify-content: center;
   max-width: min(100%, 340px);
-  pointer-events: auto;
 }
 
 .recommended-actions.collapsed .recommended-actions-list {
diff --git a/test/run.js b/test/run.js
@@ -2895,6 +2895,96 @@ test('suggested actions live in chat body not input area', () => {
   }
 });
 
+test('suggested actions do not overlay chat messages', () => {
+  for (const [label, cssRel] of [
+    ['chrome', 'src/chrome/styles/sidepanel.css'],
+    ['firefox', 'src/firefox/styles/sidepanel.css'],
+  ]) {
+    const css = fs.readFileSync(path.join(ROOT, cssRel), 'utf8');
+    const match = css.match(/\.recommended-actions\s*\{([\s\S]*?)\n\}/);
+    assert.ok(match, `${label}: recommended actions CSS missing`);
+    const body = match[1];
+    assert.equal(/position\s*:\s*absolute\b/.test(body), false, `${label}: suggested actions must stay in normal chat flow`);
+    assert.equal(/inset\s*:\s*0\b/.test(body), false, `${label}: suggested actions must not cover the chat container`);
+    assert.equal(/z-index\s*:/.test(body), false, `${label}: suggested actions must not layer above messages`);
+  }
+});
+
+test('scheduled runs hide suggested actions immediately', () => {
+  for (const [label, panelRel] of [
+    ['chrome', 'src/chrome/src/ui/sidepanel.js'],
+    ['firefox', 'src/firefox/src/ui/sidepanel.js'],
+  ]) {
+    const panel = fs.readFileSync(path.join(ROOT, panelRel), 'utf8');
+    const runningIdx = panel.indexOf("} else if (event === 'running') {");
+    const isProcessingIdx = panel.indexOf('isProcessing = true;', runningIdx);
+    const hideIdx = panel.indexOf('hideRecommendedActions();', runningIdx);
+    const addAssistantIdx = panel.indexOf("currentAssistantEl = addMessage('assistant', '');", runningIdx);
+    assert.notEqual(runningIdx, -1, `${label}: scheduled running branch missing`);
+    assert.notEqual(isProcessingIdx, -1, `${label}: scheduled running branch should mark processing`);
+    assert.notEqual(hideIdx, -1, `${label}: scheduled running branch should hide suggested actions`);
+    assert.notEqual(addAssistantIdx, -1, `${label}: scheduled running branch should render assistant message`);
+    assert.equal(isProcessingIdx < hideIdx && hideIdx < addAssistantIdx, true, `${label}: suggestions should hide before scheduled output renders`);
+  }
+});
+
+test('scheduled clarify resumes hide suggested actions immediately', () => {
+  for (const [label, panelRel] of [
+    ['chrome', 'src/chrome/src/ui/sidepanel.js'],
+    ['firefox', 'src/firefox/src/ui/sidepanel.js'],
+  ]) {
+    const panel = fs.readFileSync(path.join(ROOT, panelRel), 'utf8');
+    const submitIdx = panel.indexOf('function submitClarify(');
+    const scheduledIdx = panel.indexOf('if (isScheduledClarify) {', submitIdx);
+    const isProcessingIdx = panel.indexOf('isProcessing = true;', scheduledIdx);
+    const hideIdx = panel.indexOf('hideRecommendedActions();', scheduledIdx);
+    const activityIdx = panel.indexOf("showActivity(t('sp.activity.thinking'));", scheduledIdx);
+    assert.notEqual(submitIdx, -1, `${label}: submitClarify missing`);
+    assert.notEqual(scheduledIdx, -1, `${label}: scheduled clarify branch missing`);
+    assert.notEqual(isProcessingIdx, -1, `${label}: scheduled clarify should mark processing`);
+    assert.notEqual(hideIdx, -1, `${label}: scheduled clarify should hide suggested actions`);
+    assert.notEqual(activityIdx, -1, `${label}: scheduled clarify should show resumed activity`);
+    assert.equal(isProcessingIdx < hideIdx && hideIdx < activityIdx, true, `${label}: suggestions should hide before scheduled clarify activity resumes`);
+  }
+});
+
+test('scheduled clarify cards hide suggested actions before rendering prompts', () => {
+  for (const [label, panelRel] of [
+    ['chrome', 'src/chrome/src/ui/sidepanel.js'],
+    ['firefox', 'src/firefox/src/ui/sidepanel.js'],
+  ]) {
+    const panel = fs.readFileSync(path.join(ROOT, panelRel), 'utf8');
+    const renderIdx = panel.indexOf('function renderClarifyCard(data) {');
+    const scheduledIdIdx = panel.indexOf('const scheduledJobId =', renderIdx);
+    const hideIdx = panel.indexOf('if (scheduledJobId) hideRecommendedActions();', scheduledIdIdx);
+    const appendIdx = panel.indexOf('content.appendChild(card);', scheduledIdIdx);
+    const scrollIdx = panel.indexOf('scrollToBottom();', scheduledIdIdx);
+    assert.notEqual(renderIdx, -1, `${label}: renderClarifyCard missing`);
+    assert.notEqual(scheduledIdIdx, -1, `${label}: scheduled clarify detection missing`);
+    assert.notEqual(hideIdx, -1, `${label}: scheduled clarify cards should hide suggested actions`);
+    assert.notEqual(appendIdx, -1, `${label}: clarify card append missing`);
+    assert.notEqual(scrollIdx, -1, `${label}: clarify card scroll missing`);
+    assert.equal(scheduledIdIdx < hideIdx && hideIdx < appendIdx && hideIdx < scrollIdx, true, `${label}: suggestions should hide before scheduled clarify prompts render and scroll`);
+  }
+});
+
+test('hiding suggested actions cancels pending refreshes', () => {
+  for (const [label, panelRel] of [
+    ['chrome', 'src/chrome/src/ui/sidepanel.js'],
+    ['firefox', 'src/firefox/src/ui/sidepanel.js'],
+  ]) {
+    const panel = fs.readFileSync(path.join(ROOT, panelRel), 'utf8');
+    const match = panel.match(/function hideRecommendedActions\(\) \{([\s\S]*?)\n\}/);
+    assert.ok(match, `${label}: hideRecommendedActions missing`);
+    const body = match[1];
+    const invalidateIdx = body.indexOf('recommendationsRequestId += 1;');
+    const clearIdx = body.indexOf('recommendedActionsListEl.replaceChildren();');
+    assert.notEqual(invalidateIdx, -1, `${label}: hideRecommendedActions should invalidate pending refreshes`);
+    assert.notEqual(clearIdx, -1, `${label}: hideRecommendedActions should clear rendered suggestions`);
+    assert.equal(invalidateIdx < clearIdx, true, `${label}: pending refreshes should be invalidated before clearing suggestions`);
+  }
+});
+
 // ────────────────────────────────────────────────────────────────────────
 // Credential-field detection
 // ────────────────────────────────────────────────────────────────────────

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "webbrain",`
`3`		`- "version": "21.5.0",`
	`3`	`+ "version": "21.5.1",`
`4`	`4`	`"description": "Open-source AI browser agent — chat with pages, automate tasks, multi-provider LLM support.",`
`5`	`5`	`"private": true,`
`6`	`6`	`"type": "module",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"manifest_version": 3,`
`3`	`3`	`"name": "WebBrain",`
`4`		`- "version": "21.5.0",`
	`4`	`+ "version": "21.5.1",`
`5`	`5`	`"description": "Open-source AI browser agent — chat with pages, automate tasks, multi-provider LLM support.",`
`6`	`6`	`"permissions": [`
`7`	`7`	`"sidePanel",`