-
+
Add more models from popular providers
-
x?.id}
- items={providers().popular()}
- activeIcon="plus-small"
- sortBy={(a, b) => {
- if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
- return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
- return a.name.localeCompare(b.name)
- }}
- onSelect={(x) => {
- layout.dialog.close("model")
- }}
- >
- {(i) => (
-
-
-
{i.name}
-
- Recommended
-
-
-
- Connect with Claude Pro/Max or API key
-
-
-
-
+
+
x?.id}
+ items={providers().popular()}
+ activeIcon="plus-small"
+ sortBy={(a, b) => {
+ if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
+ return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
+ return a.name.localeCompare(b.name)
+ }}
+ onSelect={(x) => {
+ if (!x) return
+ layout.dialog.connect(x.id)
+ }}
+ >
+ {(i) => (
+
+
+
{i.name}
+
+ Recommended
+
+
+
+ Connect with Claude Pro/Max or API key
+
+
+
+
+
diff --git a/packages/desktop/src/context/global-sync.tsx b/packages/desktop/src/context/global-sync.tsx
index 1d16f0e6536..71b9adc1c96 100644
--- a/packages/desktop/src/context/global-sync.tsx
+++ b/packages/desktop/src/context/global-sync.tsx
@@ -1,23 +1,26 @@
-import type {
- Message,
- Agent,
- Session,
- Part,
- Config,
- Path,
- File,
- FileNode,
- Project,
- FileDiff,
- Todo,
- SessionStatus,
- ProviderListResponse,
- Command,
-} from "@opencode-ai/sdk/v2"
+import {
+ type Message,
+ type Agent,
+ type Session,
+ type Part,
+ type Config,
+ type Path,
+ type File,
+ type FileNode,
+ type Project,
+ type FileDiff,
+ type Todo,
+ type SessionStatus,
+ type ProviderListResponse,
+ type ProviderAuthResponse,
+ type Command,
+ createOpencodeClient,
+} from "@opencode-ai/sdk/v2/client"
import { createStore, produce, reconcile } from "solid-js/store"
import { Binary } from "@opencode-ai/util/binary"
import { createSimpleContext } from "@opencode-ai/ui/context"
import { useGlobalSDK } from "./global-sdk"
+import { onMount } from "solid-js"
type State = {
ready: boolean
@@ -51,19 +54,48 @@ type State = {
export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimpleContext({
name: "GlobalSync",
init: () => {
- const sdk = useGlobalSDK()
+ const globalSDK = useGlobalSDK()
const [globalStore, setGlobalStore] = createStore<{
ready: boolean
project: Project[]
provider: ProviderListResponse
+ provider_auth: ProviderAuthResponse
children: Record
}>({
ready: false,
project: [],
provider: { all: [], connected: [], default: {} },
+ provider_auth: {},
children: {},
})
+ async function bootstrapInstance(directory: string) {
+ const [store, setStore] = child(directory)
+ const sdk = createOpencodeClient({
+ baseUrl: globalSDK.url,
+ directory,
+ })
+ const load = {
+ project: () => sdk.project.current().then((x) => setStore("project", x.data!.id)),
+ provider: () => sdk.provider.list().then((x) => setStore("provider", x.data!)),
+ path: () => sdk.path.get().then((x) => setStore("path", x.data!)),
+ agent: () => sdk.app.agents().then((x) => setStore("agent", x.data ?? [])),
+ session: () =>
+ sdk.session.list().then((x) => {
+ const sessions = (x.data ?? [])
+ .slice()
+ .sort((a, b) => a.id.localeCompare(b.id))
+ .slice(0, store.limit)
+ setStore("session", sessions)
+ }),
+ status: () => sdk.session.status().then((x) => setStore("session_status", x.data!)),
+ config: () => sdk.config.get().then((x) => setStore("config", x.data!)),
+ changes: () => sdk.file.status().then((x) => setStore("changes", x.data!)),
+ node: () => sdk.file.list({ path: "/" }).then((x) => setStore("node", x.data!)),
+ }
+ await Promise.all(Object.values(load).map((p) => p())).then(() => setStore("ready", true))
+ }
+
const children: Record>> = {}
function child(directory: string) {
if (!children[directory]) {
@@ -86,16 +118,21 @@ export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimple
command: [],
})
children[directory] = createStore(globalStore.children[directory])
+ bootstrapInstance(directory)
}
return children[directory]
}
- sdk.event.listen((e) => {
+ globalSDK.event.listen((e) => {
const directory = e.name
const event = e.details
if (directory === "global") {
switch (event.type) {
+ case "global.disposed": {
+ bootstrap()
+ break
+ }
case "project.updated": {
const result = Binary.search(globalStore.project, event.properties.id, (s) => s.id)
if (result.found) {
@@ -116,6 +153,10 @@ export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimple
const [store, setStore] = child(directory)
switch (event.type) {
+ case "server.instance.disposed": {
+ bootstrapInstance(directory)
+ break
+ }
case "session.updated": {
const result = Binary.search(store.session, event.properties.info.id, (s) => s.id)
if (result.found) {
@@ -184,19 +225,28 @@ export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimple
}
})
- Promise.all([
- sdk.client.project.list().then(async (x) => {
- setGlobalStore(
- "project",
- x
- .data!.filter((p) => !p.worktree.includes("opencode-test") && p.vcs)
- .sort((a, b) => a.id.localeCompare(b.id)),
- )
- }),
- sdk.client.provider.list().then((x) => {
- setGlobalStore("provider", x.data ?? {})
- }),
- ]).then(() => setGlobalStore("ready", true))
+ async function bootstrap() {
+ return Promise.all([
+ globalSDK.client.project.list().then(async (x) => {
+ setGlobalStore(
+ "project",
+ x
+ .data!.filter((p) => !p.worktree.includes("opencode-test") && p.vcs)
+ .sort((a, b) => a.id.localeCompare(b.id)),
+ )
+ }),
+ globalSDK.client.provider.list().then((x) => {
+ setGlobalStore("provider", x.data ?? {})
+ }),
+ globalSDK.client.provider.auth().then((x) => {
+ setGlobalStore("provider_auth", x.data ?? {})
+ }),
+ ]).then(() => setGlobalStore("ready", true))
+ }
+
+ onMount(() => {
+ bootstrap()
+ })
return {
data: globalStore,
@@ -204,6 +254,7 @@ export const { use: useGlobalSync, provider: GlobalSyncProvider } = createSimple
return globalStore.ready
},
child,
+ bootstrap,
}
},
})
diff --git a/packages/desktop/src/context/layout.tsx b/packages/desktop/src/context/layout.tsx
index 4e08980ab90..003b72e88e8 100644
--- a/packages/desktop/src/context/layout.tsx
+++ b/packages/desktop/src/context/layout.tsx
@@ -1,5 +1,5 @@
-import { createStore } from "solid-js/store"
-import { createEffect, createMemo, onMount } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import { batch, createEffect, createMemo, onMount } from "solid-js"
import { createSimpleContext } from "@opencode-ai/ui/context"
import { makePersisted } from "@solid-primitives/storage"
import { useGlobalSync } from "./global-sync"
@@ -22,6 +22,8 @@ const PASTEL_COLORS = [
"#C1E1C1", // pastel mint
]
+type Dialog = "provider" | "model" | "connect"
+
export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
name: "Layout",
init: () => {
@@ -49,8 +51,13 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
},
)
const [ephemeral, setEphemeral] = createStore({
+ connect: {
+ provider: undefined as undefined | string,
+ state: undefined as undefined | "pending" | "complete" | "error",
+ error: undefined as undefined | string,
+ },
dialog: {
- open: undefined as undefined | "provider" | "model",
+ open: undefined as undefined | Dialog,
},
})
const usedColors = new Set()
@@ -183,14 +190,47 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
},
dialog: {
opened: createMemo(() => ephemeral.dialog?.open),
- open(dialog: "provider" | "model") {
+ open(dialog: Dialog) {
setEphemeral("dialog", "open", dialog)
+ if (dialog !== "connect") {
+ setEphemeral("connect", {})
+ }
},
- close(dialog: "provider" | "model") {
+ close(dialog: Dialog) {
if (ephemeral.dialog?.open === dialog) {
setEphemeral("dialog", "open", undefined)
+ setEphemeral("connect", {})
}
},
+ connect(provider: string) {
+ batch(() => {
+ setEphemeral("dialog", "open", "connect")
+ setEphemeral("connect", { provider, state: "pending" })
+ })
+ },
+ },
+ connect: {
+ provider: createMemo(() => ephemeral.connect.provider),
+ state: createMemo(() => ephemeral.connect.state),
+ complete() {
+ setEphemeral(
+ produce((state) => {
+ state.dialog.open = "model"
+ state.connect.state = "complete"
+ }),
+ )
+ },
+ error(message: string) {
+ setEphemeral(
+ produce((state) => {
+ state.connect.state = "error"
+ state.connect.error = message
+ }),
+ )
+ },
+ clear() {
+ setEphemeral("connect", {})
+ },
},
theme: {
current: createMemo(() => store.theme),
diff --git a/packages/desktop/src/context/local.tsx b/packages/desktop/src/context/local.tsx
index 74d3ac364c5..d8dfa732a10 100644
--- a/packages/desktop/src/context/local.tsx
+++ b/packages/desktop/src/context/local.tsx
@@ -6,6 +6,7 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
import { useSDK } from "./sdk"
import { useSync } from "./sync"
import { base64Encode } from "@opencode-ai/util/encode"
+import { useProviders } from "@/hooks/use-providers"
export type LocalFile = FileNode &
Partial<{
@@ -37,10 +38,17 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
init: () => {
const sdk = useSDK()
const sync = useSync()
+ const providers = useProviders()
function isModelValid(model: ModelKey) {
- const provider = sync.data.provider?.all.find((x) => x.id === model.providerID)
- return !!provider?.models[model.modelID] && sync.data.provider?.connected.includes(model.providerID)
+ const provider = providers().all.find((x) => x.id === model.providerID)
+ return (
+ !!provider?.models[model.modelID] &&
+ providers()
+ .connected()
+ .map((p) => p.id)
+ .includes(model.providerID)
+ )
}
function getFirstValidModel(...modelFns: (() => ModelKey | undefined)[]) {
@@ -115,8 +123,8 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
})
const list = createMemo(() =>
- sync.data.provider.all
- .filter((p) => sync.data.provider.connected.includes(p.id))
+ providers()
+ .connected()
.flatMap((p) =>
Object.values(p.models).map((m) => ({
...m,
@@ -145,11 +153,11 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
}
}
- for (const p of sync.data.provider.connected) {
- if (p in sync.data.provider.default) {
+ for (const p of providers().connected()) {
+ if (p.id in providers().default) {
return {
- providerID: p,
- modelID: sync.data.provider.default[p],
+ providerID: p.id,
+ modelID: providers().default[p.id],
}
}
}
diff --git a/packages/desktop/src/context/sync.tsx b/packages/desktop/src/context/sync.tsx
index a40e3205cd5..0b382c6deaa 100644
--- a/packages/desktop/src/context/sync.tsx
+++ b/packages/desktop/src/context/sync.tsx
@@ -79,11 +79,16 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
},
fetch: async (count = 10) => {
setStore("limit", (x) => x + count)
- await load.session()
+ await sdk.client.session.list().then((x) => {
+ const sessions = (x.data ?? [])
+ .slice()
+ .sort((a, b) => a.id.localeCompare(b.id))
+ .slice(0, store.limit)
+ setStore("session", sessions)
+ })
},
more: createMemo(() => store.session.length >= store.limit),
},
- load,
absolute,
get directory() {
return store.path.directory
diff --git a/packages/desktop/src/hooks/use-providers.ts b/packages/desktop/src/hooks/use-providers.ts
index c3fcc789876..04ef855d443 100644
--- a/packages/desktop/src/hooks/use-providers.ts
+++ b/packages/desktop/src/hooks/use-providers.ts
@@ -16,16 +16,14 @@ export function useProviders() {
}
return globalSync.data.provider
})
- const connected = createMemo(() =>
- providers().all.filter(
- (p) => providers().connected.includes(p.id) && Object.values(p.models).find((m) => m.cost?.input),
- ),
- )
+ const connected = createMemo(() => providers().all.filter((p) => providers().connected.includes(p.id)))
+ const paid = createMemo(() => connected().filter((p) => Object.values(p.models).find((m) => m.cost?.input)))
const popular = createMemo(() => providers().all.filter((p) => popularProviders.includes(p.id)))
return createMemo(() => ({
all: providers().all,
default: providers().default,
popular,
connected,
+ paid,
}))
}
diff --git a/packages/desktop/src/pages/layout.tsx b/packages/desktop/src/pages/layout.tsx
index bb078e6fef6..887ae8b824c 100644
--- a/packages/desktop/src/pages/layout.tsx
+++ b/packages/desktop/src/pages/layout.tsx
@@ -17,7 +17,7 @@ import { DiffChanges } from "@opencode-ai/ui/diff-changes"
import { getFilename } from "@opencode-ai/util/path"
import { Select } from "@opencode-ai/ui/select"
import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
-import { Session, Project } from "@opencode-ai/sdk/v2/client"
+import { Session, Project, ProviderAuthMethod } from "@opencode-ai/sdk/v2/client"
import { usePlatform } from "@/context/platform"
import { ThemePicker } from "@/components/theme-picker"
import { FontPicker } from "@/components/font-picker"
@@ -36,6 +36,11 @@ import { SelectDialog } from "@opencode-ai/ui/select-dialog"
import { Tag } from "@opencode-ai/ui/tag"
import { IconName } from "@opencode-ai/ui/icons/provider"
import { popularProviders, useProviders } from "@/hooks/use-providers"
+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 { useGlobalSDK } from "@/context/global-sdk"
export default function Layout(props: ParentProps) {
const [store, setStore] = createStore({
@@ -44,6 +49,7 @@ export default function Layout(props: ParentProps) {
})
const params = useParams()
+ const globalSDK = useGlobalSDK()
const globalSync = useGlobalSync()
const layout = useLayout()
const platform = usePlatform()
@@ -442,7 +448,7 @@ export default function Layout(props: ParentProps) {
-