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

package/components/pages/skill-detail-panel.js

@@ -8,7 +8,7 @@ import { Brain } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector, useAppSelectorShallow } from "../../state/index.js";
 import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
 import { ChatSearchHint } from "../composites/chat-search-hint.js";
 import { AdminCodeEditor, AdminDialogContent, AdminDialogHeader, AdminMonoMeta, } from "../ui/admin-dialog.js";
@@ -25,7 +25,7 @@ const BINANCE_SKILL_IDS = new Set([
 ]);
 /* ── Edit Skill Modal ──────────────────────────────────────────────── */
 export function EditSkillModal({ skillId, skillName, onClose, onSaved, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [content, setContent] = useState("");
     const [originalContent, setOriginalContent] = useState("");
     const [loading, setLoading] = useState(true);
@@ -132,7 +132,29 @@ export function EditSkillModal({ skillId, skillName, onClose, onSaved, }) {
 }
 /* ── Companion Modal View (sidebar + detail, reuses plugins-game-* CSS) ── */
 export function SkillsModalView() {
-    const { skills, skillToggleAction, loadSkills, handleSkillToggle, handleDeleteSkill, refreshSkills, setState, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, enableMarketplaceSkill, disableMarketplaceSkill, copyMarketplaceSkillSource, t, } = useApp();
+    const { skills, skillToggleAction, loadSkills, handleSkillToggle, handleDeleteSkill, refreshSkills, setState, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, enableMarketplaceSkill, disableMarketplaceSkill, copyMarketplaceSkillSource, t, } = useAppSelectorShallow((s) => ({
+        skills: s.skills,
+        skillToggleAction: s.skillToggleAction,
+        loadSkills: s.loadSkills,
+        handleSkillToggle: s.handleSkillToggle,
+        handleDeleteSkill: s.handleDeleteSkill,
+        refreshSkills: s.refreshSkills,
+        setState: s.setState,
+        skillsMarketplaceQuery: s.skillsMarketplaceQuery,
+        skillsMarketplaceResults: s.skillsMarketplaceResults,
+        skillsMarketplaceError: s.skillsMarketplaceError,
+        skillsMarketplaceLoading: s.skillsMarketplaceLoading,
+        skillsMarketplaceAction: s.skillsMarketplaceAction,
+        skillsMarketplaceManualGithubUrl: s.skillsMarketplaceManualGithubUrl,
+        searchSkillsMarketplace: s.searchSkillsMarketplace,
+        installSkillFromMarketplace: s.installSkillFromMarketplace,
+        uninstallMarketplaceSkill: s.uninstallMarketplaceSkill,
+        installSkillFromGithubUrl: s.installSkillFromGithubUrl,
+        enableMarketplaceSkill: s.enableMarketplaceSkill,
+        disableMarketplaceSkill: s.disableMarketplaceSkill,
+        copyMarketplaceSkillSource: s.copyMarketplaceSkillSource,
+        t: s.t,
+    }));
     const [selectedId, setSelectedId] = useState(null);
     const [filterText, setFilterText] = useState("");
     const [filterTab, setFilterTab] = useState("all");

package/components/pages/skill-marketplace.d.ts

@@ -3,8 +3,8 @@
  *
  * Extracted from SkillsView.tsx to keep individual files under ~500 LOC.
  */
-import type { SkillInfo, SkillMarketplaceResult } from "../../api";
-import { useApp } from "../../state";
+import type { SkillInfo, SkillMarketplaceResult } from "../../api/index.js";
+import { type useApp } from "../../state/index.js";
 export declare function MarketplaceCard({ item, installedSkill, skillsMarketplaceAction, onInstall, onUninstall, onEnable, onDisable, onCopy, onDetails, }: {
     item: SkillMarketplaceResult;
     installedSkill: SkillInfo | null;

package/components/pages/skill-marketplace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skill-marketplace.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/skill-marketplace.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,SAAS,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAoNrC,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,cAAc,EACd,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE;IACD,IAAI,EAAE,sBAAsB,CAAC;IAC7B,cAAc,EAAE,SAAS,GAAG,IAAI,CAAC;IACjC,uBAAuB,EAAE,MAAM,CAAC;IAChC,SAAS,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,2CAuNA;AAMD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,uBAAuB,EACvB,gCAAgC,EAChC,uBAAuB,EACvB,2BAA2B,EAC3B,yBAAyB,EACzB,yBAAyB,EACzB,WAAW,EACX,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,OAAO,GACR,EAAE;IACD,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,sBAAsB,EAAE,CAAC;IACnD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,OAAO,CAAC;IAClC,uBAAuB,EAAE,MAAM,CAAC;IAChC,gCAAgC,EAAE,MAAM,CAAC;IACzC,uBAAuB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,2BAA2B,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,yBAAyB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,yBAAyB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAoMA"}
+{"version":3,"file":"skill-marketplace.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/skill-marketplace.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,SAAS,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAE,KAAK,MAAM,EAAkB,MAAM,aAAa,CAAC;AAoN1D,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,cAAc,EACd,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE;IACD,IAAI,EAAE,sBAAsB,CAAC;IAC7B,cAAc,EAAE,SAAS,GAAG,IAAI,CAAC;IACjC,uBAAuB,EAAE,MAAM,CAAC;IAChC,SAAS,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,2CAuNA;AAMD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,uBAAuB,EACvB,gCAAgC,EAChC,uBAAuB,EACvB,2BAA2B,EAC3B,yBAAyB,EACzB,yBAAyB,EACzB,WAAW,EACX,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,OAAO,GACR,EAAE;IACD,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,sBAAsB,EAAE,CAAC;IACnD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,OAAO,CAAC;IAClC,uBAAuB,EAAE,MAAM,CAAC;IAChC,gCAAgC,EAAE,MAAM,CAAC;IACzC,uBAAuB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,2BAA2B,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,yBAAyB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,yBAAyB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAoMA"}

package/components/pages/skill-marketplace.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { AdminDialog, AdminDialogContent, AdminDialogHeader, AdminInput, } from "../ui/admin-dialog.js";
 import { Button } from "../ui/button.js";
 import { Dialog, DialogDescription, DialogTitle } from "../ui/dialog.js";
@@ -76,7 +76,7 @@ function SkillInstallSubmitButton({ id, label, description, disabled, children,
 }
 /* ── Marketplace Result Card ────────────────────────────────────────── */
 export function MarketplaceCard({ item, installedSkill, skillsMarketplaceAction, onInstall, onUninstall, onEnable, onDisable, onCopy, onDetails, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const isInstalling = skillsMarketplaceAction === `install:${item.id}`;
     const isUninstalling = skillsMarketplaceAction === `uninstall:${item.id}`;
     const isToggling = skillsMarketplaceAction === `enable:${item.id}` ||
@@ -124,7 +124,7 @@ export function MarketplaceCard({ item, installedSkill, skillsMarketplaceAction,
                                 : t("common.uninstall", { defaultValue: "Uninstall" }) })] })) })] }));
 }
 export function InstallModal({ skills, skillsMarketplaceQuery, skillsMarketplaceResults, skillsMarketplaceError, skillsMarketplaceLoading, skillsMarketplaceAction, skillsMarketplaceManualGithubUrl, searchSkillsMarketplace, installSkillFromMarketplace, uninstallMarketplaceSkill, installSkillFromGithubUrl, enableSkill, disableSkill, copySkillSource, showSkillDetails, setState, onClose, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const [tab, setTab] = useState("search");
     const installTabs = [
         {

package/components/pages/tutorial/TutorialNarrator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TutorialNarrator.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/tutorial/TutorialNarrator.tsx"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,IAAI,EACJ,KAAK,GACN,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB,GAAG,IAAI,CA+BP"}
+{"version":3,"file":"TutorialNarrator.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/tutorial/TutorialNarrator.tsx"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,IAAI,EACJ,KAAK,GACN,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB,GAAG,IAAI,CAkCP"}

package/components/pages/tutorial/TutorialNarrator.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useVoiceChat } from "../../../hooks/useVoiceChat.js";
-import { useApp } from "../../../state/index.js";
+import { useAppSelector } from "../../../state/index.js";
 import { useVoiceConfig } from "../../../voice/useVoiceConfig.js";
 /**
  * Speaks the current tour frame aloud through the app's REAL voice pipeline
@@ -10,7 +10,8 @@ import { useVoiceConfig } from "../../../voice/useVoiceConfig.js";
  * idle. Renders nothing; `utteranceId` changing (re)speaks `text`.
  */
 export function TutorialNarrator({ utteranceId, text, muted, }) {
-    const { uiLanguage, elizaCloudVoiceProxyAvailable } = useApp();
+    const uiLanguage = useAppSelector((s) => s.uiLanguage);
+    const elizaCloudVoiceProxyAvailable = useAppSelector((s) => s.elizaCloudVoiceProxyAvailable);
     const { voiceConfig, voiceBootstrapTick } = useVoiceConfig(uiLanguage);
     const { queueAssistantSpeech, stopSpeaking, unlockAudio } = useVoiceChat({
         voiceConfig,

package/components/pages/tutorial/TutorialOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TutorialOverlay.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/tutorial/TutorialOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6C/B,wBAAgB,eAAe,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CAwK3D"}
+{"version":3,"file":"TutorialOverlay.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/tutorial/TutorialOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6C/B,wBAAgB,eAAe,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI,CAyK3D"}

package/components/pages/tutorial/TutorialOverlay.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { useBranding } from "../../../config/branding.js";
 import { dispatchTutorialChatControl } from "../../../events/index.js";
 import { setNavLock } from "../../../navigation/nav-lock.js";
-import { useApp } from "../../../state/index.js";
+import { useAppSelector } from "../../../state/index.js";
 import { useShellControllerContext } from "../../shell/ShellControllerContext.hooks.js";
 import { TutorialNarrator } from "./TutorialNarrator.js";
 import { TutorialSpotlight } from "./TutorialSpotlight.js";
@@ -38,7 +38,8 @@ function readComposerText() {
 }
 export function TutorialOverlay() {
     const { active, stepIndex } = useTutorial();
-    const { tab, setTab } = useApp();
+    const tab = useAppSelector((s) => s.tab);
+    const setTab = useAppSelector((s) => s.setTab);
     const controller = useShellControllerContext();
     // Brand the tour copy ("Meet Milady", "Hi, I'm Milady") with the app name.
     const { appName } = useBranding();

package/components/pages/tutorial/TutorialSpotlight.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 /**
  * The tour spotlight: a full-screen overlay that
- *  - draws a breathing orange glow ring around the target (the indicator that
+ *  - draws a breathing orange glow  around the target (the indicator that
  *    points at the next control);
  *  - floats a small instruction card near the target (auto-flips above/below);
  *  - for a centered card (welcome / finish) dims the whole screen instead.
@@ -12,7 +12,7 @@ import { createPortal } from "react-dom";
  * Brand orange (#FF5800) is the only accent; resting→hover stays orange→darker.
  */
 const BRAND = "#FF5800";
-const PAD = 8; // glow ring inset around the target
+const PAD = 8; // glow  inset around the target
 function measure(selector) {
     if (!selector || typeof document === "undefined")
         return null;
@@ -122,7 +122,7 @@ function BackdropWithHole({ hole }) {
                 } })] }));
 }
 function SpotlightCard({ title, body, muted, onToggleMute, onSkip, onContinue, continueLabel, cardStyle, }) {
-    return (_jsxs("div", { className: "absolute w-[300px] max-w-[calc(100vw-28px)] rounded-2xl border border-white/12 bg-neutral-950/95 p-4 text-white shadow-2xl backdrop-blur-md motion-safe:animate-[shell-overlay-in_220ms_ease-out]", style: { ...cardStyle, pointerEvents: "auto" }, "data-testid": "tutorial-card", role: "dialog", "aria-label": "Tour step", children: [_jsx("h3", { className: "text-[15px] font-semibold leading-snug", children: title }), _jsx("p", { className: "mt-1 whitespace-pre-line text-[13px] leading-relaxed text-white/75", children: body }), _jsxs("div", { className: "mt-3 flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("button", { type: "button", onClick: onToggleMute, "data-testid": "tutorial-mute", "aria-label": muted ? "Unmute narration" : "Mute narration", "aria-pressed": muted, className: "text-white/45 transition-colors hover:text-white/80", children: muted ? (_jsx(VolumeX, { className: "h-4 w-4", "aria-hidden": true })) : (_jsx(Volume2, { className: "h-4 w-4", "aria-hidden": true })) }), _jsx("button", { type: "button", onClick: onSkip, "data-testid": "tutorial-skip", className: "text-[12px] text-white/45 underline-offset-2 hover:text-white/70 hover:underline", children: "Skip tour" })] }), onContinue && (_jsx("button", { type: "button", onClick: onContinue, "data-testid": "tutorial-continue", className: "rounded-lg px-3 py-1.5 text-[13px] font-semibold text-white transition-colors", style: { backgroundColor: BRAND }, onMouseEnter: (e) => {
+    return (_jsxs("div", { className: "absolute w-[300px] max-w-[calc(100vw-28px)] rounded-2xl border border-white/12 bg-neutral-950/95 p-4 text-white motion-safe:animate-[shell-overlay-in_220ms_ease-out]", style: { ...cardStyle, pointerEvents: "auto" }, "data-testid": "tutorial-card", role: "dialog", "aria-label": "Tour step", children: [_jsx("h3", { className: "text-[15px] font-semibold leading-snug", children: title }), _jsx("p", { className: "mt-1 whitespace-pre-line text-[13px] leading-relaxed text-white/75", children: body }), _jsxs("div", { className: "mt-3 flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("button", { type: "button", onClick: onToggleMute, "data-testid": "tutorial-mute", "aria-label": muted ? "Unmute narration" : "Mute narration", "aria-pressed": muted, className: "text-white/45 transition-colors hover:text-white/80", children: muted ? (_jsx(VolumeX, { className: "h-4 w-4", "aria-hidden": true })) : (_jsx(Volume2, { className: "h-4 w-4", "aria-hidden": true })) }), _jsx("button", { type: "button", onClick: onSkip, "data-testid": "tutorial-skip", className: "text-[12px] text-white/45 underline-offset-2 hover:text-white/70 hover:underline", children: "Skip tour" })] }), onContinue && (_jsx("button", { type: "button", onClick: onContinue, "data-testid": "tutorial-continue", className: "rounded-lg px-3 py-1.5 text-[13px] font-semibold text-white transition-colors", style: { backgroundColor: BRAND }, onMouseEnter: (e) => {
                             e.currentTarget.style.backgroundColor = "#D44A00";
                         }, onMouseLeave: (e) => {
                             e.currentTarget.style.backgroundColor = BRAND;

package/components/pages/tutorial/TutorialView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TutorialView.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/tutorial/TutorialView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AAEH,wBAAgB,YAAY,IAAI,KAAK,CAAC,YAAY,CAkDjD"}
+{"version":3,"file":"TutorialView.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/pages/tutorial/TutorialView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;GAKG;AAEH,wBAAgB,YAAY,IAAI,KAAK,CAAC,YAAY,CA8CjD"}

package/components/pages/tutorial/TutorialView.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Sparkles } from "lucide-react";
 import * as React 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 { startTutorial } from "./tutorial-controller.js";
 /**
@@ -12,7 +12,7 @@ import { startTutorial } from "./tutorial-controller.js";
  * each frame aloud; the tour can be muted from its card.
  */
 export function TutorialView() {
-    const { setTab } = useApp();
+    const setTab = useAppSelector((s) => s.setTab);
     const begin = React.useCallback(() => {
         startTutorial();
         setTab("chat"); // return home so the tour overlays the real chat
@@ -24,7 +24,5 @@ export function TutorialView() {
         description: "Launch the interactive walkthrough of the basics",
         onActivate: begin,
     });
-    return (_jsx("div", { className: "flex h-full w-full flex-col items-center justify-center overflow-y-auto px-6 py-10 text-center", "data-testid": "tutorial-launcher", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center", children: [_jsx("div", { className: "mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-accent-subtle", style: {
-                        boxShadow: "0 0 28px 4px color-mix(in srgb, var(--accent) 35%, transparent)",
-                    }, "aria-hidden": true, children: _jsx(Sparkles, { className: "h-7 w-7 text-accent" }) }), _jsx("h1", { className: "text-2xl font-semibold text-txt-strong", children: "Quick tour" }), _jsx("p", { className: "mt-2 text-[15px] leading-relaxed text-txt/70", children: "A hands-on walkthrough of the basics \u2014 about a minute." }), _jsx(Button, { ref: start.ref, ...start.agentProps, onClick: begin, "data-testid": "tutorial-start", size: "lg", className: "mt-7 text-[15px] font-semibold", children: "Start" })] }) }));
+    return (_jsx("div", { className: "flex h-full w-full flex-col items-center justify-center overflow-y-auto px-6 py-10 text-center", "data-testid": "tutorial-launcher", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center", children: [_jsx("div", { className: "mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-accent-subtle", "aria-hidden": true, children: _jsx(Sparkles, { className: "h-7 w-7 text-accent" }) }), _jsx("h1", { className: "text-2xl font-semibold text-txt-strong", children: "Quick tour" }), _jsx("p", { className: "mt-2 text-[15px] leading-relaxed text-txt/70", children: "A hands-on walkthrough of the basics \u2014 about a minute." }), _jsx(Button, { ref: start.ref, ...start.agentProps, onClick: begin, "data-testid": "tutorial-start", size: "lg", className: "mt-7 text-[15px] font-semibold", children: "Start" })] }) }));
 }

package/components/pages/useBrowserWorkspaceWalletBridge.d.ts

@@ -11,8 +11,8 @@
  * for per-iframe onLoad and any other point-in-time broadcasts.
  */
 import { type RefObject } from "react";
-import type { BrowserWorkspaceTab } from "../../api";
-import { type BrowserWorkspaceWalletRequest, type BrowserWorkspaceWalletState } from "./browser-workspace-wallet";
+import type { BrowserWorkspaceTab } from "../../api/index.js";
+import { type BrowserWorkspaceWalletRequest, type BrowserWorkspaceWalletState } from "./browser-workspace-wallet.js";
 /**
  * Verify a postMessage origin against the tab's known URL.
  *

package/components/pages/workflow-action-handoff.d.ts

@@ -1,4 +1,4 @@
-import type { ChatActionResultSummary } from "../../api/client-types-chat";
+import type { ChatActionResultSummary } from "../../api/client-types-chat.js";
 export declare function findWorkflowIdForActionHandoff(actionResults: readonly ChatActionResultSummary[] | undefined): string | null;
 export declare function dispatchWorkflowActionHandoff(actionResults: readonly ChatActionResultSummary[] | undefined): boolean;
 //# sourceMappingURL=workflow-action-handoff.d.ts.map

package/components/permissions/StreamingPermissions.d.ts

@@ -10,7 +10,7 @@ export interface MediaPermissionDef {
     modes?: readonly StreamingPermissionMode[];
 }
 interface StreamingPermissionsSettingsViewProps {
-    description: string;
+    description?: string;
     mode: StreamingPermissionMode;
     testId: string;
     title: string;

package/components/permissions/StreamingPermissions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StreamingPermissions.d.ts","sourceRoot":"","sources":["../../../../../../src/components/permissions/StreamingPermissions.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,KAAK,CAAC;AACvD,KAAK,iBAAiB,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,iBAAiB,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,uBAAuB,EAAE,CAAC;CAC5C;AAqRD,UAAU,qCAAqC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,uBAAuB,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gCAAgC,CAAC,EAC/C,WAAW,EACX,IAAI,EACJ,MAAM,EACN,KAAK,GACN,EAAE,qCAAqC,2CAqHvC"}
+{"version":3,"file":"StreamingPermissions.d.ts","sourceRoot":"","sources":["../../../../../../src/components/permissions/StreamingPermissions.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,KAAK,CAAC;AACvD,KAAK,iBAAiB,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,iBAAiB,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,uBAAuB,EAAE,CAAC;CAC5C;AAqRD,UAAU,qCAAqC;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,uBAAuB,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gCAAgC,CAAC,EAC/C,WAAW,EACX,IAAI,EACJ,MAAM,EACN,KAAK,GACN,EAAE,qCAAqC,2CA+GvC"}

package/components/permissions/StreamingPermissions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Cloud, Loader2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { Button } from "../ui/button.js";
 import { StatusBadge } from "../ui/status-badge.js";
 import { PermissionIcon } from "./PermissionIcon.js";
@@ -228,12 +228,12 @@ function getBadgeLabel(state) {
     return "Not Set";
 }
 export function StreamingPermissionsSettingsView({ description, mode, testId, title, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const { checking, permissionErrors, permStates, requestPermission, requestingId, } = useStreamingPermissions(mode);
     if (checking) {
         return (_jsx("div", { className: "text-center py-6 text-muted text-xs", children: translateWithFallback(t, "permissionssection.LoadingPermissions", "Loading permissions...") }));
     }
-    return (_jsx("div", { className: "space-y-6", "data-testid": testId, children: _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Cloud, { className: "w-4 h-4 text-accent" }), _jsx("div", { className: "font-bold text-sm", children: title })] }), _jsx("div", { className: "text-xs-tight text-muted mb-3", children: description }), _jsx("div", { className: "border border-border bg-card", children: MEDIA_PERMISSIONS.filter((def) => isStreamingPermissionVisibleForMode(def, mode)).map((def) => {
+    return (_jsx("div", { className: "space-y-6", "data-testid": testId, children: _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx(Cloud, { className: "w-4 h-4 text-accent" }), _jsx("div", { className: "font-bold text-sm", children: title })] }), description ? (_jsx("div", { className: "text-xs-tight text-muted mb-3", children: description })) : null, _jsx("div", { className: "flex flex-col", children: MEDIA_PERMISSIONS.filter((def) => isStreamingPermissionVisibleForMode(def, mode)).map((def) => {
                         const status = permStates[def.id] ?? "unknown";
                         const isGranted = status === "granted";
                         const isRequesting = requestingId === def.id;
@@ -242,12 +242,11 @@ export function StreamingPermissionsSettingsView({ description, mode, testId, ti
                             (status === "denied"
                                 ? `${name} is blocked for this site. Allow it in browser site settings, then try again.`
                                 : null);
-                        const description = translateWithFallback(t, def.descriptionKey, def.description);
-                        return (_jsxs("div", { "data-permission-id": def.id, className: "flex items-center gap-3 py-2.5 px-3", children: [_jsx(PermissionIcon, { icon: def.icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-semibold text-sm", children: name }), _jsx(StatusBadge, { label: translateWithFallback(t, status === "granted"
+                        return (_jsxs("div", { "data-permission-id": def.id, className: "flex items-center gap-3 py-2.5", children: [_jsx(PermissionIcon, { icon: def.icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-semibold text-sm", children: name }), _jsx(StatusBadge, { label: translateWithFallback(t, status === "granted"
                                                         ? "permissionssection.badge.granted"
                                                         : status === "denied"
                                                             ? "permissionssection.badge.denied"
-                                                            : "permissionssection.badge.notDetermined", getBadgeLabel(status)), variant: getBadgeTone(status), withDot: true, className: "rounded-full font-semibold" })] }), _jsx("div", { className: "text-xs-tight text-muted mt-0.5 truncate", children: description }), error ? (_jsx("div", { className: "mt-1 text-xs-tight text-danger", children: error })) : null] }), !isGranted ? (_jsxs(Button, { variant: "default", size: "sm", className: "h-auto text-xs-tight py-1 px-2.5", disabled: isRequesting, onClick: () => void requestPermission(def.id), "aria-label": `${translateWithFallback(t, "permissionssection.Grant", "Grant")} ${name}`, children: [isRequesting ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin", "aria-hidden": true })) : null, isRequesting
+                                                            : "permissionssection.badge.notDetermined", getBadgeLabel(status)), variant: getBadgeTone(status), withDot: true, className: "rounded-full font-semibold" })] }), error ? (_jsx("div", { className: "mt-1 text-xs-tight text-danger", children: error })) : null] }), !isGranted ? (_jsxs(Button, { variant: "default", size: "sm", className: "h-auto text-xs-tight py-1 px-2.5", disabled: isRequesting, onClick: () => void requestPermission(def.id), "aria-label": `${translateWithFallback(t, "permissionssection.Grant", "Grant")} ${name}`, children: [isRequesting ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin", "aria-hidden": true })) : null, isRequesting
                                             ? translateWithFallback(t, "permissionssection.Requesting", "Requesting")
                                             : translateWithFallback(t, "permissionssection.Grant", "Grant")] })) : (_jsx(Check, { className: "w-4 h-4 text-ok" }))] }, def.id));
                     }) })] }) }));

package/components/plugins/showcase-data.d.ts

@@ -1,4 +1,4 @@
 /** Synthetic showcase plugin that demonstrates all 23 field renderers. */
-import type { PluginInfo } from "../../api";
+import type { PluginInfo } from "../../api/index.js";
 export declare const SHOWCASE_PLUGIN: PluginInfo;
 //# sourceMappingURL=showcase-data.d.ts.map

package/components/policy-controls/ApprovedAddressesSection.d.ts

@@ -1,4 +1,4 @@
-import type { ApprovedAddressesConfig } from "./types";
+import type { ApprovedAddressesConfig } from "./types.js";
 export declare function ApprovedAddressesSection({ config, onChange, }: {
     config: ApprovedAddressesConfig;
     onChange: (config: ApprovedAddressesConfig) => void;

package/components/policy-controls/ApprovedAddressesSection.helpers.d.ts

@@ -1,3 +1,3 @@
-import type { ApprovedAddressesConfig } from "./types";
+import type { ApprovedAddressesConfig } from "./types.js";
 export declare function addressSummary(config: ApprovedAddressesConfig): string;
 //# sourceMappingURL=ApprovedAddressesSection.helpers.d.ts.map

package/components/policy-controls/AutoApproveSection.d.ts

@@ -1,4 +1,4 @@
-import type { AutoApproveConfig } from "./types";
+import type { AutoApproveConfig } from "./types.js";
 export declare function AutoApproveSection({ config, onChange, }: {
     config: AutoApproveConfig;
     onChange: (config: AutoApproveConfig) => void;

package/components/policy-controls/AutoApproveSection.helpers.d.ts

@@ -1,3 +1,3 @@
-import type { AutoApproveConfig } from "./types";
+import type { AutoApproveConfig } from "./types.js";
 export declare function autoApproveSummary(config: AutoApproveConfig): string;
 //# sourceMappingURL=AutoApproveSection.helpers.d.ts.map

package/components/policy-controls/RateLimitSection.d.ts

@@ -1,4 +1,4 @@
-import type { RateLimitConfig } from "./types";
+import type { RateLimitConfig } from "./types.js";
 export declare function RateLimitSection({ config, onChange, }: {
     config: RateLimitConfig;
     onChange: (config: RateLimitConfig) => void;

package/components/policy-controls/RateLimitSection.helpers.d.ts

@@ -1,3 +1,3 @@
-import type { RateLimitConfig } from "./types";
+import type { RateLimitConfig } from "./types.js";
 export declare function rateLimitSummary(config: RateLimitConfig): string;
 //# sourceMappingURL=RateLimitSection.helpers.d.ts.map

package/components/policy-controls/SpendingLimitSection.d.ts

@@ -1,4 +1,4 @@
-import type { SpendingLimitConfig } from "./types";
+import type { SpendingLimitConfig } from "./types.js";
 export declare function SpendingLimitSection({ config, onChange, }: {
     config: SpendingLimitConfig;
     onChange: (config: SpendingLimitConfig) => void;

package/components/policy-controls/SpendingLimitSection.helpers.d.ts

@@ -1,3 +1,3 @@
-import type { SpendingLimitConfig } from "./types";
+import type { SpendingLimitConfig } from "./types.js";
 export declare function spendingSummary(config: SpendingLimitConfig): string;
 //# sourceMappingURL=SpendingLimitSection.helpers.d.ts.map

package/components/policy-controls/TimeWindowSection.d.ts

@@ -1,4 +1,4 @@
-import type { TimeWindowConfig } from "./types";
+import type { TimeWindowConfig } from "./types.js";
 export declare function TimeWindowSection({ config, onChange, }: {
     config: TimeWindowConfig;
     onChange: (config: TimeWindowConfig) => void;

package/components/policy-controls/TimeWindowSection.helpers.d.ts

@@ -1,3 +1,3 @@
-import type { TimeWindowConfig } from "./types";
+import type { TimeWindowConfig } from "./types.js";
 export declare function timeWindowSummary(config: TimeWindowConfig): string;
 //# sourceMappingURL=TimeWindowSection.helpers.d.ts.map

package/components/policy-controls/constants.d.ts

@@ -1,4 +1,4 @@
-import type { ApprovedAddressesConfig, AutoApproveConfig, RateLimitConfig, SpendingLimitConfig, TimeWindowConfig } from "./types";
+import type { ApprovedAddressesConfig, AutoApproveConfig, RateLimitConfig, SpendingLimitConfig, TimeWindowConfig } from "./types.js";
 /** All monetary values are in USD for cross-chain compatibility. */
 export declare const DEFAULT_SPENDING: SpendingLimitConfig;
 export declare const DEFAULT_APPROVED_ADDRESSES: ApprovedAddressesConfig;

package/components/policy-controls/helpers.d.ts

@@ -1,4 +1,4 @@
-import type { ApprovedAddressEntry, PolicyRule, PolicyType } from "./types";
+import type { ApprovedAddressEntry, PolicyRule, PolicyType } from "./types.js";
 export declare function findPolicy(policies: PolicyRule[], type: PolicyType): PolicyRule | undefined;
 /** Parse a numeric string (USD amount). Returns 0 for invalid input. */
 export declare function parseAmount(value: string): number;

package/components/policy-controls/index.d.ts

@@ -1,15 +1,15 @@
-export { ApprovedAddressesSection } from "./ApprovedAddressesSection";
-export { addressSummary } from "./ApprovedAddressesSection.helpers";
-export { AutoApproveSection } from "./AutoApproveSection";
-export { autoApproveSummary } from "./AutoApproveSection.helpers";
-export * from "./constants";
-export { approvedAddressValue, chainTypeLabel, detectChainType, findPolicy, isValidAddress, parseAmount, } from "./helpers";
-export { PolicyToggle } from "./PolicyToggle";
-export { RateLimitSection } from "./RateLimitSection";
-export { rateLimitSummary } from "./RateLimitSection.helpers";
-export { SpendingLimitSection } from "./SpendingLimitSection";
-export { spendingSummary } from "./SpendingLimitSection.helpers";
-export { TimeWindowSection } from "./TimeWindowSection";
-export { timeWindowSummary } from "./TimeWindowSection.helpers";
-export * from "./types";
+export { ApprovedAddressesSection } from "./ApprovedAddressesSection.js";
+export { addressSummary } from "./ApprovedAddressesSection.helpers.js";
+export { AutoApproveSection } from "./AutoApproveSection.js";
+export { autoApproveSummary } from "./AutoApproveSection.helpers.js";
+export * from "./constants.js";
+export { approvedAddressValue, chainTypeLabel, detectChainType, findPolicy, isValidAddress, parseAmount, } from "./helpers.js";
+export { PolicyToggle } from "./PolicyToggle.js";
+export { RateLimitSection } from "./RateLimitSection.js";
+export { rateLimitSummary } from "./RateLimitSection.helpers.js";
+export { SpendingLimitSection } from "./SpendingLimitSection.js";
+export { spendingSummary } from "./SpendingLimitSection.helpers.js";
+export { TimeWindowSection } from "./TimeWindowSection.js";
+export { timeWindowSummary } from "./TimeWindowSection.helpers.js";
+export * from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/index.d.ts

@@ -1,28 +1,28 @@
-export * from "../ui/alert";
-export * from "../ui/alert-dialog";
-export * from "../ui/badge";
-export * from "../ui/button";
-export * from "../ui/card";
-export * from "../ui/checkbox";
-export * from "../ui/dialog";
-export * from "../ui/dropdown-menu";
-export * from "../ui/error-boundary";
-export * from "../ui/grid";
-export * from "../ui/input";
-export * from "../ui/input-group";
-export * from "../ui/label";
-export * from "../ui/popover";
-export * from "../ui/progress";
-export * from "../ui/select";
-export * from "../ui/separator";
-export * from "../ui/skeleton";
-export * from "../ui/slider";
-export * from "../ui/spinner";
-export * from "../ui/stack";
-export * from "../ui/switch";
-export * from "../ui/tabs";
-export * from "../ui/tag-editor";
-export * from "../ui/textarea";
-export * from "../ui/tooltip";
-export * from "../ui/typography";
+export * from "../ui/alert.js";
+export * from "../ui/alert-dialog.js";
+export * from "../ui/badge.js";
+export * from "../ui/button.js";
+export * from "../ui/card.js";
+export * from "../ui/checkbox.js";
+export * from "../ui/dialog.js";
+export * from "../ui/dropdown-menu.js";
+export * from "../ui/error-boundary.js";
+export * from "../ui/grid.js";
+export * from "../ui/input.js";
+export * from "../ui/input-group.js";
+export * from "../ui/label.js";
+export * from "../ui/popover.js";
+export * from "../ui/progress.js";
+export * from "../ui/select.js";
+export * from "../ui/separator.js";
+export * from "../ui/skeleton.js";
+export * from "../ui/slider.js";
+export * from "../ui/spinner.js";
+export * from "../ui/stack.js";
+export * from "../ui/switch.js";
+export * from "../ui/tabs.js";
+export * from "../ui/tag-editor.js";
+export * from "../ui/textarea.js";
+export * from "../ui/tooltip.js";
+export * from "../ui/typography.js";
 //# sourceMappingURL=index.d.ts.map

package/components/release-center/sections.d.ts

@@ -1,4 +1,4 @@
-import type { AppReleaseStatus, DesktopBuildInfo, DesktopReleaseNotesWindowInfo, DesktopSessionSnapshot, DesktopUpdaterSnapshot, WebGpuBrowserStatus, WgpuTagElement } from "./types";
+import type { AppReleaseStatus, DesktopBuildInfo, DesktopReleaseNotesWindowInfo, DesktopSessionSnapshot, DesktopUpdaterSnapshot, WebGpuBrowserStatus, WgpuTagElement } from "./types.js";
 export declare function ReleaseStatusSection({ busyAction, nativeUpdater, updateLoading, updateStatus, onApplyUpdate, onCheckForUpdates, onDetach, onRefresh, }: {
     busyAction: string | null;
     nativeUpdater: DesktopUpdaterSnapshot | null;

package/components/release-center/sections.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import { useBranding } from "../../config/branding.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { formatDateTime } from "../../utils/format.js";
 import { Button } from "../ui/button.js";
 import { Input } from "../ui/input.js";
@@ -12,7 +12,7 @@ function tr(t, key, defaultValue, options) {
     return t(key, { defaultValue, ...options });
 }
 export function ReleaseStatusSection({ busyAction, nativeUpdater, updateLoading, updateStatus, onApplyUpdate, onCheckForUpdates, onDetach, onRefresh, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const appReleaseTone = updateStatus?.updateAvailable ? "warning" : "good";
     const autoUpdateDisabled = nativeUpdater != null && !nativeUpdater.canAutoUpdate;
     const nativeReleaseTone = nativeUpdater?.updateReady
@@ -29,7 +29,7 @@ export function ReleaseStatusSection({ busyAction, nativeUpdater, updateLoading,
                         }), tone: nativeReleaseTone }), nativeUpdater?.channel ? (_jsx(StatusPill, { label: tr(t, "releasecenter.ChannelPill", "Channel: {{channel}}", {
                             channel: nativeUpdater.channel,
                         }), tone: "neutral" })) : null] }), _jsxs("div", { className: "mb-4 flex items-start justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-txt", children: tr(t, "releasecenter.ReleaseStatus", "Release Status") }), _jsx("p", { className: "mt-1 text-xs text-muted", children: tr(t, "releasecenter.ReleaseStatusDescription", "Compare backend release metadata with the native Electrobun updater state.") })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { size: "sm", disabled: busyAction === "refresh" || updateLoading, onClick: onRefresh, children: tr(t, "common.refresh", "Refresh") }), _jsx(Button, { size: "sm", variant: "outline", disabled: busyAction === "detach-release", onClick: onDetach, children: tr(t, "releasecenter.OpenDetachedReleaseCenter", "Open Detached Release Center") })] })] }), _jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsxs("div", { className: "rounded-sm border border-border bg-bg p-3", children: [_jsx("div", { className: "text-xs font-semibold text-txt", children: tr(t, "releasecenter.AppReleaseService", "App Release Service") }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.CurrentVersion", "Current version"), value: updateStatus?.currentVersion }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.LatestVersion", "Latest version"), value: updateStatus?.latestVersion ?? currentLabel }), _jsx(DefinitionRow, { label: tr(t, "releasecenterview.Channel", "Channel"), value: updateStatus?.channel }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.LastChecked", "Last checked"), value: updateStatus?.lastCheckAt
-                                    ? new Date(updateStatus.lastCheckAt).toLocaleString()
+                                    ? new Date(updateStatus.lastCheckAt).toLocaleString("en-US")
                                     : tr(t, "releasecenter.NotYet", "Not yet") })] }), _jsxs("div", { className: "rounded-sm border border-border bg-bg p-3", children: [_jsx("div", { className: "mb-3 text-xs font-semibold text-txt", children: tr(t, "releasecenter.NativeElectrobunUpdater", "Native Electrobun Updater") }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.CurrentVersion", "Current version"), value: nativeUpdater?.currentVersion }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.LatestVersion", "Latest version"), value: nativeUpdater?.latestVersion ?? currentLabel }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.AppBundle", "App bundle"), value: nativeUpdater?.appBundlePath ?? tr(t, "common.unknown", "Unknown") }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.LastStatus", "Last status"), value: nativeUpdater?.lastStatus?.message ??
                                     tr(t, "releasecenterview.Idle", "Idle") }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.StatusTime", "Status time"), value: formatDateTime(nativeUpdater?.lastStatus?.timestamp, {
                                     fallback: tr(t, "releasecenter.NotYet", "Not yet"),
@@ -38,13 +38,13 @@ export function ReleaseStatusSection({ busyAction, nativeUpdater, updateLoading,
                                             !nativeUpdater?.updateReady, onClick: onApplyUpdate, children: tr(t, "releasecenter.ApplyDownloadedUpdate", "Apply Downloaded Update") })] })] })] })] }));
 }
 export function ReleaseNotesSection({ busyAction, nativeUpdater, releaseNotesUrl, releaseNotesWindow, onOpenWindow, onReleaseNotesUrlChange, onResetUrl, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const { appUrl } = useBranding();
     const defaultReleaseNotesUrl = `${appUrl}/releases/`;
     return (_jsxs("section", { className: "rounded-sm border border-border bg-bg-accent p-4", children: [_jsxs("div", { className: "mb-4", children: [_jsx("h3", { className: "text-sm font-semibold text-txt", children: tr(t, "releasecenter.ReleaseNotesBrowserView", "Release Notes BrowserView") }), _jsx("p", { className: "mt-1 text-xs text-muted", children: tr(t, "releasecenter.ReleaseNotesBrowserViewDescription", "Opens release notes in a dedicated sandboxed BrowserView on its own persistent session.") })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { value: releaseNotesUrl, onChange: (event) => onReleaseNotesUrlChange(event.target.value), placeholder: defaultReleaseNotesUrl, className: "font-mono text-xs" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { size: "sm", disabled: busyAction === "open-release-notes", onClick: onOpenWindow, children: tr(t, "releasecenter.OpenBrowserViewWindow", "Open BrowserView Window") }), _jsx(Button, { size: "sm", variant: "outline", disabled: busyAction === "reset-release-url", onClick: onResetUrl, children: tr(t, "releasecenter.ResetUrl", "Reset URL") })] }), releaseNotesWindow ? (_jsxs("div", { className: "rounded-sm border border-border bg-bg p-3 text-xs text-txt", children: [_jsx(DefinitionRow, { label: tr(t, "releasecenter.WindowId", "Window ID"), value: releaseNotesWindow.windowId }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.BrowserViewId", "BrowserView ID"), value: releaseNotesWindow.webviewId }), _jsx(DefinitionRow, { label: tr(t, "appsview.URL", "URL"), value: releaseNotesWindow.url })] })) : (_jsxs("div", { className: "rounded-sm border border-border bg-bg p-3 text-xs text-muted", children: [tr(t, "releasecenter.UsingUpdaterUrl", "Using updater URL:"), " ", nativeUpdater?.baseUrl ?? defaultReleaseNotesUrl] }))] })] }));
 }
 export function BuildRuntimeSection({ buildInfo, busyAction, dockVisible, nativeUpdater, onToggleDock, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const { appUrl } = useBranding();
     const defaultReleaseNotesUrl = `${appUrl}/releases/`;
     return (_jsxs("section", { className: "rounded-sm border border-border bg-bg-accent p-4", children: [_jsxs("div", { className: "mb-4", children: [_jsx("h3", { className: "text-sm font-semibold text-txt", children: tr(t, "releasecenter.BuildConfigAndShellRuntime", "BuildConfig and Shell Runtime") }), _jsx("p", { className: "mt-1 text-xs text-muted", children: tr(t, "releasecenter.BuildConfigAndShellRuntimeDescription", "Native runtime metadata sourced directly from Electrobun BuildConfig and shell APIs.") })] }), _jsxs("div", { className: "rounded-sm border border-border bg-bg p-3", children: [_jsx(DefinitionRow, { label: tr(t, "releasecenter.Platform", "Platform"), value: buildInfo?.platform }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.Architecture", "Architecture"), value: buildInfo?.arch }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.DefaultRenderer", "Default renderer"), value: buildInfo?.defaultRenderer }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.AvailableRenderers", "Available renderers"), value: buildInfo?.availableRenderers.join(", ") }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.BunVersion", "Bun version"), value: buildInfo?.bunVersion }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.CefVersion", "CEF version"), value: buildInfo?.cefVersion }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.UpdaterBaseUrl", "Updater base URL"), value: nativeUpdater?.baseUrl ?? defaultReleaseNotesUrl }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.DockIconVisible", "Dock icon visible"), value: buildInfo?.platform === "darwin"
@@ -54,14 +54,14 @@ export function BuildRuntimeSection({ buildInfo, busyAction, dockVisible, native
                                 : tr(t, "releasecenter.ShowDockIcon", "Show Dock Icon") }) })] })] }));
 }
 export function SessionControlsSection({ busyAction, sessionSnapshots, onClearCookies, onClearSession, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     return (_jsxs("section", { className: "rounded-sm border border-border bg-bg-accent p-4", children: [_jsxs("div", { className: "mb-4", children: [_jsx("h3", { className: "text-sm font-semibold text-txt", children: tr(t, "releasecenter.SessionAndCookieControls", "Session and Cookie Controls") }), _jsx("p", { className: "mt-1 text-xs text-muted", children: tr(t, "releasecenter.SessionAndCookieControlsDescription", "Explicit Session APIs for inspecting and clearing renderer storage.") })] }), _jsx("div", { className: "space-y-3", children: SESSION_PARTITIONS.map(({ label, partition }) => {
                     const snapshot = sessionSnapshots[partition];
                     return (_jsxs("div", { className: "rounded-sm border border-border bg-bg p-3", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-txt", children: label }), _jsx("div", { className: "mt-1 text-xs-tight text-muted", children: partitionDescription(partition, t) })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", disabled: busyAction === `clear-cookies:${partition}`, onClick: () => onClearCookies(partition), children: tr(t, "releasecenter.ClearCookies", "Clear Cookies") }), _jsx(Button, { size: "sm", variant: "outline", disabled: busyAction === `clear-session:${partition}`, onClick: () => onClearSession(partition), children: tr(t, "releasecenter.ClearStorage", "Clear Storage") })] })] }), _jsxs("div", { className: "mt-3", children: [_jsx(DefinitionRow, { label: tr(t, "releasecenter.Partition", "Partition"), value: snapshot?.partition ?? partition }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.Persistent", "Persistent"), value: snapshot ? String(snapshot.persistent) : undefined }), _jsx(DefinitionRow, { label: tr(t, "releasecenter.CookieCount", "Cookie count"), value: snapshot?.cookieCount })] }), snapshot?.cookies.length ? (_jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: snapshot.cookies.slice(0, 8).map((cookie) => (_jsx("span", { className: "inline-flex items-center rounded-full border border-border bg-bg-accent px-2 py-1 text-xs-tight text-txt", children: cookie.name }, `${partition}:${cookie.name}:${cookie.domain ?? ""}`))) })) : (_jsx("div", { className: "mt-3 text-xs-tight text-muted", children: tr(t, "releasecenter.NoCookiesStoredForThisPartition", "No cookies stored for this partition.") }))] }, partition));
                 }) })] }));
 }
 export function WgpuSurfaceSection({ webGpuStatus, wgpuHidden, wgpuPassthrough, wgpuReady, wgpuRef, wgpuTagAvailable, wgpuTransparent, onRunTest, onToggleHidden, onTogglePassthrough, onToggleTransparent, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     return (_jsxs("section", { className: "rounded-sm border border-border bg-bg-accent p-4", children: [_jsxs("div", { className: "mb-4", children: [_jsx("h3", { className: "text-sm font-semibold text-txt", children: tr(t, "releasecenter.BrowserWgpuSurface", "Browser WGPU Surface") }), _jsx("p", { className: "mt-1 text-xs text-muted", children: tr(t, "releasecenter.BrowserWgpuSurfaceDescription", "Inline <electrobun-wgpu> preview plus browser WebGPU compatibility status from the active desktop renderer.") })] }), _jsxs("div", { className: "grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]", children: [_jsxs("div", { className: "space-y-3", children: [wgpuTagAvailable ? (_jsx("div", { className: "overflow-hidden rounded-sm border border-border bg-black/5", children: createElement("electrobun-wgpu", {
                                     ref: (node) => {
                                         wgpuRef.current = node;

package/components/release-center/shared.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { StatusBadge } from "../ui/status-badge.js";
 const PILL_TONE_MAP = {
     good: "success",
@@ -10,7 +10,7 @@ export function StatusPill({ label, tone, }) {
     return (_jsx(StatusBadge, { label: label, variant: PILL_TONE_MAP[tone] ?? "muted", className: "rounded-full px-2.5 py-1 text-xs-tight font-medium normal-case" }));
 }
 export function DefinitionRow({ emptyFallback, label, value, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     return (_jsxs("div", { className: "flex items-start justify-between gap-4 py-2", children: [_jsx("div", { className: "text-xs text-muted", children: label }), _jsx("div", { className: "text-right text-xs text-txt break-all", children: value ??
                     emptyFallback ??
                     t("common.unavailable", { defaultValue: "Unavailable" }) })] }));

package/components/settings/AdvancedSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/AdvancedSection.tsx"],"names":[],"mappings":"AAaA,wBAAgB,eAAe,4CAye9B"}
+{"version":3,"file":"AdvancedSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/AdvancedSection.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,eAAe,4CA4e9B"}