From 3027a3de5c78fdfa4f34c47c436d63c97a525e4e Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Fri, 20 Jun 2025 16:20:22 +0100
Subject: [PATCH] Task attempt 4e0e57ea-d98b-44d2-b0a5-2c7ef9114a47 - Final
 changes

---
 .../components/projects/project-detail.tsx    |  2 +-
 .../src/components/projects/project-list.tsx  |  2 +-
 frontend/src/components/tasks/TaskCard.tsx    |  4 +-
 .../components/tasks/TaskDetailsDialog.tsx    | 47 ++++++++--------
 .../src/components/tasks/TaskKanbanBoard.tsx  | 10 ++--
 .../components/ui/file-search-textarea.tsx    | 10 ++--
 frontend/src/index.css                        | 56 +++++++++++++++++++
 frontend/src/pages/project-tasks.tsx          |  2 +-
 frontend/src/pages/task-attempt-compare.tsx   | 10 ++--
 frontend/src/pages/task-details.tsx           | 49 ++++++++--------
 frontend/tailwind.config.js                   | 34 +++++++++++
 11 files changed, 157 insertions(+), 69 deletions(-)

diff --git a/frontend/src/components/projects/project-detail.tsx b/frontend/src/components/projects/project-detail.tsx
index 9a26183a..489ca8eb 100644
--- a/frontend/src/components/projects/project-detail.tsx
+++ b/frontend/src/components/projects/project-detail.tsx
@@ -125,7 +125,7 @@ export function ProjectDetail({ projectId, onBack }: ProjectDetailProps) {
           <Button 
             variant="outline" 
             onClick={handleDelete}
-            className="text-red-600 hover:text-red-700 hover:bg-red-50"
+            className="text-destructive hover:text-destructive-foreground hover:bg-destructive/10"
           >
             <Trash2 className="mr-2 h-4 w-4" />
             Delete
diff --git a/frontend/src/components/projects/project-list.tsx b/frontend/src/components/projects/project-list.tsx
index 9107634c..8a9f5ccd 100644
--- a/frontend/src/components/projects/project-list.tsx
+++ b/frontend/src/components/projects/project-list.tsx
@@ -168,7 +168,7 @@ export function ProjectList() {
                             e.stopPropagation()
                             handleDelete(project.id, project.name)
                           }}
-                          className="text-red-600"
+                          className="text-destructive"
                         >
                           <Trash2 className="mr-2 h-4 w-4" />
                           Delete
