Show active model in chat footer

Author: avaritiachaos

.changeset/webview-current-model-indicator.md

@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Show the current model in the Roo Code chat input footer.

packages/types/src/vscode-extension-host.ts

@@ -314,6 +314,7 @@ export type ExtensionState = Pick<
 	currentTaskItem?: HistoryItem
 	currentTaskTodos?: TodoItem[] // Initial todos for the current task
 	apiConfiguration: ProviderSettings
+	currentModelId?: string
 	uriScheme?: string
 	shouldShowAnnouncement: boolean
 

src/core/webview/ClineProvider.ts

@@ -2129,6 +2129,7 @@ export class ClineProvider
 
 		const {
 			apiConfiguration,
+			currentModelId,
 			lastShownAnnouncementId,
 			customInstructions,
 			alwaysAllowReadOnly,
@@ -2242,6 +2243,7 @@ export class ClineProvider
 		return {
 			version: this.context.extension?.packageJSON?.version ?? "",
 			apiConfiguration,
+			currentModelId,
 			customInstructions,
 			alwaysAllowReadOnly: alwaysAllowReadOnly ?? false,
 			alwaysAllowReadOnlyOutsideWorkspace: alwaysAllowReadOnlyOutsideWorkspace ?? false,
@@ -2395,6 +2397,8 @@ export class ClineProvider
 			providerSettings.apiProvider = apiProvider
 		}
 
+		const currentModelId = getModelId(providerSettings)
+
 		let organizationAllowList = ORGANIZATION_ALLOW_ALL
 
 		try {
@@ -2471,6 +2475,7 @@ export class ClineProvider
 		// Return the same structure as before.
 		return {
 			apiConfiguration: providerSettings,
+			currentModelId,
 			lastShownAnnouncementId: stateValues.lastShownAnnouncementId,
 			customInstructions: stateValues.customInstructions,
 			apiModelId: stateValues.apiModelId,

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -99,6 +99,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			cloudUserInfo,
 			enterBehavior,
 			lockApiConfigAcrossModes,
+			currentModelId,
 		} = useExtensionState()
 
 		// Find the ID and display text for the currently selected API configuration.
@@ -110,6 +111,28 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			}
 		}, [listApiConfigMeta, currentApiConfigName])
 
+		const currentModelDisplayName = useMemo(() => {
+			if (!currentModelId) {
+				return undefined
+			}
+
+			return currentModelId
+				.split(/[-_\s]+/)
+				.filter(Boolean)
+				.map((part) => {
+					if (part.toLowerCase() === "deepseek") {
+						return "DeepSeek"
+					}
+
+					if (/^v\d+$/i.test(part)) {
+						return part.toUpperCase()
+					}
+
+					return part.charAt(0).toUpperCase() + part.slice(1)
+				})
+				.join(" ")
+		}, [currentModelId])
+
 		const [gitCommits, setGitCommits] = useState<any[]>([])
 		const [showDropdown, setShowDropdown] = useState(false)
 		const [fileSearchResults, setFileSearchResults] = useState<SearchResult[]>([])
@@ -1320,6 +1343,14 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							lockApiConfigAcrossModes={!!lockApiConfigAcrossModes}
 							onToggleLockApiConfig={handleToggleLockApiConfig}
 						/>
+						{currentModelDisplayName ? (
+							<div
+								className="flex h-5 max-w-[160px] min-w-0 flex-shrink items-center rounded-sm border border-vscode-input-border/60 px-1.5 text-vscode-descriptionForeground"
+								title={currentModelId}
+								data-testid="current-model-indicator">
+								<span className="truncate text-xs leading-none">{currentModelDisplayName}</span>
+							</div>
+						) : null}
 						<AutoApproveDropdown triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink" />
 					</div>
 					<div

webview-ui/src/components/chat/__tests__/ChatTextArea.spec.tsx

@@ -89,6 +89,27 @@ describe("ChatTextArea", () => {
 		})
 	})
 
+	describe("current model indicator", () => {
+		it("shows the model id from extension state in the footer", () => {
+			;(useExtensionState as ReturnType<typeof vi.fn>).mockReturnValue({
+				filePaths: [],
+				openedTabs: [],
+				apiConfiguration: {
+					apiProvider: "deepseek",
+				},
+				currentModelId: "deepseek-v4-pro",
+				taskHistory: [],
+				cwd: "/test/workspace",
+			})
+
+			render(<ChatTextArea {...defaultProps} />)
+
+			const indicator = screen.getByTestId("current-model-indicator")
+			expect(indicator).toHaveTextContent("DeepSeek V4 Pro")
+			expect(indicator).toHaveAttribute("title", "deepseek-v4-pro")
+		})
+	})
+
 	describe("handleEnhancePrompt", () => {
 		it("should send message with correct configuration when clicked", () => {
 			const apiConfiguration = {

webview-ui/src/context/ExtensionStateContext.tsx

@@ -192,6 +192,7 @@ export const mergeExtensionState = (prevState: ExtensionState, newState: Partial
 export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 	const [state, setState] = useState<ExtensionState>({
 		apiConfiguration: {},
+		currentModelId: undefined,
 		version: "",
 		clineMessages: [],
 		taskHistory: [],