feat(ui): add instance-scoped provider manager from model selector (NeuralNomadsAI#476)

## Summary
- move provider authentication management out of global settings and
into the model selector so it always runs against a live OpenCode
instance
- add an instance-scoped provider manager modal with API-key and OAuth
flows, cancellable OAuth waiting, and provider discovery/configuration
details
- handle configured provider sources differently so config- and
env-backed providers are explained in the UI while auth-backed providers
can be disconnected safely

## Validation
- npm run typecheck --workspace @codenomad/ui
- npm run build --workspace @codenomad/ui

Author: shantur

packages/ui/src/components/model-selector.tsx

@@ -1,11 +1,12 @@
 import { Combobox } from "@kobalte/core/combobox"
 import { createEffect, createMemo, createSignal } from "solid-js"
 import { providers, fetchProviders } from "../stores/sessions"
-import { ChevronDown, Star } from "lucide-solid"
+import { ChevronDown, PlugZap, Star } from "lucide-solid"
 import type { Model } from "../types/session"
 import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 import { uiState, toggleFavoriteModelPreference } from "../stores/preferences"
+import { ProviderManagerModal } from "./provider-auth/provider-manager-modal"
 const log = getLogger("session")
 
 interface ModelSelectorProps {
@@ -52,6 +53,7 @@ export default function ModelSelector(props: ModelSelectorProps) {
   const [initialQuery, setInitialQuery] = createSignal("")
   const [initialQueryReady, setInitialQueryReady] = createSignal(false)
   const [inputValue, setInputValue] = createSignal("")
+  const [providersModalOpen, setProvidersModalOpen] = createSignal(false)
   let triggerRef!: HTMLButtonElement
   let searchInputRef!: HTMLInputElement
   let listboxRef!: HTMLUListElement
@@ -404,6 +406,27 @@ export default function ModelSelector(props: ModelSelectorProps) {
             </div>
             <Combobox.Listbox ref={listboxRef} class="selector-listbox" />
             <div class="selector-footer">
+              <button
+                type="button"
+                class="selector-option selector-option-action w-full"
+                onMouseDown={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                }}
+                onPointerDown={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                }}
+                onClick={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  setIsOpen(false)
+                  setProvidersModalOpen(true)
+                }}
+              >
+                <PlugZap class="w-4 h-4" />
+                <span class="selector-option-label">{t("modelSelector.manageProviders")}</span>
+              </button>
               <button
                 type="button"
                 class="selector-option selector-option-action w-full"
@@ -428,6 +451,7 @@ export default function ModelSelector(props: ModelSelectorProps) {
           </Combobox.Content>
         </Combobox.Portal>
       </Combobox>
+      <ProviderManagerModal instanceId={props.instanceId} open={providersModalOpen()} onOpenChange={setProvidersModalOpen} />
     </div>
   )
 }