ui(chat): move browser globe to task header; show grey when inactive and green Active when session active

Author: hannesrudolph

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
 import { useEvent } from "react-use"
 import DynamicTextArea from "react-textarea-autosize"
-import { VolumeX, Image, WandSparkles, SendHorizontal, MessageSquareX, Globe } from "lucide-react"
+import { VolumeX, Image, WandSparkles, SendHorizontal, MessageSquareX } from "lucide-react"
 
 import { mentionRegex, mentionRegexGlobal, commandRegexGlobal, unescapeSpaces } from "@roo/context-mentions"
 import { WebviewMessage } from "@roo/WebviewMessage"
@@ -21,7 +21,7 @@ import {
 } from "@src/utils/context-mentions"
 import { cn } from "@src/lib/utils"
 import { convertToMentionPath } from "@src/utils/path-mentions"
-import { StandardTooltip, Button } from "@src/components/ui"
+import { StandardTooltip } from "@src/components/ui"
 
 import Thumbnails from "../common/Thumbnails"
 import { ModeSelector } from "./ModeSelector"
@@ -1264,32 +1264,14 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								</button>
 							</StandardTooltip>
 						)}
-						{!isEditMode && showBrowserDockToggle && (
-							<StandardTooltip content={t("chat:browser.session")}>
-								<Button
-									variant="ghost"
-									size="sm"
-									aria-label={t("chat:browser.session")}
-									onClick={() => vscode.postMessage({ type: "openBrowserSessionPanel" })}
-									className={cn(
-										"relative h-5 w-5 p-0",
-										"text-vscode-foreground opacity-85",
-										"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)]",
-										"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
-									)}>
-									<Globe
-										className="w-4 h-4"
-										style={{
-											color: isBrowserSessionActive
-												? "#4ade80"
-												: "var(--vscode-descriptionForeground)",
-										}}
-									/>
-								</Button>
-							</StandardTooltip>
-						)}
 						{!isEditMode ? <IndexingStatusBadge /> : null}
 						{!isEditMode && cloudUserInfo && <CloudAccountSwitcher />}
+						{/* keep props referenced after moving browser button */}
+						<div
+							className="hidden"
+							data-browser-session-active={isBrowserSessionActive}
+							data-show-browser-dock-toggle={showBrowserDockToggle}
+						/>
 					</div>
 				</div>
 			</div>

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

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef, useState } from "react"
+import { memo, useEffect, useRef, useState, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { useCloudUpsell } from "@src/hooks/useCloudUpsell"
 import { CloudUpsellDialog } from "@src/components/cloud/CloudUpsellDialog"
@@ -10,7 +10,8 @@ import {
 	Coins,
 	HardDriveDownload,
 	HardDriveUpload,
-	FoldVerticalIcon,
+	FoldVertical,
+	Globe,
 } from "lucide-react"
 import prettyBytes from "pretty-bytes"
 
@@ -21,9 +22,10 @@ import { findLastIndex } from "@roo/array"
 
 import { formatLargeNumber } from "@src/utils/format"
 import { cn } from "@src/lib/utils"
-import { StandardTooltip } from "@src/components/ui"
+import { StandardTooltip, Button } from "@src/components/ui"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useSelectedModel } from "@/components/ui/hooks/useSelectedModel"
+import { vscode } from "@src/utils/vscode"
 
 import Thumbnails from "../common/Thumbnails"
 
@@ -59,7 +61,7 @@ const TaskHeader = ({
 	todos,
 }: TaskHeaderProps) => {
 	const { t } = useTranslation()
-	const { apiConfiguration, currentTaskItem, clineMessages } = useExtensionState()
+	const { apiConfiguration, currentTaskItem, clineMessages, isBrowserSessionActive } = useExtensionState()
 	const { id: modelId, info: model } = useSelectedModel(apiConfiguration)
 	const [isTaskExpanded, setIsTaskExpanded] = useState(false)
 	const [showLongRunningTaskMessage, setShowLongRunningTaskMessage] = useState(false)
@@ -95,14 +97,29 @@ const TaskHeader = ({
 	const textRef = useRef<HTMLDivElement>(null)
 	const contextWindow = model?.contextWindow || 1
 
+	// Detect if this task had any browser session activity so we can show a grey globe when inactive
+	const browserSessionStartIndex = useMemo(() => {
+		const msgs = clineMessages || []
+		for (let i = 0; i < msgs.length; i++) {
+			const m = msgs[i] as any
+			if (m?.ask === "browser_action_launch") return i
+			if (m?.say === "browser_session_status" && typeof m.text === "string" && m.text.includes("opened")) {
+				return i
+			}
+		}
+		return -1
+	}, [clineMessages])
+
+	const showBrowserGlobe = browserSessionStartIndex !== -1 || !!isBrowserSessionActive
+
 	const condenseButton = (
-		<LucideIconButton
-			title={t("chat:task.condenseContext")}
-			icon={FoldVerticalIcon}
-			disabled={buttonsDisabled}
-			onClick={() => currentTaskItem && handleCondenseContext(currentTaskItem.id)}
-		/>
-	)
+			<LucideIconButton
+				title={t("chat:task.condenseContext")}
+				icon={FoldVertical}
+				disabled={buttonsDisabled}
+				onClick={() => currentTaskItem && handleCondenseContext(currentTaskItem.id)}
+			/>
+		)
 
 	const hasTodos = todos && Array.isArray(todos) && todos.length > 0
 
@@ -355,6 +372,41 @@ const TaskHeader = ({
 				)}
 				{/* Todo list - always shown at bottom when todos exist */}
 				{hasTodos && <TodoListDisplay todos={todos ?? (task as any)?.tool?.todos ?? []} />}
+
+				{/* Browser session status moved from bottom bar to header (bottom-right) */}
+				{showBrowserGlobe && (
+					<div
+						className="absolute bottom-2 right-3 flex items-center gap-1"
+						onClick={(e) => e.stopPropagation()}>
+						<StandardTooltip content={t("chat:browser.session")}>
+							<Button
+								variant="ghost"
+								size="sm"
+								aria-label={t("chat:browser.session")}
+								onClick={() => vscode.postMessage({ type: "openBrowserSessionPanel" } as any)}
+								className={cn(
+									"relative h-5 w-5 p-0",
+									"text-vscode-foreground opacity-85",
+									"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)]",
+									"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
+								)}>
+								<Globe
+									className="w-4 h-4"
+									style={{
+										color: isBrowserSessionActive
+											? "#4ade80"
+											: "var(--vscode-descriptionForeground)",
+									}}
+								/>
+							</Button>
+						</StandardTooltip>
+						{isBrowserSessionActive && (
+							<span className="text-sm font-medium" style={{ color: "var(--vscode-testing-iconPassed)" }}>
+								Active
+							</span>
+						)}
+					</div>
+				)}
 			</div>
 			<CloudUpsellDialog open={isOpen} onOpenChange={closeUpsell} onConnect={handleConnect} />
 		</div>