@qpqjs/web-admin 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AdminLogs"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/LogViewer/AdminLogs/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B","sourcesContent":["export * from './AdminLogs';\n"]}

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

@@ -0,0 +1,7 @@
+import { StoryResult } from '@qpqjs/core';
+interface ConsoleLogViewerProps {
+    logs: StoryResult<any>['logs'];
+}
+export declare const ConsoleLogViewer: ({ logs }: ConsoleLogViewerProps) => import("react").JSX.Element | null;
+declare const _default: import("react").MemoExoticComponent<({ logs }: ConsoleLogViewerProps) => import("react").JSX.Element | null>;
+export default _default;

package/lib/commonjs/LogViewer/ConsoleLogViewer.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConsoleLogViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_inspector_1 = require("react-inspector");
+const hooks_1 = require("./hooks");
+const ConsoleLogViewer = ({ logs }) => {
+    const { formattedLogs } = (0, hooks_1.useConsoleLogViewer)(logs);
+    if (!formattedLogs) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { fontFamily: 'monospace' }, children: formattedLogs.map((log, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', marginBottom: '5px' }, children: [(0, jsx_runtime_1.jsxs)("span", { style: { marginRight: '5px' }, children: [log.time, " -"] }), log.args.map((arg, argIndex) => ((0, jsx_runtime_1.jsx)("span", { style: { marginRight: '5px', paddingTop: '3px' }, children: (0, jsx_runtime_1.jsx)(react_inspector_1.ObjectInspector, { data: arg }) }, argIndex)))] }, index))) }));
+};
+exports.ConsoleLogViewer = ConsoleLogViewer;
+exports.default = (0, react_1.memo)(exports.ConsoleLogViewer);
+//# sourceMappingURL=ConsoleLogViewer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConsoleLogViewer.js","sourceRoot":"","sources":["../../../src/LogViewer/ConsoleLogViewer.tsx"],"names":[],"mappings":";;;;AAEA,iCAA6B;AAC7B,qDAAkD;AAElD,mCAA8C;AAMvC,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAyB,EAAE,EAAE;IAClE,MAAM,EAAE,aAAa,EAAE,GAAG,IAAA,2BAAmB,EAAC,IAAI,CAAC,CAAC;IAEpD,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,gCAAK,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,YACpC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,iCAAiB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,aAC9D,kCAAM,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,aAAG,GAAG,CAAC,IAAI,UAAU,EACvD,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,QAAgB,EAAE,EAAE,CAAC,CAC5C,iCAAqB,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,YACnE,uBAAC,iCAAe,IAAC,IAAI,EAAE,GAAG,GAAI,IADrB,QAAQ,CAEZ,CACR,CAAC,KANM,KAAK,CAOT,CACP,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,gBAAgB,oBAqB3B;AAEF,kBAAe,IAAA,YAAI,EAAC,wBAAgB,CAAC,CAAC","sourcesContent":["import { StoryResult } from '@qpqjs/core';\n\nimport { memo } from 'react';\nimport { ObjectInspector } from 'react-inspector';\n\nimport { useConsoleLogViewer } from './hooks';\n\ninterface ConsoleLogViewerProps {\n  logs: StoryResult<any>['logs'];\n}\n\nexport const ConsoleLogViewer = ({ logs }: ConsoleLogViewerProps) => {\n  const { formattedLogs } = useConsoleLogViewer(logs);\n\n  if (!formattedLogs) {\n    return null;\n  }\n\n  return (\n    <div style={{ fontFamily: 'monospace' }}>\n      {formattedLogs.map((log, index) => (\n        <div key={index} style={{ display: 'flex', marginBottom: '5px' }}>\n          <span style={{ marginRight: '5px' }}>{log.time} -</span>\n          {log.args.map((arg: any, argIndex: number) => (\n            <span key={argIndex} style={{ marginRight: '5px', paddingTop: '3px' }}>\n              <ObjectInspector data={arg} />\n            </span>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default memo(ConsoleLogViewer);\n"]}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+interface DashboardProps {
+}
+export declare const Dashboard: React.FC<DashboardProps>;
+export {};

package/lib/commonjs/LogViewer/Dashboard.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dashboard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const features_1 = require("@qpqjs/features");
+const web_1 = require("@qpqjs/web");
+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 TabViewBox_1 = require("../components/TabViewBox");
+const useIsLoading_1 = require("../view/Loading/hooks/useIsLoading");
+const LogMetadataGrid_1 = require("./LogMetadataGrid");
+const getLogCountForSinceXDaysAgo = (logs, daysAgo) => {
+    const currentDate = new Date();
+    const daysAgoDate = new Date(currentDate.getTime() - daysAgo * 24 * 60 * 60 * 1000);
+    const daysAgoString = daysAgoDate.toISOString();
+    const logCount = logs.reduce((count, log) => (daysAgoString < log.startedAt && !log.checked ? count + 1 : count), 0);
+    return logCount;
+};
+const getHoursSinceStartOfDay = () => {
+    const now = new Date();
+    return now.getHours();
+};
+const Dashboard = () => {
+    const [api] = (0, adminApp_1.useAdminApp)();
+    const volatile = (0, adminApp_1.useVolatileState)();
+    const isLoading = (0, useIsLoading_1.useIsLoading)();
+    const results = volatile.logResults[adminApp_1.dashboardErrorsSearchKey];
+    const weeklyLogs = (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]);
+    const realtimeLogs = volatile.realtimeErrorLogs;
+    // Stable identity so the mount-only effect below can list it as a dependency.
+    const runInitialSearch = (0, web_react_1.useEffectCallback)(() => {
+        api.runDashboardErrorSearch();
+    });
+    (0, react_1.useEffect)(() => {
+        runInitialSearch();
+    }, [runInitialSearch]);
+    (0, web_react_1.useSubscribeToWebSocketEvent)(features_1.WebSocketQueueQpqAdminServerMessageEventType.LogMetadata, (webSocketService, message) => {
+        api.receiveRealtimeErrorLog(message.payload.log);
+    });
+    const hoursPassedToday = (0, web_react_1.useRunEvery)(getHoursSinceStartOfDay, 60);
+    const allLogs = (0, web_react_1.useThrottledMemo)(() => {
+        const uniqueLogs = (0, 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, 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, { isLoading: isLoading || !!(results === null || results === void 0 ? void 0 : results.isSearching), logs: allLogs }) })] }));
+};
+exports.Dashboard = Dashboard;
+//# sourceMappingURL=Dashboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.js","sourceRoot":"","sources":["../../../src/LogViewer/Dashboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { LogMetadata, WebSocketQueueQpqAdminServerEventMessageLogMetadata, WebSocketQueueQpqAdminServerMessageEventType } from '@qpqjs/features';\nimport { uniqueBy } from '@qpqjs/web';\nimport { useEffectCallback, useRunEvery, useSubscribeToWebSocketEvent, useThrottledMemo } from '@qpqjs/web-react';\n\nimport React, { useEffect, useMemo } from 'react';\nimport { Box, Grid, Paper, Typography } from '@mui/material';\n\nimport { dashboardErrorsSearchKey, useAdminApp, useVolatileState } from '../adminApp';\nimport { TabViewBox } from '../components/TabViewBox';\nimport { useIsLoading } from '../view/Loading/hooks/useIsLoading';\nimport { LogMetadataGrid } from './LogMetadataGrid';\n\nconst getLogCountForSinceXDaysAgo = (logs: LogMetadata[], daysAgo: number) => {\n  const currentDate = new Date();\n  const daysAgoDate = new Date(currentDate.getTime() - daysAgo * 24 * 60 * 60 * 1000);\n  const daysAgoString = daysAgoDate.toISOString();\n\n  const logCount = logs.reduce((count, log) => (daysAgoString < log.startedAt && !log.checked ? count + 1 : count), 0);\n\n  return logCount;\n};\n\nconst getHoursSinceStartOfDay = (): number => {\n  const now = new Date();\n  return now.getHours();\n};\n\ninterface DashboardProps {}\n\nexport const Dashboard: React.FC<DashboardProps> = () => {\n  const [api] = useAdminApp();\n  const volatile = useVolatileState();\n  const isLoading = useIsLoading();\n\n  const results = volatile.logResults[dashboardErrorsSearchKey];\n  const weeklyLogs = useMemo(() => results?.logs ?? [], [results?.logs]);\n  const realtimeLogs = volatile.realtimeErrorLogs;\n\n  // Stable identity so the mount-only effect below can list it as a dependency.\n  const runInitialSearch = useEffectCallback(() => {\n    api.runDashboardErrorSearch();\n  });\n\n  useEffect(() => {\n    runInitialSearch();\n  }, [runInitialSearch]);\n\n  useSubscribeToWebSocketEvent(\n    WebSocketQueueQpqAdminServerMessageEventType.LogMetadata,\n    (webSocketService, message: WebSocketQueueQpqAdminServerEventMessageLogMetadata) => {\n      api.receiveRealtimeErrorLog(message.payload.log);\n    },\n  );\n\n  const hoursPassedToday = useRunEvery(getHoursSinceStartOfDay, 60);\n\n  const allLogs = useThrottledMemo(() => {\n    const uniqueLogs = uniqueBy([...realtimeLogs, ...weeklyLogs], (log) => log.correlation);\n    return uniqueLogs.sort((a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime());\n  }, [realtimeLogs, weeklyLogs]);\n\n  const dailyErrorCount = useMemo(() => getLogCountForSinceXDaysAgo(allLogs, hoursPassedToday / 24), [allLogs, hoursPassedToday]);\n  const weeklyErrorCount = useMemo(() => getLogCountForSinceXDaysAgo(allLogs, 7), [allLogs]);\n\n  return (\n    <TabViewBox>\n      <Grid container spacing={2} sx={{ mb: 2 }}>\n        <Grid item xs={6}>\n          <Paper sx={{ p: 2, textAlign: 'center' }}>\n            <Typography>Daily Errors</Typography>\n            <Typography variant=\"h4\">{dailyErrorCount}</Typography>\n          </Paper>\n        </Grid>\n        <Grid item xs={6}>\n          <Paper sx={{ p: 2, textAlign: 'center' }}>\n            <Typography>Weekly Errors</Typography>\n            <Typography variant=\"h4\">{weeklyErrorCount}</Typography>\n          </Paper>\n        </Grid>\n      </Grid>\n      <Box sx={{ flex: 1, overflow: 'auto' }}>\n        <LogMetadataGrid isLoading={isLoading || !!results?.isSearching} logs={allLogs} />\n      </Box>\n    </TabViewBox>\n  );\n};\n"]}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TreeApi } from './hooks';
+interface EventTimelineProps {
+    logCorrelation: string;
+    setSelectedLogCorrelation: (logCorrelation: string) => void;
+    isVisible: boolean;
+    treeApi: TreeApi;
+}
+export declare const EventTimeline: React.FC<EventTimelineProps>;
+export {};

