@n8n/frontend-module-inbox 0.2.4 → 0.3.0

package/src/self-healing/SelfHealingResultDetail.vue

@@ -1,19 +1,351 @@
 <script setup lang="ts">
-import { N8nEmptyState } from '@n8n/design-system';
+import type { SelfHealingResultActionResponse, SelfHealingResultDetail } from '@n8n/api-types';
+import { useToast } from '@n8n/composables/useToast';
+import { N8nButton, N8nCallout, N8nEmptyState, N8nLoading } from '@n8n/design-system';
+import { VIEWS } from '@n8n/frontend-constants/views';
+import {
+	capabilities,
+	capabilityRegistry,
+	type SelfHealingChatStartOutcome,
+} from '@n8n/frontend-module-sdk';
 import { useI18n } from '@n8n/i18n';
+import { ResponseError } from '@n8n/rest-api-client';
+import { useRootStore } from '@n8n/stores/useRootStore';
+import { storeToRefs } from 'pinia';
+import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 
-import type { InboxSelection } from '../inbox.constants';
+import type { InboxItemChange } from '../inbox.constants';
+import SelfHealingResultContent from './SelfHealingResultContent.vue';
+import { useSelfHealingResultStore } from './selfHealingResult.store';
+import {
+	fetchSelfHealingResult,
+	reviewSelfHealingResult,
+	type SelfHealingPublishAccess,
+	type SelfHealingResultAction,
+	type SelfHealingReviewAction,
+	type SelfHealingSelection,
+} from './selfHealingResults.api';
 
-// AST-1518 replaces this rollout-gated integration point with the report and actions.
-defineProps<{ selection: Extract<InboxSelection, { type: 'self_healing_result' }> }>();
+type ChatRetry = {
+	target: SelfHealingSelection;
+	projectId: string;
+	result: SelfHealingResultDetail;
+	reason: Exclude<SelfHealingChatStartOutcome, 'started'> | 'unconfirmed';
+};
+
+const props = defineProps<{
+	selection: SelfHealingSelection;
+	tab: 'activity' | 'changes';
+	onItemChange: (change: InboxItemChange) => void;
+	isSelected: (id: string) => boolean;
+}>();
+const emit = defineEmits<{ 'update:tab': [tab: 'activity' | 'changes'] }>();
+
+const store = useSelfHealingResultStore();
+const { detail, workflow, loading, error, workflowError, pendingAction } = storeToRefs(store);
+const rootStore = useRootStore();
+const router = useRouter();
 const i18n = useI18n();
