Massive web cleanup.

webui/.eslintrc.js

@@ -7,4 +7,12 @@ module.exports = {
   parserOptions: {
     project: true,
   },
-};
+  overrides: [
+    {
+      files: ["tailwind.config.js"],
+      parserOptions: {
+        project: null,
+      },
+    },
+  ],
+};

webui/apps/eidolon-ui2/app/eidolon-apps/chatbot/app_manifest.json

@@ -11,7 +11,7 @@
     "inputLabel": "How can I help you?",
     "titleOperationName": "generate_title",
     "allowSpeech": true,
-    "speechAgent": "speech-agent",
+    "speechAgent": "speech_agent",
     "speechOperation": "speech_to_text"
   }
 }

webui/apps/eidolon-ui2/app/eidolon-apps/control-k8s/page.tsx

@@ -1,18 +1,14 @@
-import {NextPage} from "next";
-import {Box, Typography} from "@mui/material";
+import React from 'react';
+import { NextPage } from "next";
 
 const DevTools: NextPage = () => {
   return (
-    <Box component="main" sx={{
-      flexGrow: 1, p: 3, alignItems: "center", height: "100%", display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-    }}>
-      <Typography paragraph variant={"h3"}>
+    <main className="flex-grow p-6 flex flex-col items-center justify-center min-h-screen">
+      <h1 className="text-3xl font-bold text-center">
         Eidolon Kubernetes Controller
-      </Typography>
-    </Box>
+      </h1>
+    </main>
   );
 }
 
-export default DevTools;
+export default DevTools;

webui/apps/eidolon-ui2/app/eidolon-apps/dev-tool/[processId]/page.tsx

@@ -1,63 +1,14 @@
 'use client'
 
-import * as React from "react";
-import {useEffect} from "react";
-import {DevPanel, DevParams, EidolonApp, getApps, getOperations, getProcessStatus} from "@eidolon-ai/components/client";
-import {ProcessStatus} from "@eidolon-ai/client";
+import {EidolonChatPanel} from "@/components/eidolon-chat-panel.tsx";
 
 export interface ProcessPageProps {
   params: {
+    app_name: string
     processId: string
   }
 }
 
 export default function ({params}: ProcessPageProps) {
-  const app_name = "dev-tool"
-  const [app, setApp] = React.useState<EidolonApp | undefined>(undefined)
-  const [error, setError] = React.useState<string | undefined>(undefined)
-
-  useEffect(() => {
-    getApps().then((apps: Record<string, EidolonApp>) => {
-      const app = apps[app_name]
-      if (!app) {
-        throw new Error("App not found")
-      } else {
-        const machineUrl = app.location!
-        return getProcessStatus(machineUrl, params.processId).then((processStatus: ProcessStatus) => {
-          return {processStatus, app}
-        })
-      }
-    })
-      .then((resp: any) => {
-        const {processStatus, app} = resp!
-        if (!processStatus) {
-          throw new Error("Process not found")
-        } else {
-          app.params.agent = processStatus.agent
-          return getOperations(processStatus.machine, processStatus.agent).then((operations: any) => {
-            return {operations, app}
-          })
-        }
-      })
-      .then((res: any) => {
-        const {operations, app} = res!
-        const options = app.params as DevParams
-        options.operations = operations
-        setApp(app)
-      })
-      .catch((e: Error) => {
-        setError(e.message)
-      })
-  }, [params.processId]);
-
-
-  if (error) {
-    return <div>{error}</div>
-  }
-  if (!app) {
-    return <div>Loading...</div>
-  }
-  return (
-    <DevPanel machineUrl={app?.location!} devParams={app?.params as DevParams} processId={params.processId}/>
-  )
+  return <EidolonChatPanel app_name={"dev-tool"} processId={params.processId} advanced_input={true}/>
 }

webui/apps/eidolon-ui2/app/eidolon-apps/dev-tool/components/start-program-dialog.tsx

@@ -1,51 +1,92 @@
 'use client'
 
-import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Typography} from "@mui/material";
-import * as React from "react";
-import {usePathname, useRouter} from "next/navigation";
-import {ChooseAgentForm, getAppPathFromPath} from "@eidolon-ai/components/client";
+import { useEffect, useRef } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { X } from 'lucide-react';
+import { ChooseAgentForm, getAppPathFromPath } from '@eidolon-ai/components/client';
 
