dsh-mnemon 0.1.2 → 0.1.4

package/lib/types/client/MnemonView.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, Fragment, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { IconChevronLeftOutline14 } from '@deepseek-ai/dsh-client-ui-primitives';
 import { consumeMnemonAnchor, subscribeMnemonAnchor } from "./anchor.js";
 import Markdown from 'markdown-to-jsx';
-import { QODERWORK_REVIEW_POLICY } from "../review-activity.js";
 import { CATEGORIES, } from "../service.js";
 import { MnemonClient } from "./api.js";
 import { translateZh } from "./locales.js";
 import { MnemonLogo } from "./MnemonLogo.js";
+import { appearanceClass, MnemonViewAppearanceProvider, resolveMnemonViewAppearance, useMnemonViewAppearance, } from "./MnemonViewAppearance.js";
 import css from './MnemonView.module.css';
 /** 系统 → 三层存储 → 读写工具；组间以分隔线呈现。 */
 const PAGE_NAV = [
@@ -34,6 +35,22 @@ const PAGE_NAV = [
         ],
     },
 ];
+const SIDEBAR_PAGE_TABS = [
+    { id: 'status', label: 'nav.status', detail: 'nav.status.detail', glyph: '⌘' },
+    { id: 'runtime', label: 'nav.runtime', detail: 'nav.runtime.detail', glyph: '◫' },
+    { id: 'overview', label: 'nav.bodies', detail: 'nav.bodies.detail', glyph: '◇' },
+    { id: 'documents', label: 'nav.documents', detail: 'nav.documents.detail', glyph: '▤' },
+];
+const MEMORY_PAGE_TABS = [
+    { id: 'overview', label: 'nav.overview' },
+    { id: 'explore', label: 'nav.search' },
+    { id: 'list', label: 'nav.content' },
+    { id: 'entities', label: 'nav.entities' },
+];
+const MEMORY_PAGES = new Set(MEMORY_PAGE_TABS.map(item => item.id));
+function isMemoryPage(page) {
+    return MEMORY_PAGES.has(page);
+}
 const CATEGORY_KEYS = {
     decision: 'category.decision',
     preference: 'category.preference',
@@ -43,7 +60,9 @@ const CATEGORY_KEYS = {
     general: 'category.general',
 };
 const I18nContext = createContext(translateZh);
+const LocaleContext = createContext('zh');
 function useT() { return useContext(I18nContext); }
+function useLocale() { return useContext(LocaleContext) === 'en' ? 'en-US' : 'zh-CN'; }
 function categoryLabel(t, category) { return CATEGORY_KEYS[category] === undefined ? category : t(CATEGORY_KEYS[category]); }
 function humanBytes(bytes) {
     if (bytes < 1024)
@@ -62,11 +81,90 @@ function insightKey(insight) {
     return `${insight.memoryBodyId ?? 'memory'}:${insight.id}`;
 }
 function PageHeader(props) {
-    return (_jsxs("div", { className: css.pageHeader, children: [_jsxs("div", { children: [_jsx("h2", { children: props.title }), _jsx("p", { children: props.description })] }), _jsxs("div", { className: css.pageHeaderMeta, children: [props.meta !== undefined && _jsx("code", { children: props.meta }), props.action] })] }));
+    const appearance = useMnemonViewAppearance();
+    return (_jsxs("div", { className: appearanceClass(css.pageHeader, appearance.classes.pageHeader), children: [_jsxs("div", { children: [_jsx("h2", { children: props.title }), _jsx("p", { children: props.description })] }), _jsxs("div", { className: css.pageHeaderMeta, children: [props.meta !== undefined && _jsx("code", { children: props.meta }), props.action] })] }));
+}
+function ProgressiveFooter(props) {
+    const t = useT();
+    if (props.total === 0)
+        return null;
+    const remaining = Math.max(0, props.total - props.visible);
+    return _jsxs("div", { className: props.compact === true ? css.compactListProgress : css.listProgress, children: [_jsx("span", { children: t('common.showing', { visible: props.visible, total: props.total }) }), remaining > 0 && _jsx("button", { type: "button", className: css.secondaryButton, onClick: props.onMore, children: t('common.showMore', { count: Math.min(props.pageSize, remaining) }) })] });
+}
+/** DSH-style action dialog shared by Sidebar add/write flows. */
+function SidebarModal(props) {
+    const t = useT();
+    const appearance = useMnemonViewAppearance();
+    const dialogRef = useRef(null);
+    const returnFocusRef = useRef(null);
+    const close = useCallback(() => { if (props.busy !== true)
+        props.onClose(); }, [props.busy, props.onClose]);
+    useLayoutEffect(() => {
+        returnFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        const firstControl = dialogRef.current?.querySelector('[data-autofocus]')
+            ?? dialogRef.current?.querySelector('input:not(:disabled), textarea:not(:disabled), select:not(:disabled)')
+            ?? dialogRef.current?.querySelector('div:last-child button:not(:disabled)');
+        firstControl?.focus({ preventScroll: true });
+        return () => { if (returnFocusRef.current?.isConnected === true)
+            returnFocusRef.current.focus({ preventScroll: true }); };
+    }, []);
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                close();
+                return;
+            }
+            if (event.key !== 'Tab')
+                return;
+            const controls = Array.from(dialogRef.current?.querySelectorAll('button:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), a[href], [tabindex]:not([tabindex="-1"])') ?? []).filter(control => control.getAttribute('aria-hidden') !== 'true');
+            const first = controls[0];
+            const last = controls.at(-1);
+            if (first === undefined || last === undefined) {
+                event.preventDefault();
+                return;
+            }
+            const active = document.activeElement;
+            if (event.shiftKey && (active === first || !dialogRef.current?.contains(active))) {
+                event.preventDefault();
+                last.focus();
+            }
+            else if (!event.shiftKey && (active === last || !dialogRef.current?.contains(active))) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [close]);
+    return (_jsx("div", { className: appearanceClass(css.modalBackdrop, appearance.classes.modalBackdrop), onPointerDown: event => { if (event.target === event.currentTarget)
+            close(); }, children: _jsxs("section", { ref: dialogRef, className: appearanceClass(css.modal, appearance.classes.modal), role: "dialog", "aria-modal": "true", "aria-label": props.title, children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("h2", { children: props.title }), props.description !== undefined && _jsx("p", { children: props.description })] }), _jsx("button", { type: "button", className: css.iconButton, disabled: props.busy, onClick: close, "aria-label": t('common.cancel'), children: "\u00D7" })] }), _jsx("div", { children: props.children })] }) }));
 }
 function EmptyState(props) {
     return (_jsxs("div", { className: css.emptyState, children: [_jsx("div", { className: css.emptyGlyph, "aria-hidden": "true", children: _jsx("span", { children: props.glyph }) }), _jsxs("div", { children: [_jsx("h3", { children: props.title }), _jsx("p", { children: props.children })] })] }));
 }
