@mongoosejs/studio 0.5.3 → 0.5.5

package/frontend/src/models/analyze-schema-modal/analyze-schema-modal.html

@@ -0,0 +1,169 @@
+<div>
+  <div class="modal-exit" @click="close">&times;</div>
+  <div class="text-xl font-bold mb-2">Analyze Schema</div>
+  <div class="space-y-4">
+    <div class="grid grid-cols-2 gap-3 text-sm md:grid-cols-4">
+      <div>
+        <div class="font-semibold text-content-secondary">Documents</div>
+        <div v-if="schemaAnalysis" class="text-content">{{ formatNumber(schemaAnalysis.documentCount) }}</div>
+        <div v-else class="mt-1 h-4 w-20 animate-pulse rounded bg-muted"></div>
+      </div>
+      <div>
+        <div class="font-semibold text-content-secondary">Analyzed</div>
+        <div v-if="schemaAnalysis" class="text-content">{{ formatNumber(schemaAnalysis.sampleSize) }}{{ schemaAnalysis.sampled ? ' sampled' : '' }}</div>
+        <div v-else class="mt-1 h-4 w-24 animate-pulse rounded bg-muted"></div>
+      </div>
+      <div>
+        <div class="font-semibold text-content-secondary">Valid</div>
+        <div v-if="schemaAnalysis" class="text-content">
+          {{ formatNumber(schemaAnalysis.validDocumentCount) }} ({{ formatPercent(schemaAnalysis.validDocumentCount, schemaAnalysis.sampleSize) }})
+          <router-link
+            v-if="schemaAnalysis.firstValidDocumentId"
+            :to="documentRoute(schemaAnalysis.firstValidDocumentId)"
+            class="ml-1 text-xs text-primary underline"
+          >[Example]</router-link>
+        </div>
+        <div v-else class="mt-1 h-4 w-28 animate-pulse rounded bg-muted"></div>
+      </div>
+      <div>
+        <div class="flex items-center gap-2 font-semibold text-content-secondary">
+          <span>Invalid</span>
+          <button
+            v-if="schemaAnalysis && schemaAnalysis.invalidDocuments.length > 0"
+            type="button"
+            class="text-xs font-semibold text-primary underline"
+            @click="showInvalidDocuments = !showInvalidDocuments"
+          >{{ showInvalidDocuments ? 'Hide' : 'Show' }}</button>
+        </div>
+        <div v-if="schemaAnalysis" class="text-content">
+          {{ formatNumber(schemaAnalysis.invalidDocumentCount) }} ({{ formatPercent(schemaAnalysis.invalidDocumentCount, schemaAnalysis.sampleSize) }})
+          <router-link
+            v-if="schemaAnalysis.firstInvalidDocumentId"
+            :to="documentRoute(schemaAnalysis.firstInvalidDocumentId)"
+            class="ml-1 text-xs text-primary underline"
+          >[Example]</router-link>
+        </div>
+        <div v-else class="mt-1 h-4 w-28 animate-pulse rounded bg-muted"></div>
+      </div>
+    </div>
+    <div v-if="schemaAnalysis && showInvalidDocuments && schemaAnalysis.invalidDocuments.length > 0" class="rounded border border-edge">
+      <div class="max-h-48 overflow-auto">
+        <div
+          v-for="invalidDocument in schemaAnalysis.invalidDocuments"
+          :key="invalidDocument.documentId"
+          class="grid gap-2 border-b border-edge px-3 py-2 text-sm last:border-b-0 md:grid-cols-[minmax(180px,240px)_1fr]"
+        >
+          <router-link
+            :to="documentRoute(invalidDocument.documentId)"
+            class="font-mono text-primary underline"
+          >{{ invalidDocument.documentId }}</router-link>
+          <div class="text-content-secondary">{{ invalidDocument.error }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="px-px py-px">
+      <input
+        ref="fieldSearch"
+        v-model="fieldSearch"
+        type="text"
+        :disabled="!schemaAnalysis"
+        placeholder="Filter fields..."
+        class="w-full rounded border border-edge bg-surface px-3 py-2 text-sm text-content placeholder:text-content-tertiary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-wait disabled:bg-muted disabled:text-content-tertiary"
+      />
+    </div>
+    <div class="max-h-[55vh] overflow-auto rounded border border-edge">
+      <table class="min-w-full table-fixed border-collapse text-sm">
+        <colgroup>
+          <col class="w-[40%]" />
+          <col class="w-[60%]" />
+        </colgroup>
+        <thead class="sticky top-0 bg-slate-100 border-b border-edge">
+          <tr>
+            <th class="px-3 py-2 text-left font-medium text-content border-r border-edge">Property</th>
+            <th class="px-3 py-2 text-left font-medium text-content">
+              <div class="flex flex-wrap items-center justify-between gap-2">
+                <span>Types</span>
+                <div class="isolate inline-flex shrink-0 rounded-md shadow-sm">
+                  <button
+                    type="button"
+                    class="relative inline-flex items-center rounded-l-md px-2.5 py-1 text-xs font-semibold ring-1 ring-inset ring-edge-strong focus:z-10"
+                    :class="typeDisplayMode === 'badges' ? 'bg-merlot-700 text-white' : 'bg-surface text-content-secondary hover:bg-muted'"
+                    @click="typeDisplayMode = 'badges'"
+                  >
+                    Badges
+                  </button>
+                  <button
+                    type="button"
+                    class="relative -ml-px inline-flex items-center rounded-r-md px-2.5 py-1 text-xs font-semibold ring-1 ring-inset ring-edge-strong focus:z-10"
+                    :class="typeDisplayMode === 'bars' ? 'bg-merlot-700 text-white' : 'bg-surface text-content-secondary hover:bg-muted'"
+                    @click="typeDisplayMode = 'bars'"
+                  >
+                    Bars
+                  </button>
+                </div>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="bg-surface">
+          <template v-if="!schemaAnalysis">
+            <tr v-for="index in 6" :key="'skeleton-' + index" class="border-b border-edge last:border-b-0">
+              <td class="px-3 py-3 align-top border-r border-edge">
+                <div class="h-4 w-44 animate-pulse rounded bg-muted"></div>
+              </td>
+              <td class="px-3 py-3 align-top">
+                <div class="flex flex-wrap gap-1.5">
+                  <div class="h-6 w-24 animate-pulse rounded bg-muted"></div>
+                  <div class="h-6 w-20 animate-pulse rounded bg-muted"></div>
+                  <div class="h-6 w-28 animate-pulse rounded bg-muted"></div>
+                </div>
+              </td>
+            </tr>
+          </template>
+          <tr v-for="path in filteredPaths" :key="path.path" class="border-b border-edge last:border-b-0">
+            <td class="px-3 py-2 align-top border-r border-edge text-xs text-content">
+              <div class="flex flex-wrap items-center gap-1.5">
+                <span class="font-mono" v-html="highlightPath(path.path)"></span>
+                <span
+                  v-if="primaryType(path)"
+                  class="rounded px-1.5 py-0.5 text-[11px] font-semibold"
+                  :style="typeBadgeStyle(primaryType(path).type)"
+                >{{ primaryType(path).type }}</span>
+                <span v-if="path.required" class="rounded bg-red-50 px-1.5 py-0.5 text-[11px] font-semibold text-red-700">required</span>
+              </div>
+            </td>
+            <td class="px-3 py-2 align-top">
+              <div v-if="typeDisplayMode === 'badges'" class="flex flex-wrap gap-1.5">
+                <span
+                  v-for="typeInfo in path.types"
+                  :key="typeInfo.type"
+                  class="rounded px-2 py-1 text-xs font-semibold"
+                  :style="typeBadgeStyle(typeInfo.type)"
+                >
+                  <span class="font-mono">{{ typeInfo.type }}</span>:
+                  {{ formatPercent(typeInfo.count, pathValueCount(path)) }}
+                </span>
+              </div>
+              <div v-else class="min-w-[260px]">
+                <div class="flex h-7 overflow-hidden rounded-lg border border-edge bg-surface">
+                  <div
+                    v-for="typeInfo in path.types"
+                    :key="typeInfo.type"
+                    :title="`${typeInfo.type}: ${formatPercent(typeInfo.count, pathValueCount(path))}`"
+                    class="flex h-full items-center overflow-hidden px-2 text-xs font-semibold"
+                    :style="typeSegmentStyle(typeInfo.type, typeInfo.count, pathValueCount(path))"
+                  >
+                    <span class="truncate">{{ typeInfo.type }}</span>
+                  </div>
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr v-if="schemaAnalysis && filteredPaths.length === 0">
+            <td colspan="2" class="px-3 py-4 text-sm text-content-tertiary">No fields match "{{ fieldSearch }}".</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

package/frontend/src/models/analyze-schema-modal/analyze-schema-modal.js

@@ -0,0 +1,149 @@
+'use strict';
+
+const api = require('../../api');
+const template = require('./analyze-schema-modal.html');
+const xss = require('xss');
+
+const TYPE_COLORS = {
+  string: '#315f5b',
+  number: '#465b86',
+  objectid: '#2f6381',
+  boolean: '#5b6540',
+  date: '#5a5278',
+  array: '#6b573d',
+  object: '#3f6648',
+  mixed: '#62546a',
+  buffer: '#5a5f50',
+  decimal128: '#4a6474',
+  map: '#4e665d',
+  null: '#3f4650',
+  undefined: '#5b626b'
+};
+
+const FALLBACK_TYPE_COLORS = [
+  '#315f5b',
+  '#465b86',
+  '#2f6381',
+  '#5b6540',
+  '#5a5278',
+  '#6b573d',
+  '#3f6648',
+  '#62546a'
+];
+
+module.exports = app => app.component('analyze-schema-modal', {
+  template,
+  props: ['currentModel'],
+  emits: ['close'],
+  data: () => ({
+    schemaAnalysis: null,
+    fieldSearch: '',
+    showInvalidDocuments: false,
+    typeDisplayMode: 'bars'
+  }),
+  computed: {
+    filteredPaths() {
+      if (!this.schemaAnalysis) {
+        return [];
+      }
+      const search = this.fieldSearch.trim().toLowerCase();
+      if (!search) {
+        return this.schemaAnalysis.paths;
+      }
+      return this.schemaAnalysis.paths.filter(path => path.path.toLowerCase().includes(search));
+    }
+  },
+  async mounted() {
+    window.analyzeSchemaModal = this;
+    const { analysis } = await api.Model.analyzeSchema({ model: this.currentModel });
+    this.schemaAnalysis = analysis;
+    this.$nextTick(() => {
+      this.$refs.fieldSearch?.focus();
+    });
+  },
+  unmounted() {
+    window.analyzeSchemaModal = null;
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    formatNumber(value) {
+      if (typeof value !== 'number') {
+        return 'Unknown';
+      }
+
+      return value.toLocaleString();
+    },
+    formatPercent(value, total) {
+      if (!total) {
+        return '0%';
+      }
+      return `${Math.round((value / total) * 1000) / 10}%`;
+    },
+    typePercentValue(value, total) {
+      if (!total) {
+        return 0;
+      }
+      return Math.round((value / total) * 1000) / 10;
+    },
+    pathValueCount(path) {
+      return typeof path?.valueCount === 'number' && path.valueCount > 0 ?
+        path.valueCount :
+        this.schemaAnalysis.sampleSize;
+    },
+    primaryType(path) {
+      if (!path || !Array.isArray(path.types) || path.types.length === 0) {
+        return null;
+      }
+
+      return path.types.find(typeInfo => typeInfo.type !== 'null' && typeInfo.type !== 'undefined') || path.types[0];
+    },
+    typeColor(type) {
+      const normalizedType = String(type || '').toLowerCase();
+      if (TYPE_COLORS[normalizedType]) {
+        return TYPE_COLORS[normalizedType];
+      }
+
+      let hash = 0;
+      for (let i = 0; i < normalizedType.length; ++i) {
+        hash = ((hash << 5) - hash) + normalizedType.charCodeAt(i);
+        hash |= 0;
+      }
+      const index = Math.abs(hash) % FALLBACK_TYPE_COLORS.length;
+      return FALLBACK_TYPE_COLORS[index % FALLBACK_TYPE_COLORS.length];
+    },
+    typeBadgeStyle(type) {
+      return {
+        backgroundColor: this.typeColor(type),
+        color: '#fff'
+      };
+    },
+    typeSegmentStyle(type, count, total) {
+      return {
+        width: `${this.typePercentValue(count, total)}%`,
+        backgroundColor: this.typeColor(type),
+        color: '#fff'
+      };
+    },
+    documentRoute(documentId) {
+      return `/model/${this.currentModel}/document/${documentId}`;
+    },
+    highlightPath(path) {
+      const search = this.fieldSearch.trim();
+      if (!search) {
+        return xss(path);
+      }
+
+      const index = path.toLowerCase().indexOf(search.toLowerCase());
+      if (index === -1) {
+        return xss(path);
+      }
+
+      const before = path.slice(0, index);
+      const match = path.slice(index, index + search.length);
+      const after = path.slice(index + search.length);
+      return `${xss(before)}<strong>${xss(match)}</strong>${xss(after)}`;
+    }
+  }
+});

package/frontend/src/models/models.html

@@ -177,37 +177,34 @@
                   Indexes
                 </button>
                 <button
-                  @click="openCollectionInfo"
+                  @click="openAnalyzeSchemaModal"
                   type="button"
                   class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
                 >
-                  Collection Info
+                  Analyze Schema
                 </button>
                 <button
-                  @click="findOldestDocument"
+                  @click="openCollectionInfo"
                   type="button"
                   class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
                 >
-                  Find oldest document
-                </button>
-                <button
-                  @click="openDropCollectionModal"
-                  type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-red-700 hover:bg-red-50"
-                >
-                  Drop Collection
+                  Collection Info
                 </button>
                 <button
                   @click="toggleRowNumbers()"
+                  :disabled="outputType !== 'table'"
                   type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
+                  class="block w-full px-4 py-2 text-left text-sm"
+                  :class="outputType === 'table' ? 'text-content-secondary hover:bg-muted' : 'text-content-tertiary cursor-not-allowed opacity-50'"
                 >
                   {{ showRowNumbers ? 'Hide row numbers' : 'Show row numbers' }}
                 </button>
                 <button
                   @click="resetFilter()"
+                  :disabled="searchText.trim().length === 0"
                   type="button"
-                  class="block w-full px-4 py-2 text-left text-sm text-content-secondary hover:bg-muted"
+                  class="block w-full px-4 py-2 text-left text-sm"
+                  :class="searchText.trim().length > 0 ? 'text-content-secondary hover:bg-muted' : 'text-content-tertiary cursor-not-allowed opacity-50'"
                 >
                   Reset Filter
                 </button>
@@ -235,6 +232,13 @@
                 >
                   Default Projection
                 </async-button>
+                <button
+                  @click="openDropCollectionModal"
+                  type="button"
+                  class="block w-full px-4 py-2 text-left text-sm text-red-700 hover:bg-red-50"
+                >
+                  Drop Collection
+                </button>
               </div>
             </div>
           </div>
@@ -551,6 +555,14 @@
       </div>
     </template>
   </modal>
+  <modal v-if="shouldShowAnalyzeSchemaModal" containerClass="md:!w-[70vw]">
+    <template v-slot:body>
+      <analyze-schema-modal
+        :current-model="currentModel"
+        @close="shouldShowAnalyzeSchemaModal = false"
+      ></analyze-schema-modal>
+    </template>
+  </modal>
   <modal v-if="shouldShowCollectionInfoModal">
     <template v-slot:body>
       <div class="modal-exit" @click="shouldShowCollectionInfoModal = false">&times;</div>

package/frontend/src/models/models.js

@@ -167,6 +167,7 @@ module.exports = app => app.component('models', {
     addFieldFilterText: '',
     showAddFieldDropdown: false,
     shouldShowIndexModal: false,
+    shouldShowAnalyzeSchemaModal: false,
     shouldShowCollectionInfoModal: false,
     shouldShowDropCollectionModal: false,
     dropCollectionConfirmName: '',
@@ -889,6 +890,10 @@ module.exports = app => app.component('models', {
       this.mongoDBIndexes = mongoDBIndexes;
       this.schemaIndexes = schemaIndexes;
     },
+    openAnalyzeSchemaModal() {
+      this.closeActionsMenu();
+      this.shouldShowAnalyzeSchemaModal = true;
+    },
     toggleActionsMenu() {
       this.showActionsMenu = !this.showActionsMenu;
     },
@@ -949,19 +954,6 @@ module.exports = app => app.component('models', {
       this.$toast.success(`Collection ${this.currentModel} dropped.`);
       await this.getDocuments();
     },
-    async findOldestDocument() {
-      this.closeActionsMenu();
-      const { docs } = await api.Model.getDocuments({
-        model: this.currentModel,
-        limit: 1,
-        sortKey: '_id',
-        sortDirection: 1
-      });
-      if (!Array.isArray(docs) || docs.length === 0) {
-        throw new Error('No documents found');
-      }
-      this.openDocument(docs[0]);
-    },
     isTTLIndex(index) {
       return index != null && index.expireAfterSeconds != null;
     },

package/frontend/src/navbar/navbar.html

@@ -32,11 +32,11 @@
         <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
       </svg>
     </span>
-    <a v-if="hasAccess(roles, 'chat') && hasLLMAPIKey"
+    <a v-if="hasAccess(roles, 'chat') && supportsAI"
       href="#/chat"
       class="inline-flex items-center px-1 border-b-2 text-sm font-medium"
       :class="chatView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'">Chat</a>
-    <span v-else-if="hasAccess(roles, 'chat') && !hasLLMAPIKey"
+    <span v-else-if="hasAccess(roles, 'chat') && !supportsAI"
       class="inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed"
       :title="chatDisabledReason">
       Chat
@@ -236,11 +236,11 @@
           <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
         </svg>
       </span>
-      <a v-if="hasAccess(roles, 'chat') && hasLLMAPIKey"
+      <a v-if="hasAccess(roles, 'chat') && supportsAI"
         href="#/chat"
         class="block px-3 py-2 rounded-md text-base font-medium"
         :class="chatView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'">Chat</a>
-      <span v-else-if="hasAccess(roles, 'chat') && !hasLLMAPIKey"
+      <span v-else-if="hasAccess(roles, 'chat') && !supportsAI"
         class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed"
         :title="chatDisabledReason">
         Chat

package/frontend/src/navbar/navbar.js

@@ -1,6 +1,5 @@
 'use strict';
 
-const api = require('../api');
 const mothership = require('../mothership');
 const template = require('./navbar.html');
 const { routes, hasAccess } = require('../routes');
@@ -107,8 +106,8 @@ module.exports = app => app.component('navbar', {
     recentPagesList() {
       return this.localRecentPages;
     },
-    hasLLMAPIKey() {
-      return !!window.MONGOOSE_STUDIO_CONFIG.hasLLMAPIKey;
+    supportsAI() {
+      return this.state.capabilities == null || this.state.capabilities.supportsAI !== false;
     },
     chatDisabledReason() {
       return 'Chat requires an Anthropic, Gemini, or OpenAI API key.';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "AI-Powered Data Workspace for MongoDB: Turn your MongoDB data into dashboards, maps, and interactive workflows - powered by your Mongoose models and AI.",
   "homepage": "https://mongoosestudio.app/",
   "repository": {
@@ -19,6 +19,7 @@
     "ejson": "^2.2.3",
     "extrovert": "^0.2.0",
     "marked": "15.0.12",
+    "mpath": "^0.9.0",
     "node-inspect-extracted": "3.x",
     "regexp.escape": "^2.0.1",
     "tailwindcss": "3.4.0",