@mongoosejs/studio 0.2.11 → 0.2.13

package/frontend/public/tw.css

@@ -647,10 +647,22 @@ video {
   left: -0.75rem;
 }
 
+.bottom-4 {
+  bottom: 1rem;
+}
+
+.bottom-full {
+  bottom: 100%;
+}
+
 .left-0 {
   left: 0px;
 }
 
+.left-4 {
+  left: 1rem;
+}
+
 .left-full {
   left: 100%;
 }
@@ -1002,6 +1014,10 @@ video {
   height: 1.25em;
 }
 
+.h-\[240px\] {
+  height: 240px;
+}
+
 .h-\[300px\] {
   height: 300px;
 }
@@ -1058,10 +1074,6 @@ video {
   width: 12rem !important;
 }
 
-.\!w-64 {
-  width: 16rem !important;
-}
-
 .\!w-\[90vw\] {
   width: 90vw !important;
 }
@@ -1122,6 +1134,10 @@ video {
   width: 2rem;
 }
 
+.w-\[240px\] {
+  width: 240px;
+}
+
 .w-\[50\%\] {
   width: 50%;
 }
@@ -1138,6 +1154,10 @@ video {
   min-width: 140px;
 }
 
+.min-w-\[220px\] {
+  min-width: 220px;
+}
+
 .min-w-\[80px\] {
   min-width: 80px;
 }
@@ -1150,6 +1170,10 @@ video {
   max-width: 28rem !important;
 }
 
+.max-w-4xl {
+  max-width: 56rem;
+}
+
 .max-w-5xl {
   max-width: 64rem;
 }
@@ -1206,6 +1230,11 @@ video {
   transform-origin: top right;
 }
 
+.-translate-x-full {
+  --tw-translate-x: -100%;
+  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));
+}
+
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
   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));
@@ -1221,6 +1250,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));
 }
 
+.translate-y-1 {
+  --tw-translate-y: 0.25rem;
+  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-0 {
   --tw-rotate: 0deg;
   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));
@@ -1348,6 +1382,10 @@ video {
   gap: 1rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .gap-8 {
   gap: 2rem;
 }
@@ -1563,6 +1601,10 @@ video {
   border-bottom-width: 4px;
 }
 
+.border-l-0 {
+  border-left-width: 0px;
+}
+
 .border-l-\[3px\] {
   border-left-width: 3px;
 }
@@ -1636,6 +1678,11 @@ video {
   border-color: rgb(241 245 249 / var(--tw-border-opacity));
 }
 
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+}
+
 .border-transparent {
   border-color: transparent;
 }
@@ -1645,6 +1692,11 @@ video {
   border-color: rgb(63 83 255 / var(--tw-border-opacity));
 }
 
+.border-ultramarine-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(24 35 255 / var(--tw-border-opacity));
+}
+
 .border-yellow-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 240 138 / var(--tw-border-opacity));
@@ -1774,6 +1826,11 @@ video {
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
 }
 
+.bg-green-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+}
+
 .bg-green-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(240 253 244 / var(--tw-bg-opacity));
@@ -1794,6 +1851,11 @@ video {
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
@@ -1819,6 +1881,11 @@ video {
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
+.bg-slate-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+}
+
 .bg-slate-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));
@@ -1839,6 +1906,11 @@ video {
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
 }
 
+.bg-slate-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
+}
+
 .bg-teal-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(0 168 165 / var(--tw-bg-opacity));
@@ -1883,6 +1955,11 @@ video {
   background-color: rgb(254 249 195 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+}
+
 .bg-yellow-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
@@ -2062,6 +2139,11 @@ video {
   padding-bottom: 2rem;
 }
 
+.py-\[2px\] {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
 .pb-16 {
   padding-bottom: 4rem;
 }
@@ -2198,10 +2280,6 @@ video {
   font-weight: 500;
 }
 
-.font-normal {
-  font-weight: 400;
-}
-
 .font-semibold {
   font-weight: 600;
 }
@@ -2319,6 +2397,11 @@ video {
   color: rgb(22 101 52 / var(--tw-text-opacity));
 }
 
+.text-green-900 {
+  --tw-text-opacity: 1;
+  color: rgb(20 83 45 / var(--tw-text-opacity));
+}
+
 .text-purple-600 {
   --tw-text-opacity: 1;
   color: rgb(147 51 234 / var(--tw-text-opacity));
@@ -2344,6 +2427,11 @@ video {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
+.text-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity));
+}
+
 .text-sky-600 {
   --tw-text-opacity: 1;
   color: rgb(2 132 199 / var(--tw-text-opacity));
@@ -2359,11 +2447,26 @@ video {
   color: rgb(7 89 133 / var(--tw-text-opacity));
 }
 
+.text-slate-200 {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity));
+}
+
+.text-slate-300 {
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity));
+}
+
 .text-slate-400 {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }
 
