quidproquo-web-admin 0.1.1 → 0.1.2

package/lib/commonjs/Auth/Auth.js

@@ -24,7 +24,7 @@ function Auth({ children }) {
     if (((_c = state.authenticateUserResponse) === null || _c === void 0 ? void 0 : _c.challenge) === quidproquo_core_1.AuthenticateUserChallenge.MFA_SETUP) {
         return ((0, jsx_runtime_1.jsx)(quidproquo_web_react_1.QpqRuntimeEffectCatcher, { runtime: logic_1.authRuntime, children: (0, jsx_runtime_1.jsx)(AuthChallengeMfaSetup_1.AuthChallengeMfaSetup, { authState: state }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(quidproquo_web_react_1.QpqRuntimeEffectCatcher, { runtime: logic_1.authRuntime, children: [!isAuthenticated && ((0, jsx_runtime_1.jsx)(Login_1.Login, { setUsername: api.authUISetUsername, setPassword: api.authUISetPassword, username: state.username, password: state.password, onLogin: api.authLogin })), isAuthenticated && ((0, jsx_runtime_1.jsx)(quidproquo_web_react_1.authContext.Provider, { value: {
+    return ((0, jsx_runtime_1.jsxs)(quidproquo_web_react_1.QpqRuntimeEffectCatcher, { runtime: logic_1.authRuntime, children: [!isAuthenticated && ((0, jsx_runtime_1.jsx)(Login_1.Login, { onLogin: api.authLogin, password: state.password, setPassword: api.authUISetPassword, setUsername: api.authUISetUsername, username: state.username })), isAuthenticated && ((0, jsx_runtime_1.jsx)(quidproquo_web_react_1.authContext.Provider, { value: {
                     challenge: (_d = state.authenticateUserResponse) === null || _d === void 0 ? void 0 : _d.challenge,
                     session: (_e = state.authenticateUserResponse) === null || _e === void 0 ? void 0 : _e.session,
                     username: state.username,

package/lib/commonjs/Auth/AuthChallengeMfaSetup/AuthChallengeMfaSetup.js

@@ -46,5 +46,5 @@ function AuthChallengeMfaSetup({ authState }) {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-        }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "h5", gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Lock_1.default, { sx: { marginRight: 1 } }), "Set Up Authenticator"] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", color: "text.secondary", children: "Add this account to your authenticator app, then enter the 6-digit code it generates." }) }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { item: true, xs: 12, children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", color: "text.secondary", children: "Secret key" }), (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body1", sx: { fontFamily: 'monospace', wordBreak: 'break-all' }, children: state.secretCode || 'Loading…' })] }), state.secretCode && ((0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", color: "text.secondary", sx: { wordBreak: 'break-all' }, children: buildOtpAuthUri(authState.username, state.secretCode) }) })), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { required: true, fullWidth: true, id: "mfaCode", label: "Authentication Code", autoFocus: true, inputProps: { inputMode: 'numeric', pattern: '[0-9]*', maxLength: 6 }, value: state.mfaCode, onChange: (event) => api.authChallengeSetMfaSetupCode(event.target.value.replace(/\D/g, '')) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(components_1.AsyncButton, { onClick: () => api.authChallengeSendMfaSetupCode(challenge, authState.username), disabled: !isCodeValid || !state.secretCode, children: "Verify" }) })] }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsxs)(Typography_1.default, { gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, variant: "h5", children: [(0, jsx_runtime_1.jsx)(Lock_1.default, { sx: { marginRight: 1 } }), "Set Up Authenticator"] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { color: "text.secondary", variant: "body2", children: "Add this account to your authenticator app, then enter the 6-digit code it generates." }) }), (0, jsx_runtime_1.jsxs)(Grid_1.default, { item: true, xs: 12, children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { color: "text.secondary", variant: "caption", children: "Secret key" }), (0, jsx_runtime_1.jsx)(Typography_1.default, { sx: { fontFamily: 'monospace', wordBreak: 'break-all' }, variant: "body1", children: state.secretCode || 'Loading…' })] }), state.secretCode && ((0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { color: "text.secondary", sx: { wordBreak: 'break-all' }, variant: "caption", children: buildOtpAuthUri(authState.username, state.secretCode) }) })), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { autoFocus: true, fullWidth: true, id: "mfaCode", inputProps: { inputMode: 'numeric', pattern: '[0-9]*', maxLength: 6 }, label: "Authentication Code", onChange: (event) => api.authChallengeSetMfaSetupCode(event.target.value.replace(/\D/g, '')), required: true, value: state.mfaCode }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(components_1.AsyncButton, { disabled: !isCodeValid || !state.secretCode, onClick: () => api.authChallengeSendMfaSetupCode(challenge, authState.username), children: "Verify" }) })] }) }) }));
 }

package/lib/commonjs/Auth/AuthChallengeNewPasswordRequired/AuthChallengeNewPasswordRequired.js

@@ -29,8 +29,8 @@ function AuthChallengeNewPasswordRequired({ authState }) {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-        }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "h5", gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Lock_1.default, { sx: { marginRight: 1 } }), "Password Change Required"] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { required: true, fullWidth: true, id: "newPassword", label: "New Password", type: "password", autoFocus: true, value: state.passwordA, onChange: (event) => api.authChallengeSetPasswordA(event.target.value) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { required: true, fullWidth: true, id: "confirmPassword", label: "Confirm Password", type: "password", value: state.passwordB, onChange: (event) => api.authChallengeSetPasswordB(event.target.value) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(components_1.AsyncButton, { onClick: () => {
+        }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsxs)(Typography_1.default, { gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, variant: "h5", children: [(0, jsx_runtime_1.jsx)(Lock_1.default, { sx: { marginRight: 1 } }), "Password Change Required"] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { autoFocus: true, fullWidth: true, id: "newPassword", label: "New Password", onChange: (event) => api.authChallengeSetPasswordA(event.target.value), required: true, type: "password", value: state.passwordA }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { fullWidth: true, id: "confirmPassword", label: "Confirm Password", onChange: (event) => api.authChallengeSetPasswordB(event.target.value), required: true, type: "password", value: state.passwordB }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(components_1.AsyncButton, { disabled: !arePasswordsMatching, onClick: () => {
                                 var _a, _b;
                                 return api.authChallengeSendPasswords((_a = authState.authenticateUserResponse) === null || _a === void 0 ? void 0 : _a.challenge, (_b = authState.authenticateUserResponse) === null || _b === void 0 ? void 0 : _b.session, authState.username);
-                            }, disabled: !arePasswordsMatching, children: "Update Password" }) })] }) }) }));
+                            }, children: "Update Password" }) })] }) }) }));
 }

package/lib/commonjs/Auth/AuthChallengeSoftwareTokenMfa/AuthChallengeSoftwareTokenMfa.js

