fix(ui): polish chat and dashboard aesthetics

- Change initial stream phase from "Connecting..." to "Generating..."
- Left-align "Loading model..." text in sidebar model badge
- Fix token count not updating by preferring client-side savings data
- Rename "Tokens" to "Output Tokens" in system panel
- Show input/output tokens in XRay footer with dash separators
- Fix EnergyDashboard to use shared API helpers (getBase) instead of raw env var

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/Chat/InputArea.tsx

@@ -133,7 +133,7 @@ export function InputArea() {
 
     setStreamState({
       isStreaming: true,
-      phase: 'Connecting...',
+      phase: 'Generating...',
       elapsedMs: 0,
       activeToolCalls: [],
       content: '',

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>
 

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 }> = [];

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) {

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>
               )}