@mongoosejs/studio 0.3.11 → 0.4.1

package/frontend/public/tw.css

@@ -1072,6 +1072,10 @@ video {
   height: 0.75rem;
 }
 
+.h-3\.5 {
+  height: 0.875rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -1212,6 +1216,10 @@ video {
   width: 0.75rem;
 }
 
+.w-3\.5 {
+  width: 0.875rem;
+}
+
 .w-36 {
   width: 9rem;
 }
@@ -1256,6 +1264,10 @@ video {
   width: 2rem;
 }
 
+.w-80 {
+  width: 20rem;
+}
+
 .w-\[240px\] {
   width: 240px;
 }
@@ -1320,14 +1332,14 @@ video {
   max-width: 280px;
 }
 
-.max-w-\[calc\(100vw-3rem\)\] {
-  max-width: calc(100vw - 3rem);
-}
-
 .max-w-\[calc\(100vw-4rem\)\] {
   max-width: calc(100vw - 4rem);
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -1774,6 +1786,10 @@ video {
   border-bottom-width: 4px;
 }
 
+.border-l {
+  border-left-width: 1px;
+}
+
 .border-l-0 {
   border-left-width: 0px;
 }
@@ -3757,6 +3773,10 @@ video {
     margin-right: -2rem;
   }
 
+  .lg\:flex {
+    display: flex;
+  }
+
   .lg\:hidden {
     display: none;
   }
@@ -3773,10 +3793,6 @@ 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);
   }
