From a415dbfd96c429f34e5de0a3572c7338d31321af Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Mon, 28 Jul 2025 12:10:29 +0200
Subject: [PATCH] feat(editor): Release the Focus Panel (#17734)

---
 .../editor-ui/src/components/Node/NodeCreation.vue    | 10 +---------
 .../editor-ui/src/components/ParameterOptions.vue     |  8 +-------
 packages/frontend/editor-ui/src/constants.ts          |  6 ------
 .../frontend/editor-ui/src/stores/focusPanel.store.ts |  2 +-
 packages/frontend/editor-ui/src/views/NodeView.vue    | 11 +----------
 5 files changed, 4 insertions(+), 33 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue
index 2e5da6354f..999d8b0307 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
 /* eslint-disable vue/no-multiple-template-root */
-import { computed, defineAsyncComponent } from 'vue';
+import { defineAsyncComponent } from 'vue';
 import { getMidCanvasPosition } from '@/utils/nodeViewUtils';
 import {
 	DEFAULT_STICKY_HEIGHT,
 	DEFAULT_STICKY_WIDTH,
-	FOCUS_PANEL_EXPERIMENT,
 	NODE_CREATOR_OPEN_SOURCES,
 	STICKY_NODE_TYPE,
 } from '@/constants';
 import { useUIStore } from '@/stores/ui.store';
 import { useFocusPanelStore } from '@/stores/focusPanel.store';
-import { usePostHog } from '@/stores/posthog.store';
 import type {
 	AddedNodesAndConnections,
 	NodeTypeSelectedPayload,
@@ -45,17 +43,12 @@ const emit = defineEmits<{
 
 const uiStore = useUIStore();
 const focusPanelStore = useFocusPanelStore();
-const posthogStore = usePostHog();
 const i18n = useI18n();
 const telemetry = useTelemetry();
 const assistantStore = useAssistantStore();
 
 const { getAddedNodesAndConnections } = useActions();
 
-const isOpenFocusPanelButtonVisible = computed(() => {
-	return posthogStore.getVariant(FOCUS_PANEL_EXPERIMENT.name) === FOCUS_PANEL_EXPERIMENT.variant;
-});
-
 function openNodeCreator() {
 	emit('toggleNodeCreator', {
 		source: NODE_CREATOR_OPEN_SOURCES.ADD_NODE_BUTTON,
@@ -138,7 +131,6 @@ function onAskAssistantButtonClick() {
 			/>
 		</KeyboardShortcutTooltip>
 		<KeyboardShortcutTooltip
-			v-if="isOpenFocusPanelButtonVisible"
 			:label="i18n.baseText('nodeView.openFocusPanel')"
 			:shortcut="{ keys: ['f'], shiftKey: true }"
 			placement="left"
diff --git a/packages/frontend/editor-ui/src/components/ParameterOptions.vue b/packages/frontend/editor-ui/src/components/ParameterOptions.vue
index b7703644d3..3562361244 100644
--- a/packages/frontend/editor-ui/src/components/ParameterOptions.vue
+++ b/packages/frontend/editor-ui/src/components/ParameterOptions.vue
@@ -8,8 +8,7 @@ import {
 import { isValueExpression } from '@/utils/nodeTypesUtils';
 import { computed } from 'vue';
 import { useNDVStore } from '@/stores/ndv.store';
-import { usePostHog } from '@/stores/posthog.store';
-import { AI_TRANSFORM_NODE_TYPE, FOCUS_PANEL_EXPERIMENT } from '@/constants';
+import { AI_TRANSFORM_NODE_TYPE } from '@/constants';
 import { getParameterTypeOption } from '@/utils/nodeSettingsUtils';
 
 interface Props {
@@ -42,7 +41,6 @@ const emit = defineEmits<{
 
 const i18n = useI18n();
 const ndvStore = useNDVStore();
-const posthogStore = usePostHog();
 
 const activeNode = computed(() => ndvStore.activeNode);
 const isDefault = computed(() => props.parameter.default === props.value);
@@ -54,12 +52,8 @@ const shouldShowExpressionSelector = computed(
 	() => !props.parameter.noDataExpression && props.showExpressionSelector && !props.isReadOnly,
 );
 
-const isFocusPanelFeatureEnabled = computed(() => {
-	return posthogStore.getVariant(FOCUS_PANEL_EXPERIMENT.name) === FOCUS_PANEL_EXPERIMENT.variant;
-});
 const canBeOpenedInFocusPanel = computed(
 	() =>
-		isFocusPanelFeatureEnabled.value &&
 		!props.parameter.isNodeSetting &&
 		!props.isReadOnly &&
 		!props.isContentOverridden &&
diff --git a/packages/frontend/editor-ui/src/constants.ts b/packages/frontend/editor-ui/src/constants.ts
index 7db19ed262..e1d3447dfe 100644
--- a/packages/frontend/editor-ui/src/constants.ts
+++ b/packages/frontend/editor-ui/src/constants.ts
@@ -759,12 +759,6 @@ export const EXTRA_TEMPLATE_LINKS_EXPERIMENT = {
 	variant: 'variant',
 };
 
-export const FOCUS_PANEL_EXPERIMENT = {
-	name: 'focus_panel',
-	control: 'control',
-	variant: 'variant',
-};
-
 export const TEMPLATE_ONBOARDING_EXPERIMENT = {
 	name: '035_template_onboarding',
 	control: 'control',
diff --git a/packages/frontend/editor-ui/src/stores/focusPanel.store.ts b/packages/frontend/editor-ui/src/stores/focusPanel.store.ts
index 6e3dff6ebe..e75b65dd1c 100644
--- a/packages/frontend/editor-ui/src/stores/focusPanel.store.ts
+++ b/packages/frontend/editor-ui/src/stores/focusPanel.store.ts
@@ -16,7 +16,7 @@ import { watchOnce } from '@vueuse/core';
 import { isFromAIOverrideValue } from '@/utils/fromAIOverrideUtils';
 
 // matches NodeCreator to ensure they fully overlap by default when both are open
-const DEFAULT_PANEL_WIDTH = 385;
+const DEFAULT_PANEL_WIDTH = 500;
 
 type FocusedNodeParameter = {
 	nodeId: string;
diff --git a/packages/frontend/editor-ui/src/views/NodeView.vue b/packages/frontend/editor-ui/src/views/NodeView.vue
index 964ef677d4..442ec4cbd1 100644
--- a/packages/frontend/editor-ui/src/views/NodeView.vue
+++ b/packages/frontend/editor-ui/src/views/NodeView.vue
@@ -54,7 +54,6 @@ import {
 	CHAT_TRIGGER_NODE_TYPE,
 	DRAG_EVENT_DATA_KEY,
 	EnterpriseEditionFeature,
-	FOCUS_PANEL_EXPERIMENT,
 	FROM_AI_PARAMETERS_MODAL_KEY,
 	MAIN_HEADER_TABS,
 	MANUAL_CHAT_TRIGGER_NODE_TYPE,
@@ -253,10 +252,6 @@ const { extractWorkflow } = useWorkflowExtraction();
 const { applyExecutionData } = useExecutionDebugging();
 useClipboard({ onPaste: onClipboardPaste });
 
-const isFocusPanelFeatureEnabled = computed(() => {
-	return usePostHog().getVariant(FOCUS_PANEL_EXPERIMENT.name) === FOCUS_PANEL_EXPERIMENT.variant;
-});
-
 const isLoading = ref(true);
 const isBlankRedirect = ref(false);
 const readOnlyNotification = ref<null | { visible: boolean }>(null);
@@ -1228,10 +1223,6 @@ function onOpenNodeCreatorForTriggerNodes(source: NodeCreatorOpenSource) {
 }
 
 function onToggleFocusPanel() {
-	if (!isFocusPanelFeatureEnabled.value) {
-		return;
-	}
-
 	focusPanelStore.toggleFocusPanel();
 	telemetry.track(`User ${focusPanelStore.focusPanelActive ? 'opened' : 'closed'} focus panel`, {
 		source: 'canvasKeyboardShortcut',
@@ -2172,7 +2163,7 @@ onBeforeUnmount(() => {
 			</Suspense>
 		</WorkflowCanvas>
 		<FocusPanel
-			v-if="isFocusPanelFeatureEnabled && !isLoading"
+			v-if="!isLoading"
 			:is-canvas-read-only="isCanvasReadOnly"
 			@save-keyboard-shortcut="onSaveWorkflow"
 		/>