Testing xvfb display server
+
+
+ `
+
+ // Verify panel exists
+ should.exist(panel)
+ panel.visible.should.be.true()
+
+ // Clean up
+ panel.dispose()
+ })
+
+ // Test webview message passing
+ it("should handle webview messages", async () => {
+ const panel = vscode.window.createWebviewPanel("testWebview", "Message Test", vscode.ViewColumn.One, {
+ enableScripts: true,
+ })
+
+ // Set up message handling
+ const messagePromise = new Promise
+
+ )
+}
+
+export default memo(AccountView)
diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index ce0a4180ca..b9fbcbd2aa 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -43,6 +43,8 @@ interface ChatTextAreaProps {
onHeightChange?: (height: number) => void
}
+const PLAN_MODE_COLOR = "var(--vscode-inputValidation-warningBorder)"
+
const SwitchOption = styled.div<{ isActive: boolean }>`
padding: 2px 8px;
color: ${(props) => (props.isActive ? "white" : "var(--vscode-input-foreground)")};
@@ -69,13 +71,14 @@ const SwitchContainer = styled.div<{ disabled: boolean }>`
transform: scale(0.85);
transform-origin: right center;
margin-left: -10px; // compensate for the transform so flex spacing works
+ user-select: none; // Prevent text selection
`
-const Slider = styled.div<{ isAct: boolean }>`
+const Slider = styled.div<{ isAct: boolean; isPlan?: boolean }>`
position: absolute;
height: 100%;
width: 50%;
- background-color: var(--vscode-focusBorder);
+ background-color: ${(props) => (props.isPlan ? PLAN_MODE_COLOR : "var(--vscode-focusBorder)")};
transition: transform 0.2s ease;
transform: translateX(${(props) => (props.isAct ? "100%" : "0%")});
`
@@ -372,6 +375,7 @@ const ChatTextArea = forwardRef
+ Done
+
+ Account
+
+
+
+ {isLoggedIn ? (
+ <>
+ {userInfo?.photoURL && (
+ 
+ )}
+ Log out
+
+ ) : (
+ Log in to Cline
+ )}
+
+
+ {userInfo?.displayName &&
+ Name: {userInfo.displayName}
}
+ {userInfo?.email && Email: {userInfo.email}
}
+ (
opacity: textAreaDisabled ? 0.5 : 1,
position: "relative",
display: "flex",
- }}>
+ }}
+ onDrop={onDrop}
+ onDragOver={onDragOver}>
{showContextMenu && (
(
}}
/>
{
if (typeof ref === "function") {
ref(el)
@@ -862,6 +956,9 @@ const ChatTextArea = forwardRef(
cursor: textAreaDisabled ? "not-allowed" : undefined,
flex: 1,
zIndex: 1,
+ outline: isTextAreaFocused
+ ? `1px solid ${chatSettings.mode === "plan" ? PLAN_MODE_COLOR : "var(--vscode-focusBorder)"}`
+ : "none",
}}
onScroll={() => updateHighlights()}
/>
@@ -909,9 +1006,11 @@ const ChatTextArea = forwardRef(
}}
/> */}
{
onClick={() => {
vscode.postMessage({ type: "openMcpSettings" })
}}>
-
- Edit MCP Settings
+
+ Configure MCP Servers
+ {/* Advanced Settings Link */}
+
diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx
index f97f737aa2..0638c55bf5 100644
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -52,9 +52,9 @@ interface ApiOptionsProps {
// This is necessary to ensure dropdown opens downward, important for when this is used in popup
const DROPDOWN_Z_INDEX = 1001 // Higher than the OpenRouterModelPicker's and ModelSelectorTooltip's z-index
-const DropdownContainer = styled.div`
+const DropdownContainer = styled.div<{ zIndex?: number }>`
position: relative;
- z-index: ${DROPDOWN_Z_INDEX};
+ z-index: ${(props) => props.zIndex || DROPDOWN_Z_INDEX};
// Force dropdowns to open downward
& vscode-dropdown::part(listbox) {
@@ -403,7 +403,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
placeholder={t("enterAwsSessionToken")}>
{t("awsSessionToken")}
- {
@@ -476,7 +476,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
placeholder={t("enterGcpProjectId")}>
{t("gcpProjectId")}
-
)}
@@ -798,7 +798,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
selectedProvider !== "vscode-lm" &&
showModelOptions && (
<>
- {
if (!textAreaDisabled) {
+ setIsTextAreaFocused(false)
onSend()
}
}}
@@ -923,6 +1022,7 @@ const ChatTextArea = forwardRef(
(
(
-
-
+ Plan
Act
diff --git a/webview-ui/src/components/common/SettingsButton.tsx b/webview-ui/src/components/common/SettingsButton.tsx
new file mode 100644
index 0000000000..2f63240c71
--- /dev/null
+++ b/webview-ui/src/components/common/SettingsButton.tsx
@@ -0,0 +1,36 @@
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import styled from "styled-components"
+
+const StyledButton = styled(VSCodeButton)`
+ --settings-button-bg: var(--vscode-button-secondaryBackground);
+ --settings-button-hover: var(--vscode-button-secondaryHoverBackground);
+ --settings-button-active: var(--vscode-button-secondaryBackground);
+
+ background-color: var(--settings-button-bg) !important;
+ border-color: var(--settings-button-bg) !important;
+ width: 100% !important;
+
+ &:hover {
+ background-color: var(--settings-button-hover) !important;
+ border-color: var(--settings-button-hover) !important;
+ }
+
+ &:active {
+ background-color: var(--settings-button-active) !important;
+ border-color: var(--settings-button-active) !important;
+ }
+
+ i.codicon {
+ margin-right: 6px;
+ flex-shrink: 0;
+ font-size: 16px !important;
+ }
+`
+
+interface SettingsButtonProps extends React.ComponentProps {}
+
+const SettingsButton: React.FC = (props) => {
+ return ([
// // Add some mock servers for testing
// {
@@ -100,7 +101,7 @@ const McpView = ({ onDone }: McpViewProps) => {
style={{
color: "var(--vscode-foreground)",
fontSize: "13px",
- marginBottom: "20px",
+ marginBottom: "16px",
marginTop: "5px",
}}>
The{" "}
@@ -118,7 +119,6 @@ const McpView = ({ onDone }: McpViewProps) => {
- {/* Server List */}
{servers.length > 0 && (
{
)}
- {/* Edit Settings Button */}
+ {/* Server Configuration Button */}
+
+ {
+ vscode.postMessage({
+ type: "openExtensionSettings",
+ text: "cline.mcp",
+ })
+ }}
+ style={{ fontSize: "12px" }}>
+ Advanced MCP Settings
+
+
+
{/* Bottom padding */}
+
@@ -439,7 +439,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
us-gov-west-1
{/* us-gov-east-1 */}
-
+
+
@@ -492,7 +492,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
europe-west4
asia-southeast1
-
+
-
+
@@ -660,7 +660,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
}}>
{t("experimentalFeature")}
-
+
+
@@ -809,7 +809,7 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
{selectedProvider === "openai-native" && createDropdown(openAiNativeModels)}
{selectedProvider === "deepseek" && createDropdown(deepSeekModels)}
{selectedProvider === "mistral" && createDropdown(mistralModels)}
-
+
+ vscode.postMessage({ type: "openExtensionSettings" })}
+ style={{
+ margin: "0 0 16px 0",
+ }}>
+
+ Advanced Settings
+
+