+/** Sidebar mirrors the SSH panel's flat tab model; Buildin keeps the grouped navigation unchanged. */
+function WorkspaceNavigation(props) {
+    const t = useT();
+    const appearance = useMnemonViewAppearance();
+    return (_jsxs("div", { className: appearanceClass(css.topNavigation, appearance.classes.topNavigation), children: [appearance.surface === 'sidebar'
+                ? _jsx("div", { className: appearanceClass(css.nav, appearance.classes.nav), role: "tablist", "aria-label": t('nav.aria'), children: SIDEBAR_PAGE_TABS.map(item => {
+                        const active = item.id === 'overview' ? isMemoryPage(props.page) : props.page === item.id;
+                        return _jsx("button", { type: "button", role: "tab", "aria-selected": active, "data-active": active ? '' : undefined, onClick: () => props.onSelect(item.id), children: t(item.label) }, item.id);
+                    }) })
+                : _jsx("nav", { className: appearanceClass(css.nav, appearance.classes.nav), "aria-label": t('nav.aria'), children: PAGE_NAV.map((group, groupIndex) => _jsxs(Fragment, { children: [_jsx("div", { className: appearanceClass(css.navGroup, appearance.classes.navGroup), role: "group", "aria-label": t(group.aria), children: group.entries.map(item => _jsxs("button", { type: "button", "aria-current": props.page === item.id ? 'page' : undefined, onClick: () => props.onSelect(item.id), children: [appearance.showNavigationGlyphs && _jsx("span", { className: css.navGlyph, "aria-hidden": "true", children: item.glyph }), _jsxs("span", { children: [_jsx("strong", { children: t(item.label) }), appearance.showNavigationDetails && _jsx("small", { children: t(item.detail) })] })] }, item.id)) }), appearance.showNavigationDividers && groupIndex < PAGE_NAV.length - 1 && _jsx("span", { className: css.navGroupDivider, "aria-hidden": "true" })] }, group.aria)) }), appearance.showSpaceSummary && _jsxs("div", { className: css.spaceSummary, children: [_jsx("span", { children: t('sidebar.activeSpaces') }), _jsx("code", { children: props.catalogKnown ? `${props.activeBodies} / ${props.bodyCount}` : '— / —' }), _jsx("small", { children: props.writeEnabled ? t('common.agentSupervised') : t('common.readOnly') })] })] }));
+}
+/** Memory tools become a focused second-level tab set on the Sidebar surface. */
+function MemoryNavigation(props) {
+    const t = useT();
+    const appearance = useMnemonViewAppearance();
+    if (appearance.surface !== 'sidebar' || !isMemoryPage(props.page))
+        return null;
+    return (_jsxs("section", { className: appearance.classes.memoryWorkspace, children: [_jsx(PageHeader, { title: t('nav.bodies'), description: t('overview.description'), action: _jsx("button", { type: "button", className: appearanceClass(css.primaryButton, appearance.classes.memoryWriteButton), disabled: !props.writeEnabled, onClick: props.onRemember, children: t('nav.rememberAction') }) }), _jsx("div", { className: appearance.classes.memoryNavigation, children: _jsx("div", { className: appearance.classes.memoryTabs, role: "tablist", "aria-label": t('nav.memory.aria'), children: MEMORY_PAGE_TABS.map(item => {
+                        const active = props.page === item.id;
+                        return _jsx("button", { type: "button", role: "tab", "aria-selected": active, "data-active": active ? '' : undefined, onClick: () => props.onSelect(item.id), children: t(item.label) }, item.id);
+                    }) }) })] }));
+}
 /** Full-text popup for a selected graph node whose inspector preview is clamped. */
 function ContentPreview(props) {
     const t = useT();
@@ -107,9 +205,17 @@ function DocumentMarkdown(props) {
 }
 function InsightCard(props) {
     const t = useT();
+    const appearance = useMnemonViewAppearance();
     const [confirming, setConfirming] = useState(false);
     const [forgetting, setForgetting] = useState(false);
     const { insight } = props;
+    const neutralActionClass = appearance.surface === 'sidebar'
+        ? appearanceClass(css.ghostButton, appearance.classes.itemActionButton)
+        : css.ghostButton;
+    const forgetActionClass = appearance.surface === 'sidebar'
+        ? appearanceClass(css.dangerButton, appearanceClass(appearance.classes.itemActionButton, appearance.classes.itemDangerAction))
+        : css.dangerButton;
+    const inlineConfirming = appearance.surface === 'buildin' && confirming;
     const meta = [
         insight.memoryBodyName,
         insight.category !== undefined ? categoryLabel(t, insight.category) : undefined,
@@ -127,7 +233,7 @@ function InsightCard(props) {
             setConfirming(false);
         }
     };
-    return (_jsxs("article", { className: css.insightCard, children: [_jsxs("div", { className: css.cardTop, children: [_jsx("div", { className: css.badges, children: meta.map(entry => _jsx("span", { className: css.badge, children: entry }, entry)) }), _jsx("code", { className: css.id, title: insight.id, children: insight.id.slice(0, 8) })] }), _jsx("p", { className: css.content, children: insight.content }), (insight.tags?.length ?? 0) > 0 && _jsx("div", { className: css.tags, children: insight.tags.map(tag => _jsxs("span", { children: ["#", tag] }, tag)) }), (insight.entities?.length ?? 0) > 0 && _jsx("div", { className: css.entities, children: insight.entities.map(entity => _jsx("span", { children: entity }, entity)) }), _jsx("div", { className: css.cardActions, children: confirming ? (_jsxs("div", { className: css.confirmBar, role: "group", "aria-label": t('card.confirmAria'), children: [_jsx("span", { children: t('card.confirmText') }), _jsx("button", { type: "button", className: css.dangerSolidButton, disabled: forgetting, onClick: () => void forget(), children: forgetting ? t('card.processing') : t('card.confirmForget') }), _jsx("button", { type: "button", className: css.ghostButton, disabled: forgetting, onClick: () => setConfirming(false), children: t('common.cancel') })] })) : (_jsxs(_Fragment, { children: [props.onRelated !== undefined && _jsx("button", { type: "button", className: css.ghostButton, onClick: () => props.onRelated?.(insight), children: t('card.related') }), props.onClone !== undefined && _jsx("button", { type: "button", className: css.ghostButton, onClick: () => props.onClone?.(insight), children: t('card.clone') }), _jsx("button", { type: "button", className: css.ghostButton, onClick: () => void navigator.clipboard?.writeText(insight.id), children: t('common.copyId') }), props.writeEnabled && _jsx("button", { type: "button", className: css.dangerButton, onClick: () => setConfirming(true), children: t('card.forget') })] })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("article", { className: css.insightCard, children: [_jsxs("div", { className: css.cardTop, children: [_jsx("div", { className: css.badges, children: meta.map(entry => _jsx("span", { className: css.badge, children: entry }, entry)) }), _jsx("code", { className: css.id, title: insight.id, children: insight.id.slice(0, 8) })] }), _jsx("p", { className: css.content, children: insight.content }), (insight.tags?.length ?? 0) > 0 && _jsx("div", { className: css.tags, children: insight.tags.map(tag => _jsxs("span", { children: ["#", tag] }, tag)) }), (insight.entities?.length ?? 0) > 0 && _jsx("div", { className: css.entities, children: insight.entities.map(entity => _jsx("span", { children: entity }, entity)) }), _jsx("div", { className: css.cardActions, children: inlineConfirming ? (_jsxs("div", { className: css.confirmBar, role: "group", "aria-label": t('card.confirmAria'), children: [_jsx("span", { children: t('card.confirmText') }), _jsx("button", { type: "button", className: css.dangerSolidButton, disabled: forgetting, onClick: () => void forget(), children: forgetting ? t('card.processing') : t('card.confirmForget') }), _jsx("button", { type: "button", className: css.ghostButton, disabled: forgetting, onClick: () => setConfirming(false), children: t('common.cancel') })] })) : (_jsxs(_Fragment, { children: [props.onRelated !== undefined && _jsx("button", { type: "button", className: neutralActionClass, onClick: () => props.onRelated?.(insight), children: t('card.related') }), props.onClone !== undefined && _jsx("button", { type: "button", className: neutralActionClass, onClick: () => props.onClone?.(insight), children: t('card.clone') }), _jsx("button", { type: "button", className: neutralActionClass, onClick: () => void navigator.clipboard?.writeText(insight.id), children: t('common.copyId') }), props.writeEnabled && _jsx("button", { type: "button", className: forgetActionClass, onClick: () => setConfirming(true), children: t('card.forget') })] })) })] }), appearance.surface === 'sidebar' && confirming && _jsx(SidebarModal, { title: t('card.confirmText'), description: `${insight.memoryBodyName ?? insight.memoryBodyId ?? ''}${insight.memoryBodyName === undefined && insight.memoryBodyId === undefined ? '' : ' · '}${insight.id}`, busy: forgetting, onClose: () => setConfirming(false), children: _jsxs("div", { className: css.bodyDeleteConfirm, children: [_jsxs("div", { className: css.bodyDeleteSummary, children: [_jsx("p", { className: css.bodyDeleteContent, children: insight.content }), _jsx("span", { children: meta.join(' · ') })] }), _jsxs("div", { className: css.bodyEditActions, children: [_jsx("button", { type: "button", "data-autofocus": true, className: css.ghostButton, disabled: forgetting, onClick: () => setConfirming(false), children: t('common.cancel') }), _jsx("button", { type: "button", className: css.dangerSolidButton, disabled: forgetting, onClick: () => void forget(), children: forgetting ? t('card.processing') : t('card.confirmForget') })] })] }) })] }));
 }
 const GRAPH_WIDTH = 930;
 const GRAPH_HEIGHT = 520;
@@ -545,6 +651,8 @@ function MemoryGraph(props) {
 }
 function OverviewPage(props) {
     const t = useT();
+    const locale = useLocale();
+    const appearance = useMnemonViewAppearance();
     const [graph, setGraph] = useState(null);
     const [catalog, setCatalog] = useState(null);
     const [selected, setSelected] = useState(null);
@@ -552,6 +660,7 @@ function OverviewPage(props) {
     const [error, setError] = useState(null);
     const [changing, setChanging] = useState(null);
     const [creating, setCreating] = useState(false);
+    const [creatingBodyOpen, setCreatingBodyOpen] = useState(false);
     const [bodyName, setBodyName] = useState('');
     const [bodyDescription, setBodyDescription] = useState('');
     const [catalogUnavailable, setCatalogUnavailable] = useState(false);
@@ -559,6 +668,8 @@ function OverviewPage(props) {
     const [editName, setEditName] = useState('');
     const [editDescription, setEditDescription] = useState('');
     const [savingBody, setSavingBody] = useState(null);
+    const [confirmingDeleteBody, setConfirmingDeleteBody] = useState(null);
+    const [deletingBody, setDeletingBody] = useState(null);
     const [preview, setPreview] = useState(null);
     const load = useCallback(async (quiet = false) => {
         if (!quiet)
@@ -645,6 +756,8 @@ function OverviewPage(props) {
             await props.client.createBody({ name: bodyName, description: bodyDescription });
             setBodyName('');
             setBodyDescription('');
+            if (appearance.surface === 'sidebar')
+                setCreatingBodyOpen(false);
             await load(true);
             props.onMutate();
         }
@@ -655,12 +768,39 @@ function OverviewPage(props) {
             setCreating(false);
         }
     };
-    const generated = graph === null ? t('overview.waitingSnapshot') : t('overview.updatedAt', { time: new Date(graph.generatedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) });
+    const deleteBody = async (body) => {
+        setDeletingBody(body.id);
+        setError(null);
+        try {
+            await props.client.deleteBody(body.id);
+            setConfirmingDeleteBody(null);
+            await load(true);
+            props.onMutate();
+        }
+        catch (reason) {
+            setError(message(reason));
+        }
+        finally {
+            setDeletingBody(null);
+        }
+    };
+    const generated = graph === null ? t('overview.waitingSnapshot') : t('overview.updatedAt', { time: new Date(graph.generatedAt).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', second: '2-digit' }) });
     const graphSpaces = graph?.nodes.filter(node => graphNodeKind(node) === 'space').length ?? 0;
     const graphEntities = graph?.nodes.filter(node => graphNodeKind(node) === 'entity').length ?? 0;
     const graphMemories = graph?.nodes.filter(node => graphNodeKind(node) === 'memory').length ?? 0;
     const selectedKind = selected === null ? null : graphNodeKind(selected);
-    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('overview.title'), description: t('overview.description'), meta: t('overview.interval'), action: _jsx("button", { type: "button", className: css.secondaryButton, disabled: loading, onClick: () => void load(), children: loading ? t('overview.syncing') : t('overview.syncNow') }) }), error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), _jsxs("section", { className: css.bodyDirectory, "aria-label": t('overview.directory'), children: [_jsxs("div", { className: css.bodyDirectoryHeader, children: [_jsxs("div", { children: [_jsx("h3", { children: t('overview.directory') }), _jsx("p", { children: t('overview.directory.description') }), _jsx("code", { className: css.bodyDirectoryPath, children: catalogUnavailable ? t('overview.directory.unsynced') : catalog?.directory || props.fallbackDirectory || t('overview.directory.waiting') })] }), _jsx("strong", { children: catalogUnavailable ? t('overview.directory.unsyncedBadge') : `${catalog?.activeCount ?? '—'} / ${catalog?.total ?? '—'} ${t('common.active')}` })] }), _jsxs("div", { className: css.bodyGrid, children: [catalog?.items.map(body => (_jsx("article", { className: css.bodyCard, "data-active": body.active || undefined, "data-healthy": body.healthy || undefined, "data-editing": editingBody === body.id || undefined, title: body.error, children: editingBody === body.id ? (_jsxs("form", { className: css.bodyEdit, onSubmit: event => void saveEdit(event, body), children: [_jsxs("label", { children: [t('overview.editName'), _jsx("input", { "aria-label": t('overview.editName'), value: editName, onChange: event => setEditName(event.target.value), maxLength: 100, required: true })] }), _jsxs("label", { children: [t('overview.editDescription'), _jsx("textarea", { "aria-label": t('overview.editDescription'), value: editDescription, onChange: event => setEditDescription(event.target.value), rows: 3, maxLength: 1000 })] }), _jsxs("div", { className: css.bodyEditActions, children: [_jsx("button", { type: "submit", className: css.primaryButton, disabled: savingBody === body.id || editName.trim() === '', children: savingBody === body.id ? t('overview.savingBody') : t('overview.saveBody') }), _jsx("button", { type: "button", className: css.ghostButton, onClick: () => setEditingBody(null), children: t('common.cancel') })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.bodyCardTop, children: [_jsx("span", { className: css.bodySignal }), _jsxs("div", { children: [_jsx("strong", { children: body.name }), _jsx("code", { children: body.id }), _jsx("small", { className: css.bodyHealth, children: body.healthy ? t('overview.storageHealthy') : t('overview.storageUnhealthy') })] }), _jsxs("div", { className: css.bodyCardActions, children: [_jsxs("button", { type: "button", className: css.bodySwitch, role: "switch", "aria-checked": body.active, "aria-label": t('overview.toggleAria', { name: body.name }), disabled: !props.writeEnabled || changing === body.id, onClick: () => void toggle(body), children: [_jsx("span", { className: css.bodySwitchTrack, "aria-hidden": "true", children: _jsx("i", {}) }), _jsx("span", { children: changing === body.id ? t('overview.toggling') : body.active ? t('common.active') : t('common.inactive') })] }), _jsx("button", { type: "button", className: css.bodyEditButton, "aria-label": t('overview.editBodyAria', { name: body.name }), title: t('overview.editBody'), disabled: !props.writeEnabled, onClick: () => beginEdit(body), children: "\u270E" })] })] }), _jsx("p", { children: body.description || t('overview.noDescription') }), _jsxs("footer", { children: [_jsx("span", { children: t('common.memories', { count: body.stats?.totalInsights ?? 0 }) }), _jsx("span", { children: t('common.edges', { count: body.stats?.edgeCount ?? 0 }) }), _jsx("span", { children: humanBytes(body.stats?.dbSizeBytes ?? 0) })] })] })) }, body.id))), catalog?.total === 0 && _jsxs("div", { className: css.bodyDirectoryEmpty, children: [_jsx("span", { children: "\u25C7" }), _jsxs("div", { children: [_jsx("strong", { children: catalogUnavailable ? t('overview.unsyncedTitle') : t('overview.emptyTitle') }), _jsx("p", { children: catalogUnavailable ? t('overview.unsyncedShort') : t('overview.emptyShort') })] })] })] }), props.writeEnabled && !catalogUnavailable && _jsxs("details", { className: css.bodyCreate, open: catalog?.total === 0 ? true : undefined, children: [_jsx("summary", { children: t('overview.create') }), _jsxs("form", { onSubmit: event => void create(event), children: [_jsx("input", { "aria-label": t('overview.createName'), value: bodyName, onChange: event => setBodyName(event.target.value), placeholder: t('overview.createNamePlaceholder'), required: true }), _jsx("input", { "aria-label": t('overview.createDescription'), value: bodyDescription, onChange: event => setBodyDescription(event.target.value), placeholder: t('overview.createDescriptionPlaceholder'), required: true }), _jsx("button", { type: "submit", className: css.secondaryButton, disabled: creating, children: creating ? t('overview.creating') : t('overview.createAction') })] })] })] }), !catalogUnavailable && graph !== null && graph.nodes.length > 0 ? (_jsxs("div", { className: css.graphLayout, children: [_jsxs("section", { className: css.graphPanel, children: [_jsxs("div", { className: css.graphToolbar, children: [_jsxs("div", { children: [_jsx("span", { className: css.liveDot }), t('overview.snapshot'), " ", _jsx("small", { children: generated })] }), _jsxs("div", { className: css.graphLegend, children: [_jsx("span", { "data-edge": "scope", children: t('overview.edgeScope') }), _jsx("span", { "data-edge": "temporal", children: t('overview.edgeTemporal') }), _jsx("span", { "data-edge": "semantic", children: t('overview.edgeSemantic') }), _jsx("span", { "data-edge": "causal", children: t('overview.edgeCausal') }), _jsx("span", { "data-edge": "entity", children: t('overview.edgeEntity') })] })] }), _jsx("div", { className: css.graphViewport, children: _jsx(MemoryGraph, { graph: graph, selectedId: selected === null ? undefined : graphNodeKey(selected), onSelect: setSelected }) }), _jsxs("div", { className: css.graphFooter, children: [_jsx("span", { children: t('overview.graphComposition', { spaces: graphSpaces, memories: graphMemories, entities: graphEntities }) }), _jsxs("span", { children: [t('overview.graphCount', { visible: Math.min(graph.nodes.length, 60), total: graph.nodes.length }), " \u00B7 ", t('overview.graphEdges', { count: graph.edges.length })] })] })] }), _jsx("aside", { className: css.graphInspector, "data-empty": selected === null || undefined, children: selected === null ? (_jsxs("div", { className: css.inspectorEmpty, children: [_jsx(MnemonLogo, { className: css.inspectorLogo, title: t('overview.inspector') }), _jsx("h3", { children: t('overview.selectNode') }), _jsx("p", { children: t('overview.selectNodeText') })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.inspectorHeading, children: [_jsx("span", { children: t(selectedKind === 'space' ? 'overview.inspectorSpace' : selectedKind === 'entity' ? 'overview.inspectorEntity' : 'overview.inspector') }), _jsx("button", { type: "button", onClick: () => setSelected(null), "aria-label": t('overview.closeInspector'), children: "\u00D7" })] }), _jsx("span", { className: css.categoryChip, children: graphKindLabel(t, selected) }), _jsxs("div", { className: css.inspectorTitleRow, children: [_jsx("h3", { className: css.inspectorTitle, children: selected.content }), selectedKind === 'memory' && selected.content.length > 140 && _jsx("button", { type: "button", className: css.inspectorEye, onClick: () => setPreview(selected), "aria-label": t('overview.previewAria'), title: t('overview.previewAria'), children: _jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", "aria-hidden": "true", children: [_jsx("path", { d: "M1 8s2.6-4.4 7-4.4S15 8 15 8s-2.6 4.4-7 4.4S1 8 1 8z", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("circle", { cx: "8", cy: "8", r: "2.1", fill: "currentColor" })] }) })] }), selectedKind === 'space'
+    const editingBodyView = editingBody === null ? undefined : catalog?.items.find(body => body.id === editingBody);
+    const deletingBodyView = confirmingDeleteBody === null ? undefined : catalog?.items.find(body => body.id === confirmingDeleteBody);
+    const bodyEditForm = (body) => _jsxs("form", { className: css.bodyEdit, onSubmit: event => void saveEdit(event, body), children: [_jsxs("label", { children: [t('overview.editName'), _jsx("input", { "aria-label": t('overview.editName'), value: editName, onChange: event => setEditName(event.target.value), maxLength: 100, required: true })] }), _jsxs("label", { children: [t('overview.editDescription'), _jsx("textarea", { "aria-label": t('overview.editDescription'), value: editDescription, onChange: event => setEditDescription(event.target.value), rows: 4, maxLength: 1000 })] }), _jsxs("div", { className: css.bodyEditActions, children: [appearance.surface === 'sidebar' && _jsx("button", { type: "button", className: css.ghostButton, disabled: savingBody === body.id, onClick: () => setEditingBody(null), children: t('common.cancel') }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: savingBody === body.id || editName.trim() === '', children: savingBody === body.id ? t('overview.savingBody') : t('overview.saveBody') }), appearance.surface === 'buildin' && _jsx("button", { type: "button", className: css.ghostButton, onClick: () => setEditingBody(null), children: t('common.cancel') })] })] });
+    const bodyCreateForm = _jsxs("form", { className: css.bodyEdit, onSubmit: event => void create(event), children: [_jsxs("label", { children: [t('overview.createName'), _jsx("input", { "aria-label": t('overview.createName'), value: bodyName, onChange: event => setBodyName(event.target.value), placeholder: t('overview.createNamePlaceholder'), maxLength: 100, required: true })] }), _jsxs("label", { children: [t('overview.createDescription'), _jsx("textarea", { "aria-label": t('overview.createDescription'), value: bodyDescription, onChange: event => setBodyDescription(event.target.value), placeholder: t('overview.createDescriptionPlaceholder'), rows: 5, maxLength: 1000, required: true })] }), _jsxs("div", { className: css.bodyEditActions, children: [_jsx("button", { type: "button", className: css.ghostButton, disabled: creating, onClick: () => setCreatingBodyOpen(false), children: t('common.cancel') }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: creating || bodyName.trim() === '' || bodyDescription.trim() === '', children: creating ? t('overview.creating') : t('overview.createAction') })] })] });
+    const bodyToggle = (body) => _jsxs("button", { type: "button", className: css.bodySwitch, role: "switch", "aria-checked": body.active, "aria-label": t('overview.toggleAria', { name: body.name }), disabled: !props.writeEnabled || changing === body.id || deletingBody === body.id, onClick: () => void toggle(body), children: [_jsx("span", { className: css.bodySwitchTrack, "aria-hidden": "true", children: _jsx("i", {}) }), _jsx("span", { children: changing === body.id ? t('overview.toggling') : body.active ? t('common.active') : t('common.inactive') })] });
+    const bodyEditActionClass = appearanceClass(css.ghostButton, appearanceClass(appearance.classes.itemActionButton, appearance.classes.itemEditAction));
+    const bodyDeleteActionClass = appearanceClass(css.dangerButton, appearanceClass(appearance.classes.itemActionButton, appearance.classes.itemDangerAction));
+    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: appearance.surface === 'sidebar' ? t('nav.overview') : t('overview.title'), description: t(appearance.surface === 'sidebar' ? 'overview.pageDescription' : 'overview.description'), meta: t('overview.interval'), action: _jsx("button", { type: "button", className: css.secondaryButton, disabled: loading, onClick: () => void load(), children: loading ? t('overview.syncing') : t('overview.syncNow') }) }), error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), _jsxs("section", { className: css.bodyDirectory, "aria-label": t('overview.directory'), children: [_jsxs("div", { className: css.bodyDirectoryHeader, children: [_jsxs("div", { children: [_jsx("h3", { children: t('overview.directory') }), _jsx("p", { children: t('overview.directory.description') }), _jsx("code", { className: css.bodyDirectoryPath, children: catalogUnavailable ? t('overview.directory.unsynced') : catalog?.directory || props.fallbackDirectory || t('overview.directory.waiting') })] }), appearance.surface === 'sidebar' ? _jsxs("div", { className: appearance.classes.bodyDirectoryActions, children: [_jsx("strong", { children: catalogUnavailable ? t('overview.directory.unsyncedBadge') : `${catalog?.activeCount ?? '—'} / ${catalog?.total ?? '—'} ${t('common.active')}` }), props.writeEnabled && !catalogUnavailable && _jsx("button", { type: "button", className: bodyEditActionClass, onClick: () => setCreatingBodyOpen(true), children: t('overview.createTitle') })] }) : _jsx("strong", { children: catalogUnavailable ? t('overview.directory.unsyncedBadge') : `${catalog?.activeCount ?? '—'} / ${catalog?.total ?? '—'} ${t('common.active')}` })] }), _jsxs("div", { className: css.bodyGrid, children: [catalog?.items.map(body => (_jsx("article", { className: css.bodyCard, "data-active": body.active || undefined, "data-healthy": body.healthy || undefined, "data-editing": (appearance.surface === 'buildin' && editingBody === body.id) || undefined, title: body.error, children: appearance.surface === 'buildin'
+                                    ? editingBody === body.id
+                                        ? bodyEditForm(body)
+                                        : _jsxs(_Fragment, { children: [_jsxs("div", { className: css.bodyCardTop, children: [_jsx("span", { className: css.bodySignal }), _jsxs("div", { children: [_jsx("strong", { children: body.name }), _jsx("code", { children: body.id }), _jsx("small", { className: css.bodyHealth, children: body.healthy ? t('overview.storageHealthy') : t('overview.storageUnhealthy') })] }), _jsxs("div", { className: css.bodyCardActions, children: [bodyToggle(body), _jsx("button", { type: "button", className: css.bodyEditButton, "aria-label": t('overview.editBodyAria', { name: body.name }), title: t('overview.editBody'), disabled: !props.writeEnabled, onClick: () => beginEdit(body), children: "\u270E" })] })] }), _jsx("p", { children: body.description || t('overview.noDescription') }), _jsxs("footer", { children: [_jsx("span", { children: t('common.memories', { count: body.stats?.totalInsights ?? 0 }) }), _jsx("span", { children: t('common.edges', { count: body.stats?.edgeCount ?? 0 }) }), _jsx("span", { children: humanBytes(body.stats?.dbSizeBytes ?? 0) })] })] })
+                                    : _jsxs(_Fragment, { children: [_jsxs("div", { className: appearance.classes.bodyCardHeader, children: [_jsxs("div", { className: appearance.classes.bodyCardIdentity, children: [_jsx("span", { className: css.bodySignal }), _jsxs("div", { children: [_jsx("strong", { children: body.name }), _jsxs("div", { className: appearance.classes.bodyCardMeta, children: [_jsx("code", { children: body.id }), _jsx("small", { className: css.bodyHealth, children: body.healthy ? t('overview.storageHealthy') : t('overview.storageUnhealthy') })] })] })] }), bodyToggle(body)] }), _jsx("p", { title: body.description || t('overview.noDescription'), children: body.description || t('overview.noDescription') }), _jsxs("footer", { className: appearance.classes.bodyCardFooter, children: [_jsxs("div", { className: appearance.classes.bodyCardStats, children: [_jsx("span", { children: t('common.memories', { count: body.stats?.totalInsights ?? 0 }) }), _jsx("span", { children: t('common.edges', { count: body.stats?.edgeCount ?? 0 }) }), _jsx("span", { children: humanBytes(body.stats?.dbSizeBytes ?? 0) })] }), _jsxs("div", { className: css.bodyCardActions, children: [_jsx("button", { type: "button", className: bodyEditActionClass, "aria-label": t('overview.editBodyAria', { name: body.name }), disabled: !props.writeEnabled || deletingBody === body.id, onClick: () => beginEdit(body), children: t('overview.editBody') }), _jsx("button", { type: "button", className: bodyDeleteActionClass, "aria-label": t('overview.deleteBodyAria', { name: body.name }), disabled: !props.writeEnabled || deletingBody === body.id, onClick: () => setConfirmingDeleteBody(body.id), children: t('overview.deleteBody') })] })] })] }) }, body.id))), catalog?.total === 0 && _jsxs("div", { className: css.bodyDirectoryEmpty, children: [_jsx("span", { children: "\u25C7" }), _jsxs("div", { children: [_jsx("strong", { children: catalogUnavailable ? t('overview.unsyncedTitle') : t('overview.emptyTitle') }), _jsx("p", { children: catalogUnavailable ? t('overview.unsyncedShort') : t('overview.emptyShort') })] })] })] }), appearance.surface === 'buildin' && props.writeEnabled && !catalogUnavailable && _jsxs("details", { className: css.bodyCreate, open: catalog?.total === 0 ? true : undefined, children: [_jsx("summary", { children: t('overview.create') }), _jsxs("form", { onSubmit: event => void create(event), children: [_jsx("input", { "aria-label": t('overview.createName'), value: bodyName, onChange: event => setBodyName(event.target.value), placeholder: t('overview.createNamePlaceholder'), required: true }), _jsx("input", { "aria-label": t('overview.createDescription'), value: bodyDescription, onChange: event => setBodyDescription(event.target.value), placeholder: t('overview.createDescriptionPlaceholder'), required: true }), _jsx("button", { type: "submit", className: css.secondaryButton, disabled: creating, children: creating ? t('overview.creating') : t('overview.createAction') })] })] })] }), appearance.surface === 'sidebar' && creatingBodyOpen && _jsx(SidebarModal, { title: t('overview.createTitle'), description: catalog?.directory || props.fallbackDirectory || t('overview.directory.waiting'), busy: creating, onClose: () => setCreatingBodyOpen(false), children: bodyCreateForm }), appearance.surface === 'sidebar' && editingBodyView !== undefined && _jsx(SidebarModal, { title: t('overview.editBodyAria', { name: editingBodyView.name }), description: editingBodyView.id, busy: savingBody === editingBodyView.id, onClose: () => setEditingBody(null), children: bodyEditForm(editingBodyView) }), appearance.surface === 'sidebar' && deletingBodyView !== undefined && _jsx(SidebarModal, { title: t('overview.deleteTitle', { name: deletingBodyView.name }), description: deletingBodyView.id, busy: deletingBody === deletingBodyView.id, onClose: () => setConfirmingDeleteBody(null), children: _jsxs("div", { className: css.bodyDeleteConfirm, children: [_jsx("p", { children: t('overview.deleteWarning') }), _jsxs("div", { className: css.bodyDeleteSummary, children: [_jsx("strong", { children: deletingBodyView.name }), _jsxs("span", { children: [t('common.memories', { count: deletingBodyView.stats?.totalInsights ?? 0 }), " \u00B7 ", t('common.edges', { count: deletingBodyView.stats?.edgeCount ?? 0 }), " \u00B7 ", humanBytes(deletingBodyView.stats?.dbSizeBytes ?? 0)] })] }), _jsxs("div", { className: css.bodyEditActions, children: [_jsx("button", { type: "button", "data-autofocus": true, className: css.ghostButton, disabled: deletingBody === deletingBodyView.id, onClick: () => setConfirmingDeleteBody(null), children: t('common.cancel') }), _jsx("button", { type: "button", className: css.dangerSolidButton, disabled: deletingBody === deletingBodyView.id, onClick: () => void deleteBody(deletingBodyView), children: deletingBody === deletingBodyView.id ? t('overview.deletingBody') : t('overview.deleteAction') })] })] }) }), !catalogUnavailable && graph !== null && graph.nodes.length > 0 ? (_jsxs("div", { className: css.graphLayout, children: [_jsxs("section", { className: css.graphPanel, children: [_jsxs("div", { className: css.graphToolbar, children: [_jsxs("div", { children: [_jsx("span", { className: css.liveDot }), t('overview.snapshot'), " ", _jsx("small", { children: generated })] }), _jsxs("div", { className: css.graphLegend, children: [_jsx("span", { "data-edge": "scope", children: t('overview.edgeScope') }), _jsx("span", { "data-edge": "temporal", children: t('overview.edgeTemporal') }), _jsx("span", { "data-edge": "semantic", children: t('overview.edgeSemantic') }), _jsx("span", { "data-edge": "causal", children: t('overview.edgeCausal') }), _jsx("span", { "data-edge": "entity", children: t('overview.edgeEntity') })] })] }), _jsx("div", { className: css.graphViewport, children: _jsx(MemoryGraph, { graph: graph, selectedId: selected === null ? undefined : graphNodeKey(selected), onSelect: setSelected }) }), _jsxs("div", { className: css.graphFooter, children: [_jsx("span", { children: t('overview.graphComposition', { spaces: graphSpaces, memories: graphMemories, entities: graphEntities }) }), _jsxs("span", { children: [t('overview.graphCount', { visible: Math.min(graph.nodes.length, 60), total: graph.nodes.length }), " \u00B7 ", t('overview.graphEdges', { count: graph.edges.length })] })] })] }), _jsx("aside", { className: css.graphInspector, "data-empty": selected === null || undefined, children: selected === null ? (_jsxs("div", { className: css.inspectorEmpty, children: [appearance.showLogo ? _jsx(MnemonLogo, { className: css.inspectorLogo, title: t('overview.inspector') }) : _jsx("span", { className: appearanceClass(css.inspectorLogo, appearance.classes.inspectorGlyph), "aria-hidden": "true", children: "\u25C7" }), _jsx("h3", { children: t('overview.selectNode') }), _jsx("p", { children: t('overview.selectNodeText') })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.inspectorHeading, children: [_jsx("span", { children: t(selectedKind === 'space' ? 'overview.inspectorSpace' : selectedKind === 'entity' ? 'overview.inspectorEntity' : 'overview.inspector') }), _jsx("button", { type: "button", onClick: () => setSelected(null), "aria-label": t('overview.closeInspector'), children: "\u00D7" })] }), _jsx("span", { className: css.categoryChip, children: graphKindLabel(t, selected) }), _jsxs("div", { className: css.inspectorTitleRow, children: [_jsx("h3", { className: css.inspectorTitle, children: selected.content }), selectedKind === 'memory' && selected.content.length > 140 && _jsx("button", { type: "button", className: css.inspectorEye, onClick: () => setPreview(selected), "aria-label": t('overview.previewAria'), title: t('overview.previewAria'), children: _jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", "aria-hidden": "true", children: [_jsx("path", { d: "M1 8s2.6-4.4 7-4.4S15 8 15 8s-2.6 4.4-7 4.4S1 8 1 8z", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("circle", { cx: "8", cy: "8", r: "2.1", fill: "currentColor" })] }) })] }), selectedKind === 'space'
                                     ? _jsxs("dl", { className: css.inspectorMeta, children: [_jsxs("div", { children: [_jsx("dt", { children: t('overview.spaceId') }), _jsx("dd", { children: _jsx("code", { children: selected.memoryBodyId ?? selected.id }) })] }), _jsxs("div", { children: [_jsx("dt", { children: t('overview.containedMemories') }), _jsx("dd", { children: selected.occurrenceCount ?? 0 })] })] })
                                     : selectedKind === 'entity'
                                         ? _jsxs("dl", { className: css.inspectorMeta, children: [_jsxs("div", { children: [_jsx("dt", { children: t('overview.entityMentions') }), _jsx("dd", { children: selected.occurrenceCount ?? 0 })] }), _jsxs("div", { children: [_jsx("dt", { children: t('term.spaces') }), _jsx("dd", { children: selected.memoryBodyNames?.join(' · ') || '—' })] })] })
@@ -674,6 +814,8 @@ function OverviewPage(props) {
 }
 function ExplorePage(props) {
     const t = useT();
+    const appearance = useMnemonViewAppearance();
+    const pageSize = appearance.surface === 'sidebar' ? 6 : Number.MAX_SAFE_INTEGER;
     const [query, setQuery] = useState(props.seed);
     const [mode, setMode] = useState('smart');
     const [category, setCategory] = useState('');
@@ -685,6 +827,8 @@ function ExplorePage(props) {
     const [relatedTo, setRelatedTo] = useState(null);
     const [related, setRelated] = useState([]);
     const [relatedLoading, setRelatedLoading] = useState(false);
+    const [visibleResultLimit, setVisibleResultLimit] = useState(pageSize);
+    const [visibleRelatedLimit, setVisibleRelatedLimit] = useState(pageSize);
     useEffect(() => { if (props.seed !== '')
         setQuery(props.seed); }, [props.seed]);
     const runSearch = async (withAgent) => {
@@ -695,6 +839,8 @@ function ExplorePage(props) {
         setError(null);
         setRelatedTo(null);
         setAgentAnswer(null);
+        setVisibleResultLimit(pageSize);
+        setVisibleRelatedLimit(pageSize);
         try {
             const request = { query, mode, ...(category === '' ? {} : { category }), limit: props.status?.defaultRecallLimit ?? 10 };
             if (withAgent) {
@@ -722,6 +868,7 @@ function ExplorePage(props) {
         setRelated([]);
         setRelatedLoading(true);
         setError(null);
+        setVisibleRelatedLimit(pageSize);
         if (typeof window.requestAnimationFrame === 'function')
             window.requestAnimationFrame(() => document.getElementById('mnemon-related-pane')?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }));
         try {
@@ -741,17 +888,27 @@ function ExplorePage(props) {
         if (relatedTo !== null && insightKey(relatedTo) === insightKey(insight))
             setRelatedTo(null);
     };
-    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('search.title'), description: t('search.description'), meta: t('search.maxResults', { count: props.status?.defaultRecallLimit ?? '—' }) }), _jsxs("form", { className: css.searchBar, onSubmit: event => void search(event), children: [_jsxs("div", { className: css.queryField, children: [_jsx("span", { "aria-hidden": "true", children: "\u2315" }), _jsx("input", { value: query, onChange: event => setQuery(event.target.value), placeholder: t('search.placeholder'), "aria-label": t('search.queryAria') }), _jsx("kbd", { children: "\u21B5" })] }), _jsxs("div", { className: css.searchControls, children: [_jsxs("label", { children: [t('common.category'), _jsxs("select", { value: category, onChange: event => setCategory(event.target.value), "aria-label": t('search.categoryAria'), children: [_jsx("option", { value: "", children: t('common.allCategories') }), CATEGORIES.map(value => _jsx("option", { value: value, children: categoryLabel(t, value) }, value))] })] }), _jsxs("label", { children: [t('search.strategy'), _jsxs("select", { value: mode, onChange: event => setMode(event.target.value), "aria-label": t('search.modeAria'), children: [_jsx("option", { value: "smart", children: t('search.modeSmart') }), _jsx("option", { value: "keyword", children: t('search.modeKeyword') }), _jsx("option", { value: "basic", children: t('search.modeBasic') })] })] }), _jsxs("div", { className: css.searchActions, children: [_jsx("button", { type: "submit", className: css.secondaryButton, disabled: searching || query.trim() === '', children: searchKind === 'direct' ? t('search.searching') : t('search.action') }), _jsx("button", { type: "button", className: css.primaryButton, disabled: searching || query.trim() === '' || props.status?.lifecycle?.sessionAvailable !== true, onClick: () => void runSearch(true), children: searchKind === 'agent' ? t('search.agentSearching') : t('search.agentAction') })] })] })] }), agentAnswer !== null && _jsxs("section", { className: css.agentAnswer, "aria-label": t('search.agentAnswer'), children: [_jsxs("div", { className: css.agentAnswerHeading, children: [_jsxs("div", { children: [_jsx("span", { children: t('search.agentAnswerHint') }), _jsx("h3", { children: t('search.agentAnswer') })] }), _jsx("code", { children: agentAnswer.runId.slice(0, 8) })] }), _jsx("p", { children: agentAnswer.answer }), agentAnswer.citations.length > 0 && _jsx("div", { className: css.agentCitations, children: agentAnswer.citations.map(citation => _jsx("code", { children: citation }, citation)) })] }), error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), !searched && _jsx(EmptyState, { glyph: "\u2315", title: t('search.startTitle'), children: t('search.startText') }), searched && !searching && results.length === 0 && error === null && _jsx(EmptyState, { glyph: "0", title: t('search.emptyTitle'), children: t('search.emptyText') }), results.length > 0 && (_jsxs("div", { className: relatedTo === null ? css.singleColumn : css.resultLayout, children: [_jsxs("section", { className: css.results, children: [_jsxs("div", { className: css.sectionHeading, children: [_jsx("div", { children: _jsx("h3", { children: t('search.results') }) }), _jsx("strong", { children: results.length })] }), results.map(insight => _jsx(InsightCard, { insight: insight, writeEnabled: props.writeEnabled, onForget: forget, onRelated: item => void showRelated(item) }, insightKey(insight)))] }), relatedTo !== null && _jsxs("aside", { id: "mnemon-related-pane", className: css.relatedPane, children: [_jsxs("div", { className: css.sectionHeading, children: [_jsx("div", { children: _jsx("h3", { children: t('search.related') }) }), _jsx("button", { type: "button", onClick: () => setRelatedTo(null), "aria-label": t('search.closeRelated'), children: "\u00D7" })] }), _jsx("p", { className: css.relatedSource, children: relatedTo.content }), relatedLoading && _jsx("div", { className: css.loading, children: t('search.traversing') }), !relatedLoading && related.length === 0 && _jsx("div", { className: css.muted, children: t('search.noRelated') }), related.map(insight => _jsx(InsightCard, { insight: insight, writeEnabled: props.writeEnabled, onForget: forget, onRelated: item => void showRelated(item) }, insightKey(insight)))] })] }))] }));
+    const visibleResults = results.slice(0, visibleResultLimit);
+    const visibleRelated = related.slice(0, visibleRelatedLimit);
+    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('search.title'), description: t('search.description'), meta: t('search.maxResults', { count: props.status?.defaultRecallLimit ?? '—' }) }), _jsxs("form", { className: css.searchBar, onSubmit: event => void search(event), children: [_jsxs("div", { className: css.queryField, children: [_jsx("span", { "aria-hidden": "true", children: "\u2315" }), _jsx("input", { value: query, onChange: event => setQuery(event.target.value), placeholder: t('search.placeholder'), "aria-label": t('search.queryAria') }), _jsx("kbd", { children: "\u21B5" })] }), _jsxs("div", { className: css.searchControls, children: [_jsxs("label", { children: [t('common.category'), _jsxs("select", { value: category, onChange: event => setCategory(event.target.value), "aria-label": t('search.categoryAria'), children: [_jsx("option", { value: "", children: t('common.allCategories') }), CATEGORIES.map(value => _jsx("option", { value: value, children: categoryLabel(t, value) }, value))] })] }), _jsxs("label", { children: [t('search.strategy'), _jsxs("select", { value: mode, onChange: event => setMode(event.target.value), "aria-label": t('search.modeAria'), children: [_jsx("option", { value: "smart", children: t('search.modeSmart') }), _jsx("option", { value: "keyword", children: t('search.modeKeyword') }), _jsx("option", { value: "basic", children: t('search.modeBasic') })] })] }), _jsxs("div", { className: css.searchActions, children: [_jsx("button", { type: "submit", className: css.secondaryButton, disabled: searching || query.trim() === '', children: searchKind === 'direct' ? t('search.searching') : t('search.action') }), _jsx("button", { type: "button", className: css.primaryButton, disabled: searching || query.trim() === '' || props.status?.lifecycle?.sessionAvailable !== true, onClick: () => void runSearch(true), children: searchKind === 'agent' ? t('search.agentSearching') : t('search.agentAction') })] })] })] }), agentAnswer !== null && _jsxs("section", { className: css.agentAnswer, "aria-label": t('search.agentAnswer'), children: [_jsxs("div", { className: css.agentAnswerHeading, children: [_jsxs("div", { children: [_jsx("span", { children: t('search.agentAnswerHint') }), _jsx("h3", { children: t('search.agentAnswer') })] }), _jsx("code", { children: agentAnswer.runId.slice(0, 8) })] }), _jsx("p", { children: agentAnswer.answer }), agentAnswer.citations.length > 0 && _jsx("div", { className: css.agentCitations, children: agentAnswer.citations.map(citation => _jsx("code", { children: citation }, citation)) })] }), error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), !searched && _jsx(EmptyState, { glyph: "\u2315", title: t('search.startTitle'), children: t('search.startText') }), searched && !searching && results.length === 0 && error === null && _jsx(EmptyState, { glyph: "0", title: t('search.emptyTitle'), children: t('search.emptyText') }), results.length > 0 && (_jsxs("div", { className: relatedTo === null ? css.singleColumn : css.resultLayout, children: [_jsxs("section", { className: css.results, children: [_jsxs("div", { className: css.sectionHeading, children: [_jsx("div", { children: _jsx("h3", { children: t('search.results') }) }), _jsx("strong", { children: results.length })] }), visibleResults.map(insight => _jsx(InsightCard, { insight: insight, writeEnabled: props.writeEnabled, onForget: forget, onRelated: item => void showRelated(item) }, insightKey(insight))), appearance.surface === 'sidebar' && _jsx(ProgressiveFooter, { visible: visibleResults.length, total: results.length, pageSize: pageSize, onMore: () => setVisibleResultLimit(value => value + pageSize) })] }), relatedTo !== null && _jsxs("aside", { id: "mnemon-related-pane", className: css.relatedPane, children: [_jsxs("div", { className: css.sectionHeading, children: [_jsx("div", { children: _jsx("h3", { children: t('search.related') }) }), _jsx("button", { type: "button", onClick: () => setRelatedTo(null), "aria-label": t('search.closeRelated'), children: "\u00D7" })] }), _jsx("p", { className: css.relatedSource, children: relatedTo.content }), relatedLoading && _jsx("div", { className: css.loading, children: t('search.traversing') }), !relatedLoading && related.length === 0 && _jsx("div", { className: css.muted, children: t('search.noRelated') }), visibleRelated.map(insight => _jsx(InsightCard, { insight: insight, writeEnabled: props.writeEnabled, onForget: forget, onRelated: item => void showRelated(item) }, insightKey(insight))), appearance.surface === 'sidebar' && !relatedLoading && _jsx(ProgressiveFooter, { visible: visibleRelated.length, total: related.length, pageSize: pageSize, onMore: () => setVisibleRelatedLimit(value => value + pageSize) })] })] }))] }));
 }
 function EntitiesPage(props) {
     const t = useT();
+    const appearance = useMnemonViewAppearance();
+    const entityPageSize = appearance.surface === 'sidebar' ? 10 : Number.MAX_SAFE_INTEGER;
+    const insightPageSize = appearance.surface === 'sidebar' ? 6 : Number.MAX_SAFE_INTEGER;
     const [view, setView] = useState({ items: [], insights: [] });
     const [entity, setEntity] = useState('');
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    const [visibleEntityLimit, setVisibleEntityLimit] = useState(entityPageSize);
+    const [visibleInsightLimit, setVisibleInsightLimit] = useState(insightPageSize);
     const load = useCallback(async (selected) => {
         setLoading(true);
         setError(null);
+        setVisibleInsightLimit(insightPageSize);
+        if (selected === undefined)
+            setVisibleEntityLimit(entityPageSize);
         try {
             setView(await props.client.entities(selected, 20));
         }
@@ -761,14 +918,19 @@ function EntitiesPage(props) {
         finally {
             setLoading(false);
         }
-    }, [props.client]);
+    }, [entityPageSize, insightPageSize, props.client]);
     useEffect(() => { void load(); }, [load, props.revision]);
     const submit = (event) => { event.preventDefault(); if (entity.trim() !== '')
         void load(entity); };
-    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('entities.title'), description: t('entities.description'), meta: t('entities.count', { count: view.items.length }) }), _jsxs("div", { className: css.entityLayout, children: [_jsxs("aside", { className: css.entityRail, children: [_jsxs("form", { className: css.entitySearch, onSubmit: submit, children: [_jsx("input", { "aria-label": t('entities.nameAria'), value: entity, onChange: event => setEntity(event.target.value), placeholder: t('entities.placeholder') }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: loading || entity.trim() === '', children: t('entities.action') })] }), _jsxs("div", { className: css.entityHeading, children: [_jsx("span", { children: t('entities.top') }), _jsx("small", { children: t('entities.frequency') })] }), _jsx("div", { className: css.entityList, children: view.items.map(item => _jsxs("button", { type: "button", "aria-pressed": view.selected === item.entity, onClick: () => { setEntity(item.entity); void load(item.entity); }, children: [_jsx("span", { children: item.entity }), _jsx("strong", { children: item.count })] }, item.entity)) }), !loading && view.items.length === 0 && _jsx("p", { className: css.muted, children: t('entities.emptyRail') })] }), _jsxs("section", { className: css.entityResults, children: [error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), loading && _jsx("div", { className: css.loadingPanel, children: t('entities.loading') }), !loading && view.selected === undefined && _jsx(EmptyState, { glyph: "\u25CE", title: t('entities.selectTitle'), children: t('entities.selectText') }), !loading && view.selected !== undefined && _jsxs(_Fragment, { children: [_jsxs("div", { className: css.sectionHeading, children: [_jsx("div", { children: _jsx("h3", { children: view.selected }) }), _jsx("strong", { children: view.insights.length })] }), view.insights.length === 0 ? _jsx(EmptyState, { glyph: "0", title: t('entities.emptyTitle'), children: t('entities.emptyText') }) : view.insights.map(insight => _jsx(InsightCard, { insight: insight, writeEnabled: props.writeEnabled, onForget: props.onForget, onRelated: () => props.onExplore(insight.content) }, insightKey(insight)))] })] })] })] }));
+    const visibleEntities = view.items.slice(0, visibleEntityLimit);
+    const visibleInsights = view.insights.slice(0, visibleInsightLimit);
+    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('entities.title'), description: t('entities.description'), meta: t('entities.count', { count: view.items.length }) }), _jsxs("div", { className: css.entityLayout, children: [_jsxs("aside", { className: css.entityRail, children: [_jsxs("form", { className: css.entitySearch, onSubmit: submit, children: [_jsx("input", { "aria-label": t('entities.nameAria'), value: entity, onChange: event => setEntity(event.target.value), placeholder: t('entities.placeholder') }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: loading || entity.trim() === '', children: t('entities.action') })] }), _jsxs("div", { className: css.entityHeading, children: [_jsx("span", { children: t('entities.top') }), _jsx("small", { children: t('entities.frequency') })] }), _jsx("div", { className: css.entityList, children: visibleEntities.map(item => _jsxs("button", { type: "button", "aria-pressed": view.selected === item.entity, onClick: () => { setEntity(item.entity); void load(item.entity); }, children: [_jsx("span", { children: item.entity }), _jsx("strong", { children: item.count })] }, item.entity)) }), appearance.surface === 'sidebar' && _jsx(ProgressiveFooter, { compact: true, visible: visibleEntities.length, total: view.items.length, pageSize: entityPageSize, onMore: () => setVisibleEntityLimit(value => value + entityPageSize) }), !loading && view.items.length === 0 && _jsx("p", { className: css.muted, children: t('entities.emptyRail') })] }), _jsxs("section", { className: css.entityResults, children: [error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), loading && _jsx("div", { className: css.loadingPanel, children: t('entities.loading') }), !loading && view.selected === undefined && _jsx(EmptyState, { glyph: "\u25CE", title: t('entities.selectTitle'), children: t('entities.selectText') }), !loading && view.selected !== undefined && _jsxs(_Fragment, { children: [_jsxs("div", { className: css.sectionHeading, children: [_jsx("div", { children: _jsx("h3", { children: view.selected }) }), _jsx("strong", { children: view.insights.length })] }), view.insights.length === 0 ? _jsx(EmptyState, { glyph: "0", title: t('entities.emptyTitle'), children: t('entities.emptyText') }) : _jsxs(_Fragment, { children: [visibleInsights.map(insight => _jsx(InsightCard, { insight: insight, writeEnabled: props.writeEnabled, onForget: props.onForget, onRelated: () => props.onExplore(insight.content) }, insightKey(insight))), appearance.surface === 'sidebar' && _jsx(ProgressiveFooter, { visible: visibleInsights.length, total: view.insights.length, pageSize: insightPageSize, onMore: () => setVisibleInsightLimit(value => value + insightPageSize) })] })] })] })] })] }));
 }
 function RuntimePage(props) {
     const t = useT();
+    const locale = useLocale();
+    const appearance = useMnemonViewAppearance();
+    const pageSize = 10;
     const [snapshot, setSnapshot] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -781,6 +943,10 @@ function RuntimePage(props) {
     const [editContent, setEditContent] = useState('');
     const [editImportance, setEditImportance] = useState('normal');
     const [removing, setRemoving] = useState(null);
+    const [adding, setAdding] = useState(false);
+    const [filterTarget, setFilterTarget] = useState('all');
+    const [filterQuery, setFilterQuery] = useState('');
+    const [visibleLimit, setVisibleLimit] = useState(pageSize);
     const load = useCallback(async () => {
         setLoading(true);
         setError(null);
@@ -795,6 +961,7 @@ function RuntimePage(props) {
         }
     }, [props.client]);
     useEffect(() => { void load(); }, [load, props.revision]);
+    useEffect(() => { setVisibleLimit(pageSize); }, [filterQuery, filterTarget]);
     const entryKey = (entry) => `${entry.target}:${entry.created_at}:${entry.content}`;
     const mutate = async (request) => {
         setNotice(null);
@@ -816,6 +983,8 @@ function RuntimePage(props) {
         try {
             await mutate({ action: 'add', target, content, importance });
             setContent('');
+            if (appearance.surface === 'sidebar')
+                setAdding(false);
         }
         catch (reason) {
             setError(message(reason));
@@ -858,18 +1027,43 @@ function RuntimePage(props) {
             setSaving(false);
         }
     };
+    const runtimeEditActionClass = appearance.surface === 'sidebar'
+        ? appearanceClass(css.ghostButton, appearanceClass(appearance.classes.itemActionButton, appearance.classes.itemEditAction))
+        : css.ghostButton;
+    const runtimeRemoveActionClass = appearance.surface === 'sidebar'
+        ? appearanceClass(css.dangerButton, appearanceClass(appearance.classes.itemActionButton, appearance.classes.itemDangerAction))
+        : css.dangerButton;
+    const runtimeEntry = (entry, showTarget = false) => {
+        const key = entryKey(entry);
+        const isEditing = editing === key;
+        const isInlineEditing = appearance.surface === 'buildin' && isEditing;
+        const isRemoving = removing === key;
+        const isInlineRemoving = appearance.surface === 'buildin' && isRemoving;
+        return _jsxs("article", { className: css.runtimeEntry, "data-importance": entry.importance, "data-target": entry.target, children: [_jsxs("div", { className: css.runtimeEntryMeta, children: [showTarget ? _jsxs("div", { className: css.runtimeEntryBadges, children: [_jsx("span", { className: css.runtimeEntryTarget, children: entry.target === 'user' ? 'USER.md' : 'MEMORY.md' }), _jsx("span", { children: t(`runtime.importance.${entry.importance}`) })] }) : _jsx("span", { children: t(`runtime.importance.${entry.importance}`) }), _jsx("time", { dateTime: entry.updated_at, children: new Date(entry.updated_at).toLocaleString(locale) })] }), isInlineEditing ? _jsx("textarea", { "aria-label": t('runtime.editContent'), value: editContent, onChange: event => setEditContent(event.target.value), rows: 4 }) : _jsx("p", { children: entry.content }), isInlineEditing && _jsxs("select", { "aria-label": t('runtime.importance'), value: editImportance, onChange: event => setEditImportance(event.target.value), children: [_jsx("option", { value: "critical", children: t('runtime.importance.critical') }), _jsx("option", { value: "normal", children: t('runtime.importance.normal') }), _jsx("option", { value: "low", children: t('runtime.importance.low') })] }), _jsx("footer", { children: isInlineRemoving ? _jsxs(_Fragment, { children: [_jsx("span", { children: t('runtime.removeConfirm') }), _jsx("button", { type: "button", className: css.dangerSolidButton, disabled: saving, onClick: () => void remove(entry), children: t('runtime.removeAction') }), _jsx("button", { type: "button", className: css.ghostButton, onClick: () => setRemoving(null), children: t('common.cancel') })] }) : isInlineEditing ? _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: css.primaryButton, disabled: saving || editContent.trim() === '', onClick: () => void replace(entry), children: t('runtime.saveEdit') }), _jsx("button", { type: "button", className: css.ghostButton, onClick: () => setEditing(null), children: t('common.cancel') })] }) : props.writeEnabled ? _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: runtimeEditActionClass, disabled: saving && isRemoving, onClick: () => beginEdit(entry), children: t('runtime.editAction') }), _jsx("button", { type: "button", className: runtimeRemoveActionClass, disabled: saving && isRemoving, onClick: () => { setRemoving(key); setEditing(null); }, children: t('runtime.removeAction') })] }) : null })] }, key);
+    };
     const targetPanel = (value) => {
         const view = snapshot?.targets[value];
         const entries = snapshot?.entries.filter(entry => entry.target === value) ?? [];
         const percentage = view === undefined || view.limit === 0 ? 0 : Math.min(100, Math.round(view.used / view.limit * 100));
-        return (_jsxs("section", { className: css.runtimeTarget, "aria-label": t(`runtime.target.${value}`), children: [_jsxs("header", { className: css.runtimeTargetHeader, children: [_jsxs("div", { children: [_jsx("span", { children: value === 'user' ? 'USER.md' : 'MEMORY.md' }), _jsx("h3", { children: t(`runtime.target.${value}`) })] }), _jsx("strong", { children: view?.entryCount ?? 0 })] }), _jsxs("div", { className: css.capacityLine, children: [_jsx("div", { children: _jsx("i", { style: { width: `${percentage}%` } }) }), _jsx("span", { children: view === undefined ? '—' : `${humanBytes(view.used)} / ${humanBytes(view.limit)}` })] }), _jsx("p", { className: css.runtimeTargetDescription, children: t(`runtime.target.${value}.description`) }), _jsxs("div", { className: css.runtimeEntries, children: [entries.map(entry => {
-                            const key = entryKey(entry);
-                            const isEditing = editing === key;
-                            const isRemoving = removing === key;
-                            return _jsxs("article", { className: css.runtimeEntry, "data-importance": entry.importance, children: [_jsxs("div", { className: css.runtimeEntryMeta, children: [_jsx("span", { children: t(`runtime.importance.${entry.importance}`) }), _jsx("time", { dateTime: entry.updated_at, children: new Date(entry.updated_at).toLocaleString() })] }), isEditing ? _jsx("textarea", { "aria-label": t('runtime.editContent'), value: editContent, onChange: event => setEditContent(event.target.value), rows: 4 }) : _jsx("p", { children: entry.content }), isEditing && _jsxs("select", { "aria-label": t('runtime.importance'), value: editImportance, onChange: event => setEditImportance(event.target.value), children: [_jsx("option", { value: "critical", children: t('runtime.importance.critical') }), _jsx("option", { value: "normal", children: t('runtime.importance.normal') }), _jsx("option", { value: "low", children: t('runtime.importance.low') })] }), _jsx("footer", { children: isRemoving ? _jsxs(_Fragment, { children: [_jsx("span", { children: t('runtime.removeConfirm') }), _jsx("button", { type: "button", className: css.dangerSolidButton, disabled: saving, onClick: () => void remove(entry), children: t('runtime.removeAction') }), _jsx("button", { type: "button", className: css.ghostButton, onClick: () => setRemoving(null), children: t('common.cancel') })] }) : isEditing ? _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: css.primaryButton, disabled: saving || editContent.trim() === '', onClick: () => void replace(entry), children: t('runtime.saveEdit') }), _jsx("button", { type: "button", className: css.ghostButton, onClick: () => setEditing(null), children: t('common.cancel') })] }) : props.writeEnabled ? _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: css.ghostButton, onClick: () => beginEdit(entry), children: t('runtime.editAction') }), _jsx("button", { type: "button", className: css.dangerButton, onClick: () => { setRemoving(key); setEditing(null); }, children: t('runtime.removeAction') })] }) : null })] }, key);
-                        }), !loading && entries.length === 0 && _jsxs("div", { className: css.runtimeEmpty, children: [_jsx("span", { children: "\u25CB" }), _jsx("p", { children: t('runtime.empty') })] })] })] }));
+        return (_jsxs("section", { className: css.runtimeTarget, "aria-label": t(`runtime.target.${value}`), children: [_jsxs("header", { className: css.runtimeTargetHeader, children: [_jsxs("div", { children: [_jsx("span", { children: value === 'user' ? 'USER.md' : 'MEMORY.md' }), _jsx("h3", { children: t(`runtime.target.${value}`) })] }), _jsx("strong", { children: view?.entryCount ?? 0 })] }), _jsxs("div", { className: css.capacityLine, children: [_jsx("div", { children: _jsx("i", { style: { width: `${percentage}%` } }) }), _jsx("span", { children: view === undefined ? '—' : `${humanBytes(view.used)} / ${humanBytes(view.limit)}` })] }), _jsx("p", { className: css.runtimeTargetDescription, children: t(`runtime.target.${value}.description`) }), _jsxs("div", { className: css.runtimeEntries, children: [entries.map(entry => runtimeEntry(entry)), !loading && entries.length === 0 && _jsxs("div", { className: css.runtimeEmpty, children: [_jsx("span", { children: "\u25CB" }), _jsx("p", { children: t('runtime.empty') })] })] })] }));
+    };
+    const targetSummary = (value) => {
+        const view = snapshot?.targets[value];
+        const percentage = view === undefined || view.limit === 0 ? 0 : Math.min(100, Math.round(view.used / view.limit * 100));
+        return _jsxs("section", { className: css.runtimeSummaryCard, "aria-label": t(`runtime.target.${value}`), children: [_jsxs("header", { className: css.runtimeTargetHeader, children: [_jsxs("div", { children: [_jsx("span", { children: value === 'user' ? 'USER.md' : 'MEMORY.md' }), _jsx("h3", { children: t(`runtime.target.${value}`) })] }), _jsx("strong", { children: view?.entryCount ?? 0 })] }), _jsxs("div", { className: css.capacityLine, children: [_jsx("div", { children: _jsx("i", { style: { width: `${percentage}%` } }) }), _jsx("span", { children: view === undefined ? '—' : `${humanBytes(view.used)} / ${humanBytes(view.limit)}` })] }), _jsx("p", { className: css.runtimeTargetDescription, children: t(`runtime.target.${value}.description`) })] });
     };
