feat: implement reasoning_tokens tracking and enhanced usage logging

static/js/pages/logs.js

@@ -38,6 +38,24 @@ class LogsPage {
             const statusClass = log.status === 'success' ? 'success' : 'danger';
             const timestamp = luxon.DateTime.fromISO(log.timestamp).toFormat('yyyy-MM-dd HH:mm:ss');
             
+            let tokenDetails = `${log.tokens} total tokens`;
+            if (log.status === 'success') {
+                const parts = [];
+                parts.push(`${log.prompt_tokens} in`);
+                
+                let completionStr = `${log.completion_tokens} out`;
+                if (log.reasoning_tokens > 0) {
+                    completionStr += ` (${log.reasoning_tokens} reasoning)`;
+                }
+                parts.push(completionStr);
+
+                if (log.cache_read_tokens > 0) {
+                    parts.push(`${log.cache_read_tokens} cache-hit`);
+                }
+                
+                tokenDetails = parts.join(', ');
+            }
+
             return `
                 <tr class="log-row">
                     <td class="whitespace-nowrap">${timestamp}</td>
@@ -55,7 +73,7 @@ class LogsPage {
                     <td>
                         <div class="log-message-container">
                             <code class="log-model">${log.model}</code>
-                            <span class="log-tokens">${log.tokens} tokens</span>
+                            <span class="log-tokens" title="${log.tokens} total tokens">${tokenDetails}</span>
                             <span class="log-duration">${log.duration}ms</span>
                             ${log.error ? `<div class="log-error-msg">${log.error}</div>` : ''}
                         </div>