From ba65b24f7a80224c1c845b43a5d6cda17c0d0b46 Mon Sep 17 00:00:00 2001
From: hugocasa <hugo@casademont.ch>
Date: Fri, 25 Sep 2026 12:05:38 +0200
Subject: [PATCH] refactor: share the agent editor's pane notice as a
 PaneNotice component

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../common/paneNotice/PaneNotice.svelte       | 26 ++++++++++++
 .../flows/content/AgentEditorHost.svelte      | 41 +++++++------------
 2 files changed, 41 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/lib/components/common/paneNotice/PaneNotice.svelte

diff --git a/frontend/src/lib/components/common/paneNotice/PaneNotice.svelte b/frontend/src/lib/components/common/paneNotice/PaneNotice.svelte
new file mode 100644
index 0000000000..b2d700e0ad
--- /dev/null
+++ b/frontend/src/lib/components/common/paneNotice/PaneNotice.svelte
@@ -0,0 +1,26 @@
+<!--
+@component
+A one-line note across the top of a pane: why the pane behaves as it does, with at most one
+action that changes it. Lighter than an `Alert`, which is a box for a message of its own rather
+than a remark about the content under it.
+-->
+<script lang="ts">
+	import { Info } from 'lucide-svelte'
+	import Button from '../button/Button.svelte'
+
+	interface Props {
+		icon?: typeof Info
+		action?: { label: string; onClick: () => void }
+		children: import('svelte').Snippet
+	}
+
+	let { icon: Icon = Info, action = undefined, children }: Props = $props()
+</script>
+
+<div class="shrink-0 flex items-center gap-2 px-4 py-1.5 border-b text-2xs text-secondary">
+	<Icon size={16} class="shrink-0" />
+	<span class="flex-1">{@render children()}</span>
+	{#if action}
+		<Button unifiedSize="2xs" variant="subtle" onClick={action.onClick}>{action.label}</Button>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/flows/content/AgentEditorHost.svelte b/frontend/src/lib/components/flows/content/AgentEditorHost.svelte
index ac20e76e2e..28e991475a 100644
--- a/frontend/src/lib/components/flows/content/AgentEditorHost.svelte
+++ b/frontend/src/lib/components/flows/content/AgentEditorHost.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { getContext, setContext, untrack } from 'svelte'
 	import { writable } from 'svelte/store'
-	import { Info, MessageCircleOff } from 'lucide-svelte'
+	import { MessageCircleOff } from 'lucide-svelte'
+	import PaneNotice from '$lib/components/common/paneNotice/PaneNotice.svelte'
 	import { Alert, Button } from '$lib/components/common'
 	import FlowChat from '../conversations/FlowChat.svelte'
 	import {
@@ -572,17 +573,11 @@
 						<!-- An agent reused as a step has no use for memory unless its flow gives it a
 						     conversation, and the form is where such an agent is tried. -->
 						{#if !chatGap?.memory && !readOnly}
-							<div
-								class="shrink-0 flex items-center gap-2 px-4 py-1.5 border-b text-2xs text-secondary"
-							>
-								<Info size={12} class="shrink-0" />
-								<span class="flex-1">
-									Managed memory keeps the conversation between runs. It's useful if you chat with
-									this agent, use it in a flow in chat mode, or pass it a memory id. Otherwise, you
-									can turn it off.
-								</span>
-								<Button unifiedSize="2xs" variant="subtle" onClick={turnOffMemory}>Turn off</Button>
-							</div>
+							<PaneNotice action={{ label: 'Turn off', onClick: turnOffMemory }}>
+								Managed memory keeps the conversation between runs. It's useful if you chat with
+								this agent, use it in a flow in chat mode, or pass it a memory id. Otherwise, you
+								can turn it off.
+							</PaneNotice>
 						{/if}
 						<Splitpanes horizontal class="flex-1 min-h-0">
 							<Pane size={40} minSize={15}>
@@ -637,21 +632,15 @@
 								{/if}
 							</div>
 						{:else if chatGap?.noStream}
-							<div
-								class="shrink-0 flex items-center gap-2 px-4 py-1.5 border-b text-2xs text-secondary"
+							<PaneNotice
+								action={chatGap.noStream === 'off' && !readOnly
+									? { label: 'Turn on', onClick: turnOnStreaming }
+									: undefined}
 							>
-								<Info size={12} class="shrink-0" />
-								<span class="flex-1">
-									{chatGap.noStream === 'image'
-										? 'Image answers do not stream: each one shows once its run ends.'
-										: 'Streaming is off: each answer shows once its run ends.'}
-								</span>
-								{#if chatGap.noStream === 'off' && !readOnly}
-									<Button unifiedSize="2xs" variant="subtle" onClick={turnOnStreaming}>
-										Turn on
-									</Button>
-								{/if}
-							</div>
+								{chatGap.noStream === 'image'
+									? 'Image answers do not stream: each one shows once its run ends.'
+									: 'Streaming is off: each answer shows once its run ends.'}
+							</PaneNotice>
 						{/if}
 						<!-- Hidden rather than unmounted while memory is off: switching it off mid-turn must
 							     not end the chat following that turn. Test chats, since what runs is the agent as