From cac6312b0524849cc6107d4d26c350e637de5cfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Tue, 18 Aug 2026 16:59:07 -0300
Subject: [PATCH 1/2] Add guardrail event details to session logs

Display guardrail evaluation events in agent session logs with status icons, phase/tool metadata, violation summaries, and expanded JSON payload details. This aligns the log UI with the FlowGenie Studio timeline and prevents guardrail events from being misclassified as tool calls.
---
 .../AgentSessionDetail/AgentSessionDetail.vue | 177 +++++++++++++++++-
 1 file changed, 176 insertions(+), 1 deletion(-)

diff --git a/resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue b/resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue
index d8a45bbd3c..175622802c 100644
--- a/resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue
+++ b/resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue
@@ -141,6 +141,13 @@
                   <div class="tw-flex tw-items-center tw-gap-2">
                     <span class="tw-text-xs tw-font-medium tw-text-gray-500">{{ getEventTypeLabel(event) }}</span>
                     <span class="tw-text-sm tw-font-semibold tw-text-gray-800">{{ getEventName(event) }}</span>
+                    <i
+                      v-if="isGuardrailEvent(event)"
+                      class="tw-text-xs"
+                      :class="getGuardrailStatusIconClass(event)"
+                      :title="getGuardrailStatusLabel(event)"
+                      aria-hidden="true"
+                    />
                   </div>
                   <div class="tw-flex tw-items-center tw-gap-3">
                     <span v-if="event.duration_ms" class="tw-text-xs tw-text-gray-500">
@@ -167,8 +174,66 @@
 
                 <!-- Expanded Content -->
                 <div v-if="expandedEvents[index]" class="tw-border-t tw-border-gray-100">
+                  <!-- Guardrail evaluation (same semantics as FlowGenie Studio timeline) -->
+                  <div v-if="isGuardrailEvent(event)" class="tw-p-3">
+                    <div class="tw-mb-3">
+                      <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Status') }}</div>
+                      <div class="tw-text-sm tw-font-medium" :class="getGuardrailStatusTextClass(event)">
+                        <i
+                          class="tw-mr-1"
+                          :class="getGuardrailStatusIconClass(event)"
+                          aria-hidden="true"
+                        />
+                        {{ getGuardrailStatusLabel(event) }}
+                      </div>
+                    </div>
+                    <div v-if="guardrailPayload(event).phase" class="tw-mb-3">
+                      <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Phase') }}</div>
+                      <div class="tw-font-mono tw-text-xs tw-text-gray-800">
+                        {{ formatGuardrailPhase(guardrailPayload(event).phase) }}
+                      </div>
+                    </div>
+                    <div v-if="guardrailPayload(event).tool_name" class="tw-mb-3">
+                      <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Tool') }}</div>
+                      <div class="tw-font-mono tw-text-sm tw-text-gray-900">
+                        {{ guardrailPayload(event).tool_name }}
+                      </div>
+                    </div>
+                    <div
+                      v-if="guardrailViolations(event).length"
+                      class="tw-mb-3"
+                    >
+                      <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Violations') }}</div>
+                      <ul class="tw-m-0 tw-pl-4 tw-text-sm tw-text-gray-800">
+                        <li
+                          v-for="(violation, vIdx) in guardrailViolations(event)"
+                          :key="vIdx"
+                          class="tw-mb-1"
+                        >
+                          <span class="tw-font-medium">
+                            {{ violation.policy_name || violation.policy_id || $t('Policy') }}
+                          </span>
+                          <span v-if="violation.message"> — {{ violation.message }}</span>
+                          <div
+                            v-if="violation.detail"
+                            class="tw-text-xs tw-text-gray-500 tw-font-mono tw-mt-0.5"
+                          >
+                            {{ violation.detail }}
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                    <div v-else-if="guardrailPayload(event).message" class="tw-mb-3">
+                      <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Message') }}</div>
+                      <div class="tw-text-sm tw-text-gray-700">{{ guardrailPayload(event).message }}</div>
+                    </div>
+                    <pre
+                      class="tw-bg-gray-50 tw-rounded tw-p-2 tw-text-xs tw-overflow-auto tw-max-h-48 tw-text-gray-700 tw-whitespace-pre-wrap tw-break-words"
+                    >{{ formatJson(guardrailPayload(event)) }}</pre>
+                  </div>
+
                   <!-- Tool call details -->
-                  <div v-if="isToolEvent(event)" class="tw-p-3">
+                  <div v-else-if="isToolEvent(event)" class="tw-p-3">
                     <div v-if="event.status" class="tw-mb-3">
                       <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Status') }}</div>
                       <span
@@ -643,7 +708,15 @@ export default {
       this.$set(this.expandedEvents, index, !this.expandedEvents[index]);
     },
 
+    isGuardrailEvent(event) {
+      const type = event._type || event.type;
+      return type === 'guardrail_evaluation_event';
+    },
+
     isToolEvent(event) {
+      if (this.isGuardrailEvent(event)) {
+        return false;
+      }
       const type = event._type || event.type;
       return type === 'tool_call' || event.tool_name || event.tool_arguments;
     },
@@ -669,7 +742,99 @@ export default {
         || event.error || event.error_message;
     },
 
