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-state.ts

@@ -0,0 +1,22 @@
+import type { ProviderAuthMethod } from "@opencode-ai/sdk/v2/client"
+
+export type ProviderOAuthPrompt = NonNullable<ProviderAuthMethod["prompts"]>[number]
+export type ProviderOAuthPromptItem = {
+  index: number
+  prompt: ProviderOAuthPrompt
+}
+
+export function getProviderOAuthSelectPromptState(
+  item: ProviderOAuthPromptItem,
+  value: { value: string },
+  currentValue: Record<string, string>,
+) {
+  if (item.prompt.type !== "select") return
+  return {
+    index: item.index,
+    value: {
+      ...currentValue,
+      [item.prompt.key]: value.value,
+    },
+  }
+}

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

@@ -0,0 +1,45 @@
+import { describe, expect, test } from "bun:test"
+import { getProviderOAuthSelectPromptState } from "./dialog-connect-provider-prompt-state"
+
+describe("getProviderOAuthSelectPromptState", () => {
+  test("preserves the active prompt index when adding a selected value", () => {
+    const state = getProviderOAuthSelectPromptState(
+      {
+        index: 2,
+        prompt: {
+          type: "select",
+          key: "region",
+          message: "Region",
+          options: [{ label: "US", value: "us" }],
+        },
+      },
+      { value: "us" },
+      { account: "work" },
+    )
+
+    expect(state).toEqual({
+      index: 2,
+      value: {
+        account: "work",
+        region: "us",
+      },
+    })
+  })
+
+  test("does not continue non-select prompts through the select path", () => {
+    const state = getProviderOAuthSelectPromptState(
+      {
+        index: 1,
+        prompt: {
+          type: "text",
+          key: "token",
+          message: "Token",
+        },
+      },
+      { value: "us" },
+      {},
+    )
+
+    expect(state).toBeUndefined()
+  })
+})