@mvriu5/payload-ai 0.5.9 → 0.5.10

package/dist/components/{RecentChangesList.js → AuditLogList.js}

@@ -1,8 +1,7 @@
 import { useState } from "react";
-import { DiffDialog } from "./DiffDialog.js";
-import { FileDiff } from "./Icons.js";
-import styles from "./RecentChangesList.module.css";
 import { ExternalLinkIcon } from "@payloadcms/ui";
+import { DiffDialog } from "./DiffDialog.js";
+import styles from "./AuditLogList.module.css";
 const getChangeProposal = (change)=>({
         action: change.action || "update",
         collection: change.collection || undefined,
@@ -10,7 +9,7 @@ const getChangeProposal = (change)=>({
         label: change.title,
         slug: change.slug || undefined
     });
-export const RecentChangesList = ({ changes })=>{
+export const RecentChangesList = ({ allChangesURL, changes })=>{
     const [activeDiff, setActiveDiff] = useState(null);
     return /*#__PURE__*/ React.createElement("aside", {
         className: styles.recentChanges
@@ -18,7 +17,10 @@ export const RecentChangesList = ({ changes })=>{
         className: styles.header
     }, /*#__PURE__*/ React.createElement("h3", {
         className: styles.title
-    }, "Recent changes")), /*#__PURE__*/ React.createElement("div", {
+    }, "Recent changes"), allChangesURL && /*#__PURE__*/ React.createElement("a", {
+        className: styles.headerGhostButton,
+        href: allChangesURL
+    }, "View all")), /*#__PURE__*/ React.createElement("div", {
         className: styles.list
     }, changes.length === 0 ? /*#__PURE__*/ React.createElement("div", {
         className: styles.empty
@@ -29,12 +31,12 @@ export const RecentChangesList = ({ changes })=>{
             className: styles.titleRow
         }, /*#__PURE__*/ React.createElement("div", {
             className: styles.itemTitle
-        }, change.title), change.url ? /*#__PURE__*/ React.createElement("a", {
+        }, change.title), change.url && /*#__PURE__*/ React.createElement("a", {
             className: styles.ghostButton,
             href: change.url,
             rel: "noreferrer noopener",
             target: "_blank"
-        }, /*#__PURE__*/ React.createElement(ExternalLinkIcon, null)) : null), /*#__PURE__*/ React.createElement("div", {
+        }, /*#__PURE__*/ React.createElement(ExternalLinkIcon, null))), /*#__PURE__*/ React.createElement("div", {
             className: styles.stats
         }, /*#__PURE__*/ React.createElement("code", {
             className: styles.additions
@@ -47,6 +49,7 @@ export const RecentChangesList = ({ changes })=>{
                     return;
                 }
                 setActiveDiff({
+                    change,
                     diff: {
                         after: change.after,
                         before: change.before
@@ -55,12 +58,10 @@ export const RecentChangesList = ({ changes })=>{
                 });
             },
             type: "button"
-        }, /*#__PURE__*/ React.createElement(FileDiff, {
-            height: 16,
-            width: 16
-        }), "Review")))), activeDiff ? /*#__PURE__*/ React.createElement(DiffDialog, {
+        }, "Review")))), activeDiff && activeDiff.change && /*#__PURE__*/ React.createElement(DiffDialog, {
+        change: activeDiff.change,
         diff: activeDiff.diff,
         onClose: ()=>setActiveDiff(null),
         proposal: activeDiff.proposal
-    }) : null);
+    }));
 };

package/dist/components/{RecentChangesList.module.css → AuditLogList.module.css}

@@ -8,10 +8,27 @@
 }
 
 .header {
+    align-items: center;
+    display: flex;
     flex: 0 0 auto;
+    gap: 10px;
+    justify-content: space-between;
     margin-bottom: 10px;
 }
 
