50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T5947,"use client"; import { PostgreSQL } from "@codemirror/lang-sql"; import { Alert02Icon, ArrowDown01Icon, Bookmark01Icon, Cancel01Icon, CheckmarkCircle02Icon, Copy01Icon, Loading03Icon, PlayIcon, Search01Icon, Tick02Icon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { highlightTree, tagHighlighter, tags } from "@lezer/highlight"; import { useMemo, useState } from "react"; import type { ComponentProps, ReactNode } from "react"; import { EmptyState } from "@/components/empty-state/empty-state"; import { Skeleton } from "@/components/ui/skeleton"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; export type QueryHistoryStatus = "success" | "error" | "cancelled"; export type QueryHistoryFilter = "all" | "saved" | "failed"; export interface QueryHistoryEntry { id: string; query: string; status: QueryHistoryStatus; /** Display-ready time, e.g. "2m ago" or "Yesterday, 4:18 PM". */ timestamp: string; /** Machine-readable timestamp for the time element. */ executedAt?: string; durationMs?: number; rowCount?: number; command?: string; database?: string; branch?: string; error?: string; saved?: boolean; } export type QueryHistoryProps = Omit, "children"> & { entries: QueryHistoryEntry[]; /** Controlled text filter. */ query?: string; /** Initial text filter for uncontrolled usage. */ defaultQuery?: string; onQueryChange?: (query: string) => void; /** Controlled history filter. */ filter?: QueryHistoryFilter; /** Initial history filter for uncontrolled usage. */ defaultFilter?: QueryHistoryFilter; onFilterChange?: (filter: QueryHistoryFilter) => void; /** Controlled expanded row id. Pass null to close all rows. */ expandedId?: string | null; /** Initial expanded row id for uncontrolled usage. */ defaultExpandedId?: string | null; onExpandedIdChange?: (id: string | null) => void; onRerun?: (entry: QueryHistoryEntry) => void | Promise; /** Controlled id for a query currently rerunning. */ runningId?: string | null; onSavedChange?: (entry: QueryHistoryEntry, saved: boolean) => void; onCopy?: (entry: QueryHistoryEntry) => void; isLoading?: boolean; error?: Error | string | null; empty?: ReactNode; label?: string; }; const FILTERS: { label: string; value: QueryHistoryFilter }[] = [ { label: "All", value: "all" }, { label: "Saved", value: "saved" }, { label: "Failed", value: "failed" }, ]; const STATUS: Record< QueryHistoryStatus, { icon: typeof CheckmarkCircle02Icon; label: string; className: string } > = { cancelled: { className: "text-muted-foreground", icon: Cancel01Icon, label: "Cancelled", }, error: { className: "text-destructive", icon: Alert02Icon, label: "Failed", }, success: { className: "text-primary", icon: CheckmarkCircle02Icon, label: "Succeeded", }, }; const COPY_FEEDBACK_MS = 1600; /* ───────────────────────────────────────────────────────── * DISCLOSURE STORYBOARD * * 0ms detail begins 4px above its resting position * 180ms height, position, and opacity settle together * ───────────────────────────────────────────────────────── */ const DISCLOSURE_MOTION = { durationMs: 180, offsetPx: 4, }; const SQL_HIGHLIGHTER = tagHighlighter([ { class: "font-semibold text-primary", tag: tags.keyword }, { class: "text-[var(--status-scaling)]", tag: tags.string }, { class: "italic text-muted-foreground", tag: tags.comment }, { class: "text-foreground", tag: [tags.name, tags.variableName] }, { class: "text-[var(--status-sleeping)]", tag: [tags.number, tags.bool, tags.null], }, { class: "text-muted-foreground", tag: tags.punctuation }, { class: "text-destructive", tag: tags.invalid }, ]); const highlightSQL = (query: string) => { const content: ReactNode[] = []; let position = 0; highlightTree( PostgreSQL.language.parser.parse(query), SQL_HIGHLIGHTER, (from, to, classes) => { if (from > position) { content.push(query.slice(position, from)); } content.push( {query.slice(from, to)} ); position = to; } ); if (position < query.length) { content.push(query.slice(position)); } return content; }; const useControllableValue = ({ prop, defaultProp, onChange, }: { prop: Value | undefined; defaultProp: Value; onChange?: (value: Value) => void; }) => { const [internalValue, setInternalValue] = useState(defaultProp); const value = prop === undefined ? internalValue : prop; const setValue = (nextValue: Value) => { if (prop === undefined) { setInternalValue(nextValue); } onChange?.(nextValue); }; return [value, setValue] as const; }; const useCopyQuery = (onCopy?: (entry: QueryHistoryEntry) => void) => { const [copiedId, setCopiedId] = useState(null); const copy = async (entry: QueryHistoryEntry) => { try { await navigator.clipboard.writeText(entry.query); setCopiedId(entry.id); window.setTimeout(() => setCopiedId(null), COPY_FEEDBACK_MS); } catch { setCopiedId(null); } onCopy?.(entry); }; return { copiedId, copy }; }; const formatDuration = (durationMs?: number) => { if (durationMs === undefined) { return null; } if (durationMs < 1) { return "<1 ms"; } if (durationMs < 1000) { return `${Math.round(durationMs)} ms`; } return `${(durationMs / 1000).toFixed(2)} s`; }; const formatRowCount = (rowCount?: number) => { if (rowCount === undefined) { return null; } return `${rowCount.toLocaleString()} ${rowCount === 1 ? "row" : "rows"}`; }; const summarizeQuery = (query: string) => query.replaceAll(/\s+/gu, " ").trim(); const IconButton = ({ label, pressed, className, ...props }: ComponentProps<"button"> & { label: string; pressed?: boolean }) => ( } /> {label} ); const FilterControl = ({ value, onChange, }: { value: QueryHistoryFilter; onChange: (filter: QueryHistoryFilter) => void; }) => (

Filter query history {FILTERS.map((filter) => ( ))}

); const QueryMetadata = ({ entry, statusLabel, }: { entry: QueryHistoryEntry; statusLabel: string; }) => { const duration = formatDuration(entry.durationMs); const rowCount = formatRowCount(entry.rowCount); const isSlow = entry.durationMs !== undefined && entry.durationMs >= 1000; return ( {statusLabel}. {entry.command ? ( {entry.command} ) : null} {rowCount ? {rowCount} : null} {duration ? ( {duration} ) : null} {entry.database || entry.branch ? ( {entry.database ? ( {entry.database} ) : null} {entry.database && entry.branch ? ( ) : null} {entry.branch ? ( {entry.branch} ) : null} ) : null} {entry.timestamp} ); }; const QueryRow = ({ entry, expanded, copied, running, onCopy, onExpandedChange, onRerun, onSavedChange, }: { entry: QueryHistoryEntry; expanded: boolean; copied: boolean; running: boolean; onCopy: () => void; onExpandedChange: () => void; onRerun?: () => void | Promise; onSavedChange?: () => void; }) => { const status = STATUS[entry.status]; const summary = summarizeQuery(entry.query); const detailsId = `query-history-${entry.id}-details`; return (

{onSavedChange ? ( ) : null} {onRerun ? ( ) : null}

              {highlightSQL(entry.query)}

{entry.error ? (

) : null}

); }; const QueryHistorySkeleton = ({ label, className, ...props }: ComponentProps<"div"> & { label: string }) => (

{label}

); const getRootState = (error: Error | string | null, count: number) => { if (error) { return "error"; } return count > 0 ? "ready" : "empty"; }; const QueryHistoryBody = ({ entries, visibleEntries, error, empty, copiedId, expandedId, runningId, copy, setExpandedId, onRerun, onSavedChange, }: { entries: QueryHistoryEntry[]; visibleEntries: QueryHistoryEntry[]; error: Error | string | null; empty?: ReactNode; copiedId: string | null; expandedId: string | null; runningId: string | null; copy: (entry: QueryHistoryEntry) => Promise; setExpandedId: (id: string | null) => void; onRerun?: (entry: QueryHistoryEntry) => void | Promise; onSavedChange?: (entry: QueryHistoryEntry, saved: boolean) => void; }) => { if (error) { return (

); } if (visibleEntries.length === 0) { const hasEntries = entries.length > 0; return (

{empty ?? ( )}

); } return (

copy(entry)} onExpandedChange={() => setExpandedId(expandedId === entry.id ? null : entry.id) } onRerun={onRerun ? () => onRerun(entry) : undefined} onSavedChange={ onSavedChange ? () => onSavedChange(entry, !entry.saved) : undefined } running={runningId === entry.id} /> ))}

); }; export const QueryHistory = ({ entries, query: queryProp, defaultQuery = "", onQueryChange, filter: filterProp, defaultFilter = "all", onFilterChange, expandedId: expandedIdProp, defaultExpandedId = null, onExpandedIdChange, onRerun, runningId: runningIdProp, onSavedChange, onCopy, isLoading = false, error = null, empty, label = "Query history", className, ...props }: QueryHistoryProps) => { const [query, setQuery] = useControllableValue({ defaultProp: defaultQuery, onChange: onQueryChange, prop: queryProp, }); const [filter, setFilter] = useControllableValue({ defaultProp: defaultFilter, onChange: onFilterChange, prop: filterProp, }); const [expandedId, setExpandedId] = useControllableValue({ defaultProp: defaultExpandedId, onChange: onExpandedIdChange, prop: expandedIdProp, }); const { copiedId, copy } = useCopyQuery(onCopy); const [internalRunningId, setInternalRunningId] = useState( null ); const runningId = runningIdProp === undefined ? internalRunningId : runningIdProp; const rerun = async (entry: QueryHistoryEntry) => { if (!onRerun) { return; } setInternalRunningId(entry.id); try { await onRerun(entry); } finally { setInternalRunningId(null); } }; const visibleEntries = useMemo(() => { const normalizedQuery = query.trim().toLocaleLowerCase(); return entries.filter((entry) => { const matchesFilter = filter === "all" || (filter === "saved" && entry.saved) || (filter === "failed" && entry.status === "error"); if (!matchesFilter) { return false; } if (!normalizedQuery) { return true; } return [entry.query, entry.database, entry.branch, entry.command] .filter(Boolean) .some((value) => value?.toLocaleLowerCase().includes(normalizedQuery)); }); }, [entries, filter, query]); if (isLoading) { return ( ); } return (

{label}

{entries.length.toLocaleString()} recorded

{visibleEntries.length}{" "} {visibleEntries.length === 1 ? "query" : "queries"} {query || filter !== "all" ? " shown" : " recorded"}.

); }; 53:T714,"use client"; import { useCallback, useEffect, useState } from "react"; import type { QueryHistoryEntry } from "@/components/query-history/query-history"; export interface UseQueryHistoryOptions { endpoint?: string; initialEntries?: QueryHistoryEntry[]; } export const useQueryHistory = ({ endpoint = "/api/query-history", initialEntries = [], }: UseQueryHistoryOptions = {}) => { const [entries, setEntries] = useState(initialEntries); const [isLoading, setIsLoading] = useState(initialEntries.length === 0); const [loadError, setLoadError] = useState(null); const refresh = useCallback( async (signal?: AbortSignal) => { setIsLoading(true); setLoadError(null); try { const response = await fetch(endpoint, { signal }); if (!response.ok) { throw new Error(`Could not load query history (${response.status}).`); } const payload = (await response.json()) as { entries: QueryHistoryEntry[]; }; setEntries(payload.entries); } catch (error) { if (error instanceof DOMException && error.name === "AbortError") { return; } setLoadError( error instanceof Error ? error : new Error("Could not load query history.") ); } finally { setIsLoading(false); } }, [endpoint] ); useEffect(() => { const controller = new AbortController(); let active = true; queueMicrotask(async () => { if (active) { await refresh(controller.signal); } }); return () => { active = false; controller.abort(); }; }, [refresh]); return { entries, error: loadError, isLoading, refresh, setEntries, }; }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}],["$","li","@codemirror/lang-sql",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Flang-sql","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/lang-sql"}]]}]}],["$","li","@lezer/highlight",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lezer%2Fhighlight","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@lezer/highlight"}]]}]}]]}],["$","$L50",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/skeleton.json","https://ui.neon.com/r/empty-state.json","https://ui.neon.com/r/tooltip.json","https://ui.neon.com/r/neon-tokens.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/query-history/query-history.tsx","content":"$52","type":"registry:component"},{"path":"src/components/query-history/use-query-history.ts","content":"$53","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]