package/lib/commonjs/LogViewer/EventTimeline.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventTimeline = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@qpqjs/core");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const EVENT_HEIGHT = 30;
+const EVENT_COLORS = ['#8884d8', '#82ca9d', '#ffc658', '#ff8c00', '#ff0080'];
+const TimelineEvent = ({ event, level, setSelectedLogCorrelation, scale, parrentTimeOffsetMs, totalParrentTimeOffsetMs }) => {
+    const eventWidth = event.executionTimeMs * scale;
+    const eventOffset = totalParrentTimeOffsetMs * scale;
+    const totalTimeOffset = (event.executionTimeMs + totalParrentTimeOffsetMs) * scale;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { width: totalTimeOffset + 100 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    width: `${eventOffset}px`,
+                    height: EVENT_HEIGHT,
+                    textAlign: 'right',
+                    display: totalTimeOffset ? 'inline-block' : 'none',
+                } }), (0, jsx_runtime_1.jsxs)("div", { onClick: () => setSelectedLogCorrelation(event.correlation), style: {
+                    whiteSpace: 'nowrap',
+                    width: `${eventWidth}px`,
+                    height: EVENT_HEIGHT,
+                    backgroundColor: EVENT_COLORS[level % EVENT_COLORS.length],
+                    cursor: 'pointer',
+                    padding: 3,
+                    borderRadius: 4,
+                    display: 'inline-block',
+                }, 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, level: level + 1, parrentTimeOffsetMs: offsetMs, scale: scale, setSelectedLogCorrelation: setSelectedLogCorrelation, totalParrentTimeOffsetMs: totalOffset }, child.correlation));
+            })] }));
+};
+const EventTimeline = ({ logCorrelation, setSelectedLogCorrelation, isVisible, treeApi }) => {
+    const [scaleOffset, setScaleOffset] = (0, react_1.useState)(0.0);
+    const [handleOnWheel, setHandleWheel] = (0, react_1.useState)(() => () => { });
+    const [timelineRef, setTimelineRef] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const handleWheel = (event) => {
+            if (event && event.altKey) {
+                event.preventDefault(); // Prevent default scrolling behavior
+                const delta = event.deltaY > 0 ? -0.01 : 0.01;
+                setScaleOffset((prevScale) => Math.max(0.0, prevScale + delta));
+            }
+        };
+        if (timelineRef) {
+            timelineRef.addEventListener('wheel', handleWheel);
+            setHandleWheel(handleWheel);
+        }
+        return () => {
+            if (timelineRef) {
+                timelineRef.removeEventListener('wheel', handleWheel);
+            }
+        };
+    }, [timelineRef]);
+    if (treeApi.isLoading) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100%',
+                width: '100%',
+            }, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 100 }) }));
+    }
+    if (!treeApi.treeDataWithNoQpqActions) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Error" });
+    }
+    const { earliestStartedAt, latestFinishedAt } = (0, core_1.getTimeBounds)(treeApi.treeDataWithNoQpqActions);
+    const totalExecutionTime = (0, core_1.getTotalExecutionTime)(treeApi.treeDataWithNoQpqActions);
+    const startDate = new Date(earliestStartedAt);
+    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, core_1.formatDuration)(totalExecutionTime) }), (0, jsx_runtime_1.jsx)("i", { children: " of compute over " }), (0, jsx_runtime_1.jsx)("b", { children: (0, 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;
+//# sourceMappingURL=EventTimeline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EventTimeline.js","sourceRoot":"","sources":["../../../src/LogViewer/EventTimeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatDuration, getTimeBounds, getTotalExecutionTime, StoryResultMetadataWithChildren } from '@qpqjs/core';\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Box, CircularProgress } from '@mui/material';\n\nimport { TreeApi } from './hooks';\n\ninterface EventTimelineProps {\n  logCorrelation: string;\n  setSelectedLogCorrelation: (logCorrelation: string) => void;\n  isVisible: boolean;\n  treeApi: TreeApi;\n}\n\nconst EVENT_HEIGHT = 30;\nconst EVENT_COLORS = ['#8884d8', '#82ca9d', '#ffc658', '#ff8c00', '#ff0080'];\n\ntype TimelineEventProps = {\n  event: StoryResultMetadataWithChildren;\n  level: number;\n  setSelectedLogCorrelation: (logCorrelation: string) => void;\n  scale: number;\n  parrentTimeOffsetMs: number;\n  totalParrentTimeOffsetMs: number;\n};\n\nconst TimelineEvent = ({ event, level, setSelectedLogCorrelation, scale, parrentTimeOffsetMs, totalParrentTimeOffsetMs }: TimelineEventProps) => {\n  const eventWidth = event.executionTimeMs * scale;\n  const eventOffset = totalParrentTimeOffsetMs * scale;\n  const totalTimeOffset = (event.executionTimeMs + totalParrentTimeOffsetMs) * scale;\n\n  return (\n    <div style={{ width: totalTimeOffset + 100 }}>\n      <div\n        style={{\n          width: `${eventOffset}px`,\n          height: EVENT_HEIGHT,\n\n          textAlign: 'right',\n          display: totalTimeOffset ? 'inline-block' : 'none',\n        }}\n      ></div>\n      <div\n        onClick={() => setSelectedLogCorrelation(event.correlation)}\n        style={{\n          whiteSpace: 'nowrap',\n          width: `${eventWidth}px`,\n          height: EVENT_HEIGHT,\n          backgroundColor: EVENT_COLORS[level % EVENT_COLORS.length],\n          cursor: 'pointer',\n          padding: 3,\n          borderRadius: 4,\n          display: 'inline-block',\n        }}\n      >\n        {event.moduleName}::{event.generic.split('::').pop()} - @{parrentTimeOffsetMs}ms - {event.executionTimeMs}ms\n      </div>\n      {event.children.map((child: StoryResultMetadataWithChildren) => {\n        const childDate = new Date(child.startedAt);\n        const eventDate = new Date(event.startedAt);\n        const offsetMs = childDate.getTime() - eventDate.getTime();\n        const totalOffset = totalParrentTimeOffsetMs + offsetMs;\n\n        return (\n          <TimelineEvent\n            key={child.correlation}\n            event={child}\n            level={level + 1}\n            parrentTimeOffsetMs={offsetMs}\n            scale={scale}\n            setSelectedLogCorrelation={setSelectedLogCorrelation}\n            totalParrentTimeOffsetMs={totalOffset}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport const EventTimeline: React.FC<EventTimelineProps> = ({ logCorrelation, setSelectedLogCorrelation, isVisible, treeApi }) => {\n  const [scaleOffset, setScaleOffset] = useState(0.0);\n  const [handleOnWheel, setHandleWheel] = useState<any>(() => () => {});\n\n  const [timelineRef, setTimelineRef] = useState<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    const handleWheel = (event: any) => {\n      if (event && event.altKey) {\n        event.preventDefault(); // Prevent default scrolling behavior\n        const delta = event.deltaY > 0 ? -0.01 : 0.01;\n        setScaleOffset((prevScale) => Math.max(0.0, prevScale + delta));\n      }\n    };\n\n    if (timelineRef) {\n      timelineRef.addEventListener('wheel', handleWheel);\n      setHandleWheel(handleWheel);\n    }\n\n    return () => {\n      if (timelineRef) {\n        timelineRef.removeEventListener('wheel', handleWheel);\n      }\n    };\n  }, [timelineRef]);\n\n  if (treeApi.isLoading) {\n    return (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          height: '100%',\n          width: '100%',\n        }}\n      >\n        <CircularProgress size={100} />\n      </Box>\n    );\n  }\n\n  if (!treeApi.treeDataWithNoQpqActions) {\n    return <div>Error</div>;\n  }\n\n  const { earliestStartedAt, latestFinishedAt } = getTimeBounds(treeApi.treeDataWithNoQpqActions);\n  const totalExecutionTime = getTotalExecutionTime(treeApi.treeDataWithNoQpqActions);\n\n  const startDate = new Date(earliestStartedAt);\n  const endDate = new Date(latestFinishedAt);\n  const offsetMs = endDate.getTime() - startDate.getTime();\n\n  const scale = 1100 / offsetMs + scaleOffset;\n\n  return (\n    <div style={{ position: 'relative', width: '100%', height: '100%' }}>\n      <div style={{ height: 24 }}>\n        <b>{formatDuration(totalExecutionTime)}</b>\n        <i> of compute over </i>\n        <b>{formatDuration(offsetMs)}</b>\n      </div>\n      <div ref={setTimelineRef} onWheel={handleOnWheel} style={{ width: '100%', height: 'calc(100% - 24px)' }}>\n        {treeApi.treeDataWithNoQpqActions[0] && (\n          <TimelineEvent\n            event={treeApi.treeDataWithNoQpqActions[0]}\n            level={0}\n            parrentTimeOffsetMs={0}\n            scale={scale}\n            setSelectedLogCorrelation={setSelectedLogCorrelation}\n            totalParrentTimeOffsetMs={0}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"]}

package/lib/commonjs/LogViewer/LogChat/EventDocAiSegments.d.ts

@@ -0,0 +1,7 @@
+import { EventDocAiMessageSegment } from '@qpqjs/features';
+import React from 'react';
+interface EventDocAiSegmentsProps {
+    segments: EventDocAiMessageSegment[];
+}
+export declare const EventDocAiSegments: React.FC<EventDocAiSegmentsProps>;
+export {};

package/lib/commonjs/LogViewer/LogChat/EventDocAiSegments.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventDocAiSegments = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_markdown_1 = __importDefault(require("react-markdown"));
+const material_1 = require("@mui/material");
+// Renders one message's segments — text (markdown), reasoning (dimmed), tool
+// calls (a chip per tool, showing input and, once it arrives, output), and
+// file attachments. Used for both finalized messages and the live stream
+// preview (the live stream is folded into the same segment shape).
+const EventDocAiSegments = ({ segments }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: segments.map((segment, index) => {
+        if (segment.type === 'text') {
+            return (0, jsx_runtime_1.jsx)(react_markdown_1.default, { children: segment.text }, index);
+        }
+        if (segment.type === 'reasoning') {
+            return ((0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { fontStyle: 'italic', opacity: 0.7, mb: 1 }, variant: "body2", children: segment.text }, index));
+        }
+        if (segment.type === 'file') {
+            return (0, jsx_runtime_1.jsx)(material_1.Chip, { label: segment.attachment.filename, size: "small", sx: { mb: 1 } }, index);
+        }
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', flexDirection: 'column', gap: 0.5, mb: 1 }, children: segment.tools.map((tool, toolIndex) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    p: 1,
+                    borderRadius: 1,
+                    backgroundColor: 'rgba(0, 0, 0, 0.06)',
+                    fontFamily: 'monospace',
+                    fontSize: '0.75rem',
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", sx: { fontWeight: 'bold' }, variant: "caption", children: tool.output === undefined ? `Calling ${tool.toolName}…` : tool.toolName }), (0, jsx_runtime_1.jsx)(material_1.Box, { component: "pre", sx: { m: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }, children: JSON.stringify(tool.input) }), tool.output !== undefined && ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "pre", sx: { m: 0, mt: 0.5, whiteSpace: 'pre-wrap', wordBreak: 'break-all', opacity: 0.8 }, children: JSON.stringify(tool.output) }))] }, toolIndex))) }, index));
+    }) }));
+exports.EventDocAiSegments = EventDocAiSegments;
+//# sourceMappingURL=EventDocAiSegments.js.map