+.headerGhostButton {
+    color: var(--theme-elevation-500);
+    flex: 0 0 auto;
+    font-size: 12px;
+    line-height: 24px;
+    min-height: 24px;
+    text-decoration: none;
+}
+
+.headerGhostButton:hover {
+    text-decoration: underline;
+}
+
 .title {
     font-size: 14px;
     line-height: 1.3;
@@ -42,7 +59,7 @@
     display: grid;
     gap: 8px;
     grid-template-columns: minmax(0, 1fr) auto auto;
-    padding: 10px;
+    padding: 4px 4px 4px 8px;
 }
 
 .titleRow {

package/dist/components/DiffDialog.d.ts

@@ -1,12 +1,19 @@
-import type { AIActionProposal } from "./AIActionProposalList.js";
+import type { ActionProposal } from "./ActionToast.js";
+import type { AppliedChange } from "./AuditLogList.js";
 export type ProposalDiff = {
     after: unknown;
     before: unknown;
 };
 type DiffDialogProps = {
+    change?: AppliedChange;
     diff: ProposalDiff;
     onClose: () => void;
-    proposal: AIActionProposal;
+    proposal: ActionProposal;
+    tokenUsage?: {
+        inputTokens?: number;
+        outputTokens?: number;
+        totalTokens?: number;
+    };
 };
-export declare const DiffDialog: ({ diff, onClose, proposal }: DiffDialogProps) => import("react").JSX.Element;
+export declare const DiffDialog: ({ change, diff, onClose, proposal, tokenUsage }: DiffDialogProps) => import("react").JSX.Element;
 export {};

package/dist/components/DiffDialog.js

@@ -1,19 +1,25 @@
 import { XIcon } from "@payloadcms/ui/icons/X";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { getJSONLineKey } from "../payload/shared.js";
 import styles from "./DiffDialog.module.css";
 const formatDiffValue = (value)=>{
     return JSON.stringify(value, null, 2);
 };
+const formatDateTime = (value)=>{
+    if (!value) return null;
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return value;
+    return new Intl.DateTimeFormat(undefined, {
+        dateStyle: "medium",
+        timeStyle: "short"
+    }).format(date);
+};
 const createLine = ({ changed, path, placeholder = false, text = "" })=>({
         changed,
         path,
         placeholder,
         text
     });
-const getJSONLineKey = (line)=>{
-    const match = /^(\s*)"([^"]+)":/.exec(line);
-    return match ? `${match[1]}${match[2]}` : null;
-};
 const shouldPairChangedLines = (beforeLine, afterLine)=>{
     const beforeKey = getJSONLineKey(beforeLine);
     const afterKey = getJSONLineKey(afterLine);
@@ -39,7 +45,7 @@ const getRowPath = (row)=>{
 const isChangedRow = (row)=>{
     return row.before.changed || row.after.changed;
 };
-const buildDisplayRows = (rows, expandedGroups)=>{
+const buildDisplayRows = (rows, expandedGroups, groupPrefix = "")=>{
     const displayRows = [];
     const contextRows = 2;
     let index = 0;
@@ -70,7 +76,8 @@ const buildDisplayRows = (rows, expandedGroups)=>{
             }
             continue;
         }
-        const isExpanded = expandedGroups.has(groupID);
+        const scopedGroupID = groupPrefix ? `${groupPrefix}:${groupID}` : groupID;
+        const isExpanded = expandedGroups.has(scopedGroupID);
         for(let rowIndex = start; rowIndex < start + contextRows; rowIndex += 1){
             displayRows.push({
                 index: rowIndex,
@@ -213,18 +220,56 @@ const getDiffRows = (before, after)=>{
     }
     return rows;
 };
-export const DiffDialog = ({ diff, onClose, proposal })=>{
+const isLocaleDiffMap = (value)=>{
+    if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+    return Object.values(value).every((entry)=>entry && typeof entry === "object" && !Array.isArray(entry));
+};
+const getDiffSections = (diff)=>{
+    if (isLocaleDiffMap(diff.before) && isLocaleDiffMap(diff.after)) {
+        const beforeByLocale = diff.before;
+        const afterByLocale = diff.after;
+        const localeKeys = Array.from(new Set([
+            ...Object.keys(beforeByLocale),
+            ...Object.keys(afterByLocale)
+        ]));
+        return localeKeys.map((locale)=>({
+                afterValue: formatDiffValue(afterByLocale[locale] ?? {}),
+                beforeValue: formatDiffValue(beforeByLocale[locale] ?? {}),
+                id: locale,
+                label: `Locale: ${locale}`
+            }));
+    }
+    return [
+        {
+            afterValue: formatDiffValue(diff.after),
+            beforeValue: formatDiffValue(diff.before),
+            id: "default"
+        }
+    ];
+};
+const formatTokenUsage = (value)=>{
+    return typeof value === "number" && Number.isFinite(value) && value > 0 ? value.toLocaleString() : null;
+};
+export const DiffDialog = ({ change, diff, onClose, proposal, tokenUsage })=>{
     const [scrollLeft, setScrollLeft] = useState(0);
     const [expandedGroups, setExpandedGroups] = useState(()=>new Set());
-    const beforeValue = formatDiffValue(diff.before);
-    const afterValue = formatDiffValue(diff.after);
-    const diffRows = getDiffRows(beforeValue, afterValue);
-    const displayRows = buildDisplayRows(diffRows, expandedGroups);
-    const longestLineLength = Math.max(...beforeValue.split("\n").map((line)=>line.length), ...afterValue.split("\n").map((line)=>line.length), 80);
-    const diffShellStyle = {
-        "--diff-line-offset": `-${scrollLeft}px`,
-        "--diff-line-width": `${longestLineLength + 8}ch`
-    };
+    const diffSections = getDiffSections(diff);
+    const totalTokens = formatTokenUsage(change?.totalTokens) || formatTokenUsage(tokenUsage?.totalTokens);
+    const inputTokens = formatTokenUsage(change?.inputTokens) || formatTokenUsage(tokenUsage?.inputTokens);
+    const outputTokens = formatTokenUsage(change?.outputTokens) || formatTokenUsage(tokenUsage?.outputTokens);
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return ()=>{
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        onClose
+    ]);
     return /*#__PURE__*/ React.createElement("div", {
         "aria-modal": "true",
         className: styles.dialogOverlay,
@@ -243,68 +288,109 @@ export const DiffDialog = ({ diff, onClose, proposal })=>{
         onClick: onClose,
         type: "button"
     }, /*#__PURE__*/ React.createElement(XIcon, null))), /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffShell,
-        style: diffShellStyle
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffScroll
+        className: styles.dialogContent
+    }, change ? /*#__PURE__*/ React.createElement("div", {
+        className: styles.detailSection
     }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffHeaderGrid
+        className: styles.detailGrid
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailLabel
+    }, "User"), /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailValue
+    }, change.userLabel || change.userID || "Unknown"), /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailLabel
+    }, "Date"), /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailValue
+    }, formatDateTime(change.createdAt) || "Unknown"), totalTokens && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailLabel
+    }, "Tokens"), /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailValue
+    }, totalTokens, inputTokens && outputTokens ? ` (${inputTokens} in / ${outputTokens} out)` : "")))) : totalTokens && /*#__PURE__*/ React.createElement("div", {
+        className: styles.detailSection
     }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffPaneHeader
-    }, "Current"), /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffPaneHeader
-    }, "Proposed")), /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffRows
-    }, displayRows.map((displayRow)=>{
-        if (displayRow.type === "collapsed") {
-            return /*#__PURE__*/ React.createElement("button", {
-                className: styles.diffCollapsedRow,
-                key: `collapsed-${displayRow.id}`,
-                onClick: ()=>{
-                    setExpandedGroups((current)=>{
-                        const next = new Set(current);
-                        if (displayRow.expanded) {
-                            next.delete(displayRow.id);
-                        } else {
-                            next.add(displayRow.id);
-                        }
-                        return next;
-                    });
-                },
-                type: "button"
-            }, displayRow.expanded ? "Hide" : "Show", " ", displayRow.count, " unchanged lines", displayRow.path ? /*#__PURE__*/ React.createElement("span", {
-                className: styles.diffCollapsedPath
-            }, displayRow.path) : null);
-        }
-        const row = displayRow.row;
+        className: styles.detailGrid
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailLabel
+    }, "Tokens"), /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailValue
+    }, totalTokens, inputTokens && outputTokens ? ` (${inputTokens} in / ${outputTokens} out)` : ""))), diffSections.map((section)=>{
+        const diffRows = getDiffRows(section.beforeValue, section.afterValue);
+        const displayRows = buildDisplayRows(diffRows, expandedGroups, section.id);
+        const longestLineLength = Math.max(...section.beforeValue.split("\n").map((line)=>line.length), ...section.afterValue.split("\n").map((line)=>line.length), 80);
+        const diffShellStyle = {
+            "--diff-line-offset": `-${scrollLeft}px`,
+            "--diff-line-width": `${longestLineLength + 8}ch`
+        };
         return /*#__PURE__*/ React.createElement("div", {
-            className: styles.diffRow,
-            key: `row-${displayRow.index}`
-        }, /*#__PURE__*/ React.createElement("span", {
-            className: [
-                styles.diffLine,
-                row.before.changed ? styles.diffLineRemoved : "",
-                row.before.placeholder ? styles.diffLinePlaceholder : ""
-            ].filter(Boolean).join(" ")
-        }, row.before.changed && row.before.path ? /*#__PURE__*/ React.createElement("span", {
-            className: styles.diffPathBadge
-        }, row.before.path) : null, /*#__PURE__*/ React.createElement("span", {
-            className: styles.diffLineContent
-        }, row.before.text || " ")), /*#__PURE__*/ React.createElement("span", {
-            className: [
-                styles.diffLine,
-                row.after.changed ? styles.diffLineAdded : "",
-                row.after.placeholder ? styles.diffLinePlaceholder : ""
-            ].filter(Boolean).join(" ")
-        }, row.after.changed && row.after.path ? /*#__PURE__*/ React.createElement("span", {
-            className: styles.diffPathBadge
-        }, row.after.path) : null, /*#__PURE__*/ React.createElement("span", {
-            className: styles.diffLineContent
-        }, row.after.text || " ")));
-    }))), /*#__PURE__*/ React.createElement("div", {
-        className: styles.horizontalScroll,
-        onScroll: (event)=>setScrollLeft(event.currentTarget.scrollLeft)
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.horizontalScrollSpacer
-    })))));
+            className: styles.diffSection,
+            key: section.id
+        }, section.label ? /*#__PURE__*/ React.createElement("div", {
+            className: styles.diffSectionLabel
+        }, section.label) : null, /*#__PURE__*/ React.createElement("div", {
+            className: styles.diffShell,
+            style: diffShellStyle
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: styles.diffScroll
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: styles.diffHeaderGrid
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: styles.diffPaneHeader
+        }, "Current"), /*#__PURE__*/ React.createElement("div", {
+            className: styles.diffPaneHeader
+        }, "Proposed")), /*#__PURE__*/ React.createElement("div", {
+            className: styles.diffRows
+        }, displayRows.map((displayRow)=>{
+            if (displayRow.type === "collapsed") {
+                return /*#__PURE__*/ React.createElement("button", {
+                    className: styles.diffCollapsedRow,
+                    key: `${section.id}-collapsed-${displayRow.id}`,
+                    onClick: ()=>{
+                        setExpandedGroups((current)=>{
+                            const next = new Set(current);
+                            const groupID = `${section.id}:${displayRow.id}`;
+                            if (displayRow.expanded) {
+                                next.delete(groupID);
+                            } else {
+                                next.add(groupID);
+                            }
+                            return next;
+                        });
+                    },
+                    type: "button"
+                }, displayRow.expanded ? "Hide" : "Show", " ", displayRow.count, " unchanged lines", displayRow.path && /*#__PURE__*/ React.createElement("span", {
+                    className: styles.diffCollapsedPath
+                }, displayRow.path));
+            }
+            const row = displayRow.row;
+            return /*#__PURE__*/ React.createElement("div", {
+                className: styles.diffRow,
+                key: `${section.id}-row-${displayRow.index}`
+            }, /*#__PURE__*/ React.createElement("span", {
+                className: [
+                    styles.diffLine,
+                    row.before.changed && styles.diffLineRemoved,
+                    row.before.placeholder && styles.diffLinePlaceholder
+                ].filter(Boolean).join(" ")
+            }, row.before.changed && row.before.path && /*#__PURE__*/ React.createElement("span", {
+                className: styles.diffPathBadge
+            }, row.before.path), /*#__PURE__*/ React.createElement("span", {
+                className: styles.diffLineContent
+            }, row.before.text || " ")), /*#__PURE__*/ React.createElement("span", {
+                className: [
+                    styles.diffLine,
+                    row.after.changed && styles.diffLineAdded,
+                    row.after.placeholder && styles.diffLinePlaceholder
+                ].filter(Boolean).join(" ")
+            }, row.after.changed && row.after.path && /*#__PURE__*/ React.createElement("span", {
+                className: styles.diffPathBadge
+            }, row.after.path), /*#__PURE__*/ React.createElement("span", {
+                className: styles.diffLineContent
+            }, row.after.text || " ")));
+        }))), /*#__PURE__*/ React.createElement("div", {
+            className: styles.horizontalScroll,
+            onScroll: (event)=>setScrollLeft(event.currentTarget.scrollLeft)
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: styles.horizontalScrollSpacer
+        }))));
+    }))));
 };

