@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.4

package/components/pages/WorkflowGraphViewer.js

@@ -3,7 +3,7 @@ import { Background, Controls, MiniMap, ReactFlow, } from "@xyflow/react";
 import { Maximize2, X } from "lucide-react";
 import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog.js";
 import { Spinner } from "../ui/spinner.js";
 import { StatusBadge } from "../ui/status-badge.js";
@@ -96,7 +96,6 @@ function workflowToReactFlow(workflow) {
                 minHeight: NODE_HEIGHT,
                 color: "#e2e8f0",
                 fontSize: "12px",
-                boxShadow: `0 0 0 1px ${colors.border}22`,
             },
         };
     });
@@ -217,7 +216,7 @@ function WorkflowGenerationProgress({ chrome, t, }) {
 // ── Node detail drawer ────────────────────────────────────────────────────────
 const PARAM_TRUNCATE_LENGTH = 200;
 function ParamValue({ value }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [expanded, setExpanded] = useState(false);
     if (typeof value === "string") {
         if (value.length > PARAM_TRUNCATE_LENGTH && !expanded) {
@@ -241,7 +240,7 @@ function ParamValue({ value }) {
     return (_jsx("pre", { className: "font-mono whitespace-pre-wrap break-all text-xs text-txt/80", children: String(value) }));
 }
 function NodeDetailDrawer({ node, onClose, labelId }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const closeButtonRef = useRef(null);
     const isOpen = node !== null;
     // Focus the close button when drawer opens
@@ -265,10 +264,10 @@ function NodeDetailDrawer({ node, onClose, labelId }) {
             : "muted";
     return (_jsxs("div", { role: "dialog", "aria-modal": "false", "aria-labelledby": isOpen ? labelId : undefined, "aria-hidden": !isOpen, className: [
             "absolute inset-y-0 right-0 z-30 flex w-72 flex-col",
-            "border-l border-border/40 bg-bg backdrop-blur-[2px]",
+            "border-l border-border/40 bg-bg",
             "transition-transform duration-200 ease-out",
             isOpen ? "translate-x-0" : "translate-x-full",
-        ].join(" "), children: [_jsxs("div", { className: "flex shrink-0 items-start gap-2 border-b border-border/30 px-4 py-3", children: [_jsxs("div", { className: "flex-1 min-w-0 space-y-1", children: [_jsx("h2", { id: labelId, className: "text-sm font-semibold text-txt leading-tight truncate", children: node?.name ?? "" }), _jsx("div", { className: "flex items-center gap-1.5", children: _jsx(StatusBadge, { label: typeLabel, variant: badgeVariant }) })] }), _jsx("button", { ref: closeButtonRef, type: "button", "aria-label": t("workflowGraph.closeDrawer"), tabIndex: isOpen ? 0 : -1, className: "shrink-0 flex h-6 w-6 items-center justify-center rounded-sm text-muted hover:text-txt transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: onClose, children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto space-y-4 px-4 py-3", children: node && (_jsxs(_Fragment, { children: [node.notes?.trim() ? (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted", children: t("workflowGraph.step", { defaultValue: "Step" }) }), _jsx("div", { className: "rounded-sm bg-bg/40 border border-border/20 px-2 py-2", children: _jsx("p", { className: "text-xs leading-relaxed text-txt/80", children: node.notes.trim() }) })] })) : null, _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted", children: t("common.parameters") }), hasParams ? (_jsx("div", { className: "space-y-2", children: Object.entries(node.parameters ?? {}).map(([key, val]) => (_jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "text-xs font-medium text-muted/80 font-mono", children: key }), _jsx("div", { className: "rounded-sm bg-bg/40 border border-border/20 px-2 py-1", children: _jsx(ParamValue, { value: val }) })] }, key))) })) : (_jsx("p", { className: "text-xs text-muted/60 italic", children: t("workflowGraph.nodeDrawer.noParameters") }))] })] })) })] }));
+        ].join(" "), children: [_jsxs("div", { className: "flex shrink-0 items-start gap-2 border-b border-border/30 px-4 py-3", children: [_jsxs("div", { className: "flex-1 min-w-0 space-y-1", children: [_jsx("h2", { id: labelId, className: "text-sm font-semibold text-txt leading-tight truncate", children: node?.name ?? "" }), _jsx("div", { className: "flex items-center gap-1.5", children: _jsx(StatusBadge, { label: typeLabel, variant: badgeVariant }) })] }), _jsx("button", { ref: closeButtonRef, type: "button", "aria-label": t("workflowGraph.closeDrawer"), tabIndex: isOpen ? 0 : -1, className: "shrink-0 flex h-6 w-6 items-center justify-center rounded-sm text-muted hover:text-txt transition-colors   ", onClick: onClose, children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto space-y-4 px-4 py-3", children: node && (_jsxs(_Fragment, { children: [node.notes?.trim() ? (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted", children: t("workflowGraph.step", { defaultValue: "Step" }) }), _jsx("div", { className: "rounded-sm bg-bg/40 border border-border/20 px-2 py-2", children: _jsx("p", { className: "text-xs leading-relaxed text-txt/80", children: node.notes.trim() }) })] })) : null, _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted", children: t("common.parameters") }), hasParams ? (_jsx("div", { className: "space-y-2", children: Object.entries(node.parameters ?? {}).map(([key, val]) => (_jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "text-xs font-medium text-muted/80 font-mono", children: key }), _jsx("div", { className: "rounded-sm bg-bg/40 border border-border/20 px-2 py-1", children: _jsx(ParamValue, { value: val }) })] }, key))) })) : (_jsx("p", { className: "text-xs text-muted/60 italic", children: t("workflowGraph.nodeDrawer.noParameters") }))] })] })) })] }));
 }
 // ── Graph panel (shared between inline and full-screen modal) ─────────────────
 function GraphPanel({ nodes, edges, isGenerating, ariaLabel, onNodeClick, uiTheme, }) {
@@ -282,7 +281,8 @@ function GraphPanel({ nodes, edges, isGenerating, ariaLabel, onNodeClick, uiThem
                 } })] }));
 }
 export function WorkflowGraphViewer({ workflow, loading = false, isGenerating = false, emptyStateActionLabel, emptyStateHelpText, onNodeClick, onEmptyStateAction, }) {
-    const { uiTheme, t } = useApp();
+    const uiTheme = useAppSelector((s) => s.uiTheme);
+    const t = useAppSelector((s) => s.t);
     const resolvedEmptyStateActionLabel = emptyStateActionLabel ??
         t("workflowGraph.describeWorkflow", {
             defaultValue: "Describe your workflow",
@@ -370,13 +370,11 @@ export function WorkflowGraphViewer({ workflow, loading = false, isGenerating =
         return () => window.removeEventListener("keydown", handler);
     }, [fullScreen, selectedNode]);
     const hasNodes = nodes.length > 0;
-    const borderClass = isGenerating
-        ? "animate-pulse ring-2 ring-blue-500/50"
-        : "ring-1 ring-border/30";
+    const borderClass = isGenerating ? "animate-pulse  " : " ";
     const chrome = graphChrome(uiTheme);
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: containerRef, role: "img", "aria-label": ariaLabel, className: `relative h-[260px] overflow-hidden rounded-sm sm:h-[360px] lg:h-[420px] ${borderClass}`, style: { background: chrome.canvasBg }, children: [loading && !hasNodes && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { className: "h-6 w-6 text-muted" }) })), !loading && !hasNodes && !isGenerating && (_jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 px-6 text-center", children: [_jsx("p", { className: `text-sm font-medium ${chrome.emptyTitleClass}`, children: t("workflowGraph.blankWorkflow", {
                                     defaultValue: "Blank workflow",
-                                }) }), _jsx("p", { className: `max-w-sm text-xs ${chrome.emptyHelpClass}`, children: resolvedEmptyStateHelpText }), onEmptyStateAction && (_jsx("button", { ref: emptyStateActionButton.ref, type: "button", className: "mt-1 rounded-sm border border-border/40 bg-bg/40 px-3 py-1.5 text-xs text-txt hover:bg-bg/70 transition-colors", onClick: onEmptyStateAction, ...emptyStateActionButton.agentProps, children: resolvedEmptyStateActionLabel }))] })), isGenerating && (_jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center backdrop-blur-[1px]", style: { background: chrome.overlayBg }, children: _jsx(WorkflowGenerationProgress, { chrome: chrome, t: t }) })), !loading && (_jsx("div", { role: "presentation", className: "h-full w-full", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsxs(ReactFlow, { nodes: nodes, edges: isGenerating ? generatingEdges(edges) : edges, nodesDraggable: !isGenerating, nodesConnectable: false, edgesReconnectable: false, onNodeClick: handleNodeClick, fitView: true, fitViewOptions: { padding: 0.2, maxZoom: 1.2 }, proOptions: { hideAttribution: true }, "aria-label": ariaLabel, children: [_jsx(Background, { color: chrome.dots, gap: 20, size: 1 }), _jsx(Controls, { showInteractive: false }), hasNodes && (_jsx(MiniMap, { nodeColor: (n) => {
+                                }) }), _jsx("p", { className: `max-w-sm text-xs ${chrome.emptyHelpClass}`, children: resolvedEmptyStateHelpText }), onEmptyStateAction && (_jsx("button", { ref: emptyStateActionButton.ref, type: "button", className: "mt-1 rounded-sm border border-border/40 bg-bg/40 px-3 py-1.5 text-xs text-txt hover:bg-bg/70 transition-colors", onClick: onEmptyStateAction, ...emptyStateActionButton.agentProps, children: resolvedEmptyStateActionLabel }))] })), isGenerating && (_jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center", style: { background: chrome.overlayBg }, children: _jsx(WorkflowGenerationProgress, { chrome: chrome, t: t }) })), !loading && (_jsx("div", { role: "presentation", className: "h-full w-full", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsxs(ReactFlow, { nodes: nodes, edges: isGenerating ? generatingEdges(edges) : edges, nodesDraggable: !isGenerating, nodesConnectable: false, edgesReconnectable: false, onNodeClick: handleNodeClick, fitView: true, fitViewOptions: { padding: 0.2, maxZoom: 1.2 }, proOptions: { hideAttribution: true }, "aria-label": ariaLabel, children: [_jsx(Background, { color: chrome.dots, gap: 20, size: 1 }), _jsx(Controls, { showInteractive: false }), hasNodes && (_jsx(MiniMap, { nodeColor: (n) => {
                                         const colors = n.data
                                             ?.colors;
                                         return colors?.border ?? "#475569";

package/components/pages/__e2e__/background-fixture.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=background-fixture.d.ts.map

package/components/pages/__e2e__/background-fixture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-fixture.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/__e2e__/background-fixture.tsx"],"names":[],"mappings":""}

package/components/pages/__e2e__/background-fixture.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { AppBackground } from "../../../backgrounds/AppBackground.js";
+import { __setAppValueForTests } from "../../../state/app-store.js";
+import { BACKGROUND_PRESETS, backgroundConfigsEqual, DEFAULT_BACKGROUND_CONFIG, } from "../../../state/ui-preferences.js";
+import { emitViewEvent } from "../../../views/view-event-bus.js";
+import { fileToBackgroundDataUrl } from "../background-image.js";
+const MAX_HISTORY = 10;
+function seed(config, history, set, undo) {
+    __setAppValueForTests({
+        backgroundConfig: config,
+        canUndoBackground: history.length > 0,
+        setBackgroundConfig: set,
+        undoBackgroundConfig: undo,
+        elizaCloudConnected: false,
+        elizaCloudAuthRejected: false,
+    });
+}
+// Seed before first paint so store-backed selectors never read an empty store.
+seed(DEFAULT_BACKGROUND_CONFIG, [], () => { }, () => { });
+function Harness() {
+    const [config, setConfig] = useState(DEFAULT_BACKGROUND_CONFIG);
+    const [history, setHistory] = useState([]);
+    // Real push-on-change history, mirroring useDisplayPreferences.
+    const setBackgroundConfig = useCallback((next) => {
+        setConfig((prev) => {
+            if (backgroundConfigsEqual(prev, next))
+                return prev;
+            setHistory((h) => [...h, prev].slice(-MAX_HISTORY));
+            return next;
+        });
+    }, []);
+    const undoBackgroundConfig = useCallback(() => {
+        setHistory((h) => {
+            if (h.length === 0)
+                return h;
+            setConfig(h[h.length - 1]);
+            return h.slice(0, -1);
+        });
+    }, []);
+    // Mirror into the store every render so AppBackground + its bridge resolve to
+    // this one source of truth (the production wiring).
+    useLayoutEffect(() => {
+        seed(config, history, setBackgroundConfig, undoBackgroundConfig);
+    }, [config, history, setBackgroundConfig, undoBackgroundConfig]);
+    useLayoutEffect(() => {
+        window.__emitBgApply = (payload) => emitViewEvent("background:apply", payload, "agent");
+    }, []);
+    const onFile = useCallback(async (e) => {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (!file)
+            return;
+        const imageUrl = await fileToBackgroundDataUrl(file);
+        setBackgroundConfig({ mode: "image", color: config.color, imageUrl });
+    }, [config.color, setBackgroundConfig]);
+    return (_jsxs("div", { "data-testid": "bg-fixture-root", style: {
+            position: "relative",
+            width: "100vw",
+            height: "100vh",
+            overflow: "hidden",
+        }, children: [_jsx(AppBackground, {}), _jsxs("div", { style: {
+                    position: "relative",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 10,
+                    padding: 24,
+                    maxWidth: 420,
+                    margin: "24px auto",
+                    borderRadius: 24,
+                    background: "rgba(255,255,255,0.55)",
+                    backdropFilter: "blur(16px)",
+                }, children: [BACKGROUND_PRESETS.map((preset) => (_jsx("button", { type: "button", "aria-label": `Set background to ${preset.label}`, onClick: () => setBackgroundConfig({ mode: "shader", color: preset.color }), style: {
+                            width: 36,
+                            height: 36,
+                            borderRadius: "9999px",
+                            background: preset.color,
+                            border: "1px solid rgba(0,0,0,0.15)",
+                        } }, preset.id))), _jsx("input", { type: "file", accept: "image/*", "aria-label": "Background image file", onChange: onFile, style: { position: "absolute", width: 1, height: 1, opacity: 0 } }), history.length > 0 ? (_jsx("button", { type: "button", "aria-label": "Undo background change", onClick: () => undoBackgroundConfig(), style: { height: 36, padding: "0 14px", borderRadius: 12 }, children: "Undo" })) : null] })] }));
+}
+const root = document.getElementById("root");
+if (root)
+    createRoot(root).render(_jsx(Harness, {}));

package/components/pages/__e2e__/springboard-fixture.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=springboard-fixture.d.ts.map

package/components/pages/__e2e__/springboard-fixture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"springboard-fixture.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/__e2e__/springboard-fixture.tsx"],"names":[],"mappings":""}

