@mongoosejs/studio 0.0.115 → 0.0.117

package/backend/actions/Dashboard/getDashboard.js

@@ -41,14 +41,23 @@ module.exports = ({ db }) => async function getDashboard(params) {
       return { dashboard, error: { message: error.message } };
     }
 
-    const { dashboardResult } = await startExec.then(({ dashboardResult }) => {
-      if (!dashboardResult) {
-        return;
-      }
-      return completeDashboardEvaluate(dashboardResult._id, $workspaceId, authorization, result);
-    });
+    try {
+      const { dashboardResult } = await startExec.then(({ dashboardResult }) => {
+        if (!dashboardResult) {
+          return {};
+        }
+        return completeDashboardEvaluate(
+          dashboardResult._id,
+          $workspaceId,
+          authorization,
+          result
+        );
+      });
 
-    return { dashboard, dashboardResult };
+      return { dashboard, dashboardResult };
+    } catch (error) {
+      return { dashboard, error: { message: error.message } };
+    }
   } else {
     const { dashboardResults } = await getDashboardResults(dashboardId, $workspaceId, authorization);
     return { dashboard, dashboardResults };

package/backend/db/dashboardSchema.js

@@ -18,7 +18,7 @@ const dashboardSchema = new mongoose.Schema({
 });
 
 dashboardSchema.methods.evaluate = async function evaluate() {
-  const context = vm.createContext({ db: this.constructor.db, setTimeout });
+  const context = vm.createContext({ db: this.constructor.db, setTimeout, ObjectId: mongoose.Types.ObjectId });
   let result = null;
   result = await vm.runInContext(formatFunction(this.code), context);
   if (result.$document?.constructor?.modelName) {

package/frontend/public/app.js

@@ -336,6 +336,7 @@ const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/v
 module.exports = app => app.component('chat-message-script', {
   template,
   props: ['message', 'script', 'language'],
+  emits: ['copyMessage'],
   data() {
     return {
       activeTab: 'code',
@@ -411,9 +412,13 @@ module.exports = app => app.component('chat-message-script', {
       this.$router.push('/dashboard/' + dashboard._id);
     },
     async copyOutput() {
-      await navigator.clipboard.writeText(this.message.executionResult.output);
+      let output = this.message.executionResult.output;
+      if (output != null && typeof output === 'object') {
+        output = JSON.stringify(output, null, 2);
+      }
+      await navigator.clipboard.writeText(output);
       vanillatoasts.create({
-        title: 'Text copied!',
+        title: 'Code output copied!',
         type: 'success',
         timeout: 3000,
         icon: 'images/success.png',
@@ -457,6 +462,7 @@ module.exports = app => app.component('chat-message-script', {
 
 const api = __webpack_require__(/*! ../../api */ "./frontend/src/api.js");
 const marked = (__webpack_require__(/*! marked */ "./node_modules/marked/lib/marked.cjs").marked);
+const vanillatoasts = __webpack_require__(/*! vanillatoasts */ "./node_modules/vanillatoasts/vanillatoasts.js");
 const template = __webpack_require__(/*! ./chat-message.html */ "./frontend/src/chat/chat-message/chat-message.html");
 
 module.exports = app => app.component('chat-message', {
@@ -464,7 +470,7 @@ module.exports = app => app.component('chat-message', {
   props: ['message'],
   computed: {
     styleForMessage() {
-      return this.message.role === 'user' ? 'bg-gray-100' : '';
+      return this.message.role === 'user' ? 'p-3 bg-gray-100' : 'py-3 pr-3';
     },
     contentSplitByScripts() {
       const content = this.message.content;
@@ -516,6 +522,37 @@ module.exports = app => app.component('chat-message', {
       });
       message.executionResult = chatMessage.executionResult;
       console.log(message);
+    },
+    async copyMessage() {
+      const parts = this.contentSplitByScripts;
+      let output = '';
+      for (const part of parts) {
+        if (part.type === 'text') {
+          output += part.content + '\n';
+        } else if (part.type === 'code') {
+          let result = this.message.executionResult?.output;
+          if (result != null && typeof result === 'object') {
+            result = JSON.stringify(result, null, 2);
+          }
+          if (result) {
+            let executionOutput = this.message.executionResult?.output;
+            if (executionOutput != null && typeof executionOutput === 'object') {
+              executionOutput = JSON.stringify(executionOutput, null, 2);
+            }
+            if (executionOutput) {
+              output += '```\n' + executionOutput + '\n```\n';
+            }
+          }
+        }
+      }
+      await navigator.clipboard.writeText(output.trim());
+      vanillatoasts.create({
+        title: 'Message output copied!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     }
   }
 });
@@ -553,6 +590,8 @@ module.exports = app => app.component('chat', {
     async sendMessage() {
       this.sendingMessage = true;
       try {
+        const content = this.newMessage;
+        this.newMessage = '';
         if (!this.chatThreadId) {
           const { chatThread } = await api.ChatThread.createChatThread();
           this.chatThreads.unshift(chatThread);
@@ -561,7 +600,7 @@ module.exports = app => app.component('chat', {
         }
 
         this.chatMessages.push({
-          content: this.newMessage,
+          content,
           role: 'user'
         });
 
@@ -573,7 +612,7 @@ module.exports = app => app.component('chat', {
 
         const { chatMessages, chatThread } = await api.ChatThread.createChatMessage({
           chatThreadId: this.chatThreadId,
-          content: this.newMessage
+          content
         });
         this.chatMessages.push(chatMessages[1]);
         for (const thread of this.chatThreads) {
@@ -904,9 +943,11 @@ const template = __webpack_require__(/*! ./dashboard-chart.html */ "./frontend/s
 
 module.exports = app => app.component('dashboard-chart', {
   template: template,
-  props: ['value', 'responsive'],
+  props: ['value', 'fullscreen'],
+  emits: ['fullscreen'],
   data: () => ({
-    chart: null
+    chart: null,
+    showDetailModal: false
   }),
   mounted() {
     const ctx = this.$refs.chart.getContext('2d');
@@ -1074,7 +1115,8 @@ const template = __webpack_require__(/*! ./dashboard-result.html */ "./frontend/
 
 module.exports = app => app.component('dashboard-result', {
   template: template,
-  props: ['result', 'finishedEvaluatingAt'],
+  props: ['result', 'finishedEvaluatingAt', 'fullscreen'],
+  emits: ['fullscreen'],
   mounted: async function() {
   },
   methods: {
@@ -1167,22 +1209,22 @@ module.exports = app => app.component('dashboard', {
     },
     async evaluateDashboard() {
       this.status = 'evaluating';
+      this.errorMessage = null;
       try {
         const { dashboard, dashboardResult, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
         this.dashboard = dashboard;
-        if (error) {
-          this.errorMessage = error.message;
-        }
         this.code = this.dashboard.code;
         this.title = this.dashboard.title;
         this.description = this.dashboard.description ?? '';
-        this.dashboardResults.unshift(dashboardResult);
+        if (dashboardResult) {
+          this.dashboardResults.unshift(dashboardResult);
+        }
+        if (error) {
+          this.errorMessage = error.message;
+        }
       } finally {
         this.status = 'loaded';
       }
-    },
-    openDetailModal() {
-      this.showDetailModal = true;
     }
   },
   computed: {
@@ -1226,6 +1268,7 @@ const template = __webpack_require__(/*! ./edit-dashboard.html */ "./frontend/sr
 module.exports = app => app.component('edit-dashboard', {
   template: template,
   props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
+  emits: ['close', 'clearError'],
   data: function() {
     return {
       status: 'loaded',
@@ -1239,6 +1282,7 @@ module.exports = app => app.component('edit-dashboard', {
       this.$emit('close');
     },
     async updateCode() {
+      this.$emit('clearError');
       this.status = 'loading';
       try {
         const { doc, result, error } = await api.Dashboard.updateDashboard({
@@ -2671,13 +2715,13 @@ module.exports = app => app.component('models', {
         this.query.search = this.searchText;
         const query = this.query;
         const newUrl = this.$router.resolve({ query }).href;
-        window.history.pushState(null, '', newUrl);
+        this.$router.push({ query });
       } else {
         this.filter = {};
         delete this.query.search;
         const query = this.query;
         const newUrl = this.$router.resolve({ query }).href;
-        window.history.pushState(null, '', newUrl);
+        this.$router.push({ query });
       }
       this.documents = [];
       this.status = 'loading';
@@ -4169,7 +4213,7 @@ module.exports = "<button v-bind=\"attrsToBind\" :disabled=\"isDisabled\" @click
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-500 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" 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      <async-button\n        class=\"px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript(message, script)\">\n        Execute\n      </async-button>\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-white 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-gray-700 hover:bg-gray-100\"\n            @click=\"openCreateDashboardModal(); showDropdown = false\">\n            Create Dashboard\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <dashboard-map v-else-if=\"message.executionResult?.output?.$featureCollection\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\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-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" :responsive=\"true\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\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-gray-900 font-semibold\">Create Dashboard</div>\n        <div class=\"mt-4\">\n          <label class=\"block text-sm font-medium leading-6 text-gray-900\">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-gray-900 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-gray-900\">Code</label>\n          <div class=\"border border-gray-200\">\n            <textarea class=\"p-2 h-[300px] w-full\" ref=\"dashboardCodeEditor\"></textarea>\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=\"createErrors.length > 0\" 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</div>\n";
+module.exports = "<div class=\"relative border rounded bg-gray-100 text-black text-sm overflow-hidden\">\n  <div class=\"flex border-b pt-[1px] text-xs font-medium bg-gray-200\">\n    <button\n      class=\"px-3 py-1 border-r border-gray-300 hover:bg-green-300\"\n      :class=\"{'bg-gray-300': activeTab === 'code', 'bg-green-300': activeTab === 'code'}\"\n      @click=\"activeTab = 'code'\">\n      Code\n    </button>\n    <button\n      class=\"px-3 py-1 hover:bg-green-300\"\n      :class=\"{'bg-green-300': activeTab === 'output'}\"\n      @click=\"activeTab = 'output'\">\n      Output\n    </button>\n    <div class=\"ml-auto mr-1 flex\">\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-gray-500 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center\"\n        @click=\"copyOutput\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\" />\n        </svg>\n      </button>\n      <button\n        v-if=\"activeTab === 'output'\"\n        class=\"px-2 py-1 mr-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center\"\n        @click=\"openDetailModal\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" 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      <async-button\n        class=\"px-2 py-1 text-xs bg-green-500 text-white border-none rounded cursor-pointer hover:bg-green-600 transition-colors disabled:bg-gray-400\"\n        @click=\"executeScript(message, script)\">\n        Execute\n      </async-button>\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-white 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-gray-700 hover:bg-gray-100\"\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-gray-700 hover:bg-gray-100\"\n            @click=\"$emit('copyMessage'); showDropdown = false\">\n            Copy Full Message\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <pre class=\"p-3 whitespace-pre-wrap max-h-[50vh] max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] overflow-y-auto\" v-show=\"activeTab === 'code'\"><code v-text=\"script\" ref=\"code\" :class=\"'language-' + language\"></code></pre>\n\n  <div class=\"p-3 whitespace-pre-wrap max-h-[50vh] overflow-y-auto bg-white border-t max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)] relative\" v-show=\"activeTab === 'output'\">\n    <dashboard-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" />\n    <dashboard-map v-else-if=\"message.executionResult?.output?.$featureCollection\" :value=\"message.executionResult?.output\" />\n    <pre v-else>{{ message.executionResult?.output || 'No output' }}</pre>\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-chart v-if=\"message.executionResult?.output?.$chart\" :value=\"message.executionResult?.output\" :responsive=\"true\" />\n        <pre v-else class=\"whitespace-pre-wrap\">{{ message.executionResult?.output || 'No output' }}</pre>\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-gray-900 font-semibold\">Create Dashboard</div>\n        <div class=\"mt-4\">\n          <label class=\"block text-sm font-medium leading-6 text-gray-900\">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-gray-900 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-gray-900\">Code</label>\n          <div class=\"border border-gray-200\">\n            <textarea class=\"p-2 h-[300px] w-full\" ref=\"dashboardCodeEditor\"></textarea>\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=\"createErrors.length > 0\" 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</div>\n";
 
 /***/ }),
 
@@ -4180,7 +4224,7 @@ module.exports = "<div class=\"relative border rounded bg-gray-100 text-black te
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-end': message.role === 'user'}\">\n  <div\n    class=\"min-w-0 max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)]\"\n    :class=\"{'text-right': message.role === 'user'}\">\n\n    <div class=\"text-sm text-gray-900 md:p-3 rounded-md inline-block\" :class=\"styleForMessage\">\n      <div v-for=\"part in contentSplitByScripts\">\n        <div v-if=\"part.type === 'text'\" v-html=\"marked(part.content)\">\n        </div>\n        <div v-else-if=\"part.type === 'code'\">\n          <chat-message-script :message=\"message\" :script=\"part.content\" :language=\"part.language\"></chat-message-script>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
+module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-end': message.role === 'user'}\">\n  <div\n    class=\"min-w-0 max-w-[calc(100vw-3rem)] lg:max-w-[calc(100vw-15rem)]\"\n    :class=\"{'text-right': message.role === 'user'}\">\n\n    <div class=\"text-sm text-gray-900 rounded-md inline-block relative\" :class=\"styleForMessage\">\n      <div v-for=\"part in contentSplitByScripts\">\n        <div v-if=\"part.type === 'text'\" v-html=\"marked(part.content)\">\n        </div>\n        <div v-else-if=\"part.type === 'code'\">\n          <chat-message-script :message=\"message\" :script=\"part.content\" :language=\"part.language\" @copyMessage=\"copyMessage\"></chat-message-script>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -4191,7 +4235,7 @@ module.exports = "<div class=\"relative flex items-start\" :class=\"{'justify-en
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <button\n    class=\"fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-white\"\n    :class=\"hasWorkspace ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed bg-gray-50'\"\n    @click=\"toggleShareThread\"\n    :disabled=\"!hasWorkspace || !chatThreadId || sharingThread\"\n    aria-label=\"Share thread with workspace\"\n    title=\"Share thread with workspace\"\n  >\n    <svg v-if=\"hasWorkspace\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.48 2.48 0 0 0 0-1.39l7.02-4.11a2.5 2.5 0 1 0-.87-1.37L8.04 9.94a2.5 2.5 0 1 0 0 4.12l7.12 4.16a2.5 2.5 0 1 0 .84-1.34l-7.05-4.12c-.04-.02-.08-.05-.11-.07a2.48 2.48 0 0 0 0-1.39c.03-.02.07-.04.11-.07l7.11-4.16c.52.47 1.2.76 1.94.76a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0-1.94.94L7.97 8.43a2.5 2.5 0 1 0 0 7.14l9.09 5.3c.52-.47 1.2-.76 1.94-.76a2.5 2.5 0 1 0 0-5z\"/></svg>\n    <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z\"/></svg>\n  </button>\n  <!-- Sidebar: Chat Threads -->\n  <aside class=\"bg-gray-50 border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-64 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Chat Threads</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <div class=\"p-4 w-64\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul v-if=\"status === 'loaded'\" class=\"w-64\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"p-4 hover:bg-gray-200 cursor-pointer w-64\"\n        :class=\"{ 'bg-gray-300': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <ul role=\"list\" class=\"space-y-4\">\n        <div v-if=\"true\">\n          <div class=\"flex items-center justify-center py-3 mb-4\">\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n            <p class=\"mx-4 text-sm font-medium text-gray-500\">This is the beginning of the message thread</p>\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n          </div>\n        </div>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2 items-end justify-end\">\n        <textarea\n          v-model=\"newMessage\"\n          placeholder=\"Ask something...\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto\"\n          rows=\"1\"\n          ref=\"messageInput\"\n          @input=\"adjustTextareaHeight\"\n          @keydown.enter.exact.prevent=\"handleEnter\"\n        ></textarea>\n        <button class=\"bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
+module.exports = "<div class=\"flex\" style=\"height: calc(100vh - 55px); height: calc(100dvh - 55px)\">\n  <div class=\"fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10\" @click=\"hideSidebar = false\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"#5f6368\"><path d=\"M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z\"/></svg>\n  </div>\n  <button\n    class=\"fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-white\"\n    :class=\"hasWorkspace ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed bg-gray-50'\"\n    @click=\"toggleShareThread\"\n    :disabled=\"!hasWorkspace || !chatThreadId || sharingThread\"\n    aria-label=\"Share thread with workspace\"\n    title=\"Share thread with workspace\"\n  >\n    <svg v-if=\"hasWorkspace\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a2.48 2.48 0 0 0 0-1.39l7.02-4.11a2.5 2.5 0 1 0-.87-1.37L8.04 9.94a2.5 2.5 0 1 0 0 4.12l7.12 4.16a2.5 2.5 0 1 0 .84-1.34l-7.05-4.12c-.04-.02-.08-.05-.11-.07a2.48 2.48 0 0 0 0-1.39c.03-.02.07-.04.11-.07l7.11-4.16c.52.47 1.2.76 1.94.76a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0-1.94.94L7.97 8.43a2.5 2.5 0 1 0 0 7.14l9.09 5.3c.52-.47 1.2-.76 1.94-.76a2.5 2.5 0 1 0 0-5z\"/></svg>\n    <svg v-else xmlns=\"http://www.w3.org/2000/svg\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 1a5 5 0 00-5 5v3H6a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2h-1V6a5 5 0 00-5-5zm-3 8V6a3 3 0 016 0v3H9zm9 2v9H6v-9h12z\"/></svg>\n  </button>\n  <!-- Sidebar: Chat Threads -->\n  <aside class=\"bg-gray-50 border-r overflow-y-auto overflow-x-hidden h-full transition-all duration-300 ease-in-out z-20 w-0 lg:w-64 fixed lg:relative\" :class=\"hideSidebar === true ? '!w-0' : hideSidebar === false ? '!w-64' : ''\">\n    <div class=\"flex items-center border-b border-gray-100 w-64 overflow-x-hidden\">\n      <div class=\"p-4 font-bold text-lg\">Chat Threads</div>\n      <button\n        @click=\"hideSidebar = true\"\n        class=\"ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none\"\n        aria-label=\"Close sidebar\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"h-5 w-5\" viewBox=\"0 -960 960 960\" class=\"w-5\" fill=\"currentColor\"><path d=\"M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z\"/></svg>\n      </button>\n    </div>\n    <div class=\"p-4 w-64\">\n      <async-button\n        @click=\"createNewThread\"\n        class=\"w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700\"\n      >\n        Create New Thread\n      </async-button>\n    </div>\n    <div v-if=\"status === 'loaded' && chatThreads.length === 0\" class=\"p-4 text-sm text-gray-700\">\n      No threads yet\n    </div>\n    <ul v-if=\"status === 'loaded'\" class=\"w-64\">\n      <li\n        v-for=\"thread in chatThreads\"\n        :key=\"thread._id\"\n        @click=\"selectThread(thread._id)\"\n        class=\"p-4 hover:bg-gray-200 cursor-pointer w-64\"\n        :class=\"{ 'bg-gray-300': thread._id === chatThreadId }\"\n      >\n        {{ thread.title || 'Untitled Thread' }}\n      </li>\n    </ul>\n  </aside>\n\n  <!-- Main Chat Area -->\n  <main class=\"flex-1 flex flex-col\">\n    <div class=\"flex-1 overflow-y-auto p-6 space-y-4\" ref=\"messagesContainer\">\n      <ul role=\"list\" class=\"space-y-4\">\n        <div v-if=\"true\">\n          <div class=\"flex items-center justify-center py-3 mb-4\">\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n            <p class=\"mx-4 text-sm font-medium text-gray-500\">This is the beginning of the message thread</p>\n            <div class=\"bg-gray-300 h-px flex-grow max-w-xs\"></div>\n          </div>\n        </div>\n        <li v-for=\"message in chatMessages\" :key=\"message._id\">\n          <chat-message :message=\"message\"></chat-message>\n        </li>\n      </ul>\n    </div>\n\n\n    <!-- Input Area -->\n    <div class=\"border-t p-4\">\n      <form @submit.prevent=\"sendMessage\" :disabled=\"sendingMessage\" class=\"flex gap-2 items-end justify-end\">\n        <textarea\n          v-model=\"newMessage\"\n          :placeholder=\"sendingMessage ? 'Sending...' : 'Ask something...'\"\n          class=\"flex-1 border rounded px-4 py-2 resize-none overflow-y-auto\"\n          :disabled=\"sendingMessage\"\n          rows=\"1\"\n          ref=\"messageInput\"\n          @input=\"adjustTextareaHeight\"\n          @keydown.enter.exact.prevent=\"handleEnter\"\n        ></textarea>\n        <button class=\"bg-blue-600 text-white px-4 h-[42px] rounded disabled:bg-gray-600\" :disabled=\"sendingMessage\">\n          <svg v-if=\"sendingMessage\" style=\"height: 1em\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g>\n              <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\" />\n              <path d=\"M12 2a10 10 0 0 1 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n                <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\" />\n              </path>\n            </g>\n          </svg>\n          <span v-else>Send</span>\n        </button>\n      </form>\n    </div>\n  </main>\n</div>\n";
 
 /***/ }),
 
@@ -4257,7 +4301,7 @@ module.exports = "<div>\n  <div class=\"mb-2\">\n    <textarea class=\"border bo
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div :class=\"responsive ? 'h-full' : ''\">\n  <div v-if=\"header\" class=\"border-b border-gray-100 px-2 pb-2 flex items-center\">\n    <div class=\"text-xl font-bold\">{{header}}</div>\n    <button\n      class=\"ml-auto px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors\"\n      @click=\"exportPNG\"\n      title=\"Export PNG\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.5em;\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n    </button>\n  </div>\n  <div v-else class=\"border-b border-gray-100 px-2 pb-2 text-right\">\n    <button\n      class=\"mt-1 px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors\"\n      @click=\"exportPNG\"\n      title=\"Export PNG\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.5em;\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n    </button>\n  </div>\n  <div class=\"text-xl\" :class=\"responsive ? 'h-full' : ''\">\n    <canvas ref=\"chart\"></canvas>\n  </div>\n</div>\n";
+module.exports = "<div :class=\"responsive ? 'h-full' : ''\">\n  <div v-if=\"header && !fullscreen\" class=\"border-b border-gray-100 px-2 pb-2 flex items-center gap-1\">\n    <div class=\"text-xl font-bold\">{{header}}</div>\n    <button\n      class=\"ml-auto px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors\"\n      @click=\"exportPNG\"\n      title=\"Export PNG\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.5em;\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n    </button>\n    <button\n      class=\"px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors flex items-center\"\n      @click=\"$emit('fullscreen')\"\n      aria-label=\"Expand dashboard result\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.5em\" class=\"h-3 w-3\" 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>\n  <div v-else-if=\"!fullscreen\" class=\"pt-1 border-b border-gray-100 px-2 pb-2 text-right flex items-center justify-end gap-1 w-full\">\n    <button\n      class=\"px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors\"\n      @click=\"exportPNG\"\n      title=\"Export PNG\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.5em;\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n    </button>\n    <button\n      class=\"px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors flex items-center\"\n      @click=\"$emit('fullscreen')\"\n      aria-label=\"Expand dashboard result\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"height: 1.5em\" class=\"h-3 w-3\" 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>\n  <div :class=\"responsive ? 'relative h-full min-h-0' : ''\">\n    <canvas ref=\"chart\" class=\"block w-full h-full\"></canvas>\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -4301,7 +4345,7 @@ module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=\"el in result\" :key=\"el._id || el.finishedEvaluatingAt\">\n      <component\n        class=\"bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n        :is=\"getComponentForValue(el)\"\n        :value=\"el\">\n      </component>\n    </div>\n  </div>\n  <div v-else>\n    <component\n      class=\"bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n      :is=\"getComponentForValue(result)\"\n      :value=\"result\">\n    </component>\n  </div>\n  <div class=\"text-right text-sm text-gray-700 mt-1\" v-if=\"finishedEvaluatingAt\">\n    Last Evaluated: {{ format.isoToLongDateTime(finishedEvaluatingAt) }}\n  </div>\n</div>\n";
+module.exports = "<div>\n  <div v-if=\"Array.isArray(result)\">\n    <div v-for=\"el in result\" :key=\"el._id || el.finishedEvaluatingAt\">\n      <component\n        class=\"bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n        :is=\"getComponentForValue(el)\"\n        :value=\"el\">\n      </component>\n    </div>\n  </div>\n  <div v-else>\n    <component\n      class=\"bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl\"\n      :is=\"getComponentForValue(result)\"\n      :value=\"result\"\n      :fullscreen=\"fullscreen\"\n      @fullscreen=\"$emit('fullscreen')\">\n    </component>\n  </div>\n  <div class=\"text-right text-sm text-gray-700 mt-1\" v-if=\"finishedEvaluatingAt && !fullscreen\">\n    Last Evaluated: {{ format.isoToLongDateTime(finishedEvaluatingAt) }}\n  </div>\n</div>\n";
 
 /***/ }),
 
@@ -4323,7 +4367,7 @@ module.exports = "<div class=\"py-2\">\n  <div v-if=\"header\" class=\"border-b
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline mt-10\">\n  </div>\n  <div v-if=\"dashboard && status !== 'loading'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\" v-if=\"!showEditor\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div class=\"flex gap-2\">\n        <button\n          @click=\"showEditor = true\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1.25em] mr-1\" /> Edit\n        </button>\n\n        <async-button\n          @click=\"evaluateDashboard\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center rounded-md bg-ultramarine-600 px-4 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\"\n        >\n          <svg class=\"inline h-[1.25em] mr-1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"m670-140 160-100-160-100v200ZM240-600h480v-80H240v80ZM720-40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM120-80v-680q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v267q-19-9-39-15t-41-9v-243H200v562h243q5 31 15.5 59T486-86l-6 6-60-60-60 60-60-60-60 60-60-60-60 60Zm120-200h203q3-21 9-41t15-39H240v80Zm0-160h284q38-37 88.5-58.5T720-520H240v80Zm-40 242v-562 562Z\"/></svg>\n          Evaluate\n        </async-button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <div v-if=\"dashboardResults.length === 0\">\n        <div class=\"flex flex-col items-center justify-center py-8\">\n          <p class=\"text-gray-700 text-base mb-4\">This dashboard hasn't been evaluated yet.</p>\n          <async-button\n            @click=\"evaluateDashboard\"\n            type=\"button\"\n            :disabled=\"status === 'evaluating'\"\n            class=\"rounded-md bg-ultramarine-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\"\n          >\n            Evaluate Dashboard\n          </async-button>\n        </div>\n      </div>\n      <div v-else>\n        <div class=\"relative\">\n          <button\n            class=\"absolute top-2 right-2 px-2 py-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center\"\n            @click=\"openDetailModal\"\n            aria-label=\"Expand dashboard result\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-3 w-3\" 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          <dashboard-result\n            :key=\"dashboardResult.finishedEvaluatingAt\"\n            :result=\"dashboardResult.result\"\n            :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\">\n          </dashboard-result>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"showEditor\" class=\"mt-4\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"></edit-dashboard>\n    </div>\n    <div v-if=\"errorMessage\" class=\"rounded-md bg-red-50 p-4 mt-4\">\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\" data-slot=\"icon\">\n            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-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\">{{errorMessage}}</h3>\n        </div>\n      </div>\n    </div>\n\n  </div>\n  <div v-if=\"!dashboard && status !== 'loading'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n\n<modal\n  v-if=\"showDetailModal\"\n  containerClass=\"!h-[90vh] !w-[90vw]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Dashboard Details\"\n>\n  <template #body>\n    <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n    <div class=\"h-full overflow-auto\">\n      <dashboard-result\n        v-if=\"dashboardResult\"\n        :result=\"dashboardResult.result\"\n        :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\">\n      </dashboard-result>\n    </div>\n  </template>\n</modal>\n";
+module.exports = "<div class=\"dashboard px-1\">\n  <div v-if=\"status === 'loading'\" class=\"max-w-5xl mx-auto text-center\">\n    <img src=\"images/loader.gif\" class=\"inline mt-10\">\n  </div>\n  <div v-if=\"dashboard && status !== 'loading'\" class=\"max-w-5xl mx-auto\">\n    <div class=\"flex items-center w-full\" v-if=\"!showEditor\">\n      <h2 class=\"mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink\">{{title}}</h2>\n      <div class=\"flex gap-2\">\n        <button\n          @click=\"showEditor = true\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center rounded-md bg-ultramarine-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\">\n          <img src=\"images/edit.svg\" class=\"inline h-[1.25em] mr-1\" /> Edit\n        </button>\n\n        <async-button\n          @click=\"evaluateDashboard\"\n          type=\"button\"\n          :disabled=\"status === 'evaluating'\"\n          class=\"flex items-center rounded-md bg-ultramarine-600 px-4 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\"\n        >\n          <svg class=\"inline h-[1.25em] mr-1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" fill=\"currentColor\"><path d=\"m670-140 160-100-160-100v200ZM240-600h480v-80H240v80ZM720-40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM120-80v-680q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v267q-19-9-39-15t-41-9v-243H200v562h243q5 31 15.5 59T486-86l-6 6-60-60-60 60-60-60-60 60-60-60-60 60Zm120-200h203q3-21 9-41t15-39H240v80Zm0-160h284q38-37 88.5-58.5T720-520H240v80Zm-40 242v-562 562Z\"/></svg>\n          Evaluate\n        </async-button>\n      </div>\n    </div>\n    <div v-if=\"!showEditor\" class=\"mt-4 mb-4\">\n      <div v-if=\"dashboardResults.length === 0\">\n        <div class=\"flex flex-col items-center justify-center py-8\">\n          <p class=\"text-gray-700 text-base mb-4\">This dashboard hasn't been evaluated yet.</p>\n          <async-button\n            @click=\"evaluateDashboard\"\n            type=\"button\"\n            :disabled=\"status === 'evaluating'\"\n            class=\"rounded-md bg-ultramarine-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:cursor-not-allowed disabled:bg-gray-600\"\n          >\n            Evaluate Dashboard\n          </async-button>\n        </div>\n      </div>\n      <div v-else>\n        <div class=\"relative\">\n          <dashboard-result\n            :key=\"dashboardResult.finishedEvaluatingAt\"\n            :result=\"dashboardResult.result\"\n            :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\"\n            @fullscreen=\"showDetailModal = true\"\n            class=\"h-[40vh]\"\n          >\n          </dashboard-result>\n        </div>\n      </div>\n    </div>\n    <div v-if=\"showEditor\" class=\"mt-4\">\n      <edit-dashboard\n        :dashboardId=\"dashboard._id\"\n        :code=\"code\"\n        :currentDescription=\"description\"\n        :currentTitle=\"title\"\n        @close=\"showEditor=false;\"\n        @update=\"updateCode\"\n        @clearError=\"errorMessage = null\"></edit-dashboard>\n    </div>\n    <div v-if=\"errorMessage\" class=\"rounded-md bg-red-50 p-4 mt-4\">\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\" data-slot=\"icon\">\n            <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-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\">{{errorMessage}}</h3>\n        </div>\n      </div>\n    </div>\n\n  </div>\n  <div v-if=\"!dashboard && status !== 'loading'\">\n    No dashboard with the given id could be found.\n  </div>\n</div>\n\n<modal\n  v-if=\"showDetailModal\"\n  containerClass=\"!h-[90vh] !w-[90vw]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Dashboard Details\"\n>\n  <template #body>\n    <div class=\"absolute font-mono right-1 top-1 cursor-pointer text-xl\" @click=\"showDetailModal = false;\" role=\"button\" aria-label=\"Close modal\">&times;</div>\n    <div class=\"h-full overflow-auto\">\n      <dashboard-result\n        v-if=\"dashboardResult\"\n        :result=\"dashboardResult.result\"\n        :finishedEvaluatingAt=\"dashboardResult.finishedEvaluatingAt\"\n        :fullscreen=\"true\"\n        :responsive=\"true\">\n      </dashboard-result>\n    </div>\n  </template>\n</modal>\n";
 
 /***/ }),
 
@@ -4345,7 +4389,7 @@ module.exports = "<div class=\"p-4 bg-gray-100 rounded-lg shadow-lg\">\n    <div
 /***/ ((module) => {
 
 "use strict";
-module.exports = "<div class=\"dashboards max-w-5xl mx-auto mt-8\">\n  <div v-if=\"status === 'loaded' && dashboards.length === 0\">\n    <div class=\"text-center\">\n      <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No dashboards yet</h3>\n      <p class=\"mt-1 text-sm text-gray-500\">Get started by creating a new dashboard.</p>\n      <div class=\"mt-6\">\n        <button type=\"button\" class=\"inline-flex items-center rounded-md bg-teal-600 px-3 py-2 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          <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n          </svg>\n          New Dashboard\n        </button>\n      </div>\n    </div>\n  </div>\n\n\n  <div class=\"px-4 sm:px-6 lg:px-8\">\n    <div class=\"sm:flex sm:items-center\">\n      <div class=\"sm:flex-auto\">\n        <h1 class=\"text-base font-semibold leading-6 text-gray-900\">Dashboards</h1>\n      </div>\n      <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n        <button\n          type=\"button\"\n          @click=\"showCreateDashboardModal = true\"\n          class=\"block rounded-md bg-teal-600 px-3 py-2 text-center 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\">Create New Dashboard</button>\n      </div>\n    </div>\n    <div class=\"mt-8 flow-root\">\n      <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n        <div class=\"inline-block min-w-full py-2 align-middle\">\n          <table class=\"min-w-full divide-y divide-gray-300\">\n            <thead>\n              <tr>\n                <th scope=\"col\" class=\"py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8\">Title</th>\n                <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]\">Description</th>\n                <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                </th>\n                <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                </th>\n              </tr>\n            </thead>\n            <tbody class=\"divide-y divide-gray-200 bg-white\">\n              <tr v-for=\"dashboard in dashboards\">\n                <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8\">{{dashboard.title}}</td>\n                <td class=\"whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]\">{{dashboard.description}}</td>\n                <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                  <router-link\n                    :to=\"'/dashboard/' + dashboard._id + '?edit=true'\"\n                    class=\"text-teal-600 hover:text-teal-900\">\n                    Edit\n                  </router-link>\n                </td>\n                <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                  <router-link\n                    :to=\"'/dashboard/' + dashboard._id\"\n                    class=\"text-teal-600 hover:text-teal-900\">\n                    View\n                  </router-link>\n                </td>\n                <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                  <button\n                    @click=\"showDeleteDashboardModal=dashboard\"\n                    class=\"text-teal-600 hover:text-teal-900\">\n                    Delete\n                  </button>\n                </td>\n              </tr>\n  \n              <!-- More people... -->\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <modal v-if=\"showCreateDashboardModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false;\">&times;</div>\n      \n      <create-dashboard @close=\"insertNewDashboard\"></create-dashboard>\n    </template>\n  </modal>\n\n  <modal v-if=\"showDeleteDashboardModal\">\n    <template v-slot:body>\n      <div class=\"modal-exit\" @click=\"showDeleteDashboardModal = null;\">&times;</div>\n      <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>\n      <div class=\"flex space-x-2\">\n        <button class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500\" @click=\"deleteDashboard(showDeleteDashboardModal)\">Yes, delete</button>\n        <button class=\"px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600\" @click=\"showDeleteDashboardModal=null;\">Cancel</button>\n      </div>\n    </template>\n  </modal>\n</div>";
+module.exports = "<div class=\"dashboards max-w-5xl mx-auto mt-8\">\n  <div v-if=\"status === 'loading'\" class=\"text-center mt-4\">\n    <svg\n      class=\"inline w-8 h-8 animate-spin text-ultramarine-600\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle\n        class=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        stroke-width=\"4\"\n      ></circle>\n      <path\n        class=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z\"\n      ></path>\n    </svg>\n  </div>\n    <div v-if=\"status === 'loaded' && dashboards.length === 0\">\n      <div class=\"text-center\">\n        <h3 class=\"mt-2 text-sm font-semibold text-gray-900\">No dashboards yet</h3>\n        <p class=\"mt-1 text-sm text-gray-500\">Get started by creating a new dashboard.</p>\n        <div class=\"mt-6\">\n          <button type=\"button\" class=\"inline-flex items-center rounded-md bg-ultramarine-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n            <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n            </svg>\n            New Dashboard\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"px-4 sm:px-6 lg:px-8\">\n      <div class=\"sm:flex sm:items-center\">\n        <div class=\"sm:flex-auto\">\n          <h1 class=\"text-base font-semibold leading-6 text-gray-900\">Dashboards</h1>\n        </div>\n        <div class=\"mt-4 sm:ml-16 sm:mt-0 sm:flex-none\">\n          <button\n            type=\"button\"\n            @click=\"showCreateDashboardModal = true\"\n            class=\"block rounded-md bg-ultramarine-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">Create New Dashboard</button>\n        </div>\n      </div>\n      <div class=\"mt-8 flow-root\">\n        <div class=\"-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8\">\n          <div class=\"inline-block min-w-full py-2 align-middle\">\n            <table class=\"min-w-full divide-y divide-gray-300\">\n              <thead>\n                <tr>\n                  <th scope=\"col\" class=\"py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8\">Title</th>\n                  <th scope=\"col\" class=\"px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]\">Description</th>\n                  <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                  </th>\n                  <th scope=\"col\" class=\"relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8\">\n                  </th>\n                </tr>\n              </thead>\n              <tbody class=\"divide-y divide-gray-200 bg-white\">\n                <tr v-for=\"dashboard in dashboards\">\n                  <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8\">{{dashboard.title}}</td>\n                  <td class=\"whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]\">{{dashboard.description}}</td>\n                  <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                    <router-link\n                      :to=\"'/dashboard/' + dashboard._id + '?edit=true'\"\n                      class=\"text-ultramarine-600 hover:text-ultramarine-900\">\n                      Edit\n                    </router-link>\n                  </td>\n                  <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                    <router-link\n                      :to=\"'/dashboard/' + dashboard._id\"\n                      class=\"text-ultramarine-600 hover:text-ultramarine-900\">\n                      View\n                    </router-link>\n                  </td>\n                  <td class=\"relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8\">\n                    <button\n                      @click=\"showDeleteDashboardModal=dashboard\"\n                      class=\"text-ultramarine-600 hover:text-ultramarine-900\">\n                      Delete\n                    </button>\n                  </td>\n                </tr>\n\n                <!-- More people... -->\n              </tbody>\n            </table>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <modal v-if=\"showCreateDashboardModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"showCreateDashboardModal = false;\">&times;</div>\n\n        <create-dashboard @close=\"insertNewDashboard\"></create-dashboard>\n      </template>\n    </modal>\n\n    <modal v-if=\"showDeleteDashboardModal\">\n      <template v-slot:body>\n        <div class=\"modal-exit\" @click=\"showDeleteDashboardModal = null;\">&times;</div>\n        <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>\n        <div class=\"flex space-x-2\">\n          <button class=\"px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500\" @click=\"deleteDashboard(showDeleteDashboardModal)\">Yes, delete</button>\n          <button class=\"px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600\" @click=\"showDeleteDashboardModal=null;\">Cancel</button>\n        </div>\n      </template>\n    </modal>\n  </div>\n</div>";
 
 /***/ }),
 
@@ -14837,7 +14881,7 @@ var bson = /*#__PURE__*/Object.freeze({
 /***/ ((module) => {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.114","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.0.26","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.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","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.0.117","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"dependencies":{"archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"0.0.26","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vanillatoasts":"^1.6.0","vue":"3.x","webpack":"5.x"},"peerDependencies":{"bson":"^5.5.1 || 6.x","express":"4.x","mongoose":"7.x || 8.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","mongoose":"8.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ })
 

package/frontend/public/tw.css

@@ -882,6 +882,10 @@ video {
   height: 32px;
 }
 
+.h-\[40vh\] {
+  height: 40vh;
+}
+
 .h-\[42px\] {
   height: 42px;
 }
@@ -898,6 +902,10 @@ video {
   max-height: 50vh;
 }
 
+.min-h-0 {
+  min-height: 0px;
+}
+
 .\!w-0 {
   width: 0px !important;
 }
@@ -970,6 +978,10 @@ video {
   max-width: 64rem;
 }
 
+.max-w-\[calc\(100vw-3rem\)\] {
+  max-width: calc(100vw - 3rem);
+}
+
 .max-w-\[calc\(100vw-4rem\)\] {
   max-width: calc(100vw - 4rem);
 }
@@ -1028,6 +1040,16 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1784,6 +1806,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-ultramarine-600 {
+  --tw-text-opacity: 1;
+  color: rgb(24 35 255 / var(--tw-text-opacity));
+}
+
 .accent-sky-600 {
   accent-color: #0284c7;
 }
@@ -1792,6 +1819,14 @@ video {
   opacity: 0.5;
 }
 
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2069,6 +2104,11 @@ video {
   color: rgb(10 87 87 / var(--tw-text-opacity));
 }
 
+.hover\:text-ultramarine-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(6 14 172 / var(--tw-text-opacity));
+}
+
 .focus\:z-10:focus {
   z-index: 10;
 }
@@ -2346,10 +2386,6 @@ video {
   .md\:hidden {
     display: none;
   }
-
-  .md\:p-3 {
-    padding: 0.75rem;
-  }
 }
 
 @media (min-width: 1024px) {
@@ -2370,6 +2406,10 @@ video {
     width: 16rem;
   }
 
+  .lg\:max-w-\[calc\(100vw-15rem\)\] {
+    max-width: calc(100vw - 15rem);
+  }
+
   .lg\:max-w-\[calc\(100vw-20rem\)\] {
     max-width: calc(100vw - 20rem);
   }

package/frontend/src/chat/chat-message/chat-message.html

@@ -1,14 +1,14 @@
 <div class="relative flex items-start" :class="{'justify-end': message.role === 'user'}">
   <div
-    class="min-w-0 max-w-[calc(100vw-4rem)] lg:max-w-[calc(100vw-20rem)]"
+    class="min-w-0 max-w-[calc(100vw-3rem)] lg:max-w-[calc(100vw-15rem)]"
     :class="{'text-right': message.role === 'user'}">
 
-    <div class="text-sm text-gray-900 md:p-3 rounded-md inline-block" :class="styleForMessage">
+    <div class="text-sm text-gray-900 rounded-md inline-block relative" :class="styleForMessage">
       <div v-for="part in contentSplitByScripts">
         <div v-if="part.type === 'text'" v-html="marked(part.content)">
         </div>
         <div v-else-if="part.type === 'code'">
-          <chat-message-script :message="message" :script="part.content" :language="part.language"></chat-message-script>
+          <chat-message-script :message="message" :script="part.content" :language="part.language" @copyMessage="copyMessage"></chat-message-script>
         </div>
       </div>
     </div>

package/frontend/src/chat/chat-message/chat-message.js

@@ -2,6 +2,7 @@
 
 const api = require('../../api');
 const marked = require('marked').marked;
+const vanillatoasts = require('vanillatoasts');
 const template = require('./chat-message.html');
 
 module.exports = app => app.component('chat-message', {
@@ -9,7 +10,7 @@ module.exports = app => app.component('chat-message', {
   props: ['message'],
   computed: {
     styleForMessage() {
-      return this.message.role === 'user' ? 'bg-gray-100' : '';
+      return this.message.role === 'user' ? 'p-3 bg-gray-100' : 'py-3 pr-3';
     },
     contentSplitByScripts() {
       const content = this.message.content;
@@ -61,6 +62,37 @@ module.exports = app => app.component('chat-message', {
       });
       message.executionResult = chatMessage.executionResult;
       console.log(message);
+    },
+    async copyMessage() {
+      const parts = this.contentSplitByScripts;
+      let output = '';
+      for (const part of parts) {
+        if (part.type === 'text') {
+          output += part.content + '\n';
+        } else if (part.type === 'code') {
+          let result = this.message.executionResult?.output;
+          if (result != null && typeof result === 'object') {
+            result = JSON.stringify(result, null, 2);
+          }
+          if (result) {
+            let executionOutput = this.message.executionResult?.output;
+            if (executionOutput != null && typeof executionOutput === 'object') {
+              executionOutput = JSON.stringify(executionOutput, null, 2);
+            }
+            if (executionOutput) {
+              output += '```\n' + executionOutput + '\n```\n';
+            }
+          }
+        }
+      }
+      await navigator.clipboard.writeText(output.trim());
+      vanillatoasts.create({
+        title: 'Message output copied!',
+        type: 'success',
+        timeout: 3000,
+        icon: 'images/success.png',
+        positionClass: 'bottomRight'
+      });
     }
   }
 });

package/frontend/src/chat/chat-message-script/chat-message-script.html

@@ -50,6 +50,11 @@
             @click="openCreateDashboardModal(); showDropdown = false">
             Create Dashboard
           </button>
+          <button
+            class="block w-full text-left px-4 py-2 text-xs text-gray-700 hover:bg-gray-100"
+            @click="$emit('copyMessage'); showDropdown = false">
+            Copy Full Message
+          </button>
         </div>
       </div>
     </div>

package/frontend/src/chat/chat-message-script/chat-message-script.js

@@ -7,6 +7,7 @@ const vanillatoasts = require('vanillatoasts');
 module.exports = app => app.component('chat-message-script', {
   template,
   props: ['message', 'script', 'language'],
+  emits: ['copyMessage'],
   data() {
     return {
       activeTab: 'code',
@@ -82,9 +83,13 @@ module.exports = app => app.component('chat-message-script', {
       this.$router.push('/dashboard/' + dashboard._id);
     },
     async copyOutput() {
-      await navigator.clipboard.writeText(this.message.executionResult.output);
+      let output = this.message.executionResult.output;
+      if (output != null && typeof output === 'object') {
+        output = JSON.stringify(output, null, 2);
+      }
+      await navigator.clipboard.writeText(output);
       vanillatoasts.create({
-        title: 'Text copied!',
+        title: 'Code output copied!',
         type: 'success',
         timeout: 3000,
         icon: 'images/success.png',

package/frontend/src/chat/chat.html

@@ -72,8 +72,9 @@
       <form @submit.prevent="sendMessage" :disabled="sendingMessage" class="flex gap-2 items-end justify-end">
         <textarea
           v-model="newMessage"
-          placeholder="Ask something..."
+          :placeholder="sendingMessage ? 'Sending...' : 'Ask something...'"
           class="flex-1 border rounded px-4 py-2 resize-none overflow-y-auto"
+          :disabled="sendingMessage"
           rows="1"
           ref="messageInput"
           @input="adjustTextareaHeight"

package/frontend/src/chat/chat.js

@@ -21,6 +21,8 @@ module.exports = app => app.component('chat', {
     async sendMessage() {
       this.sendingMessage = true;
       try {
+        const content = this.newMessage;
+        this.newMessage = '';
         if (!this.chatThreadId) {
           const { chatThread } = await api.ChatThread.createChatThread();
           this.chatThreads.unshift(chatThread);
@@ -29,7 +31,7 @@ module.exports = app => app.component('chat', {
         }
 
         this.chatMessages.push({
-          content: this.newMessage,
+          content,
           role: 'user'
         });
 
@@ -41,7 +43,7 @@ module.exports = app => app.component('chat', {
 
         const { chatMessages, chatThread } = await api.ChatThread.createChatMessage({
           chatThreadId: this.chatThreadId,
-          content: this.newMessage
+          content
         });
         this.chatMessages.push(chatMessages[1]);
         for (const thread of this.chatThreads) {

package/frontend/src/dashboard/dashboard.html

@@ -41,18 +41,13 @@
       </div>
       <div v-else>
         <div class="relative">
-          <button
-            class="absolute top-2 right-2 px-2 py-1 text-xs bg-blue-500 text-white border-none rounded cursor-pointer hover:bg-blue-600 transition-colors flex items-center"
-            @click="openDetailModal"
-            aria-label="Expand dashboard result">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <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" />
-            </svg>
-          </button>
           <dashboard-result
             :key="dashboardResult.finishedEvaluatingAt"
             :result="dashboardResult.result"
-            :finishedEvaluatingAt="dashboardResult.finishedEvaluatingAt">
+            :finishedEvaluatingAt="dashboardResult.finishedEvaluatingAt"
+            @fullscreen="showDetailModal = true"
+            class="h-[40vh]"
+          >
           </dashboard-result>
         </div>
       </div>
@@ -64,7 +59,8 @@
         :currentDescription="description"
         :currentTitle="title"
         @close="showEditor=false;"
-        @update="updateCode"></edit-dashboard>
+        @update="updateCode"
+        @clearError="errorMessage = null"></edit-dashboard>
     </div>
     <div v-if="errorMessage" class="rounded-md bg-red-50 p-4 mt-4">
       <div class="flex">
@@ -98,7 +94,9 @@
       <dashboard-result
         v-if="dashboardResult"
         :result="dashboardResult.result"
-        :finishedEvaluatingAt="dashboardResult.finishedEvaluatingAt">
+        :finishedEvaluatingAt="dashboardResult.finishedEvaluatingAt"
+        :fullscreen="true"
+        :responsive="true">
       </dashboard-result>
     </div>
   </template>

package/frontend/src/dashboard/dashboard.js

@@ -35,22 +35,22 @@ module.exports = app => app.component('dashboard', {
     },
     async evaluateDashboard() {
       this.status = 'evaluating';
+      this.errorMessage = null;
       try {
         const { dashboard, dashboardResult, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
         this.dashboard = dashboard;
-        if (error) {
-          this.errorMessage = error.message;
-        }
         this.code = this.dashboard.code;
         this.title = this.dashboard.title;
         this.description = this.dashboard.description ?? '';
-        this.dashboardResults.unshift(dashboardResult);
+        if (dashboardResult) {
+          this.dashboardResults.unshift(dashboardResult);
+        }
+        if (error) {
+          this.errorMessage = error.message;
+        }
       } finally {
         this.status = 'loaded';
       }
-    },
-    openDetailModal() {
-      this.showDetailModal = true;
     }
   },
   computed: {

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

@@ -6,6 +6,7 @@ const template = require('./edit-dashboard.html');
 module.exports = app => app.component('edit-dashboard', {
   template: template,
   props: ['dashboardId', 'code', 'currentDescription', 'currentTitle'],
+  emits: ['close', 'clearError'],
   data: function() {
     return {
       status: 'loaded',
@@ -19,6 +20,7 @@ module.exports = app => app.component('edit-dashboard', {
       this.$emit('close');
     },
     async updateCode() {
+      this.$emit('clearError');
       this.status = 'loading';
       try {
         const { doc, result, error } = await api.Dashboard.updateDashboard({

package/frontend/src/dashboard-result/dashboard-chart/dashboard-chart.html

@@ -1,5 +1,5 @@
 <div :class="responsive ? 'h-full' : ''">
-  <div v-if="header" class="border-b border-gray-100 px-2 pb-2 flex items-center">
+  <div v-if="header && !fullscreen" class="border-b border-gray-100 px-2 pb-2 flex items-center gap-1">
     <div class="text-xl font-bold">{{header}}</div>
     <button
       class="ml-auto px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors"
@@ -7,16 +7,32 @@
       title="Export PNG">
       <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em;" viewBox="0 -960 960 960" fill="currentColor"><path d="M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
     </button>
+    <button
+      class="px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors flex items-center"
+      @click="$emit('fullscreen')"
+      aria-label="Expand dashboard result">
+      <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <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" />
+      </svg>
+    </button>
   </div>
-  <div v-else class="border-b border-gray-100 px-2 pb-2 text-right">
+  <div v-else-if="!fullscreen" class="pt-1 border-b border-gray-100 px-2 pb-2 text-right flex items-center justify-end gap-1 w-full">
     <button
-      class="mt-1 px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors"
+      class="px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors"
       @click="exportPNG"
       title="Export PNG">
       <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em;" viewBox="0 -960 960 960" fill="currentColor"><path d="M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
     </button>
+    <button
+      class="px-2 py-1 text-xs bg-ultramarine-600 text-white border-none rounded cursor-pointer hover:bg-ultramarine-500 transition-colors flex items-center"
+      @click="$emit('fullscreen')"
+      aria-label="Expand dashboard result">
+      <svg xmlns="http://www.w3.org/2000/svg" style="height: 1.5em" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <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" />
+      </svg>
+    </button>
   </div>
-  <div class="text-xl" :class="responsive ? 'h-full' : ''">
-    <canvas ref="chart"></canvas>
+  <div :class="responsive ? 'relative h-full min-h-0' : ''">
+    <canvas ref="chart" class="block w-full h-full"></canvas>
   </div>
 </div>

package/frontend/src/dashboard-result/dashboard-chart/dashboard-chart.js

@@ -4,9 +4,11 @@ const template = require('./dashboard-chart.html');
 
 module.exports = app => app.component('dashboard-chart', {
   template: template,
-  props: ['value', 'responsive'],
+  props: ['value', 'fullscreen'],
+  emits: ['fullscreen'],
   data: () => ({
-    chart: null
+    chart: null,
+    showDetailModal: false
   }),
   mounted() {
     const ctx = this.$refs.chart.getContext('2d');

package/frontend/src/dashboard-result/dashboard-result.html

@@ -12,10 +12,12 @@
     <component
       class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl"
       :is="getComponentForValue(result)"
-      :value="result">
+      :value="result"
+      :fullscreen="fullscreen"
+      @fullscreen="$emit('fullscreen')">
     </component>
   </div>
-  <div class="text-right text-sm text-gray-700 mt-1" v-if="finishedEvaluatingAt">
+  <div class="text-right text-sm text-gray-700 mt-1" v-if="finishedEvaluatingAt && !fullscreen">
     Last Evaluated: {{ format.isoToLongDateTime(finishedEvaluatingAt) }}
   </div>
 </div>

package/frontend/src/dashboard-result/dashboard-result.js

@@ -7,7 +7,8 @@ const template = require('./dashboard-result.html');
 
 module.exports = app => app.component('dashboard-result', {
   template: template,
-  props: ['result', 'finishedEvaluatingAt'],
+  props: ['result', 'finishedEvaluatingAt', 'fullscreen'],
+  emits: ['fullscreen'],
   mounted: async function() {
   },
   methods: {

package/frontend/src/dashboards/dashboards.html

@@ -1,97 +1,119 @@
 <div class="dashboards max-w-5xl mx-auto mt-8">
-  <div v-if="status === 'loaded' && dashboards.length === 0">
-    <div class="text-center">
-      <h3 class="mt-2 text-sm font-semibold text-gray-900">No dashboards yet</h3>
-      <p class="mt-1 text-sm text-gray-500">Get started by creating a new dashboard.</p>
-      <div class="mt-6">
-        <button type="button" class="inline-flex items-center rounded-md bg-teal-600 px-3 py-2 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">
-          <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
-          </svg>
-          New Dashboard
-        </button>
+  <div v-if="status === 'loading'" class="text-center mt-4">
+    <svg
+      class="inline w-8 h-8 animate-spin text-ultramarine-600"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+      ></path>
+    </svg>
+  </div>
+    <div v-if="status === 'loaded' && dashboards.length === 0">
+      <div class="text-center">
+        <h3 class="mt-2 text-sm font-semibold text-gray-900">No dashboards yet</h3>
+        <p class="mt-1 text-sm text-gray-500">Get started by creating a new dashboard.</p>
+        <div class="mt-6">
+          <button type="button" class="inline-flex items-center rounded-md bg-ultramarine-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">
+            <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+            </svg>
+            New Dashboard
+          </button>
+        </div>
       </div>
     </div>
-  </div>
-
 
-  <div class="px-4 sm:px-6 lg:px-8">
-    <div class="sm:flex sm:items-center">
-      <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold leading-6 text-gray-900">Dashboards</h1>
-      </div>
-      <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-        <button
-          type="button"
-          @click="showCreateDashboardModal = true"
-          class="block rounded-md bg-teal-600 px-3 py-2 text-center 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">Create New Dashboard</button>
+    <div class="px-4 sm:px-6 lg:px-8">
+      <div class="sm:flex sm:items-center">
+        <div class="sm:flex-auto">
+          <h1 class="text-base font-semibold leading-6 text-gray-900">Dashboards</h1>
+        </div>
+        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+          <button
+            type="button"
+            @click="showCreateDashboardModal = true"
+            class="block rounded-md bg-ultramarine-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600">Create New Dashboard</button>
+        </div>
       </div>
-    </div>
-    <div class="mt-8 flow-root">
-      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div class="inline-block min-w-full py-2 align-middle">
-          <table class="min-w-full divide-y divide-gray-300">
-            <thead>
-              <tr>
-                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">Title</th>
-                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]">Description</th>
-                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
-                </th>
-                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
-                </th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-gray-200 bg-white">
-              <tr v-for="dashboard in dashboards">
-                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{dashboard.title}}</td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]">{{dashboard.description}}</td>
-                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                  <router-link
-                    :to="'/dashboard/' + dashboard._id + '?edit=true'"
-                    class="text-teal-600 hover:text-teal-900">
-                    Edit
-                  </router-link>
-                </td>
-                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                  <router-link
-                    :to="'/dashboard/' + dashboard._id"
-                    class="text-teal-600 hover:text-teal-900">
-                    View
-                  </router-link>
-                </td>
-                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
-                  <button
-                    @click="showDeleteDashboardModal=dashboard"
-                    class="text-teal-600 hover:text-teal-900">
-                    Delete
-                  </button>
-                </td>
-              </tr>
-  
-              <!-- More people... -->
-            </tbody>
-          </table>
+      <div class="mt-8 flow-root">
+        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div class="inline-block min-w-full py-2 align-middle">
+            <table class="min-w-full divide-y divide-gray-300">
+              <thead>
+                <tr>
+                  <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">Title</th>
+                  <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-[50%]">Description</th>
+                  <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
+                  </th>
+                  <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-gray-200 bg-white">
+                <tr v-for="dashboard in dashboards">
+                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{dashboard.title}}</td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 truncate w-[50%]">{{dashboard.description}}</td>
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
+                    <router-link
+                      :to="'/dashboard/' + dashboard._id + '?edit=true'"
+                      class="text-ultramarine-600 hover:text-ultramarine-900">
+                      Edit
+                    </router-link>
+                  </td>
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
+                    <router-link
+                      :to="'/dashboard/' + dashboard._id"
+                      class="text-ultramarine-600 hover:text-ultramarine-900">
+                      View
+                    </router-link>
+                  </td>
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
+                    <button
+                      @click="showDeleteDashboardModal=dashboard"
+                      class="text-ultramarine-600 hover:text-ultramarine-900">
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+
+                <!-- More people... -->
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <modal v-if="showCreateDashboardModal">
-    <template v-slot:body>
-      <div class="modal-exit" @click="showCreateDashboardModal = false;">&times;</div>
-      
-      <create-dashboard @close="insertNewDashboard"></create-dashboard>
-    </template>
-  </modal>
+    <modal v-if="showCreateDashboardModal">
+      <template v-slot:body>
+        <div class="modal-exit" @click="showCreateDashboardModal = false;">&times;</div>
 
-  <modal v-if="showDeleteDashboardModal">
-    <template v-slot:body>
-      <div class="modal-exit" @click="showDeleteDashboardModal = null;">&times;</div>
-      <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>
-      <div class="flex space-x-2">
-        <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500" @click="deleteDashboard(showDeleteDashboardModal)">Yes, delete</button>
-        <button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600" @click="showDeleteDashboardModal=null;">Cancel</button>
-      </div>
-    </template>
-  </modal>
+        <create-dashboard @close="insertNewDashboard"></create-dashboard>
+      </template>
+    </modal>
+
+    <modal v-if="showDeleteDashboardModal">
+      <template v-slot:body>
+        <div class="modal-exit" @click="showDeleteDashboardModal = null;">&times;</div>
+        <h2>Are you sure you want to delete this dashboard titled {{showDeleteDashboardModal.title}}?</h2>
+        <div class="flex space-x-2">
+          <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500" @click="deleteDashboard(showDeleteDashboardModal)">Yes, delete</button>
+          <button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-600" @click="showDeleteDashboardModal=null;">Cancel</button>
+        </div>
+      </template>
+    </modal>
+  </div>
 </div>

package/frontend/src/models/models.js

@@ -194,13 +194,13 @@ module.exports = app => app.component('models', {
         this.query.search = this.searchText;
         const query = this.query;
         const newUrl = this.$router.resolve({ query }).href;
-        window.history.pushState(null, '', newUrl);
+        this.$router.push({ query });
       } else {
         this.filter = {};
         delete this.query.search;
         const query = this.query;
         const newUrl = this.$router.resolve({ query }).href;
-        window.history.pushState(null, '', newUrl);
+        this.$router.push({ query });
       }
       this.documents = [];
       this.status = 'loading';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.0.115",
+  "version": "0.0.117",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
   "homepage": "https://studio.mongoosejs.io/",
   "repository": {