Add service test buttons (build 271261335)

frontend/app/page.tsx

@@ -30,6 +30,8 @@ export default function HomePage() {
   >(null)
   const [servicesLoading, setServicesLoading] = useState(false)
   const [servicesError, setServicesError] = useState<string | null>(null)
+  const [serviceTesting, setServiceTesting] = useState<Record<string, boolean>>({})
+  const [serviceTestResults, setServiceTestResults] = useState<Record<string, string | null>>({})
 
   const submit = (event: React.FormEvent) => {
     event.preventDefault()
@@ -42,6 +44,61 @@ export default function HomePage() {
     void runSearch(trimmed)
   }
 
+  const toServiceSlug = (name: string) => name.toLowerCase().replace(/[^a-z0-9]/g, '')
+
+  const updateServiceStatus = (name: string, status: string, message?: string) => {
+    setServicesStatus((prev) => {
+      if (!prev) return prev
+      return {
+        ...prev,
+        services: prev.services.map((service) =>
+          service.name === name ? { ...service, status, message } : service
+        ),
+      }
+    })
+  }
+
+  const testService = async (name: string) => {
+    const slug = toServiceSlug(name)
+    setServiceTesting((prev) => ({ ...prev, [name]: true }))
+    setServiceTestResults((prev) => ({ ...prev, [name]: null }))
+    try {
+      const baseUrl = getApiBase()
+      const response = await authFetch(`${baseUrl}/status/services/${slug}/test`, {
+        method: 'POST',
+      })
+      if (!response.ok) {
+        if (response.status === 401) {
+          clearToken()
+          router.push('/login')
+          return
+        }
+        const text = await response.text()
+        throw new Error(text || `Service test failed: ${response.status}`)
+      }
+      const data = await response.json()
+      const status = data?.status ?? 'unknown'
+      const message =
+        data?.message ||
+        (status === 'up'
+          ? 'API OK'
+          : status === 'down'
+            ? 'API unreachable'
+            : status === 'degraded'
+              ? 'Health warnings'
+              : status === 'not_configured'
+                ? 'Not configured'
+                : 'Unknown')
+      setServiceTestResults((prev) => ({ ...prev, [name]: message }))
+      updateServiceStatus(name, status, data?.message)
+    } catch (error) {
+      console.error(error)
+      setServiceTestResults((prev) => ({ ...prev, [name]: 'Test failed' }))
+    } finally {
+      setServiceTesting((prev) => ({ ...prev, [name]: false }))
+    }
+  }
+
   useEffect(() => {
     if (!getToken()) {
       router.push('/login')
@@ -214,21 +271,37 @@ export default function HomePage() {
                   return order.map((name) => {
                     const item = items.find((entry) => entry.name === name)
                     const status = item?.status ?? 'unknown'
+                    const testing = serviceTesting[name] ?? false
                     return (
                       <div key={name} className={`system-item system-${status}`}>
                         <span className="system-dot" />
-                        <span className="system-name">{name}</span>
-                        <span className="system-state">
-                          {status === 'up'
-                            ? 'Up'
-                            : status === 'down'
-                              ? 'Down'
-                              : status === 'degraded'
-                                ? 'Needs attention'
-                                : status === 'not_configured'
-                                  ? 'Not configured'
-                                  : 'Unknown'}
-                        </span>
+                        <div className="system-meta">
+                          <span className="system-name">{name}</span>
+                          {serviceTestResults[name] && (
+                            <span className="system-test-message">{serviceTestResults[name]}</span>
+                          )}
+                        </div>
+                        <div className="system-actions">
+                          <span className="system-state">
+                            {status === 'up'
+                              ? 'Up'
+                              : status === 'down'
+                                ? 'Down'
+                                : status === 'degraded'
+                                  ? 'Needs attention'
+                                  : status === 'not_configured'
+                                    ? 'Not configured'
+                                    : 'Unknown'}
+                          </span>
+                          <button
+                            type="button"
+                            className="system-test"
+                            onClick={() => void testService(name)}
+                            disabled={testing}
+                          >
+                            {testing ? 'Testing...' : 'Test'}
+                          </button>
+                        </div>
                       </div>
                     )
                   })