package/dist/components/DiffDialog.module.css

@@ -4,6 +4,7 @@
     display: flex;
     inset: 0;
     justify-content: center;
+    overflow: auto;
     padding: 24px;
     position: fixed;
     z-index: 1100;
@@ -19,10 +20,21 @@
     gap: 16px;
     max-height: min(760px, calc(100vh - 48px));
     max-width: min(1120px, calc(100vw - 48px));
+    min-height: 0;
+    overflow: hidden;
     padding: 16px;
     width: 100%;
 }
 
+.dialogContent {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 16px;
+    min-height: 0;
+    overflow: auto;
+}
+
 .dialogHeader {
     align-items: flex-start;
     display: flex;
@@ -44,6 +56,58 @@
     margin-top: 2px;
 }
 
+.detailSection {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.detailGrid {
+    column-gap: 12px;
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    row-gap: 4px;
+}
+
+.detailLabel {
+    color: var(--theme-elevation-600);
+    font-size: 11px;
+    line-height: 1.2;
+}
+
+.detailValue {
+    color: var(--theme-text);
+    font-size: 12px;
+    line-height: 1.4;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.detailTextBlock {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.detailText {
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-elevation-100);
+    border-radius: 4px;
+    color: var(--theme-text);
+    font-family: inherit;
+    font-size: 12px;
+    line-height: 1.5;
+    margin: 0;
+    max-height: 140px;
+    overflow: auto;
+    padding: 8px 10px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
 .closeButton {
     align-items: center;
     background: transparent;
@@ -72,12 +136,28 @@
     border: 1px solid var(--theme-elevation-150);
     border-radius: 0;
     display: flex;
+    flex: 1 1 auto;
     flex-direction: column;
     min-height: 0;
     min-width: 0;
     overflow: hidden;
 }
 
+.diffSection {
+    display: flex;
+    flex: 0 0 calc(100% - 1px);
+    flex-direction: column;
+    gap: 6px;
+    min-height: calc(100% - 1px);
+}
+
+.diffSectionLabel {
+    color: var(--theme-elevation-700);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
 .diffHeaderGrid {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -109,7 +189,7 @@
     flex: 1 1 auto;
     font-size: 12px;
     line-height: 1.5;
-    min-height: 260px;
+    min-height: 0;
     overflow-x: hidden;
     overflow-y: auto;
 }
@@ -238,12 +318,16 @@
         flex-direction: column;
     }
 
+    .detailGrid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
     .closeButton {
         align-self: flex-end;
     }
 
     .diffScroll {
-        min-height: 180px;
+        min-height: 0;
     }
 
 }

package/dist/components/Icons.d.ts

@@ -3,7 +3,12 @@ export declare function MistralAiIcon(props: SVGProps<SVGSVGElement>): import("r
 export declare function OpenaiIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function ClaudeIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function GoogleGeminiIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function OpenrouterIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function FileDiff(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function Send(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function Apply(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function Reject(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Collection(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Document(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Global(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Block(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;