diff --git a/rnd/autogpt_builder/next.config.mjs b/rnd/autogpt_builder/next.config.mjs index 4678774e6..a8c71eb4c 100644 --- a/rnd/autogpt_builder/next.config.mjs +++ b/rnd/autogpt_builder/next.config.mjs @@ -1,4 +1,14 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + async redirects() { + return [ + { + source: '/', + destination: '/build', + permanent: false, + }, + ] + } +}; export default nextConfig; diff --git a/rnd/autogpt_builder/package.json b/rnd/autogpt_builder/package.json index 51bda62d1..83a212bfb 100644 --- a/rnd/autogpt_builder/package.json +++ b/rnd/autogpt_builder/package.json @@ -9,6 +9,8 @@ "lint": "next lint" }, "dependencies": { + "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.1.0", "class-variance-authority": "^0.7.0", @@ -20,6 +22,7 @@ "react-dom": "^18", "react-modal": "^3.16.1", "reactflow": "^11.11.4", + "recharts": "^2.12.7", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7" }, diff --git a/rnd/autogpt_builder/src/app/page.tsx b/rnd/autogpt_builder/src/app/build/page.tsx similarity index 79% rename from rnd/autogpt_builder/src/app/page.tsx rename to rnd/autogpt_builder/src/app/build/page.tsx index f684f594e..fd9e7ca3e 100644 --- a/rnd/autogpt_builder/src/app/page.tsx +++ b/rnd/autogpt_builder/src/app/build/page.tsx @@ -5,14 +5,15 @@ import FlowEditor from '@/components/Flow'; export default function Home() { return ( -
-
+
+

Get started by adding a  node

+ className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none" + >
-
- -
+
-
+ ); } diff --git a/rnd/autogpt_builder/src/app/layout.tsx b/rnd/autogpt_builder/src/app/layout.tsx index 8b96a8e4a..ad886a2be 100644 --- a/rnd/autogpt_builder/src/app/layout.tsx +++ b/rnd/autogpt_builder/src/app/layout.tsx @@ -1,9 +1,18 @@ +import React from 'react'; import type { Metadata } from "next"; import { ThemeProvider as NextThemeProvider } from "next-themes"; import { type ThemeProviderProps } from "next-themes/dist/types"; import { Inter } from "next/font/google"; +import Link from "next/link"; + import "./globals.css"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Button, buttonVariants } from "@/components/ui/button"; +import { + DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger +} from "@/components/ui/dropdown-menu"; + const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { @@ -15,6 +24,33 @@ function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } +const NavBar = () => ( + +); + export default function RootLayout({ children, }: Readonly<{ @@ -29,7 +65,12 @@ export default function RootLayout({ enableSystem disableTransitionOnChange > - {children} +
+ +
+ {children} +
+
diff --git a/rnd/autogpt_builder/src/app/monitor/page.tsx b/rnd/autogpt_builder/src/app/monitor/page.tsx new file mode 100644 index 000000000..68ee10324 --- /dev/null +++ b/rnd/autogpt_builder/src/app/monitor/page.tsx @@ -0,0 +1,129 @@ +"use client"; +import React, { useState } from 'react'; +import { Button } from "@/components/ui/button" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" +import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; + +const AgentFlowList = ({ flows, onSelectFlow }) => ( + + + Agent Flows + + + + + + Name + Status + Last Run + + + + {flows.map((flow) => ( + onSelectFlow(flow)} className="cursor-pointer"> + {flow.name} + {flow.status} + {flow.lastRun} + + ))} + +
+ + +); + +const FlowRunsList = ({ runs }) => ( + + + Flow Runs + + + + + + Time + Status + Duration + + + + {runs.map((run) => ( + + {run.time} + {run.status} + {run.duration} + + ))} + +
+ + +); + +const FlowStats = ({ stats }) => ( + + + Flow Statistics + + + + + + + + + + + + + +); + +const Monitor = () => { + const [selectedFlow, setSelectedFlow] = useState(null); + + // Mock data + const flows = [ + { id: 1, name: 'JARVIS', status: 'Waiting for input', lastRun: '5 minutes ago' }, + { id: 2, name: 'Time machine', status: 'Crashed', lastRun: '10 minutes ago' }, + { id: 3, name: 'BlueSky digest', status: 'Running', lastRun: '2 minutes ago' }, + ]; + + const runs = [ + { id: 1, time: '12:34', status: 'Success', duration: '1m 26s' }, + { id: 2, time: '11:49', status: 'Success', duration: '55s' }, + { id: 3, time: '11:23', status: 'Success', duration: '48s' }, + ]; + + const stats = [ + { name: 'Last 24 Hours', value: 16 }, + { name: 'Last 30 Days', value: 106 }, + ]; + + return ( +
+
+ +
+
+ + +
+ {selectedFlow && ( +
+ + + {selectedFlow.name} + + + + + +
+ )} +
+ ); +}; + +export default Monitor; diff --git a/rnd/autogpt_builder/src/components/Flow.tsx b/rnd/autogpt_builder/src/components/Flow.tsx index 66b2e57f8..413829417 100644 --- a/rnd/autogpt_builder/src/components/Flow.tsx +++ b/rnd/autogpt_builder/src/components/Flow.tsx @@ -63,7 +63,10 @@ const Sidebar: React.FC<{isOpen: boolean, availableNodes: Block[], addNode: (id: ); }; -const FlowEditor: React.FC<{ flowID?: string }> = ({ flowID }) => { +const FlowEditor: React.FC<{ flowID?: string; className?: string }> = ({ + flowID, + className, +}) => { const [nodes, setNodes] = useState[]>([]); const [edges, setEdges] = useState([]); const [nodeId, setNodeId] = useState(1); @@ -368,7 +371,7 @@ const updateNodesWithExecutionData = (executionData: any[]) => { const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen); return ( -
+