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

package/components/pages/HeartbeatsView.js

@@ -3,14 +3,11 @@ import { CheckCircle2, Plus, X, XCircle } from "lucide-react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { PageLayout } from "../../layouts/page-layout/page-layout.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
 import { confirmDesktopAction } from "../../utils/index.js";
 import { formatDateTime, formatDurationMs } from "../../utils/format.js";
 import { detectUiHostCapabilities } from "../../utils/host-capabilities.js";
-// Direct sub-path import to avoid the widgets/index.ts ↔ WidgetHost.tsx
-// chunk-level circular dependency.
-import { WidgetHost } from "../../widgets/WidgetHost.js";
 import { ChatSearchHint } from "../composites/chat-search-hint.js";
 import { PagePanel } from "../composites/page-panel/index.js";
 import { SidebarCollapsedActionButton } from "../composites/sidebar/sidebar-collapsed-rail.js";
@@ -61,7 +58,25 @@ function LongRunningHostBanner({ triggers }) {
 function useHeartbeatsViewController() {
     const { triggers = [], triggersLoaded = false, triggersLoading = false, triggersSaving = false, triggerRunsById = {}, triggerHealth: _triggerHealth = null, triggerError = null, loadTriggers = async () => { }, createTrigger = async () => null, updateTrigger = async () => null, deleteTrigger = async () => true, runTriggerNow = async () => true, loadTriggerRuns = async () => { }, loadTriggerHealth = async () => { }, ensureTriggersLoaded = async () => {
         await loadTriggers(triggersLoaded ? { silent: true } : undefined);
-    }, t, uiLanguage, } = useApp();
+    }, t, uiLanguage, } = useAppSelectorShallow((s) => ({
+        triggers: s.triggers,
+        triggersLoaded: s.triggersLoaded,
+        triggersLoading: s.triggersLoading,
+        triggersSaving: s.triggersSaving,
+        triggerRunsById: s.triggerRunsById,
+        triggerHealth: s.triggerHealth,
+        triggerError: s.triggerError,
+        loadTriggers: s.loadTriggers,
+        createTrigger: s.createTrigger,
+        updateTrigger: s.updateTrigger,
+        deleteTrigger: s.deleteTrigger,
+        runTriggerNow: s.runTriggerNow,
+        loadTriggerRuns: s.loadTriggerRuns,
+        loadTriggerHealth: s.loadTriggerHealth,
+        ensureTriggersLoaded: s.ensureTriggersLoaded,
+        t: s.t,
+        uiLanguage: s.uiLanguage,
+    }));
     const [form, setForm] = useState(emptyForm);
     const [editingId, setEditingId] = useState(null);
     const [selectedTriggerId, setSelectedTriggerId] = useState(null);
@@ -476,7 +491,7 @@ function HeartbeatsLayout() {
                                                 deleteUserTemplate(template.id);
                                             }, children: _jsx(X, { className: "h-3.5 w-3.5", "aria-hidden": true }) }))] }, template.id));
                             })] })] }) }) }));