diff --git a/frontend/src/components/tasks/TaskCard.tsx b/frontend/src/components/tasks/TaskCard.tsx
index a540fb12..81a827ad 100644
--- a/frontend/src/components/tasks/TaskCard.tsx
+++ b/frontend/src/components/tasks/TaskCard.tsx
@@ -53,7 +53,7 @@ export function TaskCard({ task, index, status, onEdit, onDelete, onViewDetails
                   <Button 
                     variant="ghost" 
                     size="sm" 
-                    className="h-6 w-6 p-0 hover:bg-gray-100"
+                    className="h-6 w-6 p-0 hover:bg-muted"
                   >
                     <MoreHorizontal className="h-3 w-3" />
                   </Button>
@@ -65,7 +65,7 @@ export function TaskCard({ task, index, status, onEdit, onDelete, onViewDetails
                   </DropdownMenuItem>
                   <DropdownMenuItem 
                     onClick={() => onDelete(task.id)}
-                    className="text-red-600"
+                    className="text-destructive"
                   >
                     <Trash2 className="h-4 w-4 mr-2" />
                     Delete
diff --git a/frontend/src/components/tasks/TaskDetailsDialog.tsx b/frontend/src/components/tasks/TaskDetailsDialog.tsx
index 1e7eb503..3c0331b7 100644
--- a/frontend/src/components/tasks/TaskDetailsDialog.tsx
+++ b/frontend/src/components/tasks/TaskDetailsDialog.tsx
@@ -61,23 +61,23 @@ const statusLabels: Record<TaskStatus, string> = {
 const getAttemptStatusDisplay = (status: TaskAttemptStatus): { label: string; className: string } => {
   switch (status) {
     case "init":
-      return { label: "Init", className: "bg-gray-100 text-gray-800" };
+      return { label: "Init", className: "bg-status-init text-status-init-foreground" };
     case "setuprunning":
-      return { label: "Setup Running", className: "bg-blue-100 text-blue-800" };
+      return { label: "Setup Running", className: "bg-status-running text-status-running-foreground" };
     case "setupcomplete":
-      return { label: "Setup Complete", className: "bg-green-100 text-green-800" };
+      return { label: "Setup Complete", className: "bg-status-complete text-status-complete-foreground" };
     case "setupfailed":
-      return { label: "Setup Failed", className: "bg-red-100 text-red-800" };
+      return { label: "Setup Failed", className: "bg-status-failed text-status-failed-foreground" };
     case "executorrunning":
-      return { label: "Executor Running", className: "bg-blue-100 text-blue-800" };
+      return { label: "Executor Running", className: "bg-status-running text-status-running-foreground" };
     case "executorcomplete":
-      return { label: "Executor Complete", className: "bg-green-100 text-green-800" };
+      return { label: "Executor Complete", className: "bg-status-complete text-status-complete-foreground" };
     case "executorfailed":
-      return { label: "Executor Failed", className: "bg-red-100 text-red-800" };
+      return { label: "Executor Failed", className: "bg-status-failed text-status-failed-foreground" };
     case "paused":
-      return { label: "Paused", className: "bg-yellow-100 text-yellow-800" };
+      return { label: "Paused", className: "bg-status-paused text-status-paused-foreground" };
     default:
-      return { label: "Unknown", className: "bg-gray-100 text-gray-800" };
+      return { label: "Unknown", className: "bg-status-init text-status-init-foreground" };
   }
 };
 
@@ -371,13 +371,13 @@ export function TaskDetailsDialog({
                         placeholder="Enter task description..."
                       />
                     ) : (
-                      <div className="mt-1 p-3 bg-gray-50 rounded-md min-h-[60px]">
+                      <div className="mt-1 p-3 bg-muted rounded-md min-h-[60px]">
                         {task?.description ? (
-                          <p className="text-sm text-gray-700 whitespace-pre-wrap">
+                          <p className="text-sm text-foreground whitespace-pre-wrap">
                             {task.description}
                           </p>
                         ) : (
-                          <p className="text-sm text-gray-500 italic">
+                          <p className="text-sm text-muted-foreground italic">
                             No description provided
                           </p>
                         )}
@@ -399,11 +399,11 @@ export function TaskDetailsDialog({
                     <div className="space-y-4">
                       {selectedAttempt.stdout && (
                         <div>
-                          <Label className="text-sm font-medium mb-2 block text-green-400">
-                            STDOUT
+                          <Label className="text-sm font-medium mb-2 block text-console-success">
+                          STDOUT
                           </Label>
                           <div
-                            className="bg-black border border-green-400 rounded-md p-4 font-mono text-sm text-green-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
+                          className="bg-console text-console-success border border-console-success rounded-md p-4 font-mono text-sm max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
                             style={{
                               fontFamily:
                                 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
@@ -415,13 +415,12 @@ export function TaskDetailsDialog({
                       )}
                       {selectedAttempt.stderr && (
                         <div>
-                          <Label className="text-sm font-medium mb-2 block text-red-400">
+                          <Label className="text-sm font-medium mb-2 block text-console-error">
                             STDERR
                           </Label>
                           <div
-                            className="bg-black border border-red-400 rounded-md p-4 font-mono text-sm text-red-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
+                            className="bg-console text-console-error border border-console-error rounded-md p-4 font-mono text-sm max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
                             style={{
-                              textShadow: "0 0 2px #ff0000",
                               fontFamily:
                                 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
                             }}
@@ -470,14 +469,14 @@ export function TaskDetailsDialog({
                       <div
                         className={`mt-1 px-2 py-1 rounded-full text-xs font-medium w-fit ${
                           task?.status === "todo"
-                            ? "bg-gray-100 text-gray-800"
+                            ? "bg-neutral text-neutral-foreground"
                             : task?.status === "inprogress"
-                            ? "bg-blue-100 text-blue-800"
+                            ? "bg-info text-info-foreground"
                             : task?.status === "inreview"
-                            ? "bg-yellow-100 text-yellow-800"
+                            ? "bg-warning text-warning-foreground"
                             : task?.status === "done"
-                            ? "bg-green-100 text-green-800"
-                            : "bg-red-100 text-red-800"
+                            ? "bg-success text-success-foreground"
+                            : "bg-destructive text-destructive-foreground"
                         }`}
                       >
                         {task ? statusLabels[task.status] : ""}
@@ -651,7 +650,7 @@ export function TaskDetailsDialog({
                       {attemptActivities.map((activity) => (
                         <div
                           key={activity.id}
-                          className="border-l-2 border-gray-200 pl-3 pb-2"
+                          className="border-l-2 border-border pl-3 pb-2"
                         >
                           <div className="flex items-center justify-between">
                             <span
diff --git a/frontend/src/components/tasks/TaskKanbanBoard.tsx b/frontend/src/components/tasks/TaskKanbanBoard.tsx
index bc5eca9f..0c66e575 100644
--- a/frontend/src/components/tasks/TaskKanbanBoard.tsx
+++ b/frontend/src/components/tasks/TaskKanbanBoard.tsx
@@ -29,11 +29,11 @@ const statusLabels: Record<TaskStatus, string> = {
 }
 
 const statusBoardColors: Record<TaskStatus, string> = {
-  todo: '#64748b',
-  inprogress: '#3b82f6',
-  inreview: '#f59e0b',
-  done: '#22c55e',
-  cancelled: '#ef4444'
+  todo: 'hsl(var(--neutral))',
+  inprogress: 'hsl(var(--info))',
+  inreview: 'hsl(var(--warning))',
+  done: 'hsl(var(--success))',
+  cancelled: 'hsl(var(--destructive))'
 }
 
 export function TaskKanbanBoard({ tasks, onDragEnd, onEditTask, onDeleteTask, onViewTaskDetails }: TaskKanbanBoardProps) {
diff --git a/frontend/src/components/ui/file-search-textarea.tsx b/frontend/src/components/ui/file-search-textarea.tsx
index a7a6bd0f..d0c0cab1 100644
--- a/frontend/src/components/ui/file-search-textarea.tsx
+++ b/frontend/src/components/ui/file-search-textarea.tsx
@@ -197,16 +197,16 @@ export function FileSearchTextarea({
       {showDropdown && (
         <div
           ref={dropdownRef}
-          className="absolute z-50 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-y-auto min-w-64"
+          className="absolute z-50 bg-background border border-border rounded-md shadow-lg max-h-60 overflow-y-auto min-w-64"
           style={{
             top: dropdownPosition.top,
             left: dropdownPosition.left,
           }}
         >
           {isLoading ? (
-            <div className="p-2 text-sm text-gray-500">Searching...</div>
+            <div className="p-2 text-sm text-muted-foreground">Searching...</div>
           ) : searchResults.length === 0 ? (
-            <div className="p-2 text-sm text-gray-500">No files found</div>
+            <div className="p-2 text-sm text-muted-foreground">No files found</div>
           ) : (
             <div className="py-1">
               {searchResults.map((file, index) => (
@@ -215,12 +215,12 @@ export function FileSearchTextarea({
                   className={`px-3 py-2 cursor-pointer text-sm ${
                     index === selectedIndex
                       ? 'bg-blue-50 text-blue-900'
-                      : 'hover:bg-gray-50'
+                      : 'hover:bg-muted'
                   }`}
                   onClick={() => selectFile(file)}
                 >
                   <div className="font-medium truncate">{file.name}</div>
-                  <div className="text-xs text-gray-500 truncate">{file.path}</div>
+                  <div className="text-xs text-muted-foreground truncate">{file.path}</div>
                 </div>
               ))}
             </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 36a777ad..059d78fd 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -24,6 +24,34 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
     --radius: 0.5rem;
+    
+    /* Status colors */
+    --success: 142.1 76.2% 36.3%;
+    --success-foreground: 138.5 76.5% 96.7%;
+    --warning: 32.2 95% 44.1%;
+    --warning-foreground: 26 83.3% 14.1%;
+    --info: 217.2 91.2% 59.8%;
+    --info-foreground: 222.2 84% 4.9%;
+    --neutral: 210 40% 96%;
+    --neutral-foreground: 222.2 84% 4.9%;
+    
+    /* Status indicator colors */
+    --status-init: 210 40% 96%;
+    --status-init-foreground: 222.2 84% 4.9%;
+    --status-running: 217.2 91.2% 59.8%;
+    --status-running-foreground: 222.2 84% 4.9%;
+    --status-complete: 142.1 76.2% 36.3%;
+    --status-complete-foreground: 138.5 76.5% 96.7%;
+    --status-failed: 0 84.2% 60.2%;
+    --status-failed-foreground: 210 40% 98%;
+    --status-paused: 32.2 95% 44.1%;
+    --status-paused-foreground: 26 83.3% 14.1%;
+    
+    /* Console/terminal colors */
+    --console-background: 222.2 84% 4.9%;
+    --console-foreground: 210 40% 98%;
+    --console-success: 138.5 76.5% 47.7%;
+    --console-error: 0 84.2% 60.2%;
   }
 
   .dark {
@@ -46,6 +74,34 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+    
+    /* Status colors */
+    --success: 138.5 76.5% 47.7%;
+    --success-foreground: 138.5 76.5% 96.7%;
+    --warning: 32.2 95% 44.1%;
+    --warning-foreground: 26 83.3% 14.1%;
+    --info: 217.2 91.2% 59.8%;
+    --info-foreground: 222.2 84% 4.9%;
+    --neutral: 217.2 32.6% 17.5%;
+    --neutral-foreground: 210 40% 98%;
+    
+    /* Status indicator colors */
+    --status-init: 217.2 32.6% 17.5%;
+    --status-init-foreground: 210 40% 98%;
+    --status-running: 217.2 91.2% 59.8%;
+    --status-running-foreground: 222.2 84% 4.9%;
+    --status-complete: 138.5 76.5% 47.7%;
+    --status-complete-foreground: 138.5 76.5% 96.7%;
+    --status-failed: 0 62.8% 30.6%;
+    --status-failed-foreground: 210 40% 98%;
+    --status-paused: 32.2 95% 44.1%;
+    --status-paused-foreground: 26 83.3% 14.1%;
+    
+    /* Console/terminal colors */
+    --console-background: 0 0% 0%;
+    --console-foreground: 138.5 76.5% 47.7%;
+    --console-success: 138.5 76.5% 47.7%;
+    --console-error: 0 84.2% 60.2%;
   }
 }
 
diff --git a/frontend/src/pages/project-tasks.tsx b/frontend/src/pages/project-tasks.tsx
index e1b98a1e..89706599 100644
--- a/frontend/src/pages/project-tasks.tsx
+++ b/frontend/src/pages/project-tasks.tsx
@@ -253,7 +253,7 @@ export function ProjectTasks() {
   }
 
   if (error) {
-    return <div className="text-center py-8 text-red-600">{error}</div>;
+    return <div className="text-center py-8 text-destructive">{error}</div>;
   }
 
   return (
diff --git a/frontend/src/pages/task-attempt-compare.tsx b/frontend/src/pages/task-attempt-compare.tsx
index 2225c99a..df75ecc6 100644
--- a/frontend/src/pages/task-attempt-compare.tsx
+++ b/frontend/src/pages/task-attempt-compare.tsx
@@ -168,7 +168,7 @@ export function TaskAttemptComparePage() {
         return `${baseClass} bg-red-50 text-red-800 border-l-2 border-red-400`;
       case 'Equal':
       default:
-        return `${baseClass} text-gray-700`;
+        return `${baseClass} text-muted-foreground`;
     }
   };
 
@@ -323,7 +323,7 @@ export function TaskAttemptComparePage() {
     return (
       <div className="min-h-screen bg-background flex items-center justify-center">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
           <p className="text-muted-foreground">Loading diff...</p>
         </div>
       </div>
@@ -334,7 +334,7 @@ export function TaskAttemptComparePage() {
     return (
       <div className="min-h-screen bg-background flex items-center justify-center">
         <div className="text-center">
-          <p className="text-red-600 mb-4">{error}</p>
+          <p className="text-destructive mb-4">{error}</p>
           <Button onClick={handleBackClick} variant="outline">
             <ArrowLeft className="mr-2 h-4 w-4" />
             Back to Task
@@ -439,8 +439,8 @@ export function TaskAttemptComparePage() {
             <div className="space-y-6">
               {diff.files.map((file, fileIndex) => (
                 <div key={fileIndex} className="border rounded-lg overflow-hidden">
-                  <div className="bg-gray-50 px-3 py-2 border-b">
-                    <p className="text-sm font-medium text-gray-700 font-mono">
+                  <div className="bg-muted px-3 py-2 border-b">
+                    <p className="text-sm font-medium text-muted-foreground font-mono">
                       {file.path}
                     </p>
                   </div>
diff --git a/frontend/src/pages/task-details.tsx b/frontend/src/pages/task-details.tsx
index d7066d55..11e0165a 100644
--- a/frontend/src/pages/task-details.tsx
+++ b/frontend/src/pages/task-details.tsx
@@ -47,23 +47,23 @@ const statusLabels: Record<TaskStatus, string> = {
 const getAttemptStatusDisplay = (status: TaskAttemptStatus): { label: string; className: string } => {
   switch (status) {
     case "init":
-      return { label: "Init", className: "bg-gray-100 text-gray-800" };
+      return { label: "Init", className: "bg-status-init text-status-init-foreground" };
     case "setuprunning":
-      return { label: "Setup Running", className: "bg-blue-100 text-blue-800" };
+      return { label: "Setup Running", className: "bg-status-running text-status-running-foreground" };
     case "setupcomplete":
-      return { label: "Setup Complete", className: "bg-green-100 text-green-800" };
+      return { label: "Setup Complete", className: "bg-status-complete text-status-complete-foreground" };
     case "setupfailed":
-      return { label: "Setup Failed", className: "bg-red-100 text-red-800" };
+      return { label: "Setup Failed", className: "bg-status-failed text-status-failed-foreground" };
     case "executorrunning":
-      return { label: "Executor Running", className: "bg-blue-100 text-blue-800" };
+      return { label: "Executor Running", className: "bg-status-running text-status-running-foreground" };
     case "executorcomplete":
-      return { label: "Executor Complete", className: "bg-green-100 text-green-800" };
+      return { label: "Executor Complete", className: "bg-status-complete text-status-complete-foreground" };
     case "executorfailed":
-      return { label: "Executor Failed", className: "bg-red-100 text-red-800" };
+      return { label: "Executor Failed", className: "bg-status-failed text-status-failed-foreground" };
     case "paused":
-      return { label: "Paused", className: "bg-yellow-100 text-yellow-800" };
+      return { label: "Paused", className: "bg-status-paused text-status-paused-foreground" };
     default:
-      return { label: "Unknown", className: "bg-gray-100 text-gray-800" };
+      return { label: "Unknown", className: "bg-status-init text-status-init-foreground" };
   }
 };
 
@@ -419,7 +419,7 @@ export function TaskDetailsPage() {
     return (
       <div className="min-h-screen bg-background flex items-center justify-center">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4"></div>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground mx-auto mb-4"></div>
           <p className="text-muted-foreground">Loading task...</p>
         </div>
       </div>
@@ -430,7 +430,7 @@ export function TaskDetailsPage() {
     return (
       <div className="min-h-screen bg-background flex items-center justify-center">
         <div className="text-center">
-          <p className="text-red-600 mb-4">{error}</p>
+          <p className="text-destructive mb-4">{error}</p>
           <Button onClick={handleBackClick} variant="outline">
             <ArrowLeft className="mr-2 h-4 w-4" />
             Back to Tasks
@@ -489,13 +489,13 @@ export function TaskDetailsPage() {
 
                 <div>
                   <Label className="text-sm font-medium">Description</Label>
-                  <div className="mt-1 p-3 bg-gray-50 rounded-md min-h-[60px]">
+                  <div className="mt-1 p-3 bg-muted rounded-md min-h-[60px]">
                     {task.description ? (
-                      <p className="text-sm text-gray-700 whitespace-pre-wrap">
+                      <p className="text-sm text-foreground whitespace-pre-wrap">
                         {task.description}
                       </p>
                     ) : (
-                      <p className="text-sm text-gray-500 italic">
+                      <p className="text-sm text-muted-foreground italic">
                         No description provided
                       </p>
                     )}
@@ -516,11 +516,11 @@ export function TaskDetailsPage() {
                   <div className="space-y-4">
                     {selectedAttempt.stdout && (
                       <div>
-                        <Label className="text-sm font-medium mb-2 block text-green-400">
+                        <Label className="text-sm font-medium mb-2 block text-console-success">
                           STDOUT
                         </Label>
                         <div
-                          className="bg-black border border-green-400 rounded-md p-4 font-mono text-sm text-green-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
+                          className="bg-console text-console-success border border-console-success rounded-md p-4 font-mono text-sm max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
                           style={{
                             fontFamily:
                               'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
@@ -532,13 +532,12 @@ export function TaskDetailsPage() {
                     )}
                     {selectedAttempt.stderr && (
                       <div>
-                        <Label className="text-sm font-medium mb-2 block text-red-400">
+                        <Label className="text-sm font-medium mb-2 block text-console-error">
                           STDERR
                         </Label>
                         <div
-                          className="bg-black border border-red-400 rounded-md p-4 font-mono text-sm text-red-400 max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
+                          className="bg-console text-console-error border border-console-error rounded-md p-4 font-mono text-sm max-h-96 overflow-y-auto whitespace-pre-wrap shadow-inner"
                           style={{
-                            textShadow: "0 0 2px #ff0000",
                             fontFamily:
                               'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
                           }}
@@ -566,14 +565,14 @@ export function TaskDetailsPage() {
                   <div
                     className={`mt-1 px-2 py-1 rounded-full text-xs font-medium w-fit ${
                       task.status === "todo"
-                        ? "bg-gray-100 text-gray-800"
+                        ? "bg-neutral text-neutral-foreground"
                         : task.status === "inprogress"
-                        ? "bg-blue-100 text-blue-800"
+                        ? "bg-info text-info-foreground"
                         : task.status === "inreview"
-                        ? "bg-yellow-100 text-yellow-800"
+                        ? "bg-warning text-warning-foreground"
                         : task.status === "done"
-                        ? "bg-green-100 text-green-800"
-                        : "bg-red-100 text-red-800"
+                        ? "bg-success text-success-foreground"
+                        : "bg-destructive text-destructive-foreground"
                     }`}
                   >
                     {statusLabels[task.status]}
@@ -767,7 +766,7 @@ export function TaskDetailsPage() {
                     {attemptActivities.map((activity) => (
                       <div
                         key={activity.id}
-                        className="border-l-2 border-gray-200 pl-3 pb-2"
+                        className="border-l-2 border-border pl-3 pb-2"
                       >
                         <div className="flex items-center justify-between">
                           <span
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 62ed56ec..4d66d215 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -51,6 +51,40 @@ module.exports = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+        },
+        neutral: {
+          DEFAULT: "hsl(var(--neutral))",
+          foreground: "hsl(var(--neutral-foreground))",
+        },
+        status: {
+          init: "hsl(var(--status-init))",
+          "init-foreground": "hsl(var(--status-init-foreground))",
+          running: "hsl(var(--status-running))",
+          "running-foreground": "hsl(var(--status-running-foreground))",
+          complete: "hsl(var(--status-complete))",
+          "complete-foreground": "hsl(var(--status-complete-foreground))",
+          failed: "hsl(var(--status-failed))",
+          "failed-foreground": "hsl(var(--status-failed-foreground))",
+          paused: "hsl(var(--status-paused))",
+          "paused-foreground": "hsl(var(--status-paused-foreground))",
+        },
+        console: {
+          DEFAULT: "hsl(var(--console-background))",
+          foreground: "hsl(var(--console-foreground))",
+          success: "hsl(var(--console-success))",
+          error: "hsl(var(--console-error))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",