- OpenCode Zen gives you access to a curated set of reliable optimized models for
- coding agents.
-
-
- With a single API key you’ll get access to models such as Claude, GPT, Gemini, GLM
- and more.
+ return (
+
+
+
+
+
+ OpenCode Zen gives you access to a curated set of reliable optimized models for
+ coding agents.
+
+
+ With a single API key you’ll get access to models such as Claude, GPT, Gemini, GLM
+ and more.
+
+
+ Visit{" "}
+ {" "}
+ to collect your API key.
+
+
+
- Visit{" "}
- {" "}
- to collect your API key.
+ Enter your {provider.name} API key to connect your account and use {provider.name}{" "}
+ models in OpenCode.
-
-
-
-
- Enter your {provider.name} API key to connect your account and use {provider.name}{" "}
- models in OpenCode.
-
-
-
-
-
- )
- })}
-
+
+
+
+
+ )
+ })}
+
+
--
cgit v1.2.3
From 4ae7e1b19c3915e3e9b1a39195d54c4721836b03 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Thu, 11 Dec 2025 10:19:24 -0600
Subject: wip(desktop): progress
---
packages/desktop/src/pages/layout.tsx | 14 ++-
packages/ui/src/components/icon.tsx | 1 +
packages/ui/src/components/toast.css | 175 ++++++++++++++++++++++++++++++++++
packages/ui/src/components/toast.tsx | 142 +++++++++++++++++++++++++++
packages/ui/src/styles/index.css | 1 +
5 files changed, 330 insertions(+), 3 deletions(-)
create mode 100644 packages/ui/src/components/toast.css
create mode 100644 packages/ui/src/components/toast.tsx
(limited to 'packages/desktop/src/pages')
diff --git a/packages/desktop/src/pages/layout.tsx b/packages/desktop/src/pages/layout.tsx
index 65a106708..e9f10e3a2 100644
--- a/packages/desktop/src/pages/layout.tsx
+++ b/packages/desktop/src/pages/layout.tsx
@@ -38,6 +38,7 @@ import { Dialog } from "@opencode-ai/ui/dialog"
import { iife } from "@opencode-ai/util/iife"
import { List, ListRef } from "@opencode-ai/ui/list"
import { Input } from "@opencode-ai/ui/input"
+import { showToast, Toast } from "@opencode-ai/ui/toast"
import { useGlobalSDK } from "@/context/global-sdk"
export default function Layout(props: ParentProps) {
@@ -760,6 +761,12 @@ export default function Layout(props: ParentProps) {
})
await globalSDK.client.global.dispose()
setTimeout(() => {
+ showToast({
+ variant: "success",
+ icon: "circle-check",
+ title: `${provider().name} connected`,
+ description: `${provider().name} models are now available to use.`,
+ })
layout.connect.complete()
}, 500)
}
@@ -792,8 +799,8 @@ export default function Layout(props: ParentProps) {
- Enter your {provider.name} API key to connect your account and use {provider.name}{" "}
- models in OpenCode.
+ Enter your {provider().name} API key to connect your account and use{" "}
+ {provider().name} models in OpenCode.
@@ -801,7 +808,7 @@ export default function Layout(props: ParentProps) {
+
+
+ {iife(() => {
+ const [formStore, setFormStore] = createStore({
+ value: "",
+ error: undefined as string | undefined,
+ })
- async function handleSubmit(e: SubmitEvent) {
- e.preventDefault()
+ 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
+ const form = e.currentTarget as HTMLFormElement
+ const formData = new FormData(form)
+ const apiKey = formData.get("apiKey") as string
- if (!apiKey?.trim()) {
- setFormStore("error", "API key is required")
- return
- }
+ if (!apiKey?.trim()) {
+ setFormStore("error", "API key is required")
+ return
+ }
- setFormStore("error", undefined)
- await globalSDK.client.auth.set({
- providerID: providerID(),
- auth: {
- type: "api",
- key: apiKey,
- },
- })
- await globalSDK.client.global.dispose()
- setTimeout(() => {
- showToast({
- variant: "success",
- icon: "circle-check",
- title: `${provider().name} connected`,
- description: `${provider().name} models are now available to use.`,
+ setFormStore("error", undefined)
+ await globalSDK.client.auth.set({
+ providerID: providerID(),
+ auth: {
+ type: "api",
+ key: apiKey,
+ },
})
- layout.connect.complete()
- }, 500)
- }
+ await globalSDK.client.global.dispose()
+ setTimeout(() => {
+ showToast({
+ variant: "success",
+ icon: "circle-check",
+ title: `${provider().name} connected`,
+ description: `${provider().name} models are now available to use.`,
+ })
+ layout.connect.complete()
+ }, 500)
+ }
- return (
-
-
-
-
-
- OpenCode Zen gives you access to a curated set of reliable optimized models for
- coding agents.
+ return (
+
+
+
+
+
+ OpenCode Zen gives you access to a curated set of reliable optimized models for
+ coding agents.
+
+
+ With a single API key you’ll get access to models such as Claude, GPT, Gemini,
+ GLM and more.
+
+
+ Visit{" "}
+ {" "}
+ to collect your API key.
+
+
+
- With a single API key you’ll get access to models such as Claude, GPT, Gemini, GLM
- and more.
+ Enter your {provider().name} API key to connect your account and use{" "}
+ {provider().name} models in OpenCode.
-
- Visit{" "}
- {" "}
- to collect your API key.
-
-
-
-
-
- Enter your {provider().name} API key to connect your account and use{" "}
- {provider().name} models in OpenCode.
-