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

package/components/pages/RuntimeView.js

@@ -1,10 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Input, MetaPill, PageLayout, PagePanel, SidebarContent, SidebarHeader, SidebarPanel, SidebarScrollRegion, } from "@elizaos/ui";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { client, } from "../../api/index.js";
-import { useApp } from "../../state/index.js";
+import { getCached, setCached } from "../../hooks/resource-cache.js";
+import { useIntervalWhenDocumentVisible } from "../../hooks/useDocumentVisibility.js";
+import { PageLayout } from "../../layouts/page-layout/page-layout.js";
+import { useAppSelector } from "../../state/index.js";
+import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
 import { formatDateTime } from "../../utils/format.js";
+import { PagePanel } from "../composites/page-panel/index.js";
+import { MetaPill } from "../composites/page-panel/page-panel-header.js";
+import { SidebarContent } from "../composites/sidebar/sidebar-content.js";
+import { SidebarPanel } from "../composites/sidebar/sidebar-panel.js";
+import { SidebarScrollRegion } from "../composites/sidebar/sidebar-scroll-region.js";
 import { AppPageSidebar } from "../shared/AppPageSidebar.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { DetailSkeleton } from "../ui/skeleton-layouts.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 const SECTION_TAB_KEYS = [
     {
         key: "summary",
@@ -35,15 +48,6 @@ const SECTION_TAB_KEYS = [
         i18nKey: "common.evaluators",
     },
 ];
-const SECTION_DESCRIPTION_KEYS = {
-    summary: "runtimeview.summaryDescription",
-    runtime: "runtimeview.runtimeDescription",
-    actions: "runtimeview.actionsDescription",
-    providers: "runtimeview.providersDescription",
-    plugins: "runtimeview.pluginsDescription",
-    services: "runtimeview.servicesDescription",
-    evaluators: "runtimeview.evaluatorsDescription",
-};
 function nodeSummary(value) {
     if (value === null)
         return "null";
@@ -116,32 +120,26 @@ function orderItemLabel(entry) {
     return `[${entry.index}] ${entry.name} :: ${entry.className}${idPart}`;
 }
 function TreeNode(props) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const { label, value, path, depth, expanded, onToggle } = props;
     const canExpand = isExpandable(value);
     const open = expanded.has(path);
     const entries = canExpand ? nodeEntries(value, path) : [];
-    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-baseline gap-1 text-xs font-mono leading-6", style: { paddingLeft: `${depth * 14}px` }, children: [canExpand ? (_jsx(Button, { variant: "ghost", size: "icon", type: "button", onClick: () => onToggle(path), className: "h-5 w-5 shrink-0 rounded-md p-0 text-left text-muted hover:bg-bg-hover hover:text-txt", title: open ? t("common.collapse") : t("common.expand"), children: open ? "▾" : "▸" })) : (_jsx("span", { className: "inline-block w-4 text-muted", children: "\u00B7" })), _jsx("span", { className: "text-muted", children: label }), _jsx("span", { className: "min-w-0 break-all text-txt", children: nodeSummary(value) })] }), canExpand && open ? (_jsx("div", { children: entries.map((entry) => (_jsx(TreeNode, { label: entry.key, value: entry.value, path: entry.path, depth: depth + 1, expanded: expanded, onToggle: onToggle }, entry.path))) })) : null] }));
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-baseline gap-1 text-xs font-mono leading-6", style: { paddingLeft: `${depth * 14}px` }, children: [canExpand ? (_jsx(Button, { variant: "ghost", size: "icon", type: "button", onClick: () => onToggle(path), className: "h-5 w-5 shrink-0 rounded-sm p-0 text-left text-muted hover:bg-bg-hover hover:text-txt", title: open ? t("common.collapse") : t("common.expand"), children: open ? "▾" : "▸" })) : (_jsx("span", { className: "inline-block w-4 text-muted", children: "\u00B7" })), _jsx("span", { className: "text-muted", children: label }), _jsx("span", { className: "min-w-0 break-all text-txt", children: nodeSummary(value) })] }), canExpand && open ? (_jsx("div", { children: entries.map((entry) => (_jsx(TreeNode, { label: entry.key, value: entry.value, path: entry.path, depth: depth + 1, expanded: expanded, onToggle: onToggle }, entry.path))) })) : null] }));
 }
 function OrderCard(props) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const { title, entries } = props;
-    return (_jsxs(PagePanel, { variant: "section", className: "p-5", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: title }), _jsx(MetaPill, { children: entries.length })] }), _jsx(PagePanel, { variant: "inset", className: "max-h-[18rem] overflow-auto px-4 py-3 text-xs font-mono leading-6 tabular-nums", children: entries.length === 0 ? (_jsx("div", { className: "text-muted", children: t("runtimeview.none") })) : (entries.map((entry) => (_jsx("div", { className: "min-w-0 break-words text-txt", children: orderItemLabel(entry) }, `${title}-${entry.index}`)))) })] }));
+    return (_jsxs(PagePanel, { variant: "section", className: "p-5", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: title }), _jsx(MetaPill, { children: entries.length })] }), _jsx("div", { className: "max-h-[18rem] overflow-auto text-xs font-mono leading-6 tabular-nums", children: entries.length === 0 ? (_jsx("div", { className: "text-muted", children: t("runtimeview.none") })) : (entries.map((entry) => (_jsx("div", { className: "min-w-0 break-words text-txt", children: orderItemLabel(entry) }, `${title}-${entry.index}`)))) })] }));
 }
 function ServicesOrderCard(props) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const { entries } = props;