@@ -29,8 +29,8 @@ function AuthChallengeSoftwareTokenMfa({ authState }) {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-        }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "h5", gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Lock_1.default, { sx: { marginRight: 1 } }), "Verification Code"] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", color: "text.secondary", children: "Enter the 6-digit code from your authenticator app." }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { required: true, fullWidth: true, id: "mfaCode", label: "Authentication Code", autoFocus: true, inputProps: { inputMode: 'numeric', pattern: '[0-9]*', maxLength: 6 }, value: state.mfaCode, onChange: (event) => api.authChallengeSetMfaCode(event.target.value.replace(/\D/g, '')) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(components_1.AsyncButton, { onClick: () => {
+        }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "form", sx: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsxs)(Typography_1.default, { gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, variant: "h5", children: [(0, jsx_runtime_1.jsx)(Lock_1.default, { sx: { marginRight: 1 } }), "Verification Code"] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { color: "text.secondary", variant: "body2", children: "Enter the 6-digit code from your authenticator app." }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { autoFocus: true, fullWidth: true, id: "mfaCode", inputProps: { inputMode: 'numeric', pattern: '[0-9]*', maxLength: 6 }, label: "Authentication Code", onChange: (event) => api.authChallengeSetMfaCode(event.target.value.replace(/\D/g, '')), required: true, value: state.mfaCode }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(components_1.AsyncButton, { disabled: !isCodeValid, onClick: () => {
                                 var _a, _b;
                                 return api.authChallengeSendMfaCode((_a = authState.authenticateUserResponse) === null || _a === void 0 ? void 0 : _a.challenge, (_b = authState.authenticateUserResponse) === null || _b === void 0 ? void 0 : _b.session, authState.username);
-                            }, disabled: !isCodeValid, children: "Verify" }) })] }) }) }));
+                            }, children: "Verify" }) })] }) }) }));
 }

package/lib/commonjs/Auth/Login.js

@@ -29,8 +29,8 @@ function Login({ username, password, setUsername, setPassword, onLogin }) {
             flexDirection: 'column',
             justifyContent: 'center',
             alignItems: 'center',
-        }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "form", action: "#", autoComplete: "on", method: "post", sx: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h5", gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(Lock_1.default, { sx: { marginRight: 1 } }), "QPQ Admin"] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { required: true, fullWidth: true, id: "username", label: "Username", type: "username", autoComplete: "username", autoFocus: true, value: username, onChange: (event) => setUsername(event.target.value) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { required: true, fullWidth: true, id: "password", label: "Password", type: "password", autoComplete: "current-password", value: password, onChange: (event) => setPassword(event.target.value) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(components_1.AsyncButton, { type: "submit", onClick: (event) => __awaiter(this, void 0, void 0, function* () {
+        }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { action: "#", autoComplete: "on", component: "form", method: "post", sx: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { gutterBottom: true, sx: { display: 'flex', alignItems: 'center' }, variant: "h5", children: [(0, jsx_runtime_1.jsx)(Lock_1.default, { sx: { marginRight: 1 } }), "QPQ Admin"] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { autoComplete: "username", autoFocus: true, fullWidth: true, id: "username", label: "Username", onChange: (event) => setUsername(event.target.value), required: true, type: "username", value: username }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { autoComplete: "current-password", fullWidth: true, id: "password", label: "Password", onChange: (event) => setPassword(event.target.value), required: true, type: "password", value: password }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)(components_1.AsyncButton, { onClick: (event) => __awaiter(this, void 0, void 0, function* () {
                                 event.preventDefault();
                                 yield onLogin();
-                            }), children: "Login" }) })] }) }) }));
+                            }), type: "submit", children: "Login" }) })] }) }) }));
 }

package/lib/commonjs/Config/Config.js

@@ -33,16 +33,16 @@ function Config() {
     };
     const filteredServices = services.filter((s) => s.label.toLowerCase().includes(search.toLowerCase()));
     const selectedService = selectedServiceOverride || ((_a = services[0]) === null || _a === void 0 ? void 0 : _a.label);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(material_1.CssBaseline, {}), (0, jsx_runtime_1.jsxs)(material_1.Drawer, { variant: "permanent", sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(material_1.CssBaseline, {}), (0, jsx_runtime_1.jsxs)(material_1.Drawer, { sx: {
                     width: drawerWidth,
                     flexShrink: 0,
                     [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
-                }, children: [(0, jsx_runtime_1.jsx)(material_1.Toolbar, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, size: "small", variant: "outlined", placeholder: "Search services", value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
+                }, variant: "permanent", children: [(0, jsx_runtime_1.jsx)(material_1.Toolbar, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
                                 var _a, _b;
                                 if (e.key === 'Enter') {
                                     setSearch((_a = filteredServices[0]) === null || _a === void 0 ? void 0 : _a.label);
                                     handleServiceClick((_b = filteredServices[0]) === null || _b === void 0 ? void 0 : _b.label);
                                 }
-                            }, sx: { mt: 2 } }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { overflow: 'auto', p: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.List, { children: filteredServices.map((service) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { disablePadding: true, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { selected: service.label === selectedService, onClick: () => handleServiceClick(service.label), children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: service.label }) }) }, service.value))) }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "main", sx: { flexGrow: 1, p: 3 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h5", gutterBottom: true, children: [selectedService, " Service"] }), (0, jsx_runtime_1.jsx)(material_1.Tabs, { value: tabIndex, onChange: handleTabChange, sx: { borderBottom: 1, borderColor: 'divider' }, children: sections.map((section, index) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: section }, index))) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mt: 2 }, children: [sections[tabIndex] === 'General' && (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["General settings for ", selectedService] }), sections[tabIndex] === 'Settings' && (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Custom configuration options" }), sections[tabIndex] === 'Advanced' && (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Advanced tuning and overrides" })] })] })] }));
+                            }, placeholder: "Search services", size: "small", sx: { mt: 2 }, value: search, variant: "outlined" }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { overflow: 'auto', p: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.List, { children: filteredServices.map((service) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { disablePadding: true, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { onClick: () => handleServiceClick(service.label), selected: service.label === selectedService, children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: service.label }) }) }, service.value))) }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "main", sx: { flexGrow: 1, p: 3 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { gutterBottom: true, variant: "h5", children: [selectedService, " Service"] }), (0, jsx_runtime_1.jsx)(material_1.Tabs, { onChange: handleTabChange, sx: { borderBottom: 1, borderColor: 'divider' }, value: tabIndex, children: sections.map((section, index) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: section }, index))) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mt: 2 }, children: [sections[tabIndex] === 'General' && (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["General settings for ", selectedService] }), sections[tabIndex] === 'Settings' && (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Custom configuration options" }), sections[tabIndex] === 'Advanced' && (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Advanced tuning and overrides" })] })] })] }));
 }
 exports.default = Config;

package/lib/commonjs/LogViewer/ActionHistoryItem.js

@@ -9,6 +9,6 @@ const TruncatedText_1 = __importDefault(require("./TruncatedText"));
 const ActionHistoryItem = ({ action, result, expanded }) => {
     const inputText = JSON.stringify(action.payload, null, 2);
     const outputText = JSON.stringify(result, null, 2);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: (0, jsx_runtime_1.jsx)(TruncatedText_1.default, { title: "Input", text: inputText, expanded: expanded }) }), (0, jsx_runtime_1.jsx)("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: (0, jsx_runtime_1.jsx)(TruncatedText_1.default, { title: "Output", text: outputText, expanded: expanded }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: (0, jsx_runtime_1.jsx)(TruncatedText_1.default, { expanded: expanded, text: inputText, title: "Input" }) }), (0, jsx_runtime_1.jsx)("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: (0, jsx_runtime_1.jsx)(TruncatedText_1.default, { expanded: expanded, text: outputText, title: "Output" }) })] }));
 };
 exports.ActionHistoryItem = ActionHistoryItem;

package/lib/commonjs/LogViewer/ActionRender/ActionRender.js

