@qpqjs/web-admin 0.0.0-stage → 0.2.0

package/lib/commonjs/LogViewer/LogSearch.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogSearch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const adminApp_1 = require("../adminApp");
+const TabViewBox_1 = require("../components/TabViewBox");
+const useIsLoading_1 = require("../view/Loading/hooks/useIsLoading");
+const LogMetadataGrid_1 = require("./LogMetadataGrid");
+const TopSection_1 = require("./TopSection");
+const LogSearch = () => {
+    const [api] = (0, adminApp_1.useAdminApp)();
+    const session = (0, adminApp_1.useSessionState)();
+    const volatile = (0, adminApp_1.useVolatileState)();
+    const isLoading = (0, useIsLoading_1.useIsLoading)();
+    const results = volatile.logResults[(0, adminApp_1.logSearchKey)(session.search)];
+    const logs = (0, react_1.useMemo)(() => { var _a; return (_a = results === null || results === void 0 ? void 0 : results.logs) !== null && _a !== void 0 ? _a : []; }, [results === null || results === void 0 ? void 0 : results.logs]);
+    (0, react_1.useEffect)(() => {
+        window.logs = logs;
+        window.viewLog = (log) => api.applyCorrelationOpened(log.correlation, adminApp_1.CorrelationOpenSource.grid);
+    }, [logs, api]);
+    (0, react_1.useEffect)(() => {
+        console.log('logs attached to window, try: viewLog(logs[0])');
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(TabViewBox_1.TabViewBox, { body: () => (0, jsx_runtime_1.jsx)(LogMetadataGrid_1.LogMetadataGrid, { isLoading: isLoading || !!(results === null || results === void 0 ? void 0 : results.isSearching), logs: logs }), header: () => (0, jsx_runtime_1.jsx)(TopSection_1.TopSection, { onSearch: () => api.runLogSearch() }) }));
+};
+exports.LogSearch = LogSearch;
+//# sourceMappingURL=LogSearch.js.map

package/lib/commonjs/LogViewer/LogSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogSearch.js","sourceRoot":"","sources":["../../../src/LogViewer/LogSearch.tsx"],"names":[],"mappings":";;;;AAAA,iCAA2C;AAE3C,0CAAkH;AAClH,yDAAsD;AACtD,qEAAkE;AAClE,uDAAoD;AACpD,6CAA0C;AASnC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,GAAG,CAAC,GAAG,IAAA,sBAAW,GAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,IAAA,0BAAe,GAAE,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAA,2BAAgB,GAAE,CAAC;IACpC,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IAEjC,MAAM,OAAO,GAAG,QAAQ,CAAC,UAAU,CAAC,IAAA,uBAAY,EAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,IAAI,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,mCAAI,EAAE,CAAA,EAAA,EAAE,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC,CAAC,CAAC;IAEjE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;QACnB,MAAM,CAAC,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,sBAAsB,CAAC,GAAG,CAAC,WAAW,EAAE,gCAAqB,CAAC,IAAI,CAAC,CAAC;IACzG,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;IAEhB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,CAAC,GAAG,CAAC,gDAAgD,CAAC,CAAC;IAChE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,uBAAC,uBAAU,IACT,IAAI,EAAE,GAAG,EAAE,CAAC,uBAAC,iCAAe,IAAC,SAAS,EAAE,SAAS,IAAI,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAA,EAAE,IAAI,EAAE,IAAI,GAAI,EAC3F,MAAM,EAAE,GAAG,EAAE,CAAC,uBAAC,uBAAU,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,GAAI,GAChE,CACH,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,SAAS,aAwBpB","sourcesContent":["import { useEffect, useMemo } from 'react';\n\nimport { CorrelationOpenSource, logSearchKey, useAdminApp, useSessionState, useVolatileState } from '../adminApp';\nimport { TabViewBox } from '../components/TabViewBox';\nimport { useIsLoading } from '../view/Loading/hooks/useIsLoading';\nimport { LogMetadataGrid } from './LogMetadataGrid';\nimport { TopSection } from './TopSection';\n\ndeclare global {\n  interface Window {\n    logs: any;\n    viewLog: any;\n  }\n}\n\nexport const LogSearch = () => {\n  const [api] = useAdminApp();\n  const session = useSessionState();\n  const volatile = useVolatileState();\n  const isLoading = useIsLoading();\n\n  const results = volatile.logResults[logSearchKey(session.search)];\n  const logs = useMemo(() => results?.logs ?? [], [results?.logs]);\n\n  useEffect(() => {\n    window.logs = logs;\n    window.viewLog = (log: any) => api.applyCorrelationOpened(log.correlation, CorrelationOpenSource.grid);\n  }, [logs, api]);\n\n  useEffect(() => {\n    console.log('logs attached to window, try: viewLog(logs[0])');\n  }, []);\n\n  return (\n    <TabViewBox\n      body={() => <LogMetadataGrid isLoading={isLoading || !!results?.isSearching} logs={logs} />}\n      header={() => <TopSection onSearch={() => api.runLogSearch()} />}\n    />\n  );\n};\n"]}

package/lib/commonjs/LogViewer/LogSummary.d.ts

@@ -0,0 +1,6 @@
+import { StoryResult } from '@qpqjs/core';
+interface LogSummaryProps {
+    log: StoryResult<any>;
+}
+export declare const LogSummary: ({ log }: LogSummaryProps) => import("react").JSX.Element;
+export {};

package/lib/commonjs/LogViewer/LogSummary.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogSummary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const features_1 = require("@qpqjs/features");
+const web_react_1 = require("@qpqjs/web-react");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const adminApp_1 = require("../adminApp");
+const LogSummary = ({ log }) => {
+    const [checkedLoading, setCheckedLoading] = (0, react_1.useState)(true);
+    const [logMetadata, setLogMetadata] = (0, react_1.useState)(null);
+    const [adminApi] = (0, adminApp_1.useAdminApp)();
+    const sendMessage = (0, web_react_1.useWebsocketSendEvent)();
+    const handleCheckboxChange = (event) => {
+        setCheckedLoading(true);
+        const checkEvent = {
+            type: features_1.WebsocketAdminClientMessageEventType.MarkLogChecked,
+            payload: {
+                correlationId: log.correlation,
+                checked: event.target.checked,
+            },
+        };
+        adminApi.applyLogCheckToggled(log.correlation, event.target.checked);
+        sendMessage(checkEvent);
+    };
+    (0, web_react_1.useSubscribeToWebSocketEvent)(features_1.WebSocketQueueQpqAdminServerMessageEventType.LogMetadata, (_webSocketService, message) => {
+        if (message.payload.log.correlation !== log.correlation) {
+            return;
+        }
+        setCheckedLoading(false);
+        setLogMetadata(message.payload.log);
+    });
+    (0, react_1.useEffect)(() => {
+        const refreshEvent = {
+            type: features_1.WebsocketAdminClientMessageEventType.RefreshLogMetadata,
+            payload: {
+                correlationId: log.correlation,
+            },
+        };
+        sendMessage(refreshEvent);
+    }, [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;
+//# sourceMappingURL=LogSummary.js.map

package/lib/commonjs/LogViewer/LogSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogSummary.js","sourceRoot":"","sources":["../../../src/LogViewer/LogSummary.tsx"],"names":[],"mappings":";;;;AACA,8CAOyB;AACzB,gDAAuF;AAEvF,iCAA4C;AAC5C,4CAA8F;AAE9F,0CAA0C;AAMnC,MAAM,UAAU,GAAG,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE;IACrD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAC3D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAqB,IAAI,CAAC,CAAC;IAEzE,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAA,sBAAW,GAAE,CAAC;IACjC,MAAM,WAAW,GAAG,IAAA,iCAAqB,GAAE,CAAC;IAE5C,MAAM,oBAAoB,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC1E,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAExB,MAAM,UAAU,GAA2D;YACzE,IAAI,EAAE,+CAAoC,CAAC,cAAc;YACzD,OAAO,EAAE;gBACP,aAAa,EAAE,GAAG,CAAC,WAAW;gBAC9B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;aAC9B;SACF,CAAC;QAEF,QAAQ,CAAC,oBAAoB,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACrE,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,IAAA,wCAA4B,EAC1B,uDAA4C,CAAC,WAAW,EACxD,CAAC,iBAAiB,EAAE,OAA4D,EAAE,EAAE;QAClF,IAAI,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,KAAK,GAAG,CAAC,WAAW,EAAE,CAAC;YACxD,OAAO;QACT,CAAC;QAED,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC,CACF,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAA+D;YAC/E,IAAI,EAAE,+CAAoC,CAAC,kBAAkB;YAC7D,OAAO,EAAE;gBACP,aAAa,EAAE,GAAG,CAAC,WAAW;aAC/B;SACF,CAAC;QAEF,WAAW,CAAC,YAAY,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,wBAAC,cAAG,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,aACzB,uBAAC,qBAAU,IAAC,YAAY,QAAC,OAAO,EAAC,IAAI,4BAExB,EACb,wBAAC,qBAAU,mCAAkB,GAAG,CAAC,WAAW,IAAc,EAC1D,uBAAC,2BAAgB,IACf,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,uBAAC,2BAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,uBAAC,mBAAQ,IAAC,OAAO,EAAE,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAA,EAAE,QAAQ,EAAE,oBAAoB,GAAI,EACxI,KAAK,EAAC,cAAc,GACpB,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAzDW,QAAA,UAAU,cAyDrB","sourcesContent":["import { StoryResult } from '@qpqjs/core';\nimport {\n  LogMetadata,\n  WebsocketAdminClientMessageEventType,\n  WebSocketQueueClientEventMessageQpqAdminMarkLogChecked,\n  WebSocketQueueClientEventMessageQpqAdminRefreshLogMetadata,\n  WebSocketQueueQpqAdminServerEventMessageLogMetadata,\n  WebSocketQueueQpqAdminServerMessageEventType,\n} from '@qpqjs/features';\nimport { useSubscribeToWebSocketEvent, useWebsocketSendEvent } from '@qpqjs/web-react';\n\nimport { useEffect, useState } from 'react';\nimport { Box, Checkbox, CircularProgress, FormControlLabel, Typography } from '@mui/material';\n\nimport { useAdminApp } from '../adminApp';\n\ninterface LogSummaryProps {\n  log: StoryResult<any>;\n}\n\nexport const LogSummary = ({ log }: LogSummaryProps) => {\n  const [checkedLoading, setCheckedLoading] = useState(true);\n  const [logMetadata, setLogMetadata] = useState<LogMetadata | null>(null);\n\n  const [adminApi] = useAdminApp();\n  const sendMessage = useWebsocketSendEvent();\n\n  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setCheckedLoading(true);\n\n    const checkEvent: WebSocketQueueClientEventMessageQpqAdminMarkLogChecked = {\n      type: WebsocketAdminClientMessageEventType.MarkLogChecked,\n      payload: {\n        correlationId: log.correlation,\n        checked: event.target.checked,\n      },\n    };\n\n    adminApi.applyLogCheckToggled(log.correlation, event.target.checked);\n    sendMessage(checkEvent);\n  };\n\n  useSubscribeToWebSocketEvent(\n    WebSocketQueueQpqAdminServerMessageEventType.LogMetadata,\n    (_webSocketService, message: WebSocketQueueQpqAdminServerEventMessageLogMetadata) => {\n      if (message.payload.log.correlation !== log.correlation) {\n        return;\n      }\n\n      setCheckedLoading(false);\n      setLogMetadata(message.payload.log);\n    },\n  );\n\n  useEffect(() => {\n    const refreshEvent: WebSocketQueueClientEventMessageQpqAdminRefreshLogMetadata = {\n      type: WebsocketAdminClientMessageEventType.RefreshLogMetadata,\n      payload: {\n        correlationId: log.correlation,\n      },\n    };\n\n    sendMessage(refreshEvent);\n  }, [log.correlation, sendMessage]);\n\n  return (\n    <Box sx={{ width: 1, p: 2 }}>\n      <Typography gutterBottom variant=\"h6\">\n        Log Summary\n      </Typography>\n      <Typography>Correlation ID: {log.correlation}</Typography>\n      <FormControlLabel\n        control={checkedLoading ? <CircularProgress size={24} /> : <Checkbox checked={!!logMetadata?.checked} onChange={handleCheckboxChange} />}\n        label=\"Mark as done\"\n      />\n    </Box>\n  );\n};\n"]}

package/lib/commonjs/LogViewer/LogSummaryDetails.d.ts

@@ -0,0 +1,6 @@
+import { StoryResult } from '@qpqjs/core';
+interface LogSummaryDetailsProps {
+    log: StoryResult<any>;
+}
+export declare const LogSummaryDetails: ({ log }: LogSummaryDetailsProps) => import("react").JSX.Element;
+export {};

package/lib/commonjs/LogViewer/LogSummaryDetails.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogSummaryDetails = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@qpqjs/core");
+const react_1 = require("react");
+const ExpandLess_1 = __importDefault(require("@mui/icons-material/ExpandLess"));
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+const material_1 = require("@mui/material");
+const AnyVariableView_1 = require("./actionComponents/genericActionRenderer/AnyVariableView");
+const runtimeTypeToCamelCase = (runtimeType) => runtimeType.toLowerCase().replace(/_(\w)/g, (_, char) => char.toUpperCase());
+const LogSummaryDetails = ({ log }) => {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const totalRuntime = new Date(log.finishedAt).getTime() - new Date(log.startedAt).getTime();
+    const functionKey = log.qpqFunctionRuntimeInfo
+        ? (0, core_1.getFederatedKeyFromQpqFunctionRuntime)(log.qpqFunctionRuntimeInfo)
+        : runtimeTypeToCamelCase(log.runtimeType);
+    const basePath = log.qpqFunctionRuntimeInfo && (0, core_1.isQpqFunctionRuntimeAdvanced)(log.qpqFunctionRuntimeInfo) ? log.qpqFunctionRuntimeInfo.basePath : undefined;
+    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.jsxs)(material_1.Typography, { gutterBottom: true, variant: "h5", children: [log.runtimeType, " - ", log.moduleName] }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => setExpanded(!expanded), 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)("div", { children: (0, jsx_runtime_1.jsxs)("pre", { style: AnyVariableView_1.genericFunctionRendererStyles.pre, children: [(0, jsx_runtime_1.jsxs)("div", { style: AnyVariableView_1.genericFunctionRendererStyles.commentBlock, children: [(0, jsx_runtime_1.jsx)("div", { children: '// //////////////////////////////////////////////////////' }), (0, jsx_runtime_1.jsxs)("div", { children: ['// src: ', functionKey] }), basePath && ((0, jsx_runtime_1.jsxs)("div", { children: ['// basePath: ', basePath] })), log.fromCorrelation && ((0, jsx_runtime_1.jsxs)("div", { children: ['// Caller: ', log.fromCorrelation] })), (0, jsx_runtime_1.jsxs)("div", { children: ['// Total Runtime: ', (0, jsx_runtime_1.jsxs)("span", { style: AnyVariableView_1.genericFunctionRendererStyles.highlightComment, children: [totalRuntime, " ms"] })] }), (0, jsx_runtime_1.jsx)("div", { children: '// //////////////////////////////////////////////////////' })] }), (0, jsx_runtime_1.jsx)(AnyVariableView_1.GenericFunctionRenderer, { args: log.input, expanded: expanded, functionName: functionKey.split('::').pop() || 'unknown' })] }) })] }));
+};
+exports.LogSummaryDetails = LogSummaryDetails;
+//# sourceMappingURL=LogSummaryDetails.js.map