-    return (_jsx(ShellViewAgentSurface, { viewId: "heartbeats", children: _jsx(PageLayout, { className: "h-full bg-transparent", "data-testid": "heartbeats-shell", sidebar: heartbeatsSidebar, contentInnerClassName: "mx-auto w-full max-w-[96rem]", footer: _jsx(WidgetHost, { slot: "heartbeats", className: "py-3" }), mobileSidebarLabel: mobileSidebarLabel, children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [showDetailPane ? (_jsx("button", { type: "button", className: "mb-3 flex items-center gap-2 rounded-sm border border-border/30 bg-bg/25 px-4 py-3 text-base font-medium text-muted hover:text-txt md:hidden", onClick: () => {
+    return (_jsx(ShellViewAgentSurface, { viewId: "heartbeats", children: _jsx(PageLayout, { className: "h-full bg-transparent", "data-testid": "heartbeats-shell", sidebar: heartbeatsSidebar, contentInnerClassName: "mx-auto w-full max-w-[96rem]", mobileSidebarLabel: mobileSidebarLabel, children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [showDetailPane ? (_jsx("button", { type: "button", className: "mb-3 flex items-center gap-2 rounded-sm border border-border/30 bg-bg/25 px-4 py-3 text-base font-medium text-muted hover:text-txt md:hidden", onClick: () => {
                             setSelectedTriggerId(null);
                             setEditorOpen(false);
                             setEditingId(null);

package/components/pages/LogsView.d.ts

@@ -1,10 +1,4 @@
 import { type ReactNode } from "react";
-/**
- * Logs page — formerly split across `LogsPageView` (a 17-LOC ContentLayout
- * wrapper) and `LogsView` (the panel). Folded into one component since
- * neither caller passed contentHeader/inModal — both props default to
- * the same shape the wrapper used to apply.
- */
 export declare function LogsView({ contentHeader, inModal, }?: {
     contentHeader?: ReactNode;
     inModal?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"LogsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/LogsView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AA8BrE;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CAQL"}
+{"version":3,"file":"LogsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/LogsView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AA0G3E,wBAAgB,QAAQ,CAAC,EACvB,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CAQL"}

package/components/pages/LogsView.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
+import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
 import { ContentLayout } from "../../layouts/content-layout/content-layout.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
 import { formatTime } from "../../utils/format.js";
 import { ChatSearchHint } from "../composites/chat-search-hint.js";
@@ -26,6 +27,28 @@ function logEntryKey(entry) {
  * neither caller passed contentHeader/inModal — both props default to
  * the same shape the wrapper used to apply.
  */
+// Memoized so the live-tail (which appends entries and re-renders the list)
+// reconciles only NEW rows — each existing `entry` is a stable object, so memo
+// skips re-rendering (and re-formatting) every prior row on every tail update.
+const LogRow = memo(function LogRow({ entry }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1 px-3 py-3 text-sm md:flex-row md:items-start md:gap-3", "data-testid": "log-entry", children: [_jsx("span", { className: "shrink-0 whitespace-nowrap text-xs-tight text-muted tabular-nums md:w-[5.75rem]", children: formatTime(entry.timestamp, { fallback: "—" }) }), _jsx("span", { className: `shrink-0 font-semibold uppercase tracking-[0.08em] text-xs-tight md:w-14 ${entry.level === "error"
+                    ? "text-danger"
+                    : entry.level === "warn"
+                        ? "text-warning"
+                        : entry.level === "info"
+                            ? "text-muted-strong"
+                            : entry.level === "debug"
+                                ? "text-muted"
+                                : "text-muted"}`, children: entry.level }), _jsxs("span", { className: "min-w-0 shrink-0 break-words text-xs-tight text-muted md:w-20 md:truncate", children: ["[", entry.source, "]"] }), _jsx("span", { className: "inline-flex max-w-full shrink-0 flex-wrap gap-1 md:max-w-[14rem]", children: (entry.tags ?? []).map((t) => {
+                    return (_jsx("span", { className: `inline-flex items-center rounded-full border px-2 py-0.5 text-2xs font-medium ${{
+                            agent: "border-accent/25 bg-accent/10 text-accent-fg",
+                            cloud: "border-accent/20 bg-accent/8 text-accent",
+                            plugins: "border-accent/25 bg-accent/10 text-accent-fg",
+                        }[t] ?? "border-border/35 bg-bg-hover text-muted-strong"}`, style: {
+                            fontFamily: "var(--font-body, sans-serif)",
+                        }, children: _jsx("span", { className: "break-all", children: t }) }, t));
+                }) }), _jsx("span", { className: "min-w-0 flex-1 break-words leading-6 text-txt", children: entry.message })] }));
+});
 export function LogsView({ contentHeader, inModal, } = {}) {
     return (_jsx(ShellViewAgentSurface, { viewId: "logs", children: _jsx(ContentLayout, { contentHeader: contentHeader, inModal: inModal, children: _jsx(LogsViewBody, {}) }) }));
 }
@@ -35,7 +58,18 @@ function LogsViewBody() {
     // locally: until the first loadLogs() settles we show a loading state
     // instead of the "no entries yet" empty state (which is misleading mid-load).
     const [initialLoading, setInitialLoading] = useState(true);
-    const { logs, logSources, logTags, logTagFilter, logLevelFilter, logSourceFilter, logLoadError, loadLogs, setState, t, } = useApp();
+    const { logs, logSources, logTags, logTagFilter, logLevelFilter, logSourceFilter, logLoadError, loadLogs, setState, t, } = useAppSelectorShallow((s) => ({
+        logs: s.logs,
+        logSources: s.logSources,
+        logTags: s.logTags,
+        logTagFilter: s.logTagFilter,
+        logLevelFilter: s.logLevelFilter,
+        logSourceFilter: s.logSourceFilter,
+        logLoadError: s.logLoadError,
+        loadLogs: s.loadLogs,
+        setState: s.setState,
+        t: s.t,
+    }));
     // The floating chat composer becomes this view's search box: while Logs is
     // open it takes over the composer placeholder and feeds the live draft into
     // searchQuery via onQuery. setSearchQuery is a stable useState setter.
@@ -50,14 +84,13 @@ function LogsViewBody() {
             if (!cancelled)
                 setInitialLoading(false);
         });
-        const interval = setInterval(() => {
-            void loadLogs();
-        }, 5000);
         return () => {
             cancelled = true;
-            clearInterval(interval);
         };
     }, [loadLogs]);
+    // Live tail only ticks while the document is visible; pauses when the
+    // tab/window is hidden and resumes on visibilitychange.
+    useIntervalWhenDocumentVisible(() => void loadLogs(), 5000);
     const handleClearFilters = () => {
         setState("logTagFilter", "");
         setState("logLevelFilter", "");
@@ -133,22 +166,5 @@ function LogsViewBody() {
                         ? t("logsview.NoLogEntriesMatchingFiltersDescription")
                         : t("logsview.NoLogEntriesYetDescription"), title: t(hasActiveFilters
                         ? "logsview.NoLogEntriesMatchingFilters"
-                        : "logsview.NoLogEntriesYet") })) : (_jsx(PagePanel, { variant: "inset", className: "overflow-hidden rounded-sm", children: filteredLogs.map((entry) => (_jsxs("div", { className: "flex flex-col gap-1 px-3 py-3 text-sm md:flex-row md:items-start md:gap-3", "data-testid": "log-entry", children: [_jsx("span", { className: "shrink-0 whitespace-nowrap text-xs-tight text-muted tabular-nums md:w-[5.75rem]", children: formatTime(entry.timestamp, { fallback: "—" }) }), _jsx("span", { className: `shrink-0 font-semibold uppercase tracking-[0.08em] text-xs-tight md:w-14 ${entry.level === "error"
-                                    ? "text-danger"
-                                    : entry.level === "warn"
-                                        ? "text-warning"
-                                        : entry.level === "info"
-                                            ? "text-muted-strong"
-                                            : entry.level === "debug"
-                                                ? "text-muted"
-                                                : "text-muted"}`, children: entry.level }), _jsxs("span", { className: "min-w-0 shrink-0 break-words text-xs-tight text-muted md:w-20 md:truncate", children: ["[", entry.source, "]"] }), _jsx("span", { className: "inline-flex max-w-full shrink-0 flex-wrap gap-1 md:max-w-[14rem]", children: (entry.tags ?? []).map((t) => {
-                                    return (_jsx("span", { className: `inline-flex items-center rounded-full border px-2 py-0.5 text-2xs font-medium ${{
-                                            agent: "border-accent/25 bg-accent/10 text-accent-fg",
-                                            cloud: "border-accent/20 bg-accent/8 text-accent",
-                                            plugins: "border-accent/25 bg-accent/10 text-accent-fg",
-                                        }[t] ??
-                                            "border-border/35 bg-bg-hover text-muted-strong"}`, style: {
-                                            fontFamily: "var(--font-body, sans-serif)",
-                                        }, children: _jsx("span", { className: "break-all", children: t }) }, t));
-                                }) }), _jsx("span", { className: "min-w-0 flex-1 break-words leading-6 text-txt", children: entry.message })] }, logEntryKey(entry)))) })) })] }));
+                        : "logsview.NoLogEntriesYet") })) : (_jsx(PagePanel, { variant: "inset", className: "overflow-hidden rounded-sm", children: filteredLogs.map((entry) => (_jsx(LogRow, { entry: entry }, logEntryKey(entry)))) })) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"MediaGalleryView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/MediaGalleryView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoQvC,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,aAAa,GACd,EAAE;IACD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,2CA4UA"}
+{"version":3,"file":"MediaGalleryView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/MediaGalleryView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0QvC,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,aAAa,GACd,EAAE;IACD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,2CAmZA"}

package/components/pages/MediaGalleryView.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { Download, Share2 } from "lucide-react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
 import { PageLayout } from "../../layouts/page-layout/page-layout.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
 import { resolveAppAssetUrl } from "../../utils/index.js";
+import { canShareFiles, downloadAttachment, filenameForMime, shareAttachment, } from "../../utils/download-share.js";
 import { ChatSearchHint } from "../composites/chat-search-hint.js";
 import { PagePanel } from "../composites/page-panel/index.js";
 import { MetaPill } from "../composites/page-panel/page-panel-header.js";
@@ -161,7 +163,7 @@ function MediaFilterChip({ chip, label, isActive, onSelect, }) {
             ? "border-accent/35 bg-accent/14 text-txt-strong"
             : "border-border/45 bg-bg/35 text-muted hover:border-border/60 hover:bg-bg-hover hover:text-txt"}`, onClick: () => onSelect(chip), ...agentProps, children: label }));
 }
-function MediaListItem({ item, index, isActive, typeLabel, fallbackTitle, onSelect, }) {
+const MediaListItem = memo(function MediaListItem({ item, index, isActive, typeLabel, fallbackTitle, onSelect, }) {
     const title = item.filename || fallbackTitle;
     const { ref, agentProps } = useAgentElement({
         id: `media-item-${index}`,
@@ -173,12 +175,13 @@ function MediaListItem({ item, index, isActive, typeLabel, fallbackTitle, onSele
         onActivate: () => onSelect(item.url),
     });
     return (_jsxs(SidebarContent.Item, { ref: ref, active: isActive, "aria-current": isActive ? "true" : undefined, onClick: () => onSelect(item.url), ...agentProps, children: [_jsx(SidebarContent.ItemIcon, { active: isActive, children: item.type.slice(0, 1).toUpperCase() }), _jsxs(SidebarContent.ItemBody, { children: [_jsx(SidebarContent.ItemTitle, { className: "truncate", children: title }), _jsxs(SidebarContent.ItemDescription, { children: [_jsx("span", { className: "truncate", children: item.source }), _jsx("span", { className: "rounded-full border border-border/45 px-2 py-0.5 uppercase tracking-[0.16em]", children: typeLabel })] })] })] }));
-}
+});
 export function MediaGalleryView({ leftNav, contentHeader, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [media, setMedia] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState("");
+    const mountedRef = useRef(true);
     const [filter, setFilter] = useState("all");
     const [search, setSearch] = useState("");
     const [selectedMediaUrl, setSelectedMediaUrl] = useState(null);
@@ -238,18 +241,28 @@ export function MediaGalleryView({ leftNav, contentHeader, }) {
                     return -1;
                 return b.createdAt.localeCompare(a.createdAt);
             });
+            if (!mountedRef.current)
+                return;
             setMedia(allMedia);
         }
         catch (err) {
+            if (!mountedRef.current)
+                return;
             setError(t("mediagalleryview.LoadFailed", {
                 message: err instanceof Error ? err.message : "error",
                 defaultValue: "Failed to load media: {{message}}",
             }));
         }
-        setLoading(false);
+        if (mountedRef.current) {
+            setLoading(false);
+        }
     }, [t]);
     useEffect(() => {
-        loadMedia();
+        mountedRef.current = true;
+        void loadMedia();
+        return () => {
+            mountedRef.current = false;
+        };
     }, [loadMedia]);
     const filtered = useMemo(() => media.filter((m) => {
         if (filter !== "all" && m.type !== filter)
@@ -273,6 +286,39 @@ export function MediaGalleryView({ leftNav, contentHeader, }) {
     const selectedItem = filtered.find((item) => item.url === selectedMediaUrl) ??
         filtered[0] ??
         null;
+    const mediaItemFallbackTitle = t("mediagalleryview.MediaItem", {
+        defaultValue: "Media item",
+    });
+    const shareSupported = useMemo(() => canShareFiles(), []);
+    const handleDownloadSelected = useCallback(async () => {
+        if (!selectedItem)
+            return;
+        const url = normalizeMediaUrl(selectedItem.url);
+        const mime = selectedItem.type === "image"
+            ? "image/png"
+            : selectedItem.type === "video"
+                ? "video/mp4"
+                : "audio/mpeg";
+        const filename = selectedItem.filename || filenameForMime(mime);
+        try {
+            await downloadAttachment(url, filename);
+        }
+        catch {
+            // Download failed for this transport — nothing more we can do client-side.
+        }
+    }, [selectedItem]);
+    const handleShareSelected = useCallback(async () => {
+        if (!selectedItem)
+            return;
+        const url = normalizeMediaUrl(selectedItem.url);
+        const title = selectedItem.filename || mediaItemFallbackTitle;
+        const shared = await shareAttachment(url, {
+            title,
+            filename: selectedItem.filename || undefined,
+        });
+        if (!shared)
+            await handleDownloadSelected();
+    }, [handleDownloadSelected, mediaItemFallbackTitle, selectedItem]);
     const mediaSidebar = (_jsx(AppPageSidebar, { testId: "media-sidebar", collapsible: true, contentIdentity: "media", children: _jsxs(SidebarPanel, { children: [_jsxs("div", { className: "space-y-3 pt-4", children: [leftNav, _jsxs(PagePanel.SummaryCard, { children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: filtered.length === 1
                                         ? t("mediagalleryview.ItemCountOne", {
                                             count: filtered.length,
@@ -287,9 +333,7 @@ export function MediaGalleryView({ leftNav, contentHeader, }) {
                                             })
                                             : mediaTypeLabel(t, filter) }) }), _jsx(ChatSearchHint, { noun: "media", query: search, className: "mt-3" })] })] }), _jsx("div", { className: "space-y-3 pt-4", children: _jsx("div", { className: "grid grid-cols-2 gap-1.5", children: FILTER_CHIPS.map((chip) => (_jsx(MediaFilterChip, { chip: chip, label: mediaTypeLabel(t, chip), isActive: filter === chip, onSelect: setFilter }, chip))) }) }), _jsx(SidebarScrollRegion, { className: "mt-3 space-y-1.5", children: loading ? (_jsx(SidebarContent.EmptyState, { children: t("mediagalleryview.ScanningForMedia") })) : filtered.length === 0 ? (_jsx(SidebarContent.EmptyState, { children: t("mediagalleryview.NoMediaFound") })) : (filtered.map((item, index) => (_jsx(MediaListItem
                     // biome-ignore lint/suspicious/noArrayIndexKey: stable url plus index tiebreaker
-                    , { item: item, index: index, isActive: selectedItem?.url === item.url, typeLabel: mediaTypeLabel(t, item.type), fallbackTitle: t("mediagalleryview.MediaItem", {
-                            defaultValue: "Media item",
-                        }), onSelect: setSelectedMediaUrl }, `${item.url}-${index}`)))) })] }) }));
+                    , { item: item, index: index, isActive: selectedItem?.url === item.url, typeLabel: mediaTypeLabel(t, item.type), fallbackTitle: mediaItemFallbackTitle, onSelect: setSelectedMediaUrl }, `${item.url}-${index}`)))) })] }) }));
     return (_jsx(PageLayout, { sidebar: mediaSidebar, contentHeader: contentHeader, contentInnerClassName: "w-full min-h-0", children: _jsx("div", { className: "flex min-h-0 flex-1 flex-col w-full", children: error ? (_jsx("div", { className: "mb-4 rounded-sm border border-danger/35 bg-danger/10 px-4 py-3 text-sm text-danger", children: error })) : loading ? (_jsx("div", { className: "flex flex-1 items-center justify-center text-sm italic text-muted", children: t("mediagalleryview.ScanningForMedia") })) : !selectedItem ? (_jsx(PagePanel.Empty, { variant: "surface", className: "min-h-[18rem] rounded-sm px-5 py-10", title: t("mediagalleryview.NoMediaFound"), description: media.length === 0
                     ? t("mediagalleryview.NoMediaDetectedDescription", {
                         defaultValue: "No images, videos, or audio files were detected in the database.",
@@ -301,7 +345,11 @@ export function MediaGalleryView({ leftNav, contentHeader, }) {
                                                 defaultValue: "Media item",
                                             }) }), _jsx("span", { className: "rounded-full border border-accent/30 bg-accent/12 px-3 py-1 text-xs-tight font-semibold uppercase tracking-[0.16em] text-accent-fg", children: mediaTypeLabel(t, selectedItem.type) })] }), _jsxs("div", { className: "mt-2 text-sm text-muted", children: [t("common.source", {
                                         defaultValue: "Source:",
-                                    }), " ", selectedItem.source, selectedItem.createdAt ? ` · ${selectedItem.createdAt}` : ""] })] }), _jsx(PagePanel, { variant: "inset", className: "mt-4 flex min-h-[22rem] flex-1 items-center justify-center p-6", children: selectedItem.type === "image" ? (_jsx("img", { src: normalizeMediaUrl(selectedItem.url), alt: selectedItem.filename, className: "max-h-[32rem] max-w-full rounded-sm object-contain" })) : selectedItem.type === "video" ? (_jsx("video", { src: normalizeMediaUrl(selectedItem.url), controls: true, className: "max-h-[32rem] max-w-full rounded-sm", children: _jsx("track", { kind: "captions" }) })) : (_jsxs("div", { className: "flex w-full max-w-xl flex-col items-center gap-5 rounded-sm border border-border/35 bg-bg/35 px-8 py-10 text-center", children: [_jsx("div", { className: "text-lg font-semibold text-txt", children: t("mediagalleryview.AudioPreview", {
+                                    }), " ", selectedItem.source, selectedItem.createdAt ? ` · ${selectedItem.createdAt}` : ""] }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "rounded-sm", "data-testid": "media-download", onClick: () => void handleDownloadSelected(), children: [_jsx(Download, { className: "mr-1.5 h-4 w-4", "aria-hidden": true }), t("mediagalleryview.Download", {
+                                                defaultValue: "Download",
+                                            })] }), shareSupported ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "rounded-sm", "data-testid": "media-share", onClick: () => void handleShareSelected(), children: [_jsx(Share2, { className: "mr-1.5 h-4 w-4", "aria-hidden": true }), t("mediagalleryview.Share", {
+                                                defaultValue: "Share",
+                                            })] })) : null] })] }), _jsx(PagePanel, { variant: "inset", className: "mt-4 flex min-h-[22rem] flex-1 items-center justify-center p-6", children: selectedItem.type === "image" ? (_jsx("img", { src: normalizeMediaUrl(selectedItem.url), alt: selectedItem.filename, className: "max-h-[32rem] max-w-full rounded-sm object-contain" })) : selectedItem.type === "video" ? (_jsx("video", { src: normalizeMediaUrl(selectedItem.url), controls: true, className: "max-h-[32rem] max-w-full rounded-sm", children: _jsx("track", { kind: "captions" }) })) : (_jsxs("div", { className: "flex w-full max-w-xl flex-col items-center gap-5 rounded-sm border border-border/35 bg-bg/35 px-8 py-10 text-center", children: [_jsx("div", { className: "text-lg font-semibold text-txt", children: t("mediagalleryview.AudioPreview", {
                                         defaultValue: "Audio Preview",
                                     }) }), _jsx("audio", { src: normalizeMediaUrl(selectedItem.url), controls: true, className: "w-full", children: _jsx("track", { kind: "captions" }) })] })) }), _jsxs("div", { className: "mt-5 rounded-sm border border-border/40 bg-card/45 px-5 py-4 text-sm text-muted", children: [_jsx("div", { className: "text-2xs font-semibold uppercase tracking-[0.16em] text-muted/60", children: t("mediagalleryview.MediaDetails", {
                                     defaultValue: "Media Details",

package/components/pages/MemoryDetailPanel.d.ts

@@ -1,4 +1,4 @@
-import type { MemoryRecord } from "./vector-browser-utils";
+import type { MemoryRecord } from "./vector-browser-utils.js";
 export declare function MemoryDetailPanel({ memory }: {
     memory: MemoryRecord | null;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"MemoryDetailPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/MemoryDetailPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;CAAE,2CA6H5E"}
+{"version":3,"file":"MemoryDetailPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/MemoryDetailPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;CAAE,2CAwI5E"}

package/components/pages/MemoryDetailPanel.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useApp } from "../../state/index.js";
+import { useMemo } from "react";
+import { useTranslation } from "../../state/index.js";
 import { PagePanel } from "../composites/page-panel/index.js";
 import { CodeBlock } from "../ui/code-block.js";
 export function MemoryDetailPanel({ memory }) {
-    const { t } = useApp();
+    const { t } = useTranslation();
+    const embeddingText = useMemo(() => memory?.embedding
+        ? `[${memory.embedding.map((v) => v.toFixed(6)).join(", ")}]`
+        : null, [memory?.embedding]);
+    const rawJson = useMemo(() => JSON.stringify(memory?.raw, null, 2), [memory?.raw]);
     if (!memory) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center p-8", children: _jsxs("div", { className: "rounded-sm border border-border/35 bg-bg/35 px-8 py-10 text-center ", children: [_jsx("div", { className: "text-base font-semibold text-txt", children: t("vectorbrowserview.MemoryDetail") }), _jsx("div", { className: "mt-2 max-w-sm text-sm text-muted", children: t("vectorbrowserview.MemorySelectionHint", {
                             defaultValue: "Select a memory from the sidebar to inspect its content, metadata, and embedding values.",
@@ -14,5 +19,5 @@ export function MemoryDetailPanel({ memory }) {
                                     : t("vectorbrowserview.MemoryDetail") }), memory.unique ? (_jsx("span", { className: "rounded-full border border-accent/30 bg-accent/12 px-3 py-1 text-xs-tight font-semibold uppercase tracking-[0.16em] text-accent-fg", children: t("vectorbrowserview.Unique", { defaultValue: "Unique" }) })) : null] }), _jsxs("div", { className: "mt-2 text-sm text-muted", children: [memory.createdAt ||
                                 t("vectorbrowserview.NoTimestamp", {
                                     defaultValue: "No timestamp",
-                                }), " ", memory.id ? `· ${memory.id}` : ""] })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-5 overflow-auto p-6", children: [_jsxs(PagePanel, { variant: "inset", className: "p-5", children: [_jsx("div", { className: "text-xs-tight font-bold uppercase tracking-[0.16em] text-muted/60", children: t("vectorbrowserview.Content") }), _jsx("div", { className: "mt-3 whitespace-pre-wrap break-words text-sm leading-7 text-txt", children: memory.content || "(empty)" })] }), _jsxs("section", { className: "rounded-sm border border-border/40 bg-card/45 p-5", children: [_jsx("div", { className: "text-xs-tight font-bold uppercase tracking-[0.16em] text-muted/60", children: t("vectorbrowserview.Metadata") }), _jsxs("div", { className: "mt-4 grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.16em] text-muted/60", children: t("vectorbrowserview.ID", { defaultValue: "ID" }) }), _jsx("div", { className: "mt-1 break-all font-mono text-sm text-txt", children: memory.id || "—" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.16em] text-muted/60", children: t("common.type") }), _jsx("div", { className: "mt-1 text-sm text-txt", children: memory.type || "—" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.16em] text-muted/60", children: t("vectorbrowserview.Room") }), _jsx("div", { className: "mt-1 break-all font-mono text-sm text-txt", children: memory.roomId || "—" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.16em] text-muted/60", children: t("vectorbrowserview.Entity") }), _jsx("div", { className: "mt-1 break-all font-mono text-sm text-txt", children: memory.entityId || "—" })] })] })] }), memory.embedding ? (_jsxs("section", { className: "rounded-sm border border-border/40 bg-card/45 p-5", children: [_jsxs("div", { className: "text-xs-tight font-bold uppercase tracking-[0.16em] text-muted/60", children: [t("vectorbrowserview.Embedding"), " · ", memory.embedding.length, " ", t("vectorbrowserview.dimensions")] }), _jsx(CodeBlock, { value: `[${memory.embedding.map((v) => v.toFixed(6)).join(", ")}]`, wrap: true, copyable: true, className: "mt-3 max-h-[16rem]" })] })) : null, _jsxs("details", { className: "rounded-sm border border-border/40 bg-card/45 p-5", children: [_jsx("summary", { className: "cursor-pointer text-xs-tight font-bold uppercase tracking-[0.16em] text-muted/60 hover:text-txt", children: t("vectorbrowserview.RawRecord") }), _jsx(CodeBlock, { value: JSON.stringify(memory.raw, null, 2), wrap: true, copyable: true, className: "mt-3 max-h-[18rem]" })] })] })] }));
+                                }), " ", memory.id ? `· ${memory.id}` : ""] })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-5 overflow-auto p-6", children: [_jsxs(PagePanel, { variant: "inset", className: "p-5", children: [_jsx("div", { className: "text-xs-tight font-bold uppercase tracking-[0.16em] text-muted/60", children: t("vectorbrowserview.Content") }), _jsx("div", { className: "mt-3 whitespace-pre-wrap break-words text-sm leading-7 text-txt", children: memory.content || "(empty)" })] }), _jsxs("section", { className: "rounded-sm border border-border/40 bg-card/45 p-5", children: [_jsx("div", { className: "text-xs-tight font-bold uppercase tracking-[0.16em] text-muted/60", children: t("vectorbrowserview.Metadata") }), _jsxs("div", { className: "mt-4 grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.16em] text-muted/60", children: t("vectorbrowserview.ID", { defaultValue: "ID" }) }), _jsx("div", { className: "mt-1 break-all font-mono text-sm text-txt", children: memory.id || "—" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.16em] text-muted/60", children: t("common.type") }), _jsx("div", { className: "mt-1 text-sm text-txt", children: memory.type || "—" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.16em] text-muted/60", children: t("vectorbrowserview.Room") }), _jsx("div", { className: "mt-1 break-all font-mono text-sm text-txt", children: memory.roomId || "—" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.16em] text-muted/60", children: t("vectorbrowserview.Entity") }), _jsx("div", { className: "mt-1 break-all font-mono text-sm text-txt", children: memory.entityId || "—" })] })] })] }), memory.embedding ? (_jsxs("section", { className: "rounded-sm border border-border/40 bg-card/45 p-5", children: [_jsxs("div", { className: "text-xs-tight font-bold uppercase tracking-[0.16em] text-muted/60", children: [t("vectorbrowserview.Embedding"), " · ", memory.embedding.length, " ", t("vectorbrowserview.dimensions")] }), _jsx(CodeBlock, { value: embeddingText ?? "", wrap: true, copyable: true, className: "mt-3 max-h-[16rem]" })] })) : null, _jsxs("details", { className: "rounded-sm border border-border/40 bg-card/45 p-5", children: [_jsx("summary", { className: "cursor-pointer text-xs-tight font-bold uppercase tracking-[0.16em] text-muted/60 hover:text-txt", children: t("vectorbrowserview.RawRecord") }), _jsx(CodeBlock, { value: rawJson, wrap: true, copyable: true, className: "mt-3 max-h-[18rem]" })] })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"MemoryViewerView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/MemoryViewerView.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAknBf,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;CACtB,2CAmQL"}
+{"version":3,"file":"MemoryViewerView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/MemoryViewerView.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAmnBf,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;CACtB,2CAuQL"}

