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

package/components/settings/vault-tabs/RoutingTab.js

@@ -2,17 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Routing tab — full-width per-context routing rules table plus the
  * "Default profile" setting. One source of truth: `GET/PUT
- * /api/secrets/routing`.
- *
- * Replaces the cramped per-row routing editor that used to live inside
- * `VaultInventoryPanel`. This tab shows every rule in the system and
- * supports wildcard key patterns (e.g. `OPENROUTER_*`).
+ * /api/secrets/routing`. Supports wildcard key patterns (e.g.
+ * `OPENROUTER_*`).
  */
-import { Button, Input, Label } from "@elizaos/ui";
 import { ArrowRight, Loader2, Plus, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState, } from "react";
+import { useAgentElement } from "../../../agent-surface/index.js";
+import { useTranslation } from "../../../state/TranslationContext.hooks.js";
+import { Button } from "../../ui/button.js";
+import { Input } from "../../ui/input.js";
+import { Label } from "../../ui/label.js";
 export function RoutingTab(props) {
     const { config, agents, apps, entries, onConfigChange, navigate, focusKey, onFocusApplied, } = props;
+    const { t } = useTranslation();
     const [error, setError] = useState(null);
     const [saving, setSaving] = useState(false);
     const [showAdd, setShowAdd] = useState(false);
@@ -22,6 +24,87 @@ export function RoutingTab(props) {
     const [scopeAppName, setScopeAppName] = useState("");
     const [profileId, setProfileId] = useState("");
     const [rulesFilter, setRulesFilter] = useState("");
+    const { ref: defaultProfileRef, agentProps: defaultProfileAgentProps } = useAgentElement({
+        id: "routing-default-profile",
+        role: "select",
+        label: "Default routing profile",
+        group: "routing",
+        description: "Profile applied when no rule matches",
+        getValue: () => config.defaultProfile ?? "default",
+        onFill: (v) => void onDefaultProfileChange(v),
+    });
+    const { ref: addRuleToggleRef, agentProps: addRuleToggleAgentProps } = useAgentElement({
+        id: "routing-add-rule-toggle",
+        role: "button",
+        label: "Add routing rule",
+        group: "routing",
+        description: "Show the form to add a new routing rule",
+    });
+    const { ref: filterRef, agentProps: filterAgentProps } = useAgentElement({
+        id: "routing-rules-filter",
+        role: "text-input",
+        label: "Filter routing rules",
+        group: "routing",
+        getValue: () => rulesFilter,
+        onFill: (v) => setRulesFilter(v),
+    });
+    const { ref: keyPatternRef, agentProps: keyPatternAgentProps } = useAgentElement({
+        id: "routing-key-pattern",
+        role: "text-input",
+        label: "Routing key pattern",
+        group: "routing-add-rule",
+        description: "Exact key or wildcard like OPENROUTER_*",
+        getValue: () => keyPattern,
+        onFill: (v) => setKeyPattern(v),
+    });
+    const { ref: scopeKindRef, agentProps: scopeKindAgentProps } = useAgentElement({
+        id: "routing-scope-kind",
+        role: "select",
+        label: "Routing scope kind",
+        group: "routing-add-rule",
+        options: ["agent", "app"],
+        getValue: () => scopeKind,
+        onFill: (v) => setScopeKind(v),
+    });
+    const { ref: scopeAgentRef, agentProps: scopeAgentAgentProps } = useAgentElement({
+        id: "routing-scope-agent",
+        role: "select",
+        label: "Routing scope agent",
+        group: "routing-add-rule",
+        options: agents.map((a) => a.id),
+        getValue: () => scopeAgentId,
+        onFill: (v) => setScopeAgentId(v),
+    });
+    const { ref: scopeAppRef, agentProps: scopeAppAgentProps } = useAgentElement({
+        id: "routing-scope-app",
+        role: "select",
+        label: "Routing scope app",
+        group: "routing-add-rule",
+        options: apps.map((a) => a.name),
+        getValue: () => scopeAppName,
+        onFill: (v) => setScopeAppName(v),
+    });
+    const { ref: ruleProfileRef, agentProps: ruleProfileAgentProps } = useAgentElement({
+        id: "routing-rule-profile",
+        role: "select",
+        label: "Routing rule profile",
+        group: "routing-add-rule",
+        getValue: () => profileId,
+        onFill: (v) => setProfileId(v),
+    });
+    const { ref: ruleCancelRef, agentProps: ruleCancelAgentProps } = useAgentElement({
+        id: "routing-rule-cancel",
+        role: "button",
+        label: "Cancel adding routing rule",
+        group: "routing-add-rule",
+        onActivate: () => setShowAdd(false),
+    });
+    const { ref: ruleSaveRef, agentProps: ruleSaveAgentProps } = useAgentElement({
+        id: "routing-rule-save",
+        role: "button",
+        label: "Save routing rule",
+        group: "routing-add-rule",
+    });
     // Apply incoming focus from the Secrets tab "Routing rules for this
     // profile →" jump: pre-filter the list on the focused key.
     useEffect(() => {
@@ -82,12 +165,14 @@ export function RoutingTab(props) {
             onConfigChange(body.config);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : "save failed");
+            setError(err instanceof Error
+                ? err.message
+                : t("routing.error.saveFailed", { defaultValue: "save failed" }));
         }
         finally {
             setSaving(false);
         }
-    }, [onConfigChange]);
+    }, [onConfigChange, t]);
     const onAddRule = useCallback(async (e) => {
         e.preventDefault();
         if (!keyPattern.trim() || !profileId)
@@ -126,12 +211,15 @@ export function RoutingTab(props) {
         scopeKind,
     ]);
     const onDeleteRule = useCallback(async (rule) => {
-        const confirmed = window.confirm(`Delete routing rule for ${rule.keyPattern}?`);
+        const confirmed = window.confirm(t("routing.confirmDelete", {
+            keyPattern: rule.keyPattern,
+            defaultValue: "Delete routing rule for {{keyPattern}}?",
+        }));
         if (!confirmed)
             return;
         const newRules = config.rules.filter((r) => r !== rule);
         await saveConfig({ ...config, rules: newRules });
-    }, [config, saveConfig]);
+    }, [config, saveConfig, t]);
     const onDefaultProfileChange = useCallback(async (next) => {
         const trimmed = next.trim();
         await saveConfig({
@@ -152,7 +240,32 @@ export function RoutingTab(props) {
             return r.profileId.toLowerCase().includes(needle);
         });
     }, [config.rules, rulesFilter]);
-    return (_jsxs("div", { "data-testid": "routing-tab", className: "space-y-4", children: [_jsx("section", { className: "space-y-2 rounded-md border border-border/40 bg-card/30 p-3", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-txt", children: "Default profile" }), _jsx("p", { className: "text-2xs text-muted", children: "Applied when no rule below matches a (key \u00D7 scope) lookup. \"default\" is the fallback when this is empty." })] }), _jsx("select", { value: config.defaultProfile ?? "default", onChange: (e) => void onDefaultProfileChange(e.target.value), disabled: saving, "data-testid": "routing-default-profile", className: "block h-8 w-40 rounded-md border border-border bg-bg px-2 text-xs text-txt", children: allProfileIds.map((id) => (_jsx("option", { value: id, children: id }, id))) })] }) }), _jsxs("section", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-txt", children: "Routing rules" }), _jsxs("p", { className: "text-2xs text-muted", children: ["Per-context overrides. Match keys exactly (e.g.", _jsx("code", { className: "mx-1 rounded bg-bg/40 px-1 font-mono", children: "OPENROUTER_API_KEY" }), ") or use wildcards (e.g.", _jsx("code", { className: "mx-1 rounded bg-bg/40 px-1 font-mono", children: "OPENROUTER_*" }), ")."] })] }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-8 shrink-0 gap-1 rounded-md px-2", onClick: () => setShowAdd((v) => !v), disabled: saving, "aria-label": "Add routing rule", children: [_jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": true }), " Add rule"] })] }), error && (_jsx("p", { className: "rounded-md border border-danger/40 bg-danger/10 px-3 py-1.5 text-xs text-danger", "aria-live": "polite", "data-testid": "routing-tab-error", children: error })), config.rules.length > 0 && (_jsx(Input, { value: rulesFilter, onChange: (e) => setRulesFilter(e.target.value), placeholder: "Filter rules by key, scope, or profile", className: "h-8 text-xs", autoComplete: "off", "data-testid": "routing-rules-filter" })), showAdd && (_jsxs("form", { onSubmit: onAddRule, "data-testid": "routing-add-rule-form", className: "space-y-2 rounded-md border border-border/50 bg-card/30 p-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: "Key pattern" }), _jsx(Input, { value: keyPattern, onChange: (e) => setKeyPattern(e.target.value), placeholder: "OPENROUTER_API_KEY or OPENROUTER_*", className: "h-8 font-mono text-xs", autoComplete: "off", list: "routing-key-suggestions", required: true }), _jsx("datalist", { id: "routing-key-suggestions", children: allKeys.map((k) => (_jsx("option", { value: k }, k))) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: "Scope" }), _jsxs("select", { value: scopeKind, onChange: (e) => setScopeKind(e.target.value), className: "block h-8 w-full rounded-md border border-border bg-bg px-2 text-xs text-txt", children: [_jsx("option", { value: "agent", children: "Agent" }), _jsx("option", { value: "app", children: "App" })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: scopeKind === "agent" ? "Agent" : "App" }), scopeKind === "agent" ? (_jsxs("select", { value: scopeAgentId, onChange: (e) => setScopeAgentId(e.target.value), className: "block h-8 w-full rounded-md border border-border bg-bg px-2 text-xs text-txt", required: true, children: [_jsx("option", { value: "", children: "Select agent\u2026" }), agents.map((a) => (_jsx("option", { value: a.id, children: a.name }, a.id)))] })) : (_jsxs("select", { value: scopeAppName, onChange: (e) => setScopeAppName(e.target.value), className: "block h-8 w-full rounded-md border border-border bg-bg px-2 text-xs text-txt", required: true, children: [_jsx("option", { value: "", children: "Select app\u2026" }), apps.map((a) => (_jsx("option", { value: a.name, children: a.displayName ?? a.name }, a.name)))] }))] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: "Profile" }), _jsxs("select", { value: profileId, onChange: (e) => setProfileId(e.target.value), className: "block h-8 w-full rounded-md border border-border bg-bg px-2 text-xs text-txt", required: true, children: [_jsx("option", { value: "", children: "Select profile\u2026" }), profilesForNewRule.map((p) => (_jsx("option", { value: p.id, children: p.label }, p.id)))] })] })] }), _jsxs("div", { className: "flex justify-end gap-2 pt-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 rounded-md px-3 text-xs", onClick: () => setShowAdd(false), disabled: saving, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "default", size: "sm", className: "h-7 rounded-md px-3 text-xs", disabled: saving || !keyPattern.trim() || !profileId, children: saving ? "Saving…" : "Save rule" })] })] })), config.rules.length === 0 ? (_jsx("div", { "data-testid": "routing-rules-empty", className: "rounded-md border border-dashed border-border/50 bg-card/20 px-3 py-3 text-center text-xs text-muted", children: "No routing rules. The default profile applies for every caller." })) : visibleRules.length === 0 ? (_jsxs("div", { "data-testid": "routing-rules-no-match", className: "rounded-md border border-dashed border-border/50 bg-card/20 px-3 py-3 text-center text-xs text-muted", children: ["No rules match \"", rulesFilter, "\"."] })) : (_jsxs("table", { "data-testid": "routing-rules-table", className: "w-full table-fixed border-collapse rounded-md border border-border/40 bg-card/30 text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-left text-muted", children: [_jsx("th", { className: "px-2 py-1 font-medium", children: "Key" }), _jsx("th", { className: "px-2 py-1 font-medium", children: "Scope" }), _jsx("th", { className: "px-2 py-1 font-medium", children: "Profile" }), _jsx("th", { className: "w-16 px-2 py-1 font-medium text-right", children: "Actions" })] }) }), _jsx("tbody", { children: visibleRules.map((rule, idx) => {
+    return (_jsxs("div", { "data-testid": "routing-tab", className: "space-y-4", children: [_jsx("section", { className: "space-y-2 rounded-sm border border-border/40 bg-card/30 p-3", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-txt", children: t("routing.defaultProfile.title", {
+                                        defaultValue: "Default profile",
+                                    }) }), _jsx("p", { className: "text-2xs text-muted", children: t("routing.defaultProfile.description", {
+                                        defaultValue: 'Applied when no rule matches. Falls back to "default".',
+                                    }) })] }), _jsx("select", { ref: defaultProfileRef, ...defaultProfileAgentProps, value: config.defaultProfile ?? "default", onChange: (e) => void onDefaultProfileChange(e.target.value), disabled: saving, "data-testid": "routing-default-profile", className: "block h-8 w-40 rounded-sm border border-border bg-bg px-2 text-xs text-txt", children: allProfileIds.map((id) => (_jsx("option", { value: id, children: id }, id))) })] }) }), _jsxs("section", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-txt", children: t("routing.rules.title", { defaultValue: "Routing rules" }) }), _jsx("p", { className: "text-2xs text-muted", children: t("routing.rules.description", {
+                                            defaultValue: "Per-context overrides. Match keys exactly (e.g. OPENROUTER_API_KEY) or use wildcards (e.g. OPENROUTER_*).",
+                                        }) })] }), _jsxs(Button, { ref: addRuleToggleRef, ...addRuleToggleAgentProps, variant: "outline", size: "sm", className: "h-8 shrink-0 gap-1 rounded-sm px-2", onClick: () => setShowAdd((v) => !v), disabled: saving, "aria-label": t("routing.addRule", {
+                                    defaultValue: "Add routing rule",
+                                }), children: [_jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": true }), " ", t("routing.addRuleShort", { defaultValue: "Add rule" })] })] }), error && (_jsx("p", { className: "rounded-sm border border-danger/40 bg-danger/10 px-3 py-1.5 text-xs text-danger", "aria-live": "polite", "data-testid": "routing-tab-error", children: error })), config.rules.length > 0 && (_jsx(Input, { ref: filterRef, ...filterAgentProps, value: rulesFilter, onChange: (e) => setRulesFilter(e.target.value), placeholder: t("routing.filterPlaceholder", {
+                            defaultValue: "Filter rules by key, scope, or profile",
+                        }), className: "h-8 text-xs", autoComplete: "off", "data-testid": "routing-rules-filter" })), showAdd && (_jsxs("form", { onSubmit: onAddRule, "data-testid": "routing-add-rule-form", className: "space-y-2 rounded-sm border border-border/50 bg-card/30 p-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("routing.field.keyPattern", {
+                                            defaultValue: "Key pattern",
+                                        }) }), _jsx(Input, { ref: keyPatternRef, ...keyPatternAgentProps, value: keyPattern, onChange: (e) => setKeyPattern(e.target.value), placeholder: "OPENROUTER_API_KEY or OPENROUTER_*", className: "h-8 font-mono text-xs", autoComplete: "off", list: "routing-key-suggestions", required: true }), _jsx("datalist", { id: "routing-key-suggestions", children: allKeys.map((k) => (_jsx("option", { value: k }, k))) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-3", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("routing.field.scope", { defaultValue: "Scope" }) }), _jsxs("select", { ref: scopeKindRef, ...scopeKindAgentProps, value: scopeKind, onChange: (e) => setScopeKind(e.target.value), className: "block h-8 w-full rounded-sm border border-border bg-bg px-2 text-xs text-txt", children: [_jsx("option", { value: "agent", children: t("routing.scope.agent", { defaultValue: "Agent" }) }), _jsx("option", { value: "app", children: t("routing.scope.app", { defaultValue: "App" }) })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: scopeKind === "agent"
+                                                    ? t("routing.scope.agent", { defaultValue: "Agent" })
+                                                    : t("routing.scope.app", { defaultValue: "App" }) }), scopeKind === "agent" ? (_jsxs("select", { ref: scopeAgentRef, ...scopeAgentAgentProps, value: scopeAgentId, onChange: (e) => setScopeAgentId(e.target.value), className: "block h-8 w-full rounded-sm border border-border bg-bg px-2 text-xs text-txt", required: true, children: [_jsx("option", { value: "", children: t("routing.selectAgent", {
+                                                            defaultValue: "Select agent…",
+                                                        }) }), agents.map((a) => (_jsx("option", { value: a.id, children: a.name }, a.id)))] })) : (_jsxs("select", { ref: scopeAppRef, ...scopeAppAgentProps, value: scopeAppName, onChange: (e) => setScopeAppName(e.target.value), className: "block h-8 w-full rounded-sm border border-border bg-bg px-2 text-xs text-txt", required: true, children: [_jsx("option", { value: "", children: t("routing.selectApp", { defaultValue: "Select app…" }) }), apps.map((a) => (_jsx("option", { value: a.name, children: a.displayName ?? a.name }, a.name)))] }))] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: t("routing.field.profile", { defaultValue: "Profile" }) }), _jsxs("select", { ref: ruleProfileRef, ...ruleProfileAgentProps, value: profileId, onChange: (e) => setProfileId(e.target.value), className: "block h-8 w-full rounded-sm border border-border bg-bg px-2 text-xs text-txt", required: true, children: [_jsx("option", { value: "", children: t("routing.selectProfile", {
+                                                            defaultValue: "Select profile…",
+                                                        }) }), profilesForNewRule.map((p) => (_jsx("option", { value: p.id, children: p.label }, p.id)))] })] })] }), _jsxs("div", { className: "flex justify-end gap-2 pt-1", children: [_jsx(Button, { ref: ruleCancelRef, ...ruleCancelAgentProps, type: "button", variant: "ghost", size: "sm", className: "h-7 rounded-sm px-3 text-xs", onClick: () => setShowAdd(false), disabled: saving, children: t("routing.cancel", { defaultValue: "Cancel" }) }), _jsx(Button, { ref: ruleSaveRef, ...ruleSaveAgentProps, type: "submit", variant: "default", size: "sm", className: "h-7 rounded-sm px-3 text-xs", disabled: saving || !keyPattern.trim() || !profileId, children: saving
+                                            ? t("routing.saving", { defaultValue: "Saving…" })
+                                            : t("routing.saveRule", { defaultValue: "Save rule" }) })] })] })), config.rules.length === 0 ? (_jsx("div", { "data-testid": "routing-rules-empty", className: "rounded-sm border border-dashed border-border/50 bg-card/20 px-3 py-3 text-center text-xs text-muted", children: t("routing.empty", {
+                            defaultValue: "No routing rules. The default profile applies for every caller.",
+                        }) })) : visibleRules.length === 0 ? (_jsx("div", { "data-testid": "routing-rules-no-match", className: "rounded-sm border border-dashed border-border/50 bg-card/20 px-3 py-3 text-center text-xs text-muted", children: t("routing.noMatch", {
+                            filter: rulesFilter,
+                            defaultValue: 'No rules match "{{filter}}".',
+                        }) })) : (_jsxs("table", { "data-testid": "routing-rules-table", className: "w-full table-fixed border-collapse rounded-sm border border-border/40 bg-card/30 text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-left text-muted", children: [_jsx("th", { className: "px-2 py-1 font-medium", children: t("routing.table.key", { defaultValue: "Key" }) }), _jsx("th", { className: "px-2 py-1 font-medium", children: t("routing.table.scope", { defaultValue: "Scope" }) }), _jsx("th", { className: "px-2 py-1 font-medium", children: t("routing.table.profile", { defaultValue: "Profile" }) }), _jsx("th", { className: "w-16 px-2 py-1 font-medium text-right", children: t("routing.table.actions", { defaultValue: "Actions" }) })] }) }), _jsx("tbody", { children: visibleRules.map((rule, idx) => {
                                     const targetId = rule.scope.agentId ??
                                         rule.scope.appName ??
                                         rule.scope.skillId ??
@@ -166,10 +279,35 @@ export function RoutingTab(props) {
                                             : targetId;
                                     const ruleKey = `${rule.keyPattern}:${rule.scope.kind}:${targetId}:${rule.profileId}:${idx}`;
                                     const keyExists = allKeys.includes(rule.keyPattern);
-                                    return (_jsxs("tr", { "data-testid": `routing-rule-row-${ruleKey}`, className: "border-t border-border/30", children: [_jsx("td", { className: "px-2 py-1.5 align-top", children: keyExists ? (_jsxs("button", { type: "button", onClick: () => navigate({
-                                                        tab: "secrets",
-                                                        focusKey: rule.keyPattern,
-                                                        focusProfileId: rule.profileId,
-                                                    }), "data-testid": `routing-key-chip-${ruleKey}`, className: "inline-flex items-center gap-1 rounded-full border border-accent/40 bg-accent/10 px-1.5 py-0.5 font-mono text-2xs font-medium text-accent hover:bg-accent/20", "aria-label": `Open ${rule.keyPattern} in Secrets tab`, children: [rule.keyPattern, _jsx(ArrowRight, { className: "h-3 w-3", "aria-hidden": true })] })) : (_jsx("span", { className: "font-mono text-2xs text-muted", children: rule.keyPattern })) }), _jsxs("td", { className: "px-2 py-1.5 align-top", children: [_jsx("span", { className: "rounded-full border border-border/40 bg-bg/40 px-1.5 py-0.5 text-2xs text-muted", children: rule.scope.kind }), _jsx("span", { className: "ml-1.5 text-2xs text-txt", children: targetLabel })] }), _jsx("td", { className: "px-2 py-1.5 align-top", children: _jsx("span", { className: "rounded-full border border-accent/40 bg-accent/10 px-1.5 py-0.5 text-2xs font-medium text-accent", children: rule.profileId }) }), _jsx("td", { className: "px-2 py-1.5 align-top text-right", children: _jsx(Button, { variant: "ghost", size: "sm", className: "h-6 w-6 rounded-md p-0 text-muted hover:text-danger", onClick: () => void onDeleteRule(rule), "aria-label": `Delete rule for ${rule.keyPattern}`, children: _jsx(Trash2, { className: "h-3.5 w-3.5", "aria-hidden": true }) }) })] }, ruleKey));
-                                }) })] })), saving && (_jsxs("div", { className: "flex items-center gap-2 px-1 text-2xs text-muted", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", "aria-hidden": true }), " Saving\u2026"] }))] })] }));
+                                    return (_jsx(RoutingRuleRow, { ruleKey: ruleKey, keyPattern: rule.keyPattern, scopeKind: rule.scope.kind, targetLabel: targetLabel, profileId: rule.profileId, keyExists: keyExists, onOpenInSecrets: () => navigate({
+                                            tab: "secrets",
+                                            focusKey: rule.keyPattern,
+                                            focusProfileId: rule.profileId,
+                                        }), onDelete: () => void onDeleteRule(rule) }, ruleKey));
+                                }) })] })), saving && (_jsxs("div", { className: "flex items-center gap-2 px-1 text-2xs text-muted", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", "aria-hidden": true }), " ", t("routing.saving", { defaultValue: "Saving…" })] }))] })] }));
+}
+function RoutingRuleRow({ ruleKey, keyPattern, scopeKind, targetLabel, profileId, keyExists, onOpenInSecrets, onDelete, }) {
+    const { t } = useTranslation();
+    const { ref: chipRef, agentProps: chipAgentProps } = useAgentElement({
+        id: `routing-key-chip-${ruleKey}`,
+        role: "button",
+        label: `Open ${keyPattern} in Secrets tab`,
+        group: "routing-rules",
+        description: "Jump to the Secrets tab pre-filtered to this key",
+        onActivate: onOpenInSecrets,
+    });
+    const { ref: deleteRef, agentProps: deleteAgentProps } = useAgentElement({
+        id: `routing-rule-delete-${ruleKey}`,
+        role: "button",
+        label: `Delete routing rule for ${keyPattern}`,
+        group: "routing-rules",
+        onActivate: onDelete,
+    });
+    return (_jsxs("tr", { "data-testid": `routing-rule-row-${ruleKey}`, className: "border-t border-border/30", children: [_jsx("td", { className: "px-2 py-1.5 align-top", children: keyExists ? (_jsxs("button", { ref: chipRef, ...chipAgentProps, type: "button", onClick: onOpenInSecrets, "data-testid": `routing-key-chip-${ruleKey}`, className: "inline-flex items-center gap-1 rounded-full border border-accent/40 bg-accent/10 px-1.5 py-0.5 font-mono text-2xs font-medium text-accent hover:bg-accent/20", "aria-label": t("routing.openInSecrets", {
+                        keyPattern,
+                        defaultValue: "Open {{keyPattern}} in Secrets tab",
+                    }), children: [keyPattern, _jsx(ArrowRight, { className: "h-3 w-3", "aria-hidden": true })] })) : (_jsx("span", { className: "font-mono text-2xs text-muted", children: keyPattern })) }), _jsxs("td", { className: "px-2 py-1.5 align-top", children: [_jsx("span", { className: "rounded-full border border-border/40 bg-bg/40 px-1.5 py-0.5 text-2xs text-muted", children: scopeKind }), _jsx("span", { className: "ml-1.5 text-2xs text-txt", children: targetLabel })] }), _jsx("td", { className: "px-2 py-1.5 align-top", children: _jsx("span", { className: "rounded-full border border-accent/40 bg-accent/10 px-1.5 py-0.5 text-2xs font-medium text-accent", children: profileId }) }), _jsx("td", { className: "px-2 py-1.5 align-top text-right", children: _jsx(Button, { ref: deleteRef, ...deleteAgentProps, variant: "ghost", size: "sm", className: "h-6 w-6 rounded-sm p-0 text-muted hover:text-danger", onClick: onDelete, "aria-label": t("routing.deleteRule", {
+                        keyPattern,
+                        defaultValue: "Delete rule for {{keyPattern}}",
+                    }), children: _jsx(Trash2, { className: "h-3.5 w-3.5", "aria-hidden": true }) }) })] }));
 }

package/components/settings/vault-tabs/types.d.ts

@@ -55,6 +55,12 @@ export interface VaultEntryMeta {
     lastUsed?: number;
     kind: "secret" | "value" | "reference";
 }
+/**
+ * Runtime guard for the `/api/secrets/inventory` element shape. Validates the
+ * fields the UI relies on so an unexpected server payload fails at the network
+ * boundary instead of deep inside render.
+ */
+export declare function isVaultEntryMeta(value: unknown): value is VaultEntryMeta;
 export type RoutingScopeKind = "agent" | "app" | "skill";
 export interface RoutingScope {
     kind: RoutingScopeKind;
@@ -80,7 +86,7 @@ export interface InstalledApp {
     displayName?: string;
 }
 export type SavedLoginSource = "in-house" | "1password" | "bitwarden";
-export interface UnifiedSavedLogin {
+export interface SavedLogin {
     source: SavedLoginSource;
     identifier: string;
     domain: string | null;

package/components/settings/vault-tabs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/settings/vault-tabs/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/settings/vault-tabs/types.ts"],"names":[],"mappings":"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"}

package/components/settings/vault-tabs/types.js

@@ -5,4 +5,33 @@
  * each piece once on open and forwards everything via props so each tab
  * never re-fetches data the modal already has.
  */
-export {};
+const VAULT_ENTRY_CATEGORIES = new Set([
+    "provider",
+    "plugin",
+    "wallet",
+    "credential",
+    "system",
+    "session",
+]);
+const VAULT_ENTRY_KINDS = new Set([
+    "secret",
+    "value",
+    "reference",
+]);
+/**
+ * Runtime guard for the `/api/secrets/inventory` element shape. Validates the
+ * fields the UI relies on so an unexpected server payload fails at the network
+ * boundary instead of deep inside render.
+ */
+export function isVaultEntryMeta(value) {
+    if (typeof value !== "object" || value === null)
+        return false;
+    const v = value;
+    return (typeof v.key === "string" &&
+        typeof v.category === "string" &&
+        VAULT_ENTRY_CATEGORIES.has(v.category) &&
+        typeof v.label === "string" &&
+        typeof v.hasProfiles === "boolean" &&
+        typeof v.kind === "string" &&
+        VAULT_ENTRY_KINDS.has(v.kind));
+}

package/components/setup/BootstrapStep.d.ts

@@ -0,0 +1,35 @@
+/**
+ * BootstrapStep — cloud-provisioned containers only.
+ *
+ * If the dashboard linked here with `#bootstrap=<token>`, the token is read
+ * once on mount, scrubbed from the URL, and exchanged automatically — no
+ * paste required. Otherwise the manual paste form is shown as a fallback.
+ *
+ * On success the returned session id is written to
+ * sessionStorage["eliza_session"] and the `onAdvance` callback fires.
+ *
+ * P1 will migrate the session to an HttpOnly cookie and retire sessionStorage.
+ * The key name is kept in sync with the cookie name planned for P1
+ * (eliza_session) so the P1 migration is a straightforward swap.
+ *
+ * Error contract (fail closed):
+ *   401 → token invalid / expired / already used, single-use, must rotate.
+ *   429 → rate limited.
+ *   5xx → server not ready.
+ *   network → surfaces to user; never treated as success.
+ */
+import type { BootstrapExchangeResult } from "../../api/client-agent";
+export interface BootstrapStepProps {
+    /**
+     * Called after a successful exchange. The caller is responsible for
+     * advancing startup.
+     */
+    onAdvance: () => void;
+    /**
+     * Injected exchange function — defaults to the real API client call but
+     * can be swapped in tests.
+     */
+    exchangeFn?: (token: string) => Promise<BootstrapExchangeResult>;
+}
+export declare function BootstrapStep({ onAdvance, exchangeFn }: BootstrapStepProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BootstrapStep.d.ts.map

package/components/setup/BootstrapStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BootstrapStep.d.ts","sourceRoot":"","sources":["../../../../../../src/components/setup/BootstrapStep.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AA4DtE,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,uBAAuB,CAAC,CAAC;CAClE;AAmCD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,kBAAkB,2CA4N1E"}

package/components/setup/BootstrapStep.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * BootstrapStep — cloud-provisioned containers only.
+ *
+ * If the dashboard linked here with `#bootstrap=<token>`, the token is read
+ * once on mount, scrubbed from the URL, and exchanged automatically — no
+ * paste required. Otherwise the manual paste form is shown as a fallback.
+ *
+ * On success the returned session id is written to
+ * sessionStorage["eliza_session"] and the `onAdvance` callback fires.
+ *
+ * P1 will migrate the session to an HttpOnly cookie and retire sessionStorage.
+ * The key name is kept in sync with the cookie name planned for P1
+ * (eliza_session) so the P1 migration is a straightforward swap.
+ *
+ * Error contract (fail closed):
+ *   401 → token invalid / expired / already used, single-use, must rotate.
+ *   429 → rate limited.
+ *   5xx → server not ready.
+ *   network → surfaces to user; never treated as success.
+ */
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { client } from "../../api/index.js";
+import { cn } from "../../lib/utils.js";
+import { startFreshFirstRunReload } from "../../platform/index.js";
+import { useTranslation, } from "../../state/TranslationContext.hooks.js";
+import { setupBodyTextShadowStyle, setupDescriptionClass, setupDetailStackClassName, setupEyebrowClass, setupFooterClass, setupHeaderBlockClass, setupHelperTextClassName, setupInputClassName, setupPrimaryActionClass, setupPrimaryActionTextShadowStyle, setupReadableTextFaintClassName, setupReadableTextMutedClassName, setupTextShadowStyle, setupTitleClass, } from "./setup-classes.js";
+import { SetupField } from "./setup-form-primitives.js";
+import { SetupStepDivider } from "./setup-step-chrome.js";
+const SESSION_STORAGE_KEY = "eliza_session";
+const MONO_FONT = "'Poppins', Arial, system-ui, sans-serif";
+const BOOTSTRAP_HASH_PARAM = "bootstrap";
+/**
+ * If the dashboard handed off the token via `#bootstrap=<token>`, read it once
+ * on mount so the container can auto-activate without a manual paste.
+ * Fragment (not query) so the token never reaches the server or referer logs.
+ */
+function readBootstrapTokenFromHash() {
+    if (typeof window === "undefined")
+        return null;
+    const hash = window.location.hash;
+    if (hash.length < 2)
+        return null;
+    const params = new URLSearchParams(hash.slice(1));
+    const value = params.get(BOOTSTRAP_HASH_PARAM);
+    return value && value.length > 0 ? value : null;
+}
+function scrubBootstrapTokenFromHash() {
+    if (typeof window === "undefined")
+        return;
+    const hash = window.location.hash;
+    if (hash.length < 2)
+        return;
+    const params = new URLSearchParams(hash.slice(1));
+    if (!params.has(BOOTSTRAP_HASH_PARAM))
+        return;
+    params.delete(BOOTSTRAP_HASH_PARAM);
+    const remaining = params.toString();
+    const newHash = remaining.length > 0 ? `#${remaining}` : "";
+    window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}${newHash}`);
+}
+function describeError(result, t) {
+    if (result.status === 429) {
+        return t("bootstrapstep.errorRateLimited", {
+            defaultValue: "Too many attempts — wait a minute and try again.",
+        });
+    }
+    if (result.status === 503) {
+        return t("bootstrapstep.errorServerNotReady", {
+            defaultValue: "The server is not ready. Reload the page and try again.",
+        });
+    }
+    if (result.status === 400) {
+        return t("bootstrapstep.errorNoToken", {
+            defaultValue: "No token provided. Paste the token from your Eliza Cloud dashboard.",
+        });
+    }
+    // 401 — invalid / expired / already used
+    return t("bootstrapstep.errorInvalidToken", {
+        defaultValue: "Token invalid, expired, or already used. Bootstrap tokens are single-use — rotate from your Eliza Cloud dashboard to get a new one.",
+    });
+}
+export function BootstrapStep({ onAdvance, exchangeFn }) {
+    const { t } = useTranslation();
+    const fieldId = useId().replace(/:/g, "");
+    const [token, setToken] = useState("");
+    // Lazy-init to "submitting" when an auto-activate token is present so the
+    // first paint shows "Verifying…" instead of an empty paste form.
+    const [submitState, setSubmitState] = useState(() => readBootstrapTokenFromHash() !== null
+        ? { phase: "submitting" }
+        : { phase: "idle" });
+    const inputRef = useRef(null);
+    const didAutoExchangeRef = useRef(false);
+    const doExchange = useCallback(async (rawToken) => {
+        setSubmitState({ phase: "submitting" });
+        let result;
+        try {
+            if (exchangeFn) {
+                result = await exchangeFn(rawToken);
+            }
+            else {
+                // `client` is statically imported above. The `exchangeFn` injection
+                // path remains the test seam; this branch is the production path.
+                result = await client.postBootstrapExchange(rawToken);
+            }
+        }
+        catch (err) {
+            // Network down or unexpected throw — surface to user, do not proceed.
+            const message = err instanceof Error && err.message
+                ? err.message
+                : t("bootstrapstep.errorNetwork", {
+                    defaultValue: "Network error — check your connection and try again.",
+                });
+            setSubmitState({ phase: "error", message, tone: "danger" });
+            return;
+        }
+        if (result.ok === false) {
+            setSubmitState({
+                phase: "error",
+                message: describeError(result, t),
+                tone: "danger",
+            });
+            return;
+        }
+        // P0 bridge: write session id to sessionStorage. P1 replaces this with
+        // an HttpOnly cookie set by the server on the exchange response.
+        try {
+            sessionStorage.setItem(SESSION_STORAGE_KEY, result.sessionId);
+        }
+        catch {
+            // sessionStorage unavailable (e.g. private browsing on some browsers).
+            // Session is still in memory for this page load; startup can advance.
+        }
+        client.setToken(result.sessionId);
+        setSubmitState({ phase: "success" });
+        onAdvance();
+    }, [exchangeFn, onAdvance, t]);
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        const trimmed = token.trim();
+        if (!trimmed)
+            return;
+        void doExchange(trimmed);
+    }, [token, doExchange]);
+    useEffect(() => {
+        if (didAutoExchangeRef.current)
+            return;
+        const hashToken = readBootstrapTokenFromHash();
+        if (!hashToken)
+            return;
+        didAutoExchangeRef.current = true;
+        // Scrub before exchange so the token never lingers in window.history,
+        // even if exchange throws or the user navigates away mid-flight.
+        scrubBootstrapTokenFromHash();
+        void doExchange(hashToken);
+    }, [doExchange]);
+    const isSubmitting = submitState.phase === "submitting";
+    return (_jsxs("form", { onSubmit: handleSubmit, "aria-label": t("bootstrapstep.formLabel", {
+            defaultValue: "Bootstrap token entry",
+        }), className: "flex w-full flex-col gap-6", children: [_jsxs("div", { className: setupHeaderBlockClass, children: [_jsx("p", { className: setupEyebrowClass, style: setupBodyTextShadowStyle, children: "Eliza Cloud" }), _jsx(SetupStepDivider, {}), _jsx("h1", { className: setupTitleClass, style: setupTextShadowStyle, children: t("bootstrapstep.title", {
+                            defaultValue: "Finish setting up your container",
+                        }) }), _jsx("p", { className: setupDescriptionClass, style: setupBodyTextShadowStyle, children: t("bootstrapstep.description", {
+                            defaultValue: "Paste the bootstrap token from your Eliza Cloud dashboard to activate this container.",
+                        }) })] }), _jsx("div", { className: setupDetailStackClassName, children: _jsx(SetupField, { controlId: fieldId, label: t("bootstrapstep.tokenLabel", {
+                        defaultValue: "Bootstrap token",
+                    }), message: submitState.phase === "error" ? submitState.message : undefined, messageTone: submitState.phase === "error" ? submitState.tone : undefined, children: ({ describedBy, invalid }) => (_jsx("input", { ref: inputRef, id: fieldId, type: "password", autoComplete: "off", spellCheck: false, placeholder: t("bootstrapstep.tokenPlaceholder", {
+                            defaultValue: "Paste your bootstrap token here",
+                        }), value: token, onChange: (e) => {
+                            setToken(e.target.value);
+                            if (submitState.phase === "error") {
+                                setSubmitState({ phase: "idle" });
+                            }
+                        }, disabled: isSubmitting, "aria-invalid": invalid, "aria-describedby": describedBy, className: cn(setupInputClassName, invalid &&
+                            "border-[var(--danger)] focus-visible:border-[var(--danger)]") })) }) }), _jsx("div", { className: cn("rounded-sm px-4 py-3", "border border-[rgba(240,185,11,0.18)] bg-[rgba(240,185,11,0.07)]"), children: _jsxs("p", { className: cn(setupHelperTextClassName, "leading-relaxed"), style: setupBodyTextShadowStyle, children: [_jsx("span", { className: setupReadableTextMutedClassName, style: { fontFamily: MONO_FONT }, children: t("bootstrapstep.whereToGet", {
+                                defaultValue: "Where do I get this?",
+                            }) }), " ", _jsxs("span", { className: setupReadableTextFaintClassName, children: [t("bootstrapstep.whereToGetDetail", {
+                                    defaultValue: "Open your Eliza Cloud dashboard, select this container, and copy the token shown under “Bootstrap token”. It is valid for 24 hours and can only be used once.",
+                                }), " ", _jsx("a", { href: "/docs/security/bootstrap-token", target: "_blank", rel: "noopener noreferrer", className: "underline hover:text-[var(--first-run-text-muted)] transition-colors", children: t("bootstrapstep.learnMore", { defaultValue: "Learn more" }) })] })] }) }), _jsxs("div", { className: cn(setupFooterClass, "justify-between"), children: [_jsx("button", { type: "button", onClick: () => startFreshFirstRunReload(), className: "text-sm underline underline-offset-2 text-[var(--first-run-text-muted)] transition-opacity hover:opacity-80", children: t("bootstrapstep.startOver", { defaultValue: "Start over" }) }), _jsx("button", { type: "submit", disabled: isSubmitting || !token.trim(), className: setupPrimaryActionClass, style: setupPrimaryActionTextShadowStyle, children: isSubmitting
+                            ? t("bootstrapstep.verifying", { defaultValue: "Verifying…" })
+                            : t("bootstrapstep.activate", { defaultValue: "Activate" }) })] })] }));
+}

package/components/setup/setup-classes.d.ts

@@ -0,0 +1,28 @@
+export declare const setupDetailStackClassName = "flex w-full flex-col gap-4 text-left";
+export declare const setupReadableTextStrongClassName = "text-[var(--first-run-text-strong)] [text-shadow:var(--first-run-text-shadow-strong)] [-webkit-text-stroke:0.3px_var(--first-run-text-stroke)]";
+export declare const setupReadableTextPrimaryClassName = "text-[var(--first-run-text-primary)] [text-shadow:var(--first-run-text-shadow-primary)]";
+export declare const setupReadableTextMutedClassName = "text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupReadableTextSubtleClassName = "text-[var(--first-run-text-subtle)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupReadableTextFaintClassName = "text-[var(--first-run-text-faint)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupHelperTextClassName = "text-xs leading-relaxed text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupFieldLabelClassName = "text-xs font-semibold uppercase tracking-[0.14em] text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupTextSupportClassName = "rounded-sm bg-[var(--first-run-text-support-bg)] px-3 py-2 my-2";
+export declare const setupInputClassName = "h-12 w-full rounded-sm px-4 text-left text-[var(--first-run-text-primary)] [text-shadow:var(--first-run-text-shadow-primary)] transition-[border-color,background-color] duration-200 placeholder:text-[var(--first-run-text-subtle)] focus-visible:border-[var(--first-run-field-focus-border)] focus-visible:ring-0 focus-visible:ring-offset-0 bg-[var(--first-run-input-bg)]";
+export declare const setupEyebrowClass = "text-center text-xs font-semibold uppercase tracking-[0.3em] text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupTitleClass = "text-center text-xl font-light leading-[1.4] text-[var(--first-run-text-strong)] [text-shadow:var(--first-run-text-shadow-strong)] [-webkit-text-stroke:0.3px_var(--first-run-text-stroke)]";
+export declare const setupDescriptionClass = "mx-auto max-w-[36ch] text-center text-sm leading-relaxed text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)] rounded-sm bg-[var(--first-run-text-support-bg)] px-3 py-2 my-2";
+export declare const setupHeaderBlockClass = "mb-5 max-md:mb-4";
+export declare const setupFooterClass = "mt-6 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 pt-4";
+export declare const setupSecondaryActionClass = "inline-flex min-h-touch min-w-touch items-center justify-center gap-2 rounded-sm bg-transparent px-3 py-2 text-xs-tight uppercase tracking-[0.14em] transition-[color,background-color] duration-300 hover:bg-[var(--first-run-secondary-hover-bg)] hover:text-[var(--first-run-text-strong)] active:bg-[var(--first-run-secondary-pressed-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--first-run-secondary-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:pointer-events-none disabled:opacity-50 text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export declare const setupPrimaryActionClass = "group relative inline-flex min-h-touch items-center justify-center gap-2 overflow-hidden rounded-sm bg-[var(--first-run-accent-bg)] px-8 py-3 text-xs-tight font-semibold uppercase tracking-[0.18em] text-[var(--first-run-accent-foreground)] transition-colors duration-300 hover:bg-[var(--first-run-accent-bg-hover)] disabled:cursor-not-allowed disabled:opacity-40";
+export declare const setupTextShadowStyle: {
+    readonly textShadow: "var(--first-run-text-shadow-strong)";
+    readonly WebkitTextStroke: "0.35px var(--first-run-text-stroke)";
+};
+export declare const setupBodyTextShadowStyle: {
+    readonly textShadow: "var(--first-run-text-shadow-muted)";
+};
+export declare const setupPrimaryActionTextShadowStyle: {
+    readonly textShadow: "0 1px 5px rgba(3,5,10,0.38)";
+};
+//# sourceMappingURL=setup-classes.d.ts.map

package/components/setup/setup-classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-classes.d.ts","sourceRoot":"","sources":["../../../../../../src/components/setup/setup-classes.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,yBAAyB,yCAAyC,CAAC;AAChF,eAAO,MAAM,gCAAgC,mJACqG,CAAC;AACnJ,eAAO,MAAM,iCAAiC,4FAC6C,CAAC;AAC5F,eAAO,MAAM,+BAA+B,wFAC2C,CAAC;AACxF,eAAO,MAAM,gCAAgC,yFAC2C,CAAC;AACzF,eAAO,MAAM,+BAA+B,wFAC2C,CAAC;AACxF,eAAO,MAAM,wBAAwB,gHAA+D,CAAC;AACrG,eAAO,MAAM,wBAAwB,0IAAyF,CAAC;AAC/H,eAAO,MAAM,yBAAyB,oEAC6B,CAAC;AAEpE,eAAO,MAAM,mBAAmB,qXAAiU,CAAC;AAElW,eAAO,MAAM,iBAAiB,qJAAoG,CAAC;AACnI,eAAO,MAAM,eAAe,gMAAqF,CAAC;AAClH,eAAO,MAAM,qBAAqB,iNAA6H,CAAC;AAChK,eAAO,MAAM,qBAAqB,qBAAqB,CAAC;AACxD,eAAO,MAAM,gBAAgB,0EAC4C,CAAC;AAC1E,eAAO,MAAM,yBAAyB,soBAAqlB,CAAC;AAC5nB,eAAO,MAAM,uBAAuB,+WAC0U,CAAC;AAE/W,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AACX,eAAO,MAAM,wBAAwB;;CAE3B,CAAC;AACX,eAAO,MAAM,iCAAiC;;CAEpC,CAAC"}

package/components/setup/setup-classes.js

@@ -0,0 +1,32 @@
+// Shared first-run / setup styling tokens. Pure string + style constants kept
+// out of the component modules so those stay Fast-Refresh-clean: a module that
+// exports a component alongside an object/array export (e.g. a style object)
+// breaks the React refresh boundary and forces a full reload.
+export const setupDetailStackClassName = "flex w-full flex-col gap-4 text-left";
+export const setupReadableTextStrongClassName = "text-[var(--first-run-text-strong)] [text-shadow:var(--first-run-text-shadow-strong)] [-webkit-text-stroke:0.3px_var(--first-run-text-stroke)]";
+export const setupReadableTextPrimaryClassName = "text-[var(--first-run-text-primary)] [text-shadow:var(--first-run-text-shadow-primary)]";
+export const setupReadableTextMutedClassName = "text-[var(--first-run-text-muted)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export const setupReadableTextSubtleClassName = "text-[var(--first-run-text-subtle)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export const setupReadableTextFaintClassName = "text-[var(--first-run-text-faint)] [text-shadow:var(--first-run-text-shadow-muted)]";
+export const setupHelperTextClassName = `text-xs leading-relaxed ${setupReadableTextMutedClassName}`;
+export const setupFieldLabelClassName = `text-xs font-semibold uppercase tracking-[0.14em] ${setupReadableTextMutedClassName}`;
+export const setupTextSupportClassName = "rounded-sm bg-[var(--first-run-text-support-bg)] px-3 py-2 my-2";
+const setupInputSurfaceClassName = "bg-[var(--first-run-input-bg)]";
+export const setupInputClassName = `h-12 w-full rounded-sm px-4 text-left ${setupReadableTextPrimaryClassName} transition-[border-color,background-color] duration-200 placeholder:text-[var(--first-run-text-subtle)] focus-visible:border-[var(--first-run-field-focus-border)] focus-visible:ring-0 focus-visible:ring-offset-0 ${setupInputSurfaceClassName}`;
+export const setupEyebrowClass = `text-center text-xs font-semibold uppercase tracking-[0.3em] ${setupReadableTextMutedClassName}`;
+export const setupTitleClass = `text-center text-xl font-light leading-[1.4] ${setupReadableTextStrongClassName}`;
+export const setupDescriptionClass = `mx-auto max-w-[36ch] text-center text-sm leading-relaxed ${setupReadableTextMutedClassName} ${setupTextSupportClassName}`;
+export const setupHeaderBlockClass = "mb-5 max-md:mb-4";
+export const setupFooterClass = "mt-6 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 pt-4";
+export const setupSecondaryActionClass = `inline-flex min-h-touch min-w-touch items-center justify-center gap-2 rounded-sm bg-transparent px-3 py-2 text-xs-tight uppercase tracking-[0.14em] transition-[color,background-color] duration-300 hover:bg-[var(--first-run-secondary-hover-bg)] hover:text-[var(--first-run-text-strong)] active:bg-[var(--first-run-secondary-pressed-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--first-run-secondary-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:pointer-events-none disabled:opacity-50 ${setupReadableTextMutedClassName}`;
+export const setupPrimaryActionClass = "group relative inline-flex min-h-touch items-center justify-center gap-2 overflow-hidden rounded-sm bg-[var(--first-run-accent-bg)] px-8 py-3 text-xs-tight font-semibold uppercase tracking-[0.18em] text-[var(--first-run-accent-foreground)] transition-colors duration-300 hover:bg-[var(--first-run-accent-bg-hover)] disabled:cursor-not-allowed disabled:opacity-40";
+export const setupTextShadowStyle = {
+    textShadow: "var(--first-run-text-shadow-strong)",
+    WebkitTextStroke: "0.35px var(--first-run-text-stroke)",
+};
+export const setupBodyTextShadowStyle = {
+    textShadow: "var(--first-run-text-shadow-muted)",
+};
+export const setupPrimaryActionTextShadowStyle = {
+    textShadow: "0 1px 5px rgba(3,5,10,0.38)",
+};