package/lib/commonjs/LogViewer/LogSummaryDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogSummaryDetails.js","sourceRoot":"","sources":["../../../src/LogViewer/LogSummaryDetails.tsx"],"names":[],"mappings":";;;;;;;AAAA,sCAA+G;AAE/G,iCAAiC;AACjC,gFAA4D;AAC5D,gFAA4D;AAC5D,4CAAqE;AAErE,8FAAkI;AAMlI,MAAM,sBAAsB,GAAG,CAAC,WAAmB,EAAU,EAAE,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AAEtI,MAAM,iBAAiB,GAAG,CAAC,EAAE,GAAG,EAA0B,EAAE,EAAE;IACnE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC;IAC5F,MAAM,WAAW,GAAG,GAAG,CAAC,sBAAsB;QAC5C,CAAC,CAAC,IAAA,4CAAqC,EAAC,GAAG,CAAC,sBAAsB,CAAC;QACnE,CAAC,CAAC,sBAAsB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC5C,MAAM,QAAQ,GACZ,GAAG,CAAC,sBAAsB,IAAI,IAAA,mCAA4B,EAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3I,OAAO,CACL,6DACE,wBAAC,cAAG,IAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,aACrC,wBAAC,qBAAU,IAAC,YAAY,QAAC,OAAO,EAAC,IAAI,aAClC,GAAG,CAAC,WAAW,SAAK,GAAG,CAAC,UAAU,IACxB,EACb,uBAAC,kBAAO,IAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,YAC9C,uBAAC,qBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAC,OAAO,YAC5D,QAAQ,CAAC,CAAC,CAAC,uBAAC,oBAAc,KAAG,CAAC,CAAC,CAAC,uBAAC,oBAAc,KAAG,GACxC,GACL,IACN,EACN,0CACE,iCAAK,KAAK,EAAE,+CAA6B,CAAC,GAAG,aAC3C,iCAAK,KAAK,EAAE,+CAA6B,CAAC,YAAY,aACpD,0CAAM,2DAA2D,GAAO,EACxE,4CACG,UAAU,EACV,WAAW,IACR,EACL,QAAQ,IAAI,CACX,4CACG,eAAe,EACf,QAAQ,IACL,CACP,EACA,GAAG,CAAC,eAAe,IAAI,CACtB,4CACG,aAAa,EACb,GAAG,CAAC,eAAe,IAChB,CACP,EACD,4CACG,oBAAoB,EACrB,kCAAM,KAAK,EAAE,+CAA6B,CAAC,gBAAgB,aAAG,YAAY,WAAW,IACjF,EACN,0CAAM,2DAA2D,GAAO,IACpE,EACN,uBAAC,yCAAuB,IAAC,IAAI,EAAE,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,IAAI,SAAS,GAAI,IACtH,GACF,IACL,CACJ,CAAC;AACJ,CAAC,CAAC;AArDW,QAAA,iBAAiB,qBAqD5B","sourcesContent":["import { getFederatedKeyFromQpqFunctionRuntime, isQpqFunctionRuntimeAdvanced, StoryResult } from '@qpqjs/core';\n\nimport { useState } from 'react';\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport { Box, IconButton, Tooltip, Typography } from '@mui/material';\n\nimport { GenericFunctionRenderer, genericFunctionRendererStyles } from './actionComponents/genericActionRenderer/AnyVariableView';\n\ninterface LogSummaryDetailsProps {\n  log: StoryResult<any>;\n}\n\nconst runtimeTypeToCamelCase = (runtimeType: string): string => runtimeType.toLowerCase().replace(/_(\\w)/g, (_, char) => char.toUpperCase());\n\nexport const LogSummaryDetails = ({ log }: LogSummaryDetailsProps) => {\n  const [expanded, setExpanded] = useState(false);\n\n  const totalRuntime = new Date(log.finishedAt).getTime() - new Date(log.startedAt).getTime();\n  const functionKey = log.qpqFunctionRuntimeInfo\n    ? getFederatedKeyFromQpqFunctionRuntime(log.qpqFunctionRuntimeInfo)\n    : runtimeTypeToCamelCase(log.runtimeType);\n  const basePath =\n    log.qpqFunctionRuntimeInfo && isQpqFunctionRuntimeAdvanced(log.qpqFunctionRuntimeInfo) ? log.qpqFunctionRuntimeInfo.basePath : undefined;\n\n  return (\n    <>\n      <Box alignItems=\"center\" display=\"flex\">\n        <Typography gutterBottom variant=\"h5\">\n          {log.runtimeType} - {log.moduleName}\n        </Typography>\n        <Tooltip title={expanded ? 'Collapse' : 'Expand'}>\n          <IconButton onClick={() => setExpanded(!expanded)} size=\"small\">\n            {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}\n          </IconButton>\n        </Tooltip>\n      </Box>\n      <div>\n        <pre style={genericFunctionRendererStyles.pre}>\n          <div style={genericFunctionRendererStyles.commentBlock}>\n            <div>{'// //////////////////////////////////////////////////////'}</div>\n            <div>\n              {'// src: '}\n              {functionKey}\n            </div>\n            {basePath && (\n              <div>\n                {'// basePath: '}\n                {basePath}\n              </div>\n            )}\n            {log.fromCorrelation && (\n              <div>\n                {'// Caller: '}\n                {log.fromCorrelation}\n              </div>\n            )}\n            <div>\n              {'// Total Runtime: '}\n              <span style={genericFunctionRendererStyles.highlightComment}>{totalRuntime} ms</span>\n            </div>\n            <div>{'// //////////////////////////////////////////////////////'}</div>\n          </div>\n          <GenericFunctionRenderer args={log.input} expanded={expanded} functionName={functionKey.split('::').pop() || 'unknown'} />\n        </pre>\n      </div>\n    </>\n  );\n};\n"]}

