change sizing slightly and add sentry

app/components/ChatInput.vue

@@ -68,6 +68,13 @@ watch(selectedModel, (newModel) => {
 
 // Initialize when providers change
 watch(() => props.providers, initializeModel, { immediate: true });
+watch(() => props.agent?.defaultModelId, (newModelId) => {
+    const agentModel = allModels.value.find((m) => m.id === newModelId);
+    if (agentModel) {
+        selectedModel.value = agentModel;
+        return;
+    }
+})
 
 const handleSubmit = () => {
     if (props.loading) {

app/components/ModelInfo.vue

@@ -4,13 +4,15 @@ import type schema from '#triplit/schema';
 
 const props = withDefaults(defineProps<{
     model: Entity<typeof schema, 'models'>;
-    size?: 'small' | 'normal';
+    size?: 'small' | 'medium' | 'large';
+    details?: boolean;
     showCost?: boolean;
     showEdit?: boolean;
     showExternalId?: boolean;
     showReleaseDate?: boolean;
 }>(), {
-    size: 'normal',
+    size: 'large',
+    details: false,
     showCost: false,
     showExternalId: false,
     showReleaseDate: false,
@@ -63,12 +65,15 @@ const deleteModel = async () => {
 <template>
     <div class="flex items-center justify-between w-full" v-bind="$attrs">
         <div class="flex items-center gap-2 min-w-0 flex-1">
-            <ModelIcon :class="size === 'normal' ? 'rounded-lg overflow-hidden' : ''" :avatar="true" variant="color"
-                :model-id="model.externalId" :size="size === 'small' ? '20' : '32'" />
+            <ModelIcon :class="{
+                'rounded-lg overflow-hidden': size === 'large',
+                'rounded-md overflow-hidden': size === 'medium' || size === 'small',
+            }" :avatar="true" variant="color" :model-id="model.externalId"
+                :size="size === 'small' ? '20' : size === 'medium' ? '26' : '32'" />
 
             <div class="flex flex-col gap-1 min-w-0 flex-1">
                 <div class="flex items-center gap-1 min-w-0">
-                    <span class="text-sm font-medium text-[var(--color-text)] truncate min-w-0">
+                    <span class="text-[15px] font-medium text-[var(--color-text)] truncate min-w-0">
                         {{ model.name }}
                     </span>
                     <span v-if="showExternalId"
@@ -83,7 +88,7 @@ const deleteModel = async () => {
                     </div>
                 </div>
 
-                <div v-if="size === 'normal'" class="flex items-center gap-1.5 flex-wrap">
+                <div v-if="details" class="flex items-center gap-1.5 flex-wrap">
                     <span v-if="showReleaseDate && model.releasedAt"
                         class="text-xs text-[var(--color-muted)] whitespace-nowrap">
                         Released on {{ model.releasedAt.toISOString().split('T')[0] }}

app/components/ModelSelector.vue

@@ -164,7 +164,7 @@ onUnmounted(() => {
 
                     <div v-for="provider in filteredProviders" :key="provider.id" class="mb-2">
                         <div
-                            class="px-4 py-1.5 text-xs font-medium text-[var(--color-muted)] capitalize tracking-wider flex justify-between">
+                            class="px-4 py-1.5 text-[13px] font-medium text-[var(--color-muted)] capitalize tracking-wider flex justify-between">
                             {{ provider.name }}
                             <button @click="isOpen = true; setPage('providers', provider.id)"
                                 class="flex h-4.5 w-4.5 items-center justify-center hover:bg-[var(--color-highlight)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
@@ -177,7 +177,7 @@ onUnmounted(() => {
                             :key="model.id" @click="selectModel(model, provider); isOpen = false"
                             class="text-white w-full min-h-9 px-4 py-2 flex items-center justify-between hover:bg-[var(--color-highlight-low)] transition-colors duration-150"
                             :class="{ 'bg-[var(--color-highlight-low)]': selectedModel?.id === model.id }">
-                            <ModelInfo :model="model" size="small" />
+                            <ModelInfo :model="model" size="medium" />
                         </button>
                     </div>
                 </div>

app/components/Settings/ModelItem.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 <template>
     <div
         class="p-3 text-white flex max-w-full items-center justify-between gap-2 group hover:bg-[var(--color-highlight-low)] transition duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-        <ModelInfo :model="model" :show-edit="true" :show-cost="true" :show-external-id="true"
+        <ModelInfo :details="true" :model="model" :show-edit="true" :show-cost="true" :show-external-id="true"
             :show-release-date="true" />
     </div>
 </template>