-    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('runtime.title'), description: t('runtime.description'), meta: snapshot === null ? t('common.loading') : t('runtime.total', { count: snapshot.entries.length }), action: _jsx("button", { type: "button", className: css.secondaryButton, disabled: loading, onClick: () => void load(), children: t('runtime.refresh') }) }), error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), notice !== null && _jsx("div", { className: css.runtimeNotice, role: "status", children: notice }), props.writeEnabled && _jsxs("form", { className: css.runtimeComposer, onSubmit: event => void add(event), children: [_jsxs("div", { className: css.runtimeComposerHeading, children: [_jsxs("div", { children: [_jsx("h3", { children: t('runtime.addTitle') }), _jsx("p", { children: t('runtime.addDescription') })] }), _jsx("span", { children: t('runtime.hotContext') })] }), _jsx("textarea", { "aria-label": t('runtime.content'), value: content, onChange: event => setContent(event.target.value), rows: 3, placeholder: t('runtime.placeholder') }), _jsxs("div", { className: css.runtimeComposerActions, children: [_jsxs("label", { children: [t('runtime.target'), _jsxs("select", { value: target, onChange: event => setTarget(event.target.value), children: [_jsx("option", { value: "memory", children: t('runtime.target.memory') }), _jsx("option", { value: "user", children: t('runtime.target.user') })] })] }), _jsxs("label", { children: [t('runtime.importance'), _jsxs("select", { value: importance, onChange: event => setImportance(event.target.value), children: [_jsx("option", { value: "critical", children: t('runtime.importance.critical') }), _jsx("option", { value: "normal", children: t('runtime.importance.normal') }), _jsx("option", { value: "low", children: t('runtime.importance.low') })] })] }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: saving || content.trim() === '', children: saving ? t('runtime.saving') : t('runtime.addAction') })] })] }), !props.writeEnabled && _jsx("div", { className: css.runtimeReadOnly, children: t('runtime.readOnly') }), _jsxs("div", { className: css.runtimeGrid, children: [targetPanel('user'), targetPanel('memory')] }), _jsx("p", { className: css.runtimeFootnote, children: t('runtime.footnote') })] }));
+    const normalizedQuery = filterQuery.trim().toLocaleLowerCase();
+    const filteredEntries = (snapshot?.entries ?? []).filter(entry => (filterTarget === 'all' || entry.target === filterTarget) && (normalizedQuery === '' || entry.content.toLocaleLowerCase().includes(normalizedQuery)));
+    const visibleEntries = filteredEntries.slice(0, visibleLimit);
+    const closeComposer = () => {
+        setContent('');
+        setAdding(false);
+    };
+    const composer = _jsxs("form", { className: css.runtimeComposer, onSubmit: event => void add(event), children: [_jsxs("div", { className: css.runtimeComposerHeading, children: [_jsxs("div", { children: [_jsx("h3", { children: t('runtime.addTitle') }), _jsx("p", { children: t('runtime.addDescription') })] }), _jsx("span", { children: t('runtime.hotContext') })] }), _jsx("textarea", { "aria-label": t('runtime.content'), value: content, onChange: event => setContent(event.target.value), rows: 3, placeholder: t('runtime.placeholder') }), _jsxs("div", { className: css.runtimeComposerActions, children: [_jsxs("label", { children: [t('runtime.target'), _jsxs("select", { value: target, onChange: event => setTarget(event.target.value), children: [_jsx("option", { value: "memory", children: t('runtime.target.memory') }), _jsx("option", { value: "user", children: t('runtime.target.user') })] })] }), _jsxs("label", { children: [t('runtime.importance'), _jsxs("select", { value: importance, onChange: event => setImportance(event.target.value), children: [_jsx("option", { value: "critical", children: t('runtime.importance.critical') }), _jsx("option", { value: "normal", children: t('runtime.importance.normal') }), _jsx("option", { value: "low", children: t('runtime.importance.low') })] })] }), appearance.surface === 'sidebar' && _jsx("button", { type: "button", className: css.ghostButton, disabled: saving, onClick: closeComposer, children: t('common.cancel') }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: saving || content.trim() === '', children: saving ? t('runtime.saving') : t('runtime.addAction') })] })] });
+    const editingEntry = editing === null ? undefined : snapshot?.entries.find(entry => entryKey(entry) === editing);
+    const removingEntry = removing === null ? undefined : snapshot?.entries.find(entry => entryKey(entry) === removing);
+    const editForm = editingEntry === undefined ? null : _jsxs("form", { className: css.bodyEdit, onSubmit: event => { event.preventDefault(); void replace(editingEntry); }, children: [_jsxs("label", { children: [t('runtime.editContent'), _jsx("textarea", { "aria-label": t('runtime.editContent'), value: editContent, onChange: event => setEditContent(event.target.value), rows: 7 })] }), _jsxs("label", { children: [t('runtime.importance'), _jsxs("select", { "aria-label": t('runtime.importance'), value: editImportance, onChange: event => setEditImportance(event.target.value), children: [_jsx("option", { value: "critical", children: t('runtime.importance.critical') }), _jsx("option", { value: "normal", children: t('runtime.importance.normal') }), _jsx("option", { value: "low", children: t('runtime.importance.low') })] })] }), _jsxs("div", { className: css.bodyEditActions, children: [_jsx("button", { type: "button", className: css.ghostButton, disabled: saving, onClick: () => setEditing(null), children: t('common.cancel') }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: saving || editContent.trim() === '', children: t('runtime.saveEdit') })] })] });
+    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('runtime.title'), description: t('runtime.description'), meta: snapshot === null ? t('common.loading') : t('runtime.total', { count: snapshot.entries.length }), action: _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: css.secondaryButton, disabled: loading, onClick: () => void load(), children: t('runtime.refresh') }), appearance.surface === 'sidebar' && props.writeEnabled && _jsx("button", { type: "button", className: css.primaryButton, onClick: () => setAdding(true), children: t('runtime.addButton') })] }) }), error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), notice !== null && _jsx("div", { className: css.runtimeNotice, role: "status", children: notice }), props.writeEnabled && appearance.surface === 'buildin' && composer, !props.writeEnabled && _jsx("div", { className: css.runtimeReadOnly, children: t('runtime.readOnly') }), appearance.surface === 'buildin' ? _jsxs("div", { className: css.runtimeGrid, children: [targetPanel('user'), targetPanel('memory')] }) : _jsxs(_Fragment, { children: [_jsxs("div", { className: css.runtimeSummaryGrid, children: [targetSummary('user'), targetSummary('memory')] }), _jsxs("section", { className: css.runtimeBrowser, "aria-label": t('runtime.entriesAria'), children: [_jsxs("div", { className: css.runtimeBrowserToolbar, children: [_jsxs("div", { className: css.runtimeScopeFilter, role: "group", "aria-label": t('runtime.scopeAria'), children: [_jsxs("button", { type: "button", "data-active": filterTarget === 'all' || undefined, onClick: () => setFilterTarget('all'), children: [t('runtime.scopeAll'), " ", _jsx("b", { children: snapshot?.entries.length ?? 0 })] }), _jsxs("button", { type: "button", "data-active": filterTarget === 'user' || undefined, onClick: () => setFilterTarget('user'), children: [t('runtime.target.user'), " ", _jsx("b", { children: snapshot?.targets.user.entryCount ?? 0 })] }), _jsxs("button", { type: "button", "data-active": filterTarget === 'memory' || undefined, onClick: () => setFilterTarget('memory'), children: [t('runtime.target.memory'), " ", _jsx("b", { children: snapshot?.targets.memory.entryCount ?? 0 })] })] }), _jsxs("div", { className: css.runtimeFilterQuery, children: [_jsx("span", { "aria-hidden": "true", children: "\u2315" }), _jsx("input", { "aria-label": t('runtime.filterAria'), value: filterQuery, onChange: event => setFilterQuery(event.target.value), placeholder: t('runtime.filterPlaceholder') })] })] }), _jsxs("div", { className: css.runtimeUnifiedList, children: [visibleEntries.map(entry => runtimeEntry(entry, true)), !loading && filteredEntries.length === 0 && _jsxs("div", { className: css.runtimeEmpty, children: [_jsx("span", { children: "\u25CB" }), _jsx("p", { children: t('runtime.noMatch') })] })] }), !loading && _jsx(ProgressiveFooter, { visible: visibleEntries.length, total: filteredEntries.length, pageSize: pageSize, onMore: () => setVisibleLimit(value => value + pageSize) })] })] }), _jsx("p", { className: css.runtimeFootnote, children: t('runtime.footnote') }), appearance.surface === 'sidebar' && adding && _jsx(SidebarModal, { title: t('runtime.addTitle'), description: t('runtime.addDescription'), busy: saving, onClose: closeComposer, children: composer }), appearance.surface === 'sidebar' && editingEntry !== undefined && _jsx(SidebarModal, { title: t('runtime.editContent'), description: t(`runtime.target.${editingEntry.target}`), busy: saving, onClose: () => setEditing(null), children: editForm }), appearance.surface === 'sidebar' && removingEntry !== undefined && _jsx(SidebarModal, { title: t('runtime.removeTitle'), description: t(`runtime.target.${removingEntry.target}`), busy: saving, onClose: () => setRemoving(null), children: _jsxs("div", { className: css.bodyDeleteConfirm, children: [_jsx("p", { children: t('runtime.removeWarning') }), _jsxs("div", { className: css.bodyDeleteSummary, children: [_jsx("p", { className: css.bodyDeleteContent, children: removingEntry.content }), _jsx("span", { children: t(`runtime.importance.${removingEntry.importance}`) })] }), _jsxs("div", { className: css.bodyEditActions, children: [_jsx("button", { type: "button", "data-autofocus": true, className: css.ghostButton, disabled: saving, onClick: () => setRemoving(null), children: t('common.cancel') }), _jsx("button", { type: "button", className: css.dangerSolidButton, disabled: saving, onClick: () => void remove(removingEntry), children: t('runtime.removeAction') })] })] }) })] }));
 }
 function RememberPage(props) {
     const t = useT();
@@ -897,8 +1091,11 @@ function RememberPage(props) {
         try {
             const response = await props.client.supervise(content);
             setResult(`${t(response.action === 'skipped' ? 'remember.skipped' : 'remember.completed')}${response.memoryBodyIds.length === 0 ? '' : ` · ${response.memoryBodyIds.join(', ')}`}${response.summary === '' ? '' : ` · ${response.summary}`}`);
-            setContent('');
             props.onMutate();
+            if (response.action !== 'skipped') {
+                setContent('');
+                props.onComplete?.();
+            }
         }
         catch (reason) {
             setResult(t('remember.dispatchFailed', { error: message(reason) }));
@@ -923,6 +1120,7 @@ function RememberPage(props) {
                 setTags('');
                 setEntities('');
                 props.onMutate();
+                props.onComplete?.();
             }
         }
         catch (reason) {
@@ -932,17 +1130,22 @@ function RememberPage(props) {
             setSaving(false);
         }
     };
-    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('remember.title'), description: t('remember.description'), meta: props.writeEnabled ? t('remember.worker') : t('common.readOnly') }), !props.writeEnabled ? _jsx(EmptyState, { glyph: "\u2298", title: t('remember.readOnlyTitle'), children: t('remember.readOnlyText') }) : (_jsxs("div", { className: css.writebackLayout, children: [_jsxs("aside", { className: css.writeGuide, children: [_jsx("h3", { children: t('remember.flowTitle') }), _jsxs("ol", { children: [_jsxs("li", { children: [_jsx("strong", { children: t('remember.routeTitle') }), _jsx("span", { children: t('remember.routeText') })] }), _jsxs("li", { children: [_jsx("strong", { children: t('remember.dedupeTitle') }), _jsx("span", { children: t('remember.dedupeText') })] }), _jsxs("li", { children: [_jsx("strong", { children: t('remember.writeTitle') }), _jsx("span", { children: t('remember.writeText') })] })] }), _jsx("p", { children: t('remember.flowText') })] }), _jsxs("section", { className: css.supervisedComposer, children: [_jsxs("form", { className: css.supervisedForm, onSubmit: event => void supervise(event), children: [_jsxs("div", { className: css.supervisedHeading, children: [_jsx("div", { children: _jsx("h3", { children: t('remember.delegateTitle') }) }), _jsx("span", { className: props.sessionId === undefined ? css.sessionMissing : css.sessionReady, children: props.sessionId === undefined ? t('remember.noSession') : t('remember.ready') })] }), _jsxs("label", { className: css.fieldWide, children: [t('remember.candidate'), _jsx("textarea", { "aria-label": t('remember.candidateAria'), value: content, onChange: event => setContent(event.target.value), maxLength: 8000, rows: 8, placeholder: t('remember.placeholder') })] }), props.sessionId === undefined && _jsx("p", { className: css.sessionHint, children: t('remember.sessionHint') }), _jsxs("div", { className: css.formActions, children: [_jsx("button", { type: "submit", className: css.primaryButton, disabled: supervising || content.trim() === '' || props.sessionId === undefined, children: supervising ? t('remember.processing') : t('remember.action') }), result !== null && _jsx("span", { role: "status", children: result })] })] }), _jsxs("details", { className: css.advancedWrite, children: [_jsxs("summary", { children: [_jsxs("span", { children: [_jsx("strong", { children: t('remember.advanced') }), _jsx("small", { children: t('remember.advancedHint') })] }), _jsx("span", { children: t('remember.expand') })] }), _jsxs("form", { className: css.manualForm, onSubmit: event => void manualSave(event), children: [_jsxs("div", { className: css.formGrid, children: [_jsxs("label", { className: css.fieldWide, children: [t('remember.target'), _jsx("select", { "aria-label": t('remember.target'), value: memoryBodyId, onChange: event => setMemoryBodyId(event.target.value), children: props.memoryBodies.map(body => _jsxs("option", { value: body.id, children: [body.name, " \u00B7 ", body.id, body.active ? ` · ${t('common.active')}` : ''] }, body.id)) })] }), _jsxs("label", { children: [t('common.category'), _jsx("select", { value: category, onChange: event => setCategory(event.target.value), children: CATEGORIES.map(value => _jsx("option", { value: value, children: categoryLabel(t, value) }, value)) })] }), _jsxs("label", { children: [t('common.importanceLabel'), _jsx("select", { value: importance, onChange: event => setImportance(Number(event.target.value)), children: [1, 2, 3, 4, 5].map(value => _jsxs("option", { value: value, children: [value, " / 5"] }, value)) })] }), _jsxs("label", { className: css.fieldWide, children: [t('remember.entities'), _jsx("input", { value: entities, onChange: event => setEntities(event.target.value), placeholder: "SQLite, DSH" })] }), _jsxs("label", { className: css.fieldWide, children: [t('remember.tags'), _jsx("input", { value: tags, onChange: event => setTags(event.target.value), placeholder: "architecture, local-first" })] })] }), _jsxs("div", { className: css.manualActions, children: [_jsx("p", { children: t('remember.advancedText') }), _jsx("button", { type: "submit", className: css.secondaryButton, disabled: saving || content.trim() === '' || props.sessionId === undefined || memoryBodyId === '', children: saving ? t('remember.saving') : t('remember.advancedAction') })] })] })] })] })] }))] }));
+    const composer = _jsxs("section", { className: css.supervisedComposer, children: [_jsxs("form", { className: css.supervisedForm, onSubmit: event => void supervise(event), children: [_jsxs("div", { className: css.supervisedHeading, children: [_jsx("div", { children: _jsx("h3", { children: t('remember.delegateTitle') }) }), _jsx("span", { className: props.sessionId === undefined ? css.sessionMissing : css.sessionReady, children: props.sessionId === undefined ? t('remember.noSession') : t('remember.ready') })] }), _jsxs("label", { className: css.fieldWide, children: [t('remember.candidate'), _jsx("textarea", { "aria-label": t('remember.candidateAria'), value: content, onChange: event => setContent(event.target.value), maxLength: 8000, rows: 8, placeholder: t('remember.placeholder') })] }), props.sessionId === undefined && _jsx("p", { className: css.sessionHint, children: t('remember.sessionHint') }), _jsxs("div", { className: css.formActions, children: [props.onClose !== undefined && _jsx("button", { type: "button", className: css.ghostButton, disabled: supervising || saving, onClick: props.onClose, children: t('common.cancel') }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: supervising || content.trim() === '' || props.sessionId === undefined, children: supervising ? t('remember.processing') : t('remember.action') }), result !== null && _jsx("span", { role: "status", children: result })] })] }), _jsxs("details", { className: css.advancedWrite, children: [_jsxs("summary", { children: [_jsxs("span", { children: [_jsx("strong", { children: t('remember.advanced') }), _jsx("small", { children: t('remember.advancedHint') })] }), _jsx("span", { children: t('remember.expand') })] }), _jsxs("form", { className: css.manualForm, onSubmit: event => void manualSave(event), children: [_jsxs("div", { className: css.formGrid, children: [_jsxs("label", { className: css.fieldWide, children: [t('remember.target'), _jsx("select", { "aria-label": t('remember.target'), value: memoryBodyId, onChange: event => setMemoryBodyId(event.target.value), children: props.memoryBodies.map(body => _jsxs("option", { value: body.id, children: [body.name, " \u00B7 ", body.id, body.active ? ` · ${t('common.active')}` : ''] }, body.id)) })] }), _jsxs("label", { children: [t('common.category'), _jsx("select", { value: category, onChange: event => setCategory(event.target.value), children: CATEGORIES.map(value => _jsx("option", { value: value, children: categoryLabel(t, value) }, value)) })] }), _jsxs("label", { children: [t('common.importanceLabel'), _jsx("select", { value: importance, onChange: event => setImportance(Number(event.target.value)), children: [1, 2, 3, 4, 5].map(value => _jsxs("option", { value: value, children: [value, " / 5"] }, value)) })] }), _jsxs("label", { className: css.fieldWide, children: [t('remember.entities'), _jsx("input", { value: entities, onChange: event => setEntities(event.target.value), placeholder: "SQLite, DSH" })] }), _jsxs("label", { className: css.fieldWide, children: [t('remember.tags'), _jsx("input", { value: tags, onChange: event => setTags(event.target.value), placeholder: "architecture, local-first" })] })] }), _jsxs("div", { className: css.manualActions, children: [_jsx("p", { children: t('remember.advancedText') }), _jsx("button", { type: "submit", className: css.secondaryButton, disabled: saving || content.trim() === '' || props.sessionId === undefined || memoryBodyId === '', children: saving ? t('remember.saving') : t('remember.advancedAction') })] })] })] })] });
+    if (props.onClose !== undefined) {
+        return _jsx(SidebarModal, { title: t('remember.title'), description: t('remember.description'), busy: supervising || saving, onClose: props.onClose, children: props.writeEnabled ? composer : _jsx(EmptyState, { glyph: "\u2298", title: t('remember.readOnlyTitle'), children: t('remember.readOnlyText') }) });
+    }
+    return _jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('remember.title'), description: t('remember.description'), meta: props.writeEnabled ? t('remember.worker') : t('common.readOnly') }), !props.writeEnabled ? _jsx(EmptyState, { glyph: "\u2298", title: t('remember.readOnlyTitle'), children: t('remember.readOnlyText') }) : _jsxs("div", { className: css.writebackLayout, children: [_jsxs("aside", { className: css.writeGuide, children: [_jsx("h3", { children: t('remember.flowTitle') }), _jsxs("ol", { children: [_jsxs("li", { children: [_jsx("strong", { children: t('remember.routeTitle') }), _jsx("span", { children: t('remember.routeText') })] }), _jsxs("li", { children: [_jsx("strong", { children: t('remember.dedupeTitle') }), _jsx("span", { children: t('remember.dedupeText') })] }), _jsxs("li", { children: [_jsx("strong", { children: t('remember.writeTitle') }), _jsx("span", { children: t('remember.writeText') })] })] }), _jsx("p", { children: t('remember.flowText') })] }), composer] })] });
 }
 function ListPage(props) {
-    const PAGE_SIZE = 48;
     const t = useT();
+    const appearance = useMnemonViewAppearance();
+    const pageSize = appearance.surface === 'sidebar' ? 12 : 48;
     const [query, setQuery] = useState('');
     const [category, setCategory] = useState('');
     const [view, setView] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const [visibleLimit, setVisibleLimit] = useState(PAGE_SIZE);
+    const [visibleLimit, setVisibleLimit] = useState(pageSize);
     const load = useCallback(async () => {
         setLoading(true);
         setError(null);
@@ -956,17 +1159,21 @@ function ListPage(props) {
             setLoading(false);
         }
     }, [category, props.client, query]);
-    useEffect(() => { void load(); }, [props.revision]);
-    const submit = (event) => { event.preventDefault(); setVisibleLimit(PAGE_SIZE); void load(); };
+    useEffect(() => { setVisibleLimit(pageSize); void load(); }, [pageSize, props.revision]);
+    const submit = (event) => { event.preventDefault(); setVisibleLimit(pageSize); void load(); };
     const forget = async (insight) => { await props.onForget(insight); setView(current => current === null ? current : { ...current, total: Math.max(0, current.total - 1), items: current.items.filter(item => insightKey(item) !== insightKey(insight)) }); };
     const visibleItems = view?.items.slice(0, visibleLimit) ?? [];
-    const remaining = Math.max(0, (view?.items.length ?? 0) - visibleItems.length);
-    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('content.title'), description: t('content.description'), meta: t('content.count', { count: view?.total ?? '—' }) }), _jsxs("form", { className: css.listToolbar, onSubmit: submit, children: [_jsx("input", { "aria-label": t('content.filterAria'), value: query, onChange: event => setQuery(event.target.value), placeholder: t('content.filterPlaceholder') }), _jsxs("select", { "aria-label": t('content.categoryAria'), value: category, onChange: event => setCategory(event.target.value), children: [_jsx("option", { value: "", children: t('common.allCategories') }), CATEGORIES.map(value => _jsx("option", { value: value, children: categoryLabel(t, value) }, value))] }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: loading, children: loading ? t('common.loading') : t('content.apply') })] }), _jsx("div", { className: css.listNotice, children: t('content.notice') }), error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), !loading && view?.items.length === 0 && _jsx(EmptyState, { glyph: "\u2261", title: t('content.emptyTitle'), children: t('content.emptyText') }), _jsx("div", { className: css.memoryList, children: visibleItems.map(insight => _jsx(InsightCard, { insight: insight, writeEnabled: props.writeEnabled, onForget: forget, onClone: props.onClone, onRelated: () => props.onExplore(insight.content) }, insightKey(insight))) }), view !== null && view.items.length > 0 && _jsxs("div", { className: css.listProgress, children: [_jsx("span", { children: t('content.showing', { visible: visibleItems.length, total: view.items.length }) }), remaining > 0 && _jsx("button", { type: "button", className: css.secondaryButton, onClick: () => setVisibleLimit(value => value + PAGE_SIZE), children: t('content.showMore', { count: Math.min(PAGE_SIZE, remaining) }) })] })] }));
+    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('content.title'), description: t('content.description'), meta: t('content.count', { count: view?.total ?? '—' }) }), _jsxs("form", { className: css.listToolbar, onSubmit: submit, children: [_jsx("input", { "aria-label": t('content.filterAria'), value: query, onChange: event => setQuery(event.target.value), placeholder: t('content.filterPlaceholder') }), _jsxs("select", { "aria-label": t('content.categoryAria'), value: category, onChange: event => setCategory(event.target.value), children: [_jsx("option", { value: "", children: t('common.allCategories') }), CATEGORIES.map(value => _jsx("option", { value: value, children: categoryLabel(t, value) }, value))] }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: loading, children: loading ? t('common.loading') : t('content.apply') })] }), _jsx("div", { className: css.listNotice, children: t('content.notice') }), error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), !loading && view?.items.length === 0 && _jsx(EmptyState, { glyph: "\u2261", title: t('content.emptyTitle'), children: t('content.emptyText') }), _jsx("div", { className: css.memoryList, children: visibleItems.map(insight => _jsx(InsightCard, { insight: insight, writeEnabled: props.writeEnabled, onForget: forget, onClone: props.onClone, onRelated: () => props.onExplore(insight.content) }, insightKey(insight))) }), view !== null && _jsx(ProgressiveFooter, { visible: visibleItems.length, total: view.items.length, pageSize: pageSize, onMore: () => setVisibleLimit(value => value + pageSize) })] }));
 }
 function DocumentsPage(props) {
     const t = useT();
+    const locale = useLocale();
+    const appearance = useMnemonViewAppearance();
+    const pageSize = appearance.surface === 'sidebar' ? 8 : Number.MAX_SAFE_INTEGER;
+    const readerRef = useRef(null);
     const [snapshot, setSnapshot] = useState(null);
     const [items, setItems] = useState([]);
+    const [visibleLimit, setVisibleLimit] = useState(pageSize);
     const [selectedId, setSelectedId] = useState(null);
     const [selected, setSelected] = useState(null);
     const [status, setStatus] = useState('active');
@@ -985,6 +1192,7 @@ function DocumentsPage(props) {
     const display = useCallback(async (nextQuery, nextStatus) => {
         setLoading(true);
         setError(null);
+        setVisibleLimit(pageSize);
         try {
             const current = await props.client.documents();
             const records = nextQuery.trim() === ''
@@ -1004,7 +1212,7 @@ function DocumentsPage(props) {
         finally {
             setLoading(false);
         }
-    }, [props.client]);
+    }, [pageSize, props.client]);
     useEffect(() => { void display(query, status); }, [display, props.revision, status]);
     useEffect(() => {
         setSelected(null);
@@ -1016,7 +1224,19 @@ function DocumentsPage(props) {
             setError(message(reason)); });
         return () => { active = false; };
     }, [props.client, selectedId, props.revision]);
+    useLayoutEffect(() => {
+        if (appearance.surface === 'sidebar' && readerRef.current !== null)
+            readerRef.current.scrollTop = 0;
+    }, [appearance.surface, selectedId]);
+    useEffect(() => {
+        if (appearance.surface !== 'sidebar' || selectedId === null)
+            return;
+        const index = items.findIndex(item => item.id === selectedId);
+        if (index >= visibleLimit)
+            setVisibleLimit(Math.ceil((index + 1) / pageSize) * pageSize);
+    }, [appearance.surface, items, pageSize, selectedId, visibleLimit]);
     const resetComposer = () => { setTitle(''); setDescription(''); setContent(''); setSources(''); setComposing(false); };
+    const startComposer = () => { setTitle(''); setDescription(''); setContent(''); setSources(''); setEditing(false); setComposing(true); };
     const sourcePaths = (value) => value.split(/\r?\n|,/gu).map(path => path.trim()).filter(Boolean);
     const create = async (event) => {
         event.preventDefault();
@@ -1099,40 +1319,124 @@ function DocumentsPage(props) {
     const usage = snapshot === null ? 0 : Math.min(100, snapshot.activeBytes / snapshot.limitBytes * 100);
     const activeCount = snapshot?.activeCount ?? 0;
     const archivedCount = snapshot?.archivedCount ?? 0;
-    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('documents.title'), description: t('documents.description'), meta: snapshot === null ? t('common.loading') : t('documents.capacity', { used: humanBytes(snapshot.activeBytes), limit: humanBytes(snapshot.limitBytes) }), action: _jsx("button", { type: "button", className: css.secondaryButton, disabled: loading, onClick: () => void display(query, status), children: t('documents.refresh') }) }), error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), notice !== null && _jsx("div", { className: css.runtimeNotice, role: "status", children: notice }), _jsxs("section", { className: css.documentSummary, "aria-label": t('documents.summary'), children: [_jsxs("article", { children: [_jsx("span", { children: t('documents.active') }), _jsx("strong", { children: activeCount }), _jsx("small", { children: t('documents.activeHint') })] }), _jsxs("article", { children: [_jsx("span", { children: t('documents.archivedCount') }), _jsx("strong", { children: archivedCount }), _jsx("small", { children: t('documents.archivedHint') })] }), _jsxs("article", { className: css.documentCapacity, children: [_jsx("span", { children: t('documents.activeCapacity') }), _jsx("strong", { children: snapshot === null ? '—' : `${usage.toFixed(1)}%` }), _jsx("div", { children: _jsx("i", { style: { width: `${usage}%` } }) }), _jsx("small", { children: t('documents.capacityHint') })] })] }), _jsxs("section", { className: css.documentToolbar, children: [_jsxs("form", { onSubmit: event => { event.preventDefault(); void display(query, status); }, children: [_jsx("span", { "aria-hidden": "true", children: "\u2315" }), _jsx("input", { "aria-label": t('documents.searchAria'), value: query, onChange: event => setQuery(event.target.value), placeholder: t('documents.searchPlaceholder') }), _jsx("button", { type: "submit", className: css.secondaryButton, children: t('documents.search') })] }), _jsxs("div", { role: "group", "aria-label": t('documents.scope'), children: [_jsxs("button", { type: "button", "data-active": status === 'active' || undefined, onClick: () => setStatus('active'), children: [t('documents.active'), " ", _jsx("b", { children: activeCount })] }), _jsxs("button", { type: "button", "data-active": status === 'archived' || undefined, onClick: () => setStatus('archived'), children: [t('documents.archivedCount'), " ", _jsx("b", { children: archivedCount })] })] }), props.writeEnabled && props.sessionId !== undefined && _jsx("button", { type: "button", className: css.primaryButton, onClick: () => { setComposing(value => !value); setEditing(false); }, children: composing ? t('common.cancel') : t('documents.new') })] }), composing && _jsxs("form", { className: css.documentEditor, onSubmit: event => void create(event), children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("h3", { children: t('documents.newTitle') }), _jsx("p", { children: t('documents.editorHint') })] }), _jsx("span", { children: t('documents.managedCopy') })] }), _jsxs("div", { className: css.documentEditorMeta, children: [_jsxs("label", { children: [t('documents.name'), _jsx("input", { value: title, onChange: event => setTitle(event.target.value), required: true })] }), _jsxs("label", { children: [t('documents.routing'), _jsx("input", { value: description, onChange: event => setDescription(event.target.value) })] })] }), _jsxs("label", { children: [t('documents.sources'), _jsx("input", { value: sources, onChange: event => setSources(event.target.value), placeholder: t('documents.sourcesPlaceholder') })] }), _jsxs("label", { children: [t('documents.markdown'), _jsx("textarea", { value: content, onChange: event => setContent(event.target.value), rows: 10, required: true })] }), _jsxs("footer", { children: [_jsx("button", { type: "button", className: css.ghostButton, onClick: resetComposer, children: t('common.cancel') }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: saving || title.trim() === '' || content.trim() === '', children: saving ? t('documents.saving') : t('documents.create') })] })] }), _jsxs("div", { className: css.documentWorkspace, children: [_jsxs("aside", { className: css.documentList, "aria-label": t('documents.list'), children: [_jsxs("header", { children: [_jsx("span", { children: status === 'active' ? t('documents.activeList') : t('documents.archiveList') }), _jsx("code", { children: items.length })] }), items.map(document => _jsxs("button", { type: "button", "data-selected": selectedId === document.id || undefined, onClick: () => { setSelected(null); setSelectedId(document.id); setEditing(false); setConfirmArchive(false); }, children: [_jsxs("div", { children: [_jsx("strong", { children: document.title }), _jsx("time", { dateTime: document.updatedAt, children: new Date(document.updatedAt).toLocaleDateString() })] }), _jsx("p", { children: document.description || document.excerpt || t('documents.noDescription') }), _jsxs("footer", { children: [_jsx("span", { children: humanBytes(document.sizeBytes) }), _jsx("code", { children: document.id.slice(0, 8) }), document.healthy === false && _jsx("em", { children: t('documents.missing') })] })] }, document.id)), !loading && items.length === 0 && _jsxs("div", { className: css.documentListEmpty, children: [_jsx("span", { children: "\u25A4" }), _jsx("strong", { children: status === 'active' ? t('documents.emptyActive') : t('documents.emptyArchived') }), _jsx("p", { children: status === 'active' ? t('documents.emptyActiveText') : t('documents.emptyArchivedText') })] }), loading && _jsx("div", { className: css.loading, children: t('common.loading') })] }), _jsx("section", { className: css.documentReader, "aria-label": t('documents.reader'), children: selected === null ? _jsx(EmptyState, { glyph: "\u25A4", title: t('documents.selectTitle'), children: t('documents.selectText') }) : editing ? _jsxs("form", { className: css.documentEditor, onSubmit: event => void update(event), children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("h3", { children: t('documents.editTitle') }), _jsx("p", { children: t('documents.editorHint') })] }), _jsx("code", { children: selected.id })] }), _jsxs("div", { className: css.documentEditorMeta, children: [_jsxs("label", { children: [t('documents.name'), _jsx("input", { value: title, onChange: event => setTitle(event.target.value), required: true })] }), _jsxs("label", { children: [t('documents.routing'), _jsx("input", { value: description, onChange: event => setDescription(event.target.value) })] })] }), _jsxs("label", { children: [t('documents.sources'), _jsx("input", { value: sources, onChange: event => setSources(event.target.value) })] }), _jsxs("label", { children: [t('documents.markdown'), _jsx("textarea", { value: content, onChange: event => setContent(event.target.value), rows: 18, required: true })] }), _jsxs("footer", { children: [_jsx("button", { type: "button", className: css.ghostButton, onClick: () => setEditing(false), children: t('common.cancel') }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: saving, children: saving ? t('documents.saving') : t('documents.save') })] })] }) : _jsxs("article", { className: css.documentDetail, children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("span", { children: selected.status === 'active' ? t('documents.active') : t('documents.coldArchive') }), _jsx("h3", { children: selected.title }), _jsx("p", { children: selected.description || t('documents.noDescription') })] }), _jsx("div", { children: props.writeEnabled && selected.status === 'active' && _jsx("button", { type: "button", className: css.secondaryButton, onClick: beginEdit, children: t('documents.edit') }) })] }), _jsxs("dl", { children: [_jsxs("div", { children: [_jsx("dt", { children: t('documents.path') }), _jsx("dd", { children: _jsx("code", { children: selected.relativePath }) })] }), _jsxs("div", { children: [_jsx("dt", { children: t('documents.revision') }), _jsx("dd", { children: selected.revision })] }), _jsxs("div", { children: [_jsx("dt", { children: t('documents.hash') }), _jsx("dd", { children: _jsx("code", { children: selected.contentHash.slice(0, 16) }) })] }), _jsxs("div", { children: [_jsx("dt", { children: t('documents.size') }), _jsx("dd", { children: humanBytes(selected.sizeBytes) })] })] }), selected.sourcePaths.length > 0 && _jsxs("div", { className: css.documentSources, children: [_jsx("span", { children: t('documents.sources') }), selected.sourcePaths.map(path => _jsx("code", { children: path }, path))] }), selected.status === 'archived' && _jsxs("div", { className: css.documentArchiveReceipt, children: [_jsx("strong", { children: t('documents.archiveReceipt') }), _jsx("p", { children: selected.archiveSummary }), _jsx("div", { children: selected.memoryBodyIds.map(id => _jsx("code", { children: id }, id)) })] }), _jsx(DocumentMarkdown, { content: selected.content }), props.writeEnabled && selected.status === 'active' && _jsx("footer", { className: css.documentDanger, children: confirmArchive ? _jsxs(_Fragment, { children: [_jsx("span", { children: t('documents.archiveConfirm') }), _jsx("button", { type: "button", className: css.dangerSolidButton, disabled: saving, onClick: () => void archive(), children: saving ? t('documents.archiving') : t('documents.archiveNow') }), _jsx("button", { type: "button", className: css.ghostButton, onClick: () => setConfirmArchive(false), children: t('common.cancel') })] }) : _jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("strong", { children: t('documents.archiveTitle') }), _jsx("p", { children: t('documents.archiveDescription') })] }), _jsx("button", { type: "button", className: css.dangerButton, onClick: () => setConfirmArchive(true), children: t('documents.archive') })] }) })] }) })] }), _jsx("p", { className: css.runtimeFootnote, children: t('documents.footnote') })] }));
+    const composer = _jsxs("form", { className: css.documentEditor, onSubmit: event => void create(event), children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("h3", { children: t('documents.newTitle') }), _jsx("p", { children: t('documents.editorHint') })] }), _jsx("span", { children: t('documents.managedCopy') })] }), _jsxs("div", { className: css.documentEditorMeta, children: [_jsxs("label", { children: [t('documents.name'), _jsx("input", { value: title, onChange: event => setTitle(event.target.value), required: true })] }), _jsxs("label", { children: [t('documents.routing'), _jsx("input", { value: description, onChange: event => setDescription(event.target.value) })] })] }), _jsxs("label", { children: [t('documents.sources'), _jsx("input", { value: sources, onChange: event => setSources(event.target.value), placeholder: t('documents.sourcesPlaceholder') })] }), _jsxs("label", { children: [t('documents.markdown'), _jsx("textarea", { value: content, onChange: event => setContent(event.target.value), rows: 10, required: true })] }), _jsxs("footer", { children: [_jsx("button", { type: "button", className: css.ghostButton, disabled: saving, onClick: resetComposer, children: t('common.cancel') }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: saving || title.trim() === '' || content.trim() === '', children: saving ? t('documents.saving') : t('documents.create') })] })] });
+    const editComposer = selected === null ? null : _jsxs("form", { className: css.documentEditor, onSubmit: event => void update(event), children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("h3", { children: t('documents.editTitle') }), _jsx("p", { children: t('documents.editorHint') })] }), _jsx("code", { children: selected.id })] }), _jsxs("div", { className: css.documentEditorMeta, children: [_jsxs("label", { children: [t('documents.name'), _jsx("input", { value: title, onChange: event => setTitle(event.target.value), required: true })] }), _jsxs("label", { children: [t('documents.routing'), _jsx("input", { value: description, onChange: event => setDescription(event.target.value) })] })] }), _jsxs("label", { children: [t('documents.sources'), _jsx("input", { value: sources, onChange: event => setSources(event.target.value) })] }), _jsxs("label", { children: [t('documents.markdown'), _jsx("textarea", { value: content, onChange: event => setContent(event.target.value), rows: 18, required: true })] }), _jsxs("footer", { children: [_jsx("button", { type: "button", className: css.ghostButton, disabled: saving, onClick: () => setEditing(false), children: t('common.cancel') }), _jsx("button", { type: "submit", className: css.primaryButton, disabled: saving, children: saving ? t('documents.saving') : t('documents.save') })] })] });
+    const documentEditActionClass = appearance.surface === 'sidebar'
+        ? appearanceClass(css.ghostButton, appearanceClass(appearance.classes.itemActionButton, appearance.classes.itemEditAction))
+        : css.secondaryButton;
+    const documentArchiveActionClass = appearance.surface === 'sidebar'
+        ? appearanceClass(css.dangerButton, appearanceClass(appearance.classes.itemActionButton, appearance.classes.itemDangerAction))
+        : css.dangerButton;
+    const visibleItems = items.slice(0, visibleLimit);
+    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('documents.title'), description: t('documents.description'), meta: snapshot === null ? t('common.loading') : t('documents.capacity', { used: humanBytes(snapshot.activeBytes), limit: humanBytes(snapshot.limitBytes) }), action: _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: css.secondaryButton, disabled: loading, onClick: () => void display(query, status), children: t('documents.refresh') }), appearance.surface === 'sidebar' && props.writeEnabled && props.sessionId !== undefined && _jsx("button", { type: "button", className: css.primaryButton, onClick: startComposer, children: t('documents.new') })] }) }), error !== null && _jsx("div", { className: css.inlineError, role: "alert", children: error }), notice !== null && _jsx("div", { className: css.runtimeNotice, role: "status", children: notice }), _jsxs("section", { className: css.documentSummary, "aria-label": t('documents.summary'), children: [_jsxs("article", { children: [_jsx("span", { children: t('documents.active') }), _jsx("strong", { children: activeCount }), _jsx("small", { children: t('documents.activeHint') })] }), _jsxs("article", { children: [_jsx("span", { children: t('documents.archivedCount') }), _jsx("strong", { children: archivedCount }), _jsx("small", { children: t('documents.archivedHint') })] }), _jsxs("article", { className: css.documentCapacity, children: [_jsx("span", { children: t('documents.activeCapacity') }), _jsx("strong", { children: snapshot === null ? '—' : `${usage.toFixed(1)}%` }), _jsx("div", { children: _jsx("i", { style: { width: `${usage}%` } }) }), _jsx("small", { children: t('documents.capacityHint') })] })] }), _jsxs("section", { className: css.documentToolbar, children: [_jsxs("form", { onSubmit: event => { event.preventDefault(); void display(query, status); }, children: [_jsx("span", { "aria-hidden": "true", children: "\u2315" }), _jsx("input", { "aria-label": t('documents.searchAria'), value: query, onChange: event => setQuery(event.target.value), placeholder: t('documents.searchPlaceholder') }), _jsx("button", { type: "submit", className: css.secondaryButton, children: t('documents.search') })] }), _jsxs("div", { role: "group", "aria-label": t('documents.scope'), children: [_jsxs("button", { type: "button", "data-active": status === 'active' || undefined, onClick: () => setStatus('active'), children: [t('documents.active'), " ", _jsx("b", { children: activeCount })] }), _jsxs("button", { type: "button", "data-active": status === 'archived' || undefined, onClick: () => setStatus('archived'), children: [t('documents.archivedCount'), " ", _jsx("b", { children: archivedCount })] })] }), appearance.surface === 'buildin' && props.writeEnabled && props.sessionId !== undefined && _jsx("button", { type: "button", className: css.primaryButton, onClick: () => { if (composing)
+                            resetComposer();
+                        else
+                            startComposer(); }, children: composing ? t('common.cancel') : t('documents.new') })] }), composing && appearance.surface === 'buildin' && composer, _jsxs("div", { className: css.documentWorkspace, children: [_jsxs("aside", { className: css.documentList, "aria-label": t('documents.list'), children: [_jsxs("header", { children: [_jsx("span", { children: status === 'active' ? t('documents.activeList') : t('documents.archiveList') }), _jsx("code", { children: items.length })] }), visibleItems.map(document => _jsxs("button", { type: "button", "data-selected": selectedId === document.id || undefined, onClick: () => { setSelected(null); setSelectedId(document.id); setEditing(false); setConfirmArchive(false); }, children: [_jsxs("div", { children: [_jsx("strong", { children: document.title }), _jsx("time", { dateTime: document.updatedAt, children: new Date(document.updatedAt).toLocaleDateString(locale) })] }), _jsx("p", { children: document.description || document.excerpt || t('documents.noDescription') }), _jsxs("footer", { children: [_jsx("span", { children: humanBytes(document.sizeBytes) }), _jsx("code", { children: document.id.slice(0, 8) }), document.healthy === false && _jsx("em", { children: t('documents.missing') })] })] }, document.id)), appearance.surface === 'sidebar' && !loading && _jsx(ProgressiveFooter, { compact: true, visible: visibleItems.length, total: items.length, pageSize: pageSize, onMore: () => setVisibleLimit(value => value + pageSize) }), !loading && items.length === 0 && _jsxs("div", { className: css.documentListEmpty, children: [_jsx("span", { children: "\u25A4" }), _jsx("strong", { children: status === 'active' ? t('documents.emptyActive') : t('documents.emptyArchived') }), _jsx("p", { children: status === 'active' ? t('documents.emptyActiveText') : t('documents.emptyArchivedText') })] }), loading && _jsx("div", { className: css.loading, children: t('common.loading') })] }), _jsx("section", { ref: readerRef, className: css.documentReader, "aria-label": t('documents.reader'), "data-scroll-region": appearance.surface === 'sidebar' ? '' : undefined, children: selected === null ? _jsx(EmptyState, { glyph: "\u25A4", title: t('documents.selectTitle'), children: t('documents.selectText') }) : editing && appearance.surface === 'buildin' ? editComposer : _jsxs("article", { className: css.documentDetail, children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("span", { children: selected.status === 'active' ? t('documents.active') : t('documents.coldArchive') }), _jsx("h3", { children: selected.title }), _jsx("p", { children: selected.description || t('documents.noDescription') })] }), _jsx("div", { children: props.writeEnabled && selected.status === 'active' && _jsx("button", { type: "button", className: documentEditActionClass, onClick: beginEdit, children: t('documents.edit') }) })] }), _jsxs("dl", { children: [_jsxs("div", { children: [_jsx("dt", { children: t('documents.path') }), _jsx("dd", { children: _jsx("code", { children: selected.relativePath }) })] }), _jsxs("div", { children: [_jsx("dt", { children: t('documents.revision') }), _jsx("dd", { children: selected.revision })] }), _jsxs("div", { children: [_jsx("dt", { children: t('documents.hash') }), _jsx("dd", { children: _jsx("code", { children: selected.contentHash.slice(0, 16) }) })] }), _jsxs("div", { children: [_jsx("dt", { children: t('documents.size') }), _jsx("dd", { children: humanBytes(selected.sizeBytes) })] })] }), selected.sourcePaths.length > 0 && _jsxs("div", { className: css.documentSources, children: [_jsx("span", { children: t('documents.sources') }), selected.sourcePaths.map(path => _jsx("code", { children: path }, path))] }), selected.status === 'archived' && _jsxs("div", { className: css.documentArchiveReceipt, children: [_jsx("strong", { children: t('documents.archiveReceipt') }), _jsx("p", { children: selected.archiveSummary }), _jsx("div", { children: selected.memoryBodyIds.map(id => _jsx("code", { children: id }, id)) })] }), _jsx(DocumentMarkdown, { content: selected.content }), props.writeEnabled && selected.status === 'active' && _jsx("footer", { className: css.documentDanger, children: appearance.surface === 'buildin' && confirmArchive ? _jsxs(_Fragment, { children: [_jsx("span", { children: t('documents.archiveConfirm') }), _jsx("button", { type: "button", className: css.dangerSolidButton, disabled: saving, onClick: () => void archive(), children: saving ? t('documents.archiving') : t('documents.archiveNow') }), _jsx("button", { type: "button", className: css.ghostButton, onClick: () => setConfirmArchive(false), children: t('common.cancel') })] }) : _jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("strong", { children: t('documents.archiveTitle') }), _jsx("p", { children: t('documents.archiveDescription') })] }), _jsx("button", { type: "button", className: documentArchiveActionClass, onClick: () => setConfirmArchive(true), children: t('documents.archive') })] }) })] }) })] }), _jsx("p", { className: css.runtimeFootnote, children: t('documents.footnote') }), composing && appearance.surface === 'sidebar' && _jsx(SidebarModal, { title: t('documents.newTitle'), description: t('documents.editorHint'), busy: saving, onClose: resetComposer, children: composer }), editing && appearance.surface === 'sidebar' && selected !== null && _jsx(SidebarModal, { title: t('documents.editTitle'), description: selected.title, busy: saving, onClose: () => setEditing(false), children: editComposer }), confirmArchive && appearance.surface === 'sidebar' && selected !== null && _jsx(SidebarModal, { title: t('documents.archiveConfirm'), description: selected.title, busy: saving, onClose: () => setConfirmArchive(false), children: _jsxs("div", { className: css.bodyDeleteConfirm, children: [_jsx("p", { children: t('documents.archiveDescription') }), _jsxs("div", { className: css.bodyDeleteSummary, children: [_jsx("strong", { children: selected.title }), _jsxs("span", { children: [selected.relativePath, " \u00B7 ", humanBytes(selected.sizeBytes)] })] }), _jsxs("div", { className: css.bodyEditActions, children: [_jsx("button", { type: "button", "data-autofocus": true, className: css.ghostButton, disabled: saving, onClick: () => setConfirmArchive(false), children: t('common.cancel') }), _jsx("button", { type: "button", className: css.dangerSolidButton, disabled: saving, onClick: () => void archive(), children: saving ? t('documents.archiving') : t('documents.archiveNow') })] })] }) })] }));
+}
+function versionModeLabel(t, mode) {
+    if (mode === 'homebrew')
+        return t('versions.modeHomebrew');
+    if (mode === 'go')
+        return t('versions.modeGo');
+    if (mode === 'npm')
+        return t('versions.modeNpm');
+    if (mode === 'link')
+        return t('versions.modeLink');
+    if (mode === 'missing')
+        return t('versions.modeMissing');
+    return t('versions.modeManual');
+}
+function versionHint(t, component) {
+    if (component.checkError !== undefined)
+        return t('versions.latestUnavailable');
+    if (component.updateHint === 'brew')
+        return t('versions.hintHomebrew');
+    if (component.updateHint === 'brew-missing')
+        return t('versions.hintBrewMissing');
+    if (component.updateHint === 'go')
+        return t('versions.hintGo');
+    if (component.updateHint === 'pnpm')
+        return t('versions.hintPnpm');
+    if (component.updateHint === 'pnpm-missing')
+        return t('versions.hintPnpmMissing');
+    if (component.updateHint === 'link')
+        return t('versions.hintLink');
+    if (component.updateHint === 'install')
+        return t('versions.hintInstall');
+    return t('versions.hintManual');
+}
+function VersionDialog(props) {
+    const t = useT();
+    const [snapshot, setSnapshot] = useState(null);
+    const [checking, setChecking] = useState(true);
+    const [updating, setUpdating] = useState(null);
+    const [error, setError] = useState(null);
+    const [result, setResult] = useState(null);
+    const check = useCallback(async () => {
+        setChecking(true);
+        setError(null);
+        let timeout;
+        try {
+            const deadline = new Promise((_resolve, reject) => { timeout = setTimeout(() => reject(new Error(t('versions.timeout'))), 15_000); });
+            setSnapshot(await Promise.race([props.client.versions(), deadline]));
+        }
+        catch (reason) {
+            setError(message(reason));
+        }
+        finally {
+            if (timeout !== undefined)
+                clearTimeout(timeout);
+            setChecking(false);
+        }
+    }, [props.client, t]);
+    useEffect(() => { void check(); }, [check]);
+    const update = async (component) => {
+        setUpdating(component.id);
+        setError(null);
+        setResult(null);
+        try {
+            const next = await props.client.updateVersion(component.id);
+            setResult(next);
+            await check();
+            props.onRefreshStatus();
+        }
+        catch (reason) {
+            setError(message(reason));
+        }
+        finally {
+            setUpdating(null);
+        }
+    };
+    const busy = checking || updating !== null;
+    return _jsx(SidebarModal, { title: t('versions.title'), description: t('versions.description'), busy: busy, onClose: props.onClose, children: _jsxs("div", { className: css.versionDialogBody, children: [checking && snapshot === null && _jsxs("div", { className: css.versionChecking, role: "status", children: [_jsx("span", {}), t('versions.checking')] }), error !== null && _jsxs("div", { className: css.versionError, role: "alert", children: [_jsx("strong", { children: t('versions.failed') }), _jsx("p", { children: error })] }), result !== null && _jsxs("div", { className: css.versionResult, role: "status", children: [_jsx("strong", { children: result.updated ? t('versions.updated', { name: result.component === 'mnemon' ? 'Mnemon CLI' : 'dsh-mnemon' }) : t('versions.alreadyCurrent') }), result.restartRequired && _jsx("p", { children: t('versions.restartRequired') })] }), snapshot !== null && _jsx("div", { className: css.versionList, children: snapshot.components.map(component => {
+                        const canUpdate = component.outdated && component.updateSupported && component.checkError === undefined;
+                        const state = component.checkError !== undefined ? t('versions.unknown') : component.outdated ? t('versions.available') : t('versions.current');
+                        return _jsxs("article", { "data-outdated": component.outdated || undefined, children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("strong", { children: component.name }), _jsx("span", { children: versionModeLabel(t, component.installMode) })] }), _jsx("em", { children: state })] }), _jsxs("div", { className: css.versionNumbers, children: [_jsxs("div", { children: [_jsx("small", { children: t('versions.installed') }), _jsx("code", { children: component.current ?? '—' })] }), _jsx("span", { children: "\u2192" }), _jsxs("div", { children: [_jsx("small", { children: t('versions.latest') }), _jsx("code", { children: component.latest ?? '—' })] })] }), _jsxs("footer", { children: [_jsx("p", { children: versionHint(t, component) }), canUpdate && _jsx("button", { type: "button", className: css.primaryButton, disabled: busy, onClick: () => void update(component), children: updating === component.id ? t('versions.updating') : t('versions.update') })] })] }, component.id);
+                    }) }), _jsxs("div", { className: css.versionDialogActions, children: [_jsx("span", { children: snapshot === null ? '' : t('versions.checkedAt', { time: new Date(snapshot.checkedAt).toLocaleTimeString() }) }), _jsxs("div", { children: [_jsx("button", { type: "button", className: css.ghostButton, disabled: busy, onClick: props.onClose, children: t('common.cancel') }), _jsx("button", { type: "button", "data-autofocus": true, className: css.secondaryButton, disabled: busy, onClick: () => void check(), children: checking ? t('versions.checkingShort') : t('versions.recheck') })] })] })] }) });
 }
 function StatusPage(props) {
     const t = useT();
+    const [versionsOpen, setVersionsOpen] = useState(false);
     const status = props.status;
-    const lifecycle = status?.lifecycle;
-    const current = lifecycle?.current;
-    const workers = lifecycle?.subagents;
     const documents = status?.documents;
-    const reviewActivity = current?.reviewActivity;
-    const reviewThreshold = reviewActivity?.threshold ?? QODERWORK_REVIEW_POLICY.reviewThreshold;
     const catalogKnown = status?.memoryBodies !== undefined;
     const memoryBodies = useMemo(() => status?.memoryBodies ?? [], [status]);
     const activeBodies = memoryBodies.filter(body => body.active).length;
-    const phase = current?.lastPhase === undefined || current.lastPhase === 'idle' ? t('status.phaseIdle') : current.lastPhase === 'supervised' ? t('status.phaseSupervised') : current.lastPhase === 'error' ? t('status.phaseError') : current.lastPhase === 'prime' ? t('status.prime') : current.lastPhase === 'recall' ? t('status.recallWorker') : current.lastPhase === 'review' ? t('status.phaseReview') : t('status.writeWorker');
-    const reviewState = current?.reviewRunning === true
-        ? t('status.reviewRunning')
-        : current?.idleReviewPending === true
-            ? t('status.reviewPending')
-            : reviewActivity?.eligible === true
-                ? t('status.reviewQualified')
-                : t('status.reviewAccumulating');
-    const lastReview = current?.lastReviewAt === undefined ? t('status.noReview') : t('status.reviewAt', { time: new Date(current.lastReviewAt).toLocaleTimeString(), action: current.lastReviewAction ?? '—', score: current.lastReviewScore ?? '—' });
     const storage = status?.storage;
     const selectedScopeKind = storage?.activeKind ?? 'global';
     const selectedScope = storage?.scopes.find(scope => scope.kind === selectedScopeKind);
     const runtimeArea = selectedScope?.areas.find(area => area.kind === 'runtime');
     const runtimeUserEntries = runtimeArea === undefined ? 0 : Number(runtimeArea.details.userEntries ?? 0);
     const runtimeMemoryEntries = runtimeArea === undefined ? 0 : Number(runtimeArea.details.memoryEntries ?? 0);
-    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('status.title'), description: t('status.description'), meta: status === null && props.loading ? t('common.loading') : status?.healthy === true && lifecycle?.sessionAvailable === true ? t('status.nominal') : t('status.checkRequired'), action: _jsx("button", { type: "button", className: css.secondaryButton, disabled: props.loading, onClick: props.onRefresh, children: props.loading ? t('status.rechecking') : t('status.recheck') }) }), _jsxs("section", { className: css.healthStrip, "aria-label": t('status.aria'), children: [_jsxs("article", { children: [_jsx("span", { className: `${css.healthIndicator} ${status === null ? css.healthMuted : status.healthy ? css.healthGood : css.healthBad}` }), _jsxs("div", { children: [_jsx("small", { children: t('status.engine') }), _jsx("strong", { children: status === null ? t('status.engineChecking') : status.healthy ? t('status.engineConnected') : t('status.engineUnavailable') }), _jsx("p", { children: status?.version === undefined ? t('status.versionWaiting') : `CLI ${status.version}` })] })] }), _jsxs("article", { children: [_jsx("span", { className: `${css.healthIndicator} ${runtimeArea === undefined ? css.healthMuted : runtimeArea.status === 'invalid' ? css.healthBad : css.healthGood}` }), _jsxs("div", { children: [_jsx("small", { children: t('status.runtime') }), _jsx("strong", { children: runtimeArea === undefined ? t('status.runtimeWaiting') : t('status.runtimeRatio', { user: runtimeUserEntries, memory: runtimeMemoryEntries }) }), _jsx("p", { children: runtimeArea === undefined ? t('status.runtimeWaitingDetail') : t('status.runtimeBytes', { bytes: humanBytes(runtimeArea.bytes) }) })] })] }), _jsxs("article", { children: [_jsx("span", { className: `${css.healthIndicator} ${activeBodies > 0 ? css.healthGood : css.healthMuted}` }), _jsxs("div", { children: [_jsx("small", { children: t('status.spaces') }), _jsx("strong", { children: catalogKnown ? t('status.activeRatio', { active: activeBodies, total: memoryBodies.length }) : t('status.directoryUnsynced') }), _jsx("p", { children: t('status.activeMemories', { count: status?.stats?.totalInsights ?? 0 }) })] })] }), _jsxs("article", { children: [_jsx("span", { className: `${css.healthIndicator} ${documents === undefined ? css.healthMuted : css.healthGood}` }), _jsxs("div", { children: [_jsx("small", { children: t('status.documents') }), _jsx("strong", { children: documents === undefined ? t('status.documentsWaiting') : t('status.documentRatio', { active: documents.activeCount, archived: documents.archivedCount }) }), _jsx("p", { children: documents === undefined ? t('status.documentsSession') : t('status.documentUsage', { used: humanBytes(documents.activeBytes), limit: humanBytes(documents.limitBytes) }) })] })] }), _jsxs("article", { children: [_jsx("span", { className: `${css.healthIndicator} ${lifecycle === undefined ? css.healthMuted : lifecycle.sessionAvailable ? css.healthGood : css.healthBad}` }), _jsxs("div", { children: [_jsx("small", { children: t('status.router') }), _jsx("strong", { children: lifecycle === undefined ? t('status.routerChecking') : lifecycle.sessionAvailable ? t('status.routerReady') : t('status.sessionMissing') }), _jsx("p", { children: workers === undefined ? t('status.orchestrationWaiting') : t('status.workerSummary', { recalls: workers.recalls, reviews: workers.reviews ?? 0, writes: workers.writes, failures: workers.failures ?? 0 }) })] })] })] }), _jsx(MemorySystemFlow, { status: status, reviewState: reviewState }), _jsx(StorageDomains, { catalog: storage, selected: selectedScope, selectedKind: selectedScopeKind }), _jsxs("section", { className: css.lifecyclePanel, children: [_jsxs("div", { className: css.statusSectionHeader, children: [_jsxs("div", { children: [_jsx("h3", { children: t('status.lifecycle') }), _jsx("p", { children: t('status.lifecycleText') })] }), _jsx("span", { className: css.phaseBadge, children: phase })] }), _jsxs("div", { className: css.lifecycleFlow, children: [_jsxs("article", { children: [_jsx("span", { children: "01" }), _jsxs("div", { children: [_jsx("strong", { children: t('status.prime') }), _jsx("p", { children: t('status.primeText') })] }), _jsx("code", { children: lifecycle?.counters.primes ?? 0 })] }), _jsxs("article", { "data-disabled": lifecycle?.recallMode === 'off' || undefined, children: [_jsx("span", { children: "02" }), _jsxs("div", { children: [_jsx("strong", { children: t('status.recallWorker') }), _jsx("p", { children: lifecycle?.recallMode === 'guided' ? t('status.recallText') : t('status.recallOff') })] }), _jsx("code", { children: workers?.recalls ?? 0 })] }), _jsxs("article", { "data-disabled": lifecycle?.writebackMode === 'off' || undefined, children: [_jsx("span", { children: "03" }), _jsxs("div", { children: [_jsx("strong", { children: t('status.writeWorker') }), _jsx("p", { children: lifecycle?.writebackMode === 'guided' ? t('status.writeText', { threshold: reviewThreshold, seconds: Math.round((lifecycle.idleReviewMs ?? 0) / 1000) }) : t('status.writeOff') })] }), _jsx("code", { children: workers?.reviews ?? 0 })] })] }), _jsxs("div", { className: css.lifecycleFoot, children: [_jsxs("span", { children: [t('status.activitySignals'), " ", _jsx("strong", { children: t('status.activitySignalValues', { chars: reviewActivity?.totalUserTextLength ?? 0, turns: reviewActivity?.turnCount ?? 0, tools: reviewActivity?.toolCallCount ?? 0, unique: reviewActivity?.uniqueToolCount ?? 0 }) })] }), _jsxs("span", { children: [t('status.lastReview'), " ", _jsx("strong", { children: lastReview })] }), _jsxs("span", { children: [t('status.workerFailures'), " ", _jsx("strong", { children: workers?.failures ?? 0 })] })] }), current?.lastError !== undefined && _jsxs("div", { className: css.inlineError, role: "alert", children: ["Lifecycle\uFF1A", current.lastError] })] })] }));
+    return (_jsxs("div", { className: css.page, children: [_jsx(PageHeader, { title: t('status.title'), description: t('status.description'), meta: status === null && props.loading ? t('common.loading') : status?.healthy === true ? t('status.nominal') : t('status.checkRequired'), action: _jsxs("div", { className: css.statusHeaderActions, children: [_jsx("button", { type: "button", className: css.ghostButton, disabled: props.loading, onClick: props.onRefresh, children: props.loading ? t('status.rechecking') : t('status.recheck') }), _jsx("button", { type: "button", className: css.secondaryButton, onClick: () => setVersionsOpen(true), children: t('versions.checkAction') })] }) }), _jsxs("section", { className: css.healthStrip, "aria-label": t('status.aria'), children: [_jsxs("article", { children: [_jsx("span", { className: `${css.healthIndicator} ${status === null ? css.healthMuted : status.healthy ? css.healthGood : css.healthBad}` }), _jsxs("div", { children: [_jsx("small", { children: t('status.engine') }), _jsx("strong", { children: status === null ? t('status.engineChecking') : status.healthy ? status.version === undefined ? t('status.engineConnected') : `Mnemon ${status.version}` : t('status.engineUnavailable') }), _jsx("p", { children: status?.dshMnemonVersion === undefined ? t('status.versionWaiting') : `dsh-mnemon ${status.dshMnemonVersion}` })] })] }), _jsxs("article", { children: [_jsx("span", { className: `${css.healthIndicator} ${runtimeArea === undefined ? css.healthMuted : runtimeArea.status === 'invalid' ? css.healthBad : css.healthGood}` }), _jsxs("div", { children: [_jsx("small", { children: t('status.runtime') }), _jsx("strong", { children: runtimeArea === undefined ? t('status.runtimeWaiting') : t('status.runtimeRatio', { user: runtimeUserEntries, memory: runtimeMemoryEntries }) }), _jsx("p", { children: runtimeArea === undefined ? t('status.runtimeWaitingDetail') : t('status.runtimeBytes', { bytes: humanBytes(runtimeArea.bytes) }) })] })] }), _jsxs("article", { children: [_jsx("span", { className: `${css.healthIndicator} ${activeBodies > 0 ? css.healthGood : css.healthMuted}` }), _jsxs("div", { children: [_jsx("small", { children: t('status.spaces') }), _jsx("strong", { children: catalogKnown ? t('status.activeRatio', { active: activeBodies, total: memoryBodies.length }) : t('status.directoryUnsynced') }), _jsx("p", { children: t('status.activeMemories', { count: status?.stats?.totalInsights ?? 0 }) })] })] }), _jsxs("article", { children: [_jsx("span", { className: `${css.healthIndicator} ${documents === undefined ? css.healthMuted : css.healthGood}` }), _jsxs("div", { children: [_jsx("small", { children: t('status.documents') }), _jsx("strong", { children: documents === undefined ? t('status.documentsWaiting') : t('status.documentRatio', { active: documents.activeCount, archived: documents.archivedCount }) }), _jsx("p", { children: documents === undefined ? t('status.documentsSession') : t('status.documentUsage', { used: humanBytes(documents.activeBytes), limit: humanBytes(documents.limitBytes) }) })] })] })] }), _jsx(StorageDomains, { catalog: storage, selected: selectedScope, selectedKind: selectedScopeKind }), versionsOpen && _jsx(VersionDialog, { client: props.client, onClose: () => setVersionsOpen(false), onRefreshStatus: props.onRefresh })] }));
 }
 function storageScopeLabel(t, kind) {
     return t(kind === 'global' ? 'status.storageGlobal' : kind === 'workspace' ? 'status.storageWorkspace' : 'status.storageCustom');
 }