package/lib/commonjs/LogViewer/LogSummaryReturn.d.ts

@@ -0,0 +1,6 @@
+import { StoryResult } from '@qpqjs/core';
+interface LogSummaryReturnProps {
+    log: StoryResult<any>;
+}
+export declare const LogSummaryReturn: ({ log }: LogSummaryReturnProps) => import("react").JSX.Element;
+export {};

package/lib/commonjs/LogViewer/LogSummaryReturn.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogSummaryReturn = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ExpandLess_1 = __importDefault(require("@mui/icons-material/ExpandLess"));
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+const material_1 = require("@mui/material");
+const actionComponents_1 = require("./actionComponents");
+const LogSummaryReturn = ({ log }) => {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { alignItems: "center", display: "flex", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { gutterBottom: true, variant: "h6", children: log.error ? 'Thrown Error' : 'Returned' }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: expanded ? 'Collapse' : 'Expand', children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => setExpanded(!expanded), 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)("pre", { style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: (0, jsx_runtime_1.jsx)("pre", { style: actionComponents_1.genericFunctionRendererStyles.pre, children: log.error ? (0, jsx_runtime_1.jsx)(actionComponents_1.AnyVariableView, { expanded: expanded, value: log.error }) : (0, jsx_runtime_1.jsx)(actionComponents_1.AnyVariableView, { expanded: expanded, value: log.result }) }) })] }));
+};
+exports.LogSummaryReturn = LogSummaryReturn;
+//# sourceMappingURL=LogSummaryReturn.js.map

