[PROTOBUS] Move scrollToSetting to protobus (#3648)

* scrollToSetting protobus migration

* one small change

.changeset/old-crews-reply.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+scrollToSetting protobus migration

proto/build-proto.js

@@ -30,6 +30,7 @@ const serviceNameMap = {
 	web: "cline.WebService",
 	models: "cline.ModelsService",
 	slash: "cline.SlashService",
+	ui: "cline.UiService",
 	// Add new services here - no other code changes needed!
 }
 const serviceDirs = Object.keys(serviceNameMap).map((serviceKey) => path.join(ROOT_DIR, "src", "core", "controller", serviceKey))

proto/ui.proto

@@ -0,0 +1,14 @@
+syntax = "proto3";
+
+package cline;
+option java_package = "bot.cline.proto";
+option java_multiple_files = true;
+
+import "common.proto";
+
+// UiService provides methods for managing UI interactions
+service UiService {
+  // Scrolls to a specific settings section in the settings view
+  rpc scrollToSettings(StringRequest) returns (Empty);
+}
+

src/core/controller/grpc-service-config.ts

@@ -13,6 +13,7 @@ import { handleTaskServiceRequest, handleTaskServiceStreamingRequest } from "./t
 import { handleWebServiceRequest, handleWebServiceStreamingRequest } from "./web/index"
 import { handleModelsServiceRequest, handleModelsServiceStreamingRequest } from "./models/index"
 import { handleSlashServiceRequest, handleSlashServiceStreamingRequest } from "./slash/index"
+import { handleUiServiceRequest, handleUiServiceStreamingRequest } from "./ui/index"
 
 /**
  * Configuration for a service handler
@@ -72,4 +73,8 @@ export const serviceHandlers: Record<string, ServiceHandlerConfig> = {
 		requestHandler: handleSlashServiceRequest,
 		streamingHandler: handleSlashServiceStreamingRequest,
 	},
+	"cline.UiService": {
+		requestHandler: handleUiServiceRequest,
+		streamingHandler: handleUiServiceStreamingRequest,
+	},
 }

src/core/controller/index.ts

@@ -479,13 +479,6 @@ export class Controller {
 				})
 				break
 			}
-			case "scrollToSettings": {
-				await this.postMessageToWebview({
-					type: "scrollToSettings",
-					text: message.text,
-				})
-				break
-			}
 			case "telemetrySetting": {
 				if (message.telemetrySetting) {
 					await this.updateTelemetrySetting(message.telemetrySetting)

src/core/controller/ui/index.ts

@@ -0,0 +1,22 @@
+// AUTO-GENERATED FILE - DO NOT MODIFY DIRECTLY
+// Generated by proto/build-proto.js
+
+import { createServiceRegistry, ServiceMethodHandler, StreamingMethodHandler } from "../grpc-service"
+import { StreamingResponseHandler } from "../grpc-handler"
+import { registerAllMethods } from "./methods"
+
+// Create ui service registry
+const uiService = createServiceRegistry("ui")
+
+// Export the method handler types and registration function
+export type UiMethodHandler = ServiceMethodHandler
+export type UiStreamingMethodHandler = StreamingMethodHandler
+export const registerMethod = uiService.registerMethod
+
+// Export the request handlers
+export const handleUiServiceRequest = uiService.handleRequest
+export const handleUiServiceStreamingRequest = uiService.handleStreamingRequest
+export const isStreamingMethod = uiService.isStreamingMethod
+
+// Register all ui methods
+registerAllMethods()

src/core/controller/ui/methods.ts

@@ -0,0 +1,12 @@
+// AUTO-GENERATED FILE - DO NOT MODIFY DIRECTLY
+// Generated by proto/build-proto.js
+
+// Import all method implementations
+import { registerMethod } from "./index"
+import { scrollToSettings } from "./scrollToSettings"
+
+// Register all ui service methods
+export function registerAllMethods(): void {
+	// Register each method with the registry
+	registerMethod("scrollToSettings", scrollToSettings)
+}

src/core/controller/ui/scrollToSettings.ts

@@ -0,0 +1,15 @@
+import { Controller } from ".."
+import { StringRequest } from "../../../shared/proto/common"
+
+/**
+ * Executes a scroll to settings action
+ * @param controller The controller instance
+ * @param request The request containing the ID of the settings section to scroll to
+ * @returns An object with action and value fields for the UI to process
+ */
+export async function scrollToSettings(controller: Controller, request: StringRequest): Promise<Record<string, string>> {
+	return {
+		action: "scrollToSettings",
+		value: request.value || "",
+	}
+}

src/shared/ExtensionMessage.ts

@@ -40,7 +40,6 @@ export interface ExtensionMessage {
 		| "totalTasksSize"
 		| "addToInput"
 		| "browserConnectionResult"
-		| "scrollToSettings"
 		| "browserRelaunchResult"
 		| "fileSearchResults"
 		| "grpc_response" // New type for gRPC responses

src/shared/WebviewMessage.ts

@@ -41,7 +41,6 @@ export interface WebviewMessage {
 		| "optionsResponse"
 		| "requestTotalTasksSize"
 		| "relaunchChromeDebugMode"
-		| "scrollToSettings"
 		| "searchFiles"
 		| "grpc_request"
 		| "grpc_request_cancel"

src/shared/proto/ui.ts

@@ -0,0 +1,28 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.7.0
+//   protoc               v3.19.1
+// source: ui.proto
+
+/* eslint-disable */
+import { Empty, StringRequest } from "./common"
+
+export const protobufPackage = "cline"
+
+/** UiService provides methods for managing UI interactions */
+export type UiServiceDefinition = typeof UiServiceDefinition
+export const UiServiceDefinition = {
+	name: "UiService",
+	fullName: "cline.UiService",
+	methods: {
+		/** Scrolls to a specific settings section in the settings view */
+		scrollToSettings: {
+			name: "scrollToSettings",
+			requestType: StringRequest,
+			requestStream: false,
+			responseType: Empty,
+			responseStream: false,
+			options: {},
+		},
+	},
+} as const

src/standalone/server-setup.ts

@@ -72,6 +72,9 @@ import { askResponse } from "../core/controller/task/askResponse"
 import { taskFeedback } from "../core/controller/task/taskFeedback"
 import { taskCompletionViewChanges } from "../core/controller/task/taskCompletionViewChanges"
 
+// Ui Service
+import { scrollToSettings } from "../core/controller/ui/scrollToSettings"
+
 // Web Service
 import { checkIsImageUrl } from "../core/controller/web/checkIsImageUrl"
 import { fetchOpenGraphData } from "../core/controller/web/fetchOpenGraphData"
@@ -169,6 +172,11 @@ export function addServices(
 		taskCompletionViewChanges: wrapper(taskCompletionViewChanges, controller),
 	})
 
+	// Ui Service
+	server.addService(proto.cline.UiService.service, {
+		scrollToSettings: wrapper(scrollToSettings, controller),
+	})
+
 	// Web Service
 	server.addService(proto.cline.WebService.service, {
 		checkIsImageUrl: wrapper(checkIsImageUrl, controller),

webview-ui/src/components/browser/BrowserSettingsMenu.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components"
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import { vscode } from "@/utils/vscode"
 import { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
-import { BrowserServiceClient } from "../../services/grpc-client"
+import { BrowserServiceClient, UiServiceClient } from "../../services/grpc-client"
 
 interface ConnectionInfo {
 	isConnected: boolean
@@ -71,11 +71,12 @@ export const BrowserSettingsMenu = () => {
 		})
 
 		// After a short delay, send a message to scroll to browser settings
-		setTimeout(() => {
-			vscode.postMessage({
-				type: "scrollToSettings",
-				text: "browser-settings-section",
-			})
+		setTimeout(async () => {
+			try {
+				await UiServiceClient.scrollToSettings({ value: "browser-settings-section" })
+			} catch (error) {
+				console.error("Error scrolling to browser settings:", error)
+			}
 		}, 300) // Give the settings panel time to open
 	}
 

webview-ui/src/components/settings/SettingsView.tsx

@@ -123,23 +123,25 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 						setPendingTabChange(null)
 					}
 					break
-				case "scrollToSettings":
-					setTimeout(() => {
-						const elementId = message.text
-						if (elementId) {
-							const element = document.getElementById(elementId)
-							if (element) {
-								element.scrollIntoView({ behavior: "smooth" })
+				case "grpc_response":
+					if (message.grpc_response?.message?.action === "scrollToSettings") {
+						setTimeout(() => {
+							const elementId = message.grpc_response?.message?.value
+							if (elementId) {
+								const element = document.getElementById(elementId)
+								if (element) {
+									element.scrollIntoView({ behavior: "smooth" })
 
-								element.style.transition = "background-color 0.5s ease"
-								element.style.backgroundColor = "var(--vscode-textPreformat-background)"
+									element.style.transition = "background-color 0.5s ease"
+									element.style.backgroundColor = "var(--vscode-textPreformat-background)"
 
-								setTimeout(() => {
-									element.style.backgroundColor = "transparent"
-								}, 1200)
+									setTimeout(() => {
+										element.style.backgroundColor = "transparent"
+									}, 1200)
+								}
 							}
-						}
-					}, 300)
+						}, 300)
+					}
 					break
 			}
 		},

webview-ui/src/services/grpc-client.ts

@@ -12,6 +12,7 @@ import { TaskServiceDefinition } from "@shared/proto/task"
 import { WebServiceDefinition } from "@shared/proto/web"
 import { ModelsServiceDefinition } from "@shared/proto/models"
 import { SlashServiceDefinition } from "@shared/proto/slash"
+import { UiServiceDefinition } from "@shared/proto/ui"
 
 const AccountServiceClient = createGrpcClient(AccountServiceDefinition)
 const BrowserServiceClient = createGrpcClient(BrowserServiceDefinition)
@@ -23,6 +24,7 @@ const TaskServiceClient = createGrpcClient(TaskServiceDefinition)
 const WebServiceClient = createGrpcClient(WebServiceDefinition)
 const ModelsServiceClient = createGrpcClient(ModelsServiceDefinition)
 const SlashServiceClient = createGrpcClient(SlashServiceDefinition)
+const UiServiceClient = createGrpcClient(UiServiceDefinition)
 
 export {
 	AccountServiceClient,
@@ -35,4 +37,5 @@ export {
 	WebServiceClient,
 	ModelsServiceClient,
 	SlashServiceClient,
+	UiServiceClient,
 }