panel right actions css

Author: Fr4nc3

src/frontend_react/src/components/content/PlanPanelRight.tsx

@@ -17,7 +17,7 @@ const PlanPanelRight: React.FC<TaskDetailsProps> = ({
 
     return (
         <PanelRight
-            panelWidth={400}
+            panelWidth={350}
             defaultClosed={false}
             panelResize={true}
             panelType="first"

src/frontend_react/src/components/content/TaskDetails.tsx

@@ -13,6 +13,7 @@ import {
 import { Add20Regular, CheckmarkCircle20Regular, Dismiss20Regular, CircleHalfFill20Regular, CheckboxChecked20Regular, DismissSquare20Regular } from "@fluentui/react-icons";
 import React from "react";
 import "../../styles/TaskDetails.css";
+import { TaskService } from "@/services";
 
 const TaskDetails: React.FC<TaskDetailsProps> = ({
     planData,
@@ -69,20 +70,34 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                         </div>
                     </div>
                 </div>
-
+                <Divider />
                 <div className="task-details-subtask-list">
-                    {subTasks.map((subtask) => (
-                        <div key={subtask.id} className="task-details-subtask-item">
-                            <div className="task-details-status-icon">
-                                {renderStatusIcon(subtask.status)}
-                            </div>
-                            <div className="task-details-subtask-content">
-                                <span className="task-details-subtask-name">{subtask.action}</span>
-                                <CheckboxChecked20Regular onClick={() => OnApproveStep(subtask)} className="task-details-checkbox-icon" />
-                                <DismissSquare20Regular onClick={() => OnRejectStep(subtask)} className="task-details-dismiss-icon" />
+                    {subTasks.map((subtask) => {
+                        const { description, functionOrDetails } = TaskService.splitSubtaskAction(subtask.action);
+
+
+                        return (
+
+                            <div key={subtask.id} className="task-details-subtask-item">
+                                <div className="task-details-status-icon">
+                                    {renderStatusIcon(subtask.status)}
+                                </div>
+                                <div className="task-details-subtask-content">
+                                    <span className="task-details-subtask-name">{description}</span>
+                                    <div className="task-details-subtask-actions">
+                                        <CheckboxChecked20Regular
+                                            onClick={() => OnApproveStep(subtask)}
+                                            className="task-details-checkbox-icon"
+                                        />
+                                        <DismissSquare20Regular
+                                            onClick={() => OnRejectStep(subtask)}
+                                            className="task-details-dismiss-icon"
+                                        />
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                    ))}
+                        );
+                    })}
                 </div>
             </div>
 

src/frontend_react/src/services/TaskService.tsx

@@ -88,6 +88,46 @@ export class TaskService {
         const random = Math.floor(Math.random() * 10000);
         return `sid_${timestamp}_${random}`;
     }
+    /**
+      * Split subtask action into description and function/details parts
+      * @param action The full action string to split
+      * @returns Object containing description and functionOrDetails
+      */
+    static splitSubtaskAction(action: string): { description: string; functionOrDetails: string | null } {
+        // Check for "Function:" pattern
+        // Check for "Function:" pattern
+        const functionMatch = action.match(/^(.+?)\.\s*Function:\s*(.+)$/);
+        if (functionMatch) {
+            return {
+                description: functionMatch[1].trim(),
+                functionOrDetails: functionMatch[2].trim()
+            };
+        }
+
+        // Check for "Provide more details about:" pattern
+        const detailsMatch = action.match(/^Provide more details about:\s*(.+)$/);
+        if (detailsMatch) {
+            return {
+                description: "Provide more details about",
+                functionOrDetails: detailsMatch[1].trim()
+            };
+        }
+
+        // Check for "Analyze the task:" pattern
+        const analyzeMatch = action.match(/^Analyze the task:\s*(.+)$/);
+        if (analyzeMatch) {
+            return {
+                description: "Analyze the task",
+                functionOrDetails: analyzeMatch[1].trim()
+            };
+        }
+
+        // If no pattern matches, return the full action as description
+        return {
+            description: action,
+            functionOrDetails: null
+        };
+    }
 
     /**
      * Submit an input task to create a new plan

src/frontend_react/src/styles/TaskDetails.css

@@ -5,7 +5,6 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    background-color: var(--colorNeutralBackground1);
     overflow: auto;
 }
 
@@ -57,16 +56,7 @@
     gap: 8px;
 }
 
-.task-details-subtask-content {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
 
-.task-details-subtask-name {
-    font-size: var(--fontSizeBase300);
-    font-weight: var(--fontWeightSemibold);
-}
 
 .task-details-subtask-details {
     font-size: var(--fontSizeBase200);
@@ -145,4 +135,44 @@
     display: flex;
     flex-direction: column;
     gap: 12px;
+}
+
+/* ...existing styles... */
+
+.task-details-subtask-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+    gap: 8px;
+}
+
+.task-details-subtask-name {
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightSemibold);
+    flex: 1;
+}
+
+.task-details-subtask-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.task-details-checkbox-icon,
+.task-details-dismiss-icon {
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--borderRadiusSmall);
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.task-details-checkbox-icon:hover {
+    background-color: var(--colorNeutralBackground2);
+    color: var(--colorPaletteGreenForeground1);
+}
+
+.task-details-dismiss-icon:hover {
+    background-color: var(--colorNeutralBackground2);
+    color: var(--colorPaletteRedForeground1);
 }