package/lib/commonjs/LogViewer/LogSummaryReturn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogSummaryReturn.js","sourceRoot":"","sources":["../../../src/LogViewer/LogSummaryReturn.tsx"],"names":[],"mappings":";;;;;;;AAEA,iCAAiC;AACjC,gFAA4D;AAC5D,gFAA4D;AAC5D,4CAAqE;AAErE,yDAAoF;AAM7E,MAAM,gBAAgB,GAAG,CAAC,EAAE,GAAG,EAAyB,EAAE,EAAE;IACjE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEhD,OAAO,CACL,4CACE,wBAAC,cAAG,IAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,aACrC,uBAAC,qBAAU,IAAC,YAAY,QAAC,OAAO,EAAC,IAAI,YAClC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,GAC7B,EACb,uBAAC,kBAAO,IAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,YAC9C,uBAAC,qBAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAC,OAAO,YAC5D,QAAQ,CAAC,CAAC,CAAC,uBAAC,oBAAc,KAAG,CAAC,CAAC,CAAC,uBAAC,oBAAc,KAAG,GACxC,GACL,IACN,EACN,gCAAK,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,YAC7D,gCAAK,KAAK,EAAE,gDAA6B,CAAC,GAAG,YAC1C,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,uBAAC,kCAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,GAAI,CAAC,CAAC,CAAC,uBAAC,kCAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,MAAM,GAAI,GAC/H,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,gBAAgB,oBAsB3B","sourcesContent":["import { StoryResult } from '@qpqjs/core';\n\nimport { useState } from 'react';\nimport ExpandLessIcon from '@mui/icons-material/ExpandLess';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport { Box, IconButton, Tooltip, Typography } from '@mui/material';\n\nimport { AnyVariableView, genericFunctionRendererStyles } from './actionComponents';\n\ninterface LogSummaryReturnProps {\n  log: StoryResult<any>;\n}\n\nexport const LogSummaryReturn = ({ log }: LogSummaryReturnProps) => {\n  const [expanded, setExpanded] = useState(false);\n\n  return (\n    <div>\n      <Box alignItems=\"center\" display=\"flex\">\n        <Typography gutterBottom variant=\"h6\">\n          {log.error ? 'Thrown Error' : 'Returned'}\n        </Typography>\n        <Tooltip title={expanded ? 'Collapse' : 'Expand'}>\n          <IconButton onClick={() => setExpanded(!expanded)} size=\"small\">\n            {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}\n          </IconButton>\n        </Tooltip>\n      </Box>\n      <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>\n        <pre style={genericFunctionRendererStyles.pre}>\n          {log.error ? <AnyVariableView expanded={expanded} value={log.error} /> : <AnyVariableView expanded={expanded} value={log.result} />}\n        </pre>\n      </pre>\n    </div>\n  );\n};\n"]}

package/lib/commonjs/LogViewer/TopSection.d.ts

@@ -0,0 +1,4 @@
+export interface TopSectionProps {
+    onSearch: () => Promise<any>;
+}
+export declare function TopSection({ onSearch }: TopSectionProps): import("react").JSX.Element;

package/lib/commonjs/LogViewer/TopSection.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopSection = TopSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+const material_1 = require("@mui/material");
+const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+const Select_1 = __importDefault(require("@mui/material/Select"));
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const system_1 = require("@mui/system");
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
+const adminApp_1 = require("../adminApp");
+const AsyncButton_1 = require("../components/AsyncButton");
+const constants_1 = require("./constants");
+const hooks_1 = require("./hooks");
+function TopSection({ onSearch }) {
+    const serviceOptions = (0, hooks_1.useServiceNames)();
+    const { runtimeType, handleRuntimeTypeOnChange, service, handleServiceOnChange, startDate, handleStartDateChange, endDate, handleEndDateChange, user, handleUserOnChange, info, handleInfoOnChange, deep, handleDeepOnChange, error, handleErrorOnChange, updateStartAndEndTimeSpan, } = (0, adminApp_1.useSearchFields)();
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const handleQuickTimeClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleQuickTimeClose = () => {
+        setAnchorEl(null);
+    };
+    const handleQuickTimeSelect = (minutes) => {
+        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, { columns: 12, container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 2, 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: "Runtime Type" }), (0, jsx_runtime_1.jsx)(Select_1.default, { id: "demo-simple-select", label: "Runtime Type", labelId: "runtime-select-label", onChange: handleRuntimeTypeOnChange, value: runtimeType, children: constants_1.RuntimeTypes.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: 2, 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,
+                                    }, label: "Service Name" }))), value: serviceOptions.find((o) => o.value === service) || null }) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 2, 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: 2, 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: 4, children: (0, jsx_runtime_1.jsx)(FormControl_1.default, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { InputLabelProps: {
+                                    shrink: true,
+                                }, label: "User", onChange: handleUserOnChange, value: user }) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 6, children: (0, jsx_runtime_1.jsx)(FormControl_1.default, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { InputLabelProps: {
+                                    shrink: true,
+                                }, label: "Info", onChange: handleInfoOnChange, value: info }) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, xs: 6, children: (0, jsx_runtime_1.jsx)(FormControl_1.default, { fullWidth: true, children: (0, jsx_runtime_1.jsx)(TextField_1.default, { InputLabelProps: {
+                                    shrink: true,
+                                }, label: "Error Filter", onChange: handleErrorOnChange, value: error }) }) }), (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,
+                                }, label: "Deep Search", onChange: handleDeepOnChange, placeholder: "Use with caution, reduce results with above fields first, this is a contains search on the log JSON, so it will be slow.", value: deep }) }) }), (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" })] })] }));
+}
+//# sourceMappingURL=TopSection.js.map