package/components/pages/MemoryViewerView.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Brain, FileText, MessageSquareText, Search, Sparkles, } from "lucide-react";
-import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState, } from "react";
+import { memo, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState, } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/client.js";
 import { getCached, setCached } from "../../hooks/resource-cache.js";
+import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
 import { PageLayout } from "../../layouts/page-layout/page-layout.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { useTranslation, } from "../../state/TranslationContext.hooks.js";
 import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
 import { formatDateTime } from "../../utils/format.js";
@@ -106,14 +107,14 @@ function formatRelativeTime(timestamp, t) {
     return formatDateTime(timestamp, { fallback: unknown });
 }
 // ── Memory Card ──────────────────────────────────────────────────────────
-function MemoryCard({ memory, expanded, onToggle, }) {
+const MemoryCard = memo(function MemoryCard({ memory, expanded, onToggle, }) {
     const { t } = useTranslation();
     const typeKey = memoryTypeKey(memory.type);
     const text = memory.text || t("memoryviewer.empty.value", { defaultValue: "(empty)" });
-    return (_jsxs("button", { type: "button", className: "w-full text-left rounded-sm px-3.5 py-3 transition-colors hover:bg-bg-hover", onClick: onToggle, "data-testid": `memory-card-${memory.id}`, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs-tight text-muted", children: [_jsx("span", { className: `memory-type-dot-${typeKey} inline-block h-2 w-2 rounded-full` }), typeLabel(memory.type, t)] }), memory.source ? (_jsx("span", { className: "text-xs-tight text-muted/70", children: memory.source })) : null, _jsx("span", { className: "ml-auto text-xs-tight text-muted", children: formatRelativeTime(memory.createdAt, t) })] }), _jsx("div", { className: "mt-2 text-sm leading-6 text-txt", children: expanded ? text : truncateText(text) }), expanded ? (_jsxs("div", { className: "mt-3 space-y-1.5 pt-3", children: [memory.entityId ? (_jsxs("div", { className: "text-xs-tight text-muted", children: [_jsx("span", { className: "text-muted/70", children: t("memoryviewer.field.entity", { defaultValue: "Entity" }) }), " ", _jsx("span", { className: "font-mono text-2xs", children: memory.entityId })] })) : null, memory.roomId ? (_jsxs("div", { className: "text-xs-tight text-muted", children: [_jsx("span", { className: "text-muted/70", children: t("memoryviewer.field.room", { defaultValue: "Room" }) }), " ", _jsx("span", { className: "font-mono text-2xs", children: memory.roomId })] })) : null, _jsxs("div", { className: "text-xs-tight text-muted", children: [_jsx("span", { className: "text-muted/70", children: t("memoryviewer.field.created", { defaultValue: "Created" }) }), " ", formatDateTime(memory.createdAt, {
+    return (_jsxs("button", { type: "button", className: "w-full text-left rounded-sm px-3.5 py-3 transition-colors hover:bg-bg-hover", onClick: () => onToggle(memory.id), "data-testid": `memory-card-${memory.id}`, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs-tight text-muted", children: [_jsx("span", { className: `memory-type-dot-${typeKey} inline-block h-2 w-2 rounded-full` }), typeLabel(memory.type, t)] }), memory.source ? (_jsx("span", { className: "text-xs-tight text-muted/70", children: memory.source })) : null, _jsx("span", { className: "ml-auto text-xs-tight text-muted", children: formatRelativeTime(memory.createdAt, t) })] }), _jsx("div", { className: "mt-2 text-sm leading-6 text-txt", children: expanded ? text : truncateText(text) }), expanded ? (_jsxs("div", { className: "mt-3 space-y-1.5 pt-3", children: [memory.entityId ? (_jsxs("div", { className: "text-xs-tight text-muted", children: [_jsx("span", { className: "text-muted/70", children: t("memoryviewer.field.entity", { defaultValue: "Entity" }) }), " ", _jsx("span", { className: "font-mono text-2xs", children: memory.entityId })] })) : null, memory.roomId ? (_jsxs("div", { className: "text-xs-tight text-muted", children: [_jsx("span", { className: "text-muted/70", children: t("memoryviewer.field.room", { defaultValue: "Room" }) }), " ", _jsx("span", { className: "font-mono text-2xs", children: memory.roomId })] })) : null, _jsxs("div", { className: "text-xs-tight text-muted", children: [_jsx("span", { className: "text-muted/70", children: t("memoryviewer.field.created", { defaultValue: "Created" }) }), " ", formatDateTime(memory.createdAt, {
                                 fallback: t("memoryviewer.unknown", { defaultValue: "unknown" }),
                             })] }), _jsxs("div", { className: "text-xs-tight text-muted", children: [_jsx("span", { className: "text-muted/70", children: t("memoryviewer.field.id", { defaultValue: "ID" }) }), " ", _jsx("span", { className: "font-mono text-2xs", children: memory.id })] })] })) : null] }));
