diff --git a/package.json b/package.json
index 870f3cb294..68786966f7 100644
--- a/package.json
+++ b/package.json
@@ -90,11 +90,6 @@
"title": "Settings",
"icon": "$(settings-gear)"
},
- {
- "command": "cline.accountLoginClicked",
- "title": "Account",
- "icon": "$(account)"
- },
{
"command": "cline.openInNewTab",
"title": "Open In New Tab",
@@ -123,14 +118,9 @@
"group": "navigation@4",
"when": "view == claude-dev.SidebarProvider"
},
- {
- "command": "cline.accountLoginClicked",
- "group": "navigation@5",
- "when": "view == claude-dev.SidebarProvider"
- },
{
"command": "cline.settingsButtonClicked",
- "group": "navigation@6",
+ "group": "navigation@5",
"when": "view == claude-dev.SidebarProvider"
}
]
diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts
index c112086fdf..6e110eb593 100644
--- a/src/core/webview/ClineProvider.ts
+++ b/src/core/webview/ClineProvider.ts
@@ -604,6 +604,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
asksageApiUrl,
xaiApiKey,
thinkingBudgetTokens,
+ clineApiKey,
} = message.apiConfiguration
await this.updateGlobalState("apiProvider", apiProvider)
await this.updateGlobalState("apiModelId", apiModelId)
@@ -650,6 +651,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
await this.storeSecret("asksageApiKey", asksageApiKey)
await this.updateGlobalState("asksageApiUrl", asksageApiUrl)
await this.updateGlobalState("thinkingBudgetTokens", thinkingBudgetTokens)
+ await this.storeSecret("clineApiKey", clineApiKey)
if (this.cline) {
this.cline.api = buildApiHandler(message.apiConfiguration)
}
diff --git a/webview-ui/src/components/account/AccountView.tsx b/webview-ui/src/components/account/AccountView.tsx
index 35b13bd65c..361b135b5c 100644
--- a/webview-ui/src/components/account/AccountView.tsx
+++ b/webview-ui/src/components/account/AccountView.tsx
@@ -1,26 +1,14 @@
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeDivider } from "@vscode/webview-ui-toolkit/react"
import { memo } from "react"
import { useFirebaseAuth } from "../../context/FirebaseAuthContext"
import { vscode } from "../../utils/vscode"
+import VSCodeButtonLink from "../common/VSCodeButtonLink"
type AccountViewProps = {
onDone: () => void
}
const AccountView = ({ onDone }: AccountViewProps) => {
- const { user, handleSignOut } = useFirebaseAuth()
-
- const handleLogin = () => {
- vscode.postMessage({ type: "accountLoginClicked" })
- }
-
- const handleLogout = () => {
- // First notify extension to clear API keys and state
- vscode.postMessage({ type: "accountLogoutClicked" })
- // Then sign out of Firebase
- handleSignOut()
- }
-
return (
{
flexDirection: "column",
}}>
- {user ? (
- <>
- {user.photoURL && (
-

- )}
-
- {user.displayName &&
{user.displayName}
}
- {user.email &&
{user.email}
}
-
-
Log out
- >
- ) : (
-
Log in to Cline
- )}
+
)
}
+export const ClineAccountView = () => {
+ const { user, handleSignOut } = useFirebaseAuth()
+
+ const handleLogin = () => {
+ vscode.postMessage({ type: "accountLoginClicked" })
+ }
+
+ const handleLogout = () => {
+ // First notify extension to clear API keys and state
+ vscode.postMessage({ type: "accountLogoutClicked" })
+ // Then sign out of Firebase
+ handleSignOut()
+ }
+ return (
+
+ {user ? (
+
+
+ {user.photoURL ? (
+

+ ) : (
+
+ {user.displayName?.[0] || user.email?.[0] || "?"}
+
+ )}
+
+ {user.displayName && (
+
+ {user.displayName}
+
+ )}
+ {user.email && (
+
+ {user.email}
+
+ )}
+
+
+ Account
+
+
+ Log out
+
+
+
+
+
+ ) : (
+
+
+ Sign Up with Cline
+
+
+ )}
+
+ )
+}
+
export default memo(AccountView)
diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx
index e7950fbaeb..28565f40bf 100644
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -49,6 +49,7 @@ import { vscode } from "../../utils/vscode"
import { getAsVar, VSC_DESCRIPTION_FOREGROUND } from "../../utils/vscStyles"
import VSCodeButtonLink from "../common/VSCodeButtonLink"
import OpenRouterModelPicker, { ModelDescriptionMarkdown } from "./OpenRouterModelPicker"
+import AccountView, { ClineAccountView } from "../account/AccountView"
interface ApiOptionsProps {
showModelOptions: boolean
@@ -91,10 +92,6 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
const [modelConfigurationSelected, setModelConfigurationSelected] = useState(false)
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
- const handleClineLogin = () => {
- vscode.postMessage({ type: "accountLoginClicked" })
- }
-
const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => {
setApiConfiguration({
...apiConfiguration,
@@ -213,36 +210,8 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
{selectedProvider === "cline" && (
-
- {apiConfiguration?.clineApiKey && (
-
- Cline API Key
-
- )}
-
- {apiConfiguration?.clineApiKey && (
-
- {"apiKeyInfo"}
-
- )}
-
- {!apiConfiguration?.clineApiKey && (
-
-
- Get Cline API Key
-
-
- )}
+
+
)}
diff --git a/webview-ui/src/components/welcome/WelcomeView.tsx b/webview-ui/src/components/welcome/WelcomeView.tsx
index 6fb6b06c94..c4c2643ff2 100644
--- a/webview-ui/src/components/welcome/WelcomeView.tsx
+++ b/webview-ui/src/components/welcome/WelcomeView.tsx
@@ -45,37 +45,40 @@ const WelcomeView = () => {
overflow: "auto",
}}>
Hi, I'm Cline
+
+
+
- I can do all kinds of tasks thanks to breakthroughs in Claude 3.7 Sonnet's agentic coding capabilities and
- access to tools that let me create & edit files, explore complex projects, use the browser, and execute
- terminal commands (with your permission, of course). I can even use MCP to create new tools and extend my own
- capabilities.
+ I can do all kinds of tasks thanks to breakthroughs in{" "}
+
+ Claude 3.7 Sonnet's
+
+ agentic coding capabilities and access to tools that let me create & edit files, explore complex projects, use
+ a browser, and execute terminal commands (with your permission, of course). I can even use MCP to
+ create new tools and extend my own capabilities.
-
-
- Sign Up with Cline
+
+ Sign up for an account to get started for free, or use an API key that provides access to models like Claude
+ 3.7 Sonnet.
+
+
+
+ Get Started for Free
+
+
+ {!showApiOptions && (
+ setShowApiOptions(!showApiOptions)}
+ style={{ marginTop: 10, width: "100%" }}>
+ Use your own API key
+ )}
-
-
- - Choose from hundreds of models like Claude 3.5 Sonnet and DeepSeek V3
- - Get started for free with no credit card required
-
-
-
-
-
-
-
- {!showApiOptions && (
-
setShowApiOptions(!showApiOptions)}>
- Use your own API key
-
- )}
-
+
{showApiOptions && (
-
+
Let's go!
@@ -88,4 +91,22 @@ const WelcomeView = () => {
)
}
+const ClineLogo: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
+ // (can't use svgs in vsc extensions)
+ const logoBase64 =
+ "data:image/png;base64,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"
+
+ return (
+
+ )
+}
+
export default WelcomeView