-    return (_jsxs(PagePanel, { variant: "section", className: "p-5", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: t("runtimeview.Services") }), _jsxs(MetaPill, { children: [entries.length, " ", t("runtimeview.types")] })] }), _jsx(PagePanel, { variant: "inset", className: "max-h-[18rem] space-y-3 overflow-auto px-4 py-3 text-xs font-mono leading-6 tabular-nums", children: entries.length === 0 ? (_jsx("div", { className: "text-muted", children: t("runtimeview.none") })) : (entries.map((serviceGroup) => (_jsxs(PagePanel, { variant: "inset", className: "px-3 py-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0 break-words text-txt", children: ["[", serviceGroup.index, "] ", serviceGroup.serviceType] }), _jsx(MetaPill, { children: serviceGroup.count })] }), _jsx("div", { className: "mt-2 space-y-1 pl-3 text-muted", children: serviceGroup.instances.map((instance) => (_jsx("div", { className: "min-w-0 break-words", children: orderItemLabel(instance) }, `${serviceGroup.serviceType}-${instance.index}`))) })] }, `${serviceGroup.serviceType}-${serviceGroup.index}`)))) })] }));
+    return (_jsxs(PagePanel, { variant: "section", className: "p-5", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: t("runtimeview.Services") }), _jsxs(MetaPill, { children: [entries.length, " ", t("runtimeview.types")] })] }), _jsx("div", { className: "max-h-[18rem] divide-y divide-border/40 overflow-auto text-xs font-mono leading-6 tabular-nums", children: entries.length === 0 ? (_jsx("div", { className: "text-muted", children: t("runtimeview.none") })) : (entries.map((serviceGroup) => (_jsxs("div", { className: "py-2 first:pt-0 last:pb-0", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0 break-words text-txt", children: ["[", serviceGroup.index, "] ", serviceGroup.serviceType] }), _jsx(MetaPill, { children: serviceGroup.count })] }), _jsx("div", { className: "mt-1 space-y-1 pl-3 text-muted", children: serviceGroup.instances.map((instance) => (_jsx("div", { className: "min-w-0 break-words", children: orderItemLabel(instance) }, `${serviceGroup.serviceType}-${instance.index}`))) })] }, `${serviceGroup.serviceType}-${serviceGroup.index}`)))) })] }));
 }
 function RuntimeSummaryCard(props) {
     const { snapshot, t } = props;
     const summaryRows = [
-        {
-            label: t("runtimeview.runtime"),
-            value: snapshot.runtimeAvailable
-                ? t("runtimeview.available")
-                : t("common.offline"),
-        },
         { label: t("runtimeview.agent"), value: snapshot.meta.agentName },
         { label: t("runtimeview.state"), value: snapshot.meta.agentState },
         { label: t("runtimeview.model"), value: snapshot.meta.model ?? "n/a" },
@@ -166,29 +164,56 @@ function RuntimeSummaryCard(props) {
             value: String(snapshot.meta.serviceCount),
         },
     ];
-    return (_jsxs(PagePanel, { variant: "section", className: "p-5", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: t("runtimeview.Summary") }), _jsx("div", { className: snapshot.runtimeAvailable
-                            ? "rounded-full border border-ok/30 bg-ok/10 px-2.5 py-1 text-xs-tight font-medium text-ok"
-                            : "rounded-full border border-warning/30 bg-warning/10 px-2.5 py-1 text-xs-tight font-medium text-warning", children: snapshot.runtimeAvailable
-                            ? t("runtimeview.available")
-                            : t("common.offline") })] }), _jsx("div", { className: "grid gap-2 text-xs tabular-nums", children: summaryRows.map((row) => (_jsxs(PagePanel, { variant: "inset", className: "flex items-start justify-between gap-3 px-3 py-2", children: [_jsx("span", { className: "text-muted", children: row.label }), _jsx("span", { className: "min-w-0 break-all text-right font-semibold text-txt", children: row.value })] }, row.label))) })] }));
+    return (_jsxs(PagePanel, { variant: "section", className: "p-5", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsx("div", { className: "text-sm font-semibold text-txt", children: t("runtimeview.Summary") }), _jsxs("span", { className: snapshot.runtimeAvailable
+                            ? "inline-flex items-center gap-1.5 text-xs-tight font-medium text-ok"
+                            : "inline-flex items-center gap-1.5 text-xs-tight font-medium text-accent", children: [_jsx("span", { className: snapshot.runtimeAvailable
+                                    ? "h-1.5 w-1.5 rounded-full bg-ok"
+                                    : "h-1.5 w-1.5 rounded-full bg-accent" }), snapshot.runtimeAvailable
+                                ? t("runtimeview.available")
+                                : t("common.offline")] })] }), _jsx("div", { className: "divide-y divide-border/40 text-xs tabular-nums", children: summaryRows.map((row) => (_jsxs("div", { className: "flex items-start justify-between gap-3 py-2 first:pt-0 last:pb-0", children: [_jsx("span", { className: "text-muted", children: row.label }), _jsx("span", { className: "min-w-0 break-all text-right font-semibold text-txt", children: row.value })] }, row.label))) })] }));
+}
+function RuntimeSectionItem(props) {
+    const { section, active, label, meta, count, onSelect } = props;
+    const control = useAgentElement({
+        id: `runtime-section-${section.key}`,
+        role: "tab",
+        label,
+        group: "runtime-sections",
+        status: active ? "active" : "inactive",
+        description: meta,
+        onActivate: () => onSelect(section.key),
+    });
+    return (_jsxs(SidebarContent.Item, { ref: control.ref, role: "tab", "aria-selected": active, active: active, onClick: () => onSelect(section.key), "aria-current": active ? "page" : undefined, ...control.agentProps, children: [_jsx(SidebarContent.ItemIcon, { active: active, children: section.key === "summary" ? "Σ" : label.charAt(0).toUpperCase() }), _jsxs("span", { className: "min-w-0 flex-1 text-left", children: [_jsx(SidebarContent.ItemTitle, { children: label }), _jsx(SidebarContent.ItemDescription, { children: meta })] }), count ? _jsx(MetaPill, { compact: true, children: count }) : null] }));
 }
 export function RuntimeView({ contentHeader, } = {}) {
-    const { t } = useApp();
-    const [snapshot, setSnapshot] = useState(null);
-    const [loading, setLoading] = useState(false);
+    const t = useAppSelector((s) => s.t);
+    const [depth, setDepth] = useState(10);
+    const [maxArrayLength, setMaxArrayLength] = useState(1000);
+    const [maxObjectEntries, setMaxObjectEntries] = useState(1000);
+    // Seed from the shared cache so a revisit paints the last-known snapshot
+    // instantly and revalidates silently, instead of flashing a spinner. The key
+    // carries every fetch parameter so distinct depth/cap combos don't collide.
+    const snapshotCacheKey = `runtime-snapshot:${depth}:${maxArrayLength}:${maxObjectEntries}`;
+    const cachedSnapshot = getCached(snapshotCacheKey);
+    const [snapshot, setSnapshot] = useState(cachedSnapshot?.data ?? null);
+    const [loading, setLoading] = useState(!cachedSnapshot);
     const [error, setError] = useState(null);
     const [activeSection, setActiveSection] = useState("summary");
     const [sidebarSearch, setSidebarSearch] = useState("");
     const [expandedPaths, setExpandedPaths] = useState(new Set());
-    const [depth, setDepth] = useState(10);
-    const [maxArrayLength, setMaxArrayLength] = useState(1000);
-    const [maxObjectEntries, setMaxObjectEntries] = useState(1000);
+    const snapshotRequestIdRef = useRef(0);
+    const depthInputId = useId();
+    const arrayCapInputId = useId();
+    const objectCapInputId = useId();
     const sectionData = activeSection === "summary"
         ? (snapshot?.sections.runtime ?? null)
         : (snapshot?.sections[activeSection] ?? null);
     const rootPath = activeSection === "summary" ? "$runtime" : `$${activeSection}`;
-    const loadSnapshot = useCallback(async () => {
-        setLoading(true);
+    const loadSnapshot = useCallback(async (options) => {
+        const requestId = snapshotRequestIdRef.current + 1;
+        snapshotRequestIdRef.current = requestId;
+        if (!options?.silent)
+            setLoading(true);
         setError(null);
         try {
             const next = await client.getRuntimeSnapshot({
@@ -196,18 +221,36 @@ export function RuntimeView({ contentHeader, } = {}) {
                 maxArrayLength,
                 maxObjectEntries,
             });
+            if (snapshotRequestIdRef.current !== requestId)
+                return;
             setSnapshot(next);
+            setCached(snapshotCacheKey, next);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : "Failed to load runtime snapshot");
+            if (snapshotRequestIdRef.current !== requestId)
+                return;
+            setError(err instanceof Error
+                ? err.message
+                : "Failed to load runtime snapshot");
         }
         finally {
-            setLoading(false);
+            if (snapshotRequestIdRef.current === requestId) {
+                setLoading(false);
+            }
         }
-    }, [depth, maxArrayLength, maxObjectEntries]);
+    }, [depth, maxArrayLength, maxObjectEntries, snapshotCacheKey]);
     useEffect(() => {
-        void loadSnapshot();
-    }, [loadSnapshot]);
+        // Revalidate silently when this snapshot is already cached on screen.
+        void loadSnapshot({
+            silent: getCached(snapshotCacheKey) != null,
+        });
+    }, [loadSnapshot, snapshotCacheKey]);
+    // Keep the snapshot live without a manual refresh button: poll silently while
+    // the view is mounted and the window is visible so a backgrounded window goes
+    // quiet, then resumes on return.
+    useIntervalWhenDocumentVisible(() => {
+        void loadSnapshot({ silent: true });
+    }, 5000);
     useEffect(() => {
         setExpandedPaths(buildInitialExpanded(rootPath, sectionData));
     }, [rootPath, sectionData]);
