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

package/components/pages/MemoryViewerView.js

@@ -1,77 +1,139 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, MetaPill, PageLayout, PagePanel, SegmentedControl, SidebarContent, SidebarHeader, SidebarPanel, SidebarScrollRegion, } from "@elizaos/ui";
-import { RefreshCw, Search } from "lucide-react";
-import { useCallback, useDeferredValue, useEffect, useRef, useState, } from "react";
+import { Brain, FileText, MessageSquareText, Search, Sparkles, } from "lucide-react";
+import { 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 { PageLayout } from "../../layouts/page-layout/page-layout.js";
 import { useApp } 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";
+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";
+import { SidebarContent } from "../composites/sidebar/sidebar-content.js";
+import { SidebarPanel } from "../composites/sidebar/sidebar-panel.js";
+import { SidebarScrollRegion } from "../composites/sidebar/sidebar-scroll-region.js";
 import { AppPageSidebar } from "../shared/AppPageSidebar.js";
-// ── Constants ────────────────────────────────────────────────────────────
+import { Button } from "../ui/button.js";
+import { SegmentedControl } from "../ui/segmented-control.js";
+import { ListSkeleton } from "../ui/skeleton-layouts.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 const TYPE_LABELS = {
-    messages: "Messages",
-    memories: "Memories",
-    facts: "Facts",
-    documents: "Documents",
+    messages: { key: "memoryviewer.type.messages", defaultLabel: "Messages" },
+    memories: { key: "memoryviewer.type.memories", defaultLabel: "Memories" },
+    facts: { key: "memoryviewer.type.facts", defaultLabel: "Facts" },
+    documents: { key: "memoryviewer.type.documents", defaultLabel: "Documents" },
 };
