@mongoosejs/studio 0.5.5 → 0.5.6

package/backend/actions/Dashboard/createDashboard.js

@@ -2,6 +2,7 @@
 
 const Archetype = require('archetype');
 const authorize = require('../../authorize');
+const mongoose = require('mongoose');
 
 const CreateDashboardParams = new Archetype({
   title: {
@@ -12,18 +13,27 @@ const CreateDashboardParams = new Archetype({
     $type: 'string',
     $required: true
   },
+  initiatedById: {
+    $type: mongoose.Types.ObjectId,
+    $required: false
+  },
   roles: {
     $type: ['string']
   }
 }).compile('CreateDashboardParams');
 
 module.exports = ({ studioConnection }) => async function createDashboard(params) {
-  const { title, code, roles } = new CreateDashboardParams(params);
+  const { title, code, initiatedById, roles } = new CreateDashboardParams(params);
   const Dashboard = studioConnection.model('__Studio_Dashboard');
 
   await authorize('Dashboard.createDashboard', roles);
 
-  const dashboard = await Dashboard.create({ title, code });
+  const dashboard = await Dashboard.create({
+    title,
+    code,
+    createdById: initiatedById,
+    createdBy: params.initiatedBy
+  });
 
   return { dashboard };
 };

package/backend/actions/Dashboard/getDashboard.js

@@ -51,6 +51,7 @@ module.exports = ({ db, studioConnection, options }) => async function getDashbo
           return {};
         }
         return completeDashboardEvaluate(
+          Dashboard,
           DashboardResult,
           dashboardResult._id,
           null,
@@ -73,6 +74,7 @@ module.exports = ({ db, studioConnection, options }) => async function getDashbo
           return {};
         }
         return completeDashboardEvaluate(
+          Dashboard,
           DashboardResult,
           dashboardResult._id,
           result,
@@ -97,13 +99,15 @@ module.exports = ({ db, studioConnection, options }) => async function getDashbo
   }
 };
 
-async function completeDashboardEvaluate(DashboardResult, dashboardResultId, result, error, status) {
+async function completeDashboardEvaluate(Dashboard, DashboardResult, dashboardResultId, result, error, status) {
   const dashboardResult = await DashboardResult.findById(dashboardResultId).orFail();
-  dashboardResult.finishedEvaluatingAt = new Date();
+  const finishedEvaluatingAt = new Date();
+  dashboardResult.finishedEvaluatingAt = finishedEvaluatingAt;
   dashboardResult.result = result;
   dashboardResult.error = error;
   dashboardResult.status = status;
   await dashboardResult.save();
+  await Dashboard.updateOne({ _id: dashboardResult.dashboardId }, { $set: { lastEvaluatedAt: finishedEvaluatingAt } });
   return { dashboardResult };
 }
 

package/backend/actions/Dashboard/getDashboards.js

@@ -15,7 +15,9 @@ module.exports = ({ studioConnection }) => async function getDashboards(params)
 
   await authorize('Dashboard.getDashboards', roles);
 
-  const dashboards = await Dashboard.find();
+  const dashboards = await Dashboard
+    .find()
+    .sort({ isPinned: -1, createdAt: -1, _id: -1 });
 
   return { dashboards };
 };

package/backend/actions/Dashboard/updateDashboard.js