package/lib/commonjs/LogViewer/LogChat/EventDocAiSegments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventDocAiSegments.js","sourceRoot":"","sources":["../../../../src/LogViewer/LogChat/EventDocAiSegments.tsx"],"names":[],"mappings":";;;;;;;AAGA,oEAAsC;AACtC,4CAAsD;AAMtD,6EAA6E;AAC7E,2EAA2E;AAC3E,yEAAyE;AACzE,mEAAmE;AAC5D,MAAM,kBAAkB,GAAsC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACrF,2DACG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;QAC/B,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC5B,OAAO,uBAAC,wBAAQ,cAAc,OAAO,CAAC,IAAI,IAApB,KAAK,CAA2B,CAAC;QACzD,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YACjC,OAAO,CACL,uBAAC,qBAAU,IAAa,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,OAAO,EAAC,OAAO,YACtF,OAAO,CAAC,IAAI,IADE,KAAK,CAET,CACd,CAAC;QACJ,CAAC;QAED,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC5B,OAAO,uBAAC,eAAI,IAAa,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAArE,KAAK,CAAoE,CAAC;QAC9F,CAAC;QAED,OAAO,CACL,uBAAC,cAAG,IAAa,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,YAC/E,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CACtC,wBAAC,cAAG,IAEF,EAAE,EAAE;oBACF,CAAC,EAAE,CAAC;oBACJ,YAAY,EAAE,CAAC;oBACf,eAAe,EAAE,qBAAqB;oBACtC,UAAU,EAAE,WAAW;oBACvB,QAAQ,EAAE,SAAS;iBACpB,aAED,uBAAC,qBAAU,IAAC,SAAS,EAAC,KAAK,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,OAAO,EAAC,SAAS,YACtE,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GAC7D,EACb,uBAAC,cAAG,IAAC,SAAS,EAAC,KAAK,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,YAC9E,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,GACvB,EACL,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,CAC5B,uBAAC,cAAG,IAAC,SAAS,EAAC,KAAK,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,YACrG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GACxB,CACP,KAnBI,SAAS,CAoBV,CACP,CAAC,IAxBM,KAAK,CAyBT,CACP,CAAC;IACJ,CAAC,CAAC,GACD,CACJ,CAAC;AAjDW,QAAA,kBAAkB,sBAiD7B","sourcesContent":["import { EventDocAiMessageSegment } from '@qpqjs/features';\n\nimport React from 'react';\nimport Markdown from 'react-markdown';\nimport { Box, Chip, Typography } from '@mui/material';\n\ninterface EventDocAiSegmentsProps {\n  segments: EventDocAiMessageSegment[];\n}\n\n// Renders one message's segments — text (markdown), reasoning (dimmed), tool\n// calls (a chip per tool, showing input and, once it arrives, output), and\n// file attachments. Used for both finalized messages and the live stream\n// preview (the live stream is folded into the same segment shape).\nexport const EventDocAiSegments: React.FC<EventDocAiSegmentsProps> = ({ segments }) => (\n  <>\n    {segments.map((segment, index) => {\n      if (segment.type === 'text') {\n        return <Markdown key={index}>{segment.text}</Markdown>;\n      }\n\n      if (segment.type === 'reasoning') {\n        return (\n          <Typography key={index} sx={{ fontStyle: 'italic', opacity: 0.7, mb: 1 }} variant=\"body2\">\n            {segment.text}\n          </Typography>\n        );\n      }\n\n      if (segment.type === 'file') {\n        return <Chip key={index} label={segment.attachment.filename} size=\"small\" sx={{ mb: 1 }} />;\n      }\n\n      return (\n        <Box key={index} sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, mb: 1 }}>\n          {segment.tools.map((tool, toolIndex) => (\n            <Box\n              key={toolIndex}\n              sx={{\n                p: 1,\n                borderRadius: 1,\n                backgroundColor: 'rgba(0, 0, 0, 0.06)',\n                fontFamily: 'monospace',\n                fontSize: '0.75rem',\n              }}\n            >\n              <Typography component=\"div\" sx={{ fontWeight: 'bold' }} variant=\"caption\">\n                {tool.output === undefined ? `Calling ${tool.toolName}…` : tool.toolName}\n              </Typography>\n              <Box component=\"pre\" sx={{ m: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>\n                {JSON.stringify(tool.input)}\n              </Box>\n              {tool.output !== undefined && (\n                <Box component=\"pre\" sx={{ m: 0, mt: 0.5, whiteSpace: 'pre-wrap', wordBreak: 'break-all', opacity: 0.8 }}>\n                  {JSON.stringify(tool.output)}\n                </Box>\n              )}\n            </Box>\n          ))}\n        </Box>\n      );\n    })}\n  </>\n);\n"]}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LogChatProps {
+    logServiceName: string;
+    logCorrelation: string;
+}
+export declare const LogChat: React.FC<LogChatProps>;
+export {};