-const TYPE_COLORS = {
-    messages: { bg: "rgba(99, 102, 241, 0.15)", fg: "rgb(99, 102, 241)" },
-    memories: { bg: "rgba(168, 85, 247, 0.15)", fg: "rgb(168, 85, 247)" },
-    facts: { bg: "rgba(34, 197, 94, 0.15)", fg: "rgb(34, 197, 94)" },
-    documents: { bg: "rgba(245, 158, 11, 0.15)", fg: "rgb(245, 158, 11)" },
-    unknown: { bg: "rgba(156, 163, 175, 0.15)", fg: "rgb(156, 163, 175)" },
-};
-const VIEW_MODE_ITEMS = [
-    { value: "feed", label: "Feed", testId: "memory-view-feed" },
-    { value: "browse", label: "Browse", testId: "memory-view-browse" },
+// Memory type color tokens are defined as CSS custom properties in
+// `packages/ui/src/styles/brand-gold.css` (`--memory-type-<key>-bg/fg`)
+// and exposed via `.memory-type-badge-<key>` / `.memory-type-dot-<key>`.
+// Components reference them by class name instead of inline rgba literals.
+const TYPE_KEYS = [
+    "messages",
+    "memories",
+    "facts",
+    "documents",
+    "unknown",
+];
+function memoryTypeKey(type) {
+    return TYPE_KEYS.includes(type)
+        ? type
+        : "unknown";
+}
+const MEMORY_FEED_EMPTY_FEATURES = [
+    {
+        id: "chat",
+        labelKey: "memoryviewer.empty.chat",
+        defaultLabel: "Chat",
+        icon: MessageSquareText,
+        tone: "text-muted-strong",
+    },
+    {
+        id: "facts",
+        labelKey: "memoryviewer.empty.facts",
+        defaultLabel: "Facts",
+        icon: Sparkles,
+        tone: "text-muted-strong",
+    },
+    {
+        id: "docs",
+        labelKey: "memoryviewer.empty.docs",
+        defaultLabel: "Docs",
+        icon: FileText,
+        tone: "text-muted-strong",
+    },
 ];
 const FEED_PAGE_SIZE = 50;
+/** Max retained feed items (10 pages) so long sessions stay bounded. */
+const FEED_MAX_ITEMS = 500;
+/** Poll interval to keep the feed fresh in place of a manual refresh button. */
+const FEED_POLL_MS = 30_000;
 const BROWSE_PAGE_SIZE = 50;
 // ── Helpers ──────────────────────────────────────────────────────────────
-function typeLabel(type) {
-    return TYPE_LABELS[type] ?? type;
-}
-function typeColor(type) {
-    return TYPE_COLORS[type] ?? TYPE_COLORS.unknown;
+function typeLabel(type, t) {
+    const entry = TYPE_LABELS[type];
+    return entry ? t(entry.key, { defaultValue: entry.defaultLabel }) : type;
 }
 function truncateText(text, max = 200) {
     if (text.length <= max)
         return text;
     return `${text.slice(0, max)}…`;
 }
-function formatRelativeTime(timestamp) {
+function formatRelativeTime(timestamp, t) {
     const diff = Date.now() - timestamp;
+    const unknown = t("memoryviewer.unknown", { defaultValue: "unknown" });
     if (diff < 0)
-        return formatDateTime(timestamp, { fallback: "unknown" });
+        return formatDateTime(timestamp, { fallback: unknown });
     if (diff < 60_000)
-        return "just now";
+        return t("memoryviewer.justNow", { defaultValue: "just now" });
     if (diff < 3_600_000)
-        return `${Math.floor(diff / 60_000)}m ago`;
+        return t("memoryviewer.minutesAgo", {
+            minutes: Math.floor(diff / 60_000),
+            defaultValue: "{{minutes}}m ago",
+        });
     if (diff < 86_400_000)
-        return `${Math.floor(diff / 3_600_000)}h ago`;
+        return t("memoryviewer.hoursAgo", {
+            hours: Math.floor(diff / 3_600_000),
+            defaultValue: "{{hours}}h ago",
+        });
     if (diff < 604_800_000)
-        return `${Math.floor(diff / 86_400_000)}d ago`;
-    return formatDateTime(timestamp, { fallback: "unknown" });
+        return t("memoryviewer.daysAgo", {
+            days: Math.floor(diff / 86_400_000),
+            defaultValue: "{{days}}d ago",
+        });
+    return formatDateTime(timestamp, { fallback: unknown });
 }
 // ── Memory Card ──────────────────────────────────────────────────────────
 function MemoryCard({ memory, expanded, onToggle, }) {
-    const color = typeColor(memory.type);
-    const text = memory.text || "(empty)";
-    return (_jsxs("button", { type: "button", className: "w-full text-left rounded-2xl border border-border/24 bg-card/32 px-3.5 py-3 transition-colors hover:border-border/40 hover:bg-card/50", onClick: onToggle, "data-testid": `memory-card-${memory.id}`, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "inline-flex items-center rounded-full px-2 py-0.5 text-2xs font-semibold uppercase tracking-[0.12em]", style: { backgroundColor: color.bg, color: color.fg }, children: typeLabel(memory.type) }), memory.source ? (_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.12em] text-muted/70", children: memory.source })) : null, _jsx("span", { className: "ml-auto text-xs-tight text-muted", children: formatRelativeTime(memory.createdAt) })] }), _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: "font-semibold uppercase tracking-[0.12em]", children: "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: "font-semibold uppercase tracking-[0.12em]", children: "Room" }), " ", _jsx("span", { className: "font-mono text-2xs", children: memory.roomId })] })) : null, _jsxs("div", { className: "text-xs-tight text-muted", children: [_jsx("span", { className: "font-semibold uppercase tracking-[0.12em]", children: "Created" }), " ", formatDateTime(memory.createdAt, { fallback: "unknown" })] }), _jsxs("div", { className: "text-xs-tight text-muted", children: [_jsx("span", { className: "font-semibold uppercase tracking-[0.12em]", children: "ID" }), " ", _jsx("span", { className: "font-mono text-2xs", children: memory.id })] })] })) : null] }));
+    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, {
+                                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 [loading, setLoading] = useState(true);
-    const [feed, setFeed] = useState([]);
-    const [hasMore, setHasMore] = useState(false);
+    const { t } = useTranslation();
+    // Seed the first page from the shared cache so a revisit paints the
+    // last-known feed instantly and revalidates silently. Pagination appends
+    // (`before`) stay uncached — only the base page is the instant-revisit win.
+    const feedCacheKey = `memory:feed:${typeFilter ?? "all"}`;
+    const cachedFeed = getCached(feedCacheKey);
+    const [loading, setLoading] = useState(!cachedFeed);
+    const [feed, setFeed] = useState(cachedFeed?.data.memories ?? []);
+    const [hasMore, setHasMore] = useState(cachedFeed?.data.hasMore ?? false);
     const [error, setError] = useState(null);
     const [expandedId, setExpandedId] = useState(null);
     const loadingMore = useRef(false);
-    const loadFeed = useCallback(async (before) => {
+    const loadFeed = useCallback(async (before, options) => {
         if (loadingMore.current && before)
             return;
         if (before)
             loadingMore.current = true;
-        else
+        else if (!options?.silent)
             setLoading(true);
         setError(null);
         try {
@@ -81,51 +143,92 @@ function MemoryFeedPanel({ typeFilter }) {
                 before,
             });
             if (before) {
-                setFeed((prev) => [...prev, ...result.memories]);
+                // Cap retained items so a long pagination session can't grow the
+                // feed unboundedly. 500 covers many pages of scrollback while
+                // bounding memory; older items drop off the top.
+                setFeed((prev) => [...prev, ...result.memories].slice(-FEED_MAX_ITEMS));
             }
             else {
                 setFeed(result.memories);
+                setCached(feedCacheKey, result);
             }
             setHasMore(result.hasMore);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : "Failed to load memory feed.");
+            setError(err instanceof Error
+                ? err.message
+                : t("memoryviewer.error.feed", {
+                    defaultValue: "Failed to load memory feed.",
+                }));
         }
         finally {
             setLoading(false);
             loadingMore.current = false;
         }
-    }, [typeFilter]);
+    }, [typeFilter, t, feedCacheKey]);
     useEffect(() => {
-        void loadFeed();
-    }, [loadFeed]);
+        // Revalidate silently when a cached page is already on screen, then poll
+        // for fresh memories so the feed stays current without a manual refresh.
+        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]);
     const loadMore = () => {
         const last = feed[feed.length - 1];
         if (last)
             void loadFeed(last.createdAt);
     };
     if (loading && feed.length === 0) {
-        return _jsx(PagePanel.Loading, { heading: "Loading memory feed\u2026" });
+        return _jsx(ListSkeleton, { rows: 6 });
     }
     if (error) {
-        return (_jsx("div", { className: "rounded-2xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: error }));
+        return (_jsx("div", { className: "rounded-sm border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: error }));
     }
     if (feed.length === 0) {
-        return (_jsx(PagePanel.Empty, { variant: "panel", className: "min-h-[24rem]", title: "No memories yet", description: "Memories will appear here as the agent processes conversations, extracts facts, and builds relationships." }));
+        return (_jsx(PagePanel.FeatureEmpty, { className: "min-h-[24rem]", features: MEMORY_FEED_EMPTY_FEATURES.map((feature) => ({
+                ...feature,
+                label: t(feature.labelKey, { defaultValue: feature.defaultLabel }),
+            })), icon: Brain, iconTone: "border-accent/25 bg-accent/12 text-accent", title: t("memoryviewer.noMemoriesYet", {
+                defaultValue: "No memories yet",
+            }) }));
     }
-    return (_jsxs("div", { className: "space-y-3", "data-testid": "memory-feed", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted/70", children: ["Recent activity (", feed.length, hasMore ? "+" : "", ")"] }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "h-7 w-7 p-0", onClick: () => void loadFeed(), "aria-label": "Refresh feed", children: _jsx(RefreshCw, { className: "h-3.5 w-3.5" }) })] }), 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: "w-full", onClick: loadMore, children: "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: () => 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] }));
 }
 // ── Memory Browser ───────────────────────────────────────────────────────
 function MemoryBrowserPanel({ typeFilter, entityId, entityIds, }) {
+    const { t } = useTranslation();
     const [searchInput, setSearchInput] = useState("");
     const deferredSearch = useDeferredValue(searchInput);
-    const [loading, setLoading] = useState(true);
-    const [result, setResult] = useState(null);
+    // The floating chat IS the memory-text search box while Browse is open (and
+    // not scoped to a person — entity mode has no free-text search). Typing in the
+    // composer drives `searchInput`; the binding clears when the view unmounts.
+    const searchPlaceholder = t("memoryviewer.searchMemoryText", {
+        defaultValue: "Search memory text…",
+    });
+    const chatBinding = useMemo(() => entityId
+        ? null
+        : { placeholder: searchPlaceholder, onQuery: setSearchInput }, [entityId, searchPlaceholder]);
+    useRegisterViewChatBinding(chatBinding);
+    // Cache key spans every fetch parameter so each filter/search/page combo
+    // revisits instantly without colliding. Offset is appended per-call below.
+    const browseKeyBase = entityId
+        ? `memory:browse:entity:${entityId}:${(entityIds ?? []).join(",")}:${typeFilter ?? "all"}`
+        : `memory:browse:all:${typeFilter ?? "all"}:${deferredSearch.trim()}`;
+    const cachedBrowse = getCached(`${browseKeyBase}:0`);
+    const [loading, setLoading] = useState(!cachedBrowse);
+    const [result, setResult] = useState(cachedBrowse?.data ?? null);
     const [error, setError] = useState(null);
     const [expandedId, setExpandedId] = useState(null);
     const [offset, setOffset] = useState(0);
-    const loadMemories = useCallback(async (pageOffset) => {
-        setLoading(true);
+    const loadMemories = useCallback(async (pageOffset, options) => {
+        const cacheKey = `${browseKeyBase}:${pageOffset}`;
+        if (!options?.silent)
+            setLoading(true);
         setError(null);
         try {
             const resp = entityId
@@ -142,18 +245,26 @@ function MemoryBrowserPanel({ typeFilter, entityId, entityIds, }) {
                     offset: pageOffset,
                 });
             setResult(resp);
+            setCached(cacheKey, resp);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : "Failed to load memories.");
+            setError(err instanceof Error
+                ? err.message
+                : t("memoryviewer.error.memories", {
+                    defaultValue: "Failed to load memories.",
+                }));
         }
         finally {
             setLoading(false);
         }
-    }, [typeFilter, entityId, entityIds, deferredSearch]);
+    }, [typeFilter, entityId, entityIds, deferredSearch, t, browseKeyBase]);
     useEffect(() => {
         setOffset(0);
-        void loadMemories(0);
-    }, [loadMemories]);
+        // Revalidate silently when the first page is already cached on screen.
+        void loadMemories(0, {
+            silent: getCached(`${browseKeyBase}:0`) != null,
+        });
+    }, [loadMemories, browseKeyBase]);
     const handlePage = (direction) => {
         const newOffset = direction === "next"
             ? offset + BROWSE_PAGE_SIZE
@@ -161,9 +272,55 @@ function MemoryBrowserPanel({ typeFilter, entityId, entityIds, }) {
         setOffset(newOffset);
         void loadMemories(newOffset);
     };
-    return (_jsxs("div", { className: "space-y-3", "data-testid": "memory-browser", children: [!entityId ? (_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted/50" }), _jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), placeholder: "Search memory text\u2026", className: "h-9 w-full rounded-xl border border-border/32 bg-card/40 pl-9 pr-3 text-sm text-txt placeholder:text-muted/50 focus:border-accent/50 focus:outline-none", "data-testid": "memory-browser-search" })] })) : null, loading && !result ? (_jsx(PagePanel.Loading, { heading: "Loading memories\u2026" })) : error ? (_jsx("div", { className: "rounded-2xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: error })) : !result || result.memories.length === 0 ? (_jsx(PagePanel.Empty, { variant: "panel", className: "min-h-[20rem]", title: "No memories found", description: deferredSearch
-                    ? "No memories match your search query."
-                    : "No memories match the current filters." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between gap-3 text-xs-tight text-muted", children: [_jsxs("span", { children: [offset + 1, "\u2013", offset + result.memories.length, " of ", result.total] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: offset === 0, onClick: () => handlePage("prev"), children: "Prev" }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: offset + BROWSE_PAGE_SIZE >= result.total, onClick: () => handlePage("next"), children: "Next" })] })] }), result.memories.map((memory) => (_jsx(MemoryCard, { memory: memory, expanded: expandedId === memory.id, onToggle: () => setExpandedId((prev) => (prev === memory.id ? null : memory.id)) }, memory.id)))] }))] }));
+    const prevControl = useAgentElement({
+        id: "memory-page-prev",
+        role: "button",
+        label: t("memoryviewer.prev", { defaultValue: "Prev" }),
+        group: "memory-pager",
+        description: "Go to the previous page of memories",
+        onActivate: () => handlePage("prev"),
+    });
+    const nextControl = useAgentElement({
+        id: "memory-page-next",
+        role: "button",
+        label: t("memoryviewer.next", { defaultValue: "Next" }),
+        group: "memory-pager",
+        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", {
+                    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)))] }))] }));
+}
+// ── Sidebar controls ─────────────────────────────────────────────────────
+function TypeFilterButton({ label, type, active, onSelect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `memory-filter-${type ?? "all"}`,
+        role: "button",
+        label: `Filter memories: ${label}`,
+        group: "memory-type-filter",
+        status: active ? "active" : "inactive",
+        description: `Show only ${label} memories`,
+        onActivate: 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 { ref, agentProps } = useAgentElement({
+        id: `memory-person-${person.primaryEntityId}`,
+        role: "list-item",
+        label: `Browse memories for ${person.displayName}`,
+        group: "memory-people",
+        status: active ? "active" : "inactive",
+        description: `Filter memories to ${person.displayName}`,
+        onActivate: onSelect,
+    });
+    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 })] }));
 }
 // ── Main View ────────────────────────────────────────────────────────────
 export function MemoryViewerView({ contentHeader, } = {}) {
@@ -172,8 +329,6 @@ export function MemoryViewerView({ contentHeader, } = {}) {
     const [typeFilter, setTypeFilter] = useState(null);
     const [stats, setStats] = useState(null);
     const [statsError, setStatsError] = useState(false);
-    const [search, setSearch] = useState("");
-    const deferredSearch = useDeferredValue(search);
     // People list for person-centric view
     const [people, setPeople] = useState([]);
     const [peopleLoading, setPeopleLoading] = useState(true);
@@ -197,9 +352,6 @@ export function MemoryViewerView({ contentHeader, } = {}) {
             .catch(() => setPeople([]))
             .finally(() => setPeopleLoading(false));
     }, []);
-    const filteredPeople = deferredSearch
-        ? people.filter((p) => p.displayName.toLowerCase().includes(deferredSearch.toLowerCase()))
-        : people;
     const selectedPerson = selectedPersonId
         ? (people.find((p) => p.primaryEntityId === selectedPersonId) ?? null)
         : null;
@@ -212,23 +364,39 @@ export function MemoryViewerView({ contentHeader, } = {}) {
     const handleClearPerson = () => {
         setSelectedPersonId(null);
     };
-    const sidebar = (_jsxs(AppPageSidebar, { testId: "memory-viewer-sidebar", collapsible: true, contentIdentity: "memory-viewer", children: [_jsx(SidebarHeader, { search: {
-                    value: search,
-                    onChange: (e) => setSearch(e.target.value),
-                    placeholder: t("memoryviewer.SearchPeople", {
-                        defaultValue: "Search people…",
-                    }),
-                    "aria-label": "Search people",
-                    onClear: () => setSearch(""),
-                } }), _jsxs(SidebarPanel, { children: [_jsx(PagePanel.SummaryCard, { compact: true, className: "mt-2 space-y-3", children: stats ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "rounded-xl border border-border/24 bg-card/35 px-2.5 py-2", children: [_jsx("div", { className: "text-2xs uppercase tracking-[0.12em] text-muted/70", children: "Total" }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: stats.total })] }), Object.entries(stats.byType).map(([type, count]) => (_jsxs("div", { className: "rounded-xl border border-border/24 bg-card/35 px-2.5 py-2", children: [_jsx("div", { className: "text-2xs uppercase tracking-[0.12em] text-muted/70", children: typeLabel(type) }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: count })] }, type)))] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.14em] text-muted/70", children: "Filter by type" }), _jsxs("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [_jsx(Button, { type: "button", size: "sm", variant: "outline", className: `h-7 rounded-full px-3 text-2xs font-semibold tracking-[0.12em] ${typeFilter === null
-                                                        ? "border-accent/40 bg-accent/14 text-txt"
-                                                        : ""}`, onClick: () => setTypeFilter(null), children: "All" }), Object.keys(stats.byType).map((type) => {
-                                                    const color = typeColor(type);
-                                                    const active = typeFilter === type;
-                                                    return (_jsxs(Button, { type: "button", size: "sm", variant: "outline", className: `h-7 rounded-full px-3 text-2xs font-semibold tracking-[0.12em] ${active ? "border-accent/40 bg-accent/14 text-txt" : ""}`, onClick: () => setTypeFilter(active ? null : type), children: [_jsx("span", { className: "mr-1.5 inline-block h-2 w-2 rounded-full", style: { backgroundColor: color.fg } }), typeLabel(type)] }, type));
-                                                })] })] })] })) : statsError ? (_jsx("div", { className: "text-xs text-muted", children: "Could not load memory stats." })) : (_jsx("div", { className: "text-xs text-muted", children: "Loading stats\u2026" })) }), _jsx(SidebarContent.SectionLabel, { className: "mt-3", children: "People" }), selectedPersonId ? (_jsxs("div", { className: "mt-2 flex gap-1.5 px-1", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "flex-1 text-xs-tight", onClick: handleClearPerson, children: "Show all" }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "flex-1 text-xs-tight", onClick: () => setTab("relationships"), children: "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: "Loading\u2026" })) : filteredPeople.length === 0 ? (_jsx("div", { className: "px-2 text-xs text-muted", children: deferredSearch ? "No match." : "No people yet." })) : (filteredPeople.map((person) => {
-                                const active = person.primaryEntityId === selectedPersonId;
-                                return (_jsxs(SidebarContent.Item, { active: active, onClick: () => handleSelectPerson(person), "aria-current": active ? "page" : undefined, 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(" · ") || "No platforms" })] }), _jsx(MetaPill, { compact: true, children: person.factCount })] }, person.groupId));
-                            })) }) })] })] }));
-    return (_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(SegmentedControl, { value: viewMode, onValueChange: (v) => setViewMode(v), items: VIEW_MODE_ITEMS, buttonClassName: "min-h-8 px-4 py-2" }), selectedPerson ? (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted", children: ["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: "Clear" })] })) : null] }), viewMode === "feed" ? (_jsx(MemoryFeedPanel, { typeFilter: typeFilter })) : (_jsx(MemoryBrowserPanel, { typeFilter: typeFilter, entityId: selectedPersonId, entityIds: selectedEntityIds }))] }) }));
+    const viewModeItems = [
+        {
+            value: "feed",
+            label: t("memoryviewer.feed", { defaultValue: "Feed" }),
+            testId: "memory-view-feed",
+        },
+        {
+            value: "browse",
+            label: t("memoryviewer.browse", { defaultValue: "Browse" }),
+            testId: "memory-view-browse",
+        },
+    ];
+    const viewModeControl = useAgentElement({
+        id: "memory-view-mode",
+        role: "toggle",
+        label: t("memoryviewer.viewMode", { defaultValue: "Memory view mode" }),
+        group: "memory-toolbar",
+        status: viewMode === "browse" ? "active" : "inactive",
+        description: "Switch between the memory feed and the memory browser",
+        onActivate: () => setViewMode((prev) => (prev === "feed" ? "browse" : "feed")),
+    });
+    const sidebar = (_jsx(AppPageSidebar, { testId: "memory-viewer-sidebar", collapsible: true, contentIdentity: "memory-viewer", children: _jsxs(SidebarPanel, { children: [_jsx(PagePanel.SummaryCard, { compact: true, className: "mt-2 space-y-3", children: stats ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-sm", children: [_jsx("span", { className: "text-muted", children: t("memoryviewer.total", { defaultValue: "Total" }) }), _jsx("span", { className: "font-semibold text-txt", children: stats.total })] }), Object.entries(stats.byType).map(([type, count]) => (_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-xs-tight", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted", children: [_jsx("span", { className: `memory-type-dot-${memoryTypeKey(type)} inline-block h-2 w-2 rounded-full` }), typeLabel(type, t)] }), _jsx("span", { className: "font-semibold text-txt", children: count })] }, type)))] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight text-muted", children: t("memoryviewer.filterByType", {
+                                            defaultValue: "Filter by type",
+                                        }) }), _jsxs("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [_jsx(TypeFilterButton, { label: t("memoryviewer.all", { defaultValue: "All" }), type: null, active: typeFilter === null, onSelect: () => setTypeFilter(null) }), Object.keys(stats.byType).map((type) => (_jsx(TypeFilterButton, { label: typeLabel(type, t), type: type, active: typeFilter === type, onSelect: () => setTypeFilter(typeFilter === type ? null : type) }, type)))] })] })] })) : statsError ? (_jsx("div", { className: "text-xs text-muted", children: t("memoryviewer.statsError", {
+                            defaultValue: "Could not load memory stats.",
+                        }) })) : (_jsx("div", { className: "text-xs text-muted", children: t("memoryviewer.loadingStats", {
+                            defaultValue: "Loading stats…",
+                        }) })) }), _jsx("div", { className: "mt-3 px-1 text-xs-tight text-muted", children: t("memoryviewer.people", { defaultValue: "People" }) }), selectedPersonId ? (_jsxs("div", { className: "mt-2 flex gap-1.5 px-1", children: [_jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "flex-1 text-xs-tight", onClick: handleClearPerson, children: t("memoryviewer.showAll", { defaultValue: "Show all" }) }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", className: "flex-1 text-xs-tight", onClick: () => setTab("relationships"), children: t("memoryviewer.relationships", {
+                                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", {
+                                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

@@ -32,5 +32,5 @@ export interface PluginCardProps {
     loadFailedLabel: string;
     notInstalledLabel: string;
 }
-export declare function PluginCard({ plugin: p, allowCustomOrder, pluginSettingsOpen, togglingPlugins, hasPluginToggleInFlight, installingPlugins, updatingPlugins, uninstallingPlugins, installProgress, releaseStreamSelections, draggingId, dragOverId, pluginDescriptionFallback, onToggle, onToggleSettings, onInstall, onUpdate, onUninstall, onReleaseStreamChange, onOpenExternalUrl, onDragStart, onDragOver, onDrop, onDragEnd, installProgressLabel, installLabel, loadFailedLabel, notInstalledLabel, }: PluginCardProps): import("react/jsx-runtime").JSX.Element;
+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;
 //# 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;AAS5D,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,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,eAAe,EACf,uBAAuB,EACvB,UAAU,EACV,UAAU,EACV,yBAAyB,EACzB,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,qBAAqB,EACrB,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,MAAM,EACN,SAAS,EACT,oBAAoB,EACpB,YAAY,EACZ,eAAe,EACf,iBAAiB,GAClB,EAAE,eAAe,2CAmYjB"}
+{"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"}