feat(UI): execution logs details [AB-685] (#1204)

* feat(UI): instance type filter [AB-721]

* feat(UI): execution logs details [AB-685]

* feat: review changes [AB-721]

Co-authored-by: Alexandre Rousseau <alexandre@rsseau.fr>

* feat: review changes [AB-685]

---------

Co-authored-by: Alexandre Rousseau <alexandre@rsseau.fr>

Author: bybash

src/ui/src/builder/BuilderApp.vue

@@ -23,46 +23,45 @@
 			>
 				<template #top>
 					<div class="builderMain">
-						<KeepAlive include="BuilderJournal">
-							<BuilderVault
-								v-if="builderMode === 'vault'"
-								key="vault"
-							/>
-							<BuilderJournal
-								v-else-if="builderMode === 'journal'"
-								key="journal"
-							/>
-							<div
-								v-else
-								key="renderer"
-								ref="rendererWrapperEl"
-								class="rendererWrapper"
+						<BuilderVault v-if="builderMode === 'vault'" />
+						<KeepAlive>
+							<BuilderJournal v-if="builderMode === 'journal'" />
+						</KeepAlive>
+						<div
+							v-if="
+								builderMode !== 'vault' &&
+								builderMode !== 'journal'
+							"
+							ref="rendererWrapperEl"
+							class="rendererWrapper"
+							:class="{
+								addNoteCursor:
+									notesManager.isAnnotating.value &&
+									ssbm.mode.value !== 'preview',
+							}"
+							@scroll="refreshNotesPosition"
+						>
+							<ComponentRenderer
+								ref="rendererEl"
+								class="componentRenderer"
 								:class="{
-									addNoteCursor:
-										notesManager.isAnnotating.value &&
-										ssbm.mode.value !== 'preview',
+									settingsOpen: ssbm.isSingleSelectionActive,
 								}"
-								@scroll="refreshNotesPosition"
+								@dragover="handleRendererDragover"
+								@dragstart="handleRendererDragStart"
+								@dragend="handleRendererDragEnd"
+								@drop="handleRendererDrop"
+								@click.capture="handleRendererClick"
+								@dblclick="handleRendererDblClick"
 							>
-								<ComponentRenderer
-									ref="rendererEl"
-									class="componentRenderer"
-									:class="{
-										settingsOpen:
-											ssbm.isSingleSelectionActive,
-									}"
-									@dragover="handleRendererDragover"
-									@dragstart="handleRendererDragStart"
-									@dragend="handleRendererDragEnd"
-									@drop="handleRendererDrop"
-									@click.capture="handleRendererClick"
-									@dblclick="handleRendererDblClick"
-								>
-								</ComponentRenderer>
-							</div>
-						</KeepAlive>
+							</ComponentRenderer>
+						</div>
 						<BuilderSettings
-							v-if="ssbm.isSingleSelectionActive"
+							v-if="
+								ssbm.isSingleSelectionActive &&
+								builderMode !== 'journal' &&
+								builderMode !== 'vault'
+							"
 							:key="selectedId ?? 'noneSelected'"
 						/>
 					</div>
@@ -126,9 +125,11 @@
 		</template>
 
 		<!-- MODAL -->
-
 		<div id="modal"></div>
 
+		<!-- DRAWER -->
+		<div id="drawer"></div>
+
 		<BuilderAppSocketTimeoutModal />
 		<!-- TOOLTIP -->
 
@@ -612,11 +613,11 @@ onUnmounted(() => {
 	position: absolute;
 	top: 0;
 	left: 0;
-	z-index: 10;
+	z-index: 100;
 }
 
 #tooltip {
 	position: absolute;
-	z-index: 11;
+	z-index: 110;
 }
 </style>

src/ui/src/builder/BuilderJournal.vue

@@ -11,27 +11,52 @@
 				v-for="(entry, key) of sortedEntries"
 				:key="key"
 				:journal-entry="entry"
+				@click="openEntryDetails(entry)"
 			></BuilderJournalEntry>
 		</div>
+
+		<!-- Drawer for entry details -->
+		<WdsDrawer
+			v-model="isDrawerOpen"
+			title="Execution Details"
+			size="large"
+		>
+			<BuilderJournalEntryDetails
+				v-if="selectedEntry"
+				:entry="selectedEntry"
+				@re-run="handleReRun"
+				@go-to-trigger="handleGoToTrigger"
+			/>
+		</WdsDrawer>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, onActivated, ref } from "vue";
+import { computed, inject, ref, shallowRef, onActivated, onMounted } from "vue";
 import BuilderJournalHeader from "./journal/BuilderJournalHeader.vue";
 import BuilderJournalEntry from "./journal/BuilderJournalEntry.vue";
