@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/settings/permission-types.js

@@ -0,0 +1,319 @@
+export const SYSTEM_PERMISSIONS = [
+    {
+        id: "accessibility",
+        name: "Accessibility",
+        nameKey: "permissionssection.permission.accessibility.name",
+        description: "Control mouse, keyboard, and interact with other applications",
+        descriptionKey: "permissionssection.permission.accessibility.description",
+        icon: "cursor",
+        platforms: ["darwin"],
+        requiredForFeatures: ["computeruse", "browser"],
+    },
+    {
+        id: "screen-recording",
+        name: "Screen Recording",
+        nameKey: "permissionssection.permission.screenRecording.name",
+        description: "Capture screen content for screenshots and vision",
+        descriptionKey: "permissionssection.permission.screenRecording.description",
+        icon: "monitor",
+        platforms: ["darwin"],
+        requiredForFeatures: ["computeruse", "vision"],
+    },
+    {
+        id: "microphone",
+        name: "Microphone",
+        nameKey: "permissionssection.permission.microphone.name",
+        description: "Voice input for talk mode and speech recognition",
+        descriptionKey: "permissionssection.permission.microphone.description",
+        icon: "mic",
+        platforms: ["darwin", "win32", "linux"],
+        requiredForFeatures: ["talkmode", "voice"],
+    },
+    {
+        id: "camera",
+        name: "Camera",
+        nameKey: "permissionssection.permission.camera.name",
+        description: "Video input for vision and video capture",
+        descriptionKey: "permissionssection.permission.camera.description",
+        icon: "camera",
+        platforms: ["darwin", "win32", "linux"],
+        requiredForFeatures: ["camera", "vision"],
+    },
+    {
+        id: "shell",
+        name: "Shell Access",
+        nameKey: "permissionssection.permission.shell.name",
+        description: "Execute terminal commands and scripts",
+        descriptionKey: "permissionssection.permission.shell.description",
+        icon: "terminal",
+        platforms: ["darwin", "win32", "linux"],
+        requiredForFeatures: ["shell"],
+    },
+    {
+        id: "website-blocking",
+        name: "Website Blocking",
+        nameKey: "permissionssection.permission.websiteBlocking.name",
+        description: "Edit the system hosts file to block distracting websites. This may require admin/root approval each time.",
+        descriptionKey: "permissionssection.permission.websiteBlocking.description",
+        icon: "shield-ban",
+        platforms: ["darwin", "win32", "linux"],
+        requiredForFeatures: ["website-blocker"],
+    },
+    {
+        id: "location",
+        name: "Location",
+        nameKey: "permissionssection.permission.location.name",
+        description: "Read the device's current location for travel-time, time-zone, and place-aware planning. Mobile uses GPS; desktop falls back to coarse IP geolocation.",
+        descriptionKey: "permissionssection.permission.location.description",
+        icon: "map-pin",
+        platforms: ["darwin", "win32", "linux"],
+        requiredForFeatures: ["travel-time", "location"],
+    },
+    {
+        id: "reminders",
+        name: "Apple Reminders",
+        nameKey: "permissionssection.permission.reminders.name",
+        description: "Create and read reminders for LifeOps tasks and follow-ups",
+        descriptionKey: "permissionssection.permission.reminders.description",
+        icon: "list-todo",
+        platforms: ["darwin"],
+        requiredForFeatures: ["lifeops", "reminders"],
+    },
+    {
+        id: "calendar",
+        name: "Apple Calendar",
+        nameKey: "permissionssection.permission.calendar.name",
+        description: "Read and write calendar events for scheduling",
+        descriptionKey: "permissionssection.permission.calendar.description",
+        icon: "calendar",
+        platforms: ["darwin"],
+        requiredForFeatures: ["lifeops", "calendar"],
+    },
+    {
+        id: "health",
+        name: "Apple Health",
+        nameKey: "permissionssection.permission.health.name",
+        description: "Read HealthKit data, including sleep from paired devices",
+        descriptionKey: "permissionssection.permission.health.description",
+        icon: "heart-pulse",
+        platforms: ["darwin"],
+        requiredForFeatures: ["lifeops", "health", "sleep"],
+    },
+    {
+        id: "screentime",
+        name: "Screen Time",
+        nameKey: "permissionssection.permission.screentime.name",
+        description: "Read app and device usage signals for LifeOps",
+        descriptionKey: "permissionssection.permission.screentime.description",
+        icon: "hourglass",
+        platforms: ["darwin"],
+        requiredForFeatures: ["lifeops", "screentime"],
+    },
+    {
+        id: "contacts",
+        name: "Contacts",
+        nameKey: "permissionssection.permission.contacts.name",
+        description: "Read contacts for person-aware reminders and follow-ups",
+        descriptionKey: "permissionssection.permission.contacts.description",
+        icon: "contact",
+        platforms: ["darwin"],
+        requiredForFeatures: ["lifeops", "contacts"],
+    },
+    {
+        id: "notes",
+        name: "Apple Notes",
+        nameKey: "permissionssection.permission.notes.name",
+        description: "Read and create notes through user-approved automation",
+        descriptionKey: "permissionssection.permission.notes.description",
+        icon: "notebook-tabs",
+        platforms: ["darwin"],
+        requiredForFeatures: ["lifeops", "notes"],
+    },
+    {
+        id: "notifications",
+        name: "Notifications",
+        nameKey: "permissionssection.permission.notifications.name",
+        description: "Show system notifications for reminders and background results",
+        descriptionKey: "permissionssection.permission.notifications.description",
+        icon: "bell",
+        platforms: ["darwin", "win32", "linux"],
+        requiredForFeatures: ["notifications", "lifeops"],
+    },
+    {
+        id: "full-disk",
+        name: "Full Disk Access",
+        nameKey: "permissionssection.permission.fullDisk.name",
+        description: "Read protected local app data when explicitly enabled",
+        descriptionKey: "permissionssection.permission.fullDisk.description",
+        icon: "hard-drive",
+        platforms: ["darwin"],
+        requiredForFeatures: ["imessage", "local-data"],
+    },
+    {
+        id: "automation",
+        name: "Automation",
+        nameKey: "permissionssection.permission.automation.name",
+        description: "Control other macOS apps through Apple Events",
+        descriptionKey: "permissionssection.permission.automation.description",
+        icon: "workflow",
+        platforms: ["darwin"],
+        requiredForFeatures: ["lifeops", "automation"],
+    },
+];
+export const CAPABILITIES = [
+    {
+        id: "browser",
+        label: "Browser Control",
+        labelKey: "permissionssection.capability.browser.label",
+        description: "Automated web browsing and interaction",
+        descriptionKey: "permissionssection.capability.browser.description",
+        requiredPermissions: ["accessibility"],
+    },
+    {
+        id: "computeruse",
+        label: "Computer Use",
+        labelKey: "permissionssection.capability.computerUse.label",
+        description: "Full desktop control with mouse and keyboard",
+        descriptionKey: "permissionssection.capability.computerUse.description",
+        requiredPermissions: ["accessibility", "screen-recording"],
+    },
+    {
+        id: "vision",
+        label: "Vision",
+        labelKey: "permissionssection.capability.vision.label",
+        description: "Screen capture and visual analysis",
+        descriptionKey: "permissionssection.capability.vision.description",
+        requiredPermissions: ["screen-recording"],
+    },
+    {
+        id: "coding-agent",
+        label: "Task Agent Swarms",
+        labelKey: "permissionssection.capability.codingAgent.label",
+        description: "Orchestrate open-ended CLI task agents (Claude Code, Gemini CLI, Codex, Aider, Pi)",
+        descriptionKey: "permissionssection.capability.codingAgent.description",
+        requiredPermissions: [],
+    },
+];
+export const PERMISSION_BADGE_LABELS = {
+    granted: {
+        tone: "success",
+        labelKey: "permissionssection.badge.granted",
+        defaultLabel: "Granted",
+    },
+    denied: {
+        tone: "danger",
+        labelKey: "permissionssection.badge.denied",
+        defaultLabel: "Denied",
+    },
+    "not-determined": {
+        tone: "warning",
+        labelKey: "permissionssection.badge.notDetermined",
+        defaultLabel: "Not Set",
+    },
+    restricted: {
+        tone: "muted",
+        labelKey: "permissionssection.badge.restricted",
+        defaultLabel: "Restricted",
+    },
+    "not-applicable": {
+        tone: "muted",
+        labelKey: "permissionssection.badge.notApplicable",
+        defaultLabel: "N/A",
+    },
+};
+/** Reusable settings-panel Tailwind class names. */
+export const SETTINGS_PANEL_CLASSNAME = "rounded-2xl border border-border/60 bg-bg/40 p-4 space-y-4";
+export const SETTINGS_PANEL_HEADER_CLASSNAME = "flex flex-wrap items-start justify-between gap-3";
+export const SETTINGS_PANEL_ACTIONS_CLASSNAME = "flex items-center gap-2";
+export const SETTINGS_REFRESH_DELAYS_MS = [1500, 4000];
+export function translateWithFallback(t, key, fallback) {
+    const value = t(key);
+    return !value || value === key ? fallback : value;
+}
+export function getPermissionAction(t, id, status, canRequest, platform) {
+    if (status === "granted" || status === "not-applicable") {
+        return null;
+    }
+    const usesWindowsPrivacySettings = platform === "win32" &&
+        (id === "microphone" ||
+            id === "camera" ||
+            id === "location" ||
+            id === "notifications");
+    if (status === "not-determined" && canRequest) {
+        if (id === "website-blocking") {
+            const label = platform === "ios"
+                ? translateWithFallback(t, "permissionssection.OpenSettings", "Open Settings")
+                : translateWithFallback(t, "permissionssection.RequestApproval", "Request Approval");
+            return {
+                ariaLabelPrefix: label,
+                label,
+                type: "request",
+            };
+        }
+        const label = usesWindowsPrivacySettings
+            ? translateWithFallback(t, "permissionssection.OpenPrivacySettings", "Open Privacy Settings")
+            : id === "camera"
+                ? translateWithFallback(t, "permissionssection.CheckAccess", "Check Access")
+                : translateWithFallback(t, "permissionssection.Grant", "Grant");
+        return {
+            ariaLabelPrefix: label,
+            label,
+            type: usesWindowsPrivacySettings ? "settings" : "request",
+        };
+    }
+    if (id === "website-blocking") {
+        const label = platform === "ios"
+            ? translateWithFallback(t, "permissionssection.OpenSettings", "Open Settings")
+            : translateWithFallback(t, "permissionssection.OpenHostsFile", "Open Hosts File");
+        return {
+            ariaLabelPrefix: label,
+            label,
+            type: "settings",
+        };
+    }
+    const label = translateWithFallback(t, "permissionssection.OpenSettings", "Open Settings");
+    return {
+        ariaLabelPrefix: label,
+        label,
+        type: "settings",
+    };
+}
+export function getPermissionBadge(t, id, status, platform) {
+    if (status === "denied") {
+        if (id === "shell") {
+            return {
+                tone: "danger",
+                label: translateWithFallback(t, "permissionssection.badge.off", "Off"),
+            };
+        }
+        if (id === "website-blocking") {
+            return {
+                tone: "danger",
+                label: translateWithFallback(t, "permissionssection.badge.needsAdmin", "Needs Admin"),
+            };
+        }
+        if (platform === "darwin") {
+            return {
+                tone: "danger",
+                label: translateWithFallback(t, "permissionssection.badge.offInSettings", "Off in Settings"),
+            };
+        }
+    }
+    if (status === "not-determined") {
+        if (id === "website-blocking") {
+            return {
+                tone: "warning",
+                label: translateWithFallback(t, "permissionssection.badge.needsApproval", "Needs Approval"),
+            };
+        }
+        return {
+            tone: "warning",
+            label: translateWithFallback(t, "permissionssection.badge.notAsked", "Not Asked"),
+        };
+    }
+    const badge = PERMISSION_BADGE_LABELS[status];
+    return {
+        tone: badge.tone,
+        label: translateWithFallback(t, badge.labelKey, badge.defaultLabel),
+    };
+}