package/lib/commonjs/LogViewer/LogChat/LogChat.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogChat = 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 web_react_2 = require("@qpqjs/web-react");
+const react_1 = require("react");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const adminApp_1 = require("../../adminApp");
+const eventDocAiLogChatRuntime_1 = require("./eventDocAiLogChatRuntime");
+const EventDocAiSegments_1 = require("./EventDocAiSegments");
+const LogChatConversation = ({ logCorrelation }) => {
+    const [inputMessage, setInputMessage] = (0, react_1.useState)('');
+    const chatContainerRef = (0, react_1.useRef)(null);
+    const [api, state] = (0, web_react_2.useQpqWebsocketQueueRuntime)(eventDocAiLogChatRuntime_1.eventDocAiLogChatRuntime, logCorrelation);
+    const [adminApi] = (0, adminApp_1.useAdminApp)();
+    const streamSegments = state.streamSegments;
+    const isThinking = state.isSending && streamSegments.length === 0;
+    const handleSendMessage = (0, web_react_1.useEffectCallback)(() => {
+        if (inputMessage.trim() !== '') {
+            // Audit trail (session event) and actual chat transport are separate concerns.
+            adminApi.sendChatMessage(logCorrelation, inputMessage);
+            api.eventDocAiSendMessage(inputMessage);
+            setInputMessage('');
+        }
+    });
+    const handleKeyPress = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            handleSendMessage();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (chatContainerRef.current) {
+            chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+        }
+    }, [state.chatMessages, streamSegments]);
+    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: [state.isLoadingHistory && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', justifyContent: 'center', p: 2 }, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) })), state.chatMessages.map((message, index) => ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'flex-start',
+                            mb: 2,
+                            justifyContent: message.role === 'assistant' ? 'flex-start' : 'flex-end',
+                        }, children: (0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: {
+                                p: 2,
+                                borderRadius: message.role === 'assistant' ? '20px 20px 20px 0' : '20px 20px 0 20px',
+                                backgroundColor: message.role === 'assistant' ? 'grey.300' : 'primary.main',
+                                color: message.role === 'assistant' ? 'black' : 'white',
+                                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: message.role === 'assistant' ? 'grey.500' : 'primary.dark' }, children: message.role === 'assistant' ? (0, jsx_runtime_1.jsx)(icons_material_1.Android, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.Person, {}) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: message.role === 'assistant' ? 'AI Assistant' : 'You' })] }), (0, jsx_runtime_1.jsx)(EventDocAiSegments_1.EventDocAiSegments, { segments: message.segments })] }) }, index))), streamSegments.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', alignItems: 'flex-start', mb: 2, justifyContent: 'flex-start' }, children: (0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: { p: 2, borderRadius: '20px 20px 20px 0', 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.jsx)(EventDocAiSegments_1.EventDocAiSegments, { segments: streamSegments })] }) })), isThinking && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', alignItems: 'flex-start', mb: 2, justifyContent: 'flex-start' }, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { sx: { p: 2, borderRadius: '20px 20px 20px 0', backgroundColor: 'grey.300', color: 'black', maxWidth: '70%' }, children: (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..." })] }) }) })), state.error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", sx: { mt: 1 }, variant: "body2", children: state.error }))] }), (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: "Ask about this log...", sx: { mr: 2 }, value: inputMessage, variant: "outlined" }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleSendMessage, variant: "contained", children: "Send" })] }) })] }));
+};
+// The generic EventDocAi chat, scoped to this one log (docId = correlation id).
+// See eventdoc-chat-plan.md — replaces the old one-off Claude chat.
+const LogChat = ({ logServiceName, logCorrelation }) => {
+    if (!logServiceName) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(web_react_2.QpqContextProvider, { contextIdentifier: features_1.eventDocAiContext, value: { serviceName: logServiceName, type: 'log', docId: logCorrelation }, children: (0, jsx_runtime_1.jsx)(LogChatConversation, { logCorrelation: logCorrelation }) }));
+};
+exports.LogChat = LogChat;
+//# sourceMappingURL=LogChat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogChat.js","sourceRoot":"","sources":["../../../../src/LogViewer/LogChat/LogChat.tsx"],"names":[],"mappings":"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","sourcesContent":["import { eventDocAiContext } from '@qpqjs/features';\nimport { useEffectCallback } from '@qpqjs/web-react';\nimport { QpqContextProvider, useQpqWebsocketQueueRuntime } from '@qpqjs/web-react';\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Android as AndroidIcon, Person as PersonIcon } from '@mui/icons-material';\nimport { Avatar, Box, Button, CircularProgress, Paper, TextField, Typography } from '@mui/material';\n\nimport { useAdminApp } from '../../adminApp';\nimport { eventDocAiLogChatRuntime } from './eventDocAiLogChatRuntime';\nimport { EventDocAiSegments } from './EventDocAiSegments';\n\ninterface LogChatProps {\n  logServiceName: string;\n  logCorrelation: string;\n}\n\nconst LogChatConversation: React.FC<{ logCorrelation: string }> = ({ logCorrelation }) => {\n  const [inputMessage, setInputMessage] = useState('');\n  const chatContainerRef = useRef<HTMLDivElement>(null);\n\n  const [api, state] = useQpqWebsocketQueueRuntime(eventDocAiLogChatRuntime, logCorrelation);\n  const [adminApi] = useAdminApp();\n\n  const streamSegments = state.streamSegments;\n  const isThinking = state.isSending && streamSegments.length === 0;\n\n  const handleSendMessage = useEffectCallback(() => {\n    if (inputMessage.trim() !== '') {\n      // Audit trail (session event) and actual chat transport are separate concerns.\n      adminApi.sendChatMessage(logCorrelation, inputMessage);\n      api.eventDocAiSendMessage(inputMessage);\n      setInputMessage('');\n    }\n  });\n\n  const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      handleSendMessage();\n    }\n  };\n\n  useEffect(() => {\n    if (chatContainerRef.current) {\n      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;\n    }\n  }, [state.chatMessages, streamSegments]);\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>\n      <Box ref={chatContainerRef} sx={{ flexGrow: 1, overflowY: 'auto', p: 2 }}>\n        {state.isLoadingHistory && (\n          <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>\n            <CircularProgress size={20} />\n          </Box>\n        )}\n        {state.chatMessages.map((message, index) => (\n          <Box\n            key={index}\n            sx={{\n              display: 'flex',\n              alignItems: 'flex-start',\n              mb: 2,\n              justifyContent: message.role === 'assistant' ? 'flex-start' : 'flex-end',\n            }}\n          >\n            <Paper\n              sx={{\n                p: 2,\n                borderRadius: message.role === 'assistant' ? '20px 20px 20px 0' : '20px 20px 0 20px',\n                backgroundColor: message.role === 'assistant' ? 'grey.300' : 'primary.main',\n                color: message.role === 'assistant' ? 'black' : 'white',\n                maxWidth: '70%',\n              }}\n            >\n              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>\n                <Avatar sx={{ mr: 1, bgcolor: message.role === 'assistant' ? 'grey.500' : 'primary.dark' }}>\n                  {message.role === 'assistant' ? <AndroidIcon /> : <PersonIcon />}\n                </Avatar>\n                <Typography variant=\"subtitle2\">{message.role === 'assistant' ? 'AI Assistant' : 'You'}</Typography>\n              </Box>\n              <EventDocAiSegments segments={message.segments} />\n            </Paper>\n          </Box>\n        ))}\n        {streamSegments.length > 0 && (\n          <Box sx={{ display: 'flex', alignItems: 'flex-start', mb: 2, justifyContent: 'flex-start' }}>\n            <Paper sx={{ p: 2, borderRadius: '20px 20px 20px 0', backgroundColor: 'grey.300', color: 'black', maxWidth: '70%' }}>\n              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>\n                <Avatar sx={{ mr: 1, bgcolor: 'grey.500' }}>\n                  <AndroidIcon />\n                </Avatar>\n                <Typography variant=\"subtitle2\">AI Assistant</Typography>\n              </Box>\n              <EventDocAiSegments segments={streamSegments} />\n            </Paper>\n          </Box>\n        )}\n        {isThinking && (\n          <Box sx={{ display: 'flex', alignItems: 'flex-start', mb: 2, justifyContent: 'flex-start' }}>\n            <Paper sx={{ p: 2, borderRadius: '20px 20px 20px 0', backgroundColor: 'grey.300', color: 'black', maxWidth: '70%' }}>\n              <Box sx={{ display: 'flex', alignItems: 'center' }}>\n                <CircularProgress size={20} sx={{ mr: 1 }} />\n                <Typography variant=\"body1\">Thinking...</Typography>\n              </Box>\n            </Paper>\n          </Box>\n        )}\n        {state.error && (\n          <Typography color=\"error\" sx={{ mt: 1 }} variant=\"body2\">\n            {state.error}\n          </Typography>\n        )}\n      </Box>\n      <Box sx={{ p: 2, borderTop: '1px solid #ccc' }}>\n        <Box sx={{ display: 'flex' }}>\n          <TextField\n            fullWidth\n            onChange={(e) => setInputMessage(e.target.value)}\n            onKeyDown={handleKeyPress}\n            placeholder=\"Ask about this log...\"\n            sx={{ mr: 2 }}\n            value={inputMessage}\n            variant=\"outlined\"\n          />\n          <Button onClick={handleSendMessage} variant=\"contained\">\n            Send\n          </Button>\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n\n// The generic EventDocAi chat, scoped to this one log (docId = correlation id).\n// See eventdoc-chat-plan.md — replaces the old one-off Claude chat.\nexport const LogChat: React.FC<LogChatProps> = ({ logServiceName, logCorrelation }) => {\n  if (!logServiceName) {\n    return (\n      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n        <CircularProgress size={20} />\n      </Box>\n    );\n  }\n\n  return (\n    <QpqContextProvider contextIdentifier={eventDocAiContext} value={{ serviceName: logServiceName, type: 'log', docId: logCorrelation }}>\n      <LogChatConversation logCorrelation={logCorrelation} />\n    </QpqContextProvider>\n  );\n};\n"]}

