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

package/components/pages/PluginCard.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { PluginVisual } from "./PluginVisual.js";
-export function PluginCard({ plugin: p, allowCustomOrder, pluginSettingsOpen, togglingPlugins, hasPluginToggleInFlight, draggingId, dragOverId, pluginDescriptionFallback, onToggle, onToggleSettings, onDragStart, onDragOver, onDrop, onDragEnd, loadFailedLabel, notInstalledLabel, }) {
-    const { t } = useApp();
+export const PluginCard = memo(function PluginCard({ plugin: p, allowCustomOrder, pluginSettingsOpen, togglingPlugins, hasPluginToggleInFlight, draggingId, dragOverId, pluginDescriptionFallback, onToggle, onToggleSettings, onDragStart, onDragOver, onDrop, onDragEnd, loadFailedLabel, notInstalledLabel, }) {
+    const t = useAppSelector((s) => s.t);
     const toggleControl = useAgentElement({
         id: `plugin-card-${p.id}-toggle`,
         role: "toggle",
@@ -80,7 +81,7 @@ export function PluginCard({ plugin: p, allowCustomOrder, pluginSettingsOpen, to
                     openDetail();
                 }
             }
-            : undefined, tabIndex: hasParams ? 0 : undefined, className: `group relative flex items-center gap-3 rounded-md px-3 py-2.5 transition-colors duration-150 ${hasParams ? "cursor-pointer" : ""} ${isOpen ? "bg-accent/10" : "hover:bg-bg-hover"} ${isDragging ? "opacity-30" : ""} ${isDragOver ? "ring-2 ring-accent/60" : ""}`, "data-plugin-id": p.id, children: [_jsx(PluginVisual, { plugin: p }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-bold leading-tight text-txt", children: p.name }), _jsx("p", { className: "line-clamp-1 text-xs text-muted", children: p.description || pluginDescriptionFallback })] }), isShowcase ? (_jsx("span", { className: "shrink-0 rounded-full border border-accent bg-accent-subtle px-2.5 py-[3px] text-2xs font-bold tracking-wider text-txt", children: t("pluginsview.DEMO") })) : (_jsx(Button, { ref: toggleControl.ref, variant: "outline", size: "sm", "data-plugin-toggle": p.id, className: `h-auto shrink-0 rounded-full border px-3 py-[3px] text-2xs font-bold tracking-wider transition-colors duration-150 ${toggleHealthClass} ${toggleDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`, title: toggleTitle, onClick: (e) => {
+            : undefined, tabIndex: hasParams ? 0 : undefined, className: `group relative flex items-center gap-3 rounded-md px-3 py-2.5 transition-colors duration-150 ${hasParams ? "cursor-pointer" : ""} ${isOpen ? "bg-accent/10" : "hover:bg-bg-hover"} ${isDragging ? "opacity-30" : ""} ${isDragOver ? " " : ""}`, "data-plugin-id": p.id, children: [_jsx(PluginVisual, { plugin: p }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-bold leading-tight text-txt", children: p.name }), _jsx("p", { className: "line-clamp-1 text-xs text-muted", children: p.description || pluginDescriptionFallback })] }), isShowcase ? (_jsx("span", { className: "shrink-0 rounded-full border border-accent bg-accent-subtle px-2.5 py-[3px] text-2xs font-bold tracking-wider text-txt", children: t("pluginsview.DEMO") })) : (_jsx(Button, { ref: toggleControl.ref, variant: "outline", size: "sm", "data-plugin-toggle": p.id, className: `h-auto shrink-0 rounded-full border px-3 py-[3px] text-2xs font-bold tracking-wider transition-colors duration-150 ${toggleHealthClass} ${toggleDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`, title: toggleTitle, onClick: (e) => {
                     e.stopPropagation();
                     void onToggle(p.id, !p.enabled);
                 }, disabled: toggleDisabled, "aria-current": p.enabled ? "true" : undefined, ...toggleControl.agentProps, children: isToggleBusy
@@ -88,4 +89,4 @@ export function PluginCard({ plugin: p, allowCustomOrder, pluginSettingsOpen, to
                     : p.enabled
                         ? t("common.on")
                         : t("common.off") })), p.enabled && p.validationErrors && p.validationErrors.length > 0 && (_jsx("div", { className: "absolute inset-x-3 -bottom-1 text-2xs text-destructive", children: p.validationErrors.map((err) => (_jsxs("div", { className: "truncate", children: [err.field, ": ", err.message] }, `${err.field}:${err.message}`))) }))] }, p.id));
-}
+});

