querysub 0.328.0 → 0.329.0

package/src/diagnostics/logs/errorNotifications/ErrorDigestPage.tsx

@@ -0,0 +1,409 @@
+module.noserverhotreload = false;
+module.hotreload = true;
+
+
+import { SocketFunction } from "socket-function/SocketFunction";
+import { qreact } from "../../../4-dom/qreact";
+import { getSyncedController } from "../../../library-components/SyncedController";
+import { ErrorDigestController, errorDigestHistory, ErrorDigestInfo } from "./errorDigests";
+import { isManagementUser } from "../../../-0-hooks/hooks";
+import { assertIsManagementUser } from "../../managementPages";
+import { URLParam } from "../../../library-components/URLParam";
+import { tabURL } from "../../../library-components/urlResetGroups";
+import { Anchor, ATag } from "../../../library-components/ATag";
+import { css } from "../../../4-dom/css";
+import { list, sort } from "socket-function/src/misc";
+import { formatDateTime, formatVeryNiceDateTime, formatNumber } from "socket-function/src/formatting/format";
+import { Table } from "../../../5-diagnostics/Table";
+import { Histogram } from "../../../library-components/Histogram";
+import { TabbedUI } from "../../../library-components/TabbedUI";
+import { LogDatum } from "../diskLogger";
+import { t } from "../../../2-proxy/schema2";
+import { getErrorLogsLink } from "./ErrorWarning";
+
+export const digestKeyURL = new URLParam("digestKey", "");
+export const fileDetailTabURL = new URLParam("fileDetailTab", "errors");
+
+export class ErrorDigestPage extends qreact.Component {
+    state = t.state({
+        selectedFile: t.string("")
+    });
+    render() {
+        // Get the current tab mode
+        let currentTab = tabURL.value;
+        let selectedDigestKey = digestKeyURL.value;
+
+        if (currentTab === "detail" && selectedDigestKey) {
+            return this.renderDigestDetail(selectedDigestKey);
+        }
+
+        return this.renderDigestList();
+    }
+
+    renderDigestList() {
+        let controller = ErrorDigestController(SocketFunction.browserNodeId());
+
+        let keys = controller.getDigestKeys();
+
+        if (!keys || keys.length === 0) {
+            return (
+                <div className={css.vbox(16).pad2(24)}>
+                    <div className={css.fontSize(24).fontWeight(600)}>
+                        Error Digest History
+                    </div>
+                    <div>No digest data available</div>
+                </div>
+            );
+        }
+
+        // Sort lexicographically (highest = newest) and take latest 100
+        let sortedKeys = sort(keys as string[], key => key).reverse().slice(0, 100);
+
+        return (
+            <div className={css.vbox(16).paddingTop(24).paddingLeft(24).fillHeight.fillWidth}>
+                <div className={css.fontSize(24).fontWeight(600)}>
+                    Error Digest History
+                </div>
+                <div className={css.fontSize(14).color("gray")}>
+                    Showing latest {Math.min(sortedKeys.length, 100)} digests (sorted by creation time, newest first)
+                </div>
+
+                <div className={css.vbox(8).overflowAuto.fillWidth}>
+                    {sortedKeys.map(key => (
+                        <ATag
+                            key={key}
+                            values={[
+                                tabURL.getOverride("detail"),
+                                digestKeyURL.getOverride(key)
+                            ]}
+                            className={css.pad2(12).hsla(0, 0, 0, 0.1).pointer.hslahover(0, 0, 0, 0.15)}
+                        >
+                            {formatVeryNiceDateTime(+key.split(".")[0])}
+                        </ATag>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    renderDigestDetail(digestKey: string) {
+        let controller = ErrorDigestController(SocketFunction.browserNodeId());
+
+        let digestData = controller.getDigest(digestKey);
+
+        if (!digestData) {
+            return (
+                <div className={css.vbox(16).pad2(24)}>
+                    <div className={css.hbox(16)}>
+                        <ATag
+                            values={[
+                                tabURL.getOverride(""),
+                                digestKeyURL.getOverride("")
+                            ]}
+                        >
+                            ← Back to Digest List
+                        </ATag>
+                    </div>
+                    <div>Loading digest data...</div>
+                </div>
+            );
+        }
+
+        // If a file is selected, show file details
+        if (this.state.selectedFile) {
+            return this.renderFileDetail(digestData, digestKey);
+        }
+
+        return (
+            <div className={css.vbox(24).pad2(24).fillHeight.overflowAuto}>
+                {/* Header */}
+                <div className={css.hbox(16).alignItems("center")}>
+                    <ATag
+                        values={[
+                            tabURL.getOverride(""),
+                            digestKeyURL.getOverride("")
+                        ]}
+                    >
+                        ← Back to Digest List
+                    </ATag>
+                    <div className={css.fontSize(24).fontWeight(600)}>
+                        Digest: {formatVeryNiceDateTime(+digestKey.split(".")[0])}
+                    </div>
+                </div>
+
+                <Anchor
+                    className={css.fontSize(24)}
+                    values={getErrorLogsLink({
+                        startTime: digestData.startTime,
+                        endTime: digestData.endTime,
+                    })}
+                >
+                    View live logs
+                </Anchor>
+
+                {/* Metadata Section */}
+                {this.renderMetadata(digestData)}
+
+                {/* Charts Section */}
+                {this.renderCharts(digestData)}
+
+                {/* Files Table */}
+                {this.renderFilesTable(digestData)}
+            </div>
+        );
+    }
+
+    renderMetadata(digestData: ErrorDigestInfo) {
+        return (
+            <div className={css.vbox(16)}>
+                <div className={css.fontSize(20).fontWeight(600)}>Metadata</div>
+                <div className={css.hbox(32).wrap}>
+                    <div className={css.vbox(4)}>
+                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Compressed Bytes</div>
+                        <div className={css.fontSize(16).fontWeight(500)}>
+                            {formatNumber(digestData.totalCompressedBytes)}
+                        </div>
+                    </div>
+                    <div className={css.vbox(4)}>
+                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Uncompressed Bytes</div>
+                        <div className={css.fontSize(16).fontWeight(500)}>
+                            {formatNumber(digestData.totalUncompressedBytes)}
+                        </div>
+                    </div>
+                    <div className={css.vbox(4)}>
+                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Total Files</div>
+                        <div className={css.fontSize(16).fontWeight(500)}>
+                            {formatNumber(digestData.totalFiles)}
+                        </div>
+                    </div>
+                    <div className={css.vbox(4)}>
+                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Scan Duration</div>
+                        <div className={css.fontSize(16).fontWeight(500)}>
+                            {formatNumber(digestData.scanDuration)}ms
+                        </div>
+                    </div>
+                    <div className={css.vbox(4)}>
+                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Start Time</div>
+                        <div className={css.fontSize(16).fontWeight(500)}>
+                            {formatVeryNiceDateTime(digestData.startTime)}
+                        </div>
+                    </div>
+                    <div className={css.vbox(4)}>
+                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>End Time</div>
+                        <div className={css.fontSize(16).fontWeight(500)}>
+                            {formatVeryNiceDateTime(digestData.endTime)}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    renderCharts(digestData: ErrorDigestInfo) {
+        // Convert histogram data to chart data
+        let unsuppressedErrorsData: { x: number; y: number }[] = [];
+        let unsuppressedWarningsData: { x: number; y: number }[] = [];
+        let corruptData: { x: number; y: number }[] = [];
+        let suppressedData: { x: number; y: number }[] = [];
+
+        for (let [time, data] of digestData.histogram.entries()) {
+            unsuppressedErrorsData.push({ x: time, y: data.unsuppressedErrors });
+            unsuppressedWarningsData.push({ x: time, y: data.unsuppressedWarnings });
+            corruptData.push({ x: time, y: data.corruptErrors + data.corruptWarnings });
+            suppressedData.push({ x: time, y: data.suppressedErrors + data.suppressedWarnings });
+        }
+
+        return (
+            <div className={css.vbox(16)}>
+                <div className={css.fontSize(20).fontWeight(600)}>Error Distribution Over Time</div>
+                <div className={css.vbox(16)}>
+                    <div className={css.hbox(16).wrap}>
+                        <div className={css.fillWidth.minWidth(400).height(300)}>
+                            <Histogram
+                                title="Unsuppressed Errors"
+                                values={unsuppressedErrorsData}
+                                xColumn={{
+                                    title: "Time",
+                                    format: (value) => formatDateTime(value)
+                                }}
+                                yColumn={{ title: "Count" }}
+                            />
+                        </div>
+                        <div className={css.fillWidth.minWidth(400).height(300)}>
+                            <Histogram
+                                title="Unsuppressed Warnings"
+                                values={unsuppressedWarningsData}
+                                xColumn={{
+                                    title: "Time",
+                                    format: (value) => formatDateTime(value)
+                                }}
+                                yColumn={{ title: "Count" }}
+                            />
+                        </div>
+                    </div>
+                    <div className={css.hbox(16).wrap}>
+                        <div className={css.fillWidth.minWidth(400).height(300)}>
+                            <Histogram
+                                title="Corrupt Errors + Warnings"
+                                values={corruptData}
+                                xColumn={{
+                                    title: "Time",
+                                    format: (value) => formatDateTime(value)
+                                }}
+                                yColumn={{ title: "Count" }}
+                            />
+                        </div>
+                        <div className={css.fillWidth.minWidth(400).height(300)}>
+                            <Histogram
+                                title="Suppressed Errors + Warnings"
+                                values={suppressedData}
+                                xColumn={{
+                                    title: "Time",
+                                    format: (value) => formatDateTime(value)
+                                }}
+                                yColumn={{ title: "Count" }}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    renderFilesTable(digestData: ErrorDigestInfo) {
+        // Convert byFile map to table rows
+        let fileRows = Array.from(digestData.byFile.entries()).map(([fileName, fileData]) => {
+            let latestError = fileData.latestErrors[fileData.latestErrors.length - 1];
+            let latestWarning = fileData.latestWarnings[fileData.latestWarnings.length - 1];
+            let latestLog = latestError ?? latestWarning;
+
+            return {
+                fileName,
+                errorCount: fileData.errors,
+                warningCount: fileData.warnings,
+                latestMessage: latestLog?.param0 ?? "No messages",
+                latestTime: latestLog?.time ?? 0
+            };
+        });
+
+        // Sort by error count descending
+        fileRows = sort(fileRows, row => row.errorCount).reverse();
+
+        return (
+            <div className={css.vbox(16)}>
+                <div className={css.fontSize(20).fontWeight(600)}>Files ({fileRows.length} files)</div>
+                <Table
+                    columns={{
+                        fileName: { title: "File Name" },
+                        errorCount: { title: "Errors" },
+                        warningCount: { title: "Warnings" },
+                        latestMessage: {
+                            title: "Latest Message",
+                            formatter: (value: any) => String(value).slice(0, 100) + (String(value).length > 100 ? "..." : "")
+                        }
+                    }}
+                    rows={fileRows}
+                    getRowAttributes={(row: any) => ({
+                        className: css.cursor("pointer").hslhover(210, 20, 95),
+                        onClick: () => {
+                            this.state.selectedFile = row.fileName;
+                        }
+                    })}
+                />
+            </div>
+        );
+    }
+
+    renderFileDetail(digestData: ErrorDigestInfo, digestKey: string) {
+        let selectedFileName = this.state.selectedFile;
+        let fileData = digestData.byFile.get(selectedFileName);
+
+        if (!fileData) {
+            return (
+                <div className={css.vbox(16).pad2(24)}>
+                    <div>File not found</div>
+                </div>
+            );
+        }
+
+        return (
+            <div className={css.vbox(24).pad2(24).fillHeight}>
+                {/* Header with back button */}
+                <div className={css.hbox(16).alignItems("center")}>
+                    <ATag
+                        clickOverride={() => {
+                            this.state.selectedFile = "";
+                        }}
+                        className={css.cursor("pointer")}
+                    >
+                        ← Back to Files Table
+                    </ATag>
+                    <div className={css.fontSize(20).fontWeight(600)}>
+                        {selectedFileName}
+                    </div>
+                </div>
+
+                {/* File stats */}
+                <div className={css.hbox(32)}>
+                    <div className={css.vbox(4)}>
+                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Errors</div>
+                        <div className={css.fontSize(16).fontWeight(500)}>{fileData.errors}</div>
+                    </div>
+                    <div className={css.vbox(4)}>
+                        <div className={css.fontSize(14).colorhsl(0, 0, 60)}>Warnings</div>
+                        <div className={css.fontSize(16).fontWeight(500)}>{fileData.warnings}</div>
+                    </div>
+                </div>
+
+                {/* Tabbed interface for errors/warnings */}
+                <div className={css.fillHeight.overflowHidden}>
+                    <TabbedUI
+                        tab={fileDetailTabURL}
+                        tabs={[
+                            {
+                                value: "errors",
+                                title: `Errors (${fileData.errors})`,
+                                contents: this.renderLogEntries(fileData.latestErrors, "errors")
+                            },
+                            {
+                                value: "warnings",
+                                title: `Warnings (${fileData.warnings})`,
+                                contents: this.renderLogEntries(fileData.latestWarnings, "warnings")
+                            }
+                        ]}
+                    />
+                </div>
+            </div>
+        );
+    }
+
+    renderLogEntries(logs: LogDatum[], type: "errors" | "warnings") {
+        if (logs.length === 0) {
+            return <div className={css.colorhsl(0, 0, 60)}>No {type} found</div>;
+        }
+
+        let tableRows = logs.map((log, index) => ({
+            index: logs.length - index,
+            time: formatVeryNiceDateTime(log.time),
+            message: log.param0 ?? "No message",
+            threadId: log.__threadId ?? "Unknown",
+            name: log.__NAME__ ?? "Unknown"
+        }));
+
+        return (
+            <div className={css.fillHeight.overflowAuto}>
+                <Table
+                    columns={{
+                        index: { title: "#" },
+                        time: { title: "Time" },
+                        name: { title: "Source" },
+                        threadId: { title: "Thread" },
+                        message: { title: "Message" }
+                    }}
+                    rows={tableRows}
+                    initialLimit={50}
+                />
+            </div>
+        );
+    }
+}

package/src/diagnostics/logs/errorNotifications/ErrorNotificationController.ts

@@ -62,7 +62,7 @@ type SuppressedChecker = {
     fnc: (buffer: Buffer, posStart: number, posEnd: number) => boolean;
 }
 
-function getAppendables() {
+export function getErrorAppendables() {
     let loggers = getLoggers();
     if (!loggers) throw new Error("Loggers not available?");
     // error, warn
@@ -222,6 +222,14 @@ const suppressionListArchive = archiveJSONT<SuppressionListBase>(() =>
 );
 const suppressionUpdatedChannel = new SocketChannel<boolean>("suppression-updated");
 
+export async function getSuppressionListRaw(): Promise<SuppressionListBase> {
+    let entries = await suppressionListArchive.get(suppressionListKey);
+    if (!entries) {
+        entries = { entries: {} };
+    }
+    return entries;
+}
+
 class SuppressionList {
     private init = lazy(async () => {
         suppressionUpdatedChannel.watch(async () => {
@@ -233,8 +241,8 @@ class SuppressionList {
         });
     });
     private cacheEntries: SuppressionListBase | undefined = undefined;
-    private updateEntriesNow = async () => {
-        let entries = await suppressionListArchive.get(suppressionListKey);
+    public updateEntriesNow = async () => {
+        let entries = await getSuppressionListRaw();
         if (!entries) {
             entries = { entries: {} };
         }
@@ -616,7 +624,7 @@ export class RecentErrors {
         if (!this.lastSuppressionList || !config.noLocalFiles) {
             this.lastSuppressionList = new Map((await suppressionList.getSuppressionList()).map(x => [x.key, x]));
         }
-        for (let appendable of getAppendables()) {
+        for (let appendable of getErrorAppendables()) {
             let startTime = Date.now() - VIEW_WINDOW;
             let endTime = Date.now() + timeInHour * 2;
             let result = await new FastArchiveAppendableControllerBase().startSynchronizeInternal({

package/src/diagnostics/logs/errorNotifications/ErrorWarning.tsx

@@ -18,7 +18,12 @@ import { endTimeParam, startTimeParam } from "../TimeRangeSelector";
 import { formatDateJSX } from "../../../misc/formatJSX";
 import { atomic } from "../../../2-proxy/PathValueProxyWatcher";
 
-export function getLogsLinkParts(): URLOverride[] {
+export function getErrorLogsLink(config?: {
+    startTime?: number;
+    endTime?: number;
+}): URLOverride[] {
+    let startTime = config?.startTime ?? Date.now() - timeInDay * 1;
+    let endTime = config?.endTime ?? Date.now() + timeInHour * 2;
     return [
         showingManagementURL.getOverride(true),
         managementPageURL.getOverride("LogViewer2"),
@@ -26,8 +31,8 @@ export function getLogsLinkParts(): URLOverride[] {
         filterParam.getOverride(""),
 
         // NOTE: While loading a weeks worth of logs clientside is a bit slow. Scanning serverside is not nearly as bad, as it can be done over hours, but... we want the page to be snappy, loading in seconds, so... just use a day, and we might reduce it even further if needed...
-        startTimeParam.getOverride(Date.now() - timeInDay * 1),
-        endTimeParam.getOverride(Date.now() + timeInHour * 2),
+        startTimeParam.getOverride(startTime),
+        endTimeParam.getOverride(endTime),
     ];
 }
 
@@ -99,7 +104,7 @@ export class ErrorWarning extends qreact.Component {
             );
         }
 
-        const logLink = getLogsLinkParts();
+        const logLink = getErrorLogsLink();
 
         if (!recentErrors || recentErrors.length === 0) {
             return (

package/src/diagnostics/logs/errorNotifications/errorDigestEmail.tsx

@@ -0,0 +1,174 @@
+import { formatDate, formatDateTime, formatNumber, formatTime } from "socket-function/src/formatting/format";
+import { getNotifyEmails } from "../../../config";
+import { sendEmail_postmark } from "../../../email_ims_notifications/postmark";
+import { sendEmail_sendgrid } from "../../../email_ims_notifications/sendgrid";
+import { sendEmail } from "../../../user-implementation/userData";
+import { ErrorDigestInfo } from "./errorDigests";
+import { qreact } from "../../../4-dom/qreact";
+import { LogDatum } from "../diskLogger";
+import { sort } from "socket-function/src/misc";
+import { createLink } from "../../../library-components/ATag";
+import { getErrorLogsLink } from "./ErrorWarning";
+import { managementPageURL, showingManagementURL } from "../../managementPages";
+import { digestKeyURL } from "./ErrorDigestPage";
+import { tabURL } from "../../../library-components/urlResetGroups";
+
+const MAX_COUNT_PER_FILE = 2;
+const MAX_COUNT = 100;
+
+export async function sendErrorDigestEmail(digestInfo: ErrorDigestInfo) {
+    let notifyEmails = getNotifyEmails();
+    if (notifyEmails.length === 0) {
+        throw new Error(`No notify emails set, so we can't send email. Set in querysub.json config file (beside your package.json) with the { "notifyemails": ["email1@example.com", "email2@example.com"] }, or as a command line argument with --notifyemails "email1@example.com"`);
+    }
+
+    let errors: {
+        errorsInFile: number;
+        warningsInFile: number;
+        message: string;
+        messageTime: string;
+    }[] = [];
+    let errorCount = 0;
+    let warningCount = 0;
+    let suppressedErrors = 0;
+    let suppressedWarnings = 0;
+    let corruptErrors = 0;
+    let corruptWarnings = 0;
+
+    let corruptWarning = "";
+
+    let failingFiles = 0;
+
+    for (let value of digestInfo.histogram.values()) {
+        errorCount += value.unsuppressedErrors;
+        warningCount += value.unsuppressedWarnings;
+        suppressedErrors += value.suppressedErrors;
+        suppressedWarnings += value.suppressedWarnings;
+        corruptErrors += value.corruptErrors;
+        corruptWarnings += value.corruptWarnings;
+        if (value.firstCorruptError && !corruptWarning) {
+            corruptWarning = value.firstCorruptError;
+        }
+        if (value.firstCorruptWarning && !corruptWarning) {
+            corruptWarning = value.firstCorruptWarning;
+        }
+        if (value.unsuppressedErrors > 0) {
+            failingFiles++;
+        }
+    }
+
+    for (let value of digestInfo.byFile.values()) {
+        for (let error of value.latestErrors.slice(-MAX_COUNT_PER_FILE)) {
+            errors.push({
+                errorsInFile: value.errors,
+                warningsInFile: value.warnings,
+                message: `${error.param0} (${error.__NAME__})`,
+                messageTime: formatDateTime(error.time),
+            });
+        }
+    }
+
+    sort(errors, x => -x.errorsInFile);
+    errors = errors.slice(0, MAX_COUNT);
+
+    let link = createLink([
+        showingManagementURL.getOverride(true),
+        managementPageURL.getOverride("ErrorDigestPage"),
+        digestKeyURL.getOverride(digestInfo.key),
+        tabURL.getOverride("detail"),
+    ]);
+
+    await sendEmail({
+        to: notifyEmails,
+        fromPrefix: "error-digest",
+        subject: `${errorCount} errors | ${formatNumber(failingFiles)} failing files | ${warningCount} warnings${corruptErrors + corruptWarnings > 0 ? ` | ${corruptErrors + corruptWarnings} corrupt` : ""} | ${formatTime(digestInfo.scanDuration)} | ${formatNumber(digestInfo.totalCompressedBytes)} / ${formatNumber(digestInfo.totalUncompressedBytes)} | ${formatNumber(digestInfo.totalFiles)} files`,
+        contents: <div>
+            <h2>Error Summary</h2>
+            <ul style="list-style-type: none; padding-left: 0;">
+                <li style="margin-bottom: 8px;">
+                    <strong style="color: #dc3545;">Errors:</strong>
+                    <span style="background-color: #dc3545; color: white; padding: 2px 6px; border-radius: 3px; font-weight: bold; margin-left: 8px;">{errorCount}</span>
+                    <span style="color: #dc3545;"> unsuppressed</span>
+                    {suppressedErrors > 0 && <span>, <span style="color: #6c757d;">{formatNumber(suppressedErrors)} suppressed</span></span>}
+                </li>
+                <li>
+                    <strong style="color: #fd7e14;">Warnings:</strong>
+                    <span style="background-color: #fd7e14; color: white; padding: 2px 6px; border-radius: 3px; font-weight: bold; margin-left: 8px;">{warningCount}</span>
+                    <span style="color: #fd7e14;"> unsuppressed</span>
+                    {suppressedWarnings > 0 && <span>, <span style="color: #6c757d;">{formatNumber(suppressedWarnings)} suppressed</span></span>}
+                </li>
+            </ul>
+
+            {corruptWarning && <div>
+                <h2 style="color: #dc3545;">
+                    Corrupt Lines
+                    <span style="background-color: #dc3545; color: white; padding: 2px 6px; border-radius: 3px; font-weight: bold; margin-left: 8px;">{formatNumber(corruptErrors + corruptWarnings)}</span>
+                    , example:
+                </h2>
+                <p style="color: #dc3545; font-weight: bold; background-color: #f8d7da; padding: 10px; border-left: 4px solid #dc3545;">{corruptWarning}</p>
+            </div>}
+
+            <div style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
+                <table style="width: 100%; border-collapse: collapse;">
+                    <tr>
+                        <td style="text-align: center; padding: 10px;">
+                            <div style="color: #6c757d; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;">Total Files</div>
+                            <div style="background-color: #17a2b8; color: white; padding: 8px 12px; border-radius: 6px; font-weight: bold; font-size: 18px; margin-top: 4px;">{formatNumber(digestInfo.totalFiles)}</div>
+                        </td>
+                        <td style="text-align: center; padding: 10px;">
+                            <div style="color: #6c757d; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;">Compressed Bytes</div>
+                            <div style="background-color: #ffc107; color: #212529; padding: 8px 12px; border-radius: 6px; font-weight: bold; font-size: 18px; margin-top: 4px;">{formatNumber(digestInfo.totalCompressedBytes)}</div>
+                        </td>
+                        <td style="text-align: center; padding: 10px;">
+                            <div style="color: #6c757d; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;">Uncompressed Bytes</div>
+                            <div style="background-color: #6f42c1; color: white; padding: 8px 12px; border-radius: 6px; font-weight: bold; font-size: 18px; margin-top: 4px;">{formatNumber(digestInfo.totalUncompressedBytes)}</div>
+                        </td>
+                    </tr>
+                </table>
+                <div style="border-top: 1px solid #dee2e6; padding-top: 15px; margin-top: 15px;">
+                    <table style="width: 100%; border-collapse: collapse;">
+                        <tr>
+                            <td style="text-align: center; padding: 10px; width: 200px;">
+                                <div style="color: #6c757d; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;">Scan Duration</div>
+                                <div style="background-color: #007bff; color: white; padding: 8px 12px; border-radius: 6px; font-weight: bold; font-size: 18px; margin-top: 4px; font-family: monospace;">{formatTime(digestInfo.scanDuration)}</div>
+                            </td>
+                            <td style="padding: 10px; vertical-align: top;">
+                                <div style="color: #6c757d; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Time Range</div>
+                                <div style="font-size: 14px;">
+                                    <div style="margin-bottom: 8px;">From:&nbsp;&nbsp;<span style="background-color: #28a745; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;">{formatDateTime(digestInfo.startTime)}</span></div>
+                                    <div>To:&nbsp;&nbsp;<span style="background-color: #dc3545; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;">{formatDateTime(digestInfo.endTime)}</span></div>
+                                </div>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+
+            <a href={link} style="display: block; margin-bottom: 20px; padding: 10px; background-color: #007bff; color: white; text-decoration: none; border-radius: 4px; text-align: center;">View live logs</a>
+
+            {errors.length > 0 && <div>
+                <h2 style="color: #495057;">Recent Errors (<span style="color: #dc3545; font-weight: bold;">{errors.length}</span> shown)</h2>
+                <table style="border-collapse: collapse; width: 100%; margin-top: 10px;">
+                    <thead>
+                        <tr style="background-color: #495057; color: white;">
+                            <th style="border: 1px solid #6c757d; padding: 8px; text-align: left;">Time</th>
+                            <th style="border: 1px solid #6c757d; padding: 8px; text-align: left;">Message</th>
+                            <th style="border: 1px solid #6c757d; padding: 8px; text-align: right; background-color: #dc3545;">Errors in File</th>
+                            <th style="border: 1px solid #6c757d; padding: 8px; text-align: right; background-color: #fd7e14;">Warnings in File</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {errors.map((error, index) => (
+                            <tr key={index} style={`background-color: ${index % 2 === 0 ? "#f8f9fa" : "white"}`}>
+                                <td style="border: 1px solid #ddd; padding: 8px;">{error.messageTime}</td>
+                                <td style="border: 1px solid #ddd; padding: 8px;">{error.message}</td>
+                                <td style="border: 1px solid #ddd; padding: 8px; text-align: right; background-color: #f8d7da; color: #721c24; font-weight: bold;">{error.errorsInFile}</td>
+                                <td style="border: 1px solid #ddd; padding: 8px; text-align: right; background-color: #fff3cd; color: #856404; font-weight: bold;">{error.warningsInFile}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>}
+        </div>,
+    });
+}