+const { showError, showMessage } = useToast();
+const chat = capabilityRegistry.tryUse(capabilities.createSelfHealingChatHandoff)?.();
+const chatRetry = ref<ChatRetry | null>(null);
+let reconcileOnRetry: ((current: SelfHealingResultDetail) => Promise<boolean>) | null = null;
+
+const workflowName = computed(
+	() =>
+		workflow.value?.name ??
+		detail.value?.suggestion?.payload.original.name ??
+		props.selection.workflowId,
+);
+const publishAccess = computed<SelfHealingPublishAccess>(() => {
+	if (!workflow.value) return 'unknown';
+	return workflow.value.scopes.includes('workflow:publish') ? 'allowed' : 'denied';
+});
+const errorKind = computed(() => {
+	if (error.value instanceof ResponseError) {
+		if (error.value.httpStatusCode === 404) return 'notFound';
+		if (error.value.httpStatusCode === 403) return 'forbidden';
+	}
+	return 'loadError';
+});
+
+watch(
+	[() => props.selection.id, () => props.selection.projectId, () => props.selection.workflowId],
+	() => {
+		reconcileOnRetry = null;
+		chatRetry.value = null;
+		void store.select(props.selection);
+	},
+	{ immediate: true },
+);
+
+/** A client error status means the server rejected the action, so nothing was saved. */
+function isRejected(cause: unknown) {
+	return (
+		cause instanceof ResponseError &&
+		cause.httpStatusCode !== undefined &&
+		cause.httpStatusCode < 500
+	);
+}
+
+function notifyResultClosed(
+	before: SelfHealingResultDetail,
+	after: SelfHealingResultDetail,
+	onItemChange: (change: InboxItemChange) => void,
+) {
+	if (before.reviewState === 'open' && after.reviewState !== 'open') {
+		onItemChange({
+			type: 'self_healing_result',
+			id: after.resultId,
+			state: 'closed',
+			updatedAt: after.updatedAt,
+		});
+	}
+}
+
+async function openEditor(workflowId: string) {
+	try {
+		const failure = await router.push({ name: VIEWS.WORKFLOW, params: { workflowId } });
+		if (failure) throw failure;
+	} catch (cause) {
+		showError(cause, i18n.baseText('inbox.selfHealing.action.openEditorError'));
+	}
+}
+
+async function startChat(request: Omit<ChatRetry, 'reason'>) {
+	let outcome: SelfHealingChatStartOutcome;
+	try {
+		outcome = (await chat?.start(request.projectId, request.result)) ?? 'unavailable';
+	} catch (cause) {
+		outcome = 'failed';
+		if (store.isSelected(request.target)) {
+			showError(cause, i18n.baseText('inbox.selfHealing.action.chatError'));
+		}
+	}
+
+	if (!store.isSelected(request.target)) return;
+	chatRetry.value = outcome === 'started' ? null : { ...request, reason: outcome };
+}
+
+async function retryChat() {
+	const retry = chatRetry.value;
+	if (!retry || !chat?.available.value || !store.isSelected(retry.target)) return;
+	if (!store.beginAction(retry.target, 'chat')) return;
+
+	try {
+		await startChat(retry);
+	} finally {
+		store.endAction(retry.target);
+	}
+}
+
+async function retryDetail() {
+	if (pendingAction.value) return;
+
+	const reconcile = reconcileOnRetry;
+	const result = await store.refreshDetail();
+	if (!reconcile || !result || reconcileOnRetry !== reconcile) return;
+
+	reconcileOnRetry = null;
+	await reconcile(result);
+}
+
+async function onAction(action: SelfHealingResultAction) {
+	const before = detail.value;
+	if (before?.reviewState !== 'open' || pendingAction.value || !store.isSelected(props.selection))
+		return;
+
+	if (
+		action === 'approve-and-publish' &&
+		(publishAccess.value !== 'allowed' || before.outcome !== 'fix_ready')
+	)
+		return;
+	if (action === 'chat' && !chat?.available.value) return;
+
+	const target = { ...props.selection };
+	if (!store.beginAction(target, action)) return;
+
+	const isSelected = props.isSelected;
+	const onItemChange = props.onItemChange;
+	const isContinuation = action === 'chat' || action === 'editor';
+
+	let reviewAction: SelfHealingReviewAction;
+	if (isContinuation) {
+		reviewAction = before.suggestion ? 'apply' : 'dismiss';
+	} else {
+		reviewAction = action;
+	}
+	const closedState = reviewAction === 'dismiss' ? 'dismissed' : 'applied';
+	let chatProjectId: string | null = null;
+
+	/**
+	 * Without a response, the saved state does not show which request closed the result.
+	 * So the chat waits for an explicit start, and publication stays unconfirmed.
+	 */
+	async function continueAfterClose(
+		result: SelfHealingResultActionResponse,
+		responseLost: boolean,
+	) {
+		// An outdated or concurrently discarded suggestion leaves nothing to continue with.
+		const closed =
+			result.reviewState === closedState ||
+			(action === 'dismiss' && result.reviewState === 'discarded');
+		if (!isSelected(target.id) || !closed) return false;
+
+		if (chatProjectId) {
+			const request = { target, projectId: chatProjectId, result };
+			if (responseLost) chatRetry.value = { ...request, reason: 'unconfirmed' };
+			else await startChat(request);
+		} else if (action !== 'dismiss') {
+			if (responseLost && action === 'approve-and-publish') {
+				showMessage({
+					type: 'warning',
+					duration: 0,
+					title: i18n.baseText('inbox.selfHealing.action.publishUnconfirmed.title'),
+					message: i18n.baseText('inbox.selfHealing.action.publishUnconfirmed.message'),
+				});
+			} else if (result.publishError !== undefined) {
+				showMessage({
+					type: 'warning',
+					duration: 0,
+					title: i18n.baseText('inbox.selfHealing.action.publishError'),
+					message: result.publishError,
+				});
+			}
+
+			await openEditor(result.workflowId);
+		}
+		return true;
+	}
+
+	try {
+		if (action === 'chat') {
+			// Load the chat project before closing, so a failed lookup leaves the result open.
+			chatProjectId = (await chat?.resolveProjectId().catch(() => null)) ?? null;
+			if (!isSelected(target.id)) return;
+			if (!chatProjectId) {
+				showMessage({
+					type: 'error',
+					title: i18n.baseText('inbox.selfHealing.action.chatError'),
+					message: i18n.baseText('inbox.selfHealing.action.chatProjectError'),
+				});
+				return;
+			}
+		}
+
+		const result = await reviewSelfHealingResult(rootStore.restApiContext, target, reviewAction);
+
+		store.acceptResult(result);
+		await continueAfterClose(result, false);
+		notifyResultClosed(before, result, onItemChange);
+	} catch (cause) {
+		// Refresh saved state before the user retries a request with a lost response.
+		const reconcile = async (current: SelfHealingResultDetail) => {
+			const continued = !isRejected(cause) && (await continueAfterClose(current, true));
+			notifyResultClosed(before, current, onItemChange);
+			return continued;
+		};
+
+		try {
+			const current = await fetchSelfHealingResult(rootStore.restApiContext, target);
+
+			store.acceptResult(current);
+			if (isSelected(target.id)) void store.refreshWorkflow();
+			if (await reconcile(current)) return;
+		} catch (readError) {
+			store.setError(target, readError);
+			if (isSelected(target.id)) reconcileOnRetry = reconcile;
+		}
+
+		if (isSelected(target.id)) showError(cause, i18n.baseText('inbox.selfHealing.action.error'));
+	} finally {
+		store.endAction(target);
+	}
+}
 </script>
 
 <template>