package/components/pages/PluginConfigForm.d.ts

@@ -1,4 +1,4 @@
-import type { PluginInfo } from "../../api";
+import type { PluginInfo } from "../../api/index.js";
 export declare function TelegramChatModeToggle({ allowAll, onToggle, }: {
     allowAll: boolean;
     onToggle: (next: boolean) => void;

package/components/pages/PluginConfigForm.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useMemo, useRef, useState } from "react";
 import { ConfigRenderer } from "../../components/config-ui/config-renderer.js";
 import { defaultRegistry } from "../../components/config-ui/config-renderer.helpers.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Switch } from "../ui/switch.js";
 import { paramsToSchema, TELEGRAM_ALLOW_ALL_HIDDEN } from "./plugin-list-utils.js";
 /* ── Telegram chat mode ─────────────────────────────────────────────── */
@@ -41,7 +41,7 @@ function useTelegramChatMode(plugin, pluginConfigs, onParamChange) {
     };
 }
 export function TelegramChatModeToggle({ allowAll, onToggle, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     return (_jsxs("div", { className: "flex items-center justify-between rounded-sm border border-border bg-[var(--card,rgba(255,255,255,0.03))] px-4 py-3 mb-4", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-semibold text-txt", children: allowAll
                             ? t("pluginsview.AllowAllChats", {
                                 defaultValue: "Allow all chats",

package/components/pages/PluginVisual.d.ts

@@ -1,4 +1,4 @@
-import type { PluginInfo } from "../../api";
+import type { PluginInfo } from "../../api/index.js";
 /**
  * Resolve the strongest available visual for a plugin and render it as a square
  * tile. Resolution order: brand SVG logo (connectors) → AI-provider brand PNG →

package/components/pages/PluginsView.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type PluginsViewMode } from "./plugin-list-utils";
+import { type PluginsViewMode } from "./plugin-list-utils.js";
 /** Plugins view — tag-filtered plugin list. */
 export declare function PluginsView({ contentHeader, mode, inModal, connectorDesktopPlacement, }: {
     contentHeader?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"PluginsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PluginsView.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAcf,OAAO,EAIL,KAAK,eAAe,EAOrB,MAAM,qBAAqB,CAAC;AAy3C7B,+CAA+C;AAC/C,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,IAAY,EACZ,OAAO,EACP,yBAAkC,GACnC,EAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9C,2CAqBA"}
+{"version":3,"file":"PluginsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/PluginsView.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAcf,OAAO,EAIL,KAAK,eAAe,EAOrB,MAAM,qBAAqB,CAAC;AA64C7B,+CAA+C;AAC/C,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,IAAY,EACZ,OAAO,EACP,yBAAkC,GACnC,EAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9C,2CAqBA"}

package/components/pages/PluginsView.js

@@ -6,7 +6,7 @@ import { client } from "../../api/index.js";
 import { useLinkedSidebarSelection } from "../../hooks/useLinkedSidebarSelection.js";
 import { useRenderGuard } from "../../hooks/useRenderGuard.js";
 import { PageLayoutHeader } from "../../layouts/page-layout/page-layout-header.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
 import { openExternalUrl } from "../../utils/index.js";
 import { ChatSearchHint } from "../composites/chat-search-hint.js";
@@ -20,7 +20,24 @@ import { PluginGameModal } from "./plugin-view-modal.js";
 function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
     const { plugins = [], pluginStatusFilter = "all", pluginSearch = "", pluginSettingsOpen = new Set(), pluginSaving, pluginSaveSuccess, isLoadingPlugins = false, pluginsLoadError = null, pluginsLoaded = false, loadPlugins, ensurePluginsLoaded = async () => {
         await loadPlugins();
-    }, handlePluginToggle, handlePluginConfigSave, setActionNotice, setState, t, } = useApp();
+    }, handlePluginToggle, handlePluginConfigSave, setActionNotice, setState, t, } = useAppSelectorShallow((s) => ({
+        plugins: s.plugins,
+        pluginStatusFilter: s.pluginStatusFilter,
+        pluginSearch: s.pluginSearch,
+        pluginSettingsOpen: s.pluginSettingsOpen,
+        pluginSaving: s.pluginSaving,
+        pluginSaveSuccess: s.pluginSaveSuccess,
+        isLoadingPlugins: s.isLoadingPlugins,
+        pluginsLoadError: s.pluginsLoadError,
+        pluginsLoaded: s.pluginsLoaded,
+        loadPlugins: s.loadPlugins,
+        ensurePluginsLoaded: s.ensurePluginsLoaded,
+        handlePluginToggle: s.handlePluginToggle,
+        handlePluginConfigSave: s.handlePluginConfigSave,
+        setActionNotice: s.setActionNotice,
+        setState: s.setState,
+        t: s.t,
+    }));
     // The floating chat composer is this view's search box. While Plugins is the
     // active view it takes over the composer (placeholder + live draft) and feeds
     // each keystroke into the shared `pluginSearch` filter — there's no in-page
@@ -237,7 +254,7 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
         const Icon = SUBGROUP_NAV_ICONS[tag.id] ?? Package;
         return (_jsxs(Button, { variant: isActive ? "default" : "outline", size: "sm", className: `h-8 gap-1.5 rounded-full px-3 text-xs-tight font-bold tracking-wide transition-all ${isActive
                 ? "border-accent bg-accent text-accent-fg hover:bg-accent/90"
-                : "border-border/50 bg-card/50 text-muted backdrop-blur-sm hover:border-accent/40 hover:text-txt"}`, onClick: () => setSubgroupFilter(tag.id), children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }), tag.label, _jsx("span", { className: `ml-0.5 rounded-full px-1.5 py-0.5 text-3xs font-mono leading-none ${isActive
+                : "border-border/50 bg-card/50 text-muted hover:border-accent/40 hover:text-txt"}`, onClick: () => setSubgroupFilter(tag.id), children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }), tag.label, _jsx("span", { className: `ml-0.5 rounded-full px-1.5 py-0.5 text-3xs font-mono leading-none ${isActive
                         ? "bg-accent-fg/20 text-accent-fg"
                         : "bg-bg-accent/80 text-muted-strong"}`, children: tag.count })] }, tag.id));
     }, [subgroupFilter]);
@@ -651,9 +668,9 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
      * labels between grids). Used when the "All" filter chip is active so the
      * single pane keeps section context without a nav sidebar.
      */
