feat: implement Phase 6 — Software Deployment

Backend:
- SoftwarePackage model (Name, Version, OsType, PackageManager, PackageName, InstallerUrl, Checksum, SilentArgs)
- RmmDbContext: SoftwarePackages DbSet + unique index on (Name, Version, OsType)
- SoftwarePackagesController: full CRUD with OsType filter
- DeployController: POST /api/v1/deploy creates InstallSoftware/UninstallSoftware TaskItem
- EF Migration: AddSoftwarePackages (20260319130448)

Go Agent:
- internal/deployer/deployer.go: Install() and Uninstall() with:
  - Chocolatey (Windows), apt/dnf (Linux), auto-detect
  - Direct installer fallback: HTTP download + SHA256 verify + silent install
  - Supports .msi, .exe (Windows) and .deb, .rpm (Linux)
- main.go: COMMAND_TYPE_INSTALL_SOFTWARE and COMMAND_TYPE_UNINSTALL_SOFTWARE routed to deployer

Frontend:
- SoftwarePage: Katalog tab (CRUD, OS filter, smart package manager select) + Deploy tab
- api/types.ts: SoftwarePackage, PackageManager, DeployRequest/Response types
- api/client.ts: softwarePackagesApi and deployApi
- App.tsx: Software nav item with Package icon

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Frontend/src/App.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { LayoutDashboard, Ticket, Bell, Menu, X } from 'lucide-react'
+import { LayoutDashboard, Ticket, Bell, Package, Menu, X } from 'lucide-react'
 import { DashboardPage } from './pages/DashboardPage'
 import { AgentDetailPage } from './pages/AgentDetailPage'
 import TicketsPage from './pages/TicketsPage'
 import AlertsPage from './pages/AlertsPage'
