feat: claude max oauth support with multi-account switching, reasoning effort, and dynamic model listing

1 files changed, 13 insertions, 0 deletions

diff --git a/packages/frontend/src/lib/components/ChatMessage.svelte b/packages/frontend/src/lib/components/ChatMessage.svelte
index 387dbdc..c8b3f6e 100644
--- a/packages/frontend/src/lib/components/ChatMessage.svelte
+++ b/packages/frontend/src/lib/components/ChatMessage.svelte
@@ -6,8 +6,20 @@ import ToolCallDisplay from "./ToolCallDisplay.svelte";
 const { message }: { message: ChatMessage } = $props();
 
 const isUser = $derived(message.role === "user");
+const isSystem = $derived(message.role === "system");
 </script>
 
+{#if isSystem}
+	<div class="flex justify-center my-2">
+		<div class="badge badge-ghost gap-1 text-xs opacity-60">
+			{#each message.content as segment}
+				{#if segment.type === "text"}
+					{segment.text}
+				{/if}
+			{/each}
+		</div>
+	</div>
+{:else}
 <div class="chat chat-start mb-2">
 	<div class="chat-bubble max-w-[80%] break-words {isUser ? 'chat-bubble-primary' : 'bg-transparent'}">
 		{#if message.thinking}
@@ -31,3 +43,4 @@ const isUser = $derived(message.role === "user");
 		{/if}
 	</div>
 </div>
+{/if}