@@ -32,7 +32,7 @@ exports.AnyCustomAction = AnyCustomAction;
 const ActionRender = ({ action, result, isLegacy, expanded }) => {
     const actionComponentConfig = actionComponentMap_1.default[action.type];
     if (!isLegacy && action.type === quidproquo_core_1.SystemActionType.Batch) {
-        return (0, jsx_runtime_1.jsx)(exports.CoreBatchCustomAction, { action: action, result: result, expanded: expanded });
+        return (0, jsx_runtime_1.jsx)(exports.CoreBatchCustomAction, { action: action, expanded: expanded, result: result });
     }
     const ActionComponent = isLegacy
         ? ActionHistoryItem_1.ActionHistoryItem
@@ -41,7 +41,7 @@ const ActionRender = ({ action, result, isLegacy, expanded }) => {
             : actionComponentConfig
                 ? (0, actionComponents_1.getGenericActionRenderer)(actionComponentConfig[0], actionComponentConfig.slice(1))
                 : exports.AnyCustomAction;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ActionComponent, { action: action, result: result, expanded: expanded }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ActionComponent, { action: action, expanded: expanded, result: result }) }));
 };
 exports.ActionRender = ActionRender;
 const AnyActionHistoryItem = ({ action, result }) => {
@@ -53,6 +53,6 @@ const AnyActionHistoryItem = ({ action, result }) => {
     const toggleLegacy = () => {
         setLegacy(!legacy);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "span", children: action.type.split('/').slice(-2).join('::') }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: toggleExpanded, children: expanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Legacy View", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: toggleLegacy, children: (0, jsx_runtime_1.jsx)(History_1.default, { color: legacy ? 'primary' : 'inherit' }) }) })] }), (0, jsx_runtime_1.jsx)(exports.ActionRender, { action: action, result: result, isLegacy: legacy, expanded: expanded })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { alignItems: "center", display: "flex", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", variant: "h6", children: action.type.split('/').slice(-2).join('::') }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: toggleExpanded, size: "small", children: expanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Legacy View", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: toggleLegacy, size: "small", children: (0, jsx_runtime_1.jsx)(History_1.default, { color: legacy ? 'primary' : 'inherit' }) }) })] }), (0, jsx_runtime_1.jsx)(exports.ActionRender, { action: action, expanded: expanded, isLegacy: legacy, result: result })] }));
 };
 exports.AnyActionHistoryItem = AnyActionHistoryItem;

package/lib/commonjs/LogViewer/AdminLogs/AdminLogGrid/AdminLogGrid.js

@@ -107,9 +107,9 @@ const AdminLogGrid = ({ logs, isLoading, searchProgress }) => {
     background-color: #E3E3E3 !important; 
     color: #000;
   }
-` }), (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { components: {
+` }), (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { autoPageSize: true, columns: columns, components: {
                     Pagination: DataGridPagination_1.DataGridPagination,
-                    LoadingOverlay: () => (0, jsx_runtime_1.jsx)(LinearProgress_1.default, { variant: "determinate", value: searchProgress }),
-                }, columns: columns, rows: logs.map((log, i) => (Object.assign(Object.assign({}, log), { id: `${i}` }))), autoPageSize: true, loading: isLoading, onRowClick: onRowClick, getRowClassName: getRowClassName }), (0, jsx_runtime_1.jsx)(LogDialog_1.LogDialog, { open: !!selectedLogCorrelation, handleClose: clearSelectedLogCorrelation, logCorrelation: selectedLogCorrelation, storyResultMetadatas: logs, setSelectedLogCorrelation: setSelectedLogCorrelation })] }));
+                    LoadingOverlay: () => (0, jsx_runtime_1.jsx)(LinearProgress_1.default, { value: searchProgress, variant: "determinate" }),
+                }, getRowClassName: getRowClassName, loading: isLoading, onRowClick: onRowClick, rows: logs.map((log, i) => (Object.assign(Object.assign({}, log), { id: `${i}` }))) }), (0, jsx_runtime_1.jsx)(LogDialog_1.LogDialog, { handleClose: clearSelectedLogCorrelation, logCorrelation: selectedLogCorrelation, open: !!selectedLogCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, storyResultMetadatas: logs })] }));
 };
 exports.AdminLogGrid = AdminLogGrid;

package/lib/commonjs/LogViewer/AdminLogs/AdminLogSearchBar/AdminLogSearchBar.js

@@ -35,14 +35,14 @@ function AdminLogSearchBar({ onSearch }) {
         updateStartAndEndTimeSpan(minutes);
         handleQuickTimeClose();
     };
-    return ((0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.AdapterDateFns, children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, columns: 12, spacing: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 3, children: (0, jsx_runtime_1.jsxs)(FormControl_1.default, { fullWidth: true, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { id: "runtime-select-label", children: "Log Level" }), (0, jsx_runtime_1.jsx)(Select_1.default, { labelId: "runtime-select-label", id: "demo-simple-select", value: logLevel, label: "Log Level", onChange: handleLogLevelOnChange, children: quidproquo_core_1.logLevelEnumLookups.map((key) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { value: key, children: key }, key))) })] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 3, children: (0, jsx_runtime_1.jsx)(FormControl_1.default, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { getOptionLabel: (option) => option.label, options: serviceOptions, value: serviceOptions.find((o) => o.value === service) || null, onChange: handleServiceOnChange, renderInput: (params) => ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, { label: "Service Name", InputLabelProps: {
+    return ((0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.AdapterDateFns, children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, { columns: 12, container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 3, children: (0, jsx_runtime_1.jsxs)(FormControl_1.default, { fullWidth: true, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { id: "runtime-select-label", children: "Log Level" }), (0, jsx_runtime_1.jsx)(Select_1.default, { id: "demo-simple-select", label: "Log Level", labelId: "runtime-select-label", onChange: handleLogLevelOnChange, value: logLevel, children: quidproquo_core_1.logLevelEnumLookups.map((key) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { value: key, children: key }, key))) })] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 3, children: (0, jsx_runtime_1.jsx)(FormControl_1.default, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { getOptionLabel: (option) => option.label, onChange: handleServiceOnChange, options: serviceOptions, renderInput: (params) => ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, { InputLabelProps: {
                                         shrink: true,
-                                    } }))) }) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 3, children: (0, jsx_runtime_1.jsxs)(system_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(FormControl_1.default, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "Start DateTime", value: startDate, onChange: handleStartDateChange }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "quick time select", "aria-controls": "quick-time-menu", "aria-haspopup": "true", onClick: handleQuickTimeClick, sx: {
+                                    }, label: "Service Name" }))), value: serviceOptions.find((o) => o.value === service) || null }) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 3, children: (0, jsx_runtime_1.jsxs)(system_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(FormControl_1.default, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "Start DateTime", onChange: handleStartDateChange, value: startDate }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-controls": "quick-time-menu", "aria-haspopup": "true", "aria-label": "quick time select", onClick: handleQuickTimeClick, sx: {
                                         position: 'absolute',
                                         right: '-28px',
                                         top: '50%',
                                         transform: 'translateY(-50%)',
-                                    }, children: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 3, children: (0, jsx_runtime_1.jsx)(FormControl_1.default, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "End DateTime", value: endDate, onChange: handleEndDateChange }) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 10, children: (0, jsx_runtime_1.jsx)(FormControl_1.default, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Message", value: msg, onChange: handleMsgOnChange, InputLabelProps: {
+                                    }, children: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })] }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 3, children: (0, jsx_runtime_1.jsx)(FormControl_1.default, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DateTimePicker, { label: "End DateTime", onChange: handleEndDateChange, value: endDate }) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 10, children: (0, jsx_runtime_1.jsx)(FormControl_1.default, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { InputLabelProps: {
                                     shrink: true,
-                                } }) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 2, children: (0, jsx_runtime_1.jsx)(AsyncButton_1.AsyncButton, { onClick: () => onSearch(), children: "Search" }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Menu, { id: "quick-time-menu", anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleQuickTimeClose, children: [(0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(5), children: "Last 5 minutes" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(30), children: "Last 30 minutes" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(1 * 60), children: "Last hour" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(3 * 60), children: "Last 3 hours" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(8 * 60), children: "Last 8 hours" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(16 * 60), children: "Last 16 hours" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(24 * 60), children: "Last 24 hours" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(7 * 24 * 60), children: "Last 7 days" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(30 * 24 * 60), children: "Last month" })] })] }));
+                                }, label: "Message", onChange: handleMsgOnChange, value: msg }) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 2, children: (0, jsx_runtime_1.jsx)(AsyncButton_1.AsyncButton, { onClick: () => onSearch(), children: "Search" }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Menu, { anchorEl: anchorEl, id: "quick-time-menu", keepMounted: true, onClose: handleQuickTimeClose, open: Boolean(anchorEl), children: [(0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(5), children: "Last 5 minutes" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(30), children: "Last 30 minutes" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(1 * 60), children: "Last hour" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(3 * 60), children: "Last 3 hours" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(8 * 60), children: "Last 8 hours" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(16 * 60), children: "Last 16 hours" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(24 * 60), children: "Last 24 hours" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(7 * 24 * 60), children: "Last 7 days" }), (0, jsx_runtime_1.jsx)(MenuItem_1.default, { onClick: () => handleQuickTimeSelect(30 * 24 * 60), children: "Last month" })] })] }));
 }

