From 1ce2363f509d433d9f4a36e6a38485d99e3e5cbc Mon Sep 17 00:00:00 2001
From: hugocasa <hugo@casademont.ch>
Date: Fri, 11 Sep 2026 18:00:22 +0200
Subject: [PATCH] fix: give the labelled divider a border colour and the
 standard pretty icon

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/DisplayResult.svelte  |  3 ---
 frontend/src/lib/components/LabeledDivider.svelte | 10 +++++-----
 frontend/src/lib/components/Login.svelte          |  7 +++----
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index ef92c37103..3142b5b2a8 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -19,7 +19,6 @@
 		Braces,
 		Highlighter,
 		ArrowDownFromLine,
-		Bot,
 		Database,
 		Loader2
 	} from 'lucide-svelte'
@@ -830,8 +829,6 @@
 							{#snippet children({ item })}
 								{#if ['table-col', 'table-row', 'table-row-object'].includes(resultKind ?? '')}
 									<ToggleButton size="sm" value="table" label="Table" icon={Table2} {item} />
-								{:else if resultKind === 'aiagent'}
-									<ToggleButton size="sm" value="pretty" label="Pretty" icon={Bot} {item} />
 								{:else}
 									<ToggleButton size="sm" value="pretty" label="Pretty" icon={Highlighter} {item} />
 								{/if}
diff --git a/frontend/src/lib/components/LabeledDivider.svelte b/frontend/src/lib/components/LabeledDivider.svelte
index 071394a867..145abc111f 100644
--- a/frontend/src/lib/components/LabeledDivider.svelte
+++ b/frontend/src/lib/components/LabeledDivider.svelte
@@ -1,6 +1,6 @@
-<!-- A horizontal rule with something centred in it: the chat's boundary markers and
-	the agent run's output separator. Takes a snippet rather than a string because
-	the middle is sometimes a button, not a label. -->
+<!-- A horizontal rule with something centred in it: the login page's "or" and the
+	agent run's output separator. Takes a snippet rather than a string because the
+	middle is sometimes a button, not a label. -->
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge'
 
@@ -13,7 +13,7 @@
 </script>
 
 <div class={twMerge('flex items-center gap-2', clazz)}>
-	<div class="h-px flex-1 bg-surface-selected"></div>
+	<div class="h-px flex-1 bg-border-light"></div>
 	{@render children()}
-	<div class="h-px flex-1 bg-surface-selected"></div>
+	<div class="h-px flex-1 bg-border-light"></div>
 </div>
diff --git a/frontend/src/lib/components/Login.svelte b/frontend/src/lib/components/Login.svelte
index 44ba7e4e15..51fa4fd8bc 100644
--- a/frontend/src/lib/components/Login.svelte
+++ b/frontend/src/lib/components/Login.svelte
@@ -1,5 +1,6 @@
 <script module lang="ts">
 	import { noteSessionEmail } from '$lib/onboardingProfile'
+	import LabeledDivider from './LabeledDivider.svelte'
 	import type { LastLoginMethod } from '$lib/lastLoginMethod'
 
 	/** Feeds the login card a fixed instance configuration instead of the live one.
@@ -747,11 +748,9 @@
 {/snippet}
 
 {#snippet orDivider()}
-	<div class="flex items-center gap-3 my-6">
-		<div class="h-px flex-1 bg-border-light"></div>
+	<LabeledDivider class="gap-3 my-6">
 		<span class="text-2xs uppercase text-secondary">or</span>
-		<div class="h-px flex-1 bg-border-light"></div>
-	</div>
+	</LabeledDivider>
 {/snippet}
 
 <div class="bg-surface px-4 py-8 border sm:rounded-lg sm:px-10">