feat: implement Multilevel Queue (MLQ) scheduling algorithm

- Added MLQ scheduling logic in multilevel.ts, including queue selection, preemption rules, and quantum expiration checks.
- Updated SchedulerConfig to include mlqQueues for MLQ configuration.
- Created default MLQ queue definitions for use in presets and process store.
- Modified process store to auto-increment process IDs.
- Enhanced tests for MLQ scheduling, covering selection, preemption, quantum expiration, and integration scenarios.
- Updated existing presets to support MLQ and adjusted process definitions to include auto-incremented IDs.

src/components/ProcessPanel/ProcessCard.tsx

@@ -24,7 +24,7 @@ const ProcessCard = ({ process, onEdit, onRemove }: ProcessCardProps) => {
     >
       {/* Color indicator */}
       <div
-        className="mt-0.5 h-8 w-1.5 rounded-full flex-shrink-0"
+        className="mt-0.5 h-8 w-1.5 rounded-full shrink-0"
         style={{ backgroundColor: process.color }}
         aria-hidden="true"
       />
@@ -32,6 +32,11 @@ const ProcessCard = ({ process, onEdit, onRemove }: ProcessCardProps) => {
       {/* Info */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 mb-1">
+          {process.pid !== undefined && (
+            <span className="text-[11px] font-mono font-semibold text-slate-400 bg-slate-700 px-1.5 py-0.5 rounded shrink-0">
+              #{process.pid}
+            </span>
+          )}
           <span className="font-semibold text-sm text-slate-100 truncate">{process.name}</span>
           <Badge variant={boundVariant}>{bound}</Badge>
         </div>
@@ -47,7 +52,7 @@ const ProcessCard = ({ process, onEdit, onRemove }: ProcessCardProps) => {
       </div>
 
       {/* Actions */}
-      <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+      <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
         <IconButton
           size="sm"
           variant="ghost"

src/components/ProcessPanel/ProcessForm.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Plus, Minus, Check, X } from 'lucide-react';
-import type { Process, BurstSegment } from '@core/types';
+import type { BurstSegment, Process } from '@core/types';
 import { useProcessStore } from '../../store/processStore';
 import IconButton from '../shared/IconButton';
 import { generateId, nextColor } from '../shared/processUtils';
@@ -32,7 +32,7 @@ const ProcessForm = ({ editingProcess, onClose }: ProcessFormProps) => {
       setArrivalTime(editingProcess.arrivalTime);
       setPriority(editingProcess.priority);
       setColor(editingProcess.color);
-      setBursts([...editingProcess.bursts.map(b => ({ ...b }))]);
+      setBursts([...editingProcess.bursts.map((b: BurstSegment) => ({ ...b }))]);
     } else {
       setName('');
       setArrivalTime(0);
@@ -89,15 +89,14 @@ const ProcessForm = ({ editingProcess, onClose }: ProcessFormProps) => {
     if (isEditing && editingProcess) {
       updateProcess(editingProcess.id, { name: name.trim(), arrivalTime, priority, color, bursts });
     } else {
-      const p: Process = {
+      addProcess({
         id: generateId(),
         name: name.trim(),
         arrivalTime,
         priority,
         color,
         bursts,
-      };
-      addProcess(p);
+      });
     }
     onClose();
   };
@@ -141,7 +140,7 @@ const ProcessForm = ({ editingProcess, onClose }: ProcessFormProps) => {
               type="color"
               value={color}
               onChange={e => setColor(e.target.value)}
-              className="h-[34px] w-12 rounded-md border border-slate-600 bg-slate-700 cursor-pointer"
+              className="h-8.5 w-12 rounded-md border border-slate-600 bg-slate-700 cursor-pointer"
               aria-label="Cor do processo"
             />
           </div>