@mongoosejs/studio 0.2.13 → 0.3.0

package/frontend/src/chat/chat.html

@@ -1,16 +1,18 @@
 <div class="flex" style="height: calc(100vh - 55px); height: calc(100dvh - 55px)">
   <button
     type="button"
-    class="fixed top-[65px] left-0 cursor-pointer bg-gray-100 rounded-r-md z-10 p-1 lg:hidden"
-    @click="hideSidebar = false"
-    v-show="hideSidebar !== false"
-    aria-label="Open chat history"
-    title="Open chat history">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-5 h-5" fill="#5f6368"><path d="M360-120v-720h80v720h-80Zm160-160v-400l200 200-200 200Z"/></svg>
+    class="fixed top-[65px] left-0 cursor-pointer bg-muted rounded-r-md p-1"
+    :class="hideSidebar === true ? 'z-[10001]' : hideSidebar === false ? 'z-10' : 'z-30 lg:hidden'"
+    @click="hideSidebar = hideSidebar === false ? true : false"
+    aria-label="Toggle chat history"
+    title="Toggle chat history">
+    <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 text-content-tertiary">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
+    </svg>
   </button>
   <button
-    class="fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-white"
-    :class="hasWorkspace ? 'text-gray-700 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed bg-gray-50'"
+    class="fixed top-[65px] right-4 z-10 p-2 rounded-md shadow bg-surface"
+    :class="hasWorkspace ? 'text-content-secondary hover:bg-muted' : 'text-gray-300 cursor-not-allowed bg-page'"
     @click="toggleShareThread"
     :disabled="!hasWorkspace || !chatThreadId || sharingThread"
     aria-label="Share thread with workspace"
@@ -21,41 +23,68 @@
   </button>
   <!-- Sidebar: Chat Threads -->
   <aside
-    class="bg-white border-r overflow-y-auto overflow-x-hidden h-full transition-transform duration-300 ease-in-out z-20 w-64 fixed lg:relative"
-    :class="hideSidebar === false ? 'translate-x-0' : hideSidebar === true ? '-translate-x-full lg:hidden' : '-translate-x-full lg:translate-x-0'"
-    style="z-index: 10000">
-    <div class="flex items-center border-b border-gray-100 w-64 overflow-x-hidden">
-      <div class="p-1 ml-2 font-bold">Chat Threads</div>
+    class="bg-page border-r overflow-hidden h-full transition-all duration-300 ease-in-out z-20 w-64 fixed lg:relative shrink-0 flex flex-col"
+    :class="hideSidebar === false ? 'translate-x-0' : hideSidebar === true ? '-translate-x-full lg:translate-x-0 lg:!w-0 lg:!border-r-0' : '-translate-x-full lg:translate-x-0'"
+    style="z-index: 1000">
+    <!-- Search + New Thread -->
+    <div class="p-3 shrink-0">
+      <div class="relative flex items-center gap-2">
+        <div class="relative flex-1">
+          <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+          </svg>
+          <input
+            v-model="threadSearch"
+            type="text"
+            placeholder="Search threads..."
+            @keydown.esc="threadSearch = ''"
+            class="w-full rounded-md border border-edge bg-surface py-1.5 pl-8 pr-3 text-sm text-content placeholder:text-gray-400 focus:border-edge-strong focus:outline-none focus:ring-1 focus:ring-gray-300"
+          />
+        </div>
+        <async-button
+          @click="createNewThread"
+          class="shrink-0 rounded-md border border-edge bg-surface p-1.5 text-content-tertiary hover:bg-muted hover:text-content-secondary"
+          title="New thread"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+          </svg>
+        </async-button>
+      </div>
+    </div>
+    <!-- Thread list (scrollable) -->
+    <nav class="flex-1 overflow-y-auto px-2 pb-2">
+      <div class="px-2 py-1 text-xs font-semibold text-gray-400 uppercase tracking-wider">Threads</div>
+      <div v-if="status === 'loaded' && filteredThreads.length === 0" class="px-2 py-2 text-sm text-content-tertiary">
+        <template v-if="threadSearch.trim()">No threads match "{{threadSearch}}"</template>
+        <template v-else>No threads yet</template>
+      </div>
+      <ul role="list">
+        <li
+          v-for="thread in filteredThreads"
+          :key="thread._id"
+          @click="selectThread(thread._id)"
+          class="rounded-md py-2 px-2 cursor-pointer mb-0.5"
+          :class="thread._id === chatThreadId ? 'bg-gray-200 text-content' : 'hover:bg-muted text-content-secondary'"
+        >
+          <div class="text-sm font-medium truncate">{{ thread.title || 'Untitled Thread' }}</div>
+          <div class="text-xs text-gray-400 mt-0.5">{{ formatThreadDate(thread.updatedAt || thread.createdAt) }}</div>
+        </li>
+      </ul>
+    </nav>
+    <!-- Bottom toolbar -->
+    <div class="shrink-0 border-t border-edge bg-page px-2 py-1.5 flex items-center gap-1">
       <button