+/** Resolve the configured scope before the first status round-trip to keep the Sidebar header stable. */
+function configuredStorageScope(config) {
+    return config?.storageScope ?? (config?.dataDir?.trim() ? 'custom' : 'global');
+}
 function storageAreaLabel(t, kind) {
     return t(kind === 'runtime' ? 'status.storageRuntime' : kind === 'memory-bodies' ? 'status.storageBodies' : kind === 'documents' ? 'status.storageDocuments' : 'status.storageState');
 }
@@ -1148,74 +1452,78 @@ function storageAreaDetails(t, area) {
 function StorageDomains(props) {
     const t = useT();
     const areaStatus = (status) => t(status === 'ready' ? 'status.storageReady' : status === 'empty' ? 'status.storageEmpty' : status === 'missing' ? 'status.storageMissing' : 'status.storageInvalid');
-    return (_jsxs("section", { className: css.storageDomains, "aria-label": t('status.storageDomains'), children: [_jsxs("div", { className: css.statusSectionHeader, children: [_jsxs("div", { children: [_jsx("h3", { children: t('status.storageDomains') }), _jsx("p", { children: t('status.storageDomainsText') })] }), _jsx("span", { className: css.phaseBadge, children: storageScopeLabel(t, props.selectedKind) })] }), props.catalog === undefined ? _jsx("div", { className: css.storageUnavailable, children: t('status.storageWaiting') }) : props.selected?.root === undefined ? _jsxs("div", { className: css.storageUnavailable, children: [_jsx("strong", { children: storageScopeLabel(t, props.selectedKind) }), _jsx("p", { children: props.selectedKind === 'custom' ? t('status.storageCustomUnset') : t('status.storageWorkspaceUnavailable') })] }) : _jsxs(_Fragment, { children: [_jsxs("div", { className: css.storageRoot, children: [_jsxs("div", { children: [_jsxs("span", { children: [storageScopeLabel(t, props.selectedKind), " \u00B7 ", t('status.storageActiveRoot')] }), _jsx("code", { children: props.selected.root })] }), _jsxs("div", { children: [_jsx("strong", { children: humanBytes(props.selected.totalBytes) }), _jsx("small", { children: props.selected.available ? t('status.storageAvailable') : t('status.storageNotCreated') })] })] }), _jsx("div", { className: css.storageAreaGrid, children: props.selected.areas.map(area => _jsxs("article", { "data-status": area.status, children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("span", {}), " ", _jsx("strong", { children: storageAreaLabel(t, area.kind) })] }), _jsx("em", { children: areaStatus(area.status) })] }), _jsxs("div", { className: css.storageAreaMetric, children: [_jsx("strong", { children: area.itemCount }), _jsx("span", { children: t('status.storageItems') }), _jsx("code", { children: humanBytes(area.bytes) })] }), _jsx("p", { children: storageAreaDetails(t, area) }), _jsx("code", { className: css.storagePath, children: area.path }), area.issue !== undefined && _jsx("small", { children: area.issue })] }, area.kind)) })] }), props.catalog !== undefined && _jsx("p", { className: css.storageFootnote, children: t('status.storageFootnote', { root: props.catalog.activeRoot }) })] }));
-}
-function MemorySystemFlow(props) {
-    const t = useT();
-    const status = props.status;
-    const activeScope = status?.storage?.scopes.find(scope => scope.active);
-    const runtime = activeScope?.areas.find(area => area.kind === 'runtime');
-    const documentArea = activeScope?.areas.find(area => area.kind === 'documents');
-    const documents = status?.documents;
-    const bodies = status?.memoryBodies ?? [];
-    const activeBodies = bodies.filter(body => body.active).length;
-    const score = status?.lifecycle?.current?.reviewActivity?.score ?? 0;
-    const threshold = status?.lifecycle?.current?.reviewActivity?.threshold ?? QODERWORK_REVIEW_POLICY.reviewThreshold;
-    const idleSeconds = Math.round((status?.lifecycle?.idleReviewMs ?? 30_000) / 1000);
-    const hostReady = status?.lifecycle?.sessionAvailable === true;
-    const flowActive = status?.healthy === true && hostReady;
-    const areaState = (area) => area?.status === 'invalid' ? 'error' : area?.status === 'ready' ? 'ready' : 'idle';
-    const current = status?.lifecycle?.current;
-    const workers = status?.lifecycle?.subagents;
-    const lastWorkerOperation = workers?.lastOperation;
-    const spawnRecent = lastWorkerOperation !== undefined && lastWorkerOperation !== 'review';
-    const archiveRecent = lastWorkerOperation === 'document-archive' || lastWorkerOperation === 'migration';
-    const reviewState = current?.reviewRunning === true ? 'running' : current?.idleReviewPending === true ? 'pending' : 'idle';
-    const rootRunning = current?.status === 'running';
-    const semanticActive = rootRunning && (current?.lastPhase === 'recall' || current?.lastPhase === 'supervised');
-    const runtimeCount = runtime?.itemCount ?? 0;
-    const insights = status?.stats?.totalInsights ?? 0;
-    const flowNode = (title, meta, state = 'idle', kind = 'host', emphasis) => (_jsxs("article", { className: css.flowArchitectureNode, "data-state": state, "data-kind": kind, "data-emphasis": emphasis, children: [_jsx("span", { className: css.flowArchitectureSignal, "aria-hidden": "true" }), _jsxs("div", { children: [_jsx("strong", { children: title }), _jsx("small", { children: meta })] })] }));
-    const connector = (label, kind = 'host', active = false) => _jsxs("div", { className: css.flowConnector, "data-kind": kind, "data-active": active || undefined, children: [_jsx("span", { children: label }), _jsx("i", { "aria-hidden": "true" })] });
-    return (_jsxs("section", { className: css.memoryFlow, "aria-label": t('status.flowTitle'), children: [_jsxs("div", { className: css.statusSectionHeader, children: [_jsxs("div", { children: [_jsx("h3", { children: t('status.flowTitle') }), _jsx("p", { children: t('status.flowDescription') })] }), _jsx("span", { className: `${css.runtimeBadge} ${status === null ? css.runtimePending : flowActive ? css.runtimeOnline : css.runtimeOffline}`, children: status === null ? t('common.loading') : flowActive ? t('status.flowLive') : t('status.flowDegraded') })] }), _jsx("div", { className: css.memoryFlowCanvas, children: _jsxs("div", { className: css.flowArchitecture, role: "img", "aria-label": `${t('status.flowTitle')}：${t('status.flowDescription')}`, children: [_jsxs("section", { className: css.flowLane, "data-lane": "context", children: [_jsxs("header", { children: [_jsx("span", { children: "01" }), _jsxs("div", { children: [_jsx("strong", { children: t('status.flowLaneContext') }), _jsx("small", { children: t('status.flowLaneContextDetail') })] })] }), _jsxs("div", { className: css.flowTrack, children: [flowNode(t('status.storageRuntime'), t('status.flowRuntimeMeta', { count: runtimeCount }), areaState(runtime), 'store'), connector(t('status.flowPromptAssembly'), 'host'), flowNode(t('status.flowSupervisor'), t('status.flowRootMeta'), hostReady ? 'ready' : 'idle', 'host', rootRunning ? 'active' : undefined), connector('↔', 'host', rootRunning), flowNode(t('status.flowConversation'), t('status.flowTurns'), hostReady ? 'ready' : 'idle', 'task')] }), _jsxs("div", { className: `${css.flowTrack} ${css.flowSecondaryTrack}`, children: [flowNode(t('status.flowSupervisor'), t('status.flowRootMeta'), hostReady ? 'ready' : 'idle', 'host'), connector(t('status.flowOnDemand'), 'host'), flowNode(t('status.flowDocumentSearch'), t('status.flowOnDemand'), areaState(documentArea), 'host'), connector('→', 'host'), flowNode(t('status.storageDocuments'), t('status.flowDocuments', { active: documents?.activeCount ?? 0, archived: documents?.archivedCount ?? 0 }), areaState(documentArea), 'store'), connector('↩', 'host'), flowNode(t('status.flowContext'), t('status.flowEvidenceMeta'), hostReady ? 'ready' : 'idle', 'task')] })] }), _jsxs("section", { className: css.flowLane, "data-lane": "semantic", children: [_jsxs("header", { children: [_jsx("span", { children: "02" }), _jsxs("div", { children: [_jsx("strong", { children: t('status.flowLaneSemantic') }), _jsx("small", { children: t('status.flowLaneSemanticDetail') })] })] }), _jsxs("div", { className: css.flowTrack, children: [flowNode(t('status.flowSupervisor'), t('status.flowSemanticRequest'), hostReady ? 'ready' : 'idle', 'task'), connector('→', 'worker', semanticActive), flowNode(t('status.flowSpawnWorker'), `${t('status.flowSpawnMeta')}${spawnRecent ? ` · ${t('status.flowRecent')}` : ''}`, hostReady ? 'ready' : 'idle', 'worker', semanticActive ? 'active' : spawnRecent ? 'recent' : undefined), connector('→', 'worker', semanticActive), flowNode(t('status.flowHostBridge'), t('status.flowHostBridgeMeta'), status?.healthy === false ? 'error' : status?.healthy === true ? 'ready' : 'idle', 'host'), connector('↔', 'host', semanticActive), flowNode(t('term.spaces'), t('status.flowSpacesMeta', { active: activeBodies, total: bodies.length, insights }), status?.healthy === false ? 'error' : activeBodies > 0 ? 'ready' : 'idle', 'store'), connector('↩', 'host', semanticActive), flowNode(t('status.flowContext'), t('status.flowEvidenceMeta'), hostReady ? 'ready' : 'idle', 'task')] })] }), _jsxs("section", { className: css.flowLane, "data-lane": "maintenance", children: [_jsxs("header", { children: [_jsx("span", { children: "03" }), _jsxs("div", { children: [_jsx("strong", { children: t('status.flowLaneMaintenance') }), _jsx("small", { children: t('status.flowLaneMaintenanceDetail') })] })] }), _jsxs("div", { className: `${css.flowTrack} ${css.flowMaintenanceTrack}`, children: [flowNode(t('status.flowDeterministicWrites'), t('status.flowDeterministicWritesMeta'), hostReady ? 'ready' : 'idle', 'task'), connector('→', 'host'), flowNode(t('status.flowControlPlane'), t('status.flowControlPlaneMeta'), areaState(runtime), 'host'), connector('→', 'host'), flowNode(t('status.storageRuntime'), t('status.storageDocuments'), areaState(documentArea), 'store')] }), _jsxs("div", { className: `${css.flowTrack} ${css.flowReviewTrack}`, children: [flowNode(t('status.flowReviewGate'), t('status.flowReviewGateMeta', { score, threshold, seconds: idleSeconds }), current?.reviewActivity?.eligible === true ? 'ready' : 'idle', 'task', reviewState === 'pending' ? 'pending' : undefined), connector('→', 'worker', reviewState === 'running'), flowNode(t('status.flowForkReview'), t('status.flowForkReviewMeta', { state: props.reviewState }), current?.lastError === undefined ? hostReady ? 'ready' : 'idle' : 'error', 'worker', reviewState === 'running' ? 'active' : reviewState === 'pending' ? 'pending' : undefined), connector('→', 'host', reviewState === 'running'), flowNode(t('status.flowReviewTargets'), t('status.flowReviewTargetsMeta'), areaState(documentArea), 'host'), connector('↩', 'host', reviewState === 'running'), flowNode(t('status.flowContext'), t('status.flowEvidenceMeta'), hostReady ? 'ready' : 'idle', 'task')] }), _jsxs("div", { className: `${css.flowTrack} ${css.flowArchiveTrack}`, children: [flowNode(t('status.storageDocuments'), t('status.flowDocuments', { active: documents?.activeCount ?? 0, archived: documents?.archivedCount ?? 0 }), areaState(documentArea), 'store'), connector('→', 'worker'), flowNode(t('status.flowColdArchive'), `${t('status.flowColdArchiveMeta')}${archiveRecent ? ` · ${t('status.flowRecent')}` : ''}`, hostReady ? 'ready' : 'idle', 'worker', archiveRecent ? 'recent' : undefined), connector('→', 'worker'), flowNode(t('status.flowHostBridge'), t('status.flowHostBridgeMeta'), status?.healthy === false ? 'error' : status?.healthy === true ? 'ready' : 'idle', 'host'), connector('→', 'host'), flowNode(t('status.flowIndexFirst'), t('term.spaces'), status?.healthy === false ? 'error' : activeBodies > 0 ? 'ready' : 'idle', 'store'), connector('→', 'host'), flowNode(t('status.flowRevisionMove'), t('status.flowRevisionMoveMeta', { archived: documents?.archivedCount ?? 0 }), areaState(documentArea), 'store')] })] })] }) }), _jsxs("div", { className: css.flowLegend, children: [_jsxs("span", { children: [_jsx("i", {}), t('status.flowReadWrite')] }), _jsxs("span", { children: [_jsx("i", {}), t('status.flowArchive')] }), _jsxs("span", { children: [_jsx("b", {}), t('status.flowLegendRecent')] }), _jsx("span", { children: t('status.flowCurrentScope', { scope: storageScopeLabel(t, status?.storage?.activeKind ?? 'global') }) })] })] }));
+    return (_jsxs("section", { className: css.storageDomains, "aria-label": t('status.storageDomains'), children: [_jsxs("div", { className: css.statusSectionHeader, children: [_jsxs("div", { children: [_jsx("h3", { children: t('status.storageDomains') }), _jsx("p", { children: t('status.storageDomainsText') })] }), _jsx("span", { className: css.phaseBadge, children: storageScopeLabel(t, props.selectedKind) })] }), props.catalog === undefined ? _jsx("div", { className: css.storageUnavailable, children: t('status.storageWaiting') }) : props.selected?.root === undefined ? _jsxs("div", { className: css.storageUnavailable, children: [_jsx("strong", { children: storageScopeLabel(t, props.selectedKind) }), _jsx("p", { children: props.selectedKind === 'custom' ? t('status.storageCustomUnset') : t('status.storageWorkspaceUnavailable') })] }) : _jsxs(_Fragment, { children: [_jsxs("div", { className: css.storageRoot, children: [_jsxs("div", { children: [_jsxs("span", { children: [storageScopeLabel(t, props.selectedKind), " \u00B7 ", t('status.storageActiveRoot')] }), _jsx("code", { children: props.selected.root })] }), _jsxs("div", { children: [_jsx("strong", { children: humanBytes(props.selected.totalBytes) }), _jsx("small", { children: props.selected.available ? t('status.storageAvailable') : t('status.storageNotCreated') })] })] }), _jsx("div", { className: css.storageAreaGrid, children: props.selected.areas.filter(area => area.kind !== 'state').map(area => _jsxs("article", { "data-status": area.status, children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx("span", {}), " ", _jsx("strong", { children: storageAreaLabel(t, area.kind) })] }), _jsx("em", { children: areaStatus(area.status) })] }), _jsxs("div", { className: css.storageAreaMetric, children: [_jsx("strong", { children: area.itemCount }), _jsx("span", { children: t('status.storageItems') }), _jsx("code", { children: humanBytes(area.bytes) })] }), _jsx("p", { children: storageAreaDetails(t, area) }), _jsx("code", { className: css.storagePath, children: area.path }), area.issue !== undefined && _jsx("small", { children: area.issue })] }, area.kind)) })] }), props.catalog !== undefined && _jsx("p", { className: css.storageFootnote, children: t('status.storageFootnote', { root: props.catalog.activeRoot }) })] }));
 }
 export function MnemonView(props) {
-    return _jsx(I18nContext.Provider, { value: props.t ?? translateZh, children: _jsx(MnemonWorkspace, { ...props }) });
+    const t = props.t ?? translateZh;
+    const appearance = resolveMnemonViewAppearance(props.surface ?? 'buildin', t);
+    return _jsx(I18nContext.Provider, { value: t, children: _jsx(LocaleContext.Provider, { value: props.locale ?? 'zh', children: _jsx(MnemonViewAppearanceProvider, { value: appearance, children: _jsx(MnemonWorkspace, { ...props }) }) }) });
 }
