feat(freshness): enhance diagnostics and update snapshot structure

- Introduced a new Diagnostics struct to capture transaction visibility state and activity state.
- Updated BuildSnapshot function to return diagnostics alongside snapshot, completeness, and sampling.
- Enhanced test cases to validate the new diagnostics data.
- Updated frontend components to utilize the new diagnostics information for improved user feedback on freshness context.

This change improves the observability of transaction activity and enhances the user experience by providing clearer insights into the freshness of data.

frontend/src/components/common/FreshnessTrustNote.tsx

@@ -6,6 +6,7 @@ import {
   summarizeFreshnessConfidence,
 } from '@/utils/explorerFreshness'
 import { formatRelativeAge } from '@/utils/format'
+import { useUiMode } from './UiModeContext'
 
 function buildSummary(context: ChainActivityContext) {
   if (context.transaction_visibility_unavailable) {
@@ -27,7 +28,11 @@ function buildSummary(context: ChainActivityContext) {
   return 'Freshness context is based on the latest visible public explorer evidence.'
 }
 
-function buildDetail(context: ChainActivityContext) {
+function buildDetail(context: ChainActivityContext, diagnosticExplanation?: string | null) {
+  if (diagnosticExplanation) {
+    return diagnosticExplanation
+  }
+
   if (context.transaction_visibility_unavailable) {
     return 'Use chain-head visibility and the last non-empty block as the current trust anchors.'
   }
@@ -60,15 +65,38 @@ export default function FreshnessTrustNote({
   scopeLabel?: string
   className?: string
 }) {
+  const { mode } = useUiMode()
   const sourceLabel = resolveFreshnessSourceLabel(stats, bridgeStatus)
   const confidenceBadges = summarizeFreshnessConfidence(stats, bridgeStatus)
+  const diagnosticExplanation = stats?.diagnostics?.explanation || bridgeStatus?.data?.diagnostics?.explanation || null
   const normalizedClassName = className ? ` ${className}` : ''
 
+  if (mode === 'expert') {
+    return (
+      <div className={`rounded-2xl border border-gray-200 bg-white/80 px-4 py-3 text-sm dark:border-gray-800 dark:bg-gray-950/40${normalizedClassName}`}>
+        <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+          <div className="font-medium text-gray-900 dark:text-white">{buildSummary(context)}</div>
+          <div className="text-xs text-gray-600 dark:text-gray-400">{sourceLabel}</div>
+        </div>
+        <div className="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-400">
+          {confidenceBadges.map((badge) => (
+            <span
+              key={badge}
+              className="rounded-full border border-gray-200 bg-gray-50 px-2.5 py-1 dark:border-gray-700 dark:bg-gray-900/70"
+            >
+              {badge}
+            </span>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className={`rounded-2xl border border-gray-200 bg-white/80 px-4 py-3 text-sm dark:border-gray-800 dark:bg-gray-950/40${normalizedClassName}`}>
       <div className="font-medium text-gray-900 dark:text-white">{buildSummary(context)}</div>
       <div className="mt-1 text-gray-600 dark:text-gray-400">
-        {buildDetail(context)} {scopeLabel ? `${scopeLabel}. ` : ''}{sourceLabel}
+        {buildDetail(context, diagnosticExplanation)} {scopeLabel ? `${scopeLabel}. ` : ''}{sourceLabel}
       </div>
       <div className="mt-2 flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-400">
         {confidenceBadges.map((badge) => (