package/lib/commonjs/LogViewer/LogChat/eventDocAiLogChatRuntime.d.ts

@@ -0,0 +1,6 @@
+export declare const eventDocAiLogChatRuntime: import("@qpqjs/web-react").QpqRuntimeDefinition<import("@qpqjs/features").EventDocAiState, import("@qpqjs/features").EventDocAiEffects, {
+    askEventDocAiLoadChats: typeof import("@qpqjs/features").askEventDocAiLoadChats;
+    askEventDocAiNewChat: typeof import("@qpqjs/features").askEventDocAiNewChat;
+    askEventDocAiSelectChat: typeof import("@qpqjs/features").askEventDocAiSelectChat;
+    askEventDocAiSendMessage: typeof import("@qpqjs/features").askEventDocAiSendMessage;
+}>;

package/lib/commonjs/LogViewer/LogChat/eventDocAiLogChatRuntime.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.eventDocAiLogChatRuntime = void 0;
+const features_1 = require("@qpqjs/features");
+const web_react_1 = require("@qpqjs/web-react");
+const askEventDocAiLogChatBoot_1 = require("./logic/askEventDocAiLogChatBoot");
+// Bound per log correlation (see LogChat.tsx) so each open log dialog gets its
+// own isolated chat state instead of sharing one across every log. Closing the
+// dialog releases the area; reopening re-runs the boot story.
+exports.eventDocAiLogChatRuntime = (0, web_react_1.createQpqRuntimeDefinition)({
+    uniqueName: 'qpq/admin/eventDocAiLogChat',
+    api: features_1.sharedEventDocAiApi,
+    initialState: (0, features_1.createInitialEventDocAiState)(),
+    reducer: features_1.eventDocAiReducer,
+    onInit: askEventDocAiLogChatBoot_1.askEventDocAiLogChatBoot,
+});
+//# sourceMappingURL=eventDocAiLogChatRuntime.js.map

