feat(tui): show console-managed providers (#20956)

Author: kitlangton

packages/opencode/src/account/index.ts

@@ -52,6 +52,11 @@ export type AccountOrgs = {
   orgs: readonly Org[]
 }
 
+export type ActiveOrg = {
+  account: Info
+  org: Org
+}
+
 class RemoteConfig extends Schema.Class<RemoteConfig>("RemoteConfig")({
   config: Schema.Record(Schema.String, Schema.Json),
 }) {}
@@ -137,6 +142,7 @@ const mapAccountServiceError =
 export namespace Account {
   export interface Interface {
     readonly active: () => Effect.Effect<Option.Option<Info>, AccountError>
+    readonly activeOrg: () => Effect.Effect<Option.Option<ActiveOrg>, AccountError>
     readonly list: () => Effect.Effect<Info[], AccountError>
     readonly orgsByAccount: () => Effect.Effect<readonly AccountOrgs[], AccountError>
     readonly remove: (accountID: AccountID) => Effect.Effect<void, AccountError>
@@ -279,19 +285,31 @@ export namespace Account {
         resolveAccess(accountID).pipe(Effect.map(Option.map((r) => r.accessToken))),
       )
 
+      const activeOrg = Effect.fn("Account.activeOrg")(function* () {
+        const activeAccount = yield* repo.active()
+        if (Option.isNone(activeAccount)) return Option.none<ActiveOrg>()
+
+        const account = activeAccount.value
+        if (!account.active_org_id) return Option.none<ActiveOrg>()
+
+        const accountOrgs = yield* orgs(account.id)
+        const org = accountOrgs.find((item) => item.id === account.active_org_id)
+        if (!org) return Option.none<ActiveOrg>()
+
+        return Option.some({ account, org })
+      })
+
       const orgsByAccount = Effect.fn("Account.orgsByAccount")(function* () {
         const accounts = yield* repo.list()
-        const [errors, results] = yield* Effect.partition(
+        return yield* Effect.forEach(
           accounts,
-          (account) => orgs(account.id).pipe(Effect.map((orgs) => ({ account, orgs }))),
+          (account) =>
+            orgs(account.id).pipe(
+              Effect.catch(() => Effect.succeed([] as readonly Org[])),
+              Effect.map((orgs) => ({ account, orgs })),
+            ),
           { concurrency: 3 },
         )
-        for (const error of errors) {
-          yield* Effect.logWarning("failed to fetch orgs for account").pipe(
-            Effect.annotateLogs({ error: String(error) }),
-          )
-        }
-        return results
       })
 
       const orgs = Effect.fn("Account.orgs")(function* (accountID: AccountID) {
@@ -396,6 +414,7 @@ export namespace Account {
 
       return Service.of({
         active: repo.active,
+        activeOrg,
         list: repo.list,
         orgsByAccount,
         remove: repo.remove,
@@ -417,6 +436,26 @@ export namespace Account {
     return Option.getOrUndefined(await runPromise((service) => service.active()))
   }
 
+  export async function list(): Promise<Info[]> {
+    return runPromise((service) => service.list())
+  }
+
+  export async function activeOrg(): Promise<ActiveOrg | undefined> {
+    return Option.getOrUndefined(await runPromise((service) => service.activeOrg()))
+  }
+
+  export async function orgsByAccount(): Promise<readonly AccountOrgs[]> {
+    return runPromise((service) => service.orgsByAccount())
+  }
+
+  export async function orgs(accountID: AccountID): Promise<readonly Org[]> {
+    return runPromise((service) => service.orgs(accountID))
+  }
+
+  export async function switchOrg(accountID: AccountID, orgID: OrgID) {
+    return runPromise((service) => service.use(accountID, Option.some(orgID)))
+  }
+
   export async function token(accountID: AccountID): Promise<AccessToken | undefined> {
     const t = await runPromise((service) => service.token(accountID))
     return Option.getOrUndefined(t)

packages/opencode/src/cli/cmd/tui/app.tsx

@@ -36,6 +36,7 @@ import { CommandProvider, useCommandDialog } from "@tui/component/dialog-command
 import { DialogAgent } from "@tui/component/dialog-agent"
 import { DialogSessionList } from "@tui/component/dialog-session-list"
 import { DialogWorkspaceList } from "@tui/component/dialog-workspace-list"
+import { DialogConsoleOrg } from "@tui/component/dialog-console-org"
 import { KeybindProvider, useKeybind } from "@tui/context/keybind"
 import { ThemeProvider, useTheme } from "@tui/context/theme"
 import { Home } from "@tui/routes/home"
@@ -629,6 +630,19 @@ function App(props: { onSnapshot?: () => Promise<string[]> }) {
       },
       category: "Provider",
     },
+    {
+      title: "Switch org",
+      value: "console.org.switch",
+      suggested: Boolean(sync.data.console_state.activeOrgName),
+      slash: {
+        name: "org",
+        aliases: ["orgs", "switch-org"],
+      },
+      onSelect: () => {
+        dialog.replace(() => <DialogConsoleOrg />)
+      },
+      category: "Provider",
+    },
     {
       title: "View status",
       keybind: "status_view",

packages/opencode/src/cli/cmd/tui/component/dialog-console-org.tsx

@@ -0,0 +1,103 @@
+import { createResource, createMemo } from "solid-js"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useSDK } from "@tui/context/sdk"
+import { useDialog } from "@tui/ui/dialog"
+import { useToast } from "@tui/ui/toast"
+import { useTheme } from "@tui/context/theme"
+import type { ExperimentalConsoleListOrgsResponse } from "@opencode-ai/sdk/v2"
+
+type OrgOption = ExperimentalConsoleListOrgsResponse["orgs"][number]
+
+const accountHost = (url: string) => {
+  try {
+    return new URL(url).host
+  } catch {
+    return url
+  }
+}
+
+const accountLabel = (item: Pick<OrgOption, "accountEmail" | "accountUrl">) =>
+  `${item.accountEmail}  ${accountHost(item.accountUrl)}`
+
+export function DialogConsoleOrg() {
+  const sdk = useSDK()
+  const dialog = useDialog()
+  const toast = useToast()
+  const { theme } = useTheme()
+
+  const [orgs] = createResource(async () => {
+    const result = await sdk.client.experimental.console.listOrgs({}, { throwOnError: true })
+    return result.data?.orgs ?? []
+  })
+
+  const current = createMemo(() => orgs()?.find((item) => item.active))
+
+  const options = createMemo(() => {
+    const listed = orgs()
+    if (listed === undefined) {
+      return [
+        {
+          title: "Loading orgs...",
+          value: "loading",
+          onSelect: () => {},
+        },
+      ]
+    }
+
+    if (listed.length === 0) {
+      return [
+        {
+          title: "No orgs found",
+          value: "empty",
+          onSelect: () => {},
+        },
+      ]
+    }
+
+    return listed
+      .toSorted((a, b) => {
+        const activeAccountA = a.active ? 0 : 1
+        const activeAccountB = b.active ? 0 : 1
+        if (activeAccountA !== activeAccountB) return activeAccountA - activeAccountB
+
+        const accountCompare = accountLabel(a).localeCompare(accountLabel(b))
+        if (accountCompare !== 0) return accountCompare
+
+        return a.orgName.localeCompare(b.orgName)
+      })
+      .map((item) => ({
+        title: item.orgName,
+        value: item,
+        category: accountLabel(item),
+        categoryView: (
+          <box flexDirection="row" gap={2}>
+            <text fg={theme.accent}>{item.accountEmail}</text>
+            <text fg={theme.textMuted}>{accountHost(item.accountUrl)}</text>
+          </box>
+        ),
+        onSelect: async () => {
+          if (item.active) {
+            dialog.clear()
+            return
+          }
+
+          await sdk.client.experimental.console.switchOrg(
+            {
+              accountID: item.accountID,
+              orgID: item.orgID,
+            },
+            { throwOnError: true },
+          )
+
+          await sdk.client.instance.dispose()
+          toast.show({
+            message: `Switched to ${item.orgName}`,
+            variant: "info",
+          })
+          dialog.clear()
+        },
+      }))
+  })
+
+  return <DialogSelect<string | OrgOption> title="Switch org" options={options()} current={current()} />
+}

packages/opencode/src/cli/cmd/tui/component/dialog-model.tsx

@@ -8,6 +8,7 @@ import { createDialogProviderOptions, DialogProvider } from "./dialog-provider"
 import { DialogVariant } from "./dialog-variant"
 import { useKeybind } from "../context/keybind"
 import * as fuzzysort from "fuzzysort"
+import { consoleManagedProviderLabel } from "@tui/util/provider-origin"
 
 export function useConnected() {
   const sync = useSync()
@@ -46,7 +47,11 @@ export function DialogModel(props: { providerID?: string }) {
             key: item,
             value: { providerID: provider.id, modelID: model.id },
             title: model.name ?? item.modelID,
-            description: provider.name,
+            description: consoleManagedProviderLabel(
+              sync.data.console_state.consoleManagedProviders,
+              provider.id,
+              provider.name,
+            ),
             category,
             disabled: provider.id === "opencode" && model.id.includes("-nano"),
             footer: model.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
@@ -84,7 +89,9 @@ export function DialogModel(props: { providerID?: string }) {
             description: favorites.some((item) => item.providerID === provider.id && item.modelID === model)
               ? "(Favorite)"
               : undefined,
-            category: connected() ? provider.name : undefined,
+            category: connected()
+              ? consoleManagedProviderLabel(sync.data.console_state.consoleManagedProviders, provider.id, provider.name)
+              : undefined,
             disabled: provider.id === "opencode" && model.includes("-nano"),
             footer: info.cost?.input === 0 && provider.id === "opencode" ? "Free" : undefined,
             onSelect() {
@@ -132,7 +139,11 @@ export function DialogModel(props: { providerID?: string }) {
     props.providerID ? sync.data.provider.find((x) => x.id === props.providerID) : null,
   )
 
-  const title = createMemo(() => provider()?.name ?? "Select model")
+  const title = createMemo(() => {
+    const value = provider()
+    if (!value) return "Select model"
+    return consoleManagedProviderLabel(sync.data.console_state.consoleManagedProviders, value.id, value.name)
+  })
 
   function onSelect(providerID: string, modelID: string) {
     local.model.set({ providerID, modelID }, { recent: true })