Merge pull request #3523 from Kilo-Org/remove-gutter-animation

markijbema · web-flow · commit 21631290d8f9 · 2025-11-05T16:25:44.000+01:00
refactor: remove gutter animation feature
diff --git a/.changeset/plain-coins-happen.md b/.changeset/plain-coins-happen.md
@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Removed the gutter animation for autocomplete
diff --git a/packages/types/src/__tests__/kilocode.test.ts b/packages/types/src/__tests__/kilocode.test.ts
@@ -15,7 +15,6 @@ describe("ghostServiceSettingsSchema", () => {
 			enableAutoTrigger: true,
 			enableQuickInlineTaskKeybinding: false,
 			enableSmartInlineTaskKeybinding: true,
-			showGutterAnimation: false,
 		})
 		expect(result.success).toBe(true)
 	})
@@ -25,7 +24,6 @@ describe("ghostServiceSettingsSchema", () => {
 			enableAutoTrigger: true,
 			enableQuickInlineTaskKeybinding: true,
 			enableSmartInlineTaskKeybinding: true,
-			showGutterAnimation: true,
 		})
 		expect(result.success).toBe(true)
 	})
diff --git a/packages/types/src/kilocode/kilocode.ts b/packages/types/src/kilocode/kilocode.ts
@@ -12,7 +12,6 @@ export const ghostServiceSettingsSchema = z
 		enableAutoTrigger: z.boolean().optional(),
 		enableQuickInlineTaskKeybinding: z.boolean().optional(),
 		enableSmartInlineTaskKeybinding: z.boolean().optional(),
-		showGutterAnimation: z.boolean().optional(),
 		useNewAutocomplete: z.boolean().optional(),
 		provider: z.string().optional(),
 		model: z.string().optional(),
diff --git a/src/assets/icons/logo-outline-black.gif b/src/assets/icons/logo-outline-black.gif
diff --git a/src/assets/icons/logo-outline-yellow.gif b/src/assets/icons/logo-outline-yellow.gif
diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts
@@ -1168,7 +1168,6 @@ ${prompt}
 					<link href="${codiconsUri}" rel="stylesheet" />
 					<script nonce="${nonce}">
 						window.IMAGES_BASE_URI = "${imagesUri}"
-						window.ICONS_BASE_URI = "${iconsUri}" // kilocode_change
 						window.AUDIO_BASE_URI = "${audioUri}"
 						window.MATERIAL_ICONS_BASE_URI = "${materialIconsUri}"
 						window.KILOCODE_BACKEND_BASE_URL = "${process.env.KILOCODE_BACKEND_BASE_URL ?? ""}"
@@ -1245,7 +1244,6 @@ ${prompt}
 			<link href="${codiconsUri}" rel="stylesheet" />
 			<script nonce="${nonce}">
 				window.IMAGES_BASE_URI = "${imagesUri}"
-				window.ICONS_BASE_URI = "${iconsUri}" // kilocode_change
 				window.AUDIO_BASE_URI = "${audioUri}"
 				window.MATERIAL_ICONS_BASE_URI = "${materialIconsUri}"
 				window.KILOCODE_BACKEND_BASE_URL = "${process.env.KILOCODE_BACKEND_BASE_URL ?? ""}"
diff --git a/src/services/ghost/GhostGutterAnimation.ts b/src/services/ghost/GhostGutterAnimation.ts
diff --git a/src/services/ghost/GhostServiceManager.ts b/src/services/ghost/GhostServiceManager.ts
@@ -13,7 +13,6 @@ import { ProviderSettingsManager } from "../../core/config/ProviderSettingsManag
 import { GhostContext } from "./GhostContext"
 import { TelemetryService } from "@roo-code/telemetry"
 import { ClineProvider } from "../../core/webview/ClineProvider"
