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

package/components/pages/MediaGalleryView.js

@@ -0,0 +1,273 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, MetaPill, PageLayout, PagePanel, SidebarContent, SidebarPanel, SidebarScrollRegion, } from "@elizaos/ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../../api/index.js";
+import { useApp } from "../../state/index.js";
+import { resolveAppAssetUrl } from "../../utils/index.js";
+import { AppPageSidebar } from "../shared/AppPageSidebar.js";
+const IMAGE_EXTS = /\.(png|jpe?g|gif|webp|svg|bmp|ico|avif)(\?|$)/i;
+const VIDEO_EXTS = /\.(mp4|webm|mov|avi|mkv|ogv)(\?|$)/i;
+const AUDIO_EXTS = /\.(mp3|wav|ogg|flac|aac|m4a|opus)(\?|$)/i;
+const DATA_URI_IMG = /^data:image\//i;
+const DATA_URI_VID = /^data:video\//i;
+const DATA_URI_AUD = /^data:audio\//i;
+const MEDIA_URL_PREFIX = /^(https?:|data:|blob:|file:|capacitor:|electrobun:|app:|\/|\.\/|\.\.\/)/i;
+function classifyUrl(url) {
+    if (IMAGE_EXTS.test(url) || DATA_URI_IMG.test(url))
+        return "image";
+    if (VIDEO_EXTS.test(url) || DATA_URI_VID.test(url))
+        return "video";
+    if (AUDIO_EXTS.test(url) || DATA_URI_AUD.test(url))
+        return "audio";
+    return null;
+}
+function filenameFromUrl(url) {
+    try {
+        const path = new URL(url, "https://placeholder").pathname;
+        const segments = path.split("/").filter(Boolean);
+        return segments[segments.length - 1] || "";
+    }
+    catch {
+        return "";
+    }
+}
+function looksLikePotentialMediaUrl(value) {
+    const candidate = value.trim();
+    if (!candidate)
+        return false;
+    if (classifyUrl(candidate))
+        return true;
+    return MEDIA_URL_PREFIX.test(candidate);
+}
+function normalizeMediaUrl(url) {
+    const candidate = url.trim();
+    if (!candidate)
+        return candidate;
+    return MEDIA_URL_PREFIX.test(candidate)
+        ? resolveAppAssetUrl(candidate)
+        : candidate;
+}
+function mediaTypeLabel(t, type) {
+    switch (type) {
+        case "all":
+            return t("common.all", { defaultValue: "All" });
+        case "image":
+            return t("mediagalleryview.Images", { defaultValue: "Images" });
+        case "video":
+            return t("common.video", { defaultValue: "Video" });
+        case "audio":
+            return t("common.audio", { defaultValue: "Audio" });
+    }
+}
+const FILTER_CHIPS = ["all", "image", "video", "audio"];
+/** Extract media URLs from arbitrary row data by scanning all string values. */
+function extractMediaFromRows(rows, tableName) {
+    const items = [];
+    const seen = new Set();
+    for (const row of rows) {
+        const createdAt = String(row.createdAt ?? row.created_at ?? row.timestamp ?? "");
+        for (const val of Object.values(row)) {
+            if (typeof val !== "string")
+                continue;
+            // Try parsing as JSON content field (elizaOS memories store JSON in content)
+            const urls = extractUrlsFromValue(val);
+            for (const url of urls) {
+                const mediaType = classifyUrl(url);
+                if (mediaType && !seen.has(url)) {
+                    seen.add(url);
+                    items.push({
+                        url,
+                        type: mediaType,
+                        filename: filenameFromUrl(url),
+                        source: tableName,
+                        createdAt,
+                    });
+                }
+            }
+        }
+    }
+    return items;
+}
+/** Pull URLs out of a string value — handles plain URLs and JSON blobs. */
+function extractUrlsFromValue(val) {
+    const urls = new Set();
+    // If it looks like JSON, parse it and search recursively
+    if (val.startsWith("{") || val.startsWith("[")) {
+        try {
+            const parsed = JSON.parse(val);
+            collectStrings(parsed, urls);
+            return Array.from(urls);
+        }
+        catch {
+            // not JSON, fall through to regex
+        }
+    }
+    // Absolute URL/scheme match
+    const urlRegex = /(?:https?:\/\/|file:\/\/|blob:|capacitor:\/\/|electrobun:\/\/|app:\/\/)[^\s"'<>]+/gi;
+    const matches = val.match(urlRegex);
+    if (matches) {
+        for (const match of matches)
+            urls.add(match);
+    }
+    // Relative/path-like token match
+    const tokens = val
+        .split(/[\s"'<>]+/)
+        .map((token) => token.replace(/^[([{]+/, "").replace(/[)\]},;.!?]+$/, ""));
+    for (const token of tokens) {
+        if (looksLikePotentialMediaUrl(token))
+            urls.add(token);
+    }
+    // Data URI match
+    if (val.startsWith("data:"))
+        urls.add(val);
+    return Array.from(urls);
+}
+function collectStrings(obj, out) {
+    if (typeof obj === "string") {
+        if (looksLikePotentialMediaUrl(obj))
+            out.add(obj.trim());
+        return;
+    }
+    if (Array.isArray(obj)) {
+        for (const item of obj)
+            collectStrings(item, out);
+        return;
+    }
+    if (obj && typeof obj === "object") {
+        for (const v of Object.values(obj))
+            collectStrings(v, out);
+    }
+}
+export function MediaGalleryView({ leftNav, contentHeader, }) {
+    const { t } = useApp();
+    const [media, setMedia] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState("");
+    const [filter, setFilter] = useState("all");
+    const [search, setSearch] = useState("");
+    const [selectedMediaUrl, setSelectedMediaUrl] = useState(null);
+    const loadMedia = useCallback(async () => {
+        setLoading(true);
+        setError("");
+        try {
+            // Discover tables
+            const { tables } = await client.getDatabaseTables();
+            const allMedia = [];
+            // Scan tables likely to contain media: memories, messages, media, attachments, files
+            const mediaTableNames = tables
+                .map((t) => t.name)
+                .filter((name) => {
+                const n = name.toLowerCase();
+                return (n.includes("memor") ||
+                    n.includes("message") ||
+                    n.includes("media") ||
+                    n.includes("attach") ||
+                    n.includes("file") ||
+                    n.includes("asset") ||
+                    n.includes("document"));
+            });
+            // If no likely tables found, scan all tables with modest limits
+            const tablesToScan = mediaTableNames.length > 0
+                ? mediaTableNames
+                : tables.map((t) => t.name);
+            const scanLimit = mediaTableNames.length > 0 ? 500 : 100;
+            for (const tableName of tablesToScan.slice(0, 10)) {
+                try {
+                    const result = await client.executeDatabaseQuery(`SELECT * FROM "${tableName}" LIMIT ${scanLimit}`);
+                    const items = extractMediaFromRows(result.rows, tableName);
+                    allMedia.push(...items);
+                }
+                catch {
+                    // skip tables that fail
+                }
+            }
+            // Sort by date descending
+            allMedia.sort((a, b) => {
+                if (!a.createdAt && !b.createdAt)
+                    return 0;
+                if (!a.createdAt)
+                    return 1;
+                if (!b.createdAt)
+                    return -1;
+                return b.createdAt.localeCompare(a.createdAt);
+            });
+            setMedia(allMedia);
+        }
+        catch (err) {
+            setError(t("mediagalleryview.LoadFailed", {
+                message: err instanceof Error ? err.message : "error",
+                defaultValue: "Failed to load media: {{message}}",
+            }));
+        }
+        setLoading(false);
+    }, [t]);
+    useEffect(() => {
+        loadMedia();
+    }, [loadMedia]);
+    const filtered = useMemo(() => media.filter((m) => {
+        if (filter !== "all" && m.type !== filter)
+            return false;
+        if (search &&
+            !m.filename.toLowerCase().includes(search.toLowerCase()) &&
+            !m.url.toLowerCase().includes(search.toLowerCase()))
+            return false;
+        return true;
+    }), [filter, media, search]);
+    useEffect(() => {
+        if (filtered.length === 0) {
+            setSelectedMediaUrl(null);
+            return;
+        }
+        if (!selectedMediaUrl ||
+            !filtered.some((item) => item.url === selectedMediaUrl)) {
+            setSelectedMediaUrl(filtered[0].url);
+        }
+    }, [filtered, selectedMediaUrl]);
+    const selectedItem = filtered.find((item) => item.url === selectedMediaUrl) ??
+        filtered[0] ??
+        null;
+    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,
+                                            defaultValue: "{{count}} item",
+                                        })
+                                        : t("mediagalleryview.ItemCountMany", {
+                                            count: filtered.length,
+                                            defaultValue: "{{count}} items",
+                                        }) }), _jsxs("div", { className: "mt-3 flex flex-wrap gap-2 text-2xs font-semibold uppercase tracking-[0.14em] text-muted/75", children: [_jsx(MetaPill, { children: filter === "all"
+                                                ? t("mediagalleryview.AllMedia", {
+                                                    defaultValue: "All media",
+                                                })
+                                                : mediaTypeLabel(t, filter) }), search ? (_jsx("span", { className: "rounded-full border border-accent/25 bg-accent/8 px-2.5 py-1 text-accent", children: t("mediagalleryview.SearchActive", {
+                                                defaultValue: "Search active",
+                                            }) })) : null] })] })] }), _jsxs("div", { className: "space-y-3 pt-4", children: [_jsx(Input, { type: "search", placeholder: t("mediagalleryview.SearchMedia"), value: search, onChange: (e) => setSearch(e.target.value), className: "h-10 rounded-xl border-border/40 bg-card/50 text-sm placeholder:text-muted/65 focus-visible:ring-accent/30" }), _jsx("div", { className: "grid grid-cols-2 gap-1.5", children: FILTER_CHIPS.map((chip) => {
+                                const isActive = filter === chip;
+                                return (_jsx(Button, { variant: "ghost", size: "sm", className: `h-auto min-h-[2.25rem] rounded-xl border px-3 py-2 text-left text-xs-tight font-semibold transition-colors ${isActive
+                                        ? "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: () => setFilter(chip), children: mediaTypeLabel(t, chip) }, 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) => {
+                        const isActive = selectedItem?.url === item.url;
+                        return (_jsxs(SidebarContent.Item, { active: isActive, onClick: () => setSelectedMediaUrl(item.url), children: [_jsx(SidebarContent.ItemIcon, { active: isActive, children: item.type.slice(0, 1).toUpperCase() }), _jsxs(SidebarContent.ItemBody, { children: [_jsx(SidebarContent.ItemTitle, { className: "truncate", children: item.filename ||
+                                                t("mediagalleryview.MediaItem", {
+                                                    defaultValue: "Media item",
+                                                }) }), _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: mediaTypeLabel(t, item.type) })] })] })] }, `${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-2xl 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-3xl 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.",
+                    })
+                    : t("mediagalleryview.NoFilterMatchesDescription", {
+                        defaultValue: "No items match the current filter.",
+                    }) })) : (_jsxs("div", { className: "w-full", children: [_jsxs(PagePanel, { variant: "surface", as: "section", className: "px-6 py-5", children: [_jsx("div", { className: "text-2xs font-semibold uppercase tracking-[0.16em] text-muted/60", children: t("mediagalleryview.Media", { defaultValue: "Media" }) }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-3", children: [_jsx("h2", { className: "text-2xl font-semibold text-txt", children: selectedItem.filename ||
+                                            t("mediagalleryview.MediaItem", {
+                                                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-2xl object-contain" })) : selectedItem.type === "video" ? (_jsx("video", { src: normalizeMediaUrl(selectedItem.url), controls: true, className: "max-h-[32rem] max-w-full rounded-2xl", children: _jsx("track", { kind: "captions" }) })) : (_jsxs("div", { className: "flex w-full max-w-xl flex-col items-center gap-5 rounded-3xl 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-2xl 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",
+                                }) }), _jsxs("div", { className: "mt-3 grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.16em] text-muted/60", children: t("common.type", { defaultValue: "Type" }) }), _jsx("div", { className: "mt-1 text-sm text-txt", children: mediaTypeLabel(t, selectedItem.type) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.16em] text-muted/60", children: t("logsview.Source", {
+                                                    defaultValue: "Source",
+                                                }) }), _jsx("div", { className: "mt-1 text-sm text-txt", children: selectedItem.source })] }), _jsxs("div", { className: "sm:col-span-2", children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.16em] text-muted/60", children: "URL" }), _jsx("div", { className: "mt-1 break-all text-sm text-txt", children: selectedItem.url })] })] })] })] })) }) }));
+}

package/components/pages/MemoryDetailPanel.d.ts

@@ -0,0 +1,5 @@
+import type { MemoryRecord } from "./vector-browser-utils";
+export declare function MemoryDetailPanel({ memory }: {
+    memory: MemoryRecord | null;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MemoryDetailPanel.d.ts.map

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

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

package/components/pages/MemoryDetailPanel.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PagePanel } from "@elizaos/ui";
+import { useApp } from "../../state/index.js";
+export function MemoryDetailPanel({ memory }) {
+    const { t } = useApp();
+    if (!memory) {
+        return (_jsx("div", { className: "flex flex-1 items-center justify-center p-8", children: _jsxs("div", { className: "rounded-3xl border border-border/35 bg-bg/35 px-8 py-10 text-center shadow-inner", 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.",
+                        }) })] }) }));
+    }
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [_jsxs("div", { className: "px-6 py-5", children: [_jsx("div", { className: "text-2xs font-semibold uppercase tracking-[0.16em] text-muted/60", children: t("common.vectors", { defaultValue: "Vectors" }) }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-3", children: [_jsx("h2", { className: "text-2xl font-semibold text-txt", children: memory.type && memory.type !== "undefined"
+                                    ? memory.type
+                                    : 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-2xl 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-2xl 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")] }), _jsxs("div", { className: "mt-3 max-h-[16rem] overflow-auto rounded-xl border border-border/35 bg-bg/35 p-3 text-xs-tight leading-6 text-muted", children: ["[", memory.embedding.map((v) => v.toFixed(6)).join(", "), "]"] })] })) : null, _jsxs("details", { className: "rounded-2xl 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("div", { className: "mt-3 max-h-[18rem] overflow-auto rounded-xl border border-border/35 bg-bg/35 p-3 font-mono text-xs-tight leading-6 text-muted", children: JSON.stringify(memory.raw, null, 2) })] })] })] }));
+}

