feat(grokbuild): add first-class Grok Build support (#5453)

* feat(grokbuild): add backend integration

* feat(grokbuild): add provider and management UI

* test(grokbuild): cover configuration and integrations

* fix(grokbuild): address backend review feedback

* fix(grokbuild): complete UI review feedback

* feat(grokbuild): add CLI lifecycle management

* fix(grokbuild): align provider icon fallback

* test(grokbuild): cover provider icon persistence

src/components/usage/PricingConfigPanel.tsx

@@ -33,7 +33,7 @@ import { Plus, Pencil, Trash2, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { proxyApi } from "@/lib/api/proxy";
 
-const PRICING_APPS = ["claude", "codex", "gemini"] as const;
+const PRICING_APPS = ["claude", "codex", "gemini", "grokbuild"] as const;
 type PricingApp = (typeof PRICING_APPS)[number];
 type PricingModelSource = "request" | "response";
 
@@ -57,6 +57,7 @@ export function PricingConfigPanel() {
     claude: { multiplier: "1", source: "response" },
     codex: { multiplier: "1", source: "response" },
     gemini: { multiplier: "1", source: "response" },
+    grokbuild: { multiplier: "1", source: "response" },
   });
   const [originalConfigs, setOriginalConfigs] = useState<AppConfigState | null>(
     null,
@@ -102,6 +103,7 @@ export function PricingConfigPanel() {
           claude: { multiplier: "1", source: "response" },
           codex: { multiplier: "1", source: "response" },
           gemini: { multiplier: "1", source: "response" },
+          grokbuild: { multiplier: "1", source: "response" },
         };
         for (const result of results) {
           newState[result.app] = {

src/components/usage/UsageDashboard.tsx

@@ -63,6 +63,7 @@ const APP_FILTER_ICON: Record<AppType, string> = {
   claude: "claude",
   codex: "openai",
   gemini: "gemini",
+  grokbuild: "grok",
   opencode: "opencode",
 };
 

src/components/usage/UsageHero.tsx

@@ -61,6 +61,10 @@ const TITLE_THEMES: Record<AppType | "all", TitleTheme> = {
     accent: "text-sky-600 dark:text-sky-400",
     iconBg: "bg-sky-500/10",
   },
+  grokbuild: {
+    accent: "text-rose-600 dark:text-rose-400",
+    iconBg: "bg-rose-500/10",
+  },
   opencode: {
     accent: "text-purple-600 dark:text-purple-400",
     iconBg: "bg-purple-500/10",