feat(app): copy link in connect provider dialog

packages/app/src/components/dialog-connect-provider.tsx

@@ -10,6 +10,7 @@ import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { showToast } from "@opencode-ai/ui/toast"
+import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { iife } from "@opencode-ai/util/iife"
 import { createMemo, Match, onCleanup, onMount, Switch } from "solid-js"
 import { createStore, produce } from "solid-js/store"
@@ -96,11 +97,27 @@ export function DialogConnectProvider(props: { provider: string }) {
   }
 
   let listRef: ListRef | undefined
+  async function copyAuthUrl() {
+    if (store.authorization?.url) {
+      await navigator.clipboard.writeText(store.authorization.url)
+      showToast({
+        variant: "success",
+        icon: "circle-check",
+        title: language.t("provider.connect.oauth.url.copied"),
+      })
+    }
+  }
+
   function handleKey(e: KeyboardEvent) {
     if (e.key === "Enter" && e.target instanceof HTMLInputElement) {
       return
     }
     if (e.key === "Escape") return
+    if (e.key === "c" && store.authorization?.url && !(e.target instanceof HTMLInputElement)) {
+      e.preventDefault()
+      copyAuthUrl()
+      return
+    }
     listRef?.onKeyDown(e)
   }
 
@@ -336,11 +353,28 @@ export function DialogConnectProvider(props: { provider: string }) {
                     return (
                       <div class="flex flex-col gap-6">
                         <div class="text-14-regular text-text-base">
-                          {language.t("provider.connect.oauth.code.visit.prefix")}
-                          <Link href={store.authorization!.url}>
-                            {language.t("provider.connect.oauth.code.visit.link")}
-                          </Link>
-                          {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
+                          {language.t("provider.connect.oauth.code.visit.description", { provider: provider().name })}
+                        </div>
+                        <div class="flex flex-col gap-2">
+                          <TooltipKeybind
+                            title={language.t("provider.connect.oauth.url.copy")}
+                            keybind="c"
+                            placement="top"
+                            gutter={8}
+                          >
+                            <TextField
+                              label={language.t("provider.connect.oauth.url.label")}
+                              class="font-mono text-xs"
+                              value={store.authorization!.url}
+                              readOnly
+                              copyable
+                            />
+                          </TooltipKeybind>
+                          <div class="text-14-regular text-text-base">
+                            <Link href={store.authorization!.url}>
+                              {language.t("provider.connect.oauth.url.open")}
+                            </Link>
+                          </div>
                         </div>
                         <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
                           <TextField
@@ -397,11 +431,28 @@ export function DialogConnectProvider(props: { provider: string }) {
                     return (
                       <div class="flex flex-col gap-6">
                         <div class="text-14-regular text-text-base">
-                          {language.t("provider.connect.oauth.auto.visit.prefix")}
-                          <Link href={store.authorization!.url}>
-                            {language.t("provider.connect.oauth.auto.visit.link")}
-                          </Link>
-                          {language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
+                          {language.t("provider.connect.oauth.auto.visit.description", { provider: provider().name })}
+                        </div>
+                        <div class="flex flex-col gap-2">
+                          <TooltipKeybind
+                            title={language.t("provider.connect.oauth.url.copy")}
+                            keybind="c"
+                            placement="top"
+                            gutter={8}
+                          >
+                            <TextField
+                              label={language.t("provider.connect.oauth.url.label")}
+                              class="font-mono text-xs"
+                              value={store.authorization!.url}
+                              readOnly
+                              copyable
+                            />
+                          </TooltipKeybind>
+                          <div class="text-14-regular text-text-base">
+                            <Link href={store.authorization!.url}>
+                              {language.t("provider.connect.oauth.url.open")}
+                            </Link>
+                          </div>
                         </div>
                         <TextField
                           label={language.t("provider.connect.oauth.auto.confirmationCode")}

packages/app/src/i18n/ar.ts

@@ -121,18 +121,18 @@ export const dict = {
   "provider.connect.opencodeZen.visit.prefix": "قم بزيارة ",
   "provider.connect.opencodeZen.visit.link": "opencode.ai/zen",
   "provider.connect.opencodeZen.visit.suffix": " للحصول على مفتاح API الخاص بك.",
-  "provider.connect.oauth.code.visit.prefix": "قم بزيارة ",
-  "provider.connect.oauth.code.visit.link": "هذا الرابط",
-  "provider.connect.oauth.code.visit.suffix":
-    " للحصول على رمز التفويض الخاص بك لتوصيل حسابك واستخدام نماذج {{provider}} في OpenCode.",
+  "provider.connect.oauth.code.visit.description":
+    "انسخ الرابط أدناه وقم بزيارته للحصول على رمز التفويض واستخدام نماذج {{provider}} في OpenCode.",
+  "provider.connect.oauth.url.label": "رابط التفويض",
+  "provider.connect.oauth.url.open": "فتح في المتصفح",
+  "provider.connect.oauth.url.copied": "تم نسخ الرابط إلى الحافظة",
+  "provider.connect.oauth.url.copy": "نسخ الرابط",
   "provider.connect.oauth.code.label": "رمز تفويض {{method}}",
   "provider.connect.oauth.code.placeholder": "رمز التفويض",
   "provider.connect.oauth.code.required": "رمز التفويض مطلوب",
   "provider.connect.oauth.code.invalid": "رمز التفويض غير صالح",
-  "provider.connect.oauth.auto.visit.prefix": "قم بزيارة ",
-  "provider.connect.oauth.auto.visit.link": "هذا الرابط",
-  "provider.connect.oauth.auto.visit.suffix":
-    " وأدخل الرمز أدناه لتوصيل حسابك واستخدام نماذج {{provider}} في OpenCode.",
+  "provider.connect.oauth.auto.visit.description":
+    "انسخ الرابط أدناه وقم بزيارته، ثم أدخل الرمز لاستخدام نماذج {{provider}} في OpenCode.",
   "provider.connect.oauth.auto.confirmationCode": "رمز التأكيد",
   "provider.connect.toast.connected.title": "تم توصيل {{provider}}",
   "provider.connect.toast.connected.description": "نماذج {{provider}} متاحة الآن للاستخدام.",

packages/app/src/i18n/br.ts

@@ -121,18 +121,18 @@ export const dict = {
   "provider.connect.opencodeZen.visit.prefix": "Visite ",
   "provider.connect.opencodeZen.visit.link": "opencode.ai/zen",
   "provider.connect.opencodeZen.visit.suffix": " para obter sua chave de API.",
-  "provider.connect.oauth.code.visit.prefix": "Visite ",
-  "provider.connect.oauth.code.visit.link": "este link",
-  "provider.connect.oauth.code.visit.suffix":
-    " para obter seu código de autorização e conectar sua conta para usar modelos do {{provider}} no OpenCode.",
+  "provider.connect.oauth.code.visit.description":
+    "Copie e visite o link abaixo para obter seu código de autorização e usar modelos do {{provider}} no OpenCode.",
+  "provider.connect.oauth.url.label": "URL de autorização",
+  "provider.connect.oauth.url.open": "Abrir no navegador",
+  "provider.connect.oauth.url.copied": "URL copiada para a área de transferência",
+  "provider.connect.oauth.url.copy": "Copiar URL",
   "provider.connect.oauth.code.label": "Código de autorização {{method}}",
   "provider.connect.oauth.code.placeholder": "Código de autorização",
   "provider.connect.oauth.code.required": "O código de autorização é obrigatório",
   "provider.connect.oauth.code.invalid": "Código de autorização inválido",
-  "provider.connect.oauth.auto.visit.prefix": "Visite ",
-  "provider.connect.oauth.auto.visit.link": "este link",
-  "provider.connect.oauth.auto.visit.suffix":
-    " e digite o código abaixo para conectar sua conta e usar modelos do {{provider}} no OpenCode.",
+  "provider.connect.oauth.auto.visit.description":
+    "Copie e visite o link abaixo, depois digite o código para usar modelos do {{provider}} no OpenCode.",
   "provider.connect.oauth.auto.confirmationCode": "Código de confirmação",
   "provider.connect.toast.connected.title": "{{provider}} conectado",
   "provider.connect.toast.connected.description": "Modelos do {{provider}} agora estão disponíveis para uso.",

packages/app/src/i18n/da.ts

@@ -118,18 +118,18 @@ export const dict = {
     "Med en enkelt API-nøgle får du adgang til modeller som Claude, GPT, Gemini, GLM og flere.",
   "provider.connect.opencodeZen.visit.prefix": "Besøg ",
   "provider.connect.opencodeZen.visit.suffix": " for at hente din API-nøgle.",
-  "provider.connect.oauth.code.visit.prefix": "Besøg ",
-  "provider.connect.oauth.code.visit.link": "dette link",
-  "provider.connect.oauth.code.visit.suffix":
-    " for at hente din godkendelseskode for at forbinde din konto og bruge {{provider}} modeller i OpenCode.",
+  "provider.connect.oauth.code.visit.description":
+    "Kopier og besøg linket nedenfor for at hente din godkendelseskode og bruge {{provider}} modeller i OpenCode.",
+  "provider.connect.oauth.url.label": "Godkendelses-URL",
+  "provider.connect.oauth.url.open": "Åbn i browser",
+  "provider.connect.oauth.url.copied": "URL kopieret til udklipsholder",
+  "provider.connect.oauth.url.copy": "Kopier URL",
   "provider.connect.oauth.code.label": "{{method}} godkendelseskode",
   "provider.connect.oauth.code.placeholder": "Godkendelseskode",
   "provider.connect.oauth.code.required": "Godkendelseskode er påkrævet",
   "provider.connect.oauth.code.invalid": "Ugyldig godkendelseskode",
-  "provider.connect.oauth.auto.visit.prefix": "Besøg ",
-  "provider.connect.oauth.auto.visit.link": "dette link",
-  "provider.connect.oauth.auto.visit.suffix":
-    " og indtast koden nedenfor for at forbinde din konto og bruge {{provider}} modeller i OpenCode.",
+  "provider.connect.oauth.auto.visit.description":
+    "Kopier og besøg linket nedenfor, derefter indtast koden for at bruge {{provider}} modeller i OpenCode.",
   "provider.connect.oauth.auto.confirmationCode": "Bekræftelseskode",
   "provider.connect.toast.connected.title": "{{provider}} forbundet",
   "provider.connect.toast.connected.description": "{{provider}} modeller er nu tilgængelige.",

packages/app/src/i18n/de.ts

@@ -122,18 +122,18 @@ export const dict = {
     "Mit einem einzigen API-Schlüssel erhalten Sie Zugriff auf Modelle wie Claude, GPT, Gemini, GLM und mehr.",
   "provider.connect.opencodeZen.visit.prefix": "Besuchen Sie ",
   "provider.connect.opencodeZen.visit.suffix": ", um Ihren API-Schlüssel zu erhalten.",
-  "provider.connect.oauth.code.visit.prefix": "Besuchen Sie ",
-  "provider.connect.oauth.code.visit.link": "diesen Link",
-  "provider.connect.oauth.code.visit.suffix":
-    ", um Ihren Autorisierungscode zu erhalten, Ihr Konto zu verbinden und {{provider}} Modelle in OpenCode zu nutzen.",
+  "provider.connect.oauth.code.visit.description":
+    "Kopieren und besuchen Sie den untenstehenden Link, um Ihren Autorisierungscode zu erhalten und {{provider}} Modelle in OpenCode zu nutzen.",
+  "provider.connect.oauth.url.label": "Autorisierungs-URL",
+  "provider.connect.oauth.url.open": "Im Browser öffnen",
+  "provider.connect.oauth.url.copied": "URL in Zwischenablage kopiert",
+  "provider.connect.oauth.url.copy": "URL kopieren",
   "provider.connect.oauth.code.label": "{{method}} Autorisierungscode",
   "provider.connect.oauth.code.placeholder": "Autorisierungscode",
   "provider.connect.oauth.code.required": "Autorisierungscode ist erforderlich",
   "provider.connect.oauth.code.invalid": "Ungültiger Autorisierungscode",
-  "provider.connect.oauth.auto.visit.prefix": "Besuchen Sie ",
-  "provider.connect.oauth.auto.visit.link": "diesen Link",
-  "provider.connect.oauth.auto.visit.suffix":
-    " und geben Sie den untenstehenden Code ein, um Ihr Konto zu verbinden und {{provider}} Modelle in OpenCode zu nutzen.",
+  "provider.connect.oauth.auto.visit.description":
+    "Kopieren und besuchen Sie den untenstehenden Link, dann geben Sie den Code ein, um {{provider}} Modelle in OpenCode zu nutzen.",
   "provider.connect.oauth.auto.confirmationCode": "Bestätigungscode",
   "provider.connect.toast.connected.title": "{{provider}} verbunden",
   "provider.connect.toast.connected.description": "{{provider}} Modelle sind jetzt verfügbar.",

packages/app/src/i18n/en.ts

@@ -121,19 +121,19 @@ export const dict = {
   "provider.connect.opencodeZen.visit.prefix": "Visit ",
   "provider.connect.opencodeZen.visit.link": "opencode.ai/zen",
   "provider.connect.opencodeZen.visit.suffix": " to collect your API key.",
-  "provider.connect.oauth.code.visit.prefix": "Visit ",
-  "provider.connect.oauth.code.visit.link": "this link",
-  "provider.connect.oauth.code.visit.suffix":
-    " to collect your authorization code to connect your account and use {{provider}} models in OpenCode.",
+  "provider.connect.oauth.code.visit.description":
+    "Copy and visit the link below to collect your authorization code to connect your account and use {{provider}} models in OpenCode.",
   "provider.connect.oauth.code.label": "{{method}} authorization code",
   "provider.connect.oauth.code.placeholder": "Authorization code",
   "provider.connect.oauth.code.required": "Authorization code is required",
   "provider.connect.oauth.code.invalid": "Invalid authorization code",
-  "provider.connect.oauth.auto.visit.prefix": "Visit ",
-  "provider.connect.oauth.auto.visit.link": "this link",
-  "provider.connect.oauth.auto.visit.suffix":
-    " and enter the code below to connect your account and use {{provider}} models in OpenCode.",
+  "provider.connect.oauth.auto.visit.description":
+    "Copy and visit the link below, then enter the code to connect your account and use {{provider}} models in OpenCode.",
   "provider.connect.oauth.auto.confirmationCode": "Confirmation code",
+  "provider.connect.oauth.url.label": "Authorization URL",
+  "provider.connect.oauth.url.open": "Open in browser",
+  "provider.connect.oauth.url.copied": "URL copied to clipboard",
+  "provider.connect.oauth.url.copy": "Copy URL",
   "provider.connect.toast.connected.title": "{{provider}} connected",
   "provider.connect.toast.connected.description": "{{provider}} models are now available to use.",
 

packages/app/src/i18n/es.ts

@@ -118,18 +118,18 @@ export const dict = {
     "Con una sola clave API obtendrás acceso a modelos como Claude, GPT, Gemini, GLM y más.",
   "provider.connect.opencodeZen.visit.prefix": "Visita ",
   "provider.connect.opencodeZen.visit.suffix": " para obtener tu clave API.",
-  "provider.connect.oauth.code.visit.prefix": "Visita ",
-  "provider.connect.oauth.code.visit.link": "este enlace",
-  "provider.connect.oauth.code.visit.suffix":
-    " para obtener tu código de autorización para conectar tu cuenta y usar modelos de {{provider}} en OpenCode.",
+  "provider.connect.oauth.code.visit.description":
+    "Copia y visita el enlace a continuación para obtener tu código de autorización y usar modelos de {{provider}} en OpenCode.",
+  "provider.connect.oauth.url.label": "URL de autorización",
+  "provider.connect.oauth.url.open": "Abrir en el navegador",
+  "provider.connect.oauth.url.copied": "URL copiada al portapapeles",
+  "provider.connect.oauth.url.copy": "Copiar URL",
   "provider.connect.oauth.code.label": "Código de autorización {{method}}",
   "provider.connect.oauth.code.placeholder": "Código de autorización",
   "provider.connect.oauth.code.required": "El código de autorización es obligatorio",
   "provider.connect.oauth.code.invalid": "Código de autorización inválido",
-  "provider.connect.oauth.auto.visit.prefix": "Visita ",
-  "provider.connect.oauth.auto.visit.link": "este enlace",
-  "provider.connect.oauth.auto.visit.suffix":
-    " e introduce el código a continuación para conectar tu cuenta y usar modelos de {{provider}} en OpenCode.",
+  "provider.connect.oauth.auto.visit.description":
+    "Copia y visita el enlace a continuación, luego introduce el código para usar modelos de {{provider}} en OpenCode.",
   "provider.connect.oauth.auto.confirmationCode": "Código de confirmación",
   "provider.connect.toast.connected.title": "{{provider}} conectado",
   "provider.connect.toast.connected.description": "Los modelos de {{provider}} ahora están disponibles para usar.",

packages/app/src/i18n/fr.ts

@@ -118,18 +118,18 @@ export const dict = {
     "Avec une seule clé API, vous aurez accès à des modèles tels que Claude, GPT, Gemini, GLM et plus encore.",
   "provider.connect.opencodeZen.visit.prefix": "Visitez ",
   "provider.connect.opencodeZen.visit.suffix": " pour récupérer votre clé API.",
-  "provider.connect.oauth.code.visit.prefix": "Visitez ",
-  "provider.connect.oauth.code.visit.link": "ce lien",
-  "provider.connect.oauth.code.visit.suffix":
-    " pour récupérer votre code d'autorisation afin de connecter votre compte et utiliser les modèles {{provider}} dans OpenCode.",
+  "provider.connect.oauth.code.visit.description":
+    "Copiez et visitez le lien ci-dessous pour récupérer votre code d'autorisation et utiliser les modèles {{provider}} dans OpenCode.",
+  "provider.connect.oauth.url.label": "URL d'autorisation",
+  "provider.connect.oauth.url.open": "Ouvrir dans le navigateur",
+  "provider.connect.oauth.url.copied": "URL copiée dans le presse-papiers",
+  "provider.connect.oauth.url.copy": "Copier l'URL",
   "provider.connect.oauth.code.label": "Code d'autorisation {{method}}",
   "provider.connect.oauth.code.placeholder": "Code d'autorisation",
   "provider.connect.oauth.code.required": "Le code d'autorisation est requis",
   "provider.connect.oauth.code.invalid": "Code d'autorisation invalide",
-  "provider.connect.oauth.auto.visit.prefix": "Visitez ",
-  "provider.connect.oauth.auto.visit.link": "ce lien",
-  "provider.connect.oauth.auto.visit.suffix":
-    " et entrez le code ci-dessous pour connecter votre compte et utiliser les modèles {{provider}} dans OpenCode.",
+  "provider.connect.oauth.auto.visit.description":
+    "Copiez et visitez le lien ci-dessous, puis entrez le code pour utiliser les modèles {{provider}} dans OpenCode.",
   "provider.connect.oauth.auto.confirmationCode": "Code de confirmation",
   "provider.connect.toast.connected.title": "{{provider}} connecté",
   "provider.connect.toast.connected.description": "Les modèles {{provider}} sont maintenant disponibles.",