-    const renderGroupedPlugins = (plugins) => {
+    const groupedVisiblePlugins = useMemo(() => {
         const groupMap = new Map();
-        for (const plugin of plugins) {
+        for (const plugin of visiblePlugins) {
             const groupId = subgroupForPlugin(plugin);
             const bucket = groupMap.get(groupId);
             if (bucket)
@@ -666,13 +683,16 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
             if (!orderedGroups.includes(id))
                 orderedGroups.push(id);
         }
-        return (_jsx("div", { className: "space-y-6", children: orderedGroups.map((groupId) => {
-                const groupPlugins = groupMap.get(groupId) ?? [];
-                if (groupPlugins.length === 0)
-                    return null;
-                return (_jsxs("section", { children: [_jsx("h3", { className: "mb-3 text-sm font-medium text-txt-strong", children: SUBGROUP_LABELS[groupId] ?? groupId }), renderPluginGrid(groupPlugins)] }, groupId));
-            }) }));
-    };
+        return orderedGroups.map((groupId) => ({
+            groupId,
+            plugins: groupMap.get(groupId) ?? [],
+        }));
+    }, [visiblePlugins]);
+    const renderGroupedPlugins = () => (_jsx("div", { className: "space-y-6", children: groupedVisiblePlugins.map(({ groupId, plugins: groupPlugins }) => {
+            if (groupPlugins.length === 0)
+                return null;
+            return (_jsxs("section", { children: [_jsx("h3", { className: "mb-3 text-sm font-medium text-txt-strong", children: SUBGROUP_LABELS[groupId] ?? groupId }), renderPluginGrid(groupPlugins)] }, groupId));
+        }) }));
     // Resolve the plugin whose settings dialog is currently open.
     // Exclude ai-provider plugins — those are configured in Settings.
     const settingsDialogPlugin = Array.from(pluginSettingsOpen)
@@ -865,7 +885,7 @@ function PluginListView({ label, contentHeader, mode = "all", inModal, }) {
                                         label: resultLabel,
                                     }), title: t("pluginsview.NothingToShow", {
                                     defaultValue: "Nothing to show",
-                                }) })) : isAllFilter && !pluginSearch.trim() ? (renderGroupedPlugins(visiblePlugins)) : (renderPluginGrid(visiblePlugins))] }) }), _jsx(PluginSettingsDialog, { installPluginLabel: installPluginLabel, installProgress: installProgress, installingPlugins: installingPlugins, pluginConfigs: pluginConfigs, pluginSaveSuccess: pluginSaveSuccess, pluginSaving: pluginSaving, settingsDialogPlugin: settingsDialogPlugin, t: t, testResults: testResults, onClose: toggleSettings, onConfigReset: handleConfigReset, onConfigSave: handleConfigSave, onInstallPlugin: handleInstallPlugin, onParamChange: handleParamChange, onTestConnection: handleTestConnection, formatDialogTestConnectionLabel: formatDialogTestConnectionLabel, installProgressLabel: installProgressLabel, saveSettingsLabel: saveSettingsLabel, savingLabel: savingLabel })] }) }));
+                                }) })) : isAllFilter && !pluginSearch.trim() ? (renderGroupedPlugins()) : (renderPluginGrid(visiblePlugins))] }) }), _jsx(PluginSettingsDialog, { installPluginLabel: installPluginLabel, installProgress: installProgress, installingPlugins: installingPlugins, pluginConfigs: pluginConfigs, pluginSaveSuccess: pluginSaveSuccess, pluginSaving: pluginSaving, settingsDialogPlugin: settingsDialogPlugin, t: t, testResults: testResults, onClose: toggleSettings, onConfigReset: handleConfigReset, onConfigSave: handleConfigSave, onInstallPlugin: handleInstallPlugin, onParamChange: handleParamChange, onTestConnection: handleTestConnection, formatDialogTestConnectionLabel: formatDialogTestConnectionLabel, installProgressLabel: installProgressLabel, saveSettingsLabel: saveSettingsLabel, savingLabel: savingLabel })] }) }));
 }
 /* ── Exported views ────────────────────────────────────────────────── */
 /** Plugins view — tag-filtered plugin list. */

