wip(desktop): progress

1 files changed, 81 insertions, 56 deletions

diff --git a/packages/desktop/src/components/prompt-input.tsx b/packages/desktop/src/components/prompt-input.tsx
index 41af8644b..7f8568291 100644
--- a/packages/desktop/src/components/prompt-input.tsx
+++ b/packages/desktop/src/components/prompt-input.tsx
@@ -1,5 +1,17 @@
 import { useFilteredList } from "@opencode-ai/ui/hooks"
-import { createEffect, on, Component, Show, For, onMount, onCleanup, Switch, Match, createSignal } from "solid-js"
+import {
+  createEffect,
+  on,
+  Component,
+  Show,
+  For,
+  onMount,
+  onCleanup,
+  Switch,
+  Match,
+  createSignal,
+  createMemo,
+} from "solid-js"
 import { createStore } from "solid-js/store"
 import { createFocusSignal } from "@solid-primitives/active-element"
 import { useLocal } from "@/context/local"
@@ -470,60 +482,73 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             </Button>
             <Show when={layout.dialog.opened() === "model"}>
               <Switch>
-                <Match when={providers().connected().length > 0}>
-                  <SelectDialog
-                    defaultOpen
-                    onOpenChange={(open) => {
-                      if (open) {
-                        layout.dialog.open("model")
-                      } else {
-                        layout.dialog.close("model")
-                      }
-                    }}
-                    title="Select model"
-                    placeholder="Search models"
-                    emptyMessage="No model results"
-                    key={(x) => `${x.provider.id}:${x.id}`}
-                    items={local.model.list()}
-                    current={local.model.current()}
-                    filterKeys={["provider.name", "name", "id"]}
-                    // groupBy={(x) => (local.model.recent().includes(x) ? "Recent" : x.provider.name)}
-                    groupBy={(x) => x.provider.name}
-                    sortGroupsBy={(a, b) => {
-                      if (a.category === "Recent" && b.category !== "Recent") return -1
-                      if (b.category === "Recent" && a.category !== "Recent") return 1
-                      const aProvider = a.items[0].provider.id
-                      const bProvider = b.items[0].provider.id
-                      if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
-                      if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1
-                      return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider)
-                    }}
-                    onSelect={(x) =>
-                      local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, { recent: true })
-                    }
-                    actions={
-                      <Button
-                        class="h-7 -my-1 text-14-medium"
-                        icon="plus-small"
-                        tabIndex={-1}
-                        onClick={() => layout.dialog.open("provider")}
+                <Match when={providers.paid().length > 0}>
+                  {iife(() => {
+                    const models = createMemo(() =>
+                      local.model
+                        .list()
+                        .filter((m) =>
+                          layout.connect.state() === "complete" ? m.provider.id === layout.connect.provider() : true,
+                        ),
+                    )
+                    return (
+                      <SelectDialog
+                        defaultOpen
+                        onOpenChange={(open) => {
+                          if (open) {
+                            layout.dialog.open("model")
+                          } else {
+                            layout.dialog.close("model")
+                          }
+                        }}
+                        title="Select model"
+                        placeholder="Search models"
+                        emptyMessage="No model results"
+                        key={(x) => `${x.provider.id}:${x.id}`}
+                        items={models}
+                        current={local.model.current()}
+                        filterKeys={["provider.name", "name", "id"]}
+                        // groupBy={(x) => (local.model.recent().includes(x) ? "Recent" : x.provider.name)}
+                        groupBy={(x) => x.provider.name}
+                        sortGroupsBy={(a, b) => {
+                          if (a.category === "Recent" && b.category !== "Recent") return -1
+                          if (b.category === "Recent" && a.category !== "Recent") return 1
+                          const aProvider = a.items[0].provider.id
+                          const bProvider = b.items[0].provider.id
+                          if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
+                          if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1
+                          return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider)
+                        }}
+                        onSelect={(x) =>
+                          local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+                            recent: true,
+                          })
+                        }
+                        actions={
+                          <Button
+                            class="h-7 -my-1 text-14-medium"
+                            icon="plus-small"
+                            tabIndex={-1}
+                            onClick={() => layout.dialog.open("provider")}
+                          >
+                            Connect provider
+                          </Button>
+                        }
                       >
-                        Connect provider
-                      </Button>
-                    }
-                  >
-                    {(i) => (
-                      <div class="w-full flex items-center gap-x-2.5">
-                        <span>{i.name}</span>
-                        <Show when={!i.cost || i.cost?.input === 0}>
-                          <Tag>Free</Tag>
-                        </Show>
-                        <Show when={i.latest}>
-                          <Tag>Latest</Tag>
-                        </Show>
-                      </div>
-                    )}
-                  </SelectDialog>
+                        {(i) => (
+                          <div class="w-full flex items-center gap-x-2.5">
+                            <span>{i.name}</span>
+                            <Show when={!i.cost || i.cost?.input === 0}>
+                              <Tag>Free</Tag>
+                            </Show>
+                            <Show when={i.latest}>
+                              <Tag>Latest</Tag>
+                            </Show>
+                          </div>
+                        )}
+                      </SelectDialog>
+                    )
+                  })}
                 </Match>
                 <Match when={true}>
                   {iife(() => {
@@ -554,7 +579,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                             <div class="text-14-medium text-text-base px-2.5">Free models provided by OpenCode</div>
                             <List
                               ref={(ref) => (listRef = ref)}
-                              items={local.model.list()}
+                              items={local.model.list}
                               current={local.model.current()}
                               key={(x) => `${x.provider.id}:${x.id}`}
                               onSelect={(x) => {
@@ -587,7 +612,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                                   <List
                                     class="w-full"
                                     key={(x) => x?.id}
-                                    items={providers().popular()}
+                                    items={providers.popular}
                                     activeIcon="plus-small"
                                     sortBy={(a, b) => {
                                       if (popularProviders.includes(a.id) && popularProviders.includes(b.id))