-}
+});
 // ── Memory Feed ──────────────────────────────────────────────────────────
 function MemoryFeedPanel({ typeFilter }) {
     const { t } = useTranslation();
@@ -128,6 +129,9 @@ function MemoryFeedPanel({ typeFilter }) {
     const [error, setError] = useState(null);
     const [expandedId, setExpandedId] = useState(null);
     const loadingMore = useRef(false);
+    const toggleExpanded = useCallback((id) => {
+        setExpandedId((prev) => (prev === id ? null : id));
+    }, []);
     const loadFeed = useCallback(async (before, options) => {
         if (loadingMore.current && before)
             return;
@@ -167,17 +171,17 @@ function MemoryFeedPanel({ typeFilter }) {
         }
     }, [typeFilter, t, feedCacheKey]);
     useEffect(() => {
-        // Revalidate silently when a cached page is already on screen, then poll
-        // for fresh memories so the feed stays current without a manual refresh.
+        // Revalidate silently when a cached page is already on screen.
         void loadFeed(undefined, {
             silent: getCached(feedCacheKey) != null,
         });
-        const interval = setInterval(() => {
-            if (!loadingMore.current)
-                void loadFeed(undefined, { silent: true });
-        }, FEED_POLL_MS);
-        return () => clearInterval(interval);
     }, [loadFeed, feedCacheKey]);
+    // Poll for fresh memories so the feed stays current without a manual refresh;
+    // pauses while the document is hidden and resumes on visibilitychange.
+    useIntervalWhenDocumentVisible(() => {
+        if (!loadingMore.current)
+            void loadFeed(undefined, { silent: true });
+    }, FEED_POLL_MS);
     const loadMore = () => {
         const last = feed[feed.length - 1];
         if (last)
@@ -187,7 +191,7 @@ function MemoryFeedPanel({ typeFilter }) {
         return _jsx(ListSkeleton, { rows: 6 });
     }
     if (error) {
-        return (_jsx("div", { className: "rounded-sm border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: error }));
+        return _jsx(PagePanel.Notice, { tone: "danger", children: error });
     }
     if (feed.length === 0) {
         return (_jsx(PagePanel.FeatureEmpty, { className: "min-h-[24rem]", features: MEMORY_FEED_EMPTY_FEATURES.map((feature) => ({
@@ -197,7 +201,7 @@ function MemoryFeedPanel({ typeFilter }) {
                 defaultValue: "No memories yet",
             }) }));
     }
-    return (_jsxs("div", { className: "divide-y divide-border/15", "data-testid": "memory-feed", children: [feed.map((memory) => (_jsx(MemoryCard, { memory: memory, expanded: expandedId === memory.id, onToggle: () => setExpandedId((prev) => (prev === memory.id ? null : memory.id)) }, memory.id))), hasMore ? (_jsx(Button, { type: "button", size: "sm", variant: "outline", className: "mt-3 w-full", onClick: loadMore, children: t("memoryviewer.loadOlder", { defaultValue: "Load older" }) })) : null] }));
+    return (_jsxs("div", { className: "divide-y divide-border/15", "data-testid": "memory-feed", children: [feed.map((memory) => (_jsx(MemoryCard, { memory: memory, expanded: expandedId === memory.id, onToggle: toggleExpanded }, memory.id))), hasMore ? (_jsx(Button, { type: "button", size: "sm", variant: "outline", className: "mt-3 w-full", onClick: loadMore, children: t("memoryviewer.loadOlder", { defaultValue: "Load older" }) })) : null] }));
 }
 // ── Memory Browser ───────────────────────────────────────────────────────
 function MemoryBrowserPanel({ typeFilter, entityId, entityIds, }) {
@@ -225,6 +229,9 @@ function MemoryBrowserPanel({ typeFilter, entityId, entityIds, }) {
     const [error, setError] = useState(null);
     const [expandedId, setExpandedId] = useState(null);
     const [offset, setOffset] = useState(0);
+    const toggleExpanded = useCallback((id) => {
+        setExpandedId((prev) => (prev === id ? null : id));
+    }, []);
     const loadMemories = useCallback(async (pageOffset, options) => {
         const cacheKey = `${browseKeyBase}:${pageOffset}`;
         if (!options?.silent)
@@ -288,14 +295,14 @@ function MemoryBrowserPanel({ typeFilter, entityId, entityIds, }) {
         description: "Go to the next page of memories",
         onActivate: () => handlePage("next"),
     });
-    return (_jsxs("div", { className: "space-y-3", "data-testid": "memory-browser", children: [entityId ? null : _jsx(ChatSearchHint, { noun: "memories", query: searchInput }), loading && !result ? (_jsx(ListSkeleton, { rows: 6 })) : error ? (_jsx("div", { className: "rounded-sm border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: error })) : !result || result.memories.length === 0 ? (_jsx(PagePanel.FeatureEmpty, { icon: Search, iconTone: "border-border/30 bg-bg-hover text-muted", title: t("memoryviewer.noMemoriesFound", {
+    return (_jsxs("div", { className: "space-y-3", "data-testid": "memory-browser", children: [entityId ? null : _jsx(ChatSearchHint, { noun: "memories", query: searchInput }), loading && !result ? (_jsx(ListSkeleton, { rows: 6 })) : error ? (_jsx(PagePanel.Notice, { tone: "danger", children: error })) : !result || result.memories.length === 0 ? (_jsx(PagePanel.FeatureEmpty, { icon: Search, iconTone: "border-border/30 bg-bg-hover text-muted", title: t("memoryviewer.noMemoriesFound", {
                     defaultValue: "No memories found",
                 }), children: _jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-x-4 gap-y-1.5", children: TYPE_KEYS.slice(0, 4).map((type) => (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs-tight text-muted", children: [_jsx("span", { className: `memory-type-dot-${type} inline-block h-2 w-2 rounded-full` }), typeLabel(type, t)] }, type))) }) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-xs-tight text-muted", children: [_jsx("span", { children: t("memoryviewer.pageRange", {
                                     start: offset + 1,
                                     end: offset + result.memories.length,
                                     total: result.total,
                                     defaultValue: "{{start}}–{{end}} of {{total}}",
-                                }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { ref: prevControl.ref, type: "button", size: "sm", variant: "ghost", disabled: offset === 0, onClick: () => handlePage("prev"), ...prevControl.agentProps, children: t("memoryviewer.prev", { defaultValue: "Prev" }) }), _jsx(Button, { ref: nextControl.ref, type: "button", size: "sm", variant: "ghost", disabled: offset + BROWSE_PAGE_SIZE >= result.total, onClick: () => handlePage("next"), ...nextControl.agentProps, children: t("memoryviewer.next", { defaultValue: "Next" }) })] })] }), result.memories.map((memory) => (_jsx(MemoryCard, { memory: memory, expanded: expandedId === memory.id, onToggle: () => setExpandedId((prev) => (prev === memory.id ? null : memory.id)) }, memory.id)))] }))] }));
+                                }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { ref: prevControl.ref, type: "button", size: "sm", variant: "ghost", disabled: offset === 0, onClick: () => handlePage("prev"), ...prevControl.agentProps, children: t("memoryviewer.prev", { defaultValue: "Prev" }) }), _jsx(Button, { ref: nextControl.ref, type: "button", size: "sm", variant: "ghost", disabled: offset + BROWSE_PAGE_SIZE >= result.total, onClick: () => handlePage("next"), ...nextControl.agentProps, children: t("memoryviewer.next", { defaultValue: "Next" }) })] })] }), result.memories.map((memory) => (_jsx(MemoryCard, { memory: memory, expanded: expandedId === memory.id, onToggle: toggleExpanded }, memory.id)))] }))] }));
 }
 // ── Sidebar controls ─────────────────────────────────────────────────────
 function TypeFilterButton({ label, type, active, onSelect, }) {
@@ -310,7 +317,8 @@ function TypeFilterButton({ label, type, active, onSelect, }) {
     });
     return (_jsxs(Button, { ref: ref, type: "button", size: "sm", variant: "outline", className: `h-7 rounded-full px-3 text-2xs font-semibold ${active ? "border-accent/40 bg-accent/14 text-txt" : ""}`, onClick: onSelect, ...agentProps, children: [type ? (_jsx("span", { className: `memory-type-dot-${memoryTypeKey(type)} mr-1.5 inline-block h-2 w-2 rounded-full` })) : null, label] }));
 }