package/lib/commonjs/LogViewer/LogChat/eventDocAiLogChatRuntime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eventDocAiLogChatRuntime.js","sourceRoot":"","sources":["../../../../src/LogViewer/LogChat/eventDocAiLogChatRuntime.ts"],"names":[],"mappings":";;;AAAA,8CAAuG;AACvG,gDAA8D;AAE9D,+EAA4E;AAE5E,+EAA+E;AAC/E,+EAA+E;AAC/E,8DAA8D;AACjD,QAAA,wBAAwB,GAAG,IAAA,sCAA0B,EAAC;IACjE,UAAU,EAAE,6BAA6B;IACzC,GAAG,EAAE,8BAAmB;IACxB,YAAY,EAAE,IAAA,uCAA4B,GAAE;IAC5C,OAAO,EAAE,4BAAiB;IAC1B,MAAM,EAAE,mDAAwB;CACjC,CAAC,CAAC","sourcesContent":["import { createInitialEventDocAiState, eventDocAiReducer, sharedEventDocAiApi } from '@qpqjs/features';\nimport { createQpqRuntimeDefinition } from '@qpqjs/web-react';\n\nimport { askEventDocAiLogChatBoot } from './logic/askEventDocAiLogChatBoot';\n\n// Bound per log correlation (see LogChat.tsx) so each open log dialog gets its\n// own isolated chat state instead of sharing one across every log. Closing the\n// dialog releases the area; reopening re-runs the boot story.\nexport const eventDocAiLogChatRuntime = createQpqRuntimeDefinition({\n  uniqueName: 'qpq/admin/eventDocAiLogChat',\n  api: sharedEventDocAiApi,\n  initialState: createInitialEventDocAiState(),\n  reducer: eventDocAiReducer,\n  onInit: askEventDocAiLogChatBoot,\n});\n"]}

