feat: implement Phase 2 (Go Agent) and Phase 3 (React Frontend MVP)

Phase 2 - Go Agent Core: - gRPC client with exponential backoff reconnect logic - Command executor (PowerShell/sh cross-platform) - Proto stubs regenerated with module= option (correct output path) - gRPC upgraded to v1.79.3 (BidiStreamingClient support) Phase 3 - React Frontend MVP: - Vite + React 18 + TypeScript setup with Tailwind CSS v4 - TanStack Query for data fetching, API client + TypeScript types - Dashboard page: stats cards (agents/status/tickets) + sortable agents table - Agent detail page: CPU/RAM charts (Recharts), disk usage, shell command executor - Tickets page: CRUD with modals, filters, sortable table - Dark mode with CSS custom properties Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-19 12:42:52 +01:00
parent 51052261f5
commit 418fc5b6d5
30 changed files with 7670 additions and 24 deletions
--- a/Agent/cmd/agent/main.go
+++ b/Agent/cmd/agent/main.go
@@ -1,9 +1,148 @@
 package main

-import "fmt"
+import (
+	"context"
+	"fmt"
+	"log"
+	"os"
+	"os/signal"
+	"runtime"
+	"syscall"
+	"time"
+
+	"nexusrmm.local/agent/internal/collector"
+	"nexusrmm.local/agent/internal/config"
+	"nexusrmm.local/agent/internal/connection"
+	"nexusrmm.local/agent/internal/executor"
+	pb "nexusrmm.local/agent/pkg/proto"
+)

 var version = "dev"

 func main() {
-	fmt.Printf("NexusRMM Agent %s\n", version)
+	log.Printf("NexusRMM Agent %s starting on %s/%s", version, runtime.GOOS, runtime.GOARCH)
+
+	cfg, err := config.Load("nexus-agent.yaml")
+	if err != nil {
+		log.Fatalf("Config load error: %v", err)
+	}
+
+	client, err := connection.ConnectWithRetry(cfg.ServerAddress, 10)
+	if err != nil {
+		log.Fatalf("Failed to connect: %v", err)
+	}
+	defer client.Close()
+
+	if cfg.AgentID == "" {
+		hostname, _ := os.Hostname()
+		metrics, _ := collector.Collect()
+		mac, ip := "", ""
+		if len(metrics.Networks) > 0 {
+			mac = metrics.Networks[0].MAC
+			ip = metrics.Networks[0].IPAddress
+		}
+
+		resp, err := client.Client.Enroll(context.Background(), &pb.EnrollRequest{
+			Hostname:     hostname,
+			OsType:       runtime.GOOS,
+			OsVersion:    fmt.Sprintf("%s/%s", runtime.GOOS, runtime.GOARCH),
+			MacAddress:   mac,
+			IpAddress:    ip,
+			AgentVersion: version,
+		})
+		if err != nil {
+			log.Fatalf("Enrollment failed: %v", err)
+		}
+		cfg.AgentID = resp.AgentId
+		cfg.HeartbeatInterval = int(resp.HeartbeatInterval)
+		if err := cfg.Save("nexus-agent.yaml"); err != nil {
+			log.Printf("Warning: could not save config: %v", err)
+		}
+		log.Printf("Enrolled with ID: %s", cfg.AgentID)
+	}
+
+	ctx, cancel := context.WithCancel(context.Background())
+	defer cancel()
+	sigCh := make(chan os.Signal, 1)
+	signal.Notify(sigCh, syscall.SIGINT, syscall.SIGTERM)
+
+	ticker := time.NewTicker(time.Duration(cfg.HeartbeatInterval) * time.Second)
+	defer ticker.Stop()
+
+	log.Printf("Agent running. Heartbeat every %ds", cfg.HeartbeatInterval)
+	doHeartbeat(ctx, client, cfg)
+
+	for {
+		select {
+		case <-ticker.C:
+			doHeartbeat(ctx, client, cfg)
+		case <-sigCh:
+			log.Println("Shutting down...")
+			return
+		case <-ctx.Done():
+			return
+		}
+	}
+}
+
+func doHeartbeat(ctx context.Context, client *connection.GrpcClient, cfg *config.Config) {
+	metrics, err := collector.Collect()
+	if err != nil {
+		log.Printf("Metric collection error: %v", err)
+		return
+	}
+
+	req := &pb.HeartbeatRequest{
+		AgentId: cfg.AgentID,
+		Metrics: &pb.SystemMetrics{
+			CpuUsagePercent:      metrics.CPUPercent,
+			MemoryUsagePercent:   metrics.MemoryPercent,
+			MemoryTotalBytes:     int64(metrics.MemoryTotal),
+			MemoryAvailableBytes: int64(metrics.MemoryAvailable),
+			UptimeSeconds:        metrics.UptimeSeconds,
+		},
+	}
+	for _, d := range metrics.Disks {
+		req.Metrics.Disks = append(req.Metrics.Disks, &pb.DiskInfo{
+			MountPoint: d.MountPoint,
+			TotalBytes: int64(d.Total),
+			FreeBytes:  int64(d.Free),
+			Filesystem: d.Filesystem,
+		})
+	}
+
+	resp, err := client.Client.Heartbeat(ctx, req)
+	if err != nil {
+		log.Printf("Heartbeat error: %v", err)
+		return
+	}
+
+	for _, cmd := range resp.PendingCommands {
+		log.Printf("Executing command %s (type: %v)", cmd.CommandId, cmd.Type)
+		go executeCommand(ctx, client, cfg.AgentID, cmd)
+	}
+}
+
+func executeCommand(ctx context.Context, client *connection.GrpcClient, agentID string, cmd *pb.AgentCommand) {
+	var result *executor.Result
+	switch cmd.Type {
+	case pb.CommandType_COMMAND_TYPE_SHELL:
+		result = executor.Execute(ctx, cmd.Payload, 300)
+	default:
+		result = &executor.Result{ExitCode: -1, Stderr: fmt.Sprintf("unknown command type: %v", cmd.Type)}
+	}
+
+	if err := func() error {
+		_, err := client.Client.ReportCommandResult(ctx, &pb.CommandResult{
+			AgentId:   agentID,
+			CommandId: cmd.CommandId,
+			ExitCode:  int32(result.ExitCode),
+			Stdout:    result.Stdout,
+			Stderr:    result.Stderr,
+			Success:   result.Success,
+		})
+		return err
+	}(); err != nil {
+		log.Printf("Failed to report result for %s: %v", cmd.CommandId, err)
+	}
 }
--- a/Agent/go.mod
+++ b/Agent/go.mod
@@ -1,26 +1,25 @@
-module github.com/nexusrmm/agent
+module nexusrmm.local/agent

 go 1.26

 require (
 	github.com/shirou/gopsutil/v3 v3.24.5
-	google.golang.org/grpc v1.60.0
-	google.golang.org/protobuf v1.32.0
+	google.golang.org/grpc v1.79.3
+	google.golang.org/protobuf v1.36.10
 	gopkg.in/yaml.v3 v3.0.1
 )

 require (
 	github.com/go-ole/go-ole v1.2.6 // indirect
-	github.com/golang/protobuf v1.5.3 // indirect
-	github.com/google/go-cmp v0.6.0 // indirect
+	github.com/golang/protobuf v1.5.4 // indirect
 	github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0 // indirect
 	github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c // indirect
 	github.com/shoenig/go-m1cpu v0.1.6 // indirect
 	github.com/tklauser/go-sysconf v0.3.12 // indirect
 	github.com/tklauser/numcpus v0.6.1 // indirect
 	github.com/yusufpapurcu/wmi v1.2.4 // indirect
-	golang.org/x/net v0.21.0 // indirect
-	golang.org/x/sys v0.20.0 // indirect
-	golang.org/x/text v0.14.0 // indirect
-	google.golang.org/genproto/googleapis/rpc v0.0.0-20240116215550-a9fa1716bcac // indirect
+	golang.org/x/net v0.48.0 // indirect
+	golang.org/x/sys v0.39.0 // indirect
+	golang.org/x/text v0.32.0 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20251202230838-ff82c1b0f217 // indirect
 )
--- a/Agent/go.sum
+++ b/Agent/go.sum
@@ -2,12 +2,16 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/go-ole/go-ole v1.2.6 h1:/Fpf6oFPoeFik9ty7siob0G6Ke8QvQEuVcuChpwXzpY=
 github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0=
