From 0d0d1271c381cdc9ef3a73dd255eef1135b7e2ec Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 25 Nov 2025 13:12:54 +0000
Subject: [PATCH] Move assistant usage chips

---
 packages/ui/src/components/message-item.tsx | 62 +++++++++++----------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/packages/ui/src/components/message-item.tsx b/packages/ui/src/components/message-item.tsx
index 8591d2b5..ae2c42c0 100644
--- a/packages/ui/src/components/message-item.tsx
+++ b/packages/ui/src/components/message-item.tsx
@@ -234,36 +234,6 @@ export default function MessageItem(props: MessageItemProps) {
               Fork
             </button>
           </Show>
-          <Show when={usageStats()}>
-            {(usage) => (
-              <div class="flex flex-wrap items-center gap-1 text-[10px] text-[var(--text-muted)]">
-                <div class={statChipClass}>
-                  <span class={statLabelClass}>Input</span>
-                  <span class={statValueClass}>{formatTokenTotal(usage().input)}</span>
-                </div>
-                <div class={statChipClass}>
-                  <span class={statLabelClass}>Output</span>
-                  <span class={statValueClass}>{formatTokenTotal(usage().output)}</span>
-                </div>
-                <div class={statChipClass}>
-                  <span class={statLabelClass}>Reasoning</span>
-                  <span class={statValueClass}>{formatTokenTotal(usage().reasoning)}</span>
-                </div>
-                <div class={statChipClass}>
-                  <span class={statLabelClass}>Cache Read</span>
-                  <span class={statValueClass}>{formatTokenTotal(usage().cacheRead)}</span>
-                </div>
-                <div class={statChipClass}>
-                  <span class={statLabelClass}>Cache Write</span>
-                  <span class={statValueClass}>{formatTokenTotal(usage().cacheWrite)}</span>
-                </div>
-                <div class={statChipClass}>
-                  <span class={statLabelClass}>Cost</span>
-                  <span class={statValueClass}>{formatCostValue(usage().cost)}</span>
-                </div>
-              </div>
-            )}
-          </Show>
           <span class="text-[11px] text-[var(--text-muted)]">{timestamp()}</span>
         </div>
       </div>
@@ -296,6 +266,7 @@ export default function MessageItem(props: MessageItemProps) {
         </For>
       </div>
 
+
       <Show when={fileAttachments().length > 0}>
         <div class="message-attachments">
           <For each={fileAttachments()}>
@@ -340,8 +311,39 @@ export default function MessageItem(props: MessageItemProps) {
         </div>
       </Show>
 
+      <Show when={usageStats()}>
+        {(usage) => (
+          <div class="mt-3 flex flex-wrap items-center gap-1 text-[10px] text-[var(--text-muted)]">
+            <div class={statChipClass}>
+              <span class={statLabelClass}>Input</span>
+              <span class={statValueClass}>{formatTokenTotal(usage().input)}</span>
+            </div>
+            <div class={statChipClass}>
+              <span class={statLabelClass}>Output</span>
+              <span class={statValueClass}>{formatTokenTotal(usage().output)}</span>
+            </div>
+            <div class={statChipClass}>
+              <span class={statLabelClass}>Reasoning</span>
+              <span class={statValueClass}>{formatTokenTotal(usage().reasoning)}</span>
+            </div>
+            <div class={statChipClass}>
+              <span class={statLabelClass}>Cache Read</span>
+              <span class={statValueClass}>{formatTokenTotal(usage().cacheRead)}</span>
+            </div>
+            <div class={statChipClass}>
+              <span class={statLabelClass}>Cache Write</span>
+              <span class={statValueClass}>{formatTokenTotal(usage().cacheWrite)}</span>
+            </div>
+            <div class={statChipClass}>
+              <span class={statLabelClass}>Cost</span>
+              <span class={statValueClass}>{formatCostValue(usage().cost)}</span>
+            </div>
+          </div>
+        )}
+      </Show>
       <Show when={props.message.status === "sending"}>
 
+
         <div class="message-sending">
           <span class="generating-spinner">●</span> Sending...
         </div>