From 1e61b627937fd7139085b171a54bb0133140e6bc Mon Sep 17 00:00:00 2001
From: Imanol Maiztegui <imanol.mzd@gmail.com>
Date: Fri, 5 Jun 2026 14:55:25 +0200
Subject: [PATCH] perf(chat): reserve layout space for working indicator to
 prevent content shift

Wrap the WorkingIndicator in a persistent slot container with a fixed
min-height so that toggling between the spinner and session actions
does not cause the chat content to jump. This stabilizes the scroll
position when live output finishes.
---
 .changeset/stable-working-indicator.md        |  5 +++
 .../components/shared/WorkingIndicator.tsx    | 42 ++++++++++---------
 .../webview-ui/src/styles/chat-layout.css     |  6 +++
 3 files changed, 33 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/stable-working-indicator.md

diff --git a/.changeset/stable-working-indicator.md b/.changeset/stable-working-indicator.md
new file mode 100644
index 00000000000..7b7aefd6522
--- /dev/null
+++ b/.changeset/stable-working-indicator.md
@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Reduce chat layout movement when live output finishes and session actions appear.
diff --git a/packages/kilo-vscode/webview-ui/src/components/shared/WorkingIndicator.tsx b/packages/kilo-vscode/webview-ui/src/components/shared/WorkingIndicator.tsx
index 4d4c64fe677..2f6d4afa158 100644
--- a/packages/kilo-vscode/webview-ui/src/components/shared/WorkingIndicator.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/shared/WorkingIndicator.tsx
@@ -97,25 +97,27 @@ export const WorkingIndicator: Component = () => {
   }
 
   return (
-    <Show when={session.status() !== "idle" && !blocked()}>
-      <div class="working-indicator">
-        <Spinner />
-        <span class="working-text">{statusText()}</span>
-        <Show when={elapsed() > 0}>
-          <span class="working-elapsed">{formatElapsed()}</span>
-        </Show>
-        <Show when={isRetrying()}>
-          <Button
-            variant="secondary"
-            size="small"
-            onClick={handleCancelRetry}
-            class="working-cancel"
-            style={{ "font-weight": "600", color: "var(--vscode-errorForeground, #f85149)" }}
-          >
-            {language.t("ui.sessionTurn.cancel") || "Cancel"}
-          </Button>
-        </Show>
-      </div>
-    </Show>
+    <div class="working-indicator-slot">
+      <Show when={session.status() !== "idle" && !blocked()}>
+        <div class="working-indicator">
+          <Spinner />
+          <span class="working-text">{statusText()}</span>
+          <Show when={elapsed() > 0}>
+            <span class="working-elapsed">{formatElapsed()}</span>
+          </Show>
+          <Show when={isRetrying()}>
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={handleCancelRetry}
+              class="working-cancel"
+              style={{ "font-weight": "600", color: "var(--vscode-errorForeground, #f85149)" }}
+            >
+              {language.t("ui.sessionTurn.cancel") || "Cancel"}
+            </Button>
+          </Show>
+        </div>
+      </Show>
+    </div>
   )
 }
diff --git a/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css b/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css
index 5cbb811d057..0e625dda4e3 100644
--- a/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css
+++ b/packages/kilo-vscode/webview-ui/src/styles/chat-layout.css
@@ -161,6 +161,12 @@
   color: var(--vscode-descriptionForeground);
 }
 
+.working-indicator-slot {
+  /* Offset the session actions appearing when work finishes. */
+  min-height: 10px;
+  flex-shrink: 0;
+}
+
 .working-text {
   flex: 1;
   min-width: 0;