package/components/settings/settings-control-primitives.d.ts

@@ -0,0 +1,11 @@
+import { FieldDescription, FieldLabel } from "@elizaos/ui";
+import type * as React from "react";
+export declare function SettingsField({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsFieldLabel({ className, ...props }: React.ComponentPropsWithoutRef<typeof FieldLabel>): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsFieldDescription({ className, ...props }: React.ComponentPropsWithoutRef<typeof FieldDescription>): import("react/jsx-runtime").JSX.Element;
+export declare function AdvancedSettingsDisclosure({ title, children, className, }: {
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=settings-control-primitives.d.ts.map

package/components/settings/settings-control-primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-control-primitives.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/settings-control-primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAEtC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,UAAU,CAAC,2CAOnD;AAED,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,2CAOzD;AAED,wBAAgB,0BAA0B,CAAC,EACzC,KAAkB,EAClB,QAAQ,EACR,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAcA"}

package/components/settings/settings-control-primitives.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, Field, FieldDescription, FieldLabel } from "@elizaos/ui";
+export function SettingsField({ className, ...props }) {
+    return _jsx(Field, { className: cn("gap-1.5", className), ...props });
+}
+export function SettingsFieldLabel({ className, ...props }) {
+    return (_jsx(FieldLabel, { className: cn("text-xs font-semibold text-txt", className), ...props }));
+}
+export function SettingsFieldDescription({ className, ...props }) {
+    return (_jsx(FieldDescription, { className: cn("text-xs-tight text-muted", className), ...props }));
+}
+export function AdvancedSettingsDisclosure({ title = "Advanced", children, className, }) {
+    return (_jsxs("details", { className: cn("group rounded-xl border border-border/60 bg-card/45 px-3 py-2", className), children: [_jsx("summary", { className: "cursor-pointer select-none list-none text-xs font-semibold uppercase tracking-wide text-muted transition-colors hover:text-txt", children: title }), _jsx("div", { className: "mt-3 border-t border-border/40 pt-3", children: children })] }));
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Logins tab — saved-logins list (in-house + 1Password + Bitwarden) with
+ * the in-house "Add login" form. Per-source rows; external rows are
+ * read-only links back to the password manager.
+ *
+ * Extracted from the original `SecretsManagerSection.tsx` `SavedLoginsPanel`.
+ */
+export declare function LoginsTab(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoginsTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoginsTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/settings/vault-tabs/LoginsTab.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAuCH,wBAAgB,SAAS,4CAiXxB"}

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

@@ -0,0 +1,189 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Logins tab — saved-logins list (in-house + 1Password + Bitwarden) with
+ * the in-house "Add login" form. Per-source rows; external rows are
+ * read-only links back to the password manager.
+ *
+ * Extracted from the original `SecretsManagerSection.tsx` `SavedLoginsPanel`.
+ */
+import { Button, Input, Label } from "@elizaos/ui";
+import { Bot, ExternalLink, Loader2, Plus, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+const SOURCE_LABEL = {
+    "in-house": "Local",
+    "1password": "1Password",
+    bitwarden: "Bitwarden",
+};
+const SOURCE_PILL_CLASS = {
+    "in-house": "border-accent/40 bg-accent/10 text-accent",
+    "1password": "border-info/40 bg-info/10 text-info",
+    bitwarden: "border-warn/40 bg-warn/10 text-warn",
+};
+function relativeAge(ms) {
+    if (!Number.isFinite(ms) || ms <= 0)
+        return "—";
+    const elapsed = Date.now() - ms;
+    if (elapsed < 60_000)
+        return "just now";
+    const minutes = Math.floor(elapsed / 60_000);
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 30)
+        return `${days}d ago`;
+    const months = Math.floor(days / 30);
+    if (months < 12)
+        return `${months}mo ago`;
+    const years = Math.floor(months / 12);
+    return `${years}y ago`;
+}
+export function LoginsTab() {
+    const [logins, setLogins] = useState(null);
+    const [failures, setFailures] = useState([]);
+    const [error, setError] = useState(null);
+    const [showAdd, setShowAdd] = useState(false);
+    const [addDomain, setAddDomain] = useState("");
+    const [addUsername, setAddUsername] = useState("");
+    const [addPassword, setAddPassword] = useState("");
+    const [submitting, setSubmitting] = useState(false);
+    const [filter, setFilter] = useState("");
+    // Per-domain "agent may autofill without prompting" map. Backed by
+    // `creds.<domain>.:autoallow` in the vault — the same flag the
+    // user-driven autofill consent path uses, and the only authorization
+    // the BROWSER action (autofill-login subaction) will accept.
+    const [autoallowMap, setAutoallowMap] = useState({});
+    const loadAutoallowFor = useCallback(async (domains) => {
+        const next = {};
+        // Single-flight: one fetch per unique domain. Domains are usually
+        // <50 in a saved-logins list, well under any rate concern.
+        // Per-domain failures default to false (never autoallow on a
+        // missing read) and are not surfaced to the error banner — the
+        // toggle row falls back to "off" silently rather than blocking
+        // the rest of the UI.
+        const unique = Array.from(new Set(domains.filter(Boolean)));
+        const responses = await Promise.all(unique.map(async (d) => {
+            const res = await fetch(`/api/secrets/logins/${encodeURIComponent(d)}/autoallow`);
+            if (!res.ok)
+                return [d, false];
+            const json = (await res.json());
+            return [d, json?.allowed === true];
+        }));
+        for (const [d, allowed] of responses)
+            next[d] = allowed;
+        setAutoallowMap(next);
+    }, []);
+    const load = useCallback(async () => {
+        setError(null);
+        setLogins(null);
+        try {
+            const res = await fetch("/api/secrets/logins");
+            if (!res.ok)
+                throw new Error(`HTTP ${res.status}`);
+            const json = (await res.json());
+            setLogins(json.logins);
+            setFailures(json.failures ?? []);
+            const domains = json.logins
+                .map((l) => l.domain)
+                .filter((d) => typeof d === "string" && d.length > 0);
+            // Best-effort: a transient 404 / 500 on the autoallow fetch
+            // shouldn't blank out the logins list. Any failure here means
+            // the toggles default to "off" until the next refresh.
+            try {
+                await loadAutoallowFor(domains);
+            }
+            catch {
+                setAutoallowMap({});
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "load failed");
+            setLogins([]);
+            setFailures([]);
+        }
+    }, [loadAutoallowFor]);
+    const onToggleAutoallow = useCallback(async (domain, next) => {
+        // Optimistic update — UI feels instant, falls back to the real
+        // value on error.
+        setAutoallowMap((prev) => ({ ...prev, [domain]: next }));
+        const res = await fetch(`/api/secrets/logins/${encodeURIComponent(domain)}/autoallow`, {
+            method: "PUT",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ allowed: next }),
+        });
+        if (!res.ok) {
+            setError(`HTTP ${res.status} (autoallow update failed)`);
+            setAutoallowMap((prev) => ({ ...prev, [domain]: !next }));
+        }
+    }, []);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    const onAdd = useCallback(async (event) => {
+        event.preventDefault();
+        if (!addDomain.trim() || !addUsername || !addPassword)
+            return;
+        setSubmitting(true);
+        setError(null);
+        const res = await fetch("/api/secrets/logins", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({
+                domain: addDomain.trim(),
+                username: addUsername,
+                password: addPassword,
+            }),
+        });
+        setSubmitting(false);
+        if (!res.ok) {
+            setError(`HTTP ${res.status}`);
+            return;
+        }
+        setAddDomain("");
+        setAddUsername("");
+        setAddPassword("");
+        setShowAdd(false);
+        await load();
+    }, [addDomain, addUsername, addPassword, load]);
+    const onDelete = useCallback(async (login) => {
+        if (login.source !== "in-house")
+            return;
+        const ok = window.confirm(`Delete saved login for ${login.domain ?? "—"} (${login.username})?`);
+        if (!ok)
+            return;
+        setError(null);
+        const colon = login.identifier.indexOf(":");
+        const domainPart = colon > 0 ? login.identifier.slice(0, colon) : "";
+        const userPart = colon > 0 ? login.identifier.slice(colon + 1) : "";
+        const path = `/api/secrets/logins/${encodeURIComponent(domainPart)}/${encodeURIComponent(userPart)}`;
+        const res = await fetch(path, { method: "DELETE" });
+        if (!res.ok) {
+            setError(`HTTP ${res.status}`);
+            return;
+        }
+        await load();
+    }, [load]);
+    const filtered = (logins ?? []).filter((l) => {
+        if (filter.trim().length === 0)
+            return true;
+        const needle = filter.trim().toLowerCase();
+        return (l.title.toLowerCase().includes(needle) ||
+            l.username.toLowerCase().includes(needle) ||
+            (l.domain ?? "").toLowerCase().includes(needle));
+    });
+    return (_jsxs("section", { "data-testid": "saved-logins-panel", 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: "Saved logins" }), _jsx("p", { className: "text-2xs text-muted", children: "Browser autofill from local vault, 1Password, and Bitwarden." })] }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-8 shrink-0 gap-1 rounded-md px-2", onClick: () => setShowAdd((v) => !v), children: [_jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": true }), "Add login"] })] }), error && (_jsx("div", { "aria-live": "polite", className: "rounded-md border border-danger/40 bg-danger/10 px-3 py-1.5 text-xs text-danger", children: error })), failures.length > 0 && (_jsx("div", { "aria-live": "polite", "data-testid": "saved-logins-failures", className: "space-y-1", children: failures.map((f) => (_jsxs("div", { className: "rounded-md border border-warn/40 bg-warn/10 px-3 py-1.5 text-2xs text-warn", children: [SOURCE_LABEL[f.source], " failed to load: ", f.message] }, f.source))) })), showAdd && (_jsxs("form", { onSubmit: onAdd, className: "space-y-2 rounded-md border border-border/50 bg-card/30 p-2", "data-testid": "saved-logins-add-form", children: [_jsx("p", { className: "text-2xs text-muted", children: "Saved to local (encrypted) vault. To add to 1Password or Bitwarden, use that app directly." }), _jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: "Domain" }), _jsx(Input, { value: addDomain, onChange: (e) => setAddDomain(e.target.value), placeholder: "github.com", className: "h-8 text-xs", autoComplete: "off", required: true })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: "Username / email" }), _jsx(Input, { value: addUsername, onChange: (e) => setAddUsername(e.target.value), placeholder: "alice@example.com", className: "h-8 text-xs", autoComplete: "off", required: true })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "text-2xs text-muted", children: "Password" }), _jsx(Input, { type: "password", value: addPassword, onChange: (e) => setAddPassword(e.target.value), className: "h-8 text-xs", autoComplete: "new-password", required: true })] }), _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: submitting, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "default", size: "sm", className: "h-7 gap-1 rounded-md px-3 text-xs", disabled: submitting || !addDomain.trim() || !addUsername || !addPassword, children: submitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }), "Saving\u2026"] })) : ("Save") })] })] })), logins !== null && logins.length > 0 && (_jsx(Input, { value: filter, onChange: (e) => setFilter(e.target.value), placeholder: "Filter by title, user, or domain", className: "h-8 text-xs", autoComplete: "off", "data-testid": "saved-logins-filter" })), logins === null ? (_jsxs("div", { className: "flex items-center gap-2 px-1 py-3 text-xs text-muted", children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }), " Loading\u2026"] })) : logins.length === 0 ? (_jsx("div", { "data-testid": "saved-logins-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 saved logins yet. Add one here, or sign in to 1Password / Bitwarden on the Overview tab to surface their entries." })) : filtered.length === 0 ? (_jsxs("div", { "data-testid": "saved-logins-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 logins match \"", filter, "\"."] })) : (_jsx("ul", { "data-testid": "saved-logins-list", className: "space-y-1 rounded-md border border-border/40 bg-card/30 p-1", children: filtered.map((login) => (_jsxs("li", { className: "flex items-center gap-2 rounded px-2 py-1.5 hover:bg-bg-muted/30", children: [_jsx("span", { className: `shrink-0 rounded-full border px-1.5 py-0.5 text-2xs font-medium ${SOURCE_PILL_CLASS[login.source]}`, children: SOURCE_LABEL[login.source] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: "truncate text-xs font-medium text-txt", children: [login.title, login.domain && login.domain !== login.title ? (_jsxs("span", { className: "ml-1.5 text-muted", children: ["(", login.domain, ")"] })) : null] }), _jsxs("p", { className: "truncate text-2xs text-muted", children: [login.username || "—", " \u00B7 ", relativeAge(login.updatedAt)] })] }), login.domain ? (_jsx(AgentAutoallowToggle, { domain: login.domain, allowed: autoallowMap[login.domain] === true, onChange: (next) => void onToggleAutoallow(login.domain ?? "", next) })) : null, login.source === "in-house" ? (_jsx(Button, { variant: "ghost", size: "sm", className: "h-7 w-7 shrink-0 rounded-md p-0 text-muted hover:text-danger", "aria-label": `Delete saved login for ${login.domain ?? login.username}`, onClick: () => void onDelete(login), children: _jsx(Trash2, { className: "h-3.5 w-3.5", "aria-hidden": true }) })) : (_jsx(ExternalRowAction, { login: login }))] }, `${login.source}:${login.identifier}`))) }))] }));
+}
+function AgentAutoallowToggle({ domain, allowed, onChange, }) {
+    const label = allowed
+        ? `Agent autofill enabled for ${domain}. Click to disable.`
+        : `Allow the agent to autofill ${domain} without prompting.`;
+    return (_jsx(Button, { variant: "ghost", size: "sm", className: `h-7 w-7 shrink-0 rounded-md p-0 ${allowed ? "text-accent hover:text-accent" : "text-muted hover:text-txt"}`, "aria-label": label, title: label, onClick: () => onChange(!allowed), "data-testid": `agent-autoallow-toggle-${domain}`, "data-allowed": allowed ? "1" : "0", children: _jsx(Bot, { className: "h-3.5 w-3.5", "aria-hidden": true }) }));
+}
+function ExternalRowAction({ login }) {
+    const href = login.source === "1password"
+        ? `https://my.1password.com/vaults/all/allitems/${encodeURIComponent(login.identifier)}`
+        : "https://vault.bitwarden.com/";
+    return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex h-7 shrink-0 items-center gap-1 rounded-md border border-border/40 px-2 text-2xs text-muted hover:text-txt", "aria-label": `View in ${SOURCE_LABEL[login.source]}`, title: `View in ${SOURCE_LABEL[login.source]}`, children: [_jsx(ExternalLink, { className: "h-3 w-3", "aria-hidden": true }), "View"] }));
+}

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

