openAgent

1import { createMemo, createSignal, onMount, Show } from "solid-js"
2import { useSync } from "../context/sync"
3import { map, pipe, sortBy } from "remeda"
4import { DialogSelect } from "../ui/dialog-select"
5import { useDialog } from "../ui/dialog"
6import { useSDK } from "../context/sdk"
7import { DialogPrompt } from "../ui/dialog-prompt"
8import { Link } from "../ui/link"
9import { useTheme } from "../context/theme"
10import { TextAttributes } from "@opentui/core"
11import type { ProviderAuthAuthorization, ProviderAuthMethod } from "@opencode-ai/sdk/v2"
12import { DialogModel } from "./dialog-model"
13import { useToast } from "../ui/toast"
14import { isConsoleManagedProvider } from "../util/provider-origin"
15import { useConnected } from "./use-connected"
16import { useBindings } from "../keymap"
17import { useClipboard } from "../context/clipboard"
18 
19const PROVIDER_PRIORITY: Record<string, number> = {
20  opencode: 0,
21  "opencode-go": 1,
22  openai: 2,
23  "github-copilot": 3,
24  anthropic: 4,
25  google: 5,
26}
27 
28const CUSTOM_PROVIDER_OPTION_VALUE = "__opencode_custom_provider__"
29const CUSTOM_PROVIDER_ID = /^[a-z0-9][a-z0-9-_]*$/
30 
31type ProviderOptionBase = {
32  title: string
33  value: string
34  description?: string
35  category: string
36}
37 
38type ProviderOption =
39  | (ProviderOptionBase & {
40      type: "provider"
41      providerID: string
42    })
43  | (ProviderOptionBase & {
44      type: "custom"
45    })
46 
47export function providerOptions(list: { id: string; name: string }[]): ProviderOption[] {
48  return [
49    ...pipe(
50      list,
51      sortBy(
52        (x) => PROVIDER_PRIORITY[x.id] ?? 99,
53        (x) => x.name.toLowerCase(),
54        (x) => x.id,
55      ),
56      map((provider) => ({
57        type: "provider" as const,
58        title: provider.name,
59        value: provider.id,
60        providerID: provider.id,
61        description: {
62          opencode: "(Recommended)",
63          anthropic: "(API key)",
64          openai: "(ChatGPT Plus/Pro or API key)",
65          "opencode-go": "Low cost subscription for everyone",
66        }[provider.id],
67        category: provider.id in PROVIDER_PRIORITY ? "Popular" : "Providers",
68      })),
69    ),
70    {
71      type: "custom",
72      title: "Other",
73      value: CUSTOM_PROVIDER_OPTION_VALUE,
74      description: "Custom provider",
75      category: "Providers",
76    },
77  ]
78}
79 
80export function normalizeCustomProviderID(value: string) {
81  const providerID = value.trim().replace(/^@ai-sdk\//, "")
82  if (!CUSTOM_PROVIDER_ID.test(providerID)) return
83  return providerID
84}
85 
86export function createDialogProviderOptions() {
87  const sync = useSync()
88  const dialog = useDialog()
89  const sdk = useSDK()
90  const toast = useToast()
91  const { theme } = useTheme()
92  const onboarded = useConnected()
93 
94  async function promptCustomProviderID(): Promise<string | undefined> {
95    const value = await DialogPrompt.show(dialog, "Other", {
96      placeholder: "Provider id",
97      description: () => (
98        <text fg={theme.textMuted}>
99          This only stores a credential. Configure the provider in opencode.json to use it.
100        </text>
101      ),
102    })
103    if (value === null) return
104 
105    const providerID = normalizeCustomProviderID(value)
106    if (providerID) return providerID
107 
108    toast.show({
109      variant: "error",
110      message:
111        "Provider ids must start with a lowercase letter or number and only use lowercase letters, numbers, hyphens, and underscores",
112    })
113    return promptCustomProviderID()
114  }
115 
116  const options = createMemo(() => {
117    return pipe(
118      providerOptions(sync.data.provider_next.all),
119      map((provider) => {
120        if (provider.type === "custom") {
121          return {
122            title: provider.title,
123            value: provider.value,
124            description: provider.description,
125            category: provider.category,
126            async onSelect() {
127              const providerID = await promptCustomProviderID()
128              if (!providerID) return
129              return dialog.replace(() => <ApiMethod providerID={providerID} title="API key" custom />)
130            },
131          }
132        }
133 
134        const providerID = provider.providerID
135        const consoleManaged = isConsoleManagedProvider(sync.data.console_state.consoleManagedProviders, providerID)
136        const connected = sync.data.provider_next.connected.includes(providerID)
137 
138        return {
139          title: provider.title,
140          value: provider.value,
141          description: provider.description,
142          footer: consoleManaged ? sync.data.console_state.activeOrgName : undefined,
143          category: provider.category,
144          gutter: connected && onboarded() ? () => <text fg={theme.success}>✓</text> : undefined,
145          async onSelect() {
146            if (consoleManaged) return
147 
148            const methods = sync.data.provider_auth[providerID] ?? [
149              {
150                type: "api",
151                label: "API key",
152              },
153            ]
154            let index: number | null = 0
155            if (methods.length > 1) {
156              index = await new Promise<number | null>((resolve) => {
157                dialog.replace(
158                  () => (
159                    <DialogSelect
160                      title="Select auth method"
161                      options={methods.map((x, index) => ({
162                        title: x.label,
163                        value: index,
164                      }))}
165                      onSelect={(option) => resolve(option.value)}
166                    />
167                  ),
168                  () => resolve(null),
169                )
170              })
171            }
172            if (index == null) return
173            const method = methods[index]
174            if (method.type === "oauth") {
175              let inputs: Record<string, string> | undefined
176              if (method.prompts?.length) {
177                const value = await PromptsMethod({
178                  dialog,
179                  prompts: method.prompts,
180                })
181                if (!value) return
182                inputs = value
183              }
184 
185              const result = await sdk.client.provider.oauth.authorize({
186                providerID,
187                method: index,
188                inputs,
189              })
190              if (result.error) {
191                toast.show({
192                  variant: "error",
193                  message: JSON.stringify(result.error),
194                })
195                dialog.clear()
196                return
197              }
198              if (result.data?.method === "code") {
199                dialog.replace(() => (
200                  <CodeMethod providerID={providerID} title={method.label} index={index} authorization={result.data!} />
201                ))
202              }
203              if (result.data?.method === "auto") {
204                dialog.replace(() => (
205                  <AutoMethod providerID={providerID} title={method.label} index={index} authorization={result.data!} />
206                ))
207              }
208            }
209            if (method.type === "api") {
210              let metadata: Record<string, string> | undefined
211              if (method.prompts?.length) {
212                const value = await PromptsMethod({ dialog, prompts: method.prompts })
213                if (!value) return
214                metadata = value
215              }
216              return dialog.replace(() => (
217                <ApiMethod providerID={providerID} title={method.label} metadata={metadata} />
218              ))
219            }
220          },
221        }
222      }),
223    )
224  })
225  return options
226}
227 
228export function DialogProvider() {
229  const options = createDialogProviderOptions()
230  return <DialogSelect title="Connect a provider" options={options()} />
231}
232 
233interface AutoMethodProps {
234  index: number
235  providerID: string
236  title: string
237  authorization: ProviderAuthAuthorization
238}
239function AutoMethod(props: AutoMethodProps) {
240  const { theme } = useTheme()
241  const sdk = useSDK()
242  const dialog = useDialog()
243  const sync = useSync()
244  const toast = useToast()
245  const clipboard = useClipboard()
246 
247  useBindings(() => ({
248    bindings: [
249      {
250        key: "c",
251        desc: "Copy provider code",
252        group: "Dialog",
253        cmd: () => {
254          const code =
255            props.authorization.instructions.match(/[A-Z0-9]{4}-[A-Z0-9]{4,5}/)?.[0] ?? props.authorization.url
256          clipboard
257            .write?.(code)
258            .then(() => toast.show({ message: "Copied to clipboard", variant: "info" }))
259            .catch(toast.error)
260        },
261      },
262    ],
263  }))
264 
265  onMount(async () => {
266    const result = await sdk.client.provider.oauth.callback({
267      providerID: props.providerID,
268      method: props.index,
269    })
270    if (result.error) {
271      toast.show({
272        variant: "error",
273        message:
274          "name" in result.error && result.error.name === "ProviderAuthOauthCallbackFailed"
275            ? "OAuth authorization failed. Try /connect again."
276            : JSON.stringify(result.error),
277      })
278      dialog.clear()
279      return
280    }
281    await sdk.client.instance.dispose()
282    await sync.bootstrap()
283    dialog.replace(() => <DialogModel providerID={props.providerID} />)
284  })
285 
286  return (
287    <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
288      <box flexDirection="row" justifyContent="space-between">
289        <text attributes={TextAttributes.BOLD} fg={theme.text}>
290          {props.title}
291        </text>
292        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
293          esc
294        </text>
295      </box>
296      <box gap={1}>
297        <Link href={props.authorization.url} fg={theme.primary} />
298        <text fg={theme.textMuted}>{props.authorization.instructions}</text>
299      </box>
300      <text fg={theme.textMuted}>Waiting for authorization...</text>
301      <text fg={theme.text}>
302        c <span style={{ fg: theme.textMuted }}>copy</span>
303      </text>
304    </box>
305  )
306}
307 
308interface CodeMethodProps {
309  index: number
310  title: string
311  providerID: string
312  authorization: ProviderAuthAuthorization
313}
314function CodeMethod(props: CodeMethodProps) {
315  const { theme } = useTheme()
316  const sdk = useSDK()
317  const sync = useSync()
318  const dialog = useDialog()
319  const [error, setError] = createSignal(false)
320 
321  return (
322    <DialogPrompt
323      title={props.title}
324      placeholder="Authorization code"
325      onConfirm={async (value) => {
326        const { error } = await sdk.client.provider.oauth.callback({
327          providerID: props.providerID,
328          method: props.index,
329          code: value,
330        })
331        if (!error) {
332          await sdk.client.instance.dispose()
333          await sync.bootstrap()
334          dialog.replace(() => <DialogModel providerID={props.providerID} />)
335          return
336        }
337        setError(true)
338      }}
339      description={() => (
340        <box gap={1}>
341          <text fg={theme.textMuted}>{props.authorization.instructions}</text>
342          <Link href={props.authorization.url} fg={theme.primary} />
343          <Show when={error()}>
344            <text fg={theme.error}>Invalid code</text>
345          </Show>
346        </box>
347      )}
348    />
349  )
350}
351 
352interface ApiMethodProps {
353  providerID: string
354  title: string
355  metadata?: Record<string, string>
356  custom?: boolean
357}
358function ApiMethod(props: ApiMethodProps) {
359  const dialog = useDialog()
360  const sdk = useSDK()
361  const sync = useSync()
362  const toast = useToast()
363  const { theme } = useTheme()
364 
365  return (
366    <DialogPrompt
367      title={props.title}
368      placeholder="API key"
369      description={() =>
370        ({
371          opencode: (
372            <box gap={1}>
373              <text fg={theme.textMuted}>
374                OpenCode Zen gives you access to all the best coding models at the cheapest prices with a single API
375                key.
376              </text>
377              <text fg={theme.text}>
378                Go to <span style={{ fg: theme.primary }}>https://opencode.ai/zen</span> to get a key
379              </text>
380            </box>
381          ),
382          "opencode-go": (
383            <box gap={1}>
384              <text fg={theme.textMuted}>
385                OpenCode Go is a $10 per month subscription that provides reliable access to popular open coding models
386                with generous usage limits.
387              </text>
388              <text fg={theme.text}>
389                Go to <span style={{ fg: theme.primary }}>https://opencode.ai/go</span> and enable OpenCode Go
390              </text>
391            </box>
392          ),
393        })[props.providerID] ?? undefined
394      }
395      onConfirm={async (value) => {
396        if (!value) return
397        await sdk.client.auth.set({
398          providerID: props.providerID,
399          auth: {
400            type: "api",
401            key: value,
402            ...(props.metadata ? { metadata: props.metadata } : {}),
403          },
404        })
405        await sdk.client.instance.dispose()
406        await sync.bootstrap()
407        if (props.custom && !sync.data.provider_next.all.some((provider) => provider.id === props.providerID)) {
408          toast.show({
409            variant: "info",
410            message: `Saved credential for ${props.providerID}. Configure it in opencode.json to use it.`,
411          })
412          dialog.clear()
413          return
414        }
415        dialog.replace(() => <DialogModel providerID={props.providerID} />)
416      }}
417    />
418  )
419}
420 
421interface PromptsMethodProps {
422  dialog: ReturnType<typeof useDialog>
423  prompts: NonNullable<ProviderAuthMethod["prompts"]>[number][]
424}
425async function PromptsMethod(props: PromptsMethodProps) {
426  const inputs: Record<string, string> = {}
427  for (const prompt of props.prompts) {
428    if (prompt.when) {
429      const value = inputs[prompt.when.key]
430      if (value === undefined) continue
431      const matches = prompt.when.op === "eq" ? value === prompt.when.value : value !== prompt.when.value
432      if (!matches) continue
433    }
434 
435    if (prompt.type === "select") {
436      const value = await new Promise<string | null>((resolve) => {
437        props.dialog.replace(
438          () => (
439            <DialogSelect
440              title={prompt.message}
441              options={prompt.options.map((x) => ({
442                title: x.label,
443                value: x.value,
444                description: x.hint,
445              }))}
446              onSelect={(option) => resolve(option.value)}
447            />
448          ),
449          () => resolve(null),
450        )
451      })
452      if (value === null) return null
453      inputs[prompt.key] = value
454      continue
455    }
456 
457    const value = await new Promise<string | null>((resolve) => {
458      props.dialog.replace(
459        () => (
460          <DialogPrompt title={prompt.message} placeholder={prompt.placeholder} onConfirm={(value) => resolve(value)} />
461        ),
462        () => resolve(null),
463      )
464    })
465    if (value === null) return null
466    inputs[prompt.key] = value
467  }
468  return inputs
469}
470