Skip to content

Commit 9967321

Browse files
Fr4nc3Fr4nc3
committed
clean up homepage
1 parent a594987 commit 9967321

6 files changed

Lines changed: 134 additions & 84 deletions

File tree

‎src/backend/app_kernel.py‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
# Add this near the top of your app.py, after initializing the app
6969
app.add_middleware(
7070
CORSMiddleware,
71-
allow_origins=[frontend_url], # Add your frontend server URL
71+
allow_origins=["*"], # Add your frontend server URL
7272
allow_credentials=True,
7373
allow_methods=["*"],
7474
allow_headers=["*"],
@@ -521,7 +521,9 @@ async def approve_step_endpoint(
521521

522522
@app.get("/api/plans", response_model=List[PlanWithSteps])
523523
async def get_plans(
524-
request: Request, session_id: Optional[str] = Query(None)
524+
request: Request,
525+
session_id: Optional[str] = Query(None),
526+
plan_id: Optional[str] = Query(None),
525527
) -> List[PlanWithSteps]:
526528
"""
527529
Retrieve plans for the current user.
@@ -607,6 +609,20 @@ async def get_plans(
607609
plan_with_steps = PlanWithSteps(**plan.model_dump(), steps=steps)
608610
plan_with_steps.update_step_counts()
609611
return [plan_with_steps]
612+
if plan_id:
613+
plan = await memory_store.get_plan_by_plan_id(plan_id=plan_id)
614+
if not plan:
615+
track_event_if_configured(
616+
"GetPlanBySessionNotFound",
617+
{"status_code": 400, "detail": "Plan not found"},
618+
)
619+
raise HTTPException(status_code=404, detail="Plan not found")
620+
621+
# Use get_steps_by_plan to match the original implementation
622+
steps = await memory_store.get_steps_by_plan(plan_id=plan.id)
623+
plan_with_steps = PlanWithSteps(**plan.model_dump(), steps=steps)
624+
plan_with_steps.update_step_counts()
625+
return [plan_with_steps]
610626

611627
all_plans = await memory_store.get_all_plans()
612628
# Fetch steps for all plans concurrently

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

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11

22
import {
33
Body1,
4+
Body1Strong,
45
Button,
6+
Caption1,
57
Card,
68
Text,
9+
Title2,
710
} from "@fluentui/react-components";
811
import {
912
Send20Regular,
@@ -80,12 +83,6 @@ const HomeInput: React.FC<HomeInputProps> = ({
8083
onQuickTaskSelect(task.description);
8184
};
8285

83-
const handleKeyPress = (e: React.KeyboardEvent) => {
84-
if (e.key === "Enter" && !e.shiftKey) {
85-
e.preventDefault();
86-
handleSubmit();
87-
}
88-
};
8986

9087
// Auto-resize textarea
9188
useEffect(() => {
@@ -101,7 +98,7 @@ const HomeInput: React.FC<HomeInputProps> = ({
10198
<div className="home-input-content">
10299
<div className="home-input-center-content">
103100
<div className="home-input-title-wrapper">
104-
<Text className="home-input-title">How can I help?</Text>
101+
<Title2>How can I help?</Title2>
105102
</div>
106103

107104
<div className="home-input-input-section">
@@ -122,29 +119,34 @@ const HomeInput: React.FC<HomeInputProps> = ({
122119
/>
123120
</div>
124121
<div className="home-input-ai-footer">
125-
AI-generated content may be incorrect
122+
<Caption1>
123+
AI-Generated content may be incorrect
124+
</Caption1>
126125
</div>
127126
</div>
128127

129128
<div className="home-input-quick-tasks-section">
130129
<div className="home-input-quick-tasks-header">
131-
<Text className="home-input-quick-tasks-title">Quick tasks</Text>
130+
<Body1Strong>Quick tasks</Body1Strong>
132131
</div>
133-
<div className="home-input-quick-tasks"> {quickTasks.map((task) => (
134-
<Card
135-
key={task.id}
136-
className="home-input-quick-task-card"
137-
onClick={() => handleQuickTaskClick(task)}
138-
>
139-
<div className="home-input-card-content">
140-
<div className="home-input-card-icon">{task.icon}</div>
141-
<div className="home-input-card-text-content">
142-
<Text className="home-input-card-title">{task.title}</Text>
143-
<Text className="home-input-card-description">{task.description}</Text>
132+
<div className="home-input-quick-tasks">
133+
{quickTasks.map((task) => (
134+
<Card
135+
key={task.id}
136+
className="home-input-quick-task-card"
137+
onClick={() => handleQuickTaskClick(task)}
138+
>
139+
<div className="home-input-quick-task-content">
140+
<div className="home-input-quick-task-icon">
141+
{task.icon}
142+
</div>
143+
<div className="home-input-quick-task-text-content">
144+
<Body1Strong>{task.title}</Body1Strong>
145+
<Body1 className="home-input-quick-task-description">{task.description}</Body1>
146+
</div>
144147
</div>
145-
</div>
146-
</Card>
147-
))}
148+
</Card>
149+
))}
148150
</div>
149151
</div>
150152
</div>

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import PanelLeft from "@/coral/components/Panels/PanelLeft";
22
import PanelLeftToolbar from "@/coral/components/Panels/PanelLeftToolbar";
3-
import { Button, Spinner, Toast, ToastBody, ToastTitle, useToastController } from "@fluentui/react-components";
3+
import { Button, Spinner, Toast, ToastBody, ToastTitle, Tooltip, useToastController } from "@fluentui/react-components";
44
import { Add20Regular, ErrorCircle20Regular } from "@fluentui/react-icons";
55
import TaskList from "./TaskList";
66
import { useCallback, useEffect, useState } from "react";
77
import { useNavigate } from "react-router-dom";
88
import { PlanPanelLefProps, PlanWithSteps, Task } from "@/models";
99
import { apiService } from "@/api";
1010
import { TaskService } from "@/services";
11+
import MsftColor from "@/coral/imports/MsftColor";
1112

1213
const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
1314
onNewTaskButton,
@@ -89,14 +90,15 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({
8990
<PanelLeft
9091
panelWidth={280}
9192
panelResize={true}>
92-
<PanelLeftToolbar panelTitle="Tasks" panelIcon={null}>
93-
<Button
94-
icon={<Add20Regular />}
95-
onClick={onNewTaskButton}
96-
disabled={plansLoading}
97-
>
98-
New task
99-
</Button>
93+
<PanelLeftToolbar panelTitle="Microsoft" panelIcon={<MsftColor />}>
94+
<Tooltip content='New task'>
95+
<Button
96+
icon={<Add20Regular />}
97+
onClick={onNewTaskButton}
98+
disabled={plansLoading}
99+
appearance="transparent"
100+
/>
101+
</Tooltip>
100102
</PanelLeftToolbar>
101103
{plansLoading && (!inProgressTasks.length && !completedTasks.length) ? (
102104
<div style={{ padding: '20px', textAlign: 'center' }}>

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from "react";
2+
3+
import { Button } from "@fluentui/react-components";
4+
import { History20Filled, MoreHorizontalRegular, TaskListSquareLtr20Regular, TaskListSquareLtrFilled } from "@fluentui/react-icons";
5+
import PanelRight from "@/coral/components/Panels/PanelRight";
6+
import PanelRightToolbar from "@/coral/components/Panels/PanelRightToolbar";
7+
import TaskDetails from "./TaskDetails";
8+
9+
10+
11+
interface PlanPanelRightProps {
12+
activeTask: any | null;
13+
onAddAgent: () => void;
14+
onAddHuman: () => void;
15+
}
16+
17+
const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
18+
activeTask,
19+
onAddAgent,
20+
onAddHuman,
21+
}) => {
22+
if (!activeTask) return null;
23+
24+
return (
25+
<PanelRight
26+
panelWidth={450}
27+
defaultClosed={false}
28+
panelResize={true}
29+
panelType="first"
30+
>
31+
<PanelRightToolbar panelTitle="Task Details" panelIcon={<TaskListSquareLtr20Regular />}>
32+
33+
</PanelRightToolbar>
34+
35+
<div >
36+
<TaskDetails
37+
taskName={activeTask.name}
38+
subTasks={activeTask.subTasks}
39+
agents={activeTask.agents}
40+
humans={activeTask.humans}
41+
/>
42+
</div>
43+
</PanelRight>
44+
);
45+
};
46+
47+
export default PlanPanelRight;

‎src/frontend_react/src/pages/HomePage.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import {
1111
} from '@fluentui/react-components';
1212
import {
1313
Add20Regular,
14-
ErrorCircle20Regular
14+
ErrorCircle20Regular,
15+
Sparkle20Filled
1516
} from '@fluentui/react-icons';
1617
import '../styles/PlanPage.css';
1718
import CoralShellColumn from '../coral/components/Layout/CoralShellColumn';
@@ -27,6 +28,7 @@ import { PlanWithSteps } from '../models';
2728
import HomeInput from '@/components/content/HomeInput';
2829
import { NewTaskService } from '../services/NewTaskService';
2930
import PlanPanelLeft from '@/components/content/PlanPanelLeft';
31+
import ContentToolbar from '@/coral/components/Content/ContentToolbar';
3032

3133
/**
3234
* HomePage component - displays task lists and provides navigation
@@ -57,6 +59,10 @@ const HomePage: React.FC = () => {
5759
onNewTaskButton={handleNewTaskButton}
5860
/>
5961
<Content>
62+
<ContentToolbar
63+
panelTitle={"Multi-Agent Planner"}
64+
panelIcon={<Sparkle20Filled />}
65+
></ContentToolbar>
6066
<HomeInput
6167
onInputSubmit={handleNewTask}
6268
onQuickTaskSelect={handleNewTask}

‎src/frontend_react/src/styles/HomeInput.css‎

Lines changed: 26 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
display: flex;
55
flex-direction: column;
66
height: 100%;
7-
background-color: #fafafa; /* tokens.colorNeutralBackground1 */
87
}
98

109
.home-input-content {
@@ -13,7 +12,7 @@
1312
flex-direction: column;
1413
justify-content: center;
1514
align-items: center;
16-
padding: 40px 24px;
15+
padding: 24px;
1716
}
1817

1918
.home-input-center-content {
@@ -29,12 +28,6 @@
2928
margin-bottom: 24px;
3029
}
3130

32-
.home-input-title {
33-
font-size: 28px;
34-
font-weight: 600;
35-
color: #242424; /* tokens.colorNeutralForeground1 */
36-
}
37-
3831
.home-input-input-section {
3932
width: 100%;
4033
margin-bottom: 32px;
@@ -83,82 +76,66 @@
8376

8477
.home-input-quick-tasks-section {
8578
width: 100%;
86-
margin-top: 16px;
79+
margin-top: 8px;
8780
}
8881

8982
.home-input-quick-tasks-header {
9083
display: flex;
9184
justify-content: space-between;
9285
align-items: center;
93-
margin-bottom: 16px;
86+
margin-bottom: 12px;
9487
}
9588

96-
.home-input-quick-tasks-title {
97-
font-size: 1rem; /* tokens.fontSizeBase400 */
98-
font-weight: 600; /* tokens.fontWeightSemibold */
99-
color: #242424; /* tokens.colorNeutralForeground1 */
100-
}
10189

10290
.home-input-quick-tasks {
103-
display: grid;
104-
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
105-
gap: 16px;
91+
display: flex;
92+
gap: 12px;
93+
flex-wrap: wrap;
94+
justify-content: space-between;
10695
}
10796

10897
.home-input-quick-task-card {
109-
cursor: pointer;
98+
flex: 1;
11099
display: flex;
111100
flex-direction: column;
112-
background-color: #fafafa; /* tokens.colorNeutralBackground1 */
113101
padding: 16px;
114-
border: 1px solid #d1d1d1; /* tokens.colorNeutralStroke1 */
102+
background-color: var(--colorNeutralBackground3);
103+
border: 1px solid var(--colorNeutralStroke2);
115104
border-radius: 8px;
105+
cursor: pointer;
106+
box-shadow: none;
116107
}
117108

118-
.home-input-quick-task-card:hover {
119-
background-color: #f5f5f5; /* tokens.colorNeutralBackground2 */
120-
}
121-
122-
.home-input-card-content {
109+
.home-input-quick-task-content {
123110
display: flex;
111+
flex-direction: column;
124112
gap: 12px;
125113
}
126114

127-
.home-input-card-icon {
128-
display: flex;
129-
align-items: center;
130-
justify-content: center;
131-
width: 32px;
132-
height: 32px;
133-
border-radius: 4px;
134-
color: #0f6cbd; /* tokens.colorBrandForeground1 */
115+
.home-input-quick-task-icon {
116+
font-size: 20px;
117+
color: var(--colorBrandForeground1);
118+
margin-top: 2px;
135119
}
136120

137-
.home-input-card-text-content {
121+
.home-input-quick-task-text-content {
138122
display: flex;
139123
flex-direction: column;
140-
gap: 6px;
141-
flex: 1;
124+
gap: 4px;
142125
}
143126

144-
.home-input-card-title {
145-
font-size: 0.875rem; /* tokens.fontSizeBase300 */
146-
font-weight: 600; /* tokens.fontWeightSemibold */
147-
color: #242424; /* tokens.colorNeutralForeground1 */
127+
.home-input-quick-task-description {
128+
color: var(--colorNeutralForeground3);
148129
}
149130

150-
.home-input-card-description {
151-
font-size: 0.75rem; /* tokens.fontSizeBase200 */
152-
color: #616161; /* tokens.colorNeutralForeground2 */
153-
line-height: 1rem; /* tokens.lineHeightBase200 */
131+
.home-input-quick-task-card:hover {
132+
background-color: #f5f5f5; /* tokens.colorNeutralBackground2 */
154133
}
155134

156135
.home-input-ai-footer {
157-
display: flex;
158-
justify-content: flex-end;
159-
width: 100%;
136+
padding-bottom: 8px;
160137
margin-top: 8px;
161-
font-size: 0.625rem; /* tokens.fontSizeBase100 */
138+
text-align: center;
162139
color: #707070; /* tokens.colorNeutralForeground3 */
163140
}
164141

0 commit comments

Comments
 (0)