Polish agent scrolling, search focus, and themed panels

Refine the ACP session auto-scroll behavior so generated messages keep the pane pinned to the bottom only while auto-scroll is enabled. Track explicit user scroll-up intent from wheel, touch, pointer, and keyboard input, restore auto-scroll when the user reaches the bottom again, and observe the rendered message container so late layout changes still scroll correctly.

Update the terminal theme integration to derive xterm background, foreground, cursor, and selection colors from the active CSS theme variables. Reapply the terminal theme when the root theme styles change, clean up the observer during disconnects and unmounts, and align terminal fallback colors with the rest of the themed UI.

Keep the editor search panel active and focused when navigating matches or clearing the search text. Move search container layout out of inline renderer styles and into CSS, switch the panel positioning to sticky, and tune highlight colors for selected and unselected matches.

Bring empty panes, panel picker actions, ACP input controls, terminal empty actions, and References Peek hover styling closer to the shared theme system. Replace hard-coded colors with theme variables, add consistent focus-visible states, and simplify hover/active treatment across these small controls.

Author: vipmax

anycode-base/src/editor.ts

@@ -1421,9 +1421,11 @@ export class AnycodeEditor {
             if (currentMatches.length === 0) return;
             this.renderer.removeSelectedHighlight(this.search);
             this.search.selectPrev();
+            this.search.setFocused(true);
             this.search.setNeedsFocus(true);
             this.renderer.focus(this.getEditorState(), this.search.getSelectedMatch()?.line);
             this.renderer.updateSearchHighlights(this.search);
+            this.renderer.focusSearchInput();
             return;
         }
 
@@ -1434,9 +1436,11 @@ export class AnycodeEditor {
             if (currentMatches.length === 0) return;
             this.renderer.removeSelectedHighlight(this.search);
             this.search.selectNext();
+            this.search.setFocused(true);
             this.search.setNeedsFocus(true);
             this.renderer.focus(this.getEditorState(), this.search.getSelectedMatch()?.line);
             this.renderer.updateSearchHighlights(this.search);
+            this.renderer.focusSearchInput();
             return;
         }
 
@@ -1467,15 +1471,17 @@ export class AnycodeEditor {
         if (!pattern) {
             this.renderer.updateSearchLabel('');
             this.search.clear();
-            this.search.setActive(false);
-            this.search.setNeedsFocus(false);
+            this.search.setActive(true);
+            this.search.setFocused(true);
+            this.search.setNeedsFocus(true);
             return;
         }
 
         // Perform search
         const matches = this.getEditorState().code.search(pattern);
         this.search.clear();
         this.search.setActive(true);
+        this.search.setFocused(true);
         this.search.setMatches(matches);
         this.search.setPattern(pattern);
 

anycode-base/src/renderer/SearchRenderer.ts

@@ -44,9 +44,6 @@ export class SearchRenderer {
         // Create a container for the search UI
         this.searchContainer = document.createElement('div');
         this.searchContainer.className = 'search';
-        this.searchContainer.style.display = 'flex';
-        this.searchContainer.style.flexDirection = 'column';
-        this.searchContainer.style.position = 'fixed';
 
         // Create a search textarea field for multiline search (full width)
         const inputField = document.createElement('textarea');

anycode-base/src/styles.css

@@ -306,12 +306,14 @@
 }*/
 
 .search {
-  position: absolute;
+  position: sticky;
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
   padding: 0.7rem;
-  top: 0;
-  right: 0;
-  margin-right: 1.3rem;
-  margin-top: 0.7rem;
+  top: 3px;
+  right: 3px;
+  margin: 0;
   min-width: 200px;
   max-width: 40vw;
   z-index: 10000;
@@ -323,8 +325,6 @@
   cursor: pointer;
   border: 1px solid #555;
   background-color: var(--background-color);
-  display: flex;
-  flex-direction: column;
 }
 
 .search input,
@@ -339,7 +339,6 @@
   width: 100%;
   box-sizing: border-box;
   /* margin-left: 10px; */
-  color: white;
   line-height: 1.4;
   padding: 2px 0;
 }
@@ -417,10 +416,10 @@
 
 
 .highlight {
-  background: rgba(179, 179, 179, 0.406);
-  /* border-radius: 3px; */
+    background: rgba(210, 210, 210, 0.4);
+
 }
 
 .highlight.selected {
-  background: rgba(210, 210, 210, 0.9);
+    background: rgba(179, 179, 179, 0.9);
 }