-function MnemonWorkspace({ connection, sessionId, workspaceId, workspaceSelection }) {
+function MnemonWorkspace({ connection, settingsScope, sessionId, workspaceId, workspaceSelection, onClose }) {
     const t = useT();
+    const appearance = useMnemonViewAppearance();
+    const settingsSnapshot = useSyncExternalStore(settingsScope.subscribe, settingsScope.getSnapshot, settingsScope.getSnapshot);
     const client = useMemo(() => new MnemonClient(connection, sessionId, workspaceId), [connection, sessionId, workspaceId]);
+    const clientContextKey = `${sessionId ?? ''}\u0000${workspaceId ?? ''}`;
+    const viewContextKey = `${clientContextKey}\u0000${settingsSnapshot.revision ?? 'loading'}`;
     const [page, setPage] = useState('status');
+    const lastMemoryPage = useRef('overview');
     const canvasRef = useRef(null);
+    const selectPage = useCallback((next) => {
+        if (isMemoryPage(next))
+            lastMemoryPage.current = next;
+        setPage(next);
+    }, []);
+    const selectPrimaryPage = useCallback((next) => {
+        selectPage(appearance.surface === 'sidebar' && next === 'overview' ? lastMemoryPage.current : next);
+    }, [appearance.surface, selectPage]);
     /** Pages share one plugin-owned scroll container; never mutate DSH ancestor scrollports. */
     const resetViewportScroll = useCallback(() => {
         const canvas = canvasRef.current;
         if (canvas !== null)
             canvas.scrollTop = 0;
     }, []);
-    useEffect(() => { resetViewportScroll(); }, [page, resetViewportScroll]);
-    useEffect(() => {
-        // Clear only this view's offset after layout; the host owns every ancestor.
-        const frame = window.requestAnimationFrame(() => resetViewportScroll());
-        return () => window.cancelAnimationFrame(frame);
-    }, [resetViewportScroll]);
-    const [status, setStatus] = useState(null);
-    const [statusLoading, setStatusLoading] = useState(true);
-    const [statusError, setStatusError] = useState(null);
+    // Reset before paint so a newly selected page never flashes at the previous
+    // page's scroll offset for one frame. The host still owns every ancestor.
+    useLayoutEffect(() => { resetViewportScroll(); }, [viewContextKey, page, resetViewportScroll]);
+    const [statusState, setStatusState] = useState(() => ({ contextKey: viewContextKey, value: null, loading: true, error: null }));
+    const currentStatusState = statusState.contextKey === viewContextKey
+        ? statusState
+        : { contextKey: viewContextKey, value: null, loading: true, error: null };
+    const status = currentStatusState.value;
+    const statusLoading = currentStatusState.loading;
+    const statusError = currentStatusState.error;
     const statusRequest = useRef(0);
     const [revision, setRevision] = useState(0);
     const [searchSeed, setSearchSeed] = useState('');
     const [rememberSeed, setRememberSeed] = useState('');
+    const [rememberOpen, setRememberOpen] = useState(false);
+    // A newly inspected workspace must never inherit visible cards, open editors,
+    // search seeds, or scroll position from the previous workspace.
+    useLayoutEffect(() => {
+        setRememberOpen(false);
+        setRememberSeed('');
+        setSearchSeed('');
+    }, [viewContextKey]);
+    const openRemember = useCallback((seed = '') => {
+        setRememberSeed(seed);
+        setRememberOpen(true);
+    }, []);
     /** Conversation surfaces ask this view to open a page (optionally with a seed). */
     const applyAnchor = useCallback((anchor) => {
+        if (anchor.page === 'remember' && appearance.surface === 'sidebar') {
+            openRemember(anchor.seed ?? '');
+            selectPage(lastMemoryPage.current);
+            return;
+        }
         if (anchor.seed !== undefined && anchor.seed !== '') {
             if (anchor.page === 'explore')
                 setSearchSeed(anchor.seed);
             if (anchor.page === 'remember')
                 setRememberSeed(anchor.seed);
         }
-        setPage(anchor.page);
-    }, []);
+        selectPage(anchor.page);
+    }, [appearance.surface, openRemember, selectPage]);
     useEffect(() => {
         const held = consumeMnemonAnchor(sessionId);
         if (held !== null)
@@ -1224,27 +1532,29 @@ function MnemonWorkspace({ connection, sessionId, workspaceId, workspaceSelectio
     }, [sessionId, applyAnchor]);
     const loadStatus = useCallback(async () => {
         const request = ++statusRequest.current;
-        setStatusLoading(true);
-        setStatusError(null);
+        setStatusState(current => ({ contextKey: viewContextKey, value: current.contextKey === viewContextKey ? current.value : null, loading: true, error: null }));
         try {
             const next = await client.status();
             if (request === statusRequest.current)
-                setStatus(next);
+                setStatusState({ contextKey: viewContextKey, value: next, loading: false, error: null });
         }
         catch (reason) {
             if (request === statusRequest.current)
-                setStatusError(message(reason));
-        }
-        finally {
-            if (request === statusRequest.current)
-                setStatusLoading(false);
+                setStatusState({ contextKey: viewContextKey, value: null, loading: false, error: message(reason) });
         }
-    }, [client]);
+    }, [client, viewContextKey]);
     useEffect(() => { void loadStatus(); }, [loadStatus]);
     const mutate = useCallback(() => { setRevision(value => value + 1); void loadStatus(); }, [loadStatus]);
     const forget = useCallback(async (insight) => { await client.forget(insight.id, insight.memoryBodyId); mutate(); }, [client, mutate]);
