feat: add resource monitoring and live scaling

- Backend: getResourceUsage() method in KubernetesService fetches real-time
  CPU/Memory metrics from K8s metrics-server API per pod
- Backend: updateResources() method patches live K8s deployments with new
  CPU/Memory requests+limits and replica count
- Backend: GET /applications/:id/resources endpoint for monitoring
- Backend: PATCH /applications/:id/resources endpoint for scaling
- Backend: ScaleResourcesDto with validation for resource fields
- Frontend: Resource monitoring card with per-pod CPU/Memory progress bars
  (color-coded: green < 50%, yellow < 80%, red > 80%)
- Frontend: Pod status table showing phase, readiness, restarts
- Frontend: Scaling controls for CPU request/limit, memory request/limit,
  and replicas with +/- buttons
- Frontend: Auto-refresh metrics every 5 seconds when monitoring is open
- Frontend: parseCpuToMillicores/parseMemoryToMi helpers for metric parsing

backend/src/applications/applications.controller.ts

@@ -18,7 +18,7 @@ import { AuthGuard } from '@nestjs/passport';
 import { FileInterceptor } from '@nestjs/platform-express';
 import { ApiTags, ApiOperation, ApiBearerAuth, ApiConsumes } from '@nestjs/swagger';
 import { ApplicationsService } from './applications.service';
-import { CreateApplicationDto, UpdateApplicationDto } from './dto/application.dto';
+import { CreateApplicationDto, UpdateApplicationDto, ScaleResourcesDto } from './dto/application.dto';
 import { RolesGuard } from '../common/guards/roles.guard';
 import { Roles } from '../common/decorators/roles.decorator';
 import { UserRole } from '../common/enums';
@@ -87,6 +87,41 @@ export class ApplicationsController {
     return this.applicationsService.update(id, req.user.id, dto);
   }
 
+  @Get(':id/resources')
+  @ApiOperation({ summary: 'Get real-time resource usage for an application' })
+  async getResources(@Param('id') id: string, @Request() req: any) {
+    const app = await this.applicationsService.findOne(
+      id,
+      req.user.role === UserRole.ADMIN ? undefined : req.user.id,
+    );
+    return this.kubernetesService.getResourceUsage(app);
+  }
+
+  @Patch(':id/resources')
+  @ApiOperation({ summary: 'Update application resources (CPU/Memory/Replicas)' })
+  async updateResources(
+    @Param('id') id: string,
+    @Request() req: any,
+    @Body() dto: ScaleResourcesDto,
+  ) {
+    const app = await this.applicationsService.findOne(id, req.user.id);
+
+    // Update in K8s (live)
+    await this.kubernetesService.updateResources(app, dto);
+
+    // Update in DB
+    const updateFields: any = {};
+    if (dto.cpuRequest) updateFields.cpuRequest = dto.cpuRequest;
+    if (dto.cpuLimit) updateFields.cpuLimit = dto.cpuLimit;
+    if (dto.memoryRequest) updateFields.memoryRequest = dto.memoryRequest;
+    if (dto.memoryLimit) updateFields.memoryLimit = dto.memoryLimit;
+    if (dto.replicas !== undefined) updateFields.replicas = dto.replicas;
+
+    const updated = await this.applicationsService.update(id, req.user.id, updateFields);
+    this.logger.log(`Updated resources for ${app.name}: ${JSON.stringify(dto)}`);
+    return updated;
+  }
+
   @Delete(':id')
   @ApiOperation({ summary: 'Delete an application and all its resources' })
   async delete(@Param('id') id: string, @Request() req: any) {

backend/src/applications/dto/application.dto.ts

@@ -118,3 +118,32 @@ export class UpdateApplicationDto {
   @Max(10)
   replicas?: number;
 }
+
+export class ScaleResourcesDto {
+  @ApiPropertyOptional({ example: '100m' })
+  @IsOptional()
+  @IsString()
+  cpuRequest?: string;
+
+  @ApiPropertyOptional({ example: '500m' })
+  @IsOptional()
+  @IsString()
+  cpuLimit?: string;
+
+  @ApiPropertyOptional({ example: '128Mi' })
+  @IsOptional()
+  @IsString()
+  memoryRequest?: string;
+
+  @ApiPropertyOptional({ example: '512Mi' })
+  @IsOptional()
+  @IsString()
+  memoryLimit?: string;
+
+  @ApiPropertyOptional({ example: 2, minimum: 1, maximum: 10 })
+  @IsOptional()
+  @IsNumber()
+  @Min(1)
+  @Max(10)
+  replicas?: number;
+}

backend/src/kubernetes/kubernetes.service.ts

@@ -57,6 +57,7 @@ export class KubernetesService implements OnModuleInit {
     coreApi: k8s.CoreV1Api;
     appsApi: k8s.AppsV1Api;
     networkingApi: k8s.NetworkingV1Api;
+    kc: k8s.KubeConfig;
   }> {
     const cluster = clusterId
       ? await this.clustersService.findOne(clusterId)
@@ -69,6 +70,7 @@ export class KubernetesService implements OnModuleInit {
       coreApi: kc.makeApiClient(k8s.CoreV1Api),
       appsApi: kc.makeApiClient(k8s.AppsV1Api),
       networkingApi: kc.makeApiClient(k8s.NetworkingV1Api),
+      kc,
     };
   }
 
@@ -523,6 +525,167 @@ export class KubernetesService implements OnModuleInit {
     );
   }
 
