wip(desktop): progress

packages/desktop/src/context/layout.tsx

@@ -185,9 +185,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         close(dialog: Dialog) {
           if (ephemeral.dialog?.open === dialog) {
             setEphemeral("dialog", "open", undefined)
-            if (dialog === "connect") {
-              setEphemeral("connect", {})
-            }
+            setEphemeral("connect", {})
           }
         },
         connect(provider: string) {

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],
             }
           }
         }

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,
   }))
 }

packages/desktop/src/pages/layout.tsx

@@ -487,7 +487,7 @@ export default function Layout(props: ParentProps) {
           </div>
           <div class="flex flex-col gap-1.5 self-stretch items-start shrink-0 px-2 py-3">
             <Switch>
-              <Match when={!providers().connected().length && layout.sidebar.opened()}>
+              <Match when={!providers().paid().length && layout.sidebar.opened()}>
                 <div class="rounded-md bg-background-stronger shadow-xs-border-base">
                   <div class="p-3 flex flex-col gap-2">
                     <div class="text-12-medium text-text-strong">Getting started</div>