From 3be46efd764e2eb08f6ab9b3abbf9b9fd1a8ac8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustavo=20Bascop=C3=A9?= <gustavo.bascope@processmaker.com>
Date: Thu, 14 Aug 2025 18:07:21 -0400
Subject: [PATCH 01/14] created a new web route to see files by media id

---
 .../Http/Controllers/Api/FileController.php        | 14 +++++++++++++-
 routes/web.php                                     |  6 ++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/ProcessMaker/Http/Controllers/Api/FileController.php b/ProcessMaker/Http/Controllers/Api/FileController.php
index 8cd1de0171..9fbdb07bf5 100644
--- a/ProcessMaker/Http/Controllers/Api/FileController.php
+++ b/ProcessMaker/Http/Controllers/Api/FileController.php
@@ -284,7 +284,19 @@ public function download(Media $file)
     {
         $path = Storage::disk('public')->path($file->id . '/' . $file->file_name);
 
-        // Register the Event
+        // Inline preview when requested
+        if (request()->boolean('inline', false)) {
+            if (!empty($file->file_name)) {
+                FilesDownloaded::dispatch($file);
+            }
+
+            return response()->file($path, [
+                'Content-Type' => $file->mime_type,
+                'Content-Disposition' => 'inline; filename="' . addslashes($file->file_name) . '"',
+            ]);
+        }
+
+        // Default: force download
         if (!empty($file->file_name)) {
             FilesDownloaded::dispatch($file);
         }
diff --git a/routes/web.php b/routes/web.php
index 6173442946..02222e4ae8 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,6 @@
 <?php
 
+use Illuminate\Support\Facades\Broadcast;
 use Illuminate\Support\Facades\Route;
 use ProcessMaker\Facades\Metrics;
 use ProcessMaker\Http\Controllers\AboutController;
@@ -14,6 +15,7 @@
 use ProcessMaker\Http\Controllers\Admin\TenantQueueController;
 use ProcessMaker\Http\Controllers\Admin\UserController;
 use ProcessMaker\Http\Controllers\AdminController;
+use ProcessMaker\Http\Controllers\Api\FileController as ApiFileController;
 use ProcessMaker\Http\Controllers\Auth\ChangePasswordController;
 use ProcessMaker\Http\Controllers\Auth\ClientController;
 use ProcessMaker\Http\Controllers\Auth\ForgotPasswordController;
@@ -49,6 +51,10 @@
     ->name('storage.serve');
 
 Route::middleware('auth', 'session_kill', 'sanitize', 'force_change_password', '2fa')->group(function () {
+    Route::get('files/{file}/contents', [ApiFileController::class, 'download'])
+        ->name('web.files.download')
+        ->middleware('can:view,file');
+
     // Routes related to Authentication (password reset, etc)
     // Auth::routes();
     Route::prefix('admin')->group(function () {

From 0dd55fb9f2cf0b42f64f2d25251d57fdfb65d72b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Fri, 12 Dec 2025 13:34:15 -0300
Subject: [PATCH 02/14] Php cs fixer fixes

---
 ...eld_to_the_process_request_token_table.php |  3 +-
 tests/Feature/Api/TaskControllerTest.php      |  4 +-
 .../unit/ProcessMaker/Models/ProcessTest.php  | 94 +++++++++----------
 3 files changed, 50 insertions(+), 51 deletions(-)

diff --git a/database/migrations/2025_04_08_115507_add_the_comments_field_to_the_process_request_token_table.php b/database/migrations/2025_04_08_115507_add_the_comments_field_to_the_process_request_token_table.php
index 69811599b1..4877eec6d9 100644
--- a/database/migrations/2025_04_08_115507_add_the_comments_field_to_the_process_request_token_table.php
+++ b/database/migrations/2025_04_08_115507_add_the_comments_field_to_the_process_request_token_table.php
@@ -4,8 +4,7 @@
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class extends Migration
-{
+return new class extends Migration {
     /**
      * Run the migrations.
      */
diff --git a/tests/Feature/Api/TaskControllerTest.php b/tests/Feature/Api/TaskControllerTest.php
index a545789a58..b0b832c32c 100644
--- a/tests/Feature/Api/TaskControllerTest.php
+++ b/tests/Feature/Api/TaskControllerTest.php
@@ -254,10 +254,10 @@ public function testShowTaskIncludesNewProperty()
         $user = User::factory()->create();
         $this->actingAs($user);
 
-        $comments = "This is a comment";
+        $comments = 'This is a comment';
 
         $task = ProcessRequestToken::factory()->create([
-            "comments" => $comments
+            'comments' => $comments,
         ]);
 
         $this->assertEquals($comments, $task->comments);
diff --git a/tests/unit/ProcessMaker/Models/ProcessTest.php b/tests/unit/ProcessMaker/Models/ProcessTest.php
index 337d42bfec..f9a5a77bb3 100644
--- a/tests/unit/ProcessMaker/Models/ProcessTest.php
+++ b/tests/unit/ProcessMaker/Models/ProcessTest.php
@@ -42,12 +42,12 @@ public function testGetAssignableUsersByAssignmentTypeWithManagerOnlyRules()
     {
         $manager1 = User::factory()->create(['status' => 'ACTIVE']);
         $manager2 = User::factory()->create(['status' => 'ACTIVE']);
-        
+
         // Create process with multiple managers (array)
         $process = Process::factory()->create([
-            'properties' => ['manager_id' => [$manager1->id, $manager2->id]]
+            'properties' => ['manager_id' => [$manager1->id, $manager2->id]],
         ]);
-        
+
         $request = ProcessRequest::factory()->create(['process_id' => $process->id]);
         $token = ProcessRequestToken::factory()->create([
             'process_id' => $process->id,
@@ -57,13 +57,13 @@ public function testGetAssignableUsersByAssignmentTypeWithManagerOnlyRules()
 
         // Mock getAssignmentRule to return different manager-only rules
         $managerOnlyRules = ['previous_task_assignee', 'requester', 'process_manager'];
-        
+
         foreach ($managerOnlyRules as $rule) {
             $tokenMock = Mockery::mock($token)->makePartial();
             $tokenMock->shouldReceive('getAssignmentRule')->andReturn($rule);
-            
+
             $result = $process->getAssignableUsersByAssignmentType($tokenMock);
-            
+
             // Should return both managers
             $this->assertIsArray($result);
             $this->assertCount(2, $result);
@@ -78,12 +78,12 @@ public function testGetAssignableUsersByAssignmentTypeWithManagerOnlyRules()
     public function testGetAssignableUsersByAssignmentTypeWithSingleManager()
     {
         $manager = User::factory()->create(['status' => 'ACTIVE']);
-        
+
         // Create process with single manager (not array)
         $process = Process::factory()->create([
-            'properties' => ['manager_id' => $manager->id]
+            'properties' => ['manager_id' => $manager->id],
         ]);
-        
+
         $request = ProcessRequest::factory()->create(['process_id' => $process->id]);
         $token = ProcessRequestToken::factory()->create([
             'process_id' => $process->id,
@@ -92,9 +92,9 @@ public function testGetAssignableUsersByAssignmentTypeWithSingleManager()
 
         $tokenMock = Mockery::mock($token)->makePartial();
         $tokenMock->shouldReceive('getAssignmentRule')->andReturn('process_manager');
-        
+
         $result = $process->getAssignableUsersByAssignmentType($tokenMock);
-        
+
         $this->assertIsArray($result);
         $this->assertCount(1, $result);
         $this->assertContains($manager->id, $result);
@@ -108,14 +108,14 @@ public function testGetAssignableUsersByAssignmentTypeWithGroupBasedRules()
         $manager = User::factory()->create(['status' => 'ACTIVE']);
         $assignableUser1 = User::factory()->create(['status' => 'ACTIVE']);
         $assignableUser2 = User::factory()->create(['status' => 'ACTIVE']);
-        
+
         $process = Process::factory()->create([
-            'properties' => ['manager_id' => $manager->id]
+            'properties' => ['manager_id' => $manager->id],
         ]);
-        
+
         $request = ProcessRequest::factory()->create(['process_id' => $process->id]);
         $elementId = 'test_element_' . uniqid();
-        
+
         // Create task assignments
         ProcessTaskAssignment::factory()->create([
             'process_id' => $process->id,
@@ -123,14 +123,14 @@ public function testGetAssignableUsersByAssignmentTypeWithGroupBasedRules()
             'assignment_id' => $assignableUser1->id,
             'assignment_type' => User::class,
         ]);
-        
+
         ProcessTaskAssignment::factory()->create([
             'process_id' => $process->id,
             'process_task_id' => $elementId,
             'assignment_id' => $assignableUser2->id,
             'assignment_type' => User::class,
         ]);
-        
+
         $token = ProcessRequestToken::factory()->create([
             'process_id' => $process->id,
             'process_request_id' => $request->id,
@@ -138,13 +138,13 @@ public function testGetAssignableUsersByAssignmentTypeWithGroupBasedRules()
         ]);
 
         $groupBasedRules = ['user_group', 'process_variable', 'rule_expression'];
-        
+
         foreach ($groupBasedRules as $rule) {
             $tokenMock = Mockery::mock($token)->makePartial();
             $tokenMock->shouldReceive('getAssignmentRule')->andReturn($rule);
-            
+
             $result = $process->getAssignableUsersByAssignmentType($tokenMock);
-            
+
             // Should return assignable users + manager
             $this->assertIsArray($result);
             $this->assertCount(3, $result);
@@ -160,11 +160,11 @@ public function testGetAssignableUsersByAssignmentTypeWithGroupBasedRules()
     public function testGetAssignableUsersByAssignmentTypeWithEmptyElementId()
     {
         $manager = User::factory()->create(['status' => 'ACTIVE']);
-        
+
         $process = Process::factory()->create([
-            'properties' => ['manager_id' => $manager->id]
+            'properties' => ['manager_id' => $manager->id],
         ]);
-        
+
         $request = ProcessRequest::factory()->create(['process_id' => $process->id]);
         $token = ProcessRequestToken::factory()->create([
             'process_id' => $process->id,
@@ -174,9 +174,9 @@ public function testGetAssignableUsersByAssignmentTypeWithEmptyElementId()
 
         $tokenMock = Mockery::mock($token)->makePartial();
         $tokenMock->shouldReceive('getAssignmentRule')->andReturn('user_group');
-        
+
         $result = $process->getAssignableUsersByAssignmentType($tokenMock);
-        
+
         // Should only return manager when element_id is empty
         $this->assertIsArray($result);
         $this->assertCount(1, $result);
@@ -189,9 +189,9 @@ public function testGetAssignableUsersByAssignmentTypeWithEmptyElementId()
     public function testGetAssignableUsersByAssignmentTypeWithNullManager()
     {
         $process = Process::factory()->create([
-            'properties' => ['manager_id' => null]
+            'properties' => ['manager_id' => null],
         ]);
-        
+
         $request = ProcessRequest::factory()->create(['process_id' => $process->id]);
         $token = ProcessRequestToken::factory()->create([
             'process_id' => $process->id,
@@ -200,9 +200,9 @@ public function testGetAssignableUsersByAssignmentTypeWithNullManager()
 
         $tokenMock = Mockery::mock($token)->makePartial();
         $tokenMock->shouldReceive('getAssignmentRule')->andReturn('process_manager');
-        
+
         $result = $process->getAssignableUsersByAssignmentType($tokenMock);
-        
+
         // Should return empty array when manager_id is null
         $this->assertIsArray($result);
         $this->assertEmpty($result);
@@ -214,11 +214,11 @@ public function testGetAssignableUsersByAssignmentTypeWithNullManager()
     public function testGetAssignableUsersByAssignmentTypeWithUnknownRule()
     {
         $manager = User::factory()->create(['status' => 'ACTIVE']);
-        
+
         $process = Process::factory()->create([
-            'properties' => ['manager_id' => $manager->id]
+            'properties' => ['manager_id' => $manager->id],
         ]);
-        
+
         $request = ProcessRequest::factory()->create(['process_id' => $process->id]);
         $token = ProcessRequestToken::factory()->create([
             'process_id' => $process->id,
@@ -227,9 +227,9 @@ public function testGetAssignableUsersByAssignmentTypeWithUnknownRule()
 
         $tokenMock = Mockery::mock($token)->makePartial();
         $tokenMock->shouldReceive('getAssignmentRule')->andReturn('unknown_rule');
-        
+
         $result = $process->getAssignableUsersByAssignmentType($tokenMock);
-        
+
         // Should return empty array for unknown rules
         $this->assertIsArray($result);
         $this->assertEmpty($result);
@@ -242,13 +242,13 @@ public function testGetAssignableUsersByAssignmentTypeHandlesNestedArrays()
     {
         $manager1 = User::factory()->create(['status' => 'ACTIVE']);
         $manager2 = User::factory()->create(['status' => 'ACTIVE']);
-        
+
         // Simulate nested array scenario (shouldn't happen but test the normalization)
         // Note: The accessor will normalize this, but we test the normalization logic
         $process = Process::factory()->create([
-            'properties' => ['manager_id' => [[$manager1->id], [$manager2->id]]]
+            'properties' => ['manager_id' => [[$manager1->id], [$manager2->id]]],
         ]);
-        
+
         $request = ProcessRequest::factory()->create(['process_id' => $process->id]);
         $token = ProcessRequestToken::factory()->create([
             'process_id' => $process->id,
@@ -257,9 +257,9 @@ public function testGetAssignableUsersByAssignmentTypeHandlesNestedArrays()
 
         $tokenMock = Mockery::mock($token)->makePartial();
         $tokenMock->shouldReceive('getAssignmentRule')->andReturn('process_manager');
-        
+
         $result = $process->getAssignableUsersByAssignmentType($tokenMock);
-        
+
         // Should flatten and return both managers
         $this->assertIsArray($result);
         $this->assertCount(2, $result);
@@ -278,14 +278,14 @@ public function testGetAssignableUsersByAssignmentTypeRemovesDuplicates()
     {
         $manager = User::factory()->create(['status' => 'ACTIVE']);
         $assignableUser = User::factory()->create(['status' => 'ACTIVE']);
-        
+
         $process = Process::factory()->create([
-            'properties' => ['manager_id' => $manager->id]
+            'properties' => ['manager_id' => $manager->id],
         ]);
-        
+
         $request = ProcessRequest::factory()->create(['process_id' => $process->id]);
         $elementId = 'test_element_' . uniqid();
-        
+
         // Create task assignment with manager as assignable user (duplicate scenario)
         ProcessTaskAssignment::factory()->create([
             'process_id' => $process->id,
@@ -293,14 +293,14 @@ public function testGetAssignableUsersByAssignmentTypeRemovesDuplicates()
             'assignment_id' => $manager->id, // Same as manager
             'assignment_type' => User::class,
         ]);
-        
+
         ProcessTaskAssignment::factory()->create([
             'process_id' => $process->id,
             'process_task_id' => $elementId,
             'assignment_id' => $assignableUser->id,
             'assignment_type' => User::class,
         ]);
-        
+
         $token = ProcessRequestToken::factory()->create([
             'process_id' => $process->id,
             'process_request_id' => $request->id,
@@ -309,9 +309,9 @@ public function testGetAssignableUsersByAssignmentTypeRemovesDuplicates()
 
         $tokenMock = Mockery::mock($token)->makePartial();
         $tokenMock->shouldReceive('getAssignmentRule')->andReturn('user_group');
-        
+
         $result = $process->getAssignableUsersByAssignmentType($tokenMock);
-        
+
         // Should return unique values (manager should appear only once)
         $this->assertIsArray($result);
         $this->assertCount(2, $result); // manager + assignableUser (no duplicates)

From 72d3190d408eeecd0538d6f5fa745f8ac5019ba0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 17 Dec 2025 13:34:13 -0300
Subject: [PATCH 03/14] Add microserviceHost to layout

---
 resources/views/layouts/layout.blade.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/views/layouts/layout.blade.php b/resources/views/layouts/layout.blade.php
index 9843813b0f..253d4343c4 100644
--- a/resources/views/layouts/layout.blade.php
+++ b/resources/views/layouts/layout.blade.php
@@ -141,7 +141,8 @@ class="main flex-grow-1 h-100
   window.ProcessMaker.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
   window.ProcessMaker.ai = {
     ragCollections: @json(config('ai.rag_collections.enabled')),
-    genieClientTimeout: @json(config('ai.genie_client.timeout'))
+    genieClientTimeout: @json(config('ai.genie_client.timeout')),
+    microserviceHost: @json(config('app.ai_microservice_host'))
   };
 </script>
 <script src="{{ mix('js/app-layout.js') }}"></script>

From a49554193a28c91cba7870cddbb49acb3838233b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 7 Jan 2026 11:18:19 -0300
Subject: [PATCH 04/14] Move logs logic from email start event package. Add
 base logs ui for Agents

---
 .../Http/Controllers/Admin/LogsController.php |  20 ++
 .../Http/Middleware/GenerateMenus.php         |   8 +
 .../components/Logs/BaseTable/BaseTable.vue   |  61 ++++++
 .../logs/components/Logs/BaseTable/index.js   |   3 +
 .../components/Logs/HeaderBar/HeaderBar.vue   | 122 ++++++++++++
 .../logs/components/Logs/HeaderBar/index.js   |   3 +
 .../Logs/LogContainer/LogContainer.vue        | 104 +++++++++++
 .../components/Logs/LogContainer/index.js     |   3 +
 .../components/Logs/LogTable/LogTable.vue     | 176 ++++++++++++++++++
 .../logs/components/Logs/LogTable/index.js    |   3 +
 .../components/Logs/Pagination/Pagination.vue |  89 +++++++++
 .../logs/components/Logs/Pagination/index.js  |   3 +
 .../logs/components/Logs/Sidebar/Sidebar.vue  | 173 +++++++++++++++++
 .../logs/components/Logs/Sidebar/index.js     |   3 +
 .../js/admin/logs/components/Logs/routes.js   |  41 ++++
 resources/js/admin/logs/index.js              |  26 +++
 resources/js/admin/logs/utils/date.js         |  74 ++++++++
 resources/views/admin/logs/index.blade.php    |  28 +++
 routes/web.php                                |   7 +
 webpack.mix.js                                |   1 +
 20 files changed, 948 insertions(+)
 create mode 100644 ProcessMaker/Http/Controllers/Admin/LogsController.php
 create mode 100644 resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
 create mode 100644 resources/js/admin/logs/components/Logs/BaseTable/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
 create mode 100644 resources/js/admin/logs/components/Logs/HeaderBar/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
 create mode 100644 resources/js/admin/logs/components/Logs/LogContainer/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
 create mode 100644 resources/js/admin/logs/components/Logs/LogTable/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/Pagination/Pagination.vue
 create mode 100644 resources/js/admin/logs/components/Logs/Pagination/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
 create mode 100644 resources/js/admin/logs/components/Logs/Sidebar/index.js
 create mode 100644 resources/js/admin/logs/components/Logs/routes.js
 create mode 100644 resources/js/admin/logs/index.js
 create mode 100644 resources/js/admin/logs/utils/date.js
 create mode 100644 resources/views/admin/logs/index.blade.php

diff --git a/ProcessMaker/Http/Controllers/Admin/LogsController.php b/ProcessMaker/Http/Controllers/Admin/LogsController.php
new file mode 100644
index 0000000000..37ef170c8c
--- /dev/null
+++ b/ProcessMaker/Http/Controllers/Admin/LogsController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace ProcessMaker\Http\Controllers\Admin;
+
+use Illuminate\Http\Request;
+use ProcessMaker\Http\Controllers\Controller;
+
+class LogsController extends Controller
+{
+    /**
+     * Display the logs index page.
+     * This view loads log components from installed packages (package-email-start-event, package-ai).
+     *
+     * @return \Illuminate\Contracts\View\View
+     */
+    public function index()
+    {
+        return view('admin.logs.index');
+    }
+}
diff --git a/ProcessMaker/Http/Middleware/GenerateMenus.php b/ProcessMaker/Http/Middleware/GenerateMenus.php
index f714b52ac5..4ffa3153e6 100644
--- a/ProcessMaker/Http/Middleware/GenerateMenus.php
+++ b/ProcessMaker/Http/Middleware/GenerateMenus.php
@@ -128,6 +128,14 @@ public function handle(Request $request, Closure $next)
                     'file' => "data:image/svg+xml;base64,{$devlinkIcon}",
                 ]);
             }
+            if (\Auth::user()->canAny('view-settings|edit-settings') &&
+                (hasPackage('package-email-start-event') || hasPackage('package-ai'))) {
+                $submenu->add(__('Logs'), [
+                    'route' => 'admin.logs',
+                    'icon' => 'fa-bars',
+                    'id' => 'admin-logs',
+                ]);
+            }
         });
         Menu::make('sidebar_task', function ($menu) {
             $submenu = $menu->add(__('Tasks'));
diff --git a/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
new file mode 100644
index 0000000000..120ae42de4
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="
+      tw-flex-1 tw-overflow-auto tw-rounded-xl tw-border tw-border-gray-200
+      tw-shadow-md tw-shadow-zinc-200
+    "
+  >
+    <table class="tw-w-full tw-text-left tw-text-sm">
+      <thead class="tw-bg-gray-50 tw-text-zinc-400">
+        <tr>
+          <th
+            v-for="column in columns"
+            :key="column.key"
+            class="tw-px-6 tw-py-4 tw-font-medium tw-whitespace-nowrap"
+          >
+            {{ column.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(item, idx) in data"
+          :key="idx"
+          class="tw-border-t tw-border-zinc-200"
+        >
+          <td
+            v-for="column in columns"
+            :key="column.key"
+            class="tw-px-6 tw-py-4 tw-text-gray-600 tw-border-b tw-border-gray-200 tw-whitespace-nowrap"
+          >
+            {{ getItemValue(item, column) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    columns: { type: Array, required: true },
+    data: { type: Array, required: true },
+  },
+  methods: {
+    getItemValue(item, column) {
+      // if key is a dot-separated string, get the nested value from the item
+      if (column.key.includes('.')) {
+        return column.key.split('.').reduce((val, part) => (val != null ? val[part] : undefined), item);
+      }
+
+      if (typeof column.format === 'function') {
+        return column.format(item[column.key]);
+      }
+
+      return item[column.key];
+    },
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/BaseTable/index.js b/resources/js/admin/logs/components/Logs/BaseTable/index.js
new file mode 100644
index 0000000000..f8430fb194
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/BaseTable/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as BaseTable } from './BaseTable.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
new file mode 100644
index 0000000000..d33b721828
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="tw-flex tw-flex-row tw-gap-x-8 tw-justify-between tw-w-full sm:tw-flex-row">
+    <!-- Email log type tabs - only shown for email category -->
+    <div
+      v-if="isEmailCategory"
+      class="tw-flex tw-items-center tw-gap-2 tw-bg-gray-100 tw-rounded-lg tw-p-1"
+    >
+      <RouterLink
+        to="/email/errors"
+        class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
+        :class="tabClasses('errors')"
+      >
+        Error Logs
+      </RouterLink>
+      <RouterLink
+        to="/email/matched"
+        class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
+        :class="tabClasses('matched')"
+      >
+        Matched Logs
+      </RouterLink>
+      <RouterLink
+        to="/email/total"
+        class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
+        :class="tabClasses('total')"
+      >
+        Total Logs
+      </RouterLink>
+    </div>
+
+    <!-- Agents category tabs -->
+    <div
+      v-else-if="isAgentsCategory"
+      class="tw-flex tw-items-center tw-gap-2 tw-bg-gray-100 tw-rounded-lg tw-p-1"
+    >
+      <RouterLink
+        to="/agents/design"
+        class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
+        :class="tabClasses('design')"
+      >
+        Design Mode Logs
+      </RouterLink>
+      <RouterLink
+        to="/agents/execution"
+        class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
+        :class="tabClasses('execution')"
+      >
+        Execution Logs
+      </RouterLink>
+    </div>
+
+    <!-- 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 class="tw-relative tw-w-full tw-flex tw-items-center tw-gap-1">
+        <i class="fas fa-search" />
+        <input
+          ref="searchInput"
+          type="text"
+          class="
+            tw-h-8
+            tw-w-full
+            tw-pl-3
+            tw-pr-3
+            tw-text-sm
+            tw-outline-none
+            tw-ring-0
+            placeholder:tw-text-zinc-400
+          "
+          placeholder="Search here"
+          :value="value"
+          @input="onInput"
+          @keypress="onKeypress"
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { type: String, default: '' },
+  },
+  computed: {
+    isEmailCategory() {
+      return this.$route.path.startsWith('/email');
+    },
+    isAgentsCategory() {
+      return this.$route.path.startsWith('/agents');
+    },
+  },
+  watch: {
+    '$route.path': {
+      handler() {
+        // reset input value in search when route changes
+        this.$emit('input', '');
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    tabClasses(tab) {
+      const currentRoute = this.$route.params.logType;
+
+      return currentRoute === tab
+        ? 'tw-bg-white tw-font-semibold tw-text-zinc-900'
+        : 'tw-text-zinc-700 hover:tw-bg-zinc-50';
+    },
+    onInput(event) {
+      this.$emit('input', event.target.value);
+    },
+    onKeypress(event) {
+      if (event.charCode === 13) {
+        this.$emit('search');
+      }
+    },
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/HeaderBar/index.js b/resources/js/admin/logs/components/Logs/HeaderBar/index.js
new file mode 100644
index 0000000000..c2176bf01c
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/HeaderBar/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as HeaderBar } from './HeaderBar.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
new file mode 100644
index 0000000000..1fd434353c
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="tw-flex tw-gap-6">
+    <sidebar />
+
+    <section class="tw-flex-1 tw-overflow-hidden">
+      <div class="tw-flex tw-flex-col tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white tw-h-screen">
+        <header-bar
+          v-model="search"
+          @search="onHandleSearch"
+        />
+
+        <div class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0">
+          <div class="tw-flex tw-items-center tw-justify-between tw-my-8 tw-shrink-0">
+            <h2 class="tw-text-2xl tw-font-semibold tw-text-zinc-900">
+              {{ title }}
+            </h2>
+            <div v-if="showExportButton">
+              <a
+                :href="getExportUrl"
+                target="_blank"
+                class="
+                  tw-inline-flex
+                  tw-items-center
+                  tw-gap-2
+                  tw-rounded-lg
+                  tw-bg-blue-500
+                  tw-px-3
+                  tw-py-2
+                  tw-text-sm
+                  tw-font-normal
+                  tw-text-white
+                "
+              >
+                <i class="fas fa-download" />
+                <span>{{ $t('Export to CSV') }}</span>
+              </a>
+            </div>
+          </div>
+
+          <RouterView ref="routerView" class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0" />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { Sidebar } from '../Sidebar';
+import { HeaderBar } from '../HeaderBar';
+
+export default {
+  components: {
+    Sidebar,
+    HeaderBar,
+  },
+  data() {
+    return {
+      search: '',
+    };
+  },
+  computed: {
+    isEmailCategory() {
+      return this.$route.path.startsWith('/email');
+    },
+    isAgentsCategory() {
+      return this.$route.path.startsWith('/agents');
+    },
+    logType() {
+      return this.$route.params.logType;
+    },
+    title() {
+      if (this.isAgentsCategory) {
+        const agentTitles = {
+          design: 'Design Mode Logs',
+          execution: 'Execution Logs',
+        };
+        return agentTitles[this.logType] ?? 'FlowGenie Agents Logs';
+      }
+
+      const titles = {
+        errors: 'Error Logs',
+        matched: 'Matched Logs',
+        total: 'Total Logs',
+      };
+      return titles[this.logType] ?? '';
+    },
+    showExportButton() {
+      // Only show export button for email category (has export endpoint)
+      return this.isEmailCategory;
+    },
+    getExportUrl() {
+      return `/admin/logs/export/csv?type=${this.logType}&search=${this.search}`;
+    },
+  },
+  methods: {
+    onHandleSearch() {
+      if (this.$refs.routerView) {
+        this.$refs.routerView.refresh({ search: this.search });
+      }
+    },
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/LogContainer/index.js b/resources/js/admin/logs/components/Logs/LogContainer/index.js
new file mode 100644
index 0000000000..d0ad929b7e
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/LogContainer/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as LogContainer } from './LogContainer.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue b/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
new file mode 100644
index 0000000000..dc688bbbd7
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0">
+    <base-table
+      :columns="columns"
+      :data="data"
+    />
+    <pagination
+      class="tw-mt-3 tw-shrink-0"
+      :page="page"
+      :total-pages="totalPages"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
+
+<script>
+import { BaseTable } from '../BaseTable';
+import { Pagination } from '../Pagination';
+import { dateFormatter } from '../../../utils/date';
+
+export default {
+  components: {
+    BaseTable,
+    Pagination,
+  },
+  props: {
+    category: {
+      type: String,
+      default: 'email',
+    },
+    logType: {
+      type: String,
+      default: 'errors',
+    },
+  },
+  data() {
+    return {
+      data: [],
+      page: 1,
+      totalPages: 1,
+      perPage: 15,
+    };
+  },
+  computed: {
+    columns() {
+      // Email log columns
+      const emailColumns = {
+        errors: [
+          { key: 'id', label: this.$t('ID') },
+          { key: 'imap_server', label: this.$t('IMAP Server') },
+          { key: 'email', label: this.$t('User Email') },
+          { key: 'from.email', label: this.$t('Email From') },
+          { key: 'error_code', label: this.$t('Error Code') },
+          { key: 'error_description', label: this.$t('Description') },
+          { key: 'date', label: this.$t('Date'), format: dateFormatter },
+        ],
+        matched: [
+          { key: 'id', label: this.$t('ID') },
+          { key: 'imap_server', label: this.$t('IMAP Server') },
+          { key: 'email', label: this.$t('User Email') },
+          { key: 'from.email', label: this.$t('Email From') },
+          { key: 'subject', label: this.$t('Subject') },
+          { key: 'body', label: this.$t('Body') },
+          { key: 'date_email', label: this.$t('Date Email'), format: dateFormatter },
+          { key: 'process_name', label: this.$t('Process') },
+          { key: 'process_request_id', label: this.$t('Request ID') },
+          { key: 'user_fullname', label: this.$t('User') },
+          { key: 'files_attached', label: this.$t('Files Attached') },
+          { key: 'created_at', label: this.$t('Created At'), format: dateFormatter },
+        ],
+        total: [
+          { key: 'execution_id', label: this.$t('ID') },
+          { key: 'imap_server', label: this.$t('IMAP Server') },
+          { key: 'email', label: this.$t('User Email') },
+          { key: 'total_emails', label: this.$t('Total Emails') },
+          { key: 'total_matched', label: this.$t('Total Matches') },
+          { key: 'created_at', label: this.$t('Date'), format: dateFormatter },
+        ],
+      };
+
+      // FlowGenie Agents log columns
+      const agentColumns = {
+        design: [
+          { key: 'flow_genie_name', label: this.$t('FlowGenie Name') },
+          { key: 'user_name', label: this.$t('User') },
+          { key: 'status', label: this.$t('Status') },
+          { key: 'duration', label: this.$t('Execution Time') },
+          { key: 'tools', label: this.$t('Tools') },
+          { key: 'tokens_used', label: this.$t('Tokens Used') },
+          { key: 'created_at', label: this.$t('Date'), format: dateFormatter },
+        ],
+        execution: [
+          { key: 'process_request_id', label: this.$t('Request ID') },
+          { key: 'node_id', label: this.$t('Node ID') },
+          { key: 'flow_genie_name', label: this.$t('FlowGenie Name') },
+          { key: 'user_name', label: this.$t('User') },
+          { key: 'status', label: this.$t('Status') },
+          { key: 'duration', label: this.$t('Execution Time') },
+          { key: 'tools', label: this.$t('Tools') },
+          { key: 'tokens_used', label: this.$t('Tokens Used') },
+          { key: 'created_at', label: this.$t('Date'), format: dateFormatter },
+        ],
+      };
+
+      if (this.category === 'agents') {
+        return agentColumns[this.logType] ?? agentColumns.design;
+      }
+
+      return emailColumns[this.logType] ?? [];
+    },
+    apiEndpoint() {
+      if (this.category === 'agents') {
+        // Map logType to API endpoint for agents
+        const agentEndpoints = {
+          design: '/api/1.0/flow-genie/logs/design',
+          execution: '/api/1.0/flow-genie/logs/execution',
+        };
+        return agentEndpoints[this.logType] ?? agentEndpoints.design;
+      }
+      return `/api/1.1/email-start-event/logs/${this.logType}`;
+    },
+  },
+  watch: {
+    category: {
+      handler() {
+        this.resetAndFetch();
+      },
+    },
+    logType: {
+      handler() {
+        this.resetAndFetch();
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    resetAndFetch() {
+      this.page = 1;
+      this.perPage = 15;
+      this.totalPages = 1;
+      this.fetchData();
+    },
+    async fetchData(params = {}) {
+      try {
+        const response = await ProcessMaker.apiClient.get(this.apiEndpoint, {
+          params: {
+            page: this.page,
+            per_page: this.perPage,
+            ...params,
+          },
+        });
+        const { data, ...pagination } = response.data;
+
+        this.data = data;
+        // Pagination data
+        this.totalPages = pagination.last_page;
+        this.page = pagination.current_page;
+        this.perPage = pagination.per_page;
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+        this.data = [];
+      }
+    },
+    handlePageChange(newPage) {
+      this.page = newPage;
+      this.fetchData();
+    },
+    refresh(params = {}) {
+      this.page = 1;
+      this.fetchData(params);
+    },
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/LogTable/index.js b/resources/js/admin/logs/components/Logs/LogTable/index.js
new file mode 100644
index 0000000000..d07b1072e7
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/LogTable/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as LogTable } from './LogTable.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/Pagination/Pagination.vue b/resources/js/admin/logs/components/Logs/Pagination/Pagination.vue
new file mode 100644
index 0000000000..33b47377b4
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/Pagination/Pagination.vue
@@ -0,0 +1,89 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="tw-flex tw-items-center tw-justify-start">
+    <nav class="tw-inline-flex tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
+      <button
+        type="button"
+        class="tw-px-3 tw-py-1.5 tw-text-sm tw-text-black tw-font-semibold"
+        :disabled="page === 1"
+        @click="handlePrev"
+      >
+        Previous
+      </button>
+      <button
+        v-for="(p, idx) in displayPages"
+        :key="`p-${idx}-${p}`"
+        type="button"
+        class="tw-border-l tw-border-zinc-300 tw-px-3 tw-py-1.5 tw-text-sm tw-text-black tw-font-semibold"
+        :class="
+          typeof p === 'number'
+            ? (p === page ? 'tw-bg-zinc-100 tw-text-zinc-900' : 'tw-text-zinc-700 hover:tw-bg-zinc-50')
+            : 'tw-text-zinc-400'
+        "
+        :disabled="p === '...'"
+        @click="typeof p === 'number' && handleGo(p)"
+      >
+        {{ p }}
+      </button>
+      <button
+        type="button"
+        class="tw-border-l tw-border-zinc-300 tw-px-3 tw-py-1.5 tw-text-sm tw-text-black tw-font-semibold"
+        :disabled="page === totalPages"
+        @click="handleNext"
+      >
+        Next
+      </button>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    page: { type: Number, required: true },
+    totalPages: { type: Number, required: true },
+  },
+  computed: {
+    displayPages() {
+      const pages = [];
+      const current = this.page;
+      const total = this.totalPages;
+      if (total <= 7) {
+        for (let i = 1; i <= total; i += 1) pages.push(i);
+        return pages;
+      }
+
+      const add = (val) => {
+        if (pages[pages.length - 1] !== val) pages.push(val);
+      };
+
+      add(1);
+      if (current > 3) add('...');
+
+      const start = Math.max(2, current - 1);
+      const end = Math.min(total - 1, current + 1);
+      for (let i = start; i <= end; i += 1) add(i);
+
+      if (current < total - 2) add('...');
+      add(total);
+      return pages;
+    },
+  },
+  methods: {
+    handleGo(pageNumber) {
+      this.$emit('page-change', pageNumber);
+    },
+    handlePrev() {
+      if (this.page > 1) {
+        this.$emit('page-change', this.page - 1);
+      }
+    },
+    handleNext() {
+      if (this.page < this.totalPages) {
+        this.$emit('page-change', this.page + 1);
+      }
+    },
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/Pagination/index.js b/resources/js/admin/logs/components/Logs/Pagination/index.js
new file mode 100644
index 0000000000..d2d0ae6aa6
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/Pagination/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Pagination } from './Pagination.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
new file mode 100644
index 0000000000..b47e9561f2
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
@@ -0,0 +1,173 @@
+<template>
+  <aside class="tw-w-72 tw-shrink-0">
+    <div class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-3 tw-bg-white tw-h-screen">
+      <div class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-uppercase tw-text-zinc-500">
+        Logs
+      </div>
+      <nav class="tw-mt-1">
+        <!-- Email Category -->
+        <div class="tw-mt-3">
+          <button
+            v-b-toggle.collapse-email
+            class="
+              tw-w-full
+              tw-flex
+              tw-items-center
+              tw-justify-between
+              tw-rounded-lg
+              tw-px-3
+              tw-py-2
+              tw-text-sm
+              tw-font-medium
+              tw-text-zinc-700
+              hover:tw-bg-zinc-50
+              tw-cursor-pointer
+              tw-transition-colors
+            "
+          >
+            <span class="tw-inline-flex tw-items-center tw-gap-2">
+              <i class="fas fa-envelope" />
+              Email
+            </span>
+            <i
+              class="fas fa-chevron-right tw-w-4 tw-h-4 tw-transition-transform"
+              :class="{ 'tw-rotate-90': collapseStates.email }"
+            />
+          </button>
+
+          <!-- Email Logs Subcategory -->
+          <b-collapse
+            id="collapse-email"
+            class="tw-ml-4 tw-mt-1"
+            :visible="isEmailActive"
+          >
+            <RouterLink
+              to="/email/errors"
+              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="isEmailActive ? 'tw-bg-blue-50 tw-font-semibold tw-text-blue-500' : 'tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50'"
+            >
+              <span class="tw-inline-flex tw-items-center tw-gap-2">Email Start Event</span>
+            </RouterLink>
+          </b-collapse>
+        </div>
+
+        <!-- Agents Category -->
+        <div class="tw-mt-3">
+          <button
+            v-b-toggle.collapse-agents
+            class="
+              tw-w-full
+              tw-flex
+              tw-items-center
+              tw-justify-between
+              tw-rounded-lg
+              tw-px-3
+              tw-py-2
+              tw-text-sm
+              tw-font-medium
+              tw-text-zinc-700
+              hover:tw-bg-zinc-50
+              tw-cursor-pointer
+              tw-transition-colors
+            "
+          >
+            <span class="tw-inline-flex tw-items-center tw-gap-2">
+              <i class="fas fa-robot" />
+              FlowGenie Agents
+            </span>
+            <i
+              class="fas fa-chevron-right tw-w-4 tw-h-4 tw-transition-transform"
+              :class="{ 'tw-rotate-90': collapseStates.agents }"
+            />
+          </button>
+
+          <!-- Agents Logs Subcategory -->
+          <b-collapse
+            id="collapse-agents"
+            class="tw-ml-4 tw-mt-1"
+            :visible="isAgentsActive"
+          >
+            <RouterLink
+              to="/agents"
+              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="isAgentsActive ? 'tw-bg-blue-50 tw-font-semibold tw-text-blue-500' : 'tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50'"
+            >
+              <span class="tw-inline-flex tw-items-center tw-gap-2">FlowGenie Agents logs</span>
+            </RouterLink>
+          </b-collapse>
+        </div>
+      </nav>
+    </div>
+  </aside>
+</template>
+
+<script>
+export default {
+  name: 'LogsSidebar',
+  data() {
+    return {
+      collapseStates: {
+        email: this.$route.path.startsWith('/email'),
+        agents: this.$route.path.startsWith('/agents'),
+      },
+    };
+  },
+  computed: {
+    isEmailActive() {
+      return this.$route.path.startsWith('/email');
+    },
+    isAgentsActive() {
+      return this.$route.path.startsWith('/agents');
+    },
+  },
+  watch: {
+    // Auto-expand the category when navigating to it
+    '$route.path': {
+      handler(path) {
+        if (path.startsWith('/agents') && !this.collapseStates.agents) {
+          this.$root.$emit('bv::toggle::collapse', 'collapse-agents');
+        }
+        if (path.startsWith('/email') && !this.collapseStates.email) {
+          this.$root.$emit('bv::toggle::collapse', 'collapse-email');
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    // Listen for collapse events to update icon rotation
+    this.$root.$on('bv::collapse::state', (id, state) => {
+      if (id === 'collapse-email') {
+        this.collapseStates.email = state;
+      } else if (id === 'collapse-agents') {
+        this.collapseStates.agents = state;
+      }
+    });
+  },
+  beforeDestroy() {
+    // Clean up event listener
+    this.$root.$off('bv::collapse::state');
+  },
+};
+</script>
+
diff --git a/resources/js/admin/logs/components/Logs/Sidebar/index.js b/resources/js/admin/logs/components/Logs/Sidebar/index.js
new file mode 100644
index 0000000000..a4f8b5ce94
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/Sidebar/index.js
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Sidebar } from './Sidebar.vue';
+
diff --git a/resources/js/admin/logs/components/Logs/routes.js b/resources/js/admin/logs/components/Logs/routes.js
new file mode 100644
index 0000000000..cee148dcc5
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/routes.js
@@ -0,0 +1,41 @@
+import { LogTable } from './LogTable';
+
+export default {};
+
+export const routes = [
+  {
+    name: 'logs.index',
+    path: '/',
+    redirect: '/email/errors',
+  },
+  // Email logs routes
+  {
+    name: 'logs.email',
+    path: '/email/:logType',
+    component: LogTable,
+    props(route) {
+      return {
+        category: 'email',
+        logType: route.params.logType,
+      };
+    },
+  },
+  // FlowGenie Agents logs routes
+  {
+    name: 'logs.agents.redirect',
+    path: '/agents',
+    redirect: '/agents/design',
+  },
+  {
+    name: 'logs.agents',
+    path: '/agents/:logType',
+    component: LogTable,
+    props(route) {
+      return {
+        category: 'agents',
+        logType: route.params.logType,
+      };
+    },
+  },
+];
+
diff --git a/resources/js/admin/logs/index.js b/resources/js/admin/logs/index.js
new file mode 100644
index 0000000000..bdf9dc220b
--- /dev/null
+++ b/resources/js/admin/logs/index.js
@@ -0,0 +1,26 @@
+import { LogContainer } from './components/Logs/LogContainer';
+import { routes } from './components/Logs/routes';
+
+// eslint-disable-next-line no-undef
+Vue.use(VueRouter);
+
+// eslint-disable-next-line no-undef
+const router = new VueRouter({
+  mode: 'history',
+  base: '/admin/logs',
+  routes,
+});
+
+window.Vue.component('admin-logs', LogContainer);
+
+document.addEventListener('DOMContentLoaded', () => {
+  new window.Vue({
+    el: '#admin-logs-main',
+    router,
+    components: {
+      LogContainer,
+    },
+    render: (h) => h(LogContainer),
+  });
+});
+
diff --git a/resources/js/admin/logs/utils/date.js b/resources/js/admin/logs/utils/date.js
new file mode 100644
index 0000000000..491fa1a8d8
--- /dev/null
+++ b/resources/js/admin/logs/utils/date.js
@@ -0,0 +1,74 @@
+/* eslint-disable import/prefer-default-export */
+import { DateTime } from 'luxon';
+
+/**
+ * Convert PHP/moment date format to Luxon format
+ * @param {string} format - PHP/moment format string
+ * @returns {string} - Luxon format string
+ */
+const convertToLuxonFormat = (format) => {
+  // Common conversions from PHP/moment to Luxon
+  const replacements = {
+    YYYY: 'yyyy',
+    YY: 'yy',
+    MM: 'LL',
+    M: 'L',
+    DD: 'dd',
+    D: 'd',
+    HH: 'HH',
+    hh: 'hh',
+    H: 'H',
+    h: 'h',
+    mm: 'mm',
+    m: 'm',
+    ss: 'ss',
+    s: 's',
+    A: 'a',
+    a: 'a',
+  };
+
+  let luxonFormat = format;
+  Object.entries(replacements).forEach(([from, to]) => {
+    luxonFormat = luxonFormat.replace(new RegExp(from, 'g'), to);
+  });
+
+  return luxonFormat;
+};
+
+/**
+ * Format date to user's date format
+ * @param {string} value - The date to format
+ * @returns {string} - The formatted date
+ */
+export const dateFormatter = (value) => {
+  let datetimeConfig = 'dd/LL/yyyy hh:mm';
+  let timezoneConfig = 'UTC';
+
+  if (
+    typeof ProcessMaker !== 'undefined'
+    && ProcessMaker.user
+    && ProcessMaker.user.datetime_format
+  ) {
+    timezoneConfig = ProcessMaker.user.timezone;
+    datetimeConfig = convertToLuxonFormat(ProcessMaker.user.datetime_format);
+  }
+
+  if (value) {
+    const date = DateTime.fromISO(value, { zone: 'utc' }).setZone(timezoneConfig);
+
+    if (date.isValid) {
+      return date.toFormat(datetimeConfig);
+    }
+
+    // Try parsing as SQL format
+    const sqlDate = DateTime.fromSQL(value, { zone: 'utc' }).setZone(timezoneConfig);
+    if (sqlDate.isValid) {
+      return sqlDate.toFormat(datetimeConfig);
+    }
+
+    return value;
+  }
+
+  return '-';
+};
+
diff --git a/resources/views/admin/logs/index.blade.php b/resources/views/admin/logs/index.blade.php
new file mode 100644
index 0000000000..9a7ca90a61
--- /dev/null
+++ b/resources/views/admin/logs/index.blade.php
@@ -0,0 +1,28 @@
+@extends('layouts.layout')
+
+@section('title')
+    {{__('Logs')}}
+@endsection
+
+@section('sidebar')
+    @include('layouts.sidebar', ['sidebar'=> Menu::get('sidebar_admin')])
+@endsection
+
+@section('breadcrumbs')
+    @include('shared.breadcrumbs', ['routes' => [
+        __('Admin') => route('admin.index'),
+        __('Logs') => null,
+    ]])
+@endsection
+
+@section('content')
+    <div class="page-content px-3 mb-0" id="admin-logs-main"></div>
+@endsection
+
+@section('js')
+    <script>
+        const permission = @json(\Auth::user()->hasPermissionsFor('settings'));
+    </script>
+    <script src="{{mix('js/admin/logs/index.js')}}"></script>
+@endsection
+
diff --git a/routes/web.php b/routes/web.php
index 30f1cdaa35..589cb3995f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -8,6 +8,7 @@
 use ProcessMaker\Http\Controllers\Admin\DevLinkController;
 use ProcessMaker\Http\Controllers\Admin\GroupController;
 use ProcessMaker\Http\Controllers\Admin\LdapLogsController;
+use ProcessMaker\Http\Controllers\Admin\LogsController;
 use ProcessMaker\Http\Controllers\Admin\QueuesController;
 use ProcessMaker\Http\Controllers\Admin\ScriptExecutorController;
 use ProcessMaker\Http\Controllers\Admin\SettingsController;
@@ -81,6 +82,12 @@
         // temporary, should be removed
         Route::get('security-logs/download/all', [ProcessMaker\Http\Controllers\Api\SecurityLogController::class, 'downloadForAllUsers'])->middleware('can:view-security-logs');
         Route::get('security-logs/download/{user}', [ProcessMaker\Http\Controllers\Api\SecurityLogController::class, 'downloadForUser'])->middleware('can:view-security-logs');
+
+        // Logs - available when package-email-start-event or package-ai is installed
+        if (hasPackage('package-email-start-event') || hasPackage('package-ai')) {
+            Route::get('logs', [LogsController::class, 'index'])->name('admin.logs')->middleware('can:view-settings');
+            Route::get('logs/{any}', [LogsController::class, 'index'])->name('admin.logs-any')->middleware('can:view-settings')->where('any', '.*');
+        }
     });
 
     Route::get('admin', [AdminController::class, 'index'])->name('admin.index');
diff --git a/webpack.mix.js b/webpack.mix.js
index 01253ace95..c93f125c10 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -104,6 +104,7 @@ mix
   .js("resources/js/admin/cssOverride/edit.js", "public/js/admin/cssOverride/edit.js")
   .js("resources/js/admin/script-executors/index.js", "public/js/admin/script-executors/index.js")
   .js("resources/js/admin/tenant-queues/index.js", "public/js/admin/tenant-queues/index.js")
+  .js("resources/js/admin/logs/index.js", "public/js/admin/logs/index.js")
 
   .js("resources/js/processes/index.js", "public/js/processes")
   .js("resources/js/processes/edit.js", "public/js/processes")

From 7be12fb221750302c5e203b5b1580a1b36f80dc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 7 Jan 2026 11:27:17 -0300
Subject: [PATCH 05/14] Add translation strings

---
 .../logs/components/Logs/HeaderBar/HeaderBar.vue     | 12 ++++++------
 .../components/Logs/LogContainer/LogContainer.vue    |  2 +-
 resources/lang/en.json                               |  6 ++++++
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
index d33b721828..4085475684 100644
--- a/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
+++ b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
@@ -10,21 +10,21 @@
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('errors')"
       >
-        Error Logs
+        {{ $t('Error Logs') }}
       </RouterLink>
       <RouterLink
         to="/email/matched"
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('matched')"
       >
-        Matched Logs
+        {{ $t('Matched Logs') }}
       </RouterLink>
       <RouterLink
         to="/email/total"
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('total')"
       >
-        Total Logs
+        {{ $t('Total Logs') }}
       </RouterLink>
     </div>
 
@@ -38,14 +38,14 @@
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('design')"
       >
-        Design Mode Logs
+        {{ $t('Design Mode Logs') }}
       </RouterLink>
       <RouterLink
         to="/agents/execution"
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('execution')"
       >
-        Execution Logs
+        {{ $t('Execution Logs') }}
       </RouterLink>
     </div>
 
@@ -68,7 +68,7 @@
             tw-ring-0
             placeholder:tw-text-zinc-400
           "
-          placeholder="Search here"
+          :placeholder="$t('Search here')"
           :value="value"
           @input="onInput"
           @keypress="onKeypress"
diff --git a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
index 1fd434353c..3aa08d07ca 100644
--- a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
+++ b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
@@ -12,7 +12,7 @@
         <div class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0">
           <div class="tw-flex tw-items-center tw-justify-between tw-my-8 tw-shrink-0">
             <h2 class="tw-text-2xl tw-font-semibold tw-text-zinc-900">
-              {{ title }}
+              {{ $t(title) }}
             </h2>
             <div v-if="showExportButton">
               <a
diff --git a/resources/lang/en.json b/resources/lang/en.json
index e580e5b49b..f95ae63b21 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -656,6 +656,7 @@
   "Description": "Description",
   "Design Screen": "Design Screen",
   "Design": "Design",
+  "Design Mode Logs": "Design Mode Logs",
   "Designer": "Designer",
   "Destination Screen": "Destination Screen",
   "Destination": "Destination",
@@ -899,6 +900,7 @@
   "Error Name": "Error Name",
   "Error": "Error",
   "Errors": "Errors",
+  "Error Logs": "Error Logs",
   "Event Based Gateway": "Event Based Gateway",
   "Event has multiple event definitions": "Event has multiple event definitions",
   "Event-based Gateway": "Event-based Gateway",
@@ -906,6 +908,7 @@
   "Event": "Event",
   "Exclusive Gateway": "Exclusive Gateway",
   "Execution Error": "Execution Error",
+  "Execution Logs": "Execution Logs",
   "Execution Log": "Execution Log",
   "Executor Successfully Built. You can now close this window. ": "Executor Successfully Built. You can now close this window. ",
   "Existing Array": "Existing Array",
@@ -979,6 +982,7 @@
   "Flow splits implicitly": "Flow splits implicitly",
   "Flow Variable": "Flow Variable",
   "FlowGenies": "FlowGenies",
+  "FlowGenie Agents Logs": "FlowGenie Agents Logs",
   "FolderCreated": "Folder Created",
   "FolderUpdated": "Folder Updated",
   "Font Size": "Font Size",
@@ -1255,6 +1259,7 @@
   "Manually Complete Request": "Manually Complete Request",
   "Manually reconfigure the dashboard using an existing one in the environment.": "Manually reconfigure the dashboard using an existing one in the environment.",
   "Mark as Priority": "Mark as Priority",
+  "Matched Logs": "Matched Logs",
   "Max Input": "Max Input",
   "Max Length": "Max Length",
   "Max": "Max",
@@ -2407,6 +2412,7 @@
   "Top Right": "Top Right",
   "Top": "Top",
   "Total Elements": "Total Elements",
+  "Total Logs": "Total Logs",
   "Translate into multiple languages.": "Translate into multiple languages.",
   "Translate process screens to a desired language": "Translate process screens to a desired language",
   "Translation in progress": "Translation in progress",

From 10229751aeb923343845911a9f698a161309925b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 7 Jan 2026 12:50:14 -0300
Subject: [PATCH 06/14] Fix routes issue

---
 routes/web.php | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/routes/web.php b/routes/web.php
index 589cb3995f..11287a4a62 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -86,6 +86,12 @@
         // Logs - available when package-email-start-event or package-ai is installed
         if (hasPackage('package-email-start-event') || hasPackage('package-ai')) {
             Route::get('logs', [LogsController::class, 'index'])->name('admin.logs')->middleware('can:view-settings');
+            // Export route must be before the wildcard route
+            if (hasPackage('package-email-start-event')) {
+                Route::get('logs/export/csv', [ProcessMaker\Package\PackageEmailStartEvent\Http\Controllers\EmailListenerLogController::class, 'exportToCsv'])
+                    ->name('admin.logs.export.csv')
+                    ->middleware('can:view-settings');
+            }
             Route::get('logs/{any}', [LogsController::class, 'index'])->name('admin.logs-any')->middleware('can:view-settings')->where('any', '.*');
         }
     });

From d43dc69dc80a1c7a44fd61ee1c701e03ef652a9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 7 Jan 2026 13:28:59 -0300
Subject: [PATCH 07/14] Add validation to check if packages are installed

---
 .../logs/components/Logs/Sidebar/Sidebar.vue  | 65 ++++++++++-----
 .../js/admin/logs/components/Logs/routes.js   | 79 +++++++++++++++----
 2 files changed, 109 insertions(+), 35 deletions(-)

diff --git a/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
index b47e9561f2..9b93c63759 100644
--- a/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
+++ b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
@@ -5,8 +5,11 @@
         Logs
       </div>
       <nav class="tw-mt-1">
-        <!-- Email Category -->
-        <div class="tw-mt-3">
+        <!-- Email Category - Only show if email package is installed -->
+        <div
+          v-if="hasEmailPackage"
+          class="tw-mt-3"
+        >
           <button
             v-b-toggle.collapse-email
             class="
@@ -54,15 +57,18 @@
                 tw-text-base
                 tw-cursor-pointer
               "
-              :class="isEmailActive ? 'tw-bg-blue-50 tw-font-semibold tw-text-blue-500' : 'tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50'"
+              :class="emailLinkClasses"
             >
               <span class="tw-inline-flex tw-items-center tw-gap-2">Email Start Event</span>
             </RouterLink>
           </b-collapse>
         </div>
 
-        <!-- Agents Category -->
-        <div class="tw-mt-3">
+        <!-- Agents Category - Only show if AI package is installed -->
+        <div
+          v-if="hasAiPackage"
+          class="tw-mt-3"
+        >
           <button
             v-b-toggle.collapse-agents
             class="
@@ -110,7 +116,7 @@
                 tw-text-base
                 tw-cursor-pointer
               "
-              :class="isAgentsActive ? 'tw-bg-blue-50 tw-font-semibold tw-text-blue-500' : 'tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50'"
+              :class="agentsLinkClasses"
             >
               <span class="tw-inline-flex tw-items-center tw-gap-2">FlowGenie Agents logs</span>
             </RouterLink>
@@ -122,33 +128,51 @@
 </template>
 
 <script>
+import { hasEmailPackage, hasAiPackage } from "../routes";
+
 export default {
-  name: 'LogsSidebar',
+  name: "LogsSidebar",
   data() {
     return {
       collapseStates: {
-        email: this.$route.path.startsWith('/email'),
-        agents: this.$route.path.startsWith('/agents'),
+        email: this.$route.path.startsWith("/email"),
+        agents: this.$route.path.startsWith("/agents"),
       },
     };
   },
   computed: {
+    hasEmailPackage() {
+      return hasEmailPackage();
+    },
+    hasAiPackage() {
+      return hasAiPackage();
+    },
     isEmailActive() {
-      return this.$route.path.startsWith('/email');
+      return this.$route.path.startsWith("/email");
     },
     isAgentsActive() {
-      return this.$route.path.startsWith('/agents');
+      return this.$route.path.startsWith("/agents");
+    },
+    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";
+    },
+    agentsLinkClasses() {
+      return this.isAgentsActive
+        ? "tw-bg-blue-50 tw-font-semibold tw-text-blue-500"
+        : "tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50";
     },
   },
   watch: {
     // Auto-expand the category when navigating to it
-    '$route.path': {
+    "$route.path": {
       handler(path) {
-        if (path.startsWith('/agents') && !this.collapseStates.agents) {
-          this.$root.$emit('bv::toggle::collapse', 'collapse-agents');
+        if (path.startsWith("/agents") && !this.collapseStates.agents) {
+          this.$root.$emit("bv::toggle::collapse", "collapse-agents");
         }
-        if (path.startsWith('/email') && !this.collapseStates.email) {
-          this.$root.$emit('bv::toggle::collapse', 'collapse-email');
+        if (path.startsWith("/email") && !this.collapseStates.email) {
+          this.$root.$emit("bv::toggle::collapse", "collapse-email");
         }
       },
       immediate: true,
@@ -156,18 +180,17 @@ export default {
   },
   mounted() {
     // Listen for collapse events to update icon rotation
-    this.$root.$on('bv::collapse::state', (id, state) => {
-      if (id === 'collapse-email') {
+    this.$root.$on("bv::collapse::state", (id, state) => {
+      if (id === "collapse-email") {
         this.collapseStates.email = state;
-      } else if (id === 'collapse-agents') {
+      } else if (id === "collapse-agents") {
         this.collapseStates.agents = state;
       }
     });
   },
   beforeDestroy() {
     // Clean up event listener
-    this.$root.$off('bv::collapse::state');
+    this.$root.$off("bv::collapse::state");
   },
 };
 </script>
-
diff --git a/resources/js/admin/logs/components/Logs/routes.js b/resources/js/admin/logs/components/Logs/routes.js
index cee148dcc5..398d462193 100644
--- a/resources/js/admin/logs/components/Logs/routes.js
+++ b/resources/js/admin/logs/components/Logs/routes.js
@@ -1,41 +1,92 @@
-import { LogTable } from './LogTable';
+import { LogTable } from "./LogTable";
 
 export default {};
 
+/**
+ * Check if a package is installed
+ * @param {string} packageName - The package name to check
+ * @returns {boolean}
+ */
+const isPackageInstalled = (packageName) => window.ProcessMaker?.packages?.includes(packageName);
+
+/**
+ * Check if email start event package is installed
+ * @returns {boolean}
+ */
+export const hasEmailPackage = () => isPackageInstalled("package-email-start-event");
+
+/**
+ * Check if AI package is installed
+ * @returns {boolean}
+ */
+export const hasAiPackage = () => isPackageInstalled("package-ai");
+
+/**
+ * Determine the default redirect path based on installed packages
+ * @returns {string}
+ */
+const getDefaultRedirectPath = () => {
+  if (hasEmailPackage()) {
+    return "/email/errors";
+  }
+  if (hasAiPackage()) {
+    return "/agents/design";
+  }
+  // Fallback - shouldn't happen if menu visibility is correct
+  return "/email/errors";
+};
+
 export const routes = [
   {
-    name: 'logs.index',
-    path: '/',
-    redirect: '/email/errors',
+    name: "logs.index",
+    path: "/",
+    beforeEnter: (to, from, next) => {
+      next(getDefaultRedirectPath());
+    },
   },
   // Email logs routes
   {
-    name: 'logs.email',
-    path: '/email/:logType',
+    name: "logs.email",
+    path: "/email/:logType",
     component: LogTable,
     props(route) {
       return {
-        category: 'email',
+        category: "email",
         logType: route.params.logType,
       };
     },
+    beforeEnter: (to, from, next) => {
+      if (!hasEmailPackage()) {
+        // Redirect to agents if email package not installed
+        next(hasAiPackage() ? "/agents/design" : "/");
+      } else {
+        next();
+      }
+    },
   },
   // FlowGenie Agents logs routes
   {
-    name: 'logs.agents.redirect',
-    path: '/agents',
-    redirect: '/agents/design',
+    name: "logs.agents.redirect",
+    path: "/agents",
+    redirect: "/agents/design",
   },
   {
-    name: 'logs.agents',
-    path: '/agents/:logType',
+    name: "logs.agents",
+    path: "/agents/:logType",
     component: LogTable,
     props(route) {
       return {
-        category: 'agents',
+        category: "agents",
         logType: route.params.logType,
       };
     },
+    beforeEnter: (to, from, next) => {
+      if (!hasAiPackage()) {
+        // Redirect to email if AI package not installed
+        next(hasEmailPackage() ? "/email/errors" : "/");
+      } else {
+        next();
+      }
+    },
   },
 ];
-

From 5f65a785b8199989484428470b0e56af5cd862c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Wed, 7 Jan 2026 13:32:45 -0300
Subject: [PATCH 08/14] Fix issue with nested properties

---
 .../logs/components/Logs/BaseTable/BaseTable.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
index 120ae42de4..9559740635 100644
--- a/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
+++ b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
@@ -44,18 +44,18 @@ export default {
   },
   methods: {
     getItemValue(item, column) {
-      // if key is a dot-separated string, get the nested value from the item
-      if (column.key.includes('.')) {
-        return column.key.split('.').reduce((val, part) => (val != null ? val[part] : undefined), item);
-      }
+      // Get value - handle dot-separated keys for nested properties
+      const value = column.key.includes(".")
+        ? column.key.split(".").reduce((val, part) => (val == null ? undefined : val[part]), item)
+        : item[column.key];
 
-      if (typeof column.format === 'function') {
-        return column.format(item[column.key]);
+      // Apply format function if provided
+      if (typeof column.format === "function") {
+        return column.format(value);
       }
 
-      return item[column.key];
+      return value;
     },
   },
 };
 </script>
-

From 40875ec3cde6d275630eccd32a0cfff511a7a79a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Mon, 12 Jan 2026 10:20:35 -0300
Subject: [PATCH 09/14] Add session logs UI improvements and new fields

---
 .../components/Logs/BaseTable/BaseTable.vue   |  21 ++-
 .../Logs/LogContainer/LogContainer.vue        |   8 +-
 .../components/Logs/LogTable/LogTable.vue     | 121 +++++++++++++++++-
 .../logs/components/Logs/Sidebar/Sidebar.vue  |   4 +-
 4 files changed, 139 insertions(+), 15 deletions(-)

diff --git a/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
index 9559740635..f7d42922ff 100644
--- a/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
+++ b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
@@ -1,8 +1,7 @@
 <template>
   <div
     class="
-      tw-flex-1 tw-overflow-auto tw-rounded-xl tw-border tw-border-gray-200
-      tw-shadow-md tw-shadow-zinc-200
+      tw-flex-1 tw-overflow-auto tw-rounded-xl tw-border tw-border-gray-200 tw-shadow-zinc-200
     "
   >
     <table class="tw-w-full tw-text-left tw-text-sm">
@@ -28,7 +27,14 @@
             :key="column.key"
             class="tw-px-6 tw-py-4 tw-text-gray-600 tw-border-b tw-border-gray-200 tw-whitespace-nowrap"
           >
-            {{ getItemValue(item, column) }}
+            <slot
+              :name="`cell-${column.key}`"
+              :value="getRawValue(item, column)"
+              :item="item"
+              :column="column"
+            >
+              {{ getItemValue(item, column) }}
+            </slot>
           </td>
         </tr>
       </tbody>
@@ -43,11 +49,14 @@ export default {
     data: { type: Array, required: true },
   },
   methods: {
-    getItemValue(item, column) {
-      // Get value - handle dot-separated keys for nested properties
-      const value = column.key.includes(".")
+    getRawValue(item, column) {
+      // Get raw value - handle dot-separated keys for nested properties
+      return column.key.includes(".")
         ? column.key.split(".").reduce((val, part) => (val == null ? undefined : val[part]), item)
         : item[column.key];
+    },
+    getItemValue(item, column) {
+      const value = this.getRawValue(item, column);
 
       // Apply format function if provided
       if (typeof column.format === "function") {
diff --git a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
index 3aa08d07ca..11cffd54fb 100644
--- a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
+++ b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="tw-flex tw-gap-6">
-    <sidebar />
+  <div class="tw-flex tw-gap-3 tw-px-4 tw-h-full tw-min-h-0 tw-overflow-hidden">
+    <sidebar class="tw-shrink-0" />
 
-    <section class="tw-flex-1 tw-overflow-hidden">
-      <div class="tw-flex tw-flex-col tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white tw-h-screen">
+    <section class="tw-flex-1 tw-min-w-0 tw-min-h-0 tw-overflow-hidden">
+      <div class="tw-flex tw-flex-col tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white tw-h-full">
         <header-bar
           v-model="search"
           @search="onHandleSearch"
diff --git a/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue b/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
index dc688bbbd7..1de1ff41f1 100644
--- a/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
+++ b/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
@@ -1,10 +1,101 @@
 <template>
   <div class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0">
+    <!-- Loading spinner -->
+    <div
+      v-if="loading"
+      class="tw-flex tw-flex-1 tw-items-center tw-justify-center tw-min-h-[200px]"
+    >
+      <div class="tw-flex tw-flex-col tw-items-center tw-gap-3">
+        <svg
+          class="tw-animate-spin tw-h-8 tw-w-8 tw-text-blue-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            class="tw-opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          />
+          <path
+            class="tw-opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+        <span class="tw-text-sm tw-text-gray-500">{{ $t('Loading...') }}</span>
+      </div>
+    </div>
+
+    <!-- Table content -->
     <base-table
+      v-else
       :columns="columns"
       :data="data"
-    />
+    >
+      <!-- Custom case_number cell with link to case -->
+      <template #cell-case_number="{ value }">
+        <a
+          v-if="value"
+          :href="`/cases/${value}`"
+          class="tw-text-blue-600 hover:tw-text-blue-800 hover:tw-underline tw-font-medium"
+        >
+          #{{ value }}
+        </a>
+        <span v-else class="tw-text-gray-400">-</span>
+      </template>
+
+      <!-- Custom status cell with colored badge -->
+      <template #cell-status="{ value }">
+        <span
+          class="tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium"
+          :class="getStatusClasses(value)"
+        >
+          {{ formatStatus(value) }}
+        </span>
+      </template>
+
+      <!-- Custom tokens_used cell with hover popover -->
+      <template #cell-tokens_used="{ value, item }">
+        <div class="tw-relative tw-group tw-inline-block">
+          <span class="tw-cursor-help tw-border-b tw-border-dotted tw-border-gray-400">
+            {{ value }}
+          </span>
+          <!-- Popover tooltip -->
+          <div
+            class="
+              tw-absolute tw-z-50 tw-bottom-full tw-left-1/2 tw--translate-x-1/2 tw-mb-2
+              tw-hidden group-hover:tw-block
+              tw-bg-gray-900 tw-text-white tw-text-xs tw-rounded-lg tw-py-2 tw-px-3
+              tw-whitespace-nowrap tw-shadow-lg
+            "
+          >
+            <div class="tw-flex tw-flex-col tw-gap-1">
+              <div class="tw-flex tw-justify-between tw-gap-4">
+                <span class="tw-text-gray-400">{{ $t('Input') }}:</span>
+                <span class="tw-font-medium">{{ item.input_tokens }}</span>
+              </div>
+              <div class="tw-flex tw-justify-between tw-gap-4">
+                <span class="tw-text-gray-400">{{ $t('Output') }}:</span>
+                <span class="tw-font-medium">{{ item.output_tokens }}</span>
+              </div>
+            </div>
+            <!-- Arrow -->
+            <div
+              class="
+                tw-absolute tw-top-full tw-left-1/2 tw--translate-x-1/2
+                tw-border-4 tw-border-transparent tw-border-t-gray-900
+              "
+            />
+          </div>
+        </div>
+      </template>
+    </base-table>
     <pagination
+      v-if="!loading"
       class="tw-mt-3 tw-shrink-0"
       :page="page"
       :total-pages="totalPages"
@@ -39,6 +130,7 @@ export default {
       page: 1,
       totalPages: 1,
       perPage: 15,
+      loading: false,
     };
   },
   computed: {
@@ -83,19 +175,23 @@ export default {
         design: [
           { key: 'flow_genie_name', label: this.$t('FlowGenie Name') },
           { key: 'user_name', label: this.$t('User') },
+          { key: 'model', label: this.$t('Model') },
           { key: 'status', label: this.$t('Status') },
           { key: 'duration', label: this.$t('Execution Time') },
+          { key: 'llm_calls', label: this.$t('LLM Calls') },
           { key: 'tools', label: this.$t('Tools') },
           { key: 'tokens_used', label: this.$t('Tokens Used') },
           { key: 'created_at', label: this.$t('Date'), format: dateFormatter },
         ],
         execution: [
-          { key: 'process_request_id', label: this.$t('Request ID') },
-          { key: 'node_id', label: this.$t('Node ID') },
+          { key: 'case_number', label: this.$t('Case #') },
+          { key: 'process_name', label: this.$t('Process') },
+          { key: 'node_name', label: this.$t('Node') },
           { key: 'flow_genie_name', label: this.$t('FlowGenie Name') },
           { key: 'user_name', label: this.$t('User') },
           { key: 'status', label: this.$t('Status') },
           { key: 'duration', label: this.$t('Execution Time') },
+          { key: 'llm_calls', label: this.$t('LLM Calls') },
           { key: 'tools', label: this.$t('Tools') },
           { key: 'tokens_used', label: this.$t('Tokens Used') },
           { key: 'created_at', label: this.$t('Date'), format: dateFormatter },
@@ -141,6 +237,7 @@ export default {
       this.fetchData();
     },
     async fetchData(params = {}) {
+      this.loading = true;
       try {
         const response = await ProcessMaker.apiClient.get(this.apiEndpoint, {
           params: {
@@ -160,6 +257,8 @@ export default {
         // eslint-disable-next-line no-console
         console.log(error);
         this.data = [];
+      } finally {
+        this.loading = false;
       }
     },
     handlePageChange(newPage) {
@@ -170,6 +269,22 @@ export default {
       this.page = 1;
       this.fetchData(params);
     },
+    getStatusClasses(status) {
+      const statusClasses = {
+        completed: 'tw-bg-green-100 tw-text-green-800',
+        error: 'tw-bg-red-100 tw-text-red-800',
+        processing: 'tw-bg-yellow-100 tw-text-yellow-800',
+      };
+      return statusClasses[status] || 'tw-bg-gray-100 tw-text-gray-800';
+    },
+    formatStatus(status) {
+      const statusLabels = {
+        completed: this.$t('Completed'),
+        error: this.$t('Error'),
+        processing: this.$t('Processing'),
+      };
+      return statusLabels[status] || status;
+    },
   },
 };
 </script>
diff --git a/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
index 9b93c63759..a2276bbff7 100644
--- a/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
+++ b/resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
-  <aside class="tw-w-72 tw-shrink-0">
-    <div class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-3 tw-bg-white tw-h-screen">
+  <aside class="tw-w-72 tw-shrink-0 tw-h-full">
+    <div class="tw-rounded-xl tw-border tw-border-zinc-200 tw-p-3 tw-bg-white tw-h-full tw-overflow-y-auto">
       <div class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-uppercase tw-text-zinc-500">
         Logs
       </div>

From 14c79eb458c856fc2b74b707a0278bc94bf92499 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Thu, 15 Jan 2026 13:06:42 -0300
Subject: [PATCH 10/14] Add translation strings

---
 resources/lang/en.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index f95ae63b21..5e07c388e7 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -908,7 +908,8 @@
   "Event": "Event",
   "Exclusive Gateway": "Exclusive Gateway",
   "Execution Error": "Execution Error",
-  "Execution Logs": "Execution Logs",
+  "Runtime Logs": "Runtime Logs",
+  "FlowGenie Studio Logs": "FlowGenie Studio Logs",
   "Execution Log": "Execution Log",
   "Executor Successfully Built. You can now close this window. ": "Executor Successfully Built. You can now close this window. ",
   "Existing Array": "Existing Array",

From ebd7adec67ba88e4f83cb0b3c8e1dbf202f7fd86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Thu, 15 Jan 2026 13:07:59 -0300
Subject: [PATCH 11/14] Add detail panel in log container

---
 .../Logs/LogContainer/LogContainer.vue        | 63 +++++++++++++++++--
 .../components/Logs/LogTable/LogTable.vue     | 28 ++++++++-
 2 files changed, 86 insertions(+), 5 deletions(-)

diff --git a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
index 11cffd54fb..9825c0a42e 100644
--- a/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
+++ b/resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue
@@ -2,7 +2,10 @@
   <div class="tw-flex tw-gap-3 tw-px-4 tw-h-full tw-min-h-0 tw-overflow-hidden">
     <sidebar class="tw-shrink-0" />
 
-    <section class="tw-flex-1 tw-min-w-0 tw-min-h-0 tw-overflow-hidden">
+    <section
+      class="tw-min-w-0 tw-min-h-0 tw-overflow-hidden tw-transition-all tw-duration-300"
+      :class="selectedSession ? 'tw-w-1/2' : 'tw-flex-1'"
+    >
       <div class="tw-flex tw-flex-col tw-rounded-xl tw-border tw-border-zinc-200 tw-p-4 tw-bg-white tw-h-full">
         <header-bar
           v-model="search"
@@ -37,25 +40,47 @@
             </div>
           </div>
 
-          <RouterView ref="routerView" class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0" />
+          <RouterView
+            ref="routerView"
+            class="tw-flex tw-flex-col tw-flex-1 tw-min-h-0"
+            @session-selected="onSessionSelected"
+          />
         </div>
       </div>
     </section>
+
+    <!-- Session Detail Panel -->
+    <transition name="slide-fade">
+      <section
+        v-if="selectedSession"
+        class="tw-w-1/2 tw-min-h-0 tw-overflow-hidden tw-min-w-[680px]"
+      >
+        <div class="tw-rounded-xl tw-border tw-border-zinc-200 tw-bg-white tw-h-full tw-overflow-hidden">
+          <agent-session-detail
+            :session="selectedSession"
+            @close="onCloseDetail"
+          />
+        </div>
+      </section>
+    </transition>
   </div>
 </template>
 
 <script>
 import { Sidebar } from '../Sidebar';
 import { HeaderBar } from '../HeaderBar';
+import { AgentSessionDetail } from '../AgentSessionDetail';
 
 export default {
   components: {
     Sidebar,
     HeaderBar,
+    AgentSessionDetail,
   },
   data() {
     return {
       search: '',
+      selectedSession: null,
     };
   },
   computed: {
@@ -71,8 +96,8 @@ export default {
     title() {
       if (this.isAgentsCategory) {
         const agentTitles = {
-          design: 'Design Mode Logs',
-          execution: 'Execution Logs',
+          design: 'FlowGenie Studio Logs',
+          execution: 'Runtime Logs',
         };
         return agentTitles[this.logType] ?? 'FlowGenie Agents Logs';
       }
@@ -92,13 +117,43 @@ export default {
       return `/admin/logs/export/csv?type=${this.logType}&search=${this.search}`;
     },
   },
+  watch: {
+    // Clear selection when navigating to different log type
+    '$route.path': {
+      handler() {
+        this.selectedSession = null;
+      },
+    },
+  },
   methods: {
     onHandleSearch() {
       if (this.$refs.routerView) {
         this.$refs.routerView.refresh({ search: this.search });
       }
     },
+    onSessionSelected(session) {
+      this.selectedSession = session;
+    },
+    onCloseDetail() {
+      this.selectedSession = null;
+      // Also clear selection in the table
+      if (this.$refs.routerView?.clearSelection) {
+        this.$refs.routerView.clearSelection();
+      }
+    },
   },
 };
 </script>
 
+<style scoped>
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+</style>
diff --git a/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue b/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
index 1de1ff41f1..690552e324 100644
--- a/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
+++ b/resources/js/admin/logs/components/Logs/LogTable/LogTable.vue
@@ -35,6 +35,10 @@
       v-else
       :columns="columns"
       :data="data"
+      :clickable="isAgentCategory"
+      :selected-item="selectedSession"
+      item-key="session_id"
+      @row-click="handleRowClick"
     >
       <!-- Custom case_number cell with link to case -->
       <template #cell-case_number="{ value }">
@@ -131,6 +135,8 @@ export default {
       totalPages: 1,
       perPage: 15,
       loading: false,
+      selectedSession: null,
+      currentSearch: '',
     };
   },
   computed: {
@@ -215,15 +221,20 @@ export default {
       }
       return `/api/1.1/email-start-event/logs/${this.logType}`;
     },
+    isAgentCategory() {
+      return this.category === 'agents';
+    },
   },
   watch: {
     category: {
       handler() {
+        this.clearSelection();
         this.resetAndFetch();
       },
     },
     logType: {
       handler() {
+        this.clearSelection();
         this.resetAndFetch();
       },
       immediate: true,
@@ -234,6 +245,7 @@ export default {
       this.page = 1;
       this.perPage = 15;
       this.totalPages = 1;
+      this.currentSearch = '';
       this.fetchData();
     },
     async fetchData(params = {}) {
@@ -263,10 +275,14 @@ export default {
     },
     handlePageChange(newPage) {
       this.page = newPage;
-      this.fetchData();
+      this.fetchData({ search: this.currentSearch });
     },
     refresh(params = {}) {
       this.page = 1;
+      // Store search for pagination
+      if (params.search !== undefined) {
+        this.currentSearch = params.search;
+      }
       this.fetchData(params);
     },
     getStatusClasses(status) {
@@ -285,6 +301,16 @@ export default {
       };
       return statusLabels[status] || status;
     },
+    handleRowClick(item) {
+      if (this.isAgentCategory) {
+        this.selectedSession = item;
+        this.$emit('session-selected', item);
+      }
+    },
+    clearSelection() {
+      this.selectedSession = null;
+      this.$emit('session-selected', null);
+    },
   },
 };
 </script>

From 41e54a01846ca35dea5e559dfd0da06d8347282b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Thu, 15 Jan 2026 13:08:31 -0300
Subject: [PATCH 12/14] Change titles for tab in agent logs. Add debounce for
 search

---
 .../components/Logs/HeaderBar/HeaderBar.vue   | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
index 4085475684..6878c1c6fc 100644
--- a/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
+++ b/resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue
@@ -38,14 +38,14 @@
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('design')"
       >
-        {{ $t('Design Mode Logs') }}
+        {{ $t('FlowGenie Studio Logs') }}
       </RouterLink>
       <RouterLink
         to="/agents/execution"
         class="tw-rounded-lg tw-px-3 tw-py-2 tw-text-base"
         :class="tabClasses('execution')"
       >
-        {{ $t('Execution Logs') }}
+        {{ $t('Runtime Logs') }}
       </RouterLink>
     </div>
 
@@ -83,6 +83,11 @@ export default {
   props: {
     value: { type: String, default: '' },
   },
+  data() {
+    return {
+      debounceTimer: null,
+    };
+  },
   computed: {
     isEmailCategory() {
       return this.$route.path.startsWith('/email');
@@ -100,6 +105,12 @@ export default {
       immediate: true,
     },
   },
+  beforeDestroy() {
+    // Clear debounce timer when component is destroyed
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+  },
   methods: {
     tabClasses(tab) {
       const currentRoute = this.$route.params.logType;
@@ -110,9 +121,24 @@ export default {
     },
     onInput(event) {
       this.$emit('input', event.target.value);
+      this.debouncedSearch();
+    },
+    debouncedSearch() {
+      // Clear existing timer
+      if (this.debounceTimer) {
+        clearTimeout(this.debounceTimer);
+      }
+      // Set new timer - wait 300ms after user stops typing
+      this.debounceTimer = setTimeout(() => {
+        this.$emit('search');
+      }, 300);
     },
     onKeypress(event) {
+      // Allow immediate search on Enter key
       if (event.charCode === 13) {
+        if (this.debounceTimer) {
+          clearTimeout(this.debounceTimer);
+        }
         this.$emit('search');
       }
     },

From 8b3993eb9467628ca6a7e34e35aee21988d6331e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Thu, 15 Jan 2026 13:08:58 -0300
Subject: [PATCH 13/14] Add and show details panel

---
 .../AgentSessionDetail/AgentSessionDetail.vue | 929 ++++++++++++++++++
 .../Logs/AgentSessionDetail/index.js          |   5 +
 .../components/Logs/BaseTable/BaseTable.vue   |  19 +-
 3 files changed, 952 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue
 create mode 100644 resources/js/admin/logs/components/Logs/AgentSessionDetail/index.js

diff --git a/resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue b/resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue
new file mode 100644
index 0000000000..d8a45bbd3c
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue
@@ -0,0 +1,929 @@
+<template>
+  <div class="tw-h-full tw-flex tw-flex-col tw-bg-white">
+    <!-- Header -->
+    <div class="tw-border-b tw-border-gray-200 tw-px-4 tw-py-3 tw-flex tw-items-center tw-justify-between tw-bg-gray-50 tw-shrink-0">
+      <div class="tw-flex tw-items-center tw-gap-3">
+        <div>
+          <h3 class="tw-font-semibold tw-text-gray-800 tw-text-base tw-m-0">
+            {{ sessionData.flow_genie_name || sessionData.agent_name || $t('Session Details') }}
+          </h3>
+          <p class="tw-text-xs tw-text-gray-500 tw-font-mono tw-m-0">{{ session.session_id }}</p>
+        </div>
+      </div>
+      <div class="tw-flex tw-items-center tw-gap-2">
+        <span
+          class="tw-inline-flex tw-items-center tw-px-2.5 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium"
+          :class="getStatusClasses(session.status)"
+        >
+          <i :class="getStatusIcon(session.status)" class="tw-mr-1.5" />
+          {{ formatStatus(session.status) }}
+        </span>
+        <button
+          class="tw-p-1.5 tw-text-gray-500 hover:tw-text-gray-700 hover:tw-bg-gray-200 tw-rounded-lg tw-transition-colors tw-w-8 tw-bg-gray-50"
+          @click="$emit('close')"
+        >
+          <i class="fas fa-times" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="tw-flex-1 tw-flex tw-items-center tw-justify-center">
+      <div class="tw-flex tw-flex-col tw-items-center tw-gap-3">
+        <svg
+          class="tw-animate-spin tw-h-8 tw-w-8 tw-text-blue-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle class="tw-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+          <path class="tw-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+        </svg>
+        <span class="tw-text-sm tw-text-gray-500">{{ $t('Loading session details...') }}</span>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div v-else class="tw-flex-1 tw-overflow-auto tw-flex tw-min-h-0">
+      <!-- Events Timeline -->
+      <div class="tw-flex-1 tw-overflow-auto tw-p-4">
+        <!-- Summary Stats -->
+        <div class="tw-grid tw-grid-cols-4 tw-gap-1 tw-mb-6">
+          <div class="tw-bg-gray-50 tw-rounded-lg tw-p-2 tw-flex tw-flex-col tw-justify-between tw-h-16">
+            <div class="tw-text-xs tw-text-gray-500 tw-text-right">{{ $t('Duration') }}</div>
+            <div class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-text-right">
+              {{ session.duration || formatDuration(sessionData.execution_time_ms) }}
+            </div>
+          </div>
+          <div class="tw-bg-gray-50 tw-rounded-lg tw-p-2 tw-flex tw-flex-col tw-justify-between tw-h-16">
+            <div class="tw-text-xs tw-text-gray-500 tw-text-right">{{ $t('LLM Calls') }}</div>
+            <div class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-text-right">{{ llmCallsCount }}</div>
+          </div>
+          <div class="tw-bg-gray-50 tw-rounded-lg tw-p-2 tw-flex tw-flex-col tw-justify-between tw-h-16">
+            <div class="tw-text-xs tw-text-gray-500 tw-text-right">{{ $t('Tool Calls') }}</div>
+            <div class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-text-right">{{ toolCallsCount }}</div>
+          </div>
+          <div class="tw-bg-gray-50 tw-rounded-lg tw-p-2 tw-flex tw-flex-col tw-justify-between tw-h-16">
+            <div class="tw-text-xs tw-text-gray-500 tw-text-right">{{ $t('Total Tokens') }}</div>
+            <div class="tw-flex tw-justify-end">
+              <div class="tw-relative tw-group tw-inline-block">
+                <div class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-cursor-help tw-border-b tw-border-dotted tw-border-gray-400">
+                  {{ session.tokens_used || formatNumber(sessionData.token_usage?.total_tokens) }}
+                </div>
+                <!-- Popover tooltip -->
+                <div
+                  class="
+                    tw-absolute tw-z-50 tw-top-full tw-right-0 tw-mt-2
+                    tw-hidden group-hover:tw-block
+                    tw-bg-gray-900 tw-text-white tw-text-xs tw-rounded-lg tw-py-2 tw-px-3
+                    tw-whitespace-nowrap tw-shadow-lg
+                  "
+                >
+                  <!-- Arrow -->
+                  <div
+                    class="
+                      tw-absolute tw-bottom-full tw-right-2
+                      tw-border-4 tw-border-transparent tw-border-b-gray-900
+                    "
+                  />
+                  <div class="tw-flex tw-flex-col tw-gap-1">
+                    <div class="tw-flex tw-justify-between tw-gap-4">
+                      <span class="tw-text-gray-400">{{ $t('Input') }}:</span>
+                      <span class="tw-font-medium">{{ formatNumber(sessionData.token_usage?.input_tokens) }}</span>
+                    </div>
+                    <div class="tw-flex tw-justify-between tw-gap-4">
+                      <span class="tw-text-gray-400">{{ $t('Output') }}:</span>
+                      <span class="tw-font-medium">{{ formatNumber(sessionData.token_usage?.output_tokens) }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Events Timeline -->
+        <div v-if="sortedEvents.length === 0" class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-gray-500">
+          <i class="fas fa-stream tw-text-3xl tw-mb-3 tw-text-gray-300" />
+          <p>{{ $t('No events recorded for this session') }}</p>
+        </div>
+
+        <div v-else class="tw-relative">
+          <div
+            v-for="(event, index) in sortedEvents"
+            :key="event.id || index"
+            class="tw-relative tw-pb-4"
+          >
+            <!-- Timeline connector -->
+            <div
+              v-if="index < sortedEvents.length - 1"
+              class="tw-absolute tw-left-3 tw-top-6 tw-bottom-0 tw-w-0.5 tw-bg-gray-200"
+            />
+
+            <!-- Event content -->
+            <div class="tw-flex tw-items-start tw-gap-3">
+              <!-- Icon -->
+              <div
+                class="tw-w-6 tw-h-6 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-flex-shrink-0 tw-z-10"
+                :class="getEventIconClasses(event)"
+              >
+                <i :class="getEventIcon(event)" class="tw-text-xs" />
+              </div>
+
+              <!-- Content -->
+              <div
+                class="tw-flex-1 tw-bg-white tw-border-gray-200 tw-overflow-hidden tw-cursor-pointer hover:tw-border-gray-300 tw-transition-colors"
+                :class="{ 'tw-border-blue-200 tw-bg-blue-50/30': expandedEvents[index] }"
+                @click="toggleEvent(index)"
+              >
+                <!-- Event Header -->
+                <div class="tw-flex tw-items-center tw-justify-between tw-px-3 pb-2">
+                  <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>
+                  </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">
+                      {{ formatDuration(event.duration_ms) }}
+                    </span>
+                    <span class="tw-text-xs tw-text-gray-400">
+                      {{ formatEventTime(event.timestamp || event.created_at) }}
+                    </span>
+                    <i
+                      class="fas tw-text-gray-400 tw-text-xs tw-transition-transform"
+                      :class="expandedEvents[index] ? 'fa-chevron-up' : 'fa-chevron-down'"
+                    />
+                  </div>
+                </div>
+
+                <!-- Duration bar visualization (timeline) -->
+                <div class="tw-h-1.5 tw-bg-gray-100 tw-relative">
+                  <div
+                    class="tw-h-full tw-absolute tw-transition-all tw-rounded-sm"
+                    :class="getEventBarClass(event)"
+                    :style="getEventBarStyle(event, index)"
+                  />
+                </div>
+
+                <!-- Expanded Content -->
+                <div v-if="expandedEvents[index]" class="tw-border-t tw-border-gray-100">
+                  <!-- Tool call details -->
+                  <div v-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
+                        class="tw-text-xs tw-px-2 tw-py-0.5 tw-rounded"
+                        :class="event.status === 'completed' ? 'tw-bg-green-100 tw-text-green-700' : 'tw-bg-red-100 tw-text-red-700'"
+                      >
+                        {{ event.status }}
+                      </span>
+                    </div>
+                    <div v-if="event.arguments || event.input || event.tool_arguments" class="tw-mb-3">
+                      <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Arguments') }}</div>
+                      <pre class="tw-bg-gray-50 tw-rounded tw-p-2 tw-text-xs tw-overflow-auto tw-max-h-40 tw-text-gray-700 tw-whitespace-pre-wrap tw-break-words">{{ formatJson(event.arguments || event.input || event.tool_arguments) }}</pre>
+                    </div>
+                    <div v-if="event.output || event.result">
+                      <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Output') }}</div>
+                      <pre class="tw-bg-gray-50 tw-rounded tw-p-2 tw-text-xs tw-overflow-auto tw-max-h-40 tw-text-gray-700 tw-whitespace-pre-wrap tw-break-words">{{ formatJson(event.output || event.result) }}</pre>
+                    </div>
+                  </div>
+
+                  <!-- LLM call details -->
+                  <div v-else-if="isLlmEvent(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
+                        class="tw-text-xs tw-px-2 tw-py-0.5 tw-rounded"
+                        :class="event.status === 'completed' ? 'tw-bg-green-100 tw-text-green-700' : 'tw-bg-red-100 tw-text-red-700'"
+                      >
+                        {{ event.status }}
+                      </span>
+                      <span v-if="event.input_tokens || event.output_tokens" class="tw-text-xs tw-text-gray-500 tw-ml-2">
+                        ({{ event.input_tokens || 0 }} in / {{ event.output_tokens || 0 }} out tokens)
+                      </span>
+                    </div>
+                    <div v-if="event.error" class="tw-mb-3">
+                      <div class="tw-text-xs tw-font-medium tw-text-red-500 tw-mb-1">{{ $t('Error') }}</div>
+                      <pre class="tw-bg-red-50 tw-rounded tw-p-2 tw-text-xs tw-overflow-auto tw-max-h-32 tw-text-red-700 tw-whitespace-pre-wrap tw-break-words">{{ event.error }}</pre>
+                    </div>
+                    <div v-if="event.input_preview || event.prompt || event.instructions" class="tw-mb-3">
+                      <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Input') }}</div>
+                      <pre class="tw-bg-gray-50 tw-rounded tw-p-2 tw-text-xs tw-overflow-auto tw-max-h-40 tw-text-gray-700 tw-whitespace-pre-wrap tw-break-words">{{ event.input_preview || event.prompt || event.instructions }}</pre>
+                    </div>
+                    <div v-if="event.output_text || event.response || event.output">
+                      <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Output') }}</div>
+                      <pre class="tw-bg-gray-50 tw-rounded tw-p-2 tw-text-xs tw-overflow-auto tw-max-h-40 tw-text-gray-700 tw-whitespace-pre-wrap tw-break-words">{{ event.output_text || event.response || event.output }}</pre>
+                    </div>
+                  </div>
+
+                  <!-- Message output details -->
+                  <div v-else-if="isMessageEvent(event)" class="tw-p-3">
+                    <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Content') }}</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">{{ event.content }}</pre>
+                  </div>
+
+                  <!-- Reasoning details -->
+                  <div v-else-if="isReasoningEvent(event)" class="tw-p-3">
+                    <div class="tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-1">{{ $t('Reasoning') }}</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">{{ event.content }}</pre>
+                  </div>
+
+                  <!-- Error event details -->
+                  <div v-else-if="isErrorEvent(event)" class="tw-p-3">
+                    <div class="tw-text-xs tw-font-medium tw-text-red-500 tw-mb-1">{{ $t('Error Message') }}</div>
+                    <pre class="tw-bg-red-50 tw-rounded tw-p-2 tw-text-xs tw-overflow-auto tw-max-h-48 tw-text-red-700 tw-whitespace-pre-wrap tw-break-words">{{ event.error || event.error_message || event.message || event.data?.error || formatJson(event) }}</pre>
+                  </div>
+
+                  <!-- Generic event details -->
+                  <div v-else class="tw-p-3">
+                    <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(event.data || event.details || event) }}</pre>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Properties Panel -->
+      <div class="tw-w-56 tw-border-l tw-border-gray-200 tw-bg-gray-50 tw-overflow-auto tw-shrink-0">
+        <div class="tw-p-4">
+          <h4 class="tw-text-sm tw-font-semibold tw-text-gray-700 tw-mb-3 tw-flex tw-items-center">
+            <i class="fas fa-info-circle tw-mr-2 tw-text-gray-400" />
+            {{ $t('Properties') }}
+          </h4>
+
+          <div class="tw-space-y-3">
+            <div>
+              <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium">{{ $t('Session ID') }}</div>
+              <div class="tw-text-xs tw-text-gray-600 tw-font-mono tw-break-all">{{ session.session_id }}</div>
+            </div>
+
+            <div v-if="sessionData.model || session.model">
+              <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium">{{ $t('Model') }}</div>
+              <div class="tw-text-xs tw-text-gray-600">{{ sessionData.model || session.model }}</div>
+            </div>
+
+            <div v-if="session.user_name">
+              <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium">{{ $t('User') }}</div>
+              <div class="tw-text-xs tw-text-gray-600">{{ session.user_name }}</div>
+            </div>
+
+            <div v-if="session.created_at">
+              <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium">{{ $t('Started') }}</div>
+              <div class="tw-text-xs tw-text-gray-600">{{ formatFullDateTime(session.created_at) }}</div>
+            </div>
+
+            <div v-if="session.process_name">
+              <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium">{{ $t('Process') }}</div>
+              <div class="tw-text-xs tw-text-gray-600">{{ session.process_name }}</div>
+            </div>
+
+            <div v-if="session.node_name">
+              <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium">{{ $t('Node') }}</div>
+              <div class="tw-text-xs tw-text-gray-600">{{ session.node_name }}</div>
+            </div>
+          </div>
+
+          <!-- Resources Section -->
+          <div v-if="hasResources" class="tw-mt-6">
+            <h4 class="tw-text-sm tw-font-semibold tw-text-gray-700 tw-mb-3 tw-flex tw-items-center">
+              <i class="fas fa-cube tw-mr-2 tw-text-gray-400" />
+              {{ $t('Resources') }}
+            </h4>
+
+            <div v-if="sessionData.mcp_servers_used?.length" class="tw-mb-3">
+              <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"
+                  class="tw-px-2 tw-py-0.5 tw-bg-purple-100 tw-text-purple-700 tw-rounded tw-text-xs"
+                >
+                  {{ server }}
+                </span>
+              </div>
+            </div>
+
+            <div v-if="sessionData.collections_used?.length">
+              <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}`"
+                  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 }}
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Configuration Section -->
+          <div v-if="hasConfiguration" class="tw-mt-6">
+            <h4 class="tw-text-sm tw-font-semibold tw-text-gray-700 tw-mb-3 tw-flex tw-items-center">
+              <i class="fas fa-cog tw-mr-2 tw-text-gray-400" />
+              {{ $t('Configuration') }}
+            </h4>
+
+            <div class="tw-space-y-3">
+              <!-- Model Settings -->
+              <div v-if="sessionData.model_settings">
+                <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium tw-mb-1">
+                  {{ $t('Model Settings') }}
+                </div>
+                <div class="tw-space-y-1">
+                  <div
+                    v-for="(value, key) in sessionData.model_settings"
+                    :key="key"
+                    class="tw-flex tw-justify-between tw-text-xs"
+                  >
+                    <span class="tw-text-gray-600">{{ formatConfigKey(key) }}</span>
+                    <span class="tw-text-gray-800 tw-font-medium">{{ formatConfigValue(value) }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Max Turns -->
+              <div v-if="sessionData.max_turns">
+                <div class="tw-flex tw-justify-between tw-text-xs">
+                  <span class="tw-text-gray-600">{{ $t('Max Turns') }}</span>
+                  <span class="tw-text-gray-800 tw-font-medium">{{ sessionData.max_turns }}</span>
+                </div>
+              </div>
+
+              <!-- Instructions Preview -->
+              <div v-if="configInstructions">
+                <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium tw-mb-1">
+                  {{ $t('Instructions') }}
+                </div>
+                <div
+                  class="tw-text-xs tw-text-gray-700 tw-bg-gray-100 tw-rounded tw-p-2 tw-max-h-24 tw-overflow-auto tw-whitespace-pre-wrap"
+                >
+                  {{ truncateText(configInstructions, 300) }}
+                </div>
+              </div>
+
+              <!-- Request Config Details -->
+              <div v-if="hasRequestConfigDetails">
+                <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium tw-mb-1">
+                  {{ $t('Request Config') }}
+                </div>
+                <div class="tw-space-y-1">
+                  <div
+                    v-for="(value, key) in filteredRequestConfig"
+                    :key="key"
+                    class="tw-flex tw-justify-between tw-text-xs"
+                  >
+                    <span class="tw-text-gray-600">{{ formatConfigKey(key) }}</span>
+                    <span class="tw-text-gray-800 tw-font-medium">{{ formatConfigValue(value) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentSessionDetail',
+  props: {
+    session: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      sessionData: {},
+      expandedEvents: {},
+      startTime: null,
+    };
+  },
+  computed: {
+    sortedEvents() {
+      // The events array from the backend is already in chronological order
+      // Consolidate start/end events into single events for cleaner display
+      const events = this.sessionData.events || [];
+
+      // Index events by their IDs for quick lookup
+      const toolEndEvents = {};
+      const llmEndEvents = {};
+
+      events.forEach((e) => {
+        if (e.type === 'tool_call_end' && e.call_id) {
+          toolEndEvents[e.call_id] = e;
+        }
+        if (e.type === 'llm_call_end' && e.response_id) {
+          llmEndEvents[e.response_id] = e;
+        }
+      });
+
+      // Index llm_calls array by response_id (contains input_preview and output_text)
+      const llmCallsData = {};
+      const llmCalls = this.sessionData.llm_calls || [];
+      llmCalls.forEach((call) => {
+        if (call.response_id) {
+          llmCallsData[call.response_id] = call;
+        }
+      });
+
+      // Process events and consolidate
+      const consolidated = [];
+      const processedIds = new Set();
+
+      // Events to skip (intermediate states, will be merged or ignored)
+      const skipEventTypes = [
+        'tool_call_end',
+        'llm_call_end',
+        'llm_in_progress',
+        'llm_queued',
+        'llm_created',
+      ];
+
+      events.forEach((e) => {
+        const type = e.type || '';
+
+        // Skip intermediate/end events
+        if (skipEventTypes.includes(type)) {
+          return;
+        }
+
+        // Consolidate tool calls
+        if (type === 'tool_call_start' && e.call_id) {
+          if (processedIds.has(`tool_${e.call_id}`)) return;
+          processedIds.add(`tool_${e.call_id}`);
+
+          const endEvent = toolEndEvents[e.call_id];
+          consolidated.push({
+            ...e,
+            _type: 'tool_call',
+            type: 'tool_call',
+            // Merge end event data
+            output: endEvent?.output,
+            duration_ms: endEvent?.duration_ms,
+            status: endEvent?.status || 'completed',
+          });
+          return;
+        }
+
+        // Consolidate LLM calls
+        if (type === 'llm_call_start' && e.response_id) {
+          if (processedIds.has(`llm_${e.response_id}`)) return;
+          processedIds.add(`llm_${e.response_id}`);
+
+          const endEvent = llmEndEvents[e.response_id];
+          const llmCallData = llmCallsData[e.response_id] || {};
+
+          consolidated.push({
+            ...e,
+            _type: 'llm_call',
+            type: 'llm_call',
+            // Merge end event data
+            input_tokens: endEvent?.input_tokens || llmCallData.input_tokens,
+            output_tokens: endEvent?.output_tokens || llmCallData.output_tokens,
+            duration_ms: endEvent?.duration_ms || llmCallData.duration_ms,
+            status: endEvent?.status || llmCallData.status || 'completed',
+            error: endEvent?.error || llmCallData.error,
+            // Merge llm_calls data (has input_preview and output_text)
+            input_preview: llmCallData.input_preview,
+            output_text: llmCallData.output_text,
+            model: e.model || llmCallData.model,
+          });
+          return;
+        }
+
+        // Keep other events as-is
+        consolidated.push({
+          ...e,
+          _type: type || 'event',
+        });
+      });
+
+      // Add session-level error as an event if it exists and no error event was found
+      const hasErrorEvent = consolidated.some(
+        (e) => e._type === 'agent_error' || e._type === 'error' || e.error,
+      );
+      if (this.sessionData.error_message && !hasErrorEvent) {
+        consolidated.push({
+          _type: 'agent_error',
+          type: 'agent_error',
+          timestamp: this.sessionData.completed_at || this.sessionData.updated_at,
+          error_message: this.sessionData.error_message,
+        });
+      }
+
+      return consolidated;
+    },
+    llmCallsCount() {
+      if (typeof this.session.llm_calls === 'number') {
+        return this.session.llm_calls;
+      }
+      return this.sessionData.llm_calls?.length || 0;
+    },
+    toolCallsCount() {
+      if (typeof this.session.tools === 'number') {
+        return this.session.tools;
+      }
+      return this.sessionData.tools_used?.length || 0;
+    },
+    totalDuration() {
+      return this.sessionData.execution_time_ms || this.calculatedDuration || 0;
+    },
+    calculatedDuration() {
+      // If no execution_time_ms, calculate from events
+      if (this.sortedEvents.length === 0) return 0;
+      const firstEvent = this.sortedEvents[0];
+      const lastEvent = this.sortedEvents[this.sortedEvents.length - 1];
+      const startTime = new Date(firstEvent.timestamp || firstEvent.created_at || 0).getTime();
+      const lastEventTime = new Date(lastEvent.timestamp || lastEvent.created_at || 0).getTime();
+      const lastEventDuration = lastEvent.duration_ms || 0;
+      return Math.max(lastEventTime - startTime + lastEventDuration, 0);
+    },
+    totalEventsDuration() {
+      // Sum of all event durations
+      return this.sortedEvents.reduce((sum, event) => sum + (event.duration_ms || 0), 0) || 1;
+    },
+    endTime() {
+      if (!this.startTime || !this.totalDuration) return null;
+      return this.startTime + this.totalDuration;
+    },
+    hasResources() {
+      return this.sessionData.mcp_servers_used?.length || this.sessionData.collections_used?.length;
+    },
+    hasConfiguration() {
+      return this.sessionData.model_settings
+        || this.sessionData.max_turns
+        || this.configInstructions
+        || this.hasRequestConfigDetails;
+    },
+    configInstructions() {
+      const config = this.sessionData.request_config || {};
+      return config.instructions || config.prompt || null;
+    },
+    hasRequestConfigDetails() {
+      return Object.keys(this.filteredRequestConfig).length > 0;
+    },
+    filteredRequestConfig() {
+      const config = this.sessionData.request_config || {};
+      // Keys to exclude (already shown elsewhere or too verbose)
+      const excludeKeys = [
+        'instructions',
+        'prompt',
+        'history',
+        'mcp_servers',
+        'collections',
+        'model_settings',
+        'aiState',
+        'callback',
+      ];
+      const result = {};
+      Object.keys(config).forEach((key) => {
+        if (!excludeKeys.includes(key)) {
+          const value = config[key];
+          // Only include simple values (not objects/arrays)
+          if (value !== null && value !== undefined && typeof value !== 'object') {
+            result[key] = value;
+          }
+        }
+      });
+      return result;
+    },
+  },
+  watch: {
+    session: {
+      handler(newSession) {
+        if (newSession?.session_id) {
+          this.fetchSessionDetails();
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    async fetchSessionDetails() {
+      if (!this.session?.session_id) return;
+
+      this.loading = true;
+      this.expandedEvents = {};
+
+      try {
+        const response = await ProcessMaker.apiClient.get(
+          `/api/1.0/package-ai/agent/logs/session/${this.session.session_id}`,
+        );
+
+        if (response.data.success) {
+          this.sessionData = response.data.session || {};
+          this.calculateStartTime();
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error fetching session details:', error);
+        this.sessionData = {};
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    calculateStartTime() {
+      if (this.sortedEvents.length > 0) {
+        const firstEvent = this.sortedEvents[0];
+        this.startTime = new Date(firstEvent.timestamp || firstEvent.created_at || 0).getTime();
+      }
+    },
+
+    toggleEvent(index) {
+      this.$set(this.expandedEvents, index, !this.expandedEvents[index]);
+    },
+
+    isToolEvent(event) {
+      const type = event._type || event.type;
+      return type === 'tool_call' || event.tool_name || event.tool_arguments;
+    },
+
+    isLlmEvent(event) {
+      const type = event._type || event.type;
+      return type === 'llm_call';
+    },
+
+    isMessageEvent(event) {
+      const type = event._type || event.type;
+      return type === 'message_output';
+    },
+
+    isReasoningEvent(event) {
+      const type = event._type || event.type;
+      return type === 'reasoning';
+    },
+
+    isErrorEvent(event) {
+      const type = event._type || event.type;
+      return type === 'agent_error' || type === 'error'
+        || event.error || event.error_message;
+    },
+
+    getEventTypeLabel(event) {
+      if (this.isErrorEvent(event)) return this.$t('Error');
+      if (this.isToolEvent(event)) return this.$t('Tool');
+      if (this.isLlmEvent(event)) return this.$t('LLM');
+      if (this.isMessageEvent(event)) return this.$t('Message');
+      if (this.isReasoningEvent(event)) return this.$t('Reasoning');
+
+      const type = event._type || event.type;
+      const labels = {
+        agent_processing_started: this.$t('Agent'),
+        agent_completed: this.$t('Agent'),
+        connection_established: this.$t('Connection'),
+      };
+      return labels[type] || this.$t('Event');
+    },
+
+    getEventName(event) {
+      if (this.isErrorEvent(event)) {
+        return this.$t('Execution Error');
+      }
+      if (this.isToolEvent(event)) {
+        return event.tool_name || event.name || this.$t('Tool Call');
+      }
+      if (this.isLlmEvent(event)) {
+        return event.model || this.$t('Model Request');
+      }
+      if (this.isMessageEvent(event)) {
+        return this.$t('Response');
+      }
+      if (this.isReasoningEvent(event)) {
+        return this.$t('Thinking');
+      }
+
+      const type = event._type || event.type;
+      const names = {
+        agent_processing_started: this.$t('Processing Started'),
+        agent_completed: this.$t('Completed'),
+        connection_established: this.$t('Connected'),
+      };
+      return names[type] || type || this.$t('Event');
+    },
+
+    getEventIcon(event) {
+      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';
+      if (this.isMessageEvent(event)) return 'fas fa-comment';
+      if (this.isReasoningEvent(event)) return 'fas fa-lightbulb';
+
+      const type = event._type || event.type;
+      const icons = {
+        agent_processing_started: 'fas fa-play',
+        agent_completed: 'fas fa-check',
+        connection_established: 'fas fa-plug',
+      };
+      return icons[type] || 'fas fa-circle';
+    },
+
+    getEventIconClasses(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';
+      if (this.isMessageEvent(event)) return 'tw-bg-green-100 tw-text-green-600';
+      if (this.isReasoningEvent(event)) return 'tw-bg-yellow-100 tw-text-yellow-600';
+
+      const type = event._type || event.type;
+      const classes = {
+        agent_processing_started: 'tw-bg-blue-100 tw-text-blue-600',
+        agent_completed: 'tw-bg-green-100 tw-text-green-600',
+        connection_established: 'tw-bg-gray-100 tw-text-gray-600',
+      };
+      return classes[type] || 'tw-bg-gray-100 tw-text-gray-600';
+    },
+
+    getEventBarClass(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';
+      if (this.isMessageEvent(event)) return 'tw-bg-green-400';
+      if (this.isReasoningEvent(event)) return 'tw-bg-yellow-400';
+      return 'tw-bg-blue-400';
+    },
+
+    getEventBarStyle(event, index) {
+      const eventIndex = index !== undefined ? index : 0;
+      const durationMs = event.duration_ms || 0;
+
+      // Calculate total duration from all event durations if not available from session
+      const effectiveTotalDuration = this.totalDuration || this.totalEventsDuration;
+
+      // If we have timestamps and total duration, use real timeline positioning
+      if (this.startTime && effectiveTotalDuration > 0) {
+        const eventTime = new Date(event.timestamp || event.created_at || 0).getTime();
+
+        // Check if we have valid timestamps (not epoch 0)
+        if (eventTime > 1000000000000) { // Valid timestamp (after year 2001)
+          const offsetMs = Math.max(eventTime - this.startTime, 0);
+          const offsetPercent = (offsetMs / effectiveTotalDuration) * 100;
+
+          let widthPercent;
+          if (durationMs > 0) {
+            widthPercent = (durationMs / effectiveTotalDuration) * 100;
+          } else {
+            widthPercent = 3; // Minimum for events without duration
+          }
+
+          return {
+            left: `${Math.min(offsetPercent, 99)}%`,
+            width: `${Math.max(widthPercent, 1)}%`,
+          };
+        }
+      }
+
+      // Fallback: Sequential positioning based on accumulated durations
+      // Calculate position based on sum of previous event durations
+      let accumulatedOffset = 0;
+      for (let i = 0; i < eventIndex; i++) {
+        accumulatedOffset += this.sortedEvents[i]?.duration_ms || 0;
+      }
+
+      const totalDurationForCalc = this.totalEventsDuration || 1;
+      const offsetPercent = (accumulatedOffset / totalDurationForCalc) * 100;
+
+      let widthPercent;
+      if (durationMs > 0) {
+        widthPercent = (durationMs / totalDurationForCalc) * 100;
+      } else {
+        // For events without duration, give them a small visible width
+        widthPercent = 2;
+      }
+
+      return {
+        left: `${Math.min(offsetPercent, 99)}%`,
+        width: `${Math.max(widthPercent, 1)}%`,
+      };
+    },
+
+    getDurationBarWidth(durationMs) {
+      if (!this.totalDuration || !durationMs) return 0;
+      return Math.min((durationMs / this.totalDuration) * 100, 100);
+    },
+
+    getStatusClasses(status) {
+      const classes = {
+        completed: 'tw-bg-green-100 tw-text-green-800',
+        error: 'tw-bg-red-100 tw-text-red-800',
+        processing: 'tw-bg-yellow-100 tw-text-yellow-800',
+      };
+      return classes[status] || 'tw-bg-gray-100 tw-text-gray-800';
+    },
+
+    getStatusIcon(status) {
+      const icons = {
+        completed: 'fas fa-check-circle',
+        error: 'fas fa-exclamation-circle',
+        processing: 'fas fa-spinner fa-spin',
+      };
+      return icons[status] || 'fas fa-circle';
+    },
+
+    formatStatus(status) {
+      const labels = {
+        completed: this.$t('Completed'),
+        error: this.$t('Error'),
+        processing: this.$t('Processing'),
+      };
+      return labels[status] || status;
+    },
+
+    formatDuration(ms) {
+      if (!ms) return '-';
+      if (ms < 1000) return `${ms}ms`;
+      const seconds = ms / 1000;
+      if (seconds < 60) return `${seconds.toFixed(1)}s`;
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = Math.round(seconds % 60);
+      return `${minutes}m ${remainingSeconds}s`;
+    },
+
+    formatEventTime(timestamp) {
+      if (!timestamp) return '';
+      const date = new Date(timestamp);
+      return date.toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+      });
+    },
+
+    formatFullDateTime(timestamp) {
+      if (!timestamp) return '-';
+      const date = new Date(timestamp);
+      return date.toLocaleString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+      });
+    },
+
+    formatNumber(num) {
+      if (!num) return '0';
+      return num.toLocaleString();
+    },
+
+    formatJson(data) {
+      if (!data) return '';
+      if (typeof data === 'string') {
+        try {
+          return JSON.stringify(JSON.parse(data), null, 2);
+        } catch {
+          return data;
+        }
+      }
+      try {
+        return JSON.stringify(data, null, 2);
+      } catch {
+        return String(data);
+      }
+    },
+
+    formatConfigKey(key) {
+      // Convert snake_case or camelCase to Title Case
+      return key
+        .replace(/_/g, ' ')
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/^./, (str) => str.toUpperCase())
+        .trim();
+    },
+
+    formatConfigValue(value) {
+      if (value === null || value === undefined) return '-';
+      if (typeof value === 'boolean') return value ? this.$t('Yes') : this.$t('No');
+      if (typeof value === 'number') return value.toLocaleString();
+      if (Array.isArray(value)) return value.length > 0 ? value.join(', ') : '-';
+      if (typeof value === 'object') return JSON.stringify(value);
+      return String(value);
+    },
+
+    truncateText(text, maxLength) {
+      if (!text) return '';
+      if (text.length <= maxLength) return text;
+      return `${text.substring(0, maxLength)}...`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+pre {
+  margin: 0;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+</style>
+
diff --git a/resources/js/admin/logs/components/Logs/AgentSessionDetail/index.js b/resources/js/admin/logs/components/Logs/AgentSessionDetail/index.js
new file mode 100644
index 0000000000..01a900019c
--- /dev/null
+++ b/resources/js/admin/logs/components/Logs/AgentSessionDetail/index.js
@@ -0,0 +1,5 @@
+import AgentSessionDetail from "./AgentSessionDetail.vue";
+
+export { AgentSessionDetail };
+export default AgentSessionDetail;
+
diff --git a/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
index f7d42922ff..da4b99b837 100644
--- a/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
+++ b/resources/js/admin/logs/components/Logs/BaseTable/BaseTable.vue
@@ -20,7 +20,12 @@
         <tr
           v-for="(item, idx) in data"
           :key="idx"
-          class="tw-border-t tw-border-zinc-200"
+          class="tw-border-t tw-border-zinc-200 tw-transition-colors"
+          :class="[
+            clickable ? 'tw-cursor-pointer hover:tw-bg-blue-50' : '',
+            isSelected(item) ? 'tw-bg-blue-50' : ''
+          ]"
+          @click="handleRowClick(item, idx)"
         >
           <td
             v-for="column in columns"
@@ -47,6 +52,9 @@ export default {
   props: {
     columns: { type: Array, required: true },
     data: { type: Array, required: true },
+    clickable: { type: Boolean, default: false },
+    selectedItem: { type: Object, default: null },
+    itemKey: { type: String, default: 'id' },
   },
   methods: {
     getRawValue(item, column) {
@@ -65,6 +73,15 @@ export default {
 
       return value;
     },
+    handleRowClick(item, index) {
+      if (this.clickable) {
+        this.$emit('row-click', item, index);
+      }
+    },
+    isSelected(item) {
+      if (!this.selectedItem) return false;
+      return item[this.itemKey] === this.selectedItem[this.itemKey];
+    },
   },
 };
 </script>

From 7173eba0df13bf331a18a142be7da5c824c9730b Mon Sep 17 00:00:00 2001
From: "Marco A. Nina Mena" <marco.antonio.nina@processmaker.com>
Date: Mon, 19 Jan 2026 16:55:26 -0400
Subject: [PATCH 14/14] Enhance MediaExporter to update FlowGenie media
 configuration upon media import when package-ai is available

---
 .../ImportExport/Exporters/MediaExporter.php       | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/ProcessMaker/ImportExport/Exporters/MediaExporter.php b/ProcessMaker/ImportExport/Exporters/MediaExporter.php
index 91c9d62b24..aee92aced0 100644
--- a/ProcessMaker/ImportExport/Exporters/MediaExporter.php
+++ b/ProcessMaker/ImportExport/Exporters/MediaExporter.php
@@ -44,10 +44,22 @@ public function import(): bool
 
         $ref = $this->getReference(DependentType::MEDIA);
         if ($ref && isset($ref['base64'])) {
-            $this->model->model->addMediaFromBase64($ref['base64'])
+            $newMedia = $this->model->model->addMediaFromBase64($ref['base64'])
                 ->usingFileName($this->model->file_name)
                 ->withCustomProperties($this->model->custom_properties)
                 ->toMediaCollection($this->model->collection_name);
+
+            if (hasPackage('package-ai')) {
+                $updaterClass = 'ProcessMaker\\Package\\PackageAi\\Services\\FlowGenieMediaConfigUpdater';
+                if (class_exists($updaterClass)) {
+                    $updaterClass::updateForMediaImport(
+                        (string) $this->model->model_type,
+                        (int) $this->model->model_id,
+                        (int) $this->model->id,
+                        (int) $newMedia->id
+                    );
+                }
+            }
         }
 
         // We should delete the model, because the Spatie library recreates it.