UI Glam Sesh: Makeover for TaskHeader, ChatView, HistoryPreview...

src/core/webview/ClineProvider.ts

@@ -655,7 +655,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 					<link rel="stylesheet" type="text/css" href="${stylesUri}">
 					<link href="${codiconsUri}" rel="stylesheet" />
 					<script nonce="${nonce}">
-						window.IMAGES_BASE_URI = "${imagesUri}"
+						window.IMAGES_BASE_URI = "${imagesUri}"					
 					</script>
 					<title>Roo Code</title>
 				</head>
@@ -1216,7 +1216,6 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			telemetrySetting,
 			showRooIgnoredFiles,
 			language,
-			showGreeting,
 			maxReadFileLine,
 		} = await this.getState()
 
@@ -1297,7 +1296,6 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			renderContext: this.renderContext,
 			maxReadFileLine: maxReadFileLine ?? 500,
 			settingsImportedAt: this.settingsImportedAt,
-			showGreeting: showGreeting ?? true, // Ensure showGreeting is included in the returned state
 		}
 	}
 
@@ -1385,7 +1383,6 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			telemetrySetting: stateValues.telemetrySetting || "unset",
 			showRooIgnoredFiles: stateValues.showRooIgnoredFiles ?? true,
 			maxReadFileLine: stateValues.maxReadFileLine ?? 500,
-			showGreeting: stateValues.showGreeting ?? true, // Ensure showGreeting is returned by getState
 		}
 	}
 

src/core/webview/webviewMessageHandler.ts