package/components/pages/RelationshipsGraphPanel.d.ts

@@ -1,4 +1,4 @@
-import type { RelationshipsGraphSnapshot } from "../../api/client-types-relationships";
+import type { RelationshipsGraphSnapshot } from "../../api/client-types-relationships.js";
 export declare function RelationshipsGraphPanel({ snapshot, selectedGroupId, compact, onSelectPersonId, }: {
     snapshot: RelationshipsGraphSnapshot;
     selectedGroupId: string | null;

package/components/pages/RelationshipsGraphPanel.js

@@ -436,7 +436,7 @@ function GraphTooltip({ state }) {
     };
     if (state.kind === "node") {
         const { person } = state;
-        return (_jsxs("div", { style: style, className: "rounded-sm border border-border/40 bg-card/95 px-3 py-2.5 backdrop-blur-md", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm font-semibold text-txt", children: [person.isOwner ? (_jsx(Crown, { className: "h-3.5 w-3.5 text-accent" })) : null, person.displayName] }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5 text-2xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Fingerprint, { className: "h-3 w-3" }), person.memberEntityIds.length] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Link2, { className: "h-3 w-3" }), person.relationshipCount] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MessageCircle, { className: "h-3 w-3" }), person.factCount] })] })] }));
+        return (_jsxs("div", { style: style, className: "rounded-sm border border-border/40 bg-card/95 px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm font-semibold text-txt", children: [person.isOwner ? (_jsx(Crown, { className: "h-3.5 w-3.5 text-accent" })) : null, person.displayName] }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5 text-2xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Fingerprint, { className: "h-3 w-3" }), person.memberEntityIds.length] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Link2, { className: "h-3 w-3" }), person.relationshipCount] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MessageCircle, { className: "h-3 w-3" }), person.factCount] })] })] }));
     }
     const { edge } = state;
     const SentimentIcon = edge.sentiment === "positive"