+import SoftwarePage from './pages/SoftwarePage'
 import { cn } from './lib/utils'
 
 const queryClient = new QueryClient({
@@ -16,7 +17,7 @@ const queryClient = new QueryClient({
   },
 })
 
-type Page = 'dashboard' | 'agent-detail' | 'tickets' | 'alerts'
+type Page = 'dashboard' | 'agent-detail' | 'tickets' | 'alerts' | 'software'
 
 interface NavItem {
   id: Page
@@ -28,6 +29,7 @@ const navItems: NavItem[] = [
   { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard size={18} /> },
   { id: 'tickets', label: 'Tickets', icon: <Ticket size={18} /> },
   { id: 'alerts', label: 'Alerts', icon: <Bell size={18} /> },
+  { id: 'software', label: 'Software', icon: <Package size={18} /> },
 ]
 
 function AppContent() {
@@ -110,6 +112,7 @@ function AppContent() {
         )}
         {page === 'tickets' && <TicketsPage />}
         {page === 'alerts' && <AlertsPage />}
+        {page === 'software' && <SoftwarePage />}
       </main>
     </div>
   )

Frontend/src/api/client.ts

@@ -10,6 +10,10 @@ import type {
   AlertItem,
   CreateAlertRuleRequest,
   UpdateAlertRuleRequest,
+  SoftwarePackage,
+  CreateSoftwarePackageRequest,
+  DeployRequest,
+  DeployResponse,
 } from './types'
 
 const BASE_URL = '/api/v1'
@@ -73,3 +77,23 @@ export const alertsApi = {
   acknowledge: (id: number) =>
     request<{ id: number; acknowledged: boolean }>(`/alerts/${id}/acknowledge`, { method: 'POST' }),
 }
+
+// Software Packages
+export const softwarePackagesApi = {
+  list: (osType?: string) => {
+    const param = osType ? `?osType=${osType}` : ''
+    return request<SoftwarePackage[]>(`/software-packages${param}`)
+  },
+  create: (data: CreateSoftwarePackageRequest) =>
+    request<SoftwarePackage>('/software-packages', { method: 'POST', body: JSON.stringify(data) }),
+  update: (id: number, data: CreateSoftwarePackageRequest) =>
+    request<SoftwarePackage>(`/software-packages/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
+  delete: (id: number) =>
+    request<void>(`/software-packages/${id}`, { method: 'DELETE' }),
+}
+
+// Deploy
+export const deployApi = {
+  deploy: (data: DeployRequest) =>
+    request<DeployResponse>('/deploy', { method: 'POST', body: JSON.stringify(data) }),
+}

Frontend/src/api/types.ts

@@ -132,3 +132,44 @@ export interface UpdateAlertRuleRequest {
   severity?: AlertSeverity
   enabled?: boolean
 }
+
+export type PackageManager = 'choco' | 'apt' | 'dnf' | 'direct'
+
+export interface SoftwarePackage {
+  id: number
+  name: string
+  version: string
+  osType: OsType
+  packageManager: PackageManager
+  packageName: string
+  installerUrl: string | null
+  checksum: string | null
+  silentArgs: string | null
+  createdAt: string
+}
+
+export interface CreateSoftwarePackageRequest {
+  name: string
+  version: string
+  osType: OsType
+  packageManager: PackageManager
+  packageName: string
+  installerUrl?: string
+  checksum?: string
+  silentArgs?: string
+}
+
+export interface DeployRequest {
+  agentId: string
+  packageId: number
+  action: 'install' | 'uninstall'
+}
+
+export interface DeployResponse {
+  id: string
+  agentId: string
+  type: string
+  status: string
+  packageName: string
+  version: string
+}

Frontend/src/pages/SoftwarePage.tsx

@@ -0,0 +1,585 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Package, Plus, Trash2, Edit, Rocket, X } from 'lucide-react'
+import { softwarePackagesApi, deployApi } from '../api/client'
+import type { SoftwarePackage, OsType, PackageManager, CreateSoftwarePackageRequest } from '../api/types'
+import { cn } from '../lib/utils'
+
+export default function SoftwarePage() {
+  const [activeTab, setActiveTab] = useState<'catalog' | 'deploy'>('catalog')
+  const [filterOs, setFilterOs] = useState<'All' | OsType>('All')
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
+  const [editingPackage, setEditingPackage] = useState<SoftwarePackage | null>(null)
+  const [successMessage, setSuccessMessage] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+
+  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: () => {
+      queryClient.invalidateQueries({ queryKey: ['software-packages'] })
+      setIsCreateModalOpen(false)
+      setEditingPackage(null)
+      setSuccessMessage('Paket erfolgreich erstellt')
+      setTimeout(() => setSuccessMessage(''), 3000)
+    },
+    onError: (error: Error) => {
+      setErrorMessage(error.message)
+      setTimeout(() => setErrorMessage(''), 3000)
+    },
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: (data: { id: number; body: CreateSoftwarePackageRequest }) =>
+      softwarePackagesApi.update(data.id, data.body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['software-packages'] })
+      setIsCreateModalOpen(false)
+      setEditingPackage(null)
+      setSuccessMessage('Paket erfolgreich aktualisiert')
+      setTimeout(() => setSuccessMessage(''), 3000)
+    },
+    onError: (error: Error) => {
+      setErrorMessage(error.message)
+      setTimeout(() => setErrorMessage(''), 3000)
+    },
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: number) => softwarePackagesApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['software-packages'] })
+      setSuccessMessage('Paket erfolgreich gelöscht')
+      setTimeout(() => setSuccessMessage(''), 3000)
+    },
+    onError: (error: Error) => {
+      setErrorMessage(error.message)
+      setTimeout(() => setErrorMessage(''), 3000)
+    },
+  })
+
+  const deployMutation = useMutation({
+    mutationFn: (data: { agentId: string; packageId: number; action: 'install' | 'uninstall' }) =>
+      deployApi.deploy(data),
+    onSuccess: () => {
+      setSuccessMessage('Deployment-Task erfolgreich erstellt')
+      setTimeout(() => setSuccessMessage(''), 3000)
+    },
+    onError: (error: Error) => {
+      setErrorMessage(error.message)
+      setTimeout(() => setErrorMessage(''), 3000)
+    },
+  })
+
+  const handleDelete = (id: number, name: string) => {
+    if (window.confirm(`Paket "${name}" wirklich löschen?`)) {
+      deleteMutation.mutate(id)
+    }
+  }
+
+  const handleEdit = (pkg: SoftwarePackage) => {
+    setEditingPackage(pkg)
+    setIsCreateModalOpen(true)
+  }
+
+  const handleOpenCreate = () => {
+    setEditingPackage(null)
+    setIsCreateModalOpen(true)
+  }
+
+  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>
+
+        {/* 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>
+        </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>
+            </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">
+                    <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>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {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>
+                        <td className="px-6 py-4">
+                          <span
+                            className={cn(
+                              'px-3 py-1 rounded-full text-sm font-medium text-white',
+                              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">
+                          <button
+                            onClick={() => handleEdit(pkg)}
+                            className="p-2 text-blue-600 hover:bg-blue-50 rounded transition-colors"
+                            title="Bearbeiten"
+                          >
+                            <Edit size={18} />
+                          </button>
+                          <button
+                            onClick={() => handleDelete(pkg.id, pkg.name)}
+                            className="p-2 text-red-600 hover:bg-red-50 rounded transition-colors"
+                            title="Löschen"
+                          >
+                            <Trash2 size={18} />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        )}
+
+        {activeTab === 'deploy' && <DeployTab packages={packages} deployMutation={deployMutation} />}
+      </div>
+
+      {/* Create/Edit Modal */}
+      {isCreateModalOpen && (
+        <CreatePackageModal
+          package={editingPackage}
+          isOpen={isCreateModalOpen}
+          onClose={() => {
+            setIsCreateModalOpen(false)
+            setEditingPackage(null)
+          }}
+          onSubmit={(data) => {
+            if (editingPackage) {
+              updateMutation.mutate({ id: editingPackage.id, body: data })
+            } else {
+              createMutation.mutate(data)
+            }
+          }}
+          isLoading={createMutation.isPending || updateMutation.isPending}
+        />
+      )}
+    </div>
+  )
+}
+
+interface CreatePackageModalProps {
+  package: SoftwarePackage | null
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: (data: CreateSoftwarePackageRequest) => void
+  isLoading: boolean
+}
+
+function CreatePackageModal({
+  package: editingPackage,
+  isOpen,
+  onClose,
+  onSubmit,
+  isLoading,
+}: CreatePackageModalProps) {
+  const [formData, setFormData] = useState<CreateSoftwarePackageRequest>(
+    editingPackage
+      ? {
+          name: editingPackage.name,
+          version: editingPackage.version,
+          osType: editingPackage.osType,
+          packageManager: editingPackage.packageManager,
+          packageName: editingPackage.packageName,
+          installerUrl: editingPackage.installerUrl ?? undefined,
+          checksum: editingPackage.checksum ?? undefined,
+          silentArgs: editingPackage.silentArgs ?? undefined,
+        }
+      : {
+          name: '',
+          version: '',
+          osType: 'Windows',
+          packageManager: 'choco',
+          packageName: '',
+        }
+  )
+
+  const getAvailablePackageManagers = (): PackageManager[] => {
+    if (formData.osType === 'Windows') {
+      return ['choco', 'direct']
+    } else {
+      return ['apt', 'dnf', 'direct']
+    }
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSubmit(formData)
+  }
+
+  const handleOsChange = (newOs: OsType) => {
+    const availableManagers = newOs === 'Windows' ? ['choco', 'direct'] : ['apt', 'dnf', 'direct']
+    const newManager =
+      availableManagers.includes(formData.packageManager as PackageManager)
+        ? (formData.packageManager as PackageManager)
+        : (availableManagers[0] as PackageManager)
+
+    setFormData((prev) => ({
+      ...prev,
+      osType: newOs,
+      packageManager: newManager,
+    }))
+  }
+
+  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">
+            {editingPackage ? 'Paket bearbeiten' : 'Neues Paket'}
+          </h2>
+          <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
+            <X size={24} />
+          </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>
+            <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"
+            />
+          </div>
+
+          {/* Version */}
+          <div>
+            <label className="block text-sm font-medium text-gray-900 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"
+            />
+          </div>
+
+          {/* OS */}
+          <div>
+            <label className="block text-sm font-medium text-gray-900 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"
+            >
+              <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>
+            <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"
+            >
+              {getAvailablePackageManagers().map((pm) => (
+                <option key={pm} value={pm}>
+                  {pm}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Package Name */}
+          <div>
+            <label className="block text-sm font-medium text-gray-900 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"
+            />
+          </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>
+          )}
+
+          {/* 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"
+            >
+              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"
+            >
+              {isLoading ? 'Speichern...' : editingPackage ? 'Aktualisieren' : 'Erstellen'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+interface DeployTabProps {
+  packages: SoftwarePackage[]
+  deployMutation: any
+}
+
+function DeployTab({ packages, deployMutation }: DeployTabProps) {
+  const [selectedPackageId, setSelectedPackageId] = useState<number | ''>('')
+  const [agentId, setAgentId] = useState('')
+  const [action, setAction] = useState<'install' | 'uninstall'>('install')
+
+  const handleDeploy = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!selectedPackageId || !agentId) return
+    deployMutation.mutate({
+      agentId,
+      packageId: selectedPackageId as number,
+      action,
+    })
+  }
+
+  return (
+    <div className="max-w-lg">
+      <div className="bg-white rounded-lg shadow 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>
+            <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"
+            >
+              <option value="">-- Paket auswählen --</option>
+              {packages.map((pkg) => (
+                <option key={pkg.id} value={pkg.id}>
+                  {pkg.name} ({pkg.version}) - {pkg.osType}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Agent ID */}
+          <div>
+            <label className="block text-sm font-medium text-gray-900 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"
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              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>
+            <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>
+            </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"
+          >
+            <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">
+            <p className="font-medium mb-1">Hinweis:</p>
+            <p>
+              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>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}