Upload dashboard/src/components/Header.tsx with huggingface_hub

dashboard/src/components/Header.tsx

@@ -1,18 +1,68 @@
 export function Header({ healthy }: { healthy: boolean | null }) {
   return (
-    <header style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
+    <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
       <div>
-        <h1 style={{ fontSize: "var(--text-3xl)", letterSpacing: "-0.01em" }}>
-          GeoForce
+        <h1 style={{ fontSize: "var(--text-2xl)", letterSpacing: "-0.02em", fontWeight: 700 }}>
+          <span style={{ color: "var(--accent)" }}>Geo</span>Force
+          <span style={{ fontSize: "var(--text-sm)", fontWeight: 500, color: "var(--fg-subtle)", marginLeft: "var(--space-2)" }}>
+            v2.0
+          </span>
         </h1>
-        <p className="muted" style={{ fontSize: "var(--text-base)", marginTop: "var(--space-2)" }}>
-          Opus 4.7 agent orchestrating an open-source geothermal solver and a physics-informed
-          CNN surrogate for Indonesian reservoirs.
+        <p className="muted" style={{ fontSize: "var(--text-sm)", marginTop: "var(--space-1)" }}>
+          Dual-engine geothermal platform — numerical solver + CNN surrogate with AI agent orchestration
         </p>
       </div>
-      <div style={{ textAlign: "right" }}>
-        <span className="chip">
-          {healthy === null ? "checking…" : healthy ? "backend online" : "backend offline"}
+      <div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)" }}>
+        <span
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "4px 12px",
+            fontSize: "var(--text-xs)",
+            fontWeight: 500,
+            borderRadius: "var(--radius-pill)",
+            background: healthy
+              ? "rgba(34, 197, 94, 0.1)"
+              : healthy === false
+                ? "rgba(239, 68, 68, 0.1)"
+                : "rgba(255, 255, 255, 0.05)",
+            color: healthy
+              ? "var(--success)"
+              : healthy === false
+                ? "var(--danger)"
+                : "var(--fg-subtle)",
+            border: `1px solid ${
+              healthy
+                ? "rgba(34, 197, 94, 0.2)"
+                : healthy === false
+                  ? "rgba(239, 68, 68, 0.2)"
+                  : "var(--border-subtle)"
+            }`,
+          }}
+        >
+          <span
+            style={{
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: healthy
+                ? "var(--success)"
+                : healthy === false
+                  ? "var(--danger)"
+                  : "var(--fg-subtle)",
+            }}
+          />
+          {healthy === null ? "Connecting" : healthy ? "Online" : "Offline"}
+        </span>
+        <span
+          style={{
+            fontSize: "var(--text-xs)",
+            color: "var(--fg-subtle)",
+            fontWeight: 500,
+          }}
+        >
+          ForceX AI
         </span>
       </div>
     </header>