diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
index 6d69c2b567..674963f4a0 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts
@@ -129,6 +129,7 @@ import IconLucideMousePointer from '~icons/lucide/mouse-pointer';
import IconLucideNetwork from '~icons/lucide/network';
import IconLucidePackageOpen from '~icons/lucide/package-open';
import IconLucidePalette from '~icons/lucide/palette';
+import IconLucidePanelRight from '~icons/lucide/panel-right';
import IconLucidePause from '~icons/lucide/pause';
import IconLucidePen from '~icons/lucide/pen';
import IconLucidePencil from '~icons/lucide/pencil';
@@ -524,6 +525,7 @@ export const updatedIconSet = {
network: IconLucideNetwork,
'package-open': IconLucidePackageOpen,
palette: IconLucidePalette,
+ 'panel-right': IconLucidePanelRight,
pause: IconLucidePause,
pen: IconLucidePen,
pencil: IconLucidePencil,
diff --git a/packages/frontend/@n8n/i18n/src/locales/en.json b/packages/frontend/@n8n/i18n/src/locales/en.json
index a38bb58ab2..74d8103883 100644
--- a/packages/frontend/@n8n/i18n/src/locales/en.json
+++ b/packages/frontend/@n8n/i18n/src/locales/en.json
@@ -1497,8 +1497,8 @@
"nodeView.couldntImportWorkflow": "Could not import workflow",
"nodeView.couldntLoadWorkflow.invalidWorkflowObject": "Invalid workflow object",
"nodeView.deletesTheCurrentExecutionData": "Deletes the current execution data",
- "nodeView.focusPanel.title": "Focus",
- "nodeView.focusPanel.noParameters": "No parameters focused. Focus a parameter by clicking on the action dropdown in the node detail view.",
+ "nodeView.focusPanel.noParameters.title": "Show a node parameter here, to iterate easily",
+ "nodeView.focusPanel.noParameters.subtitle": "For example, keep your prompt always visible so you can run the workflow while tweaking it",
"nodeView.focusPanel.missingParameter": "This parameter is no longer visible on the node. A related parameter was likely changed, removing this one.",
"nodeView.itLooksLikeYouHaveBeenEditingSomething": "It looks like you made some edits. If you leave before saving, your changes will be lost.",
"nodeView.loadingTemplate": "Loading template",
diff --git a/packages/frontend/editor-ui/src/components/FocusPanel.vue b/packages/frontend/editor-ui/src/components/FocusPanel.vue
index b43be1f3df..6f47f41fb3 100644
--- a/packages/frontend/editor-ui/src/components/FocusPanel.vue
+++ b/packages/frontend/editor-ui/src/components/FocusPanel.vue
@@ -314,14 +314,6 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
@resize="onResizeThrottle"
>
-
-
- {{ locale.baseText('nodeView.focusPanel.title') }}
-
-
-
-
-
@@ -330,17 +322,26 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
{{ resolvedParameter.node.name }}
-
+
+
+
+
@@ -448,8 +449,32 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
-
- {{ locale.baseText('nodeView.focusPanel.noParameters') }}
+
+
+ {{ locale.baseText('nodeView.focusPanel.noParameters.title') }}
+
+
+ {{ locale.baseText('nodeView.focusPanel.noParameters.subtitle') }}
@@ -463,7 +488,7 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
display: flex;
flex-direction: row nowrap;
border-left: 1px solid var(--color-foreground-base);
- background: var(--color-foreground-light);
+ background: var(--color-background-xlight);
overflow-y: hidden;
height: 100%;
}
@@ -474,18 +499,6 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
height: 100%;
}
-.closeButton:hover {
- cursor: pointer;
-}
-
-.header {
- display: flex;
- padding: var(--spacing-2xs);
- justify-content: space-between;
- border-bottom: 1px solid var(--color-foreground-base);
- background: var(--color-foreground-xlight);
-}
-
.content {
display: flex;
flex-direction: column;
@@ -498,7 +511,35 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
align-items: center;
.emptyText {
- max-width: 300px;
+ margin: 0 var(--spacing-xl);
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-2xs);
+
+ .focusParameterWrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-2xs);
+ margin-bottom: var(--spacing-m);
+
+ .iconWrapper {
+ position: relative;
+ display: inline-block;
+ }
+
+ .pointerIcon {
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translate(-20%, -30%);
+ pointer-events: none;
+ }
+
+ :global([class*='_disabled_']) {
+ cursor: default !important;
+ }
+ }
}
}
@@ -517,8 +558,8 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
.buttonWrapper {
display: flex;
- padding: 6px 8px 6px 34px;
- justify-content: flex-end;
+ gap: var(--spacing-2xs);
+ align-items: center;
}
}
@@ -545,6 +586,7 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
font-size: var(--font-size-2xs);
:global(.cm-editor) {
+ background-color: var(--color-code-background);
width: 100%;
}
}
@@ -552,7 +594,17 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
}
}
+.closeButton {
+ cursor: pointer;
+}
+
.heightFull {
height: 100%;
}
+
+.forceHover {
+ color: var(--color-button-secondary-hover-active-focus-font);
+ border-color: var(--color-button-secondary-hover-active-focus-border);
+ background-color: var(--color-button-secondary-hover-active-focus-background);
+}
diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue
index 063a572e98..6bd0ef7b16 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue
@@ -135,7 +135,7 @@ function onAskAssistantButtonClick() {