Fix Cloudflare provider connect prompts in VS Code

packages/kilo-vscode/src/KiloProvider.ts

@@ -1731,6 +1731,7 @@ export class KiloProvider implements vscode.WebviewViewProvider, TelemetryProper
       this.getWorkspaceDirectory(),
       () => this.fetchAndSendProviders(),
     )
+    const set = (m: unknown) => (this.cachedConfigMessage = m)
     const set = (m: unknown) => {
       this.cachedConfigMessage = m
       if (m && typeof m === "object" && "globalConfig" in m)
@@ -1742,7 +1743,7 @@ export class KiloProvider implements vscode.WebviewViewProvider, TelemetryProper
     const code = typeof msg.code === "string" ? msg.code : undefined
     const config = msg.config && typeof msg.config === "object" ? (msg.config as Record<string, unknown>) : undefined
     const metadata =
-      msg.metadata && typeof msg.metadata === "object" ? (msg.metadata as Record<string, unknown>) : undefined
+      msg.metadata && typeof msg.metadata === "object" ? (msg.metadata as Record<string, string>) : undefined
     if (msg.type === "connectProvider" && key) return connectProviderAction(ctx, rid, pid, key, metadata)
     if (msg.type === "authorizeProviderOAuth") return authorizeOAuthAction(ctx, rid, pid, method)
     if (msg.type === "completeProviderOAuth") return completeOAuthAction(ctx, rid, pid, method, code)

packages/kilo-vscode/src/provider-actions.ts

@@ -258,14 +258,15 @@ export async function connectProvider(
   requestId: string,
   providerID: string,
   apiKey: string,
-  metadata?: Record<string, unknown>,
+  metadata?: Record<string, string>,
 ) {
   const id = validateID(ctx, requestId, providerID, "connect")
   if (!id) return
   try {
-    const meta = cleanMetadata(metadata)
-    const auth = meta ? { type: "api" as const, key: apiKey, metadata: meta } : { type: "api" as const, key: apiKey }
-    await ctx.client.auth.set({ providerID: id, auth }, { throwOnError: true })
+    await ctx.client.auth.set(
+      { providerID: id, auth: { type: "api", key: apiKey, metadata } },
+      { throwOnError: true },
+    )
     await ctx.disposeGlobal(`provider connect (${id})`)
     await ctx.fetchAndSendProviders()
     ctx.postMessage({ type: "providerConnected", requestId, providerID: id })

packages/kilo-vscode/webview-ui/src/components/settings/ProviderConnectDialog.tsx

@@ -316,8 +316,20 @@ const ProviderConnectDialog: Component<ProviderConnectDialogProps> = (props) =>
         <div class="provider-connect-body">
           {language.t("provider.connect.apiKey.description", { provider: name() })}
         </div>
+        <For each={prompts()}>
+          {(prompt) => (
+            <TextField
+              autofocus={prompts().indexOf(prompt) === 0 && !value()}
+              type="text"
+              label={prompt.message}
+              placeholder={prompt.type === "text" ? prompt.placeholder : undefined}
+              value={promptValues[prompt.key] ?? ""}
+              onChange={(v) => setPromptValues(prompt.key, v)}
+            />
+          )}
+        </For>
         <TextField
-          autofocus
+          autofocus={prompts().length === 0}
           type="password"
           label={language.t("provider.connect.apiKey.label", { provider: name() })}
           placeholder={language.t("provider.connect.apiKey.placeholder")}