-	<N8nEmptyState
-		:heading="i18n.baseText('inbox.resultUnavailable.title')"
-		:description="i18n.baseText('inbox.resultUnavailable.body')"
+	<section
+		:class="$style.detail"
 		data-test-id="inbox-self-healing-detail"
 		:data-result-id="selection.id"
-	/>
+	>
+		<template v-if="loading || error || !detail">
+			<div :class="$style.columnTitle" />
+			<N8nLoading v-if="loading" :loading="true" :rows="3" />
+			<div v-else-if="error" :class="$style.error" data-test-id="self-healing-detail-error">
+				<N8nEmptyState
+					:heading="i18n.baseText(`inbox.selfHealing.detail.${errorKind}.title`)"
+					:description="i18n.baseText(`inbox.selfHealing.detail.${errorKind}.body`)"
+				/>
+				<N8nButton :loading="pendingAction !== null" @click="retryDetail()">{{
+					i18n.baseText('generic.retry')
+				}}</N8nButton>
+			</div>
+		</template>
+		<template v-else>
+			<SelfHealingResultContent
+				:detail="detail"
+				:workflow-name="workflowName"
+				:tab="tab"
+				:pending-action="pendingAction"
+				:publish-access="publishAccess"
+				:can-chat="chat?.available.value ?? false"
+				@update:tab="emit('update:tab', $event)"
+				@action="onAction"
+			>
+				<template v-if="workflowError || chatRetry" #notice>
+					<N8nCallout v-if="workflowError" theme="warning">
+						{{ i18n.baseText('inbox.selfHealing.detail.metadataError') }}
+						<template #trailingContent>
+							<N8nButton variant="ghost" @click="store.refreshWorkflow()">{{
+								i18n.baseText('generic.retry')
+							}}</N8nButton>
+						</template>
+					</N8nCallout>
+					<N8nCallout
+						v-if="chatRetry"
+						:theme="chatRetry.reason === 'unconfirmed' ? 'info' : 'warning'"
+						data-test-id="self-healing-chat-retry"
+					>
+						{{ i18n.baseText(`inbox.selfHealing.chatRetry.${chatRetry.reason}`) }}
+						<template #trailingContent>
+							<N8nButton
+								variant="ghost"
+								:disabled="!chat?.available.value"
+								:loading="pendingAction === 'chat'"
+								data-test-id="self-healing-chat-retry-button"
+								@click="retryChat()"
+								>{{ i18n.baseText('inbox.selfHealing.action.continueWithAssistant') }}</N8nButton
+							>
+						</template>
+					</N8nCallout>
+				</template>
+			</SelfHealingResultContent>
+		</template>
+	</section>
 </template>