-import { GhostGutterAnimation } from "./GhostGutterAnimation"
 import { RooIgnoreController } from "../../core/ignore/RooIgnoreController"
 
 export class GhostServiceManager {
@@ -25,7 +24,6 @@ export class GhostServiceManager {
 	private providerSettingsManager: ProviderSettingsManager
 	private settings: GhostServiceSettings | null = null
 	private ghostContext: GhostContext
-	private cursorAnimation: GhostGutterAnimation
 
 	private taskId: string | null = null
 	private isProcessing: boolean = false
@@ -52,15 +50,13 @@ export class GhostServiceManager {
 		this.providerSettingsManager = new ProviderSettingsManager(context)
 		this.model = new GhostModel()
 		this.ghostContext = new GhostContext(this.documentStore)
-		this.cursorAnimation = new GhostGutterAnimation(context)
 
 		// Register the providers
 		this.codeActionProvider = new GhostCodeActionProvider()
 		this.inlineCompletionProvider = new GhostInlineCompletionProvider(
 			this.model,
 			this.updateCostTracking.bind(this),
 			this.ghostContext,
-			this.cursorAnimation,
 			() => this.settings,
 		)
 
@@ -73,9 +69,6 @@ export class GhostServiceManager {
 		vscode.window.onDidChangeActiveTextEditor(this.onDidChangeActiveTextEditor, this, context.subscriptions)
 
 		void this.load()
-
-		// Initialize cursor animation with settings after load
-		this.cursorAnimation.updateSettings(this.settings || undefined)
 	}
 
 	// Singleton Management
@@ -116,7 +109,6 @@ export class GhostServiceManager {
 	public async load() {
 		this.settings = this.loadSettings()
 		await this.model.reload(this.providerSettingsManager)
-		this.cursorAnimation.updateSettings(this.settings || undefined)
 		await this.updateGlobalContext()
 		this.updateStatusBar()
 		await this.updateInlineCompletionProviderRegistration()
@@ -164,7 +156,6 @@ export class GhostServiceManager {
 			enableAutoTrigger: false,
 			enableSmartInlineTaskKeybinding: false,
 			enableQuickInlineTaskKeybinding: false,
-			showGutterAnimation: true,
 		}
 		await this.saveSettings()
 		await this.load()
@@ -176,7 +167,6 @@ export class GhostServiceManager {
 			enableAutoTrigger: true,
 			enableSmartInlineTaskKeybinding: true,
 			enableQuickInlineTaskKeybinding: true,
-			showGutterAnimation: true,
 		}
 		await this.saveSettings()
 		await this.load()
@@ -261,7 +251,7 @@ export class GhostServiceManager {
 	}
 
 	private async onDidChangeTextEditorSelection(event: vscode.TextEditorSelectionChangeEvent): Promise<void> {
-		this.cursorAnimation.update()
+		// No longer needed - gutter animation removed
 	}
 
 	private async onDidChangeActiveTextEditor(editor: vscode.TextEditor | undefined) {
@@ -438,7 +428,6 @@ export class GhostServiceManager {
 	}
 
 	private stopProcessing() {
-		this.cursorAnimation.hide()
 		this.isProcessing = false
 		this.updateGlobalContext()
 	}
@@ -461,7 +450,6 @@ export class GhostServiceManager {
 		this.cancelRequest()
 
 		this.statusBar?.dispose()
-		this.cursorAnimation.dispose()
 
 		// Dispose inline completion provider registration
 		if (this.inlineCompletionProviderDisposable) {
diff --git a/src/services/ghost/classic-auto-complete/GhostInlineCompletionProvider.ts b/src/services/ghost/classic-auto-complete/GhostInlineCompletionProvider.ts
@@ -6,7 +6,6 @@ import { AutoTriggerStrategy } from "./AutoTriggerStrategy"
 import { GhostModel } from "../GhostModel"
 import { GhostContext } from "../GhostContext"
 import { ApiStreamChunk } from "../../../api/transform/stream"
-import { GhostGutterAnimation } from "../GhostGutterAnimation"
 import type { GhostServiceSettings } from "@roo-code/types"
 
 const MAX_SUGGESTIONS_HISTORY = 20
@@ -77,20 +76,17 @@ export class GhostInlineCompletionProvider implements vscode.InlineCompletionIte
 	private model: GhostModel
 	private costTrackingCallback: CostTrackingCallback
 	private ghostContext: GhostContext
-	private cursorAnimation: GhostGutterAnimation
 	private getSettings: () => GhostServiceSettings | null
 
 	constructor(
 		model: GhostModel,
 		costTrackingCallback: CostTrackingCallback,
 		ghostContext: GhostContext,
-		cursorAnimation: GhostGutterAnimation,
 		getSettings: () => GhostServiceSettings | null,
 	) {
 		this.model = model
 		this.costTrackingCallback = costTrackingCallback
 		this.ghostContext = ghostContext
-		this.cursorAnimation = cursorAnimation
 		this.getSettings = getSettings
 		this.autoTriggerStrategy = new AutoTriggerStrategy()
 	}
@@ -257,9 +253,6 @@ export class GhostInlineCompletionProvider implements vscode.InlineCompletionIte
 
 		// No cached suggestion available - invoke LLM
 		if (this.model && this.ghostContext) {
-			// Show cursor animation while generating
-			this.cursorAnimation.active()
-
 			const context: GhostSuggestionContext = {
 				document,
 				range: new vscode.Range(position, position),
@@ -269,9 +262,6 @@ export class GhostInlineCompletionProvider implements vscode.InlineCompletionIte
 			try {
 				const result = await this.getFromLLM(fullContext, this.model)
 
-				// Hide cursor animation after generation
-				this.cursorAnimation.hide()
-
 				if (this.costTrackingCallback && result.cost > 0) {
 					this.costTrackingCallback(
 						result.cost,
@@ -296,7 +286,6 @@ export class GhostInlineCompletionProvider implements vscode.InlineCompletionIte
 					return []
 				}
 			} catch (error) {
-				this.cursorAnimation.hide()
 				console.error("Error getting inline completion from LLM:", error)
 				return []
 			}
diff --git a/src/services/ghost/classic-auto-complete/__tests__/GhostInlineCompletionProvider.test.ts b/src/services/ghost/classic-auto-complete/__tests__/GhostInlineCompletionProvider.test.ts
@@ -8,7 +8,6 @@ import { FillInAtCursorSuggestion } from "../GhostSuggestions"
 import { MockTextDocument } from "../../../mocking/MockTextDocument"
 import { GhostModel } from "../../GhostModel"
 import { GhostContext } from "../../GhostContext"
-import { GhostGutterAnimation } from "../../GhostGutterAnimation"
 
 // Mock vscode InlineCompletionTriggerKind enum
 vi.mock("vscode", async () => {
@@ -288,7 +287,6 @@ describe("GhostInlineCompletionProvider", () => {
 	let mockModel: GhostModel
 	let mockCostTrackingCallback: CostTrackingCallback
 	let mockGhostContext: GhostContext
-	let mockCursorAnimation: GhostGutterAnimation
 	let mockSettings: { enableAutoTrigger: boolean } | null
 
 	beforeEach(() => {
@@ -319,19 +317,11 @@ describe("GhostInlineCompletionProvider", () => {
 				range: ctx.range,
 			})),
 		} as unknown as GhostContext
-		mockCursorAnimation = {
-			active: vi.fn(),
-			hide: vi.fn(),
-			update: vi.fn(),
-			dispose: vi.fn(),
-			updateSettings: vi.fn(),
-		} as unknown as GhostGutterAnimation
 
 		provider = new GhostInlineCompletionProvider(
 			mockModel,
 			mockCostTrackingCallback,
 			mockGhostContext,
-			mockCursorAnimation,
 			() => mockSettings,
 		)
 	})
diff --git a/src/services/ghost/new-auto-complete/NewAutocompleteProvider.ts b/src/services/ghost/new-auto-complete/NewAutocompleteProvider.ts
@@ -90,7 +90,6 @@ export class NewAutocompleteProvider {
 			enableAutoTrigger: false,
 			enableSmartInlineTaskKeybinding: false,
 			enableQuickInlineTaskKeybinding: false,
-			showGutterAnimation: true,
 		}
 		await this.saveSettings()
 		await this.load()
@@ -102,7 +101,6 @@ export class NewAutocompleteProvider {
 			enableAutoTrigger: true,
 			enableSmartInlineTaskKeybinding: true,
 			enableQuickInlineTaskKeybinding: true,
-			showGutterAnimation: true,
 		}
 		await this.saveSettings()
 		await this.load()
diff --git a/webview-ui/src/components/settings/DisplaySettings.tsx b/webview-ui/src/components/settings/DisplaySettings.tsx
@@ -1,5 +1,5 @@
 // kilocode_change - new file
-import { HTMLAttributes, useMemo, useState } from "react"
+import { HTMLAttributes, useMemo } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
 import { Monitor } from "lucide-react"
@@ -41,21 +41,8 @@ export const DisplaySettings = ({
 }: DisplaySettingsProps) => {
 	const { t } = useAppTranslation()
 
-	// Get the icons base URI for the animated logo
-	const [iconsBaseUri] = useState(() => {
-		const w = window as any
-		return w.ICONS_BASE_URI || ""
-	})
-
 	const sampleTimelineData = useMemo(() => generateSampleTimelineData(), [])
 
-	const onShowGutterAnimationChange = (newValue: boolean) => {
-		setCachedStateField("ghostServiceSettings", {
-			...(ghostServiceSettings || {}),
-			showGutterAnimation: newValue,
-		})
-	}
-
 	const handleReasoningBlockCollapsedChange = (value: boolean) => {
 		setCachedStateField("reasoningBlockCollapsed", value)
 
@@ -132,33 +119,6 @@ export const DisplaySettings = ({
 						{t("settings:display.sendMessageOnEnter.description")}
 					</div>
 				</div>
-				{/* Gutter Animation Setting */}
-				<div className="mt-6 pt-6 border-t border-vscode-panel-border">
-					<div className="flex flex-col gap-1">
-						<VSCodeCheckbox
-							checked={ghostServiceSettings?.showGutterAnimation !== false}
-							onChange={(e) => {
-								onShowGutterAnimationChange((e as any).target?.checked || false)
-							}}>
-							<span className="font-medium">{t("settings:ghost.showGutterAnimation.label")}</span>
-						</VSCodeCheckbox>
-						<div className="text-vscode-descriptionForeground text-sm mt-1">
-							{t("settings:ghost.showGutterAnimation.description")}
-						</div>
-						<div className="mt-3 flex items-center gap-3">
-							<div className="flex items-center justify-center w-10 h-10 bg-vscode-editor-background border border-vscode-panel-border rounded">
-								<img
-									src={`${iconsBaseUri}/logo-outline-yellow.gif`}
-									alt="Animated logo"
-									className="w-8 h-8"
-								/>
-							</div>
-							<span className="text-vscode-descriptionForeground text-xs">
-								{t("settings:ghost.showGutterAnimation.preview")}
-							</span>
-						</div>
-					</div>
-				</div>
 			</Section>
 
 			<Section>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"kilo-code": patch
 +---
++
 +Removed the gutter animation for autocomplete