@elizaos/app-core 2.0.0-alpha.73 → 2.0.0-alpha.75

package/components/DatabaseView.js

@@ -0,0 +1,311 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Database View — Supabase-style table browser + SQL editor.
+ *
+ * Two modes:
+ *  - Table browser: sidebar with schema tree, spreadsheet-like data grid
+ *  - SQL editor: code textarea with run button and results grid
+ */
+import { Badge, Button, Input, Textarea } from "@elizaos/ui";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { client, } from "../api";
+import { useApp } from "../state";
+/** Format a cell value for display. */
+function formatCell(val) {
+    if (val === null || val === undefined)
+        return "NULL";
+    if (typeof val === "boolean")
+        return val ? "true" : "false";
+    if (typeof val === "object") {
+        try {
+            return JSON.stringify(val);
+        }
+        catch {
+            return String(val);
+        }
+    }
+    return String(val);
+}
+/** Abbreviated type label for column badges. */
+function typeLabel(type) {
+    const t = type.toLowerCase();
+    if (t.includes("int"))
+        return "int";
+    if (t.includes("serial"))
+        return "serial";
+    if (t.includes("bool"))
+        return "bool";
+    if (t.includes("float") ||
+        t.includes("double") ||
+        t.includes("numeric") ||
+        t.includes("real"))
+        return "float";
+    if (t.includes("json"))
+        return "json";
+    if (t.includes("uuid"))
+        return "uuid";
+    if (t.includes("timestamp"))
+        return "time";
+    if (t.includes("date"))
+        return "date";
+    if (t.includes("text") || t.includes("char") || t.includes("varchar"))
+        return "text";
+    if (t.includes("vector"))
+        return "vector";
+    if (t.includes("bytea"))
+        return "bytes";
+    return type.slice(0, 6);
+}
+/** Color for column type badge. */
+function typeBadgeColor(type) {
+    const t = type.toLowerCase();
+    if (t.includes("int") ||
+        t.includes("serial") ||
+        t.includes("float") ||
+        t.includes("numeric") ||
+        t.includes("real") ||
+        t.includes("double"))
+        return "text-amber-400 bg-amber-400/10";
+    if (t.includes("bool"))
+        return "text-purple-400 bg-purple-400/10";
+    if (t.includes("json"))
+        return "text-orange-400 bg-orange-400/10";
+    if (t.includes("uuid"))
+        return "text-cyan-400 bg-cyan-400/10";
+    if (t.includes("timestamp") || t.includes("date"))
+        return "text-pink-400 bg-pink-400/10";
+    if (t.includes("text") || t.includes("char"))
+        return "text-green-400 bg-green-400/10";
+    if (t.includes("vector"))
+        return "text-blue-400 bg-blue-400/10";
+    return "text-[var(--muted)] bg-[var(--muted)]/10";
+}
+// ── Cell inspect popover ──────────────────────────────────────────────
+function CellPopover({ value, onClose, }) {
+    const { t } = useApp();
+    const ref = useRef(null);
+    useEffect(() => {
+        const handler = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                onClose();
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [onClose]);
+    return (_jsxs("div", { ref: ref, className: "fixed z-50 bg-card/60 backdrop-blur-md border border-border/40 shadow-[0_8px_30px_rgba(var(--accent),0.15)] rounded-xl p-4 max-w-[500px] max-h-[300px] overflow-auto", style: { top: "50%", left: "50%", transform: "translate(-50%, -50%)" }, children: [_jsxs("div", { className: "flex items-center justify-between mb-3 border-b border-border/40 pb-2", children: [_jsx("span", { className: "text-xs text-muted uppercase font-bold tracking-wider", children: t("databaseview.CellValue") }), _jsx(Button, { variant: "ghost", size: "icon", className: "w-6 h-6 rounded-full hover:bg-bg-hover hover:text-txt hover:shadow-[0_0_10px_rgba(var(--accent),0.2)] transition-all", onClick: onClose, children: "\u00D7" })] }), _jsx("pre", { className: "text-xs text-txt font-mono whitespace-pre-wrap break-all m-0 bg-bg/40 p-3 rounded-lg border border-border/40", children: value })] }));
+}
+// ── Results grid (shared between table browser and SQL editor) ─────────
+function ResultsGrid({ columns, rows, columnMeta, sortCol, sortDir, onSort, onCellClick, }) {
+    const { t } = useApp();
+    return (_jsx("div", { className: "overflow-auto border border-border/40 bg-card/40 backdrop-blur-md rounded-2xl shadow-inner", style: { maxHeight: "calc(100vh - 340px)" }, children: _jsxs("table", { className: "w-full border-collapse text-[12px] font-mono", children: [_jsx("thead", { className: "sticky top-0 z-10 backdrop-blur-xl bg-bg/80 border-b border-border/40 shadow-sm", children: _jsxs("tr", { children: [_jsx("th", { className: "w-[50px] min-w-[50px] px-3 py-2.5 text-[10px] text-muted font-medium text-right border-r border-border/40", children: "#" }), columns.map((col) => {
+                                const meta = columnMeta?.get(col);
+                                const isSorted = sortCol === col;
+                                return (_jsx("th", { className: "px-4 py-2.5 text-left border-r border-border/40 whitespace-nowrap cursor-pointer select-none hover:bg-bg-hover transition-colors group", onClick: () => onSort?.(col), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[11px] text-txt font-semibold group-hover:text-txt transition-colors", children: col }), meta && (_jsx(Badge, { variant: "outline", className: `text-[9px] px-1.5 py-0 border-none font-medium ${typeBadgeColor(meta.type)}`, children: typeLabel(meta.type) })), meta?.isPrimaryKey && (_jsx(Badge, { variant: "outline", className: "text-[9px] px-1.5 py-0 border-none font-bold text-yellow-400 bg-yellow-400/10 shadow-[0_0_8px_rgba(250,204,21,0.2)]", children: "PK" })), isSorted && (_jsx("span", { className: "text-[10px] text-[var(--accent)]", children: sortDir === "asc" ? "↑" : "↓" }))] }) }, col));
+                            })] }) }), _jsx("tbody", { children: rows.map((row, i) => (_jsxs("tr", { className: "border-b border-border/20 hover:bg-accent/10 transition-colors group", children: [_jsx("td", { className: "px-3 py-2 text-[10px] text-muted text-right border-r border-border/30 bg-bg/20 tabular-nums group-hover:text-txt/70 transition-colors", children: i + 1 }), columns.map((col) => {
+                                const raw = row[col];
+                                const display = formatCell(raw);
+                                const isNull = raw === null || raw === undefined;
+                                const isExpandable = display.length > 40 && !!onCellClick;
+                                return (_jsx("td", { className: "px-4 py-2 border-r border-border/20 max-w-[280px] truncate cursor-default transition-colors", title: display, onClick: () => {
+                                        if (isExpandable)
+                                            onCellClick(display);
+                                    }, onKeyDown: (e) => {
+                                        if (!isExpandable)
+                                            return;
+                                        if (e.key === "Enter" || e.key === " ") {
+                                            e.preventDefault();
+                                            onCellClick(display);
+                                        }
+                                    }, role: isExpandable ? "button" : undefined, tabIndex: isExpandable ? 0 : undefined, children: isNull ? (_jsx("span", { className: "text-[var(--muted)] italic opacity-50", children: t("databaseview.NULL") })) : (_jsx("span", { className: "text-[var(--txt)]", children: display })) }, col));
+                            })] }, JSON.stringify(row)))) })] }) }));
+}
+// ── Pagination bar ────────────────────────────────────────────────────
+function PaginationBar({ total, offset, limit, onPrev, onNext, }) {
+    const { t } = useApp();
+    const start = offset + 1;
+    const end = Math.min(offset + limit, total);
+    const hasPrev = offset > 0;
+    const hasNext = offset + limit < total;
+    return (_jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-t border-border/40 bg-card/60 backdrop-blur-md rounded-b-2xl text-[11px] text-muted", children: [_jsxs("span", { className: "font-medium", children: [total.toLocaleString(), " ", t("databaseview.row"), total !== 1 ? "s" : "", total > 0 && ` · showing ${start}-${end}`] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[1.75rem] py-1 whitespace-normal break-words text-left text-[11px] rounded-lg border-border/50 hover:border-accent hover:text-txt hover:shadow-[0_0_10px_rgba(var(--accent),0.2)] transition-all bg-bg/50 backdrop-blur-sm", disabled: !hasPrev, onClick: onPrev, children: t("databaseview.Prev") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[1.75rem] py-1 whitespace-normal break-words text-left text-[11px] rounded-lg border-border/50 hover:border-accent hover:text-txt hover:shadow-[0_0_10px_rgba(var(--accent),0.2)] transition-all bg-bg/50 backdrop-blur-sm", disabled: !hasNext, onClick: onNext, children: t("databaseview.Next") })] })] }));
+}
+// ── Main component ────────────────────────────────────────────────────
+export function DatabaseView() {
+    const { t } = useApp();
+    const [dbStatus, setDbStatus] = useState(null);
+    const [tables, setTables] = useState([]);
+    const [selectedTable, setSelectedTable] = useState("");
+    const [tableData, setTableData] = useState(null);
+    const [columnMeta, setColumnMeta] = useState(new Map());
+    const [view, setView] = useState("tables");
+    const [loading, setLoading] = useState(false);
+    const [errorMessage, setErrorMessage] = useState("");
+    const [sidebarSearch, setSidebarSearch] = useState("");
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [sortCol, setSortCol] = useState("");
+    const [sortDir, setSortDir] = useState(null);
+    const [rowOffset, setRowOffset] = useState(0);
+    const [cellInspect, setCellInspect] = useState(null);
+    // SQL editor state
+    const [queryText, setQueryText] = useState("");
+    const [queryResult, setQueryResult] = useState(null);
+    const [queryLoading, setQueryLoading] = useState(false);
+    const [queryHistory, setQueryHistory] = useState([]);
+    const ROW_LIMIT = 50;
+    const loadStatus = useCallback(async () => {
+        try {
+            const status = await client.getDatabaseStatus();
+            setDbStatus(status);
+            return status;
+        }
+        catch {
+            return null;
+        }
+    }, []);
+    const loadTables = useCallback(async () => {
+        setLoading(true);
+        setErrorMessage("");
+        try {
+            const { tables: t } = await client.getDatabaseTables();
+            setTables(t);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : "error";
+            // Don't show error if database is simply not connected (cloud mode, agent not running)
+            if (!msg.includes("Database not available")) {
+                setErrorMessage(`Failed to load tables: ${msg}`);
+            }
+        }
+        setLoading(false);
+    }, []);
+    const loadTableData = useCallback(async (tableName, opts) => {
+        setLoading(true);
+        setErrorMessage("");
+        try {
+            const data = await client.getDatabaseRows(tableName, {
+                limit: ROW_LIMIT,
+                offset: opts?.offset ?? 0,
+                sort: opts?.sort,
+                order: opts?.order,
+            });
+            setTableData(data);
+            setSelectedTable(tableName);
+            // Get column metadata for the table
+            const info = tables.find((t) => t.name === tableName);
+            if (info?.columns) {
+                const meta = new Map();
+                for (const col of info.columns)
+                    meta.set(col.name, col);
+                setColumnMeta(meta);
+            }
+        }
+        catch (err) {
+            setErrorMessage(`Failed to load table: ${err instanceof Error ? err.message : "error"}`);
+        }
+        setLoading(false);
+    }, [tables]);
+    const handleSort = useCallback((col) => {
+        let newDir;
+        if (sortCol !== col) {
+            newDir = "asc";
+        }
+        else if (sortDir === "asc") {
+            newDir = "desc";
+        }
+        else {
+            newDir = null;
+        }
+        setSortCol(newDir ? col : "");
+        setSortDir(newDir);
+        setRowOffset(0);
+        if (selectedTable) {
+            loadTableData(selectedTable, {
+                sort: newDir ? col : undefined,
+                order: newDir ?? undefined,
+                offset: 0,
+            });
+        }
+    }, [sortCol, sortDir, selectedTable, loadTableData]);
+    const handleSelectTable = useCallback((tableName) => {
+        setSortCol("");
+        setSortDir(null);
+        setRowOffset(0);
+        loadTableData(tableName);
+    }, [loadTableData]);
+    const handlePrev = useCallback(() => {
+        const newOffset = Math.max(0, rowOffset - ROW_LIMIT);
+        setRowOffset(newOffset);
+        loadTableData(selectedTable, {
+            sort: sortDir ? sortCol : undefined,
+            order: sortDir ?? undefined,
+            offset: newOffset,
+        });
+    }, [rowOffset, selectedTable, sortCol, sortDir, loadTableData]);
+    const handleNext = useCallback(() => {
+        const newOffset = rowOffset + ROW_LIMIT;
+        setRowOffset(newOffset);
+        loadTableData(selectedTable, {
+            sort: sortDir ? sortCol : undefined,
+            order: sortDir ?? undefined,
+            offset: newOffset,
+        });
+    }, [rowOffset, selectedTable, sortCol, sortDir, loadTableData]);
+    const runQuery = useCallback(async () => {
+        if (!queryText.trim())
+            return;
+        setQueryLoading(true);
+        setErrorMessage("");
+        try {
+            const result = await client.executeDatabaseQuery(queryText);
+            setQueryResult(result);
+            setQueryHistory((prev) => {
+                const next = [queryText, ...prev.filter((q) => q !== queryText)];
+                return next.slice(0, 20);
+            });
+        }
+        catch (err) {
+            setErrorMessage(`Query failed: ${err instanceof Error ? err.message : "error"}`);
+        }
+        setQueryLoading(false);
+    }, [queryText]);
+    useEffect(() => {
+        const init = async () => {
+            const status = await loadStatus();
+            if (status?.connected) {
+                await loadTables();
+            }
+        };
+        void init();
+    }, [loadStatus, loadTables]);
+    const filteredTables = tables.filter((t) => !sidebarSearch ||
+        t.name.toLowerCase().includes(sidebarSearch.toLowerCase()));
+    return (_jsxs("div", { className: "flex flex-col h-full gap-4", children: [_jsxs("div", { className: "flex items-center gap-3 p-3 bg-card/60 backdrop-blur-xl border border-border/40 rounded-2xl shadow-sm", children: [_jsx("div", { className: "flex items-center gap-2 text-xs text-muted font-medium bg-bg/50 px-3 py-1.5 rounded-lg border border-border/30", children: dbStatus ? (_jsxs(_Fragment, { children: [_jsx("span", { className: `w-2 h-2 rounded-full shadow-[0_0_8px_currentColor] ${dbStatus.connected ? "text-green-400 bg-green-400" : "text-red-400 bg-red-400"}` }), _jsx("span", { className: "tracking-wide", children: dbStatus.provider }), _jsx("span", { className: "opacity-40", children: "\u00B7" }), _jsxs("span", { children: [dbStatus.tableCount, " ", t("databaseview.tables")] })] })) : (_jsx("span", { children: t("databaseview.Connecting") })) }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex p-1 bg-bg/50 backdrop-blur-md border border-border/40 rounded-xl shadow-inner gap-1", children: [_jsx(Button, { variant: view === "tables" ? "default" : "ghost", size: "sm", className: `h-auto min-h-[1.75rem] px-4 py-1 whitespace-normal break-words text-left text-xs font-medium rounded-lg transition-all duration-300 ${view === "tables"
+                                    ? "bg-accent text-accent-fg shadow-[0_0_15px_rgba(var(--accent),0.4)] border border-accent/50 scale-105"
+                                    : "text-muted hover:text-txt hover:bg-bg-hover hover:border-border/50"}`, onClick: () => setView("tables"), children: t("databaseview.TableEditor") }), _jsx(Button, { variant: view === "query" ? "default" : "ghost", size: "sm", className: `h-auto min-h-[1.75rem] px-4 py-1 whitespace-normal break-words text-left text-xs font-medium rounded-lg transition-all duration-300 ${view === "query"
+                                    ? "bg-accent text-accent-fg shadow-[0_0_15px_rgba(var(--accent),0.4)] border border-accent/50 scale-105"
+                                    : "text-muted hover:text-txt hover:bg-bg-hover hover:border-border/50"}`, onClick: () => setView("query"), children: t("databaseview.SQLEditor") })] }), _jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[2.25rem] whitespace-normal break-words px-4 py-1.5 text-xs font-medium rounded-xl border-border/50 hover:border-accent hover:text-txt transition-all duration-300 bg-bg/50 backdrop-blur-md shadow-sm hover:shadow-[0_0_15px_rgba(var(--accent),0.3)]", onClick: async () => {
+                            const status = await loadStatus();
+                            if (status?.connected) {
+                                await loadTables();
+                            }
+                        }, children: t("databaseview.Refresh") })] }), dbStatus && !dbStatus.connected && (_jsxs("div", { className: "p-4 border border-border/40 bg-card/60 backdrop-blur-md rounded-2xl text-muted text-sm shadow-sm", children: [_jsx("p", { className: "m-0 mb-2 font-medium text-txt tracking-wide", children: t("databaseview.DatabaseNotAvailab") }), _jsx("p", { className: "m-0 text-xs", children: t("databaseview.TheDatabaseViewer") })] })), errorMessage && (_jsxs("div", { className: "p-3 border border-danger/50 bg-danger/10 text-danger text-sm rounded-xl mb-2 flex items-center justify-between shadow-[0_0_15px_rgba(231,76,60,0.15)] backdrop-blur-md", children: [_jsx("span", { className: "font-medium tracking-wide", children: errorMessage }), _jsx(Button, { variant: "ghost", size: "icon", className: "w-6 h-6 rounded-full text-danger hover:bg-danger/20 hover:text-danger-foreground transition-colors", onClick: () => setErrorMessage(""), children: "\u00D7" })] })), view === "tables" ? (
+            /* ── Table Editor ──────────────────────────────────────── */
+            _jsxs("div", { className: "flex flex-1 min-h-0 gap-4", children: [_jsx("div", { className: `flex-shrink-0 border border-border/40 bg-card/60 backdrop-blur-xl rounded-2xl transition-all overflow-hidden flex flex-col shadow-sm ${sidebarCollapsed ? "w-0 opacity-0 border-none m-0" : "w-[220px]"}`, children: _jsxs("div", { className: "p-3 flex flex-col h-full gap-3", children: [_jsx("div", { className: "relative", children: _jsx(Input, { type: "text", placeholder: t("databaseview.FilterTables"), value: sidebarSearch, onChange: (e) => setSidebarSearch(e.target.value), className: "w-full h-9 rounded-xl border-border/50 bg-bg/50 backdrop-blur-sm text-xs focus-visible:ring-accent/50 focus-visible:border-accent pr-8 shadow-inner" }) }), _jsxs("div", { className: "text-[10px] text-muted uppercase font-bold tracking-widest px-2 bg-black/10 py-1.5 rounded-lg border border-white/5 inline-flex items-center shadow-inner", children: [t("databaseview.Tables"), " (", filteredTables.length, ")"] }), loading && tables.length === 0 ? (_jsx("div", { className: "text-xs text-muted px-2 py-4 italic text-center opacity-70", children: t("databaseview.Loading") })) : (_jsx("div", { className: "flex flex-col gap-1 flex-1 overflow-auto pr-1 custom-scrollbar", children: filteredTables.map((t) => (_jsxs(Button, { variant: selectedTable === t.name ? "secondary" : "ghost", onClick: () => handleSelectTable(t.name), className: `justify-start h-8 px-3 text-xs w-full transition-all duration-300 rounded-xl ${selectedTable === t.name
+                                            ? "bg-accent/20 text-txt font-semibold border border-accent/30 shadow-[0_0_10px_rgba(var(--accent),0.1)] translate-x-1"
+                                            : "text-muted hover:text-txt hover:bg-bg-hover hover:translate-x-0.5"}`, children: [_jsx("span", { className: "truncate flex-1 text-left", children: t.name }), _jsx(Badge, { variant: "outline", className: "text-[9px] px-1.5 py-0 h-4 border-white/10 bg-black/20 text-muted-foreground ml-2 tabular-nums", children: t.rowCount })] }, t.name))) }))] }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "flex-shrink-0 w-6 h-12 flex items-center justify-center rounded-xl bg-card/40 backdrop-blur-sm border border-border/40 my-auto shadow-sm text-muted hover:text-txt hover:bg-bg-hover hover:border-accent/40 transition-all hover:scale-110", onClick: () => setSidebarCollapsed(!sidebarCollapsed), title: sidebarCollapsed
+                            ? t("databaseview.showSidebar", {
+                                defaultValue: "Show sidebar",
+                            })
+                            : t("databaseview.hideSidebar", {
+                                defaultValue: "Hide sidebar",
+                            }), children: sidebarCollapsed ? (_jsx(ChevronRight, { className: "w-3.5 h-3.5" })) : (_jsx(ChevronLeft, { className: "w-3.5 h-3.5" })) }), _jsx("div", { className: "flex-1 min-w-0 flex flex-col bg-card/40 backdrop-blur-xl border border-border/40 rounded-2xl shadow-sm overflow-hidden p-2", children: !selectedTable ? (_jsx("div", { className: "flex-1 flex items-center justify-center", children: _jsxs("div", { className: "text-center p-8 border border-white/5 bg-black/10 rounded-3xl shadow-inner backdrop-blur-md", children: [_jsx("div", { className: "text-muted text-base font-medium mb-2 tracking-wide", children: t("databaseview.SelectATable") }), _jsx("div", { className: "text-muted text-xs opacity-60 tracking-wider uppercase", children: t("databaseview.ChooseATableFrom") })] }) })) : loading && !tableData ? (_jsx("div", { className: "flex-1 flex items-center justify-center font-medium text-muted text-sm italic tracking-widest animate-pulse", children: t("databaseview.Loading") })) : tableData ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-3 px-3 py-2 text-xs mb-2 bg-bg/40 rounded-xl border border-border/30", children: [_jsx("span", { className: "text-txt font-semibold tracking-wide", children: selectedTable }), columnMeta.size > 0 && (_jsxs(Badge, { variant: "outline", className: "text-[10px] text-muted border-white/10 bg-black/20 font-medium", children: [columnMeta.size, " ", t("databaseview.columns")] }))] }), _jsx("div", { className: "flex-1 min-h-0", children: tableData.rows.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-full border border-border/40 bg-card/40 rounded-t-2xl", children: _jsx("div", { className: "text-muted text-sm p-6 bg-black/10 rounded-2xl border border-white/5 shadow-inner backdrop-blur-md font-medium tracking-wide", children: t("databaseview.TableIsEmpty") }) })) : (_jsx(ResultsGrid, { columns: tableData.columns, rows: tableData.rows, columnMeta: columnMeta, sortCol: sortCol, sortDir: sortDir, onSort: handleSort, onCellClick: (v) => setCellInspect(v) })) }), _jsx(PaginationBar, { total: tableData.total, offset: rowOffset, limit: ROW_LIMIT, onPrev: handlePrev, onNext: handleNext })] })) : null })] })) : (
+            /* ── SQL Editor ────────────────────────────────────────── */
+            _jsxs("div", { className: "flex flex-col flex-1 min-h-0 gap-4", children: [_jsxs("div", { className: "flex flex-col bg-card/60 backdrop-blur-xl border border-border/40 rounded-2xl p-4 shadow-sm", children: [_jsxs("div", { className: "relative group", children: [_jsx("div", { className: "absolute -inset-[1px] bg-gradient-to-r from-accent/0 via-accent/30 to-accent/0 rounded-2xl opacity-0 group-focus-within:opacity-100 blur transition-opacity duration-500" }), _jsx(Textarea, { value: queryText, onChange: (e) => setQueryText(e.target.value), onKeyDown: (e) => {
+                                            if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                                                e.preventDefault();
+                                                runQuery();
+                                            }
+                                        }, placeholder: t("databaseview.SELECTFROMMemori"), rows: 6, className: "w-full relative bg-bg/80 backdrop-blur-md border-border/50 text-txt text-sm font-mono resize-y leading-relaxed rounded-xl focus-visible:ring-accent focus-visible:border-accent custom-scrollbar shadow-inner", spellCheck: false })] }), _jsxs("div", { className: "flex items-center gap-3 mt-3", children: [_jsx(Button, { variant: "default", size: "sm", className: "px-6 h-auto min-h-[2.25rem] whitespace-normal break-words text-left py-1.5 text-xs font-bold rounded-xl bg-accent text-accent-fg hover:opacity-90 disabled:opacity-40 shadow-[0_0_15px_rgba(var(--accent),0.4)] transition-all hover:scale-[1.02]", disabled: queryLoading || !queryText.trim(), onClick: runQuery, children: queryLoading
+                                            ? t("common.running", { defaultValue: "Running..." })
+                                            : t("databaseview.runQuery", { defaultValue: "Run Query" }) }), _jsxs("kbd", { className: "text-[10px] text-muted font-mono bg-bg/50 px-2 py-1 rounded-md border border-border/30 shadow-inner tracking-wider", children: [navigator.platform.includes("Mac") ? "⌘" : "Ctrl", " ", t("databaseview.Enter")] }), queryResult && (_jsxs("div", { className: "text-xs text-muted ml-auto bg-black/10 px-3 py-1.5 rounded-lg border border-white/5 font-medium shadow-inner tracking-wide", children: [_jsx("span", { className: "text-txt", children: queryResult.rowCount }), " ", t("databaseview.row"), queryResult.rowCount !== 1 ? "s" : "", " \u00B7", " ", _jsxs("span", { className: "text-txt", children: [queryResult.durationMs, "ms"] })] }))] })] }), queryHistory.length > 0 && !queryResult && (_jsxs("div", { className: "border border-border/40 bg-card/40 backdrop-blur-xl rounded-2xl shadow-sm overflow-hidden", children: [_jsx("div", { className: "px-4 py-2.5 text-[10px] text-muted uppercase font-bold tracking-widest bg-bg/60 border-b border-border/40 shadow-inner", children: t("databaseview.RecentQueries") }), _jsx("div", { className: "flex flex-col", children: queryHistory.slice(0, 5).map((q) => (_jsx(Button, { variant: "ghost", className: "w-full px-4 py-3 h-auto justify-start text-[11px] font-mono text-txt text-left rounded-none border-b border-border/20 hover:bg-accent/10 hover:text-txt transition-colors truncate", onClick: () => setQueryText(q), children: _jsx("span", { className: "truncate opacity-80 group-hover:opacity-100", children: q }) }, q))) })] })), queryResult && queryResult.rows.length > 0 && (_jsx("div", { className: "flex-1 min-h-0", children: _jsx(ResultsGrid, { columns: queryResult.columns, rows: queryResult.rows, onCellClick: (v) => setCellInspect(v) }) })), queryResult && queryResult.rows.length === 0 && (_jsx("div", { className: "flex items-center justify-center p-8 border border-border/40 bg-card/60 backdrop-blur-xl rounded-2xl shadow-sm text-muted text-sm tracking-wide font-medium", children: _jsx("div", { className: "px-6 py-4 bg-black/10 shadow-inner rounded-xl border border-white/5", children: t("databaseview.QueryReturnedNoRo") }) }))] })), cellInspect !== null && (_jsx(CellPopover, { value: cellInspect, onClose: () => setCellInspect(null) }))] }));
+}

package/components/ElizaCloudDashboard.d.ts

@@ -0,0 +1,2 @@
+export declare function CloudDashboard(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ElizaCloudDashboard.d.ts.map

package/components/ElizaCloudDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElizaCloudDashboard.d.ts","sourceRoot":"","sources":["../../src/components/ElizaCloudDashboard.tsx"],"names":[],"mappings":"AAqUA,wBAAgB,cAAc,4CAwuC7B"}