+.text-slate-50 {
+  --tw-text-opacity: 1;
+  color: rgb(248 250 252 / var(--tw-text-opacity));
+}
+
 .text-slate-500 {
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity));
@@ -2384,6 +2487,11 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
+.text-slate-900 {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+
 .text-ultramarine-600 {
   --tw-text-opacity: 1;
   color: rgb(24 35 255 / var(--tw-text-opacity));
@@ -2424,6 +2532,11 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
+.text-yellow-900 {
+  --tw-text-opacity: 1;
+  color: rgb(113 63 18 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -2556,6 +2669,11 @@ video {
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
+.ring-gray-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
+}
+
 .ring-gray-600\/20 {
   --tw-ring-color: rgb(75 85 99 / 0.2);
 }
@@ -2569,6 +2687,11 @@ video {
   --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity));
 }
 
+.ring-green-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
+}
+
 .ring-green-600\/20 {
   --tw-ring-color: rgb(22 163 74 / 0.2);
 }
@@ -2578,11 +2701,26 @@ video {
   --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
+.ring-red-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
+}
+
+.ring-slate-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity));
+}
+
 .ring-yellow-400 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(250 204 21 / var(--tw-ring-opacity));
 }
 
+.ring-yellow-500 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity));
+}
+
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
@@ -3258,6 +3396,28 @@ video {
   opacity: 0.5;
 }
 
+.group:focus-within .group-focus-within\:pointer-events-auto {
+  pointer-events: auto;
+}
+
+.group:focus-within .group-focus-within\:translate-y-0 {
+  --tw-translate-y: 0px;
+  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));
+}
+
+.group:focus-within .group-focus-within\:opacity-100 {
+  opacity: 1;
+}
+
+.group:hover .group-hover\:pointer-events-auto {
+  pointer-events: auto;
+}
+
+.group:hover .group-hover\:translate-y-0 {
+  --tw-translate-y: 0px;
+  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));
+}
+
 .group:hover .group-hover\:text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -3394,6 +3554,10 @@ video {
     gap: 1.5rem;
   }
 
+  .md\:p-8 {
+    padding: 2rem;
+  }
+
   .md\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -3410,12 +3574,12 @@ video {
     margin-right: -2rem;
   }
 
-  .lg\:w-48 {
-    width: 12rem;
+  .lg\:hidden {
+    display: none;
   }
 
-  .lg\:w-64 {
-    width: 16rem;
+  .lg\:w-48 {
+    width: 12rem;
   }
 
   .lg\:max-w-\[calc\(100vw-15rem\)\] {
@@ -3426,6 +3590,11 @@ video {
     max-width: calc(100vw - 20rem);
   }
 
+  .lg\:translate-x-0 {
+    --tw-translate-x: 0px;
+    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));
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;

package/frontend/src/api.js

@@ -135,6 +135,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         yield { document: doc };
       }
     },
+    getEstimatedDocumentCounts: function getEstimatedDocumentCounts() {
+      return client.post('', { action: 'Model.getEstimatedDocumentCounts' }).then(res => res.data);
+    },
     streamDocumentChanges: async function* streamDocumentChanges(params, options = {}) {
       const pollIntervalMs = 5000;
       while (!options.signal?.aborted) {
@@ -385,6 +388,9 @@ if (window.MONGOOSE_STUDIO_CONFIG.isLambda) {
         }
       }
     },
