fix(vscode): smooth reasoning block transitions

.changeset/reasoning-collapse-flicker.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Smooth out reasoning blocks with auto-collapse enabled: the streaming viewport scrolls smoothly without a flickering scrollbar, finished blocks rest in place instead of jumping and collapsing, and new tool calls grow in instead of popping.

packages/kilo-ui/src/components/message-part.css

@@ -514,30 +514,6 @@ html[data-theme="kilo-vscode"] [data-component="todos"] {
   }
 }
 
-@keyframes reasoning-card-down {
-  from {
-    grid-template-rows: 0fr;
-    opacity: 0;
-  }
-
-  to {
-    grid-template-rows: 1fr;
-    opacity: 1;
-  }
-}
-
-@keyframes reasoning-card-up {
-  from {
-    grid-template-rows: 1fr;
-    opacity: 1;
-  }
-
-  to {
-    grid-template-rows: 0fr;
-    opacity: 0;
-  }
-}
-
 /* Reasoning block: visually distinct from normal agent output.
    Reasoning stays open unless the user explicitly collapses it. */
 [data-component="reasoning-part"] {
@@ -620,40 +596,48 @@ html[data-theme="kilo-vscode"] [data-component="todos"] {
   }
 
   [data-slot="collapsible-content"] {
-    display: grid;
-    overflow: hidden;
-
-    > * {
-      min-height: 0;
-      overflow: hidden;
-    }
-
-    &[data-expanded] {
-      animation: reasoning-card-down 220ms cubic-bezier(0.23, 1, 0.32, 1);
-    }
-
-    &[data-closed] {
-      animation: reasoning-card-up 160ms cubic-bezier(0.77, 0, 0.175, 1);
-    }
+    display: block;
+    overflow: visible;
+    transition: none;
+    animation: none;
   }
 
   /* Streaming state: keep the block open while content grows. */
   &[data-streaming] {
-    &[data-auto-collapse] [data-slot="reasoning-content"] {
-      max-height: 120px;
-      overflow-y: auto;
-      scroll-behavior: smooth;
-      mask-image: linear-gradient(to bottom, transparent 0%, black 12px, black 85%, transparent 100%);
-      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12px, black 85%, transparent 100%);
-    }
-
     /* Pulse the brain icon while streaming */
     [data-slot="reasoning-header"] [data-component="icon"] {
       animation: reasoning-pulse 2s ease-in-out infinite;
     }
   }
 }
 
+html[data-theme="kilo-vscode"]
+  [data-component="reasoning-part"][data-auto-collapse]:not([data-manual])
+  [data-slot="reasoning-content"] {
+  max-height: 120px;
+  overflow-y: auto;
+  /* The viewport follows the stream on its own; a scrollbar that appears and
+     disappears with every chunk only adds flicker. */
+  scrollbar-width: none;
+  /* Finished blocks rest in this viewport scrolled to the end, so only the
+     top edge fades; the streaming rule below also fades the bottom. */
+  mask-image: linear-gradient(to bottom, transparent 0%, black 12px);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12px);
+}
+
+html[data-theme="kilo-vscode"]
+  [data-component="reasoning-part"][data-auto-collapse][data-streaming]:not([data-manual])
+  [data-slot="reasoning-content"] {
+  mask-image: linear-gradient(to bottom, transparent 0%, black 12px, black 85%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12px, black 85%, transparent 100%);
+}
+
+html[data-theme="kilo-vscode"]
+  [data-component="reasoning-part"][data-auto-collapse]:not([data-manual])
+  [data-slot="reasoning-content"]::-webkit-scrollbar {
+  display: none;
+}
+
 html[data-theme="kilo-vscode"] [data-component="text-part"] {
   margin-top: 0;
 }
@@ -786,34 +770,3 @@ html[data-theme="kilo-vscode"] [data-component="reasoning-part"] {
     line-height: var(--line-height-large);
   }
 }
-
-/* The shared collapsible turns overflow visible when expanded, which let the
-   reasoning markdown spill below its box for a frame while the height changed.
-   Clip it at the box instead, and give the auto-collapse at the end of a
-   reasoning block a real animation, so the transcript slides instead of
-   jumping when a tall block closes. */
-[data-component="reasoning-part"] [data-slot="collapsible-content"][data-expanded] {
-  overflow: clip;
-}
-
-[data-component="reasoning-part"] [data-slot="collapsible-content"][data-closed] {
-  overflow: clip;
-  animation: kilo-reasoning-close 180ms ease-out;
-}
-
-@keyframes kilo-reasoning-close {
-  from {
-    height: var(--kb-collapsible-content-height);
-  }
-
-  to {
-    height: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-component="reasoning-part"] [data-slot="collapsible-content"][data-expanded],
-  [data-component="reasoning-part"] [data-slot="collapsible-content"][data-closed] {
-    animation-duration: 0.01ms;
-  }
-}