remote provider health checks + compact display
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
+91
-28
@@ -1,5 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import { Plus, Save, Trash2, RefreshCw, Loader2, X } from 'lucide-react';
|
||||
import { Plus, Save, Trash2, RefreshCw, Loader2, X, Pencil } from 'lucide-react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -112,6 +112,13 @@ export const AIHarnessesSection = () => {
|
||||
const connectedProviders = PI_PROVIDERS.filter((p) => storedPiIds.has(p.piId));
|
||||
const unconnectedProviders = PI_PROVIDERS.filter((p) => !storedPiIds.has(p.piId));
|
||||
|
||||
const { data: remoteHealth = {} as Record<string, boolean | null> } = useQuery({
|
||||
queryKey: ['PI_MONO_REMOTE_HEALTH'],
|
||||
queryFn: () => client.get<Record<string, boolean | null>>('/server-settings/pi-mono/api-keys/health'),
|
||||
enabled: connectedProviders.length > 0,
|
||||
refetchInterval: 30_000,
|
||||
});
|
||||
|
||||
const getStoredMasked = (piId: string) =>
|
||||
storedKeys.find((k) => k.provider === piId)?.value ?? '';
|
||||
|
||||
@@ -122,12 +129,14 @@ export const AIHarnessesSection = () => {
|
||||
try {
|
||||
await client.put('/server-settings/pi-mono/api-keys', { provider: piId, value });
|
||||
queryClient.invalidateQueries({ queryKey: ['PI_MONO_API_KEYS'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['PI_MONO_REMOTE_HEALTH'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['PI_MODELS'] });
|
||||
setKeyInputs((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[piId];
|
||||
return next;
|
||||
});
|
||||
setEditingProvider(null);
|
||||
} finally {
|
||||
setSavingKey(null);
|
||||
}
|
||||
@@ -136,6 +145,7 @@ export const AIHarnessesSection = () => {
|
||||
const disconnectProvider = async (provider: typeof PI_PROVIDERS[number]) => {
|
||||
await client.put('/server-settings/pi-mono/api-keys', { provider: provider.piId, value: '' });
|
||||
queryClient.invalidateQueries({ queryKey: ['PI_MONO_API_KEYS'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['PI_MONO_REMOTE_HEALTH'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['PI_MODELS'] });
|
||||
if (editingProvider === provider.key) setEditingProvider(null);
|
||||
};
|
||||
@@ -422,37 +432,79 @@ export const AIHarnessesSection = () => {
|
||||
<span className="text-sm font-medium text-duck-dark dark:text-foreground">Remote Providers</span>
|
||||
<div className="mt-3 flex flex-col gap-2">
|
||||
{connectedProviders.map((provider) => (
|
||||
<div key={provider.piId} className="flex items-center gap-2">
|
||||
<label className="w-36 text-duck-dark/70 dark:text-foreground/70 shrink-0 truncate font-medium text-[11px]">{provider.key}</label>
|
||||
<Input
|
||||
type="password"
|
||||
className="h-7 text-xs flex-1"
|
||||
placeholder={getStoredMasked(provider.piId) || 'Not set'}
|
||||
value={keyInputs[provider.piId] ?? ''}
|
||||
onChange={(ev) => setKeyInputs((prev) => ({ ...prev, [provider.piId]: ev.target.value }))}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={keyInputs[provider.piId] === undefined || savingKey === provider.piId}
|
||||
onClick={() => saveApiKey(provider.piId)}
|
||||
className="shrink-0 p-1 rounded hover:bg-duck-teal/10 cursor-pointer transition-colors disabled:opacity-30 disabled:cursor-default"
|
||||
title="Save key"
|
||||
>
|
||||
<Save className="h-3.5 w-3.5 text-duck-teal" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => disconnectProvider(provider)}
|
||||
className="shrink-0 p-0.5 rounded hover:bg-red-500/10 cursor-pointer transition-colors"
|
||||
title="Disconnect provider"
|
||||
>
|
||||
<Trash2 className="h-3 w-3 text-duck-dark/30 hover:text-red-500" />
|
||||
</button>
|
||||
<div key={provider.piId} className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`inline-block h-2 w-2 shrink-0 rounded-full ${
|
||||
remoteHealth[provider.piId] === true
|
||||
? 'bg-green-500'
|
||||
: remoteHealth[provider.piId] === false
|
||||
? 'bg-red-500'
|
||||
: 'bg-duck-dark/20'
|
||||
}`}
|
||||
title={
|
||||
remoteHealth[provider.piId] === true
|
||||
? 'Valid'
|
||||
: remoteHealth[provider.piId] === false
|
||||
? 'Invalid'
|
||||
: 'Unknown'
|
||||
}
|
||||
/>
|
||||
<span className="text-duck-dark/70 dark:text-foreground/70 font-medium">{provider.key}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingProvider(editingProvider === provider.key ? null : provider.key)}
|
||||
className="shrink-0 p-0.5 rounded hover:bg-duck-teal/10 cursor-pointer transition-colors"
|
||||
title="Edit key"
|
||||
>
|
||||
<Pencil className="h-3 w-3 text-duck-dark/30 hover:text-duck-teal" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => disconnectProvider(provider)}
|
||||
className="shrink-0 p-0.5 rounded hover:bg-red-500/10 cursor-pointer transition-colors"
|
||||
title="Disconnect provider"
|
||||
>
|
||||
<Trash2 className="h-3 w-3 text-duck-dark/30 hover:text-red-500" />
|
||||
</button>
|
||||
</div>
|
||||
{editingProvider === provider.key && (
|
||||
<div className="flex items-center gap-2 pl-4">
|
||||
<Input
|
||||
type="password"
|
||||
className="h-7 text-xs flex-1"
|
||||
placeholder={getStoredMasked(provider.piId) || 'Enter API key'}
|
||||
value={keyInputs[provider.piId] ?? ''}
|
||||
onChange={(ev) => setKeyInputs((prev) => ({ ...prev, [provider.piId]: ev.target.value }))}
|
||||
onKeyDown={(ev) => {
|
||||
if (ev.key === 'Enter' && keyInputs[provider.piId]) saveApiKey(provider.piId);
|
||||
if (ev.key === 'Escape') setEditingProvider(null);
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={keyInputs[provider.piId] === undefined || savingKey === provider.piId}
|
||||
onClick={() => saveApiKey(provider.piId)}
|
||||
className="shrink-0 p-1 rounded hover:bg-duck-teal/10 cursor-pointer transition-colors disabled:opacity-30 disabled:cursor-default"
|
||||
title="Save key"
|
||||
>
|
||||
<Save className="h-3.5 w-3.5 text-duck-teal" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingProvider(null)}
|
||||
className="text-duck-dark/40 hover:text-duck-dark/70 dark:text-foreground/40 dark:hover:text-foreground/70 cursor-pointer transition-colors text-xs"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{editingProvider && (() => {
|
||||
const provider = PI_PROVIDERS.find((p) => p.key === editingProvider);
|
||||
if (!provider || connectedProviders.includes(provider)) return null;
|
||||
if (!provider || connectedProviders.some((cp) => cp.piId === provider.piId)) return null;
|
||||
return (
|
||||
<div key={provider.piId} className="flex items-center gap-2">
|
||||
<label className="w-36 text-duck-dark/70 dark:text-foreground/70 shrink-0 truncate font-medium text-[11px]">{provider.key}</label>
|
||||
@@ -462,6 +514,10 @@ export const AIHarnessesSection = () => {
|
||||
placeholder="Enter API key"
|
||||
value={keyInputs[provider.piId] ?? ''}
|
||||
onChange={(ev) => setKeyInputs((prev) => ({ ...prev, [provider.piId]: ev.target.value }))}
|
||||
onKeyDown={(ev) => {
|
||||
if (ev.key === 'Enter' && keyInputs[provider.piId]) saveApiKey(provider.piId);
|
||||
if (ev.key === 'Escape') setEditingProvider(null);
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
@@ -473,6 +529,13 @@ export const AIHarnessesSection = () => {
|
||||
>
|
||||
<Save className="h-3.5 w-3.5 text-duck-teal" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingProvider(null)}
|
||||
className="text-duck-dark/40 hover:text-duck-dark/70 dark:text-foreground/40 dark:hover:text-foreground/70 cursor-pointer transition-colors text-xs"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
Reference in New Issue
Block a user