-function PersonItem({ person, active, onSelect, noPlatformsLabel, }) {
+const PersonItem = memo(function PersonItem({ person, active, onSelect, noPlatformsLabel, }) {
+    const handleSelect = () => onSelect(person);
     const { ref, agentProps } = useAgentElement({
         id: `memory-person-${person.primaryEntityId}`,
         role: "list-item",
@@ -318,13 +326,14 @@ function PersonItem({ person, active, onSelect, noPlatformsLabel, }) {
         group: "memory-people",
         status: active ? "active" : "inactive",
         description: `Filter memories to ${person.displayName}`,
-        onActivate: onSelect,
+        onActivate: handleSelect,
     });
-    return (_jsxs(SidebarContent.Item, { ref: ref, active: active, onClick: onSelect, "aria-current": active ? "page" : undefined, ...agentProps, children: [_jsx(SidebarContent.ItemIcon, { active: active, children: person.displayName.charAt(0).toUpperCase() }), _jsxs("span", { className: "min-w-0 flex-1 text-left", children: [_jsx(SidebarContent.ItemTitle, { children: person.displayName }), _jsx(SidebarContent.ItemDescription, { children: person.platforms.join(" · ") || noPlatformsLabel })] }), _jsx(MetaPill, { compact: true, children: person.factCount })] }));
-}
+    return (_jsxs(SidebarContent.Item, { ref: ref, active: active, onClick: handleSelect, "aria-current": active ? "page" : undefined, ...agentProps, children: [_jsx(SidebarContent.ItemIcon, { active: active, children: person.displayName.charAt(0).toUpperCase() }), _jsxs("span", { className: "min-w-0 flex-1 text-left", children: [_jsx(SidebarContent.ItemTitle, { children: person.displayName }), _jsx(SidebarContent.ItemDescription, { children: person.platforms.join(" · ") || noPlatformsLabel })] }), _jsx(MetaPill, { compact: true, children: person.factCount })] }));
+});
 // ── Main View ────────────────────────────────────────────────────────────
 export function MemoryViewerView({ contentHeader, } = {}) {
-    const { t, setTab } = useApp();
+    const t = useAppSelector((s) => s.t);
+    const setTab = useAppSelector((s) => s.setTab);
     const [viewMode, setViewMode] = useState("feed");
     const [typeFilter, setTypeFilter] = useState(null);
     const [stats, setStats] = useState(null);
@@ -357,10 +366,10 @@ export function MemoryViewerView({ contentHeader, } = {}) {
         : null;
     // All entity IDs for the selected person (multi-identity support)
     const selectedEntityIds = selectedPerson?.memberEntityIds ?? null;
-    const handleSelectPerson = (person) => {
+    const handleSelectPerson = useCallback((person) => {
         setSelectedPersonId(person.primaryEntityId);
         setViewMode("browse");
-    };
+    }, []);
     const handleClearPerson = () => {
         setSelectedPersonId(null);
     };
@@ -395,7 +404,7 @@ export function MemoryViewerView({ contentHeader, } = {}) {
                                 defaultValue: "Relationships",
                             }) })] })) : null, _jsx(SidebarScrollRegion, { className: "mt-2", children: _jsx("div", { className: "space-y-1.5", children: peopleLoading ? (_jsx("div", { className: "px-2 text-xs text-muted", children: t("memoryviewer.loading", { defaultValue: "Loading…" }) })) : people.length === 0 ? (_jsx("div", { className: "px-2 text-xs text-muted", children: t("memoryviewer.noPeopleYet", {
                                 defaultValue: "No people yet.",
-                            }) })) : (people.map((person) => (_jsx(PersonItem, { person: person, active: person.primaryEntityId === selectedPersonId, onSelect: () => handleSelectPerson(person), noPlatformsLabel: t("memoryviewer.noPlatforms", {
+                            }) })) : (people.map((person) => (_jsx(PersonItem, { person: person, active: person.primaryEntityId === selectedPersonId, onSelect: handleSelectPerson, noPlatformsLabel: t("memoryviewer.noPlatforms", {
                                 defaultValue: "No platforms",
                             }) }, person.groupId)))) }) })] }) }));
     return (_jsx(ShellViewAgentSurface, { viewId: "memories", children: _jsx(PageLayout, { sidebar: sidebar, contentHeader: contentHeader, "data-testid": "memory-viewer-view", children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("div", { ref: viewModeControl.ref, ...viewModeControl.agentProps, children: _jsx(SegmentedControl, { value: viewMode, onValueChange: (v) => setViewMode(v), items: viewModeItems, buttonClassName: "min-h-8 px-4 py-2" }) }), selectedPerson ? (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted", children: [t("memoryviewer.filteredTo", { defaultValue: "Filtered to" }), _jsx(MetaPill, { compact: true, children: selectedPerson.displayName }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-6 px-2 text-xs-tight", onClick: handleClearPerson, children: t("memoryviewer.clear", { defaultValue: "Clear" }) })] })) : null] }), viewMode === "feed" ? (_jsx(MemoryFeedPanel, { typeFilter: typeFilter })) : (_jsx(MemoryBrowserPanel, { typeFilter: typeFilter, entityId: selectedPersonId, entityIds: selectedEntityIds }))] }) }) }));

