Add toggle for usage metrics

packages/ui/src/components/message-item.tsx

@@ -2,6 +2,7 @@ import { For, Show, createMemo } from "solid-js"
 import type { Message, SDKPart, MessageInfo, ClientPart } from "../types/message"
 import { partHasRenderableText } from "../types/message"
 import { formatTokenTotal } from "../lib/formatters"
+import { preferences } from "../stores/preferences"
 import MessagePart from "./message-part"
 
 interface MessageItemProps {
@@ -17,6 +18,7 @@ interface MessageItemProps {
 
 export default function MessageItem(props: MessageItemProps) {
   const isUser = () => props.message.type === "user"
+  const showUsageMetrics = () => preferences().showUsageMetrics ?? true
   const timestamp = () => {
     const date = new Date(props.message.timestamp)
     return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
@@ -150,6 +152,9 @@ export default function MessageItem(props: MessageItemProps) {
     if (!info || info.role !== "assistant" || !info.tokens) {
       return null
     }
+    if (!showUsageMetrics()) {
+      return null
+    }
 
     const tokens = info.tokens
     const input = tokens.input ?? 0

packages/ui/src/components/message-stream.tsx

@@ -545,21 +545,22 @@ export default function MessageStream(props: MessageStreamProps) {
 
   return (
     <div class="message-stream-container">
-        <div class="connection-status">
-          <div class="connection-status-text connection-status-info flex flex-wrap items-center gap-2 text-sm font-medium">
-            <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
-              <span class="uppercase text-[10px] tracking-wide text-primary/70">Used</span>
-              <span class="font-semibold text-primary">{formatTokens(sessionInfo().actualUsageTokens ?? 0)}</span>
-            </div>
-            <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
-              <span class="uppercase text-[10px] tracking-wide text-primary/70">Avail</span>
-              <span class="font-semibold text-primary">
-                {sessionInfo().contextAvailableTokens !== null ? formatTokens(sessionInfo().contextAvailableTokens ?? 0) : "--"}
-              </span>
-            </div>
+      <div class="connection-status">
+        <div class="connection-status-text connection-status-info flex flex-wrap items-center gap-2 text-sm font-medium">
+          <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
+            <span class="uppercase text-[10px] tracking-wide text-primary/70">Used</span>
+            <span class="font-semibold text-primary">{formatTokens(sessionInfo().actualUsageTokens ?? 0)}</span>
           </div>
-
+          <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
+            <span class="uppercase text-[10px] tracking-wide text-primary/70">Avail</span>
+            <span class="font-semibold text-primary">
+              {sessionInfo().contextAvailableTokens !== null ? formatTokens(sessionInfo().contextAvailableTokens ?? 0) : "--"}
+            </span>
+          </div>
+        </div>
+ 
         <div class="connection-status-text connection-status-shortcut">
+
           <div class="connection-status-shortcut-action">
             <button
               type="button"

packages/ui/src/components/session/context-usage-panel.tsx

@@ -37,6 +37,7 @@ const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
     return value > 0 ? value : 0
   })
 
+
   const formatTokenValue = (value: number | null | undefined) => {
     if (value === null || value === undefined) return "--"
     return formatTokenTotal(value)