feat: apply visual updates from PR #8470

- Updated ChatTextArea border radius from rounded to rounded-lg
- Updated TaskHeader padding and border radius styling
- Modified RooHero to remove flex centering and add bounce animation
- Updated RooTips with new content, Lucide icons, and improved layout
- Modified chat.json translations for updated onboarding content
- Updated HistoryPreview layout with header and improved spacing
- Modified TaskItem styling with rounded-xl and font-light
- Updated TaskItemFooter spacing
- Changed history.json viewAllHistory text to "View all"

These changes incorporate the visual improvements from PR #8470 without
including any CloudAgents functionality or related cloud features.

Author: roomote

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

@@ -979,7 +979,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								"flex-col-reverse",
 								"min-h-0",
 								"overflow-hidden",
-								"rounded",
+								"rounded-lg",
 							)}>
 							<div
 								ref={highlightLayerRef}
@@ -1005,7 +1005,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									isEditMode ? "pr-20" : "pr-9",
 									"z-10",
 									"forced-color-adjust-none",
-									"rounded",
+									"rounded-lg",
 								)}
 								style={{
 									color: "transparent",

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

@@ -112,10 +112,10 @@ const TaskHeader = ({
 			)}
 			<div
 				className={cn(
-					"px-2.5 pt-2.5 pb-2 flex flex-col gap-1.5 relative z-1 cursor-pointer",
+					"px-3 pt-2.5 pb-2 flex flex-col gap-1.5 relative z-1 cursor-pointer",
 					"bg-vscode-input-background hover:bg-vscode-input-background/90",
 					"text-vscode-foreground/80 hover:text-vscode-foreground",
-					"shadow-sm shadow-black/30 rounded-md",
+					"shadow-sm shadow-black/30 rounded-xl",
 					hasTodos && "border-b-0",
 				)}
 				onClick={(e) => {
@@ -163,7 +163,9 @@ const TaskHeader = ({
 					</div>
 				</div>
 				{!isTaskExpanded && contextWindow > 0 && (
-					<div className="flex items-center gap-2 text-sm" onClick={(e) => e.stopPropagation()}>
+					<div
+						className="flex items-center gap-2 text-sm text-muted-foreground/70"
+						onClick={(e) => e.stopPropagation()}>
 						<StandardTooltip
 							content={
 								<div className="space-y-1">

webview-ui/src/components/history/HistoryPreview.tsx

@@ -15,18 +15,21 @@ const HistoryPreview = () => {
 	}
 
 	return (
-		<div className="flex flex-col gap-3">
+		<div className="flex flex-col gap-1">
+			<div className="flex flex-wrap items-center justify-between mt-4 mb-2">
+				<h2 className="font-semibold text-lg grow m-0">{t("history:recentTasks")}</h2>
+				<button
+					onClick={handleViewAllHistory}
+					className="text-base text-vscode-descriptionForeground hover:text-vscode-textLink-foreground transition-colors cursor-pointer"
+					aria-label={t("history:viewAllHistory")}>
+					{t("history:viewAllHistory")}
+				</button>
+			</div>
 			{tasks.length !== 0 && (
 				<>
 					{tasks.slice(0, 3).map((item) => (
 						<TaskItem key={item.id} item={item} variant="compact" />
 					))}
-					<button
-						onClick={handleViewAllHistory}
-						className="text-base text-vscode-descriptionForeground hover:text-vscode-textLink-foreground transition-colors cursor-pointer text-center w-full"
-						aria-label={t("history:viewAllHistory")}>
-						{t("history:viewAllHistory")}
-					</button>
 				</>
 			)}
 		</div>

webview-ui/src/components/history/TaskItem.tsx

@@ -47,7 +47,7 @@ const TaskItem = ({
 			key={item.id}
 			data-testid={`task-item-${item.id}`}
 			className={cn(
-				"cursor-pointer group bg-vscode-editor-background rounded relative overflow-hidden border border-transparent hover:bg-vscode-list-hoverBackground transition-colors",
+				"cursor-pointer group bg-vscode-editor-background rounded-xl relative overflow-hidden border border-transparent hover:bg-vscode-editor-foreground/10 transition-colors",
 				className,
 			)}
 			onClick={handleClick}>
@@ -70,7 +70,7 @@ const TaskItem = ({
 				<div className="flex-1 min-w-0">
 					<div
 						className={cn(
-							"overflow-hidden whitespace-pre-wrap text-vscode-foreground text-ellipsis line-clamp-2",
+							"overflow-hidden whitespace-pre-wrap font-light text-vscode-foreground text-ellipsis line-clamp-3",
 							{
 								"text-base": !isCompact,
 							},

webview-ui/src/components/history/TaskItemFooter.tsx

@@ -16,7 +16,7 @@ export interface TaskItemFooterProps {
 const TaskItemFooter: React.FC<TaskItemFooterProps> = ({ item, variant, isSelectionMode = false, onDelete }) => {
 	return (
 		<div className="text-xs text-vscode-descriptionForeground flex justify-between items-center">
-			<div className="flex gap-2 items-center text-vscode-descriptionForeground/60">
+			<div className="flex gap-1 items-center text-vscode-descriptionForeground/60">
 				{/* Datetime with time-ago format */}
 				<StandardTooltip content={new Date(item.ts).toLocaleString()}>
 					<span className="first-letter:uppercase">{formatTimeAgo(item.ts)}</span>
@@ -32,7 +32,7 @@ const TaskItemFooter: React.FC<TaskItemFooterProps> = ({ item, variant, isSelect
 
 			{/* Action Buttons for non-compact view */}
 			{!isSelectionMode && (
-				<div className="flex flex-row gap-0 items-center text-vscode-descriptionForeground/60 hover:text-vscode-descriptionForeground">
+				<div className="flex flex-row gap-0 -mx-2 items-center text-vscode-descriptionForeground/60 hover:text-vscode-descriptionForeground">
 					<CopyButton itemTask={item.task} />
 					{variant === "full" && <ExportButton itemId={item.id} />}
 					{onDelete && <DeleteButton itemId={item.id} onDelete={onDelete} />}

webview-ui/src/components/welcome/RooHero.tsx

@@ -7,7 +7,7 @@ const RooHero = () => {
 	})
 
 	return (
-		<div className="flex flex-col items-center justify-center pb-4 forced-color-adjust-none">
+		<div className="pb-4 forced-color-adjust-none">
 			<div
 				style={{
 					backgroundColor: "var(--vscode-foreground)",
@@ -18,8 +18,8 @@ const RooHero = () => {
 					maskRepeat: "no-repeat",
 					maskSize: "contain",
 				}}
-				className="mx-auto">
-				<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0" />
+				className="mx-auto  hover:animate-bounce">
+				<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0 " />
 			</div>
 		</div>
 	)

webview-ui/src/components/welcome/RooTips.tsx

@@ -3,54 +3,57 @@ import { useTranslation } from "react-i18next"
 import { Trans } from "react-i18next"
 
 import { buildDocLink } from "@src/utils/docLinks"
+import { ReplaceAll, Users } from "lucide-react"
 
 const tips = [
 	{
-		icon: "codicon-account",
+		icon: <Users className="size-4 shrink-0 mt-0.5" />,
 		href: buildDocLink("basic-usage/using-modes", "tips"),
 		titleKey: "rooTips.customizableModes.title",
 		descriptionKey: "rooTips.customizableModes.description",
 	},
 	{
-		icon: "codicon-list-tree",
-		href: buildDocLink("features/boomerang-tasks", "tips"),
-		titleKey: "rooTips.boomerangTasks.title",
-		descriptionKey: "rooTips.boomerangTasks.description",
+		icon: <ReplaceAll className="size-4 shrink-0 mt-0.5" />,
+		href: buildDocLink("getting-started/connecting-api-provider", "tips"),
+		titleKey: "rooTips.modelAgnostic.title",
+		descriptionKey: "rooTips.modelAgnostic.description",
 	},
 ]
 
 const RooTips = () => {
 	const { t } = useTranslation("chat")
 
 	return (
-		<div>
-			<p className="text-vscode-editor-foreground leading-tight font-vscode-font-family text-center text-balance max-w-[380px] mx-auto my-0">
-				<Trans
-					i18nKey="chat:about"
-					components={{
-						DocsLink: (
-							<a href={buildDocLink("", "welcome")} target="_blank" rel="noopener noreferrer">
-								the docs
-							</a>
-						),
-					}}
-				/>
+		<div className="flex flex-col gap-2 mb-4 max-w-[450px] font-light text-vscode-descriptionForeground">
+			<p className="my-0 pr-8">
+				<Trans i18nKey="chat:about" />
 			</p>
-			<div className="flex flex-col items-center justify-center px-5 py-2.5 gap-4">
+			<div className="gap-4">
 				{tips.map((tip) => (
-					<div
-						key={tip.titleKey}
-						className="flex items-center gap-2 text-vscode-editor-foreground font-vscode max-w-[250px]">
-						<span className={`codicon ${tip.icon}`}></span>
+					<div key={tip.titleKey} className="flex items-start gap-2 mt-2 mr-6 leading-relaxed">
+						{tip.icon}
 						<span>
-							<VSCodeLink className="forced-color-adjust-none" href={tip.href}>
+							<VSCodeLink className="text-muted-foreground underline" href={tip.href}>
 								{t(tip.titleKey)}
 							</VSCodeLink>
 							: {t(tip.descriptionKey)}
 						</span>
 					</div>
 				))}
 			</div>
+			<p className="my-0 pr-8">
+				<Trans
+					i18nKey="chat:docs"
+					components={{
+						DocsLink: (
+							<VSCodeLink
+								className="text-muted-foreground underline"
+								href={buildDocLink("", "welcome")}
+							/>
+						),
+					}}
+				/>
+			</p>
 		</div>
 	)
 }

webview-ui/src/i18n/locales/en/chat.json

@@ -96,24 +96,17 @@
 		"placeholder": "Edit your message..."
 	},
 	"scrollToBottom": "Scroll to bottom of chat",
-	"about": "Generate, refactor, and debug code with AI assistance. Check out our <DocsLink>documentation</DocsLink> to learn more.",
+	"about": "Roo Code is a whole AI dev team in your editor.",
+	"docs": "Check our <DocsLink>docs</DocsLink> to learn more.",
 	"onboarding": "Your task list in this workspace is empty.",
 	"rooTips": {
-		"boomerangTasks": {
-			"title": "Task Orchestration",
-			"description": "Split tasks into smaller, manageable parts"
-		},
-		"stickyModels": {
-			"title": "Sticky Models",
-			"description": "Each mode remembers your last used model"
-		},
-		"tools": {
-			"title": "Tools",
-			"description": "Allow the AI to solve problems by browsing the web, running commands, and more"
-		},
 		"customizableModes": {
-			"title": "Customizable Modes",
-			"description": "Specialized personas with their own behaviors and assigned models"
+			"title": "Customizable modes",
+			"description": "Specialized personas that stay on-task and deliver."
+		},
+		"modelAgnostic": {
+			"title": "Bring your own model",
+			"description": "Use your own provider key or even run local inference — no markup, lock-in, no restrictions"
 		}
 	},
 	"selectMode": "Select mode for interaction",

webview-ui/src/i18n/locales/en/history.json

@@ -41,5 +41,5 @@
 		"mostTokens": "Most Tokens",
 		"mostRelevant": "Most Relevant"
 	},
-	"viewAllHistory": "View all tasks"
+	"viewAllHistory": "View all"
 }