From bb9d29b3fa47a7ab8ff8725a069e935c63af9143 Mon Sep 17 00:00:00 2001
From: hugocasa <hugo@casademont.ch>
Date: Wed, 30 Sep 2026 11:01:59 +0200
Subject: [PATCH 1/2] refactor: agent editor pane notes use Alert

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../common/paneNotice/PaneNotice.svelte       | 26 -------------------
 1 file changed, 26 deletions(-)
 delete 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
deleted file mode 100644
index b2d700e0ad..0000000000
--- a/frontend/src/lib/components/common/paneNotice/PaneNotice.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
-@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>

From 0783af7932b69c83e411f3769ed2a62fc5153ab4 Mon Sep 17 00:00:00 2001
From: hugocasa <hugo@casademont.ch>
Date: Wed, 30 Sep 2026 11:02:11 +0200
Subject: [PATCH 2/2] refactor: agent editor pane notes render as Alert

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../flows/content/AgentEditorHost.svelte      | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/AgentEditorHost.svelte b/frontend/src/lib/components/flows/content/AgentEditorHost.svelte
index 61d71d9aa4..6a7de836e6 100644
--- a/frontend/src/lib/components/flows/content/AgentEditorHost.svelte
+++ b/frontend/src/lib/components/flows/content/AgentEditorHost.svelte
@@ -3,7 +3,6 @@
 	import { writable } from 'svelte/store'
 	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'
 	import FlowChat from '../conversations/FlowChat.svelte'
 	import {
@@ -630,11 +629,16 @@
 					<!-- 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}
-						<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>
+						<Alert type="info" size="xs" title="" notRounded class="shrink-0 border-b">
+							<div class="flex items-center gap-2">
+								<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>
+						</Alert>
 					{/if}
 					<Splitpanes horizontal class="flex-1 min-h-0">
 						<Pane size={40} minSize={15}>
@@ -689,15 +693,20 @@
 							{/if}
 						</div>
 					{:else if chatGap?.noStream}
-						<PaneNotice
-							action={chatGap.noStream === 'off' && !readOnly
-								? { label: 'Turn on', onClick: turnOnStreaming }
-								: undefined}
-						>
-							{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>
+						<Alert type="info" size="xs" title="" notRounded class="shrink-0 border-b">
+							<div class="flex items-center gap-2">
+								<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>
+						</Alert>
 					{/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