+    getEstimatedDocumentCounts: function getEstimatedDocumentCounts() {
+      return client.post('/Model/getEstimatedDocumentCounts', {}).then(res => res.data);
+    },
     streamDocumentChanges: async function* streamDocumentChanges(params, options = {}) {
       const accessToken = window.localStorage.getItem('_mongooseStudioAccessToken') || null;
       const url = window.MONGOOSE_STUDIO_CONFIG.baseURL + '/Model/streamDocumentChanges?' + new URLSearchParams(params).toString();

package/frontend/src/chat/chat.html

@@ -1,10 +1,13 @@
 <div class="flex" style="height: calc(100vh - 55px); height: calc(100dvh - 55px)">
-  <div
-    class="fixed top-[65px] cursor-pointer bg-gray-100 rounded-r-md z-10"
+  <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">
-    <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>
-  </div>
+    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>
+  </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'"
@@ -17,12 +20,15 @@
     <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>
   <!-- Sidebar: Chat Threads -->
-  <aside class="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' : ''">
+  <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>
       <button
         @click="hideSidebar = true"
-        class="ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none"
+        class="ml-auto mr-2 p-2 rounded hover:bg-gray-200 focus:outline-none lg:hidden"
         aria-label="Close 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>

package/frontend/src/document/document.html

@@ -289,5 +289,31 @@
       @close="closeScriptDrawer"
       @refresh="handleScriptRefresh"
     ></execute-script>
+    <div
+      v-if="keyboardShortcuts.length > 0"
+      class="fixed bottom-4 left-4 z-40 group"
+    >
+      <button
+        type="button"
+        aria-label="Keyboard shortcuts"
+        title="Keyboard shortcuts"
+        class="rounded-full border border-slate-300 bg-white p-2 text-slate-700 shadow-sm transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-ultramarine-500"
+      >
+        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+          <rect x="2.5" y="6.5" width="19" height="11" rx="2" stroke-width="1.5"></rect>
+          <path d="M6 10.5h1.5M9 10.5h1.5M12 10.5h1.5M15 10.5h1.5M18 10.5h.01M6 13.5h1.5M9 13.5h6M16.5 13.5h1.5" stroke-width="1.5" stroke-linecap="round"></path>
+        </svg>
+      </button>
+      <div class="pointer-events-none absolute left-0 bottom-full mb-2 min-w-[220px] translate-y-1 rounded-lg bg-slate-900 px-3 py-2.5 text-slate-200 opacity-0 shadow-xl transition-all duration-150 group-hover:pointer-events-auto group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:translate-y-0 group-focus-within:opacity-100">
+        <div
+          v-for="shortcut in keyboardShortcuts"
+          :key="shortcut.command + shortcut.description"
+          class="flex items-center justify-between gap-3 text-xs"
+        >
+          <span class="font-mono font-semibold text-slate-50">{{shortcut.command}}</span>
+          <span class="text-slate-300">{{shortcut.description}}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </div>

package/frontend/src/document/document.js

@@ -40,11 +40,17 @@ module.exports = app => app.component('document', {
   }),
   async mounted() {
     window.pageState = this;
+    if (typeof window !== 'undefined' && window.addEventListener) {
+      window.addEventListener('keydown', this.handleSaveShortcut);
+    }
     // Store query parameters from the route (preserved from models page)
     this.previousQuery = Object.assign({}, this.$route.query);
     await this.refreshDocument({ force: true, source: 'initial' });
   },
-  beforeDestroy() {
+  beforeUnmount() {
+    if (typeof window !== 'undefined' && window.removeEventListener) {
+      window.removeEventListener('keydown', this.handleSaveShortcut);
+    }
     this.stopAutoRefresh();
   },
   computed: {
@@ -74,6 +80,13 @@ module.exports = app => app.component('document', {
     canEdit() {
       return this.canManipulate && this.viewMode === 'fields';
     },
+    keyboardShortcuts() {
+      const shortcuts = [];
+      if (this.editting && this.canManipulate) {
+        shortcuts.push({ command: 'Ctrl + S', description: 'Save document' });
+      }
+      return shortcuts;
+    },
     isLambda() {
       return !!window?.MONGOOSE_STUDIO_CONFIG?.isLambda;
     }
@@ -86,6 +99,19 @@ module.exports = app => app.component('document', {
     }
   },
   methods: {
+    handleSaveShortcut(event) {
+      const key = typeof event?.key === 'string' ? event.key.toLowerCase() : '';
+      const isSaveShortcut = (event.ctrlKey || event.metaKey) && key === 's';
+      if (!isSaveShortcut) {
+        return;
+      }
+      if (!this.editting || !this.canManipulate) {
+        return;
+      }
+
+      event.preventDefault();
+      this.shouldShowConfirmModal = true;
+    },
     cancelEdit() {
       this.changes = {};
       this.editting = false;

package/frontend/src/models/models.html

@@ -20,9 +20,15 @@
             <li v-for="model in models">
               <router-link
                 :to="'/model/' + model"
-                class="block truncate rounded-md py-2 pr-2 pl-2 text-sm text-gray-700"
+                class="flex items-center gap-2 rounded-md py-2 pr-2 pl-2 text-sm text-gray-700"
                 :class="model === currentModel ? 'bg-ultramarine-100 font-bold text-gray-900' : 'hover:bg-ultramarine-50'">
-                {{model}}
+                <span class="truncate">{{model}}</span>
+                <span
+                  v-if="modelDocumentCounts && modelDocumentCounts[model] !== undefined && model !== currentModel"
+                  class="ml-auto text-xs text-gray-500 bg-gray-100 rounded-md px-1 py-[2px]"
+                >
+                  {{formatCompactCount(modelDocumentCounts[model])}}
+                </span>
               </router-link>
             </li>
           </ul>

package/frontend/src/models/models.js

@@ -20,6 +20,7 @@ module.exports = app => app.component('models', {
   data: () => ({
     models: [],
     currentModel: null,
+    modelDocumentCounts: {},
     documents: [],
     schemaPaths: [],
     filteredPaths: [],
@@ -84,6 +85,7 @@ module.exports = app => app.component('models', {
     document.addEventListener('click', this.onOutsideActionsMenuClick, true);
     const { models, readyState } = await api.Model.listModels();
     this.models = models;
+    await this.loadModelCounts();
     if (this.currentModel == null && this.models.length > 0) {
       this.currentModel = this.models[0];
     }
@@ -589,6 +591,25 @@ module.exports = app => app.component('models', {
 
       return value.toLocaleString();
     },
+    formatCompactCount(value) {
+      if (typeof value !== 'number') {
+        return '—';
+      }
+      if (value < 1000) {
+        return `${value}`;
+      }
+      const formatValue = (number, suffix) => {
+        const rounded = (Math.round(number * 10) / 10).toFixed(1).replace(/\.0$/, '');
+        return `${rounded}${suffix}`;
+      };
+      if (value < 1000000) {
+        return formatValue(value / 1000, 'k');
+      }
+      if (value < 1000000000) {
+        return formatValue(value / 1000000, 'M');
+      }
+      return formatValue(value / 1000000000, 'B');
+    },
     checkIndexLocation(indexName) {
       if (this.schemaIndexes.find(x => x.name == indexName) && this.mongoDBIndexes.find(x => x.name == indexName)) {
         return 'text-gray-500';
@@ -842,6 +863,19 @@ module.exports = app => app.component('models', {
       } else {
         this.selectMultiple = true;
       }
+    },
+    async loadModelCounts() {
+      if (!Array.isArray(this.models) || this.models.length === 0) {
+        return;
+      }
+      try {
+        const { counts } = await api.Model.getEstimatedDocumentCounts();
+        if (counts && typeof counts === 'object') {
+          this.modelDocumentCounts = counts;
+        }
+      } catch (err) {
+        console.error('Failed to load model document counts', err);
+      }
     }
   }
 });

package/frontend/src/navbar/navbar.js

@@ -42,7 +42,7 @@ module.exports = app => app.component('navbar', {
       return ['chat index', 'chat'].includes(this.$route.name);
     },
     taskView() {
-      return ['tasks'].includes(this.$route.name);
+      return ['tasks', 'taskByName', 'taskSingle'].includes(this.$route.name);
     },
     routeName() {
       return this.$route.name;

package/frontend/src/routes.js

@@ -2,14 +2,14 @@
 
 // Role-based access control configuration
 const roleAccess = {
-  owner: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat'],
-  admin: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat'],
-  member: ['root', 'model', 'document', 'dashboards', 'dashboard', 'chat'],
+  owner: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat', 'tasks', 'taskByName', 'taskSingle'],
+  admin: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat', 'tasks', 'taskByName', 'taskSingle'],
+  member: ['root', 'model', 'document', 'dashboards', 'dashboard', 'chat', 'tasks', 'taskByName', 'taskSingle'],
   readonly: ['root', 'model', 'document', 'chat'],
   dashboards: ['dashboards', 'dashboard']
 };
 
-const allowedRoutesForLocalDev = ['document', 'root', 'chat', 'model'];
+const allowedRoutesForLocalDev = ['document', 'root', 'chat', 'model', 'tasks', 'taskByName', 'taskSingle'];
 
 // Helper function to check if a role has access to a route
 function hasAccess(roles, routeName) {
@@ -76,6 +76,22 @@ module.exports = {
         authorized: true
       }
     },
+    {
+      path: '/tasks/:name',
+      name: 'taskByName',
+      component: 'task-by-name',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/tasks/:name/:id',
+      name: 'taskSingle',
+      component: 'task-single',
+      meta: {
+        authorized: true
+      }
+    },
     {
       path: '/chat',
       name: 'chat index',