Add restart/stop controls to every ServiceCard on Services tab

Running services show Restart and Stop buttons. Stopped/unknown show
Start button. Stop requires double-click confirmation (3s timeout).
Card restructured from <a> wrapper to <div> with nested <a> for the
link area, so buttons can coexist without nesting issues.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/ServiceCard.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState, useCallback } from 'react';
 import { Service, DiscoveredService } from '@/lib/services';
 import { HealthStatus } from '@/lib/PortalContext';
 import { Icon } from './Icons';
@@ -32,7 +33,6 @@ function getFqdnLabel(service: Service): string | null {
   try {
     const url = new URL(service.fqdn);
     const hostname = url.hostname;
-    // Show just the subdomain part if it's a .nuc.lan address
     if (hostname.endsWith('.nuc.lan')) {
       return hostname.replace('.nuc.lan', '');
     }
@@ -52,14 +52,41 @@ function getResourceBadge(service: Service): string | null {
 export function ServiceCard({ service, status }: ServiceCardProps) {
   const fqdnLabel = getFqdnLabel(service);
   const resourceBadge = getResourceBadge(service);
+  const discovered = isDiscovered(service);
+  const [loading, setLoading] = useState(false);
+  const [confirmStop, setConfirmStop] = useState(false);
+
+  const controlService = useCallback(async (action: 'start' | 'stop' | 'restart') => {
+    if (!discovered) return;
+    setLoading(true);
+    setConfirmStop(false);
+    try {
+      await fetch('/api/control', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          uuid: service.uuid,
+          resourceType: service.resourceType,
+          action,
+        }),
+      });
+      // Coolify takes a moment to process — page will refresh via polling
+    } catch { /* ignore */ } finally {
+      setTimeout(() => setLoading(false), 3000);
+    }
+  }, [discovered, service]);
+
+  const handleStop = useCallback(() => {
+    if (confirmStop) {
+      controlService('stop');
+    } else {
+      setConfirmStop(true);
+      setTimeout(() => setConfirmStop(false), 3000);
+    }
+  }, [confirmStop, controlService]);
 
   return (
-    <a
-      href={service.url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="group relative block p-4 bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm hover:border-slate-200 dark:hover:border-stone-600/50 hover:shadow-md transition-all duration-200"
-    >
+    <div className="group relative block p-4 bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm hover:border-slate-200 dark:hover:border-stone-600/50 hover:shadow-md transition-all duration-200">
       {/* Status indicator */}
       <div className="absolute top-3 right-3 flex items-center gap-1.5">
         {resourceBadge && (
@@ -73,6 +100,13 @@ export function ServiceCard({ service, status }: ServiceCardProps) {
         />
       </div>
 
+      {/* Clickable area for opening service URL */}
+      <a
+        href={service.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="block"
+      >
         {/* Icon */}
         <div className="w-10 h-10 flex items-center justify-center rounded-lg bg-slate-100 dark:bg-stone-800 mb-3 group-hover:bg-slate-200 dark:group-hover:bg-stone-700 transition-colors">
           <Icon
@@ -106,5 +140,53 @@ export function ServiceCard({ service, status }: ServiceCardProps) {
           )}
         </div>
       </a>
+
+      {/* Control buttons for discovered services */}
+      {discovered && (
+        <div className="mt-3 pt-3 border-t border-slate-100 dark:border-stone-800 flex items-center gap-1.5">
+          {status === 'stopped' || status === 'unknown' ? (
+            <button
+              onClick={() => controlService('start')}
+              disabled={loading}
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900/40 transition-colors disabled:opacity-50"
+            >
+              {loading ? (
+                <Icon name="loader" size={12} className="animate-spin" />
+              ) : (
+                <Icon name="play" size={12} />
+              )}
+              Start
+            </button>
+          ) : status === 'running' ? (
+            <>
+              <button
+                onClick={() => controlService('restart')}
+                disabled={loading}
+                className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-slate-50 dark:bg-stone-800 text-slate-500 dark:text-stone-400 hover:bg-slate-100 dark:hover:bg-stone-700 transition-colors disabled:opacity-50"
+              >
+                {loading ? (
+                  <Icon name="loader" size={12} className="animate-spin" />
+                ) : (
+                  <Icon name="refresh-cw" size={12} />
+                )}
+                Restart
+              </button>
+              <button
+                onClick={handleStop}
+                disabled={loading}
+                className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-colors disabled:opacity-50 ${
+                  confirmStop
+                    ? 'bg-red-100 dark:bg-red-900/40 text-red-600 dark:text-red-400'
+                    : 'bg-slate-50 dark:bg-stone-800 text-slate-500 dark:text-stone-400 hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-500 dark:hover:text-red-400'
+                }`}
+              >
+                <Icon name="power" size={12} />
+                {confirmStop ? 'Confirm' : 'Stop'}
+              </button>
+            </>
+          ) : null}
+        </div>
+      )}
+    </div>
   );
 }