feat(autogpt_builder): Add basic layout with nav

rnd/autogpt_builder/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

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;

rnd/autogpt_builder/package.json

@@ -9,11 +9,21 @@
     "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",
+    "clsx": "^2.1.1",
     "next": "14.2.4",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "react-modal": "^3.16.1",
-    "reactflow": "^11.11.4"
+    "reactflow": "^11.11.4",
+    "recharts": "^2.12.7",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^20",

rnd/autogpt_builder/src/app/page.tsx → rnd/autogpt_builder/src/app/build/page.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Flow from '../components/Flow';
+import Flow from '@/components/Flow';
 
 export default function Home() {
   return (

rnd/autogpt_builder/src/app/globals.css

@@ -25,9 +25,3 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}

rnd/autogpt_builder/src/app/layout.tsx

@@ -1,22 +1,78 @@
+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 = {
   title: "NextGen AutoGPT",
   description: "Your one stop shop to creating AI Agents",
 };
 
+function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemeProvider {...props}>{children}</NextThemeProvider>
+}
+
+const NavBar = () => (
+  <nav className="bg-background p-4 flex justify-between items-center">
+    <div className="flex space-x-4">
+      <Link href="/monitor" className={buttonVariants({ variant: "ghost" })}>Monitor</Link>
+      <Link href="/build" className={buttonVariants({ variant: "ghost" })}>Build</Link>
+      <Link href="/backtrack" className={buttonVariants({ variant: "ghost" })}>Backtrack</Link>
+      <Link href="/explore" className={buttonVariants({ variant: "ghost" })}>Explore</Link>
+    </div>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 rounded-full">
+          <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <DropdownMenuItem>Switch Workspace</DropdownMenuItem>
+        <DropdownMenuItem>Log out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </nav>
+);
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <div className="min-h-screen bg-background text-foreground">
+            <NavBar />
+            <main className="container mx-auto p-4">
+              {children}
+            </main>
+          </div>
+        </ThemeProvider>
+      </body>
     </html>
   );
 }

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 }) => (
+  <Card>
+    <CardHeader>
+      <CardTitle>Agent Flows</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Last Run</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {flows.map((flow) => (
+            <TableRow key={flow.id} onClick={() => onSelectFlow(flow)} className="cursor-pointer">
+              <TableCell>{flow.name}</TableCell>
+              <TableCell>{flow.status}</TableCell>
+              <TableCell>{flow.lastRun}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </CardContent>
+  </Card>
+);
+
+const FlowRunsList = ({ runs }) => (
+  <Card>
+    <CardHeader>
+      <CardTitle>Flow Runs</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Time</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Duration</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {runs.map((run) => (
+            <TableRow key={run.id}>
+              <TableCell>{run.time}</TableCell>
+              <TableCell>{run.status}</TableCell>
+              <TableCell>{run.duration}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </CardContent>
+  </Card>
+);
+
+const FlowStats = ({ stats }) => (
+  <Card>
+    <CardHeader>
+      <CardTitle>Flow Statistics</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <ResponsiveContainer width="100%" height={300}>
+        <BarChart data={stats}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Bar dataKey="value" fill="#8884d8" />
+        </BarChart>
+      </ResponsiveContainer>
+    </CardContent>
+  </Card>
+);
+
+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 (
+    <div className="grid grid-cols-2 gap-4">
+      <div>
+        <AgentFlowList flows={flows} onSelectFlow={setSelectedFlow} />
+      </div>
+      <div className="space-y-4">
+        <FlowRunsList runs={runs} />
+        <FlowStats stats={stats} />
+      </div>
+      {selectedFlow && (
+        <div className="col-span-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>{selectedFlow.name}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Button>Edit Flow</Button>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Monitor;

rnd/autogpt_builder/src/components/Flow.tsx

@@ -13,6 +13,9 @@ import ReactFlow, {
   Connection,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
+import { ChevronLeftIcon, ChevronRightIcon, PlayIcon } from '@radix-ui/react-icons';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
 import CustomNode from './CustomNode';
 import './flow.css';
 
@@ -61,22 +64,23 @@ const Sidebar: React.FC<{isOpen: boolean, availableNodes: AvailableNode[], addNo
   );
 
   return (
-    <div style={{
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      bottom: 0,
-      width: '250px',
-      backgroundColor: '#333',
-      padding: '20px',
-      zIndex: 4,
-      overflowY: 'auto'
-    }}>
-      <h3 style={{color: '#fff'}}>Nodes</h3>
-      <input
-        type="text"
+    <div
+      className="border rounded-md border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-950"
+      style={{
+        position: 'absolute', // r
+        left: 0, // r
+        top: 0, // r
+        bottom: 0, // r
+        width: '250px',
+        padding: '20px',  // r
+        zIndex: 4,
+        overflowY: 'auto' // r
+      }}
+    >
+      <h3>Nodes</h3>
+      <Input
         placeholder="Search nodes..."
-        style={{width: '100%', marginBottom: '10px', padding: '5px'}}
+        style={{marginBottom: '10px'}}
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
       />
@@ -355,18 +359,24 @@ const Flow: React.FC = () => {
 
   return (
     <div style={{ height: '100vh', width: '100%' }}>
-      <button
+      <Button
         onClick={toggleSidebar}
+        variant="outline"
         style={{
           position: 'absolute',
           left: isSidebarOpen ? '260px' : '10px',
           top: '10px',
           zIndex: 5,
           transition: 'left 0.3s'
         }}
+        size="icon"
       >
-        {isSidebarOpen ? 'Hide Sidebar' : 'Show Sidebar'}
-      </button>
+        {
+          isSidebarOpen
+            ? <ChevronLeftIcon className='h-4 w-4'></ChevronLeftIcon>
+            : <ChevronRightIcon className='h-4 w-4'></ChevronRightIcon>
+        }
+      </Button>
       <Sidebar isOpen={isSidebarOpen} availableNodes={availableNodes} addNode={addNode} />
       <ReactFlow
         nodes={nodes}
@@ -377,11 +387,13 @@ const Flow: React.FC = () => {
         nodeTypes={nodeTypes}
       >
         <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
-          <button onClick={runAgent}>Run Agent</button>
+          <Button variant="outline" onClick={runAgent}>
+            <PlayIcon className="mr-2 h-4 w-4" /> Run Agent
+          </Button>
         </div>
       </ReactFlow>
     </div>
   );
 };
 
-export default Flow;
+export default Flow;