diff --git a/packages/ui/src/components/message-stream-v2.tsx b/packages/ui/src/components/message-stream-v2.tsx
index e5abc7c7..c5485596 100644
--- a/packages/ui/src/components/message-stream-v2.tsx
+++ b/packages/ui/src/components/message-stream-v2.tsx
@@ -958,7 +958,9 @@ function MessageBlock(props: MessageBlockProps) {
                           partVersion={toolItem.partVersion}
                           instanceId={props.instanceId}
                           sessionId={props.sessionId}
+                          onContentRendered={props.onContentRendered}
                         />
+
                       </div>
                     )
                   })()}
@@ -1059,34 +1061,28 @@ function StepCard(props: StepCardProps) {
 
   const finishStyle = () => (props.borderColor ? { "border-left-color": props.borderColor } : undefined)
 
-  const renderUsageChips = (usage: NonNullable<ReturnType<typeof usageStats>>) => (
-    <div class="message-step-usage">
-      <div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
-        <span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Input</span>
-        <span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.input)}</span>
+  const renderUsageChips = (usage: NonNullable<ReturnType<typeof usageStats>>) => {
+    const entries = [
+      { label: "Input", value: usage.input, formatter: formatTokenTotal, show: usage.input > 0 },
+      { label: "Output", value: usage.output, formatter: formatTokenTotal, show: usage.output > 0 },
+      { label: "Reasoning", value: usage.reasoning, formatter: formatTokenTotal, show: usage.reasoning > 0 },
+      { label: "Cache Read", value: usage.cacheRead, formatter: formatTokenTotal, show: usage.cacheRead > 0 },
+      { label: "Cache Write", value: usage.cacheWrite, formatter: formatTokenTotal, show: usage.cacheWrite > 0 },
+      { label: "Cost", value: usage.cost, formatter: formatCostValue, show: true },
+    ].filter((entry) => entry.show)
+
+    return (
+      <div class="message-step-usage">
+        <For each={entries}>
+          {(entry) => (
+            <span class="message-step-usage-chip" data-label={entry.label}>
+              {entry.formatter(entry.value)}
+            </span>
+          )}
+        </For>
       </div>
-      <div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
-        <span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Output</span>
-        <span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.output)}</span>
-      </div>
-      <div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
-        <span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Reasoning</span>
-        <span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.reasoning)}</span>
-      </div>
-      <div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
-        <span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Cache Read</span>
-        <span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.cacheRead)}</span>
-      </div>
-      <div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
-        <span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Cache Write</span>
-        <span class="font-semibold text-[var(--text-primary)]">{formatTokenTotal(usage.cacheWrite)}</span>
-      </div>
-      <div class="inline-flex items-center gap-1 rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px]">
-        <span class="uppercase text-[9px] tracking-wide text-[var(--text-muted)]">Cost</span>
-        <span class="font-semibold text-[var(--text-primary)]">{formatCostValue(usage.cost)}</span>
-      </div>
-    </div>
-  )
+    )
+  }
 
   if (props.kind === "finish") {
     const usage = usageStats()
diff --git a/packages/ui/src/components/tool-call.tsx b/packages/ui/src/components/tool-call.tsx
index 81242406..4b641e22 100644
--- a/packages/ui/src/components/tool-call.tsx
+++ b/packages/ui/src/components/tool-call.tsx
@@ -56,7 +56,9 @@ interface ToolCallProps {
   partVersion?: number
   instanceId: string
   sessionId: string
-}
+  onContentRendered?: () => void
+ }
+
 
 function getToolIcon(tool: string): string {
   switch (tool) {
@@ -761,8 +763,10 @@ export default function ToolCall(props: ToolCallProps) {
       if (!options?.disableScrollTracking) {
         handleScrollRendered()
       }
+      props.onContentRendered?.()
     }
 
+
     return (
       <div
         class="message-text tool-call-markdown tool-call-markdown-large tool-call-diff-shell"
@@ -826,8 +830,10 @@ export default function ToolCall(props: ToolCallProps) {
     const handleMarkdownRendered = () => {
       markdownCache.set(markdownPart.renderCache)
       handleScrollRendered()
+      props.onContentRendered?.()
     }
 
+
     return (
       <div
         class={messageClass}
diff --git a/packages/ui/src/styles/messaging/message-base.css b/packages/ui/src/styles/messaging/message-base.css
index 74559bb4..3f7f11ca 100644
--- a/packages/ui/src/styles/messaging/message-base.css
+++ b/packages/ui/src/styles/messaging/message-base.css
@@ -35,6 +35,22 @@
   @apply flex flex-wrap items-center gap-1 text-[10px] text-[var(--text-muted)];
 }
 
+.message-step-usage-chip {
+  @apply inline-flex items-center rounded-full border border-[var(--border-base)] px-2 py-0.5 text-[10px];
+  color: var(--text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.message-step-usage-chip::before {
+  content: attr(data-label);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 9px;
+  color: var(--text-muted);
+  font-weight: var(--font-weight-medium);
+  margin-right: 0.35rem;
+}
+
 .message-step-heading {
   @apply flex flex-wrap items-center gap-2 text-xs;
   color: var(--text-muted);