feat: custom models

app/components/ModelInfo.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import type { Entity } from '@triplit/client';
+import { type Model } from '~/types/model';
-import type schema from '#triplit/schema';
 
 const props = withDefaults(defineProps<{
-    model: Entity<typeof schema, 'models'>;
+    model: Model;
     size?: 'small' | 'medium' | 'large';
     details?: boolean;
     showCost?: boolean;
@@ -19,6 +18,10 @@ const props = withDefaults(defineProps<{
     showEdit: false,
 });
 
+const emit = defineEmits<{
+    edit: [model: Model];
+}>();
+
 const triplit = useTriplitClient();
 
 const formatContextWindow = (window: number | null | undefined): string => {
@@ -33,7 +36,7 @@ const hasCapability = (capability: string): boolean => {
 };
 
 const hasInputModality = (modality: string): boolean => {
-    return (props.model.attributes.inputModalities as Readonly<Set<string>>).has(modality);
+    return (props.model.attributes.inputModalities as ReadonlySet<string>).has(modality);
 };
 
 const showCost = computed(() => {
@@ -49,6 +52,10 @@ const toggleModel = async (id: string) => {
 const deleteModel = async () => {
     await triplit.delete('models', props.model.id);
 };
+
+const handleEdit = () => {
+    emit('edit', props.model);
+};
 </script>
 
 <template>
@@ -70,9 +77,14 @@ const deleteModel = async () => {
                         {{ model.externalId }}
                     </span>
                     <div v-if="showEdit" class="flex items-center gap-2">
+                        <!-- Edit button - only for custom models -->
+                        <button v-if="model.isCustom" @click="handleEdit"
+                            class="rounded h-5 w-5 flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-[var(--color-accent)]/30 text-[var(--color-accent)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                            <span class="i-mynaui-pencil text-3.5"></span>
+                        </button>
                         <button @click="deleteModel"
-                            class="rounded h-5 w-5 flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-red-500/30 text-red-500 trannsition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                            class="rounded h-5 w-5 flex items-center justify-center opacity-0 group-hover:opacity-100 hover:bg-red-500/30 text-red-500 transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-                             <span class="i-mynaui-trash text-3.5"></span>
+                            <span class="i-mynaui-trash text-3.5"></span>
                         </button>
                     </div>
                 </div>
@@ -102,17 +114,17 @@ const deleteModel = async () => {
 
         <div class="flex items-center gap-1 shrink-0">
             <div class="flex items-center gap-0.5">
-                <div v-if="hasInputModality('image')"
+                <div v-if="hasInputModality('image')" title="Vision"
                     class="w-4.5 h-4.5 bg-emerald/10 rounded flex items-center justify-center">
-                     <span class="i-mynaui-image text-2.5 text-emerald" title="Vision"></span>
+                    <span class="i-mynaui-image text-2.5 text-emerald"></span>
                 </div>
-                <div v-if="hasCapability('reasoning')"
+                <div v-if="hasCapability('reasoning')" title="Reasoning"
                     class="w-4.5 h-4.5 bg-[color-mix(in_srgb,_transparent_90%,_var(--reasoning-accent)_10%)] rounded flex items-center justify-center">
-                     <span class="i-mynaui-atom text-2.5 text-[var(--reasoning-accent)]" title="Reasoning"></span>
+                    <span class="i-mynaui-atom text-2.5 text-[var(--reasoning-accent)]"></span>
                 </div>
-                <div v-if="hasCapability('tools')"
+                <div v-if="hasCapability('tools')" title="Tools"
                     class="w-4.5 h-4.5 bg-emerald/10 rounded flex items-center justify-center">
-                     <span class="i-mynaui-tool text-2.5 text-sky" title="Tools"></span>
+                    <span class="i-mynaui-tool text-2.5 text-sky"></span>
                 </div>
             </div>
 
@@ -124,4 +136,4 @@ const deleteModel = async () => {
             <Slider v-if="showEdit" :checked="model.enabled" @click="toggleModel(model.id)" />
         </div>
     </div>
-</template>
+</template>

app/components/RowVirtualizerDynamic.vue

@@ -10,11 +10,34 @@ const props = defineProps<{
     prerender?: number;
 }>();
 
+const containerRef = ref<HTMLElement | null>(null);
+const scrollMargin = ref(0);
+
+const updateScrollMargin = () => {
+    if (containerRef.value && props.scrollElement) {
+        const containerRect = containerRef.value.getBoundingClientRect();
+        const scrollRect = props.scrollElement.getBoundingClientRect();
+        scrollMargin.value = containerRect.top - scrollRect.top + props.scrollElement.scrollTop;
+    }
+};
+
+const resizeObserver = new ResizeObserver(updateScrollMargin);
+
+onMounted(() => {
+    resizeObserver.observe(containerRef.value!);
+    updateScrollMargin();
+});
+
+onUnmounted(() => {
+    resizeObserver.disconnect();
+});
+
 const rowVirtualizer = useVirtualizer(computed(() => ({
     count: props.items.length,
     getScrollElement: () => props.scrollElement,
     estimateSize: () => props.minItemSize,
     overscan: props.overscan,
+    scrollMargin: scrollMargin.value,
     getItemKey: (index: number) => props.keyField ? props.items[index]?.[props.keyField] || index : index,
     initialRect: {
         width: 0,
@@ -31,8 +54,6 @@ const measureElement = (el: Element) => {
     }
 
     rowVirtualizer.value.measureElement(el)
-
-    return undefined
 }
 
 watch(() => props.items, () => {
@@ -41,17 +62,17 @@ watch(() => props.items, () => {
 </script>
 
 <template>
-    <div :style="{ height: `${totalSize}px`, width: '100%', position: 'relative' }">
+    <div ref="containerRef" :style="{ height: `${totalSize}px`, width: '100%', position: 'relative' }">
         <div v-for="virtualRow in virtualRows" :ref="(el) => measureElement(el as Element)"
             :key="(virtualRow.key as any | number)" :data-index="virtualRow.index" :style="{
                 position: 'absolute',
                 top: 0,
                 left: 0,
                 width: '100%',
-                height: `${virtualRow.size}`,
+                height: `${virtualRow.size}px`,
-                transform: `translateY(${virtualRow.start}px)`,
+                transform: `translateY(${virtualRow.start - scrollMargin}px)`,
             }">
             <slot :item="props.items[virtualRow.index]" :index="virtualRow.index" />
         </div>
     </div>
-</template>
+</template>

app/components/Settings/AIServiceProvider.vue

@@ -178,6 +178,22 @@ const deleteModels = async () => {
     await Promise.all(provider.value.models.map(m => triplit.delete('models', m.id)));
 };
 
+const enableAllModels = async () => {
+    if (!provider.value) return;
+
+    await Promise.all(provider.value.models.map(m => triplit.update('models', m.id, {
+        enabled: true
+    })));
+};
+
+const disableAllModels = async () => {
+    if (!provider.value) return;
+
+    await Promise.all(provider.value.models.map(m => triplit.update('models', m.id, {
+        enabled: false
+    })));
+};
+
 const enabledModels = computed(() =>
     filterModels(provider.value?.models.filter(m => m.enabled === true) as Model[] || [], modelSearch.value)
         .sort(sortByReleaseDate)
@@ -188,6 +204,164 @@ const disabledModels = computed(() =>
         .sort(sortByReleaseDate)
 )
 
+// ============================================
+// Custom Model Add/Edit Panel
+// ============================================
+
+const showAddModelPanel = ref(false);
+const editingModel = ref<Model | null>(null);
+
+interface ModelFormData {
+    name: string;
+    externalId: string;
+    contextWindow: string;
+    capabilities: string[];
+    promptCost: string;
+    completionCost: string;
+    reasoning: boolean;
+    tools: boolean;
+    vision: boolean;
+}
+
+const defaultFormData: ModelFormData = {
+    name: '',
+    externalId: '',
+    contextWindow: '',
+    capabilities: [],
+    promptCost: '',
+    completionCost: '',
+    reasoning: false,
+    tools: false,
+    vision: false,
+};
+
+const formData = ref<ModelFormData>({ ...defaultFormData });
+
+const availableCapabilities = ['reasoning', 'tools', 'vision'];
+
+const toggleCapability = (cap: string) => {
+    const idx = formData.value.capabilities.indexOf(cap);
+    if (idx === -1) {
+        formData.value.capabilities.push(cap);
+    } else {
+        formData.value.capabilities.splice(idx, 1);
+    }
+
+    if (cap === 'reasoning') {
+        formData.value.reasoning = formData.value.capabilities.includes('reasoning');
+    } else if (cap === 'tools') {
+        formData.value.tools = formData.value.capabilities.includes('tools');
+    } else if (cap === 'vision') {
+        formData.value.vision = formData.value.capabilities.includes('vision');
+    }
+};
+
+const resetForm = () => {
+    formData.value = { ...defaultFormData };
+    formData.value.capabilities = [];
+    editingModel.value = null;
+};
+
+const openAddPanel = () => {
+    resetForm();
+    showAddModelPanel.value = true;
+};
+
+const openEditPanel = (model: Model) => {
+    editingModel.value = model;
+    formData.value = {
+        name: model.name || '',
+        externalId: model.externalId || '',
+        contextWindow: model.attributes?.contextWindow?.toString() || '',
+        capabilities: [...(model.attributes?.capabilities || [])],
+        promptCost: model.cost?.prompt || '',
+        completionCost: model.cost?.completion || '',
+        reasoning: model.attributes?.capabilities?.has('reasoning') || false,
+        tools: model.attributes?.capabilities?.has('tools') || false,
+        vision: model.attributes?.capabilities?.has('vision') || false,
+    };
+    showAddModelPanel.value = true;
+};
+
+const { user } = useAuth();
+
+// Preview model that reacts to form changes
+const previewModel = computed(() => {
+    if (!formData.value.name || !formData.value.externalId) return null;
+
+    const inputModalities = new Set<string>(['text']);
+    const outputModalities = new Set<string>(['text']);
+
+    if (formData.value.capabilities.includes('vision')) {
+        inputModalities.add('image');
+    }
+
+    return {
+        userId: user.value?.id!,
+        id: editingModel.value?.id || 'preview',
+        providerId: provider.value?.id || '',
+        name: formData.value.name,
+        externalId: formData.value.externalId || 'model/id',
+        cost: {
+            prompt: formData.value.promptCost ? formatMoney(formData.value.promptCost) : undefined,
+            completion: formData.value.completionCost ? formatMoney(formData.value.completionCost) : undefined,
+        },
+        attributes: {
+            inputModalities,
+            outputModalities,
+            capabilities: new Set(formData.value.capabilities.filter(c => c !== 'vision') as any),
+            contextWindow: formData.value.contextWindow ? parseInt(formData.value.contextWindow) : null,
+        },
+        isCustom: true,
+        enabled: true,
+        provider: provider.value!,
+    } as Model;
+});
+
+const saveCustomModel = async () => {
+    if (!provider.value || !formData.value.name || !formData.value.externalId) return;
+
+    const { id, ...previewModelWithoutId } = previewModel.value!;
+    if (editingModel.value) {
+        // Update existing model
+        await triplit.update('models', editingModel.value.id, previewModelWithoutId);
+    } else {
+        // Insert new custom model
+        await triplit.insert('models', previewModelWithoutId);
+    }
+
+    showAddModelPanel.value = false;
+    resetForm();
+};
+
+const cancelPanel = () => {
+    showAddModelPanel.value = false;
+    resetForm();
+};
+
+const formatMoney = (value: string) => {
+    // ensure that there are two decimal places MINIMUM I WILL STRANGLE YOU SO HELP ME GOD
+    let [integerPart, fractionalPart] = value.split('.');
+
+    if (fractionalPart === undefined || fractionalPart === '') {
+        fractionalPart = '00';
+    }
+
+    if (fractionalPart.length === 1) {
+        fractionalPart += '0';
+    }
+
+    if (integerPart!.length === 0) {
+        integerPart = '0';
+    }
+
+    return `${integerPart}.${fractionalPart}`;
+}
+
+const isFormValid = computed(() => {
+    return formData.value.name.trim() && formData.value.externalId.trim();
+});
+
 defineEmits(['navigate']);
 </script>
 
@@ -259,43 +433,191 @@ defineEmits(['navigate']);
                         <span class="i-mynaui-refresh" :class="{ 'animate-rotate': fetchingModels }"></span>
                         fetch models
                     </button>
+
+                    <div class="flex">
+                        <button @click="openAddPanel"
+                            class="whitespace-nowrap flex bg-[var(--bg-container)] hover:bg-[var(--color-hover)] text-sm rounded-l-md items-center px-2 py-0.5 gap-2 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                            <span class="i-mynaui-plus text-5"></span>
+                        </button>
+
+                        <div class="relative">
+                            <Dropdown placement="bottom-end">
+                                <template #default="{ toggle, setRef }">
+                                    <button :ref="setRef" @click="toggle"
+                                        class="whitespace-nowrap flex bg-[var(--bg-container)] hover:bg-[var(--color-hover)] text-sm rounded-r-md items-center px-1 py-0.5 gap-2 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                                        <span class="i-mynaui-dots-vertical text-5"></span>
+                                    </button>
+                                </template>
+
+                                <template #dropdown="{ close }">
+                                    <button @click="enableAllModels(); close()"
+                                        class="truncate flex items-center gap-2 w-full text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
+                                        <span class="text-5 i-mynaui-toggle-right-solid"></span>
+                                        Enable All
+                                    </button>
+                                    <button @click="disableAllModels(); close()"
+                                        class="truncate flex items-center gap-2 w-full text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
+                                        <span class="text-5 i-mynaui-toggle-left"></span>
+                                        Disable All
+                                    </button>
+                                </template>
+                            </Dropdown>
+                        </div>
+                    </div>
                 </div>
             </div>
 
-            <div v-if="provider?.models?.length === 0" class="flex flex-row items-center justify-center gap-2 mt-2">
+            <!-- Add/Edit Custom Model Panel -->
-                <span class="i-mynaui-info-circle text-4"></span>
+            <div class="mt-2">
-                <span class="text-sm text-[var(--text-secondary)]">
+                <!-- Expansion panel with grid-template-rows animation -->
-                    No models found
+                <div class="grid transition-[grid-template-rows] duration-300 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
-                </span>
+                    :class="showAddModelPanel ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'">
-            </div>
+                    <div class="overflow-hidden">
+                        <div
+                            class="pt-3 pb-4 px-3 bg-[var(--bg-container)] border border-[var(--color-border)] rounded-lg mt-2">
+                            <!-- Header -->
+                            <div class="flex items-center justify-between mb-4">
+                                <h5 class="text-sm font-medium text-[var(--text-primary)] m-0">
+                                    {{ editingModel ? 'Edit Custom Model' : 'Add Custom Model' }}
+                                </h5>
+                                <button @click="cancelPanel"
+                                    class="p-1 hover:bg-[var(--color-hover)] rounded transition-colors duration-200">
+                                    <span class="i-mynaui-x text-4 text-[var(--text-secondary)]"></span>
+                                </button>
+                            </div>
 
-            <ClientOnly v-else>
+                            <!-- Form -->
-                <div class="flex flex-col gap-1 mt-2">
+                            <div class="flex flex-col gap-3">
-                    <span v-if="enabledModels.length > 0" class="text-sm text-[var(--text-secondary)]">
+                                <!-- Model Name -->
-                        Enabled
+                                <div class="flex flex-col gap-1">
-                    </span>
+                                    <label class="text-xs text-[var(--text-secondary)]">Model Name</label>
-                    <div class="flex flex-col gap-1">
+                                    <input v-model="formData.name" type="text" placeholder="e.g., GPT-4 Turbo"
-                        <RowVirtualizerDynamic :items="enabledModels" key-field="id"
+                                        class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
-                            :scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
+                                </div>
-                            <template v-slot="{ item: model }">
-                                <ModelItem :model="model" />
-                            </template>
-                        </RowVirtualizerDynamic>
-                    </div>
 
-                    <span v-if="disabledModels.length > 0" class="text-sm text-[var(--text-secondary)]">
+                                <!-- Model ID -->
-                        Disabled
+                                <div class="flex flex-col gap-1">
-                    </span>
+                                    <label class="text-xs text-[var(--text-secondary)]">Model ID</label>
-                    <div class="flex flex-col gap-1">
+                                    <input v-model="formData.externalId" type="text" placeholder="e.g., gpt-4-turbo"
-                        <RowVirtualizerDynamic :items="disabledModels" key-field="id"
+                                        class="w-full px-3 py-2 text-sm font-mono bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
-                            :scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
+                                </div>
-                            <template v-slot="{ item: model }">
+
-                                <ModelItem :model="model" />
+                                <!-- Context Window -->
-                            </template>
+                                <div class="flex flex-col gap-1">
-                        </RowVirtualizerDynamic>
+                                    <label class="text-xs text-[var(--text-secondary)]">Context Window (tokens)</label>
+                                    <input v-model="formData.contextWindow" type="text" placeholder="e.g., 128000"
+                                        class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
+                                </div>
+
+                                <!-- Capabilities -->
+                                <div class="flex flex-col gap-1">
+                                    <label class="text-xs text-[var(--text-secondary)]">Capabilities</label>
+                                    <div class="flex gap-2">
+                                        <button v-for="cap in availableCapabilities" :key="cap"
+                                            @click="toggleCapability(cap)"
+                                            class="px-3 py-1.5 text-xs rounded-md border transition-colors duration-200 capitalize"
+                                            :class="formData.capabilities.includes(cap)
+                                                ? 'bg-[var(--color-accent)] text-white border-[var(--color-accent)]'
+                                                : 'bg-[var(--bg-surface)] border-[var(--color-border)] text-[var(--text-secondary)] hover:border-[var(--color-accent)]'">
+                                            {{ cap }}
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- Pricing -->
+                                <div class="grid grid-cols-2 gap-3">
+                                    <div class="flex flex-col gap-1">
+                                        <label class="text-xs text-[var(--text-secondary)]">Prompt Cost ($/1M
+                                            tokens)</label>
+                                        <input v-model="formData.promptCost" type="text" placeholder="e.g., 10.00"
+                                            class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
+                                    </div>
+                                    <div class="flex flex-col gap-1">
+                                        <label class="text-xs text-[var(--text-secondary)]">Completion Cost ($/1M
+                                            tokens)</label>
+                                        <input v-model="formData.completionCost" type="text" placeholder="e.g., 30.00"
+                                            class="w-full px-3 py-2 text-sm bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md placeholder:text-[var(--text-tertiary)] focus:outline-none focus:border-[var(--color-accent)] transition-colors duration-200" />
+                                    </div>
+                                </div>
+
+                                <!-- Preview Section -->
+                                <div v-if="previewModel" class="mt-3 pt-3 border-t border-[var(--color-border)]">
+                                    <div class="flex items-center gap-2 mb-2">
+                                        <span class="i-mynaui-eye text-3.5 text-[var(--text-secondary)]"></span>
+                                        <span class="text-xs text-[var(--text-secondary)]">Preview</span>
+                                    </div>
+                                    <div
+                                        class="p-3 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-md">
+                                        <ModelInfo :details="true" :model="previewModel!" :show-edit="false"
+                                            :show-cost="true" :show-external-id="true" :show-release-date="true" />
+                                    </div>
+                                </div>
+
+                                <!-- Actions -->
+                                <div
+                                    class="flex items-center justify-between pt-2 mt-1 border-t border-[var(--color-border)]">
+                                    <span class="text-xs text-[var(--text-tertiary)]">
+                                        {{
+                                            editingModel
+                                                ? 'Changes will be saved to existing model'
+                                                : 'Creates a new custom model'
+                                        }}
+                                    </span>
+                                    <div class="flex gap-2">
+                                        <button @click="cancelPanel"
+                                            class="px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)] rounded-md transition-colors duration-200">
+                                            Cancel
+                                        </button>
+                                        <button @click="saveCustomModel" :disabled="!isFormValid"
+                                            class="px-3 py-1.5 text-sm bg-[var(--color-accent)] text-white rounded-md hover:opacity-90 transition-opacity duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
+                                            {{ editingModel ? 'Save Changes' : 'Add Model' }}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </ClientOnly>
+            </div>
+
+            <div class="mt-2">
+                <div v-if="provider?.models?.length === 0" class="flex flex-row items-center justify-center gap-2 mt-2">
+                    <span class="i-mynaui-info-circle text-4"></span>
+                    <span class="text-sm text-[var(--text-secondary)]">
+                        No models found
+                    </span>
+                </div>
+
+                <ClientOnly v-else>
+                    <div v-if="enabledModels.length > 0" class="flex flex-col gap-1">
+                        <span class="text-sm text-[var(--text-secondary)]">
+                            Enabled
+                        </span>
+                        <div class="flex flex-col gap-1">
+                            <RowVirtualizerDynamic :items="enabledModels" key-field="id"
+                                :scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
+                                <template v-slot="{ item: model }">
+                                    <ModelItem :model="model" @edit="openEditPanel" />
+                                </template>
+                            </RowVirtualizerDynamic>
+                        </div>
+                    </div>
+
+                    <div v-if="disabledModels.length > 0" class="flex flex-col gap-1">
+                        <span class="text-sm text-[var(--text-secondary)]">
+                            Disabled
+                        </span>
+                        <div class="flex flex-col gap-1">
+                            <RowVirtualizerDynamic :items="disabledModels" key-field="id"
+                                :scroll-element="scrollContainerRef" :min-item-size="64" :overscan="20">
+                                <template v-slot="{ item: model }">
+                                    <ModelItem :model="model" @edit="openEditPanel" />
+                                </template>
+                            </RowVirtualizerDynamic>
+                        </div>
+                    </div>
+                </ClientOnly>
+            </div>
         </div>
     </div>
 </template>

app/components/Settings/ModelItem.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
+import { type Model } from '~/types/model';
+
 const props = defineProps<{ model: ModelWithProvider; }>();
+
+const emit = defineEmits<{
+    edit: [model: Model];
+}>();
+
+const handleEdit = (model: Model) => {
+    emit('edit', model);
+};
 </script>
 
 <template>
     <div
         class="p-3 text-white flex max-w-full items-center justify-between gap-2 group hover:bg-[var(--color-hover)] transition duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
         <ModelInfo :details="true" :model="model" :show-edit="true" :show-cost="true" :show-external-id="true"
-            :show-release-date="true" />
+            :show-release-date="true" @edit="handleEdit" />
     </div>
-</template>
+</template>