+
{[...(server.resourceTemplates || []), ...(server.resources || [])].map((item) => (
{
))}
) : (
-
+
No resources found
)}
@@ -280,7 +308,10 @@ const ServerRow = ({ server }: { server: McpServer }) => {
appearance="secondary"
onClick={handleRestart}
disabled={server.status === "connecting"}
- style={{ width: "calc(100% - 14px)", margin: "0 7px 3px 7px" }}>
+ style={{
+ width: "calc(100% - 14px)",
+ margin: "0 7px 3px 7px",
+ }}>
{server.status === "connecting" ? "Restarting..." : "Restart Server"}
diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx
index 330b95b729..fa00598a8e 100644
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -50,7 +50,10 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }:
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => {
- setApiConfiguration({ ...apiConfiguration, [field]: event.target.value })
+ setApiConfiguration({
+ ...apiConfiguration,
+ [field]: event.target.value,
+ })
}
const { selectedProvider, selectedModelId, selectedModelInfo } = useMemo(() => {
@@ -60,9 +63,15 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }:
// Poll ollama/lmstudio models
const requestLocalModels = useCallback(() => {
if (selectedProvider === "ollama") {
- vscode.postMessage({ type: "requestOllamaModels", text: apiConfiguration?.ollamaBaseUrl })
+ vscode.postMessage({
+ type: "requestOllamaModels",
+ text: apiConfiguration?.ollamaBaseUrl,
+ })
} else if (selectedProvider === "lmstudio") {
- vscode.postMessage({ type: "requestLmStudioModels", text: apiConfiguration?.lmStudioBaseUrl })
+ vscode.postMessage({
+ type: "requestLmStudioModels",
+ text: apiConfiguration?.lmStudioBaseUrl,
+ })
}
}, [selectedProvider, apiConfiguration?.ollamaBaseUrl, apiConfiguration?.lmStudioBaseUrl])
useEffect(() => {
@@ -124,7 +133,11 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }:
id="api-provider"
value={selectedProvider}
onChange={handleInputChange("apiProvider")}
- style={{ minWidth: 130, position: "relative", zIndex: OPENROUTER_MODEL_PICKER_Z_INDEX + 1 }}>
+ style={{
+ minWidth: 130,
+ position: "relative",
+ zIndex: OPENROUTER_MODEL_PICKER_Z_INDEX + 1,
+ }}>
OpenRouter
Anthropic
Google Gemini
@@ -155,7 +168,10 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }:
const isChecked = e.target.checked === true
setAnthropicBaseUrlSelected(isChecked)
if (!isChecked) {
- setApiConfiguration({ ...apiConfiguration, anthropicBaseUrl: "" })
+ setApiConfiguration({
+ ...apiConfiguration,
+ anthropicBaseUrl: "",
+ })
}
}}>
Use custom base URL
@@ -181,7 +197,10 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }:
{!apiConfiguration?.apiKey && (
+ style={{
+ display: "inline",
+ fontSize: "inherit",
+ }}>
You can get an Anthropic API key by signing up here.
)}
@@ -209,7 +228,10 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }:
{!apiConfiguration?.openAiNativeApiKey && (
+ style={{
+ display: "inline",
+ fontSize: "inherit",
+ }}>
You can get an OpenAI API key by signing up here.
)}
@@ -235,7 +257,12 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }:
}}>
This key is stored locally and only used to make API requests from this extension.
{!apiConfiguration?.deepSeekApiKey && (
-
+
You can get a DeepSeek API key by signing up here.
)}
@@ -279,7 +306,12 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }:
)}
{selectedProvider === "bedrock" && (
-
+
{
const isChecked = e.target.checked === true
- setApiConfiguration({ ...apiConfiguration, awsUseCrossRegionInference: isChecked })
+ setApiConfiguration({
+ ...apiConfiguration,
+ awsUseCrossRegionInference: isChecked,
+ })
}}>
Use cross-region inference
@@ -363,7 +398,12 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }:
)}
{apiConfiguration?.apiProvider === "vertex" && (
-
+
This key is stored locally and only used to make API requests from this extension.
{!apiConfiguration?.geminiApiKey && (
-
+
You can get a Gemini API key by signing up here.
)}
@@ -466,7 +511,10 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage }:
const isChecked = e.target.checked === true
setAzureApiVersionSelected(isChecked)
if (!isChecked) {
- setApiConfiguration({ ...apiConfiguration, azureApiVersion: "" })
+ setApiConfiguration({
+ ...apiConfiguration,
+ azureApiVersion: "",
+ })
}
}}>
Set Azure API version
@@ -768,7 +816,12 @@ export const ModelInfoView = ({
].filter(Boolean)
return (
-
+
{infoItems.map((item, index) => (
{item}
@@ -821,7 +874,11 @@ export function normalizeApiConfiguration(apiConfiguration?: ApiConfiguration) {
selectedModelId = defaultId
selectedModelInfo = models[defaultId]
}
- return { selectedProvider: provider, selectedModelId, selectedModelInfo }
+ return {
+ selectedProvider: provider,
+ selectedModelId,
+ selectedModelInfo,
+ }
}
switch (provider) {
case "anthropic":
diff --git a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
index fc588281ab..cdace4472b 100644
--- a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
+++ b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
@@ -153,7 +153,11 @@ const OpenRouterModelPicker: React.FC = () => {
}}
onFocus={() => setIsDropdownVisible(true)}
onKeyDown={handleKeyDown}
- style={{ width: "100%", zIndex: OPENROUTER_MODEL_PICKER_Z_INDEX, position: "relative" }}>
+ style={{
+ width: "100%",
+ zIndex: OPENROUTER_MODEL_PICKER_Z_INDEX,
+ position: "relative",
+ }}>
{searchTerm && (
{
setModelIdErrorMessage(modelIdValidationResult)
if (!apiValidationResult && !modelIdValidationResult) {
vscode.postMessage({ type: "apiConfiguration", apiConfiguration })
- vscode.postMessage({ type: "customInstructions", text: customInstructions })
+ vscode.postMessage({
+ type: "customInstructions",
+ text: customInstructions,
+ })
onDone()
}
}
@@ -73,7 +76,14 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
Settings
Done
-
+
{
marginTop: "auto",
padding: "10px 8px 15px 0px",
}}>
-
+
If you have any questions or feedback, feel free to open an issue at{" "}
https://github.com/cline/cline
- v{version}
+
+ v{version}
+
+
Hi, I'm Cline
I can do all kinds of tasks thanks to the latest breakthroughs in{" "}
diff --git a/webview-ui/src/context/ExtensionStateContext.tsx b/webview-ui/src/context/ExtensionStateContext.tsx
index 37c1aa4a37..c6bbd04a86 100644
--- a/webview-ui/src/context/ExtensionStateContext.tsx
+++ b/webview-ui/src/context/ExtensionStateContext.tsx
@@ -22,7 +22,9 @@ interface ExtensionStateContextType extends ExtensionState {
const ExtensionStateContext = createContext(undefined)
-export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const ExtensionStateContextProvider: React.FC<{
+ children: React.ReactNode
+}> = ({ children }) => {
const [state, setState] = useState({
version: "",
clineMessages: [],
@@ -116,9 +118,21 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
openRouterModels,
mcpServers,
filePaths,
- setApiConfiguration: (value) => setState((prevState) => ({ ...prevState, apiConfiguration: value })),
- setCustomInstructions: (value) => setState((prevState) => ({ ...prevState, customInstructions: value })),
- setShowAnnouncement: (value) => setState((prevState) => ({ ...prevState, shouldShowAnnouncement: value })),
+ setApiConfiguration: (value) =>
+ setState((prevState) => ({
+ ...prevState,
+ apiConfiguration: value,
+ })),
+ setCustomInstructions: (value) =>
+ setState((prevState) => ({
+ ...prevState,
+ customInstructions: value,
+ })),
+ setShowAnnouncement: (value) =>
+ setState((prevState) => ({
+ ...prevState,
+ shouldShowAnnouncement: value,
+ })),
}
return {children}
diff --git a/webview-ui/src/utils/context-mentions.ts b/webview-ui/src/utils/context-mentions.ts
index 0f5049cf24..07b5ce5e75 100644
--- a/webview-ui/src/utils/context-mentions.ts
+++ b/webview-ui/src/utils/context-mentions.ts
@@ -64,14 +64,20 @@ export function getContextMenuOptions(
if (selectedType === ContextMenuOptionType.File) {
const files = queryItems
.filter((item) => item.type === ContextMenuOptionType.File)
- .map((item) => ({ type: ContextMenuOptionType.File, value: item.value }))
+ .map((item) => ({
+ type: ContextMenuOptionType.File,
+ value: item.value,
+ }))
return files.length > 0 ? files : [{ type: ContextMenuOptionType.NoResults }]
}
if (selectedType === ContextMenuOptionType.Folder) {
const folders = queryItems
.filter((item) => item.type === ContextMenuOptionType.Folder)
- .map((item) => ({ type: ContextMenuOptionType.Folder, value: item.value }))
+ .map((item) => ({
+ type: ContextMenuOptionType.Folder,
+ value: item.value,
+ }))
return folders.length > 0 ? folders : [{ type: ContextMenuOptionType.NoResults }]
}
diff --git a/webview-ui/src/utils/size.ts b/webview-ui/src/utils/size.ts
new file mode 100644
index 0000000000..e6b2bd3fe0
--- /dev/null
+++ b/webview-ui/src/utils/size.ts
@@ -0,0 +1,9 @@
+import prettyBytes from "pretty-bytes"
+
+export function formatSize(bytes?: number) {
+ if (bytes === undefined) {
+ return "--kb"
+ }
+
+ return prettyBytes(bytes)
+}