+
+<style lang="scss" module>
+.detail {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.columnTitle {
+	min-height: var(--spacing--2xl);
+	padding-bottom: var(--spacing--sm);
+}
+
+.error {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing--sm);
+	height: 100%;
+}
+</style>

package/src/self-healing/SelfHealingResultMetadata.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import type { SelfHealingResultDetail } from '@n8n/api-types';
+import {
+	N8nAssistantAvatar,
+	N8nCard,
+	N8nIcon,
+	N8nLink,
+	N8nText,
+	N8nTimeAgo,
+} from '@n8n/design-system';
+import { VIEWS } from '@n8n/frontend-constants/views';
+import { useI18n } from '@n8n/i18n';
+import { useRootStore } from '@n8n/stores/useRootStore';
+import { computed } from 'vue';
+
+const props = defineProps<{
+	detail: SelfHealingResultDetail;
+	workflowName: string;
+	statusLabel: string;
+}>();
+const i18n = useI18n();
+const rootStore = useRootStore();
+
+const usageRows = computed(() => {
+	const usage = props.detail.usage;
+	const measurements =
+		'credits' in usage
+			? [
+					{
+						key: 'credits',
+						label: i18n.baseText('inbox.selfHealing.usage.credits'),
+						value: usage.credits,
+					},
+				]
+			: [
+					{
+						key: 'promptTokens',
+						label: i18n.baseText('inbox.selfHealing.usage.promptTokens'),
+						value: usage.promptTokens,
+					},
+					{
+						key: 'completionTokens',
+						label: i18n.baseText('inbox.selfHealing.usage.completionTokens'),
+						value: usage.completionTokens,
+					},
+					{
+						key: 'totalTokens',
+						label: i18n.baseText('inbox.selfHealing.usage.totalTokens'),
+						value: usage.totalTokens,
+					},
+				];
+
+	const rows = measurements.flatMap((row) => {
+		if (row.value === null) return [];
+
+		return [{ ...row, value: row.value.toLocaleString(rootStore.defaultLocale) }];
+	});
+
+	if (usage.durationSeconds !== null) {
+		rows.push({
+			key: 'duration',
+			label: i18n.baseText('inbox.selfHealing.usage.duration'),
+			value: i18n.baseText('inbox.selfHealing.usage.durationValue', {
+				interpolate: {
+					minutes: String(Math.floor(usage.durationSeconds / 60)),
+					seconds: String(Math.floor(usage.durationSeconds % 60)),
+				},
+			}),
+		});
+	}
+
+	return rows;
+});
+</script>
+
+<template>
+	<aside :class="$style.metadata" data-test-id="self-healing-metadata">
+		<N8nCard :class="$style.card" data-test-id="self-healing-status-card">
+			<template #header>
+				<N8nText bold color="text-light" size="medium">{{
+					i18n.baseText('inbox.selfHealing.metadata.status')
+				}}</N8nText>
+			</template>
+			<N8nText size="medium">{{ statusLabel }}</N8nText>
+		</N8nCard>
+		<N8nCard :class="[$style.card, $style.peopleCard]">
+			<div :class="$style.section">
+				<N8nText bold color="text-light" size="medium">{{
+					i18n.baseText('inbox.selfHealing.metadata.createdBy')
+				}}</N8nText>
+				<div :class="$style.person">
+					<N8nAssistantAvatar size="small" />
+					<N8nText size="medium">{{
+						i18n.baseText('inbox.selfHealing.metadata.assistant')
+					}}</N8nText>
+				</div>
+			</div>
+			<div :class="$style.section">
+				<N8nText bold color="text-light" size="medium">{{
+					i18n.baseText('inbox.selfHealing.metadata.completed')
+				}}</N8nText>
+				<N8nText size="medium">
+					<time :datetime="detail.completedAt"
+						><N8nTimeAgo :date="detail.completedAt" :locale="rootStore.defaultLocale"
+					/></time>
+				</N8nText>
+			</div>
+		</N8nCard>
+		<N8nCard :class="$style.card">
+			<template #header>
+				<N8nText bold color="text-light" size="medium">{{
+					i18n.baseText('inbox.selfHealing.metadata.workflow')
+				}}</N8nText>
+			</template>
+			<div :class="$style.section">
+				<N8nLink
+					:to="{ name: VIEWS.WORKFLOW, params: { workflowId: detail.workflowId } }"
+					theme="text"
+					size="medium"
+					:underline="false"
+					:class="$style.plainLink"
+					data-test-id="self-healing-workflow-link"
+				>
+					<span :class="$style.link">
+						<N8nIcon icon="workflow" size="medium" :class="$style.workflowIcon" />
+						<span :class="$style.workflowName">{{ workflowName }}</span>
+					</span>
+				</N8nLink>
+			</div>
+			<div :class="$style.section">
+				<N8nText bold color="text-light" size="medium">{{
+					i18n.baseText('inbox.selfHealing.metadata.execution')
+				}}</N8nText>
+				<N8nLink
+					v-if="detail.execution.status === 'available'"
+					:to="{
+						name: VIEWS.EXECUTION_PREVIEW,
+						params: { workflowId: detail.workflowId, executionId: detail.execution.id },
+					}"
+					theme="text"
+					size="medium"
+					:underline="false"
+					:class="$style.plainLink"
+					data-test-id="self-healing-execution-link"
+				>
+					{{
+						i18n.baseText('inbox.selfHealing.metadata.executionLink', {
+							interpolate: { id: detail.execution.id },
+						})
+					}}
+				</N8nLink>
+				<N8nText
+					v-else
+					size="small"
+					color="text-light"
+					data-test-id="self-healing-execution-unavailable"
+				>
+					{{ i18n.baseText('inbox.selfHealing.metadata.executionUnavailable') }}
+				</N8nText>
+			</div>
+		</N8nCard>
+		<N8nCard v-if="usageRows.length" :class="$style.card" data-test-id="self-healing-usage">
+			<template #header>
+				<N8nText bold color="text-light" size="medium">{{
+					i18n.baseText('inbox.selfHealing.usage.title')
+				}}</N8nText>
+			</template>
+			<dl :class="$style.usage">
+				<div
+					v-for="row in usageRows"
+					:key="row.key"
+					:class="$style.measurement"
+					:data-test-id="`self-healing-usage-${row.key}`"
+				>
+					<N8nText tag="dt" size="small" color="text-light">{{ row.label }}</N8nText>
+					<N8nText tag="dd" size="small">{{ row.value }}</N8nText>
+				</div>
+			</dl>
+		</N8nCard>
+	</aside>
+</template>
+
+<style module lang="scss">
+.metadata {
+	display: flex;
+	/* Match the prototype's metadata rail. The design system has no column-width token. */
+	flex: 0 0 min(18rem, 30%);
+	min-width: 14rem;
+	flex-direction: column;
+	gap: var(--spacing--2xs);
+	padding-top: var(--spacing--5xs);
+	overflow: auto;
+}
+
+.card {
+	--card--padding: var(--spacing--xs);
+	--n8n--card-body--gap: var(--spacing--2xs);
+	align-items: stretch;
+	border-color: var(--border-color);
+	background-color: transparent;
+
+	> div {
+		gap: var(--spacing--4xs);
+	}
+}
+
+.peopleCard {
+	--n8n--card-body--gap: var(--spacing--sm);
+}
+
+.section {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--2xs);
+	min-width: 0;
+}
+
+.person,
+.link {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+	min-width: 0;
+}
+
+.link {
+	align-items: flex-start;
+	gap: var(--spacing--4xs);
+}
+
+.plainLink:hover,
+.plainLink:focus-visible {
+	text-decoration: underline;
+}
+
+.workflowIcon {
+	flex-shrink: 0;
+	/* Align the icon with the first line, as in the prototype. */
+	margin-top: calc((1lh - 1em) / 2);
+}
+
+.workflowName {
+	white-space: normal;
+	overflow-wrap: anywhere;
+}
+
+.usage {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--4xs);
+	margin: 0;
+}
+
+.measurement {
+	display: flex;
+	justify-content: space-between;
+	gap: var(--spacing--2xs);
+
+	dd {
+		margin: 0;
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+	}
+}
+
+/* Match the prototype's sidebar widths. There are no column-width tokens. */
+@media (max-width: 75rem) {
+	.metadata {
+		flex-basis: 15rem;
+		min-width: 12rem;
+	}
+}
+
+/* Match the prototype's detail breakpoint. Container queries cannot use CSS variables. */
+@container assistant-detail (max-width: 44rem) {
+	.metadata {
+		flex: 0 0 auto;
+		min-width: 0;
+		overflow: visible;
+	}
+}
+</style>