@mongoosejs/studio 0.5.2 → 0.5.3

package/frontend/public/app.js

@@ -457,6 +457,133 @@ module.exports = {
 };
 
 
+/***/ },
+
+/***/ "./frontend/src/_util/recent-pages-history.js"
+/*!****************************************************!*\
+  !*** ./frontend/src/_util/recent-pages-history.js ***!
+  \****************************************************/
+(module) {
+
+"use strict";
+
+
+const RECENT_PAGES_STORAGE_KEY = 'studio:recent-pages-history';
+const RECENT_PAGES_CHANGED_EVENT = 'studio-recent-pages-changed';
+const RECENT_PAGES_LOCK_NAME = `studio-lock:${RECENT_PAGES_STORAGE_KEY}`;
+const MAX_RECENT_PAGES = 50;
+
+/** Collapses hash-style prefixes (e.g. `/#/`) to a normal path; keeps query string. */
+function normalizeTrackedPath(fullPath) {
+  if (!fullPath || typeof fullPath !== 'string') {
+    return '/';
+  }
+  const qIndex = fullPath.indexOf('?');
+  const rawMain = qIndex === -1 ? fullPath : fullPath.slice(0, qIndex);
+  const qs = qIndex === -1 ? '' : fullPath.slice(qIndex);
+
+  let pathOnly = rawMain.trim().replace(/#/g, '');
+  pathOnly = pathOnly.replace(/^\/+/u, '/');
+  if (pathOnly !== '/' && /\/$/u.test(pathOnly)) {
+    pathOnly = pathOnly.replace(/\/+$/u, '');
+  }
+  if (pathOnly === '' || pathOnly === '/') {
+    pathOnly = '/';
+  } else if (!pathOnly.startsWith('/')) {
+    pathOnly = `/${pathOnly}`;
+  }
+
+  const out = qs ? pathOnly + qs : pathOnly;
+  return out;
+}
+
+function safeReadRecentPages() {
+  if (typeof window === 'undefined' || !window.localStorage) {
+    return [];
+  }
+  try {
+    const raw = window.localStorage.getItem(RECENT_PAGES_STORAGE_KEY);
+    if (!raw) {
+      return [];
+    }
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+    return parsed
+      .map(entry => {
+        if (!entry || typeof entry.path !== 'string') {
+          return null;
+        }
+        return { ...entry, path: normalizeTrackedPath(entry.path) };
+      })
+      .filter(
+        entry =>
+          entry &&
+          typeof entry.label === 'string' &&
+          typeof entry.visitedAt === 'number' &&
+          entry.path !== ''
+      )
+      .slice(0, MAX_RECENT_PAGES);
+  } catch {
+    return [];
+  }
+}
+
+function notifyRecentPagesChangedFromThisTab() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  try {
+    window.dispatchEvent(new CustomEvent(RECENT_PAGES_CHANGED_EVENT));
+  } catch {
+    /* ignore */
+  }
+}
+
+function saveRecentPages(entries) {
+  if (typeof window === 'undefined' || !window.localStorage) {
+    return;
+  }
+  window.localStorage.setItem(
+    RECENT_PAGES_STORAGE_KEY,
+    JSON.stringify(entries.slice(0, MAX_RECENT_PAGES))
+  );
+  notifyRecentPagesChangedFromThisTab();
+}
+
+function withRecentPagesStorageLock(syncFn) {
+  if (typeof window === 'undefined' || !window.localStorage) {
+    syncFn();
+    return Promise.resolve();
+  }
+
+  try {
+    const locksApi =
+      typeof navigator !== 'undefined' && navigator.locks !== undefined ? navigator.locks : null;
+
+    if (locksApi !== null && typeof locksApi.request === 'function') {
+      return locksApi.request(RECENT_PAGES_LOCK_NAME, syncFn);
+    }
+  } catch {
+    /* fall through */
+  }
+
+  syncFn();
+  return Promise.resolve();
+}
+
+module.exports = {
+  RECENT_PAGES_STORAGE_KEY,
+  RECENT_PAGES_CHANGED_EVENT,
+  MAX_RECENT_PAGES,
+  normalizeTrackedPath,
+  safeReadRecentPages,
+  saveRecentPages,
+  withRecentPagesStorageLock
+};
+
+
 /***/ },
 
 /***/ "./frontend/src/ace-editor/ace-editor.js"