+import BuilderJournalEntryDetails from "./journal/BuilderJournalEntryDetails.vue";
+import WdsDrawer from "@/wds/WdsDrawer.vue";
 import { convertAbsolutePathtoFullURL } from "@/utils/url";
+import { downloadJson } from "@/utils/blob";
 import { useToasts } from "./useToast";
 import { Component, WriterComponentDefinition } from "@/writerTypes";
 import injectionKeys from "@/injectionKeys";
 import type { JournalFilters } from "./journal/journalTypes";
+import { useComponentActions } from "./useComponentActions";
 
 defineOptions({
 	name: "BuilderJournal",
 });
 
 const { pushToast } = useToasts();
 const wf = inject(injectionKeys.core);
+const builderManager = inject(injectionKeys.builderManager);
+
+const { goToComponentParentPage, goToChild } = useComponentActions(
+	wf,
+	builderManager,
+);
 
 type ComponentInfo = {
 	type: "blueprint" | "block";
@@ -72,6 +97,14 @@ const filters = ref<JournalFilters>({
 	instanceTypes: [],
 });
 
+const selectedEntry = shallowRef<JournalEntry | null>(null);
+const isDrawerOpen = computed({
+	get: () => !!selectedEntry.value,
+	set: (value) => {
+		if (!value) selectedEntry.value = null;
+	},
+});
+
 const entries = computed<Record<string, JournalEntry>>(() => {
 	return Object.fromEntries(
 		Object.entries(rawEntries.value).map(([key, entry]) => {
@@ -185,20 +218,7 @@ const downloadAsJson = () => {
 			return [key, rawEntries.value[key]];
 		}),
 	);
-	const jsonString = JSON.stringify(rawFiltered, null, 2);
-	const blob = new Blob([jsonString], { type: "application/json" });
-
-	const url = URL.createObjectURL(blob);
-	try {
-		const a = document.createElement("a");
-		a.href = url;
-		a.download = "agent-journal.json";
-		document.body.appendChild(a);
-		a.click();
-		document.body.removeChild(a);
-	} finally {
-		window.URL.revokeObjectURL(url);
-	}
+	downloadJson(rawFiltered, "agent-journal.json");
 };
 
 async function deleteEntries() {
@@ -239,6 +259,34 @@ async function deleteEntries() {
 	rawEntries.value = newRawEntries;
 }
 
+function openEntryDetails(entry: JournalEntry) {
+	selectedEntry.value = entry;
+}
+
+function handleReRun(entry: JournalEntry) {
+	// TODO: Implement re-run logic
+	// This would trigger the same blueprint/workflow with the same inputs
+	pushToast({
+		type: "info",
+		message: `Re-run functionality for ${entry.title} will be implemented soon`,
+	});
+	// Placeholder for re-run implementation
+	// Will trigger the blueprint/workflow execution with entry data
+}
+
+function handleGoToTrigger(entry: JournalEntry) {
+	// Close the drawer
+	selectedEntry.value = null;
+
+	// Go to the trigger component
+	goToComponentParentPage(entry.trigger.component.id);
+	goToChild(entry.trigger.component.id);
+	pushToast({
+		type: "success",
+		message: `Jumped to ${entry.title}`,
+	});
+}
+
 onMounted(() => {
 	loadEntries();
 });

src/ui/src/builder/BuilderToasts.vue

@@ -29,7 +29,7 @@ const { toasts, removeToast } = useToasts();
 	position: fixed;
 	bottom: 12px;
 	right: 12px;
-	z-index: 5;
+	z-index: 20;
 }
 
 .BuilderToasts__toast {

src/ui/src/builder/journal/BuilderJournalEntry.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="BuilderJournalEntry">
+	<div
+		class="BuilderJournalEntry BuilderJournalEntry--clickable"
+		@click="$emit('click')"
+	>
 		<div class="BuilderJournalEntry__summary">
 			<BuilderJournalEntryResult
 				:result="journalEntry.result"
@@ -37,6 +40,10 @@ const props = defineProps({
 	journalEntry: { type: Object as PropType<JournalEntry>, required: true },
 });
 
+defineEmits<{
+	click: () => true;
+}>();
+
 const dateObj = computed(() => new Date(props.journalEntry.timestamp));
 
 const { formattedDate, formattedTime } = useDateTimeFormatter(dateObj, {
@@ -66,6 +73,15 @@ const { formattedDate, formattedTime } = useDateTimeFormatter(dateObj, {
 	border-bottom: 1px solid #e4e7ed;
 }
 
+.BuilderJournalEntry--clickable {
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.BuilderJournalEntry--clickable:hover {
+	background-color: var(--wdsColorBlue1);
+}
+
 .BuilderJournalEntry__summary {
 	padding: 12px 0;
 	width: fit-content;