useAppStore.getState().setSavings(data))
+ .catch(() => {});
}
}, [
input,
diff --git a/frontend/src/components/Chat/MessageBubble.tsx b/frontend/src/components/Chat/MessageBubble.tsx
index cbdf2d84..1214b858 100644
--- a/frontend/src/components/Chat/MessageBubble.tsx
+++ b/frontend/src/components/Chat/MessageBubble.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeHighlight from 'rehype-highlight';
import remarkGfm from 'remark-gfm';
@@ -6,6 +6,12 @@ import { Copy, Check } from 'lucide-react';
import { ToolCallCard } from './ToolCallCard';
import type { ChatMessage } from '../../types';
+function stripThinkTags(text: string): string {
+ let cleaned = text.replace(/
[\s\S]*?<\/think>\s*/gi, '');
+ cleaned = cleaned.replace(/^[\s\S]*?<\/think>\s*/i, '');
+ return cleaned.trim();
+}
+
interface Props {
message: ChatMessage;
}
@@ -100,6 +106,8 @@ export function MessageBubble({ message }: Props) {
);
}
+ const cleanContent = useMemo(() => stripThinkTags(message.content), [message.content]);
+
return (
{/* Tool calls */}
@@ -112,7 +120,7 @@ export function MessageBubble({ message }: Props) {
)}
{/* Assistant message */}
- {message.content && (
+ {cleanContent && (
- {message.content}
+ {cleanContent}
)}
{/* Footer: usage + copy */}
-
+
{message.usage && (
{message.usage.total_tokens} tokens
diff --git a/frontend/src/components/Chat/SystemPanel.tsx b/frontend/src/components/Chat/SystemPanel.tsx
new file mode 100644
index 00000000..f339dd7b
--- /dev/null
+++ b/frontend/src/components/Chat/SystemPanel.tsx
@@ -0,0 +1,273 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+ Zap,
+ Activity,
+ Thermometer,
+ DollarSign,
+ TrendingDown,
+ Cloud,
+ HardDrive,
+ Hash,
+ X,
+} from 'lucide-react';
+import { useAppStore } from '../../lib/store';
+
+interface EnergyData {
+ total_energy_j?: number;
+ energy_per_token_j?: number;
+ avg_power_w?: number;
+}
+
+interface TelemetryStats {
+ total_requests?: number;
+ total_tokens?: number;
+}
+
+const CLOUD_PRICING = [
+ { name: 'GPT-5.3', input: 2.00, output: 10.00, primary: true },
+ { name: 'Claude Opus 4.6', input: 5.00, output: 25.00, primary: false },
+ { name: 'Gemini 3.1 Pro', input: 2.00, output: 12.00, primary: false },
+];
+
+export function SystemPanel() {
+ const savings = useAppStore((s) => s.savings);
+ const toggleSystemPanel = useAppStore((s) => s.toggleSystemPanel);
+ const [energy, setEnergy] = useState(null);
+ const [telemetry, setTelemetry] = useState(null);
+
+ 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)),
+ ]);
+ if (energyRes.status === 'fulfilled' && energyRes.value) {
+ setEnergy(energyRes.value as EnergyData);
+ }
+ if (telRes.status === 'fulfilled' && telRes.value) {
+ setTelemetry(telRes.value as TelemetryStats);
+ }
+ } catch {
+ // best-effort
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchData();
+ const interval = setInterval(fetchData, 3000);
+ return () => clearInterval(interval);
+ }, [fetchData]);
+
+ // Re-fetch energy/telemetry when savings updates (after a chat message)
+ useEffect(() => {
+ if (savings) fetchData();
+ }, [savings, fetchData]);
+
+ const thermalStatus =
+ (energy?.avg_power_w ?? 0) < 50
+ ? { label: 'Cool', color: 'var(--color-success)' }
+ : (energy?.avg_power_w ?? 0) < 150
+ ? { label: 'Warm', color: 'var(--color-warning)' }
+ : { label: 'Hot', color: 'var(--color-error)' };
+
+ const promptK = (savings?.total_prompt_tokens ?? 0) / 1000;
+ const completionK = (savings?.total_completion_tokens ?? 0) / 1000;
+
+ return (
+
+ {/* Header */}
+
+
+ System
+
+
+
+
+
+ {/* Session Stats */}
+
+
+ {/* Energy */}
+
+
+ Energy
+
+
+
+
+
+
+
+
+ {thermalStatus.label}
+
+
+
+
+ {/* Cost Comparison */}
+
+
+ Cost Comparison
+
+
+ {/* Local */}
+
+
+
+
+ ${(savings?.local_cost ?? 0).toFixed(4)}
+
+
+ {CLOUD_PRICING.map((provider) => {
+ const cost = (promptK * provider.input) / 1000 + (completionK * provider.output) / 1000;
+ const saved = cost - (savings?.local_cost ?? 0);
+ return (
+
+
+
+
+
+ ${cost.toFixed(4)}
+
+ {saved > 0.0001 && (
+
+
+ ${saved.toFixed(4)}
+
+ )}
+
+
+ );
+ })}
+
+
+ Server-reported
+
+ {savings.per_provider.map((p) => (
+
+ {p.label}
+ ${p.total_cost.toFixed(4)}
+
+ ))}
+
+
+
+
+
+
+ {label}
+
+
+
+ {value}
+ {unit && (
+
+ {unit}
+
+ )}
+
+
+
+
+
+ {systemPanelOpen &&
}
+
+
{code}
+
+
+
+ {open && (
+
+ {children}
+
+ )}
+
+
+ {/* Hero */}
+
+
+
+
+
+ OpenJarvis
+
+
+ Private AI that runs on your hardware. Chat, tools, agents, and
+ energy profiling — no cloud required.
+
+
+ v2.8
+
+
+
+ {/* Desktop Download */}
+
+
+ {/* CLI + Browser sections */}
+
+
+
+ Install with pip (Python 3.10+ required):
+
+
+
+ Or with uv for faster installs:
+
+
+
+ Then get started:
+
+
+
+
+
+
+ Launch the API server to get the full UI in your browser:
+
+
+
+ Then open{' '}
+
+ localhost:8000
+
+ {' '}in your browser. Chat, dashboard, energy profiling, and cost
+ comparison all run locally.
+
+
+
+
+ {/* System Requirements */}
+
+
+
+
+ System Requirements
+
+
+
+
+
Runtime
+ Python 3.10+
+
+
+
Inference Engine
+ Ollama, vLLM, llama.cpp, MLX, or LM Studio
+
+
+
Memory
+ 8 GB+ RAM recommended
+
+
+
+
+