@@ -9,8 +9,7 @@ const UpdateDashboardParams = new Archetype({
     $required: true
   },
   code: {
-    $type: 'string',
-    $required: true
+    $type: 'string'
   },
   title: {
     $type: 'string'
@@ -18,19 +17,26 @@ const UpdateDashboardParams = new Archetype({
   description: {
     $type: 'string'
   },
+  isPinned: {
+    $type: 'boolean'
+  },
   roles: {
     $type: ['string']
   }
 }).compile('UpdateDashboardParams');
 
 module.exports = ({ studioConnection }) => async function updateDashboard(params) {
-  const { dashboardId, code, title, description, roles, evaluate } = new UpdateDashboardParams(params);
+  const { dashboardId, code, title, description, isPinned, roles, evaluate } = new UpdateDashboardParams(params);
 
   const Dashboard = studioConnection.models['__Studio_Dashboard'];
 
   await authorize('Dashboard.updateDashboard', roles);
 
-  const updateObj = { code };
+  const updateObj = {};
+
+  if (code != null) {
+    updateObj.code = code;
+  }
 
   if (title != null) {
     updateObj.title = title;
@@ -40,8 +46,15 @@ module.exports = ({ studioConnection }) => async function updateDashboard(params
     updateObj.description = description;
   }
 
-  const doc = await Dashboard.
-    findByIdAndUpdate(dashboardId, updateObj, { sanitizeFilter: true, returnDocument: 'after', overwriteImmutable: true });
+  if (isPinned != null) {
+    updateObj.isPinned = isPinned;
+  }
+
+  const doc = await Dashboard.findByIdAndUpdate(
+    dashboardId,
+    updateObj,
+    { sanitizeFilter: true, returnDocument: 'after' }
+  );
 
   return { doc };
 };

package/backend/db/dashboardSchema.js

@@ -13,6 +13,37 @@ const dashboardSchema = new mongoose.Schema({
   },
   description: {
     type: String
+  },
+  isPinned: {
+    type: Boolean
+  },
+  createdById: {
+    type: mongoose.Schema.Types.ObjectId
+  },
+  createdBy: {
+    name: String,
+    email: String
+  },
+  lastEvaluatedAt: {
+    type: Date
+  }
+}, { timestamps: true });
+
+dashboardSchema.post(['find', 'findOne'], async function(docs) {
+  const dashboards = Array.isArray(docs) ? docs : [docs];
+  for (const dashboard of dashboards) {
+    if (dashboard != null && dashboard.createdAt == null && dashboard._id?.getTimestamp) {
+      const createdAt = dashboard._id.getTimestamp();
+      if (!createdAt.valueOf()) {
+        continue;
+      }
+      dashboard.set('createdAt', createdAt, { overwriteImmutable: true });
+      await this.model.db.model('__Studio_Dashboard').updateOne(
+        { _id: dashboard._id },
+        { createdAt },
+        { overwriteImmutable: true }
+      );
+    }
   }
 });
 

package/backend/netlify.js

@@ -63,6 +63,7 @@ module.exports = function netlify(conn, options) {
       params.roles = roles;
       params.userId = user._id;
       params.initiatedById = user._id;
+      params.initiatedBy = user;
     }
 
     if (typeof actionName !== 'string') {

package/backend/next.js

@@ -64,6 +64,7 @@ module.exports = function next(conn, options) {
       params.roles = roles;
       params.userId = user._id;
       params.initiatedById = user._id;
+      params.initiatedBy = user;
     }
 
     if (typeof actionName !== 'string') {

package/express.js

@@ -87,6 +87,7 @@ module.exports = async function mongooseStudioExpressApp(apiUrl, conn, options)
           req._internals.initiatedById = user._id;
           req._internals.roles = roles;
           req._internals.$workspaceId = workspace._id;
+          req._internals.initiatedBy = user;
 
           next();
         })

package/frontend/public/app.js

@@ -3266,11 +3266,73 @@ module.exports = app => app.component('dashboards', {
   data: () => ({
     status: 'loading',
     dashboards: [],
+    searchText: '',
     showCreateDashboardModal: false,
     showDeleteDashboardModal: null,
     openMenuId: null
   }),
+  computed: {
+    filteredDashboards() {
+      const searchWords = getSearchWords(this.searchText);
+      let dashboards = this.dashboards;
+      if (searchWords.length === 0) {
+        return sortPinnedFirst(dashboards);
+      }
+      const searchPatterns = searchWords.map(word => new RegExp(escapeRegExp(word), 'i'));
+
+      dashboards = dashboards.filter(dashboard => {
+        const searchableText = `${dashboard.title || ''} ${dashboard.description || ''}`;
+        return searchPatterns.every(pattern => pattern.test(searchableText));
+      });
+
+      return sortPinnedFirst(dashboards);
+    }
+  },
   methods: {
+    highlightTitle(value) {
+      return this.highlightSearchText(value, 'underline decoration-primary underline-offset-2');
+    },
+    highlightDescription(value) {
+      return this.highlightSearchText(value, 'font-semibold text-content-secondary');
+    },
+    highlightSearchText(value, className) {
+      const text = value || '';
+      const searchWords = getSearchWords(this.searchText);
+      if (searchWords.length === 0) {
+        return escapeHtml(text);
+      }
+      const searchPattern = new RegExp(searchWords.map(escapeRegExp).join('|'), 'ig');
+
+      let html = '';
+      let lastIndex = 0;
+      let match = searchPattern.exec(text);
+      while (match != null) {
+        html += escapeHtml(text.slice(lastIndex, match.index));
+        html += `<span class="${className}">${escapeHtml(match[0])}</span>`;
+        lastIndex = match.index + match[0].length;
+        match = searchPattern.exec(text);
+      }
+      html += escapeHtml(text.slice(lastIndex));
+      return html;
+    },
+    formatDate(value) {
+      if (!value) {
+        return '-';
+      }
+      const date = new Date(value);
+      if (Number.isNaN(date.getTime())) {
+        return '-';
+      }
+      return new Intl.DateTimeFormat(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short'
+      }).format(date);
+    },
+    formatUser(dashboard) {
+      return dashboard.createdBy?.name ||
+        dashboard.createdBy?.email ||
+        (dashboard.createdById ? dashboard.createdById.toString() : '-');
+    },
     toggleMenu(id) {
       this.openMenuId = this.openMenuId === id ? null : id;
     },
@@ -3290,8 +3352,19 @@ module.exports = app => app.component('dashboards', {
       this.$toast.success('Dashboard deleted!');
     },
     insertNewDashboard(dashboard) {
-      this.dashboards.push(dashboard);
+      this.dashboards.unshift(dashboard);
       this.showCreateDashboardModal = false;
+    },
+    async togglePin(dashboard) {
+      if (!dashboard) {
+        return;
+      }
+
+      const { doc } = await api.Dashboard.updateDashboard({
+        dashboardId: dashboard._id,
+        isPinned: !dashboard.isPinned
+      });
+      dashboard.isPinned = doc.isPinned;
     }
   },
   directives: {
@@ -3316,6 +3389,28 @@ module.exports = app => app.component('dashboards', {
   }
 });
 
+function escapeHtml(value) {
+  return value.toString().
+    replace(/&/g, '&amp;').
+    replace(/</g, '&lt;').
+    replace(/>/g, '&gt;').
+    replace(/"/g, '&quot;').
+    replace(/'/g, '&#39;');
+}
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function getSearchWords(searchText) {
+  return Array.from(new Set(searchText.trim().split(/\s+/).filter(Boolean))).
+    sort((a, b) => b.length - a.length);
+}
+
+function sortPinnedFirst(dashboards) {
+  return dashboards.slice().sort((a, b) => Number(Boolean(b.isPinned)) - Number(Boolean(a.isPinned)));
+}
+
 
 /***/ },
 
@@ -50528,6 +50623,128 @@ module.exports = {
 
 "use strict";
 
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.setUint32LE = exports.readUint8 = exports.readInt32LE = exports.UUID = exports.Timestamp = exports.serialize = exports.ObjectId = exports.NumberUtils = exports.MinKey = exports.MaxKey = exports.Long = exports.Int32 = exports.EJSON = exports.Double = exports.deserialize = exports.Decimal128 = exports.DBRef = exports.Code = exports.calculateObjectSize = exports.ByteUtils = exports.BSONType = exports.BSONSymbol = exports.BSONRegExp = exports.BSONError = exports.BSON = exports.Binary = void 0;
+exports.parseToElementsToArray = parseToElementsToArray;
+exports.pluckBSONSerializeOptions = pluckBSONSerializeOptions;
+exports.resolveBSONOptions = resolveBSONOptions;
+exports.parseUtf8ValidationOption = parseUtf8ValidationOption;
+/* eslint-disable no-restricted-imports */
+const bson_1 = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.mjs");
+var bson_2 = __webpack_require__(/*! bson */ "./node_modules/bson/lib/bson.mjs");
+Object.defineProperty(exports, "Binary", ({ enumerable: true, get: function () { return bson_2.Binary; } }));
+Object.defineProperty(exports, "BSON", ({ enumerable: true, get: function () { return bson_2.BSON; } }));
+Object.defineProperty(exports, "BSONError", ({ enumerable: true, get: function () { return bson_2.BSONError; } }));
+Object.defineProperty(exports, "BSONRegExp", ({ enumerable: true, get: function () { return bson_2.BSONRegExp; } }));
+Object.defineProperty(exports, "BSONSymbol", ({ enumerable: true, get: function () { return bson_2.BSONSymbol; } }));
+Object.defineProperty(exports, "BSONType", ({ enumerable: true, get: function () { return bson_2.BSONType; } }));
+Object.defineProperty(exports, "ByteUtils", ({ enumerable: true, get: function () { return bson_2.ByteUtils; } }));
+Object.defineProperty(exports, "calculateObjectSize", ({ enumerable: true, get: function () { return bson_2.calculateObjectSize; } }));
+Object.defineProperty(exports, "Code", ({ enumerable: true, get: function () { return bson_2.Code; } }));
+Object.defineProperty(exports, "DBRef", ({ enumerable: true, get: function () { return bson_2.DBRef; } }));
+Object.defineProperty(exports, "Decimal128", ({ enumerable: true, get: function () { return bson_2.Decimal128; } }));
+Object.defineProperty(exports, "deserialize", ({ enumerable: true, get: function () { return bson_2.deserialize; } }));
+Object.defineProperty(exports, "Double", ({ enumerable: true, get: function () { return bson_2.Double; } }));
+Object.defineProperty(exports, "EJSON", ({ enumerable: true, get: function () { return bson_2.EJSON; } }));
+Object.defineProperty(exports, "Int32", ({ enumerable: true, get: function () { return bson_2.Int32; } }));
+Object.defineProperty(exports, "Long", ({ enumerable: true, get: function () { return bson_2.Long; } }));
+Object.defineProperty(exports, "MaxKey", ({ enumerable: true, get: function () { return bson_2.MaxKey; } }));
+Object.defineProperty(exports, "MinKey", ({ enumerable: true, get: function () { return bson_2.MinKey; } }));
+Object.defineProperty(exports, "NumberUtils", ({ enumerable: true, get: function () { return bson_2.NumberUtils; } }));
+Object.defineProperty(exports, "ObjectId", ({ enumerable: true, get: function () { return bson_2.ObjectId; } }));
+Object.defineProperty(exports, "serialize", ({ enumerable: true, get: function () { return bson_2.serialize; } }));
+Object.defineProperty(exports, "Timestamp", ({ enumerable: true, get: function () { return bson_2.Timestamp; } }));
+Object.defineProperty(exports, "UUID", ({ enumerable: true, get: function () { return bson_2.UUID; } }));
+function parseToElementsToArray(bytes, offset) {
+    const res = bson_1.BSON.onDemand.parseToElements(bytes, offset);
+    return Array.isArray(res) ? res : [...res];
+}
+// validates buffer inputs, used for read operations
+const validateBufferInputs = (buffer, offset, length) => {
+    if (offset < 0 || offset + length > buffer.length) {
+        throw new RangeError(`Attempt to access memory outside buffer bounds: buffer length: ${buffer.length}, offset: ${offset}, length: ${length}`);
+    }
+};
+// readInt32LE, reads a 32-bit integer from buffer at given offset
+// throws if offset is out of bounds
+const readInt32LE = (buffer, offset) => {
+    validateBufferInputs(buffer, offset, 4);
+    return bson_1.NumberUtils.getInt32LE(buffer, offset);
+};
+exports.readInt32LE = readInt32LE;
+// readUint8, reads a single unsigned byte from buffer at given offset
+const readUint8 = (buffer, offset) => {
+    validateBufferInputs(buffer, offset, 1);
+    return buffer[offset];
+};
+exports.readUint8 = readUint8;
+const setUint32LE = (destination, offset, value) => {
+    destination[offset] = value;
+    value >>>= 8;
+    destination[offset + 1] = value;
+    value >>>= 8;
+    destination[offset + 2] = value;
+    value >>>= 8;
+    destination[offset + 3] = value;
+    return 4;
+};
+exports.setUint32LE = setUint32LE;
+function pluckBSONSerializeOptions(options) {
+    const { fieldsAsRaw, useBigInt64, promoteValues, promoteBuffers, promoteLongs, serializeFunctions, ignoreUndefined, bsonRegExp, raw, enableUtf8Validation } = options;
+    return {
+        fieldsAsRaw,
+        useBigInt64,
+        promoteValues,
+        promoteBuffers,
+        promoteLongs,
+        serializeFunctions,
+        ignoreUndefined,
+        bsonRegExp,
+        raw,
+        enableUtf8Validation
+    };
+}
+/**
+ * Merge the given BSONSerializeOptions, preferring options over the parent's options, and
+ * substituting defaults for values not set.
+ *
+ * @internal
+ */
+function resolveBSONOptions(options, parent) {
+    const parentOptions = parent?.bsonOptions;
+    return {
+        raw: options?.raw ?? parentOptions?.raw ?? false,
+        useBigInt64: options?.useBigInt64 ?? parentOptions?.useBigInt64 ?? false,
+        promoteLongs: options?.promoteLongs ?? parentOptions?.promoteLongs ?? true,
+        promoteValues: options?.promoteValues ?? parentOptions?.promoteValues ?? true,
+        promoteBuffers: options?.promoteBuffers ?? parentOptions?.promoteBuffers ?? false,
+        ignoreUndefined: options?.ignoreUndefined ?? parentOptions?.ignoreUndefined ?? false,
+        bsonRegExp: options?.bsonRegExp ?? parentOptions?.bsonRegExp ?? false,
+        serializeFunctions: options?.serializeFunctions ?? parentOptions?.serializeFunctions ?? false,
+        fieldsAsRaw: options?.fieldsAsRaw ?? parentOptions?.fieldsAsRaw ?? {},
+        enableUtf8Validation: options?.enableUtf8Validation ?? parentOptions?.enableUtf8Validation ?? true
+    };
+}
+/** @internal */
+function parseUtf8ValidationOption(options) {
+    const enableUtf8Validation = options?.enableUtf8Validation;
+    if (enableUtf8Validation === false) {
+        return { utf8: false };
+    }
+    return { utf8: { writeErrors: false } };
+}
+//# sourceMappingURL=bson.js.map
+
+/***/ },
+
+/***/ "./node_modules/mongoose/node_modules/mongodb/lib/bson.js"
+/*!****************************************************************!*\
+  !*** ./node_modules/mongoose/node_modules/mongodb/lib/bson.js ***!
+  \****************************************************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setUint32LE = exports.readInt32LE = exports.UUID = exports.Timestamp = exports.serialize = exports.ObjectId = exports.NumberUtils = exports.MinKey = exports.MaxKey = exports.Long = exports.Int32 = exports.EJSON = exports.Double = exports.deserialize = exports.Decimal128 = exports.DBRef = exports.Code = exports.calculateObjectSize = exports.ByteUtils = exports.BSONType = exports.BSONSymbol = exports.BSONRegExp = exports.BSONError = exports.BSON = exports.Binary = void 0;
 exports.parseToElementsToArray = parseToElementsToArray;
@@ -52745,7 +52962,7 @@ module.exports = "<div class=\"dashboard-editor p-4 bg-muted rounded-lg shadow-l
 (module) {
 
 "use strict";
-module.exports = "<div class=\"dashboards bg-page min-h-[calc(100vh-55px)]\">\n  <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n    <div class=\"flex items-center justify-between mb-6\">\n      <h1 class=\"text-lg font-semibold text-content\">Dashboards</h1>\n      <button\n        type=\"button\"\n        @click=\"showCreateDashboardModal = true\"\n        class=\"rounded-md bg-primary px-3 py-2 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-primary\">\n        New Dashboard\n      </button>\n    </div>\n\n    <div v-if=\"status === 'loading'\" class=\"text-center py-12\">\n      <svg\n        class=\"inline w-8 h-8 animate-spin text-gray-400\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"></path>\n      </svg>\n    </div>\n\n    <div v-else-if=\"dashboards.length === 0\" class=\"text-center py-12\">\n      <h3 class=\"text-sm font-semibold text-content\">No dashboards yet</h3>\n      <p class=\"mt-1 text-sm text-content-tertiary\">Get started by creating a new dashboard.</p>\n      <div class=\"mt-4\">\n        <button\n          type=\"button\"\n          @click=\"showCreateDashboardModal = true\"\n          class=\"inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover\">\n          <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n          </svg>\n          New Dashboard\n        </button>\n      </div>\n    </div>\n\n    <div v-else class=\"space-y-3\">\n      <div\n        v-for=\"dashboard in dashboards\"\n        :key=\"dashboard._id\"\n        class=\"bg-surface rounded-lg border border-edge px-5 py-4 flex items-center justify-between hover:border-edge-strong transition-colors\"\n      >\n        <div class=\"min-w-0 flex-1 mr-4\">\n          <router-link\n            :to=\"'/dashboard/' + dashboard._id\"\n            class=\"text-sm font-semibold text-content hover:text-primary block truncate\">\n            {{ dashboard.title }}\n          </router-link>\n          <p v-if=\"dashboard.description\" class=\"mt-0.5 text-sm text-content-tertiary truncate\">{{ dashboard.description }}</p>\n        </div>\n        <div class=\"flex items-center gap-2 shrink-0\">\n          <router-link\n            :to=\"'/dashboard/' + dashboard._id\"\n            class=\"rounded-md bg-primary px-3 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover\">\n            View\n          </router-link>\n          <div class=\"relative\" v-click-outside=\"() => closeMenu(dashboard._id)\">\n            <button\n              type=\"button\"\n              @click=\"toggleMenu(dashboard._id)\"\n              class=\"rounded-md bg-surface px-2 py-1.5 text-content-tertiary ring-1 ring-inset ring-gray-300 hover:bg-page\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z\" />\n              </svg>\n            </button>\n            <div\n              v-if=\"openMenuId === dashboard._id\"\n              class=\"absolute right-0 mt-1 w-36 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black/5 z-10\"\n            >\n              <div class=\"py-1\">\n                <router-link\n                  :to=\"'/dashboard/' + dashboard._id + '?edit=true'\"\n                  class=\"block px-4 py-2 text-sm text-content-secondary hover:bg-muted\">\n                  Edit\n                </router-link>\n                <button\n                  @click=\"showDeleteDashboardModal = dashboard; openMenuId = null\"\n                  type=\"button\"\n                  class=\"block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-muted\">\n                  Delete\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showCreateDashboardModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false;\">&times;</div>\n      <create-dashboard @close=\"insertNewDashboard\"></create-dashboard>\n    </template>\n  </modal>\n\n  <modal v-if=\"showDeleteDashboardModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showDeleteDashboardModal = null;\">&times;</div>\n      <h2>Are you sure you want to delete \"{{showDeleteDashboardModal.title}}\"?</h2>\n      <div class=\"flex space-x-2 mt-4\">\n        <button class=\"px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-500 text-sm font-semibold\" @click=\"deleteDashboard(showDeleteDashboardModal)\">Yes, delete</button>\n        <button class=\"px-4 py-2 bg-muted text-content-secondary rounded-md hover:bg-muted text-sm font-semibold\" @click=\"showDeleteDashboardModal=null;\">Cancel</button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"dashboards bg-page min-h-[calc(100vh-55px)]\">\n  <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n    <div class=\"flex items-center justify-between mb-6\">\n      <h1 class=\"text-lg font-semibold text-content\">Dashboards</h1>\n      <button\n        type=\"button\"\n        @click=\"showCreateDashboardModal = true\"\n        class=\"rounded-md bg-primary px-3 py-2 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-primary\">\n        New Dashboard\n      </button>\n    </div>\n\n    <div v-if=\"status !== 'loading'\" class=\"mb-5\">\n      <label for=\"dashboard-search\" class=\"sr-only\">Search dashboards</label>\n      <div class=\"relative max-w-lg\">\n        <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-content-tertiary\">\n          <svg class=\"h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\" />\n          </svg>\n        </div>\n        <input\n          id=\"dashboard-search\"\n          v-model=\"searchText\"\n          type=\"search\"\n          class=\"block w-full rounded-md border-0 bg-surface py-2 pl-9 pr-3 text-sm text-content shadow-sm ring-1 ring-inset ring-edge placeholder:text-content-tertiary focus:ring-2 focus:ring-inset focus:ring-primary\"\n          placeholder=\"Search by title or description\">\n      </div>\n    </div>\n\n    <div v-if=\"status === 'loading'\" class=\"text-center py-12\">\n      <svg\n        class=\"inline w-8 h-8 animate-spin text-gray-400\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"></path>\n      </svg>\n    </div>\n\n    <div v-else-if=\"dashboards.length === 0\" class=\"text-center py-12\">\n      <h3 class=\"text-sm font-semibold text-content\">No dashboards yet</h3>\n      <p class=\"mt-1 text-sm text-content-tertiary\">Get started by creating a new dashboard.</p>\n      <div class=\"mt-4\">\n        <button\n          type=\"button\"\n          @click=\"showCreateDashboardModal = true\"\n          class=\"inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover\">\n          <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n          </svg>\n          New Dashboard\n        </button>\n      </div>\n    </div>\n\n    <div v-else-if=\"filteredDashboards.length === 0\" class=\"text-center py-12\">\n      <h3 class=\"text-sm font-semibold text-content\">No matching dashboards</h3>\n      <p class=\"mt-1 text-sm text-content-tertiary\">Try a different title or description.</p>\n    </div>\n\n    <div v-else class=\"space-y-3\">\n      <div\n        v-for=\"dashboard in filteredDashboards\"\n        :key=\"dashboard._id\"\n        class=\"bg-surface rounded-lg border border-edge px-5 py-4 flex items-start justify-between hover:border-edge-strong transition-colors\"\n      >\n        <div class=\"min-w-0 flex-1 mr-4\">\n          <router-link\n            :to=\"'/dashboard/' + dashboard._id\"\n            class=\"text-sm font-semibold text-content hover:text-primary block truncate\">\n            <span v-html=\"highlightTitle(dashboard.title)\"></span>\n          </router-link>\n          <p\n            v-if=\"dashboard.description\"\n            class=\"mt-0.5 text-sm text-content-tertiary truncate\"\n            v-html=\"highlightDescription(dashboard.description)\"></p>\n          <dl class=\"mt-3 grid grid-cols-1 gap-x-4 gap-y-1 text-xs text-content-tertiary sm:grid-cols-3\">\n            <div>\n              <dt class=\"font-medium text-content-secondary\">Created At</dt>\n              <dd>{{ formatDate(dashboard.createdAt) }}</dd>\n            </div>\n            <div>\n              <dt class=\"font-medium text-content-secondary\">Last Evaluated At</dt>\n              <dd>{{ formatDate(dashboard.lastEvaluatedAt) }}</dd>\n            </div>\n            <div v-show=\"dashboard.createdBy\">\n              <dt class=\"font-medium text-content-secondary\">Created By</dt>\n              <dd class=\"truncate\">{{ dashboard.createdBy?.name }}</dd>\n            </div>\n          </dl>\n        </div>\n        <div class=\"flex items-center gap-2 shrink-0\">\n          <button\n            type=\"button\"\n            @click=\"togglePin(dashboard)\"\n            :title=\"dashboard.isPinned ? 'Unpin dashboard' : 'Pin dashboard'\"\n            :aria-label=\"dashboard.isPinned ? 'Unpin dashboard' : 'Pin dashboard'\"\n            class=\"rounded-md bg-surface px-2 py-1.5 text-content-tertiary ring-1 ring-inset ring-gray-300 hover:bg-page\"\n            :class=\"dashboard.isPinned ? 'text-primary ring-primary/40' : ''\">\n            <img :src=\"dashboard.isPinned ? 'images/pin-off.svg' : 'images/pin.svg'\" class=\"w-4 h-4\" alt=\"\" />\n          </button>\n          <router-link\n            :to=\"'/dashboard/' + dashboard._id\"\n            class=\"rounded-md bg-primary px-3 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover\">\n            View\n          </router-link>\n          <div class=\"relative\" v-click-outside=\"() => closeMenu(dashboard._id)\">\n            <button\n              type=\"button\"\n              @click=\"toggleMenu(dashboard._id)\"\n              class=\"rounded-md bg-surface px-2 py-1.5 text-content-tertiary ring-1 ring-inset ring-gray-300 hover:bg-page\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm6 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z\" />\n              </svg>\n            </button>\n            <div\n              v-if=\"openMenuId === dashboard._id\"\n              class=\"absolute right-0 mt-1 w-36 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black/5 z-10\"\n            >\n              <div class=\"py-1\">\n                <router-link\n                  :to=\"'/dashboard/' + dashboard._id + '?edit=true'\"\n                  class=\"block px-4 py-2 text-sm text-content-secondary hover:bg-muted\">\n                  Edit\n                </router-link>\n                <button\n                  @click=\"showDeleteDashboardModal = dashboard; openMenuId = null\"\n                  type=\"button\"\n                  class=\"block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-muted\">\n                  Delete\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showCreateDashboardModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false;\">&times;</div>\n      <create-dashboard @close=\"insertNewDashboard\"></create-dashboard>\n    </template>\n  </modal>\n\n  <modal v-if=\"showDeleteDashboardModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showDeleteDashboardModal = null;\">&times;</div>\n      <h2>Are you sure you want to delete \"{{showDeleteDashboardModal.title}}\"?</h2>\n      <div class=\"flex space-x-2 mt-4\">\n        <button class=\"px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-500 text-sm font-semibold\" @click=\"deleteDashboard(showDeleteDashboardModal)\">Yes, delete</button>\n        <button class=\"px-4 py-2 bg-muted text-content-secondary rounded-md hover:bg-muted text-sm font-semibold\" @click=\"showDeleteDashboardModal=null;\">Cancel</button>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ },
 
@@ -58836,7 +59053,7 @@ exports.validatorErrorSymbol = Symbol('mongoose#validatorError');
 
 
 
-const ObjectId = (__webpack_require__(/*! mongodb/lib/bson */ "./node_modules/mongodb/lib/bson.js").ObjectId);
+const ObjectId = (__webpack_require__(/*! mongodb/lib/bson */ "./node_modules/mongoose/node_modules/mongodb/lib/bson.js").ObjectId);
 const objectIdSymbol = (__webpack_require__(/*! ../helpers/symbols */ "./node_modules/mongoose/lib/helpers/symbols.js").objectIdSymbol);
 
 /**
@@ -64736,7 +64953,7 @@ var src_default = VueToastificationPlugin;
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","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":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ace-builds":"^1.43.6","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","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","time-commando":"1.0.1","typescript":"^6.0.2","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x","xss":"^1.0.15"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"optionalPeerDependencies":{"@mongoosejs/task":"0.5.x || 0.6.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongodb-memory-server":"^11.0.1","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","seed":"node seed/index.js","start":"node ./local.js","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js","test:frontend":"mocha test/frontend/*.test.js","eval:agent":"node eval/agent/run.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.5.6","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":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ace-builds":"^1.43.6","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","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","time-commando":"1.0.1","typescript":"^6.0.2","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x","xss":"^1.0.15"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"optionalPeerDependencies":{"@mongoosejs/task":"0.5.x || 0.6.x"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongodb-memory-server":"^11.0.1","mongoose":"9.x","sinon":"^21.0.1"},"scripts":{"lint":"eslint .","seed":"node seed/index.js","start":"node ./local.js","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js","test:frontend":"mocha test/frontend/*.test.js","eval:agent":"node eval/agent/run.js"}}');
 
 /***/ }
 

package/frontend/public/images/pin-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M680-840v80h-40v327l-80-80v-247H400v87l-87-87-33-33v-47h400ZM480-40l-40-40v-240H240v-80l80-80v-46L56-792l56-56 736 736-58 56-264-264h-6v240l-40 40ZM354-400h92l-44-44-2-2-46 46Zm126-193Zm-78 149Z"/></svg>

package/frontend/public/images/pin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40v280Zm-286 80h252l-46-46v-314H400v314l-46 46Zm126 0Z"/></svg>

package/frontend/public/tw.css

@@ -905,6 +905,10 @@ video {
   margin-bottom: 1rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -1681,6 +1685,10 @@ video {
        column-gap: 1.5rem;
 }
 
+.gap-y-1 {
+  row-gap: 0.25rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -2524,6 +2532,10 @@ video {
   padding-left: 2rem;
 }
 
+.pl-9 {
+  padding-left: 2.25rem;
+}
+
 .pr-12 {
   padding-right: 3rem;
 }
@@ -2927,6 +2939,10 @@ video {
   text-decoration-line: underline;
 }
 
+.decoration-primary {
+  text-decoration-color: var(--color-primary);
+}
+
 .decoration-dotted {
   text-decoration-style: dotted;
 }
@@ -3063,6 +3079,10 @@ video {
   --tw-ring-color: rgb(0 0 0 / 0.05);
 }
 
+.ring-edge {
+  --tw-ring-color: var(--color-edge);
+}
+
 .ring-edge-strong {
   --tw-ring-color: var(--color-edge-strong);
 }
@@ -3650,6 +3670,10 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-inset:focus {
+  --tw-ring-inset: inset;
+}
+
 .focus\:ring-blue-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
@@ -3896,6 +3920,10 @@ video {
     flex: none;
   }
 
+  .sm\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .sm\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

package/frontend/src/dashboards/dashboards.html

@@ -10,6 +10,23 @@
       </button>
     </div>
 
+    <div v-if="status !== 'loading'" class="mb-5">
+      <label for="dashboard-search" class="sr-only">Search dashboards</label>
+      <div class="relative max-w-lg">
+        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-content-tertiary">
+          <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+          </svg>
+        </div>
+        <input
+          id="dashboard-search"
+          v-model="searchText"
+          type="search"
+          class="block w-full rounded-md border-0 bg-surface py-2 pl-9 pr-3 text-sm text-content shadow-sm ring-1 ring-inset ring-edge placeholder:text-content-tertiary focus:ring-2 focus:ring-inset focus:ring-primary"
+          placeholder="Search by title or description">
+      </div>
+    </div>
+
     <div v-if="status === 'loading'" class="text-center py-12">
       <svg
         class="inline w-8 h-8 animate-spin text-gray-400"
@@ -38,21 +55,52 @@
       </div>
     </div>
 
+    <div v-else-if="filteredDashboards.length === 0" class="text-center py-12">
+      <h3 class="text-sm font-semibold text-content">No matching dashboards</h3>
+      <p class="mt-1 text-sm text-content-tertiary">Try a different title or description.</p>
+    </div>
+
     <div v-else class="space-y-3">
       <div
-        v-for="dashboard in dashboards"
+        v-for="dashboard in filteredDashboards"
         :key="dashboard._id"
-        class="bg-surface rounded-lg border border-edge px-5 py-4 flex items-center justify-between hover:border-edge-strong transition-colors"
+        class="bg-surface rounded-lg border border-edge px-5 py-4 flex items-start justify-between hover:border-edge-strong transition-colors"
       >
         <div class="min-w-0 flex-1 mr-4">
           <router-link
             :to="'/dashboard/' + dashboard._id"
             class="text-sm font-semibold text-content hover:text-primary block truncate">
-            {{ dashboard.title }}
+            <span v-html="highlightTitle(dashboard.title)"></span>
           </router-link>
-          <p v-if="dashboard.description" class="mt-0.5 text-sm text-content-tertiary truncate">{{ dashboard.description }}</p>
+          <p
+            v-if="dashboard.description"
+            class="mt-0.5 text-sm text-content-tertiary truncate"
+            v-html="highlightDescription(dashboard.description)"></p>
+          <dl class="mt-3 grid grid-cols-1 gap-x-4 gap-y-1 text-xs text-content-tertiary sm:grid-cols-3">
+            <div>
+              <dt class="font-medium text-content-secondary">Created At</dt>
+              <dd>{{ formatDate(dashboard.createdAt) }}</dd>
+            </div>
+            <div>
+              <dt class="font-medium text-content-secondary">Last Evaluated At</dt>
+              <dd>{{ formatDate(dashboard.lastEvaluatedAt) }}</dd>
+            </div>
+            <div v-show="dashboard.createdBy">
+              <dt class="font-medium text-content-secondary">Created By</dt>
+              <dd class="truncate">{{ dashboard.createdBy?.name }}</dd>
+            </div>
+          </dl>
         </div>
         <div class="flex items-center gap-2 shrink-0">
+          <button
+            type="button"
+            @click="togglePin(dashboard)"
+            :title="dashboard.isPinned ? 'Unpin dashboard' : 'Pin dashboard'"
+            :aria-label="dashboard.isPinned ? 'Unpin dashboard' : 'Pin dashboard'"
+            class="rounded-md bg-surface px-2 py-1.5 text-content-tertiary ring-1 ring-inset ring-gray-300 hover:bg-page"
+            :class="dashboard.isPinned ? 'text-primary ring-primary/40' : ''">
+            <img :src="dashboard.isPinned ? 'images/pin-off.svg' : 'images/pin.svg'" class="w-4 h-4" alt="" />
+          </button>
           <router-link
             :to="'/dashboard/' + dashboard._id"
             class="rounded-md bg-primary px-3 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover">

package/frontend/src/dashboards/dashboards.js

@@ -9,11 +9,73 @@ module.exports = app => app.component('dashboards', {
   data: () => ({
     status: 'loading',
     dashboards: [],
+    searchText: '',
     showCreateDashboardModal: false,
     showDeleteDashboardModal: null,
     openMenuId: null
   }),
+  computed: {
+    filteredDashboards() {
+      const searchWords = getSearchWords(this.searchText);
+      let dashboards = this.dashboards;
+      if (searchWords.length === 0) {
+        return sortPinnedFirst(dashboards);
+      }
+      const searchPatterns = searchWords.map(word => new RegExp(escapeRegExp(word), 'i'));
+
+      dashboards = dashboards.filter(dashboard => {
+        const searchableText = `${dashboard.title || ''} ${dashboard.description || ''}`;
+        return searchPatterns.every(pattern => pattern.test(searchableText));
+      });
+
+      return sortPinnedFirst(dashboards);
+    }
+  },
   methods: {
+    highlightTitle(value) {
+      return this.highlightSearchText(value, 'underline decoration-primary underline-offset-2');
+    },
+    highlightDescription(value) {
+      return this.highlightSearchText(value, 'font-semibold text-content-secondary');
+    },
+    highlightSearchText(value, className) {
+      const text = value || '';
+      const searchWords = getSearchWords(this.searchText);
+      if (searchWords.length === 0) {
+        return escapeHtml(text);
+      }
+      const searchPattern = new RegExp(searchWords.map(escapeRegExp).join('|'), 'ig');
+
+      let html = '';
+      let lastIndex = 0;
+      let match = searchPattern.exec(text);
+      while (match != null) {
+        html += escapeHtml(text.slice(lastIndex, match.index));
+        html += `<span class="${className}">${escapeHtml(match[0])}</span>`;
+        lastIndex = match.index + match[0].length;
+        match = searchPattern.exec(text);
+      }
+      html += escapeHtml(text.slice(lastIndex));
+      return html;
+    },
+    formatDate(value) {
+      if (!value) {
+        return '-';
+      }
+      const date = new Date(value);
+      if (Number.isNaN(date.getTime())) {
+        return '-';
+      }
+      return new Intl.DateTimeFormat(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short'
+      }).format(date);
+    },
+    formatUser(dashboard) {
+      return dashboard.createdBy?.name ||
+        dashboard.createdBy?.email ||
+        (dashboard.createdById ? dashboard.createdById.toString() : '-');
+    },
     toggleMenu(id) {
       this.openMenuId = this.openMenuId === id ? null : id;
     },
@@ -33,8 +95,19 @@ module.exports = app => app.component('dashboards', {
       this.$toast.success('Dashboard deleted!');
     },
     insertNewDashboard(dashboard) {
-      this.dashboards.push(dashboard);
+      this.dashboards.unshift(dashboard);
       this.showCreateDashboardModal = false;
+    },
+    async togglePin(dashboard) {
+      if (!dashboard) {
+        return;
+      }
+
+      const { doc } = await api.Dashboard.updateDashboard({
+        dashboardId: dashboard._id,
+        isPinned: !dashboard.isPinned
+      });
+      dashboard.isPinned = doc.isPinned;
     }
   },
   directives: {
@@ -58,3 +131,25 @@ module.exports = app => app.component('dashboards', {
     this.status = 'loaded';
   }
 });
+
+function escapeHtml(value) {
+  return value.toString().
+    replace(/&/g, '&amp;').
+    replace(/</g, '&lt;').
+    replace(/>/g, '&gt;').
+    replace(/"/g, '&quot;').
+    replace(/'/g, '&#39;');
+}
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function getSearchWords(searchText) {
+  return Array.from(new Set(searchText.trim().split(/\s+/).filter(Boolean))).
+    sort((a, b) => b.length - a.length);
+}
+
+function sortPinnedFirst(dashboards) {
+  return dashboards.slice().sort((a, b) => Number(Boolean(b.isPinned)) - Number(Boolean(a.isPinned)));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "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": {