+  /**
+   * Get real-time resource usage (CPU/Memory) for an app's pods via metrics-server.
+   * Also returns the configured requests/limits and pod status.
+   */
+  async getResourceUsage(app: Application): Promise<any> {
+    const { coreApi, appsApi, kc } = await this.getK8sClient(app.clusterId);
+    const namespace = `user-${app.userId.split('-')[0]}`;
+
+    // Get deployment info for configured resources
+    let deployment: k8s.V1Deployment | null = null;
+    try {
+      const depResponse = await appsApi.readNamespacedDeployment(app.name, namespace);
+      deployment = depResponse.body;
+    } catch {
+      // Deployment may not exist yet
+    }
+
+    // Get pods
+    const podsResponse = await coreApi.listNamespacedPod(
+      namespace,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      `app=${app.name}`,
+    );
+
+    const pods = podsResponse.body.items.map((pod) => ({
+      name: pod.metadata?.name,
+      status: pod.status?.phase,
+      ready: pod.status?.conditions?.find((c) => c.type === 'Ready')?.status === 'True',
+      restarts: pod.status?.containerStatuses?.[0]?.restartCount || 0,
+      startedAt: pod.status?.startTime,
+    }));
+
+    // Try to get metrics from metrics-server via custom API
+    let podMetrics: any[] = [];
+    try {
+      const metricsClient = new k8s.CustomObjectsApi(kc.getCurrentCluster()?.server);
+      // Use the kc to make a raw request to metrics API
+      const opts: any = {};
+      await kc.applyToRequest(opts);
+
+      const metricsUrl = `${kc.getCurrentCluster()?.server}/apis/metrics.k8s.io/v1beta1/namespaces/${namespace}/pods`;
+
+      const https = require('https');
+      const http = require('http');
+      const url = new URL(metricsUrl);
+
+      podMetrics = await new Promise((resolve) => {
+        const client = url.protocol === 'https:' ? https : http;
+        const reqOpts: any = {
+          hostname: url.hostname,
+          port: url.port,
+          path: url.pathname + `?labelSelector=app%3D${app.name}`,
+          method: 'GET',
+          headers: opts.headers || {},
+          rejectUnauthorized: false,
+        };
+
+        // Apply TLS from kubeconfig
+        if (opts.ca) reqOpts.ca = opts.ca;
+        if (opts.cert) reqOpts.cert = opts.cert;
+        if (opts.key) reqOpts.key = opts.key;
+
+        const req = client.request(reqOpts, (res: any) => {
+          let data = '';
+          res.on('data', (chunk: string) => (data += chunk));
+          res.on('end', () => {
+            try {
+              const parsed = JSON.parse(data);
+              const items = (parsed.items || []).map((item: any) => ({
+                name: item.metadata?.name,
+                cpu: item.containers?.[0]?.usage?.cpu || '0',
+                memory: item.containers?.[0]?.usage?.memory || '0',
+              }));
+              resolve(items);
+            } catch {
+              resolve([]);
+            }
+          });
+        });
+        req.on('error', () => resolve([]));
+        req.end();
+      });
+    } catch {
+      this.logger.warn(`Metrics not available for ${app.name}`);
+    }
+
+    // Get configured resources from deployment
+    const container = deployment?.spec?.template?.spec?.containers?.[0];
+    const configured = {
+      cpuRequest: container?.resources?.requests?.cpu || app.cpuRequest,
+      cpuLimit: container?.resources?.limits?.cpu || app.cpuLimit,
+      memoryRequest: container?.resources?.requests?.memory || app.memoryRequest,
+      memoryLimit: container?.resources?.limits?.memory || app.memoryLimit,
+      replicas: deployment?.spec?.replicas ?? app.replicas,
+      readyReplicas: deployment?.status?.readyReplicas || 0,
+      availableReplicas: deployment?.status?.availableReplicas || 0,
+    };
+
+    return {
+      configured,
+      pods,
+      metrics: podMetrics,
+    };
+  }
+
+  /**
+   * Update resource limits/requests and replicas on a live K8s deployment.
+   */
+  async updateResources(
+    app: Application,
+    resources: { cpuRequest?: string; cpuLimit?: string; memoryRequest?: string; memoryLimit?: string; replicas?: number },
+  ): Promise<void> {
+    const { appsApi } = await this.getK8sClient(app.clusterId);
+    const namespace = `user-${app.userId.split('-')[0]}`;
+
+    const patch: any = { spec: {} };
+
+    if (resources.replicas !== undefined) {
+      patch.spec.replicas = resources.replicas;
+    }
+
+    if (resources.cpuRequest || resources.cpuLimit || resources.memoryRequest || resources.memoryLimit) {
+      patch.spec.template = {
+        spec: {
+          containers: [
+            {
+              name: app.name,
+              resources: {
+                requests: {
+                  ...(resources.cpuRequest && { cpu: resources.cpuRequest }),
+                  ...(resources.memoryRequest && { memory: resources.memoryRequest }),
+                },
+                limits: {
+                  ...(resources.cpuLimit && { cpu: resources.cpuLimit }),
+                  ...(resources.memoryLimit && { memory: resources.memoryLimit }),
+                },
+              },
+            },
+          ],
+        },
+      };
+    }
+
+    await appsApi.patchNamespacedDeployment(
+      app.name,
+      namespace,
+      patch,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      { headers: { 'Content-Type': 'application/strategic-merge-patch+json' } },
+    );
+
+    this.logger.log(`Updated resources for ${app.name}: ${JSON.stringify(resources)}`);
+  }
+
   async deleteApplication(app: Application): Promise<void> {
     const { coreApi, appsApi, networkingApi } = await this.getK8sClient(app.clusterId);
     const namespace = `user-${app.userId.split('-')[0]}`;

frontend/src/app/dashboard/apps/[id]/page.tsx

@@ -4,7 +4,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useParams, useRouter } from 'next/navigation';
 import api from '@/lib/api';
 import toast from 'react-hot-toast';