package/components/pages/PluginCard.d.ts

@@ -1,4 +1,4 @@
-import type { PluginInfo } from "../../api";
+import type { PluginInfo } from "../../api/index.js";
 export interface PluginCardProps {
     plugin: PluginInfo;
     allowCustomOrder: boolean;
@@ -32,5 +32,5 @@ export interface PluginCardProps {
     loadFailedLabel: string;
     notInstalledLabel: string;
 }
-export declare function PluginCard({ plugin: p, allowCustomOrder, pluginSettingsOpen, togglingPlugins, hasPluginToggleInFlight, draggingId, dragOverId, pluginDescriptionFallback, onToggle, onToggleSettings, onDragStart, onDragOver, onDrop, onDragEnd, loadFailedLabel, notInstalledLabel, }: PluginCardProps): import("react/jsx-runtime").JSX.Element;
+export declare const PluginCard: import("react").MemoExoticComponent<({ plugin: p, allowCustomOrder, pluginSettingsOpen, togglingPlugins, hasPluginToggleInFlight, draggingId, dragOverId, pluginDescriptionFallback, onToggle, onToggleSettings, onDragStart, onDragOver, onDrop, onDragEnd, loadFailedLabel, notInstalledLabel, }: PluginCardProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=PluginCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PluginCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PluginCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,WAAW,CAAC;AAK5D,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,UAAU,CAAC;IACnB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAChC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,uBAAuB,EAAE,OAAO,CAAC;IACjC,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,mBAAmB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACjC,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjE,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,CAAC,CAAC;IAC3D,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,yBAAyB,EAAE,MAAM,CAAC;IAClC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,qBAAqB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,MAAM,KAAK,IAAI,CAAC;IAC7E,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EACzB,MAAM,EAAE,CAAC,EACT,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,uBAAuB,EACvB,UAAU,EACV,UAAU,EACV,yBAAyB,EACzB,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,MAAM,EACN,SAAS,EACT,eAAe,EACf,iBAAiB,GAClB,EAAE,eAAe,2CAuKjB"}
+{"version":3,"file":"PluginCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PluginCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,WAAW,CAAC;AAK5D,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,UAAU,CAAC;IACnB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,kBAAkB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAChC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,uBAAuB,EAAE,OAAO,CAAC;IACjC,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,mBAAmB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACjC,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjE,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,CAAC,CAAC;IAC3D,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,yBAAyB,EAAE,MAAM,CAAC;IAClC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,qBAAqB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,MAAM,KAAK,IAAI,CAAC;IAC7E,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oBAAoB,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACnD,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,sSAiBpB,eAAe,6CAqKhB,CAAC"}