@@ -645,11 +645,6 @@ export const webviewMessageHandler = async (provider: ClineProvider, message: We
 			await updateGlobalState("diffEnabled", diffEnabled)
 			await provider.postStateToWebview()
 			break
-		case "showGreeting":
-			const showGreeting = message.bool ?? true
-			await updateGlobalState("showGreeting", showGreeting)
-			await provider.postStateToWebview()
-			break
 		case "enableCheckpoints":
 			const enableCheckpoints = message.bool ?? true
 			await updateGlobalState("enableCheckpoints", enableCheckpoints)

src/exports/roo-code.d.ts

@@ -262,7 +262,6 @@ type GlobalSettings = {
 	remoteBrowserHost?: string | undefined
 	cachedChromeHostUrl?: string | undefined
 	enableCheckpoints?: boolean | undefined
-	showGreeting?: boolean | undefined
 	ttsEnabled?: boolean | undefined
 	ttsSpeed?: number | undefined
 	soundEnabled?: boolean | undefined

src/exports/types.ts

@@ -265,7 +265,6 @@ type GlobalSettings = {
 	remoteBrowserHost?: string | undefined
 	cachedChromeHostUrl?: string | undefined
 	enableCheckpoints?: boolean | undefined
-	showGreeting?: boolean | undefined
 	ttsEnabled?: boolean | undefined
 	ttsSpeed?: number | undefined
 	soundEnabled?: boolean | undefined

src/schemas/index.ts

@@ -529,8 +529,6 @@ export const globalSettingsSchema = z.object({
 
 	enableCheckpoints: z.boolean().optional(),
 
-	showGreeting: z.boolean().optional(),
-
 	ttsEnabled: z.boolean().optional(),
 	ttsSpeed: z.number().optional(),
 	soundEnabled: z.boolean().optional(),
@@ -606,8 +604,6 @@ const globalSettingsRecord: GlobalSettingsRecord = {
 
 	enableCheckpoints: undefined,
 
-	showGreeting: undefined,
-
 	ttsEnabled: undefined,
 	ttsSpeed: undefined,
 	soundEnabled: undefined,

src/shared/ExtensionMessage.ts

@@ -142,7 +142,6 @@ export type ExtensionState = Pick<
 	| "remoteBrowserEnabled"
 	| "remoteBrowserHost"
 	// | "enableCheckpoints" // Optional in GlobalSettings, required here.
-	| "showGreeting"
 	| "ttsEnabled"
 	| "ttsSpeed"
 	| "soundEnabled"

src/shared/WebviewMessage.ts

@@ -125,7 +125,6 @@ export interface WebviewMessage {
 		| "maxReadFileLine"
 		| "searchFiles"
 		| "toggleApiConfigPin"
-		| "showGreeting"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse

webview-ui/src/__tests__/ContextWindowProgress.test.tsx

@@ -1,4 +1,5 @@
-import React from "react"
+// npx jest src/__tests__/ContextWindowProgress.test.tsx
+
 import { render, screen } from "@testing-library/react"
 import "@testing-library/jest-dom"
 import TaskHeader from "../components/chat/TaskHeader"
@@ -68,7 +69,9 @@ describe("ContextWindowProgress", () => {
 		})
 
 		// Check for basic elements
-		expect(screen.getByTestId("context-window-label")).toBeInTheDocument()
+		// The context-window-label is not part of the ContextWindowProgress component
+		// but rather part of the parent TaskHeader component in expanded state
+		expect(screen.getByTestId("context-tokens-count")).toBeInTheDocument()
 		expect(screen.getByTestId("context-tokens-count")).toHaveTextContent("1000") // contextTokens
 		// The actual context window might be different than what we pass in
 		// due to the mock returning a default value from the API config
@@ -83,7 +86,8 @@ describe("ContextWindowProgress", () => {
 
 		// In the current implementation, the component is still displayed with zero values
 		// rather than being hidden completely
-		expect(screen.getByTestId("context-window-label")).toBeInTheDocument()
+		// The context-window-label is not part of the ContextWindowProgress component
+		expect(screen.getByTestId("context-tokens-count")).toBeInTheDocument()
 		expect(screen.getByTestId("context-tokens-count")).toHaveTextContent("0")
 	})
 
@@ -117,8 +121,8 @@ describe("ContextWindowProgress", () => {
 
 		// We can't reliably test computed styles in JSDOM, so we'll just check
 		// that the component appears to be working correctly by checking for expected elements
-		expect(screen.getByTestId("context-window-label")).toBeInTheDocument()
+		// The context-window-label is not part of the ContextWindowProgress component
+		expect(screen.getByTestId("context-tokens-count")).toBeInTheDocument()
 		expect(screen.getByTestId("context-tokens-count")).toHaveTextContent("1000")
-		expect(screen.getByText("1000")).toBeInTheDocument()
 	})
 })

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

@@ -854,11 +854,10 @@ export const ChatRowContent = ({
 				case "user_feedback":
 					return (
 						<div
+							className="outline rounded p-4"
 							style={{
-								backgroundColor: "var(--vscode-badge-background)",
 								color: "var(--vscode-badge-foreground)",
-								borderRadius: "3px",
-								padding: "9px",
+								padding: "4px",
 								overflow: "hidden",
 								whiteSpace: "pre-wrap",
 								wordBreak: "break-word",

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

@@ -19,6 +19,7 @@ import { getApiMetrics } from "../../../../src/shared/getApiMetrics"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
 import HistoryPreview from "../history/HistoryPreview"
+import RooHero from "../welcome/RooHero"
 import { normalizeApiConfiguration } from "../settings/ApiOptions"
 import Announcement from "./Announcement"
 import BrowserSessionRow from "./BrowserSessionRow"
@@ -76,7 +77,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		alwaysAllowSubtasks,
 		customModes,
 		telemetrySetting,
-		showGreeting,
 	} = useExtensionState()
 
 	//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined) : undefined
@@ -1224,12 +1224,8 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 					}}>
 					{telemetrySetting === "unset" && <TelemetryBanner />}
 					{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
-					{showGreeting === true && (
-						<div style={{ padding: "0 20px", flexShrink: 0 }}>
-							<h2>{t("chat:greeting")}</h2>
-							<p>{t("chat:aboutMe")}</p>
-						</div>
-					)}
+
+					<RooHero />
 					{taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
 				</div>
 			)}