Rebase

client/.eslintrc.cjs

@@ -45,8 +45,10 @@ module.exports = {
         ignore: ['^(vite)*'],
       },
     ],
+    'unicorn/no-array-for-each': 0,
     'unicorn/no-null': 0,
     'unicorn/prevent-abbreviations': 0,
+    'unicorn/prefer-add-event-listener': 0,
     'unicorn/prefer-query-selector': 0,
     'import/no-unresolved': [
       2,

client/package.json

@@ -42,13 +42,15 @@
     "react-hook-form": "^7.51.5",
     "react-i18next": "^14.1.2",
     "react-router-dom": "^6.23.1",
-    "reactflow": "^11.11.3"
+    "reactflow": "^11.11.3",
+    "websocket": "^1.0.35"
   },
   "devDependencies": {
     "@types/lodash": "^4",
     "@types/node": "^18.19.34",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/websocket": "^1.0.10",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^7.12.0",
     "@vitejs/plugin-react": "^4.3.0",

client/src/App.tsx

@@ -3,17 +3,23 @@ import { RefineKbar, RefineKbarProvider } from '@refinedev/kbar'
 import { ErrorComponent, useNotificationProvider } from '@refinedev/mui'
 import routerBindings, {
   DocumentTitleHandler,
-  NavigateToResource,
   UnsavedChangesNotifier,
 } from '@refinedev/react-router-v6'
-import * as React from 'react'
-import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom'
+import {
+  BrowserRouter,
+  Navigate,
+  Outlet,
+  Route,
+  Routes,
+} from 'react-router-dom'
 
 import { ThemedLayoutV2 } from './components/layout'
 import { ThemedHeaderV2 } from './components/layout/Header'
 import { ThemedSiderV2 } from './components/layout/Sider'
 import { ThemedTitleV2 } from './components/layout/Title'
 import { ActionProvider } from './context/ActionContext'
+import AppProvider from './context/AppContext'
+import { liveProvider } from './live-provider'
 import { ActionList, ActionShow } from './pages/actions'
 import { FlowShow } from './pages/flow'
 import { dataProvider as launchrDataProvider } from './rest-data-provider'
@@ -23,73 +29,67 @@ const apiUrl = import.meta.env.VITE_API_URL
 
 export function App() {
   return (
-    <BrowserRouter>
-      <RefineKbarProvider>
-        <ThemeProvider>
-          <Refine
-            dataProvider={{
-              default: launchrDataProvider(apiUrl),
-            }}
-            notificationProvider={useNotificationProvider}
-            routerProvider={routerBindings}
-            resources={[
-              {
-                name: 'actions',
-                list: '/actions',
-                show: '/actions/:id/show',
-                // edit: "/actions/:id/edit",
-                meta: {
-                  canDelete: false,
-                },
-              },
-            ]}
-            options={{
-              // syncWithLocation: true,
-              warnWhenUnsavedChanges: true,
-            }}
-          >
-            <Routes>
-              <Route
-                element={
-                  <ThemedLayoutV2
-                    Header={ThemedHeaderV2}
-                    Sider={ThemedSiderV2}
-                    Title={ThemedTitleV2}
-                  >
-                    <Outlet />
-                  </ThemedLayoutV2>
-                }
+    <AppProvider>
+      <ActionProvider>
+        <BrowserRouter>
+          <RefineKbarProvider>
+            <ThemeProvider>
+              <Refine
+                dataProvider={{
+                  default: launchrDataProvider(apiUrl),
+                }}
+                liveProvider={liveProvider}
+                notificationProvider={useNotificationProvider}
+                routerProvider={routerBindings}
+                resources={[
+                  {
+                    name: 'actions',
+                    list: '/actions',
+                    show: '/actions/:id/show',
+                    // edit: "/actions/:id/edit",
+                    meta: {
+                      canDelete: false,
+                    },
+                  },
+                ]}
+                options={{
+                  liveMode: 'manual',
+                }}
               >
-                <Route
-                  index
-                  element={<NavigateToResource resource="actions" />}
-                />
-                <Route path="/actions">
-                  <Route index element={<ActionList />} />
-                  <Route path=":id/show" element={<ActionShow />} />
-                  {/*<Route path=":id/running/:runId" element={<ActionAttach />} />*/}
-                  {/*<Route path=":id/edit" element={<ActionEdit />} />*/}
-                </Route>
-                <Route path="/flow">
+                <Routes>
                   <Route
-                    index
                     element={
-                      <ActionProvider>
-                        <FlowShow />
-                      </ActionProvider>
+                      <ThemedLayoutV2
+                        Header={ThemedHeaderV2}
+                        Sider={ThemedSiderV2}
+                        Title={ThemedTitleV2}
+                      >
+                        <Outlet />
+                      </ThemedLayoutV2>
                     }
-                  />
-                </Route>
-                <Route path="*" element={<ErrorComponent />} />
-              </Route>
-            </Routes>
+                  >
+                    <Route index element={<Navigate to="/flow" replace />} />
+                    <Route path="/actions">
+                      <Route index element={<ActionList />} />
+                      <Route path=":id/show" element={<ActionShow />} />
+                      {/*<Route path=":id/running/:runId" element={<ActionAttach />} />*/}
+                      {/*<Route path=":id/edit" element={<ActionEdit />} />*/}
+                    </Route>
+                    <Route path="/flow">
+                      <Route index element={<FlowShow />} />
+                    </Route>
+                    <Route path="*" element={<ErrorComponent />} />
+                  </Route>
+                </Routes>
 
-            <RefineKbar />
-            <UnsavedChangesNotifier />
-            <DocumentTitleHandler />
-          </Refine>
-        </ThemeProvider>
-      </RefineKbarProvider>
-    </BrowserRouter>
+                <RefineKbar />
+                <UnsavedChangesNotifier />
+                <DocumentTitleHandler />
+              </Refine>
+            </ThemeProvider>
+          </RefineKbarProvider>
+        </BrowserRouter>
+      </ActionProvider>
+    </AppProvider>
   )
 }

client/src/components/AnimatedFab.tsx

@@ -0,0 +1,50 @@
+import TerminalIcon from '@mui/icons-material/Terminal'
+import Badge from '@mui/material/Badge'
+import Fab from '@mui/material/Fab'
+import { styled } from '@mui/system'
+import { useEffect, useState } from 'react'
+
+const AnimatedBadge = styled(Badge)(() => ({
+  transition: 'transform 0.3s ease-in-out',
+  '&.animate': {
+    transform: 'scale(1.5)',
+  },
+}))
+
+interface IAnimatedFabProps {
+  badgeLength: number
+  handleOpen: () => void
+}
+
+const AnimatedFab = ({ badgeLength, handleOpen }: IAnimatedFabProps) => {
+  const [animate, setAnimate] = useState(false)
+  const [prevBadgeLength, setPrevBadgeLength] = useState(badgeLength)
+
+  useEffect(() => {
+    if (badgeLength !== prevBadgeLength && badgeLength > 0) {
+      setAnimate(true)
+      const timeout = setTimeout(() => setAnimate(false), 300)
+      return () => clearTimeout(timeout)
+    }
+    setPrevBadgeLength(badgeLength)
+  }, [badgeLength, prevBadgeLength])
+
+  return (
+    <Fab
+      color="primary"
+      aria-label="status"
+      onClick={handleOpen}
+      style={{ position: 'fixed', bottom: 16, right: 16, zIndex: 1000 }}
+    >
+      <AnimatedBadge
+        badgeContent={badgeLength}
+        color="secondary"
+        className={animate ? 'animate' : ''}
+      >
+        <TerminalIcon />
+      </AnimatedBadge>
+    </Fab>
+  )
+}
+
+export { AnimatedFab }