package/lib/commonjs/LogViewer/AdminLogs/AdminLogs.js

@@ -10,6 +10,6 @@ const hooks_1 = require("./hooks");
 const AdminLogs = () => {
     const { logLogs, searchProgress, onSearch } = (0, hooks_1.useLogLogSearch)();
     const isLoading = (0, useIsLoading_1.useIsLoading)();
-    return ((0, jsx_runtime_1.jsx)(TabViewBox_1.TabViewBox, { header: () => (0, jsx_runtime_1.jsx)(AdminLogSearchBar_1.AdminLogSearchBar, { onSearch: onSearch }), body: () => (0, jsx_runtime_1.jsx)(AdminLogGrid_1.AdminLogGrid, { logs: logLogs, isLoading: isLoading, searchProgress: searchProgress }) }));
+    return ((0, jsx_runtime_1.jsx)(TabViewBox_1.TabViewBox, { body: () => (0, jsx_runtime_1.jsx)(AdminLogGrid_1.AdminLogGrid, { isLoading: isLoading, logs: logLogs, searchProgress: searchProgress }), header: () => (0, jsx_runtime_1.jsx)(AdminLogSearchBar_1.AdminLogSearchBar, { onSearch: onSearch }) }));
 };
 exports.AdminLogs = AdminLogs;

package/lib/commonjs/LogViewer/Dashboard.js

@@ -60,7 +60,8 @@ const Dashboard = () => {
     const [realtimeLogs, setRealtimeLogs] = react_1.default.useState([]);
     const { onSearch, logs: weeklyLogs } = (0, hooks_1.useLogSearch)();
     const isLoading = (0, useIsLoading_1.useIsLoading)();
-    (0, react_1.useEffect)(() => {
+    // Stable identity so the mount-only effect below can list it as a dependency.
+    const runInitialSearch = (0, quidproquo_web_react_1.useEffectCallback)(() => {
         const currentDate = new Date();
         const sevenDaysAgo = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000);
         const isoDateSevenDaysAgo = sevenDaysAgo.toISOString();
@@ -78,7 +79,10 @@ const Dashboard = () => {
             onlyErrors: true,
         };
         onSearch(searchParams);
-    }, []);
+    });
+    (0, react_1.useEffect)(() => {
+        runInitialSearch();
+    }, [runInitialSearch]);
     (0, quidproquo_web_react_2.useSubscribeToWebSocketEvent)(quidproquo_webserver_1.WebSocketQueueQpqAdminServerMessageEventType.LogMetadata, (webSocketService, message) => {
         // Add the log to the list if its an error
         if (message.payload.log.error) {
@@ -90,8 +94,8 @@ const Dashboard = () => {
         const uniqueLogs = (0, quidproquo_web_1.uniqueBy)([...realtimeLogs, ...weeklyLogs], (log) => log.correlation);
         return uniqueLogs.sort((a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime());
     }, [realtimeLogs, weeklyLogs]);
-    const dailyErrorCount = (0, react_1.useMemo)(() => getLogCountForSinceXDaysAgo(allLogs, hoursPassedToday / 24), [allLogs, getHoursSinceStartOfDay]);
+    const dailyErrorCount = (0, react_1.useMemo)(() => getLogCountForSinceXDaysAgo(allLogs, hoursPassedToday / 24), [allLogs, hoursPassedToday]);
     const weeklyErrorCount = (0, react_1.useMemo)(() => getLogCountForSinceXDaysAgo(allLogs, 7), [allLogs]);
-    return ((0, jsx_runtime_1.jsxs)(TabViewBox_1.TabViewBox, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, sx: { mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: { p: 2, textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Daily Errors" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", children: dailyErrorCount })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: { p: 2, textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Weekly Errors" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", children: weeklyErrorCount })] }) })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1, overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(LogMetadataGrid_1.LogMetadataGrid, { logs: allLogs, isLoading: isLoading }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(TabViewBox_1.TabViewBox, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, sx: { mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: { p: 2, textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Daily Errors" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", children: dailyErrorCount })] }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 6, children: (0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: { p: 2, textAlign: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Weekly Errors" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", children: weeklyErrorCount })] }) })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1, overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(LogMetadataGrid_1.LogMetadataGrid, { isLoading: isLoading, logs: allLogs }) })] }));
 };
 exports.Dashboard = Dashboard;

package/lib/commonjs/LogViewer/EventTimeline.js