-import type { Application, Deployment } from '@/types';
+import type { Application, Deployment, ResourceUsage } from '@/types';
 import { useState, useRef, useCallback, useEffect } from 'react';
 
 const statusColors: Record<string, string> = {
@@ -17,6 +17,30 @@ const statusColors: Record<string, string> = {
   stopped: 'bg-gray-100 text-gray-700',
 };
 
+/**
+ * Parse CPU value to millicores (e.g. "100m" → 100, "1" → 1000, "250n" → 0.00025)
+ */
+function parseCpuToMillicores(cpu: string): number {
+  if (!cpu || cpu === '0') return 0;
+  if (cpu.endsWith('n')) return parseFloat(cpu) / 1_000_000;
+  if (cpu.endsWith('u')) return parseFloat(cpu) / 1_000;
+  if (cpu.endsWith('m')) return parseFloat(cpu);
+  return parseFloat(cpu) * 1000;
+}
+
+/**
+ * Parse memory value to MiB (e.g. "128Mi" → 128, "1Gi" → 1024, "131072Ki" → 128)
+ */
+function parseMemoryToMi(memory: string): number {
+  if (!memory || memory === '0') return 0;
+  if (memory.endsWith('Ki')) return parseFloat(memory) / 1024;
+  if (memory.endsWith('Mi')) return parseFloat(memory);
+  if (memory.endsWith('Gi')) return parseFloat(memory) * 1024;
+  if (memory.endsWith('Ti')) return parseFloat(memory) * 1024 * 1024;
+  // raw bytes
+  return parseFloat(memory) / (1024 * 1024);
+}
+
 export default function AppDetailPage() {
   const params = useParams();
   const router = useRouter();
@@ -27,6 +51,14 @@ export default function AppDetailPage() {
   const logsEndRef = useRef<HTMLPreElement>(null);
   const [uploadProgress, setUploadProgress] = useState(0);
   const [isDragging, setIsDragging] = useState(false);
+  const [showResources, setShowResources] = useState(false);
+  const [resourceForm, setResourceForm] = useState({
+    cpuRequest: '',
+    cpuLimit: '',
+    memoryRequest: '',
+    memoryLimit: '',
+    replicas: 1,
+  });
 
   const { data: app, isLoading } = useQuery<Application>({
     queryKey: ['application', appId],
@@ -46,6 +78,26 @@ export default function AppDetailPage() {
     refetchInterval: showLogs ? 3000 : false,
   });
 
+  const { data: resourceUsage, isLoading: resourcesLoading } = useQuery<ResourceUsage>({
+    queryKey: ['resources', appId],
+    queryFn: () => api.get(`/applications/${appId}/resources`).then((r) => r.data),
+    enabled: showResources,
+    refetchInterval: showResources ? 5000 : false,
+  });
+
+  // Sync form when resource data loads
+  useEffect(() => {
+    if (resourceUsage?.configured) {
+      setResourceForm({
+        cpuRequest: resourceUsage.configured.cpuRequest,
+        cpuLimit: resourceUsage.configured.cpuLimit,
+        memoryRequest: resourceUsage.configured.memoryRequest,
+        memoryLimit: resourceUsage.configured.memoryLimit,
+        replicas: resourceUsage.configured.replicas,
+      });
+    }
+  }, [resourceUsage?.configured]);
+
   // Auto-scroll logs to bottom
   useEffect(() => {
     if (logsEndRef.current) {
@@ -113,6 +165,17 @@ export default function AppDetailPage() {
     onError: () => toast.error('Failed to delete application'),
   });
 
+  const scaleMutation = useMutation({
+    mutationFn: (data: { cpuRequest?: string; cpuLimit?: string; memoryRequest?: string; memoryLimit?: string; replicas?: number }) =>
+      api.patch(`/applications/${appId}/resources`, data),
+    onSuccess: () => {
+      invalidateAll();
+      queryClient.invalidateQueries({ queryKey: ['resources', appId] });
+      toast.success('Resources updated successfully!');
+    },
+    onError: () => toast.error('Failed to update resources'),
+  });
+
   const uploadMutation = useMutation({
     mutationFn: (file: File) => {
       const formData = new FormData();
@@ -424,6 +487,238 @@ export default function AppDetailPage() {
         </div>
       </div>
 
+      {/* Resource Monitoring & Scaling */}
+      <div className="card">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-gray-900">📊 Resources & Scaling</h2>
+          <button
+            onClick={() => setShowResources(!showResources)}
+            className="btn-secondary text-sm"
+          >
+            {showResources ? '🔽 Hide' : '📊 Monitor'}
+          </button>
+        </div>
+
+        {showResources && (
+          <div className="space-y-6">
+            {/* Live Metrics */}
+            {resourcesLoading ? (
+              <div className="text-center py-6 text-gray-400 text-sm">Loading metrics...</div>
+            ) : resourceUsage ? (
+              <>
+                {/* Cluster Status */}
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="bg-blue-50 rounded-xl p-4 text-center">
+                    <p className="text-xs text-blue-500 font-medium">Replicas</p>
+                    <p className="text-2xl font-bold text-blue-700">
+                      {resourceUsage.configured.readyReplicas}/{resourceUsage.configured.replicas}
+                    </p>
+                    <p className="text-xs text-blue-400">ready</p>
+                  </div>
+                  <div className="bg-green-50 rounded-xl p-4 text-center">
+                    <p className="text-xs text-green-500 font-medium">Pods</p>
+                    <p className="text-2xl font-bold text-green-700">{resourceUsage.pods.length}</p>
+                    <p className="text-xs text-green-400">
+                      {resourceUsage.pods.filter((p) => p.ready).length} ready
+                    </p>
+                  </div>
+                  <div className="bg-purple-50 rounded-xl p-4 text-center">
+                    <p className="text-xs text-purple-500 font-medium">Metrics</p>
+                    <p className="text-2xl font-bold text-purple-700">
+                      {resourceUsage.metrics.length > 0 ? '✅' : '⏳'}
+                    </p>
+                    <p className="text-xs text-purple-400">
+                      {resourceUsage.metrics.length > 0 ? 'Available' : 'Waiting...'}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Per-Pod Metrics */}
+                {resourceUsage.metrics.length > 0 && (
+                  <div className="space-y-3">
+                    <h3 className="text-sm font-semibold text-gray-700">Pod Usage</h3>
+                    {resourceUsage.metrics.map((metric) => {
+                      const cpuUsed = parseCpuToMillicores(metric.cpu);
+                      const cpuLimit = parseCpuToMillicores(resourceUsage.configured.cpuLimit);
+                      const cpuPercent = cpuLimit > 0 ? Math.min((cpuUsed / cpuLimit) * 100, 100) : 0;
+
+                      const memUsed = parseMemoryToMi(metric.memory);
+                      const memLimit = parseMemoryToMi(resourceUsage.configured.memoryLimit);
+                      const memPercent = memLimit > 0 ? Math.min((memUsed / memLimit) * 100, 100) : 0;
+
+                      return (
+                        <div key={metric.name} className="bg-gray-50 rounded-xl p-4 space-y-3">
+                          <div className="flex items-center justify-between">
+                            <p className="text-xs font-mono text-gray-600 truncate max-w-[250px]" title={metric.name}>
+                              🟢 {metric.name}
+                            </p>
+                          </div>
+
+                          {/* CPU Bar */}
+                          <div>
+                            <div className="flex justify-between text-xs text-gray-500 mb-1">
+                              <span>CPU</span>
+                              <span>
+                                {cpuUsed.toFixed(1)}m / {cpuLimit.toFixed(0)}m ({cpuPercent.toFixed(1)}%)
+                              </span>
+                            </div>
+                            <div className="w-full bg-gray-200 rounded-full h-2.5">
+                              <div
+                                className={`h-2.5 rounded-full transition-all duration-500 ${
+                                  cpuPercent > 80 ? 'bg-red-500' : cpuPercent > 50 ? 'bg-yellow-500' : 'bg-green-500'
+                                }`}
+                                style={{ width: `${cpuPercent}%` }}
+                              />
+                            </div>
+                          </div>
+
+                          {/* Memory Bar */}
+                          <div>
+                            <div className="flex justify-between text-xs text-gray-500 mb-1">
+                              <span>Memory</span>
+                              <span>
+                                {memUsed.toFixed(1)}Mi / {memLimit.toFixed(0)}Mi ({memPercent.toFixed(1)}%)
+                              </span>
+                            </div>
+                            <div className="w-full bg-gray-200 rounded-full h-2.5">
+                              <div
+                                className={`h-2.5 rounded-full transition-all duration-500 ${
+                                  memPercent > 80 ? 'bg-red-500' : memPercent > 50 ? 'bg-yellow-500' : 'bg-green-500'
+                                }`}
+                                style={{ width: `${memPercent}%` }}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+
+                {/* Pod Status Table */}
+                {resourceUsage.pods.length > 0 && (
+                  <div>
+                    <h3 className="text-sm font-semibold text-gray-700 mb-2">Pod Status</h3>
+                    <div className="overflow-x-auto">
+                      <table className="w-full text-xs">
+                        <thead>
+                          <tr className="text-left text-gray-500 border-b">
+                            <th className="pb-2 font-medium">Pod</th>
+                            <th className="pb-2 font-medium">Status</th>
+                            <th className="pb-2 font-medium">Ready</th>
+                            <th className="pb-2 font-medium">Restarts</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-100">
+                          {resourceUsage.pods.map((pod) => (
+                            <tr key={pod.name} className="text-gray-700">
+                              <td className="py-2 font-mono truncate max-w-[200px]" title={pod.name}>
+                                {pod.name}
+                              </td>
+                              <td className="py-2">
+                                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+                                  pod.status === 'Running' ? 'bg-green-100 text-green-700' :
+                                  pod.status === 'Pending' ? 'bg-yellow-100 text-yellow-700' :
+                                  'bg-red-100 text-red-700'
+                                }`}>
+                                  {pod.status}
+                                </span>
+                              </td>
+                              <td className="py-2">{pod.ready ? '✅' : '⏳'}</td>
+                              <td className="py-2">{pod.restarts}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                )}
+
+                {/* Scaling Controls */}
+                <div className="border-t pt-4">
+                  <h3 className="text-sm font-semibold text-gray-700 mb-3">⚙️ Scale Resources</h3>
+                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                    <div>
+                      <label className="block text-xs text-gray-500 mb-1">CPU Request</label>
+                      <input
+                        type="text"
+                        value={resourceForm.cpuRequest}
+                        onChange={(e) => setResourceForm((f) => ({ ...f, cpuRequest: e.target.value }))}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                        placeholder="100m"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-xs text-gray-500 mb-1">CPU Limit</label>
+                      <input
+                        type="text"
+                        value={resourceForm.cpuLimit}
+                        onChange={(e) => setResourceForm((f) => ({ ...f, cpuLimit: e.target.value }))}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                        placeholder="500m"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-xs text-gray-500 mb-1">Memory Request</label>
+                      <input
+                        type="text"
+                        value={resourceForm.memoryRequest}
+                        onChange={(e) => setResourceForm((f) => ({ ...f, memoryRequest: e.target.value }))}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                        placeholder="128Mi"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-xs text-gray-500 mb-1">Memory Limit</label>
+                      <input
+                        type="text"
+                        value={resourceForm.memoryLimit}
+                        onChange={(e) => setResourceForm((f) => ({ ...f, memoryLimit: e.target.value }))}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                        placeholder="512Mi"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-xs text-gray-500 mb-1">Replicas</label>
+                      <div className="flex items-center space-x-2">
+                        <button
+                          onClick={() => setResourceForm((f) => ({ ...f, replicas: Math.max(1, f.replicas - 1) }))}
+                          className="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-bold"
+                        >
+                          −
+                        </button>
+                        <span className="text-lg font-bold text-gray-800 w-8 text-center">{resourceForm.replicas}</span>
+                        <button
+                          onClick={() => setResourceForm((f) => ({ ...f, replicas: Math.min(10, f.replicas + 1) }))}
+                          className="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-bold"
+                        >
+                          +
+                        </button>
+                      </div>
+                    </div>
+                    <div className="flex items-end">
+                      <button
+                        onClick={() => scaleMutation.mutate(resourceForm)}
+                        disabled={scaleMutation.isPending}
+                        className="btn-primary text-sm w-full disabled:opacity-50"
+                      >
+                        {scaleMutation.isPending ? '⏳ Applying...' : '🔄 Apply Changes'}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className="text-center py-6">
+                <p className="text-gray-400 text-sm">
+                  {isStopped ? 'Application is stopped. Start it to see resources.' : 'No resource data available yet.'}
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
       {/* Pod Logs */}
       <div className="card">
         <div className="flex items-center justify-between mb-4">

frontend/src/types/index.ts

@@ -92,3 +92,31 @@ export interface CreateApplicationDto {
   replicas?: number;
   port?: number;
 }
+
+export interface PodInfo {
+  name: string;
+  status: string;
+  ready: boolean;
+  restarts: number;
+  startedAt?: string;
+}
+
+export interface PodMetric {
+  name: string;
+  cpu: string;
+  memory: string;
+}
+
+export interface ResourceUsage {
+  configured: {
+    cpuRequest: string;
+    cpuLimit: string;
+    memoryRequest: string;
+    memoryLimit: string;
+    replicas: number;
+    readyReplicas: number;
+    availableReplicas: number;
+  };
+  pods: PodInfo[];
+  metrics: PodMetric[];
+}