@@ -257,27 +300,46 @@ export function RuntimeView({ contentHeader, } = {}) {
     const filteredSections = sidebarSearch
         ? SECTION_TAB_KEYS.filter((s) => t(s.i18nKey).toLowerCase().includes(sidebarSearch.toLowerCase()))
         : SECTION_TAB_KEYS;
-    const runtimeSidebar = (_jsxs(AppPageSidebar, { testId: "runtime-sidebar", collapsible: true, contentIdentity: "runtime", children: [_jsx(SidebarHeader, { search: {
-                    value: sidebarSearch,
-                    onChange: (e) => setSidebarSearch(e.target.value),
-                    placeholder: t("runtimeview.filterSections", {
-                        defaultValue: "Filter sections",
-                    }),
-                    "aria-label": t("runtimeview.filterSections", {
-                        defaultValue: "Filter sections",
-                    }),
-                    onClear: () => setSidebarSearch(""),
-                } }), _jsxs(SidebarPanel, { children: [_jsxs(PagePanel.SummaryCard, { compact: true, className: "mt-2 space-y-2", children: [_jsxs("label", { className: "flex flex-col gap-1 text-xs-tight text-muted", children: [_jsx("span", { children: t("runtimeview.depth") }), _jsx(Input, { type: "number", min: 1, max: 24, value: depth, onChange: (event) => setDepth(Math.max(1, Math.min(24, Number(event.target.value) || 1))), className: "relative overflow-hidden border border-border/28 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_86%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_18px_28px_-24px_rgba(15,23,42,0.12)] backdrop-blur-md transition-[border-color,background-color,box-shadow] duration-200 before:pointer-events-none before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.24),transparent)] hover:border-border/40 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_96%,transparent))] focus-within:border-accent/24 focus-within:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_92%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] focus-within:shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_20px_30px_-24px_rgba(15,23,42,0.14)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_20px_30px_-26px_rgba(0,0,0,0.24)] h-9 rounded-xl px-3 text-sm text-txt" })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs-tight text-muted", children: [_jsx("span", { children: t("runtimeview.arrayCap") }), _jsx(Input, { type: "number", min: 1, max: 5000, value: maxArrayLength, onChange: (event) => setMaxArrayLength(Math.max(1, Math.min(5000, Number(event.target.value) || 1))), className: "relative overflow-hidden border border-border/28 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_86%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_18px_28px_-24px_rgba(15,23,42,0.12)] backdrop-blur-md transition-[border-color,background-color,box-shadow] duration-200 before:pointer-events-none before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.24),transparent)] hover:border-border/40 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_96%,transparent))] focus-within:border-accent/24 focus-within:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_92%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] focus-within:shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_20px_30px_-24px_rgba(15,23,42,0.14)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_20px_30px_-26px_rgba(0,0,0,0.24)] h-9 rounded-xl px-3 text-sm text-txt" })] }), _jsxs("label", { className: "flex flex-col gap-1 text-xs-tight text-muted", children: [_jsx("span", { children: t("runtimeview.objectCap") }), _jsx(Input, { type: "number", min: 1, max: 5000, value: maxObjectEntries, onChange: (event) => setMaxObjectEntries(Math.max(1, Math.min(5000, Number(event.target.value) || 1))), className: "relative overflow-hidden border border-border/28 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_86%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_18px_28px_-24px_rgba(15,23,42,0.12)] backdrop-blur-md transition-[border-color,background-color,box-shadow] duration-200 before:pointer-events-none before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.24),transparent)] hover:border-border/40 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_96%,transparent))] focus-within:border-accent/24 focus-within:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_92%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] focus-within:shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_20px_30px_-24px_rgba(15,23,42,0.14)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_20px_30px_-26px_rgba(0,0,0,0.24)] h-9 rounded-xl px-3 text-sm text-txt" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-1.5 pt-0.5", children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: () => void loadSnapshot(), disabled: loading, className: loading
-                                            ? "h-8 rounded-full px-3.5 text-2xs font-semibold tracking-[0.12em] border border-accent/26 bg-[linear-gradient(180deg,rgba(var(--accent-rgb),0.16),rgba(var(--accent-rgb),0.07))] text-txt-strong shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_14px_22px_-18px_rgba(var(--accent-rgb),0.24)] ring-1 ring-inset ring-accent/10 hover:border-accent/42 hover:bg-[linear-gradient(180deg,rgba(var(--accent-rgb),0.2),rgba(var(--accent-rgb),0.1))] hover:text-txt-strong"
-                                            : "h-8 rounded-full px-3.5 text-2xs font-semibold tracking-[0.12em] border border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] text-muted-strong shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_14px_20px_-18px_rgba(15,23,42,0.14)] backdrop-blur-md transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-border/46 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] hover:text-txt hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_16px_22px_-18px_rgba(15,23,42,0.16)] active:scale-95 disabled:hover:border-border/32 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] disabled:hover:text-muted-strong dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_16px_24px_-20px_rgba(0,0,0,0.24)]", children: loading ? t("common.refreshing") : t("common.refresh") }), _jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: () => setExpandedPaths(buildInitialExpanded(rootPath, sectionData)), className: "h-8 rounded-full px-3.5 text-2xs font-semibold tracking-[0.12em] border border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] text-muted-strong shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_14px_20px_-18px_rgba(15,23,42,0.14)] backdrop-blur-md transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-border/46 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] hover:text-txt hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_16px_22px_-18px_rgba(15,23,42,0.16)] active:scale-95 disabled:hover:border-border/32 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] disabled:hover:text-muted-strong dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_16px_24px_-20px_rgba(0,0,0,0.24)]", disabled: activeSection === "summary", children: t("runtimeview.ExpandTop") })] })] }), _jsx(SidebarContent.SectionLabel, { className: "mt-3", children: t("runtimeview.sections") }), _jsx(SidebarScrollRegion, { className: "mt-2", children: _jsx("div", { className: "space-y-1.5", children: filteredSections.map((section) => {
-                                const active = section.key === activeSection;
-                                return (_jsxs(SidebarContent.Item, { active: active, onClick: () => setActiveSection(section.key), "aria-current": active ? "page" : undefined, children: [_jsx(SidebarContent.ItemIcon, { active: active, children: section.key === "summary"
-                                                ? "Σ"
-                                                : t(section.i18nKey).charAt(0).toUpperCase() }), _jsxs("span", { className: "min-w-0 flex-1 text-left", children: [_jsx(SidebarContent.ItemTitle, { children: t(section.i18nKey) }), _jsx(SidebarContent.ItemDescription, { children: sectionMeta[section.key] })] }), getSectionCount(section.key) ? (_jsx(MetaPill, { compact: true, children: getSectionCount(section.key) })) : null] }, section.key));
-                            }) }) })] })] }));
-    return (_jsx(PageLayout, { sidebar: runtimeSidebar, contentHeader: contentHeader, "data-testid": "runtime-view", children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4", children: [error ? (_jsx("div", { className: "rounded-2xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger", children: error })) : null, !snapshot ? (_jsx(PagePanel.Empty, { variant: "panel", className: "min-h-[24rem]", description: t("runtimeview.loadingDescription"), title: loading
-                        ? t("runtimeview.loadingSnapshot")
-                        : t("runtimeview.noSnapshotAvailable") })) : !snapshot.runtimeAvailable ? (_jsx(PagePanel.Empty, { variant: "panel", className: "min-h-[24rem] border-warning/25 bg-warning/10 text-warning", description: t("runtimeview.runtimePendingDescription"), title: t("runtimeview.AgentRuntimeIsNot") })) : activeSection === "summary" ? (_jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: [_jsx(OrderCard, { title: t("common.plugins"), entries: snapshot.order.plugins }), _jsx(OrderCard, { title: t("common.actions"), entries: snapshot.order.actions }), _jsx(OrderCard, { title: t("common.providers"), entries: snapshot.order.providers }), _jsx(OrderCard, { title: t("common.evaluators"), entries: snapshot.order.evaluators }), _jsx(ServicesOrderCard, { entries: snapshot.order.services }), _jsx(RuntimeSummaryCard, { snapshot: snapshot, t: t })] })) : (_jsxs(_Fragment, { children: [_jsxs(PagePanel, { variant: "padded", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-[0.16em] text-muted/70", children: t("runtimeview.sectionLabel") }), _jsx("div", { className: "mt-2 text-[2rem] font-semibold leading-tight text-txt", children: t(SECTION_TAB_KEYS.find((section) => section.key === activeSection)?.i18nKey ?? "runtimeview.runtime") }), _jsx("p", { className: "mt-3 max-w-3xl text-sm leading-6 text-muted", children: t(SECTION_DESCRIPTION_KEYS[activeSection]) })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: () => setExpandedPaths(new Set([rootPath])), className: "h-8 rounded-full px-3.5 text-2xs font-semibold tracking-[0.12em] border border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] text-muted-strong shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_14px_20px_-18px_rgba(15,23,42,0.14)] backdrop-blur-md transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-border/46 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] hover:text-txt hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_16px_22px_-18px_rgba(15,23,42,0.16)] active:scale-95 disabled:hover:border-border/32 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] disabled:hover:text-muted-strong dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_16px_24px_-20px_rgba(0,0,0,0.24)]", children: t("common.collapse") }), _jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: () => setExpandedPaths(buildInitialExpanded(rootPath, sectionData)), className: "h-8 rounded-full px-3.5 text-2xs font-semibold tracking-[0.12em] border border-border/32 bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] text-muted-strong shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_14px_20px_-18px_rgba(15,23,42,0.14)] backdrop-blur-md transition-[border-color,background-color,color,transform,box-shadow] duration-200 hover:border-border/46 hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_90%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] hover:text-txt hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.16),0_16px_22px_-18px_rgba(15,23,42,0.16)] active:scale-95 disabled:hover:border-border/32 disabled:hover:bg-[linear-gradient(180deg,color-mix(in_srgb,var(--card)_84%,transparent),color-mix(in_srgb,var(--bg)_95%,transparent))] disabled:hover:text-muted-strong dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_16px_24px_-20px_rgba(0,0,0,0.24)]", children: t("runtimeview.ExpandTop") })] })] }), _jsxs("div", { className: "mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4", children: [_jsxs(PagePanel, { variant: "inset", className: "px-4 py-4", children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.14em] text-muted/70", children: t("runtimeview.path") }), _jsx("div", { className: "mt-2 font-mono text-sm text-txt", children: rootPath })] }), _jsxs(PagePanel, { variant: "inset", className: "px-4 py-4", children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.14em] text-muted/70", children: t("runtimeview.lastUpdated") }), _jsx("div", { className: "mt-2 text-sm font-semibold text-txt", children: formatDateTime(snapshot.generatedAt, {
-                                                        fallback: "n/a",
-                                                    }) })] }), _jsxs(PagePanel, { variant: "inset", className: "px-4 py-4", children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.14em] text-muted/70", children: t("runtimeview.depth") }), _jsx("div", { className: "mt-2 text-sm font-semibold text-txt", children: depth })] }), _jsxs(PagePanel, { variant: "inset", className: "px-4 py-4", children: [_jsx("div", { className: "text-xs-tight uppercase tracking-[0.14em] text-muted/70", children: t("runtimeview.objectCap") }), _jsx("div", { className: "mt-2 text-sm font-semibold text-txt", children: maxObjectEntries })] })] })] }), _jsx(PagePanel, { variant: "surface", className: "min-h-[24rem] flex-1 overflow-auto p-4", children: sectionData == null ? (_jsx(PagePanel.Empty, { variant: "inset", description: t("runtimeview.noSectionData"), title: t("runtimeview.sectionUnavailable") })) : (_jsx(TreeNode, { label: activeSection, value: sectionData, path: rootPath, depth: 0, expanded: expandedPaths, onToggle: handleTogglePath })) })] }))] }) }));
+    // The floating chat composer becomes this view's section filter: while Runtime
+    // is open it takes over the composer placeholder and feeds the live draft into
+    // sidebarSearch via onQuery. setSidebarSearch is a stable useState setter.
+    const filterPlaceholder = t("runtimeview.filterSections", {
+        defaultValue: "Filter sections",
+    });
+    const chatBinding = useMemo(() => ({ placeholder: filterPlaceholder, onQuery: setSidebarSearch }), [filterPlaceholder]);
+    useRegisterViewChatBinding(chatBinding);
+    const expandTop = useCallback(() => {
+        setExpandedPaths(buildInitialExpanded(rootPath, sectionData));
+    }, [rootPath, sectionData]);
+    const collapseTree = useCallback(() => {
+        setExpandedPaths(new Set([rootPath]));
+    }, [rootPath]);
+    const sidebarExpandControl = useAgentElement({
+        id: "runtime-expand-top",
+        role: "button",
+        label: t("runtimeview.ExpandTop"),
+        group: "runtime-tree",
+        description: "Expand the top layer of the active runtime section tree",
+        onActivate: expandTop,
+    });
+    const treeCollapseControl = useAgentElement({
+        id: "runtime-tree-collapse",
+        role: "button",
+        label: t("common.collapse"),
+        group: "runtime-tree",
+        description: "Collapse the active runtime section tree to its root",
+        onActivate: collapseTree,
+    });
+    const treeExpandControl = useAgentElement({
+        id: "runtime-tree-expand-top",
+        role: "button",
+        label: t("runtimeview.ExpandTop"),
+        group: "runtime-tree",
+        description: "Expand the top layer of the active runtime section tree",
+        onActivate: expandTop,
+    });
+    const runtimeSidebar = (_jsx(AppPageSidebar, { testId: "runtime-sidebar", collapsible: true, contentIdentity: "runtime", children: _jsxs(SidebarPanel, { children: [_jsxs("div", { className: "mt-2 space-y-2", children: [_jsx(Button, { ref: sidebarExpandControl.ref, variant: "outline", size: "sm", type: "button", onClick: expandTop, disabled: activeSection === "summary", className: "h-8 w-full rounded-full text-xs-tight font-semibold", ...sidebarExpandControl.agentProps, children: t("runtimeview.ExpandTop") }), _jsxs("details", { className: "text-xs-tight text-muted", children: [_jsx("summary", { className: "cursor-pointer select-none rounded-sm px-1 py-1 text-muted-strong hover:text-txt", children: t("nav.advanced") }), _jsxs("div", { className: "mt-2 space-y-2 px-1", children: [_jsxs("label", { htmlFor: depthInputId, className: "flex flex-col gap-1 text-xs-tight text-muted", children: [_jsx("span", { children: t("runtimeview.depth") }), _jsx(Input, { id: depthInputId, type: "number", density: "compact", min: 1, max: 24, value: depth, onChange: (event) => setDepth(Math.max(1, Math.min(24, Number(event.target.value) || 1))) })] }), _jsxs("label", { htmlFor: arrayCapInputId, className: "flex flex-col gap-1 text-xs-tight text-muted", children: [_jsx("span", { children: t("runtimeview.arrayCap") }), _jsx(Input, { id: arrayCapInputId, type: "number", density: "compact", min: 1, max: 5000, value: maxArrayLength, onChange: (event) => setMaxArrayLength(Math.max(1, Math.min(5000, Number(event.target.value) || 1))) })] }), _jsxs("label", { htmlFor: objectCapInputId, className: "flex flex-col gap-1 text-xs-tight text-muted", children: [_jsx("span", { children: t("runtimeview.objectCap") }), _jsx(Input, { id: objectCapInputId, type: "number", density: "compact", min: 1, max: 5000, value: maxObjectEntries, onChange: (event) => setMaxObjectEntries(Math.max(1, Math.min(5000, Number(event.target.value) || 1))) })] })] })] })] }), _jsx(SidebarScrollRegion, { className: "mt-3", children: _jsx("div", { className: "space-y-1.5", children: filteredSections.map((section) => (_jsx(RuntimeSectionItem, { section: section, active: section.key === activeSection, label: t(section.i18nKey), meta: sectionMeta[section.key], count: getSectionCount(section.key), onSelect: setActiveSection }, section.key))) }) })] }) }));
+    return (_jsx(ShellViewAgentSurface, { viewId: "runtime", children: _jsx(PageLayout, { sidebar: runtimeSidebar, contentHeader: contentHeader, "data-testid": "runtime-view", children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4", children: [error ? (_jsx(PagePanel.Notice, { tone: "danger", children: error })) : null, loading && !snapshot ? (_jsx(DetailSkeleton, { className: "min-h-[24rem]" })) : !snapshot ? (_jsx(PagePanel.Empty, { variant: "panel", className: "min-h-[24rem]", description: t("runtimeview.loadingDescription"), title: t("runtimeview.noSnapshotAvailable") })) : !snapshot.runtimeAvailable ? (_jsx(PagePanel.Empty, { variant: "panel", className: "min-h-[24rem] border-warning/25 bg-warning/10 text-warning", description: t("runtimeview.runtimePendingDescription"), title: t("runtimeview.AgentRuntimeIsNot") })) : activeSection === "summary" ? (_jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: [_jsx(OrderCard, { title: t("common.plugins"), entries: snapshot.order.plugins }), _jsx(OrderCard, { title: t("common.actions"), entries: snapshot.order.actions }), _jsx(OrderCard, { title: t("common.providers"), entries: snapshot.order.providers }), _jsx(OrderCard, { title: t("common.evaluators"), entries: snapshot.order.evaluators }), _jsx(ServicesOrderCard, { entries: snapshot.order.services }), _jsx(RuntimeSummaryCard, { snapshot: snapshot, t: t })] })) : (_jsxs(_Fragment, { children: [_jsxs(PagePanel, { variant: "padded", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsx("div", { className: "text-[2rem] font-semibold leading-tight text-txt", children: t(SECTION_TAB_KEYS.find((section) => section.key === activeSection)?.i18nKey ?? "runtimeview.runtime") }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { ref: treeCollapseControl.ref, variant: "outline", size: "sm", type: "button", onClick: collapseTree, className: "h-8 rounded-full text-xs-tight font-semibold", ...treeCollapseControl.agentProps, children: t("common.collapse") }), _jsx(Button, { ref: treeExpandControl.ref, variant: "outline", size: "sm", type: "button", onClick: expandTop, className: "h-8 rounded-full text-xs-tight font-semibold", ...treeExpandControl.agentProps, children: t("runtimeview.ExpandTop") })] })] }), _jsxs("div", { className: "mt-5 grid gap-x-8 gap-y-3 text-sm sm:grid-cols-2 xl:grid-cols-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs-tight text-muted", children: t("runtimeview.path") }), _jsx("div", { className: "mt-1 font-mono text-sm text-txt", children: rootPath })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight text-muted", children: t("runtimeview.lastUpdated") }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: formatDateTime(snapshot.generatedAt, {
+                                                            fallback: "n/a",
+                                                        }) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight text-muted", children: t("runtimeview.depth") }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: depth })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs-tight text-muted", children: t("runtimeview.objectCap") }), _jsx("div", { className: "mt-1 text-sm font-semibold text-txt", children: maxObjectEntries })] })] })] }), _jsx(PagePanel, { variant: "surface", className: "min-h-[24rem] flex-1 overflow-auto p-4", children: sectionData == null ? (_jsx(PagePanel.Empty, { variant: "inset", description: t("runtimeview.noSectionData"), title: t("runtimeview.sectionUnavailable") })) : (_jsx(TreeNode, { label: activeSection, value: sectionData, path: rootPath, depth: 0, expanded: expandedPaths, onToggle: handleTogglePath })) })] }))] }) }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SecretsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SecretsView.tsx"],"names":[],"mappings":"AA8FA,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CA0QL"}
+{"version":3,"file":"SecretsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SecretsView.tsx"],"names":[],"mappings":"AA2FA,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,OAAO,GACR,GAAE;IACD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACd,2CAyRL"}

