random slash

.changeset/late-monkeys-reply.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Add a simplified home header

webview-ui/src/assets/ClineLogoBlack.tsx

@@ -0,0 +1,11 @@
+import { SVGProps } from "react"
+
+const ClineLogoBlack = (props: SVGProps<SVGSVGElement>) => (
+	<svg xmlns="http://www.w3.org/2000/svg" width="47" height="50" viewBox="0 0 47 50" fill="none" {...props}>
+		<path
+			d="M46.4075 28.1192L43.5011 22.3166V18.9747C43.5011 13.4354 39.0302 8.94931 33.5162 8.94931H28.5491C28.9086 8.21513 29.106 7.3898 29.106 6.5189C29.106 3.44039 26.6149 0.949219 23.5363 0.949219C20.4578 0.949219 17.9667 3.44039 17.9667 6.5189C17.9667 7.3898 18.1641 8.21513 18.5236 8.94931H13.5565C8.04249 8.94931 3.57155 13.4354 3.57155 18.9747V22.3166L0.604424 28.104C0.305687 28.6863 0.305687 29.3799 0.604424 29.9622L3.57155 35.6838V39.0256C3.57155 44.5649 8.04249 49.0511 13.5565 49.0511H33.5162C39.0302 49.0511 43.5011 44.5649 43.5011 39.0256V35.6838L46.4024 29.942C46.691 29.3698 46.691 28.6964 46.4075 28.1192ZM20.4983 32.8483C20.4983 35.3648 18.4578 37.4053 15.9413 37.4053C13.4248 37.4053 11.3843 35.3648 11.3843 32.8483V24.747C11.3843 22.2305 13.4248 20.19 15.9413 20.19C18.4578 20.19 20.4983 22.2305 20.4983 24.747V32.8483ZM35.182 32.8483C35.182 35.3648 33.1415 37.4053 30.625 37.4053C28.1085 37.4053 26.068 35.3648 26.068 32.8483V24.747C26.068 22.2305 28.1085 20.19 30.625 20.19C33.1415 20.19 35.182 22.2305 35.182 24.747V32.8483Z"
+			fill="black"
+		/>
+	</svg>
+)
+export default ClineLogoBlack

webview-ui/src/assets/ClineLogoVariable.tsx

@@ -0,0 +1,21 @@
+import { SVGProps } from "react"
+
+/**
+ * ClineLogoVariable component renders the Cline logo with automatic theme adaptation.
+ *
+ * This component uses the VS Code theme variable `--vscode-icon-foreground` for the fill color,
+ * which automatically adjusts based on the active VS Code theme (light, dark, high contrast)
+ * to ensure optimal contrast with the background.
+ *
+ * @param {SVGProps<SVGSVGElement>} props - Standard SVG props including className, style, etc.
+ * @returns {JSX.Element} SVG Cline logo that adapts to VS Code themes
+ */
+const ClineLogoVariable = (props: SVGProps<SVGSVGElement>) => (
+	<svg xmlns="http://www.w3.org/2000/svg" width="47" height="50" viewBox="0 0 47 50" fill="none" {...props}>
+		<path
+			d="M46.4075 28.1192L43.5011 22.3166V18.9747C43.5011 13.4354 39.0302 8.94931 33.5162 8.94931H28.5491C28.9086 8.21513 29.106 7.3898 29.106 6.5189C29.106 3.44039 26.6149 0.949219 23.5363 0.949219C20.4578 0.949219 17.9667 3.44039 17.9667 6.5189C17.9667 7.3898 18.1641 8.21513 18.5236 8.94931H13.5565C8.04249 8.94931 3.57155 13.4354 3.57155 18.9747V22.3166L0.604424 28.104C0.305687 28.6863 0.305687 29.3799 0.604424 29.9622L3.57155 35.6838V39.0256C3.57155 44.5649 8.04249 49.0511 13.5565 49.0511H33.5162C39.0302 49.0511 43.5011 44.5649 43.5011 39.0256V35.6838L46.4024 29.942C46.691 29.3698 46.691 28.6964 46.4075 28.1192ZM20.4983 32.8483C20.4983 35.3648 18.4578 37.4053 15.9413 37.4053C13.4248 37.4053 11.3843 35.3648 11.3843 32.8483V24.747C11.3843 22.2305 13.4248 20.19 15.9413 20.19C18.4578 20.19 20.4983 22.2305 20.4983 24.747V32.8483ZM35.182 32.8483C35.182 35.3648 33.1415 37.4053 30.625 37.4053C28.1085 37.4053 26.068 35.3648 26.068 32.8483V24.747C26.068 22.2305 28.1085 20.19 30.625 20.19C33.1415 20.19 35.182 22.2305 35.182 24.747V32.8483Z"
+			fill="var(--vscode-icon-foreground)"
+		/>
+	</svg>
+)
+export default ClineLogoVariable

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

@@ -33,6 +33,7 @@ import { unified } from "unified"
 import remarkStringify from "remark-stringify"
 import rehypeRemark from "rehype-remark"
 import rehypeParse from "rehype-parse"
+import HomeHeader from "../welcome/HomeHeader"
 
 interface ChatViewProps {
 	isHidden: boolean
@@ -992,19 +993,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 
 					{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
 
-					<div style={{ padding: "0 20px", flexShrink: 0 }}>
-						<h2>What can I do for you?</h2>
-						<p>
-							Thanks to{" "}
-							<VSCodeLink href="https://www.anthropic.com/claude/sonnet" style={{ display: "inline" }}>
-								Claude 3.7 Sonnet's
-							</VSCodeLink>
-							agentic coding capabilities, I can handle complex software development tasks step-by-step. With tools
-							that let me create & edit files, explore complex projects, use a browser, and execute terminal
-							commands (after you grant permission), I can assist you in ways that go beyond code completion or tech
-							support. I can even use MCP to create new tools and extend my own capabilities.
-						</p>
-					</div>
+					<HomeHeader />
 					{taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
 				</div>
 			)}

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

@@ -0,0 +1,28 @@
+import ClineLogoVariable from "@/assets/ClineLogoVariable"
+import HeroTooltip from "@/components/common/HeroTooltip"
+
+const HomeHeader = () => {
+	return (
+		<div className="flex flex-col items-center mb-5">
+			<div className="my-5">
+				<ClineLogoVariable className="size-16" />
+			</div>
+			<div className="text-center flex items-center justify-center">
+				<h2 className="m-0 text-[var(--vscode-font-size)]">{"What can I do for you?"}</h2>
+				<HeroTooltip
+					placement="bottom"
+					className="max-w-[300px]"
+					content={
+						"I can develop software step-by-step by editing files, exploring projects, running commands, and using browsers. I can even extend my capabilities with MCP tools to assist beyond basic code completion."
+					}>
+					<span
+						className="codicon codicon-info ml-2 cursor-pointer"
+						style={{ fontSize: "14px", color: "var(--vscode-textLink-foreground)" }}
+					/>
+				</HeroTooltip>
+			</div>
+		</div>
+	)
+}
+
+export default HomeHeader