refactor(app): extract provider connect auth views

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

@@ -0,0 +1,156 @@
+import type { ProviderAuthAuthorization, ProviderAuthMethod } from "@opencode-ai/sdk/v2/client"
+import { Button } from "@opencode-ai/ui/button"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Match, Switch } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Link } from "@/components/link"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useLanguage } from "@/context/language"
+import { formatProviderConnectError } from "./dialog-connect-provider-error"
+
+type ProviderConnectInfo = {
+  id: string
+  name: string
+}
+
+export function ProviderApiAuthView(props: { provider: () => ProviderConnectInfo; onComplete: () => Promise<void> }) {
+  const globalSDK = useGlobalSDK()
+  const language = useLanguage()
+  const [formStore, setFormStore] = createStore({
+    value: "",
+    error: undefined as string | undefined,
+  })
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+
+    const form = e.currentTarget as HTMLFormElement
+    const formData = new FormData(form)
+    const apiKey = formData.get("apiKey") as string
+
+    if (!apiKey?.trim()) {
+      setFormStore("error", language.t("provider.connect.apiKey.required"))
+      return
+    }
+
+    setFormStore("error", undefined)
+    await globalSDK.client.auth.set({
+      providerID: props.provider().id,
+      auth: {
+        type: "api",
+        key: apiKey,
+      },
+    })
+    await props.onComplete()
+  }
+
+  return (
+    <div class="flex flex-col gap-6">
+      <Switch>
+        <Match when={props.provider().id === "opencode"}>
+          <div class="flex flex-col gap-4">
+            <div class="text-body text-fg-base">{language.t("provider.connect.opencodeZen.line1")}</div>
+            <div class="text-body text-fg-base">{language.t("provider.connect.opencodeZen.line2")}</div>
+            <div class="text-body text-fg-base">
+              {language.t("provider.connect.opencodeZen.visit.prefix")}
+              <Link href="https://opencode.ai/zen" tabIndex={-1}>
+                {language.t("provider.connect.opencodeZen.visit.link")}
+              </Link>
+              {language.t("provider.connect.opencodeZen.visit.suffix")}
+            </div>
+          </div>
+        </Match>
+        <Match when={true}>
+          <div class="text-body text-fg-base">
+            {language.t("provider.connect.apiKey.description", { provider: props.provider().name })}
+          </div>
+        </Match>
+      </Switch>
+      <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+        <TextField
+          autofocus
+          type="text"
+          label={language.t("provider.connect.apiKey.label", { provider: props.provider().name })}
+          placeholder={language.t("provider.connect.apiKey.placeholder")}
+          name="apiKey"
+          value={formStore.value}
+          onChange={(v) => setFormStore("value", v)}
+          validationState={formStore.error ? "invalid" : undefined}
+          error={formStore.error}
+        />
+        <Button class="w-auto" type="submit" variant="primary">
+          {language.t("common.continue")}
+        </Button>
+      </form>
+    </div>
+  )
+}
+
+export function ProviderOAuthCodeView(props: {
+  provider: () => ProviderConnectInfo
+  authorization: () => ProviderAuthAuthorization | undefined
+  method: () => ProviderAuthMethod | undefined
+  methodIndex: () => number | undefined
+  onComplete: () => Promise<void>
+}) {
+  const globalSDK = useGlobalSDK()
+  const language = useLanguage()
+  const [formStore, setFormStore] = createStore({
+    value: "",
+    error: undefined as string | undefined,
+  })
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+
+    const form = e.currentTarget as HTMLFormElement
+    const formData = new FormData(form)
+    const code = formData.get("code") as string
+
+    if (!code?.trim()) {
+      setFormStore("error", language.t("provider.connect.oauth.code.required"))
+      return
+    }
+
+    setFormStore("error", undefined)
+    const result = await globalSDK.client.provider.oauth
+      .callback({
+        providerID: props.provider().id,
+        method: props.methodIndex(),
+        code,
+      })
+      .then((value) => (value.error ? { ok: false as const, error: value.error } : { ok: true as const }))
+      .catch((error) => ({ ok: false as const, error }))
+    if (result.ok) {
+      await props.onComplete()
+      return
+    }
+    setFormStore("error", formatProviderConnectError(result.error, language.t("provider.connect.oauth.code.invalid")))
+  }
+
+  return (
+    <div class="flex flex-col gap-6">
+      <div class="text-body text-fg-base">
+        {language.t("provider.connect.oauth.code.visit.prefix")}
+        <Link href={props.authorization()!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
+        {language.t("provider.connect.oauth.code.visit.suffix", { provider: props.provider().name })}
+      </div>
+      <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+        <TextField
+          autofocus
+          type="text"
+          label={language.t("provider.connect.oauth.code.label", { method: props.method()?.label ?? "" })}
+          placeholder={language.t("provider.connect.oauth.code.placeholder")}
+          name="code"
+          value={formStore.value}
+          onChange={(v) => setFormStore("value", v)}
+          validationState={formStore.error ? "invalid" : undefined}
+          error={formStore.error}
+        />
+        <Button class="w-auto" type="submit" variant="primary">
+          {language.t("common.continue")}
+        </Button>
+      </form>
+    </div>
+  )
+}

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