package/components/pages/MemoryViewerView.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from "react";
+export declare function MemoryViewerView({ contentHeader, }?: {
+    contentHeader?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MemoryViewerView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MemoryViewerView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/MemoryViewerView.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AA8Yf,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;CACtB,2CA4QL"}

package/components/pages/MemoryViewerView.js

@@ -0,0 +1,234 @@
+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 { client } from "../../api/client.js";
+import { useApp } from "../../state/index.js";
+import { formatDateTime } from "../../utils/format.js";
+import { AppPageSidebar } from "../shared/AppPageSidebar.js";
+// ── Constants ────────────────────────────────────────────────────────────
+const TYPE_LABELS = {
+    messages: "Messages",
+    memories: "Memories",
+    facts: "Facts",
+    documents: "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" },
+];
+const FEED_PAGE_SIZE = 50;
+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 truncateText(text, max = 200) {
+    if (text.length <= max)
+        return text;
+    return `${text.slice(0, max)}…`;
+}
+function formatRelativeTime(timestamp) {
+    const diff = Date.now() - timestamp;
+    if (diff < 0)
+        return formatDateTime(timestamp, { fallback: "unknown" });
+    if (diff < 60_000)
+        return "just now";
+    if (diff < 3_600_000)
+        return `${Math.floor(diff / 60_000)}m ago`;
+    if (diff < 86_400_000)
+        return `${Math.floor(diff / 3_600_000)}h ago`;
+    if (diff < 604_800_000)
+        return `${Math.floor(diff / 86_400_000)}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] }));
+}
+// ── Memory Feed ──────────────────────────────────────────────────────────
+function MemoryFeedPanel({ typeFilter }) {
+    const [loading, setLoading] = useState(true);
+    const [feed, setFeed] = useState([]);
+    const [hasMore, setHasMore] = useState(false);
+    const [error, setError] = useState(null);
+    const [expandedId, setExpandedId] = useState(null);
+    const loadingMore = useRef(false);
+    const loadFeed = useCallback(async (before) => {
+        if (loadingMore.current && before)
+            return;
+        if (before)
+            loadingMore.current = true;
+        else
+            setLoading(true);
+        setError(null);
+        try {
+            const result = await client.getMemoryFeed({
+                type: typeFilter ?? undefined,
+                limit: FEED_PAGE_SIZE,
+                before,
+            });
+            if (before) {
+                setFeed((prev) => [...prev, ...result.memories]);
+            }
+            else {
+                setFeed(result.memories);
+            }
+            setHasMore(result.hasMore);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to load memory feed.");
+        }
+        finally {
+            setLoading(false);
+            loadingMore.current = false;
+        }
+    }, [typeFilter]);
+    useEffect(() => {
+        void loadFeed();
+    }, [loadFeed]);
+    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" });
+    }
+    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 }));
+    }
+    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 (_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] }));
+}
+// ── Memory Browser ───────────────────────────────────────────────────────
+function MemoryBrowserPanel({ typeFilter, entityId, entityIds, }) {
+    const [searchInput, setSearchInput] = useState("");
+    const deferredSearch = useDeferredValue(searchInput);
+    const [loading, setLoading] = useState(true);
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState(null);
+    const [expandedId, setExpandedId] = useState(null);
+    const [offset, setOffset] = useState(0);
+    const loadMemories = useCallback(async (pageOffset) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const resp = entityId
+                ? await client.getMemoriesByEntity(entityId, {
+                    type: typeFilter ?? undefined,
+                    limit: BROWSE_PAGE_SIZE,
+                    offset: pageOffset,
+                    entityIds: entityIds ?? undefined,
+                })
+                : await client.browseMemories({
+                    type: typeFilter ?? undefined,
+                    q: deferredSearch.trim() || undefined,
+                    limit: BROWSE_PAGE_SIZE,
+                    offset: pageOffset,
+                });
+            setResult(resp);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to load memories.");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [typeFilter, entityId, entityIds, deferredSearch]);
+    useEffect(() => {
+        setOffset(0);
+        void loadMemories(0);
+    }, [loadMemories]);
+    const handlePage = (direction) => {
+        const newOffset = direction === "next"
+            ? offset + BROWSE_PAGE_SIZE
+            : Math.max(0, offset - BROWSE_PAGE_SIZE);
+        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)))] }))] }));
+}
+// ── Main View ────────────────────────────────────────────────────────────
+export function MemoryViewerView({ contentHeader, } = {}) {
+    const { t, setTab } = useApp();
+    const [viewMode, setViewMode] = useState("feed");
+    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);
+    const [selectedPersonId, setSelectedPersonId] = useState(null);
+    // Load stats
+    useEffect(() => {
+        void client
+            .getMemoryStats()
+            .then((s) => {
+            setStats(s);
+            setStatsError(false);
+        })
+            .catch(() => setStatsError(true));
+    }, []);
+    // Load people from relationships
+    useEffect(() => {
+        setPeopleLoading(true);
+        void client
+            .getRelationshipsPeople({ limit: 200 })
+            .then((result) => setPeople(result.people))
+            .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;
+    // All entity IDs for the selected person (multi-identity support)
+    const selectedEntityIds = selectedPerson?.memberEntityIds ?? null;
+    const handleSelectPerson = (person) => {
+        setSelectedPersonId(person.primaryEntityId);
+        setViewMode("browse");
+    };
+    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 }))] }) }));
+}

package/components/pages/PageScopedChatPane.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+import type { Conversation } from "../../api/client-types";
+import { type ConnectorSendAsContext } from "../chat/connector-send-as";
+import { type PageScope } from "./page-scoped-conversations";
+export interface PageScopedChatPaneProps {
+    scope: PageScope;
+    pageId?: string;
+    /** Override the conversation title (defaults to PAGE_SCOPE_DEFAULT_TITLE[scope]). */
+    title?: string;
+    /** Optional className for the outer wrapper. */
+    className?: string;
+    /**
+     * Dynamic intro card override. When provided, replaces the static
+     * PAGE_SCOPE_COPY[scope] intro text and can attach action buttons (used by
+     * the Browser view to surface Agent Browser Bridge install buttons when the
+     * extension is not yet connected).
+     */
+    introOverride?: {
+        title?: string;
+        body?: ReactNode;
+        actions?: ReactNode;
+    };
+    /**
+     * First-turn system addendum override — replaces PAGE_SCOPE_COPY[scope].systemAddendum
+     * so the agent's first-turn grounding reflects current page state (e.g. the
+     * Browser view tells the agent whether Agent Browser Bridge is connected).
+     */
+    systemAddendumOverride?: string;
+    /** Override the composer placeholder text. */
+    placeholderOverride?: string;
+    /** Keep the intro visible above the thread, even after the chat has history. */
+    persistentIntro?: boolean;
+    /** Optional footer actions rendered inline with the Clear control. */
+    footerActions?: ReactNode;
+    /** Optional connector account context for page chat surfaces that can write through a connector. */
+    connectorContext?: ConnectorSendAsContext | null;
+    /**
+     * Optional conversation adapter for surfaces that want to reuse the shared
+     * sidebar chat UI but resolve a non-page-scoped conversation under the hood.
+     */
+    conversationAdapter?: {
+        allowClear?: boolean;
+        buildRoutingMetadata?: () => Record<string, unknown> | undefined;
+        identityKey: string;
+        onAfterSend?: () => void;
+        onConversationResolved?: (conversation: Conversation) => void;
+        resolveConversation: () => Promise<Conversation>;
+    };
+}
+export declare function PageScopedChatPane({ scope, pageId, title, className, introOverride, systemAddendumOverride, placeholderOverride, persistentIntro, footerActions, connectorContext, conversationAdapter, }: PageScopedChatPaneProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PageScopedChatPane.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageScopedChatPane.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PageScopedChatPane.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,wBAAwB,CAAC;AAMhC,OAAO,EACL,KAAK,sBAAsB,EAK5B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAKL,KAAK,SAAS,EAGf,MAAM,6BAA6B,CAAC;AAoDrC,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,aAAa,CAAC,EAAE;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB,OAAO,CAAC,EAAE,SAAS,CAAC;KACrB,CAAC;IACF;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,8CAA8C;IAC9C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gFAAgF;IAChF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sEAAsE;IACtE,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACjD;;;OAGG;IACH,mBAAmB,CAAC,EAAE;QACpB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,oBAAoB,CAAC,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;QACjE,WAAW,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;QACzB,sBAAsB,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;QAC9D,mBAAmB,EAAE,MAAM,OAAO,CAAC,YAAY,CAAC,CAAC;KAClD,CAAC;CACH;AAcD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,KAAK,EACL,SAAS,EACT,aAAa,EACb,sBAAsB,EACtB,mBAAmB,EACnB,eAAuB,EACvB,aAAa,EACb,gBAAgB,EAChB,mBAAmB,GACpB,EAAE,uBAAuB,2CAo0BzB"}