From 3c6d1758576e612faf88b6967f91ccc9156086dc Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Thu, 11 Jun 2026 08:20:15 +0200
Subject: [PATCH] fix(odin): brand mark as bubble avatar + aligned thinking
 indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Assistant bubbles use the animated OdinMark instead of the plain 'O'
circle; the 'Pracuji…' row drops its horizontal padding and matches the
28px mark size, so the thinking mark sits exactly in the avatar column.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/admin/components/odin/OdinThread.tsx | 31 +++---------------------
 1 file changed, 4 insertions(+), 27 deletions(-)

diff --git a/src/admin/components/odin/OdinThread.tsx b/src/admin/components/odin/OdinThread.tsx
index 1d381e1..7706ebd 100644
--- a/src/admin/components/odin/OdinThread.tsx
+++ b/src/admin/components/odin/OdinThread.tsx
@@ -30,29 +30,6 @@ interface OdinThreadProps {
   threadRef: React.RefObject<HTMLDivElement | null>;
 }
 
-/** Small Odin avatar shown to the left of assistant bubbles. */
-function OdinAvatar({ size = 28 }: { size?: number }) {
-  return (
-    <Box
-      sx={{
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        bgcolor: "primary.main",
-        color: "common.white",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontWeight: 700,
-        fontSize: size * 0.5,
-        flexShrink: 0,
-      }}
-    >
-      O
-    </Box>
-  );
-}
-
 export default function OdinThread({
   turns,
   busy,
@@ -188,7 +165,7 @@ export default function OdinThread({
               maxWidth: "80%",
             }}
           >
-            {!isUser && <OdinAvatar size={28} />}
+            {!isUser && <OdinMark size={28} />}
             <Box
               sx={{
                 px: 1.5,
@@ -241,7 +218,8 @@ export default function OdinThread({
         );
       })}
 
-      {/* Busy indicator */}
+      {/* Busy indicator — same 28px mark and zero row padding as the bubble
+          rows, so the thinking mark sits exactly in the avatar column. */}
       {busy && (
         <Box
           sx={{
@@ -249,12 +227,11 @@ export default function OdinThread({
             display: "flex",
             alignItems: "center",
             gap: 1,
-            px: 1.5,
             py: 1,
             color: "text.secondary",
           }}
         >
-          <OdinMark size={22} state="thinking" />
+          <OdinMark size={28} state="thinking" />
           <Typography variant="caption" sx={{ color: "inherit" }}>
             Pracuji…
           </Typography>