@mongoosejs/studio 0.5.13 → 0.6.0

package/frontend/public/tw.css

@@ -664,6 +664,10 @@ video {
   bottom: 0px;
 }
 
+.-bottom-1 {
+  bottom: -0.25rem;
+}
+
 .-left-1 {
   left: -0.25rem;
 }
@@ -672,6 +676,10 @@ video {
   left: -0.75rem;
 }
 
+.-top-1 {
+  top: -0.25rem;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -792,6 +800,10 @@ video {
   z-index: 10001;
 }
 
+.z-\[1000\] {
+  z-index: 1000;
+}
+
 .z-\[100\] {
   z-index: 100;
 }
@@ -1085,6 +1097,10 @@ video {
   height: 4rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .h-20 {
   height: 5rem;
 }
@@ -1157,6 +1173,10 @@ video {
   height: 45vh;
 }
 
+.h-\[55vh\] {
+  height: 55vh;
+}
+
 .h-full {
   height: 100%;
 }
@@ -1189,6 +1209,10 @@ video {
   max-height: 55vh;
 }
 
+.max-h-\[65vh\] {
+  max-height: 65vh;
+}
+
 .min-h-0 {
   min-height: 0px;
 }
@@ -1265,6 +1289,10 @@ video {
   width: 4rem;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-20 {
   width: 5rem;
 }
@@ -1365,6 +1393,11 @@ video {
   width: 100%;
 }
 
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1441,6 +1474,10 @@ video {
   max-width: calc(100vw - 4rem);
 }
 
+.max-w-\[min\(20rem\2c calc\(100vw-1rem\)\)\] {
+  max-width: min(20rem,calc(100vw - 1rem));
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -1555,6 +1592,11 @@ 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));
 }
 
+.rotate-45 {
+  --tw-rotate: 45deg;
+  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));
+}
+
 .rotate-90 {
   --tw-rotate: 90deg;
   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));
@@ -1608,6 +1650,10 @@ video {
   resize: vertical;
 }
 
+.resize {
+  resize: both;
+}
+
 .snap-y {
   scroll-snap-type: y var(--tw-scroll-snap-strictness);
 }
@@ -1861,6 +1907,10 @@ video {
   text-overflow: ellipsis;
 }
 
+.whitespace-normal {
+  white-space: normal;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2184,6 +2234,11 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
 .bg-green-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
@@ -2747,6 +2802,10 @@ video {
   font-weight: 500;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -2763,6 +2822,10 @@ video {
   font-style: italic;
 }
 
+.leading-4 {
+  line-height: 1rem;
+}
+
 .leading-6 {
   line-height: 1.5rem;
 }
@@ -3216,6 +3279,11 @@ video {
   --tw-ring-color: rgb(176 32 43 / var(--tw-ring-opacity));
 }
 
+.ring-red-200 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity));
+}
+
 .ring-red-400 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
@@ -3837,6 +3905,10 @@ video {
   --tw-ring-offset-width: 2px;
 }
 
+.focus-visible\:rounded-md:focus-visible {
+  border-radius: 0.375rem;
+}
+
 .focus-visible\:opacity-100:focus-visible {
   opacity: 1;
 }
@@ -3853,6 +3925,10 @@ video {
   outline-offset: 2px;
 }
 
+.focus-visible\:outline-blue-600:focus-visible {
+  outline-color: #2563eb;
+}
+
 .focus-visible\:outline-edge-strong:focus-visible {
   outline-color: var(--color-edge-strong);
 }

package/frontend/src/api.js

@@ -164,6 +164,17 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('', { action: 'ChatMessage.executeScript', ...params }).then(res => res.data);
     }
   };
