From b1925331ed0a5bcb06b50fc25c54bfc28d86728d Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 12 Jul 2025 10:50:35 +0000
Subject: [PATCH] Display and edit parallel jobs on card

Display the parallel jobs value on the job card and enable editing by clicking on it.
---
 src/components/JobCardDetails.tsx | 45 ++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/components/JobCardDetails.tsx b/src/components/JobCardDetails.tsx
index cb2866e..51c9710 100644
--- a/src/components/JobCardDetails.tsx
+++ b/src/components/JobCardDetails.tsx
@@ -54,9 +54,16 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
 
   const handleFieldUpdate = async (fieldName: string, value: string) => {
     try {
-      const dateValue = value ? new Date(value).toISOString() : null;
-      await updateJob(job.id, { [fieldName]: dateValue });
+      let updateValue: any;
+      if (fieldName === 'parallel') {
+        updateValue = Math.max(1, parseInt(value) || 1);
+      } else {
+        updateValue = value ? new Date(value).toISOString() : null;
+      }
+      
+      await updateJob(job.id, { [fieldName]: updateValue });
       setEditingField(null);
+      setTempValues({});
       toast({
         title: "Updated",
         description: `${fieldName} updated successfully`,
@@ -195,8 +202,40 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
               <Clock className="w-4 h-4" />
               <span>Runtime:</span>
             </div>
-            <div className="text-sm text-white">
+            <div className="text-sm text-white flex items-center gap-1">
               {formatDuration(job.runtime)}
+              <span className="text-gray-400">(</span>
+              {editingField === 'parallel' ? (
+                <Input
+                  type="number"
+                  min="1"
+                  value={tempValues.parallel || job.parallel?.toString() || '1'}
+                  onChange={(e) => setTempValues({ ...tempValues, parallel: e.target.value })}
+                  onBlur={() => handleFieldUpdate('parallel', tempValues.parallel || '1')}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      handleFieldUpdate('parallel', tempValues.parallel || '1');
+                    } else if (e.key === 'Escape') {
+                      setEditingField(null);
+                      setTempValues({});
+                    }
+                  }}
+                  className="w-12 h-5 px-1 py-0 text-xs bg-gray-800 border-gray-600"
+                  autoFocus
+                />
+              ) : (
+                <span 
+                  className="cursor-pointer hover:text-blue-400 transition-colors"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setEditingField('parallel');
+                    setTempValues({ parallel: job.parallel?.toString() || '1' });
+                  }}
+                >
+                  {job.parallel || 1}
+                </span>
+              )}
+              <span className="text-gray-400">)</span>
             </div>
 
             {job.status === 'Running' && (