fix(agents-server-ui): show "<1%" for tiny non-zero breakdown segments [review #4596]

A segment with a small but non-zero share rendered a coloured swatch + bar
sliver labelled "0%", which reads as a contradiction. Label any non-zero
segment that rounds to 0% as "<1%" instead. (Per-segment rounding can still make
the four rows not sum to exactly 100% — acceptable for a composition popover;
exact apportionment isn't worth the complexity here.)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: kevin-dp

packages/agents-server-ui/src/components/ContextUsageDetails.tsx

@@ -14,6 +14,16 @@ interface ContextUsageDetailsProps {
   modelId?: string
 }
 
+/**
+ * Percent label for a legend row. A non-zero segment that would round to `0%`
+ * shows `<1%` instead, so a visibly-coloured swatch/bar isn't labelled "0%".
+ */
+function formatSegmentPercent(ratio: number): string {
+  return ratio > 0 && Math.round(ratio * 100) === 0
+    ? `<1%`
+    : formatContextUsagePercent(ratio)
+}
+
 /**
  * The hover/click popover body for the context-usage indicator — a stacked
  * composition bar plus a legend of how each part of the prompt fills the
@@ -68,7 +78,7 @@ export function ContextUsageDetails({
               {formatTokenCount(seg.tokens)}
             </span>
             <span className={styles.legendPercent}>
-              {formatContextUsagePercent(seg.ratio)}
+              {formatSegmentPercent(seg.ratio)}
             </span>
           </li>
         ))}