style(panel): show the Grok (xAI) key card above the Ollama card

This commit is contained in:
Renn F
2026-06-18 10:35:04 +02:00
parent 5725ec998b
commit 4720e4129d
@@ -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}