@@ -16,7 +16,7 @@ const TimelineEvent = ({ event, level, setSelectedLogCorrelation, scale, parrent
                     height: EVENT_HEIGHT,
                     textAlign: 'right',
                     display: totalTimeOffset ? 'inline-block' : 'none',
-                } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                } }), (0, jsx_runtime_1.jsxs)("div", { onClick: () => setSelectedLogCorrelation(event.correlation), style: {
                     whiteSpace: 'nowrap',
                     width: `${eventWidth}px`,
                     height: EVENT_HEIGHT,
@@ -25,12 +25,12 @@ const TimelineEvent = ({ event, level, setSelectedLogCorrelation, scale, parrent
                     padding: 3,
                     borderRadius: 4,
                     display: 'inline-block',
-                }, onClick: () => setSelectedLogCorrelation(event.correlation), children: [event.moduleName, "::", event.generic.split('::').pop(), " - @", parrentTimeOffsetMs, "ms - ", event.executionTimeMs, "ms"] }), event.children.map((child) => {
+                }, children: [event.moduleName, "::", event.generic.split('::').pop(), " - @", parrentTimeOffsetMs, "ms - ", event.executionTimeMs, "ms"] }), event.children.map((child) => {
                 const childDate = new Date(child.startedAt);
                 const eventDate = new Date(event.startedAt);
                 const offsetMs = childDate.getTime() - eventDate.getTime();
                 const totalOffset = totalParrentTimeOffsetMs + offsetMs;
-                return ((0, jsx_runtime_1.jsx)(TimelineEvent, { event: child, setSelectedLogCorrelation: setSelectedLogCorrelation, level: level + 1, scale: scale, parrentTimeOffsetMs: offsetMs, totalParrentTimeOffsetMs: totalOffset }, child.correlation));
+                return ((0, jsx_runtime_1.jsx)(TimelineEvent, { event: child, level: level + 1, parrentTimeOffsetMs: offsetMs, scale: scale, setSelectedLogCorrelation: setSelectedLogCorrelation, totalParrentTimeOffsetMs: totalOffset }, child.correlation));
             })] }));
 };
 const EventTimeline = ({ logCorrelation, setSelectedLogCorrelation, isVisible, treeApi }) => {
@@ -73,6 +73,6 @@ const EventTimeline = ({ logCorrelation, setSelectedLogCorrelation, isVisible, t
     const endDate = new Date(latestFinishedAt);
     const offsetMs = endDate.getTime() - startDate.getTime();
     const scale = 1100 / offsetMs + scaleOffset;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { height: 24 }, children: [(0, jsx_runtime_1.jsx)("b", { children: (0, quidproquo_core_1.formatDuration)(totalExecutionTime) }), (0, jsx_runtime_1.jsx)("i", { children: " of compute over " }), (0, jsx_runtime_1.jsx)("b", { children: (0, quidproquo_core_1.formatDuration)(offsetMs) })] }), (0, jsx_runtime_1.jsx)("div", { ref: setTimelineRef, onWheel: handleOnWheel, style: { width: '100%', height: 'calc(100% - 24px)' }, children: treeApi.treeDataWithNoQpqActions[0] && ((0, jsx_runtime_1.jsx)(TimelineEvent, { event: treeApi.treeDataWithNoQpqActions[0], level: 0, setSelectedLogCorrelation: setSelectedLogCorrelation, scale: scale, parrentTimeOffsetMs: 0, totalParrentTimeOffsetMs: 0 })) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { height: 24 }, children: [(0, jsx_runtime_1.jsx)("b", { children: (0, quidproquo_core_1.formatDuration)(totalExecutionTime) }), (0, jsx_runtime_1.jsx)("i", { children: " of compute over " }), (0, jsx_runtime_1.jsx)("b", { children: (0, quidproquo_core_1.formatDuration)(offsetMs) })] }), (0, jsx_runtime_1.jsx)("div", { ref: setTimelineRef, onWheel: handleOnWheel, style: { width: '100%', height: 'calc(100% - 24px)' }, children: treeApi.treeDataWithNoQpqActions[0] && ((0, jsx_runtime_1.jsx)(TimelineEvent, { event: treeApi.treeDataWithNoQpqActions[0], level: 0, parrentTimeOffsetMs: 0, scale: scale, setSelectedLogCorrelation: setSelectedLogCorrelation, totalParrentTimeOffsetMs: 0 })) })] }));
 };
 exports.EventTimeline = EventTimeline;

package/lib/commonjs/LogViewer/HelpChat/HelpChat.js

@@ -28,10 +28,8 @@ const HelpChat = ({ logCorrelation }) => {
     const chatContainerRef = (0, react_1.useRef)(null);
     const accessToken = (0, quidproquo_web_react_1.useAuthAccessToken)();
     const baseUrlResolvers = (0, quidproquo_web_react_1.useBaseUrlResolvers)();
-    (0, react_1.useEffect)(() => {
-        fetchChatMessages();
-    }, []);
-    const fetchChatMessages = () => __awaiter(void 0, void 0, void 0, function* () {
+    // Stable identity so the mount-only effect below can list it as a dependency.
+    const fetchChatMessages = (0, quidproquo_web_react_1.useEffectCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
         const listLogChatMessages = {
             correlationId: logCorrelation,
             nextPageKey: nextPageKey,
@@ -44,7 +42,10 @@ const HelpChat = ({ logCorrelation }) => {
         finally {
             // Do nothing
         }
-    });
+    }));
+    (0, react_1.useEffect)(() => {
+        fetchChatMessages();
+    }, [fetchChatMessages]);
     const handleSendMessage = () => __awaiter(void 0, void 0, void 0, function* () {
         if (inputMessage.trim() !== '') {
             const newMessage = {
@@ -79,7 +80,7 @@ const HelpChat = ({ logCorrelation }) => {
             chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
         }
     }, [chatMessages]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { flexGrow: 1, overflowY: 'auto', p: 2 }, ref: chatContainerRef, children: [chatMessages.map((message, index) => ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { ref: chatContainerRef, sx: { flexGrow: 1, overflowY: 'auto', p: 2 }, children: [chatMessages.map((message, index) => ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                             display: 'flex',
                             alignItems: 'flex-start',
                             mb: 2,
@@ -104,6 +105,6 @@ const HelpChat = ({ logCorrelation }) => {
                                 backgroundColor: 'grey.300',
                                 color: 'black',
                                 maxWidth: '70%',
-                            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center', mb: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { sx: { mr: 1, bgcolor: 'grey.500' }, children: (0, jsx_runtime_1.jsx)(icons_material_1.Android, {}) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: "AI Assistant" })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, sx: { mr: 1 } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", children: "Thinking..." })] })] }) }))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { p: 2, borderTop: '1px solid #ccc' }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, variant: "outlined", placeholder: "Type your message...", value: inputMessage, onChange: (e) => setInputMessage(e.target.value), onKeyDown: handleKeyPress, sx: { mr: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: handleSendMessage, children: "Send" })] }) })] }));
+                            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center', mb: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { sx: { mr: 1, bgcolor: 'grey.500' }, children: (0, jsx_runtime_1.jsx)(icons_material_1.Android, {}) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: "AI Assistant" })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, sx: { mr: 1 } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", children: "Thinking..." })] })] }) }))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { p: 2, borderTop: '1px solid #ccc' }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, onChange: (e) => setInputMessage(e.target.value), onKeyDown: handleKeyPress, placeholder: "Type your message...", sx: { mr: 2 }, value: inputMessage, variant: "outlined" }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleSendMessage, variant: "contained", children: "Send" })] }) })] }));
 };
 exports.HelpChat = HelpChat;

package/lib/commonjs/LogViewer/LogCorrelationTree.js

@@ -9,30 +9,33 @@ const material_1 = require("@mui/material");
 const BACKGROUND_COLOR = '#c1c1c1';
 // Here we're using `renderCustomNodeElement` to represent each node
 // as an SVG `rect` instead of the default `circle`.
-const renderRectSvgNode = (setSelectedLogCorrelation, highlightCorrelationId) => ({ nodeDatum }) => {
-    // TODO: Workout the nodeDateum type
-    const color = nodeDatum.correlation === highlightCorrelationId
-        ? nodeDatum.error
-            ? '#8B0000'
-            : '#00008B' // Very dark red for selected errors, dark blue for selected non-errors
-        : nodeDatum.error
-            ? 'red'
-            : 'white'; // Bright red for non-selected errors, white for non-selected non-errors
-    // For story runtime types, collapse the runtimeType line away so the generic
-    // info takes its place — other runtime types keep their full label stack.
-    const isStoryRuntimeType = nodeDatum.runtimeType === quidproquo_core_1.QpqRuntimeType.EXECUTE_STORY || nodeDatum.runtimeType === quidproquo_core_1.QpqRuntimeType.EXECUTE_IMPLEMENTATION_STORY;
-    const displayText = (nodeDatum.generic || '').split('::').pop();
-    const textLines = isStoryRuntimeType
-        ? [nodeDatum.moduleName, displayText, nodeDatum.error || '']
-        : [nodeDatum.moduleName, nodeDatum.runtimeType, displayText, nodeDatum.error || ''];
-    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("circle", { r: 10, fill: color, x: "10", y: "10", onClick: () => setSelectedLogCorrelation(nodeDatum.correlation) }), textLines
-                .filter((t) => !!t)
-                .map((text, i) => {
-                const x = 0;
-                const y = i === 0 ? -20 : 10 + i * 20;
-                const fontSize = i === 0 ? 30 : 15;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: x - 50, y: y - fontSize / 2 - 8, width: "100", height: fontSize, fill: BACKGROUND_COLOR, strokeWidth: "0" }), (0, jsx_runtime_1.jsx)("text", { textAnchor: "middle", fontSize: fontSize, fill: nodeDatum.error ? 'red' : 'black', strokeWidth: 0, y: y, children: text })] }, `${i}`));
-            })] }));
+const renderRectSvgNode = (setSelectedLogCorrelation, highlightCorrelationId) => {
+    const RectSvgNode = ({ nodeDatum }) => {
+        // TODO: Workout the nodeDateum type
+        const color = nodeDatum.correlation === highlightCorrelationId
+            ? nodeDatum.error
+                ? '#8B0000'
+                : '#00008B' // Very dark red for selected errors, dark blue for selected non-errors
+            : nodeDatum.error
+                ? 'red'
+                : 'white'; // Bright red for non-selected errors, white for non-selected non-errors
+        // For story runtime types, collapse the runtimeType line away so the generic
+        // info takes its place — other runtime types keep their full label stack.
+        const isStoryRuntimeType = nodeDatum.runtimeType === quidproquo_core_1.QpqRuntimeType.EXECUTE_STORY || nodeDatum.runtimeType === quidproquo_core_1.QpqRuntimeType.EXECUTE_IMPLEMENTATION_STORY;
+        const displayText = (nodeDatum.generic || '').split('::').pop();
+        const textLines = isStoryRuntimeType
+            ? [nodeDatum.moduleName, displayText, nodeDatum.error || '']
+            : [nodeDatum.moduleName, nodeDatum.runtimeType, displayText, nodeDatum.error || ''];
+        return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("circle", { fill: color, onClick: () => setSelectedLogCorrelation(nodeDatum.correlation), r: 10, x: "10", y: "10" }), textLines
+                    .filter((t) => !!t)
+                    .map((text, i) => {
+                    const x = 0;
+                    const y = i === 0 ? -20 : 10 + i * 20;
+                    const fontSize = i === 0 ? 30 : 15;
+                    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { fill: BACKGROUND_COLOR, height: fontSize, strokeWidth: "0", width: "100", x: x - 50, y: y - fontSize / 2 - 8 }), (0, jsx_runtime_1.jsx)("text", { fill: nodeDatum.error ? 'red' : 'black', fontSize: fontSize, strokeWidth: 0, textAnchor: "middle", y: y, children: text })] }, `${i}`));
+                })] }));
+    };
+    return RectSvgNode;
 };
 const LogCorrelationTreeComponent = ({ correlationId, highlightCorrelationId, setSelectedLogCorrelation, isVisible, treeApi, }) => {
     const treeContainer = (0, react_1.useRef)(null);

package/lib/commonjs/LogViewer/LogCorrelations.js

@@ -12,6 +12,6 @@ const LogCorrelations = ({ logCorrelation, setSelectedLogCorrelation, isVisible,
             alignItems: 'center',
             justifyContent: 'center',
             height: '100%',
-        }, children: (0, jsx_runtime_1.jsx)(LogCorrelationTree_1.LogCorrelationTree, { correlationId: logCorrelation, highlightCorrelationId: logCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, isVisible: isVisible, treeApi: treeApi }) }));
+        }, children: (0, jsx_runtime_1.jsx)(LogCorrelationTree_1.LogCorrelationTree, { correlationId: logCorrelation, highlightCorrelationId: logCorrelation, isVisible: isVisible, setSelectedLogCorrelation: setSelectedLogCorrelation, treeApi: treeApi }) }));
 };
 exports.LogCorrelations = LogCorrelations;

