From 5317f5b7fc1fde10f28241c54b4476730a937188 Mon Sep 17 00:00:00 2001
From: Jon Saad-Falcon <jonsaadfalcon@gmail.com>
Date: Thu, 12 Mar 2026 20:36:14 +0000
Subject: [PATCH] fix: leaderboard energy/FLOPs and GetStartedPage literal \n

Two minor frontend bugs:

- App.tsx: browser app hardcoded energy_wh_saved and flops_saved to 0
  when submitting to the leaderboard instead of computing them from
  per_provider data (desktop app was already correct)
- GetStartedPage.tsx: CodeBlock code props used JSX string attributes
  (code="...\n...") which render \n literally; switched to JS
  expressions (code={"...\n..."}) so newlines render correctly

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/App.tsx                  | 12 ++++++++++--
 frontend/src/pages/GetStartedPage.tsx |  8 ++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 455197d6..543ce47b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -68,14 +68,22 @@ export default function App() {
               (sum, p) => sum + p.total_cost,
               0,
             );
+            const energySaved = data.per_provider.reduce(
+              (sum, p) => sum + (p.energy_wh || 0),
+              0,
+            );
+            const flopsSaved = data.per_provider.reduce(
+              (sum, p) => sum + (p.flops || 0),
+              0,
+            );
             submitSavings({
               anon_id: optInAnonId,
               display_name: optInDisplayName,
               total_calls: data.total_calls,
               total_tokens: data.total_tokens,
               dollar_savings: dollarSavings,
-              energy_wh_saved: 0,
-              flops_saved: 0,
+              energy_wh_saved: energySaved,
+              flops_saved: flopsSaved,
             });
           }
         })
diff --git a/frontend/src/pages/GetStartedPage.tsx b/frontend/src/pages/GetStartedPage.tsx
index 624dae8e..c4b4cb3a 100644
--- a/frontend/src/pages/GetStartedPage.tsx
+++ b/frontend/src/pages/GetStartedPage.tsx
@@ -406,18 +406,18 @@ function SelfHostedView() {
           <p className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>
             Clone and install (Python 3.10+ required):
           </p>
-          <CodeBlock code="git clone https://github.com/open-jarvis/OpenJarvis.git\ncd OpenJarvis\nuv sync" />
+          <CodeBlock code={"git clone https://github.com/open-jarvis/OpenJarvis.git\ncd OpenJarvis\nuv sync"} />
           <p className="text-xs mt-1" style={{ color: 'var(--color-text-secondary)' }}>
             Then get started:
           </p>
-          <CodeBlock code="jarvis init\njarvis doctor\njarvis chat" />
+          <CodeBlock code={"jarvis init\njarvis doctor\njarvis chat"} />
         </Section>
 
         <Section icon={Globe} title="Browser App (Self-Hosted)">
           <p className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>
             Launch the API server to get the full UI in your browser:
           </p>
-          <CodeBlock code="git clone https://github.com/open-jarvis/OpenJarvis.git\ncd OpenJarvis\nuv sync --extra server\njarvis serve --port 8000" />
+          <CodeBlock code={"git clone https://github.com/open-jarvis/OpenJarvis.git\ncd OpenJarvis\nuv sync --extra server\njarvis serve --port 8000"} />
           <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
             The chat, dashboard, energy profiling, and cost comparison all run
             locally on your machine.
@@ -428,7 +428,7 @@ function SelfHostedView() {
           <p className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>
             Deploy with Docker Compose for a zero-setup hosted instance:
           </p>
-          <CodeBlock code="git clone https://github.com/open-jarvis/OpenJarvis.git\ncd OpenJarvis\ndocker compose -f deploy/docker/docker-compose.yml up -d" />
+          <CodeBlock code={"git clone https://github.com/open-jarvis/OpenJarvis.git\ncd OpenJarvis\ndocker compose -f deploy/docker/docker-compose.yml up -d"} />
           <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
             This starts both the API server and Ollama. The web UI is bundled and
             served automatically at port 8000.