@@ -6509,12 +6636,143 @@ const { routes, hasAccess } = __webpack_require__(/*! ./routes */ "./frontend/sr
 const Toast = (__webpack_require__(/*! vue-toastification */ "./node_modules/vue-toastification/dist/index.mjs")["default"]);
 const { useToast } = __webpack_require__(/*! vue-toastification */ "./node_modules/vue-toastification/dist/index.mjs");
 const appendCSS = __webpack_require__(/*! ./appendCSS */ "./frontend/src/appendCSS.js");
+const {
+  safeReadRecentPages,
+  saveRecentPages,
+  MAX_RECENT_PAGES,
+  normalizeTrackedPath,
+  withRecentPagesStorageLock
+} = __webpack_require__(/*! ./_util/recent-pages-history */ "./frontend/src/_util/recent-pages-history.js");
 appendCSS(__webpack_require__(/*! vue-toastification/dist/index.css */ "./node_modules/vue-toastification/dist/index.css"));
 
+const TRACKED_RECENT_PAGE_ROUTE_NAMES = new Set(['model', 'document', 'dashboard', 'chat']);
+
+function formatHistoryLabel(route) {
+  if (!route || typeof route.path !== 'string') {
+    return 'Unknown page';
+  }
+  if (route.name === 'model') {
+    return route.params?.model ? `Model: ${route.params.model}` : 'Model';
+  }
+  if (route.name === 'document') {
+    const model = route.params?.model ? `${route.params.model} ` : '';
+    const documentId = route.params?.documentId ? String(route.params.documentId) : '';
+    const shortDocumentId = documentId ? documentId.slice(0, 24) : '';
+    return `Document: ${model}${shortDocumentId}`.trim();
+  }
+  if (route.name === 'dashboard') {
+    return route.params?.dashboardId ? `Dashboard: ${route.params.dashboardId}` : 'Dashboard';
+  }
+  if (route.name === 'chat') {
+    return route.params?.threadId ? `Chat: ${route.params.threadId}` : 'Chat';
+  }
+  const normalizedPath = route.path.replace(/^\//, '');
+  return normalizedPath || 'Home';
+}
+
+function trackRecentPage(route) {
+  if (!route || typeof route.path !== 'string') {
+    return;
+  }
+  if (!TRACKED_RECENT_PAGE_ROUTE_NAMES.has(route.name)) {
+    return;
+  }
+  if (typeof route.path === 'string' && route.path.includes('code=')) {
+    return;
+  }
+  const path = normalizeTrackedPath(route.fullPath || route.path || '/');
+  const label = formatHistoryLabel(route);
+  const visitedAt = Date.now();
+
+  void withRecentPagesStorageLock(() => {
+    const existing = safeReadRecentPages();
+    const deduped = existing.filter(entry => normalizeTrackedPath(entry.path) !== path);
+    const next = [...deduped, { path, label, visitedAt }]
+      .sort((a, b) => b.visitedAt - a.visitedAt)
+      .slice(0, MAX_RECENT_PAGES);
+    saveRecentPages(next);
+  });
+}
+
 const app = Vue.createApp({
   template: '<app-component />'
 });
 
+window.drawArrowTo = function drawArrowTo(elementOrSelector) {
+  const element = typeof elementOrSelector === 'string' ?
+    document.querySelector(elementOrSelector) :
+    elementOrSelector;
+
+  if (!element || typeof element.getBoundingClientRect !== 'function') {
+    throw new Error('window.drawArrowTo() requires a DOM element or selector');
+  }
+
+  const existingArrow = document.getElementById('mongoose-studio-screenshot-arrow');
+  if (existingArrow) {
+    existingArrow.remove();
+  }
+
+  const rect = element.getBoundingClientRect();
+  const arrowLength = 140;
+  const arrowRise = 80;
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+  const startX = Math.max(24, Math.min(window.innerWidth - 24, centerX - arrowLength));
+  const startY = Math.max(24, Math.min(window.innerHeight - 24, centerY - arrowRise));
+  const targetX = Math.max(rect.left, Math.min(rect.right, startX));
+  const targetY = Math.max(rect.top, Math.min(rect.bottom, startY));
+  const controlX = startX + (targetX - startX) * 0.6;
+  const controlY = startY + (targetY - startY) * 0.15;
+  const svgNS = 'http://www.w3.org/2000/svg';
+  const svg = document.createElementNS(svgNS, 'svg');
+  const defs = document.createElementNS(svgNS, 'defs');
+  const marker = document.createElementNS(svgNS, 'marker');
+  const markerPath = document.createElementNS(svgNS, 'path');
+  const path = document.createElementNS(svgNS, 'path');
+
+  svg.setAttribute('id', 'mongoose-studio-screenshot-arrow');
+  svg.setAttribute('viewBox', `0 0 ${window.innerWidth} ${window.innerHeight}`);
+  svg.setAttribute('width', '100vw');
+  svg.setAttribute('height', '100vh');
+  svg.style.position = 'fixed';
+  svg.style.left = '0';
+  svg.style.top = '0';
+  svg.style.zIndex = '2147483647';
+  svg.style.pointerEvents = 'none';
+
+  marker.setAttribute('id', 'mongoose-studio-screenshot-arrow-head');
+  marker.setAttribute('markerWidth', '14');
+  marker.setAttribute('markerHeight', '14');
+  marker.setAttribute('refX', '12');
+  marker.setAttribute('refY', '7');
+  marker.setAttribute('orient', 'auto');
+  marker.setAttribute('markerUnits', 'userSpaceOnUse');
+
+  markerPath.setAttribute('d', 'M 0 0 L 14 7 L 0 14 z');
+  markerPath.setAttribute('fill', '#dc2626');
+
+  path.setAttribute('d', `M ${startX} ${startY} Q ${controlX} ${controlY} ${targetX} ${targetY}`);
+  path.setAttribute('fill', 'none');
+  path.setAttribute('stroke', '#dc2626');
+  path.setAttribute('stroke-width', '5');
+  path.setAttribute('stroke-linecap', 'round');
+  path.setAttribute('stroke-linejoin', 'round');
+  path.setAttribute('marker-end', 'url(#mongoose-studio-screenshot-arrow-head)');
+
+  marker.appendChild(markerPath);
+  defs.appendChild(marker);
+  svg.appendChild(defs);
+  svg.appendChild(path);
+  document.body.appendChild(svg);
+
+  return {
+    element: svg,
+    remove() {
+      svg.remove();
+    }
+  };
+};
+
 // https://github.com/Maronato/vue-toastification/tree/main?tab=readme-ov-file#toast-types
 app.use(Toast, { position: 'bottom-right', timeout: 3000 });
 
@@ -6660,7 +6918,14 @@ app.component('app-component', {
     const authError = Vue.ref(null);
     const modelSchemaPaths = Vue.ref(null);
 
-    const state = Vue.reactive({ user, roles, status, nodeEnv, authError, modelSchemaPaths });
+    const state = Vue.reactive({
+      user,
+      roles,
+      status,
+      nodeEnv,
+      authError,
+      modelSchemaPaths
+    });
     Vue.provide('state', state);
 
     return state;
@@ -6724,6 +6989,10 @@ router.beforeEach((to, from, next) => {
   }
 });
 
+router.afterEach((to) => {
+  trackRecentPage(to);
+});
+
 app.config.globalProperties = { format, arrayUtils, $toast: toast };
 app.use(router);
 
@@ -7395,7 +7664,11 @@ appendCSS(__webpack_require__(/*! ./modal.css */ "./frontend/src/modal/modal.css
 
 module.exports = app => app.component('modal', {
   template,
-  props: ['containerClass'],
+  props: {
+    containerClass: String,
+    bodyClass: String,
+    flushContainer: Boolean
+  },
   mounted() {
     window.addEventListener('keydown', this.onEscape);
   },
@@ -9831,6 +10104,13 @@ const api = __webpack_require__(/*! ../api */ "./frontend/src/api.js");
 const mothership = __webpack_require__(/*! ../mothership */ "./frontend/src/mothership.js");
 const template = __webpack_require__(/*! ./navbar.html */ "./frontend/src/navbar/navbar.html");
 const { routes, hasAccess } = __webpack_require__(/*! ../routes */ "./frontend/src/routes.js");
+const {
+  RECENT_PAGES_STORAGE_KEY,
+  RECENT_PAGES_CHANGED_EVENT,
+  safeReadRecentPages,
+  saveRecentPages,
+  withRecentPagesStorageLock
+} = __webpack_require__(/*! ../_util/recent-pages-history */ "./frontend/src/_util/recent-pages-history.js");
 
 const appendCSS = __webpack_require__(/*! ../appendCSS */ "./frontend/src/appendCSS.js");
 
@@ -9842,7 +10122,9 @@ module.exports = app => app.component('navbar', {
   inject: ['state'],
   data: () => ({
     showFlyout: false,
-    darkMode: typeof localStorage !== 'undefined' && localStorage.getItem('studio-theme') === 'dark'
+    darkMode: typeof localStorage !== 'undefined' && localStorage.getItem('studio-theme') === 'dark',
+    showRecentPagesModal: false,
+    localRecentPages: []
   }),
   mounted: function() {
     window.navbar = this;
@@ -9864,6 +10146,32 @@ module.exports = app => app.component('navbar', {
         mobileMenu.classList.add('translate-x-full');
       });
     }
+
+    this.localRecentPages = safeReadRecentPages();
+
+    this._syncRecentPagesFromOtherTab = ev => {
+      if (ev.storageArea !== window.localStorage || ev.key !== RECENT_PAGES_STORAGE_KEY) {
+        return;
+      }
+      this.refreshRecentPagesFromStorage();
+    };
+    this._syncRecentPagesFromBroadcast = () => this.refreshRecentPagesFromStorage();
+
+    window.addEventListener('storage', this._syncRecentPagesFromOtherTab);
+    window.addEventListener(RECENT_PAGES_CHANGED_EVENT, this._syncRecentPagesFromBroadcast);
+  },
+  beforeUnmount() {
+    if (this._syncRecentPagesFromOtherTab) {
+      window.removeEventListener('storage', this._syncRecentPagesFromOtherTab);
+    }
+    if (this._syncRecentPagesFromBroadcast) {
+      window.removeEventListener(RECENT_PAGES_CHANGED_EVENT, this._syncRecentPagesFromBroadcast);
+    }
+  },
+  watch: {
+    '$route.fullPath'() {
+      this.refreshRecentPagesFromStorage();
+    }
   },
   computed: {
     dashboardView() {
@@ -9896,6 +10204,9 @@ module.exports = app => app.component('navbar', {
     hasTaskVisualizer() {
       return !!window.MONGOOSE_STUDIO_CONFIG.enableTaskVisualizer;
     },
+    recentPagesList() {
+      return this.localRecentPages;
+    },
     hasLLMAPIKey() {
       return !!window.MONGOOSE_STUDIO_CONFIG.hasLLMAPIKey;
     },
@@ -9930,6 +10241,30 @@ module.exports = app => app.component('navbar', {
       const meta = document.querySelector('meta[name="theme-color"]');
       if (meta) meta.setAttribute('content', this.darkMode ? '#0f0f0f' : '#ffffff');
       document.documentElement.dispatchEvent(new CustomEvent('studio-theme-changed', { detail: { dark: this.darkMode } }));
+    },
+    refreshRecentPagesFromStorage() {
+      this.localRecentPages = safeReadRecentPages();
+    },
+    openRecentPagesModal() {
+      this.showRecentPagesModal = true;
+      this.refreshRecentPagesFromStorage();
+    },
+    closeRecentPagesModal() {
+      this.showRecentPagesModal = false;
+    },
+    clearRecentPagesHistory() {
+      this.localRecentPages = [];
+      void withRecentPagesStorageLock(() => saveRecentPages([]));
+    },
+    goToRecentPage(entry) {
+      if (!entry || !entry.path) {
+        return;
+      }
+      this.showRecentPagesModal = false;
+      if (entry.path === this.$route.fullPath) {
+        return;
+      }
+      this.$router.push(entry.path);
     }
   },
   directives: {
@@ -11420,6 +11755,8 @@ var map = {
 	"./_util/deepEqual.js": "./frontend/src/_util/deepEqual.js",
 	"./_util/document-search-autocomplete": "./frontend/src/_util/document-search-autocomplete.js",
 	"./_util/document-search-autocomplete.js": "./frontend/src/_util/document-search-autocomplete.js",
+	"./_util/recent-pages-history": "./frontend/src/_util/recent-pages-history.js",
+	"./_util/recent-pages-history.js": "./frontend/src/_util/recent-pages-history.js",
 	"./ace-editor/ace-editor": "./frontend/src/ace-editor/ace-editor.js",
 	"./ace-editor/ace-editor.html": "./frontend/src/ace-editor/ace-editor.html",
 	"./ace-editor/ace-editor.js": "./frontend/src/ace-editor/ace-editor.js",
@@ -51635,7 +51972,7 @@ module.exports = "<button v-bind=\"attrsToBind\" :disabled=\"isDisabled\" @click
 (module) {
 
 "use strict";
-module.exports = "<div class=\"chat-message-script relative border rounded bg-surface my-1 text-content text-sm overflow-hidden\">\n  <div class=\"flex border-b py-1 pl-1 text-xs font-medium bg-surface\">\n    <button\n      class=\"px-4 py-1 border-r border-edge-strong text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-l-md',\n        activeTab === 'code'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-4 py-1 text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-r-md',\n        activeTab === 'output'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'output'\">\n      <span>Output</span>\n      <span v-if=\"isDryRunResult\" class=\"ml-1\">[Dry Run]</span>\n      <span\n        v-if=\"isDryRunResult\"\n        class=\"ml-1 inline-flex align-middle cursor-pointer\"\n        title=\"This output was produced in dry run mode\"\n        @click.stop=\"openDryRunInfoModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path fill-rule=\"evenodd\" d=\"M18 10A8 8 0 112 10a8 8 0 0116 0zm-7-3a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 102 0v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n    </button>\n    <div class=\"ml-auto mr-1 flex items-center\">\n      <button\n        v-if=\"activeTab === 'code' && !isEditing\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click.stop=\"startEditing\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path d=\"M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM4 13.5V16h2.5l7.086-7.086-2.828-2.828L4 13.5z\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.2em;\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <div v-if=\"!isEditing\" class=\"relative mr-1\" ref=\"runDropdown\">\n        <div class=\"flex items-center\">\n          <button\n            class=\"px-2 py-1 text-xs bg-primary hover:bg-primary-hover text-primary-text border-none rounded-l-md cursor-pointer transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed\"\n            :disabled=\"isExecuting\"\n            @click=\"executeScript()\">\n            {{ selectedRunLabel }}\n          </button>\n          <button\n            class=\"px-1 py-1 text-xs bg-primary hover:bg-primary-hover text-primary-text border-l border-black/10 rounded-r-md cursor-pointer transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed\"\n            :disabled=\"isExecuting\"\n            @click.stop=\"toggleRunDropdown\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\" clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n          <button\n            class=\"ml-1 px-1 py-1 text-content-secondary hover:bg-muted rounded cursor-pointer transition-colors\"\n            @click=\"openRunInfoModal\"\n            title=\"How run works\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M18 10A8 8 0 112 10a8 8 0 0116 0zm-7-3a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 102 0v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n        </div>\n        <div\n          v-if=\"showRunDropdown\"\n          class=\"absolute right-0 z-10 mt-1 w-40 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5\">\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            :disabled=\"isExecuting\"\n            @click=\"selectRunMode('run')\">\n            Run\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs\"\n            :class=\"isExecuting ? 'cursor-not-allowed text-gray-400' : canUseDryRun ? 'text-content-secondary hover:bg-muted' : 'cursor-not-allowed text-gray-400'\"\n            :aria-disabled=\"!canUseDryRun\"\n            :title=\"dryRunDisabledTitle\"\n            @click=\"selectRunMode('dryRun')\">\n            Dry Run\n          </button>\n        </div>\n      </div>\n      <div class=\"relative ml-1\" ref=\"dropdown\">\n        <button\n          @click.stop=\"toggleDropdown\"\n          class=\"px-1 py-1 text-xs hover:bg-gray-300 rounded flex items-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path d=\"M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z\" />\n          </svg>\n        </button>\n        <div\n          v-if=\"showDropdown\"\n          class=\"absolute right-0 z-10 mt-1 w-64 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5\">\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openCreateDashboardModal(); showDropdown = false\">\n            Create Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"copyOutput(); showDropdown = false\">\n            Copy Output As Text\n          </button>\n          <button\n            v-if=\"canOverwriteDashboard\"\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openOverwriteDashboardConfirmation(); showDropdown = false\">\n            Overwrite Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"$emit('copyMessage'); showDropdown = false\">\n            Copy Full Message\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"p-0 max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\">\n    <div v-if=\"isEditing\" class=\"flex flex-col space-y-2 chat-script-editor-wrap\">\n      <div class=\"border border-edge\">\n        <ace-editor\n          v-model=\"editedScript\"\n          mode=\"javascript\"\n          :line-numbers=\"true\"\n          class=\"w-full h-[45vh] min-h-[200px]\"\n        />\n      </div>\n      <div class=\"flex justify-end gap-2 pb-2\">\n        <button\n          class=\"px-2 py-1 text-xs bg-gray-300 text-gray-800 border-none rounded cursor-pointer hover:bg-gray-400 transition-colors\"\n          @click.stop=\"cancelEditing\">\n          Cancel\n        </button>\n        <async-button\n          class=\"px-2 py-1 text-xs bg-blue-600 text-white border-none rounded cursor-pointer hover:bg-blue-700 transition-colors disabled:bg-gray-400\"\n          @click=\"executeScript(false)\">\n          Execute\n        </async-button>\n      </div>\n    </div>\n    <pre v-else class=\"whitespace-pre-wrap !my-0 bg-muted\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n  </div>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-surface border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-result\n      v-if=\"message.executionResult?.output != null\"\n      :result=\"message.executionResult.output\">\n    </dashboard-result>\n    <pre v-else>No output</pre>\n\n    <div v-if=\"message.executionResult?.logs?.length\" class=\"mt-3 pt-3 border-t border-edge\">\n      <div class=\"text-xs font-semibold text-gray-600 uppercase tracking-wide\">Console</div>\n      <pre class=\"mt-1 bg-muted text-content p-3 rounded whitespace-pre-wrap overflow-x-auto max-h-[280px]\">{{ message.executionResult.logs }}</pre>\n    </div>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-result\n          v-if=\"message.executionResult?.output != null\"\n          :result=\"message.executionResult.output\"\n          :fullscreen=\"true\">\n        </dashboard-result>\n        <pre v-else class=\"whitespace-pre-wrap\">No output</pre>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showRunInfoModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showRunInfoModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">How Run Works</div>\n        <p class=\"mt-4 text-sm text-content-secondary\">\n          Run executes the script shown in this message on the server with access to your Mongoose models through <code class=\"bg-muted px-1 rounded\">db.models</code>. The latest script is saved back onto the chat message.\n        </p>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          Output and console logs are stored on the message, and the Output tab updates to show the latest result.\n        </p>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          Dry Run executes the same script inside a MongoDB transaction. Studio attaches the transaction session to Mongoose model and collection calls, captures the output and logs, then aborts the transaction so writes are rolled back.\n        </p>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          Dry Run requires MongoDB transaction support. It is intended for previewing what a script would return before persisting changes.\n        </p>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showDryRunInfoModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showDryRunInfoModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Dry Run Output</div>\n        <p class=\"mt-4 text-sm text-content-secondary\">\n          This output was produced in dry run mode. The script ran on the server inside a MongoDB transaction, and Studio aborted that transaction after the script finished.\n        </p>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          No data changes from the script were persisted. The displayed output and console logs were saved on the chat message so you can review what the script returned.\n        </p>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showCreateDashboardModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Create Dashboard</div>\n        <div class=\"mt-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Title</label>\n          <div class=\"mt-2\">\n            <div class=\"w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600\">\n              <input type=\"text\" v-model=\"newDashboardTitle\" class=\"outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-content placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6\" placeholder=\"My Dashboard\">\n            </div>\n          </div>\n        </div>\n        <div class=\"my-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Code</label>\n          <div class=\"border border-edge\">\n            <ace-editor\n              v-model=\"dashboardCode\"\n              mode=\"javascript\"\n              :line-numbers=\"true\"\n              class=\"h-[300px] w-full\"\n            />\n          </div>\n        </div>\n        <async-button\n          @click=\"createDashboardFromScript\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          Submit\n        </async-button>\n        <div v-if=\"createError\" class=\"rounded-md bg-red-50 p-4 mt-1\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{createError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showOverwriteDashboardConfirmationModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showOverwriteDashboardConfirmationModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Overwrite Dashboard</div>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          This will replace the linked dashboard's code with the script below.\n        </p>\n        <p class=\"mt-1 text-xs text-gray-600 break-all\" v-if=\"targetDashboardId\">\n          Dashboard ID: {{ targetDashboardId }}\n        </p>\n        <div class=\"my-4 border border-edge bg-page rounded\">\n          <pre class=\"p-2 h-[300px] overflow-auto whitespace-pre-wrap text-xs\">{{ overwriteDashboardCode }}</pre>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <async-button\n            @click=\"confirmOverwriteDashboard\"\n            class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n            Confirm Overwrite\n          </async-button>\n          <button\n            class=\"px-2.5 py-1.5 rounded-md text-sm font-semibold text-content-secondary bg-gray-200 hover:bg-gray-300\"\n            @click=\"showOverwriteDashboardConfirmationModal = false\">\n            Cancel\n          </button>\n        </div>\n        <div v-if=\"overwriteError\" class=\"rounded-md bg-red-50 p-4 mt-3\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{overwriteError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
+module.exports = "<div class=\"chat-message-script relative border rounded bg-surface my-1 text-content text-sm overflow-hidden\">\n  <div class=\"flex border-b py-1 pl-1 text-xs font-medium bg-surface\">\n    <button\n      class=\"px-4 py-1 border-r border-edge-strong text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-l-md',\n        activeTab === 'code'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-4 py-1 text-content-secondary font-semibold transition-colors duration-200 focus:outline-none\"\n      :class=\"[\n        'rounded-r-md',\n        activeTab === 'output'\n          ? 'bg-gray-700 text-white shadow'\n          : 'bg-muted hover:bg-muted text-gray-600'\n      ]\"\n      @click=\"activeTab = 'output'\">\n      <span>Output</span>\n      <span v-if=\"isDryRunResult\" class=\"ml-1\">[Dry Run]</span>\n      <span\n        v-if=\"isDryRunResult\"\n        class=\"ml-1 inline-flex align-middle cursor-pointer\"\n        title=\"This output was produced in dry run mode\"\n        @click.stop=\"openDryRunInfoModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path fill-rule=\"evenodd\" d=\"M18 10A8 8 0 112 10a8 8 0 0116 0zm-7-3a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 102 0v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\" />\n        </svg>\n      </span>\n    </button>\n    <div class=\"ml-auto mr-1 flex items-center\">\n      <button\n        v-if=\"activeTab === 'code' && !isEditing\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click.stop=\"startEditing\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path d=\"M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM4 13.5V16h2.5l7.086-7.086-2.828-2.828L4 13.5z\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-primary-hover transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.2em;\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 1v4m0 0h-4m4 0l-5-5\" />\n        </svg>\n      </button>\n      <div class=\"relative mr-1\" ref=\"runDropdown\">\n        <div class=\"flex items-center\">\n          <button\n            class=\"px-2 py-1 text-xs bg-primary hover:bg-primary-hover text-primary-text border-none rounded-l-md cursor-pointer transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed\"\n            :disabled=\"isExecuting\"\n            @click=\"executeScript()\">\n            {{ selectedRunLabel }}\n          </button>\n          <button\n            class=\"px-1 py-1 text-xs bg-primary hover:bg-primary-hover text-primary-text border-l border-black/10 rounded-r-md cursor-pointer transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed\"\n            :disabled=\"isExecuting\"\n            @click.stop=\"toggleRunDropdown\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\" clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n          <button\n            class=\"ml-1 px-1 py-1 text-content-secondary hover:bg-muted rounded cursor-pointer transition-colors\"\n            @click=\"openRunInfoModal\"\n            title=\"How run works\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M18 10A8 8 0 112 10a8 8 0 0116 0zm-7-3a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 102 0v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n        </div>\n        <div\n          v-if=\"showRunDropdown\"\n          class=\"absolute right-0 z-10 mt-1 w-40 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5\">\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            :disabled=\"isExecuting\"\n            @click=\"selectRunMode('run')\">\n            Run\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs\"\n            :class=\"isExecuting ? 'cursor-not-allowed text-gray-400' : canUseDryRun ? 'text-content-secondary hover:bg-muted' : 'cursor-not-allowed text-gray-400'\"\n            :aria-disabled=\"!canUseDryRun\"\n            :title=\"dryRunDisabledTitle\"\n            @click=\"selectRunMode('dryRun')\">\n            Dry Run\n          </button>\n        </div>\n      </div>\n      <div class=\"relative ml-1\" ref=\"dropdown\">\n        <button\n          @click.stop=\"toggleDropdown\"\n          class=\"px-1 py-1 text-xs hover:bg-gray-300 rounded flex items-center\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path d=\"M10 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z\" />\n          </svg>\n        </button>\n        <div\n          v-if=\"showDropdown\"\n          class=\"absolute right-0 z-10 mt-1 w-64 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5\">\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openCreateDashboardModal(); showDropdown = false\">\n            Create Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"copyOutput(); showDropdown = false\">\n            Copy Output As Text\n          </button>\n          <button\n            v-if=\"canOverwriteDashboard\"\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"openOverwriteDashboardConfirmation(); showDropdown = false\">\n            Overwrite Dashboard\n          </button>\n          <button\n            class=\"block w-full text-left px-4 py-2 text-xs text-content-secondary hover:bg-muted\"\n            @click=\"$emit('copyMessage'); showDropdown = false\">\n            Copy Full Message\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"p-0 max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\">\n    <div v-if=\"isEditing\" class=\"flex flex-col space-y-2 chat-script-editor-wrap\">\n      <div class=\"border border-edge\">\n        <ace-editor\n          v-model=\"editedScript\"\n          mode=\"javascript\"\n          :line-numbers=\"true\"\n          class=\"w-full h-[45vh] min-h-[200px]\"\n        />\n      </div>\n      <div class=\"flex justify-end gap-2 pb-2\">\n        <button\n          class=\"px-2 py-1 text-xs bg-gray-300 text-gray-800 border-none rounded cursor-pointer hover:bg-gray-400 transition-colors\"\n          @click.stop=\"cancelEditing\">\n          Cancel\n        </button>\n      </div>\n    </div>\n    <pre v-else class=\"whitespace-pre-wrap !my-0 bg-muted\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n  </div>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-surface border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-result\n      v-if=\"message.executionResult?.output != null\"\n      :result=\"message.executionResult.output\">\n    </dashboard-result>\n    <pre v-else>No output</pre>\n\n    <div v-if=\"message.executionResult?.logs?.length\" class=\"mt-3 pt-3 border-t border-edge\">\n      <div class=\"text-xs font-semibold text-gray-600 uppercase tracking-wide\">Console</div>\n      <pre class=\"mt-1 bg-muted text-content p-3 rounded whitespace-pre-wrap overflow-x-auto max-h-[280px]\">{{ message.executionResult.logs }}</pre>\n    </div>\n  </div>\n\n  <modal ref=\"outputModal\" v-if=\"showDetailModal\" containerClass=\"!h-[90vh] !w-[90vw]\">\n    <template #body>\n      <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\">&times;</div>\n      <div class=\"h-full overflow-auto\">\n        <dashboard-result\n          v-if=\"message.executionResult?.output != null\"\n          :result=\"message.executionResult.output\"\n          :fullscreen=\"true\">\n        </dashboard-result>\n        <pre v-else class=\"whitespace-pre-wrap\">No output</pre>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showRunInfoModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showRunInfoModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">How Run Works</div>\n        <p class=\"mt-4 text-sm text-content-secondary\">\n          Run executes the script shown in this message on the server with access to your Mongoose models through <code class=\"bg-muted px-1 rounded\">db.models</code>. The latest script is saved back onto the chat message.\n        </p>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          Output and console logs are stored on the message, and the Output tab updates to show the latest result.\n        </p>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          Dry Run executes the same script inside a MongoDB transaction. Studio attaches the transaction session to Mongoose model and collection calls, captures the output and logs, then aborts the transaction so writes are rolled back.\n        </p>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          Dry Run requires MongoDB transaction support. It is intended for previewing what a script would return before persisting changes.\n        </p>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showDryRunInfoModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showDryRunInfoModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Dry Run Output</div>\n        <p class=\"mt-4 text-sm text-content-secondary\">\n          This output was produced in dry run mode. The script ran on the server inside a MongoDB transaction, and Studio aborted that transaction after the script finished.\n        </p>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          No data changes from the script were persisted. The displayed output and console logs were saved on the chat message so you can review what the script returned.\n        </p>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showCreateDashboardModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Create Dashboard</div>\n        <div class=\"mt-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Title</label>\n          <div class=\"mt-2\">\n            <div class=\"w-full flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-teal-600\">\n              <input type=\"text\" v-model=\"newDashboardTitle\" class=\"outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-content placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6\" placeholder=\"My Dashboard\">\n            </div>\n          </div>\n        </div>\n        <div class=\"my-4\">\n          <label class=\"block text-sm font-medium leading-6 text-content\">Code</label>\n          <div class=\"border border-edge\">\n            <ace-editor\n              v-model=\"dashboardCode\"\n              mode=\"javascript\"\n              :line-numbers=\"true\"\n              class=\"h-[300px] w-full\"\n            />\n          </div>\n        </div>\n        <async-button\n          @click=\"createDashboardFromScript\"\n          class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n          Submit\n        </async-button>\n        <div v-if=\"createError\" class=\"rounded-md bg-red-50 p-4 mt-1\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{createError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n  <modal v-if=\"showOverwriteDashboardConfirmationModal\">\n    <template #body>\n      <div class=\"modal-exit\" @click=\"showOverwriteDashboardConfirmationModal = false\">&times;</div>\n      <div>\n        <div class=\"mt-4 text-content font-semibold\">Overwrite Dashboard</div>\n        <p class=\"mt-2 text-sm text-content-secondary\">\n          This will replace the linked dashboard's code with the script below.\n        </p>\n        <p class=\"mt-1 text-xs text-gray-600 break-all\" v-if=\"targetDashboardId\">\n          Dashboard ID: {{ targetDashboardId }}\n        </p>\n        <div class=\"my-4 border border-edge bg-page rounded\">\n          <pre class=\"p-2 h-[300px] overflow-auto whitespace-pre-wrap text-xs\">{{ overwriteDashboardCode }}</pre>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <async-button\n            @click=\"confirmOverwriteDashboard\"\n            class=\"rounded-md bg-teal-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600\">\n            Confirm Overwrite\n          </async-button>\n          <button\n            class=\"px-2.5 py-1.5 rounded-md text-sm font-semibold text-content-secondary bg-gray-200 hover:bg-gray-300\"\n            @click=\"showOverwriteDashboardConfirmationModal = false\">\n            Cancel\n          </button>\n        </div>\n        <div v-if=\"overwriteError\" class=\"rounded-md bg-red-50 p-4 mt-3\">\n          <div class=\"flex\">\n            <div class=\"flex-shrink-0\">\n              <svg class=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\" />\n              </svg>\n            </div>\n            <div class=\"ml-3\">\n              <h3 class=\"text-sm font-medium text-red-800\">Error</h3>\n              <div class=\"mt-2 text-sm text-red-700\">\n                {{overwriteError}}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </modal>\n</div>\n";
 
 /***/ },
 
@@ -51998,7 +52335,7 @@ module.exports = ".document .document-menu {\n  display: flex;\n  position: stic
 (module) {
 
 "use strict";
-module.exports = "<div class=\"document px-1 pt-4 pb-16 md:px-0 bg-slate-50 w-full\">\n  <div class=\"max-w-7xl mx-auto\">\n    <div class=\"flex gap-4 items-center sticky top-0 z-50 bg-surface p-4 border-b border-edge shadow-sm\">\n      <div class=\"font-bold overflow-hidden text-ellipsis\">{{model}}: {{documentId}}</div>\n      <div class=\"flex grow\">\n        <button\n          @click=\"viewMode = 'fields'\"\n          :class=\"viewMode === 'fields'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-content-secondary hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-edge-strong border-r-0 rounded-l-lg rounded-r-none\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 10h16M4 14h16M4 18h16\"></path>\n          </svg>\n          Fields\n        </button>\n        <button\n          @click=\"viewMode = 'json'\"\n          :class=\"viewMode === 'json'\n            ? 'bg-blue-600 text-white z-10'\n            : 'bg-gray-200 text-content-secondary hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-edge-strong rounded-r-lg rounded-l-none\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"></path>\n          </svg>\n          JSON\n        </button>\n      </div>\n\n      <div class=\"hidden md:flex items-center gap-3 text-sm text-slate-600\">\n        <div class=\"text-right leading-tight\">\n          <div class=\"text-xs uppercase tracking-wide text-slate-400 flex items-center gap-2 justify-end\">\n            <span>Loaded at</span>\n            <span class=\"inline-flex items-center gap-1 text-[10px] font-semibold\" :class=\"autoRefreshEnabled ? 'text-forest-green-600' : 'text-slate-400'\">\n              <span class=\"inline-block h-1.5 w-1.5 rounded-full\" :class=\"autoRefreshEnabled ? 'bg-forest-green-500' : 'bg-slate-300'\"></span>\n            </span>\n          </div>\n          <div class=\"font-medium text-slate-700\">{{lastUpdatedLabel}}</div>\n        </div>\n      </div>\n\n      <div class=\"gap-2 hidden md:flex items-center\">\n        <button\n          v-if=\"!editting\"\n          @click=\"editting = true\"\n          :disabled=\"!canEdit\"\n          :class=\"{'cursor-not-allowed opacity-50': !canEdit}\"\n          type=\"button\"\n          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\">\n          <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n        </button>\n        <button\n          v-if=\"editting\"\n          @click=\"editting = false\"\n          type=\"button\"\n          class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n          &times; Cancel\n        </button>\n        <button\n          v-if=\"editting\"\n          :disabled=\"!canManipulate\"\n          :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n          @click=\"shouldShowConfirmModal=true;\"\n          type=\"button\"\n          class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n          <img src=\"images/save.svg\" class=\"inline\" /> Save\n        </button>\n\n        <!-- 3-dot menu -->\n        <div class=\"relative\">\n          <button\n            @click=\"desktopMenuOpen = !desktopMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-content-secondary hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"desktopMenuOpen\"\n            aria-label=\"More options\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"5\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"19\" r=\"2\"></circle>\n            </svg>\n          </button>\n          <div\n            v-show=\"desktopMenuOpen\"\n            @click.away=\"desktopMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-surface ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); desktopMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); desktopMenuOpen = false\"\n                :disabled=\"isLambda\"\n                type=\"button\"\n                :class=\"['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-content-secondary hover:bg-slate-100']\"\n                :title=\"isLambda ? 'Auto-refresh only available on Express deployments' : ''\"\n              >\n                {{autoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh'}}\n              </button>\n              <button\n                @click=\"addField(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100\"\n              >\n                Run Script\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"md:hidden flex items-center\">\n        <div class=\"relative\">\n          <button\n            @click=\"mobileMenuOpen = !mobileMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-content-secondary hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"mobileMenuOpen\"\n            aria-label=\"Open menu\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\"></path>\n            </svg>\n          </button>\n          <div\n            v-show=\"mobileMenuOpen\"\n            @click.away=\"mobileMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-surface ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                v-if=\"!editting\"\n                @click=\"editting = true; mobileMenuOpen = false\"\n                :disabled=\"!canEdit\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-primary-subtle']\"\n                type=\"button\"\n              >\n                Edit\n              </button>\n              <button\n                v-if=\"editting\"\n                @click=\"editting = false; mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-slate-100\"\n              >\n                Cancel\n              </button>\n              <button\n                v-if=\"editting\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']\"\n                @click=\"shouldShowConfirmModal=true; mobileMenuOpen = false\"\n                type=\"button\"\n              >\n                Save\n              </button>\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); mobileMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-slate-100\"\n              >\n                Auto-Refresh {{autoRefreshEnabled ? 'ON' : 'OFF'}}\n              </button>\n              <button\n                @click=\"addField(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100\"\n              >\n                Run Script\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"status === 'loaded'\">\n      <document-details\n        :document=\"document\"\n        :schemaPaths=\"schemaPaths\"\n        :virtualPaths=\"virtualPaths\"\n        :editting=\"editting\"\n        :changes=\"changes\"\n        :invalid=\"invalid\"\n        :viewMode=\"viewMode\"\n        :model=\"model\"\n        @add-field=\"addField\"\n        @view-mode-change=\"updateViewMode\"></document-details>\n      <modal v-if=\"shouldShowConfirmModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n          <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowDeleteModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowDeleteModal = false;\">&times;</div>\n          <confirm-delete @close=\"shouldShowDeleteModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowCloneModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowCloneModal = false;\">&times;</div>\n            <clone-document :currentModel=\"model\" :doc=\"document\" :schemaPaths=\"schemaPaths\" @close=\"showClonedDocument\"></clone-document>\n        </template>\n      </modal>\n    </div>\n    <execute-script\n      :visible=\"scriptDrawerOpen\"\n      :model=\"model\"\n      :document-id=\"documentId\"\n      :editting=\"editting\"\n      @close=\"closeScriptDrawer\"\n      @refresh=\"handleScriptRefresh\"\n    ></execute-script>\n    <div\n      v-if=\"keyboardShortcuts.length > 0\"\n      class=\"fixed bottom-4 left-4 z-40 group\"\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Keyboard shortcuts\"\n        title=\"Keyboard shortcuts\"\n        class=\"rounded-full border border-slate-300 bg-surface p-2 text-slate-700 shadow-sm transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-primary\"\n      >\n        <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <rect x=\"2.5\" y=\"6.5\" width=\"19\" height=\"11\" rx=\"2\" stroke-width=\"1.5\"></rect>\n          <path d=\"M6 10.5h1.5M9 10.5h1.5M12 10.5h1.5M15 10.5h1.5M18 10.5h.01M6 13.5h1.5M9 13.5h6M16.5 13.5h1.5\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"pointer-events-none absolute left-0 bottom-full mb-2 min-w-[220px] translate-y-1 rounded-lg bg-slate-900 px-3 py-2.5 text-slate-200 opacity-0 shadow-xl transition-all duration-150 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100\">\n        <div\n          v-for=\"shortcut in keyboardShortcuts\"\n          :key=\"shortcut.command + shortcut.description\"\n          class=\"flex items-center justify-between gap-3 text-xs\"\n        >\n          <span class=\"font-mono font-semibold text-slate-50\">{{shortcut.command}}</span>\n          <span class=\"text-slate-300\">{{shortcut.description}}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"document px-1 pt-4 pb-16 md:px-0 bg-slate-50 w-full\">\n  <div class=\"max-w-7xl mx-auto\">\n    <div class=\"flex gap-4 items-center sticky top-0 z-50 bg-surface p-4 border-b border-edge shadow-sm\">\n      <div class=\"font-bold overflow-hidden text-ellipsis\">{{model}}: {{documentId}}</div>\n      <div class=\"flex grow\">\n        <button\n          @click=\"viewMode = 'fields'\"\n          :class=\"viewMode === 'fields'\n            ? 'bg-primary text-white z-10'\n            : 'bg-gray-200 text-content-secondary hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-edge-strong border-r-0 rounded-l-lg rounded-r-none\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 10h16M4 14h16M4 18h16\"></path>\n          </svg>\n          Fields\n        </button>\n        <button\n          @click=\"viewMode = 'json'\"\n          :class=\"viewMode === 'json'\n            ? 'bg-primary text-white z-10'\n            : 'bg-gray-200 text-content-secondary hover:bg-gray-300'\"\n          class=\"px-2 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center gap-2 border border-edge-strong rounded-r-lg rounded-l-none\"\n        >\n          <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"></path>\n          </svg>\n          JSON\n        </button>\n      </div>\n\n      <div class=\"hidden md:flex items-center gap-3 text-sm text-slate-600\">\n        <div class=\"text-right leading-tight\">\n          <div class=\"text-xs uppercase tracking-wide text-slate-400 flex items-center gap-2 justify-end\">\n            <span>Loaded at</span>\n            <span class=\"inline-flex items-center gap-1 text-[10px] font-semibold\" :class=\"autoRefreshEnabled ? 'text-forest-green-600' : 'text-slate-400'\">\n              <span class=\"inline-block h-1.5 w-1.5 rounded-full\" :class=\"autoRefreshEnabled ? 'bg-forest-green-500' : 'bg-slate-300'\"></span>\n            </span>\n          </div>\n          <div class=\"font-medium text-slate-700\">{{lastUpdatedLabel}}</div>\n        </div>\n      </div>\n\n      <div class=\"gap-2 hidden md:flex items-center\">\n        <button\n          v-if=\"!editting\"\n          @click=\"editting = true\"\n          :disabled=\"!canEdit\"\n          :class=\"{'cursor-not-allowed opacity-50': !canEdit}\"\n          type=\"button\"\n          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\">\n          <img src=\"images/edit.svg\" class=\"inline\" /> Edit\n        </button>\n        <button\n          v-if=\"editting\"\n          @click=\"editting = false\"\n          type=\"button\"\n          class=\"rounded-md bg-slate-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600\">\n          &times; Cancel\n        </button>\n        <button\n          v-if=\"editting\"\n          :disabled=\"!canManipulate\"\n          :class=\"{'cursor-not-allowed opacity-50': !canManipulate}\"\n          @click=\"shouldShowConfirmModal=true;\"\n          type=\"button\"\n          class=\"rounded-md bg-forest-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600\">\n          <img src=\"images/save.svg\" class=\"inline\" /> Save\n        </button>\n\n        <!-- 3-dot menu -->\n        <div class=\"relative\">\n          <button\n            @click=\"desktopMenuOpen = !desktopMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-2.5 py-1.5 text-sm font-medium text-content-secondary hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"desktopMenuOpen\"\n            aria-label=\"More options\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"5\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"2\"></circle>\n              <circle cx=\"12\" cy=\"19\" r=\"2\"></circle>\n            </svg>\n          </button>\n          <div\n            v-show=\"desktopMenuOpen\"\n            @click.away=\"desktopMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-surface ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); desktopMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); desktopMenuOpen = false\"\n                :disabled=\"isLambda\"\n                type=\"button\"\n                :class=\"['flex items-center px-4 py-2 text-sm', isLambda ? 'text-gray-400 cursor-not-allowed' : 'text-content-secondary hover:bg-slate-100']\"\n                :title=\"isLambda ? 'Auto-refresh only available on Express deployments' : ''\"\n              >\n                {{autoRefreshEnabled ? 'Disable Auto-Refresh' : 'Enable Auto-Refresh'}}\n              </button>\n              <button\n                @click=\"addField(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); desktopMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100\"\n              >\n                Run Script\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; desktopMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"md:hidden flex items-center\">\n        <div class=\"relative\">\n          <button\n            @click=\"mobileMenuOpen = !mobileMenuOpen\"\n            type=\"button\"\n            class=\"inline-flex items-center justify-center rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-content-secondary hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            aria-expanded=\"mobileMenuOpen\"\n            aria-label=\"Open menu\"\n          >\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                    d=\"M4 6h16M4 12h16M4 18h16\"></path>\n            </svg>\n          </button>\n          <div\n            v-show=\"mobileMenuOpen\"\n            @click.away=\"mobileMenuOpen = false\"\n            class=\"origin-top-right absolute right-0 mt-2 w-52 rounded-md shadow-lg bg-surface ring-1 ring-black ring-opacity-5 z-50\"\n          >\n            <div class=\"py-1 flex flex-col\">\n              <button\n                v-if=\"!editting\"\n                @click=\"editting = true; mobileMenuOpen = false\"\n                :disabled=\"!canEdit\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canEdit ? 'cursor-not-allowed opacity-50' : 'hover:bg-primary-subtle']\"\n                type=\"button\"\n              >\n                Edit\n              </button>\n              <button\n                v-if=\"editting\"\n                @click=\"editting = false; mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-slate-100\"\n              >\n                Cancel\n              </button>\n              <button\n                v-if=\"editting\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-green-100']\"\n                @click=\"shouldShowConfirmModal=true; mobileMenuOpen = false\"\n                type=\"button\"\n              >\n                Save\n              </button>\n              <button\n                @click=\"refreshDocument({ force: true, source: 'manual' }); mobileMenuOpen = false\"\n                :disabled=\"isRefreshing\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', isRefreshing ? 'cursor-not-allowed opacity-50' : 'hover:bg-slate-100']\"\n                type=\"button\"\n              >\n                {{isRefreshing ? 'Refreshing...' : 'Refresh'}}\n              </button>\n              <button\n                @click=\"toggleAutoRefresh(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-slate-100\"\n              >\n                Auto-Refresh {{autoRefreshEnabled ? 'ON' : 'OFF'}}\n              </button>\n              <button\n                @click=\"addField(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-green-100\"\n              >\n                Add Field\n              </button>\n              <button\n                @click=\"copyDocument(); mobileMenuOpen = false\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-blue-100\"\n              >\n                Copy Document\n              </button>\n              <button\n                @click=\"openScriptDrawer()\"\n                type=\"button\"\n                class=\"flex items-center px-4 py-2 text-sm text-content-secondary hover:bg-indigo-100\"\n              >\n                Run Script\n              </button>\n              <button\n                @click=\"shouldShowDeleteModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-red-100']\"\n                type=\"button\"\n              >\n                Delete\n              </button>\n              <button\n                @click=\"shouldShowCloneModal=true; mobileMenuOpen = false\"\n                :disabled=\"!canManipulate\"\n                :class=\"['flex items-center px-4 py-2 text-sm text-content-secondary', !canManipulate ? 'cursor-not-allowed opacity-50' : 'hover:bg-pink-100']\"\n                type=\"button\"\n              >\n                Clone\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"status === 'loaded'\">\n      <document-details\n        :document=\"document\"\n        :schemaPaths=\"schemaPaths\"\n        :virtualPaths=\"virtualPaths\"\n        :editting=\"editting\"\n        :changes=\"changes\"\n        :invalid=\"invalid\"\n        :viewMode=\"viewMode\"\n        :model=\"model\"\n        @add-field=\"addField\"\n        @view-mode-change=\"updateViewMode\"></document-details>\n      <modal v-if=\"shouldShowConfirmModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowConfirmModal = false;\">&times;</div>\n          <confirm-changes @close=\"shouldShowConfirmModal = false;\" @save=\"save\" :value=\"changes\"></confirm-changes>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowDeleteModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowDeleteModal = false;\">&times;</div>\n          <confirm-delete @close=\"shouldShowDeleteModal = false;\" @remove=\"remove\" :value=\"document\"></confirm-delete>\n        </template>\n      </modal>\n      <modal v-if=\"shouldShowCloneModal\">\n        <template v-slot:body>\n          <div class=\"modal-exit\" @click=\"shouldShowCloneModal = false;\">&times;</div>\n            <clone-document :currentModel=\"model\" :doc=\"document\" :schemaPaths=\"schemaPaths\" @close=\"showClonedDocument\"></clone-document>\n        </template>\n      </modal>\n    </div>\n    <execute-script\n      :visible=\"scriptDrawerOpen\"\n      :model=\"model\"\n      :document-id=\"documentId\"\n      :editting=\"editting\"\n      @close=\"closeScriptDrawer\"\n      @refresh=\"handleScriptRefresh\"\n    ></execute-script>\n    <div\n      v-if=\"keyboardShortcuts.length > 0\"\n      class=\"fixed bottom-4 left-4 z-40 group\"\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Keyboard shortcuts\"\n        title=\"Keyboard shortcuts\"\n        class=\"rounded-full border border-slate-300 bg-surface p-2 text-slate-700 shadow-sm transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-primary\"\n      >\n        <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <rect x=\"2.5\" y=\"6.5\" width=\"19\" height=\"11\" rx=\"2\" stroke-width=\"1.5\"></rect>\n          <path d=\"M6 10.5h1.5M9 10.5h1.5M12 10.5h1.5M15 10.5h1.5M18 10.5h.01M6 13.5h1.5M9 13.5h6M16.5 13.5h1.5\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"pointer-events-none absolute left-0 bottom-full mb-2 min-w-[220px] translate-y-1 rounded-lg bg-slate-900 px-3 py-2.5 text-slate-200 opacity-0 shadow-xl transition-all duration-150 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100\">\n        <div\n          v-for=\"shortcut in keyboardShortcuts\"\n          :key=\"shortcut.command + shortcut.description\"\n          class=\"flex items-center justify-between gap-3 text-xs\"\n        >\n          <span class=\"font-mono font-semibold text-slate-50\">{{shortcut.command}}</span>\n          <span class=\"text-slate-300\">{{shortcut.description}}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ },
 
@@ -52262,7 +52599,7 @@ module.exports = "<div class=\"list-subdocument tooltip\">\n  <div>{{shortenValu
 (module) {
 
 "use strict";
-module.exports = "/** Vue modal */\n\n.modal-mask {\n  position: fixed;\n  z-index: 9998;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: table;\n  transition: opacity 0.3s ease;\n}\n\n.modal-wrapper {\n  display: table-cell;\n  vertical-align: middle;\n}\n\n.modal-container {\n  width: 600px;\n  margin: 0px auto;\n  padding: 20px 30px;\n  padding-bottom: 40px;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\n  transition: all 0.3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n  position: relative;\n}\n\n.modal-header {\n  margin-top: 0;\n  font-size: 18px;\n  font-weight: bold;\n}\n\n.modal-header-success {\n  color: #42b983;\n}\n\n.modal-header-error {\n  color: #ff0000;\n}\n\n.modal-body {\n  margin: 20px 0;\n  max-height: calc(100vh - 40px - 60px - 10px);\n  overflow: auto;\n}\n\n.modal__button--default {\n  float: right;\n}\n\n/*\n * The following styles are auto-applied to elements with\n * transition=\"modal\" when their visibility is toggled\n * by Vue.js.\n *\n * You can easily play with the modal transition by editing\n * these styles.\n */\n\n.modal-enter {\n  opacity: 0;\n}\n\n.modal-leave-active {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\n.modal-leave-active .modal-container {\n  -webkit-transform: scale(1.1);\n  transform: scale(1.1);\n}\n\n.modal-container .modal-exit {\n  position: absolute;\n  right: 0.25em;\n  top: 0.25em;\n  cursor: pointer;\n  font-size: 1.25em;\n  height: 1.25em;\n  width: 1.25em;\n  border-radius: 100%;\n  border: 1px solid #ddd;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-container .modal-exit:hover {\n  background-color: #f1f5ff;\n}\n\n@media (max-width: 767px) {\n  .modal-container {\n    width: calc(100vw - 10px);\n    margin: 0;\n    margin-left: 5px;\n  }\n}\n";
+module.exports = "/** Vue modal */\n\n.modal-mask {\n  position: fixed;\n  z-index: 10050;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: table;\n  transition: opacity 0.3s ease;\n}\n\n.modal-wrapper {\n  display: table-cell;\n  vertical-align: middle;\n}\n\n.modal-container {\n  width: 600px;\n  margin: 0px auto;\n  padding: 20px 30px;\n  padding-bottom: 40px;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\n  transition: all 0.3s ease;\n  font-family: Helvetica, Arial, sans-serif;\n  position: relative;\n}\n\n.modal-container.modal-container--flush {\n  padding: 0;\n  padding-bottom: 0;\n}\n\n.modal-header {\n  margin-top: 0;\n  font-size: 18px;\n  font-weight: bold;\n}\n\n.modal-header-success {\n  color: #42b983;\n}\n\n.modal-header-error {\n  color: #ff0000;\n}\n\n.modal-body {\n  margin: 20px 0;\n  max-height: calc(100vh - 40px - 60px - 10px);\n  overflow: auto;\n}\n\n/* Recent pages: one scroll region — inner .modal-recent-pages-scroll only (avoids double scrollbars with .modal-body overflow). */\n.modal-body.modal-recent-pages-body {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  height: min(60vh, 22.5rem);\n  max-height: min(60vh, 22.5rem);\n  overflow: hidden;\n}\n\n.modal-body.modal-recent-pages-body .modal-recent-pages-scroll {\n  flex: 1 1 0;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.modal__button--default {\n  float: right;\n}\n\n/*\n * The following styles are auto-applied to elements with\n * transition=\"modal\" when their visibility is toggled\n * by Vue.js.\n *\n * You can easily play with the modal transition by editing\n * these styles.\n */\n\n.modal-enter {\n  opacity: 0;\n}\n\n.modal-leave-active {\n  opacity: 0;\n}\n\n.modal-enter .modal-container,\n.modal-leave-active .modal-container {\n  -webkit-transform: scale(1.1);\n  transform: scale(1.1);\n}\n\n.modal-container .modal-exit {\n  position: absolute;\n  z-index: 2;\n  right: 0.25em;\n  top: 0.25em;\n  cursor: pointer;\n  font-size: 1.25em;\n  height: 1.25em;\n  width: 1.25em;\n  border-radius: 100%;\n  border: 1px solid #ddd;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-container .modal-exit:hover {\n  background-color: #f1f5ff;\n}\n\n@media (max-width: 767px) {\n  .modal-container {\n    width: calc(100vw - 10px);\n    margin: 0;\n    margin-left: 5px;\n  }\n}\n";
 
 /***/ },
 
@@ -52273,7 +52610,7 @@ module.exports = "/** Vue modal */\n\n.modal-mask {\n  position: fixed;\n  z-ind
 (module) {
 
 "use strict";
-module.exports = "<transition name=\"modal\">\n  <div class=\"modal-mask\">\n    <div class=\"modal-wrapper\">\n      <div class=\"modal-container\" :class=\"containerClass\">\n        <div class=\"modal-body\">\n          <slot name=\"body\">\n          </slot>\n        </div>\n      </div>\n    </div>\n  </div>\n</transition>\n";
+module.exports = "<transition name=\"modal\">\n  <div class=\"modal-mask\">\n    <div class=\"modal-wrapper\">\n      <div class=\"modal-container\" :class=\"[containerClass, { 'modal-container--flush': flushContainer }]\">\n        <div class=\"modal-body\" :class=\"bodyClass\">\n          <slot name=\"body\">\n          </slot>\n        </div>\n      </div>\n    </div>\n  </div>\n</transition>\n";
 
 /***/ },
 
@@ -52350,7 +52687,7 @@ module.exports = ".active {\n  text-decoration: underline;\n}\n\n.navbar .nav-le
 (module) {
 
 "use strict";
-module.exports = "<div class=\"navbar w-full bg-page border-b border-edge !h-[55px] hidden md:grid grid-cols-[1fr_auto_1fr] items-stretch px-4\">\n  <!-- Left: Logo + Brand -->\n  <div class=\"flex items-center gap-2 self-center\">\n    <router-link class=\"flex items-center gap-2\" :to=\"{ name: defaultRoute }\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-10 text-primary\" viewBox=\"0 0 250 250\" fill=\"currentColor\" aria-label=\"Mongoose Studio Logo\">\n        <path d=\"M 241.66,125.01 C 237.81,112.98 227.41,111.95 216.76,110.36 C 215.12,95.83 210.99,83.09 202.29,70.33 C 202.99,68.37 201.92,66.65 200.74,65.11 C 183.14,41.46 157.52,27 124.66,27 C 92.62,27 66.09,40.77 48.28,63.38 C 46.21,65.85 46.26,67.71 47.12,69.36 C 37.81,81.15 33.21,93.78 30.99,109.86 C 20.19,110.58 11.71,115.92 9.04,124.94 C 3.28,145.66 5.62,157.95 10.01,169.16 C 16.14,184.65 29.12,186.31 36.04,185.81 C 42.48,185.68 44.94,184.31 44.72,182.11 C 44.26,177.79 41.01,165.31 41.01,149.12 C 41.01,138.22 43.19,127.74 46.21,117.7 C 47.51,113.33 44.66,112.05 39.16,110.28 C 41.01,96.88 45.88,84.85 52.61,73.79 C 55.17,75.56 58.07,74.88 59.61,72.71 C 75.86,54.31 97.89,45.16 124.61,45.16 C 149.71,45.16 171.91,55.91 189.29,73.47 C 191.95,76.59 193.91,76.67 197.6,74.42 C 204.93,86.26 208.28,98.24 208.98,110.39 C 203.84,111.81 201.28,113.19 202.92,118.61 C 206.51,128.99 207.92,137.93 207.92,148.73 C 207.92,162.11 204.8,174.71 202.84,182.71 C 201.92,186.23 204.31,186.91 210.79,186.99 H 213.91 C 225.87,186.61 235.39,180.64 239.49,169.05 C 244.83,155.26 245.08,138.01 241.66,125.01 Z\"/>\n        <path d=\"M 124.71,70.81 C 79.63,70.81 47.49,107.12 47.49,148.72 C 47.49,169.16 56.41,188.19 73.71,200.61 L 73.96,200.77 C 77.43,177.81 84.16,162.21 95.29,145.42 C 92.04,137.09 91.71,130.87 92.62,120.83 C 93.81,111.23 96.08,107.12 102.19,107.68 C 110.04,108.87 117.98,116.18 126.22,124.96 C 139.89,124.05 157.81,131.25 178.33,139.09 C 183.11,140.86 183.72,142.63 182.97,148.33 C 179.45,160.93 170.86,166.63 158.11,174.05 C 143.09,183.07 141.13,199.42 153.88,220.09 L 153.96,221.01 L 154.71,221.17 C 181.31,208.43 201.34,181.01 201.34,148.72 C 201.34,108.15 169.29,70.81 124.71,70.81 Z\"/>\n      </svg>\n      <span class=\"text-base font-semibold text-content whitespace-nowrap\">Mongoose Studio</span>\n    </router-link>\n  </div>\n  <!-- Center: Nav Links -->\n  <nav class=\"flex items-stretch gap-6\">\n    <a v-if=\"hasAccess(roles, 'root')\"\n      href=\"#/\"\n      class=\"inline-flex items-center px-1 border-b-2 text-sm font-medium\"\n      :class=\"documentView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'\">Documents</a>\n    <span v-else class=\"inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed\" aria-disabled=\"true\">\n      Documents\n      <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <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\" />\n      </svg>\n    </span>\n    <a v-if=\"hasAccess(roles, 'dashboards')\"\n      href=\"#/dashboards\"\n      class=\"inline-flex items-center px-1 border-b-2 text-sm font-medium\"\n      :class=\"dashboardView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'\">Dashboards</a>\n    <span v-else class=\"inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed\">\n      Dashboards\n      <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <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\" />\n      </svg>\n    </span>\n    <a v-if=\"hasAccess(roles, 'chat') && hasLLMAPIKey\"\n      href=\"#/chat\"\n      class=\"inline-flex items-center px-1 border-b-2 text-sm font-medium\"\n      :class=\"chatView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'\">Chat</a>\n    <span v-else-if=\"hasAccess(roles, 'chat') && !hasLLMAPIKey\"\n      class=\"inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed\"\n      :title=\"chatDisabledReason\">\n      Chat\n      <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <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\" />\n      </svg>\n    </span>\n    <span v-else class=\"inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed\">\n      Chat\n      <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <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\" />\n      </svg>\n    </span>\n    <a\n      v-if=\"hasTaskVisualizer\"\n      href=\"#/tasks\"\n      class=\"inline-flex items-center px-1 border-b-2 text-sm font-medium\"\n      :class=\"taskView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'\">\n      Tasks\n    </a>\n    <a\n      href=\"https://studio.mongoosejs.io/docs\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      class=\"inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-content-tertiary hover:text-content\"\n    >\n      Docs\n    </a>\n  </nav>\n  <!-- Right: Env Badge + User -->\n  <div class=\"flex items-center justify-end gap-3 self-center\">\n    <div\n      v-if=\"!!state.nodeEnv\"\n      title=\"NODE_ENV\"\n      class=\"inline-flex items-center rounded px-2 py-1 text-xs text-content-tertiary bg-surface border border-edge gap-2\"\n    >\n      <span\n        :class=\"warnEnv ? 'bg-red-400' : 'bg-yellow-400'\"\n        class=\"inline-block rounded-full\"\n        style=\"width: 0.5em; height: 0.5em;\"\n      ></span>\n      <span>{{state.nodeEnv}}</span>\n    </div>\n    <button\n      v-if=\"!user || !hasAPIKey\"\n      type=\"button\"\n      @click=\"toggleDarkMode\"\n      :title=\"darkMode ? 'Switch to light mode' : 'Switch to dark mode'\"\n      class=\"inline-flex items-center justify-center rounded-md p-2 text-content-tertiary hover:text-content-secondary hover:bg-muted\"\n      aria-label=\"Toggle dark mode\">\n      <svg v-if=\"darkMode\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\"/>\n      </svg>\n      <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"/>\n      </svg>\n    </button>\n    <div class=\"flex items-center\" v-if=\"!user && hasAPIKey\">\n      <button\n        type=\"button\"\n        @click=\"loginWithGithub\"\n        class=\"rounded bg-primary px-2 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          Login\n      </button>\n    </div>\n    <div v-if=\"user && hasAPIKey\" class=\"flex items-center relative\" v-clickOutside=\"hideFlyout\">\n      <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-gray-300\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n        <span class=\"absolute -inset-1.5\"></span>\n        <span class=\"sr-only\">Open user menu</span>\n        <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n      </button>\n\n      <div\n        v-if=\"showFlyout\"\n        class=\"absolute right-0 top-[90%] w-48 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        aria-labelledby=\"user-menu-button\"\n        style=\"z-index: 10000\"\n        tabindex=\"-1\">\n        <button\n          type=\"button\"\n          @click=\"toggleDarkMode(); showFlyout = false\"\n          class=\"w-full cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle text-left flex items-center gap-2\"\n          role=\"menuitem\"\n          tabindex=\"-1\">\n          <svg v-if=\"darkMode\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\"/></svg>\n          <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"/></svg>\n          {{ darkMode ? 'Light mode' : 'Dark mode' }}\n        </button>\n        <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" @click=\"showFlyout = false\" class=\"cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Team</router-link>\n        <span v-else class=\"block px-4 py-2 text-sm text-gray-300 cursor-not-allowed\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">\n          Team\n          <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <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\" />\n          </svg>\n        </span>\n        <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- Mobile navbar -->\n<div class=\"navbar w-full bg-page flex justify-between border-b border-edge !h-[55px] md:hidden\">\n  <div class=\"flex items-center gap-2 pl-4\">\n    <router-link class=\"flex items-center gap-2\" :to=\"{ name: defaultRoute }\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-8 text-primary\" viewBox=\"0 0 250 250\" fill=\"currentColor\" aria-label=\"Mongoose Studio Logo\">\n        <path d=\"M 241.66,125.01 C 237.81,112.98 227.41,111.95 216.76,110.36 C 215.12,95.83 210.99,83.09 202.29,70.33 C 202.99,68.37 201.92,66.65 200.74,65.11 C 183.14,41.46 157.52,27 124.66,27 C 92.62,27 66.09,40.77 48.28,63.38 C 46.21,65.85 46.26,67.71 47.12,69.36 C 37.81,81.15 33.21,93.78 30.99,109.86 C 20.19,110.58 11.71,115.92 9.04,124.94 C 3.28,145.66 5.62,157.95 10.01,169.16 C 16.14,184.65 29.12,186.31 36.04,185.81 C 42.48,185.68 44.94,184.31 44.72,182.11 C 44.26,177.79 41.01,165.31 41.01,149.12 C 41.01,138.22 43.19,127.74 46.21,117.7 C 47.51,113.33 44.66,112.05 39.16,110.28 C 41.01,96.88 45.88,84.85 52.61,73.79 C 55.17,75.56 58.07,74.88 59.61,72.71 C 75.86,54.31 97.89,45.16 124.61,45.16 C 149.71,45.16 171.91,55.91 189.29,73.47 C 191.95,76.59 193.91,76.67 197.6,74.42 C 204.93,86.26 208.28,98.24 208.98,110.39 C 203.84,111.81 201.28,113.19 202.92,118.61 C 206.51,128.99 207.92,137.93 207.92,148.73 C 207.92,162.11 204.8,174.71 202.84,182.71 C 201.92,186.23 204.31,186.91 210.79,186.99 H 213.91 C 225.87,186.61 235.39,180.64 239.49,169.05 C 244.83,155.26 245.08,138.01 241.66,125.01 Z\"/>\n        <path d=\"M 124.71,70.81 C 79.63,70.81 47.49,107.12 47.49,148.72 C 47.49,169.16 56.41,188.19 73.71,200.61 L 73.96,200.77 C 77.43,177.81 84.16,162.21 95.29,145.42 C 92.04,137.09 91.71,130.87 92.62,120.83 C 93.81,111.23 96.08,107.12 102.19,107.68 C 110.04,108.87 117.98,116.18 126.22,124.96 C 139.89,124.05 157.81,131.25 178.33,139.09 C 183.11,140.86 183.72,142.63 182.97,148.33 C 179.45,160.93 170.86,166.63 158.11,174.05 C 143.09,183.07 141.13,199.42 153.88,220.09 L 153.96,221.01 L 154.71,221.17 C 181.31,208.43 201.34,181.01 201.34,148.72 C 201.34,108.15 169.29,70.81 124.71,70.81 Z\"/>\n      </svg>\n      <span class=\"text-base font-semibold text-content\">Mongoose Studio</span>\n    </router-link>\n  </div>\n  <div class=\"flex items-center\">\n    <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->\n    <button type=\"button\" id=\"open-mobile-menu\" class=\"-ml-2 rounded-md p-2 pr-4 text-gray-400\">\n      <span class=\"sr-only\">Open menu</span>\n      <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Mobile menu mask -->\n  <div id=\"mobile-menu-mask\" class=\"fixed inset-0 bg-black bg-opacity-40 z-40 hidden\"></div>\n  <!-- Mobile menu drawer -->\n  <div id=\"mobile-menu\" style=\"z-index: 100000\" class=\"fixed inset-0 bg-page shadow-lg transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col\">\n    <div class=\"flex items-center justify-between px-4 !h-[55px] border-b border-edge\">\n      <router-link :to=\"{ name: defaultRoute }\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-[32px] text-primary\" viewBox=\"0 0 250 250\" fill=\"currentColor\" aria-label=\"Mongoose Studio Logo\">\n          <path d=\"M 241.66,125.01 C 237.81,112.98 227.41,111.95 216.76,110.36 C 215.12,95.83 210.99,83.09 202.29,70.33 C 202.99,68.37 201.92,66.65 200.74,65.11 C 183.14,41.46 157.52,27 124.66,27 C 92.62,27 66.09,40.77 48.28,63.38 C 46.21,65.85 46.26,67.71 47.12,69.36 C 37.81,81.15 33.21,93.78 30.99,109.86 C 20.19,110.58 11.71,115.92 9.04,124.94 C 3.28,145.66 5.62,157.95 10.01,169.16 C 16.14,184.65 29.12,186.31 36.04,185.81 C 42.48,185.68 44.94,184.31 44.72,182.11 C 44.26,177.79 41.01,165.31 41.01,149.12 C 41.01,138.22 43.19,127.74 46.21,117.7 C 47.51,113.33 44.66,112.05 39.16,110.28 C 41.01,96.88 45.88,84.85 52.61,73.79 C 55.17,75.56 58.07,74.88 59.61,72.71 C 75.86,54.31 97.89,45.16 124.61,45.16 C 149.71,45.16 171.91,55.91 189.29,73.47 C 191.95,76.59 193.91,76.67 197.6,74.42 C 204.93,86.26 208.28,98.24 208.98,110.39 C 203.84,111.81 201.28,113.19 202.92,118.61 C 206.51,128.99 207.92,137.93 207.92,148.73 C 207.92,162.11 204.8,174.71 202.84,182.71 C 201.92,186.23 204.31,186.91 210.79,186.99 H 213.91 C 225.87,186.61 235.39,180.64 239.49,169.05 C 244.83,155.26 245.08,138.01 241.66,125.01 Z\"/>\n          <path d=\"M 124.71,70.81 C 79.63,70.81 47.49,107.12 47.49,148.72 C 47.49,169.16 56.41,188.19 73.71,200.61 L 73.96,200.77 C 77.43,177.81 84.16,162.21 95.29,145.42 C 92.04,137.09 91.71,130.87 92.62,120.83 C 93.81,111.23 96.08,107.12 102.19,107.68 C 110.04,108.87 117.98,116.18 126.22,124.96 C 139.89,124.05 157.81,131.25 178.33,139.09 C 183.11,140.86 183.72,142.63 182.97,148.33 C 179.45,160.93 170.86,166.63 158.11,174.05 C 143.09,183.07 141.13,199.42 153.88,220.09 L 153.96,221.01 L 154.71,221.17 C 181.31,208.43 201.34,181.01 201.34,148.72 C 201.34,108.15 169.29,70.81 124.71,70.81 Z\"/>\n        </svg>\n      </router-link>\n      <button type=\"button\" id=\"close-mobile-menu\" class=\"text-gray-400 p-2 rounded-md\">\n        <span class=\"sr-only\">Close menu</span>\n        <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n    <nav class=\"flex-1 px-4 py-4 space-y-2\">\n      <div class=\"flex items-center gap-2 px-3 py-2\" v-if=\"!user || !hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"toggleDarkMode\"\n          class=\"inline-flex items-center gap-2 rounded-md px-3 py-2 text-base font-medium text-content-secondary hover:bg-muted\"\n          aria-label=\"Toggle dark mode\">\n          <svg v-if=\"darkMode\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\"/></svg>\n          <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"/></svg>\n          <span>{{ darkMode ? 'Light mode' : 'Dark mode' }}</span>\n        </button>\n      </div>\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"documentView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'\">Documents</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Documents\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <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\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"dashboardView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'\">Dashboards</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Dashboards\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <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\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'chat') && hasLLMAPIKey\"\n        href=\"#/chat\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"chatView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'\">Chat</a>\n      <span v-else-if=\"hasAccess(roles, 'chat') && !hasLLMAPIKey\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\"\n        :title=\"chatDisabledReason\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <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\" />\n        </svg>\n      </span>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <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\" />\n        </svg>\n      </span>\n      <a v-if=\"hasTaskVisualizer\"\n        href=\"#/tasks\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"taskView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'\">Tasks</a>\n      <div v-if=\"!user && hasAPIKey\" class=\"mt-4\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"w-full rounded bg-muted text-content px-3 py-2 text-base font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"mt-4\">\n        <div class=\"flex items-center gap-3 px-3 py-2 bg-page rounded-md\">\n          <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          <span class=\"text-content font-medium\">{{ user.name }}</span>\n        </div>\n        <div class=\"mt-2 space-y-1\">\n          <button\n            type=\"button\"\n            @click=\"toggleDarkMode\"\n            class=\"w-full inline-flex items-center gap-2 px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle text-left\">\n            <svg v-if=\"darkMode\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\"/></svg>\n            <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"/></svg>\n            {{ darkMode ? 'Light mode' : 'Dark mode' }}\n          </button>\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" class=\"block px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle\">Team</router-link>\n          <span v-else class=\"block px-3 py-2 rounded-md text-base text-gray-300 cursor-not-allowed\">\n            Team\n            <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <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\" />\n            </svg>\n          </span>\n          <span @click=\"logout\" class=\"block px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle cursor-pointer\">Sign out</span>\n        </div>\n      </div>\n    </nav>\n  </div>\n</div>\n";
+module.exports = "<div>\n<div class=\"navbar w-full bg-page border-b border-edge !h-[55px] hidden md:grid grid-cols-[1fr_auto_1fr] items-stretch px-4\">\n  <!-- Left: Logo + Brand -->\n  <div class=\"flex items-center gap-2 self-center\">\n    <router-link class=\"flex items-center gap-2\" :to=\"{ name: defaultRoute }\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-10 text-primary\" viewBox=\"0 0 250 250\" fill=\"currentColor\" aria-label=\"Mongoose Studio Logo\">\n        <path d=\"M 241.66,125.01 C 237.81,112.98 227.41,111.95 216.76,110.36 C 215.12,95.83 210.99,83.09 202.29,70.33 C 202.99,68.37 201.92,66.65 200.74,65.11 C 183.14,41.46 157.52,27 124.66,27 C 92.62,27 66.09,40.77 48.28,63.38 C 46.21,65.85 46.26,67.71 47.12,69.36 C 37.81,81.15 33.21,93.78 30.99,109.86 C 20.19,110.58 11.71,115.92 9.04,124.94 C 3.28,145.66 5.62,157.95 10.01,169.16 C 16.14,184.65 29.12,186.31 36.04,185.81 C 42.48,185.68 44.94,184.31 44.72,182.11 C 44.26,177.79 41.01,165.31 41.01,149.12 C 41.01,138.22 43.19,127.74 46.21,117.7 C 47.51,113.33 44.66,112.05 39.16,110.28 C 41.01,96.88 45.88,84.85 52.61,73.79 C 55.17,75.56 58.07,74.88 59.61,72.71 C 75.86,54.31 97.89,45.16 124.61,45.16 C 149.71,45.16 171.91,55.91 189.29,73.47 C 191.95,76.59 193.91,76.67 197.6,74.42 C 204.93,86.26 208.28,98.24 208.98,110.39 C 203.84,111.81 201.28,113.19 202.92,118.61 C 206.51,128.99 207.92,137.93 207.92,148.73 C 207.92,162.11 204.8,174.71 202.84,182.71 C 201.92,186.23 204.31,186.91 210.79,186.99 H 213.91 C 225.87,186.61 235.39,180.64 239.49,169.05 C 244.83,155.26 245.08,138.01 241.66,125.01 Z\"/>\n        <path d=\"M 124.71,70.81 C 79.63,70.81 47.49,107.12 47.49,148.72 C 47.49,169.16 56.41,188.19 73.71,200.61 L 73.96,200.77 C 77.43,177.81 84.16,162.21 95.29,145.42 C 92.04,137.09 91.71,130.87 92.62,120.83 C 93.81,111.23 96.08,107.12 102.19,107.68 C 110.04,108.87 117.98,116.18 126.22,124.96 C 139.89,124.05 157.81,131.25 178.33,139.09 C 183.11,140.86 183.72,142.63 182.97,148.33 C 179.45,160.93 170.86,166.63 158.11,174.05 C 143.09,183.07 141.13,199.42 153.88,220.09 L 153.96,221.01 L 154.71,221.17 C 181.31,208.43 201.34,181.01 201.34,148.72 C 201.34,108.15 169.29,70.81 124.71,70.81 Z\"/>\n      </svg>\n      <span class=\"text-base font-semibold text-content whitespace-nowrap\">Mongoose Studio</span>\n    </router-link>\n  </div>\n  <!-- Center: Nav Links -->\n  <nav class=\"flex items-stretch gap-6\">\n    <a v-if=\"hasAccess(roles, 'root')\"\n      href=\"#/\"\n      class=\"inline-flex items-center px-1 border-b-2 text-sm font-medium\"\n      :class=\"documentView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'\">Documents</a>\n    <span v-else class=\"inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed\" aria-disabled=\"true\">\n      Documents\n      <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <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\" />\n      </svg>\n    </span>\n    <a v-if=\"hasAccess(roles, 'dashboards')\"\n      href=\"#/dashboards\"\n      class=\"inline-flex items-center px-1 border-b-2 text-sm font-medium\"\n      :class=\"dashboardView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'\">Dashboards</a>\n    <span v-else class=\"inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed\">\n      Dashboards\n      <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <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\" />\n      </svg>\n    </span>\n    <a v-if=\"hasAccess(roles, 'chat') && hasLLMAPIKey\"\n      href=\"#/chat\"\n      class=\"inline-flex items-center px-1 border-b-2 text-sm font-medium\"\n      :class=\"chatView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'\">Chat</a>\n    <span v-else-if=\"hasAccess(roles, 'chat') && !hasLLMAPIKey\"\n      class=\"inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed\"\n      :title=\"chatDisabledReason\">\n      Chat\n      <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <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\" />\n      </svg>\n    </span>\n    <span v-else class=\"inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-300 cursor-not-allowed\">\n      Chat\n      <svg class=\"h-4 w-4 ml-1\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <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\" />\n      </svg>\n    </span>\n    <a\n      v-if=\"hasTaskVisualizer\"\n      href=\"#/tasks\"\n      class=\"inline-flex items-center px-1 border-b-2 text-sm font-medium\"\n      :class=\"taskView ? 'text-content border-primary' : 'border-transparent text-content-tertiary hover:text-content'\">\n      Tasks\n    </a>\n    <a\n      href=\"https://studio.mongoosejs.io/docs\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      class=\"inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-content-tertiary hover:text-content\"\n    >\n      Docs\n    </a>\n  </nav>\n  <!-- Right: Env Badge + User -->\n  <div class=\"flex items-center justify-end gap-3 self-center\">\n    <button\n      type=\"button\"\n      class=\"inline-flex items-center justify-center rounded-md p-2 text-content-tertiary hover:bg-muted hover:text-content-secondary\"\n      title=\"Recent pages\"\n      aria-label=\"Recent pages\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"showRecentPagesModal ? 'true' : 'false'\"\n      @click=\"openRecentPagesModal\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"h-5 w-5\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\" />\n      </svg>\n    </button>\n    <div\n      v-if=\"!!state.nodeEnv\"\n      title=\"NODE_ENV\"\n      class=\"inline-flex items-center rounded px-2 py-1 text-xs text-content-tertiary bg-surface border border-edge gap-2\"\n    >\n      <span\n        :class=\"warnEnv ? 'bg-red-400' : 'bg-yellow-400'\"\n        class=\"inline-block rounded-full\"\n        style=\"width: 0.5em; height: 0.5em;\"\n      ></span>\n      <span>{{state.nodeEnv}}</span>\n    </div>\n    <button\n      v-if=\"!user || !hasAPIKey\"\n      type=\"button\"\n      @click=\"toggleDarkMode\"\n      :title=\"darkMode ? 'Switch to light mode' : 'Switch to dark mode'\"\n      class=\"inline-flex items-center justify-center rounded-md p-2 text-content-tertiary hover:text-content-secondary hover:bg-muted\"\n      aria-label=\"Toggle dark mode\">\n      <svg v-if=\"darkMode\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\"/>\n      </svg>\n      <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"/>\n      </svg>\n    </button>\n    <div class=\"flex items-center\" v-if=\"!user && hasAPIKey\">\n      <button\n        type=\"button\"\n        @click=\"loginWithGithub\"\n        class=\"rounded bg-primary px-2 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          Login\n      </button>\n    </div>\n    <div v-if=\"user && hasAPIKey\" class=\"flex items-center relative\" v-clickOutside=\"hideFlyout\">\n      <button type=\"button\" @click=\"showFlyout = !showFlyout\" class=\"relative flex rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-gray-300\" id=\"user-menu-button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n        <span class=\"absolute -inset-1.5\"></span>\n        <span class=\"sr-only\">Open user menu</span>\n        <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n      </button>\n\n      <div\n        v-if=\"showFlyout\"\n        class=\"absolute right-0 top-[90%] w-48 origin-top-right rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5 focus:outline-none\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        aria-labelledby=\"user-menu-button\"\n        style=\"z-index: 10000\"\n        tabindex=\"-1\">\n        <button\n          type=\"button\"\n          @click=\"toggleDarkMode(); showFlyout = false\"\n          class=\"w-full cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle text-left flex items-center gap-2\"\n          role=\"menuitem\"\n          tabindex=\"-1\">\n          <svg v-if=\"darkMode\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\"/></svg>\n          <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"/></svg>\n          {{ darkMode ? 'Light mode' : 'Dark mode' }}\n        </button>\n        <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" @click=\"showFlyout = false\" class=\"cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Team</router-link>\n        <span v-else class=\"block px-4 py-2 text-sm text-gray-300 cursor-not-allowed\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">\n          Team\n          <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <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\" />\n          </svg>\n        </span>\n        <span @click=\"logout\" class=\"cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle\" role=\"menuitem\" tabindex=\"-1\" id=\"user-menu-item-2\">Sign out</span>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- Mobile navbar -->\n<div class=\"navbar w-full bg-page flex justify-between border-b border-edge !h-[55px] md:hidden\">\n  <div class=\"flex items-center gap-2 pl-4\">\n    <router-link class=\"flex items-center gap-2\" :to=\"{ name: defaultRoute }\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-8 text-primary\" viewBox=\"0 0 250 250\" fill=\"currentColor\" aria-label=\"Mongoose Studio Logo\">\n        <path d=\"M 241.66,125.01 C 237.81,112.98 227.41,111.95 216.76,110.36 C 215.12,95.83 210.99,83.09 202.29,70.33 C 202.99,68.37 201.92,66.65 200.74,65.11 C 183.14,41.46 157.52,27 124.66,27 C 92.62,27 66.09,40.77 48.28,63.38 C 46.21,65.85 46.26,67.71 47.12,69.36 C 37.81,81.15 33.21,93.78 30.99,109.86 C 20.19,110.58 11.71,115.92 9.04,124.94 C 3.28,145.66 5.62,157.95 10.01,169.16 C 16.14,184.65 29.12,186.31 36.04,185.81 C 42.48,185.68 44.94,184.31 44.72,182.11 C 44.26,177.79 41.01,165.31 41.01,149.12 C 41.01,138.22 43.19,127.74 46.21,117.7 C 47.51,113.33 44.66,112.05 39.16,110.28 C 41.01,96.88 45.88,84.85 52.61,73.79 C 55.17,75.56 58.07,74.88 59.61,72.71 C 75.86,54.31 97.89,45.16 124.61,45.16 C 149.71,45.16 171.91,55.91 189.29,73.47 C 191.95,76.59 193.91,76.67 197.6,74.42 C 204.93,86.26 208.28,98.24 208.98,110.39 C 203.84,111.81 201.28,113.19 202.92,118.61 C 206.51,128.99 207.92,137.93 207.92,148.73 C 207.92,162.11 204.8,174.71 202.84,182.71 C 201.92,186.23 204.31,186.91 210.79,186.99 H 213.91 C 225.87,186.61 235.39,180.64 239.49,169.05 C 244.83,155.26 245.08,138.01 241.66,125.01 Z\"/>\n        <path d=\"M 124.71,70.81 C 79.63,70.81 47.49,107.12 47.49,148.72 C 47.49,169.16 56.41,188.19 73.71,200.61 L 73.96,200.77 C 77.43,177.81 84.16,162.21 95.29,145.42 C 92.04,137.09 91.71,130.87 92.62,120.83 C 93.81,111.23 96.08,107.12 102.19,107.68 C 110.04,108.87 117.98,116.18 126.22,124.96 C 139.89,124.05 157.81,131.25 178.33,139.09 C 183.11,140.86 183.72,142.63 182.97,148.33 C 179.45,160.93 170.86,166.63 158.11,174.05 C 143.09,183.07 141.13,199.42 153.88,220.09 L 153.96,221.01 L 154.71,221.17 C 181.31,208.43 201.34,181.01 201.34,148.72 C 201.34,108.15 169.29,70.81 124.71,70.81 Z\"/>\n      </svg>\n      <span class=\"text-base font-semibold text-content\">Mongoose Studio</span>\n    </router-link>\n  </div>\n  <div class=\"flex items-center gap-1 pr-2\">\n    <button\n      type=\"button\"\n      class=\"rounded-md p-2 text-content-tertiary hover:bg-muted hover:text-content-secondary md:hidden\"\n      title=\"Recent pages\"\n      aria-label=\"Recent pages\"\n      aria-haspopup=\"dialog\"\n      :aria-expanded=\"showRecentPagesModal ? 'true' : 'false'\"\n      @click=\"openRecentPagesModal\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"h-6 w-6\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\" />\n      </svg>\n    </button>\n    <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->\n    <button type=\"button\" id=\"open-mobile-menu\" class=\"-ml-2 rounded-md p-2 text-gray-400\">\n      <span class=\"sr-only\">Open menu</span>\n      <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Mobile menu mask -->\n  <div id=\"mobile-menu-mask\" class=\"fixed inset-0 bg-black bg-opacity-40 z-40 hidden\"></div>\n  <!-- Mobile menu drawer -->\n  <div id=\"mobile-menu\" style=\"z-index: 100000\" class=\"fixed inset-0 bg-page shadow-lg transform translate-x-full transition-transform duration-200 ease-in-out flex flex-col\">\n    <div class=\"flex items-center justify-between px-4 !h-[55px] border-b border-edge\">\n      <router-link :to=\"{ name: defaultRoute }\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-[32px] text-primary\" viewBox=\"0 0 250 250\" fill=\"currentColor\" aria-label=\"Mongoose Studio Logo\">\n          <path d=\"M 241.66,125.01 C 237.81,112.98 227.41,111.95 216.76,110.36 C 215.12,95.83 210.99,83.09 202.29,70.33 C 202.99,68.37 201.92,66.65 200.74,65.11 C 183.14,41.46 157.52,27 124.66,27 C 92.62,27 66.09,40.77 48.28,63.38 C 46.21,65.85 46.26,67.71 47.12,69.36 C 37.81,81.15 33.21,93.78 30.99,109.86 C 20.19,110.58 11.71,115.92 9.04,124.94 C 3.28,145.66 5.62,157.95 10.01,169.16 C 16.14,184.65 29.12,186.31 36.04,185.81 C 42.48,185.68 44.94,184.31 44.72,182.11 C 44.26,177.79 41.01,165.31 41.01,149.12 C 41.01,138.22 43.19,127.74 46.21,117.7 C 47.51,113.33 44.66,112.05 39.16,110.28 C 41.01,96.88 45.88,84.85 52.61,73.79 C 55.17,75.56 58.07,74.88 59.61,72.71 C 75.86,54.31 97.89,45.16 124.61,45.16 C 149.71,45.16 171.91,55.91 189.29,73.47 C 191.95,76.59 193.91,76.67 197.6,74.42 C 204.93,86.26 208.28,98.24 208.98,110.39 C 203.84,111.81 201.28,113.19 202.92,118.61 C 206.51,128.99 207.92,137.93 207.92,148.73 C 207.92,162.11 204.8,174.71 202.84,182.71 C 201.92,186.23 204.31,186.91 210.79,186.99 H 213.91 C 225.87,186.61 235.39,180.64 239.49,169.05 C 244.83,155.26 245.08,138.01 241.66,125.01 Z\"/>\n          <path d=\"M 124.71,70.81 C 79.63,70.81 47.49,107.12 47.49,148.72 C 47.49,169.16 56.41,188.19 73.71,200.61 L 73.96,200.77 C 77.43,177.81 84.16,162.21 95.29,145.42 C 92.04,137.09 91.71,130.87 92.62,120.83 C 93.81,111.23 96.08,107.12 102.19,107.68 C 110.04,108.87 117.98,116.18 126.22,124.96 C 139.89,124.05 157.81,131.25 178.33,139.09 C 183.11,140.86 183.72,142.63 182.97,148.33 C 179.45,160.93 170.86,166.63 158.11,174.05 C 143.09,183.07 141.13,199.42 153.88,220.09 L 153.96,221.01 L 154.71,221.17 C 181.31,208.43 201.34,181.01 201.34,148.72 C 201.34,108.15 169.29,70.81 124.71,70.81 Z\"/>\n        </svg>\n      </router-link>\n      <button type=\"button\" id=\"close-mobile-menu\" class=\"text-gray-400 p-2 rounded-md\">\n        <span class=\"sr-only\">Close menu</span>\n        <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n        </svg>\n      </button>\n    </div>\n    <nav class=\"flex-1 px-4 py-4 space-y-2\">\n      <div class=\"flex items-center gap-2 px-3 py-2\" v-if=\"!user || !hasAPIKey\">\n        <button\n          type=\"button\"\n          @click=\"toggleDarkMode\"\n          class=\"inline-flex items-center gap-2 rounded-md px-3 py-2 text-base font-medium text-content-secondary hover:bg-muted\"\n          aria-label=\"Toggle dark mode\">\n          <svg v-if=\"darkMode\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\"/></svg>\n          <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"/></svg>\n          <span>{{ darkMode ? 'Light mode' : 'Dark mode' }}</span>\n        </button>\n      </div>\n      <a v-if=\"hasAccess(roles, 'root')\"\n        href=\"#/\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"documentView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'\">Documents</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Documents\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <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\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'dashboards')\"\n        href=\"#/dashboards\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"dashboardView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'\">Dashboards</a>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Dashboards\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <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\" />\n        </svg>\n      </span>\n      <a v-if=\"hasAccess(roles, 'chat') && hasLLMAPIKey\"\n        href=\"#/chat\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"chatView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'\">Chat</a>\n      <span v-else-if=\"hasAccess(roles, 'chat') && !hasLLMAPIKey\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\"\n        :title=\"chatDisabledReason\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <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\" />\n        </svg>\n      </span>\n      <span v-else class=\"block px-3 py-2 rounded-md text-base font-medium text-gray-300 cursor-not-allowed\">\n        Chat\n        <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n          <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\" />\n        </svg>\n      </span>\n      <a v-if=\"hasTaskVisualizer\"\n        href=\"#/tasks\"\n        class=\"block px-3 py-2 rounded-md text-base font-medium\"\n        :class=\"taskView ? 'text-content bg-primary-subtle' : 'text-content-secondary hover:bg-muted'\">Tasks</a>\n      <div v-if=\"!user && hasAPIKey\" class=\"mt-4\">\n        <button\n          type=\"button\"\n          @click=\"loginWithGithub\"\n          class=\"w-full rounded bg-muted text-content px-3 py-2 text-base font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\">\n            Login\n        </button>\n      </div>\n      <div v-if=\"user && hasAPIKey\" class=\"mt-4\">\n        <div class=\"flex items-center gap-3 px-3 py-2 bg-page rounded-md\">\n          <img class=\"size-8 rounded-full\" :src=\"user.picture\" alt=\"\">\n          <span class=\"text-content font-medium\">{{ user.name }}</span>\n        </div>\n        <div class=\"mt-2 space-y-1\">\n          <button\n            type=\"button\"\n            @click=\"toggleDarkMode\"\n            class=\"w-full inline-flex items-center gap-2 px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle text-left\">\n            <svg v-if=\"darkMode\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\"/></svg>\n            <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"/></svg>\n            {{ darkMode ? 'Light mode' : 'Dark mode' }}\n          </button>\n          <router-link to=\"/team\" v-if=\"hasAccess(roles, 'team')\" class=\"block px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle\">Team</router-link>\n          <span v-else class=\"block px-3 py-2 rounded-md text-base text-gray-300 cursor-not-allowed\">\n            Team\n            <svg class=\"h-4 w-4 ml-1 inline\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <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\" />\n            </svg>\n          </span>\n          <span @click=\"logout\" class=\"block px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle cursor-pointer\">Sign out</span>\n        </div>\n      </div>\n    </nav>\n  </div>\n</div>\n\n<modal\n  v-if=\"showRecentPagesModal\"\n  flush-container\n  containerClass=\"!max-w-md !w-[min(94vw,28rem)] !overflow-hidden !rounded-lg !border !border-edge !bg-surface !shadow-xl dark:!bg-shark-900 text-content\"\n  bodyClass=\"modal-recent-pages-body !p-0\"\n>\n  <template v-slot:body>\n    <div class=\"modal-exit\" @click=\"closeRecentPagesModal\" role=\"button\" aria-label=\"Close recent pages\">&times;</div>\n    <div\n      class=\"shrink-0 flex items-center gap-3 border-b border-edge bg-surface px-4 py-4 pr-12 dark:bg-shark-900\"\n    >\n      <h2 class=\"m-0 text-lg font-semibold text-content\">Recent pages</h2>\n      <button\n        type=\"button\"\n        class=\"rounded px-2 py-1 text-sm font-medium text-content-secondary hover:bg-muted disabled:opacity-50\"\n        @click=\"clearRecentPagesHistory\"\n        :disabled=\"recentPagesList.length === 0\"\n      >\n        Clear\n      </button>\n    </div>\n    <div class=\"modal-recent-pages-scroll\">\n      <div\n        v-if=\"recentPagesList.length === 0\"\n        class=\"m-4 rounded border border-dashed border-edge px-3 py-6 text-center text-sm text-content-tertiary\"\n      >\n        No recent pages yet.\n      </div>\n      <button\n        v-for=\"entry in recentPagesList\"\n        :key=\"entry.path + '-' + entry.visitedAt\"\n        type=\"button\"\n        class=\"w-full px-4 py-2.5 text-left hover:bg-muted\"\n        :class=\"entry.path === $route.fullPath ? 'bg-primary-subtle' : ''\"\n        @click=\"goToRecentPage(entry)\"\n      >\n        <div class=\"truncate text-sm font-medium text-content\">{{ entry.label }}</div>\n        <div class=\"truncate font-mono text-xs text-content-tertiary\">{{ entry.path }}</div>\n      </button>\n    </div>\n  </template>\n</modal>\n</div>\n";
 
 /***/ },
 
@@ -63824,7 +64161,7 @@ var src_default = VueToastificationPlugin;
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.5.2","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","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"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.5.3","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","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"}}');
 
 /***/ }