package/lib/commonjs/LogViewer/TopSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopSection.js","sourceRoot":"","sources":["../../../src/LogViewer/TopSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport { Autocomplete, IconButton, Menu } from '@mui/material';\nimport FormControl from '@mui/material/FormControl';\nimport Grid from '@mui/material/Grid';\nimport InputLabel from '@mui/material/InputLabel';\nimport MenuItem from '@mui/material/MenuItem';\nimport Select from '@mui/material/Select';\nimport TextField from '@mui/material/TextField';\nimport { Box } from '@mui/system';\nimport { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\n\nimport { useSearchFields } from '../adminApp';\nimport { AsyncButton } from '../components/AsyncButton';\nimport { RuntimeTypes } from './constants';\nimport { useServiceNames } from './hooks';\n\nexport interface TopSectionProps {\n  onSearch: () => Promise<any>;\n}\n\nexport function TopSection({ onSearch }: TopSectionProps) {\n  const serviceOptions = useServiceNames();\n\n  const {\n    runtimeType,\n    handleRuntimeTypeOnChange,\n    service,\n    handleServiceOnChange,\n    startDate,\n    handleStartDateChange,\n    endDate,\n    handleEndDateChange,\n    user,\n    handleUserOnChange,\n    info,\n    handleInfoOnChange,\n    deep,\n    handleDeepOnChange,\n    error,\n    handleErrorOnChange,\n    updateStartAndEndTimeSpan,\n  } = useSearchFields();\n\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const handleQuickTimeClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleQuickTimeClose = () => {\n    setAnchorEl(null);\n  };\n\n  const handleQuickTimeSelect = (minutes: number) => {\n    updateStartAndEndTimeSpan(minutes);\n    handleQuickTimeClose();\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Grid columns={12} container spacing={2}>\n        <Grid item xs={2}>\n          <FormControl fullWidth>\n            <InputLabel id=\"runtime-select-label\">Runtime Type</InputLabel>\n            <Select\n              id=\"demo-simple-select\"\n              label=\"Runtime Type\"\n              labelId=\"runtime-select-label\"\n              onChange={handleRuntimeTypeOnChange}\n              value={runtimeType}\n            >\n              {RuntimeTypes.map((key) => (\n                <MenuItem key={key} value={key}>\n                  {key}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={2}>\n          <FormControl fullWidth>\n            <Autocomplete\n              getOptionLabel={(option) => option.label}\n              onChange={handleServiceOnChange}\n              options={serviceOptions}\n              renderInput={(params) => (\n                <TextField\n                  {...params}\n                  InputLabelProps={{\n                    shrink: true,\n                  }}\n                  label=\"Service Name\"\n                />\n              )}\n              value={serviceOptions.find((o) => o.value === service) || null}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={2}>\n          <Box position=\"relative\">\n            <FormControl fullWidth>\n              <DateTimePicker label=\"Start DateTime\" onChange={handleStartDateChange} value={startDate} />\n            </FormControl>\n            <IconButton\n              aria-controls=\"quick-time-menu\"\n              aria-haspopup=\"true\"\n              aria-label=\"quick time select\"\n              onClick={handleQuickTimeClick}\n              sx={{\n                position: 'absolute',\n                right: '-28px',\n                top: '50%',\n                transform: 'translateY(-50%)',\n              }}\n            >\n              <ExpandMoreIcon />\n            </IconButton>\n          </Box>\n        </Grid>\n        <Grid item xs={2}>\n          <FormControl fullWidth>\n            <DateTimePicker label=\"End DateTime\" onChange={handleEndDateChange} value={endDate} />\n          </FormControl>\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth>\n            <TextField\n              InputLabelProps={{\n                shrink: true,\n              }}\n              label=\"User\"\n              onChange={handleUserOnChange}\n              value={user}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={6}>\n          <FormControl fullWidth>\n            <TextField\n              InputLabelProps={{\n                shrink: true,\n              }}\n              label=\"Info\"\n              onChange={handleInfoOnChange}\n              value={info}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={6}>\n          <FormControl fullWidth>\n            <TextField\n              InputLabelProps={{\n                shrink: true,\n              }}\n              label=\"Error Filter\"\n              onChange={handleErrorOnChange}\n              value={error}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={10}>\n          <FormControl fullWidth>\n            <TextField\n              InputLabelProps={{\n                shrink: true,\n              }}\n              label=\"Deep Search\"\n              onChange={handleDeepOnChange}\n              placeholder=\"Use with caution, reduce results with above fields first, this is a contains search on the log JSON, so it will be slow.\"\n              value={deep}\n            />\n          </FormControl>\n        </Grid>\n        <Grid item xs={2}>\n          <AsyncButton onClick={() => onSearch()}>Search</AsyncButton>\n        </Grid>\n      </Grid>\n      <Menu anchorEl={anchorEl} id=\"quick-time-menu\" keepMounted onClose={handleQuickTimeClose} open={Boolean(anchorEl)}>\n        <MenuItem onClick={() => handleQuickTimeSelect(5)}>Last 5 minutes</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(30)}>Last 30 minutes</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(1 * 60)}>Last hour</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(3 * 60)}>Last 3 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(8 * 60)}>Last 8 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(16 * 60)}>Last 16 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(24 * 60)}>Last 24 hours</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(7 * 24 * 60)}>Last 7 days</MenuItem>\n        <MenuItem onClick={() => handleQuickTimeSelect(30 * 24 * 60)}>Last month</MenuItem>\n      </Menu>\n    </LocalizationProvider>\n  );\n}\n"]}

package/lib/commonjs/LogViewer/TraceViewer/LocalValueTree.d.ts

@@ -0,0 +1,8 @@
+import { QpqExecutionTraceValue } from '@qpqjs/core';
+import React from 'react';
+interface LocalValueTreeProps {
+    name: string;
+    value: QpqExecutionTraceValue;
+}
+export declare const LocalValueTree: React.FC<LocalValueTreeProps>;
+export {};

package/lib/commonjs/LogViewer/TraceViewer/LocalValueTree.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalValueTree = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const primitiveStyle = { color: 'rgba(70, 140, 200, 1)' };
+const markerStyle = { color: 'rgba(150, 150, 150, 1)', fontStyle: 'italic' };
+const nameStyle = { fontWeight: 600 };
+const branchStyle = { paddingLeft: 20 };
+// Capture-time placeholders («circular», «function fn», «+3 more», …) come through as
+// strings — render them dim/italic so they read as markers, not data.
+const isMarkerString = (value) => value.startsWith('«') && value.endsWith('»');
+const renderPrimitive = (value) => {
+    if (typeof value === 'string') {
+        return isMarkerString(value) ? (0, jsx_runtime_1.jsx)("span", { style: markerStyle, children: value.slice(1, -1) }) : (0, jsx_runtime_1.jsx)("span", { style: primitiveStyle, children: `'${value}'` });
+    }
+    return (0, jsx_runtime_1.jsx)("span", { style: primitiveStyle, children: String(value) });
+};
+const RenderNode = ({ label, node }) => {
+    if (node === null || typeof node !== 'object') {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: branchStyle, children: [(0, jsx_runtime_1.jsx)("span", { style: nameStyle, children: label }), ": ", renderPrimitive(node)] }));
+    }
+    const isArray = Array.isArray(node);
+    const entries = Object.entries(node);
+    const summary = isArray ? `[${entries.length}]` : `{${entries.length}}`;
+    return ((0, jsx_runtime_1.jsxs)("details", { style: branchStyle, children: [(0, jsx_runtime_1.jsxs)("summary", { style: { cursor: 'pointer' }, children: [(0, jsx_runtime_1.jsx)("span", { style: nameStyle, children: label }), " ", (0, jsx_runtime_1.jsx)("span", { style: markerStyle, children: summary })] }), entries.map(([key, child]) => ((0, jsx_runtime_1.jsx)(RenderNode, { label: key, node: child }, key)))] }));
+};
+const LocalValueTree = ({ name, value }) => {
+    const parsed = (0, react_1.useMemo)(() => {
+        if (!value.json) {
+            return undefined;
+        }
+        try {
+            return JSON.parse(value.json);
+        }
+        catch (_a) {
+            return undefined;
+        }
+    }, [value.json]);
+    if (parsed === undefined || parsed === null || typeof parsed !== 'object') {
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { style: nameStyle, children: name }), " = ", value.preview] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("details", { children: [(0, jsx_runtime_1.jsxs)("summary", { style: { cursor: 'pointer' }, children: [(0, jsx_runtime_1.jsx)("span", { style: nameStyle, children: name }), " = ", value.preview] }), Object.entries(parsed).map(([key, child]) => ((0, jsx_runtime_1.jsx)(RenderNode, { label: key, node: child }, key)))] }));
+};
+exports.LocalValueTree = LocalValueTree;
+//# sourceMappingURL=LocalValueTree.js.map

