diff --git a/webclient/src/components/chat/MessageList.vue b/webclient/src/components/chat/MessageList.vue
index 93dc607..a797408 100644
--- a/webclient/src/components/chat/MessageList.vue
+++ b/webclient/src/components/chat/MessageList.vue
@@ -53,7 +53,7 @@
   flashIndex.value = index
   setTimeout(() => {
     if (flashIndex.value === index) flashIndex.value = null
-  }, 1500)
+  }, 3000)
 }
 
 function resolveComponent(msg) {
@@ -115,16 +115,19 @@
   () => chat.loading,
   (loading) => {
     if (!loading) {
-      contentVisible.value = false
-      afterLayout(() => {
-        if (chat.scrollToMessageIndex != null) {
+      if (chat.scrollToMessageIndex != null) {
+        contentVisible.value = true
+        afterLayout(() => {
           scrollToMessage(chat.scrollToMessageIndex)
           chat.scrollToMessageIndex = null
-        } else {
+        })
+      } else {
+        contentVisible.value = false
+        afterLayout(() => {
           scrollToBottom()
-        }
-        contentVisible.value = true
-      })
+          contentVisible.value = true
+        })
+      }
     }
   }
 )
diff --git a/webclient/src/components/sidebar/AppSidebar.vue b/webclient/src/components/sidebar/AppSidebar.vue
index 2ad005c..ccccf02 100644
--- a/webclient/src/components/sidebar/AppSidebar.vue
+++ b/webclient/src/components/sidebar/AppSidebar.vue
@@ -28,31 +28,19 @@
     </div>
 
     <div class="sidebar-search" :class="{ 'is-open': searchOpen }">
-      <div class="sidebar-search-bar">
-        <GnIconButton
-          icon="ph ph-magnifying-glass"
-          label="Search"
-          class="search-toggle-btn"
-          :class="{ active: searchOpen || sessionsStore.searchActive }"
-          @click="toggleSearch"
+      <div class="sidebar-search-inner">
+        <GnSearchField
+          v-model="searchInput"
+          placeholder="Search conversations..."
+          compact
+          clearable
+          @clear="onSearchClear"
+          @keydown.esc="closeSearch"
         />
-        <div v-if="searchOpen" class="search-input-wrap">
-          <input
-            ref="searchInputEl"
-            v-model="searchInput"
-            type="text"
-            placeholder="Search conversations..."
-            class="search-input"
-            @keydown.esc="closeSearch"
-          />
-          <GnIconButton
-            v-if="searchInput"
-            icon="ph ph-x"
-            label="Clear"
-            class="search-clear-btn"
-            @click="clearSearchInput"
-          />
-        </div>
+        <span
+          v-if="sessionsStore.loading && sessionsStore.searchActive"
+          class="search-spinner"
+        ></span>
       </div>
     </div>
 
@@ -64,13 +52,22 @@
           </template>
           <template v-else>Conversations</template>
         </div>
-        <GnIconButton
-          icon="ph ph-arrow-clockwise"
-          label="Refresh"
-          class="sessions-refresh-btn"
-          :class="{ 'is-spinning': sessionsStore.loading }"
-          @click="sessionsStore.fetchSessions(profilesStore.selectedProfileId)"
-        />
+        <div class="sessions-header-actions">
+          <GnIconButton
+            icon="ph ph-magnifying-glass"
+            label="Search"
+            class="search-toggle-btn"
+            :class="{ active: searchOpen || sessionsStore.searchActive }"
+            @click="toggleSearch"
+          />
+          <GnIconButton
+            icon="ph ph-arrow-clockwise"
+            label="Refresh"
+            class="sessions-refresh-btn"
+            :class="{ 'is-spinning': sessionsStore.loading }"
+            @click="sessionsStore.fetchSessions(profilesStore.selectedProfileId)"
+          />
+        </div>
       </div>
       <SessionList @select="handleSelect" />
     </div>
@@ -135,7 +132,6 @@
 
 const searchOpen = ref(false)
 const searchInput = ref('')
