Initial commit

2026-03-04 00:08:42 +00:00
commit 4d88dc0584
4449 changed files with 1556714 additions and 0 deletions
@@ -0,0 +1,85 @@
+/**
+ * Compute Backend Label
+ *
+ * Displays the active compute backend (CUDA, Metal, or CPU) with color-coding.
+ * Fetches the actual runtime backend from the Rust backend.
+ */
+
+import { useEffect, useState } from "react";
+import { getComputeBackend } from "../lib/simulation";
+import type { ComputeBackendInfo, ComputeBackend } from "../lib/types";
+
+const BACKEND_STYLES: Record<
+  ComputeBackend,
+  { bg: string; border: string; text: string }
+> = {
+  CUDA: { bg: "rgba(34, 197, 94, 0.2)", border: "#22c55e", text: "#22c55e" },
+  METAL: { bg: "rgba(78, 205, 196, 0.2)", border: "#4ECDC4", text: "#4ECDC4" },
+  CPU: { bg: "rgba(251, 146, 60, 0.2)", border: "#fb923c", text: "#fb923c" },
+};
+
+export function ComputeBackendLabel() {
+  const [info, setInfo] = useState<ComputeBackendInfo | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    getComputeBackend()
+      .then(setInfo)
+      .catch((e) => {
+        console.error("Failed to get compute backend:", e);
+        setError(e instanceof Error ? e.message : String(e));
+      });
+  }, []);
+
+  if (error) {
+    return (
+      <div style={styles.container}>
+        <span style={{ ...styles.label, color: "#f44336" }}>ERROR</span>
+      </div>
+    );
+  }
+
+  if (!info) {
+    return (
+      <div style={styles.container}>
+        <span style={{ ...styles.label, color: "#888" }}>...</span>
+      </div>
+    );
+  }
+
+  const colorStyle = BACKEND_STYLES[info.backend] || BACKEND_STYLES.CPU;
+
+  return (
+    <div
+      style={{
+        ...styles.container,
+        backgroundColor: colorStyle.bg,
+        borderColor: colorStyle.border,
+      }}
+      title={`Available backends: ${info.available.join(", ")}`}
+    >
+      <span style={{ ...styles.label, color: colorStyle.text }}>
+        {info.backend}
+      </span>
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    padding: "6px 12px",
+    borderRadius: "6px",
+    border: "1px solid",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  label: {
+    fontSize: "12px",
+    fontWeight: 600,
+    fontFamily: "monospace",
+    letterSpacing: "0.5px",
+  },
+};
+
+export default ComputeBackendLabel;