@@ -0,0 +1,75 @@
+import type { ProviderAuthAuthorization } from "@opencode-ai/sdk/v2/client"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { createMemo, onMount } from "solid-js"
+import { Link } from "@/components/link"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useLanguage } from "@/context/language"
+import { formatProviderConnectError } from "./dialog-connect-provider-error"
+
+type ProviderConnectInfo = {
+  id: string
+  name: string
+}
+
+export function ProviderOAuthAutoView(props: {
+  provider: () => ProviderConnectInfo
+  authorization: () => ProviderAuthAuthorization | undefined
+  methodIndex: () => number | undefined
+  alive: () => boolean
+  onComplete: () => Promise<void>
+  onError: (error: string) => void
+}) {
+  const globalSDK = useGlobalSDK()
+  const language = useLanguage()
+  const code = createMemo(() => {
+    const instructions = props.authorization()?.instructions
+    if (instructions?.includes(":")) {
+      return instructions.split(":")[1]?.trim()
+    }
+    return instructions
+  })
+
+  onMount(() => {
+    void (async () => {
+      const result = await globalSDK.client.provider.oauth
+        .callback({
+          providerID: props.provider().id,
+          method: props.methodIndex(),
+        })
+        .then((value) => (value.error ? { ok: false as const, error: value.error } : { ok: true as const }))
+        .catch((error) => ({ ok: false as const, error }))
+
+      if (!props.alive()) return
+
+      if (!result.ok) {
+        const message = formatProviderConnectError(result.error, language.t("common.requestFailed"))
+        props.onError(message)
+        return
+      }
+
+      await props.onComplete()
+    })()
+  })
+
+  return (
+    <div class="flex flex-col gap-6">
+      <div class="text-body text-fg-base">
+        {language.t("provider.connect.oauth.auto.visit.prefix")}
+        <Link href={props.authorization()!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
+        {language.t("provider.connect.oauth.auto.visit.suffix", { provider: props.provider().name })}
+      </div>
+      <TextField
+        label={language.t("provider.connect.oauth.auto.confirmationCode")}
+        class="font-mono"
+        value={code()}
+        readOnly
+        copyable
+      />
+      <div class="text-body text-fg-base flex items-center gap-4">
+        <Spinner />
+        <span>{language.t("provider.connect.status.waiting")}</span>
+      </div>
+    </div>
+  )
+}

packages/app/src/components/dialog-connect-provider-error.ts

@@ -0,0 +1,17 @@
+export function formatProviderConnectError(value: unknown, fallback: string): string {
+  if (value && typeof value === "object" && "data" in value) {
+    const data = (value as { data?: { message?: unknown } }).data
+    if (typeof data?.message === "string" && data.message) return data.message
+  }
+  if (value && typeof value === "object" && "error" in value) {
+    const nested = formatProviderConnectError((value as { error?: unknown }).error, "")
+    if (nested) return nested
+  }
+  if (value && typeof value === "object" && "message" in value) {
+    const message = (value as { message?: unknown }).message
+    if (typeof message === "string" && message) return message
+  }
+  if (value instanceof Error && value.message) return value.message
+  if (typeof value === "string" && value) return value
+  return fallback
+}

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

@@ -0,0 +1,133 @@
+import type { ProviderAuthMethod } from "@opencode-ai/sdk/v2/client"
+import { Button } from "@opencode-ai/ui/button"
+import { List } from "@opencode-ai/ui/list"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { createMemo, Match, Switch } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLanguage } from "@/context/language"
+
+export function ProviderOAuthPromptsView(props: {
+  method: () => ProviderAuthMethod | undefined
+  methodIndex: () => number | undefined
+  onSubmit: (index: number, inputs?: Record<string, string>) => Promise<void>
+}) {
+  const language = useLanguage()
+  const [formStore, setFormStore] = createStore({
+    value: {} as Record<string, string>,
+    index: 0,
+  })
+
+  const prompts = createMemo<NonNullable<ProviderAuthMethod["prompts"]>>(() => {
+    const value = props.method()
+    if (value?.type !== "oauth") return []
+    return value.prompts ?? []
+  })
+  const matches = (prompt: NonNullable<ReturnType<typeof prompts>[number]>, value: Record<string, string>) => {
+    if (!prompt.when) return true
+    const actual = value[prompt.when.key]
+    if (actual === undefined) return false
+    return prompt.when.op === "eq" ? actual === prompt.when.value : actual !== prompt.when.value
+  }
+  const current = createMemo(() => {
+    const all = prompts()
+    const index = all.findIndex((prompt, index) => index >= formStore.index && matches(prompt, formStore.value))
+    if (index === -1) return
+    return {
+      index,
+      prompt: all[index],
+    }
+  })
+  const valid = createMemo(() => {
+    const item = current()
+    if (!item || item.prompt.type !== "text") return false
+    const value = formStore.value[item.prompt.key] ?? ""
+    return value.trim().length > 0
+  })
+
+  async function next(index: number, value: Record<string, string>) {
+    const methodIndex = props.methodIndex()
+    if (methodIndex === undefined) return
+    const next = prompts().findIndex((prompt, i) => i > index && matches(prompt, value))
+    if (next !== -1) {
+      setFormStore("index", next)
+      return
+    }
+    await props.onSubmit(methodIndex, value)
+  }
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    const item = current()
+    if (!item || item.prompt.type !== "text") return
+    if (!valid()) return
+    await next(item.index, formStore.value)
+  }
+
+  const item = () => current()
+  const text = createMemo(() => {
+    const prompt = item()?.prompt
+    if (!prompt || prompt.type !== "text") return
+    return prompt
+  })
+  const select = createMemo(() => {
+    const prompt = item()?.prompt
+    if (!prompt || prompt.type !== "select") return
+    return prompt
+  })
+
+  return (
+    <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
+      <Switch>
+        <Match when={item()?.prompt.type === "text"}>
+          <TextField
+            type="text"
+            label={text()?.message ?? ""}
+            placeholder={text()?.placeholder}
+            value={text() ? (formStore.value[text()!.key] ?? "") : ""}
+            onChange={(value) => {
+              const prompt = text()
+              if (!prompt) return
+              setFormStore("value", prompt.key, value)
+            }}
+          />
+          <Button class="w-auto" type="submit" variant="primary" disabled={!valid()}>
+            {language.t("common.continue")}
+          </Button>
+        </Match>
+        <Match when={item()?.prompt.type === "select"}>
+          <div class="w-full flex flex-col gap-1.5">
+            <div class="text-body text-fg-base">{select()?.message}</div>
+            <div>
+              <List
+                items={select()?.options ?? []}
+                key={(x) => x.value}
+                current={select()?.options.find((x) => x.value === formStore.value[select()!.key])}
+                onSelect={(value) => {
+                  if (!value) return
+                  const prompt = select()
+                  if (!prompt) return
+                  const nextValue = {
+                    ...formStore.value,
+                    [prompt.key]: value.value,
+                  }
+                  setFormStore("value", prompt.key, value.value)
+                  void next(item()!.index, nextValue)
+                }}
+              >
+                {(option) => (
+                  <div class="w-full flex items-center gap-x-2">
+                    <div class="w-4 h-2 rounded-[1px] bg-surface-sunken shadow-xs-border-base flex items-center justify-center">
+                      <div class="w-2.5 h-0.5 ml-0 bg-icon-strong hidden" data-slot="list-item-extra-icon" />
+                    </div>
+                    <span>{option.label}</span>
+                    <span class="text-body text-fg-weak">{option.hint}</span>
+                  </div>
+                )}
+              </List>
+            </div>
+          </div>
+        </Match>
+      </Switch>
+    </form>
+  )
+}