feat: vault breakdown bars show on hover over info icon

Author: ahmedmarzougui-enclaive

src/lib/components/chat/Messages/UserMessage.svelte

@@ -564,20 +564,25 @@
 				</Tooltip>
 
 				{#if message.file_entity_count > 0}
-					<div class="text-xs text-gray-500 mt-1 flex flex-col gap-1">
-						<span>📎 {message.file_entity_count} sensitive items detected in file</span>
-						{#if message.garnet_breakdown && Object.keys(message.garnet_breakdown).length > 0 && console.warn('[GARNET BD]', message.garnet_breakdown) !== 'x'}
-							{@const maxCount = Math.max(...Object.values(message.garnet_breakdown))}
-							{#each Object.entries(message.garnet_breakdown) as [type, count]}
-								<div class="flex items-center gap-2">
-									<span class="text-gray-400 w-28 truncate">{type}</span>
-									<div class="flex-1 bg-gray-700 rounded h-1.5">
-										<div class="h-1.5 rounded bg-green-400" style="width: {(count / maxCount) * 100}%"></div>
-									</div>
-									<span class="text-gray-300 w-4 text-right">{count}</span>
+					<div class="text-xs text-gray-500 mt-1">
+						<div class="flex items-center gap-1 relative group/vault">
+							<span>📎 {message.file_entity_count} sensitive items detected in file</span>
+							{#if message.garnet_breakdown && Object.keys(message.garnet_breakdown).length > 0}
+								<span class="cursor-pointer text-gray-400 hover:text-white">ℹ️</span>
+								<div class="absolute bottom-5 left-0 z-50 hidden group-hover/vault:flex flex-col gap-1 bg-gray-800 border border-gray-700 rounded-lg p-2 w-48 shadow-lg">
+									{@const maxCount = Math.max(...Object.values(message.garnet_breakdown))}
+									{#each Object.entries(message.garnet_breakdown) as [type, count]}
+										<div class="flex items-center gap-2">
+											<span class="text-gray-400 w-24 truncate text-xs">{type}</span>
+											<div class="flex-1 bg-gray-700 rounded h-1.5">
+												<div class="h-1.5 rounded bg-green-400" style="width: {(count / maxCount) * 100}%"></div>
+											</div>
+											<span class="text-gray-300 w-3 text-right text-xs">{count}</span>
+										</div>
+									{/each}
 								</div>
-							{/each}
-						{/if}
+							{/if}
+						</div>
 					</div>
 				{/if}