feat: Add comprehensive cost tracking display for LLM usage (#2992)

Co-authored-by: jack <jack@deck.local>
Co-authored-by: Bradley Axen <baxen@squareup.com>

ui/desktop/src/components/ChatInput.tsx

@@ -29,9 +29,18 @@ interface ChatInputProps {
   droppedFiles?: string[];
   setView: (view: View) => void;
   numTokens?: number;
+  inputTokens?: number;
+  outputTokens?: number;
   hasMessages?: boolean;
   messages?: Message[];
   setMessages: (messages: Message[]) => void;
+  sessionCosts?: {
+    [key: string]: {
+      inputTokens: number;
+      outputTokens: number;
+      totalCost: number;
+    };
+  };
 }
 
 export default function ChatInput({
@@ -42,9 +51,12 @@ export default function ChatInput({
   initialValue = '',
   setView,
   numTokens,
+  inputTokens,
+  outputTokens,
   droppedFiles = [],
   messages = [],
   setMessages,
+  sessionCosts,
 }: ChatInputProps) {
   const [_value, setValue] = useState(initialValue);
   const [displayValue, setDisplayValue] = useState(initialValue); // For immediate visual feedback
@@ -557,9 +569,12 @@ export default function ChatInput({
           <BottomMenu
             setView={setView}
             numTokens={numTokens}
+            inputTokens={inputTokens}
+            outputTokens={outputTokens}
             messages={messages}
             isLoading={isLoading}
             setMessages={setMessages}
+            sessionCosts={sessionCosts}
           />
         </div>
       </div>