@@ -3813,4 +3829,14 @@ video {
 
 :is(:where(.dark) .dark\:bg-shark-800\/80) {
   background-color: rgb(33 37 41 / 0.8);
+}
+
+:is(:where(.dark) .dark\:text-gray-400) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+:is(:where(.dark) .dark\:text-gray-500) {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
 }

package/frontend/src/api.js

@@ -62,6 +62,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     shareChatThread(params) {
       return client.post('', { action: 'ChatThread.shareChatThread', ...params }).then(res => res.data);
     },
+    toggleAgentMode(params) {
+      return client.post('', { action: 'ChatThread.toggleAgentMode', ...params }).then(res => res.data);
+    },
     streamChatMessage: async function* streamChatMessage(params) {
       // Don't stream on Next.js or Netlify for now.
       const data = await client.post('', { action: 'ChatThread.createChatMessage', ...params }).then(res => res.data);
@@ -238,6 +241,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
     shareChatThread: function shareChatThread(params) {
       return client.post('/ChatThread/shareChatThread', params).then(res => res.data);
     },
+    toggleAgentMode: function toggleAgentMode(params) {
+      return client.post('/ChatThread/toggleAgentMode', params).then(res => res.data);
+    },
     streamChatMessage: async function* streamChatMessage(params) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/ChatThread/streamChatMessage?' + new URLSearchParams(params).toString();

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

@@ -1,8 +1,19 @@
 <div class="relative flex items-start" :class="{'justify-end': message.role === 'user'}">
   <div
-    class="min-w-0 max-w-[calc(100vw-3rem)] lg:max-w-[calc(100vw-15rem)]"
+    class="min-w-0 max-w-full"
     :class="{'text-right': message.role === 'user'}">
 
+    <div v-if="message.toolCalls && message.toolCalls.length" class="mb-2 text-xs text-gray-500 dark:text-gray-400">
+      <div
+        v-for="(tc, i) in message.toolCalls"
+        :key="i"
+        class="flex items-center gap-1.5 py-0.5 font-mono">
+        <svg :class="['w-3.5 h-3.5 shrink-0', tc.status === 'running' ? 'animate-spin text-gray-400 dark:text-gray-500' : 'text-gray-500 dark:text-gray-400']" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M4.867 19.125h.008v.008h-.008v-.008Z" /></svg>
+        <span>{{ tc.toolName }}</span>
+        <span v-if="tc.toolName !== 'typeCheck'" class="text-gray-400 dark:text-gray-500">{{ formatToolInput(tc.input) }}</span>
+      </div>
+    </div>
+
     <div class="text-sm text-content rounded-md inline-block relative" :class="styleForMessage">
       <div v-for="part in contentSplitByScripts">
         <div v-if="part.type === 'text'" v-html="marked(part.content)">

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

@@ -54,6 +54,14 @@ module.exports = app => app.component('chat-message', {
     marked(text) {
       return marked(text);
     },
+    formatToolInput(input) {
+      if (!input) return '';
+      const parts = [];
+      if (input.modelName) parts.push(input.modelName);
+      if (input.filter && Object.keys(input.filter).length) parts.push(JSON.stringify(input.filter));
+      if (input.limit && input.limit !== 10) parts.push('limit=' + input.limit);
+      return parts.length ? '(' + parts.join(', ') + ')' : '';
+    },
     async executeScript(message, script) {
       const { chatMessage } = await api.ChatMessage.executeScript({
         chatMessageId: message._id,

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

@@ -35,7 +35,7 @@
         v-if="activeTab === 'code' && !isEditing"
         class="px-2 py-1 mr-1 text-xs bg-gray-700 text-white border-none rounded cursor-pointer hover:bg-gray-600 transition-colors flex items-center"
         @click.stop="startEditing">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4" viewBox="0 0 20 20" fill="currentColor">
           <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM4 13.5V16h2.5l7.086-7.086-2.828-2.828L4 13.5z" />
         </svg>
       </button>

package/frontend/src/chat/chat.html

@@ -69,7 +69,7 @@
         class="rounded p-1.5 text-gray-400 hover:text-gray-600 hover:bg-muted"
         title="Hide sidebar"
       >
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
           <path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" />
         </svg>
       </button>
@@ -82,57 +82,104 @@
         aria-label="Share thread with workspace"
         :title="'Share thread with workspace' + (!hasWorkspace ? ' (requires a pro workspace)' : !chatThreadId ? ': Open a thread first!' : '')"
       >
-        <svg v-if="hasWorkspace" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" 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>
-        <svg v-else xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" 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>
+        <svg v-if="hasWorkspace" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" 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>
+        <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>
+      </button>
+      <button
+        type="button"
+        @click="toggleAgentMode"
+        class="rounded p-1.5 transition-colors"
+        :class="isAgentModeEnabled ? 'text-primary bg-primary/10' : 'text-gray-400 hover:text-gray-600 hover:bg-muted'"
+        :aria-label="isAgentModeEnabled ? 'Turn agent mode off' : 'Turn agent mode on'"
+        :aria-pressed="isAgentModeEnabled"
+        :title="isAgentModeEnabled ? 'Agent mode on' : 'Agent mode off'"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 200 200"><path d="m187 170.9-38.72-13.73-0.55-0.25-11.24-12.18v-9.98c6.3-6.82 6.43-11.03 8.3-23.22 7.34-1.41 10.2-7.7 12.28-18.9 0.97-5.02 2.72-9.88 0.14-13.92-1.38-2.35-3.49-3.08-5.62-3.38 1.65-11.57 5.47-27.07-2.68-42.38-5.47-9.94-14-14.18-21.8-14.92-3.5-9.15-12.32-13.06-27.11-13.06h-1.06c-27.2 0-48.53 17.96-52.18 39.74-2.05 11.38-0.41 20.41 0.74 30.03-2.23 0.19-4.38 1.02-5.84 3.42-2.21 3.83-1.27 8.84 0.06 14.19 2 8.28 2.26 16.18 12.9 18.96 1.47 6.52 0.58 14.07 8.3 22.84v10.77l-12.54 12.83-38.38 12.85v24.18h57.31c-3.11-14.37-6.53-23.75-5.45-42.72l0.44-0.34c5.71 9.04 16.02 15.97 29.22 25.91l-12.68 17.15h38.07l-13.16-17.2c11.44-9.29 22.31-16.55 29.2-25.38 4.68 9.53-1.48 26.7-4.72 42.58h56.77v-23.89zm-49.56-49.09c-1.43 5.43-2.53 6.16-9.69 14.68l-11.68 13.11c-3.48 3.27-4.8 3.27-11.11 3.27h-10.39c-6.25 0-7.45-0.78-11.01-4.46-6.78-7.7-11.76-13.37-15.09-17.32-5.39-6.33-5.85-7.2-7.16-18.89-0.73-4.86-3.02-14.25-2.94-14.91 3.94 3.43 13.59 3.35 16.89 3.35 12.76 0 15.79-2.74 19.92-17.12 0.68-2.98 1.71-3.53 4-3.53 2.04 0 3.04 0.98 3.86 3.71 3.9 13.69 5.2 16.52 16.15 16.76h2.99c8.1 0 15.01-1.52 18.58-2.93-0.5 5.06-2.28 16.7-3.32 24.28zm4.72-39.02c-1.97 10.98-2.94 12.3-17.69 12.91-9.05 0.38-11.35-0.71-14.17-8.69-3.69-11.25-2.17-13 5.55-13.83 6.36-0.83 11.74-0.79 15.92-0.79 10.01 0 12.11 0.27 10.39 10.4zm-84.38-32c0-11.99 9.26-21.63 15.54-23.52 4.46-1.14 7.99 3.61 15.25 5.74 5.06 1.54 10.71 1.32 11.84 1.32 11.49 0 16.71-2.62 21.55-6.91 1.66-1.28 3.22-1.57 4.86-0.67 10.89 6.36 15.34 16.28 14.74 26.07-0.36 5.5-2.18 9.03-1.38 12.23l1.14 3.62c-3.83-0.82-6.2-0.92-10.69-0.92-9.44 0-17.61 1.24-22.14 2.5-3.66 1.24-5.2 1.44-8.35 1.44-2.98 0-4.92-0.2-7.56-1.44-4.97-1.54-14.49-2.5-21.47-2.5-3.69 0-7 0.01-10.9 0.62l-1.84 0.3 0.42-3.07c0.82-3.01-1.01-7.56-1.01-14.81z"/><path d="m116.6 125.4-12.18-2.58c-2.29-0.68-3.7 0.76-5.4 0.76-1.66 0-2.79-1.35-5.4-0.66l-10.88 2.36c-1.35 0.12-1.55 1.44-0.79 3.32 0.38 1.02 1.26 0.7 3.07 0.36 3.25-0.46 4.65-0.84 8.11-1.04 1.85-0.17 2.59 0.41 5.06 0.41h1.14c1.72 0 2.62-0.55 4.15-0.31 3.81 0.31 5.64 0.72 11.64 1.22 2.08 0.38 2.4-1.15 2.21-2.52-0.07-0.65-0.24-1.1-0.73-1.32z"/><path d="m94.08 133.5c-1.96 0-2.49 1.23-2.4 2.39 0.06 1.38 0.93 2.27 2.57 2.27h10.06c2.13 0 2.7-1.25 2.7-2.56 0-1.13-0.65-2.1-2.53-2.1h-10.4z"/><path d="m91.31 106.6c-2.13 0-2.51 3.32-1.24 4.55 1.11 1.08 7.39 3.76 9.34 3.76s8.38-3.24 9.4-3.87c1.9-1.2 0.85-4.82-1.7-4.44-1.84 0.3-6.01 3.39-7.96 3.01-1.53-0.32-6.08-3.01-7.84-3.01z"/><path d="m85.62 73.71c-5.3-1.1-10.53-1.15-14.51-1.15-10.96 0-14.08-0.44-14.33 5.26-0.47 11.15 1.82 15.96 6.69 17.19 4.7 1.26 6.84 1.08 11.71 1.08 8.88 0 10.9-1.18 14.23-10.67 2.38-6.81 1.87-10.59-3.79-11.71z"/><path d="m114.5 73.51c-7.72 0.83-7.35 2.71-6.39 9.73 1.78 7.47 3.64 11.94 10.97 12.49 3.07 0.14 4.97-0.05 8-0.32 10.72-0.96 12.6-2.48 14.45-12.22 1.88-10.29-0.54-10.77-9.79-10.77-4.18 0-10.45 0.26-17.24 1.09z"/></svg>
       </button>
     </div>
   </aside>
 
-  <!-- Main Chat Area -->
-  <main class="flex-1 flex flex-col bg-slate-50">
-    <div class="flex-1 overflow-y-auto p-6 space-y-4" ref="messagesContainer">
-      <div v-if="chatMessages?.length === 0">
-        <div class="flex items-center w-full h-full justify-center py-3 mb-4">
-          <p class="mx-4 font-bold text-content">
-            Ask Mongoose Studio to analyze your data or generate a script
-          </p>
+  <div class="flex-1 min-w-0 flex">
+    <!-- Main Chat Area -->
+    <main class="flex-1 min-w-0 flex flex-col bg-slate-50">
+      <div class="flex-1 overflow-y-auto p-6 space-y-4" ref="messagesContainer">
+        <div v-if="chatMessages?.length === 0">
+          <div class="flex items-center w-full h-full justify-center py-3 mb-4">
+            <p class="mx-4 font-bold text-content">
+              Ask Mongoose Studio to analyze your data or generate a script
+            </p>
+          </div>
         </div>
+        <ul role="list" class="space-y-4" v-else>
+          <li v-for="message in chatMessages" :key="message._id">
+            <chat-message :message="message" :target-dashboard-id="currentThread?.dashboardId"></chat-message>
+          </li>
+        </ul>
       </div>
-      <ul role="list" class="space-y-4" v-else>
-        <li v-for="message in chatMessages" :key="message._id">
-          <chat-message :message="message" :target-dashboard-id="currentThread?.dashboardId"></chat-message>
-        </li>
-      </ul>
-    </div>
 
 
-    <!-- Input Area -->
-    <div class="border-t p-4">
-      <form @submit.prevent="sendMessage" :disabled="sendingMessage" class="flex gap-2 items-end justify-end">
-        <textarea
-          v-model="newMessage"
-          :placeholder="sendingMessage ? 'Sending...' : 'Ask about your data, generate a query, or build a chart…'"
-          class="flex-1 border rounded px-4 py-2 resize-none overflow-y-auto shadow-sm"
-          :disabled="sendingMessage"
-          rows="2"
-          ref="messageInput"
-          @input="adjustTextareaHeight"
-          @keydown.enter.exact.prevent="handleEnter"
-        ></textarea>
-        <button class="bg-primary hover:bg-primary-hover text-white px-4 h-[42px] rounded disabled:bg-gray-600" :disabled="sendingMessage">
-          <svg v-if="sendingMessage" style="height: 1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <g>
-              <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3" />
-              <path d="M12 2a10 10 0 0 1 10 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite" />
-              </path>
-            </g>
-          </svg>
-          <span v-else>Send</span>
-        </button>
-      </form>
-    </div>
-  </main>
+      <!-- Input Area -->
+      <div class="border-t p-4">
+        <form @submit.prevent="sendMessage" :disabled="sendingMessage" class="flex gap-2 items-end justify-end">
+          <textarea
+            v-model="newMessage"
+            :placeholder="sendingMessage ? 'Sending...' : 'Ask about your data, generate a query, or build a chart…'"
+            class="flex-1 border rounded px-4 py-2 resize-none overflow-y-auto shadow-sm"
+            :disabled="sendingMessage"
+            rows="2"
+            ref="messageInput"
+            @input="adjustTextareaHeight"
+            @keydown.enter.exact.prevent="handleEnter"
+          ></textarea>
+          <button class="bg-primary hover:bg-primary-hover text-white px-4 h-[42px] rounded disabled:bg-gray-600" :disabled="sendingMessage">
+            <svg v-if="sendingMessage" style="height: 1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <g>
+                <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3" />
+                <path d="M12 2a10 10 0 0 1 10 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                  <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite" />
+                </path>
+              </g>
+            </svg>
+            <span v-else>Send</span>
+          </button>
+        </form>
+      </div>
+    </main>
+
+    <aside
+      v-if="isAgentModeEnabled"
+      class="hidden lg:flex shrink-0 border-l border-edge bg-page transition-all duration-300 ease-in-out overflow-hidden"
+      :class="showAgentSidebar ? 'w-80' : 'w-0 border-l-0'"
+    >
+      <div v-if="showAgentSidebar" class="flex h-full w-80 flex-col">
+        <div class="flex items-center justify-between border-b border-edge px-4 py-3">
+          <div>
+            <h2 class="text-sm font-semibold text-content">Agent Mode</h2>
+            <p class="mt-1 text-xs text-content-tertiary">Agent mode lets Mongoose Studio inspect your data and validate scripts before it responds.</p>
+          </div>
+          <button
+            type="button"
+            @click="closeAgentSidebar"
+            class="rounded p-1.5 text-gray-400 hover:bg-muted hover:text-gray-600"
+            title="Hide agent sidebar"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div class="flex-1 overflow-y-auto px-4 py-4">
+          <div class="mb-3 text-xs font-semibold uppercase tracking-wider text-gray-400">Available Tools</div>
+          <ul role="list" class="space-y-3">
+            <li v-for="tool in agentTools" :key="tool.name" class="rounded-md border border-edge bg-surface px-3 py-3">
+              <div class="text-sm font-medium text-content">{{ tool.name }}</div>
+              <div class="mt-1 text-sm text-content-secondary">{{ tool.description }}</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </aside>
+  </div>
 
   <pro-upgrade-modal
     :show="showProUpgradeModal"

package/frontend/src/chat/chat.js

@@ -1,9 +1,12 @@
 'use strict';
 
 const api = require('../api');
+const agentToolMetadata = require('../../../backend/chatAgent/agentToolMetadata');
 const getCurrentDateTimeContext = require('../getCurrentDateTimeContext');
 const template = require('./chat.html');
 
+const AGENT_MODE_STORAGE_KEY = '_mongooseStudioAgentMode';
+
 module.exports = {
   template: template,
   props: ['threadId'],
@@ -12,12 +15,15 @@ module.exports = {
     sendingMessage: false,
     newMessage: '',
     chatThreadId: null,
+    draftAgentMode: false,
     chatThreads: [],
     chatMessages: [],
     hideSidebar: null,
+    showAgentSidebar: false,
     sharingThread: false,
     threadSearch: '',
-    showProUpgradeModal: false
+    showProUpgradeModal: false,
+    agentTools: agentToolMetadata
   }),
   methods: {
     async sendMessage() {
@@ -26,7 +32,9 @@ module.exports = {
         const content = this.newMessage;
         this.newMessage = '';
         if (!this.chatThreadId) {
-          const { chatThread } = await api.ChatThread.createChatThread();
+          const { chatThread } = await api.ChatThread.createChatThread({
+            agentMode: this.draftAgentMode
+          });
           this.chatThreads.unshift(chatThread);
           this.chatThreadId = chatThread._id;
           this.chatMessages = [];
@@ -40,11 +48,7 @@ module.exports = {
           role: 'user'
         });
 
-        this.$nextTick(() => {
-          if (this.$refs.messagesContainer) {
-            this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
-          }
-        });
+        this.scrollToBottom();
 
         const params = {
           chatThreadId: this.chatThreadId,
@@ -53,6 +57,7 @@ module.exports = {
         };
         let userChatMessage = null;
         let assistantChatMessage = null;
+        const toolCalls = [];
         for await (const event of api.ChatThread.streamChatMessage(params)) {
           if (event.chatMessage) {
             if (!userChatMessage) {
@@ -61,6 +66,7 @@ module.exports = {
             } else {
               const assistantChatMessageIndex = this.chatMessages.indexOf(assistantChatMessage);
               assistantChatMessage = event.chatMessage;
+              assistantChatMessage.toolCalls = toolCalls;
               if (assistantChatMessageIndex !== -1) {
                 this.chatMessages.splice(assistantChatMessageIndex, 1, assistantChatMessage);
               } else {
@@ -73,27 +79,44 @@ module.exports = {
                 thread.title = event.chatThread.title;
               }
             }
+          } else if (event.toolCall) {
+            toolCalls.push({ toolName: event.toolCall.toolName, input: event.toolCall.input, status: 'running' });
+            if (!assistantChatMessage) {
+              assistantChatMessage = {
+                _id: Math.random().toString(36).substr(2, 9),
+                content: '',
+                role: 'assistant',
+                toolCalls: [...toolCalls]
+              };
+              this.chatMessages.push(assistantChatMessage);
+              assistantChatMessage = this.chatMessages[this.chatMessages.length - 1];
+            } else {
+              assistantChatMessage.toolCalls = [...toolCalls];
+            }
+            this.scrollToBottom();
+          } else if (event.toolResult) {
+            const tc = toolCalls.find(t => t.toolName === event.toolResult.toolName && t.status === 'running');
+            if (tc) {
+              tc.status = 'done';
+            }
+            if (assistantChatMessage) {
+              assistantChatMessage.toolCalls = [...toolCalls];
+            }
+            this.scrollToBottom();
           } else if (event.textPart) {
             if (!assistantChatMessage) {
               assistantChatMessage = {
                 _id: Math.random().toString(36).substr(2, 9),
                 content: event.textPart,
-                role: 'assistant'
+                role: 'assistant',
+                toolCalls: [...toolCalls]
               };
               this.chatMessages.push(assistantChatMessage);
               assistantChatMessage = this.chatMessages[this.chatMessages.length - 1];
-              this.$nextTick(() => {
-                if (this.$refs.messagesContainer) {
-                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
-                }
-              });
+              this.scrollToBottom();
             } else {
               assistantChatMessage.content += event.textPart;
-              this.$nextTick(() => {
-                if (this.$refs.messagesContainer) {
-                  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
-                }
-              });
+              this.scrollToBottom();
             }
           } else if (event.message) {
             throw new Error(event.message);
@@ -112,10 +135,38 @@ module.exports = {
             this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
           }
         });
+      } catch (err) {
+        this.$toast.error(err?.message || 'Failed to send message.');
       } finally {
         this.sendingMessage = false;
       }
     },
+    async toggleAgentMode() {
+      const wasEnabled = this.isAgentModeEnabled;
+      const newValue = !this.isAgentModeEnabled;
+      this.draftAgentMode = newValue;
+      this.persistAgentModePreference(newValue);
+      if (!this.chatThreadId) {
+        this.maybeOpenAgentSidebar({ wasEnabled, isEnabled: newValue });
+        return;
+      }
+      const { chatThread } = await api.ChatThread.toggleAgentMode({
+        chatThreadId: this.chatThreadId,
+        agentMode: newValue
+      });
+      const idx = this.chatThreads.findIndex(t => t._id === chatThread._id);
+      if (idx !== -1) {
+        this.chatThreads.splice(idx, 1, chatThread);
+      }
+      this.maybeOpenAgentSidebar({ wasEnabled, isEnabled: newValue });
+    },
+    scrollToBottom() {
+      this.$nextTick(() => {
+        if (this.$refs.messagesContainer) {
+          this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
+        }
+      });
+    },
     handleEnter(ev) {
       if (!ev.shiftKey) {
         this.sendMessage();
@@ -135,7 +186,9 @@ module.exports = {
       return message.role === 'user' ? 'bg-muted' : '';
     },
     async createNewThread() {
-      const { chatThread } = await api.ChatThread.createChatThread();
+      const { chatThread } = await api.ChatThread.createChatThread({
+        agentMode: this.draftAgentMode
+      });
       this.$toast.success('Chat thread created!');
       this.$router.push('/chat/' + chatThread._id);
     },
@@ -177,12 +230,57 @@ module.exports = {
       } finally {
         this.sharingThread = false;
       }
+    },
+    isDesktopViewport() {
+      return typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(min-width: 1024px)').matches;
+    },
+    getAgentModePreference() {
+      if (typeof window === 'undefined') {
+        return false;
+      }
+      return window.localStorage?.getItem(AGENT_MODE_STORAGE_KEY) === 'true';
+    },
+    persistAgentModePreference(agentMode) {
+      if (typeof window !== 'undefined') {
+        window.localStorage?.setItem(AGENT_MODE_STORAGE_KEY, String(agentMode));
+      }
+    },
+    async syncCurrentThreadAgentMode() {
+      if (!this.chatThreadId || !this.currentThread || !this.draftAgentMode || this.currentThread.agentMode) {
+        return;
+      }
+      const { chatThread } = await api.ChatThread.toggleAgentMode({
+        chatThreadId: this.chatThreadId,
+        agentMode: true
+      });
+      const idx = this.chatThreads.findIndex(t => t._id === chatThread._id);
+      if (idx !== -1) {
+        this.chatThreads.splice(idx, 1, chatThread);
+      }
+    },
+    maybeOpenAgentSidebar({ wasEnabled, isEnabled }) {
+      if (!isEnabled) {
+        this.showAgentSidebar = false;
+        return;
+      }
+      if (wasEnabled || !this.isDesktopViewport()) {
+        return;
+      }
+      this.showAgentSidebar = true;
+    },
+    closeAgentSidebar() {
+      this.showAgentSidebar = false;
     }
   },
   computed: {
     currentThread() {
       return this.chatThreads.find(t => t._id === this.chatThreadId);
     },
+    isAgentModeEnabled() {
+      return this.currentThread?.agentMode ?? this.draftAgentMode;
+    },
     hasWorkspace() {
       return !!window.MONGOOSE_STUDIO_CONFIG.workspace?._id;
     },
@@ -200,10 +298,12 @@ module.exports = {
   async mounted() {
     window.pageState = this;
 
+    this.draftAgentMode = this.getAgentModePreference();
     this.chatThreadId = this.threadId;
     const { chatThreads } = await api.ChatThread.listChatThreads();
     this.chatThreads = chatThreads;
     if (this.chatThreadId) {
+      await this.syncCurrentThreadAgentMode();
       const { chatMessages } = await api.ChatThread.getChatThread({ chatThreadId: this.chatThreadId });
       this.chatMessages = chatMessages;
     }

package/frontend/src/create-document/create-document.js

@@ -53,6 +53,9 @@ module.exports = app => app.component('create-document', {
           documentData: this.aiOriginalDocument,
           currentDateTime: getCurrentDateTimeContext()
         })) {
+          if (event?.message) {
+            throw new Error(event.message);
+          }
           if (event?.textPart) {
             this.aiSuggestion += event.textPart;
           }

package/frontend/src/detail-objectid/detail-objectid.html

@@ -0,0 +1 @@
+<pre class="w-full whitespace-pre-wrap break-words font-mono text-sm text-content-secondary m-0">{{displayValue}}</pre>

package/frontend/src/detail-objectid/detail-objectid.js

@@ -0,0 +1,67 @@
+'use strict';
+
+const template = require('./detail-objectid.html');
+const ObjectId = require('mongoose/lib/types/objectid');
+
+module.exports = app => app.component('detail-objectid', {
+  template,
+  props: ['value', 'viewMode'],
+  emits: ['updated'],
+  watch: {
+    displayValue: {
+      immediate: true,
+      handler(val) {
+        this.$emit('updated', val);
+      }
+    }
+  },
+  computed: {
+    format() {
+      return this.viewMode || 'hex';
+    },
+    hexValue() {
+      if (this.value == null) {
+        return null;
+      }
+      if (typeof this.value === 'string') {
+        return this.value;
+      }
+      if (typeof this.value === 'object') {
+        if (typeof this.value.toHexString === 'function') {
+          return this.value.toHexString();
+        }
+        if (typeof this.value.$oid === 'string') {
+          return this.value.$oid;
+        }
+      }
+      return String(this.value);
+    },
+    objectIdDate() {
+      const hex = this.hexValue;
+      return new ObjectId(hex).getTimestamp();
+    },
+    displayValue() {
+      if (this.value == null) {
+        return String(this.value);
+      }
+
+      const hex = this.hexValue;
+      if (this.format === 'object_call') {
+        return `ObjectId('${hex}')`;
+      }
+      if (this.format === 'unix_seconds') {
+        if (!this.objectIdDate) {
+          return 'Invalid ObjectId';
+        }
+        return String(Math.floor(this.objectIdDate.getTime() / 1000));
+      }
+      if (this.format === 'date') {
+        if (!this.objectIdDate) {
+          return 'Invalid ObjectId';
+        }
+        return this.objectIdDate.toISOString();
+      }
+      return hex;
+    }
+  }
+});