Update UI with new Activity event stream from #195

- use new metrics data instead of log parsing
- auto-start events connection to server, improves responsiveness
- remove unnecessary libraries and code

ui/src/pages/Models.tsx

@@ -1,11 +1,10 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useAPI } from "../contexts/APIProvider";
 import { LogPanel } from "./LogViewer";
-import { processEvalTimes } from "../lib/Utils";
 import { usePersistentState } from "../hooks/usePersistentState";
 
 export default function ModelsPage() {
-  const { models, unloadAllModels, loadModel, upstreamLogs, enableAPIEvents } = useAPI();
+  const { models, unloadAllModels, loadModel, upstreamLogs, metrics } = useAPI();
   const [isUnloading, setIsUnloading] = useState(false);
   const [showUnlisted, setShowUnlisted] = usePersistentState("showUnlisted", true);
 
@@ -13,13 +12,6 @@ export default function ModelsPage() {
     return models.filter((model) => showUnlisted || !model.unlisted);
   }, [models, showUnlisted]);
 
-  useEffect(() => {
-    enableAPIEvents(true);
-    return () => {
-      enableAPIEvents(false);
-    };
-  }, []);
-
   const handleUnloadAllModels = useCallback(async () => {
     setIsUnloading(true);
     try {
@@ -34,9 +26,12 @@ export default function ModelsPage() {
     }
   }, []);
 
-  const [totalLines, totalTokens, avgTokensPerSecond] = useMemo(() => {
-    return processEvalTimes(upstreamLogs);
-  }, [upstreamLogs]);
+  const [totalRequests, totalTokens, avgTokensPerSecond] = useMemo(() => {
+    const totalTokens = metrics.reduce((sum, m) => sum + m.input_tokens + m.output_tokens, 0);
+    const totalSeconds = metrics.reduce((sum, m) => sum + m.duration_ms / 1000, 0);
+    const avgTokensPerSecond = totalSeconds > 0 ? totalTokens / totalSeconds : 0;
+    return [metrics.length, totalTokens, avgTokensPerSecond.toFixed(2)];
+  }, [metrics]);
 
   return (
     <div>
@@ -96,14 +91,13 @@ export default function ModelsPage() {
 
         {/* Right Column */}
         <div className="w-full md:w-1/2 flex flex-col" style={{ height: "calc(100vh - 125px)" }}>
-          <div className="card mb-4 min-h-[250px]">
-            <h2>Log Stats</h2>
-            <p className="italic my-2">note: eval logs from llama-server</p>
+          <div className="card mb-4 min-h-[225px]">
+            <h2>Chat Activity</h2>
             <table className="w-full border border-gray-200">
               <tbody>
                 <tr className="border-b border-gray-200">
                   <td className="py-2 px-4 font-medium border-r border-gray-200">Requests</td>
-                  <td className="py-2 px-4 text-right">{totalLines}</td>
+                  <td className="py-2 px-4 text-right">{totalRequests}</td>
                 </tr>
                 <tr className="border-b border-gray-200">
                   <td className="py-2 px-4 font-medium border-r border-gray-200">Total Tokens Generated</td>