diff --git a/frontend/src/components/Chat/InputArea.tsx b/frontend/src/components/Chat/InputArea.tsx
index 2d147c94..bc51f355 100644
--- a/frontend/src/components/Chat/InputArea.tsx
+++ b/frontend/src/components/Chat/InputArea.tsx
@@ -133,7 +133,7 @@ export function InputArea() {
 
     setStreamState({
       isStreaming: true,
-      phase: 'Connecting...',
+      phase: 'Generating...',
       elapsedMs: 0,
       activeToolCalls: [],
       content: '',
diff --git a/frontend/src/components/Chat/SystemPanel.tsx b/frontend/src/components/Chat/SystemPanel.tsx
index 6995b4e6..e83b2e9b 100644
--- a/frontend/src/components/Chat/SystemPanel.tsx
+++ b/frontend/src/components/Chat/SystemPanel.tsx
@@ -109,8 +109,8 @@ export function SystemPanel() {
             Session
           </h4>
           <div className="grid grid-cols-2 gap-2">
-            <MiniStat icon={Hash} label="Requests" value={String(telemetry?.total_requests ?? savings?.total_calls ?? 0)} />
-            <MiniStat icon={Hash} label="Tokens" value={formatNumber(telemetry?.total_tokens ?? savings?.total_tokens ?? 0)} />
+            <MiniStat icon={Hash} label="Requests" value={String(savings?.total_calls ?? telemetry?.total_requests ?? 0)} />
+            <MiniStat icon={Hash} label="Output Tokens" value={formatNumber(savings?.total_completion_tokens ?? telemetry?.total_tokens ?? 0)} />
           </div>
         </section>
 
diff --git a/frontend/src/components/Chat/XRayFooter.tsx b/frontend/src/components/Chat/XRayFooter.tsx
index af2d7c72..4aad1e58 100644
--- a/frontend/src/components/Chat/XRayFooter.tsx
+++ b/frontend/src/components/Chat/XRayFooter.tsx
@@ -20,13 +20,14 @@ export function XRayFooter({ usage, telemetry }: Props) {
   if (telemetry?.model_id) parts.push(telemetry.model_id);
   if (telemetry?.total_ms) parts.push(formatMs(telemetry.total_ms));
   if (usage && (usage.prompt_tokens || usage.completion_tokens)) {
-    parts.push(`${usage.prompt_tokens} in \u00B7 ${usage.completion_tokens} out`);
+    parts.push(`${usage.prompt_tokens} input tokens`);
+    parts.push(`${usage.completion_tokens} output tokens`);
   }
 
   if (parts.length === 0 && !usage?.total_tokens) return null;
 
   // Fallback: just show total tokens if no telemetry
-  const summary = parts.length > 0 ? parts.join(' \u00B7 ') : `${usage!.total_tokens} tokens`;
+  const summary = parts.length > 0 ? parts.join(' - ') : `${usage!.total_tokens} tokens`;
 
   // Build expanded rows
   const rows: Array<{ label: string; value: string; color?: string }> = [];
diff --git a/frontend/src/components/Dashboard/EnergyDashboard.tsx b/frontend/src/components/Dashboard/EnergyDashboard.tsx
index dd996934..26a2a05b 100644
--- a/frontend/src/components/Dashboard/EnergyDashboard.tsx
+++ b/frontend/src/components/Dashboard/EnergyDashboard.tsx
@@ -9,6 +9,7 @@ import {
   ResponsiveContainer,
 } from 'recharts';
 import { Zap, Activity, Thermometer, Hash } from 'lucide-react';
+import { fetchEnergy, fetchTelemetry } from '../../lib/api';
 
 interface EnergySample {
   timestamp: string;
@@ -75,10 +76,9 @@ export function EnergyDashboard() {
 
   const fetchData = useCallback(async () => {
     try {
-      const base = import.meta.env.VITE_API_URL || '';
       const [energyRes, telRes] = await Promise.allSettled([
-        fetch(`${base}/v1/telemetry/energy`).then((r) => r.ok ? r.json() : null),
-        fetch(`${base}/v1/telemetry/stats`).then((r) => r.ok ? r.json() : null),
+        fetchEnergy().catch(() => null),
+        fetchTelemetry().catch(() => null),
       ]);
 
       if (energyRes.status === 'fulfilled' && energyRes.value) {
diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
index 284fed1d..4f594f23 100644
--- a/frontend/src/components/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -145,7 +145,7 @@ export function Sidebar() {
                 {selectedModel || serverInfo?.model || 'Select model'}
               </span>
               {modelLoading && (
-                <span className="text-[10px] block" style={{ color: 'var(--color-accent)' }}>
+                <span className="text-[10px] block text-left" style={{ color: 'var(--color-accent)' }}>
                   Loading model...
                 </span>
               )}