eksadmin/IT_Tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: JSON-Serialisierung, API-Routing und Dark-Mode Dropdowns

Browse Source 
Backend:
- Program.cs: JsonNamingPolicy.CamelCase + JsonStringEnumConverter global aktiviert
  → behebt alle Frontend-API-Calls (PascalCase statt camelCase, Integer statt String-Enums)
- AgentsController: GetMetrics nutzt jetzt 'limit' Parameter (statt 'hours')
  → Frontend-Aufruf ?limit=50 wird korrekt ausgewertet
- AgentsController: GetAll gibt MacAddress und EnrolledAt zurück
- TasksController: GET /tasks?agentId= Endpoint hinzugefügt
  → behebt Routing-Mismatch (Frontend nutzte Query-Parameter, Backend hatte Route-Parameter)

Frontend:
- SoftwarePage.tsx: Alle hardcodierten Hellmodus-Farben durch Theme-Variablen ersetzt
  (bg-white/gray → bg-card/muted, text-gray-* → text-foreground/muted-foreground)
- index.css: select option Stile für Dark-Mode Sichtbarkeit hinzugefügt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-03-24 13:30:30 +01:00
parent d7b618f02d
commit b45a9f3bdc
5 changed files with 222 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
Backend/src/NexusRMM.Api/Controllers/AgentsController.cs
View File

@@ -16,7 +16,7 @@ public class AgentsController : ControllerBase
{
var agents = await _db.Agents
.OrderBy(a => a.Hostname)
.Select(a => new { a.Id, a.Hostname, a.OsType, a.OsVersion, a.IpAddress, a.Status, a.AgentVersion, a.LastSeen, a.Tags })
.Select(a => new { a.Id, a.Hostname, a.OsType, a.OsVersion, a.IpAddress, a.MacAddress, a.Status, a.AgentVersion, a.LastSeen, a.EnrolledAt, a.Tags })
.ToListAsync();
return Ok(agents);
}
@@ -29,14 +29,13 @@ public class AgentsController : ControllerBase
}
[HttpGet("{id:guid}/metrics")]
public async Task<IActionResult> GetMetrics(Guid id, [FromQuery] int hours = 24)
public async Task<IActionResult> GetMetrics(Guid id, [FromQuery] int limit = 100)
{
var since = DateTime.UtcNow.AddHours(-hours);
var metrics = await _db.AgentMetrics
.Where(m => m.AgentId == id && m.Timestamp >= since)
.Where(m => m.AgentId == id)
.OrderByDescending(m => m.Timestamp)
.Take(1000)
.Select(m => new { m.Timestamp, m.Metrics })
.Take(limit)
.Select(m => new { m.Id, m.AgentId, m.Timestamp, m.Metrics })
.ToListAsync();
return Ok(metrics);
}

20
Backend/src/NexusRMM.Api/Controllers/TasksController.cs
View File

@@ -29,23 +29,21 @@ public class TasksController : ControllerBase
return CreatedAtAction(nameof(GetById), new { id = task.Id }, task);
}
[HttpGet]
public async Task<IActionResult> GetAll([FromQuery] Guid? agentId = null)
{
var query = _db.Tasks.AsQueryable();
if (agentId.HasValue) query = query.Where(t => t.AgentId == agentId.Value);
var tasks = await query.OrderByDescending(t => t.CreatedAt).Take(50).ToListAsync();
return Ok(tasks);
}
[HttpGet("{id:guid}")]
public async Task<IActionResult> GetById(Guid id)
{
var task = await _db.Tasks.FindAsync(id);
return task is null ? NotFound() : Ok(task);
}
[HttpGet("agent/{agentId:guid}")]
public async Task<IActionResult> GetByAgent(Guid agentId)
{
var tasks = await _db.Tasks
.Where(t => t.AgentId == agentId)
.OrderByDescending(t => t.CreatedAt)
.Take(50)
.ToListAsync();
return Ok(tasks);
}
}
public record CreateTaskRequest(Guid AgentId, TaskType Type, object? Payload);

