From f37d878580f51dece1386d76190a76dff69f1590 Mon Sep 17 00:00:00 2001
From: Guilhem Lemouel <guilhemlemouel@gmail.com>
Date: Thu, 1 Oct 2026 02:03:48 -0700
Subject: [PATCH] feat: the agent editor fills the band too
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It was the last editor route drawing its own header row under the band, and the
band named it "Agents" — `navPageFor`'s first-segment fallback, because nothing
on the route registered an item. The agent's path is the breadcrumb now, its
version badge reads after that name, the sentence that was the row's second line
became the hint beside it, and the Chat/Form switch, Settings, Evals, version
history and Deploy are the band's actions.

No trail levels in the registration: this layout opens settings in a drawer and
evals over the page, so unlike the dialog it never stands on a level — `trail` is
its root alone here.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../flows/content/AgentEditorModal.svelte     | 58 +++++++------------
 1 file changed, 22 insertions(+), 36 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/AgentEditorModal.svelte b/frontend/src/lib/components/flows/content/AgentEditorModal.svelte
index 618c31dbaf..e43b97d195 100644
--- a/frontend/src/lib/components/flows/content/AgentEditorModal.svelte
+++ b/frontend/src/lib/components/flows/content/AgentEditorModal.svelte
@@ -1,13 +1,5 @@
 <script lang="ts">
-	import {
-		ChevronRight,
-		FlaskConical,
-		Settings,
-		FormInput,
-		History,
-		MessageSquare,
-		Save
-	} from 'lucide-svelte'
+	import { FlaskConical, Settings, FormInput, History, MessageSquare, Save } from 'lucide-svelte'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 	import { onDestroy, untrack } from 'svelte'
@@ -39,6 +31,8 @@
 	import AgentSettings from './AgentSettings.svelte'
 	import AgentEvalsModal from './AgentEvalsModal.svelte'
 	import { useOperatingWorkspace } from '$lib/components/operatingWorkspace.svelte'
+	import PageHeaderContent from '$lib/components/PageHeaderContent.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 
 	const operatingWorkspace = useOperatingWorkspace()
 
@@ -312,34 +306,15 @@
 				{@render body()}
 			</Modal>
 		{:else}
+			<!-- On its own route the editor's header is the page header: the agent's path is the
+			     breadcrumb, the level it is on reads after that name, and its controls are the band's
+			     actions. -->
+			<PageHeaderContent
+				item={{ path: shownPath, summaryContent: agentBadges }}
+				afterName={agentHint}
+				actions={settings}
+			/>
 			<div class="h-full min-h-0 flex flex-col">
-				<div class="flex items-center gap-2 px-4 py-2 border-b shrink-0">
-					<div class="min-w-0 flex flex-col">
-						<div class="flex items-center gap-1 min-w-0">
-							{#each trail as segment, i (i)}
-								{#if i > 0}
-									<ChevronRight size={14} class="text-tertiary shrink-0" />
-								{/if}
-								{#if segment.onclick}
-									<Button variant="subtle" unifiedSize="sm" onClick={segment.onclick}>
-										{segment.label}
-									</Button>
-								{:else}
-									<span class="text-sm font-semibold text-emphasis truncate">{segment.label}</span>
-								{/if}
-								{#if i === 0}
-									{@render titleBadge()}
-								{/if}
-							{/each}
-							{@render levelBadge()}
-						</div>
-						{#if description}
-							<span class="text-2xs text-tertiary truncate">{description}</span>
-						{/if}
-					</div>
-					<div class="grow"></div>
-					{@render settings()}
-				</div>
 				<div class="flex-1 min-h-0 px-4 sm:px-6">
 					{@render body()}
 				</div>
@@ -347,6 +322,17 @@
 		{/if}
 	{/key}
 
+	{#snippet agentBadges()}
+		<!-- The version rides with the agent's name, as the linked-agent card in the step panel has
+		     it. The trail's levels are not here: this layout opens settings in a drawer and evals
+		     over the page, so it never stands on one. -->
+		{@render titleBadge()}
+	{/snippet}
+	{#snippet agentHint()}
+		{#if description}
+			<Tooltip>{description}</Tooltip>
+		{/if}
+	{/snippet}
 	{#snippet titleBadge()}
 		<!-- Against the agent's own name wherever it appears, as the linked-agent card in the
 				     step panel has it. -->