next-cache-toolbar 0.1.2 → 0.2.0

package/dist/cjs/{cache-entry-client-Cg2-NRrZ.js → cache-entry-client-C0CjMKC5.js}

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
-var dialogClient = require('./dialog-client-AZHsTC7l.js');
+var dialogClient = require('./dialog-client-ChHtZVMD.js');
 var lucideReact = require('lucide-react');
 var JsonView = require('react18-json-view');
 
@@ -143,18 +143,16 @@ const Button = /*#__PURE__*/ React__namespace.forwardRef(({ className, variant,
 });
 Button.displayName = "Button";
 
+const getEntryRevalidateLeft = (cacheEntry)=>{
+    if (!cacheEntry.data?.headers.date || !cacheEntry.revalidate) {
+        return;
+    }
+    const cacheEntryDate = new Date(cacheEntry.data?.headers.date);
+    const msDiff = new Date().getTime() - cacheEntryDate.getTime();
+    return Math.floor(cacheEntry.revalidate - msDiff / 1000);
+};
 const CacheEntry = (props)=>{
-    const cacheEntryRevalidateLeft = React.useMemo(()=>{
-        if (!props.cacheEntry.data?.headers.date || !props.cacheEntry.revalidate) {
-            return;
-        }
-        const cacheEntryDate = new Date(props.cacheEntry.data?.headers.date);
-        const msDiff = new Date().getTime() - cacheEntryDate.getTime();
-        return Math.floor(props.cacheEntry.revalidate - msDiff / 1000);
-    }, [
-        props.cacheEntry.data?.headers.date,
-        props.cacheEntry.revalidate
-    ]);
+    const cacheEntryRevalidateLeft = getEntryRevalidateLeft(props.cacheEntry);
     const isStale = cacheEntryRevalidateLeft ? cacheEntryRevalidateLeft < 0 : false;
     return /*#__PURE__*/ jsxRuntime.jsxs(TableRow, {
         children: [
@@ -209,6 +207,7 @@ exports.Button = Button;
 exports.CacheEntry = CacheEntry;
 exports.Table = Table;
 exports.TableBody = TableBody;
+exports.TableCell = TableCell;
 exports.TableHead = TableHead;
 exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;

package/dist/cjs/cache-panel-context-client-FIUru-uB.js

@@ -0,0 +1,115 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const CachePanelContext = /*#__PURE__*/ React.createContext({
+    entries: [],
+    isOpen: false,
+    setEntries: ()=>{},
+    toggleOpen: ()=>{},
+    setSorting: ()=>{},
+    addFilter: ()=>{},
+    clearFilter: ()=>{}
+});
+const sortCacheEntryByKey = (key, a, b)=>{
+    switch(key){
+        case "url":
+            if (!a.data || !b.data) {
+                return 0;
+            }
+            return a.data.url.localeCompare(b.data.url);
+        case "revalidate":
+            return (a.revalidate ?? 0) - (b.revalidate ?? 0);
+        case "tags":
+            if (a.tags.length === 0 || b.tags.length === 0) {
+                return 0;
+            }
+            return a.tags[0]?.localeCompare(b.tags[0] ?? "") ?? 0;
+        case "timestamp":
+            {
+                if (!a.data?.headers.date || !b.data?.headers.date) {
+                    return 0;
+                }
+                return new Date(b.data.headers.date).getTime() - new Date(a.data.headers.date).getTime();
+            }
+    }
+};
+const useCachePanelContext = ()=>React__default.default.useContext(CachePanelContext);
+const CachePanelContextProvider = (props)=>{
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [entries, setEntries] = React.useState(props.entries);
+    const [filters, setFilters] = React.useState();
+    const [sorting, setSorting] = React.useState(undefined);
+    const toggleOpen = ()=>{
+        setIsOpen(!isOpen);
+    };
+    const addFilter = (key, value)=>{
+        setFilters((prev)=>{
+            if (!prev) {
+                return {
+                    [key]: value
+                };
+            }
+            return {
+                ...prev,
+                [key]: value
+            };
+        });
+    };
+    const clearFilter = (key)=>{
+        setFilters((prev)=>{
+            if (!prev) {
+                return;
+            }
+            delete prev[key];
+            return prev;
+        });
+    };
+    const derivedEntries = React.useMemo(()=>{
+        let copiedEntries = entries.slice();
+        if (filters) {
+            copiedEntries = copiedEntries.filter((entry)=>{
+                const { tags: tagsFilter, url: urlFilter } = filters;
+                if (tagsFilter && !entry[1].tags.some((tag)=>tag.match(tagsFilter))) {
+                    return false;
+                }
+                if (urlFilter && !entry[1].data.url.match(urlFilter)) {
+                    return false;
+                }
+                return true;
+            });
+        }
+        if (!sorting) {
+            return copiedEntries;
+        }
+        const { key, direction } = sorting;
+        return copiedEntries.toSorted((a, b)=>{
+            return sortCacheEntryByKey(key, a[1], b[1]) * (direction === "asc" ? 1 : -1);
+        });
+    }, [
+        entries,
+        sorting,
+        filters
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(CachePanelContext.Provider, {
+        value: {
+            isOpen,
+            toggleOpen,
+            setSorting,
+            sorting,
+            entries: derivedEntries,
+            setEntries,
+            filters,
+            addFilter,
+            clearFilter
+        },
+        children: props.children
+    });
+};
+
+exports.CachePanelContextProvider = CachePanelContextProvider;
+exports.useCachePanelContext = useCachePanelContext;

package/dist/cjs/cache-panel-head-client-Cs4uyFh7.js

@@ -0,0 +1,139 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
+var React = require('react');
+var lucideReact = require('lucide-react');
+var cachePanelContextClient = require('./cache-panel-context-client-FIUru-uB.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const Input = /*#__PURE__*/ React__namespace.forwardRef(({ className, type, ...props }, ref)=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("input", {
+        type: type,
+        className: cacheEntryClient.cn("nct-flex nct-h-10 nct-w-full nct-rounded-md nct-border nct-border-input nct-bg-background nct-px-3 nct-py-2 nct-text-sm nct-ring-offset-background file:nct-border-0 file:nct-bg-transparent file:nct-text-sm file:nct-font-medium placeholder:nct-text-muted-foreground focus-visible:nct-outline-none focus-visible:nct-ring-2 focus-visible:nct-ring-ring focus-visible:nct-ring-offset-2 disabled:nct-cursor-not-allowed disabled:nct-opacity-50", className),
+        ref: ref,
+        ...props
+    });
+});
+Input.displayName = "Input";
+
+const CachePanelHead = ({ sortingProperty, children, className, withFilter = false, ...props })=>{
+    const { setSorting, sorting, filters, addFilter, clearFilter } = cachePanelContextClient.useCachePanelContext();
+    const [filterInputVisible, setFilterInputVisible] = React.useState(false);
+    const inputRef = React.useCallback((node)=>{
+        if (!node) {
+            return;
+        }
+        node.focus();
+    }, []);
+    const sortingDirection = React.useMemo(()=>{
+        if (!sorting || sorting.key !== sortingProperty) {
+            return;
+        }
+        return sorting.direction;
+    }, [
+        sorting,
+        sortingProperty
+    ]);
+    const filterValue = React.useMemo(()=>{
+        if (sortingProperty !== "url" && sortingProperty !== "tags") {
+            return;
+        }
+        return filters?.[sortingProperty] ?? "";
+    }, [
+        sortingProperty,
+        filters
+    ]);
+    const onHeadClick = ()=>{
+        if (sorting && sorting.key === sortingProperty) {
+            setSorting({
+                key: sortingProperty,
+                direction: sorting.direction === "asc" ? "desc" : "asc"
+            });
+        } else {
+            setSorting({
+                key: sortingProperty,
+                direction: "asc"
+            });
+        }
+    };
+    const onFilterInputKeyDown = (event)=>{
+        if (sortingProperty !== "url" && sortingProperty !== "tags") {
+            return;
+        }
+        // clear value on esc
+        if (event.key === "Escape") {
+            clearFilter(sortingProperty);
+            setFilterInputVisible(false);
+        }
+    };
+    const onFilterInputChange = (event)=>{
+        if (sortingProperty !== "url" && sortingProperty !== "tags") {
+            return;
+        }
+        addFilter(sortingProperty, event.target.value);
+    };
+    const onFilterInputBlur = (event)=>{
+        if (sortingProperty !== "url" && sortingProperty !== "tags") {
+            return;
+        }
+        if (event.target.value === "") {
+            setFilterInputVisible(false);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.TableHead, {
+        className: cacheEntryClient.cn("group", className),
+        ...props,
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: cacheEntryClient.cn("nct-flex nct-items-center nct-gap-2 nct-py-2", sorting?.key === sortingProperty && "nct-underline"),
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    onClick: onHeadClick,
+                    onKeyDown: onHeadClick,
+                    children: children
+                }),
+                sortingDirection === "asc" && /*#__PURE__*/ jsxRuntime.jsx(lucideReact.ArrowDownAZIcon, {}),
+                sortingDirection === "desc" && /*#__PURE__*/ jsxRuntime.jsx(lucideReact.ArrowUpAZIcon, {}),
+                withFilter && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: "ml-auto",
+                    children: [
+                        !filterInputVisible && /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.Button, {
+                            variant: "ghost",
+                            size: "icon",
+                            className: cacheEntryClient.cn(),
+                            onClick: ()=>setFilterInputVisible(true),
+                            children: /*#__PURE__*/ jsxRuntime.jsx(lucideReact.FilterIcon, {})
+                        }),
+                        filterInputVisible && /*#__PURE__*/ jsxRuntime.jsx(Input, {
+                            onKeyDown: onFilterInputKeyDown,
+                            value: filterValue,
+                            onChange: onFilterInputChange,
+                            onBlur: onFilterInputBlur,
+                            ref: inputRef
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+exports.CachePanelHead = CachePanelHead;

package/dist/cjs/cache-panel-table-client-9aBv-MjJ.js

@@ -0,0 +1,22 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
+var cachePanelContextClient = require('./cache-panel-context-client-FIUru-uB.js');
+
+const CachePanelTable = ()=>{
+    const { entries } = cachePanelContextClient.useCachePanelContext();
+    return /*#__PURE__*/ jsxRuntime.jsxs(cacheEntryClient.TableBody, {
+        children: [
+            entries.length === 0 && /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.TableRow, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.TableCell, {
+                    children: "No cache entries"
+                })
+            }),
+            entries.map(([file, cacheEntry])=>/*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.CacheEntry, {
+                    cacheEntry: cacheEntry
+                }, file))
+        ]
+    });
+};
+
+exports.CachePanelTable = CachePanelTable;

package/dist/cjs/{cache-panel-trigger-client-ChZncD_2.js → cache-panel-trigger-client-CGeo22Q8.js}

@@ -1,8 +1,8 @@
 'use client';
 var jsxRuntime = require('react/jsx-runtime');
-var cacheEntryClient = require('./cache-entry-client-Cg2-NRrZ.js');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
 require('react');
-var cachePanelContextClient = require('./cache-panel-context-client-B1EgwMzI.js');
+var cachePanelContextClient = require('./cache-panel-context-client-FIUru-uB.js');
 
 function CachePanelTrigger(props) {
     const { toggleOpen } = cachePanelContextClient.useCachePanelContext();

package/dist/cjs/{cache-panel-wrapper-client-DE5QrmN0.js → cache-panel-wrapper-client-2eJisZgJ.js}

@@ -1,8 +1,8 @@
 'use client';
 var jsxRuntime = require('react/jsx-runtime');
-var cacheEntryClient = require('./cache-entry-client-Cg2-NRrZ.js');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
 require('react');
-var cachePanelContextClient = require('./cache-panel-context-client-B1EgwMzI.js');
+var cachePanelContextClient = require('./cache-panel-context-client-FIUru-uB.js');
 
 const CacheTable = (props)=>{
     const { isOpen } = cachePanelContextClient.useCachePanelContext();

package/dist/cjs/cache-refresh-data-client-VWar7JpG.js

@@ -0,0 +1,48 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var getCacheEntriesServer = require('./getCacheEntries-server-BheTh0n9.js');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
+var lucideReact = require('lucide-react');
+var navigation = require('next/navigation');
+var React = require('react');
+var cachePanelContextClient = require('./cache-panel-context-client-FIUru-uB.js');
+
+function RefreshDataButton({ enabled, interval }) {
+    const { setEntries } = cachePanelContextClient.useCachePanelContext();
+    const [isPending, startTransition] = React.useTransition();
+    const pathname = navigation.usePathname();
+    const refreshData = ()=>{
+        startTransition(async ()=>{
+            const files = await getCacheEntriesServer.getCacheFiles();
+            setEntries(files ?? []);
+        });
+    };
+    React.useEffect(()=>{
+        console.log("pathname changed", pathname);
+        refreshData();
+    }, [
+        pathname
+    ]);
+    React.useEffect(()=>{
+        if (!enabled) {
+            return;
+        }
+        const intervalId = setInterval(refreshData, interval);
+        return ()=>clearInterval(intervalId);
+    }, [
+        enabled,
+        interval
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.Button, {
+        variant: "outline",
+        size: "icon",
+        onClick: refreshData,
+        children: /*#__PURE__*/ jsxRuntime.jsx(lucideReact.Loader2, {
+            className: cacheEntryClient.cn("nct-h-4 nct-w-4", {
+                "nct-animate-spin": isPending
+            })
+        })
+    });
+}
+
+exports.RefreshDataButton = RefreshDataButton;

package/dist/cjs/{dialog-client-AZHsTC7l.js → dialog-client-ChHtZVMD.js}

@@ -3,24 +3,24 @@ var jsxRuntime = require('react/jsx-runtime');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var lucideReact = require('lucide-react');
 var React = require('react');
-var cacheEntryClient = require('./cache-entry-client-Cg2-NRrZ.js');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
 
 function _interopNamespace(e) {
-	if (e && e.__esModule) return e;
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return n;
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return n;
 }
 
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);

package/dist/cjs/getCacheEntries-server-BheTh0n9.js

@@ -0,0 +1,72 @@
+'use server';
+var fs = require('fs');
+var zod = require('zod');
+
+const stringToJSONSchema = zod.z.string().transform((str, ctx)=>{
+    try {
+        return JSON.parse(str);
+    } catch (e) {
+        ctx.addIssue({
+            code: "custom",
+            message: "Encoded body is not in JSON format",
+            path: [
+                "data",
+                "body"
+            ]
+        });
+        return zod.z.NEVER;
+    }
+});
+const nextCacheFileSchema = zod.z.object({
+    data: zod.z.object({
+        body: zod.z.string(),
+        headers: zod.z.record(zod.z.string(), zod.z.string()),
+        status: zod.z.number(),
+        url: zod.z.string()
+    }),
+    kind: zod.z.union([
+        zod.z.literal("FETCH"),
+        zod.z.unknown()
+    ]),
+    revalidate: zod.z.number().optional(),
+    tags: zod.z.array(zod.z.string()).optional().default([])
+}).transform((cacheEntry)=>{
+    const body = stringToJSONSchema.parse(atob(cacheEntry.data.body));
+    return {
+        ...cacheEntry,
+        data: {
+            ...cacheEntry.data,
+            body
+        }
+    };
+});
+
+const cachePath = ".next/cache/fetch-cache";
+const getCacheFiles = async ()=>{
+    if (!fs.existsSync(cachePath)) {
+        return;
+    }
+    const files = await fs.promises.readdir(cachePath);
+    const cacheFiles = new Map();
+    for (const file of files){
+        // ignore tags-manifest file
+        if (file.match(/manifest/)) {
+            continue;
+        }
+        try {
+            const fileContent = await fs.promises.readFile(`${cachePath}/${file}`);
+            const cacheEntry = nextCacheFileSchema.parse(JSON.parse(fileContent.toString()));
+            cacheFiles.set(file, cacheEntry);
+        } catch (error) {
+            if (error instanceof zod.ZodError) {
+                const issues = error.issues;
+                console.error(`File ${file} do not match the schema`, issues);
+                continue;
+            }
+            console.error(`Error parsing ${file}`);
+        }
+    }
+    return Array.from(cacheFiles.entries());
+};
+
+exports.getCacheFiles = getCacheFiles;

package/dist/cjs/index.d.ts

@@ -1,5 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function NextCacheToolbar(): Promise<react_jsx_runtime.JSX.Element>;
+type Props = {
+    /**
+     * If true, the cache table will automatically refresh when the pathname changes.
+     * @default false
+     */
+    autoRefresh?: boolean;
+    /**
+     * The interval in milliseconds to refresh the cache table.
+     * @default 10000
+     */
+    interval?: number;
+};
+declare function NextCacheToolbar({ autoRefresh, interval, }: Props): Promise<react_jsx_runtime.JSX.Element>;
 
 export { NextCacheToolbar };

package/dist/cjs/index.js

@@ -1,93 +1,23 @@
-'use server';
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var cacheEntryClient = require('./cache-entry-client-Cg2-NRrZ.js');
 var lucideReact = require('lucide-react');
-var fs = require('fs');
-var promises = require('node:fs/promises');
-var zod = require('zod');
-var cachePanelContextClient = require('./cache-panel-context-client-B1EgwMzI.js');
-var cachePanelHeadClient = require('./cache-panel-head-client-CbhKAPhZ.js');
-var cachePanelTableClient = require('./cache-panel-table-client-CuP76AwU.js');
-var cachePanelTriggerClient = require('./cache-panel-trigger-client-ChZncD_2.js');
-var cachePanelWrapperClient = require('./cache-panel-wrapper-client-DE5QrmN0.js');
-var refreshDataButtonClient = require('./refresh-data-button-client-D4e_gWso.js');
+var getCacheEntriesServer = require('./getCacheEntries-server-BheTh0n9.js');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
+var cachePanelContextClient = require('./cache-panel-context-client-FIUru-uB.js');
+var cachePanelTableClient = require('./cache-panel-table-client-9aBv-MjJ.js');
+var cachePanelTriggerClient = require('./cache-panel-trigger-client-CGeo22Q8.js');
+var cachePanelWrapperClient = require('./cache-panel-wrapper-client-2eJisZgJ.js');
+var cacheRefreshDataClient = require('./cache-refresh-data-client-VWar7JpG.js');
+var cachePanelHeadClient = require('./cache-panel-head-client-Cs4uyFh7.js');
 
-const stringToJSONSchema = zod.z.string().transform((str, ctx)=>{
-    try {
-        return JSON.parse(str);
-    } catch (e) {
-        ctx.addIssue({
-            code: "custom",
-            message: "Encoded body is not in JSON format",
-            path: [
-                "data",
-                "body"
-            ]
-        });
-        return zod.z.NEVER;
-    }
-});
-const nextCacheFileSchema = zod.z.object({
-    data: zod.z.object({
-        body: zod.z.string(),
-        headers: zod.z.record(zod.z.string(), zod.z.string()),
-        status: zod.z.number(),
-        url: zod.z.string()
-    }),
-    kind: zod.z.union([
-        zod.z.literal("FETCH"),
-        zod.z.unknown()
-    ]),
-    revalidate: zod.z.number().optional(),
-    tags: zod.z.array(zod.z.string()).optional().default([])
-}).transform((cacheEntry)=>{
-    const body = stringToJSONSchema.parse(atob(cacheEntry.data.body));
-    return {
-        ...cacheEntry,
-        data: {
-            ...cacheEntry.data,
-            body
-        }
-    };
-});
-
-const cachePath = ".next/cache/fetch-cache";
-const getCacheFiles = async ()=>{
-    if (!fs.existsSync(cachePath)) {
-        return;
-    }
-    const files = await promises.readdir(cachePath);
-    const cacheFiles = new Map();
-    for (const file of files){
-        // ignore tags-manifest file
-        if (file.match(/manifest/)) {
-            continue;
-        }
-        try {
-            const fileContent = await promises.readFile(`${cachePath}/${file}`);
-            const cacheEntry = nextCacheFileSchema.parse(JSON.parse(fileContent.toString()));
-            cacheFiles.set(file, cacheEntry);
-        } catch (error) {
-            if (error instanceof zod.ZodError) {
-                const issues = error.issues;
-                console.error(`File ${file} do not match the schema`, issues);
-                continue;
-            }
-            console.error(`Error parsing ${file}`);
-        }
-    }
-    return cacheFiles;
-};
-
-async function NextCacheToolbar() {
-    const files = await getCacheFiles();
-    const cacheEntries = Array.from(files?.entries() ?? []);
+async function NextCacheToolbar({ autoRefresh = false, interval = 10000 }) {
+    const files = await getCacheEntriesServer.getCacheFiles();
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         id: "next-cache-toolbar",
         className: "nct-text-primary nct-font-mono",
         children: /*#__PURE__*/ jsxRuntime.jsxs(cachePanelContextClient.CachePanelContextProvider, {
+            entries: files ?? [],
             children: [
                 /*#__PURE__*/ jsxRuntime.jsx(cachePanelTriggerClient.CachePanelTrigger, {
                     className: "nct-fixed nct-rounded-full nct-bottom-4 nct-right-4 nct-bg-gradient-to-r nct-from-fuchsia-500 nct-to-cyan-500",
@@ -102,14 +32,16 @@ async function NextCacheToolbar() {
                                     /*#__PURE__*/ jsxRuntime.jsx(cachePanelHeadClient.CachePanelHead, {
                                         sortingProperty: "url",
                                         className: "nct-w-[300px]",
+                                        withFilter: true,
                                         children: "URL"
                                     }),
                                     /*#__PURE__*/ jsxRuntime.jsx(cachePanelHeadClient.CachePanelHead, {
                                         sortingProperty: "revalidate",
-                                        children: "Revalidate"
+                                        children: "Revalidate (ms)"
                                     }),
                                     /*#__PURE__*/ jsxRuntime.jsx(cachePanelHeadClient.CachePanelHead, {
                                         sortingProperty: "tags",
+                                        withFilter: true,
                                         children: "Tags"
                                     }),
                                     /*#__PURE__*/ jsxRuntime.jsx(cachePanelHeadClient.CachePanelHead, {
@@ -121,7 +53,10 @@ async function NextCacheToolbar() {
                                         children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                             className: "nct-flex nct-items-center nct-justify-end nct-gap-2",
                                             children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(refreshDataButtonClient.RefreshDataButton, {}),
+                                                /*#__PURE__*/ jsxRuntime.jsx(cacheRefreshDataClient.RefreshDataButton, {
+                                                    enabled: autoRefresh,
+                                                    interval: interval
+                                                }),
                                                 /*#__PURE__*/ jsxRuntime.jsx(cachePanelTriggerClient.CachePanelTrigger, {
                                                     children: /*#__PURE__*/ jsxRuntime.jsx(lucideReact.PanelBottomCloseIcon, {})
                                                 })
@@ -131,9 +66,7 @@ async function NextCacheToolbar() {
                                 ]
                             })
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsx(cachePanelTableClient.CachePanelTable, {
-                            entries: cacheEntries
-                        })
+                        /*#__PURE__*/ jsxRuntime.jsx(cachePanelTableClient.CachePanelTable, {})
                     ]
                 })
             ]