From 4720e4129dca43670c0781e63be7110c403dc47a Mon Sep 17 00:00:00 2001
From: Renn F <rennf93@users.noreply.github.com>
Date: Thu, 18 Jun 2026 10:35:04 +0200
Subject: [PATCH] style(panel): show the Grok (xAI) key card above the Ollama
 card

---
 .../components/settings/ai-routing-card.tsx   | 97 ++++++++++---------
 1 file changed, 49 insertions(+), 48 deletions(-)

diff --git a/panel/src/components/settings/ai-routing-card.tsx b/panel/src/components/settings/ai-routing-card.tsx
index b4144bc1..1c599d97 100644
--- a/panel/src/components/settings/ai-routing-card.tsx
+++ b/panel/src/components/settings/ai-routing-card.tsx
@@ -310,54 +310,6 @@ export function AIRoutingCard() {
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
-        {/* -------- Ollama key -------- */}
-        <section className="space-y-2">
-          <div className="flex items-center justify-between">
-            <Label className="text-sm font-medium">Ollama Cloud API key</Label>
-            {hasOllamaKey ? (
-              <Badge className="bg-emerald-500/10 text-emerald-600 border-0">
-                <KeyRound className="h-3 w-3" /> key set
-              </Badge>
-            ) : (
-              <Badge className="bg-amber-500/10 text-amber-600 border-0">
-                <Key className="h-3 w-3" /> not set
-              </Badge>
-            )}
-          </div>
-          <div className="flex gap-2">
-            <Input
-              type="password"
-              value={apiKey}
-              onChange={(e) => setApiKey(e.target.value)}
-              placeholder={
-                hasOllamaKey ? "•••••••••••• (leave blank to keep)" : "ollama_xxx…"
-              }
-              disabled={clearKey}
-            />
-            <Button onClick={saveKey} disabled={setKey.isPending}>
-              {setKey.isPending ? "Saving…" : "Save"}
-            </Button>
-          </div>
-          {hasOllamaKey ? (
-            <label className="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer">
-              <Checkbox
-                checked={clearKey}
-                onCheckedChange={(checked) => {
-                  const next = checked === true;
-                  setClearKey(next);
-                  if (next) setApiKey("");
-                }}
-              />
-              Clear the stored key
-            </label>
-          ) : (
-            <p className="text-xs text-muted-foreground">
-              Stored Fernet-encrypted server-side; never returned by the API.
-            </p>
-          )}
-        </section>
-
-        <Separator />
 
         {/* -------- Grok (xAI) key -------- */}
         <section className="space-y-2">
@@ -409,6 +361,55 @@ export function AIRoutingCard() {
 
         <Separator />
 
+        {/* -------- Ollama key -------- */}
+        <section className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-sm font-medium">Ollama Cloud API key</Label>
+            {hasOllamaKey ? (
+              <Badge className="bg-emerald-500/10 text-emerald-600 border-0">
+                <KeyRound className="h-3 w-3" /> key set
+              </Badge>
+            ) : (
+              <Badge className="bg-amber-500/10 text-amber-600 border-0">
+                <Key className="h-3 w-3" /> not set
+              </Badge>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <Input
+              type="password"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              placeholder={
+                hasOllamaKey ? "•••••••••••• (leave blank to keep)" : "ollama_xxx…"
+              }
+              disabled={clearKey}
+            />
+            <Button onClick={saveKey} disabled={setKey.isPending}>
+              {setKey.isPending ? "Saving…" : "Save"}
+            </Button>
+          </div>
+          {hasOllamaKey ? (
+            <label className="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer">
+              <Checkbox
+                checked={clearKey}
+                onCheckedChange={(checked) => {
+                  const next = checked === true;
+                  setClearKey(next);
+                  if (next) setApiKey("");
+                }}
+              />
+              Clear the stored key
+            </label>
+          ) : (
+            <p className="text-xs text-muted-foreground">
+              Stored Fernet-encrypted server-side; never returned by the API.
+            </p>
+          )}
+        </section>
+
+        <Separator />
+
         {/* -------- Self-Hosted LLM -------- */}
         <SelfHostedSection
           testResult={selfHostedTestResult}