@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/pages/DatabaseView.js

@@ -0,0 +1,247 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Input, MetaPill, PageLayout, PagePanel, SegmentedControl, SidebarContent, SidebarHeader, SidebarPanel, SidebarScrollRegion, } from "@elizaos/ui";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client, } from "../../api/index.js";
+import { useApp } from "../../state/index.js";
+import { AppPageSidebar } from "../shared/AppPageSidebar.js";
+import { CellPopover, PaginationBar, ResultsGrid, } from "./database-utils.js";
+import { SqlEditorPanel } from "./SqlEditorPanel.js";
+export function DatabaseView({ leftNav, contentHeader, }) {
+    const { t } = useApp();
+    const showExternalSidebar = Boolean(leftNav);
+    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(t("databaseview.FailedToLoadTables", {
+                    message: msg,
+                    defaultValue: "Failed to load tables: {{message}}",
+                }));
+            }
+        }
+        setLoading(false);
+    }, [t]);
+    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(t("databaseview.FailedToLoadTable", {
+                message: err instanceof Error ? err.message : "error",
+                defaultValue: "Failed to load table: {{message}}",
+            }));
+        }
+        setLoading(false);
+    }, [t, 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(t("databaseview.QueryFailed", {
+                message: err instanceof Error ? err.message : "error",
+                defaultValue: "Query failed: {{message}}",
+            }));
+        }
+        setQueryLoading(false);
+    }, [queryText, t]);
+    useEffect(() => {
+        const init = async () => {
+            const status = await loadStatus();
+            if (status?.connected) {
+                await loadTables();
+            }
+        };
+        void init();
+    }, [loadStatus, loadTables]);
+    const filteredTables = useMemo(() => tables.filter((t) => !sidebarSearch ||
+        t.name.toLowerCase().includes(sidebarSearch.toLowerCase())), [tables, sidebarSearch]);
+    const viewToggle = (_jsx(SegmentedControl, { value: view, onValueChange: (v) => setView(v), items: [
+            { value: "tables", label: t("databaseview.TableEditor") },
+            { value: "query", label: t("databaseview.SQLEditor") },
+        ], "aria-label": t("databaseview.EditorModes", {
+            defaultValue: "Database editor modes",
+        }), buttonClassName: "h-10 flex-1" }));
+    const sidebarSummary = (_jsxs(PagePanel.SummaryCard, { className: "mt-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-txt", children: [_jsx("span", { className: `h-2.5 w-2.5 rounded-full ${dbStatus?.connected
+                            ? "bg-ok shadow-[0_0_8px_rgba(34,197,94,0.5)]"
+                            : "bg-danger"}` }), _jsx("span", { children: dbStatus?.provider ?? t("game.connecting") })] }), _jsxs("div", { className: "mt-3 flex flex-wrap gap-2 text-2xs font-semibold uppercase tracking-[0.14em] text-muted/75", children: [_jsxs(MetaPill, { children: [tables.length, " ", t("databaseview.tables")] }), _jsx(MetaPill, { children: view === "tables"
+                            ? t("databaseview.TableEditor")
+                            : t("databaseview.SQLEditor") }), selectedTable ? (_jsx("span", { className: "rounded-full border border-accent/25 bg-accent/8 px-2.5 py-1 text-accent", children: selectedTable })) : null] })] }));
+    const refreshButton = (_jsx(Button, { variant: "outline", size: "sm", className: "h-10 w-full justify-start rounded-2xl px-4 text-xs font-semibold border border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] text-muted-strong shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_14px_20px_-18px_rgba(15,23,42,0.14)] backdrop-blur-md transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-border/46 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] hover:text-txt hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_16px_22px_-18px_rgba(15,23,42,0.16)] active:scale-95 disabled:hover:border-border/32 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] disabled:hover:text-muted-strong dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_16px_24px_-20px_rgba(0,0,0,0.24)]", onClick: async () => {
+            const status = await loadStatus();
+            if (status?.connected) {
+                await loadTables();
+            }
+        }, children: t("common.refresh") }));
+    // Shared SQL editor props
+    const sqlEditorProps = {
+        queryText,
+        setQueryText,
+        queryResult,
+        queryLoading,
+        runQuery,
+        queryHistory,
+        onCellClick: (v) => setCellInspect(v),
+    };
+    if (showExternalSidebar) {
+        const dbSidebar = (_jsxs(AppPageSidebar, { testId: "database-sidebar", collapsible: true, contentIdentity: "database", collapsedRailItems: filteredTables.map((table) => (_jsx(SidebarContent.RailItem, { "aria-label": table.name, title: table.name, active: selectedTable === table.name, onClick: () => handleSelectTable(table.name), children: table.name.slice(0, 1).toUpperCase() }, table.name))), children: [_jsx(SidebarHeader, { search: {
+                        value: sidebarSearch,
+                        onChange: (e) => setSidebarSearch(e.target.value),
+                        placeholder: t("databaseview.FilterTables"),
+                        "aria-label": t("databaseview.FilterTables"),
+                        onClear: () => setSidebarSearch(""),
+                    } }), _jsxs(SidebarPanel, { children: [_jsxs("div", { className: "space-y-3 pt-1", children: [leftNav, viewToggle, sidebarSummary, refreshButton] }), _jsx("div", { className: "mt-4 h-px bg-border/30" }), view === "tables" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-3 pt-4", children: _jsxs("div", { className: "text-2xs text-muted uppercase font-bold tracking-widest px-2 bg-bg/50 py-1.5 rounded-lg border border-border/30 inline-flex items-center shadow-inner", children: [t("databaseview.Tables"), " (", filteredTables.length, ")"] }) }), _jsx(SidebarScrollRegion, { className: "mt-3 space-y-1.5", children: loading && tables.length === 0 ? (_jsx(PagePanel, { variant: "inset", className: "rounded-2xl px-3 py-4 text-center text-xs text-muted", children: t("appsview.Loading") })) : (filteredTables.map((table) => (_jsxs(SidebarContent.Item, { active: selectedTable === table.name, onClick: () => handleSelectTable(table.name), className: "gap-2", children: [_jsx(SidebarContent.ItemIcon, { active: selectedTable === table.name, children: table.name.slice(0, 1).toUpperCase() }), _jsxs(SidebarContent.ItemBody, { children: [_jsx(SidebarContent.ItemTitle, { children: table.name }), _jsx(SidebarContent.ItemDescription, { children: t("databaseview.RowCountLabel", {
+                                                            count: (table.rowCount ?? 0).toLocaleString(),
+                                                            defaultValue: "{{count}} rows",
+                                                        }) })] })] }, table.name)))) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-3 pt-4", children: _jsx(PagePanel, { variant: "inset", className: "rounded-2xl px-3 py-3 text-xs-tight text-muted", children: t("databaseview.QueryWorkspaceInfo", {
+                                            defaultValue: "Write ad-hoc queries and inspect results without leaving the database workspace.",
+                                        }) }) }), queryHistory.length > 0 ? (_jsxs(SidebarScrollRegion, { className: "mt-3 space-y-1.5", children: [_jsx("div", { className: "text-2xs text-muted uppercase tracking-[0.16em]", children: t("databaseview.RecentQueries") }), queryHistory.slice(0, 8).map((q) => (_jsx(Button, { variant: "ghost", className: "h-auto w-full justify-start rounded-2xl px-3 py-2 text-left text-xs-tight font-mono border border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] text-muted-strong shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_14px_20px_-18px_rgba(15,23,42,0.14)] backdrop-blur-md transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-border/46 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] hover:text-txt hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_16px_22px_-18px_rgba(15,23,42,0.16)] active:scale-95 disabled:hover:border-border/32 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] disabled:hover:text-muted-strong dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_16px_24px_-20px_rgba(0,0,0,0.24)]", onClick: () => setQueryText(q), children: _jsx("span", { className: "truncate", children: q }) }, q)))] })) : null] }))] })] }));
+        return (_jsxs(PageLayout, { "data-testid": "database-view", sidebar: dbSidebar, contentHeader: contentHeader, contentInnerClassName: "w-full min-h-0", children: [_jsxs("div", { className: "flex min-h-0 flex-1 flex-col w-full", children: [errorMessage ? (_jsx("div", { className: "mb-4 rounded-xl border border-danger/35 bg-danger/10 px-4 py-3 text-sm text-danger", children: errorMessage })) : null, dbStatus && !dbStatus.connected ? (_jsxs("div", { className: "w-full", children: [_jsxs(PagePanel, { variant: "surface", as: "section", className: "px-5 py-5 sm:px-6", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted", children: t("common.database") }), _jsx("h1", { className: "mt-1 text-2xl font-semibold text-txt-strong", children: t("databaseview.TableBrowser") })] }), _jsx(PagePanel.Empty, { variant: "surface", className: "mt-4 min-h-[18rem] rounded-3xl px-5 py-10", title: t("databaseview.DatabaseNotAvailab"), description: t("databaseview.TheDatabaseViewer") })] })) : view === "tables" ? (_jsx("div", { className: "w-full", children: !selectedTable ? (_jsxs(_Fragment, { children: [_jsxs(PagePanel, { variant: "surface", as: "section", className: "px-5 py-5 sm:px-6", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted", children: t("common.database") }), _jsx("h1", { className: "mt-1 text-2xl font-semibold text-txt-strong", children: t("databaseview.TableBrowser") })] }), _jsx(PagePanel.Empty, { variant: "surface", className: "mt-4 min-h-[18rem] rounded-3xl px-5 py-10", title: t("databaseview.SelectATable"), description: t("databaseview.ChooseATableFrom") })] })) : loading && !tableData ? (_jsx(PagePanel, { variant: "surface", className: "flex flex-1 items-center justify-center px-6 py-10 text-sm font-medium italic text-muted", children: t("appsview.Loading") })) : tableData ? (_jsxs(_Fragment, { children: [_jsx(PagePanel, { variant: "surface", as: "section", className: "px-5 py-5 sm:px-6", children: _jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted", children: t("common.database") }), _jsx("h1", { className: "mt-1 text-2xl font-semibold text-txt-strong", children: selectedTable })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [columnMeta.size > 0 && (_jsxs(MetaPill, { children: [columnMeta.size, " ", t("databaseview.columns")] })), _jsxs(MetaPill, { children: [tableData.total.toLocaleString(), " ", t("common.rows")] })] })] }) }), _jsxs(PagePanel, { variant: "surface", className: "mt-4 flex flex-1 min-h-0 flex-col overflow-hidden p-3", children: [_jsx("div", { className: "flex-1 min-h-0", children: tableData.rows.length === 0 ? (_jsx(PagePanel.Empty, { className: "min-h-[14rem]", title: t("databaseview.TableIsEmpty"), description: t("databaseview.EmptyTableDescription") })) : (_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 })) : (_jsx("div", { className: "w-full", children: _jsx(SqlEditorPanel, { ...sqlEditorProps, showHistory: false }) }))] }), cellInspect !== null && (_jsx(CellPopover, { value: cellInspect, onClose: () => setCellInspect(null) }))] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col h-full gap-4", children: [!showExternalSidebar && (_jsxs("div", { className: "flex items-center gap-3 p-3 bg-card/60 backdrop-blur-xl border border-border/40 rounded-2xl shadow-sm flex-wrap", 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: `h-2 w-2 rounded-full shadow-[0_0_8px_currentColor] ${dbStatus.connected ? "bg-ok text-ok" : "bg-danger text-danger"}` }), _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("game.connecting") })) }), _jsx("div", { className: "flex-1" }), !showExternalSidebar && viewToggle, _jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[2.25rem] whitespace-normal break-words rounded-xl border-border/50 bg-bg/50 px-4 py-1.5 text-xs font-medium backdrop-blur-md shadow-sm transition-[border-color,color,transform,box-shadow] duration-300 hover:border-accent hover:text-txt hover:shadow-[0_0_15px_rgba(var(--accent-rgb),0.3)]", onClick: async () => {
+                            const status = await loadStatus();
+                            if (status?.connected) {
+                                await loadTables();
+                            }
+                        }, children: t("common.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" ? (_jsxs("div", { className: "flex flex-1 min-h-0 gap-4", children: [(showExternalSidebar || !sidebarCollapsed) && (_jsx("aside", { className: `overflow-hidden rounded-2xl border shadow-sm flex min-h-0 w-full shrink-0 flex-col overflow-hidden bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_76%,transparent),color-mix(in_srgb,var(--bg-muted)_97%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),inset_-1px_0_0_rgba(255,255,255,0.03)] backdrop-blur-md dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),inset_-1px_0_0_rgba(255,255,255,0.02)] ${showExternalSidebar
+                            ? "w-[21rem] max-w-[352px] shrink-0"
+                            : "w-[220px] flex-shrink-0"}`, children: _jsxs("div", { className: showExternalSidebar
+                                ? "flex min-h-0 flex-1 flex-col px-3 pb-4 pt-3"
+                                : "p-3 flex flex-col h-full gap-3", children: [showExternalSidebar && (_jsxs(_Fragment, { children: [sidebarSummary, _jsxs("div", { className: "space-y-3 pt-4", children: [viewToggle, leftNav, _jsx(Button, { variant: "outline", size: "sm", className: "h-10 w-full justify-start rounded-xl px-4 text-xs font-semibold shadow-sm", onClick: async () => {
+                                                        const status = await loadStatus();
+                                                        if (status?.connected) {
+                                                            await loadTables();
+                                                        }
+                                                    }, children: t("common.refresh") })] }), _jsx("div", { className: "h-px bg-border/30" })] })), _jsx("div", { className: "relative", children: _jsx(Input, { type: "text", placeholder: t("databaseview.FilterTables"), value: sidebarSearch, onChange: (e) => setSidebarSearch(e.target.value), className: "w-full pr-8 text-xs h-10 rounded-xl border-border/34 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] text-sm shadow-[inset_0_1px_0_rgba(255,255,255,0.12),0_14px_20px_-20px_rgba(15,23,42,0.12)] focus-visible:border-accent/28 focus-visible:ring-1 focus-visible:ring-accent/24 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_16px_22px_-20px_rgba(0,0,0,0.22)]" }) }), _jsxs("div", { className: "text-2xs text-muted uppercase font-bold tracking-widest px-2 bg-bg/50 py-1.5 rounded-lg border border-border/30 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("appsview.Loading") })) : (_jsx(SidebarScrollRegion, { className: `flex flex-col gap-1 flex-1 pr-1 ${showExternalSidebar
+                                        ? ""
+                                        : "overflow-auto custom-scrollbar"}`, children: filteredTables.map((t) => (_jsxs(SidebarContent.Item, { active: selectedTable === t.name, onClick: () => handleSelectTable(t.name), className: "gap-2", children: [_jsx(SidebarContent.ItemIcon, { active: selectedTable === t.name, children: t.name.slice(0, 1).toUpperCase() }), _jsxs(SidebarContent.ItemBody, { children: [_jsx(SidebarContent.ItemTitle, { children: t.name }), _jsxs(SidebarContent.ItemDescription, { children: [(t.rowCount ?? 0).toLocaleString(), " rows"] })] })] }, t.name))) }))] }) })), !showExternalSidebar && (_jsx(Button, { variant: "ghost", size: "icon", className: "my-auto flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-2xl border border-border/40 bg-card/50 shadow-sm text-muted transition-all hover:border-accent/40 hover:bg-bg-hover hover:text-txt", 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 min-w-0 flex-1 w-full flex-col bg-bg/10", children: !selectedTable ? (_jsxs("div", { className: "w-full", children: [_jsxs(PagePanel, { variant: "surface", as: "section", className: "px-5 py-5 sm:px-6", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted", children: t("common.database") }), _jsx("div", { className: "mt-1 text-2xl font-semibold text-txt-strong", children: t("databaseview.TableBrowser") })] }), _jsx(PagePanel.Empty, { variant: "surface", className: "mt-4 min-h-[18rem] rounded-3xl px-5 py-10", title: t("databaseview.SelectATable"), description: t("databaseview.ChooseATableFrom") })] })) : loading && !tableData ? (_jsx(PagePanel, { variant: "surface", className: "flex flex-1 items-center justify-center px-6 py-10 text-sm font-medium italic text-muted", children: t("appsview.Loading") })) : tableData ? (_jsxs(_Fragment, { children: [_jsx(PagePanel, { variant: "surface", as: "section", className: "px-5 py-5 sm:px-6", children: _jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted", children: t("common.database") }), _jsx("div", { className: "mt-1 text-2xl font-semibold text-txt-strong", children: selectedTable }), _jsx("div", { className: "mt-2 max-w-2xl text-sm leading-relaxed text-muted", children: t("databaseview.TableWorkspaceDescription", {
+                                                            defaultValue: "Inspect rows, sort columns, and review table structure in one place.",
+                                                        }) })] }), columnMeta.size > 0 && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(MetaPill, { children: [columnMeta.size, " ", t("databaseview.columns")] }), _jsx(MetaPill, { children: t("databaseview.RowCountLabel", {
+                                                            count: tableData.total.toLocaleString(),
+                                                            defaultValue: "{{count}} rows",
+                                                        }) })] }))] }) }), _jsxs(PagePanel, { variant: "surface", className: "mt-4 flex flex-1 min-h-0 flex-col overflow-hidden p-3", children: [_jsx("div", { className: "flex-1 min-h-0", children: tableData.rows.length === 0 ? (_jsx(PagePanel.Empty, { className: "min-h-[14rem]", title: t("databaseview.TableIsEmpty"), description: t("databaseview.EmptyTableDescription", {
+                                                    defaultValue: "This table is connected and available, but it does not have any rows yet.",
+                                                }) })) : (_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 })] })) : (_jsxs("div", { className: "flex flex-1 min-h-0 gap-4", children: [showExternalSidebar && (_jsx("aside", { className: "w-[21rem] max-w-[352px] shrink-0 overflow-hidden rounded-3xl border border-border/34 shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_20px_30px_-28px_rgba(15,23,42,0.18)] flex min-h-0 w-full flex-col bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_76%,transparent),color-mix(in_srgb,var(--bg-muted)_97%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),inset_-1px_0_0_rgba(255,255,255,0.03)] backdrop-blur-md dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),inset_-1px_0_0_rgba(255,255,255,0.02)]", children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col px-3 pb-4 pt-3", children: [sidebarSummary, _jsxs("div", { className: "space-y-3 pt-4", children: [viewToggle, leftNav, refreshButton] }), _jsx("div", { className: "h-px bg-border/30" }), _jsx(PagePanel, { variant: "inset", className: "rounded-2xl px-3 py-3 text-xs-tight text-muted", children: t("databaseview.QueryWorkspaceInfo", {
+                                        defaultValue: "Write ad-hoc queries and inspect results without leaving the database workspace.",
+                                    }) }), queryHistory.length > 0 ? (_jsxs(SidebarScrollRegion, { className: "space-y-1.5", children: [_jsx("div", { className: "text-2xs text-muted uppercase tracking-[0.16em]", children: t("databaseview.RecentQueries") }), queryHistory.slice(0, 8).map((q) => (_jsx(Button, { variant: "ghost", className: "h-auto w-full justify-start rounded-2xl px-3 py-2 text-left text-xs-tight font-mono border border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] text-muted-strong shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_14px_20px_-18px_rgba(15,23,42,0.14)] backdrop-blur-md transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-border/46 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] hover:text-txt hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_16px_22px_-18px_rgba(15,23,42,0.16)] active:scale-95 disabled:hover:border-border/32 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] disabled:hover:text-muted-strong dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_16px_24px_-20px_rgba(0,0,0,0.24)]", onClick: () => setQueryText(q), children: _jsx("span", { className: "truncate", children: q }) }, q)))] })) : null] }) })), _jsxs("div", { className: "min-w-0 flex-1 overflow-y-auto flex min-h-0 flex-col gap-4 bg-transparent", children: [_jsx(PagePanel, { variant: "surface", as: "section", className: "px-5 py-5 sm:px-6", children: _jsx("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted", children: t("common.database") }), _jsx("div", { className: "mt-1 text-2xl font-semibold text-txt-strong", children: t("databaseview.SQLWorkspace", {
+                                                    defaultValue: "SQL Workspace",
+                                                }) }), _jsx("div", { className: "mt-2 max-w-2xl text-sm leading-relaxed text-muted", children: t("databaseview.SQLWorkspaceDescription", {
+                                                    defaultValue: "Run ad-hoc queries, inspect results, and reuse recent SQL from the sidebar.",
+                                                }) })] }) }) }), _jsx(SqlEditorPanel, { ...sqlEditorProps, showHistory: !showExternalSidebar })] })] })), cellInspect !== null && (_jsx(CellPopover, { value: cellInspect, onClose: () => setCellInspect(null) }))] }));
+}

package/components/pages/DocumentsView.d.ts

@@ -0,0 +1,12 @@
+import type { DocumentRecord } from "../../api/client-types-chat";
+export { type DocumentUploadFile, getDocumentUploadFilename, shouldReadDocumentFileAsText, } from "./documents-upload";
+export declare function DocumentsView({ fileInputId, inModal, embedded, onDocumentsChange, onSelectedDocumentIdChange, selectedDocumentId, showSelectorRail, }?: {
+    fileInputId?: string;
+    inModal?: boolean;
+    embedded?: boolean;
+    onDocumentsChange?: (documents: DocumentRecord[]) => void;
+    onSelectedDocumentIdChange?: (documentId: string | null) => void;
+    selectedDocumentId?: string | null;
+    showSelectorRail?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DocumentsView.d.ts.map

package/components/pages/DocumentsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/DocumentsView.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EACV,cAAc,EAGf,MAAM,6BAA6B,CAAC;AA+BrC,OAAO,EACL,KAAK,kBAAkB,EACvB,yBAAyB,EACzB,4BAA4B,GAC7B,MAAM,oBAAoB,CAAC;AAmM5B,wBAAgB,aAAa,CAAC,EAC5B,WAAW,EACX,OAAO,EACP,QAAgB,EAChB,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,gBAAgB,GACjB,GAAE;IACD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC1D,0BAA0B,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CACvB,2CAi/BL"}