-const searchInputEl = ref(null)
 let searchDebounceTimer = null
 
 // Keep selector in sync with the active session's profile
@@ -147,12 +143,8 @@
 // Toggle search UI
 function toggleSearch() {
   searchOpen.value = !searchOpen.value
-  if (searchOpen.value) {
-    // Restore previous query if any
-    if (sessionsStore.searchQuery) {
-      searchInput.value = sessionsStore.searchQuery
-    }
-    setTimeout(() => searchInputEl.value?.focus(), 50)
+  if (searchOpen.value && sessionsStore.searchQuery) {
+    searchInput.value = sessionsStore.searchQuery
   }
 }
 
@@ -160,11 +152,9 @@
   searchOpen.value = false
 }
 
-function clearSearchInput() {
-  searchInput.value = ''
+function onSearchClear() {
   sessionsStore.clearSearch()
   sessionsStore.fetchSessions(profilesStore.selectedProfileId)
-  searchInputEl.value?.focus()
 }
 
 // Debounced search
@@ -201,6 +191,7 @@
     profilesStore.selectedProfileId = session.profile_id
   }
   await chatStore.loadSession(session.session_id, session.match_indices?.[0])
+  searchOpen.value = false
   emit('close')
 }
 
@@ -229,21 +220,43 @@
 }
 
 .sidebar-search {
-  padding: 0 $space-md;
-  border-bottom: 1px solid var(--color-border);
   display: none;
+  padding: 0 $space-md;
 }
 
 .sidebar-search.is-open {
   display: block;
   padding-top: $space-sm;
   padding-bottom: $space-sm;
+  border-bottom: 1px solid var(--color-border);
 }
 
-.sidebar-search-bar {
+.sidebar-search-inner {
   display: flex;
   align-items: center;
   gap: $space-xs;
+
+  :deep(.search-field) {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+.search-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid $border-color-muted;
+  border-top-color: $color-secondary;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+.sessions-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
 }
 
 .search-toggle-btn {
@@ -257,42 +270,6 @@
   color: $color-text-light;
 }
 
-.search-input-wrap {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: $space-xs;
-  position: relative;
-}
-
-.search-input {
-  flex: 1;
-  min-width: 0;
-  background: $surface-panel-muted;
-  border: $border-width-base $border-style-base $border-color-muted;
-  border-bottom-width: $border-width-accent;
-  border-bottom-color: $color-text-light;
-  color: $color-text-light;
-  font-size: 13px;
-  padding: $space-xs $space-sm;
-  outline: none;
-  font-family: inherit;
-  transition: border-color $motion-base $motion-ease;
-}
-
-.search-input:focus {
-  border-color: $color-secondary;
-}
-
-.search-input::placeholder {
-  color: $color-text-dark;
-}
-
-.search-clear-btn {
-  font-size: 12px;
-  color: $color-text-dark;
-}
-
 .sidebar-footer {
   padding: 12px 16px;
   border-top: 1px solid var(--color-border);
diff --git a/webclient/src/styles/app.scss b/webclient/src/styles/app.scss
index fa3c0ef..1d23680 100644
--- a/webclient/src/styles/app.scss
+++ b/webclient/src/styles/app.scss
@@ -1682,11 +1682,12 @@
 
 // ─── Search result message flash ────────────────────────────────────────────
 .msg-flash {
-  animation: msgFlash 1.5s ease both;
+  animation: msgFlash 2.5s ease-out both;
 }
 
 @keyframes msgFlash {
-  0%   { filter: brightness(1); }
-  20%  { filter: brightness(1.35); }
-  100% { filter: brightness(1); }
+  0%   { filter: brightness(1); background-color: transparent; }
+  15%  { filter: brightness(1.4); background-color: rgba($color-secondary, 0.12); }
+  40%  { filter: brightness(1.4); background-color: rgba($color-secondary, 0.12); }
+  100% { filter: brightness(1); background-color: transparent; }
 }