-github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
-github.com/golang/protobuf v1.5.3 h1:KESQyS83zrBXM35gw0xMqGD/8xf9AZf6GR9pWqJBKqw=
-github.com/golang/protobuf v1.5.3/go.mod h1:XVQd3VNwM+JqD3oG2rrLzc1mTrFQ63LlQEbvLSi8aE=
+github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
+github.com/golang/protobuf v1.5.3 h1:KhyjKVUg7Usr/dYsdSqoFveMYd5ko72D+zANwlG1mmg=
+github.com/golang/protobuf v1.5.3/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
+github.com/golang/protobuf v1.5.4 h1:i7eJL8qZTpSEXOPTxNKhASYpMn+8e5Q6AdndVa1dWek=
+github.com/golang/protobuf v1.5.4/go.mod h1:lnTiLA8Wa4RWRcIUkrtSVa5nRhsEGBg48fD6rSs7xps=
+github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0 h1:6E+4a0GO5zZEnZ81pIr0yLvtUWk2if982qA3F3QD6H4=
 github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0/go.mod h1:zJYVVT2jmtg6P3p1VtQj7WsuWi/y4VnjVBn7F8KPB3I=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
@@ -28,23 +32,37 @@ github.com/tklauser/numcpus v0.6.1 h1:ng9scYS7az0Bk4OZLvrNXNSAO2Pxr1XXRAPyjhIx+F
 github.com/tklauser/numcpus v0.6.1/go.mod h1:1XfjsgE2zo8GVw7POkMbHENHzVg3GzmoZ9fESEdAacY=
 github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo0=
 github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
+golang.org/x/net v0.21.0 h1:AQyQV4dYCvJ7vGmJyKki9+PBdyvhkSd8EIx/qb0AYv4=
+golang.org/x/net v0.21.0/go.mod h1:bIjVDfnllIU7BJ2DNgfnXvpSvtn8VRwhlsaeUTyUS44=
+golang.org/x/net v0.48.0 h1:zyQRTTrjc33Lhh0fBgT/H3oZq9WuvRR5gPC70xpDiQU=
+golang.org/x/net v0.48.0/go.mod h1:+ndRgGjkh8FGtu1w1FGbEC31if4VrNVMuKTgcAAnQRY=
 golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201204225414-ed752295db88/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/net v0.21.0 h1:AQyQV4dYCvJ7v2A13j3pWY9+33e/9vnzlU7epo6pCKQ=
-golang.org/x/net v0.21.0/go.mod h1:bIjVDfnllIU7BJ2DNgfnXvpSvtn8VRwhlsaeUTyUS44=
 golang.org/x/sys v0.20.0 h1:Od9JTbYCk261bKm4M/mw7AklTlFYIa0bIp9BgSm1S8Y=
 golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/text v0.14.0 h1:ScX5w1eTa60QWvxHNAJo0c1V8AcQ+XO1zNY/e3FFCs=
-golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itlqbqQBLa3VwOU=
+golang.org/x/sys v0.39.0 h1:CvCKL8MeisomCi6qNZ+wbb0DN9E5AATixKsvNtMoMFk=
+golang.org/x/sys v0.39.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
+golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
+golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/text v0.32.0 h1:ZD01bjUt1FQ9WJ0ClOL5vxgxOI/sVCNgX1YtKwcY0mU=
+golang.org/x/text v0.32.0/go.mod h1:o/rUWzghvpD5TXrTIBuJU77MTaN0ljMWE47kxGJQ7jY=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20240116215550-a9fa1716bcac h1:3xiWY+VwXwWNwfYXSZR2ysTbLB0WXIM8j3t2nXEd9k4=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20240116215550-a9fa1716bcac/go.mod h1:daQN87bsDqDoe316QbbvX60ntMRR/VsD2xjcStor2M=
-google.golang.org/grpc v1.60.0 h1:6DUVg+gIvjLCktBoNt4d7+fJ/onRuLi1+vyYR5g0gY=
-google.golang.org/grpc v1.60.0/go.mod h1:OlCHIeLYqLSIlD9rQ0Drv3KfMAy5fxYvb/dgVzlj0g=
-google.golang.org/protobuf v1.32.0 h1:pPC6BG5ex/HNYcPYe3EkladybiguVstpQQelQR5bkY=
-google.golang.org/protobuf v1.32.0/go.mod h1:c6P6GDeJLau1oL+D3tIQCmnaqTuStpLJ3XZ+T5+wqE=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20240116215550-a9fa1716bcac h1:nUQEQmH/csSvFECKYRv6HWEyypysidKl2I6Qpsglq/0=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20240116215550-a9fa1716bcac/go.mod h1:daQN87bsDqDoe316QbbvX60nMoJQa4r6Ds0ZuoAe5yA=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20251202230838-ff82c1b0f217 h1:gRkg/vSppuSQoDjxyiGfN4Upv/h/DQmIR10ZU8dh4Ww=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20251202230838-ff82c1b0f217/go.mod h1:7i2o+ce6H/6BluujYR+kqX3GKH+dChPTQU19wjRPiGk=
+google.golang.org/grpc v1.60.0 h1:6FQAR0kM31P6MRdeluor2w2gPaS4SVNrD/DNTxrQ15k=
+google.golang.org/grpc v1.60.0/go.mod h1:OlCHIeLYqSSsLi6i49B5QGdzaMZK9+M7LXN2FKz4eGM=
+google.golang.org/grpc v1.79.3 h1:sybAEdRIEtvcD68Gx7dmnwjZKlyfuc61Dyo9pGXXkKE=
+google.golang.org/grpc v1.79.3/go.mod h1:KmT0Kjez+0dde/v2j9vzwoAScgEPx/Bw1CYChhHLrHQ=
+google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
+google.golang.org/protobuf v1.26.0/go.mod h1:9q0QmTI4eRPtz6boOQmLYwt+qCgq0jsYwAQnmE0givc=
+google.golang.org/protobuf v1.32.0 h1:pPC6BG5ex8PDFnkbrGU3EixyhKcQ2aDuBS36lqK/C7I=
+google.golang.org/protobuf v1.32.0/go.mod h1:c6P6GXX6sHbq/GpV6MGZEdwhWPcYBgnhAHhKbcUYpos=
+google.golang.org/protobuf v1.36.10 h1:AYd7cD/uASjIL6Q9LiTjz8JLcrh/88q5UObnmY3aOOE=
+google.golang.org/protobuf v1.36.10/go.mod h1:HTf+CrKn2C3g5S8VImy6tdcUvCska2kB7j23XfzDpco=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
--- a/Agent/internal/connection/grpc_client.go
+++ b/Agent/internal/connection/grpc_client.go
@@ -0,0 +1,83 @@
+package connection
+
+import (
+	"context"
+	"fmt"
+	"log"
+	"time"
+
+	pb "nexusrmm.local/agent/pkg/proto"
+	"google.golang.org/grpc"
+	"google.golang.org/grpc/connectivity"
+	"google.golang.org/grpc/credentials/insecure"
+	"google.golang.org/grpc/keepalive"
+)
+
+type GrpcClient struct {
+	conn    *grpc.ClientConn
+	Client  pb.AgentServiceClient
+	address string
+}
+
+func NewGrpcClient(address string) (*GrpcClient, error) {
+	opts := []grpc.DialOption{
+		grpc.WithTransportCredentials(insecure.NewCredentials()),
+		grpc.WithKeepaliveParams(keepalive.ClientParameters{
+			Time:                30 * time.Second,
+			Timeout:             10 * time.Second,
+			PermitWithoutStream: true,
+		}),
+	}
+
+	conn, err := grpc.NewClient(address, opts...)
+	if err != nil {
+		return nil, err
+	}
+
+	return &GrpcClient{
+		conn:    conn,
+		Client:  pb.NewAgentServiceClient(conn),
+		address: address,
+	}, nil
+}
+
+func (g *GrpcClient) Close() {
+	if g.conn != nil {
+		g.conn.Close()
+	}
+}
+
+func ConnectWithRetry(address string, maxRetries int) (*GrpcClient, error) {
+	for i := 0; i < maxRetries; i++ {
+		client, err := NewGrpcClient(address)
+		if err != nil {
+			log.Printf("Client creation %d/%d failed: %v", i+1, maxRetries, err)
+			time.Sleep(backoffDuration(i))
+			continue
+		}
+
+		ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+		client.conn.Connect()
+		state := client.conn.GetState()
+		client.conn.WaitForStateChange(ctx, state)
+		cancel()
+
+		newState := client.conn.GetState()
+		if newState == connectivity.Ready || newState == connectivity.Idle {
+			return client, nil
+		}
+
+		log.Printf("Connection attempt %d/%d: state=%v", i+1, maxRetries, newState)
+		client.Close()
+		time.Sleep(backoffDuration(i))
+	}
+	return nil, fmt.Errorf("failed to connect after %d attempts", maxRetries)
+}
+
+func backoffDuration(attempt int) time.Duration {
+	secs := 2 << attempt
+	if secs > 30 {
+		secs = 30
+	}
+	return time.Duration(secs) * time.Second
+}
--- a/Agent/internal/executor/executor.go
+++ b/Agent/internal/executor/executor.go
@@ -0,0 +1,49 @@
+package executor
+
+import (
+	"bytes"
+	"context"
+	"os/exec"
+	"runtime"
+	"time"
+)
+
+type Result struct {
+	ExitCode int
+	Stdout   string
+	Stderr   string
+	Success  bool
+}
+
+func Execute(ctx context.Context, command string, timeoutSec int) *Result {
+	if timeoutSec <= 0 {
+		timeoutSec = 300
+	}
+	ctx, cancel := context.WithTimeout(ctx, time.Duration(timeoutSec)*time.Second)
+	defer cancel()
+
+	var cmd *exec.Cmd
+	if runtime.GOOS == "windows" {
+		cmd = exec.CommandContext(ctx, "powershell", "-NoProfile", "-NonInteractive", "-Command", command)
+	} else {
+		cmd = exec.CommandContext(ctx, "/bin/sh", "-c", command)
+	}
+
+	var stdout, stderr bytes.Buffer
+	cmd.Stdout = &stdout
+	cmd.Stderr = &stderr
+
+	err := cmd.Run()
+	result := &Result{
+		Stdout:  stdout.String(),
+		Stderr:  stderr.String(),
+		Success: err == nil,
+	}
+	if cmd.ProcessState != nil {
+		result.ExitCode = cmd.ProcessState.ExitCode()
+	}
+	if err != nil && result.ExitCode == 0 {
+		result.ExitCode = -1
+	}
+	return result
+}
--- a/Frontend/.gitignore
+++ b/Frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/Frontend/README.md
+++ b/Frontend/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/Frontend/eslint.config.js
+++ b/Frontend/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@microsoft/signalr": "^10.0.0",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/react-query": "^5.91.2",
+    "@tanstack/react-router": "^1.167.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "recharts": "^3.8.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1"
+  }
+}
--- a/Frontend/public/favicon.svg
+++ b/Frontend/public/favicon.svg
--- a/Frontend/public/icons.svg
+++ b/Frontend/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/Frontend/src/App.css
+++ b/Frontend/src/App.css
@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}
--- a/Frontend/src/App.tsx
+++ b/Frontend/src/App.tsx
@@ -0,0 +1,123 @@
+import { useState } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { LayoutDashboard, Ticket, Menu, X } from 'lucide-react'
+import { DashboardPage } from './pages/DashboardPage'
+import { AgentDetailPage } from './pages/AgentDetailPage'
+import TicketsPage from './pages/TicketsPage'
+import { cn } from './lib/utils'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+      retry: 2,
+    },
+  },
+})
+
+type Page = 'dashboard' | 'agent-detail' | 'tickets'
+
+interface NavItem {
+  id: Page
+  label: string
+  icon: React.ReactNode
+}
+
+const navItems: NavItem[] = [
+  { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard size={18} /> },
+  { id: 'tickets', label: 'Tickets', icon: <Ticket size={18} /> },
+]
+
+function AppContent() {
+  const [page, setPage] = useState<Page>('dashboard')
+  const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null)
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+
+  function handleSelectAgent(agentId: string) {
+    setSelectedAgentId(agentId)
+    setPage('agent-detail')
+  }
+
+  function handleBack() {
+    setPage('dashboard')
+    setSelectedAgentId(null)
+  }
+
+  return (
+    <div className="min-h-screen bg-background text-foreground flex">
+      {/* Sidebar */}
+      <aside
+        className={cn(
+          'flex flex-col border-r border-border bg-card transition-all duration-200',
+          sidebarOpen ? 'w-56' : 'w-14',
+        )}
+      >
+        {/* Logo */}
+        <div className="flex items-center gap-3 px-4 py-4 border-b border-border">
+          <div className="w-7 h-7 rounded-md bg-primary flex items-center justify-center text-primary-foreground font-bold text-sm flex-shrink-0">
+            N
+          </div>
+          {sidebarOpen && (
+            <span className="font-semibold text-foreground truncate">NexusRMM</span>
+          )}
+          <button
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+            className="ml-auto text-muted-foreground hover:text-foreground"
+          >
+            {sidebarOpen ? <X size={16} /> : <Menu size={16} />}
+          </button>
+        </div>
+
+        {/* Nav */}
+        <nav className="flex-1 py-3 px-2 flex flex-col gap-1">
+          {navItems.map((item) => (
+            <button
+              key={item.id}
+              onClick={() => {
+                setPage(item.id)
+                setSelectedAgentId(null)
+              }}
+              className={cn(
+                'flex items-center gap-3 px-2 py-2 rounded-md text-sm transition-colors w-full text-left',
+                page === item.id || (page === 'agent-detail' && item.id === 'dashboard')
+                  ? 'bg-primary/15 text-primary'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-accent',
+              )}
+            >
+              <span className="flex-shrink-0">{item.icon}</span>
+              {sidebarOpen && <span>{item.label}</span>}
+            </button>
+          ))}
+        </nav>
+
+        {/* Version */}
+        {sidebarOpen && (
+          <div className="px-4 py-3 text-xs text-muted-foreground border-t border-border">
+            NexusRMM v0.1.0
+          </div>
+        )}
+      </aside>
+
+      {/* Main content */}
+      <main className="flex-1 overflow-auto">
+        {page === 'dashboard' && (
+          <DashboardPage onSelectAgent={handleSelectAgent} />
+        )}
+        {page === 'agent-detail' && selectedAgentId && (
+          <AgentDetailPage agentId={selectedAgentId} onBack={handleBack} />
+        )}
+        {page === 'tickets' && <TicketsPage />}
+      </main>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AppContent />
+    </QueryClientProvider>
+  )
+}
+
+export default App
--- a/Frontend/src/api/client.ts
+++ b/Frontend/src/api/client.ts
@@ -0,0 +1,50 @@
+import type {
+  Agent,
+  AgentMetric,
+  TaskItem,
+  Ticket,
+  CreateTaskRequest,
+  CreateTicketRequest,
+  UpdateTicketRequest,
+} from './types'
+
+const BASE_URL = '/api/v1'
+
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE_URL}${path}`, {
+    headers: { 'Content-Type': 'application/json', ...options?.headers },
+    ...options,
+  })
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`HTTP ${res.status}: ${text}`)
+  }
+  if (res.status === 204) return undefined as T
+  return res.json() as Promise<T>
+}
+
+// Agents
+export const agentsApi = {
+  list: () => request<Agent[]>('/agents'),
+  get: (id: string) => request<Agent>(`/agents/${id}`),
+  getMetrics: (id: string, limit = 100) =>
+    request<AgentMetric[]>(`/agents/${id}/metrics?limit=${limit}`),
+}
+
+// Tasks
+export const tasksApi = {
+  create: (data: CreateTaskRequest) =>
+    request<TaskItem>('/tasks', { method: 'POST', body: JSON.stringify(data) }),
+  listForAgent: (agentId: string) =>
+    request<TaskItem[]>(`/tasks?agentId=${agentId}`),
+}
+
+// Tickets
+export const ticketsApi = {
+  list: () => request<Ticket[]>('/tickets'),
+  get: (id: number) => request<Ticket>(`/tickets/${id}`),
+  create: (data: CreateTicketRequest) =>
+    request<Ticket>('/tickets', { method: 'POST', body: JSON.stringify(data) }),
+  update: (id: number, data: UpdateTicketRequest) =>
+    request<Ticket>(`/tickets/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
+}
--- a/Frontend/src/api/types.ts
+++ b/Frontend/src/api/types.ts
@@ -0,0 +1,95 @@
+export type AgentStatus = 'Online' | 'Offline' | 'Degraded' | 'Pending'
+export type OsType = 'Windows' | 'Linux'
+export type TaskStatus = 'Pending' | 'InProgress' | 'Completed' | 'Failed' | 'Cancelled'
+export type TaskType = 'Shell' | 'InstallSoftware' | 'UninstallSoftware' | 'UpdateAgent' | 'NetworkScan'
+export type TicketStatus = 'Open' | 'InProgress' | 'Resolved' | 'Closed'
+export type TicketPriority = 'Low' | 'Medium' | 'High' | 'Critical'
+export type AlertSeverity = 'Info' | 'Warning' | 'Critical'
+
+export interface Agent {
+  id: string
+  hostname: string
+  osType: OsType
+  osVersion: string
+  ipAddress: string
+  macAddress: string
+  agentVersion: string
+  status: AgentStatus
+  lastSeen: string
+  tags: string[]
+  enrolledAt: string
+}
+
+export interface DiskInfo {
+  mountPoint: string
+  totalBytes: number
+  freeBytes: number
+  filesystem: string
+}
+
+export interface NetworkInterfaceInfo {
+  name: string
+  ipAddress: string
+  macAddress: string
+  bytesSent: number
+  bytesRecv: number
+}
+
+export interface SystemMetrics {
+  cpuUsagePercent: number
+  memoryUsagePercent: number
+  memoryTotalBytes: number
+  memoryAvailableBytes: number
+  disks: DiskInfo[]
+  networkInterfaces: NetworkInterfaceInfo[]
+  uptimeSeconds: number
+}
+
+export interface AgentMetric {
+  id: number
+  agentId: string
+  timestamp: string
+  metrics: SystemMetrics
+}
+
+export interface TaskItem {
+  id: string
+  agentId: string
+  type: TaskType
+  status: TaskStatus
+  payload: Record<string, unknown> | null
+  result: Record<string, unknown> | null
+  createdAt: string
+  completedAt: string | null
+}
+
+export interface Ticket {
+  id: number
+  title: string
+  description: string
+  status: TicketStatus
+  priority: TicketPriority
+  agentId: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export interface CreateTaskRequest {
+  agentId: string
+  type: TaskType
+  payload?: Record<string, unknown>
+}
+
+export interface CreateTicketRequest {
+  title: string
+  description: string
+  priority: TicketPriority
+  agentId?: string
+}
+
+export interface UpdateTicketRequest {
+  title?: string
+  description?: string
+  status?: TicketStatus
+  priority?: TicketPriority
+}
--- a/Frontend/src/assets/hero.png
+++ b/Frontend/src/assets/hero.png
--- a/Frontend/src/assets/react.svg
+++ b/Frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/Frontend/src/assets/vite.svg
+++ b/Frontend/src/assets/vite.svg
--- a/Frontend/src/index.css
+++ b/Frontend/src/index.css
@@ -0,0 +1,36 @@
+@import "tailwindcss";
+
+@layer base {
+  :root {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
--- a/Frontend/src/lib/utils.ts
+++ b/Frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/Frontend/src/main.tsx
+++ b/Frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/Frontend/src/pages/AgentDetailPage.tsx
+++ b/Frontend/src/pages/AgentDetailPage.tsx
@@ -0,0 +1,502 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  ChevronLeft,
+  Activity,
+  Database,
+  HardDrive,
+  Clock,
+  Terminal,
+  AlertCircle,
+  CheckCircle,
+} from 'lucide-react'
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts'
+import { agentsApi, tasksApi } from '../api/client'
+import type { TaskItem, TaskType } from '../api/types'
+import { cn } from '../lib/utils'
+
+interface AgentDetailPageProps {
+  agentId: string
+  onBack?: () => void
+}
+
+export function AgentDetailPage({ agentId, onBack }: AgentDetailPageProps) {
+  const [command, setCommand] = useState('')
+  const [isExecuting, setIsExecuting] = useState(false)
+  const [lastResult, setLastResult] = useState<TaskItem | null>(null)
+  const queryClient = useQueryClient()
+
+  // Fetch Agent Details
+  const { data: agent, isLoading: agentLoading } = useQuery({
+    queryKey: ['agent', agentId],
+    queryFn: () => agentsApi.get(agentId),
+  })
+
+  // Fetch Agent Metrics
+  const { data: metrics = [] } = useQuery({
+    queryKey: ['agentMetrics', agentId],
+    queryFn: () => agentsApi.getMetrics(agentId, 50),
+  })
+
+  // Fetch Agent Tasks
+  const { data: tasks = [] } = useQuery({
+    queryKey: ['agentTasks', agentId],
+    queryFn: () => tasksApi.listForAgent(agentId),
+    refetchInterval: 5000,
+  })
+
+  // Create Task Mutation
+  const createTaskMutation = useMutation({
+    mutationFn: (data: { agentId: string; type: TaskType; payload: Record<string, unknown> }) =>
+      tasksApi.create(data),
+    onSuccess: (task) => {
+      setLastResult(task)
+      setCommand('')
+      setIsExecuting(false)
+      // Invalidate tasks query to refetch
+      queryClient.invalidateQueries({ queryKey: ['agentTasks', agentId] })
+    },
+    onError: () => {
+      setIsExecuting(false)
+    },
+  })
+
+  if (agentLoading) {
+    return <div className="p-6 text-center">Agent-Details werden geladen...</div>
+  }
+
+  if (!agent) {
+    return <div className="p-6 text-center text-red-500">Agent nicht gefunden</div>
+  }
+
+  const handleExecuteCommand = async () => {
+    if (!command.trim()) return
+
+    setIsExecuting(true)
+    createTaskMutation.mutate({
+      agentId,
+      type: 'Shell' as TaskType,
+      payload: { command: command.trim() },
+    })
+  }
+
+  // Calculate metrics from latest data
+  const latestMetric = metrics.length > 0 ? metrics[metrics.length - 1] : null
+  const cpuUsage = latestMetric?.metrics.cpuUsagePercent ?? 0
+  const memoryUsage = latestMetric
+    ? ((latestMetric.metrics.memoryTotalBytes - latestMetric.metrics.memoryAvailableBytes) /
+        latestMetric.metrics.memoryTotalBytes) *
+      100
+    : 0
+  const memoryTotalGB = latestMetric
+    ? (latestMetric.metrics.memoryTotalBytes / (1024 * 1024 * 1024)).toFixed(1)
+    : '0'
+  const uptimeSeconds = latestMetric?.metrics.uptimeSeconds ?? 0
+  const uptimeFormatted = formatUptime(uptimeSeconds)
+
+  const isOnline = agent.status === 'Online'
+
+  // Format chart data
+  const chartData = metrics
+    .slice(0, 50)
+    .map((metric) => ({
+      time: new Date(metric.timestamp).toLocaleTimeString('de-DE', {
+        hour: '2-digit',
+        minute: '2-digit',
+      }),
+      cpu: metric.metrics.cpuUsagePercent,
+      memory:
+        ((metric.metrics.memoryTotalBytes - metric.metrics.memoryAvailableBytes) /
+          metric.metrics.memoryTotalBytes) *
+        100,
+    }))
+
+  // Get disks
+  const disks = latestMetric?.metrics.disks ?? []
+
+  // Get last 10 tasks
+  const lastTasks = tasks.slice(0, 10)
+
+  return (
+    <div className="min-h-screen bg-background p-6">
+      {/* Header */}
+      <div className="mb-8">
+        <button
+          onClick={onBack}
+          className="mb-4 inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ChevronLeft size={18} />
+          Zurück
+        </button>
+
+        <div className="flex items-start justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-foreground">{agent.hostname}</h1>
+            <div className="mt-3 flex flex-wrap gap-4 text-sm text-muted-foreground">
+              <span>IP: {agent.ipAddress}</span>
+              <span>OS: {agent.osType} {agent.osVersion}</span>
+              <span>Agent: v{agent.agentVersion}</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span
+              className={cn(
+                'inline-block h-3 w-3 rounded-full',
+                isOnline ? 'bg-green-500' : 'bg-red-500'
+              )}
+            />
+            <span className={cn('text-sm font-medium', isOnline ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400')}>
+              {agent.status}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Info Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        <InfoCard
+          title="CPU-Auslastung"
+          value={`${cpuUsage.toFixed(1)}%`}
+          icon={Activity}
+        />
+        <InfoCard
+          title="RAM-Auslastung"
+          value={`${memoryUsage.toFixed(1)}%`}
+          icon={Database}
+        />
+        <InfoCard
+          title="RAM gesamt"
+          value={`${memoryTotalGB} GB`}
+          icon={HardDrive}
+        />
+        <InfoCard
+          title="Uptime"
+          value={uptimeFormatted}
+          icon={Clock}
+        />
+      </div>
+
+      {/* Charts */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+        {/* CPU Chart */}
+        <div className="bg-card border border-border rounded-lg p-4">
+          <h3 className="font-semibold text-foreground mb-4">CPU-Auslastung</h3>
+          {chartData.length > 0 ? (
+            <ResponsiveContainer width="100%" height={250}>
+              <LineChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
+                <XAxis
+                  dataKey="time"
+                  stroke="var(--color-muted-foreground)"
+                  style={{ fontSize: '12px' }}
+                />
+                <YAxis
+                  stroke="var(--color-muted-foreground)"
+                  domain={[0, 100]}
+                  style={{ fontSize: '12px' }}
+                />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: 'var(--color-background)',
+                    border: '1px solid var(--color-border)',
+                    borderRadius: '4px',
+                  }}
+                  formatter={(value: unknown) => typeof value === 'number' ? `${value.toFixed(1)}%` : ''}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="cpu"
+                  stroke="#3b82f6"
+                  dot={false}
+                  strokeWidth={2}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          ) : (
+            <div className="flex items-center justify-center h-[250px] text-muted-foreground">
+              Keine Daten verfügbar
+            </div>
+          )}
+        </div>
+
+        {/* RAM Chart */}
+        <div className="bg-card border border-border rounded-lg p-4">
+          <h3 className="font-semibold text-foreground mb-4">Arbeitsspeicher-Auslastung</h3>
+          {chartData.length > 0 ? (
+            <ResponsiveContainer width="100%" height={250}>
+              <LineChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
+                <XAxis
+                  dataKey="time"
+                  stroke="var(--color-muted-foreground)"
+                  style={{ fontSize: '12px' }}
+                />
+                <YAxis
+                  stroke="var(--color-muted-foreground)"
+                  domain={[0, 100]}
+                  style={{ fontSize: '12px' }}
+                />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: 'var(--color-background)',
+                    border: '1px solid var(--color-border)',
+                    borderRadius: '4px',
+                  }}
+                  formatter={(value: unknown) => typeof value === 'number' ? `${value.toFixed(1)}%` : ''}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="memory"
+                  stroke="#22c55e"
+                  dot={false}
+                  strokeWidth={2}
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          ) : (
+            <div className="flex items-center justify-center h-[250px] text-muted-foreground">
+              Keine Daten verfügbar
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Disk Display */}
+      {disks.length > 0 && (
+        <div className="mb-8">
+          <h3 className="text-lg font-semibold text-foreground mb-4">Festplattenspeicher</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {disks.map((disk, idx) => {
+              const usedBytes = disk.totalBytes - disk.freeBytes
+              const usagePercent = (usedBytes / disk.totalBytes) * 100
+              const usedGB = (usedBytes / (1024 * 1024 * 1024)).toFixed(1)
+              const totalGB = (disk.totalBytes / (1024 * 1024 * 1024)).toFixed(1)
+
+              let barColor = 'bg-green-500'
+              if (usagePercent >= 90) {
+                barColor = 'bg-red-500'
+              } else if (usagePercent >= 70) {
+                barColor = 'bg-yellow-500'
+              }
+
+              return (
+                <div
+                  key={idx}
+                  className="bg-card border border-border rounded-lg p-4"
+                >
+                  <div className="mb-2 text-sm font-medium text-foreground">
+                    {disk.mountPoint}
+                  </div>
+                  <div className="mb-2 h-2 w-full bg-muted rounded-full overflow-hidden">
+                    <div
+                      className={cn('h-full transition-all', barColor)}
+                      style={{ width: `${usagePercent}%` }}
+                    />
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {usedGB} GB / {totalGB} GB ({usagePercent.toFixed(0)}%)
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Shell Command Executor */}
+      <div className="mb-8 bg-card border border-border rounded-lg p-6">
+        <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+          <Terminal size={20} />
+          Befehl ausführen
+        </h3>
+
+        <div className="mb-4">
+          <textarea
+            value={command}
+            onChange={(e) => setCommand(e.target.value)}
+            placeholder="Befehl eingeben..."
+            className="w-full h-24 px-3 py-2 bg-background border border-border rounded-md text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+            disabled={isExecuting}
+          />
+        </div>
+
+        <button
+          onClick={handleExecuteCommand}
+          disabled={isExecuting || !command.trim()}
+          className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          <Terminal size={16} />
+          {isExecuting ? 'Wird ausgeführt...' : 'Ausführen'}
+        </button>
+
+        {/* Result Display */}
+        {lastResult && (
+          <div
+            className={cn(
+              'mt-4 p-4 rounded-md border-2',
+              lastResult.result?.success
+                ? 'border-green-500 bg-green-500/5'
+                : 'border-red-500 bg-red-500/5'
+            )}
+          >
+            {lastResult.result ? (
+              <>
+                <div className="flex items-center gap-2 mb-3">
+                  {lastResult.result.success ? (
+                    <>
+                      <CheckCircle size={18} className="text-green-600 dark:text-green-400" />
+                      <span className="font-semibold text-green-600 dark:text-green-400">
+                        Erfolgreich ausgeführt
+                      </span>
+                    </>
+                  ) : (
+                    <>
+                      <AlertCircle size={18} className="text-red-600 dark:text-red-400" />
+                      <span className="font-semibold text-red-600 dark:text-red-400">
+                        Fehler bei Ausführung
+                      </span>
+                    </>
+                  )}
+                </div>
+
+                {lastResult.result.stdout && (
+                  <div className="mb-3">
+                    <div className="text-xs font-semibold text-muted-foreground mb-1">
+                      Output:
+                    </div>
+                    <pre className="bg-background p-3 rounded text-xs overflow-auto max-h-40 text-muted-foreground">
+                      {String(lastResult.result.stdout ?? '')}
+                    </pre>
+                  </div>
+                )}
+
+                {lastResult.result.stderr && (
+                  <div className="mb-3">
+                    <div className="text-xs font-semibold text-red-600 dark:text-red-400 mb-1">
+                      Error:
+                    </div>
+                    <pre className="bg-background p-3 rounded text-xs overflow-auto max-h-40 text-red-600 dark:text-red-400">
+                      {String(lastResult.result.stderr ?? '')}
+                    </pre>
+                  </div>
+                )}
+
+                <div className="text-xs text-muted-foreground">
+                  Exit Code: {String(lastResult.result.exitCode ?? '-')}
+                </div>
+              </>
+            ) : (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Terminal size={16} />
+                <span>
+                  Befehl gesendet. Er wird beim nächsten Heartbeat ausgeführt.
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Recent Tasks */}
+      <div>
+        <h3 className="text-lg font-semibold text-foreground mb-4">Letzte Ausführungen</h3>
+        {lastTasks.length > 0 ? (
+          <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-4 py-3 text-left font-semibold text-foreground">
+                      Erstellt am
+                    </th>
+                    <th className="px-4 py-3 text-left font-semibold text-foreground">Typ</th>
+                    <th className="px-4 py-3 text-left font-semibold text-foreground">Status</th>
+                    <th className="px-4 py-3 text-left font-semibold text-foreground">
+                      Exit Code
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {lastTasks.map((task) => (
+                    <tr key={task.id} className="border-b border-border hover:bg-muted/50">
+                      <td className="px-4 py-3 text-muted-foreground">
+                        {new Date(task.createdAt).toLocaleString('de-DE')}
+                      </td>
+                      <td className="px-4 py-3 text-foreground">{task.type}</td>
+                      <td className="px-4 py-3">
+                        <span
+                          className={cn(
+                            'inline-flex items-center gap-1 text-xs font-semibold px-2 py-1 rounded',
+                            task.status === 'Completed'
+                              ? 'bg-green-500/20 text-green-600 dark:text-green-400'
+                              : task.status === 'Failed'
+                                ? 'bg-red-500/20 text-red-600 dark:text-red-400'
+                                : 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400'
+                          )}
+                        >
+                          {task.status}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 text-muted-foreground">
+                        {task.result ? String(task.result.exitCode ?? '-') : '-'}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        ) : (
+          <div className="bg-card border border-border rounded-lg p-6 text-center text-muted-foreground">
+            Keine Aufgaben verfügbar
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Helper Components
+interface InfoCardProps {
+  title: string
+  value: string
+  icon: React.ComponentType<{ size?: number; className?: string }>
+}
+
+function InfoCard({ title, value, icon: Icon }: InfoCardProps) {
+  return (
+    <div className="bg-card border border-border rounded-lg p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
+            {title}
+          </div>
+          <div className="mt-2 text-2xl font-bold text-foreground">{value}</div>
+        </div>
+        <Icon size={24} className="text-muted-foreground" />
+      </div>
+    </div>
+  )
+}
+
+// Utility Functions
+function formatUptime(seconds: number): string {
+  const days = Math.floor(seconds / (24 * 3600))
+  const hours = Math.floor((seconds % (24 * 3600)) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+
+  const parts = []
+  if (days > 0) parts.push(`${days}d`)
+  if (hours > 0) parts.push(`${hours}h`)
+  if (minutes > 0) parts.push(`${minutes}m`)
+
+  return parts.length > 0 ? parts.join(' ') : '0m'
+}
--- a/Frontend/src/pages/DashboardPage.tsx
+++ b/Frontend/src/pages/DashboardPage.tsx
@@ -0,0 +1,355 @@
+import { useState, useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import {
+  Monitor,
+  Server,
+  CheckCircle,
+  XCircle,
+  AlertCircle,
+  Search,
+  ChevronUp,
+  ChevronDown,
+} from 'lucide-react'
+import { agentsApi, ticketsApi } from '../api/client'
+import type { Agent } from '../api/types'
+import { cn } from '../lib/utils'
+
+interface DashboardPageProps {
+  onSelectAgent?: (agentId: string) => void
+}
+
+// Helper function for relative time formatting
+function formatRelativeTime(dateString: string): string {
+  const now = new Date()
+  const date = new Date(dateString)
+  const diffMs = now.getTime() - date.getTime()
+
+  // Calculate different time units
+  const diffSeconds = Math.floor(diffMs / 1000)
+  const diffMinutes = Math.floor(diffSeconds / 60)
+  const diffHours = Math.floor(diffMinutes / 60)
+  const diffDays = Math.floor(diffHours / 24)
+
+  if (diffSeconds < 60) {
+    return 'gerade eben'
+  }
+  if (diffMinutes < 60) {
+    return `vor ${diffMinutes} Min.`
+  }
+  if (diffHours < 24) {
+    return `vor ${diffHours} Std.`
+  }
+  return `vor ${diffDays} Tagen`
+}
+
+// Stat Card Component
+function StatCard({
+  label,
+  value,
+  icon: Icon,
+  iconColor,
+}: {
+  label: string
+  value: number | string
+  icon: React.ReactNode
+  iconColor: string
+}) {
+  return (
+    <div className="bg-card border border-border rounded-lg p-5 flex items-start gap-4">
+      <div className={cn('mt-1', iconColor)}>{Icon}</div>
+      <div className="flex-1">
+        <div className="text-3xl font-bold text-foreground">{value}</div>
+        <div className="text-sm text-muted-foreground mt-1">{label}</div>
+      </div>
+    </div>
+  )
+}
+
+// Status Badge Component
+function StatusBadge({ status }: { status: string }) {
+  const statusConfig = {
+    Online: { bg: 'bg-green-500/20', text: 'text-green-500', label: 'Online' },
+    Offline: { bg: 'bg-red-500/20', text: 'text-red-500', label: 'Offline' },
+    Degraded: { bg: 'bg-yellow-500/20', text: 'text-yellow-500', label: 'Beeinträchtigt' },
+    Pending: { bg: 'bg-gray-500/20', text: 'text-gray-500', label: 'Ausstehend' },
+  }
+
+  const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.Pending
+
+  return (
+    <div className={cn('px-3 py-1 rounded-full text-xs font-medium', config.bg, config.text)}>
+      {config.label}
+    </div>
+  )
+}
+
+// Loading Skeleton Component
+function TableSkeletonRow() {
+  return (
+    <tr className="border-b border-border hover:bg-card/50 transition-colors">
+      {Array(6)
+        .fill(null)
+        .map((_, i) => (
+          <td key={i} className="px-4 py-3">
+            <div className="h-4 bg-muted-foreground/10 rounded animate-pulse"></div>
+          </td>
+        ))}
+    </tr>
+  )
+}
+
+export function DashboardPage({ onSelectAgent }: DashboardPageProps) {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [sortColumn, setSortColumn] = useState<keyof Agent>('hostname')
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
+
+  // Fetch agents data
+  const {
+    data: agents = [],
+    isLoading: agentsLoading,
+    error: agentsError,
+  } = useQuery({
+    queryKey: ['agents'],
+    queryFn: () => agentsApi.list(),
+    staleTime: 30000,
+  })
+
+  // Fetch tickets data
+  const {
+    data: tickets = [],
+  } = useQuery({
+    queryKey: ['tickets'],
+    queryFn: () => ticketsApi.list(),
+    staleTime: 30000,
+  })
+
+  // Calculate statistics
+  const stats = useMemo(() => {
+    const totalAgents = agents.length
+    const onlineAgents = agents.filter((a) => a.status === 'Online').length
+    const offlineAgents = agents.filter((a) => a.status === 'Offline').length
+    const openTickets = tickets.filter(
+      (t) => t.status === 'Open' || t.status === 'InProgress'
+    ).length
+
+    return { totalAgents, onlineAgents, offlineAgents, openTickets }
+  }, [agents, tickets])
+
+  // Filter and sort agents
+  const filteredAndSortedAgents = useMemo(() => {
+    let filtered = agents.filter((agent) => {
+      const searchLower = searchTerm.toLowerCase()
+      return (
+        agent.hostname.toLowerCase().includes(searchLower) ||
+        agent.ipAddress.toLowerCase().includes(searchLower) ||
+        agent.osVersion.toLowerCase().includes(searchLower)
+      )
+    })
+
+    filtered.sort((a, b) => {
+      let aVal = a[sortColumn]
+      let bVal = b[sortColumn]
+
+      if (typeof aVal === 'string') {
+        aVal = aVal.toLowerCase()
+        bVal = (bVal as string).toLowerCase()
+      }
+
+      if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1
+      if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1
+      return 0
+    })
+
+    return filtered
+  }, [agents, searchTerm, sortColumn, sortDirection])
+
+  // Handle column header click for sorting
+  const handleSort = (column: keyof Agent) => {
+    if (sortColumn === column) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortColumn(column)
+      setSortDirection('asc')
+    }
+  }
+
+  // Render sort indicator
+  const SortIndicator = ({ column }: { column: keyof Agent }) => {
+    if (sortColumn !== column) return null
+    return sortDirection === 'asc' ? (
+      <ChevronUp className="w-4 h-4 inline ml-1" />
+    ) : (
+      <ChevronDown className="w-4 h-4 inline ml-1" />
+    )
+  }
+
+  // Get OS icon
+  const getOsIcon = (osType: string) => {
+    if (osType === 'Windows') {
+      return <Monitor className="w-4 h-4 text-blue-500" />
+    }
+    return <Server className="w-4 h-4 text-orange-500" />
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
+        <p className="text-muted-foreground mt-1">
+          Überwachen Sie Ihre Geräte und Tickets auf einen Blick
+        </p>
+      </div>
+
+      {/* Statistics Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          label="Gesamt Agents"
+          value={stats.totalAgents}
+          icon={<Monitor className="w-6 h-6 text-primary" />}
+          iconColor="text-primary"
+        />
+        <StatCard
+          label="Online"
+          value={stats.onlineAgents}
+          icon={<CheckCircle className="w-6 h-6 text-green-500" />}
+          iconColor="text-green-500"
+        />
+        <StatCard
+          label="Offline"
+          value={stats.offlineAgents}
+          icon={<XCircle className="w-6 h-6 text-red-500" />}
+          iconColor="text-red-500"
+        />
+        <StatCard
+          label="Offene Tickets"
+          value={stats.openTickets}
+          icon={<AlertCircle className="w-6 h-6 text-yellow-500" />}
+          iconColor="text-yellow-500"
+        />
+      </div>
+
+      {/* Agents Table Section */}
+      <div className="bg-card border border-border rounded-lg p-6">
+        {/* Header with Search */}
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-xl font-bold text-foreground">Alle Geräte</h2>
+          <div className="relative w-64">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <input
+              type="text"
+              placeholder="Nach Hostname, IP oder OS suchen..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 bg-background border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+            />
+          </div>
+        </div>
+
+        {/* Error State */}
+        {agentsError && (
+          <div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4 text-red-500 mb-4">
+            <p className="font-medium">Fehler beim Laden der Geräte</p>
+            <p className="text-sm mt-1">
+              {agentsError instanceof Error ? agentsError.message : 'Ein unbekannter Fehler ist aufgetreten'}
+            </p>
+          </div>
+        )}
+
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border bg-muted/30">
+                <th
+                  className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+                  onClick={() => handleSort('hostname')}
+                >
+                  Hostname <SortIndicator column="hostname" />
+                </th>
+                <th
+                  className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+                  onClick={() => handleSort('osVersion')}
+                >
+                  OS Version <SortIndicator column="osVersion" />
+                </th>
+                <th
+                  className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+                  onClick={() => handleSort('ipAddress')}
+                >
+                  IP-Adresse <SortIndicator column="ipAddress" />
+                </th>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground">
+                  Status
+                </th>
+                <th
+                  className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+                  onClick={() => handleSort('lastSeen')}
+                >
+                  Zuletzt gesehen <SortIndicator column="lastSeen" />
+                </th>
+                <th
+                  className="px-4 py-3 text-left text-sm font-semibold text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
+                  onClick={() => handleSort('agentVersion')}
+                >
+                  Version <SortIndicator column="agentVersion" />
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {agentsLoading ? (
+                Array(5)
+                  .fill(null)
+                  .map((_, i) => <TableSkeletonRow key={i} />)
+              ) : filteredAndSortedAgents.length === 0 ? (
+                <tr className="border-b border-border">
+                  <td colSpan={6} className="px-4 py-8 text-center text-muted-foreground">
+                    {searchTerm
+                      ? 'Keine Geräte gefunden'
+                      : 'Keine Geräte vorhanden'}
+                  </td>
+                </tr>
+              ) : (
+                filteredAndSortedAgents.map((agent) => (
+                  <tr
+                    key={agent.id}
+                    className={cn(
+                      'border-b border-border hover:bg-card/50 transition-colors',
+                      onSelectAgent && 'cursor-pointer'
+                    )}
+                    onClick={() => onSelectAgent?.(agent.id)}
+                  >
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-2">
+                        {getOsIcon(agent.osType)}
+                        <span className="text-foreground font-medium">{agent.hostname}</span>
+                      </div>
+                    </td>
+                    <td className="px-4 py-3 text-foreground">{agent.osVersion}</td>
+                    <td className="px-4 py-3 text-foreground font-mono text-sm">
+                      {agent.ipAddress}
+                    </td>
+                    <td className="px-4 py-3">
+                      <StatusBadge status={agent.status} />
+                    </td>
+                    <td className="px-4 py-3 text-foreground">
+                      {formatRelativeTime(agent.lastSeen)}
+                    </td>
+                    <td className="px-4 py-3 text-foreground text-sm">{agent.agentVersion}</td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Results Count */}
+        {!agentsLoading && filteredAndSortedAgents.length > 0 && (
+          <div className="mt-4 text-sm text-muted-foreground">
+            {filteredAndSortedAgents.length} von {agents.length} Geräten angezeigt
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/Frontend/src/pages/TicketsPage.tsx
+++ b/Frontend/src/pages/TicketsPage.tsx
@@ -0,0 +1,625 @@
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Plus, Edit, X, ChevronUp, ChevronDown } from 'lucide-react'
+import { ticketsApi } from '../api/client'
+import type { Ticket, TicketStatus, TicketPriority } from '../api/types'
+import { cn } from '../lib/utils'
+
+type SortField = 'id' | 'title' | 'status' | 'priority' | 'createdAt'
+type SortOrder = 'asc' | 'desc'
+
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  })
+}
+
+function getStatusColor(status: TicketStatus): string {
+  const colors = {
+    Open: 'bg-blue-500/20 text-blue-400 border border-blue-500/30',
+    InProgress: 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30',
+    Resolved: 'bg-green-500/20 text-green-400 border border-green-500/30',
+    Closed: 'bg-gray-500/20 text-gray-400 border border-gray-500/30',
+  }
+  return colors[status]
+}
+
+function getPriorityColor(priority: TicketPriority): string {
+  const colors = {
+    Critical: 'bg-red-500/20 text-red-400 border border-red-500/30',
+    High: 'bg-orange-500/20 text-orange-400 border border-orange-500/30',
+    Medium: 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30',
+    Low: 'bg-gray-500/20 text-gray-400 border border-gray-500/30',
+  }
+  return colors[priority]
+}
+
+function getStatusLabel(status: TicketStatus): string {
+  const labels = {
+    Open: 'Offen',
+    InProgress: 'In Bearbeitung',
+    Resolved: 'Gelöst',
+    Closed: 'Geschlossen',
+  }
+  return labels[status]
+}
+
+function getPriorityLabel(priority: TicketPriority): string {
+  const labels = {
+    Critical: 'Kritisch',
+    High: 'Hoch',
+    Medium: 'Mittel',
+    Low: 'Niedrig',
+  }
+  return labels[priority]
+}
+
+interface CreateTicketFormState {
+  title: string
+  description: string
+  priority: TicketPriority
+  agentId?: string
+}
+
+interface EditTicketFormState {
+  title: string
+  description: string
+  status: TicketStatus
+  priority: TicketPriority
+}
+
+export default function TicketsPage() {
+  const queryClient = useQueryClient()
+
+  // State für Filter und Sortierung
+  const [statusFilter, setStatusFilter] = useState<TicketStatus | 'All'>('All')
+  const [priorityFilter, setPriorityFilter] = useState<TicketPriority | 'All'>('All')
+  const [searchTerm, setSearchTerm] = useState('')
+  const [sortField, setSortField] = useState<SortField>('createdAt')
+  const [sortOrder, setSortOrder] = useState<SortOrder>('desc')
+
+  // State für Modals
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [showDetailModal, setShowDetailModal] = useState(false)
+  const [showEditModal, setShowEditModal] = useState(false)
+  const [selectedTicketId, setSelectedTicketId] = useState<number | null>(null)
+
+  // State für Create-Formular
+  const [createForm, setCreateForm] = useState<CreateTicketFormState>({
+    title: '',
+    description: '',
+    priority: 'Medium',
+  })
+
+  // State für Edit-Formular
+  const [editForm, setEditForm] = useState<EditTicketFormState>({
+    title: '',
+    description: '',
+    status: 'Open',
+    priority: 'Medium',
+  })
+
+  // Queries
+  const { data: tickets = [], isLoading, error } = useQuery({
+    queryKey: ['tickets'],
+    queryFn: () => ticketsApi.list(),
+  })
+
+  const selectedTicket = tickets.find((t) => t.id === selectedTicketId)
+
+  // Mutations
+  const createMutation = useMutation({
+    mutationFn: (data: CreateTicketFormState) => ticketsApi.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['tickets'] })
+      setShowCreateModal(false)
+      setCreateForm({
+        title: '',
+        description: '',
+        priority: 'Medium',
+      })
+    },
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: (data: EditTicketFormState) => {
+      if (!selectedTicketId) throw new Error('No ticket selected')
+      return ticketsApi.update(selectedTicketId, data)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['tickets'] })
+      setShowEditModal(false)
+      setShowDetailModal(false)
+      setSelectedTicketId(null)
+    },
+  })
+
+  // Filterte und sortierte Tickets
+  let filteredTickets = tickets.filter((ticket) => {
+    const statusMatch = statusFilter === 'All' || ticket.status === statusFilter
+    const priorityMatch = priorityFilter === 'All' || ticket.priority === priorityFilter
+    const searchMatch =
+      searchTerm === '' || ticket.title.toLowerCase().includes(searchTerm.toLowerCase())
+    return statusMatch && priorityMatch && searchMatch
+  })
+
+  filteredTickets = filteredTickets.sort((a, b) => {
+    let aVal: any = a[sortField]
+    let bVal: any = b[sortField]
+
+    if (sortField === 'createdAt' || sortField === 'id') {
+      aVal = new Date(aVal).getTime()
+      bVal = new Date(bVal).getTime()
+    } else if (typeof aVal === 'string') {
+      aVal = aVal.toLowerCase()
+      bVal = bVal.toLowerCase()
+    }
+
+    if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1
+    if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1
+    return 0
+  })
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortField(field)
+      setSortOrder('asc')
+    }
+  }
+
+  const handleCreateSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!createForm.title.trim()) return
+    createMutation.mutate(createForm)
+  }
+
+  const handleEditSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!editForm.title.trim()) return
+    updateMutation.mutate(editForm)
+  }
+
+  const openDetail = (ticketId: number) => {
+    setSelectedTicketId(ticketId)
+    setShowDetailModal(true)
+  }
+
+  const openEdit = (ticket: Ticket) => {
+    setSelectedTicketId(ticket.id)
+    setEditForm({
+      title: ticket.title,
+      description: ticket.description,
+      status: ticket.status,
+      priority: ticket.priority,
+    })
+    setShowDetailModal(false)
+    setShowEditModal(true)
+  }
+
+  const SortButton = ({ field, label }: { field: SortField; label: string }) => (
+    <button
+      onClick={() => handleSort(field)}
+      className="flex items-center gap-1 hover:text-primary transition-colors"
+    >
+      {label}
+      {sortField === field &&
+        (sortOrder === 'asc' ? (
+          <ChevronUp size={16} />
+        ) : (
+          <ChevronDown size={16} />
+        ))}
+    </button>
+  )
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">Tickets</h1>
+        <button
+          onClick={() => setShowCreateModal(true)}
+          className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:opacity-90 transition-opacity"
+        >
+          <Plus size={20} />
+          Neues Ticket
+        </button>
+      </div>
+
+      {/* Filter-Leiste */}
+      <div className="space-y-4 bg-card border border-border rounded-lg p-4">
+        {/* Status-Filter */}
+        <div className="flex flex-wrap gap-2">
+          {['All', 'Open', 'InProgress', 'Resolved', 'Closed'].map((status) => (
+            <button
+              key={status}
+              onClick={() => setStatusFilter(status as TicketStatus | 'All')}
+              className={cn(
+                'px-3 py-1 rounded-full text-sm font-medium transition-colors',
+                statusFilter === status
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-muted-foreground hover:bg-muted/80'
+              )}
+            >
+              {status === 'All'
+                ? 'Alle'
+                : status === 'Open'
+                  ? 'Offen'
+                  : status === 'InProgress'
+                    ? 'In Bearbeitung'
+                    : status === 'Resolved'
+                      ? 'Gelöst'
+                      : 'Geschlossen'}
+            </button>
+          ))}
+        </div>
+
+        {/* Prioritäts-Filter und Suchfeld */}
+        <div className="flex flex-col sm:flex-row gap-4">
+          <select
+            value={priorityFilter}
+            onChange={(e) => setPriorityFilter(e.target.value as TicketPriority | 'All')}
+            className="px-3 py-2 bg-background border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+          >
+            <option value="All">Alle Prioritäten</option>
+            <option value="Critical">Kritisch</option>
+            <option value="High">Hoch</option>
+            <option value="Medium">Mittel</option>
+            <option value="Low">Niedrig</option>
+          </select>
+
+          <input
+            type="text"
+            placeholder="Nach Titel suchen..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="px-3 py-2 bg-background border border-border rounded-lg text-sm flex-1 focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+        </div>
+      </div>
+
+      {/* Ticket-Tabelle */}
+      <div className="bg-card border border-border rounded-lg overflow-hidden">
+        {isLoading ? (
+          <div className="p-8 text-center text-muted-foreground">Tickets werden geladen...</div>
+        ) : error ? (
+          <div className="p-8 text-center text-red-400">Fehler beim Laden der Tickets</div>
+        ) : filteredTickets.length === 0 ? (
+          <div className="p-8 text-center text-muted-foreground">Keine Tickets gefunden</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-muted border-b border-border">
+                <tr>
+                  <th className="px-6 py-3 text-left text-sm font-semibold">
+                    <SortButton field="id" label="#" />
+                  </th>
+                  <th className="px-6 py-3 text-left text-sm font-semibold">
+                    <SortButton field="title" label="Titel" />
+                  </th>
+                  <th className="px-6 py-3 text-left text-sm font-semibold">
+                    <SortButton field="status" label="Status" />
+                  </th>
+                  <th className="px-6 py-3 text-left text-sm font-semibold">
+                    <SortButton field="priority" label="Priorität" />
+                  </th>
+                  <th className="px-6 py-3 text-left text-sm font-semibold">
+                    <SortButton field="createdAt" label="Erstellt" />
+                  </th>
+                  <th className="px-6 py-3 text-left text-sm font-semibold">Aktionen</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border">
+                {filteredTickets.map((ticket) => (
+                  <tr
+                    key={ticket.id}
+                    className="hover:bg-muted/50 transition-colors cursor-pointer"
+                  >
+                    <td
+                      className="px-6 py-4 text-sm font-medium"
+                      onClick={() => openDetail(ticket.id)}
+                    >
+                      #{ticket.id}
+                    </td>
+                    <td
+                      className="px-6 py-4 text-sm font-medium text-primary hover:underline"
+                      onClick={() => openDetail(ticket.id)}
+                    >
+                      {ticket.title}
+                    </td>
+                    <td className="px-6 py-4">
+                      <span className={cn('px-2 py-1 rounded text-xs font-semibold', getStatusColor(ticket.status))}>
+                        {getStatusLabel(ticket.status)}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4">
+                      <span className={cn('px-2 py-1 rounded text-xs font-semibold', getPriorityColor(ticket.priority))}>
+                        {getPriorityLabel(ticket.priority)}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 text-sm">{formatDate(ticket.createdAt)}</td>
+                    <td className="px-6 py-4">
+                      <button
+                        onClick={() => openEdit(ticket)}
+                        className="p-1 hover:bg-muted rounded transition-colors"
+                        title="Bearbeiten"
+                      >
+                        <Edit size={18} className="text-muted-foreground hover:text-primary" />
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {/* Create Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-card border border-border rounded-lg p-6 w-full max-w-md">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-bold">Neues Ticket</h2>
+              <button
+                onClick={() => setShowCreateModal(false)}
+                className="p-1 hover:bg-muted rounded transition-colors"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <form onSubmit={handleCreateSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Titel *</label>
+                <input
+                  type="text"
+                  required
+                  value={createForm.title}
+                  onChange={(e) =>
+                    setCreateForm({ ...createForm, title: e.target.value })
+                  }
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                  placeholder="Ticket-Titel"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Beschreibung</label>
+                <textarea
+                  value={createForm.description}
+                  onChange={(e) =>
+                    setCreateForm({ ...createForm, description: e.target.value })
+                  }
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+                  placeholder="Beschreibung..."
+                  rows={4}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Priorität</label>
+                <select
+                  value={createForm.priority}
+                  onChange={(e) =>
+                    setCreateForm({ ...createForm, priority: e.target.value as TicketPriority })
+                  }
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                >
+                  <option value="Low">Niedrig</option>
+                  <option value="Medium">Mittel</option>
+                  <option value="High">Hoch</option>
+                  <option value="Critical">Kritisch</option>
+                </select>
+              </div>
+
+              <div className="flex gap-2 justify-end pt-4">
+                <button
+                  type="button"
+                  onClick={() => setShowCreateModal(false)}
+                  className="px-4 py-2 text-sm font-medium rounded-lg border border-border hover:bg-muted transition-colors"
+                >
+                  Abbrechen
+                </button>
+                <button
+                  type="submit"
+                  disabled={createMutation.isPending}
+                  className="px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50"
+                >
+                  {createMutation.isPending ? 'Speichert...' : 'Speichern'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Detail Modal */}
+      {showDetailModal && selectedTicket && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-card border border-border rounded-lg p-6 w-full max-w-md">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-bold">Ticket-Details</h2>
+              <button
+                onClick={() => {
+                  setShowDetailModal(false)
+                  setSelectedTicketId(null)
+                }}
+                className="p-1 hover:bg-muted rounded transition-colors"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <div className="space-y-3 mb-6">
+              <div>
+                <p className="text-xs font-semibold text-muted-foreground uppercase">ID</p>
+                <p className="text-sm">{selectedTicket.id}</p>
+              </div>
+
+              <div>
+                <p className="text-xs font-semibold text-muted-foreground uppercase">Titel</p>
+                <p className="text-sm font-medium">{selectedTicket.title}</p>
+              </div>
+
+              <div>
+                <p className="text-xs font-semibold text-muted-foreground uppercase">Beschreibung</p>
+                <p className="text-sm">{selectedTicket.description || '-'}</p>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="flex-1">
+                  <p className="text-xs font-semibold text-muted-foreground uppercase">Status</p>
+                  <span className={cn('inline-block px-2 py-1 rounded text-xs font-semibold mt-1', getStatusColor(selectedTicket.status))}>
+                    {getStatusLabel(selectedTicket.status)}
+                  </span>
+                </div>
+                <div className="flex-1">
+                  <p className="text-xs font-semibold text-muted-foreground uppercase">Priorität</p>
+                  <span className={cn('inline-block px-2 py-1 rounded text-xs font-semibold mt-1', getPriorityColor(selectedTicket.priority))}>
+                    {getPriorityLabel(selectedTicket.priority)}
+                  </span>
+                </div>
+              </div>
+
+              {selectedTicket.agentId && (
+                <div>
+                  <p className="text-xs font-semibold text-muted-foreground uppercase">Agent</p>
+                  <p className="text-sm">{selectedTicket.agentId}</p>
+                </div>
+              )}
+
+              <div className="flex gap-4 text-xs">
+                <div>
+                  <p className="font-semibold text-muted-foreground">Erstellt</p>
+                  <p>{formatDate(selectedTicket.createdAt)}</p>
+                </div>
+                <div>
+                  <p className="font-semibold text-muted-foreground">Aktualisiert</p>
+                  <p>{formatDate(selectedTicket.updatedAt)}</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex gap-2 justify-end">
+              <button
+                onClick={() => {
+                  setShowDetailModal(false)
+                  setSelectedTicketId(null)
+                }}
+                className="px-4 py-2 text-sm font-medium rounded-lg border border-border hover:bg-muted transition-colors"
+              >
+                Schließen
+              </button>
+              <button
+                onClick={() => openEdit(selectedTicket)}
+                className="px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity flex items-center gap-2"
+              >
+                <Edit size={16} />
+                Bearbeiten
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Modal */}
+      {showEditModal && selectedTicket && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-card border border-border rounded-lg p-6 w-full max-w-md">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-bold">Ticket bearbeiten</h2>
+              <button
+                onClick={() => setShowEditModal(false)}
+                className="p-1 hover:bg-muted rounded transition-colors"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <form onSubmit={handleEditSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Titel *</label>
+                <input
+                  type="text"
+                  required
+                  value={editForm.title}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, title: e.target.value })
+                  }
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                  placeholder="Ticket-Titel"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Beschreibung</label>
+                <textarea
+                  value={editForm.description}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, description: e.target.value })
+                  }
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+                  placeholder="Beschreibung..."
+                  rows={4}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Status</label>
+                <select
+                  value={editForm.status}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, status: e.target.value as TicketStatus })
+                  }
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                >
+                  <option value="Open">Offen</option>
+                  <option value="InProgress">In Bearbeitung</option>
+                  <option value="Resolved">Gelöst</option>
+                  <option value="Closed">Geschlossen</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Priorität</label>
+                <select
+                  value={editForm.priority}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, priority: e.target.value as TicketPriority })
+                  }
+                  className="w-full px-3 py-2 bg-background border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                >
+                  <option value="Low">Niedrig</option>
+                  <option value="Medium">Mittel</option>
+                  <option value="High">Hoch</option>
+                  <option value="Critical">Kritisch</option>
+                </select>
+              </div>
+
+              <div className="flex gap-2 justify-end pt-4">
+                <button
+                  type="button"
+                  onClick={() => setShowEditModal(false)}
+                  className="px-4 py-2 text-sm font-medium rounded-lg border border-border hover:bg-muted transition-colors"
+                >
+                  Abbrechen
+                </button>
+                <button
+                  type="submit"
+                  disabled={updateMutation.isPending}
+                  className="px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50"
+                >
+                  {updateMutation.isPending ? 'Speichert...' : 'Speichern'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/Frontend/tsconfig.app.json
+++ b/Frontend/tsconfig.app.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/Frontend/tsconfig.json
+++ b/Frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/Frontend/tsconfig.node.json
+++ b/Frontend/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/Frontend/vite.config.ts
+++ b/Frontend/vite.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+      '/hubs': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+        ws: true,
+      },
+    },
+  },
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>