-    const explore = useCallback((query) => { setSearchSeed(query); setPage('explore'); }, []);
-    const clone = useCallback((insight) => { setRememberSeed(insight.content); setPage('remember'); }, []);
+    const explore = useCallback((query) => { setSearchSeed(query); selectPage('explore'); }, [selectPage]);
+    const clone = useCallback((insight) => {
+        if (appearance.surface === 'sidebar')
+            openRemember(insight.content);
+        else {
+            setRememberSeed(insight.content);
+            selectPage('remember');
+        }
+    }, [appearance.surface, openRemember, selectPage]);
     const refreshAll = () => { setRevision(value => value + 1); void loadStatus(); };
     const writeEnabled = status?.writeEnabled === true;
     const stats = status?.stats;
@@ -1252,7 +1562,24 @@ function MnemonWorkspace({ connection, sessionId, workspaceId, workspaceSelectio
     const memoryBodies = useMemo(() => status?.memoryBodies ?? [], [status]);
     const activeBodies = memoryBodies.filter(body => body.active).length;
     const workspaceContext = status?.workspaceContext;
-    const showWorkspacePicker = workspaceContext?.mode === 'workspace' && workspaceSelection !== undefined && workspaceSelection.options.length > 0;
-    return (_jsxs("main", { className: css.shell, children: [_jsxs("header", { className: css.masthead, children: [_jsxs("div", { className: css.brand, children: [_jsx(MnemonLogo, { className: css.brandLogo }), _jsx("h1", { children: "Mnemon" })] }), _jsxs("section", { className: css.telemetry, "aria-label": t('telemetry.aria'), children: [_jsxs("div", { className: css.telemetryMetric, children: [_jsx("span", { children: t('telemetry.memories') }), _jsx("strong", { children: stats?.totalInsights ?? '—' })] }), _jsxs("div", { className: css.telemetryMetric, children: [_jsx("span", { children: t('telemetry.graph') }), _jsx("strong", { children: stats?.edgeCount ?? '—' })] }), _jsxs("div", { className: css.telemetryMetric, children: [_jsx("span", { children: t('telemetry.entities') }), _jsx("strong", { children: stats?.topEntities.length ?? '—' })] }), _jsxs("div", { className: css.telemetryMetric, children: [_jsx("span", { children: t('telemetry.spaces') }), _jsx("strong", { children: status === null || !catalogKnown ? '—' : activeBodies })] })] }), _jsxs("div", { className: css.headerActions, children: [showWorkspacePicker && _jsxs("label", { className: css.workspacePicker, children: [_jsx("span", { children: t('workspace.viewing') }), _jsx("select", { "aria-label": t('workspace.selectorAria'), value: workspaceSelection.selectedWorkspaceId ?? '', onChange: event => workspaceSelection.onSelect(event.target.value), children: workspaceSelection.options.map(workspace => _jsx("option", { value: workspace.id, children: workspace.title }, workspace.id)) })] }), _jsxs("div", { className: css.statusCluster, children: [_jsx("span", { className: `${css.statusDot} ${statusLoading && status === null ? css.checking : status?.healthy === true ? css.online : css.offline}` }), _jsx("span", { children: statusLoading ? t('header.checking') : status?.healthy === true ? catalogKnown ? t('header.connected', { count: activeBodies }) : t('header.directoryPending') : t('header.unavailable') }), _jsx("button", { type: "button", className: css.iconButton, disabled: statusLoading, onClick: refreshAll, "aria-label": t('common.refresh'), children: "\u21BB" })] })] })] }), (statusError !== null || status?.healthy === false) && _jsxs("div", { className: css.alert, role: "alert", children: [_jsx("strong", { children: t('header.notReady') }), _jsx("span", { children: statusError ?? status?.error })] }), workspaceContext?.mode === 'workspace' && !workspaceContext.aligned && _jsxs("div", { className: css.workspaceMismatch, role: "status", children: [_jsxs("div", { children: [_jsx("strong", { children: t('workspace.mismatchTitle') }), _jsx("span", { children: t('workspace.mismatchDescription') }), _jsxs("div", { children: [_jsx("code", { children: t('workspace.selectedRoot', { root: workspaceContext.selectedRoot }) }), _jsx("code", { children: t('workspace.effectiveRoot', { root: workspaceContext.effectiveRoot }) })] })] }), workspaceSelection?.effectiveWorkspaceId !== undefined && _jsx("button", { type: "button", className: css.secondaryButton, onClick: workspaceSelection.onAlign, children: t('workspace.align') })] }), _jsxs("div", { className: css.workspace, children: [_jsxs("div", { className: css.topNavigation, children: [_jsx("nav", { className: css.nav, "aria-label": t('nav.aria'), children: PAGE_NAV.map((group, groupIndex) => _jsxs(Fragment, { children: [_jsx("div", { className: css.navGroup, role: "group", "aria-label": t(group.aria), children: group.entries.map(item => _jsxs("button", { type: "button", "aria-current": page === item.id ? 'page' : undefined, onClick: () => setPage(item.id), children: [_jsx("span", { className: css.navGlyph, "aria-hidden": "true", children: item.glyph }), _jsxs("span", { children: [_jsx("strong", { children: t(item.label) }), _jsx("small", { children: t(item.detail) })] })] }, item.id)) }), groupIndex < PAGE_NAV.length - 1 && _jsx("span", { className: css.navGroupDivider, "aria-hidden": "true" })] }, group.aria)) }), _jsxs("div", { className: css.spaceSummary, children: [_jsx("span", { children: t('sidebar.activeSpaces') }), _jsx("code", { children: catalogKnown ? `${activeBodies} / ${memoryBodies.length}` : '— / —' }), _jsx("small", { children: writeEnabled ? t('common.agentSupervised') : t('common.readOnly') })] })] }), _jsxs("section", { className: css.canvas, ref: canvasRef, "data-testid": "mnemon-canvas", children: [page === 'overview' && _jsx(OverviewPage, { client: client, revision: revision, writeEnabled: writeEnabled, fallbackBodies: memoryBodies, fallbackDirectory: status?.memoryBodyDirectory, catalogKnown: catalogKnown, onMutate: mutate, onExplore: explore }), page === 'runtime' && _jsx(RuntimePage, { client: client, revision: revision, writeEnabled: writeEnabled, onMutate: mutate }), page === 'documents' && _jsx(DocumentsPage, { client: client, revision: revision, writeEnabled: writeEnabled, ...(sessionId === undefined ? {} : { sessionId }), onMutate: mutate }), page === 'explore' && _jsx(ExplorePage, { client: client, status: status, seed: searchSeed, writeEnabled: writeEnabled, onForget: forget }), page === 'entities' && _jsx(EntitiesPage, { client: client, revision: revision, writeEnabled: writeEnabled, onForget: forget, onExplore: explore }), page === 'remember' && _jsx(RememberPage, { client: client, sessionId: sessionId, memoryBodies: status?.memoryBodies ?? [], writeEnabled: writeEnabled, seed: rememberSeed, onMutate: mutate }), page === 'list' && _jsx(ListPage, { client: client, revision: revision, writeEnabled: writeEnabled, onForget: forget, onClone: clone, onExplore: explore }), page === 'status' && _jsx(StatusPage, { status: status, loading: statusLoading, onRefresh: () => void loadStatus() })] })] })] }));
+    const storageMode = workspaceContext?.mode ?? status?.storage?.activeKind ?? configuredStorageScope(settingsSnapshot.value);
+    const storageModeText = storageScopeLabel(t, storageMode);
+    const showWorkspacePicker = storageMode === 'workspace' && workspaceSelection !== undefined && workspaceSelection.options.length > 0;
+    const workspaceDiverged = workspaceContext?.mode === 'workspace' && !workspaceContext.aligned;
+    const canAlignWorkspace = workspaceDiverged && workspaceSelection?.effectiveWorkspaceId !== undefined;
+    const workspaceDifference = workspaceContext === undefined
+        ? ''
+        : `${t('workspace.selectedRoot', { root: workspaceContext.selectedRoot })}; ${t('workspace.effectiveRoot', { root: workspaceContext.effectiveRoot })}`;
+    const workspacePicker = showWorkspacePicker && _jsxs("label", { className: appearanceClass(css.workspacePicker, appearance.classes.workspacePicker), children: [_jsx("span", { children: t('workspace.viewing') }), _jsx("select", { "aria-label": t('workspace.selectorAria'), value: workspaceSelection.selectedWorkspaceId ?? '', onChange: event => workspaceSelection.onSelect(event.target.value), children: workspaceSelection.options.map(workspace => _jsx("option", { value: workspace.id, children: workspace.title }, workspace.id)) })] });
+    const connectionLabel = statusLoading
+        ? t('header.checking')
+        : status?.healthy !== true
+            ? t('header.unavailable')
+            : appearance.surface === 'sidebar'
+                ? t('header.connected')
+                : catalogKnown
+                    ? t('header.connectedWithCount', { count: activeBodies })
+                    : t('header.directoryPending');
+    return (_jsxs("main", { className: appearanceClass(css.shell, appearance.classes.shell), "data-mnemon-surface": appearance.surface, children: [_jsxs("header", { className: appearanceClass(css.masthead, appearance.classes.masthead), children: [appearance.surface === 'sidebar' && onClose !== undefined && _jsxs("button", { type: "button", className: appearanceClass(css.ghostButton, css.backButton), onClick: onClose, "aria-label": t('header.backToConversation'), children: [_jsx(IconChevronLeftOutline14, { size: 14 }), _jsx("span", { children: t('header.backToConversation') })] }), _jsxs("div", { className: appearanceClass(css.brand, appearance.classes.brand), children: [appearance.showLogo && _jsx(MnemonLogo, { className: css.brandLogo }), _jsx("h1", { children: appearance.title }), appearance.surface === 'sidebar' && _jsxs("span", { className: css.storageMode, "aria-label": t('workspace.storageModeAria', { mode: storageModeText }), children: [_jsx("span", { children: t('workspace.storageMode') }), _jsx("strong", { children: storageModeText })] }), appearance.surface === 'sidebar' && workspacePicker, appearance.surface === 'sidebar' && canAlignWorkspace && _jsxs("div", { className: appearanceClass(css.workspaceMismatch, appearance.classes.workspaceMismatch), role: "status", "aria-label": `${t('workspace.mismatchTitle')}. ${workspaceDifference}`, title: workspaceDifference, children: [_jsx("span", { children: t('workspace.mismatchShort') }), _jsx("button", { type: "button", onClick: workspaceSelection.onAlign, children: t('workspace.align') })] })] }), appearance.showTelemetry && _jsxs("section", { className: css.telemetry, "aria-label": t('telemetry.aria'), children: [_jsxs("div", { className: css.telemetryMetric, children: [_jsx("span", { children: t('telemetry.memories') }), _jsx("strong", { children: stats?.totalInsights ?? '—' })] }), _jsxs("div", { className: css.telemetryMetric, children: [_jsx("span", { children: t('telemetry.graph') }), _jsx("strong", { children: stats?.edgeCount ?? '—' })] }), _jsxs("div", { className: css.telemetryMetric, children: [_jsx("span", { children: t('telemetry.entities') }), _jsx("strong", { children: stats?.topEntities.length ?? '—' })] }), _jsxs("div", { className: css.telemetryMetric, children: [_jsx("span", { children: t('telemetry.spaces') }), _jsx("strong", { children: status === null || !catalogKnown ? '—' : activeBodies })] })] }), _jsxs("div", { className: appearanceClass(css.headerActions, appearance.classes.headerActions), children: [appearance.surface === 'buildin' && workspacePicker, _jsxs("div", { className: appearanceClass(css.statusCluster, appearance.classes.statusCluster), children: [_jsx("span", { className: `${css.statusDot} ${statusLoading && status === null ? css.checking : status?.healthy === true ? css.online : css.offline}` }), _jsx("span", { children: connectionLabel }), _jsx("button", { type: "button", className: css.iconButton, disabled: statusLoading, onClick: refreshAll, "aria-label": t('common.refresh'), children: "\u21BB" })] })] })] }), (statusError !== null || status?.healthy === false) && _jsxs("div", { className: css.alert, role: "alert", children: [_jsx("strong", { children: t('header.notReady') }), _jsx("span", { children: statusError ?? status?.error })] }), appearance.surface === 'buildin' && workspaceDiverged && _jsxs("div", { className: css.workspaceMismatch, role: "status", children: [_jsxs("div", { children: [_jsx("strong", { children: t('workspace.mismatchTitle') }), _jsx("span", { children: t('workspace.mismatchDescription') }), _jsxs("div", { children: [_jsx("code", { children: t('workspace.selectedRoot', { root: workspaceContext.selectedRoot }) }), _jsx("code", { children: t('workspace.effectiveRoot', { root: workspaceContext.effectiveRoot }) })] })] }), canAlignWorkspace && _jsx("button", { type: "button", className: css.secondaryButton, onClick: workspaceSelection.onAlign, children: t('workspace.align') })] }), _jsxs("div", { className: css.workspace, children: [_jsx(WorkspaceNavigation, { page: page, onSelect: selectPrimaryPage, activeBodies: activeBodies, bodyCount: memoryBodies.length, catalogKnown: catalogKnown, writeEnabled: writeEnabled }), _jsx(MemoryNavigation, { page: page, writeEnabled: writeEnabled, onSelect: selectPage, onRemember: () => openRemember() }), _jsxs("section", { className: appearanceClass(css.canvas, appearance.classes.canvas), ref: canvasRef, "data-testid": "mnemon-canvas", "data-lock-page-header": !isMemoryPage(page) ? '' : undefined, children: [page === 'overview' && _jsx(OverviewPage, { client: client, revision: revision, writeEnabled: writeEnabled, fallbackBodies: memoryBodies, fallbackDirectory: status?.memoryBodyDirectory, catalogKnown: catalogKnown, onMutate: mutate, onExplore: explore }), page === 'runtime' && _jsx(RuntimePage, { client: client, revision: revision, writeEnabled: writeEnabled, onMutate: mutate }), page === 'documents' && _jsx(DocumentsPage, { client: client, revision: revision, writeEnabled: writeEnabled, ...(sessionId === undefined ? {} : { sessionId }), onMutate: mutate }), page === 'explore' && _jsx(ExplorePage, { client: client, status: status, seed: searchSeed, writeEnabled: writeEnabled, onForget: forget }), page === 'entities' && _jsx(EntitiesPage, { client: client, revision: revision, writeEnabled: writeEnabled, onForget: forget, onExplore: explore }), page === 'remember' && appearance.surface === 'buildin' && _jsx(RememberPage, { client: client, sessionId: sessionId, memoryBodies: memoryBodies, writeEnabled: writeEnabled, seed: rememberSeed, onMutate: mutate }), page === 'list' && _jsx(ListPage, { client: client, revision: revision, writeEnabled: writeEnabled, onForget: forget, onClone: clone, onExplore: explore }), page === 'status' && _jsx(StatusPage, { client: client, status: status, loading: statusLoading, onRefresh: () => void loadStatus() })] }, viewContextKey), appearance.surface === 'sidebar' && rememberOpen && _jsx(RememberPage, { client: client, sessionId: sessionId, memoryBodies: memoryBodies, writeEnabled: writeEnabled, seed: rememberSeed, onMutate: mutate, onClose: () => setRememberOpen(false), onComplete: () => setRememberOpen(false) })] })] }));
 }
 //# sourceMappingURL=MnemonView.js.map