@@ -444,7 +444,7 @@ function GraphTooltip({ state }) {
         : edge.sentiment === "negative"
             ? Frown
             : Meh;
-    return (_jsxs("div", { style: style, className: "rounded-sm border border-border/40 bg-card/95 px-3 py-2.5 backdrop-blur-md", children: [_jsxs("div", { className: "text-sm font-semibold text-txt", children: [edge.sourcePersonName, " / ", edge.targetPersonName] }), _jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-2xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", style: { color: EDGE_COLORS[edgeTone(edge.sentiment)] }, children: [_jsx(SentimentIcon, { className: "h-3 w-3" }), Math.round(edge.strength * 100), "%"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MessageCircle, { className: "h-3 w-3" }), edge.interactionCount] })] })] }));
+    return (_jsxs("div", { style: style, className: "rounded-sm border border-border/40 bg-card/95 px-3 py-2.5", children: [_jsxs("div", { className: "text-sm font-semibold text-txt", children: [edge.sourcePersonName, " / ", edge.targetPersonName] }), _jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-2xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", style: { color: EDGE_COLORS[edgeTone(edge.sentiment)] }, children: [_jsx(SentimentIcon, { className: "h-3 w-3" }), Math.round(edge.strength * 100), "%"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MessageCircle, { className: "h-3 w-3" }), edge.interactionCount] })] })] }));
 }
 export function RelationshipsGraphPanel({ snapshot, selectedGroupId, compact = false, onSelectPersonId, }) {
     const { t } = useTranslation();

package/components/pages/RelationshipsIdentityCluster.d.ts

@@ -1,4 +1,4 @@
-import type { RelationshipsPersonDetail } from "../../api/client-types-relationships";
+import type { RelationshipsPersonDetail } from "../../api/client-types-relationships.js";
 export declare function RelationshipsIdentityCluster({ person, }: {
     person: RelationshipsPersonDetail;
 }): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1 +1 @@
-{"version":3,"file":"ReleaseCenterView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/ReleaseCenterView.tsx"],"names":[],"mappings":"AAqIA,wBAAgB,iBAAiB,4CAshBhC"}
+{"version":3,"file":"ReleaseCenterView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/ReleaseCenterView.tsx"],"names":[],"mappings":"AAqIA,wBAAgB,iBAAiB,4CAwhBhC"}

package/components/pages/ReleaseCenterView.js

@@ -5,7 +5,7 @@ import { useAgentElement } from "../../agent-surface/index.js";
 import { invokeDesktopBridgeRequest, isElectrobunRuntime, subscribeDesktopBridgeEvent, } from "../../bridge/index.js";
 import { useBranding } from "../../config/branding.js";
 import { getApplicationUpdateSnapshot, mapAgentUpdateStatusToSnapshot, } from "../../services/app-updates/update-policy.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { openExternalUrl } from "../../utils/index.js";
 import { openDesktopSurfaceWindow } from "../../utils/desktop-workspace.js";
 import { normalizeReleaseNotesUrl, summarizeError, } from "../release-center/shared.helpers.js";
@@ -49,7 +49,12 @@ export function ReleaseCenterView() {
     const { appUrl } = useBranding();
     const defaultReleaseNotesUrl = `${appUrl}/releases/`;
     const desktopRuntime = isElectrobunRuntime();
-    const { loadUpdateStatus, t, updateLoading, updateStatus } = useApp();
+    const { loadUpdateStatus, t, updateLoading, updateStatus } = useAppSelectorShallow((s) => ({
+        loadUpdateStatus: s.loadUpdateStatus,
+        t: s.t,
+        updateLoading: s.updateLoading,
+        updateStatus: s.updateStatus,
+    }));
     const [busyAction, setBusyAction] = useState(null);
     const [actionError, setActionError] = useState(null);
     const [actionMessage, setActionMessage] = useState(null);
@@ -177,7 +182,7 @@ export function ReleaseCenterView() {
     const channel = nativeUpdater?.channel ?? "—";
     const lastCheckAt = appStatus?.lastCheckAt;
     const lastChecked = lastCheckAt
-        ? new Date(lastCheckAt).toLocaleString()
+        ? new Date(lastCheckAt).toLocaleString("en-US")
         : t("releasecenter.NotYet", { defaultValue: "Not yet" });
     const updaterStatus = nativeUpdater?.updateReady
         ? t("releasecenterview.UpdateReady", { defaultValue: "Update ready" })
@@ -303,12 +308,9 @@ export function ReleaseCenterView() {
     const resetUrlLabel = t("releasecenter.ResetUrl", {
         defaultValue: "Reset URL",
     });
-    const releaseDetail = [
-        applicationUpdate && !desktopRuntime ? applicationUpdate.detail : null,
-        agentUpdate ? (agentUpdate.error ?? agentUpdate.detail) : null,
-    ]
-        .filter(Boolean)
-        .join(" · ") || null;
+    // Surface only a live update error here; the per-channel prose `detail`
+    // strings are explanatory copy, not functional state.
+    const releaseDetail = agentUpdate?.error ?? null;
     const refreshAgent = useAgentElement({
         id: "updates-refresh",
         role: "button",

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

@@ -1 +1 @@
-{"version":3,"file":"RuntimeView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/RuntimeView.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAwYf,wBAAgB,WAAW,CAAC,EAC1B,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;CACtB,2CA0bL"}
+{"version":3,"file":"RuntimeView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/RuntimeView.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAyYf,wBAAgB,WAAW,CAAC,EAC1B,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,SAAS,CAAC;CACtB,2CAybL"}

package/components/pages/RuntimeView.js

@@ -3,8 +3,9 @@ import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client, } from "../../api/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 { useApp } from "../../state/index.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";
@@ -119,7 +120,7 @@ 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);
@@ -127,12 +128,12 @@ function TreeNode(props) {
     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("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("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}`)))) })] }));
 }
@@ -185,7 +186,7 @@ function RuntimeSectionItem(props) {
     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 t = useAppSelector((s) => s.t);
     const [depth, setDepth] = useState(10);
     const [maxArrayLength, setMaxArrayLength] = useState(1000);
     const [maxObjectEntries, setMaxObjectEntries] = useState(1000);
@@ -243,13 +244,13 @@ export function RuntimeView({ contentHeader, } = {}) {
         void loadSnapshot({
             silent: getCached(snapshotCacheKey) != null,
         });
-        // Keep the snapshot live without a manual refresh button: poll silently
-        // while the view is mounted so registration order/state stays current.
-        const interval = window.setInterval(() => {
-            void loadSnapshot({ silent: true });
-        }, 5000);
-        return () => window.clearInterval(interval);
     }, [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]);
@@ -338,7 +339,7 @@ export function RuntimeView({ contentHeader, } = {}) {
         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("div", { className: "rounded-sm border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-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, {
+    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":"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,2CAuRL"}
+{"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,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { getCached, setCached } from "../../hooks/resource-cache.js";
 import { ContentLayout } from "../../layouts/content-layout/content-layout.js";
-import { useApp } from "../../state/index.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";
@@ -66,8 +66,8 @@ function savePinnedKeys(keys) {
 }
 /* ── Component ──────────────────────────────────────────────────────── */
 export function SecretsView({ contentHeader, inModal, } = {}) {
-    const app = useApp();
-    const t = app?.t ?? fallbackTranslate;
+    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");
@@ -132,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);
@@ -144,7 +144,7 @@ export function SecretsView({ contentHeader, inModal, } = {}) {
             delete next[key];
             return next;
         });
-    };
+    }, []);
     const handleSave = async () => {
         if (dirtyKeys.length === 0)
             return;
@@ -182,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))
@@ -191,7 +191,10 @@ export function SecretsView({ contentHeader, inModal, } = {}) {
                 next.add(key);
             return next;
         });
-    };
+    }, []);
+    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 }) }) }));
     }
@@ -207,7 +210,7 @@ export function SecretsView({ contentHeader, inModal, } = {}) {
                                             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-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
+                                        } }), _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...",
                                     })
@@ -217,8 +220,8 @@ export function SecretsView({ contentHeader, inModal, } = {}) {
 }
 /* ── 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);
@@ -226,7 +229,7 @@ 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-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 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-sm 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);
@@ -239,9 +242,9 @@ function SecretPicker({ available, search, onSearchChange, onAdd, onClose, }) {
                             })] }, 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)
@@ -251,7 +254,7 @@ function SecretCard({ secret, draftValue, isVisible, isPinned, onToggleVisible,
     const showRequired = secret.required && enabledPlugins.length > 0;
     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-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, 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-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 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 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.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/SettingsView.tsx"],"names":[],"mappings":"AAuUA,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,2CAoGL"}
+{"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"}