+        type="button"
         @click="hideSidebar = true"
-        class="ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none lg:hidden"
-        aria-label="Close sidebar"
+        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" 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>
+        <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="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" />
+        </svg>
       </button>
     </div>
-    <div class="p-4 w-64">
-      <async-button
-        @click="createNewThread"
-        class="w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
-      >
-        Create New Thread
-      </async-button>
-    </div>
-    <div v-if="status === 'loaded' && chatThreads.length === 0" class="p-4 text-sm text-gray-700">
-      No threads yet
-    </div>
-    <ul v-if="status === 'loaded'" class="w-full">
-      <li
-        v-for="thread in chatThreads"
-        :key="thread._id"
-        @click="selectThread(thread._id)"
-        class="w-full p-2 hover:bg-ultramarine-100 cursor-pointer text-sm text-gray-700"
-        :class="{ 'bg-ultramarine-200 text-gray-900': thread._id === chatThreadId }"
-      >
-        {{ thread.title || 'Untitled Thread' }}
-      </li>
-    </ul>
   </aside>
 
   <!-- Main Chat Area -->
@@ -63,7 +92,7 @@
     <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-gray-900">
+          <p class="mx-4 font-bold text-content">
             Ask Mongoose Studio to analyze your data or generate a script
           </p>
         </div>

package/frontend/src/chat/chat.js