package/lib/commonjs/LogViewer/TraceViewer/LocalValueTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalValueTree.js","sourceRoot":"","sources":["../../../../src/LogViewer/TraceViewer/LocalValueTree.tsx"],"names":[],"mappings":"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","sourcesContent":["import { QpqExecutionTraceValue } from '@qpqjs/core';\n\nimport React, { useMemo } from 'react';\n\n// Expandable rendering of one captured local. Values with a deep json capture render as\n// a collapsible tree (native <details>, so state survives without bookkeeping); values\n// without one fall back to their preview string.\n\ninterface LocalValueTreeProps {\n  name: string;\n  value: QpqExecutionTraceValue;\n}\n\nconst primitiveStyle: React.CSSProperties = { color: 'rgba(70, 140, 200, 1)' };\nconst markerStyle: React.CSSProperties = { color: 'rgba(150, 150, 150, 1)', fontStyle: 'italic' };\nconst nameStyle: React.CSSProperties = { fontWeight: 600 };\nconst branchStyle: React.CSSProperties = { paddingLeft: 20 };\n\n// Capture-time placeholders («circular», «function fn», «+3 more», …) come through as\n// strings — render them dim/italic so they read as markers, not data.\nconst isMarkerString = (value: string): boolean => value.startsWith('«') && value.endsWith('»');\n\nconst renderPrimitive = (value: unknown): React.ReactNode => {\n  if (typeof value === 'string') {\n    return isMarkerString(value) ? <span style={markerStyle}>{value.slice(1, -1)}</span> : <span style={primitiveStyle}>{`'${value}'`}</span>;\n  }\n  return <span style={primitiveStyle}>{String(value)}</span>;\n};\n\nconst RenderNode: React.FC<{ label: string; node: unknown }> = ({ label, node }) => {\n  if (node === null || typeof node !== 'object') {\n    return (\n      <div style={branchStyle}>\n        <span style={nameStyle}>{label}</span>: {renderPrimitive(node)}\n      </div>\n    );\n  }\n\n  const isArray = Array.isArray(node);\n  const entries = Object.entries(node as Record<string, unknown>);\n  const summary = isArray ? `[${entries.length}]` : `{${entries.length}}`;\n\n  return (\n    <details style={branchStyle}>\n      <summary style={{ cursor: 'pointer' }}>\n        <span style={nameStyle}>{label}</span> <span style={markerStyle}>{summary}</span>\n      </summary>\n      {entries.map(([key, child]) => (\n        <RenderNode key={key} label={key} node={child} />\n      ))}\n    </details>\n  );\n};\n\nexport const LocalValueTree: React.FC<LocalValueTreeProps> = ({ name, value }) => {\n  const parsed = useMemo(() => {\n    if (!value.json) {\n      return undefined;\n    }\n    try {\n      return JSON.parse(value.json);\n    } catch {\n      return undefined;\n    }\n  }, [value.json]);\n\n  if (parsed === undefined || parsed === null || typeof parsed !== 'object') {\n    return (\n      <div>\n        <span style={nameStyle}>{name}</span> = {value.preview}\n      </div>\n    );\n  }\n\n  return (\n    <details>\n      <summary style={{ cursor: 'pointer' }}>\n        <span style={nameStyle}>{name}</span> = {value.preview}\n      </summary>\n      {Object.entries(parsed as Record<string, unknown>).map(([key, child]) => (\n        <RenderNode key={key} label={key} node={child} />\n      ))}\n    </details>\n  );\n};\n"]}

package/lib/commonjs/LogViewer/TraceViewer/TraceViewer.d.ts

@@ -0,0 +1,10 @@
+import { QpqExecutionTrace } from '@qpqjs/core';
+import React from 'react';
+interface TraceViewerProps {
+    trace: QpqExecutionTrace;
+    hideExternalSteps: boolean;
+    onHideExternalStepsChange: (hideExternalSteps: boolean) => void;
+    actions?: React.ReactNode;
+}
+export declare const TraceViewer: React.FC<TraceViewerProps>;
+export {};