@@ -0,0 +1,60 @@
+/**
+ * Overview tab — backends list, install / sign-in / sign-out, ordering,
+ * and the "Save preferences" action.
+ *
+ * Extracted from the original `SecretsManagerModal` body. The parent
+ * Vault modal owns data fetching and the save flow; this component
+ * only renders the rows + the editable preference state.
+ */
+import type { BackendStatus, InstallableBackendId, InstallMethod, ManagerPreferences } from "./types";
+export interface OverviewTabProps {
+    backends: BackendStatus[];
+    preferences: ManagerPreferences;
+    installMethods: Record<InstallableBackendId, InstallMethod[]>;
+    saving: boolean;
+    savedAt: number | null;
+    onPreferencesChange: (next: ManagerPreferences) => void;
+    onSave: () => void;
+    onReload: () => void;
+    onInstallComplete: () => void;
+    onSigninComplete: () => void;
+    onSignout: (backendId: InstallableBackendId) => void;
+}
+export declare function OverviewTab(props: OverviewTabProps): import("react/jsx-runtime").JSX.Element;
+interface BackendRowProps {
+    backend: BackendStatus;
+    enabled: boolean;
+    isPrimary: boolean;
+    position: number;
+    totalEnabled: number;
+    methods: readonly InstallMethod[];
+    installSheetOpen: boolean;
+    signinSheetOpen: boolean;
+    onToggle: (on: boolean) => void;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onOpenInstallSheet: () => void;
+    onOpenSigninSheet: () => void;
+    onCloseSheets: () => void;
+    onInstallComplete: () => void;
+    onSigninComplete: () => void;
+    onSignout: () => void;
+}
+export declare function BackendRow(props: BackendRowProps): import("react/jsx-runtime").JSX.Element;
+interface InstallSheetProps {
+    backendId: InstallableBackendId;
+    backendLabel: string;
+    methods: readonly InstallMethod[];
+    onCancel: () => void;
+    onComplete: () => void;
+}
+export declare function InstallSheet({ backendId, backendLabel, methods, onCancel, onComplete, }: InstallSheetProps): import("react/jsx-runtime").JSX.Element;
+interface SigninSheetProps {
+    backendId: InstallableBackendId;
+    backendLabel: string;
+    onCancel: () => void;
+    onComplete: () => void;
+}
+export declare function SigninSheet({ backendId, backendLabel, onCancel, onComplete, }: SigninSheetProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OverviewTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverviewTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/settings/vault-tabs/OverviewTab.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAsBH,OAAO,KAAK,EAEV,aAAa,EACb,oBAAoB,EACpB,aAAa,EACb,kBAAkB,EACnB,MAAM,SAAS,CAAC;AASjB,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,cAAc,EAAE,MAAM,CAAC,oBAAoB,EAAE,aAAa,EAAE,CAAC,CAAC;IAC9D,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACxD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,EAAE,CAAC,SAAS,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAkJlD;AAkBD,UAAU,eAAe;IACvB,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAyKhD;AA4BD,UAAU,iBAAiB;IACzB,SAAS,EAAE,oBAAoB,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,GACX,EAAE,iBAAiB,2CAuKnB;AA0BD,UAAU,gBAAgB;IACxB,SAAS,EAAE,oBAAoB,CAAC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,UAAU,GACX,EAAE,gBAAgB,2CAwMlB"}