feat: Implement initial Process Scheduling Simulator application with core logic, algorithms, UI components, and project setup.

src/components/ProcessPanel/ProcessCard.tsx

@@ -0,0 +1,73 @@
+import { Pencil, Trash2 } from 'lucide-react';
+import type { Process } from '@core/types';
+import IconButton from '../shared/IconButton';
+import Badge from '../shared/Badge';
+import { classifyBound } from '../shared/processUtils';
+
+interface ProcessCardProps {
+  process: Process;
+  onEdit: (process: Process) => void;
+  onRemove: (id: string) => void;
+}
+
+const ProcessCard = ({ process, onEdit, onRemove }: ProcessCardProps) => {
+  const bound = classifyBound(process.bursts);
+  const totalCpu = process.bursts.filter(b => b.type === 'cpu').reduce((a, b) => a + b.duration, 0);
+  const totalIo = process.bursts.filter(b => b.type === 'io').reduce((a, b) => a + b.duration, 0);
+
+  const boundVariant = bound === 'CPU Bound' ? 'cpu' : bound === 'I/O Bound' ? 'io' : 'balanced';
+
+  return (
+    <div
+      className="group relative flex items-start gap-3 rounded-lg bg-slate-800 border border-slate-700 p-3 hover:border-slate-500 transition-colors"
+      data-testid={`process-card-${process.id}`}
+    >
+      {/* Color indicator */}
+      <div
+        className="mt-0.5 h-8 w-1.5 rounded-full flex-shrink-0"
+        style={{ backgroundColor: process.color }}
+        aria-hidden="true"
+      />
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1">
+          <span className="font-semibold text-sm text-slate-100 truncate">{process.name}</span>
+          <Badge variant={boundVariant}>{bound}</Badge>
+        </div>
+        <div className="flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-slate-400">
+          <span>Arrival: <span className="text-slate-300 font-medium">{process.arrivalTime}</span></span>
+          <span>Priority: <span className="text-slate-300 font-medium">{process.priority}</span></span>
+          <span>CPU: <span className="text-emerald-400 font-medium">{totalCpu}</span></span>
+          {totalIo > 0 && (
+            <span>I/O: <span className="text-cyan-400 font-medium">{totalIo}</span></span>
+          )}
+          <span>Bursts: <span className="text-slate-300 font-medium">{process.bursts.length}</span></span>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+        <IconButton
+          size="sm"
+          variant="ghost"
+          label={`Editar ${process.name}`}
+          onClick={() => onEdit(process)}
+        >
+          <Pencil size={13} />
+        </IconButton>
+        <IconButton
+          size="sm"
+          variant="ghost"
+          label={`Remover ${process.name}`}
+          onClick={() => onRemove(process.id)}
+          className="hover:text-red-400 hover:bg-red-900/20"
+        >
+          <Trash2 size={13} />
+        </IconButton>
+      </div>
+    </div>
+  );
+};
+
+export default ProcessCard;