package/lib/commonjs/LogViewer/LogDetails.js

@@ -40,6 +40,6 @@ const LogDetails = ({ log, hideFastActions, orderByDuration, }) => {
             return durationB - durationA;
         });
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Table, { sx: { tableLayout: 'fixed' }, children: (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: leftTableCell, children: (0, jsx_runtime_1.jsx)(ActionHistoryItemTimeStamp_1.ActionHistoryItemTimeStamp, { startedAt: log.startedAt, finishedAt: log.startedAt }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: rightTableCell, children: (0, jsx_runtime_1.jsx)(LogSummaryDetails_1.LogSummaryDetails, { log: log }) })] }), history.map((historyItem, index) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: leftTableCell, children: (0, jsx_runtime_1.jsx)(ActionHistoryItemTimeStamp_1.ActionHistoryItemTimeStamp, { startedAt: historyItem.startedAt, finishedAt: historyItem.finishedAt }) }), (0, jsx_runtime_1.jsxs)(material_1.TableCell, { sx: rightTableCell, children: [historyItem.act && (0, jsx_runtime_1.jsx)(ActionRender_1.AnyActionHistoryItem, { action: historyItem.act, result: historyItem.res }), !historyItem.act && (0, jsx_runtime_1.jsx)("div", { children: "No Action" })] })] }, `${index}`))), (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: leftTableCell, children: (0, jsx_runtime_1.jsx)(ActionHistoryItemTimeStamp_1.ActionHistoryItemTimeStamp, { startedAt: log.finishedAt, finishedAt: log.finishedAt }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: rightTableCell, children: (0, jsx_runtime_1.jsx)(LogSummaryReturn_1.LogSummaryReturn, { log: log }) })] }), (log === null || log === void 0 ? void 0 : log.logs) && ((0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsxs)(material_1.TableCell, { colSpan: 2, style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: '10px' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "span", children: "Caught console.log events" }) }), (0, jsx_runtime_1.jsx)(ConsoleLogViewer_1.default, { logs: log === null || log === void 0 ? void 0 : log.logs })] }) }))] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Table, { sx: { tableLayout: 'fixed' }, children: (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: leftTableCell, children: (0, jsx_runtime_1.jsx)(ActionHistoryItemTimeStamp_1.ActionHistoryItemTimeStamp, { finishedAt: log.startedAt, startedAt: log.startedAt }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: rightTableCell, children: (0, jsx_runtime_1.jsx)(LogSummaryDetails_1.LogSummaryDetails, { log: log }) })] }), history.map((historyItem, index) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: leftTableCell, children: (0, jsx_runtime_1.jsx)(ActionHistoryItemTimeStamp_1.ActionHistoryItemTimeStamp, { finishedAt: historyItem.finishedAt, startedAt: historyItem.startedAt }) }), (0, jsx_runtime_1.jsxs)(material_1.TableCell, { sx: rightTableCell, children: [historyItem.act && (0, jsx_runtime_1.jsx)(ActionRender_1.AnyActionHistoryItem, { action: historyItem.act, result: historyItem.res }), !historyItem.act && (0, jsx_runtime_1.jsx)("div", { children: "No Action" })] })] }, `${index}`))), (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: leftTableCell, children: (0, jsx_runtime_1.jsx)(ActionHistoryItemTimeStamp_1.ActionHistoryItemTimeStamp, { finishedAt: log.finishedAt, startedAt: log.finishedAt }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: rightTableCell, children: (0, jsx_runtime_1.jsx)(LogSummaryReturn_1.LogSummaryReturn, { log: log }) })] }), (log === null || log === void 0 ? void 0 : log.logs) && ((0, jsx_runtime_1.jsx)(material_1.TableRow, { children: (0, jsx_runtime_1.jsxs)(material_1.TableCell, { colSpan: 2, style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: '10px' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", variant: "h6", children: "Caught console.log events" }) }), (0, jsx_runtime_1.jsx)(ConsoleLogViewer_1.default, { logs: log === null || log === void 0 ? void 0 : log.logs })] }) }))] }) }) }));
 };
 exports.LogDetails = LogDetails;

package/lib/commonjs/LogViewer/LogDialog/LogDialog.js

@@ -44,21 +44,21 @@ const LogDialog = ({ logCorrelation, open, handleClose, setSelectedLogCorrelatio
         logDialogStateApi.setSelectedTab(newValue);
     };
     const treeApi = (0, hooks_1.useLogTreeData)(logCorrelation, false);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: open, scroll: 'paper', "aria-labelledby": "scroll-dialog-title", "aria-describedby": "scroll-dialog-description", onClose: handleClose, maxWidth: false, fullWidth: true, PaperProps: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { "aria-describedby": "scroll-dialog-description", "aria-labelledby": "scroll-dialog-title", fullWidth: true, maxWidth: false, onClose: handleClose, open: open, PaperProps: {
             style: {
                 width: '90%',
                 height: '90%',
                 maxHeight: '90%',
                 maxWidth: '90%',
             },
-        }, children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { id: "scroll-dialog-title", children: ["Log Details - ", logCorrelation] }), (0, jsx_runtime_1.jsx)(material_1.AppBar, { position: "sticky", color: "primary", children: (0, jsx_runtime_1.jsxs)(material_1.Tabs, { value: logDialogState.selectedTab, onChange: handleTabChange, textColor: "inherit", indicatorColor: "secondary", children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Log Details" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Tree" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Timeline" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Notes" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Raw JSON" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Help" })] }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { dividers: true, sx: {
+        }, scroll: 'paper', children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { id: "scroll-dialog-title", children: ["Log Details - ", logCorrelation] }), (0, jsx_runtime_1.jsx)(material_1.AppBar, { color: "primary", position: "sticky", children: (0, jsx_runtime_1.jsxs)(material_1.Tabs, { indicatorColor: "secondary", onChange: handleTabChange, textColor: "inherit", value: logDialogState.selectedTab, children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Log Details" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Tree" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Timeline" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Notes" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Raw JSON" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: "Help" })] }) }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { dividers: true, sx: {
                     minHeight: '150px',
                     overflowY: 'scroll',
-                }, children: [asyncLog.isLoading && (0, jsx_runtime_1.jsx)(material_1.LinearProgress, {}), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 0), children: (0, jsx_runtime_1.jsx)(tabs_1.LogDetailsTab, { log: asyncLog, logDialogState: logDialogState, logDialogStateApi: logDialogStateApi }) }), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 1), children: (0, jsx_runtime_1.jsx)(tabs_1.TreeTab, { log: asyncLog, isVisible: logDialogState.selectedTab === 1, treeApi: treeApi, setSelectedLogCorrelation: setSelectedLogCorrelation }) }), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 2), children: (0, jsx_runtime_1.jsx)(tabs_1.TimelineTab, { log: asyncLog, setSelectedLogCorrelation: setSelectedLogCorrelation, isVisible: logDialogState.selectedTab === 2, treeApi: treeApi }) }), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 3), children: (0, jsx_runtime_1.jsx)(tabs_1.NotesTab, { log: asyncLog }) }), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 4), children: (0, jsx_runtime_1.jsx)(tabs_1.RawTab, { log: asyncLog }) }), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 5), children: (0, jsx_runtime_1.jsx)(tabs_1.HelpTab, { log: asyncLog }) })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { style: getTabStyle(logDialogState.selectedTab, 1), onClick: (event) => treeApi.refreshTreeData(), disabled: asyncLog.isLoading, children: "Refresh Tree" }), (0, jsx_runtime_1.jsx)(material_1.Button, { style: getTabStyle(logDialogState.selectedTab, 2), onClick: (event) => treeApi.refreshTreeData(), disabled: asyncLog.isLoading, children: "Refresh Timeline" }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: (event) => {
+                }, children: [asyncLog.isLoading && (0, jsx_runtime_1.jsx)(material_1.LinearProgress, {}), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 0), children: (0, jsx_runtime_1.jsx)(tabs_1.LogDetailsTab, { log: asyncLog, logDialogState: logDialogState, logDialogStateApi: logDialogStateApi }) }), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 1), children: (0, jsx_runtime_1.jsx)(tabs_1.TreeTab, { isVisible: logDialogState.selectedTab === 1, log: asyncLog, setSelectedLogCorrelation: setSelectedLogCorrelation, treeApi: treeApi }) }), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 2), children: (0, jsx_runtime_1.jsx)(tabs_1.TimelineTab, { isVisible: logDialogState.selectedTab === 2, log: asyncLog, setSelectedLogCorrelation: setSelectedLogCorrelation, treeApi: treeApi }) }), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 3), children: (0, jsx_runtime_1.jsx)(tabs_1.NotesTab, { log: asyncLog }) }), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 4), children: (0, jsx_runtime_1.jsx)(tabs_1.RawTab, { log: asyncLog }) }), (0, jsx_runtime_1.jsx)("div", { style: getTabStyle(logDialogState.selectedTab, 5), children: (0, jsx_runtime_1.jsx)(tabs_1.HelpTab, { log: asyncLog }) })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { disabled: asyncLog.isLoading, onClick: (event) => treeApi.refreshTreeData(), style: getTabStyle(logDialogState.selectedTab, 1), children: "Refresh Tree" }), (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: asyncLog.isLoading, onClick: (event) => treeApi.refreshTreeData(), style: getTabStyle(logDialogState.selectedTab, 2), children: "Refresh Timeline" }), (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: asyncLog.isLoading, onClick: (event) => {
                             if (asyncLog.log) {
                                 downloadJson(JSON.stringify(asyncLog.log, null, 2), `${asyncLog.log.correlation}.json`);
                             }
                             event.stopPropagation();
-                        }, disabled: asyncLog.isLoading, children: "Download" }), asyncLog.log && ((0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleExecute, disabled: asyncLog.isLoading, children: "Execute" })), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleClose, children: "Close" })] })] }));
+                        }, children: "Download" }), asyncLog.log && ((0, jsx_runtime_1.jsx)(material_1.Button, { disabled: asyncLog.isLoading, onClick: handleExecute, children: "Execute" })), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleClose, children: "Close" })] })] }));
 };
 exports.LogDialog = LogDialog;