package/components/pages/SecretsView.js

@@ -1,9 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, ContentLayout, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Input, } from "@elizaos/ui";
 import { ChevronDown } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { client } from "../../api/index.js";
-import { useApp } from "../../state/index.js";
+import { getCached, setCached } from "../../hooks/resource-cache.js";
+import { ContentLayout } from "../../layouts/content-layout/content-layout.js";
+import { useAppSelector } from "../../state/index.js";
+import { Button } from "../ui/button.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "../ui/dialog.js";
+import { Input } from "../ui/input.js";
+import { ListSkeleton } from "../ui/skeleton-layouts.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 /* ── Constants ──────────────────────────────────────────────────────── */
 const STORAGE_KEY = "eliza:secrets-vault-keys";
 const CATEGORY_ORDER = [
@@ -45,8 +51,8 @@ function loadPinnedKeys() {
         if (raw)
             return new Set(JSON.parse(raw));
     }
-    catch (err) {
-        console.warn("[SecretsView] Failed to load pinned keys from localStorage:", err);
+    catch {
+        // localStorage unavailable: return empty set
     }
     return new Set();
 }
@@ -54,16 +60,19 @@ function savePinnedKeys(keys) {
     try {
         localStorage.setItem(STORAGE_KEY, JSON.stringify([...keys]));
     }
-    catch (err) {
-        console.warn("[SecretsView] Failed to save pinned keys to localStorage:", err);
+    catch {
+        // localStorage unavailable: pin state is not persisted
     }
 }
 /* ── Component ──────────────────────────────────────────────────────── */
 export function SecretsView({ contentHeader, inModal, } = {}) {
-    const app = useApp();
-    const t = app?.t ?? fallbackTranslate;
-    const [allSecrets, setAllSecrets] = useState([]);
-    const [loading, setLoading] = useState(true);
+    const appT = useAppSelector((s) => s.t);
+    const t = appT ?? fallbackTranslate;
+    // Seed from the shared cache so a revisit paints the last-known secrets
+    // instantly and revalidates silently, instead of flashing a spinner.
+    const cachedSecrets = getCached("secrets:list");
+    const [allSecrets, setAllSecrets] = useState(cachedSecrets?.data ?? []);
+    const [loading, setLoading] = useState(!cachedSecrets);
     const [error, setError] = useState(null);
     const [pinnedKeys, setPinnedKeys] = useState(loadPinnedKeys);
     const [draft, setDraft] = useState({});
@@ -73,12 +82,14 @@ export function SecretsView({ contentHeader, inModal, } = {}) {
     const [collapsed, setCollapsed] = useState(new Set());
     const [pickerOpen, setPickerOpen] = useState(false);
     const [pickerSearch, setPickerSearch] = useState("");
-    const load = useCallback(async () => {
-        setLoading(true);
+    const load = useCallback(async (options) => {
+        if (!options?.silent)
+            setLoading(true);
         setError(null);
         try {
             const res = await client.getSecrets();
             setAllSecrets(res.secrets);
+            setCached("secrets:list", res.secrets);
         }
         catch (err) {
             setError(err instanceof Error ? err.message : "Failed to load secrets");
@@ -88,7 +99,8 @@ export function SecretsView({ contentHeader, inModal, } = {}) {
         }
     }, []);
     useEffect(() => {
-        load();
+        // Revalidate silently when cached secrets are already on screen.
+        load({ silent: getCached("secrets:list") != null });
     }, [load]);
     // Vault secrets = pinned by user OR already set in env
     const vaultSecrets = useMemo(() => {
@@ -120,7 +132,7 @@ export function SecretsView({ contentHeader, inModal, } = {}) {
             return next;
         });
     };
-    const unpinKey = (key) => {
+    const unpinKey = useCallback((key) => {
         setPinnedKeys((prev) => {
             const next = new Set(prev);
             next.delete(key);
@@ -132,7 +144,7 @@ export function SecretsView({ contentHeader, inModal, } = {}) {
             delete next[key];
             return next;
         });
-    };
+    }, []);
     const handleSave = async () => {
         if (dirtyKeys.length === 0)
             return;
@@ -170,7 +182,7 @@ export function SecretsView({ contentHeader, inModal, } = {}) {
             return next;
         });
     };
-    const toggleVisible = (key) => {
+    const toggleVisible = useCallback((key) => {
         setVisible((prev) => {
             const next = new Set(prev);
             if (next.has(key))
@@ -179,34 +191,37 @@ export function SecretsView({ contentHeader, inModal, } = {}) {
                 next.add(key);
             return next;
         });
-    };
-    if (loading) {
-        return (_jsx(ContentLayout, { contentHeader: contentHeader, inModal: inModal, children: _jsx("div", { className: "rounded-2xl border border-border/50 bg-card/92 shadow-sm py-8 text-center text-sm italic text-muted", children: t("secretsview.LoadingSecrets") }) }));
+    }, []);
+    const handleDraftChange = useCallback((key, val) => {
+        setDraft((prev) => ({ ...prev, [key]: val }));
+    }, []);
+    if (loading && allSecrets.length === 0) {
+        return (_jsx(ShellViewAgentSurface, { viewId: "secrets", children: _jsx(ContentLayout, { contentHeader: contentHeader, inModal: inModal, children: _jsx(ListSkeleton, { rows: 6 }) }) }));
     }
     if (error) {
-        return (_jsx(ContentLayout, { contentHeader: contentHeader, inModal: inModal, children: _jsxs("div", { className: "rounded-2xl border border-border/50 bg-card/92 shadow-sm px-4 py-8 text-center", children: [_jsx("div", { className: "mb-2 text-sm text-danger", children: error }), _jsx(Button, { variant: "outline", size: "sm", className: "h-8 px-3 text-sm", onClick: load, children: t("common.retry") })] }) }));
+        return (_jsx(ShellViewAgentSurface, { viewId: "secrets", children: _jsx(ContentLayout, { contentHeader: contentHeader, inModal: inModal, children: _jsxs("div", { className: "rounded-sm border border-border/50 bg-card/92 px-4 py-8 text-center", children: [_jsx("div", { className: "mb-2 text-sm text-danger", children: error }), _jsx(Button, { variant: "outline", size: "sm", className: "h-8 px-3 text-sm", onClick: () => void load(), children: t("common.retry") })] }) }) }));
     }
-    return (_jsx(ContentLayout, { contentHeader: contentHeader, inModal: inModal, children: _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsx("div", { className: "m-0 max-w-2xl text-sm leading-6 text-muted" }), _jsx(Button, { variant: "default", size: "sm", className: "h-9 flex-shrink-0 px-3 text-sm shadow-sm", onClick: () => {
-                                setPickerOpen(true);
-                                setPickerSearch("");
-                            }, children: t("secretsview.AddSecret") })] }), pickerOpen && (_jsx(SecretPicker, { available: availableSecrets, search: pickerSearch, onSearchChange: setPickerSearch, onAdd: (key) => {
-                        pinKey(key);
-                    }, onClose: () => setPickerOpen(false) })), vaultSecrets.length === 0 && (_jsx("div", { className: "rounded-2xl border border-border/50 bg-card/92 shadow-sm border-dashed px-4 py-8 text-center text-sm italic text-muted", children: t("secretsview.YourVaultIsEmpty") })), grouped.map(({ category, label, secrets: catSecrets }) => (_jsxs("section", { className: "space-y-3", children: [_jsxs(Button, { variant: "ghost", className: "mb-3 h-auto w-full items-center gap-2 rounded-xl border border-transparent px-3 py-2 text-left hover:border-border/50 hover:bg-bg-hover", onClick: () => toggleCollapse(category), "aria-expanded": !collapsed.has(category), children: [_jsx(ChevronDown, { className: "h-3 w-3 select-none text-muted transition-transform", style: {
-                                        transform: collapsed.has(category)
-                                            ? "rotate(-90deg)"
-                                            : "rotate(0deg)",
-                                    } }), _jsx("span", { className: "text-sm font-semibold text-txt", children: label }), _jsxs("span", { className: "text-xs text-muted", children: ["(", catSecrets.length, ")"] })] }), !collapsed.has(category) && (_jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: catSecrets.map((secret) => (_jsx(SecretCard, { secret: secret, draftValue: draft[secret.key] ?? "", isVisible: visible.has(secret.key), isPinned: pinnedKeys.has(secret.key), onToggleVisible: () => toggleVisible(secret.key), onDraftChange: (val) => setDraft((prev) => ({ ...prev, [secret.key]: val })), onRemove: () => unpinKey(secret.key) }, secret.key))) }))] }, category))), vaultSecrets.length > 0 && (_jsxs("div", { className: "rounded-2xl border border-border/50 bg-card/92 shadow-sm flex flex-col gap-3 border-border/60 px-4 py-3 sm:flex-row sm:items-center", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-9 px-4 text-sm font-medium shadow-sm transition-colors", disabled: dirtyKeys.length === 0 || saving, onClick: handleSave, children: saving
-                                ? t("common.saving", {
-                                    defaultValue: "Saving...",
-                                })
-                                : dirtyKeys.length > 0
-                                    ? `${t("common.save")} (${dirtyKeys.length})`
-                                    : t("common.save") }), saveResult && (_jsx("span", { className: `text-sm ${saveResult.ok ? "text-ok" : "text-danger"}`, children: saveResult.message }))] }))] }) }));
+    return (_jsx(ShellViewAgentSurface, { viewId: "secrets", children: _jsx(ContentLayout, { contentHeader: contentHeader, inModal: inModal, children: _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsx("div", { className: "m-0 max-w-2xl text-sm leading-6 text-muted" }), _jsx(Button, { variant: "default", size: "sm", className: "h-9 flex-shrink-0 px-3 text-sm ", onClick: () => {
+                                    setPickerOpen(true);
+                                    setPickerSearch("");
+                                }, children: t("secretsview.AddSecret") })] }), pickerOpen && (_jsx(SecretPicker, { available: availableSecrets, search: pickerSearch, onSearchChange: setPickerSearch, onAdd: (key) => {
+                            pinKey(key);
+                        }, onClose: () => setPickerOpen(false) })), vaultSecrets.length === 0 && (_jsx("div", { className: "rounded-sm border border-border/50 bg-card/92 border-dashed px-4 py-8 text-center text-sm italic text-muted", children: t("secretsview.YourVaultIsEmpty") })), grouped.map(({ category, label, secrets: catSecrets }) => (_jsxs("section", { className: "space-y-3", children: [_jsxs(Button, { variant: "ghost", className: "mb-3 h-auto w-full items-center gap-2 rounded-sm border border-transparent px-3 py-2 text-left hover:border-border/50 hover:bg-bg-hover", onClick: () => toggleCollapse(category), "aria-expanded": !collapsed.has(category), children: [_jsx(ChevronDown, { className: "h-3 w-3 select-none text-muted transition-transform", style: {
+                                            transform: collapsed.has(category)
+                                                ? "rotate(-90deg)"
+                                                : "rotate(0deg)",
+                                        } }), _jsx("span", { className: "text-sm font-semibold text-txt", children: label }), _jsxs("span", { className: "text-xs text-muted", children: ["(", catSecrets.length, ")"] })] }), !collapsed.has(category) && (_jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: catSecrets.map((secret) => (_jsx(SecretCard, { secret: secret, draftValue: draft[secret.key] ?? "", isVisible: visible.has(secret.key), isPinned: pinnedKeys.has(secret.key), onToggleVisible: toggleVisible, onDraftChange: handleDraftChange, onRemove: unpinKey }, secret.key))) }))] }, category))), vaultSecrets.length > 0 && (_jsxs("div", { className: "rounded-sm border border-border/50 bg-card/92 flex flex-col gap-3 border-border/60 px-4 py-3 sm:flex-row sm:items-center", children: [_jsx(Button, { variant: "default", size: "sm", className: "h-9 px-4 text-sm font-medium transition-colors", disabled: dirtyKeys.length === 0 || saving, onClick: handleSave, children: saving
+                                    ? t("common.saving", {
+                                        defaultValue: "Saving...",
+                                    })
+                                    : dirtyKeys.length > 0
+                                        ? `${t("common.save")} (${dirtyKeys.length})`
+                                        : t("common.save") }), saveResult && (_jsx("span", { className: `text-sm ${saveResult.ok ? "text-ok" : "text-danger"}`, children: saveResult.message }))] }))] }) }) }));
 }
 /* ── Secret Picker ──────────────────────────────────────────────────── */
 function SecretPicker({ available, search, onSearchChange, onAdd, onClose, }) {
-    const app = useApp();
-    const t = app?.t ?? fallbackTranslate;
+    const appT = useAppSelector((s) => s.t);
+    const t = appT ?? fallbackTranslate;
     // Group available by category
     const grouped = useMemo(() => {
         return groupSecretsByCategory(available);
@@ -214,22 +229,22 @@ function SecretPicker({ available, search, onSearchChange, onAdd, onClose, }) {
     return (_jsx(Dialog, { open: true, onOpenChange: (open) => {
             if (!open)
                 onClose();
-        }, children: _jsxs(DialogContent, { showCloseButton: false, className: "w-[min(calc(100%_-_2rem),35rem)] max-h-[min(80vh,36rem)] overflow-hidden rounded-2xl border border-border/60 bg-card/96 p-0 shadow-2xl", children: [_jsxs(DialogHeader, { className: "flex flex-row items-center justify-between px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(DialogTitle, { className: "text-sm font-semibold text-txt", children: t("secretsview.AddSecretsToVault") }), _jsx(DialogDescription, { className: "sr-only", children: t("secretsview.SearchByKeyDescr") })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 rounded-lg text-base text-muted hover:text-txt", onClick: onClose, "aria-label": t("common.close"), children: "x" })] }), _jsx(Input, { type: "text", className: "h-12 w-full rounded-none border-0 bg-transparent px-4 py-2.5 text-sm text-txt shadow-none focus-visible:ring-0 font-body", placeholder: t("secretsview.SearchByKeyDescr"), "aria-label": t("secretsview.SearchByKeyDescr"), value: search, onChange: (e) => onSearchChange(e.target.value), autoFocus: true }), _jsx("div", { className: "flex-1 overflow-y-auto p-3", children: available.length === 0 ? (_jsx("div", { className: "rounded-xl border border-dashed border-border/60 py-6 text-center text-sm text-muted", children: search
+        }, children: _jsxs(DialogContent, { showCloseButton: false, className: "w-[min(calc(100%_-_2rem),35rem)] max-h-[min(80vh,36rem)] overflow-hidden rounded-sm border border-border/60 bg-card/96 p-0 ", children: [_jsxs(DialogHeader, { className: "flex flex-row items-center justify-between px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(DialogTitle, { className: "text-sm font-semibold text-txt", children: t("secretsview.AddSecretsToVault") }), _jsx(DialogDescription, { className: "sr-only", children: t("secretsview.SearchByKeyDescr") })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 rounded-sm text-base text-muted hover:text-txt", onClick: onClose, "aria-label": t("common.close"), children: "x" })] }), _jsx(Input, { type: "text", className: "h-12 w-full rounded-none border-0 bg-transparent px-4 py-2.5 text-sm text-txt shadow-none  font-body", placeholder: t("secretsview.SearchByKeyDescr"), "aria-label": t("secretsview.SearchByKeyDescr"), value: search, onChange: (e) => onSearchChange(e.target.value), autoFocus: true }), _jsx("div", { className: "flex-1 overflow-y-auto p-3", children: available.length === 0 ? (_jsx("div", { className: "rounded-sm border border-dashed border-border/60 py-6 text-center text-sm text-muted", children: search
                             ? "No matching secrets found."
                             : "All available secrets are already in your vault." })) : (grouped.map(({ category, label, secrets }) => (_jsxs("div", { className: "mb-4 space-y-2", children: [_jsx("div", { className: "text-xs-tight font-semibold uppercase tracking-wide text-muted", children: label }), secrets.map((s) => {
                                 const enabledPlugins = s.usedBy.filter((u) => u.enabled);
                                 const pluginList = s.usedBy
                                     .map((u) => u.pluginName || u.pluginId)
                                     .join(", ");
-                                return (_jsxs("div", { className: "flex items-start justify-between gap-3 rounded-xl border border-transparent px-3 py-2 hover:border-border/40 hover:bg-bg-hover", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "truncate text-sm font-mono text-txt", children: s.key }), _jsxs("div", { className: "text-xs-tight leading-5 text-muted", title: pluginList, children: [s.description, s.usedBy.length > 0 && (_jsxs("span", { className: "ml-1", children: ["\u2014", " ", enabledPlugins.length > 0
+                                return (_jsxs("div", { className: "flex items-start justify-between gap-3 rounded-sm border border-transparent px-3 py-2 hover:border-border/40 hover:bg-bg-hover", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "truncate text-sm font-mono text-txt", children: s.key }), _jsxs("div", { className: "text-xs-tight leading-5 text-muted", title: pluginList, children: [s.description, s.usedBy.length > 0 && (_jsxs("span", { className: "ml-1", children: ["\u2014", " ", enabledPlugins.length > 0
                                                                     ? `${enabledPlugins.length} active plugin${enabledPlugins.length !== 1 ? "s" : ""}`
-                                                                    : `${s.usedBy.length} plugin${s.usedBy.length !== 1 ? "s" : ""} (none active)`] }))] })] }), _jsx(Button, { variant: "default", size: "sm", className: "px-2.5 py-1 h-7 text-xs shadow-sm flex-shrink-0", onClick: () => onAdd(s.key), children: t("common.add") })] }, s.key));
+                                                                    : `${s.usedBy.length} plugin${s.usedBy.length !== 1 ? "s" : ""} (none active)`] }))] })] }), _jsx(Button, { variant: "default", size: "sm", className: "px-2.5 py-1 h-7 text-xs flex-shrink-0", onClick: () => onAdd(s.key), children: t("common.add") })] }, s.key));
                             })] }, category)))) })] }) }));
 }
 /* ── Secret Card ────────────────────────────────────────────────────── */
