feat: instance invites

app/components/ModelSelector.vue

@@ -22,6 +22,9 @@ const openProviderSettings = async (providerId?: string) => {
 };
 
 const isOpen = ref(false);
+
+// nothing to pick from until a provider is set up, so the picker explains that
+const noModels = computed(() => allModels.value.length === 0);
 const dropdownButton = ref<HTMLElement | null>(null);
 const dropdownContent = ref<HTMLElement | null>(null);
 const searchInputRef = ref<HTMLInputElement | null>(null);
@@ -221,11 +224,13 @@ onUnmounted(() => {
             isOpen
                 ? 'bg-[var(--color-hover)] text-[var(--text-primary)]'
                 : 'text-[var(--text-secondary)] @hover:text-[var(--text-primary)] @hover:bg-[var(--color-hover)]',
+            noModels ? 'border border-dashed border-[var(--color-border-active)] !text-[var(--text-primary)]' : '',
         ]">
-        <ModelIcon v-if="selectedModel" class="text-white" :avatar="true" variant="color"
+        <span v-if="noModels" class="i-mynaui-api text-4.5" aria-hidden="true"></span>
+        <ModelIcon v-if="selectedModel && !noModels" class="text-white" :avatar="true" variant="color"
             :model-id="selectedModel.externalId" size="22" />
         <span class="max-w-full truncate">
-            {{ selectedModel ? selectedModel.name : 'Select a model' }}
+            {{ noModels ? 'No models yet' : selectedModel ? selectedModel.name : 'Select a model' }}
         </span>
         <span class="i-mynaui-chevron-down text-3.5 transition-transform duration-200"
             :class="{ 'rotate-180': isOpen }"></span>
@@ -246,9 +251,21 @@ onUnmounted(() => {
                             ? 'hidden'
                             : 'visible',
                     }"
-                    class="fixed z-100 w-full max-w-[420px] min-w-[280px] flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden"
-                    :class="transformOrigin">
+                    :class="[transformOrigin, noModels ? 'max-w-80' : 'max-w-[420px]']"
+                    class="fixed z-100 w-full min-w-[280px] flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden">
 
+                    <div v-if="noModels" class="flex flex-col gap-2.5 p-4">
+                        <div class="font-semibold">No models yet</div>
+                        <p class="text-sm leading-normal text-[var(--text-secondary)]">
+                            Veridian uses your own API keys. Add a provider and its models show up here.
+                        </p>
+                        <button type="button" @click="openProviderSettings()"
+                            class="self-start flex items-center h-8.5 px-3 text-sm font-semibold rounded-md bg-[var(--color-accent)] text-[var(--color-accent-text)]">
+                            Add a provider
+                        </button>
+                    </div>
+
+                    <template v-else>
                     <div class="relative">
                         <span
                             class="i-mynaui-search absolute left-3 top-1/2 -translate-y-1/2 text-4 text-[var(--text-secondary)]"></span>
@@ -305,6 +322,7 @@ onUnmounted(() => {
                             <span class="i-mynaui-arrow-right text-4 ml-auto"></span>
                         </button>
                     </div>
+                    </template>
                 </div>
             </KeepAlive>
         </Transition>