remote provider health checks + compact display

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 18:56:58 +00:00
parent 11845fbae5
commit e806f66edb
2 changed files with 137 additions and 28 deletions
@@ -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>
                );
              })()}
@@ -387,6 +387,52 @@ piMonoRouter.put('/api-keys', async (ctx) => {
  return ctx.json({ ok: true });
 });

+const REMOTE_HEALTH_CONFIG: Record<string, {
+  url: string | ((key: string) => string);
+  headers: (key: string) => Record<string, string>;
+}> = {
+  openai: { url: 'https://api.openai.com/v1/models', headers: (k) => ({ Authorization: `Bearer ${k}` }) },
+  anthropic: { url: 'https://api.anthropic.com/v1/models', headers: (k) => ({ 'x-api-key': k, 'anthropic-version': '2023-06-01' }) },
+  google: { url: (k) => `https://generativelanguage.googleapis.com/v1beta/models?key=${k}`, headers: () => ({}) },
+  groq: { url: 'https://api.groq.com/openai/v1/models', headers: (k) => ({ Authorization: `Bearer ${k}` }) },
+  mistral: { url: 'https://api.mistral.ai/v1/models', headers: (k) => ({ Authorization: `Bearer ${k}` }) },
+  xai: { url: 'https://api.x.ai/v1/models', headers: (k) => ({ Authorization: `Bearer ${k}` }) },
+  openrouter: { url: 'https://openrouter.ai/api/v1/auth/key', headers: (k) => ({ Authorization: `Bearer ${k}` }) },
+  cerebras: { url: 'https://api.cerebras.ai/v1/models', headers: (k) => ({ Authorization: `Bearer ${k}` }) },
+  zai: { url: 'https://opencode.ai/zen/v1/models', headers: (k) => ({ Authorization: `Bearer ${k}` }) },
+};
+
+piMonoRouter.get('/api-keys/health', async (ctx) => {
+  const auth = await readAuthJson();
+  const results: Record<string, boolean | null> = {};
+
+  const checks = PROVIDERS
+    .filter((p) => auth[p.piId]?.key?.trim())
+    .map(async (p) => {
+      const config = REMOTE_HEALTH_CONFIG[p.piId];
+      if (!config) {
+        results[p.piId] = null;
+        return;
+      }
+      const key = auth[p.piId]!.key;
+      const url = typeof config.url === 'function' ? config.url(key) : config.url;
+      const headers = config.headers(key);
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), 3000);
+      try {
+        const res = await fetch(url, { headers, signal: controller.signal });
+        results[p.piId] = res.ok;
+      } catch {
+        results[p.piId] = false;
+      } finally {
+        clearTimeout(timer);
+      }
+    });
+
+  await Promise.all(checks);
+  return ctx.json(results);
+});
+
 const GLOBAL_DIRS = ['/usr/local/bin', '/usr/bin'];

 const getPaths = async () => {