package/lib/commonjs/LogViewer/LogChat/index.d.ts

@@ -0,0 +1 @@
+export * from './LogChat';

package/lib/commonjs/LogViewer/LogChat/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LogChat"), exports);
+//# sourceMappingURL=index.js.map

package/lib/commonjs/LogViewer/LogChat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/LogViewer/LogChat/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAA0B","sourcesContent":["export * from './LogChat';\n"]}

package/lib/commonjs/LogViewer/LogChat/logic/askEventDocAiLogChatBoot.d.ts

@@ -0,0 +1,2 @@
+import { AskResponse } from '@qpqjs/core';
+export declare function askEventDocAiLogChatBoot(): AskResponse<void>;

package/lib/commonjs/LogViewer/LogChat/logic/askEventDocAiLogChatBoot.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.askEventDocAiLogChatBoot = askEventDocAiLogChatBoot;
+const core_1 = require("@qpqjs/core");
+const features_1 = require("@qpqjs/features");
+// Resume the most recently active chat for this log, if one exists — no
+// chat-list picker UI; the first message on a fresh log implicitly starts one
+// (see askEventDocAiSendMessage).
+function* askEventDocAiLogChatBoot() {
+    yield* (0, features_1.askEventDocAiLoadChats)();
+    const { chats } = yield* (0, core_1.askStateRead)();
+    const latestChat = [...chats].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))[0];
+    if (latestChat) {
+        yield* (0, features_1.askEventDocAiSelectChat)(latestChat.chatId);
+    }
+}
+//# sourceMappingURL=askEventDocAiLogChatBoot.js.map