+    guardrailPayload(event) {
+      if (event && event.data && typeof event.data === 'object') {
+        return event.data;
+      }
+      return event || {};
+    },
+
+    guardrailViolations(event) {
+      const violations = this.guardrailPayload(event).violations;
+      return Array.isArray(violations) ? violations : [];
+    },
+
+    isGuardrailPassed(event) {
+      return this.guardrailPayload(event).passed === true;
+    },
+
+    isGuardrailRedacted(event) {
+      const data = this.guardrailPayload(event);
+      if (data.recommended_action === 'redacted') {
+        return true;
+      }
+      return this.guardrailViolations(event).some((item) => item && item.severity === 'redact');
+    },
+
+    getGuardrailStatusLabel(event) {
+      if (!this.isGuardrailPassed(event)) {
+        return this.$t('Blocked');
+      }
+      if (this.isGuardrailRedacted(event)) {
+        return this.$t('Redacted');
+      }
+      return this.$t('Passed');
+    },
+
+    getGuardrailStatusIconClass(event) {
+      if (!this.isGuardrailPassed(event)) {
+        return 'fas fa-ban tw-text-red-600';
+      }
+      if (this.isGuardrailRedacted(event)) {
+        return 'fas fa-eraser tw-text-amber-600';
+      }
+      return 'fas fa-check tw-text-green-600';
+    },
+
+    getGuardrailStatusTextClass(event) {
+      if (!this.isGuardrailPassed(event)) {
+        return 'tw-text-red-700';
+      }
+      if (this.isGuardrailRedacted(event)) {
+        return 'tw-text-amber-700';
+      }
+      return 'tw-text-green-700';
+    },
+
+    getGuardrailIconClasses(event) {
+      if (!this.isGuardrailPassed(event)) {
+        return 'tw-bg-red-100 tw-text-red-600';
+      }
+      if (this.isGuardrailRedacted(event)) {
+        return 'tw-bg-amber-100 tw-text-amber-600';
+      }
+      return 'tw-bg-green-100 tw-text-green-600';
+    },
+
+    getGuardrailBarClass(event) {
+      if (!this.isGuardrailPassed(event)) {
+        return 'tw-bg-red-500';
+      }
+      if (this.isGuardrailRedacted(event)) {
+        return 'tw-bg-amber-500';
+      }
+      return 'tw-bg-green-500';
+    },
+
+    formatGuardrailPhase(phase) {
+      const labels = {
+        on_input: this.$t('On input'),
+        on_output: this.$t('On output'),
+        before_response: this.$t('Before response'),
+        before_tool: this.$t('Before tool'),
+        after_tool: this.$t('After tool'),
+      };
+      return labels[phase] || phase || '—';
+    },
+
+    getGuardrailEventName(event) {
+      const data = this.guardrailPayload(event);
+      const phase = this.formatGuardrailPhase(data.phase);
+      return data.tool_name ? `${phase} · ${data.tool_name}` : phase;
+    },
+
     getEventTypeLabel(event) {
+      if (this.isGuardrailEvent(event)) return this.$t('Guardrail');
       if (this.isErrorEvent(event)) return this.$t('Error');
       if (this.isToolEvent(event)) return this.$t('Tool');
       if (this.isLlmEvent(event)) return this.$t('LLM');
@@ -686,6 +851,9 @@ export default {
     },
 
     getEventName(event) {
+      if (this.isGuardrailEvent(event)) {
+        return this.getGuardrailEventName(event);
+      }
       if (this.isErrorEvent(event)) {
         return this.$t('Execution Error');
       }
@@ -712,6 +880,7 @@ export default {
     },
 
     getEventIcon(event) {
+      if (this.isGuardrailEvent(event)) return 'fas fa-shield-alt';
       if (this.isErrorEvent(event)) return 'fas fa-exclamation-triangle';
       if (this.isToolEvent(event)) return 'fas fa-wrench';
       if (this.isLlmEvent(event)) return 'fas fa-brain';
@@ -728,6 +897,9 @@ export default {
     },
 
     getEventIconClasses(event) {
+      if (this.isGuardrailEvent(event)) {
+        return this.getGuardrailIconClasses(event);
+      }
       if (this.isErrorEvent(event)) return 'tw-bg-red-100 tw-text-red-600';
       if (this.isToolEvent(event)) return 'tw-bg-indigo-100 tw-text-indigo-600';
       if (this.isLlmEvent(event)) return 'tw-bg-purple-100 tw-text-purple-600';
@@ -744,6 +916,9 @@ export default {
     },
 
     getEventBarClass(event) {
+      if (this.isGuardrailEvent(event)) {
+        return this.getGuardrailBarClass(event);
+      }
       if (this.isErrorEvent(event)) return 'tw-bg-red-500';
       if (this.isToolEvent(event)) return 'tw-bg-indigo-400';
       if (this.isLlmEvent(event)) return 'tw-bg-purple-400';

From 44ac1295d5ed82e33f2281c915a3a80bedfbcd1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 19 Aug 2026 11:54:33 -0300
Subject: [PATCH 2/2] Add FlowGenie monitoring dashboard

Add a new FlowGenie monitoring UI and supporting chart components. Introduces MonitoringDashboard.vue and index export, plus chart components (Bar/Doughnut/HorizontalBar/Line, ChartFrame) and chartTheme.js. Registers a new /agents/monitoring route (with package guard) and updates routes export. Update HeaderBar, Sidebar and LogContainer to surface the monitoring view and adjust tab/visibility logic. Enhance AgentSessionDetail with robust key generation and label formatting for events, MCP servers and collections. Small refactor for link class handling in Sidebar.
---
 .../AgentSessionDetail/AgentSessionDetail.vue |  71 ++-
 .../components/Logs/HeaderBar/HeaderBar.vue   |  14 +-
 .../Logs/LogContainer/LogContainer.vue        |   3 +
 .../Logs/Monitoring/MonitoringDashboard.vue   | 594 ++++++++++++++++++
 .../logs/components/Logs/Monitoring/index.js  |   2 +
 .../logs/components/Logs/Sidebar/Sidebar.vue  |  45 +-
 .../logs/components/Logs/charts/BarChart.vue  |  38 ++
 .../components/Logs/charts/ChartFrame.vue     |  18 +
 .../components/Logs/charts/DoughnutChart.vue  |  38 ++
 .../Logs/charts/HorizontalBarChart.vue        |  38 ++
 .../logs/components/Logs/charts/LineChart.vue |  38 ++
 .../logs/components/Logs/charts/chartTheme.js |  93 +++
 .../js/admin/logs/components/Logs/routes.js   |  13 +
 13 files changed, 985 insertions(+), 20 deletions(-)
 create mode 100644 resources/js/admin/logs/components/Logs/Monitoring/MonitoringDashboard.vue
 create mode 100644 resources/js/admin/logs/components/Logs/Monitoring/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/charts/BarChart.vue
 create mode 100644 resources/js/admin/logs/components/Logs/charts/ChartFrame.vue
 create mode 100644 resources/js/admin/logs/components/Logs/charts/DoughnutChart.vue
 create mode 100644 resources/js/admin/logs/components/Logs/charts/HorizontalBarChart.vue
 create mode 100644 resources/js/admin/logs/components/Logs/charts/LineChart.vue
 create mode 100644 resources/js/admin/logs/components/Logs/charts/chartTheme.js

diff --git a/resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue b/resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue
index 175622802c..d516c772c5 100644
--- a/resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue
+++ b/resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue
@@ -111,7 +111,7 @@
         <div v-else class="tw-relative">
           <div
             v-for="(event, index) in sortedEvents"
-            :key="event.id || index"
+            :key="getEventKey(event, index)"
             class="tw-relative tw-pb-4"
           >
             <!-- Timeline connector -->
@@ -361,11 +361,11 @@
               <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium tw-mb-1">{{ $t('MCP Servers') }}</div>
               <div class="tw-flex tw-flex-wrap tw-gap-1">
                 <span
-                  v-for="server in sessionData.mcp_servers_used"
-                  :key="server"
+                  v-for="(server, serverIndex) in sessionData.mcp_servers_used"
+                  :key="getMcpServerKey(server, serverIndex)"
                   class="tw-px-2 tw-py-0.5 tw-bg-purple-100 tw-text-purple-700 tw-rounded tw-text-xs"
                 >
-                  {{ server }}
+                  {{ formatMcpServerLabel(server) }}
                 </span>
               </div>
             </div>
@@ -374,13 +374,13 @@
               <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium tw-mb-1">{{ $t('Collections') }}</div>
               <div class="tw-flex tw-flex-wrap tw-gap-1">
                 <a
-                  v-for="collection in sessionData.collections_used"
-                  :key="collection.uuid || collection.id"
-                  :href="`/collections/${collection.id}`"
+                  v-for="(collection, collectionIndex) in sessionData.collections_used"
+                  :key="getCollectionKey(collection, collectionIndex)"
+                  :href="`/collections/${collection.id || collection.uuid}`"
                   class="tw-px-2 tw-py-0.5 tw-bg-blue-100 tw-text-blue-700 tw-rounded tw-text-xs hover:tw-bg-blue-200 tw-transition-colors tw-no-underline"
                   @click.stop
                 >
-                  {{ collection.name }}
+                  {{ formatCollectionLabel(collection) }}
                 </a>
               </div>
             </div>
@@ -708,6 +708,61 @@ export default {
       this.$set(this.expandedEvents, index, !this.expandedEvents[index]);
     },
 
+    getEventKey(event, index) {
+      const id = event.id ?? event.call_id ?? event.response_id;
+      if (typeof id === 'string' || typeof id === 'number') {
+        return String(id);
+      }
+      const type = event._type || event.type || 'event';
+      const timestamp = event.timestamp || event.created_at || '';
+      return `${type}-${timestamp}-${index}`;
+    },
+
+    getMcpServerKey(server, index) {
+      if (typeof server === 'string' || typeof server === 'number') {
+        return `mcp-${server}-${index}`;
+      }
+      if (server && typeof server === 'object') {
+        const name = server.name || server.id || 'server';
+        const type = server.type || server.server_type || '';
+        return `mcp-${name}-${type}-${index}`;
+      }
+      return `mcp-server-${index}`;
+    },
+
+    formatMcpServerLabel(server) {
+      if (typeof server === 'string' || typeof server === 'number') {
+        return String(server);
+      }
+      if (server && typeof server === 'object') {
+        return server.name || server.id || JSON.stringify(server);
+      }
+      return String(server ?? '');
+    },
+
+    getCollectionKey(collection, index) {
+      if (typeof collection === 'string' || typeof collection === 'number') {
+        return `collection-${collection}-${index}`;
+      }
+      if (collection && typeof collection === 'object') {
+        const id = collection.uuid || collection.id;
+        if (typeof id === 'string' || typeof id === 'number') {
+          return `collection-${id}`;
+        }
+      }
+      return `collection-${index}`;
+    },
+
+    formatCollectionLabel(collection) {
+      if (typeof collection === 'string' || typeof collection === 'number') {
+        return String(collection);
+      }
+      if (collection && typeof collection === 'object') {
+        return collection.name || collection.uuid || collection.id || JSON.stringify(collection);
+      }
+      return String(collection ?? '');
+    },
+
     isGuardrailEvent(event) {
       const type = event._type || event.type;
       return type === 'guardrail_evaluation_event';
diff --git a/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
index 6878c1c6fc..a7fcc7add8 100644
--- a/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
+++ b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
@@ -30,7 +30,7 @@
 
     <!-- Agents category tabs -->
     <div
-      v-else-if="isAgentsCategory"
+      v-else-if="isAgentsLogsCategory"
       class="tw-flex tw-items-center tw-gap-2 tw-bg-gray-100 tw-rounded-lg tw-p-1"
     >
       <RouterLink
@@ -52,7 +52,10 @@
     <!-- Empty placeholder for other categories -->
     <div v-else />
 
-    <div class="tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-w-auto tw-border tw-border-zinc-200 tw-rounded-lg tw-p-1 tw-px-3">
+    <div
+      v-if="!isMonitoring"
+      class="tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-w-auto tw-border tw-border-zinc-200 tw-rounded-lg tw-p-1 tw-px-3"
+    >
       <div class="tw-relative tw-w-full tw-flex tw-items-center tw-gap-1">
         <i class="fas fa-search" />
         <input
@@ -92,8 +95,11 @@ export default {
     isEmailCategory() {
       return this.$route.path.startsWith('/email');
     },
-    isAgentsCategory() {
-      return this.$route.path.startsWith('/agents');
+    isAgentsLogsCategory() {
+      return this.$route.path === '/agents/design' || this.$route.path === '/agents/execution';
+    },
+    isMonitoring() {
+      return this.$route.path.startsWith('/agents/monitoring');
     },
   },
   watch: {
diff --git a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
index 9825c0a42e..caa62040e7 100644
--- a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
+++ b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
@@ -94,6 +94,9 @@ export default {
       return this.$route.params.logType;
     },
     title() {
+      if (this.$route.path.startsWith('/agents/monitoring')) {
+        return 'FlowGenie Monitoring';
+      }
       if (this.isAgentsCategory) {
         const agentTitles = {
           design: 'FlowGenie Studio Logs',
diff --git a/resources/js/admin/logs/components/Logs/Monitoring/MonitoringDashboard.vue b/resources/js/admin/logs/components/Logs/Monitoring/MonitoringDashboard.vue
new file mode 100644
index 0000000000..c304d2337c
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/Monitoring/MonitoringDashboard.vue
@@ -0,0 +1,594 @@
+<template>
+  <div class="monitor-page tw-flex tw-flex-col tw-flex-1 tw-min-h-0 tw-overflow-y-auto tw-gap-6 tw-pr-1">
+    <div class="tw-flex tw-flex-wrap tw-items-center tw-justify-between tw-gap-3">
+      <div class="tw-flex tw-items-center tw-gap-1 tw-bg-gray-100 tw-rounded-lg tw-p-1">
+        <button
+          v-for="option in executionOptions"
+          :key="option.value"
+          type="button"
+          class="tw-rounded-lg tw-px-3 tw-py-1.5 tw-text-sm"
+          :class="executionType === option.value
+            ? 'tw-bg-white tw-font-semibold tw-text-zinc-900'
+            : 'tw-text-zinc-700 hover:tw-bg-zinc-50'"
+          @click="setExecutionType(option.value)"
+        >
+          {{ $t(option.label) }}
+        </button>
+      </div>
+      <div class="tw-flex tw-items-center tw-gap-1 tw-bg-gray-100 tw-rounded-lg tw-p-1">
+        <button
+          v-for="option in rangeOptions"
+          :key="option.value"
+          type="button"
+          class="tw-rounded-lg tw-px-3 tw-py-1.5 tw-text-sm"
+          :class="range === option.value
+            ? 'tw-bg-white tw-font-semibold tw-text-zinc-900'
+            : 'tw-text-zinc-700 hover:tw-bg-zinc-50'"
+          @click="setRange(option.value)"
+        >
+          {{ $t(option.label) }}
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="loading"
+      class="tw-flex tw-flex-1 tw-items-center tw-justify-center tw-min-h-[200px]"
+    >
+      <span class="tw-text-sm tw-text-gray-500">{{ $t('Loading...') }}</span>
+    </div>
+
+    <template v-else>
+      <div class="tw-grid tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-3">
+        <div
+          v-for="kpi in kpiCards"
+          :key="kpi.label"
+          class="tw-rounded-xl tw-border tw-border-zinc-200 tw-bg-white tw-px-4 tw-py-3"
+        >
+          <div
+            class="tw-text-2xl tw-font-semibold"
+            :class="kpi.toneClass"
+          >
+            {{ kpi.value }}
+          </div>
+          <div class="tw-text-xs tw-text-zinc-500 tw-mt-1">
+            {{ $t(kpi.label) }}
+          </div>
+        </div>
+      </div>
+
+      <h3 class="tw-text-sm tw-font-semibold tw-uppercase tw-text-zinc-500 tw-m-0">
+        {{ $t('Guardrails') }}
+      </h3>
+
+      <div class="monitor-grid tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4">
+        <section class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white">
+          <h4 class="tw-text-base tw-font-semibold tw-text-zinc-900 tw-mb-3">
+            {{ $t('Guardrail outcomes') }}
+          </h4>
+          <chart-frame v-if="hasOutcomes">
+            <doughnut-chart
+              :data="outcomesChart"
+              :options="doughnutOptions"
+            />
+          </chart-frame>
+          <p
+            v-else
+            class="tw-text-sm tw-text-zinc-500"
+          >
+            {{ $t(emptyGuardrails) }}
+          </p>
+        </section>
+
+        <section class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white">
+          <h4 class="tw-text-base tw-font-semibold tw-text-zinc-900 tw-mb-3">
+            {{ $t('Block rate by FlowGenie') }}
+          </h4>
+          <chart-frame v-if="hasBlockRates">
+            <horizontal-bar-chart
+              :data="blockRateChart"
+              :options="percentBarOptions"
+            />
+          </chart-frame>
+          <p
+            v-else
+            class="tw-text-sm tw-text-zinc-500"
+          >
+            {{ $t(emptyBlocks) }}
+          </p>
+        </section>
+      </div>
+
+      <div class="monitor-grid tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4">
+        <section class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white">
+          <h4 class="tw-text-base tw-font-semibold tw-text-zinc-900 tw-mb-3">
+            {{ $t('Violations by kind') }}
+          </h4>
+          <chart-frame v-if="hasKinds">
+            <horizontal-bar-chart
+              :data="kindsChart"
+              :options="countBarOptions"
+            />
+          </chart-frame>
+          <p
+            v-else
+            class="tw-text-sm tw-text-zinc-500"
+          >
+            {{ $t('No violations in this period.') }}
+          </p>
+        </section>
+
+        <section class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white">
+          <h4 class="tw-text-base tw-font-semibold tw-text-zinc-900 tw-mb-3">
+            {{ $t('Where it fired') }}
+          </h4>
+          <chart-frame v-if="hasPhases">
+            <bar-chart
+              :data="phasesChart"
+              :options="stackedBarOptions"
+            />
+          </chart-frame>
+          <p
+            v-else
+            class="tw-text-sm tw-text-zinc-500"
+          >
+            {{ $t(emptyGuardrails) }}
+          </p>
+        </section>
+      </div>
+
+      <section class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white">
+        <h4 class="tw-text-base tw-font-semibold tw-text-zinc-900 tw-mb-3">
+          {{ $t('Blocked vs redacted sessions') }}
+        </h4>
+        <chart-frame>
+          <line-chart
+            :data="dailyGuardrailChart"
+            :options="lineOptions"
+          />
+        </chart-frame>
+      </section>
+
+      <h3 class="tw-text-sm tw-font-semibold tw-uppercase tw-text-zinc-500 tw-m-0">
+        {{ $t('Usage') }}
+      </h3>
+
+      <div class="monitor-grid tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4">
+        <section class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white">
+          <h4 class="tw-text-base tw-font-semibold tw-text-zinc-900 tw-mb-3">
+            {{ $t('Tokens in vs out') }}
+          </h4>
+          <chart-frame v-if="hasTokens">
+            <doughnut-chart
+              :data="tokensChart"
+              :options="doughnutOptions"
+            />
+          </chart-frame>
+          <p
+            v-else
+            class="tw-text-sm tw-text-zinc-500"
+          >
+            {{ $t(emptyTokens) }}
+          </p>
+        </section>
+
+        <section class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white">
+          <h4 class="tw-text-base tw-font-semibold tw-text-zinc-900 tw-mb-3">
+            {{ $t('Tokens by FlowGenie') }}
+          </h4>
+          <chart-frame v-if="hasTokensByGenie">
+            <horizontal-bar-chart
+              :data="tokensByGenieChart"
+              :options="countBarOptions"
+            />
+          </chart-frame>
+          <p
+            v-else
+            class="tw-text-sm tw-text-zinc-500"
+          >
+            {{ $t(emptyTokens) }}
+          </p>
+        </section>
+      </div>
+
+      <div class="monitor-grid tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4">
+        <section class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white">
+          <h4 class="tw-text-base tw-font-semibold tw-text-zinc-900 tw-mb-3">
+            {{ $t('Sessions per day') }}
+          </h4>
+          <chart-frame>
+            <line-chart
+              :data="dailySessionsChart"
+              :options="lineOptions"
+            />
+          </chart-frame>
+        </section>
+
+        <section class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white">
+          <h4 class="tw-text-base tw-font-semibold tw-text-zinc-900 tw-mb-3">
+            {{ $t('Session status') }}
+          </h4>
+          <chart-frame v-if="hasStatus">
+            <doughnut-chart
+              :data="statusChart"
+              :options="doughnutOptions"
+            />
+          </chart-frame>
+          <p
+            v-else
+            class="tw-text-sm tw-text-zinc-500"
+          >
+            {{ $t('No sessions in this period.') }}
+          </p>
+        </section>
+      </div>
+
+      <section class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white tw-mb-4">
+        <h4 class="tw-text-base tw-font-semibold tw-text-zinc-900 tw-mb-3">
+          {{ $t('Top users by blocks') }}
+        </h4>
+        <div class="monitor-table">
+          <table
+            v-if="topUsers.length"
+            class="tw-w-full tw-text-sm tw-text-left"
+          >
+          <thead>
+            <tr class="tw-text-xs tw-uppercase tw-text-zinc-500">
+              <th class="tw-py-2 tw-font-medium">{{ $t('User') }}</th>
+              <th class="tw-py-2 tw-font-medium">{{ $t('FlowGenie') }}</th>
+              <th class="tw-py-2 tw-font-medium tw-text-right">{{ $t('Sessions') }}</th>
+              <th class="tw-py-2 tw-font-medium tw-text-right">{{ $t('Blocks') }}</th>
+              <th class="tw-py-2 tw-font-medium tw-text-right">{{ $t('Block rate') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in topUsers"
+              :key="`${row.user}-${row.genie}`"
+              class="tw-border-t tw-border-zinc-100"
+            >
+              <td class="tw-py-2">{{ row.user }}</td>
+              <td class="tw-py-2">{{ row.genie }}</td>
+              <td class="tw-py-2 tw-text-right">{{ row.sessions }}</td>
+              <td class="tw-py-2 tw-text-right tw-text-red-600 tw-font-medium">{{ row.blocks }}</td>
+              <td class="tw-py-2 tw-text-right">{{ formatRate(row.block_rate) }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <p
+          v-else
+          class="tw-text-sm tw-text-zinc-500"
+        >
+          {{ $t(emptyBlocks) }}
+        </p>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<script>
+import BarChart from '../charts/BarChart.vue';
+import ChartFrame from '../charts/ChartFrame.vue';
+import DoughnutChart from '../charts/DoughnutChart.vue';
+import HorizontalBarChart from '../charts/HorizontalBarChart.vue';
+import LineChart from '../charts/LineChart.vue';
+import {
+  CHART_COLORS,
+  doughnutOptions,
+  horizontalBarOptions,
+  lineOptions,
+  stackedBarOptions,
+} from '../charts/chartTheme';
+
+const EMPTY_MONITORING = () => ({
+  kpis: {
+    sessions: 0,
+    block_rate: 0,
+    redact_rate: 0,
+    error_rate: 0,
+    tokens: 0,
+    avg_duration_ms: 0,
+  },
+  outcomes: { pass: 0, redact: 0, block: 0 },
+  block_rate_by_genie: { labels: [], values: [] },
+  kinds: { labels: [], values: [] },
+  phases: { labels: [], block: [], redact: [] },
+  daily_guardrails: { labels: [], blocked_sessions: [], redacted_sessions: [] },
+  tokens: { input: 0, output: 0 },
+  tokens_by_genie: { labels: [], values: [] },
+  daily_sessions: { labels: [], studio: [], runtime: [] },
+  status: { completed: 0, error: 0, processing: 0 },
+  top_users: [],
+});
+
+export default {
+  components: {
+    BarChart,
+    ChartFrame,
+    DoughnutChart,
+    HorizontalBarChart,
+    LineChart,
+  },
+  data() {
+    return {
+      loading: false,
+      range: '7d',
+      executionType: 'all',
+      monitoring: EMPTY_MONITORING(),
+      emptyGuardrails: 'No guardrail evaluations in this period.',
+      emptyBlocks: 'No blocked sessions in this period.',
+      emptyTokens: 'No token usage in this period.',
+      doughnutOptions,
+      stackedBarOptions,
+      lineOptions,
+      percentBarOptions: horizontalBarOptions('%'),
+      countBarOptions: horizontalBarOptions(),
+      rangeOptions: [
+        { value: '7d', label: 'Last 7 days' },
+        { value: '30d', label: 'Last 30 days' },
+        { value: '90d', label: 'Last 90 days' },
+      ],
+      executionOptions: [
+        { value: 'all', label: 'All' },
+        { value: 'design', label: 'Studio' },
+        { value: 'execution', label: 'Runtime' },
+      ],
+    };
+  },
+  computed: {
+    kpiCards() {
+      const kpis = this.monitoring.kpis || {};
+      return [
+        { label: 'Sessions', value: this.formatCount(kpis.sessions), toneClass: 'tw-text-zinc-900' },
+        { label: 'Block rate', value: this.formatRate(kpis.block_rate), toneClass: 'tw-text-red-600' },
+        { label: 'Redact rate', value: this.formatRate(kpis.redact_rate), toneClass: 'tw-text-amber-600' },
+        { label: 'Error rate', value: this.formatRate(kpis.error_rate), toneClass: 'tw-text-zinc-900' },
+        { label: 'Tokens', value: this.formatTokens(kpis.tokens), toneClass: 'tw-text-zinc-900' },
+        { label: 'Avg duration', value: this.formatDuration(kpis.avg_duration_ms), toneClass: 'tw-text-zinc-900' },
+      ];
+    },
+    hasOutcomes() {
+      const outcomes = this.monitoring.outcomes || {};
+      return (outcomes.pass || 0) + (outcomes.redact || 0) + (outcomes.block || 0) > 0;
+    },
+    hasBlockRates() {
+      return (this.monitoring.block_rate_by_genie?.values || []).some((value) => value > 0);
+    },
+    hasKinds() {
+      return (this.monitoring.kinds?.values || []).some((value) => value > 0);
+    },
+    hasPhases() {
+      const phases = this.monitoring.phases || {};
+      const blocks = (phases.block || []).reduce((sum, value) => sum + value, 0);
+      const redacts = (phases.redact || []).reduce((sum, value) => sum + value, 0);
+      return blocks + redacts > 0;
+    },
+    hasTokens() {
+      const tokens = this.monitoring.tokens || {};
+      return (tokens.input || 0) + (tokens.output || 0) > 0;
+    },
+    hasTokensByGenie() {
+      return (this.monitoring.tokens_by_genie?.values || []).some((value) => value > 0);
+    },
+    hasStatus() {
+      const status = this.monitoring.status || {};
+      return (status.completed || 0) + (status.error || 0) + (status.processing || 0) > 0;
+    },
+    topUsers() {
+      return this.monitoring.top_users || [];
+    },
+    outcomesChart() {
+      const outcomes = this.monitoring.outcomes || {};
+      return this.doughnutData(
+        [this.$t('Pass'), this.$t('Redact'), this.$t('Block')],
+        [outcomes.pass || 0, outcomes.redact || 0, outcomes.block || 0],
+        [CHART_COLORS.pass, CHART_COLORS.redact, CHART_COLORS.block],
+      );
+    },
+    blockRateChart() {
+      const series = this.monitoring.block_rate_by_genie || { labels: [], values: [] };
+      return this.barData(series.labels, series.values, CHART_COLORS.block, this.$t('Block rate'));
+    },
+    kindsChart() {
+      const series = this.monitoring.kinds || { labels: [], values: [] };
+      return this.barData(series.labels, series.values, CHART_COLORS.redact, this.$t('Violations'));
+    },
+    phasesChart() {
+      const phases = this.monitoring.phases || { labels: [], block: [], redact: [] };
+      return {
+        labels: (phases.labels || []).map((phase) => this.formatPhase(phase)),
+        datasets: [
+          {
+            label: this.$t('Block'),
+            data: phases.block || [],
+            backgroundColor: CHART_COLORS.block,
+          },
+          {
+            label: this.$t('Redact'),
+            data: phases.redact || [],
+            backgroundColor: CHART_COLORS.redact,
+          },
+        ],
+      };
+    },
+    dailyGuardrailChart() {
+      const series = this.monitoring.daily_guardrails || {};
+      return {
+        labels: series.labels || [],
+        datasets: [
+          this.lineDataset(this.$t('Blocked sessions'), series.blocked_sessions || [], CHART_COLORS.block),
+          this.lineDataset(this.$t('Redacted sessions'), series.redacted_sessions || [], CHART_COLORS.redact),
+        ],
+      };
+    },
+    tokensChart() {
+      const tokens = this.monitoring.tokens || {};
+      return this.doughnutData(
+        [this.$t('Input'), this.$t('Output')],
+        [tokens.input || 0, tokens.output || 0],
+        [CHART_COLORS.info, CHART_COLORS.muted],
+      );
+    },
+    tokensByGenieChart() {
+      const series = this.monitoring.tokens_by_genie || { labels: [], values: [] };
+      return this.barData(series.labels, series.values, CHART_COLORS.info, this.$t('Tokens'));
+    },
+    dailySessionsChart() {
+      const series = this.monitoring.daily_sessions || {};
+      return {
+        labels: series.labels || [],
+        datasets: [
+          this.lineDataset(this.$t('Studio'), series.studio || [], CHART_COLORS.info),
+          this.lineDataset(this.$t('Runtime'), series.runtime || [], CHART_COLORS.muted),
+        ],
+      };
+    },
+    statusChart() {
+      const status = this.monitoring.status || {};
+      return this.doughnutData(
+        [this.$t('Completed'), this.$t('Error')],
+        [status.completed || 0, status.error || 0],
+        [CHART_COLORS.completed, CHART_COLORS.error],
+      );
+    },
+  },
+  watch: {
+    '$route.query': {
+      handler() {
+        this.syncQuery();
+        this.fetchMonitoring();
+      },
+    },
+  },
+  mounted() {
+    this.syncQuery();
+    this.fetchMonitoring();
+  },
+  methods: {
+    syncQuery() {
+      this.range = this.$route.query.range || '7d';
+      this.executionType = this.$route.query.execution_type || 'all';
+    },
+    setRange(range) {
+      this.range = range;
+      this.pushQuery();
+    },
+    setExecutionType(executionType) {
+      this.executionType = executionType;
+      this.pushQuery();
+    },
+    pushQuery() {
+      const query = {
+        range: this.range,
+        execution_type: this.executionType,
+      };
+      this.$router.replace({ query }).catch((error) => {
+        if (error.name !== 'NavigationDuplicated') {
+          throw error;
+        }
+      });
+    },
+    async fetchMonitoring() {
+      this.loading = true;
+      try {
+        const response = await ProcessMaker.apiClient.get('/api/1.0/package-ai/agent/logs/monitoring', {
+          params: {
+            range: this.range,
+            execution_type: this.executionType,
+          },
+        });
+        this.monitoring = response.data.monitoring || EMPTY_MONITORING();
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        this.monitoring = EMPTY_MONITORING();
+      } finally {
+        this.loading = false;
+      }
+    },
+    doughnutData(labels, data, colors) {
+      return {
+        labels,
+        datasets: [{
+          data,
+          backgroundColor: colors,
+          borderWidth: 0,
+        }],
+      };
+    },
+    barData(labels, data, color, label) {
+      return {
+        labels,
+        datasets: [{
+          label,
+          data,
+          backgroundColor: color,
+        }],
+      };
+    },
+    lineDataset(label, data, color) {
+      return {
+        label,
+        data,
+        borderColor: color,
+        backgroundColor: color,
+        fill: false,
+        lineTension: 0.2,
+        pointRadius: 3,
+      };
+    },
+    formatPhase(phase) {
+      const labels = {
+        on_input: this.$t('On input'),
+        before_tool: this.$t('Before tool'),
+        after_tool: this.$t('After tool'),
+        before_response: this.$t('Before response'),
+        on_output: this.$t('On output'),
+      };
+      return labels[phase] || phase;
+    },
+    formatCount(value) {
+      return Number(value || 0).toLocaleString();
+    },
+    formatRate(value) {
+      return `${Number(value || 0).toFixed(1)}%`;
+    },
+    formatTokens(value) {
+      const amount = Number(value || 0);
+      if (amount >= 1000000) {
+        return `${(amount / 1000000).toFixed(1)}M`;
+      }
+      if (amount >= 1000) {
+        return `${(amount / 1000).toFixed(1)}K`;
+      }
+      return amount.toLocaleString();
+    },
+    formatDuration(ms) {
+      const amount = Number(ms || 0);
+      if (amount <= 0) {
+        return '-';
+      }
+      if (amount < 1000) {
+        return `${Math.round(amount)}ms`;
+      }
+      return `${(amount / 1000).toFixed(1)}s`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.monitor-page {
+  min-width: 0;
+  overflow-x: hidden;
+}
+.monitor-grid > * {
+  min-width: 0;
+  overflow: hidden;
+}
+.monitor-table {
+  width: 100%;
+  overflow-x: auto;
+}
+</style>
diff --git a/resources/js/admin/logs/components/Logs/Monitoring/index.js b/resources/js/admin/logs/components/Logs/Monitoring/index.js
new file mode 100644
index 0000000000..baa481f302
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/Monitoring/index.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as MonitoringDashboard } from './MonitoringDashboard.vue';
diff --git a/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
index a2276bbff7..6d947d71ca 100644
--- a/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
+++ b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
@@ -104,7 +104,7 @@
             :visible="isAgentsActive"
           >
             <RouterLink
-              to="/agents"
+              to="/agents/monitoring"
               class="
                 tw-mt-1
                 tw-flex
@@ -116,9 +116,26 @@
                 tw-text-base
                 tw-cursor-pointer
               "
-              :class="agentsLinkClasses"
+              :class="monitoringLinkClasses"
             >
-              <span class="tw-inline-flex tw-items-center tw-gap-2">FlowGenie Agents logs</span>
+              <span class="tw-inline-flex tw-items-center tw-gap-2">{{ $t('Monitoring') }}</span>
+            </RouterLink>
+            <RouterLink
+              to="/agents/design"
+              class="
+                tw-mt-1
+                tw-flex
+                tw-items-center
+                tw-justify-between
+                tw-rounded-lg
+                tw-px-3
+                tw-py-2
+                tw-text-base
+                tw-cursor-pointer
+              "
+              :class="agentsLogsLinkClasses"
+            >
+              <span class="tw-inline-flex tw-items-center tw-gap-2">{{ $t('FlowGenie Agents logs') }}</span>
             </RouterLink>
           </b-collapse>
         </div>
@@ -153,13 +170,25 @@ export default {
     isAgentsActive() {
       return this.$route.path.startsWith("/agents");
     },
+    isAgentsLogsActive() {
+      return this.$route.path === '/agents/design' || this.$route.path === '/agents/execution';
+    },
+    isMonitoringActive() {
+      return this.$route.path.startsWith('/agents/monitoring');
+    },
     emailLinkClasses() {
-      return this.isEmailActive
-        ? "tw-bg-blue-50 tw-font-semibold tw-text-blue-500"
-        : "tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50";
+      return this.linkClasses(this.isEmailActive);
+    },
+    agentsLogsLinkClasses() {
+      return this.linkClasses(this.isAgentsLogsActive);
     },
-    agentsLinkClasses() {
-      return this.isAgentsActive
+    monitoringLinkClasses() {
+      return this.linkClasses(this.isMonitoringActive);
+    },
+  },
+  methods: {
+    linkClasses(isActive) {
+      return isActive
         ? "tw-bg-blue-50 tw-font-semibold tw-text-blue-500"
         : "tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50";
     },
diff --git a/resources/js/admin/logs/components/Logs/charts/BarChart.vue b/resources/js/admin/logs/components/Logs/charts/BarChart.vue
new file mode 100644
index 0000000000..fd46f8cb06
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/charts/BarChart.vue
@@ -0,0 +1,38 @@
+<script>
+import { Bar } from 'vue-chartjs';
+import { chartBoxStyles } from './chartTheme';
+
+export default {
+  extends: Bar,
+  props: {
+    data: {
+      type: Object,
+      default: () => ({ labels: [], datasets: [] }),
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+    styles: {
+      type: Object,
+      default: () => ({ ...chartBoxStyles }),
+    },
+  },
+  mounted() {
+    this.render();
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler() {
+        this.render();
+      },
+    },
+  },
+  methods: {
+    render() {
+      this.renderChart(this.data, this.options);
+    },
+  },
+};
+</script>
diff --git a/resources/js/admin/logs/components/Logs/charts/ChartFrame.vue b/resources/js/admin/logs/components/Logs/charts/ChartFrame.vue
new file mode 100644
index 0000000000..e010c4054f
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/charts/ChartFrame.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="chart-frame">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.chart-frame {
+  position: relative;
+  width: 100%;
+  height: 220px;
+}
+.chart-frame ::v-deep > div {
+  width: 100%;
+  height: 220px;
+  position: relative;
+}
+</style>
diff --git a/resources/js/admin/logs/components/Logs/charts/DoughnutChart.vue b/resources/js/admin/logs/components/Logs/charts/DoughnutChart.vue
new file mode 100644
index 0000000000..5691a36bbd
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/charts/DoughnutChart.vue
@@ -0,0 +1,38 @@
+<script>
+import { Doughnut } from 'vue-chartjs';
+import { chartBoxStyles } from './chartTheme';
+
+export default {
+  extends: Doughnut,
+  props: {
+    data: {
+      type: Object,
+      default: () => ({ labels: [], datasets: [] }),
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+    styles: {
+      type: Object,
+      default: () => ({ ...chartBoxStyles }),
+    },
+  },
+  mounted() {
+    this.render();
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler() {
+        this.render();
+      },
+    },
+  },
+  methods: {
+    render() {
+      this.renderChart(this.data, this.options);
+    },
+  },
+};
+</script>
diff --git a/resources/js/admin/logs/components/Logs/charts/HorizontalBarChart.vue b/resources/js/admin/logs/components/Logs/charts/HorizontalBarChart.vue
new file mode 100644
index 0000000000..5ddcfa75b7
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/charts/HorizontalBarChart.vue
@@ -0,0 +1,38 @@
+<script>
+import { HorizontalBar } from 'vue-chartjs';
+import { chartBoxStyles } from './chartTheme';
+
+export default {
+  extends: HorizontalBar,
+  props: {
+    data: {
+      type: Object,
+      default: () => ({ labels: [], datasets: [] }),
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+    styles: {
+      type: Object,
+      default: () => ({ ...chartBoxStyles }),
+    },
+  },
+  mounted() {
+    this.render();
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler() {
+        this.render();
+      },
+    },
+  },
+  methods: {
+    render() {
+      this.renderChart(this.data, this.options);
+    },
+  },
+};
+</script>
diff --git a/resources/js/admin/logs/components/Logs/charts/LineChart.vue b/resources/js/admin/logs/components/Logs/charts/LineChart.vue
new file mode 100644
index 0000000000..fa8a6674e9
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/charts/LineChart.vue
@@ -0,0 +1,38 @@
+<script>
+import { Line } from 'vue-chartjs';
+import { chartBoxStyles } from './chartTheme';
+
+export default {
+  extends: Line,
+  props: {
+    data: {
+      type: Object,
+      default: () => ({ labels: [], datasets: [] }),
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+    styles: {
+      type: Object,
+      default: () => ({ ...chartBoxStyles }),
+    },
+  },
+  mounted() {
+    this.render();
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler() {
+        this.render();
+      },
+    },
+  },
+  methods: {
+    render() {
+      this.renderChart(this.data, this.options);
+    },
+  },
+};
+</script>
diff --git a/resources/js/admin/logs/components/Logs/charts/chartTheme.js b/resources/js/admin/logs/components/Logs/charts/chartTheme.js
new file mode 100644
index 0000000000..8ad3a3fa92
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/charts/chartTheme.js
@@ -0,0 +1,93 @@
+export const CHART_COLORS = {
+  pass: '#0CA442',
+  redact: '#EC8E00',
+  block: '#EC5962',
+  info: '#2773F3',
+  muted: '#728092',
+  completed: '#0CA442',
+  error: '#EC5962',
+};
+
+export const doughnutOptions = {
+  legend: {
+    display: true,
+    position: 'bottom',
+  },
+  maintainAspectRatio: false,
+  responsive: true,
+  cutoutPercentage: 60,
+  layout: {
+    padding: 4,
+  },
+};
+
+export const horizontalBarOptions = (valueSuffix = '') => ({
+  legend: {
+    display: false,
+  },
+  maintainAspectRatio: false,
+  responsive: true,
+  layout: {
+    padding: {
+      right: 12,
+    },
+  },
+  scales: {
+    xAxes: [{
+      ticks: {
+        beginAtZero: true,
+        callback: (value) => `${value}${valueSuffix}`,
+      },
+    }],
+    yAxes: [{
+      gridLines: {
+        display: false,
+      },
+      afterFit: (scale) => {
+        scale.width = Math.min(scale.width, 140);
+      },
+    }],
+  },
+});
+
+export const stackedBarOptions = {
+  legend: {
+    display: true,
+    position: 'bottom',
+  },
+  maintainAspectRatio: false,
+  responsive: true,
+  layout: {
+    padding: 4,
+  },
+  scales: {
+    xAxes: [{ stacked: true }],
+    yAxes: [{
+      stacked: true,
+      ticks: { beginAtZero: true },
+    }],
+  },
+};
+
+export const lineOptions = {
+  legend: {
+    display: true,
+    position: 'bottom',
+  },
+  maintainAspectRatio: false,
+  responsive: true,
+  layout: {
+    padding: 4,
+  },
+  scales: {
+    yAxes: [{
+      ticks: { beginAtZero: true },
+    }],
+  },
+};
+
+export const chartBoxStyles = {
+  width: '100%',
+  height: '220px',
+  position: 'relative',
+};
diff --git a/resources/js/admin/logs/components/Logs/routes.js b/resources/js/admin/logs/components/Logs/routes.js
index 398d462193..85443ea7d3 100644
--- a/resources/js/admin/logs/components/Logs/routes.js
+++ b/resources/js/admin/logs/components/Logs/routes.js
@@ -1,4 +1,5 @@
 import { LogTable } from "./LogTable";
+import { MonitoringDashboard } from "./Monitoring";
 
 export default {};
 
@@ -70,6 +71,18 @@ export const routes = [
     path: "/agents",
     redirect: "/agents/design",
   },
+  {
+    name: "logs.agents.monitoring",
+    path: "/agents/monitoring",
+    component: MonitoringDashboard,
+    beforeEnter: (to, from, next) => {
+      if (!hasAiPackage()) {
+        next(hasEmailPackage() ? "/email/errors" : "/");
+      } else {
+        next();
+      }
+    },
+  },
   {
     name: "logs.agents",
     path: "/agents/:logType",