@mongoosejs/studio 0.2.13 → 0.3.0

package/frontend/src/document-details/document-details.js

@@ -22,8 +22,7 @@ module.exports = app => app.component('document-details', {
         value: ''
       },
       fieldErrors: {},
-      isSubmittingField: false,
-      fieldValueEditor: null
+      isSubmittingField: false
     };
   },
   mounted() {
@@ -32,32 +31,11 @@ module.exports = app => app.component('document-details', {
       if (this.$refs.searchInput) {
         this.$refs.searchInput.focus();
       }
-
-      if (this.showAddFieldModal) {
-        this.initializeFieldValueEditor();
-      }
     });
 
     this.searchQuery = this.getSearchQueryFromRoute();
   },
-  beforeDestroy() {
-    this.destroyFieldValueEditor();
-  },
   watch: {
-    'fieldData.type'(newType, oldType) {
-      // When field type changes, we need to handle the transition
-      if (newType !== oldType) {
-        // Destroy existing CodeMirror if it exists
-        this.destroyFieldValueEditor();
-
-        // If switching to a type that needs CodeMirror, initialize it
-        if (this.shouldUseCodeMirror) {
-          this.$nextTick(() => {
-            this.initializeFieldValueEditor();
-          });
-        }
-      }
-    },
     searchQuery(newValue) {
       this.syncSearchQueryToUrl(newValue);
     },
@@ -122,7 +100,7 @@ module.exports = app => app.component('document-details', {
       const allTypes = new Set([...schemaTypes, ...commonTypes]);
       return Array.from(allTypes).sort();
     },
-    shouldUseCodeMirror() {
+    shouldUseAce() {
       return ['Array', 'Object', 'Embedded'].includes(this.fieldData.type);
     },
     shouldUseDatePicker() {
@@ -313,15 +291,9 @@ module.exports = app => app.component('document-details', {
     },
     openAddFieldModal() {
       this.showAddFieldModal = true;
-      this.$nextTick(() => {
-        if (this.shouldUseCodeMirror) {
-          this.initializeFieldValueEditor();
-        }
-      });
     },
     closeAddFieldModal() {
       this.showAddFieldModal = false;
-      this.destroyFieldValueEditor();
       this.resetFieldForm();
     },
     async addNewField(fieldData) {
@@ -430,29 +402,6 @@ module.exports = app => app.component('document-details', {
       };
       this.fieldErrors = {};
       this.isSubmittingField = false;
-      // Reset CodeMirror editor if it exists
-      if (this.fieldValueEditor) {
-        this.fieldValueEditor.setValue('');
-      }
-    },
-    initializeFieldValueEditor() {
-      if (this.$refs.fieldValueEditor && !this.fieldValueEditor && this.shouldUseCodeMirror) {
-        this.$refs.fieldValueEditor.value = this.fieldData.value || '';
-        this.fieldValueEditor = CodeMirror.fromTextArea(this.$refs.fieldValueEditor, {
-          mode: 'javascript',
-          lineNumbers: true,
-          height: 'auto'
-        });
-        this.fieldValueEditor.on('change', () => {
-          this.fieldData.value = this.fieldValueEditor.getValue();
-        });
-      }
-    },
-    destroyFieldValueEditor() {
-      if (this.fieldValueEditor) {
-        this.fieldValueEditor.toTextArea();
-        this.fieldValueEditor = null;
-      }
     },
     getVirtualFieldType(virtual) {
       const value = virtual.value;

package/frontend/src/document-details/document-property/document-property.html

@@ -1,29 +1,29 @@
-<div class="border border-gray-200 bg-white rounded-lg mb-2" style="overflow: visible;">
+<div class="border border-edge bg-surface rounded-lg mb-2" style="overflow: visible;">
   <!-- Collapsible Header -->
   <div
     @click="toggleCollapse"
-    class="p-1 cursor-pointer flex items-center justify-between border-b border-gray-200 transition-colors duration-200 ease-in-out"
-    :class="{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-gray-100': !highlight }"
+    class="p-1 cursor-pointer flex items-center justify-between border-b border-edge transition-colors duration-200 ease-in-out"
+    :class="{ 'bg-amber-100 hover:bg-amber-200': highlight, 'bg-slate-100 hover:bg-muted': !highlight }"
     style="overflow: visible; position: relative;"
   >
     <div class="flex items-center" >
       <svg
         :class="isCollapsed ? 'rotate-0' : 'rotate-90'"
-        class="w-4 h-4 text-gray-500 mr-2 transition-transform duration-200"
+        class="w-4 h-4 text-content-tertiary mr-2 transition-transform duration-200"
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"
       >
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
       </svg>
-      <span class="font-medium text-gray-900">{{path.path}}</span>
-      <span class="ml-2 text-sm text-gray-500">({{(path.instance || 'unknown').toLowerCase()}})</span>
+      <span class="font-medium text-content">{{path.path}}</span>
+      <span class="ml-2 text-sm text-content-tertiary">({{(path.instance || 'unknown').toLowerCase()}})</span>
       <div v-if="isGeoJsonGeometry" class="ml-3 inline-flex items-center gap-2">
         <div class="inline-flex items-center rounded-full bg-gray-200 p-0.5 text-xs font-semibold">
           <button
             type="button"
             class="rounded-full px-2.5 py-0.5 transition"
-            :class="detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-gray-700 hover:text-gray-900'"
+            :class="detailViewMode === 'text' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'"
             :style="detailViewMode === 'text' ? 'color: white !important; background-color: #2563eb !important;' : ''"
             @click.stop="setDetailViewMode('text')">
             Text
@@ -31,7 +31,7 @@
           <button
             type="button"
             class="rounded-full px-2.5 py-0.5 transition"
-            :class="detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-gray-700 hover:text-gray-900'"
+            :class="detailViewMode === 'map' ? 'bg-blue-600 text-white shadow' : 'text-content-secondary hover:text-content'"
             :style="detailViewMode === 'map' ? 'color: white !important; background-color: #2563eb !important;' : ''"
             @click.stop="setDetailViewMode('map')">
             Map
@@ -72,7 +72,7 @@
     <div class="flex items-center gap-2">
       <button
         type="button"
-        class="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-gray-300 bg-white"
+        class="flex items-center gap-1 text-sm text-gray-600 hover:text-gray-800 px-2 py-1 rounded-md border border-transparent hover:border-edge-strong bg-surface"
         @click.stop.prevent="copyPropertyValue"
         title="Copy value"
         aria-label="Copy property value"
@@ -85,7 +85,7 @@
       <router-link
         v-if="path.ref && getValueForPath(path.path)"
         :to="`/model/${path.ref}/document/${getValueForPath(path.path)}`"
-        class="bg-ultramarine-600 hover:bg-ultramarine-500 text-white px-2 py-1 text-sm rounded-md"
+        class="bg-primary hover:bg-primary-hover text-primary-text px-2 py-1 text-sm rounded-md"
         @click.stop
         >View Document
       </router-link>
@@ -163,7 +163,7 @@
             <div v-else class="text-xs py-1.5 px-2 font-mono text-gray-800 break-words whitespace-pre-wrap mt-1">{{ arrayUtils.formatValue(item) }}</div>
           </div>
           <div class="mb-1.5 py-2.5 px-3 pl-4 bg-transparent border-none border-l-[3px] border-l-blue-500 rounded-none transition-all duration-200 cursor-pointer relative opacity-70 hover:opacity-100">
-            <div class="text-xs py-1.5 px-2 font-mono text-gray-500 italic break-words whitespace-pre-wrap mt-1">
+            <div class="text-xs py-1.5 px-2 font-mono text-content-tertiary italic break-words whitespace-pre-wrap mt-1">
               ... and {{ remainingArrayCount }} more item{{ remainingArrayCount !== 1 ? 's' : '' }}
             </div>
           </div>
@@ -180,7 +180,7 @@
       </div>
       <!-- Non-array truncated view -->
       <div v-else-if="shouldShowTruncated && !isArray" class="relative">
-        <div class="text-gray-700 whitespace-pre-wrap break-words font-mono text-sm">{{truncatedString}}</div>
+        <div class="text-content-secondary whitespace-pre-wrap break-words font-mono text-sm">{{truncatedString}}</div>
         <button
           @click="toggleValueExpansion"
           class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center gap-1 transform transition-all duration-200 ease-in-out hover:translate-x-0.5"

package/frontend/src/edit-array/edit-array.html

@@ -1,8 +1,9 @@
 <div class="w-full">
-  <!-- CodeMirror editor for the entire array -->
-  <textarea
-    ref="arrayEditor"
-    class="w-full border border-gray-300 p-2 font-mono"
-    :style="{ minHeight: '300px' }">
-  </textarea>
+  <ace-editor
+    :value="arrayStr"
+    @input="onEditorInput"
+    mode="json"
+    :line-numbers="true"
+    class="min-h-[300px]"
+  />
 </div>

package/frontend/src/edit-array/edit-array.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const template = require('./edit-array.html');
-
 const { BSON } = require('mongodb/lib/bson');
 
 const ObjectId = new Proxy(BSON.ObjectId, {
@@ -16,10 +15,14 @@ module.exports = app => app.component('edit-array', {
   props: ['value'],
   data() {
     return {
-      arrayValue: [],
-      arrayEditor: null
+      arrayValue: []
     };
   },
+  computed: {
+    arrayStr() {
+      return JSON.stringify(this.arrayValue, null, 2);
+    }
+  },
   methods: {
     initializeArray() {
       if (this.value == null) {
@@ -29,42 +32,13 @@ module.exports = app => app.component('edit-array', {
       } else {
         this.arrayValue = [];
       }
-      
-      // Update CodeMirror editor if it exists
-      this.$nextTick(() => {
-        if (this.arrayEditor) {
-          const arrayStr = JSON.stringify(this.arrayValue, null, 2);
-          this.arrayEditor.setValue(arrayStr);
-        }
-      });
-    },
-    initializeArrayEditor() {
-      this.$nextTick(() => {
-        const textareaRef = this.$refs.arrayEditor;
-        const textarea = Array.isArray(textareaRef) ? textareaRef[0] : textareaRef;
-        if (textarea && !this.arrayEditor) {
-          const arrayStr = JSON.stringify(this.arrayValue, null, 2);
-          textarea.value = arrayStr;
-          this.arrayEditor = CodeMirror.fromTextArea(textarea, {
-            mode: 'javascript',
-            lineNumbers: true
-          });
-          this.arrayEditor.on('change', () => {
-            this.updateArrayFromEditor();
-          });
-        }
-      });
     },
-    updateArrayFromEditor() {
-      if (!this.arrayEditor) {
-        return;
-      }
+    onEditorInput(str) {
       try {
-        const value = this.arrayEditor.getValue();
-        if (value.trim() === '') {
+        if (str.trim() === '') {
           this.arrayValue = [];
         } else {
-          this.arrayValue = JSON.parse(value);
+          this.arrayValue = JSON.parse(str);
         }
         this.emitUpdate();
       } catch (err) {
@@ -81,25 +55,11 @@ module.exports = app => app.component('edit-array', {
   },
   mounted() {
     this.initializeArray();
-    this.initializeArrayEditor();
-  },
-  beforeDestroy() {
-    if (this.arrayEditor) {
-      this.arrayEditor.toTextArea();
-    }
   },
   watch: {
     value: {
-      handler(newValue, oldValue) {
-        // Initialize array when value prop changes
+      handler() {
         this.initializeArray();
-        // Update array editor if it exists
-        if (this.arrayEditor) {
-          this.$nextTick(() => {
-            const arrayStr = JSON.stringify(this.arrayValue, null, 2);
-            this.arrayEditor.setValue(arrayStr);
-          });
-        }
       },
       deep: true,
       immediate: true

package/frontend/src/edit-boolean/edit-boolean.html

@@ -1,45 +1,45 @@
 <div class="edit-boolean">
   <div class="flex flex-wrap gap-2">
-    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50" 
-           :class="selectedValue === true ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-page" 
+           :class="selectedValue === true ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-edge-strong text-content-secondary'">
       <input
         type="radio"
         :checked="selectedValue === true"
         @change="selectValue(true)"
-        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+        class="w-4 h-4 text-blue-600 border-edge-strong focus:ring-blue-500"
       />
       <span class="text-sm font-medium">true</span>
     </label>
     
-    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50"
-           :class="selectedValue === false ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-page"
+           :class="selectedValue === false ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-edge-strong text-content-secondary'">
       <input
         type="radio"
         :checked="selectedValue === false"
         @change="selectValue(false)"
-        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+        class="w-4 h-4 text-blue-600 border-edge-strong focus:ring-blue-500"
       />
       <span class="text-sm font-medium">false</span>
     </label>
     
-    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50"
-           :class="selectedValue === null ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-page"
+           :class="selectedValue === null ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-edge-strong text-content-secondary'">
       <input
         type="radio"
         :checked="selectedValue === null"
         @change="selectValue(null)"
-        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+        class="w-4 h-4 text-blue-600 border-edge-strong focus:ring-blue-500"
       />
       <span class="text-sm font-medium">null</span>
     </label>
     
-    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-gray-50"
-           :class="selectedValue === undefined ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-gray-300 text-gray-700'">
+    <label class="flex items-center gap-2 px-3 py-2 border rounded cursor-pointer hover:bg-page"
+           :class="selectedValue === undefined ? 'bg-blue-100 border-blue-300 text-blue-800' : 'border-edge-strong text-content-secondary'">
       <input
         type="radio"
         :checked="selectedValue === undefined"
         @change="selectValue(undefined)"
-        class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
+        class="w-4 h-4 text-blue-600 border-edge-strong focus:ring-blue-500"
       />
       <span class="text-sm font-medium">undefined</span>
     </label>

package/frontend/src/edit-date/edit-date.html

@@ -1,14 +1,14 @@
 <div>
   <input
     v-if="dateSelection == 'picker'"
-    class="w-64 h-8 border border-gray-300 outline-0"
+    class="w-64 h-8 border border-edge-strong outline-0"
     type="datetime-local"
     :value="valueAsLocalString"
     @input="$emit('input', $event.target.value)">
   <input
     v-if="dateSelection == 'iso'"
     type="text"
-    class="w-64 h-8 border border-gray-300 outline-0"
+    class="w-64 h-8 border border-edge-strong outline-0"
     :value="valueAsISOString"
     @input="updateFromISO">
 </div>

package/frontend/src/edit-default/edit-default.html

@@ -1,3 +1,3 @@
 <div>
-  <input type="text" :value="value" @input="$emit('input', $event.target.value)" class="w-full p-1 border border-gray-300 outline-0">
+  <input type="text" :value="value" @input="$emit('input', $event.target.value)" class="w-full p-1 border border-edge-strong outline-0">
 </div>

package/frontend/src/edit-string/edit-string.html

@@ -1,7 +1,7 @@
 <div>
   <div v-if="hasEnumValues" class="space-y-2">
     <select
-      class="w-full px-3 py-2 border border-gray-300 bg-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+      class="w-full px-3 py-2 border border-edge-strong bg-surface rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
       :value="selectedOption"
       @change="onSelectChange"
     >
@@ -14,7 +14,7 @@
     <input
       v-if="selectedOption === '__other'"
       type="text"
-      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+      class="w-full px-3 py-2 border border-edge-strong rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
       :value="otherValue"
       @input="onOtherInput"
       placeholder="Enter a value"
@@ -23,7 +23,7 @@
   <div v-else>
     <input
       type="text"
-      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+      class="w-full px-3 py-2 border border-edge-strong rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
       :value="value != null ? value : ''"
       @input="onTextInput"
       placeholder="Enter a value"

package/frontend/src/edit-subdocument/edit-subdocument.html

@@ -1,6 +1,8 @@
 <div class="edit-subdocument">
-  <textarea
-    ref="editor"
+  <ace-editor
     v-model="currentValue"
-    class="w-full border border-gray-300 p-1 h-[300px]"></textarea>
+    mode="javascript"
+    :line-numbers="true"
+    class="w-full h-[300px] min-h-[200px]"
+  />
 </div>

package/frontend/src/edit-subdocument/edit-subdocument.js

@@ -1,7 +1,6 @@
 'use strict';
 
 const template = require('./edit-subdocument.html');
-
 const { BSON, EJSON } = require('mongodb/lib/bson');
 
 const ObjectId = new Proxy(BSON.ObjectId, {
@@ -13,19 +12,11 @@ const ObjectId = new Proxy(BSON.ObjectId, {
 module.exports = app => app.component('edit-subdocument', {
   template: template,
   props: ['value'],
-  data: () => ({ currentValue: null, status: 'init' }),
+  data: () => ({ currentValue: '', status: 'init' }),
   mounted() {
     this.currentValue = this.value == null
       ? '' + this.value
       : JSON.stringify(this.value, null, '  ').trim();
-    this.$refs.editor.value = this.currentValue;
-    this.editor = CodeMirror.fromTextArea(this.$refs.editor, {
-      mode: 'javascript',
-      lineNumbers: true
-    });
-    this.editor.on('change', ev => {
-      this.currentValue = this.editor.getValue();
-    });
     this.status = 'loaded';
   },
   watch: {
@@ -41,10 +32,5 @@ module.exports = app => app.component('edit-subdocument', {
       }
     }
   },
-  beforeDestroy() {
-    if (this.editor) {
-      this.editor.toTextArea();
-    }
-  },
   emits: ['input', 'error']
 });

package/frontend/src/export-query-results/export-query-results.html

@@ -4,10 +4,10 @@
     Choose fields to export
   </div>
   <div v-for="(schemaPath,index) in schemaPaths" class="w-5 flex items-center">
-    <input type="checkbox" class="mt-0 h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600 accent-sky-600" v-model="shouldExport[schemaPath.path]" :id="'schemaPath.path'+index">
-    <div class="ml-2 text-gray-700 grow shrink text-left">
+    <input type="checkbox" class="mt-0 h-4 w-4 rounded border-edge-strong text-sky-600 focus:ring-sky-600 accent-sky-600" v-model="shouldExport[schemaPath.path]" :id="'schemaPath.path'+index">
+    <div class="ml-2 text-content-secondary grow shrink text-left">
       <label :for="'schemaPath.path'+index">{{schemaPath.path}}</label>
     </div>
   </div>
-  <async-button class="rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600" @click="exportQueryResults">Export</async-button>
+  <async-button class="rounded-md bg-primary px-2.5 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600" @click="exportQueryResults">Export</async-button>
 </div>

package/frontend/src/json-node/json-node.html

@@ -3,14 +3,14 @@
     <button
       v-if="showToggle"
       type="button"
-      class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-gray-500 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
+      class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-content-tertiary hover:text-content-secondary focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
       @click.stop="handleToggle"
     >
       {{ isCollapsedNode ? '+' : '-' }}
     </button>
     <span v-else class="w-4 h-4 mr-1 inline-flex items-center justify-center invisible flex-shrink-0"></span>
     <template v-if="hasKey">
-      <span class="text-blue-600">"{{ nodeKey }}"</span><span>: </span>
+      <span class="text-primary">"{{ nodeKey }}"</span><span>: </span>
     </template>
     <template v-if="isComplex">
       <template v-if="hasChildren">
@@ -52,7 +52,7 @@
         </span>
         <a
           href="#"
-          class="ml-1 text-sm text-sky-700 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
+          class="ml-1 text-sm text-primary opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
           @click.stop.prevent="goToReference()"
         >
           View Document

package/frontend/src/list-json/json-node.html

@@ -3,7 +3,7 @@
     <button
       v-if="showToggle"
       type="button"
-      class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-gray-500 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
+      class="w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-content-tertiary hover:text-content-secondary focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer"
       @click.stop="handleToggle"
     >
       {{ isCollapsedNode ? '+' : '-' }}

package/frontend/src/models/document-search/document-search.html

@@ -1,7 +1,7 @@
 <form @submit.prevent="emitSearch" class="relative flex-grow m-0">
   <input
     ref="searchInput"
-    class="w-full font-mono rounded-md p-1 border border-gray-300 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none"
+    class="w-full font-mono rounded-md p-1 border border-edge-strong outline-edge-strong text-lg focus:ring-1 focus:ring-primary-subtle focus:ring-offset-0 focus:outline-none"
     type="text"
     placeholder="Filter (supports JS, dates, ObjectIds, and more)"
     v-model="searchText"
@@ -9,12 +9,12 @@
     @input="updateAutocomplete"
     @keydown="handleKeyDown"
   />
-  <ul v-if="autocompleteSuggestions.length" class="absolute z-[9999] bg-white border border-gray-300 rounded mt-1 w-full max-h-40 overflow-y-auto shadow">
+  <ul v-if="autocompleteSuggestions.length" class="absolute z-[9999] bg-surface border border-edge-strong rounded mt-1 w-full max-h-40 overflow-y-auto shadow">
     <li
       v-for="(suggestion, index) in autocompleteSuggestions"
       :key="suggestion"
       class="px-2 py-1 cursor-pointer"
-      :class="{ 'bg-ultramarine-100': index === autocompleteIndex }"
+      :class="{ 'bg-primary-subtle': index === autocompleteIndex }"
       @mousedown.prevent="applySuggestion(index)"
     >
       {{ suggestion }}

package/frontend/src/models/model-switcher/model-switcher.html

@@ -0,0 +1,53 @@
+<div v-if="show" class="fixed inset-0 z-[9999]">
+  <div class="fixed inset-0 bg-black/40" @click="$emit('close')"></div>
+  <div
+    class="fixed top-[15%] left-1/2 -translate-x-1/2 w-full max-w-lg bg-surface rounded-lg shadow-2xl border border-edge overflow-hidden"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Model switcher"
+  >
+    <div class="p-3 border-b border-gray-100">
+      <input
+        ref="searchInput"
+        v-model="search"
+        type="text"
+        placeholder="Type a model name..."
+        @keydown="handleKeydown"
+        class="w-full rounded-md border border-edge bg-page py-2 px-3 text-sm text-content placeholder:text-gray-400 focus:border-edge-strong focus:outline-none focus:ring-1 focus:ring-gray-300"
+      />
+    </div>
+    <div ref="list" class="max-h-80 overflow-y-auto">
+      <template v-for="(item, index) in items" :key="item.section + '-' + item.model">
+        <div
+          v-if="index === 0 || items[index - 1].section !== item.section"
+          class="px-3 pt-2 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider"
+        >
+          {{ item.section }}
+        </div>
+        <div
+          :data-selected="index === selectedIndex"
+          @click="selectModel(item.model)"
+          @mouseenter="onMouseEnter(index)"
+          class="flex items-center px-3 py-1.5 mx-2 rounded-md cursor-pointer text-sm"
+          :class="index === selectedIndex ? 'bg-muted text-content' : 'text-content-secondary hover:bg-page'"
+        >
+          <span class="truncate" v-html="highlightMatch(item.model)"></span>
+          <span
+            v-if="modelDocumentCounts && modelDocumentCounts[item.model] !== undefined"
+            class="ml-auto text-xs text-gray-400 bg-muted rounded px-1.5 py-[1px]"
+          >
+            {{ formatCompactCount(modelDocumentCounts[item.model]) }}
+          </span>
+        </div>
+      </template>
+      <div v-if="items.length === 0" class="px-3 py-4 text-sm text-content-tertiary text-center">
+        No models match "{{ search }}"
+      </div>
+    </div>
+    <div class="border-t border-gray-100 px-3 py-2 text-xs text-gray-400 flex gap-3">
+      <span>↑↓ navigate</span>
+      <span>↵ select</span>
+      <span>esc close</span>
+    </div>
+  </div>
+</div>