package/lib/commonjs/LogViewer/LogChat/logic/askEventDocAiLogChatBoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"askEventDocAiLogChatBoot.js","sourceRoot":"","sources":["../../../../../src/LogViewer/LogChat/logic/askEventDocAiLogChatBoot.ts"],"names":[],"mappings":";;AAMA,4DASC;AAfD,sCAAwD;AACxD,8CAAmG;AAEnG,wEAAwE;AACxE,8EAA8E;AAC9E,kCAAkC;AAClC,QAAe,CAAC,CAAC,wBAAwB;IACvC,KAAK,CAAC,CAAC,IAAA,iCAAsB,GAAE,CAAC;IAEhC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,CAAC,IAAA,mBAAY,GAAmB,CAAC;IACzD,MAAM,UAAU,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAExF,IAAI,UAAU,EAAE,CAAC;QACf,KAAK,CAAC,CAAC,IAAA,kCAAuB,EAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IACpD,CAAC;AACH,CAAC","sourcesContent":["import { AskResponse, askStateRead } from '@qpqjs/core';\nimport { askEventDocAiLoadChats, askEventDocAiSelectChat, EventDocAiState } from '@qpqjs/features';\n\n// Resume the most recently active chat for this log, if one exists — no\n// chat-list picker UI; the first message on a fresh log implicitly starts one\n// (see askEventDocAiSendMessage).\nexport function* askEventDocAiLogChatBoot(): AskResponse<void> {\n  yield* askEventDocAiLoadChats();\n\n  const { chats } = yield* askStateRead<EventDocAiState>();\n  const latestChat = [...chats].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))[0];\n\n  if (latestChat) {\n    yield* askEventDocAiSelectChat(latestChat.chatId);\n  }\n}\n"]}

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

@@ -0,0 +1,10 @@
+import { TreeApi } from './hooks';
+interface LogCorrelationTreeProps {
+    correlationId: string;
+    highlightCorrelationId: string;
+    setSelectedLogCorrelation: (logCorrelation: string) => void;
+    isVisible: boolean;
+    treeApi: TreeApi;
+}
+export declare const LogCorrelationTree: import("react").MemoExoticComponent<({ correlationId, highlightCorrelationId, setSelectedLogCorrelation, isVisible, treeApi, }: LogCorrelationTreeProps) => import("react").JSX.Element>;
+export {};

package/lib/commonjs/LogViewer/LogCorrelationTree.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogCorrelationTree = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@qpqjs/core");
+const react_1 = require("react");
+const react_d3_tree_1 = require("react-d3-tree");
+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) => {
+    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 === core_1.QpqRuntimeType.EXECUTE_STORY || nodeDatum.runtimeType === 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);
+    const [translate, setTranslate] = (0, react_1.useState)({ x: 0, y: 0 });
+    (0, react_1.useEffect)(() => {
+        if (treeContainer.current && isVisible) {
+            const { clientWidth } = treeContainer.current;
+            setTranslate({ x: clientWidth / 2, y: 40 });
+        }
+    }, [treeApi.treeData, isVisible]);
+    if (treeApi.isLoading) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100%',
+                width: '100%',
+            }, children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 100 }) }));
+    }
+    if (!treeApi.treeData) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "Error" });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { ref: treeContainer, style: { width: '100%', height: '100%', background: BACKGROUND_COLOR }, children: (0, jsx_runtime_1.jsx)(react_d3_tree_1.Tree
+        // TODO: Pass the correct type here
+        , { 
+            // TODO: Pass the correct type here
+            data: treeApi.treeData, orientation: "vertical", renderCustomNodeElement: renderRectSvgNode(setSelectedLogCorrelation, highlightCorrelationId), translate: translate }) }));
+};
+exports.LogCorrelationTree = (0, react_1.memo)(LogCorrelationTreeComponent);
+//# sourceMappingURL=LogCorrelationTree.js.map