working on runtime executions

web/src/App.tsx

@@ -1,3 +1,4 @@
+import { lazy, Suspense } from "react";
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { AuthProvider } from "@/contexts/AuthContext";
@@ -5,28 +6,49 @@ import { WebSocketProvider } from "@/contexts/WebSocketContext";
 import { queryClient } from "@/lib/query-client";
 import ProtectedRoute from "@/components/common/ProtectedRoute";
 import MainLayout from "@/components/layout/MainLayout";
-import LoginPage from "@/pages/auth/LoginPage";
-import DashboardPage from "@/pages/dashboard/DashboardPage";
-import PacksPage from "@/pages/packs/PacksPage";
-import PackCreatePage from "@/pages/packs/PackCreatePage";
-import PackRegisterPage from "@/pages/packs/PackRegisterPage";
-import PackInstallPage from "@/pages/packs/PackInstallPage";
-import PackEditPage from "@/pages/packs/PackEditPage";
-import ActionsPage from "@/pages/actions/ActionsPage";
-import RulesPage from "@/pages/rules/RulesPage";
-import RuleCreatePage from "@/pages/rules/RuleCreatePage";
-import RuleEditPage from "@/pages/rules/RuleEditPage";
-import ExecutionsPage from "@/pages/executions/ExecutionsPage";
-import ExecutionDetailPage from "@/pages/executions/ExecutionDetailPage";
-import EventsPage from "@/pages/events/EventsPage";
-import EventDetailPage from "@/pages/events/EventDetailPage";
-import EnforcementsPage from "@/pages/enforcements/EnforcementsPage";
-import EnforcementDetailPage from "@/pages/enforcements/EnforcementDetailPage";
-import KeysPage from "@/pages/keys/KeysPage";
-import TriggersPage from "@/pages/triggers/TriggersPage";
-import TriggerCreatePage from "@/pages/triggers/TriggerCreatePage";
-import TriggerEditPage from "@/pages/triggers/TriggerEditPage";
-import SensorsPage from "@/pages/sensors/SensorsPage";
+
+// Lazy-loaded page components for code splitting
+const LoginPage = lazy(() => import("@/pages/auth/LoginPage"));
+const DashboardPage = lazy(() => import("@/pages/dashboard/DashboardPage"));
+const PacksPage = lazy(() => import("@/pages/packs/PacksPage"));
+const PackCreatePage = lazy(() => import("@/pages/packs/PackCreatePage"));
+const PackRegisterPage = lazy(() => import("@/pages/packs/PackRegisterPage"));
+const PackInstallPage = lazy(() => import("@/pages/packs/PackInstallPage"));
+const PackEditPage = lazy(() => import("@/pages/packs/PackEditPage"));
+const ActionsPage = lazy(() => import("@/pages/actions/ActionsPage"));
+const RulesPage = lazy(() => import("@/pages/rules/RulesPage"));
+const RuleCreatePage = lazy(() => import("@/pages/rules/RuleCreatePage"));
+const RuleEditPage = lazy(() => import("@/pages/rules/RuleEditPage"));
+const ExecutionsPage = lazy(() => import("@/pages/executions/ExecutionsPage"));
+const ExecutionDetailPage = lazy(
+  () => import("@/pages/executions/ExecutionDetailPage"),
+);
+const EventsPage = lazy(() => import("@/pages/events/EventsPage"));
+const EventDetailPage = lazy(() => import("@/pages/events/EventDetailPage"));
+const EnforcementsPage = lazy(
+  () => import("@/pages/enforcements/EnforcementsPage"),
+);
+const EnforcementDetailPage = lazy(
+  () => import("@/pages/enforcements/EnforcementDetailPage"),
+);
+const KeysPage = lazy(() => import("@/pages/keys/KeysPage"));
+const TriggersPage = lazy(() => import("@/pages/triggers/TriggersPage"));
+const TriggerCreatePage = lazy(
+  () => import("@/pages/triggers/TriggerCreatePage"),
+);
+const TriggerEditPage = lazy(() => import("@/pages/triggers/TriggerEditPage"));
+const SensorsPage = lazy(() => import("@/pages/sensors/SensorsPage"));
+
+function PageLoader() {
+  return (
+    <div className="flex items-center justify-center h-64">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+        <p className="mt-3 text-sm text-gray-500">Loading…</p>
+      </div>
+    </div>
+  );
+}
 
 function App() {
   return (
@@ -34,59 +56,64 @@ function App() {
       <AuthProvider>
         <WebSocketProvider>
           <BrowserRouter>
-            <Routes>
-              {/* Public routes */}
-              <Route path="/login" element={<LoginPage />} />
+            <Suspense fallback={<PageLoader />}>
+              <Routes>
+                {/* Public routes */}
+                <Route path="/login" element={<LoginPage />} />
 
-              {/* Protected routes */}
-              <Route
-                path="/"
-                element={
-                  <ProtectedRoute>
-                    <MainLayout />
-                  </ProtectedRoute>
-                }
-              >
-                <Route index element={<DashboardPage />} />
-                <Route path="packs" element={<PacksPage />} />
-                <Route path="packs/new" element={<PackCreatePage />} />
-                <Route path="packs/register" element={<PackRegisterPage />} />
-                <Route path="packs/install" element={<PackInstallPage />} />
-                <Route path="packs/:ref" element={<PacksPage />} />
-                <Route path="packs/:ref/edit" element={<PackEditPage />} />
-                <Route path="actions" element={<ActionsPage />} />
-                <Route path="actions/:ref" element={<ActionsPage />} />
-                <Route path="rules" element={<RulesPage />} />
-                <Route path="rules/new" element={<RuleCreatePage />} />
-                <Route path="rules/:ref" element={<RulesPage />} />
-                <Route path="rules/:ref/edit" element={<RuleEditPage />} />
-                <Route path="executions" element={<ExecutionsPage />} />
+                {/* Protected routes */}
                 <Route
-                  path="executions/:id"
-                  element={<ExecutionDetailPage />}
-                />
-                <Route path="events" element={<EventsPage />} />
-                <Route path="events/:id" element={<EventDetailPage />} />
-                <Route path="enforcements" element={<EnforcementsPage />} />
-                <Route
-                  path="enforcements/:id"
-                  element={<EnforcementDetailPage />}
-                />
-                <Route path="keys" element={<KeysPage />} />
-                <Route path="triggers" element={<TriggersPage />} />
-                <Route path="triggers/create" element={<TriggerCreatePage />} />
-                <Route path="triggers/:ref" element={<TriggersPage />} />
-                <Route
-                  path="triggers/:ref/edit"
-                  element={<TriggerEditPage />}
-                />
-                <Route path="sensors" element={<SensorsPage />} />
-                <Route path="sensors/:ref" element={<SensorsPage />} />
-              </Route>
+                  path="/"
+                  element={
+                    <ProtectedRoute>
+                      <MainLayout />
+                    </ProtectedRoute>
+                  }
+                >
+                  <Route index element={<DashboardPage />} />
+                  <Route path="packs" element={<PacksPage />} />
+                  <Route path="packs/new" element={<PackCreatePage />} />
+                  <Route path="packs/register" element={<PackRegisterPage />} />
+                  <Route path="packs/install" element={<PackInstallPage />} />
+                  <Route path="packs/:ref" element={<PacksPage />} />
+                  <Route path="packs/:ref/edit" element={<PackEditPage />} />
+                  <Route path="actions" element={<ActionsPage />} />
+                  <Route path="actions/:ref" element={<ActionsPage />} />
+                  <Route path="rules" element={<RulesPage />} />
+                  <Route path="rules/new" element={<RuleCreatePage />} />
+                  <Route path="rules/:ref" element={<RulesPage />} />
+                  <Route path="rules/:ref/edit" element={<RuleEditPage />} />
+                  <Route path="executions" element={<ExecutionsPage />} />
+                  <Route
+                    path="executions/:id"
+                    element={<ExecutionDetailPage />}
+                  />
+                  <Route path="events" element={<EventsPage />} />
+                  <Route path="events/:id" element={<EventDetailPage />} />
+                  <Route path="enforcements" element={<EnforcementsPage />} />
+                  <Route
+                    path="enforcements/:id"
+                    element={<EnforcementDetailPage />}
+                  />
+                  <Route path="keys" element={<KeysPage />} />
+                  <Route path="triggers" element={<TriggersPage />} />
+                  <Route
+                    path="triggers/create"
+                    element={<TriggerCreatePage />}
+                  />
+                  <Route path="triggers/:ref" element={<TriggersPage />} />
+                  <Route
+                    path="triggers/:ref/edit"
+                    element={<TriggerEditPage />}
+                  />
+                  <Route path="sensors" element={<SensorsPage />} />
+                  <Route path="sensors/:ref" element={<SensorsPage />} />
+                </Route>
 
-              {/* Catch all - redirect to dashboard */}
-              <Route path="*" element={<Navigate to="/" replace />} />
-            </Routes>
+                {/* Catch all - redirect to dashboard */}
+                <Route path="*" element={<Navigate to="/" replace />} />
+              </Routes>
+            </Suspense>
           </BrowserRouter>
         </WebSocketProvider>
       </AuthProvider>

web/src/components/forms/PackForm.tsx

@@ -31,7 +31,7 @@ export default function PackForm({ pack, onSuccess, onCancel }: PackFormProps) {
   const [description, setDescription] = useState(pack?.description || "");
   const [version, setVersion] = useState(pack?.version || "1.0.0");
   const [tags, setTags] = useState(pack?.tags?.join(", ") || "");
-  const [deps, setDeps] = useState(pack?.dependencies?.join(", ") || "");
+  const [deps, setDeps] = useState(pack?.runtime_deps?.join(", ") || "");
   const [isStandard, setIsStandard] = useState(pack?.is_standard ?? false);
 
   const [configValues, setConfigValues] =
@@ -132,10 +132,10 @@ export default function PackForm({ pack, onSuccess, onCancel }: PackFormProps) {
       .split(",")
       .map((t) => t.trim())
       .filter((t) => t);
-    const depsList = deps
+    const depsList: string[] = deps
       .split(",")
-      .map((d) => d.trim())
-      .filter((d) => d);
+      .map((d: string) => d.trim())
+      .filter((d: string) => d);
 
     try {
       if (isEditing) {
@@ -147,7 +147,7 @@ export default function PackForm({ pack, onSuccess, onCancel }: PackFormProps) {
           config: configValues,
           meta: parsedMeta,
           tags: tagsList,
-          dependencies: depsList,
+          runtime_deps: depsList,
           is_standard: isStandard,
         };
         await updatePack.mutateAsync({ ref: pack!.ref, data: updateData });
@@ -164,7 +164,7 @@ export default function PackForm({ pack, onSuccess, onCancel }: PackFormProps) {
           config: configValues,
           meta: parsedMeta,
           tags: tagsList,
-          dependencies: depsList,
+          runtime_deps: depsList,
           is_standard: isStandard,
         };
         const newPackResponse = await createPack.mutateAsync(createData);