fix: separate and correctly accumulate real and demo session costs by tagging messages

Author: NikVince

frontend/src/components/ChatInterface.jsx

@@ -90,9 +90,11 @@ const ChatInterface = () => {
 
   // Calculate real and demo session costs
   const realCost = messages
-    .filter(m => m.role === 'assistant' && m.usage && typeof m.usage.cost === 'number' && !demoMode)
+    .filter(m => m.role === 'assistant' && m.usage && typeof m.usage.cost === 'number' && m.demo === false)
+    .reduce((sum, m) => sum + m.usage.cost, 0);
+  const demoCost = messages
+    .filter(m => m.role === 'assistant' && m.usage && typeof m.usage.cost === 'number' && m.demo === true)
     .reduce((sum, m) => sum + m.usage.cost, 0);
-  const demoCost = demoUsage?.cost || 0;
 
   // SettingsPanel props
   const settingsPanelProps = {

frontend/src/hooks/useChat.js

@@ -51,14 +51,6 @@ const useChat = () => {
   const [model, setModel] = useState('gpt-3.5-turbo');
   const [demoMode, setDemoMode] = useState(false);
 
-  // Demo usage state
-  const [demoUsage, setDemoUsage] = useState({
-    promptTokens: 0,
-    completionTokens: 0,
-    totalTokens: 0,
-    cost: 0
-  });
-
   // Clear error state
   const clearError = useCallback(() => setError(null), []);
 
@@ -100,13 +92,6 @@ const useChat = () => {
         const completionTokens = DEMO_COMPLETION_TOKENS;
         const totalTokens = promptTokens + completionTokens;
         const cost = +calculateDemoCost(model, promptTokens, completionTokens).toFixed(6);
-        const newUsage = {
-          promptTokens: demoUsage.promptTokens + promptTokens,
-          completionTokens: demoUsage.completionTokens + completionTokens,
-          totalTokens: demoUsage.totalTokens + totalTokens,
-          cost: +(demoUsage.cost + cost).toFixed(6)
-        };
-        setDemoUsage(newUsage);
         setMessages(prev => [
           ...prev,
           {
@@ -117,7 +102,8 @@ const useChat = () => {
               completionTokens,
               totalTokens,
               cost
-            }
+            },
+            demo: true
           }
         ]);
       } else {
@@ -134,7 +120,8 @@ const useChat = () => {
         const assistantMessage = {
           role: 'assistant',
           content: response.data.content,
-          usage: response.data.usage
+          usage: response.data.usage,
+          demo: false
         };
         setMessages(prev => [...prev, assistantMessage]);
       }
@@ -173,7 +160,6 @@ const useChat = () => {
     apiKey,
     model,
     demoMode,
-    demoUsage,
 
     // State setters
     setApiKey,