-function SecretCard({ secret, draftValue, isVisible, isPinned, onToggleVisible, onDraftChange, onRemove, }) {
-    const app = useApp();
-    const t = app?.t ?? fallbackTranslate;
+const SecretCard = memo(function SecretCard({ secret, draftValue, isVisible, isPinned, onToggleVisible, onDraftChange, onRemove, }) {
+    const appT = useAppSelector((s) => s.t);
+    const t = appT ?? fallbackTranslate;
     const enabledPlugins = secret.usedBy.filter((u) => u.enabled);
     const pluginList = secret.usedBy
         .map((u) => u.pluginName || u.pluginId)
@@ -237,9 +252,9 @@ function SecretCard({ secret, draftValue, isVisible, isPinned, onToggleVisible,
     const hasDraft = draftValue.trim() !== "";
     // Only show "Required" if an enabled plugin actually requires it
     const showRequired = secret.required && enabledPlugins.length > 0;
-    return (_jsxs("div", { className: "rounded-2xl border border-border/50 bg-card/92 shadow-sm flex flex-col gap-3 p-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-2 w-2 flex-shrink-0 rounded-full", style: {
+    return (_jsxs("div", { className: "rounded-sm border border-border/50 bg-card/92 flex flex-col gap-3 p-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-2 w-2 flex-shrink-0 rounded-full", style: {
                                         backgroundColor: secret.isSet ? "var(--ok)" : "var(--muted)",
-                                    } }), _jsx("span", { className: "truncate text-sm font-mono font-medium text-txt", children: secret.key })] }) }), _jsxs("div", { className: "flex flex-shrink-0 items-center gap-1.5", children: [showRequired && (_jsx("span", { className: "rounded border border-danger/35 bg-danger/10 px-1.5 py-0.5 text-2xs font-medium text-danger", children: t("secretsview.Required") })), isPinned && !secret.isSet && (_jsx(Button, { variant: "ghost", size: "sm", className: "h-7 rounded-md px-2 text-xs-tight text-muted hover:bg-danger/10 hover:text-danger", onClick: onRemove, title: t("secretsview.RemoveFromVault"), children: "x" }))] })] }), _jsx("div", { className: "break-words text-xs-tight leading-5 text-muted", title: pluginList, children: enabledPlugins.length > 0
+                                    } }), _jsx("span", { className: "truncate text-sm font-mono font-medium text-txt", children: secret.key })] }) }), _jsxs("div", { className: "flex flex-shrink-0 items-center gap-1.5", children: [showRequired && (_jsx("span", { className: "rounded-sm border border-danger/35 bg-danger/10 px-1.5 py-0.5 text-2xs font-medium text-danger", children: t("secretsview.Required") })), isPinned && !secret.isSet && (_jsx(Button, { variant: "ghost", size: "sm", className: "h-7 rounded-sm px-2 text-xs-tight text-muted hover:bg-danger/10 hover:text-danger", onClick: () => onRemove(secret.key), title: t("secretsview.RemoveFromVault"), children: "x" }))] })] }), _jsx("div", { className: "break-words text-xs-tight leading-5 text-muted", title: pluginList, children: enabledPlugins.length > 0
                     ? `Used by ${enabledPlugins.length} active plugin${enabledPlugins.length !== 1 ? "s" : ""}: ${enabledPlugins.map((u) => u.pluginName || u.pluginId).join(", ")}`
-                    : `Available for: ${pluginList}` }), secret.isSet && !hasDraft && (_jsx("div", { className: "rounded-lg border border-border/50 bg-bg px-2 py-1 text-xs font-mono text-muted", children: secret.maskedValue })), _jsxs("div", { className: "flex flex-col items-stretch gap-2 sm:flex-row sm:items-center", children: [_jsx(Input, { type: isVisible ? "text" : "password", className: "h-9 flex-1 border-border/60 bg-bg px-2.5 py-1.5 text-sm font-mono text-txt focus-visible:border-accent/50 focus-visible:ring-1 focus-visible:ring-accent/30", placeholder: secret.isSet ? "Enter new value to update" : "Enter value", value: draftValue, onChange: (e) => onDraftChange(e.target.value) }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 px-3 text-xs text-muted-strong shadow-sm hover:text-txt", onClick: onToggleVisible, title: isVisible ? "Hide" : "Show", children: isVisible ? "Hide" : "Show" })] })] }));
-}
+                    : `Available for: ${pluginList}` }), secret.isSet && !hasDraft && (_jsx("div", { className: "rounded-sm border border-border/50 bg-bg px-2 py-1 text-xs font-mono text-muted", children: secret.maskedValue })), _jsxs("div", { className: "flex flex-col items-stretch gap-2 sm:flex-row sm:items-center", children: [_jsx(Input, { type: isVisible ? "text" : "password", className: "h-9 flex-1 border-border/60 bg-bg px-2.5 py-1.5 text-sm font-mono text-txt   ", placeholder: secret.isSet ? "Enter new value to update" : "Enter value", value: draftValue, onChange: (e) => onDraftChange(secret.key, e.target.value) }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 px-3 text-xs text-muted-strong hover:text-txt", onClick: () => onToggleVisible(secret.key), title: isVisible ? "Hide" : "Show", children: isVisible ? "Hide" : "Show" })] })] }));
+});

package/components/pages/SettingsView.d.ts

@@ -1,4 +1,4 @@
-export declare function SettingsView({ inModal, onClose: _onClose, initialSection, }?: {
+export declare function SettingsView({ inModal, initialSection, }?: {
     inModal?: boolean;
     onClose?: () => void;
     initialSection?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SettingsView.tsx"],"names":[],"mappings":"AAqoBA,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,OAAO,EAAE,QAAQ,EACjB,cAAc,GACf,GAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACpB,2CAyiBL"}
+{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SettingsView.tsx"],"names":[],"mappings":"AAoXA,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,cAAc,GACf,GAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACpB,2CA2GL"}