+  exports.Script = {
+    createScript(params) {
+      return client.post('', { action: 'Script.createScript', ...params }).then(res => res.data);
+    },
+    executeScript(params) {
+      return client.post('', { action: 'Script.executeScript', ...params }).then(res => res.data);
+    },
+    getScript(params) {
+      return client.post('', { action: 'Script.getScript', ...params }).then(res => res.data);
+    }
+  };
   exports.Model = {
     addField(params) {
       return client.post('', { action: 'Model.addField', ...params }).then(res => res.data);
@@ -229,7 +240,11 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     getDocumentsStream: async function* getDocumentsStream(params) {
       const data = await client.post('', { action: 'Model.getDocuments', ...params }).then(res => res.data);
       yield { schemaPaths: data.schemaPaths, suggestedFields: data.suggestedFields };
-      yield { numDocs: data.numDocs };
+      if (data.numDocsError) {
+        yield { numDocsError: data.numDocsError };
+      } else {
+        yield { numDocs: data.numDocs };
+      }
       for (const doc of data.docs) {
         yield { document: doc };
       }
@@ -359,6 +374,17 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
       return client.post('/ChatMessage/executeScript', params).then(res => res.data);
     }
   };
+  exports.Script = {
+    createScript: function createScript(params) {
+      return client.post('/Script/createScript', params).then(res => res.data);
+    },
+    executeScript: function executeScript(params) {
+      return client.post('/Script/executeScript', params).then(res => res.data);
+    },
+    getScript: function getScript(params) {
+      return client.post('/Script/getScript', params).then(res => res.data);
+    }
+  };
   exports.Model = {
     addField(params) {
       return client.post('/Model/addField', params).then(res => res.data);

package/frontend/src/index.js

@@ -20,7 +20,7 @@ const {
 } = require('./_util/recent-pages-history');
 appendCSS(require('vue-toastification/dist/index.css'));
 
-const TRACKED_RECENT_PAGE_ROUTE_NAMES = new Set(['model', 'document', 'dashboard', 'chat']);
+const TRACKED_RECENT_PAGE_ROUTE_NAMES = new Set(['model', 'document', 'dashboard', 'chat', 'script']);
 const CHAT_ROUTE_NAMES = new Set(['chat index', 'chat']);
 
 function formatHistoryLabel(route) {
@@ -42,6 +42,9 @@ function formatHistoryLabel(route) {
   if (route.name === 'chat') {
     return route.params?.threadId ? `Chat: ${route.params.threadId}` : 'Chat';
   }
+  if (route.name === 'script') {
+    return route.params?.scriptId ? `Script: ${route.params.scriptId}` : 'Script';
+  }
   const normalizedPath = route.path.replace(/^\//, '');
   return normalizedPath || 'Home';
 }
@@ -332,6 +335,11 @@ const router = VueRouter.createRouter({
 
 // Add global navigation guard
 router.beforeEach((to, from, next) => {
+  if (to.name === 'mcp' && window.MONGOOSE_STUDIO_CONFIG.mcp === false) {
+    next({ name: window.state?.roles?.[0] === 'dashboards' ? 'dashboards' : 'root' });
+    return;
+  }
+
   // Skip auth check for authorized (public) routes
   if (to.meta.authorized) {
     next();

package/frontend/src/mcp/mcp.html

@@ -0,0 +1,55 @@
+<div class="mx-auto max-w-5xl py-6 px-2">
+  <h1 class="text-xl font-bold text-content">MCP</h1>
+  <p class="mt-2 text-sm text-content-secondary">
+    Connect an MCP client such as Claude or ChatGPT to this Mongoose Studio workspace.
+  </p>
+
+  <div class="mt-6 rounded-lg border border-edge bg-surface p-4">
+    <label for="mcp-url" class="block text-sm font-medium text-content">MCP URL</label>
+    <div class="mt-2 flex gap-2">
+      <input
+        id="mcp-url"
+        type="text"
+        readonly
+        :value="mcpUrl"
+        class="min-w-0 flex-1 rounded-md bg-muted px-3 py-2 font-mono text-sm text-content outline outline-1 -outline-offset-1 outline-edge-strong"
+      />
+      <async-button
+        type="button"
+        @click="copyMCPUrl"
+        class="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover">
+        Copy
+      </async-button>
+    </div>
+  </div>
+
+  <div class="mt-8 grid gap-6 text-sm text-content-secondary">
+    <section>
+      <h2 class="text-base font-semibold text-content">Authentication and network access</h2>
+      <p class="mt-2">
+        Without a Mongoose Studio API key, the MCP endpoint uses the deployment's
+        <code class="rounded bg-muted px-1 py-0.5">bindIp</code> restrictions. By default, this means an MCP client can only connect from localhost.
+      </p>
+      <p class="mt-2">
+        With an API key, MCP clients such as Claude and ChatGPT connect through OAuth. You will be prompted to sign in to Mongoose Studio and approve the connection before the client receives access.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="text-base font-semibold text-content">Permissions</h2>
+      <p class="mt-2">
+        When an API key is configured, MCP access is scoped to the signed-in user's workspace permissions. During authorization, the user can explicitly grant fewer permissions, such as read-only access or a lower execution time limit. An MCP connection can never receive more access than that user already has.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="text-base font-semibold text-content">Supported operations</h2>
+      <p class="mt-2">
+        The MCP server supports database CRUD operations, dashboards, and script creation. It does not execute standalone scripts directly.
+      </p>
+      <p class="mt-2">
+        An MCP client can create a script and return a Mongoose Studio URL. A person can then open that URL, review or edit the code, and choose whether to dry run or execute it.
+      </p>
+    </section>
+  </div>
+</div>

package/frontend/src/mcp/mcp.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const template = require('./mcp.html');
+
+module.exports = {
+  template,
+  computed: {
+    mcpUrl() {
+      const configuredUrl = window.MONGOOSE_STUDIO_CONFIG.mcpUrl;
+      if (configuredUrl) {
+        return configuredUrl;
+      }
+
+      const url = new URL(window.location.href);
+      url.hash = '';
+      url.search = '';
+      url.pathname = `${url.pathname.replace(/\/+$/, '')}/mcp`;
+      return url.toString();
+    }
+  },
+  methods: {
+    async copyMCPUrl() {
+      await navigator.clipboard.writeText(this.mcpUrl);
+      this.$toast.success('MCP URL copied!');
+    }
+  }
+};

package/frontend/src/models/models.html

@@ -110,7 +110,18 @@
           >
           </document-search>
           <div>
-            <span v-if="numDocuments == null">Loading ...</span>
+            <tooltip
+              v-if="numDocumentsError"
+              :text="'Error counting documents: ' + numDocumentsError"
+            >
+              <span
+                class="inline-flex rounded-md bg-red-50 px-2 py-2 text-sm text-red-700 ring-1 ring-inset ring-red-200"
+                role="alert"
+              >
+                Count Error
+              </span>
+            </tooltip>
+            <span v-else-if="numDocuments == null">Loading...</span>
             <span v-else-if="typeof numDocuments === 'number'">{{documents.length}}/{{numDocuments === 1 ? numDocuments + ' document' : numDocuments + ' documents'}}</span>
           </div>
           <button
@@ -453,11 +464,16 @@
             </tbody>
           </table>
         </div>
-        <div v-if="outputType === 'table' && (loadingMore || (status === 'loading' && documents.length > 0))" class="flex items-center justify-center gap-2 py-3 text-sm text-content-tertiary border-t border-edge bg-surface">
-          <img src="images/loader.gif" alt="" class="h-5 w-5">
-          <span>Loading documents…</span>
+        <div
+          v-if="outputType === 'table' && (documentsError || loadingMore || (status === 'loading' && documents.length > 0))"
+          class="flex items-center justify-center gap-2 py-3 text-sm border-t"
+          :class="documentsError ? 'border-red-200 bg-red-50 text-red-700' : 'border-edge bg-surface text-content-tertiary'"
+          :role="documentsError ? 'alert' : null"
+        >
+          <img v-if="!documentsError" src="images/loader.gif" alt="" class="h-5 w-5">
+          <span>{{documentsError || 'Loading documents…'}}</span>
         </div>
-        <p v-if="outputType === 'table' && documents.length === 0 && status === 'loaded'" class="mt-2 text-sm text-content-tertiary px-1">
+        <p v-if="outputType === 'table' && documents.length === 0 && status === 'loaded' && !documentsError" class="mt-2 text-sm text-content-tertiary px-1">
           No documents to show. Use Projection in the menu to choose columns.
         </p>
       </div>
@@ -483,9 +499,14 @@
           <list-json :value="filterDocument(document)" :references="referenceMap">
           </list-json>
         </div>
-        <div v-if="outputType === 'json' && (loadingMore || (status === 'loading' && documents.length > 0))" class="flex items-center justify-center gap-2 py-3 text-sm text-content-tertiary">
-          <img src="images/loader.gif" alt="" class="h-5 w-5">
-          <span>Loading documents…</span>
+        <div
+          v-if="outputType === 'json' && (documentsError || loadingMore || (status === 'loading' && documents.length > 0))"
+          class="flex items-center justify-center gap-2 py-3 text-sm"
+          :class="documentsError ? 'rounded-md border border-red-200 bg-red-50 text-red-700' : 'text-content-tertiary'"
+          :role="documentsError ? 'alert' : null"
+        >
+          <img v-if="!documentsError" src="images/loader.gif" alt="" class="h-5 w-5">
+          <span>{{documentsError || 'Loading documents…'}}</span>
         </div>
       </div>
       <div v-else-if="outputType === 'map'" class="flex flex-col h-full">

package/frontend/src/models/models.js

@@ -151,6 +151,8 @@ module.exports = app => app.component('models', {
     filteredPaths: [],
     selectedPaths: [],
     numDocuments: null,
+    numDocumentsError: null,
+    documentsError: null,
     mongoDBIndexes: [],
     schemaIndexes: [],
     status: 'loading',
@@ -838,7 +840,8 @@ module.exports = app => app.component('models', {
       return filteredDoc;
     },
     async checkIfScrolledToBottom() {
-      if (this.status === 'loading' || this.loadedAllDocs) {
+      // Stop infinite scroll if the last load failed, otherwise we would retry the same failing request forever.
+      if (this.status === 'loading' || this.loadedAllDocs || this.documentsError) {
         return;
       }
       // Infinite scroll only applies to table/json views.
@@ -864,11 +867,20 @@ module.exports = app => app.component('models', {
       try {
         const skip = this.documents.length;
         const params = this.buildDocumentFetchParams({ skip });
-        const { docs } = await api.Model.getDocuments(params);
+        const { docs, numDocs, numDocsError } = await api.Model.getDocuments(params);
+        if (numDocsError) {
+          this.numDocumentsError = numDocsError;
+        } else if (numDocs !== undefined) {
+          this.numDocuments = numDocs;
+          this.numDocumentsError = null;
+        }
         if (docs.length < limit) {
           this.loadedAllDocs = true;
         }
         this.documents.push(...docs);
+        this.documentsError = null;
+      } catch (err) {
+        this.documentsError = err?.message;
       } finally {
         this.loadingMore = false;
         this.status = 'loaded';
@@ -1081,6 +1093,8 @@ module.exports = app => app.component('models', {
         // Clear previous data
         this.documents = [];
         this.numDocuments = null;
+        this.numDocumentsError = null;
+        this.documentsError = null;
         this.loadedAllDocs = false;
         this.lastSelectedIndex = null;
 
@@ -1130,6 +1144,10 @@ module.exports = app => app.component('models', {
           }
           if (event.numDocs !== undefined) {
             this.numDocuments = event.numDocs;
+            this.numDocumentsError = null;
+          }
+          if (event.numDocsError) {
+            this.numDocumentsError = event.numDocsError;
           }
           if (event.document) {
             this.documents.push(event.document);
@@ -1143,6 +1161,9 @@ module.exports = app => app.component('models', {
         if (docsCount < limit) {
           this.loadedAllDocs = true;
         }
+        this.documentsError = null;
+      } catch (err) {
+        this.documentsError = err?.message;
       } finally {
         this.status = 'loaded';
       }
@@ -1169,8 +1190,12 @@ module.exports = app => app.component('models', {
         for await (const event of api.Model.getDocumentsStream(params)) {
           if (event.numDocs !== undefined && !numDocsReceived) {
             this.numDocuments = event.numDocs;
+            this.numDocumentsError = null;
             numDocsReceived = true;
           }
+          if (event.numDocsError) {
+            this.numDocumentsError = event.numDocsError;
+          }
           if (event.document) {
             this.documents.push(event.document);
             docsCount++;
@@ -1183,6 +1208,9 @@ module.exports = app => app.component('models', {
         if (docsCount < limit) {
           this.loadedAllDocs = true;
         }
+        this.documentsError = null;
+      } catch (err) {
+        this.documentsError = err?.message;
       } finally {
         this.loadingMore = false;
         this.status = 'loaded';

package/frontend/src/navbar/navbar.html

@@ -147,6 +147,10 @@
             <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
           </svg>
         </span>
+        <router-link v-if="mcpEnabled" to="/mcp" @click="showFlyout = false" class="cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle" role="menuitem" tabindex="-1">MCP</router-link>
+        <span v-else class="block px-4 py-2 text-sm text-gray-300 cursor-not-allowed" role="menuitem" title="MCP is disabled for this deployment">
+          MCP
+        </span>
         <span @click="logout" class="cursor-pointer block px-4 py-2 text-sm text-content-secondary hover:bg-primary-subtle" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</span>
       </div>
     </div>
@@ -287,6 +291,10 @@
               <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zm-3 6V6a3 3 0 116 0v2H7z" clip-rule="evenodd" />
             </svg>
           </span>
+          <router-link v-if="mcpEnabled" to="/mcp" class="block px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle">MCP</router-link>
+          <span v-else class="block px-3 py-2 rounded-md text-base text-gray-300 cursor-not-allowed" title="MCP is disabled for this deployment">
+            MCP
+          </span>
           <span @click="logout" class="block px-3 py-2 rounded-md text-base text-content-secondary hover:bg-primary-subtle cursor-pointer">Sign out</span>
         </div>
       </div>

package/frontend/src/navbar/navbar.js

@@ -103,6 +103,9 @@ module.exports = app => app.component('navbar', {
     hasTaskVisualizer() {
       return !!window.MONGOOSE_STUDIO_CONFIG.enableTaskVisualizer;
     },
+    mcpEnabled() {
+      return window.MONGOOSE_STUDIO_CONFIG.mcp !== false;
+    },
     recentPagesList() {
       return this.localRecentPages;
     },

package/frontend/src/routes.js

@@ -69,6 +69,14 @@ module.exports = {
         authorized: false
       }
     },
+    {
+      path: '/mcp',
+      name: 'mcp',
+      component: 'mcp',
+      meta: {
+        authorized: true
+      }
+    },
     {
       path: '/tasks',
       name: 'tasks',
@@ -108,6 +116,14 @@ module.exports = {
       meta: {
         authorized: true
       }
+    },
+    {
+      path: '/script/:scriptId',
+      name: 'script',
+      component: 'script',
+      meta: {
+        authorized: true
+      }
     }
   ],
   roleAccess,

package/frontend/src/script/script.html

@@ -0,0 +1,105 @@
+<div class="px-4 py-6">
+  <div v-if="status === 'loading'" class="max-w-5xl mx-auto text-center">
+    <img src="images/loader.gif" class="inline mt-10" alt="Loading script">
+  </div>
+
+  <div v-else-if="script" class="max-w-5xl mx-auto">
+    <div class="flex items-center justify-between mb-4">
+      <div>
+        <h1 class="text-xl font-semibold text-content">Script</h1>
+        <p class="text-xs text-content-tertiary font-mono">{{ script._id }}</p>
+      </div>
+      <div class="flex items-center">
+        <button
+          v-if="!isEditing"
+          class="px-3 py-1.5 mr-2 text-sm bg-gray-700 text-white rounded hover:bg-gray-600"
+          @click="startEditing">
+          Edit
+        </button>
+        <div class="relative flex items-center">
+          <async-button
+            class="px-3 py-1.5 text-sm bg-primary hover:bg-primary-hover text-primary-text rounded-l-md"
+            @click="executeScript">
+            {{ selectedRunLabel }}
+          </async-button>
+          <button
+            class="px-1.5 py-1.5 text-sm bg-primary hover:bg-primary-hover text-primary-text border-l border-black/10 rounded-r-md"
+            @click.stop="showRunDropdown = !showRunDropdown">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+            </svg>
+          </button>
+          <div
+            v-if="showRunDropdown"
+            class="absolute right-0 top-full z-10 mt-1 w-40 rounded-md bg-surface py-1 shadow-lg ring-1 ring-black/5">
+            <button class="block w-full px-4 py-2 text-left text-xs text-content-secondary hover:bg-muted" @click="selectRunMode('run')">
+              Run
+            </button>
+            <button
+              class="block w-full px-4 py-2 text-left text-xs"
+              :class="canUseDryRun ? 'text-content-secondary hover:bg-muted' : 'cursor-not-allowed text-gray-400'"
+              :disabled="!canUseDryRun"
+              :title="canUseDryRun ? null : 'Dry run mode requires MongoDB transaction support'"
+              @click="selectRunMode('dryRun')">
+              Dry Run
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative border rounded bg-surface text-content text-sm overflow-hidden">
+      <div class="flex border-b py-1 pl-1 text-xs font-medium bg-surface">
+        <button
+          class="px-4 py-1 rounded-l-md border-r border-edge-strong font-semibold"
+          :class="activeTab === 'code' ? 'bg-gray-700 text-white shadow' : 'bg-muted text-gray-600'"
+          @click="activeTab = 'code'">
+          Code
+        </button>
+        <button
+          class="px-4 py-1 rounded-r-md font-semibold"
+          :class="activeTab === 'output' ? 'bg-gray-700 text-white shadow' : 'bg-muted text-gray-600'"
+          @click="activeTab = 'output'">
+          Output<span v-if="isDryRunResult" class="ml-1">[Dry Run]</span>
+        </button>
+      </div>
+
+      <div v-show="activeTab === 'code'" class="max-h-[65vh] overflow-y-auto">
+        <div v-if="isEditing" class="flex flex-col">
+          <ace-editor
+            v-model="editedScript"
+            mode="javascript"
+            :line-numbers="true"
+            class="w-full h-[55vh] min-h-[300px]"
+          />
+          <div class="flex justify-end p-2 border-t border-edge">
+            <button class="px-3 py-1.5 text-xs bg-gray-300 text-gray-800 rounded hover:bg-gray-400" @click="cancelEditing">
+              Cancel
+            </button>
+          </div>
+        </div>
+        <pre v-else class="whitespace-pre-wrap !my-0 bg-muted"><code ref="code" class="language-javascript" v-text="script.script"></code></pre>
+      </div>
+
+      <div v-show="activeTab === 'output'" class="p-3 max-h-[65vh] overflow-y-auto border-t">
+        <div v-if="script.executionResult?.error" class="rounded-md bg-red-50 p-4 mb-3 text-sm text-red-800">
+          {{ script.executionResult.error }}
+        </div>
+        <dashboard-result
+          v-if="script.executionResult?.output != null"
+          :result="script.executionResult.output">
+        </dashboard-result>
+        <pre v-else-if="!script.executionResult?.error">No output</pre>
+
+        <div v-if="script.executionResult?.logs" class="mt-3 pt-3 border-t border-edge">
+          <div class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Console</div>
+          <pre class="mt-1 bg-muted text-content p-3 rounded whitespace-pre-wrap overflow-x-auto max-h-[280px]">{{ script.executionResult.logs }}</pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="max-w-5xl mx-auto text-content-secondary">
+    No script with the given id could be found.
+  </div>
+</div>