Service config. Service logs. Service status.

src/components/AppSidebar.tsx

@@ -1,5 +1,5 @@
 import { NavLink, useParams } from 'react-router';
-import { Server, Play, Container, AppWindow, Settings, CloudLightning, Sun, Moon, Monitor, ChevronDown, Globe, Wifi, HardDrive, Usb } from 'lucide-react';
+import { Server, Play, Container, AppWindow, Settings, CloudLightning, Sun, Moon, Monitor, ChevronDown, Globe, Usb } from 'lucide-react';
 import { cn } from '../lib/utils';
 import {
   Sidebar,

src/components/ClusterServicesComponent.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Card } from './ui/card';
 import { Button } from './ui/button';
 import { Badge } from './ui/badge';
@@ -5,6 +6,9 @@ import { Container, Shield, Network, Database, CheckCircle, AlertCircle, Termina
 import { useInstanceContext } from '../hooks/useInstanceContext';
 import { useServices } from '../hooks/useServices';
 import type { Service } from '../services/api';
+import { ServiceDetailModal } from './services/ServiceDetailModal';
+import { ServiceConfigEditor } from './services/ServiceConfigEditor';
+import { Dialog, DialogContent } from './ui/dialog';
 
 export function ClusterServicesComponent() {
   const { currentInstance } = useInstanceContext();
@@ -20,6 +24,9 @@ export function ClusterServicesComponent() {
     isDeleting
   } = useServices(currentInstance);
 
+  const [selectedService, setSelectedService] = useState<string | null>(null);
+  const [configService, setConfigService] = useState<string | null>(null);
+
   const getStatusIcon = (status?: string) => {
     switch (status) {
       case 'running':
@@ -237,14 +244,32 @@ export function ClusterServicesComponent() {
                     )}
                     {((typeof service.status === 'string' && service.status === 'deployed') ||
                       (typeof service.status === 'object' && service.status?.status === 'deployed')) && (
-                      <Button
-                        size="sm"
-                        variant="destructive"
-                        onClick={() => handleDeleteService(service.name)}
-                        disabled={isDeleting}
-                      >
-                        {isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Remove'}
-                      </Button>
+                      <>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => setSelectedService(service.name)}
+                        >
+                          View
+                        </Button>
+                        {service.hasConfig && (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => setConfigService(service.name)}
+                          >
+                            Configure
+                          </Button>
+                        )}
+                        <Button
+                          size="sm"
+                          variant="destructive"
+                          onClick={() => handleDeleteService(service.name)}
+                          disabled={isDeleting}
+                        >
+                          {isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Remove'}
+                        </Button>
+                      </>
                     )}
                   </div>
                 </div>
@@ -285,6 +310,31 @@ export function ClusterServicesComponent() {
           </div>
         </div>
       </Card>
+
+      {selectedService && (
+        <ServiceDetailModal
+          instanceName={currentInstance}
+          serviceName={selectedService}
+          open={!!selectedService}
+          onClose={() => setSelectedService(null)}
+        />
+      )}
+
+      {configService && (
+        <Dialog open={!!configService} onOpenChange={(open) => !open && setConfigService(null)}>
+          <DialogContent className="sm:max-w-4xl max-w-[95vw] max-h-[90vh] overflow-y-auto w-full">
+            <ServiceConfigEditor
+              instanceName={currentInstance}
+              serviceName={configService}
+              manifest={services.find(s => s.name === configService)}
+              onClose={() => setConfigService(null)}
+              onSuccess={() => {
+                setConfigService(null);
+              }}
+            />
+          </DialogContent>
+        </Dialog>
+      )}
     </div>
   );
 }

src/components/services/ServiceConfigEditor.tsx

@@ -0,0 +1,213 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Loader2, Save } from 'lucide-react';
+import { useServiceConfig, useServiceStatus } from '@/hooks/useServices';
+import type { ServiceManifest } from '@/services/api/types';
+
+interface ServiceConfigEditorProps {
+  instanceName: string;
+  serviceName: string;
+  manifest?: ServiceManifest;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export function ServiceConfigEditor({
+  instanceName,
+  serviceName,
+  manifest: _manifestProp, // Ignore the prop, fetch from status instead
+  onClose,
+  onSuccess,
+}: ServiceConfigEditorProps) {
+  const { config, isLoading: configLoading, updateConfig, isUpdating } = useServiceConfig(instanceName, serviceName);
+  const { data: statusData, isLoading: statusLoading } = useServiceStatus(instanceName, serviceName);
+
+  // Use manifest from status endpoint which includes full serviceConfig
+  const manifest = statusData?.manifest;
+  const [formData, setFormData] = useState<Record<string, unknown>>({});
+  const [redeploy, setRedeploy] = useState(true);
+  const [fetch, setFetch] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  // Initialize form data when config loads
+  useEffect(() => {
+    if (config) {
+      setFormData(config);
+    }
+  }, [config]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(false);
+
+    try {
+      await updateConfig({ config: formData, redeploy, fetch });
+      setSuccess(true);
+      if (onSuccess) {
+        setTimeout(() => {
+          onSuccess();
+        }, 1500);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update configuration');
+    }
+  };
+
+  const handleInputChange = (key: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
+  const getDisplayValue = (value: unknown): string => {
+    if (value === null || value === undefined) return '';
+    if (typeof value === 'object') {
+      return JSON.stringify(value, null, 4);
+    }
+    return String(value);
+  };
+
+  const isObjectValue = (value: unknown): boolean => {
+    return value !== null && value !== undefined && typeof value === 'object';
+  };
+
+  const isLoading = configLoading || statusLoading;
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  // Get configurable keys from serviceConfig definitions
+  const configKeys = manifest?.serviceConfig
+    ? Object.keys(manifest.serviceConfig).map(key => manifest.serviceConfig![key].path)
+    : [];
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-lg font-semibold">Edit Service Configuration</h2>
+        <p className="text-sm text-muted-foreground">{serviceName}</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-4 max-h-[60vh] overflow-y-auto pr-2">
+          {configKeys.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              No configuration options available for this service.
+            </p>
+          ) : (
+            configKeys.map((key) => {
+              const value = formData[key];
+              const isObject = isObjectValue(value);
+
+              // Find the config definition for this path
+              const configDef = manifest?.serviceConfig
+                ? Object.values(manifest.serviceConfig).find(def => def.path === key)
+                : undefined;
+
+              return (
+                <div key={key} className="space-y-2">
+                  <Label htmlFor={key}>
+                    {configDef?.prompt || key}
+                    {configDef?.default && (
+                      <span className="text-xs text-muted-foreground ml-2">
+                        (default: {configDef.default})
+                      </span>
+                    )}
+                  </Label>
+                  {isObject ? (
+                    <Textarea
+                      id={key}
+                      value={getDisplayValue(value)}
+                      onChange={(e) => handleInputChange(key, e.target.value)}
+                      placeholder={configDef?.default || ''}
+                      rows={5}
+                      className="font-mono text-sm"
+                    />
+                  ) : (
+                    <Input
+                      id={key}
+                      value={getDisplayValue(value)}
+                      onChange={(e) => handleInputChange(key, e.target.value)}
+                      placeholder={configDef?.default || ''}
+                    />
+                  )}
+                </div>
+              );
+            })
+          )}
+
+          <div className="space-y-2 pt-4 border-t">
+            <div className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                id="redeploy-checkbox"
+                checked={redeploy}
+                onChange={(e) => setRedeploy(e.target.checked)}
+                className="rounded"
+              />
+              <Label htmlFor="redeploy-checkbox" className="cursor-pointer">
+                Redeploy service after updating configuration
+              </Label>
+            </div>
+            {redeploy && (
+              <div className="flex items-center space-x-2">
+                <input
+                  type="checkbox"
+                  id="fetch-checkbox"
+                  checked={fetch}
+                  onChange={(e) => setFetch(e.target.checked)}
+                  className="rounded"
+                />
+                <Label htmlFor="fetch-checkbox" className="cursor-pointer">
+                  Fetch fresh templates from directory before redeploying
+                </Label>
+              </div>
+            )}
+          </div>
+
+          {error && (
+            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          {success && (
+            <div className="rounded-md bg-green-500/10 p-3 text-sm text-green-600 dark:text-green-400">
+              Configuration updated successfully!
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4 border-t">
+          <Button type="button" variant="outline" onClick={onClose} disabled={isUpdating}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={isUpdating}>
+            {isUpdating ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                Saving...
+              </>
+            ) : (
+              <>
+                <Save className="h-4 w-4 mr-2" />
+                Save Changes
+              </>
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/components/services/ServiceDetailModal.tsx

@@ -0,0 +1,239 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ServiceStatusBadge } from './ServiceStatusBadge';
+import { ServiceLogViewer } from './ServiceLogViewer';
+import { useServiceStatus } from '@/hooks/useServices';
+import { RefreshCw, FileText, Eye } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+interface ServiceDetailModalProps {
+  instanceName: string;
+  serviceName: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+export function ServiceDetailModal({
+  instanceName,
+  serviceName,
+  open,
+  onClose,
+}: ServiceDetailModalProps) {
+  const { data: status, isLoading, refetch } = useServiceStatus(instanceName, serviceName);
+  const [viewMode, setViewMode] = useState<'details' | 'logs'>('details');
+
+  const getPodStatusColor = (status: string) => {
+    if (status.toLowerCase().includes('running')) return 'text-green-600 dark:text-green-400';
+    if (status.toLowerCase().includes('pending')) return 'text-yellow-600 dark:text-yellow-400';
+    if (status.toLowerCase().includes('failed')) return 'text-red-600 dark:text-red-400';
+    return 'text-muted-foreground';
+  };
+
+  const getContainerNames = () => {
+    // Return empty array - let the backend auto-detect the container
+    // This avoids passing invalid container names like 'main' which don't exist
+    return [];
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-3">
+            {serviceName}
+            {status && <ServiceStatusBadge status={status.deploymentStatus} />}
+          </DialogTitle>
+          <DialogDescription>Service details and configuration</DialogDescription>
+        </DialogHeader>
+
+        {/* View Mode Selector */}
+        <div className="flex gap-2 border-b pb-4">
+          <Button
+            variant={viewMode === 'details' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setViewMode('details')}
+          >
+            <Eye className="h-4 w-4 mr-2" />
+            Details
+          </Button>
+          <Button
+            variant={viewMode === 'logs' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setViewMode('logs')}
+          >
+            <FileText className="h-4 w-4 mr-2" />
+            Logs
+          </Button>
+        </div>
+
+        {/* Details View */}
+        {viewMode === 'details' && (
+          <div className="space-y-4">
+            <div className="flex justify-end">
+              <Button variant="outline" size="sm" onClick={() => refetch()}>
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Refresh
+              </Button>
+            </div>
+
+            {isLoading ? (
+              <div className="space-y-4">
+                <Skeleton className="h-32 w-full" />
+                <Skeleton className="h-48 w-full" />
+              </div>
+            ) : status ? (
+              <>
+                {/* Status Section */}
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-lg">Status Information</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">Service Name</p>
+                        <p className="text-sm">{status.name}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">Namespace</p>
+                        <p className="text-sm">{status.namespace}</p>
+                      </div>
+                    </div>
+
+                    {status.replicas && (
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground mb-2">Replicas</p>
+                        <div className="grid grid-cols-4 gap-2 text-sm">
+                          <div className="bg-muted rounded p-2">
+                            <p className="text-xs text-muted-foreground">Desired</p>
+                            <p className="font-semibold">{status.replicas.desired}</p>
+                          </div>
+                          <div className="bg-muted rounded p-2">
+                            <p className="text-xs text-muted-foreground">Current</p>
+                            <p className="font-semibold">{status.replicas.current}</p>
+                          </div>
+                          <div className="bg-muted rounded p-2">
+                            <p className="text-xs text-muted-foreground">Ready</p>
+                            <p className="font-semibold">{status.replicas.ready}</p>
+                          </div>
+                          <div className="bg-muted rounded p-2">
+                            <p className="text-xs text-muted-foreground">Available</p>
+                            <p className="font-semibold">{status.replicas.available}</p>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+
+                {/* Pods Section */}
+                {status.pods && status.pods.length > 0 && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg">Pods</CardTitle>
+                      <CardDescription>{status.pods.length} pod(s)</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-2">
+                        {status.pods.map((pod) => (
+                          <div
+                            key={pod.name}
+                            className="border rounded-lg p-3 hover:bg-muted/50 transition-colors"
+                          >
+                            <div className="flex items-start justify-between mb-2">
+                              <div className="flex-1 min-w-0">
+                                <p className="text-sm font-medium truncate">{pod.name}</p>
+                                {pod.node && (
+                                  <p className="text-xs text-muted-foreground">Node: {pod.node}</p>
+                                )}
+                              </div>
+                              <div className="flex gap-2 ml-2">
+                                <Badge variant="outline" className={getPodStatusColor(pod.status)}>
+                                  {pod.status}
+                                </Badge>
+                              </div>
+                            </div>
+                            <div className="grid grid-cols-3 gap-2 text-xs">
+                              <div>
+                                <span className="text-muted-foreground">Ready:</span>{' '}
+                                <span className="font-medium">{pod.ready}</span>
+                              </div>
+                              <div>
+                                <span className="text-muted-foreground">Restarts:</span>{' '}
+                                <span className="font-medium">{pod.restarts}</span>
+                              </div>
+                              <div>
+                                <span className="text-muted-foreground">Age:</span>{' '}
+                                <span className="font-medium">{pod.age}</span>
+                              </div>
+                            </div>
+                            {pod.ip && (
+                              <div className="text-xs mt-1">
+                                <span className="text-muted-foreground">IP:</span>{' '}
+                                <span className="font-mono">{pod.ip}</span>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* Configuration Preview */}
+                {status.config && Object.keys(status.config).length > 0 && (
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg">Current Configuration</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-2">
+                        {Object.entries(status.config).map(([key, value]) => (
+                          <div key={key} className="flex justify-between text-sm">
+                            <span className="font-medium text-muted-foreground">{key}:</span>
+                            <span className="font-mono text-xs">
+                              {typeof value === 'object' && value !== null
+                                ? JSON.stringify(value, null, 2)
+                                : String(value)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+              </>
+            ) : (
+              <p className="text-center text-muted-foreground py-8">No status information available</p>
+            )}
+          </div>
+        )}
+
+        {/* Logs View */}
+        {viewMode === 'logs' && (
+          <ServiceLogViewer
+            instanceName={instanceName}
+            serviceName={serviceName}
+            containers={getContainerNames()}
+            onClose={() => setViewMode('details')}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/services/ServiceLogViewer.tsx

@@ -0,0 +1,236 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { servicesApi } from '@/services/api';
+import { Copy, Download, RefreshCw, X } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+interface ServiceLogViewerProps {
+  instanceName: string;
+  serviceName: string;
+  containers?: string[];
+  onClose: () => void;
+}
+
+export function ServiceLogViewer({
+  instanceName,
+  serviceName,
+  containers = [],
+  onClose,
+}: ServiceLogViewerProps) {
+  const [logs, setLogs] = useState<string[]>([]);
+  const [follow, setFollow] = useState(false);
+  const [tail, setTail] = useState(100);
+  const [container, setContainer] = useState<string | undefined>(containers[0]);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const logsEndRef = useRef<HTMLDivElement>(null);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  // Scroll to bottom when logs change and autoScroll is enabled
+  useEffect(() => {
+    if (autoScroll && logsEndRef.current) {
+      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [logs, autoScroll]);
+
+  // Fetch initial buffered logs
+  const fetchLogs = useCallback(async () => {
+    try {
+      const url = servicesApi.getLogsUrl(instanceName, serviceName, tail, false, container);
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch logs: ${response.statusText}`);
+      }
+      const data = await response.json();
+      // API returns { lines: string[] }
+      if (data.lines && Array.isArray(data.lines)) {
+        setLogs(data.lines);
+      } else {
+        setLogs([]);
+      }
+    } catch (error) {
+      console.error('Error fetching logs:', error);
+      setLogs([`Error: ${error instanceof Error ? error.message : 'Failed to fetch logs'}`]);
+    }
+  }, [instanceName, serviceName, tail, container]);
+
+  // Set up SSE streaming when follow is enabled
+  useEffect(() => {
+    if (follow) {
+      const url = servicesApi.getLogsUrl(instanceName, serviceName, tail, true, container);
+      const eventSource = new EventSource(url);
+      eventSourceRef.current = eventSource;
+
+      eventSource.onmessage = (event) => {
+        const line = event.data;
+        if (line && line.trim() !== '') {
+          setLogs((prev) => [...prev, line]);
+        }
+      };
+
+      eventSource.onerror = (error) => {
+        console.error('SSE error:', error);
+        eventSource.close();
+        setFollow(false);
+      };
+
+      return () => {
+        eventSource.close();
+      };
+    } else {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+    }
+  }, [follow, instanceName, serviceName, tail, container]);
+
+  // Fetch initial logs on mount and when parameters change
+  useEffect(() => {
+    if (!follow) {
+      fetchLogs();
+    }
+  }, [fetchLogs, follow]);
+
+  const handleCopyLogs = () => {
+    const text = logs.join('\n');
+    navigator.clipboard.writeText(text);
+  };
+
+  const handleDownloadLogs = () => {
+    const text = logs.join('\n');
+    const blob = new Blob([text], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${serviceName}-logs.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleClearLogs = () => {
+    setLogs([]);
+  };
+
+  const handleRefresh = () => {
+    setLogs([]);
+    fetchLogs();
+  };
+
+  return (
+    <Card className="flex flex-col h-full max-h-[80vh]">
+      <CardHeader className="flex-shrink-0">
+        <div className="flex items-center justify-between">
+          <CardTitle>Service Logs: {serviceName}</CardTitle>
+          <Button variant="ghost" size="sm" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="flex flex-wrap gap-4 mt-4">
+          <div className="flex items-center gap-2">
+            <Label htmlFor="tail-select">Lines:</Label>
+            <Select value={tail.toString()} onValueChange={(v) => setTail(Number(v))}>
+              <SelectTrigger id="tail-select" className="w-24">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="50">50</SelectItem>
+                <SelectItem value="100">100</SelectItem>
+                <SelectItem value="200">200</SelectItem>
+                <SelectItem value="500">500</SelectItem>
+                <SelectItem value="1000">1000</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {containers.length > 1 && (
+            <div className="flex items-center gap-2">
+              <Label htmlFor="container-select">Container:</Label>
+              <Select value={container} onValueChange={setContainer}>
+                <SelectTrigger id="container-select" className="w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {containers.map((c) => (
+                    <SelectItem key={c} value={c}>
+                      {c}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="follow-checkbox"
+              checked={follow}
+              onChange={(e) => setFollow(e.target.checked)}
+              className="rounded"
+            />
+            <Label htmlFor="follow-checkbox">Follow</Label>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              id="autoscroll-checkbox"
+              checked={autoScroll}
+              onChange={(e) => setAutoScroll(e.target.checked)}
+              className="rounded"
+            />
+            <Label htmlFor="autoscroll-checkbox">Auto-scroll</Label>
+          </div>
+
+          <div className="flex gap-2 ml-auto">
+            <Button variant="outline" size="sm" onClick={handleRefresh} disabled={follow}>
+              <RefreshCw className="h-4 w-4" />
+              Refresh
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleCopyLogs}>
+              <Copy className="h-4 w-4" />
+              Copy
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleDownloadLogs}>
+              <Download className="h-4 w-4" />
+              Download
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleClearLogs}>
+              Clear
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex-1 overflow-hidden p-0">
+        <div
+          ref={logsContainerRef}
+          className="h-full overflow-y-auto bg-slate-950 dark:bg-slate-900 p-4 font-mono text-xs text-green-400"
+        >
+          {logs.length === 0 ? (
+            <div className="text-slate-500">No logs available</div>
+          ) : (
+            logs.map((line, index) => (
+              <div key={index} className="whitespace-pre-wrap break-all">
+                {line}
+              </div>
+            ))
+          )}
+          <div ref={logsEndRef} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/services/ServiceStatusBadge.tsx

@@ -0,0 +1,42 @@
+import { Badge } from '@/components/ui/badge';
+import { CheckCircle, AlertCircle, Loader2, XCircle } from 'lucide-react';
+
+interface ServiceStatusBadgeProps {
+  status: 'Ready' | 'Progressing' | 'Degraded' | 'NotFound';
+  className?: string;
+}
+
+export function ServiceStatusBadge({ status, className }: ServiceStatusBadgeProps) {
+  const statusConfig = {
+    Ready: {
+      variant: 'success' as const,
+      icon: CheckCircle,
+      label: 'Ready',
+    },
+    Progressing: {
+      variant: 'warning' as const,
+      icon: Loader2,
+      label: 'Progressing',
+    },
+    Degraded: {
+      variant: 'destructive' as const,
+      icon: AlertCircle,
+      label: 'Degraded',
+    },
+    NotFound: {
+      variant: 'secondary' as const,
+      icon: XCircle,
+      label: 'Not Found',
+    },
+  };
+
+  const config = statusConfig[status];
+  const Icon = config.icon;
+
+  return (
+    <Badge variant={config.variant} className={className}>
+      <Icon className={status === 'Progressing' ? 'animate-spin' : ''} />
+      {config.label}
+    </Badge>
+  );
+}

src/components/services/index.ts

@@ -0,0 +1,4 @@
+export { ServiceStatusBadge } from './ServiceStatusBadge';
+export { ServiceLogViewer } from './ServiceLogViewer';
+export { ServiceConfigEditor } from './ServiceConfigEditor';
+export { ServiceDetailModal } from './ServiceDetailModal';

src/components/ui/select.tsx

@@ -0,0 +1,158 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}