@@ -14,7 +14,8 @@ module.exports = {
     chatThreads: [],
     chatMessages: [],
     hideSidebar: null,
-    sharingThread: false
+    sharingThread: false,
+    threadSearch: ''
   }),
   methods: {
     async sendMessage() {
@@ -125,13 +126,29 @@ module.exports = {
       this.$router.push('/chat/' + threadId);
     },
     styleForMessage(message) {
-      return message.role === 'user' ? 'bg-gray-100' : '';
+      return message.role === 'user' ? 'bg-muted' : '';
     },
     async createNewThread() {
       const { chatThread } = await api.ChatThread.createChatThread();
       this.$toast.success('Chat thread created!');
       this.$router.push('/chat/' + chatThread._id);
     },
+    formatThreadDate(dateStr) {
+      if (!dateStr) return '';
+      const date = new Date(dateStr);
+      const now = new Date();
+      const diff = now - date;
+      const oneDay = 24 * 60 * 60 * 1000;
+      const isToday = date.toDateString() === now.toDateString();
+      const isYesterday = new Date(now - oneDay).toDateString() === date.toDateString();
+      const timeStr = date.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+      if (isToday) return 'Today, ' + timeStr;
+      if (isYesterday) return 'Yesterday, ' + timeStr;
+      if (diff < 7 * oneDay) {
+        return date.toLocaleDateString(undefined, { weekday: 'long' }) + ', ' + timeStr;
+      }
+      return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ', ' + timeStr;
+    },
     async toggleShareThread() {
       if (!this.chatThreadId || !this.hasWorkspace) {
         return;
@@ -165,6 +182,13 @@ module.exports = {
     },
     sharedWithWorkspace() {
       return !!this.currentThread?.sharingOptions?.sharedWithWorkspace;
+    },
+    filteredThreads() {
+      const search = this.threadSearch.trim().toLowerCase();
+      if (!search) {
+        return this.chatThreads;
+      }
+      return this.chatThreads.filter(t => (t.title || 'Untitled Thread').toLowerCase().includes(search));
     }
   },
   async mounted() {

package/frontend/src/clone-document/clone-document.html

@@ -1,8 +1,13 @@
 <div>
     <div class="mb-2">
-      <textarea class="border border-gray-200 p-2 h-[300px] w-full" ref="codeEditor"></textarea>
+      <ace-editor
+        v-model="documentData"
+        mode="javascript"
+        :line-numbers="true"
+        class="border border-edge h-[300px] w-full"
+      />
     </div>
-    <button @click="cloneDocument()" class="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-teal-600">Submit</button>
+    <button @click="cloneDocument()" class="rounded-md bg-primary px-2.5 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Submit</button>
     <div v-if="errors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">
       <div class="flex">
         <div class="flex-shrink-0">

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

@@ -22,13 +22,12 @@ module.exports = app => app.component('clone-document', {
   data: function() {
     return {
       documentData: '',
-      editor: null,
       errors: []
     };
   },
   methods: {
     async cloneDocument() {
-      const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
+      const data = EJSON.serialize(eval(`(${this.documentData})`));
       try {
         const { doc } = await api.Model.createDocument({ model: this.currentModel, data });
         this.errors.length = 0;
@@ -64,11 +63,5 @@ module.exports = app => app.component('clone-document', {
     }
 
     this.documentData = JSON.stringify(filteredDoc, null, 2);
-    this.$refs.codeEditor.value = this.documentData;
-    this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
-      mode: 'javascript',
-      lineNumbers: true,
-      smartIndent: false
-    });
   }
 });

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

@@ -1,19 +1,24 @@
 <div>
-  <div class="mt-4 text-gray-900 font-semibold">
+  <div class="mt-4 text-content font-semibold">
     Create New Dashboard
   </div>
   <div class="mt-4">
-    <label class="block text-sm font-medium leading-6 text-gray-900">Title</label>
+    <label class="block text-sm font-medium leading-6 text-content">Title</label>
     <div class="mt-2">
       <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">
-        <input type="text" v-model="title" 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="ACME-123">
+        <input type="text" v-model="title" class="outline-none block flex-1 border-0 bg-transparent py-1.5 pl-1 text-content placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" placeholder="ACME-123">
       </div>
     </div>
   </div>
   <div class="my-4">
-    <label class="block text-sm font-medium leading-6 text-gray-900">Code</label>
-    <div class="border border-gray-200">
-      <textarea class="p-2 h-[300px] w-full" ref="codeEditor"></textarea>
+    <label class="block text-sm font-medium leading-6 text-content">Code</label>
+    <div class="border border-edge">
+      <ace-editor
+        v-model="code"
+        mode="javascript"
+        :line-numbers="true"
+        class="h-[300px] w-full"
+      />
     </div>
   </div>
   <async-button

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

@@ -15,7 +15,6 @@ module.exports = app => app.component('create-dashboard', {
   },
   methods: {
     async createDashboard() {
-      this.code = this._editor.getValue();
       const { dashboard } = await api.Dashboard.createDashboard({ code: this.code, title: this.title }).catch(err => {
         if (err.response?.data?.message) {
           console.log(err.response.data);
@@ -31,11 +30,5 @@ module.exports = app => app.component('create-dashboard', {
       this.$toast.success('Dashboard created!');
       this.$emit('close', dashboard);
     }
-  },
-  mounted: function() {
-    this._editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
-      mode: 'javascript',
-      lineNumbers: true
-    });
   }
 });

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

@@ -1,23 +1,23 @@
-<div>
+<div class="px-1">
   <div class="mb-4">
-    <label class="block text-sm font-bold text-gray-900">AI Mode</label>
+    <label class="block text-sm font-bold text-content">AI Mode</label>
     <div class="mt-2 flex flex-col gap-2 sm:flex-row sm:items-center">
       <input
         v-model="aiPrompt"
         type="text"
         placeholder="Describe the document you'd like to create..."
         @keydown.enter.prevent="requestAiSuggestion()"
-        class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-ultramarine-500 focus:outline-none focus:ring-1 focus:ring-ultramarine-500"
+        class="w-full rounded-md border border-edge-strong px-3 py-2 text-sm shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
       />
       <button
         @click="requestAiSuggestion()"
         :disabled="aiStreaming || !aiPrompt.trim()"
-        class="inline-flex items-center justify-center rounded-md bg-ultramarine-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 disabled:cursor-not-allowed disabled:opacity-50"
+        class="inline-flex items-center justify-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover disabled:cursor-not-allowed disabled:opacity-50"
       >
         {{ aiStreaming ? 'Generating...' : 'Generate' }}
       </button>
     </div>
-    <p class="mt-2 text-xs text-gray-500">Use AI to draft the document. You can accept or reject the suggestion once it finishes.</p>
+    <p class="mt-2 text-xs text-content-tertiary">Use AI to draft the document. You can accept or reject the suggestion once it finishes.</p>
     <div v-if="aiSuggestionReady" class="mt-3 flex flex-wrap gap-2">
       <button
         @click="acceptAiSuggestion()"
@@ -27,17 +27,23 @@
       </button>
       <button
         @click="rejectAiSuggestion()"
-        class="rounded-md bg-gray-100 px-2.5 py-1.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-200"
+        class="rounded-md bg-muted px-2.5 py-1.5 text-sm font-semibold text-content-secondary shadow-sm hover:bg-muted"
       >
         Reject suggestion
       </button>
     </div>
   </div>
   <div class="mb-2">
-    <label class="block text-sm font-bold text-gray-900">Document to Create</label>
-    <textarea class="border border-gray-200 p-2 h-[300px] w-full mt-2" ref="codeEditor"></textarea>
+    <label class="block text-sm font-bold text-content">Document to Create</label>
+    <ace-editor
+      ref="codeEditor"
+      v-model="documentData"
+      mode="javascript"
+      :line-numbers="true"
+      class="h-[300px] w-full mt-2"
+    />
   </div>
-  <button @click="createDocument()" class="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-teal-600">Submit</button>
+  <button @click="createDocument()" class="rounded-md bg-primary px-2.5 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600">Submit</button>
   <div v-if="errors.length > 0" class="rounded-md bg-red-50 p-4 mt-1">
     <div class="flex">
       <div class="flex-shrink-0">

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

@@ -22,7 +22,6 @@ module.exports = app => app.component('create-document', {
   data: function() {
     return {
       documentData: '',
-      editor: null,
       errors: [],
       aiPrompt: '',
       aiSuggestion: '',
@@ -41,7 +40,7 @@ module.exports = app => app.component('create-document', {
         return;
       }
 
-      this.aiOriginalDocument = this.editor.getValue();
+      this.aiOriginalDocument = this.documentData;
       this.aiSuggestion = '';
       this.aiSuggestionReady = false;
       this.aiStreaming = true;
@@ -56,10 +55,10 @@ module.exports = app => app.component('create-document', {
             this.aiSuggestion += event.textPart;
           }
         }
-        this.editor.setValue(this.aiSuggestion);
+        this.$refs.codeEditor.setValue(this.aiSuggestion);
         this.aiSuggestionReady = true;
       } catch (err) {
-        this.editor.setValue(this.aiOriginalDocument);
+        this.$refs.codeEditor.setValue(this.aiOriginalDocument);
         this.$toast.error('Failed to generate a document suggestion.');
         throw err;
       } finally {
@@ -72,13 +71,13 @@ module.exports = app => app.component('create-document', {
       this.aiOriginalDocument = '';
     },
     rejectAiSuggestion() {
-      this.editor.setValue(this.aiOriginalDocument);
+      this.$refs.codeEditor.setValue(this.aiOriginalDocument);
       this.aiSuggestionReady = false;
       this.aiSuggestion = '';
       this.aiOriginalDocument = '';
     },
     async createDocument() {
-      const data = EJSON.serialize(eval(`(${this.editor.getValue()})`));
+      const data = EJSON.serialize(eval(`(${this.documentData})`));
       try {
         const { doc } = await api.Model.createDocument({ model: this.currentModel, data });
         this.errors.length = 0;
@@ -104,11 +103,5 @@ module.exports = app => app.component('create-document', {
       this.documentData += `  ${requiredPaths[i].path}: ${isLast ? '' : ','}\n`;
     }
     this.documentData += '}';
-    this.$refs.codeEditor.value = this.documentData;
-    this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
-      mode: 'javascript',
-      lineNumbers: true,
-      smartIndent: false
-    });
   }
 });

package/frontend/src/dashboard/dashboard.html

@@ -1,16 +1,17 @@
-<div class="dashboard px-1">
+<div class="dashboard-root">
+  <div class="dashboard px-1">
   <div v-if="status === 'loading'" class="max-w-5xl mx-auto text-center">
     <img src="images/loader.gif" class="inline mt-10">
   </div>
   <div v-if="dashboard && status !== 'loading'" class="max-w-5xl mx-auto">
     <div class="flex items-center w-full" v-if="!showEditor">
-      <h2 class="mt-4 mb-4 text-gray-900 font-semibold text-xl grow shrink">{{title}}</h2>
+      <h2 class="mt-4 mb-4 text-content font-semibold text-xl grow shrink">{{title}}</h2>
       <div class="flex gap-2">
         <button
           @click="showEditor = true"
           type="button"
           :disabled="status === 'evaluating'"
-          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">
+          class="flex items-center rounded-md bg-primary px-2.5 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:bg-gray-600">
           <img src="images/edit.svg" class="inline h-[1.25em] mr-1" /> Edit
         </button>
 
@@ -18,7 +19,7 @@
           @click="evaluateDashboard"
           type="button"
           :disabled="status === 'evaluating'"
-          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"
+          class="flex items-center rounded-md bg-primary px-4 py-1.5 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:bg-gray-600"
         >
           <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>
           Evaluate
@@ -27,7 +28,7 @@
           <button
             type="button"
             @click.stop="toggleActionsMenu"
-            class="flex items-center rounded-md bg-gray-100 px-3 py-1.5 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500"
+            class="flex items-center rounded-md bg-muted px-3 py-1.5 text-sm font-semibold text-content-secondary shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500"
             aria-haspopup="true"
             :aria-expanded="showActionsMenu"
           >
@@ -38,7 +39,7 @@
           </button>
           <div
             v-if="showActionsMenu"
-            class="absolute right-0 mt-2 w-44 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 z-20"
+            class="absolute right-0 mt-2 w-44 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black/5 z-20"
             role="menu"
             aria-label="Dashboard actions"
           >
@@ -46,7 +47,7 @@
               type="button"
               :disabled="startingChat"
               @click.stop="startChatWithDashboard"
-              class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 hover:bg-ultramarine-100 disabled:cursor-not-allowed disabled:text-gray-400"
+              class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-content-secondary hover:bg-primary-subtle disabled:cursor-not-allowed disabled:text-gray-400"
               role="menuitem"
             >
               <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -61,12 +62,12 @@
     <div v-if="!showEditor" class="mt-4 mb-4">
       <div v-if="dashboardResults.length === 0">
         <div class="flex flex-col items-center justify-center py-8">
-          <p class="text-gray-700 text-base mb-4">This dashboard hasn't been evaluated yet.</p>
+          <p class="text-content-secondary text-base mb-4">This dashboard hasn't been evaluated yet.</p>
           <async-button
             @click="evaluateDashboard"
             type="button"
             :disabled="status === 'evaluating'"
-            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"
+            class="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:bg-gray-600"
           >
             Evaluate Dashboard
           </async-button>
@@ -74,7 +75,7 @@
       </div>
       <div v-else-if="dashboardResult">
         <div class="relative">
-          <div v-if="status === 'evaluating'" class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-60 z-10 flex flex-col gap-2">
+          <div v-if="status === 'evaluating'" class="absolute inset-0 flex items-center justify-center bg-surface bg-opacity-60 z-10 flex flex-col gap-2">
             <div>Evaluating Dashboard...</div>
             <img src="images/loader.gif" class="h-12 w-12" alt="Loading..." />
           </div>
@@ -116,9 +117,9 @@
   <div v-if="!dashboard && status !== 'loading'">
     No dashboard with the given id could be found.
   </div>
-</div>
+  </div>
 
-<modal
+  <modal
   v-if="showDetailModal"
   containerClass="!h-[90vh] !w-[90vw]"
   role="dialog"
@@ -138,3 +139,4 @@
     </div>
   </template>
 </modal>
+</div>

package/frontend/src/dashboard/dashboard.js

@@ -37,14 +37,22 @@ module.exports = {
     async evaluateDashboard() {
       this.status = 'evaluating';
       try {
-        const { dashboard, dashboardResult } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
+        const { dashboard, dashboardResult, result, error } = await api.Dashboard.getDashboard({ dashboardId: this.dashboardId, evaluate: true });
         this.dashboard = dashboard;
-        this.code = this.dashboard.code;
-        this.title = this.dashboard.title;
-        this.description = this.dashboard.description ?? '';
+        if (dashboard) {
+          this.code = this.dashboard.code;
+          this.title = this.dashboard.title;
+          this.description = this.dashboard.description ?? '';
+        }
         if (dashboardResult) {
           this.dashboardResults.unshift(dashboardResult);
+        } else if (result !== undefined) {
+          this.dashboardResults.unshift({ result, finishedEvaluatingAt: new Date() });
+        } else if (error) {
+          this.dashboardResults.unshift({ error: { message: error.message || 'Evaluation failed' }, finishedEvaluatingAt: new Date() });
         }
+      } catch (err) {
+        this.$toast.error(err?.response?.data?.message || err?.message || 'Dashboard evaluation failed');
       } finally {
         this.status = 'loaded';
       }

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

@@ -1,21 +1,27 @@
-<div class="p-4 bg-gray-100 rounded-lg shadow-lg">
+<div class="dashboard-editor p-4 bg-muted rounded-lg shadow-lg">
     <div v-show="status === 'loading'" class="max-w-5xl mx-auto text-center">
         <img src="images/loader.gif" class="inline mt-10">
     </div>
     <div v-show="status !== 'loading'" class="flex flex-col gap-4">
         <div>
-          <input v-model="title" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Title"/>
+          <input v-model="title" class="w-full p-2 border border-edge-strong rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Title"/>
         </div>
         <div>
-          <textarea v-model="description" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="Description">{{description}}</textarea>
+          <textarea v-model="description" class="w-full p-2 border border-edge-strong rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="Description">{{description}}</textarea>
         </div>
-        <div class="border border-gray-300 rounded-md">
-          <textarea ref="codeEditor" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="6">{{code}}</textarea>
-          <textarea v-model="chatMessage" class="w-full p-2"></textarea>
+        <div class="border border-edge-strong rounded-md">
+          <ace-editor
+            ref="codeEditor"
+            v-model="editCode"
+            mode="javascript"
+            :line-numbers="true"
+            :wrap="true"
+            class="w-full min-h-[200px]"
+          />
         </div>
         <div class="flex space-x-2">
           <async-button @click="updateCode" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">Submit</async-button>
-          <button @click="closeEditor" 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-500">Cancel</button>
+          <button @click="closeEditor" class="px-4 py-2 bg-page0 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">Cancel</button>
         </div>
     </div>
 </div>

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

@@ -10,11 +10,16 @@ module.exports = app => app.component('edit-dashboard', {
   data: function() {
     return {
       status: 'loaded',
-      editor: null,
       title: '',
-      description: ''
+      description: '',
+      editCode: ''
     };
   },
+  mounted() {
+    this.editCode = this.code || '';
+    this.description = this.currentDescription;
+    this.title = this.currentTitle;
+  },
   methods: {
     closeEditor() {
       this.$emit('close');
@@ -22,15 +27,19 @@ module.exports = app => app.component('edit-dashboard', {
     async updateCode() {
       this.status = 'loading';
       try {
+        const codeToSave = this.$refs.codeEditor ? this.$refs.codeEditor.getValue() : this.editCode;
         const { doc } = await api.Dashboard.updateDashboard({
           dashboardId: this.dashboardId,
-          code: this.editor.getValue(),
+          code: codeToSave,
           title: this.title,
           description: this.description,
           evaluate: false
         });
         this.$emit('update', { doc });
-        this.editor.setValue(doc.code);
+        this.editCode = doc.code;
+        if (this.$refs.codeEditor) {
+          this.$refs.codeEditor.setValue(doc.code);
+        }
         this.$toast.success('Dashboard updated!');
         this.closeEditor();
       } catch (err) {
@@ -39,22 +48,5 @@ module.exports = app => app.component('edit-dashboard', {
         this.status = 'loaded';
       }
     }
-  },
-  mounted: async function() {
-    this.editor = CodeMirror.fromTextArea(this.$refs.codeEditor, {
-      mode: 'javascript',
-      lineNumbers: true,
-      indentUnit: 4,
-      smartIndent: true,
-      tabsize: 4,
-      indentWithTabs: true,
-      cursorBlinkRate: 300,
-      lineWrapping: true,
-      showCursorWhenSelecting: true
-    });
-    // this.editor.focus();
-    // this.editor.refresh(); // if anything weird happens on load, this usually fixes it. However, this breaks it in this case.
-    this.description = this.currentDescription;
-    this.title = this.currentTitle;
   }
 });