Show token bar at bottom of chat input (#33)

src/hooks/useCountTokens.ts

@@ -0,0 +1,43 @@
+import { useCallback } from "react";
+import { atom, useAtom } from "jotai";
+import { IpcClient } from "@/ipc/ipc_client";
+import type { TokenCountResult } from "@/ipc/ipc_types";
+
+// Create atoms to store the token count state
+export const tokenCountResultAtom = atom<TokenCountResult | null>(null);
+export const tokenCountLoadingAtom = atom<boolean>(false);
+export const tokenCountErrorAtom = atom<Error | null>(null);
+
+export function useCountTokens() {
+  const [result, setResult] = useAtom(tokenCountResultAtom);
+  const [loading, setLoading] = useAtom(tokenCountLoadingAtom);
+  const [error, setError] = useAtom(tokenCountErrorAtom);
+
+  const countTokens = useCallback(
+    async (chatId: number, input: string) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const ipcClient = IpcClient.getInstance();
+        const tokenResult = await ipcClient.countTokens({ chatId, input });
+        setResult(tokenResult);
+        return tokenResult;
+      } catch (error) {
+        console.error("Error counting tokens:", error);
+        setError(error instanceof Error ? error : new Error(String(error)));
+        throw error;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [setLoading, setError, setResult]
+  );
+
+  return {
+    countTokens,
+    result,
+    loading,
+    error,
+  };
+}

src/hooks/useStreamChat.ts

@@ -18,6 +18,7 @@ import { showError } from "@/lib/toast";
 import { useProposal } from "./useProposal";
 import { useSearch } from "@tanstack/react-router";
 import { useRunApp } from "./useRunApp";
+import { useCountTokens } from "./useCountTokens";
 
 export function getRandomNumberId() {
   return Math.floor(Math.random() * 1_000_000_000_000_000);
@@ -36,6 +37,8 @@ export function useStreamChat({
   const setStreamCount = useSetAtom(chatStreamCountAtom);
   const { refreshVersions } = useLoadVersions(selectedAppId);
   const { refreshAppIframe } = useRunApp();
+  const { countTokens } = useCountTokens();
+
   let chatId: number | undefined;
 
   if (hasChatId) {
@@ -111,6 +114,7 @@ export function useStreamChat({
             refreshChats();
             refreshApp();
             refreshVersions();
+            countTokens(chatId, "");
           },
           onError: (errorMessage: string) => {
             console.error(`[CHAT] Stream error for ${chatId}:`, errorMessage);
@@ -121,6 +125,7 @@ export function useStreamChat({
             refreshChats();
             refreshApp();
             refreshVersions();
+            countTokens(chatId, "");
           },
         });
       } catch (error) {