Skip to content

Commit cb6c53b

Browse files
Fr4nc3Fr4nc3
committed
plan details configuration
1 parent 186e49d commit cb6c53b

File tree

6 files changed

+226
-70
lines changed

6 files changed

+226
-70
lines changed

‎src/frontend_react/src/components/content/PlanChat.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { PlanChatProps } from "@/models";
22

33
const PlanChat: React.FC<PlanChatProps> = ({
4-
PlanData,
4+
planData,
55
OnChatSubmit
66
}) => {
77

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

Lines changed: 93 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { TaskDetailsProps } from "@/models";
12
import {
23
Body1,
34
Button,
@@ -7,73 +8,123 @@ import {
78
Persona,
89
Text,
910
Subtitle1,
11+
Avatar,
1012
} from "@fluentui/react-components";
11-
import { Add20Regular } from "@fluentui/react-icons";
13+
import { Add20Regular, CheckmarkCircle20Regular, Dismiss20Regular, CircleHalfFill20Regular } from "@fluentui/react-icons";
1214
import React from "react";
13-
import { TaskDetailsProps } from "../../models";
1415
import "../../styles/TaskDetails.css";
1516

1617
const TaskDetails: React.FC<TaskDetailsProps> = ({
17-
PlanData,
18+
planData,
1819
OnApproveStep,
1920
OnRejectStep
20-
2121
}) => {
22-
const completedCount = subTasks.filter(t => t.status === 'completed').length;
23-
24-
return (
22+
const completedCount = planData.plan.completed || 0;
23+
const total = planData.plan.total_steps || 1; // Avoid division by zero
24+
const subTasks = planData.steps || [];
25+
const progress = completedCount / total;
26+
const agents = planData.agents || [];
27+
// Helper function to render the appropriate status icon
28+
const renderStatusIcon = (status: string) => {
29+
switch (status) {
30+
case 'completed':
31+
return <CheckmarkCircle20Regular className="task-details-status-completed" />;
32+
case 'working':
33+
return <CircleHalfFill20Regular className="task-details-status-working" />;
34+
case 'removed':
35+
return <Dismiss20Regular className="task-details-status-removed" />;
36+
default:
37+
return null;
38+
}
39+
}; return (
2540
<div className="task-details-container">
2641
<div className="task-details-section">
42+
<Subtitle1 className="task-details-section-title">Progress</Subtitle1>
43+
2744
<div className="task-details-progress-header">
28-
<Subtitle1>{PlanData.plan.initial_goal}</Subtitle1>
29-
<Text size={200}>
30-
{completedCount} of {subTasks.length} completed
31-
</Text>
45+
<div style={{ display: "flex", alignItems: "center" }}>
46+
<div className="task-details-progress-ring">
47+
{/* This is a simplified progress ring - in a real implementation you'd use a proper circular progress component */}
48+
<svg width="56" height="56" viewBox="0 0 56 56">
49+
<circle cx="28" cy="28" r="24" fill="none" stroke="#f0f0f0" strokeWidth="4" />
50+
<circle
51+
cx="28"
52+
cy="28"
53+
r="24"
54+
fill="none"
55+
stroke="#0078d4"
56+
strokeWidth="4"
57+
strokeDasharray={`${progress * 150.8} 150.8`}
58+
strokeDashoffset="0"
59+
strokeLinecap="round"
60+
transform="rotate(-90 28 28)"
61+
/>
62+
</svg>
63+
<div className="task-details-progress-text">{completedCount}/{total}</div>
64+
</div>
65+
<div>
66+
<div className="task-details-task-title">{planData.plan.initial_goal}</div>
67+
<Text size={200}>{planData.plan.completed} of {total} completed</Text>
68+
</div>
69+
</div>
3270
</div>
71+
3372
<div className="task-details-subtask-list">
3473
{subTasks.map((subtask) => (
35-
<Checkbox
36-
key={subtask.id}
37-
checked={subtask.status === 'completed'}
38-
disabled
39-
label={subtask.name}
40-
/>
74+
<div key={subtask.id} className="task-details-subtask-item">
75+
<div className="task-details-status-icon">
76+
{renderStatusIcon(subtask.status)}
77+
</div>
78+
<div className="task-details-subtask-content">
79+
<span className="task-details-subtask-name">{subtask.action}</span>
80+
</div>
81+
</div>
4182
))}
4283
</div>
4384
</div>
4485

4586
<Divider />
4687

4788
<div className="task-details-section">
48-
<Subtitle1>Agents</Subtitle1>
49-
{agents.map((agent) => (
50-
<Card key={agent.id} className="task-details-agent-card">
51-
<Persona
52-
name={agent.name}
53-
secondaryText={agent.description}
54-
avatar={{ image: { src: agent.avatarUrl } }}
55-
presence={{ status: "available" }}
56-
/>
57-
</Card>
58-
))}
59-
89+
<Subtitle1 className="task-details-section-title">Agents</Subtitle1>
90+
<div className="task-details-agent-list">
91+
{agents.map((agent) => (
92+
<div key={agent} className="task-details-agent-card">
93+
<Avatar
94+
name={agent}
95+
size={32}
96+
badge={{ status: 'available' }}
97+
// image={{ src: agent.avatarUrl }}
98+
/>
99+
<div className="task-details-agent-details">
100+
<span className="task-details-agent-name">{agent}</span>
101+
<span className="task-details-agent-description">agent description</span>
102+
</div>
103+
</div>
104+
))}
105+
</div>
60106
</div>
61107

62108
<Divider />
63109

64-
<div className="task-details-section">
65-
<Subtitle1>Humans</Subtitle1>
66-
{humans.map((human) => (
67-
<Card key={human.id} className="task-details-agent-card">
68-
<Persona
69-
name={human.name}
70-
secondaryText={human.email}
71-
avatar={{ image: { src: human.avatarUrl } }}
72-
presence={{ status: "available" }}
73-
/>
74-
</Card>
75-
))}
76-
</div>
110+
{/* <div className="task-details-section">
111+
<Subtitle1 className="task-details-section-title">Humans</Subtitle1>
112+
<div className="task-details-human-list">
113+
{humans.map((human) => (
114+
<div key={human.id} className="task-details-agent-card">
115+
<Avatar
116+
name={human.name}
117+
size={32}
118+
image={{ src: human.avatarUrl }}
119+
/>
120+
<div className="task-details-agent-details">
121+
<span className="task-details-agent-name">{human.name}</span>
122+
<span className="task-details-agent-description">{human.email}</span>
123+
</div>
124+
</div>
125+
))}
126+
</div>
127+
</div> */}
77128
</div>
78129
);
79130
};

‎src/frontend_react/src/models/plan.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,6 @@ export interface ProcessedPlanData {
9898
}
9999

100100
export interface PlanChatProps {
101-
PlanData: ProcessedPlanData;
101+
planData: ProcessedPlanData;
102102
OnChatSubmit: (message: string) => void;
103103
}

‎src/frontend_react/src/models/taskDetails.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export interface Human {
2121
}
2222

2323
export interface TaskDetailsProps {
24-
PlanData: ProcessedPlanData;
24+
planData: ProcessedPlanData;
2525
OnApproveStep: (step: Step) => void;
2626
OnRejectStep: (step: Step) => void;
2727
}

‎src/frontend_react/src/pages/PlanPage.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,16 +101,17 @@ const PlanPage: React.FC = () => {
101101
<CoralShellRow>
102102
<PlanPanelLeft onNewTaskButton={handleNewTaskButton} />
103103
<Content>
104+
104105
<ContentToolbar
105106
panelTitle={planData?.plan?.initial_goal || 'Plan Details'}
106107
panelIcon={<Sparkle20Filled />}
107108
></ContentToolbar>
108109
<PlanChat
109-
PlanData={planData}
110+
planData={planData}
110111
OnChatSubmit={handleOnchatSubmit}
111112
/>
112113
<TaskDetails
113-
PlanData={planData}
114+
planData={planData}
114115
OnApproveStep={handleApproveStep}
115116
OnRejectStep={handleRejectStep}
116117
/>

‎src/frontend_react/src/styles/TaskDetails.css‎

Lines changed: 127 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,148 @@
1-
/* TaskDetails.css */
1+
2+
/* TaskDetails Component Styles */
3+
24
.task-details-container {
3-
display: flex;
4-
flex-direction: column;
5-
height: 100%;
6-
background-color: #fafafa; /* tokens.colorNeutralBackground1 equivalent */
7-
overflow: auto;
5+
display: flex;
6+
flex-direction: column;
7+
height: 100%;
8+
background-color: var(--colorNeutralBackground1);
9+
overflow: auto;
810
}
911

1012
.task-details-section {
11-
display: flex;
12-
flex-direction: column;
13-
gap: 12px;
14-
padding: 16px;
13+
display: flex;
14+
flex-direction: column;
15+
gap: 16px;
16+
padding: 16px;
17+
}
18+
19+
.task-details-section-title {
20+
font-size: var(--fontSizeBase500);
21+
font-weight: var(--fontWeightSemibold);
22+
margin-bottom: 8px;
1523
}
1624

1725
.task-details-progress-header {
18-
display: flex;
19-
align-items: center;
20-
justify-content: space-between;
26+
display: flex;
27+
align-items: center;
28+
justify-content: space-between;
29+
margin-bottom: 16px;
30+
}
31+
32+
.task-details-progress-ring {
33+
position: relative;
34+
width: 56px;
35+
height: 56px;
36+
margin-right: 16px;
37+
}
38+
39+
.task-details-progress-text {
40+
position: absolute;
41+
top: 50%;
42+
left: 50%;
43+
transform: translate(-50%, -50%);
44+
font-size: var(--fontSizeBase200);
45+
font-weight: var(--fontWeightSemibold);
2146
}
2247

2348
.task-details-subtask-list {
24-
display: flex;
25-
flex-direction: column;
26-
gap: 8px;
49+
display: flex;
50+
flex-direction: column;
51+
gap: 12px;
52+
}
53+
54+
.task-details-subtask-item {
55+
display: flex;
56+
align-items: center;
57+
gap: 8px;
58+
}
59+
60+
.task-details-subtask-content {
61+
display: flex;
62+
flex-direction: column;
63+
flex: 1;
64+
}
65+
66+
.task-details-subtask-name {
67+
font-size: var(--fontSizeBase300);
68+
font-weight: var(--fontWeightSemibold);
69+
}
70+
71+
.task-details-subtask-details {
72+
font-size: var(--fontSizeBase200);
73+
color: var(--colorNeutralForeground3);
74+
}
75+
76+
.task-details-status-icon {
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
width: 24px;
81+
height: 24px;
82+
}
83+
84+
.task-details-status-completed {
85+
color: var(--colorPaletteGreenForeground1);
86+
}
87+
88+
.task-details-status-working {
89+
color: var(--colorBrandForeground1);
90+
}
91+
92+
.task-details-status-removed {
93+
color: var(--colorPaletteRedForeground1);
94+
}
95+
96+
.task-details-agent-section {
97+
margin-top: 8px;
98+
}
99+
100+
.task-details-agent-list {
101+
display: flex;
102+
flex-direction: column;
103+
gap: 12px;
27104
}
28105

29106
.task-details-agent-card {
30-
cursor: default;
31-
padding: 12px;
107+
display: flex;
108+
align-items: center;
109+
gap: 12px;
110+
padding: 12px;
111+
border-radius: var(--borderRadiusMedium);
112+
background-color: var(--colorNeutralBackground2);
32113
}
33114

34-
.task-details-add-button {
35-
align-self: flex-start;
115+
.task-details-agent-details {
116+
display: flex;
117+
flex-direction: column;
36118
}
37119

38-
.task-details-section-title {
39-
font-weight: 600; /* tokens.fontWeightSemibold equivalent */
120+
.task-details-agent-name {
121+
font-size: var(--fontSizeBase300);
122+
font-weight: var(--fontWeightSemibold);
123+
}
124+
125+
.task-details-agent-description {
126+
font-size: var(--fontSizeBase200);
127+
color: var(--colorNeutralForeground2);
128+
}
129+
130+
.task-details-add-button {
131+
align-self: flex-start;
132+
margin-top: 8px;
40133
}
41134

42135
.task-details-task-title {
43-
font-weight: 600; /* tokens.fontWeightSemibold equivalent */
136+
font-weight: var(--fontWeightSemibold);
137+
font-size: var(--fontSizeBase600);
138+
}
139+
140+
.task-details-human-section {
141+
margin-top: 8px;
44142
}
143+
144+
.task-details-human-list {
145+
display: flex;
146+
flex-direction: column;
147+
gap: 12px;
148+
}

0 commit comments

Comments
 (0)