From c58d60b2443c0140d2ad4a6f2e03d7b5267b1faf Mon Sep 17 00:00:00 2001
From: hugocasa <hugo@casademont.ch>
Date: Fri, 25 Sep 2026 12:46:19 +0200
Subject: [PATCH] feat: center the agent run form, configuration beside its Run
 button

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/RunForm.svelte    | 22 ++++++++-
 .../flows/content/AgentEditorHost.svelte      | 47 +++++++++----------
 2 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 510f774587..e5b4e2780a 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -123,6 +123,9 @@
 		args?: Record<string, any>
 		jsonView?: boolean
 		isValid?: boolean
+		/** Controls beside the Run button of a form that cannot schedule, in the row a
+		 *  schedulable one gives its Advanced options. */
+		actions?: import('svelte').Snippet
 	}
 
 	let {
@@ -141,7 +144,8 @@
 		overrideTagNote = undefined,
 		args = $bindable(),
 		jsonView = false,
-		isValid = $bindable(true)
+		isValid = $bindable(true),
+		actions = undefined
 	}: Props = $props()
 
 	let showPsCommonParams = $derived(
@@ -385,6 +389,22 @@
 				</div>
 			{/if}
 		</div>
+	{:else if actions}
+		<!-- The schedulable row's layout, with the caller's controls where Advanced sits. -->
+		<div class="flex-row-reverse flex-wrap flex w-full gap-4 mt-2 md:mt-6">
+			<Button
+				{loading}
+				variant="accent"
+				unifiedSize="md"
+				btnClasses="!inline-flex"
+				disabled={!isValid && !jsonView}
+				on:click={() => run(null)}
+				shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
+			>
+				{buttonText}
+			</Button>
+			<div>{@render actions()}</div>
+		</div>
 	{:else}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
diff --git a/frontend/src/lib/components/flows/content/AgentEditorHost.svelte b/frontend/src/lib/components/flows/content/AgentEditorHost.svelte
index 7221b09cd4..473601bbcc 100644
--- a/frontend/src/lib/components/flows/content/AgentEditorHost.svelte
+++ b/frontend/src/lib/components/flows/content/AgentEditorHost.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, setContext, untrack } from 'svelte'
 	import { writable } from 'svelte/store'
-	import { Cpu, MessageCircleOff, SlidersHorizontal } from 'lucide-svelte'
+	import { MessageCircleOff, SlidersHorizontal } from 'lucide-svelte'
 	import Tooltip from '$lib/components/meltComponents/Tooltip.svelte'
 	import PaneNotice from '$lib/components/common/paneNotice/PaneNotice.svelte'
 	import { Alert, Button } from '$lib/components/common'
@@ -89,11 +89,6 @@
 		onOpenConfig = undefined
 	}: Props = $props()
 
-	let modelLabel = $derived.by(() => {
-		const provider = draft.state?.args?.provider as { kind?: string; model?: string } | undefined
-		return [provider?.kind, provider?.model].filter(Boolean).join(' · ')
-	})
-
 	/** The one module the editor edits. Standalone (no `agent` key) so `initFlowState` loads a
 	 *  schema per tool — the linked branch deliberately loads none. Reserved in `forbiddenIds`:
 	 *  the root shares a flow-state map with the tools, so a tool of this id would lose its
@@ -494,14 +489,17 @@
 	</Tooltip>
 {/snippet}
 
-<!-- Where the chat's composer names the model beside its configuration: a surface with no
-     composer (the form, a reader who cannot run the agent) carries the same pair above it. -->
-{#snippet modelStrip()}
-	{#if onOpenConfig}
-		<PaneNotice icon={Cpu} action={{ label: 'Configuration', onClick: onOpenConfig }}>
-			{modelLabel ? `Runs with ${modelLabel}` : 'No model configured'}
-		</PaneNotice>
-	{/if}
+<!-- In the form's Run row, where a schedulable form keeps its Advanced options. -->
+{#snippet configurationButton()}
+	<Button
+		unifiedSize="md"
+		variant="default"
+		startIcon={{ icon: SlidersHorizontal }}
+		title="The model, instructions and tools this agent runs with"
+		onClick={() => onOpenConfig?.()}
+	>
+		Configuration
+	</Button>
 {/snippet}
 
 {#if draft.refusal}
@@ -584,13 +582,13 @@
 
 	{#snippet runPane()}
 		{#if runBlockedReason}
-			<div class="h-full flex flex-col">
-				{@render modelStrip()}
-				<div
-					class="flex-1 flex items-center justify-center px-8 text-center text-xs text-secondary"
-				>
-					{runBlockedReason}
-				</div>
+			<div
+				class="h-full flex flex-col items-center justify-center gap-4 px-8 text-center text-xs text-secondary"
+			>
+				{runBlockedReason}
+				{#if onOpenConfig}
+					{@render configurationButton()}
+				{/if}
 			</div>
 		{:else}
 			<div class="h-full min-h-0 flex flex-col">
@@ -599,9 +597,9 @@
 				{#if view}
 					<!-- A run of the deployed agent is a run like any other item's, so it opens on its
 					     own page rather than as a test result beside the form. -->
-					<div class="flex-1 min-h-0 flex flex-col {testMode === 'chat' ? 'hidden' : ''}">
-						{@render modelStrip()}
-						<div class="flex-1 min-h-0 overflow-auto p-4">
+					<!-- Centered at the width the chat's column keeps, so switching modes moves nothing. -->
+					<div class="flex-1 min-h-0 overflow-auto p-4 {testMode === 'chat' ? 'hidden' : ''}">
+						<div class="max-w-3xl mx-auto">
 							<RunForm
 								runnable={{ schema: AGENT_CHAT_SCHEMA, path }}
 								runAction={runOnce}
@@ -612,6 +610,7 @@
 								bind:scheduledForStr
 								bind:invisible_to_owner
 								bind:overrideTag
+								actions={onOpenConfig ? configurationButton : undefined}
 							/>
 						</div>
 					</div>