package/lib/commonjs/LogViewer/TraceViewer/TraceViewer.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TraceViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const LocalValueTree_1 = require("./LocalValueTree");
+const traceViewerLogic_1 = require("./traceViewerLogic");
+// Layout notes (deliberate, don't regress):
+// - the slider row contains ONLY the prev/slider/next controls — any text that changes
+//   width as you scrub (step counter, function names) lives in the rows above instead,
+//   so the slider never jumps under the pointer
+// - source paths are enormous (federated chunk files) — everything that shows one is
+//   width-bounded with tail-ellipsis (rtl trick keeps the distinguishing END visible)
+//   and carries the full path in a tooltip
+const monoFont = 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';
+// Ellipsis that keeps the END of the text visible — for paths the tail is the part
+// that differs. (rtl only changes which side collapses; the string itself is ltr.)
+const tailEllipsisStyle = {
+    direction: 'rtl',
+    overflow: 'hidden',
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const codeAreaStyle = {
+    fontFamily: monoFont,
+    fontSize: '12px',
+    lineHeight: '20px',
+    overflow: 'auto',
+    whiteSpace: 'pre',
+    height: '100%',
+    border: '1px solid rgba(128, 128, 128, 0.3)',
+    borderRadius: 4,
+};
+const TraceViewer = ({ trace, hideExternalSteps, onHideExternalStepsChange, actions }) => {
+    const [selectedSourceIndex, setSelectedSourceIndex] = (0, react_1.useState)(() => (0, traceViewerLogic_1.getDefaultSourceIndex)(trace));
+    const [selectedStepIndex, setSelectedStepIndex] = (0, react_1.useState)(0);
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const highlightedLineRef = (0, react_1.useRef)(null);
+    const annotations = (0, react_1.useMemo)(() => (0, traceViewerLogic_1.buildLineAnnotations)(trace, selectedSourceIndex), [trace, selectedSourceIndex]);
+    const displaySourceNames = (0, react_1.useMemo)(() => (0, traceViewerLogic_1.getDisplaySourceNames)(trace.sources.map((traceSource) => traceSource.path)), [trace.sources]);
+    // The scrubber walks these indexes into trace.steps — all of them, or only the steps
+    // that resolved into the user's own code when the "my code" filter is on.
+    const visibleStepIndexes = (0, react_1.useMemo)(() => {
+        const externalSourceIndexes = new Set(trace.sources.flatMap((traceSource, sourceIndex) => ((0, traceViewerLogic_1.isExternalSourcePath)(traceSource.path) ? [sourceIndex] : [])));
+        return trace.steps.flatMap((step, stepIndex) => (hideExternalSteps && externalSourceIndexes.has(step.sourceIndex) ? [] : [stepIndex]));
+    }, [trace, hideExternalSteps]);
+    // Position of the selected step within the visible list (-1 while it's filtered out)
+    const selectedPosition = visibleStepIndexes.indexOf(selectedStepIndex);
+    // Turning the filter on while parked on an external step — snap forward to the next
+    // own-code step (or back to the last one)
+    (0, react_1.useEffect)(() => {
+        if (selectedPosition === -1 && visibleStepIndexes.length > 0) {
+            const nextVisible = visibleStepIndexes.find((stepIndex) => stepIndex > selectedStepIndex);
+            setSelectedStepIndex(nextVisible !== null && nextVisible !== void 0 ? nextVisible : visibleStepIndexes[visibleStepIndexes.length - 1]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedPosition, visibleStepIndexes]);
+    // Value search — which (visible) steps carry the query in a variable name, preview,
+    // or deep json capture. Ordered, so the first match is where the value first appears.
+    const matches = (0, react_1.useMemo)(() => (0, traceViewerLogic_1.searchStepValues)(trace, searchQuery, visibleStepIndexes), [trace, searchQuery, visibleStepIndexes]);
+    const matchStepIndexes = (0, react_1.useMemo)(() => matches.map((match) => match.stepIndex), [matches]);
+    const currentMatchNumber = matchStepIndexes.indexOf(selectedStepIndex) + 1;
+    const goToMatch = (direction) => {
+        if (matchStepIndexes.length === 0) {
+            return;
+        }
+        if (direction === 1) {
+            const next = matchStepIndexes.find((stepIndex) => stepIndex > selectedStepIndex);
+            setSelectedStepIndex(next !== null && next !== void 0 ? next : matchStepIndexes[0]);
+        }
+        else {
+            const previous = [...matchStepIndexes].reverse().find((stepIndex) => stepIndex < selectedStepIndex);
+            setSelectedStepIndex(previous !== null && previous !== void 0 ? previous : matchStepIndexes[matchStepIndexes.length - 1]);
+        }
+    };
+    // Match marks on the scrubber — where the searched value lives across the run
+    const matchMarks = (0, react_1.useMemo)(() => {
+        const positionByStepIndex = new Map(visibleStepIndexes.map((stepIndex, position) => [stepIndex, position]));
+        return matches.flatMap((match) => {
+            const position = positionByStepIndex.get(match.stepIndex);
+            return position === undefined ? [] : [{ value: position }];
+        });
+    }, [matches, visibleStepIndexes]);
+    const selectedStepMatchedNames = (0, react_1.useMemo)(() => { var _a, _b; return new Set((_b = (_a = matches.find((match) => match.stepIndex === selectedStepIndex)) === null || _a === void 0 ? void 0 : _a.matchedNames) !== null && _b !== void 0 ? _b : []); }, [matches, selectedStepIndex]);
+    const selectedStep = trace.steps[selectedStepIndex];
+    const source = trace.sources[selectedSourceIndex];
+    const sourceLines = (0, react_1.useMemo)(() => ((source === null || source === void 0 ? void 0 : source.content) ? source.content.split('\n') : null), [source]);
+    // Scrubbing into a step from another source file follows the execution there — keyed
+    // on the step index only, so manual source selection isn't fought by the effect.
+    (0, react_1.useEffect)(() => {
+        if (selectedStep && selectedStep.sourceIndex !== selectedSourceIndex) {
+            setSelectedSourceIndex(selectedStep.sourceIndex);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedStepIndex]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = highlightedLineRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+    }, [selectedStepIndex, selectedSourceIndex]);
+    const highlightedLine = selectedStep && selectedStep.sourceIndex === selectedSourceIndex ? selectedStep.line : undefined;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1, height: '100%' }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { alignItems: 'center', display: 'flex', gap: 1, minWidth: 0 }, children: [trace.sources.length > 1 ? ((0, jsx_runtime_1.jsx)(material_1.FormControl, { size: "small", sx: { flexShrink: 0, width: 280 }, children: (0, jsx_runtime_1.jsx)(material_1.Select, { MenuProps: { PaperProps: { sx: { maxWidth: 680 } } }, onChange: (event) => setSelectedSourceIndex(Number(event.target.value)), renderValue: (sourceIndex) => (0, jsx_runtime_1.jsx)("span", { style: tailEllipsisStyle, children: displaySourceNames[sourceIndex] }), value: selectedSourceIndex, children: trace.sources.map((traceSource, sourceIndex) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { sx: { direction: 'rtl', display: 'block', overflow: 'hidden', textAlign: 'left', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, title: traceSource.path, value: sourceIndex, children: displaySourceNames[sourceIndex] }, traceSource.path))) }) })) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (source === null || source === void 0 ? void 0 : source.path) || '', children: (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: Object.assign(Object.assign({}, tailEllipsisStyle), { flexShrink: 0, width: 280 }), variant: "caption", children: displaySourceNames[selectedSourceIndex] }) })), (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `${trace.steps.length} steps`, size: "small", sx: { flexShrink: 0 } }), (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `${trace.stats.replayMs}ms replay`, size: "small", sx: { flexShrink: 0 } }), trace.stats.instrumentMs !== undefined && (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `${trace.stats.instrumentMs}ms setup`, size: "small", sx: { flexShrink: 0 } }), trace.stats.instrumentedScriptUrls && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'pre-line' }, children: `Scripts that received breakpoints — steps are only recorded in these:\n${trace.stats.instrumentedScriptUrls.join('\n')}` }), children: (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `${trace.stats.instrumentedScriptUrls.length} scripts traced`, size: "small", sx: { flexShrink: 0 } }) })), trace.truncated && (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "warning", label: "truncated - step budget hit", size: "small", sx: { flexShrink: 0 } }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Hide steps in framework / node_modules code \u2014 scrub only through this service's own source", children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: hideExternalSteps, onChange: (event) => onHideExternalStepsChange(event.target.checked), size: "small" }), label: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", children: "My code only" }), sx: { flexShrink: 0, ml: 0.5, mr: 0 } }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1 } }), actions] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { alignItems: 'center', display: 'flex', gap: 1, px: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { onChange: (event) => setSearchQuery(event.target.value), onKeyDown: (event) => {
+                            if (event.key === 'Enter') {
+                                goToMatch(1);
+                            }
+                        }, placeholder: "Find in variables \u2014 names, values, nested json", size: "small", sx: { width: 380 }, value: searchQuery }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { disabled: matchStepIndexes.length === 0, onClick: () => goToMatch(-1), size: "small", children: "\u25C0" }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { disabled: matchStepIndexes.length === 0, onClick: () => goToMatch(1), size: "small", children: "\u25B6" }), searchQuery && ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.secondary", variant: "caption", children: matchStepIndexes.length === 0
+                            ? 'no matches'
+                            : currentMatchNumber > 0
+                                ? `match ${currentMatchNumber} of ${matchStepIndexes.length} steps`
+                                : `${matchStepIndexes.length} matching steps` })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1 } }), (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `step ${selectedPosition + 1} / ${visibleStepIndexes.length}${hideExternalSteps ? ` (${trace.steps.length} total)` : ''}`, size: "small", sx: { flexShrink: 0 }, variant: "outlined" })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { alignItems: 'center', display: 'flex', gap: 2, px: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { disabled: selectedPosition <= 0, onClick: () => setSelectedStepIndex(visibleStepIndexes[selectedPosition - 1]), size: "small", children: "\u25C0" }), (0, jsx_runtime_1.jsx)(material_1.Slider, { marks: matchMarks.length > 0 ? matchMarks : undefined, max: Math.max(visibleStepIndexes.length - 1, 0), min: 0, onChange: (event, value) => setSelectedStepIndex(visibleStepIndexes[value]), size: "small", sx: { '& .MuiSlider-mark': { backgroundColor: 'warning.main', height: 8, width: 2 } }, value: Math.max(selectedPosition, 0), valueLabelDisplay: "auto", valueLabelFormat: (position) => `step ${position + 1}` }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { disabled: selectedPosition === -1 || selectedPosition >= visibleStepIndexes.length - 1, onClick: () => setSelectedStepIndex(visibleStepIndexes[selectedPosition + 1]), size: "small", children: "\u25B6" })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flex: 1, gap: 1, minHeight: 0 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { flex: 1, minWidth: 0 }, children: [!sourceLines && ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "info", children: ["No source content available for this file (no source map in the code store) \u2014 steps reference ", source === null || source === void 0 ? void 0 : source.path, " by line only."] })), sourceLines && ((0, jsx_runtime_1.jsx)("div", { style: codeAreaStyle, children: sourceLines.map((lineText, lineIndex) => {
+                                    const lineNumber = lineIndex + 1;
+                                    const annotation = annotations.get(lineNumber);
+                                    const isHighlighted = lineNumber === highlightedLine;
+                                    return ((0, jsx_runtime_1.jsxs)("div", { ref: isHighlighted ? highlightedLineRef : undefined, onClick: () => {
+                                            // Jump the scrubber to this line's first visit (among visible steps)
+                                            const stepIndex = visibleStepIndexes.find((visibleStepIndex) => trace.steps[visibleStepIndex].sourceIndex === selectedSourceIndex && trace.steps[visibleStepIndex].line === lineNumber);
+                                            if (stepIndex !== undefined) {
+                                                setSelectedStepIndex(stepIndex);
+                                            }
+                                        }, style: {
+                                            backgroundColor: isHighlighted ? 'rgba(255, 200, 0, 0.25)' : annotation ? 'rgba(0, 160, 255, 0.06)' : undefined,
+                                            cursor: annotation ? 'pointer' : undefined,
+                                            display: 'flex',
+                                        }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                                    color: 'rgba(128, 128, 128, 0.8)',
+                                                    flexShrink: 0,
+                                                    padding: '0 8px',
+                                                    textAlign: 'right',
+                                                    userSelect: 'none',
+                                                    width: 48,
+                                                }, children: lineNumber }), (0, jsx_runtime_1.jsx)("span", { style: { flexShrink: 0 }, children: lineText }), annotation && ((0, jsx_runtime_1.jsx)("span", { style: { color: 'rgba(128, 160, 128, 0.9)', fontStyle: 'italic', paddingLeft: 24 }, children: `// ${(0, traceViewerLogic_1.formatLineAnnotation)(annotation)}` }))] }, lineNumber));
+                                }) }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            border: '1px solid rgba(128, 128, 128, 0.3)',
+                            borderRadius: 1,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flexShrink: 0,
+                            minWidth: 240,
+                            overflow: 'hidden',
+                            width: '33%',
+                        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { borderBottom: '1px solid rgba(128, 128, 128, 0.3)', px: 1, py: 0.5 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: "Watch" }), selectedStep && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { color: "text.secondary", noWrap: true, sx: { display: 'block' }, variant: "caption", children: [selectedStep.functionName || '(anonymous)', " : line ", selectedStep.line] }))] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { flex: 1, fontFamily: monoFont, fontSize: '12px', lineHeight: '18px', overflow: 'auto', p: 1 }, children: [(selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.returnValue) && ((0, jsx_runtime_1.jsx)("div", { style: Object.assign({ borderBottom: '1px solid rgba(128, 128, 128, 0.3)', marginBottom: 4, paddingBottom: 4 }, (selectedStepMatchedNames.has(traceViewerLogic_1.RETURNS_MATCH_NAME) ? { backgroundColor: 'rgba(255, 200, 0, 0.18)' } : {})), children: (0, jsx_runtime_1.jsx)(LocalValueTree_1.LocalValueTree, { name: traceViewerLogic_1.RETURNS_MATCH_NAME, value: selectedStep.returnValue }) })), selectedStep ? (Object.entries(selectedStep.locals).map(([name, value]) => ((0, jsx_runtime_1.jsx)("div", { style: selectedStepMatchedNames.has(name) ? { backgroundColor: 'rgba(255, 200, 0, 0.18)', borderRadius: 2 } : undefined, children: (0, jsx_runtime_1.jsx)(LocalValueTree_1.LocalValueTree, { name: name, value: value }) }, name)))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "text.secondary", variant: "caption", children: "No step selected" }))] })] })] })] }));
+};
+exports.TraceViewer = TraceViewer;
+//# sourceMappingURL=TraceViewer.js.map