anycode/components/agent/AcpEmptyPane.css

@@ -23,24 +23,62 @@
 }
 
 .acp-pane-empty-action {
-    background: rgba(255, 255, 255, 0.03);
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    border: 1px solid var(--theme-border, #4a4a4a);
+    background: var(--theme-tab-background, var(--theme-background, var(--background-color, #242424)));
+    color: var(--theme-tab-foreground, #b2b2b2);
     cursor: pointer;
     font-size: 12px;
     font-weight: 450;
-    padding: 7px 12px;
+    padding: 8px 10px;
     border-radius: 8px;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
     line-height: 1.1;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    flex: 1 1 140px;
+    max-width: 160px;
+    text-align: center;
     white-space: nowrap;
 }
 
 .acp-pane-empty-action:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-    border-color: rgba(255, 255, 255, 0.22);
-    color: #ffffff;
+    background: color-mix(
+        in srgb,
+        var(--theme-accent-background, #007acc) 12%,
+        var(--theme-tab-background, var(--theme-background, var(--background-color, #242424)))
+    );
+    color: var(--theme-foreground, var(--foreground-color, #f0f0f0));
+    border-color: color-mix(
+        in srgb,
+        var(--theme-accent-background, #007acc) 35%,
+        var(--theme-border, #4a4a4a)
+    );
+}
+
+.acp-pane-empty-action:focus {
+    outline: none;
+}
+
+.acp-pane-empty-action:focus-visible {
+    outline: 2px solid var(--theme-accent-background, #007acc);
+    outline-offset: 2px;
+    background: color-mix(
+        in srgb,
+        var(--theme-accent-background, #007acc) 16%,
+        var(--theme-tab-background, var(--theme-background, var(--background-color, #242424)))
+    );
+    color: var(--theme-foreground, var(--foreground-color, #f0f0f0));
+}
+
+.acp-pane-empty-action:active {
+    transform: translateY(1px);
+}
+
+.acp-pane-empty-action,
+.acp-pane-settings-btn {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .acp-pane-opened-agents {
@@ -51,7 +89,7 @@
 
 .acp-pane-opened-agents-title {
     font-size: 12px;
-    color: #c8ccd2;
+    color: var(--theme-muted-foreground, var(--text-color-secondary, #8f8f8f));
     margin-bottom: 5px;
     letter-spacing: 0.01em;
     font-weight: 500;
@@ -65,9 +103,13 @@
 }
 
 .acp-pane-opened-agent {
-    border-color: rgba(112, 233, 189, 0.38);
-    background: rgba(112, 233, 189, 0.1);
-    color: #b8f0dc;
+    border-color: color-mix(in srgb, var(--theme-accent-background, #007acc) 38%, var(--theme-border, #4a4a4a));
+    background: color-mix(
+        in srgb,
+        var(--theme-accent-background, #007acc) 10%,
+        var(--theme-tab-background, var(--theme-background, var(--background-color, #242424)))
+    );
+    color: var(--theme-accent-background, var(--theme-foreground, #7ec8ff));
 }
 
 .acp-pane-opened-agent-item {
@@ -80,7 +122,7 @@
 .acp-pane-close-button {
     opacity: 0;
     pointer-events: none;
-    color: #8ea0ad;
+    color: var(--theme-muted-foreground, var(--text-color-secondary, #8ea0ad));
     font-size: 20px;
     line-height: 1;
     width: 20px;
@@ -98,7 +140,7 @@
 }
 
 .acp-pane-close-button:hover {
-    color: #eef7ff;
+    color: var(--theme-accent-background, var(--theme-foreground, #eef7ff));
     background: transparent;
 }
 
@@ -109,36 +151,67 @@
 }
 
 .acp-pane-start-agents-title {
-    color: #8f8f8f;
+    color: var(--theme-muted-foreground, var(--text-color-secondary, #8f8f8f));
     text-transform: uppercase;
     font-size: 12px;
     letter-spacing: 0.08em;
     margin-bottom: 6px;
 }
 
 .acp-pane-settings-btn {
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    background: rgba(255, 255, 255, 0.03);
-    color: var(--text-color, #cfd3d8);
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    border: 1px solid var(--theme-border, #4a4a4a);
+    background: var(--theme-tab-background, var(--theme-background, var(--background-color, #242424)));
+    color: var(--theme-tab-foreground, #b2b2b2);
     font-size: 12px;
     line-height: 1;
-    padding: 7px 12px;
-    border-radius: 10px;
+    padding: 8px 10px;
+    border-radius: 8px;
     cursor: pointer;
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+    width: min(140px, 100%);
 }
 
 .acp-pane-settings-btn:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-    border-color: rgba(255, 255, 255, 0.22);
-    color: #ffffff;
+    background: color-mix(
+        in srgb,
+        var(--theme-accent-background, #007acc) 12%,
+        var(--theme-tab-background, var(--theme-background, var(--background-color, #242424)))
+    );
+    color: var(--theme-foreground, var(--foreground-color, #f0f0f0));
+    border-color: color-mix(
+        in srgb,
+        var(--theme-accent-background, #007acc) 35%,
+        var(--theme-border, #4a4a4a)
+    );
+}
+
+.acp-pane-settings-btn:focus {
+    outline: none;
+}
+
+.acp-pane-settings-btn:focus-visible {
+    outline: 2px solid var(--theme-accent-background, #007acc);
+    outline-offset: 2px;
+    background: color-mix(
+        in srgb,
+        var(--theme-accent-background, #007acc) 16%,
+        var(--theme-tab-background, var(--theme-background, var(--background-color, #242424)))
+    );
+    color: var(--theme-foreground, var(--foreground-color, #f0f0f0));
+}
+
+.acp-pane-settings-btn:active {
+    transform: translateY(1px);
 }
 
 .acp-pane-settings-wrap {
     margin-top: 10px;
     padding-top: 10px;
     display: flex;
     justify-content: center;
+    width: 100%;
 }
 
 @media (max-width: 768px) {

anycode/components/agent/AcpInput.css

@@ -78,12 +78,6 @@
     justify-content: center;
     cursor: pointer;
     border-radius: 4px;
-    transition: color 0.2s, background-color 0.2s;
-}
-
-.acp-input-toggle-btn:hover {
-    color: var(--text-color, #fff);
-    background-color: rgba(255, 255, 255, 0.1);
 }
 
 .acp-input-floating-expand-btn {
@@ -97,18 +91,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--text-color, #ccc);
-    background: rgba(45, 45, 45, 0.5);
+    color: var(--theme-accent-background, #3c3c3c);
+    background: rgba(45, 45, 45, 0.25);
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
     z-index: 2;
 }
 
-.acp-input-floating-expand-btn:hover {
-    background-color: var(--hover-bg, #2a2a2a);
-    transform: translateY(-1px);
-}
-
 .acp-input-controls-row {
     display: flex;
     align-items: center;
@@ -219,7 +208,7 @@
 
 .acp-send-btn,
 .acp-stop-prompt-btn {
-    background: rgba(45, 45, 45, 0.5);
+    background: rgba(45, 45, 45, 0.25);
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
     color: var(--text-color, #fff);
@@ -236,7 +225,10 @@
     height: 36px;
     flex-shrink: 0;
     outline: none;
-    transition: background-color 0.2s, transform 0.2s, opacity 0.2s, color 0.2s;
+}
+
+.acp-send-btn {
+    color: var(--theme-accent-background, #3c3c3c);
 }
 
 .acp-send-btn:focus,
@@ -253,11 +245,7 @@
     height: 20px;
 }
 
-.acp-send-btn:hover:not(:disabled),
-.acp-stop-prompt-btn:hover:not(:disabled) {
-    background-color: var(--hover-bg, #2a2a2a);
-    transform: translateY(-1px);
-}
+
 
 .acp-send-btn:disabled,
 .acp-stop-prompt-btn:disabled {

anycode/components/agent/AcpSession.css

@@ -42,19 +42,13 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    color: var(--text-color, #ccc);
-    background: rgba(45, 45, 45, 0.5);
+    color: var(--theme-accent-background, #3c3c3c);
+    background: rgba(45, 45, 45, 0.25);
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
-    transition: background-color 0.2s, transform 0.2s, opacity 0.2s, color 0.2s;
     z-index: 1;
 }
 
-.acp-scroll-to-bottom-btn:hover {
-    background-color: var(--hover-bg, #2a2a2a);
-    transform: translateY(-1px);
-}
-
 .acp-scroll-to-bottom-btn:focus,
 .acp-scroll-to-bottom-btn:active {
     outline: none;