7
Backend/src/NexusRMM.Api/Program.cs
View File

@@ -20,7 +20,12 @@ builder.Services.AddDbContext<RmmDbContext>(options =>
builder.Services.AddGrpc();
builder.Services.AddSignalR();
builder.Services.AddControllers();
builder.Services.AddControllers()
.AddJsonOptions(options =>
{
options.JsonSerializerOptions.PropertyNamingPolicy = System.Text.Json.JsonNamingPolicy.CamelCase;
options.JsonSerializerOptions.Converters.Add(new System.Text.Json.Serialization.JsonStringEnumConverter());
});
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

5
Frontend/src/index.css
View File

@@ -33,4 +33,9 @@
background-color: hsl(var(--background));
color: hsl(var(--foreground));
}
/* Dropdown-Optionen im Dark Mode sichtbar machen */
select option {
background-color: hsl(var(--card));
color: hsl(var(--foreground));
}
}

416
Frontend/src/pages/SoftwarePage.tsx
View File

@@ -15,13 +15,11 @@ export default function SoftwarePage() {
const queryClient = useQueryClient()
// Fetch packages
const { data: packages = [], isLoading } = useQuery({
queryKey: ['software-packages', filterOs],
queryFn: () => softwarePackagesApi.list(filterOs === 'All' ? undefined : filterOs),
})
// Mutations
const createMutation = useMutation({
mutationFn: (data: CreateSoftwarePackageRequest) => softwarePackagesApi.create(data),
onSuccess: () => {
@@ -96,134 +94,134 @@ export default function SoftwarePage() {
}
return (
<div className="min-h-screen bg-gray-50 p-8">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-3 mb-2">
<Package className="text-blue-600" size={28} />
<h1 className="text-3xl font-bold">Software-Verwaltung</h1>
</div>
<p className="text-gray-600">Verwalte Software-Pakete und deploye sie auf Agenten</p>
<div className="p-6 space-y-6">
{/* Header */}
<div>
<div className="flex items-center gap-3 mb-1">
<Package className="text-primary" size={24} />
<h1 className="text-3xl font-bold text-foreground">Software-Verwaltung</h1>
</div>
<p className="text-muted-foreground">Verwalte Software-Pakete und deploye sie auf Agenten</p>
</div>
{/* Tabs */}
<div className="flex gap-4 mb-6 border-b">
<button
onClick={() => setActiveTab('catalog')}
className={cn(
'px-4 py-2 font-medium text-sm border-b-2 transition-colors',
activeTab === 'catalog'
? 'border-blue-600 text-blue-600'
: 'border-transparent text-gray-600 hover:text-gray-900'
)}
>
Katalog
</button>
<button
onClick={() => setActiveTab('deploy')}
className={cn(
'px-4 py-2 font-medium text-sm border-b-2 transition-colors',
activeTab === 'deploy'
? 'border-blue-600 text-blue-600'
: 'border-transparent text-gray-600 hover:text-gray-900'
)}
>
Deployen
</button>
{/* Tabs */}
<div className="flex gap-2 border-b border-border">
<button
onClick={() => setActiveTab('catalog')}
className={cn(
'px-4 py-2 font-medium text-sm border-b-2 transition-colors',
activeTab === 'catalog'
? 'border-primary text-primary'
: 'border-transparent text-muted-foreground hover:text-foreground'
)}
>
Katalog
</button>
<button
onClick={() => setActiveTab('deploy')}
className={cn(
'px-4 py-2 font-medium text-sm border-b-2 transition-colors',
activeTab === 'deploy'
? 'border-primary text-primary'
: 'border-transparent text-muted-foreground hover:text-foreground'
)}
>
Deployen
</button>
</div>
{/* Messages */}
{successMessage && (
<div className="p-3 bg-green-500/20 text-green-400 border border-green-500/30 rounded-lg">
{successMessage}
</div>
)}
{errorMessage && (
<div className="p-3 bg-red-500/20 text-red-400 border border-red-500/30 rounded-lg">
{errorMessage}
</div>
)}
{/* Messages */}
{successMessage && (
<div className="mb-4 p-3 bg-green-100 text-green-800 rounded-lg">{successMessage}</div>
)}
{errorMessage && (
<div className="mb-4 p-3 bg-red-100 text-red-800 rounded-lg">{errorMessage}</div>
)}
{/* Tab Content */}
{activeTab === 'catalog' && (
<div>
{/* Filter and Create Button */}
<div className="flex items-center justify-between mb-6">
<div className="flex gap-2">
{(['All', 'Windows', 'Linux'] as const).map((os) => (
<button
key={os}
onClick={() => setFilterOs(os)}
className={cn(
'px-4 py-2 rounded-lg font-medium transition-colors',
filterOs === os
? 'bg-blue-600 text-white'
: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
)}
>
{os}
</button>
))}
</div>
<button
onClick={handleOpenCreate}
className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<Plus size={18} />
Neues Paket
</button>
{/* Catalog Tab */}
{activeTab === 'catalog' && (
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex gap-2">
{(['All', 'Windows', 'Linux'] as const).map((os) => (
<button
key={os}
onClick={() => setFilterOs(os)}
className={cn(
'px-4 py-2 rounded-lg font-medium text-sm transition-colors',
filterOs === os
? 'bg-primary text-primary-foreground'
: 'bg-muted text-muted-foreground hover:text-foreground hover:bg-muted/80'
)}
>
{os}
</button>
))}
</div>
<button
onClick={handleOpenCreate}
className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium"
>
<Plus size={18} />
Neues Paket
</button>
</div>
{/* Table */}
{isLoading ? (
<div className="text-center py-8 text-gray-500">Laden...</div>
) : packages.length === 0 ? (
<div className="text-center py-8 text-gray-500">
Keine Pakete {filterOs !== 'All' && `für ${filterOs}`} vorhanden
</div>
) : (
<div className="bg-white rounded-lg shadow overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-100 border-b">
{isLoading ? (
<div className="text-center py-8 text-muted-foreground">Laden...</div>
) : packages.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
Keine Pakete {filterOs !== 'All' && `für ${filterOs}`} vorhanden
</div>
) : (
<div className="bg-card border border-border rounded-lg overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead className="bg-muted border-b border-border">
<tr>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Name</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Version</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">OS</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">
Paketmanager
</th>
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Paketname</th>
<th className="px-6 py-3 text-right text-sm font-semibold text-gray-900">Aktionen</th>
<th className="px-6 py-3 text-left font-semibold text-foreground">Name</th>
<th className="px-6 py-3 text-left font-semibold text-foreground">Version</th>
<th className="px-6 py-3 text-left font-semibold text-foreground">OS</th>
<th className="px-6 py-3 text-left font-semibold text-foreground">Paketmanager</th>
<th className="px-6 py-3 text-left font-semibold text-foreground">Paketname</th>
<th className="px-6 py-3 text-right font-semibold text-foreground">Aktionen</th>
</tr>
</thead>
<tbody>
<tbody className="divide-y divide-border">
{packages.map((pkg) => (
<tr key={pkg.id} className="border-b hover:bg-gray-50 transition-colors">
<td className="px-6 py-4 font-medium text-gray-900">{pkg.name}</td>
<td className="px-6 py-4 text-gray-600">{pkg.version}</td>
<tr key={pkg.id} className="hover:bg-muted/50 transition-colors">
<td className="px-6 py-4 font-medium text-foreground">{pkg.name}</td>
<td className="px-6 py-4 text-muted-foreground">{pkg.version}</td>
<td className="px-6 py-4">
<span
className={cn(
'px-3 py-1 rounded-full text-sm font-medium text-white',
'px-3 py-1 rounded-full text-xs font-medium text-primary-foreground',
pkg.osType === 'Windows' ? 'bg-blue-600' : 'bg-green-600'
)}
>
{pkg.osType}
</span>
</td>
<td className="px-6 py-4 text-gray-600">{pkg.packageManager}</td>
<td className="px-6 py-4 text-gray-600 font-mono text-sm">{pkg.packageName}</td>
<td className="px-6 py-4 flex justify-end gap-3">
<td className="px-6 py-4 text-muted-foreground">{pkg.packageManager}</td>
<td className="px-6 py-4 text-muted-foreground font-mono text-xs">{pkg.packageName}</td>
<td className="px-6 py-4 flex justify-end gap-2">
<button
onClick={() => handleEdit(pkg)}
className="p-2 text-blue-600 hover:bg-blue-50 rounded transition-colors"
className="p-2 text-primary hover:bg-primary/10 rounded transition-colors"
title="Bearbeiten"
>
<Edit size={18} />
<Edit size={16} />
</button>
<button
onClick={() => handleDelete(pkg.id, pkg.name)}
className="p-2 text-red-600 hover:bg-red-50 rounded transition-colors"
className="p-2 text-red-400 hover:bg-red-500/10 rounded transition-colors"
title="Löschen"
>
<Trash2 size={18} />
<Trash2 size={16} />
</button>
</td>
</tr>
@@ -231,12 +229,12 @@ export default function SoftwarePage() {
</tbody>
</table>
</div>
)}
</div>
)}
</div>
)}
</div>
)}
{activeTab === 'deploy' && <DeployTab packages={packages} deployMutation={deployMutation} />}
</div>
{activeTab === 'deploy' && <DeployTab packages={packages} deployMutation={deployMutation} />}
{/* Create/Edit Modal */}
{isCreateModalOpen && (
@@ -316,76 +314,72 @@ function CreatePackageModal({
availableManagers.includes(formData.packageManager as PackageManager)
? (formData.packageManager as PackageManager)
: (availableManagers[0] as PackageManager)
setFormData((prev) => ({
...prev,
osType: newOs,
packageManager: newManager,
}))
setFormData((prev) => ({ ...prev, osType: newOs, packageManager: newManager }))
}
const inputClass =
'w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary'
if (!isOpen) return null
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg shadow-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
<div className="flex items-center justify-between p-6 border-b sticky top-0 bg-white">
<h2 className="text-xl font-bold">
<div className="bg-card border border-border rounded-lg shadow-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
<div className="flex items-center justify-between p-6 border-b border-border sticky top-0 bg-card">
<h2 className="text-xl font-bold text-foreground">
{editingPackage ? 'Paket bearbeiten' : 'Neues Paket'}
</h2>
<button onClick={onClose} className="text-gray-500 hover:text-gray-700">
<X size={24} />
<button onClick={onClose} className="text-muted-foreground hover:text-foreground">
<X size={20} />
</button>
</div>
<form onSubmit={handleSubmit} className="p-6 space-y-4">
{/* Name */}
<div>
<label className="block text-sm font-medium text-gray-900 mb-1">Name *</label>
<label className="block text-sm font-medium text-foreground mb-1">Name *</label>
<input
type="text"
required
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
className={inputClass}
/>
</div>
{/* Version */}
<div>
<label className="block text-sm font-medium text-gray-900 mb-1">Version *</label>
<label className="block text-sm font-medium text-foreground mb-1">Version *</label>
<input
type="text"
required
placeholder="z.B. 1.0.0"
value={formData.version}
onChange={(e) => setFormData({ ...formData, version: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
className={inputClass}
/>
</div>
{/* OS */}
<div>
<label className="block text-sm font-medium text-gray-900 mb-1">Betriebssystem *</label>
<label className="block text-sm font-medium text-foreground mb-1">Betriebssystem *</label>
<select
required
value={formData.osType}
onChange={(e) => handleOsChange(e.target.value as OsType)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
className={inputClass}
>
<option value="Windows">Windows</option>
<option value="Linux">Linux</option>
</select>
</div>
{/* Package Manager */}
<div>
<label className="block text-sm font-medium text-gray-900 mb-1">Paketmanager *</label>
<label className="block text-sm font-medium text-foreground mb-1">Paketmanager *</label>
<select
required
value={formData.packageManager}
onChange={(e) => setFormData({ ...formData, packageManager: e.target.value as PackageManager })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
onChange={(e) =>
setFormData({ ...formData, packageManager: e.target.value as PackageManager })
}
className={inputClass}
>
{getAvailablePackageManagers().map((pm) => (
<option key={pm} value={pm}>
@@ -395,74 +389,71 @@ function CreatePackageModal({
</select>
</div>
{/* Package Name */}
<div>
<label className="block text-sm font-medium text-gray-900 mb-1">Paketname *</label>
<label className="block text-sm font-medium text-foreground mb-1">Paketname *</label>
<input
type="text"
required
placeholder="Name wie im Paketmanager"
value={formData.packageName}
onChange={(e) => setFormData({ ...formData, packageName: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
className={inputClass}
/>
</div>
{/* Installer URL (nur für "direct") */}
{formData.packageManager === 'direct' && (
<div>
<label className="block text-sm font-medium text-gray-900 mb-1">Installer URL</label>
<input
type="url"
placeholder="https://..."
value={formData.installerUrl || ''}
onChange={(e) => setFormData({ ...formData, installerUrl: e.target.value || undefined })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<>
<div>
<label className="block text-sm font-medium text-foreground mb-1">Installer URL</label>
<input
type="url"
placeholder="https://..."
value={formData.installerUrl || ''}
onChange={(e) =>
setFormData({ ...formData, installerUrl: e.target.value || undefined })
}
className={inputClass}
/>
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-1">SHA256-Prüfsumme</label>
<input
type="text"
placeholder="SHA256 hash"
value={formData.checksum || ''}
onChange={(e) =>
setFormData({ ...formData, checksum: e.target.value || undefined })
}
className={cn(inputClass, 'font-mono text-xs')}
/>
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-1">Silent-Argumente</label>
<input
type="text"
placeholder="/S, --silent, etc."
value={formData.silentArgs || ''}
onChange={(e) =>
setFormData({ ...formData, silentArgs: e.target.value || undefined })
}
className={inputClass}
/>
</div>
</>
)}
{/* Checksum (nur für "direct") */}
{formData.packageManager === 'direct' && (
<div>
<label className="block text-sm font-medium text-gray-900 mb-1">SHA256-Prüfsumme</label>
<input
type="text"
placeholder="SHA256 hash"
value={formData.checksum || ''}
onChange={(e) => setFormData({ ...formData, checksum: e.target.value || undefined })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-xs"
/>
</div>
)}
{/* Silent Args (nur für "direct") */}
{formData.packageManager === 'direct' && (
<div>
<label className="block text-sm font-medium text-gray-900 mb-1">Silent-Argumente</label>
<input
type="text"
placeholder="/S, --silent, etc."
value={formData.silentArgs || ''}
onChange={(e) => setFormData({ ...formData, silentArgs: e.target.value || undefined })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
)}
{/* Buttons */}
<div className="flex gap-3 pt-4">
<button
type="button"
onClick={onClose}
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors font-medium"
className="flex-1 px-4 py-2 border border-border rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors font-medium text-sm"
>
Abbrechen
</button>
<button
type="submit"
disabled={isLoading}
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50"
className="flex-1 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium text-sm disabled:opacity-50"
>
{isLoading ? 'Speichern...' : editingPackage ? 'Aktualisieren' : 'Erstellen'}
</button>
@@ -475,7 +466,7 @@ function CreatePackageModal({
interface DeployTabProps {
packages: SoftwarePackage[]
deployMutation: any
deployMutation: ReturnType<typeof useMutation<unknown, Error, { agentId: string; packageId: number; action: 'install' | 'uninstall' }>>
}
function DeployTab({ packages, deployMutation }: DeployTabProps) {
@@ -483,28 +474,26 @@ function DeployTab({ packages, deployMutation }: DeployTabProps) {
const [agentId, setAgentId] = useState('')
const [action, setAction] = useState<'install' | 'uninstall'>('install')
const inputClass =
'w-full px-3 py-2 bg-background border border-border rounded-lg text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary'
const handleDeploy = (e: React.FormEvent) => {
e.preventDefault()
if (!selectedPackageId || !agentId) return
deployMutation.mutate({
agentId,
packageId: selectedPackageId as number,
action,
})
deployMutation.mutate({ agentId, packageId: selectedPackageId as number, action })
}
return (
<div className="max-w-lg">
<div className="bg-white rounded-lg shadow p-6">
<div className="bg-card border border-border rounded-lg p-6">
<form onSubmit={handleDeploy} className="space-y-4">
{/* Package Selection */}
<div>
<label className="block text-sm font-medium text-gray-900 mb-2">Paket auswählen *</label>
<label className="block text-sm font-medium text-foreground mb-2">Paket auswählen *</label>
<select
required
value={selectedPackageId}
onChange={(e) => setSelectedPackageId(e.target.value ? Number(e.target.value) : '')}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
className={inputClass}
>
<option value="">-- Paket auswählen --</option>
{packages.map((pkg) => (
@@ -515,65 +504,54 @@ function DeployTab({ packages, deployMutation }: DeployTabProps) {
</select>
</div>
{/* Agent ID */}
<div>
<label className="block text-sm font-medium text-gray-900 mb-2">Agent-ID *</label>
<label className="block text-sm font-medium text-foreground mb-2">Agent-ID *</label>
<input
type="text"
required
placeholder="UUID des Agenten (aus Dashboard kopieren)"
value={agentId}
onChange={(e) => setAgentId(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
className={cn(inputClass, 'font-mono')}
/>
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-muted-foreground">
Finde die Agent-ID im Agent-Dashboard oder Agent-Details
</p>
</div>
{/* Action */}
<div>
<label className="block text-sm font-medium text-gray-900 mb-2">Aktion *</label>
<label className="block text-sm font-medium text-foreground mb-2">Aktion *</label>
<div className="space-y-2">
<label className="flex items-center gap-3 cursor-pointer">
<input
type="radio"
name="action"
value="install"
checked={action === 'install'}
onChange={() => setAction('install')}
className="w-4 h-4"
/>
<span className="text-gray-900">Installieren</span>
</label>
<label className="flex items-center gap-3 cursor-pointer">
<input
type="radio"
name="action"
value="uninstall"
checked={action === 'uninstall'}
onChange={() => setAction('uninstall')}
className="w-4 h-4"
/>
<span className="text-gray-900">Deinstallieren</span>
</label>
{(['install', 'uninstall'] as const).map((a) => (
<label key={a} className="flex items-center gap-3 cursor-pointer">
<input
type="radio"
name="action"
value={a}
checked={action === a}
onChange={() => setAction(a)}
className="w-4 h-4 accent-primary"
/>
<span className="text-foreground text-sm">
{a === 'install' ? 'Installieren' : 'Deinstallieren'}
</span>
</label>
))}
</div>
</div>
{/* Submit */}
<button
type="submit"
disabled={deployMutation.isPending || !selectedPackageId || !agentId}
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed"
>
<Rocket size={18} />
{deployMutation.isPending ? 'Wird deployed...' : 'Deploy starten'}
</button>
{/* Info */}
<div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-900">
<div className="p-3 bg-primary/10 border border-primary/20 rounded-lg text-sm text-foreground">
<p className="font-medium mb-1">Hinweis:</p>
<p>
<p className="text-muted-foreground">
Die Task wird erstellt und der Agent führt sie beim nächsten Heartbeat aus (ca. 1-2 Minuten).
Überwache den Task-Fortschritt im Agent-Dashboard.
</p>