package/components/pages/__e2e__/springboard-fixture.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Self-contained fixture for the Springboard e2e: mounts the real Springboard
+// (the iOS-like view-launcher) with ~25 deterministic mock ViewEntry items
+// spread across multiple pages. A couple carry an `imageUrl` data-URI so an
+// image tile renders; the rest fall back to the Lucide glyph. Launch / edit /
+// delete are wired to stubs and surfaced on `window.__springboardCalls` so the
+// runner can assert the real interaction handlers fired. No app server, no
+// network — fully self-contained (mirrors background-fixture's self-containment).
+// Paired with run-springboard-e2e.mjs.
+import * as React from "react";
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
+import { Springboard } from "../Springboard.js";
+// A deterministic gradient SVG data-URI so an image tile renders without any
+// network fetch. Two entries use this; the rest render the glyph fallback.
+function tileImage(a, b) {
+    return `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160">
+       <defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+         <stop offset="0" stop-color="${a}"/><stop offset="1" stop-color="${b}"/>
+       </linearGradient></defs>
+       <rect width="160" height="160" rx="32" fill="url(#g)"/>
+     </svg>`)}`;
+}
+// Stable id list (25) — first two are "system" management tiles so the dynamic
+// per-tile edit/delete affordances render in edit mode; the rest are plain
+// views, two of which carry a hero image.
+const SPECS = [
+    { id: "chat", label: "Chat", icon: "MessageSquare" },
+    { id: "views", label: "Views", icon: "LayoutGrid" },
+    { id: "settings", label: "Settings", icon: "Shield" },
+    { id: "activity", label: "Activity", icon: "Activity" },
+    { id: "wallet", label: "Wallet", icon: "Wallet", image: true },
+    { id: "inbox", label: "Inbox", icon: "Inbox" },
+    { id: "calendar", label: "Calendar", icon: "CalendarDays" },
+    { id: "health", label: "Health", icon: "Heart" },
+    { id: "focus", label: "Focus", icon: "Focus" },
+    { id: "contacts", label: "Contacts", icon: "UsersRound" },
+    { id: "phone", label: "Phone", icon: "Phone" },
+    { id: "companion", label: "Companion", icon: "Bot", image: true },
+    { id: "models", label: "Model Tester", icon: "TestTube2" },
+    { id: "vectors", label: "Vector Browser", icon: "Database" },
+    { id: "trajectory", label: "Trajectory", icon: "Activity" },
+    { id: "feed", label: "Feed", icon: "Rss" },
+    { id: "orchestrator", label: "Orchestrator", icon: "Bot" },
+    { id: "training", label: "Fine-Tuning", icon: "BrainCircuit" },
+    { id: "trade", label: "Trading", icon: "TrendingUp" },
+    { id: "shop", label: "Shop", icon: "ShoppingBag" },
+    { id: "glasses", label: "Glasses", icon: "Glasses" },
+    { id: "arcade", label: "Arcade", icon: "Gamepad2" },
+    { id: "screenshare", label: "Screen Share", icon: "Monitor" },
+    { id: "keys", label: "Keys", icon: "KeyRound" },
+    { id: "network", label: "Network", icon: "Network" },
+];
+function makeEntry(spec) {
+    return {
+        key: `view:${spec.id}`,
+        id: spec.id,
+        label: spec.label,
+        icon: spec.icon,
+        imageUrl: spec.image ? tileImage("#0891b2", "#7c3aed") : undefined,
+        hasHero: Boolean(spec.image),
+        modality: "gui",
+        modalities: ["gui"],
+        state: "loaded",
+        kind: "view",
+        builtin: true,
+    };
+}
+const ENTRIES = SPECS.map(makeEntry);
+// "Dynamic developer" views that expose the per-tile edit/delete affordances in
+// edit mode. Keep it small + deterministic.
+const MANAGEABLE = new Set(["models", "vectors"]);
+function Harness() {
+    const [favorites, setFavorites] = useState([
+        "chat",
+        "views",
+        "settings",
+    ]);
+    React.useLayoutEffect(() => {
+        const win = window;
+        win.__springboardCalls = { launch: [], edit: [], delete: [] };
+    }, []);
+    return (_jsx("div", { "data-testid": "springboard-fixture-root", style: {
+            position: "relative",
+            width: "100vw",
+            height: "100vh",
+            overflow: "hidden",
+            background: "#0a0d16",
+        }, children: _jsx(Springboard, { entries: ENTRIES, favoriteIds: favorites, onToggleFavorite: (id) => {
+                setFavorites((prev) => prev.includes(id)
+                    ? prev.filter((f) => f !== id)
+                    : [...prev, id].slice(-4));
+            }, onLaunch: (entry) => {
+                window.__springboardCalls?.launch.push(entry.id);
+            }, canManageView: (id) => MANAGEABLE.has(id), onEditView: (id) => {
+                window.__springboardCalls?.edit.push(id);
+            }, onDeleteView: (id) => {
+                window.__springboardCalls?.delete.push(id);
+            } }) }));
+}
+const root = document.getElementById("root");
+if (root)
+    createRoot(root).render(_jsx(Harness, {}));

package/components/pages/automation-conversations.d.ts

@@ -1,4 +1,4 @@
-import type { Conversation, ConversationMetadata } from "../../api/client-types-chat";
+import type { Conversation, ConversationMetadata } from "../../api/client-types-chat.js";
 export declare function isAutomationConversationMetadata(metadata: ConversationMetadata | null | undefined): boolean;
 export declare function isAutomationConversation(conversation: Pick<Conversation, "metadata"> | null | undefined): boolean;
 export declare function getAutomationBridgeConversationId(activeConversationId: string | null | undefined, conversations: Conversation[]): string | undefined;

package/components/pages/automations-missing-creds.d.ts

@@ -5,7 +5,7 @@
  *
  * This file is logic-only (no JSX) so it can be unit-tested without a DOM.
  */
-import type { WorkflowDefinition } from "../../api/client-types-chat";
+import type { WorkflowDefinition } from "../../api/client-types-chat.js";
 /**
  * Walk a workflow's nodes and return the set of credential types it
  * references. The shape comes from `WorkflowDefinitionWriteNode.credentials`,

package/components/pages/background-image.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Turn a user-picked image File into a persistable data URL for use as the app
+ * background. Large photos are downscaled (canvas → JPEG) so the stored value
+ * stays well under the localStorage quota; a hard size cap rejects anything
+ * still too big rather than silently overflowing storage.
+ */
+export declare class BackgroundImageError extends Error {
+}
+export declare function fileToBackgroundDataUrl(file: File): Promise<string>;
+//# sourceMappingURL=background-image.d.ts.map

package/components/pages/background-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-image.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/background-image.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,qBAAa,oBAAqB,SAAQ,KAAK;CAAG;AAmClD,wBAAsB,uBAAuB,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAkBzE"}

package/components/pages/background-image.js

@@ -0,0 +1,61 @@
+/**
+ * Turn a user-picked image File into a persistable data URL for use as the app
+ * background. Large photos are downscaled (canvas → JPEG) so the stored value
+ * stays well under the localStorage quota; a hard size cap rejects anything
+ * still too big rather than silently overflowing storage.
+ */
+const MAX_DIMENSION = 2048;
+const JPEG_QUALITY = 0.82;
+/** Reject a stored background larger than this — localStorage is ~5 MB total. */
+const MAX_DATA_URL_BYTES = 4 * 1024 * 1024;
+export class BackgroundImageError extends Error {
+}
+function readFileAsDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(reader.error ?? new Error("Could not read the image."));
+        reader.readAsDataURL(file);
+    });
+}
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error("Could not decode the image."));
+        img.src = src;
+    });
+}
+async function downscaleToDataUrl(dataUrl) {
+    const img = await loadImage(dataUrl);
+    const longest = Math.max(img.width, img.height);
+    const scale = longest > 0 ? Math.min(1, MAX_DIMENSION / longest) : 1;
+    if (scale >= 1)
+        return dataUrl; // already within bounds
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(img.width * scale);
+    canvas.height = Math.round(img.height * scale);
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        return dataUrl;
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL("image/jpeg", JPEG_QUALITY);
+}
+export async function fileToBackgroundDataUrl(file) {
+    if (!file.type.startsWith("image/")) {
+        throw new BackgroundImageError("Please choose an image file.");
+    }
+    const raw = await readFileAsDataUrl(file);
+    let result = raw;
+    try {
+        result = await downscaleToDataUrl(raw);
+    }
+    catch {
+        // Canvas/decoder unavailable — keep the original; the size cap still applies.
+        result = raw;
+    }
+    if (result.length > MAX_DATA_URL_BYTES) {
+        throw new BackgroundImageError("That image is too large — try a smaller one.");
+    }
+    return result;
+}

package/components/pages/browser-workspace-wallet.d.ts

@@ -1,5 +1,5 @@
 import type { WalletAddresses, WalletConfigStatus } from "@elizaos/shared";
-import type { StewardSignResponse, StewardStatusResponse } from "../../api/client-types-steward";
+import type { StewardSignResponse, StewardStatusResponse } from "../../api/client-types-steward.js";
 export declare const BROWSER_WALLET_REQUEST_TYPE = "ELIZA_BROWSER_WALLET_REQUEST";
 export declare const BROWSER_WALLET_RESPONSE_TYPE = "ELIZA_BROWSER_WALLET_RESPONSE";
 export declare const BROWSER_WALLET_READY_TYPE = "ELIZA_BROWSER_WALLET_READY";

package/components/pages/chat-view-hooks.d.ts

@@ -1,7 +1,7 @@
-import type { ConversationChannelType, ConversationMessage } from "../../api/client-types-chat";
-import { type ContinuousChatState } from "../../hooks/useContinuousChat";
-import type { useApp } from "../../state/useApp";
-import { type VoiceCaptureMode, type VoiceContinuousMode, type VoiceSpeakerMetadata } from "../../voice/voice-chat-types";
+import type { ConversationChannelType, ConversationMessage } from "../../api/client-types-chat.js";
+import { type ContinuousChatState } from "../../hooks/useContinuousChat.js";
+import type { useApp } from "../../state/useApp.js";
+import { type VoiceCaptureMode, type VoiceContinuousMode, type VoiceSpeakerMetadata } from "../../voice/voice-chat-types.js";
 export declare function mapUiLanguageToSpeechLocale(uiLanguage: string): string;
 type VoiceLatencyState = {
     assistantFirstMessageId: string | null;
@@ -51,7 +51,7 @@ export declare function useChatVoiceController(options: {
     handleEditMessage: (messageId: string, text: string) => Promise<boolean>;
     handleSpeakMessage: (messageId: string, text: string) => void;
     stopSpeaking: () => void;
-    voice: import("../..").VoiceChatState;
+    voice: import("../../index.js").VoiceChatState;
     voiceLatency: VoiceLatencyState | null;
     voiceSpeaker: VoiceSpeakerMetadata | null;
 };

package/components/pages/cloud-dashboard-utils.d.ts

@@ -1,4 +1,4 @@
-import type { CloudBillingCheckoutResponse, CloudBillingSettings, CloudBillingSummary, CloudCompatAgent } from "../../api";
+import type { CloudBillingCheckoutResponse, CloudBillingSettings, CloudBillingSummary, CloudCompatAgent } from "../../api/index.js";
 export declare const ELIZA_CLOUD_INSTANCES_URL = "https://www.elizacloud.ai/dashboard/app";
 /** Marketing / docs site — "Learn more" when not connected (in-app browser on desktop). */
 export declare const ELIZA_CLOUD_WEB_URL = "https://elizacloud.ai";

package/components/pages/config-page-sections.d.ts

@@ -2,7 +2,7 @@
  * Sub-components and helpers for ConfigPageView.
  * Extracted from ConfigPageView.tsx.
  */
-import type { TranslateFn as AppTranslateFn } from "../../types";
+import type { TranslateFn as AppTranslateFn } from "../../types/index.js";
 export type RpcProviderOption<T extends string> = {
     id: T;
     label: string;

package/components/pages/config-page-sections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config-page-sections.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/config-page-sections.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAgB,MAAM,aAAa,CAAC;AAM/E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,IAAI;IAChD,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;AAE9D,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAIhE,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,SAAS,EACT,OAAO,GACR,EAAE,mBAAmB,kDAuBrB;AA2DD,KAAK,oBAAoB,GAAG,mBAAmB,CAAC;AAEhD,KAAK,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,SAAS,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,gBAAgB,EAAE,CAAC,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,eAAe,EAAE,mBAAmB,CAAC;IACrC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,EAAE,oBAAoB,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,CAAC,EAAE,WAAW,CAAC;CAChB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,KAAK,EACL,WAAW,EACX,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,KAAK,EACL,kBAAkB,EAClB,CAAC,GACF,EAAE,eAAe,CAAC,CAAC,CAAC,2CA8CpB;AA6FD,wBAAgB,oBAAoB,mDA4JnC"}
+{"version":3,"file":"config-page-sections.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/config-page-sections.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AASH,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAgB,MAAM,aAAa,CAAC;AAM/E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,IAAI;IAChD,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;AAE9D,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAIhE,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,SAAS,EACT,OAAO,GACR,EAAE,mBAAmB,kDAuBrB;AA2DD,KAAK,oBAAoB,GAAG,mBAAmB,CAAC;AAEhD,KAAK,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,SAAS,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,gBAAgB,EAAE,CAAC,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,eAAe,EAAE,mBAAmB,CAAC;IACrC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,EAAE,oBAAoB,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,CAAC,EAAE,WAAW,CAAC;CAChB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,KAAK,EACL,WAAW,EACX,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,KAAK,EACL,kBAAkB,EAClB,CAAC,GACF,EAAE,eAAe,CAAC,CAAC,CAAC,2CA8CpB;AA6FD,wBAAgB,oBAAoB,mDA6JnC"}

package/components/pages/config-page-sections.js

@@ -8,11 +8,11 @@ import { useCallback, useEffect, useState } from "react";
 import { client } from "../../api/index.js";
 import { ConfigRenderer } from "../../components/config-ui/config-renderer.js";
 import { defaultRegistry } from "../../components/config-ui/config-renderer.helpers.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { Switch } from "../ui/switch.js";
 export function CloudRpcStatus({ connected, loginBusy, onLogin, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     if (connected) {
         return null;
     }
@@ -122,7 +122,8 @@ function isCloudServiceRouteSelected(route) {
         normalizeFirstRunProviderId(routeRecord.backend) === "elizacloud");
 }
 export function CloudServicesSection() {
-    const { t, setActionNotice } = useApp();
+    const t = useAppSelector((s) => s.t);
+    const setActionNotice = useAppSelector((s) => s.setActionNotice);
     const [services, setServices] = useState({
         rpc: false,
         media: false,

package/components/pages/database-utils.d.ts

@@ -1,10 +1,11 @@
-import type { ColumnInfo } from "../../api";
+import type { ColumnInfo } from "../../api/index.js";
 export type DbView = "tables" | "query";
 export type SortDir = "asc" | "desc" | null;
 export declare function CellPopover({ value, onClose, }: {
     value: string;
     onClose: () => void;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function buildResultsGridRowKey(columns: string[], row: Record<string, unknown>, rowIndex: number, columnMeta?: Map<string, ColumnInfo>): string | number;
 export declare function ResultsGrid({ columns, rows, columnMeta, sortCol, sortDir, onSort, onCellClick, }: {
     columns: string[];
     rows: Record<string, unknown>[];

package/components/pages/database-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"database-utils.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/database-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAO5C,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACxC,MAAM,MAAM,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAiE5C,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAoBA;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,IAAI,EACJ,UAAU,EACV,OAAO,EACP,OAAO,EACP,MAAM,EACN,WAAW,GACZ,EAAE;IACD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,2CAsGA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,GACP,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,2CAiDA"}
+{"version":3,"file":"database-utils.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/database-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAO5C,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACxC,MAAM,MAAM,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAiE5C,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAoBA;AAED,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,MAAM,EAAE,EACjB,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5B,QAAQ,EAAE,MAAM,EAChB,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,GACnC,MAAM,GAAG,MAAM,CAWjB;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,IAAI,EACJ,UAAU,EACV,OAAO,EACP,OAAO,EACP,MAAM,EACN,WAAW,GACZ,EAAE;IACD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,2CAyGA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,GACP,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,2CAiDA"}

package/components/pages/database-utils.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Badge } from "../ui/badge.js";
 import { Button } from "../ui/button.js";
 import { CodeBlock } from "../ui/code-block.js";
@@ -76,44 +76,57 @@ function typeBadgeColor(type) {
 }
 // ── Shared display components ─────────────────────────────────────────
 export function CellPopover({ value, onClose, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     return (_jsx(Dialog, { open: true, onOpenChange: (next) => {
             if (!next)
                 onClose();
         }, children: _jsxs(DialogContent, { className: "max-w-[500px]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { className: "text-xs uppercase tracking-wider text-muted", children: t("databaseview.CellValue") }) }), _jsx(CodeBlock, { value: value, wrap: true, copyable: true, className: "max-h-[300px]" })] }) }));
 }
+export function buildResultsGridRowKey(columns, row, rowIndex, columnMeta) {
+    const primaryKeyCols = columns.filter((col) => columnMeta?.get(col)?.isPrimaryKey);
+    if (!primaryKeyCols.length)
+        return rowIndex;
+    const values = primaryKeyCols.map((col) => row[col]);
+    if (values.some((value) => value === null || value === undefined)) {
+        return rowIndex;
+    }
+    return values.map((value) => `${typeof value}:${String(value)}`).join("|");
+}
 export 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-sm ", style: { maxHeight: "calc(100vh - 340px)" }, children: _jsxs("table", { className: "w-full border-collapse text-xs font-mono", children: [_jsx("thead", { className: "sticky top-0 z-10 backdrop-blur-xl bg-bg/80 border-b border-border/40 ", children: _jsxs("tr", { children: [_jsx("th", { className: "w-[50px] min-w-[50px] px-3 py-2.5 text-2xs text-muted font-medium text-right border-r border-border/40", children: "#" }), columns.map((col) => {
+    const t = useAppSelector((s) => s.t);
+    return (_jsx("div", { className: "overflow-auto border border-border/40 bg-card/95 rounded-sm ", style: { maxHeight: "calc(100vh - 340px)" }, children: _jsxs("table", { className: "w-full border-collapse text-xs font-mono", children: [_jsx("thead", { className: "sticky top-0 z-10 bg-bg/95 border-b border-border/40 ", children: _jsxs("tr", { children: [_jsx("th", { className: "w-[50px] min-w-[50px] px-3 py-2.5 text-2xs 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-xs-tight text-txt font-semibold group-hover:text-txt transition-colors", children: col }), meta && (_jsx(Badge, { variant: "outline", className: `text-3xs px-1.5 py-0 border-none font-medium ${typeBadgeColor(meta.type)}`, children: typeLabel(meta.type) })), meta?.isPrimaryKey && (_jsx(Badge, { variant: "outline", className: "border-none bg-accent/16 px-1.5 py-0 text-3xs font-bold text-accent-fg ", children: "PK" })), isSorted && (_jsx("span", { className: "text-2xs text-accent", children: sortDir === "asc" ? "↑" : "↓" }))] }) }, col));
-                            })] }) }), _jsx("tbody", { children: rows.map((row, i) => (_jsxs("tr", { className: "border-b border-border/20 hover:bg-bg-hover transition-colors group", children: [_jsx("td", { className: "px-3 py-2 text-2xs 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-muted italic opacity-50", children: t("databaseview.NULL") })) : (_jsx("span", { className: "text-txt", children: display })) }, col));
-                            })] }, JSON.stringify(row)))) })] }) }));
+                            })] }) }), _jsx("tbody", { children: rows.map((row, i) => {
+                        const rowKey = buildResultsGridRowKey(columns, row, i, columnMeta);
+                        return (_jsxs("tr", { className: "border-b border-border/20 hover:bg-bg-hover transition-colors group", children: [_jsx("td", { className: "px-3 py-2 text-2xs 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-muted italic opacity-50", children: t("databaseview.NULL") })) : (_jsx("span", { className: "text-txt", children: display })) }, col));
+                                })] }, rowKey));
+                    }) })] }) }));
 }
 export function PaginationBar({ total, offset, limit, onPrev, onNext, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     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 bg-card/60 backdrop-blur-md rounded-b-2xl text-xs-tight text-muted", children: [_jsx("span", { className: "font-medium", children: t("databaseview.RowCountSummary", {
-                    count: total.toLocaleString(),
+    return (_jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 bg-card/95 rounded-b-2xl text-xs-tight text-muted", children: [_jsx("span", { className: "font-medium", children: t("databaseview.RowCountSummary", {
+                    count: total.toLocaleString("en-US"),
                     rowLabel: total === 1
                         ? t("databaseview.row")
                         : t("common.rows", { defaultValue: "rows" }),
@@ -125,5 +138,5 @@ export function PaginationBar({ total, offset, limit, onPrev, onNext, }) {
                         })
                         : "",
                     defaultValue: "{{count}} {{rowLabel}}{{range}}",
-                }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[1.75rem] whitespace-normal break-words rounded-sm border-border/50 bg-bg/50 py-1 text-left text-xs-tight backdrop-blur-sm transition-[border-color,color,box-shadow] hover:border-accent hover:text-txt ", disabled: !hasPrev, onClick: onPrev, children: t("common.prev") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[1.75rem] whitespace-normal break-words rounded-sm border-border/50 bg-bg/50 py-1 text-left text-xs-tight backdrop-blur-sm transition-[border-color,color,box-shadow] hover:border-accent hover:text-txt ", disabled: !hasNext, onClick: onNext, children: t("common.next") })] })] }));
+                }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[1.75rem] whitespace-normal break-words rounded-sm border-border/50 bg-bg/50 py-1 text-left text-xs-tight transition-[border-color,color,box-shadow] hover:border-accent hover:text-txt ", disabled: !hasPrev, onClick: onPrev, children: t("common.prev") }), _jsx(Button, { variant: "outline", size: "sm", className: "h-auto min-h-[1.75rem] whitespace-normal break-words rounded-sm border-border/50 bg-bg/50 py-1 text-left text-xs-tight transition-[border-color,color,box-shadow] hover:border-accent hover:text-txt ", disabled: !hasNext, onClick: onNext, children: t("common.next") })] })] }));
 }

package/components/pages/documents-detail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"documents-detail.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/documents-detail.tsx"],"names":[],"mappings":"AAuCA,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,SAAS,GACV,EAAE;IACD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,2CA2VA"}
+{"version":3,"file":"documents-detail.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/documents-detail.tsx"],"names":[],"mappings":"AAiDA,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,SAAS,GACV,EAAE;IACD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,2CAobA"}

package/components/pages/documents-detail.helpers.d.ts

@@ -1,4 +1,4 @@
-import type { DocumentRecord } from "../../api/client-types-chat";
+import type { DocumentRecord } from "../../api/client-types-chat.js";
 export declare function getDocumentTypeLabel(contentType?: string): string;
 export declare function getDocumentSourceLabel(source: string | undefined, t: (key: string, options?: Record<string, unknown>) => string): string;
 export declare function getDocumentSummary(doc: DocumentRecord, t: (key: string, options?: Record<string, unknown>) => string): string;