package/lib/commonjs/LogViewer/LogDialog/MovedToColdStorage/MovedToColdStorage.js

@@ -4,6 +4,6 @@ exports.MovedToColdStorage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const MovedToColdStorage = ({ guid }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { elevation: 3, sx: { padding: 2, borderRadius: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body1", color: "textSecondary", children: ["The log you are requesting has been moved to ", (0, jsx_runtime_1.jsx)("b", { children: "cold storage" }), ". Please provide the following Correlation to an administrator if you would like it to be moved back to standard storage."] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", color: "primary", fontWeight: "bold", children: guid }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { elevation: 3, sx: { padding: 2, borderRadius: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { color: "textSecondary", variant: "body1", children: ["The log you are requesting has been moved to ", (0, jsx_runtime_1.jsx)("b", { children: "cold storage" }), ". Please provide the following Correlation to an administrator if you would like it to be moved back to standard storage."] }), (0, jsx_runtime_1.jsx)(material_1.Box, { mt: 1, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "primary", fontWeight: "bold", variant: "subtitle1", children: guid }) })] }));
 };
 exports.MovedToColdStorage = MovedToColdStorage;

package/lib/commonjs/LogViewer/LogDialog/tabs/LogDetailsTab/LogDetailsTab.js

@@ -15,6 +15,6 @@ const LogDetailsTab = ({ log, logDialogState: { hideFastActions, orderByDuration
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flexDirection: 'row-reverse',
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: hideFastActions, onChange: (event) => setHideFastActions(event.target.checked) }), label: "Hide Fast Actions" }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: orderByDuration, onChange: (event) => setOrderByDuration(event.target.checked) }), label: "Order by Duration" })] }), (0, jsx_runtime_1.jsx)(LogDetails_1.LogDetails, { log: log.log, hideFastActions: hideFastActions, orderByDuration: orderByDuration })] }));
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: hideFastActions, onChange: (event) => setHideFastActions(event.target.checked) }), label: "Hide Fast Actions" }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: orderByDuration, onChange: (event) => setOrderByDuration(event.target.checked) }), label: "Order by Duration" })] }), (0, jsx_runtime_1.jsx)(LogDetails_1.LogDetails, { hideFastActions: hideFastActions, log: log.log, orderByDuration: orderByDuration })] }));
 };
 exports.LogDetailsTab = LogDetailsTab;