-export function StartProgramDialog({open, onClose, machineUrl, defaultAgent}: { machineUrl: string, open: boolean, defaultAgent?: string, onClose: (wasCanceled: boolean) => void }) {
-  const router = useRouter()
-  const pathname = usePathname()
+interface StartProgramDialogProps {
+  machineUrl: string;
+  open: boolean;
+  defaultAgent?: string;
+  onClose: (wasCanceled: boolean) => void;
+}
+
+export function StartProgramDialog({ open, onClose, machineUrl, defaultAgent }: StartProgramDialogProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose(true);
+      }
+    };
+
+    if (open) {
+      document.addEventListener('keydown', handleEscape);
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+      };
+    }
+  }, [open, onClose]);
 
   const handleCancel = () => {
     onClose(true);
-  }
+  };
 
   const handleSubmit = (processId: string) => {
-    const appPath = getAppPathFromPath(pathname)
+    const appPath = getAppPathFromPath(pathname);
     if (appPath) {
-      router.push(appPath  + `/${processId}`)
-      onClose(false)
+      router.push(`${appPath}/${processId}`);
+      onClose(false);
     }
-  }
+  };
+
+  if (!open) return null;
 
   return (
-    <Dialog
-      open={open}
-      scroll={"paper"}
-      keepMounted={true}
-      PaperProps={{
-        style: {width: '50%'}
-      }}
-    >
-      <DialogTitle style={{cursor: 'move'}} id="draggable-dialog-title">
-        Start a new chat
-        <Typography variant={"body1"}>Choose the agent and then click Start.</Typography>
-      </DialogTitle>
-      <Divider/>
-      <DialogContent>
-        <ChooseAgentForm
-          machineUrl={machineUrl}
-          handleSubmit={handleSubmit}
-          defaultAgent={defaultAgent}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={handleCancel}>Cancel</Button>
-        <Button form="start-program-form" type="submit">Start</Button>
-      </DialogActions>
-    </Dialog>
-  )
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div
+        ref={dialogRef}
+        className="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 overflow-hidden"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div className="p-6">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-xl font-semibold">Start a new chat</h2>
+            <button onClick={handleCancel} className="text-gray-500 hover:text-gray-700">
+              <X className="h-6 w-6" />
+            </button>
+          </div>
+          <p className="text-sm text-gray-500 mb-4">Choose the agent and then click Start.</p>
+          <div className="border-t border-gray-200 my-4"></div>
+          <div className="py-4">
+            <ChooseAgentForm
+              machineUrl={machineUrl}
+              handleSubmit={handleSubmit}
+              defaultAgent={defaultAgent}
+            />
+          </div>
+          <div className="flex justify-end space-x-4 mt-6">
+            <button
+              onClick={handleCancel}
+              className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            >
+              Cancel
+            </button>
+            <button
+              form="start-program-form"
+              type="submit"
+              className="px-4 py-2 bg-indigo-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            >
+              Start
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }

webui/apps/eidolon-ui2/app/eidolon-apps/dev-tool/layout.tsx

@@ -1,5 +1,6 @@
 import {ProcessWithListLayout} from "../../../components/ProcessWithListLayout"
 import {getApp} from "@/utils/eidolon-apps";
+import {ProcessProvider} from "@eidolon-ai/components/client";
 
 interface DevToolLayoutProps {
   children: JSX.Element
@@ -9,7 +10,9 @@ export default function DevToolLayout({children}: DevToolLayoutProps) {
   const app = getApp('dev-tool')!
   return (
     <ProcessWithListLayout app={app}>
-      {children}
+      <ProcessProvider>
+        {children}
+      </ProcessProvider>
     </ProcessWithListLayout>
   )
 }

webui/apps/eidolon-ui2/app/eidolon-apps/dev-tool/page.tsx

@@ -1,19 +1,35 @@
-import {NextPage} from "next";
-import {Box, Typography} from "@mui/material";
+'use client'
 
-export const revalidate = 0
+import React from 'react';
+import Image from 'next/image';
+import { getApp } from "@/utils/eidolon-apps";
+
+export interface HomePageProps {
+  params: {
+    app_name: string
+  }
+}
+
+const DevTools = ({ params }: HomePageProps) => {
+  const app = getApp(params.app_name)!
 
-const DevTools: NextPage = () => {
   return (
-    <Box component="main" sx={{
-      flexGrow: 1, p: 3, alignItems: "center", height: "100%", display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-    }}>
-      <Typography paragraph variant={"h3"}>
-        Eidolon DevTool
-      </Typography>
-    </Box>
+    <main className="flex-grow p-6 flex flex-col items-center justify-center min-h-screen">
+      <div className="bg-white rounded-lg shadow-md overflow-hidden max-w-md w-full">
+        <div className="relative h-48 w-full">
+          <Image
+            src={app.image}
+            alt={app.name}
+            layout="fill"
+            objectFit="cover"
+          />
+        </div>
+        <div className="p-4">
+          <h2 className="text-xl font-semibold mb-2">{app.name}</h2>
+          <p className="text-sm text-gray-600">{app.description}</p>
+        </div>
+      </div>
+    </main>
   );
 }