package/lib/commonjs/LogViewer/LogDialog/tabs/TimelineTab/TimelineTab.js

@@ -7,6 +7,6 @@ const TimelineTab = ({ log, isVisible, setSelectedLogCorrelation, treeApi, }) =>
     if (log.isLoading) {
         return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
     }
-    return ((0, jsx_runtime_1.jsx)(EventTimeline_1.EventTimeline, { logCorrelation: log.logCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, isVisible: isVisible, treeApi: treeApi }));
+    return ((0, jsx_runtime_1.jsx)(EventTimeline_1.EventTimeline, { isVisible: isVisible, logCorrelation: log.logCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, treeApi: treeApi }));
 };
 exports.TimelineTab = TimelineTab;

package/lib/commonjs/LogViewer/LogDialog/tabs/TreeTab/TreeTab.js

@@ -7,6 +7,6 @@ const TreeTab = ({ log, isVisible, setSelectedLogCorrelation, treeApi, }) => {
     if (log.isLoading) {
         return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
     }
-    return ((0, jsx_runtime_1.jsx)(LogCorrelations_1.LogCorrelations, { logCorrelation: log.logCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, isVisible: isVisible, treeApi: treeApi }));
+    return ((0, jsx_runtime_1.jsx)(LogCorrelations_1.LogCorrelations, { isVisible: isVisible, logCorrelation: log.logCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, treeApi: treeApi }));
 };
 exports.TreeTab = TreeTab;

package/lib/commonjs/LogViewer/LogMetadataGrid.js

@@ -55,9 +55,9 @@ const LogMetadataGrid = ({ logs, isLoading }) => {
           .greenRow {
             background-color: #eaffea;
           }
-        ` }), (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { components: {
+        ` }), (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { autoPageSize: true, columns: columns, components: {
                     Pagination: DataGridPagination_1.DataGridPagination,
-                    LoadingOverlay: () => (0, jsx_runtime_1.jsx)(LinearProgress_1.default, { variant: "determinate", value: searchProgress }),
-                }, columns: columns, rows: logs.map((log) => (Object.assign(Object.assign({}, log), { id: log.correlation }))), autoPageSize: true, loading: isLoading, onRowClick: onRowClick, getRowClassName: getRowClassName }), (0, jsx_runtime_1.jsx)(LogDialog_1.LogDialog, { open: !!selectedLogCorrelation, handleClose: clearSelectedLogCorrelation, logCorrelation: selectedLogCorrelation, storyResultMetadatas: logs, setSelectedLogCorrelation: setSelectedLogCorrelation })] }));
+                    LoadingOverlay: () => (0, jsx_runtime_1.jsx)(LinearProgress_1.default, { value: searchProgress, variant: "determinate" }),
+                }, getRowClassName: getRowClassName, loading: isLoading, onRowClick: onRowClick, rows: logs.map((log) => (Object.assign(Object.assign({}, log), { id: log.correlation }))) }), (0, jsx_runtime_1.jsx)(LogDialog_1.LogDialog, { handleClose: clearSelectedLogCorrelation, logCorrelation: selectedLogCorrelation, open: !!selectedLogCorrelation, setSelectedLogCorrelation: setSelectedLogCorrelation, storyResultMetadatas: logs })] }));
 };
 exports.LogMetadataGrid = LogMetadataGrid;

package/lib/commonjs/LogViewer/LogRawJson.js

@@ -4,6 +4,6 @@ exports.LogRawJson = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const LogRawJson = ({ log }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: 1, p: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Raw JSON" }), (0, jsx_runtime_1.jsx)("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: JSON.stringify(log, null, 2) })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: 1, p: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { gutterBottom: true, variant: "h6", children: "Raw JSON" }), (0, jsx_runtime_1.jsx)("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: JSON.stringify(log, null, 2) })] }));
 };
 exports.LogRawJson = LogRawJson;

package/lib/commonjs/LogViewer/LogSearch.js

@@ -10,6 +10,6 @@ const TopSection_1 = require("./TopSection");
 const LogSearch = () => {
     const { onSearch, logs } = (0, hooks_1.useLogSearch)();
     const isLoading = (0, useIsLoading_1.useIsLoading)();
-    return (0, jsx_runtime_1.jsx)(TabViewBox_1.TabViewBox, { header: () => (0, jsx_runtime_1.jsx)(TopSection_1.TopSection, { onSearch: onSearch }), body: () => (0, jsx_runtime_1.jsx)(LogMetadataGrid_1.LogMetadataGrid, { logs: logs, isLoading: isLoading }) });
+    return (0, jsx_runtime_1.jsx)(TabViewBox_1.TabViewBox, { body: () => (0, jsx_runtime_1.jsx)(LogMetadataGrid_1.LogMetadataGrid, { isLoading: isLoading, logs: logs }), header: () => (0, jsx_runtime_1.jsx)(TopSection_1.TopSection, { onSearch: onSearch }) });
 };
 exports.LogSearch = LogSearch;

package/lib/commonjs/LogViewer/LogSummary.js

@@ -36,7 +36,7 @@ const LogSummary = ({ log }) => {
             },
         };
         sendMessage(refreshEvent);
-    }, [log.correlation]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: 1, p: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Log Summary" }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Correlation ID: ", log.correlation] }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: checkedLoading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) : (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: !!(logMetadata === null || logMetadata === void 0 ? void 0 : logMetadata.checked), onChange: handleCheckboxChange }), label: "Mark as done" })] }));
+    }, [log.correlation, sendMessage]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: 1, p: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { gutterBottom: true, variant: "h6", children: "Log Summary" }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Correlation ID: ", log.correlation] }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: checkedLoading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 24 }) : (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: !!(logMetadata === null || logMetadata === void 0 ? void 0 : logMetadata.checked), onChange: handleCheckboxChange }), label: "Mark as done" })] }));
 };
 exports.LogSummary = LogSummary;