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

package/components/pages/ElizaOsAppsView.js

@@ -1,19 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Clock3, ContactRound, FileUp, MessageSquare, NotebookText, PhoneCall, Plus, RefreshCw, Search, Send, Settings, ShieldCheck, UserPlus, } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
 import { getPlugins } from "../../bridge/plugin-bridge.js";
+import { useTranslation } from "../../state/TranslationContext.hooks.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { Textarea } from "../ui/textarea.js";
+import { ShellViewAgentSurface } from "../views/ShellViewAgentSurface.js";
 const PHONE_PANEL_ITEMS = [
-    { id: "dialer", label: "Dialer", icon: _jsx(PhoneCall, { className: "h-4 w-4" }) },
-    { id: "recents", label: "Recents", icon: _jsx(Clock3, { className: "h-4 w-4" }) },
+    {
+        id: "dialer",
+        labelKey: "elizaosapps.phone.tab.dialer",
+        defaultLabel: "Dialer",
+        icon: _jsx(PhoneCall, { className: "h-4 w-4" }),
+    },
+    {
+        id: "recents",
+        labelKey: "elizaosapps.phone.tab.recents",
+        defaultLabel: "Recents",
+        icon: _jsx(Clock3, { className: "h-4 w-4" }),
+    },
     {
         id: "contacts",
-        label: "Contacts",
+        labelKey: "elizaosapps.phone.tab.contacts",
+        defaultLabel: "Contacts",
         icon: _jsx(ContactRound, { className: "h-4 w-4" }),
     },
-    { id: "import", label: "Import", icon: _jsx(FileUp, { className: "h-4 w-4" }) },
+    {
+        id: "import",
+        labelKey: "elizaosapps.phone.tab.import",
+        defaultLabel: "Import",
+        icon: _jsx(FileUp, { className: "h-4 w-4" }),
+    },
     {
         id: "transcripts",
-        label: "Transcripts",
+        labelKey: "elizaosapps.phone.tab.transcripts",
+        defaultLabel: "Transcripts",
         icon: _jsx(NotebookText, { className: "h-4 w-4" }),
     },
 ];
@@ -31,6 +54,13 @@ const DIALPAD_KEYS = [
     "0",
     "#",
 ];
+const ANDROID_SMS_GATEWAY_ENABLED = import.meta.env.VITE_ELIZA_ANDROID_SMS_GATEWAY_ENABLED === "true";
+const ANDROID_SMS_GATEWAY_SECRET = String(import.meta.env.VITE_ELIZA_ANDROID_SMS_GATEWAY_SECRET ?? "");
+const ANDROID_SMS_GATEWAY_WEBHOOK_URL = String(import.meta.env.VITE_ELIZA_ANDROID_SMS_GATEWAY_WEBHOOK_URL ??
+    "https://api.elizacloud.ai/api/webhooks/blooio/local?bridge=bluebubbles");
+const ANDROID_SMS_GATEWAY_PHONE_NUMBER = String(import.meta.env.VITE_ELIZA_ANDROID_SMS_GATEWAY_PHONE_NUMBER ?? "+14159611510");
+const ANDROID_SMS_GATEWAY_PHONE_LABEL = String(import.meta.env.VITE_ELIZA_ANDROID_SMS_GATEWAY_PHONE_LABEL ??
+    "Eliza Cloud Gateway (+14159611510)");
 function useLaunchParams() {
     const [params, setParams] = useState(() => readLaunchParams());
     useEffect(() => {
@@ -46,31 +76,115 @@ function readLaunchParams() {
     return new URLSearchParams(window.location.hash.split("?")[1] ?? "");
 }
 function Panel({ title, description, children, }) {
-    return (_jsxs("section", { className: "rounded border border-border bg-card p-4 shadow-sm", children: [_jsxs("div", { className: "mb-4", children: [_jsx("h2", { className: "text-base font-semibold text-txt", children: title }), description ? (_jsx("p", { className: "mt-1 text-sm text-muted", children: description })) : null] }), children] }));
+    return (_jsxs("section", { className: "rounded-sm border border-border bg-card p-4", children: [_jsxs("div", { className: "mb-4", children: [_jsx("h2", { className: "text-base font-semibold text-txt", children: title }), description ? (_jsx("p", { className: "mt-1 text-sm text-muted", children: description })) : null] }), children] }));
 }
-function PrimaryButton({ children, disabled, icon, onClick, type = "button", }) {
-    return (_jsxs("button", { type: type, disabled: disabled, onClick: onClick, className: "inline-flex h-9 items-center justify-center gap-2 rounded border border-border bg-primary px-3 text-sm font-medium text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50", children: [icon, _jsx("span", { className: "truncate", children: children })] }));
+function PrimaryButton({ agentId, agentLabel, agentGroup, children, disabled, icon, onClick, type = "button", }) {
+    const { ref, agentProps } = useAgentElement({
+        id: agentId,
+        role: "button",
+        label: agentLabel,
+        group: agentGroup,
+        status: disabled ? "inactive" : "active",
+        onActivate: onClick,
+    });
+    return (_jsxs(Button, { ref: ref, type: type, variant: "default", size: "sm", disabled: disabled, onClick: onClick, ...agentProps, children: [icon, _jsx("span", { className: "truncate", children: children })] }));
 }
-function SecondaryButton({ children, disabled, icon, onClick, type = "button", }) {
-    return (_jsxs("button", { type: type, disabled: disabled, onClick: onClick, className: "inline-flex h-9 items-center justify-center gap-2 rounded border border-border bg-bg px-3 text-sm font-medium text-txt disabled:cursor-not-allowed disabled:opacity-50", children: [icon, _jsx("span", { className: "truncate", children: children })] }));
+function SecondaryButton({ agentId, agentLabel, agentGroup, children, disabled, icon, onClick, type = "button", }) {
+    const { ref, agentProps } = useAgentElement({
+        id: agentId,
+        role: "button",
+        label: agentLabel,
+        group: agentGroup,
+        status: disabled ? "inactive" : "active",
+        onActivate: onClick,
+    });
+    return (_jsxs(Button, { ref: ref, type: type, variant: "outline", size: "sm", disabled: disabled, onClick: onClick, ...agentProps, children: [icon, _jsx("span", { className: "truncate", children: children })] }));
 }
-function TextInput({ label, onChange, placeholder, value, }) {
-    return (_jsxs("label", { className: "grid gap-1 text-sm text-txt", children: [_jsx("span", { className: "font-medium", children: label }), _jsx("input", { value: value, placeholder: placeholder, onChange: (event) => onChange(event.target.value), className: "h-10 rounded border border-border bg-bg px-3 text-sm text-txt outline-none focus:border-primary" })] }));
+function TextInput({ agentId, agentGroup, label, onChange, placeholder, value, }) {
+    const id = useId();
+    const { ref, agentProps } = useAgentElement({
+        id: agentId,
+        role: "text-input",
+        label,
+        group: agentGroup,
+        getValue: () => value,
+        onFill: onChange,
+    });
+    return (_jsxs("label", { className: "grid gap-1 text-sm text-txt", htmlFor: id, children: [_jsx("span", { className: "font-medium", children: label }), _jsx(Input, { ref: ref, id: id, value: value, placeholder: placeholder, onChange: (event) => onChange(event.target.value), ...agentProps })] }));
 }
-function TextArea({ label, onChange, placeholder, value, }) {
-    return (_jsxs("label", { className: "grid gap-1 text-sm text-txt", children: [_jsx("span", { className: "font-medium", children: label }), _jsx("textarea", { value: value, placeholder: placeholder, onChange: (event) => onChange(event.target.value), className: "min-h-24 rounded border border-border bg-bg px-3 py-2 text-sm text-txt outline-none focus:border-primary" })] }));
+function TextArea({ agentId, agentGroup, label, onChange, placeholder, value, }) {
+    const id = useId();
+    const { ref, agentProps } = useAgentElement({
+        id: agentId,
+        role: "textarea",
+        label,
+        group: agentGroup,
+        getValue: () => value,
+        onFill: onChange,
+    });
+    return (_jsxs("label", { className: "grid gap-1 text-sm text-txt", htmlFor: id, children: [_jsx("span", { className: "font-medium", children: label }), _jsx(Textarea, { ref: ref, id: id, value: value, placeholder: placeholder, onChange: (event) => onChange(event.target.value), ...agentProps })] }));
 }
 function StatusNotice({ error, notice, }) {
     if (error) {
-        return (_jsx("div", { className: "rounded border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: error }));
+        return (_jsx("div", { className: "rounded-sm border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: error }));
     }
     if (notice) {
-        return (_jsx("div", { className: "rounded border border-border bg-bg px-3 py-2 text-sm text-muted", children: notice }));
+        return (_jsx("div", { className: "rounded-sm border border-border bg-bg px-3 py-2 text-sm text-muted", children: notice }));
     }
     return null;
 }
 function EmptyState({ children }) {
-    return (_jsx("div", { className: "rounded border border-border bg-bg p-3 text-sm text-muted", children: children }));
+    return (_jsx("div", { className: "rounded-sm border border-border bg-bg p-3 text-sm text-muted", children: children }));
+}
+function PhonePanelTabButton({ item, label, isActive, onSelect, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `phone-tab-${item.id}`,
+        role: "tab",
+        label,
+        group: "phone-panels",
+        status: isActive ? "active" : "inactive",
+        onActivate: () => onSelect(item.id),
+    });
+    return (_jsxs("button", { ref: ref, type: "button", onClick: () => onSelect(item.id), "aria-current": isActive ? "page" : undefined, className: `inline-flex h-9 items-center gap-2 rounded-sm border px-3 text-sm font-medium ${isActive
+            ? "border-primary bg-primary text-primary-foreground"
+            : "border-border bg-bg text-txt"}`, ...agentProps, children: [item.icon, _jsx("span", { children: label })] }));
+}
+function DialpadButton({ digit, onPress, }) {
+    const { ref, agentProps } = useAgentElement({
+        id: `dialpad-${digit}`,
+        role: "button",
+        label: `Dialpad ${digit}`,
+        group: "dialpad",
+        onActivate: () => onPress(digit),
+    });
+    return (_jsx("button", { ref: ref, type: "button", onClick: () => onPress(digit), className: "aspect-[1.6] rounded-sm border border-border bg-bg text-lg font-semibold text-txt hover:border-primary", ...agentProps, children: digit }));
+}
+const RecentCallButton = memo(function RecentCallButton({ call, onSelect, }) {
+    const { t } = useTranslation();
+    const handleSelect = useCallback(() => onSelect(call), [onSelect, call]);
+    const { ref, agentProps } = useAgentElement({
+        id: `recent-call-${call.id}`,
+        role: "list-item",
+        label: callDisplayName(call),
+        group: "recent-calls",
+        onActivate: handleSelect,
+    });
+    const summary = call.agentSummary || call.agentTranscript || call.transcription;
+    return (_jsxs("button", { ref: ref, type: "button", onClick: handleSelect, className: "rounded-sm border border-border bg-bg p-3 text-left text-sm hover:border-primary", ...agentProps, children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("span", { className: "font-medium text-txt", children: callDisplayName(call) }), _jsxs("span", { className: "text-xs text-muted", children: [callTypeLabel(call.type), " \u00B7 ", durationLabel(call.durationSeconds)] })] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center justify-between gap-2 text-xs text-muted", children: [_jsx("span", { children: call.number ||
+                            t("elizaosapps.phone.unknownNumber", {
+                                defaultValue: "unknown number",
+                            }) }), _jsx("span", { children: formatTimestamp(call.date) })] }), summary ? (_jsx("div", { className: "mt-2 line-clamp-2 text-xs text-muted", children: summary })) : null] }));
+});
+const PhoneContactRow = memo(function PhoneContactRow({ contact, dialLabel, smsLabel, unnamedLabel, noNumbersLabel, onDial, onSms, }) {
+    const contactNumber = primaryPhoneNumber(contact);
+    const handleDial = useCallback(() => onDial(contactNumber), [onDial, contactNumber]);
+    const handleSms = useCallback(() => onSms(contactNumber), [onSms, contactNumber]);
+    return (_jsx("div", { className: "rounded-sm border border-border bg-bg p-3 text-sm", children: _jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium text-txt", children: contact.displayName || unnamedLabel }), _jsx("div", { className: "mt-1 text-muted", children: contact.phoneNumbers.length > 0
+                                ? contact.phoneNumbers.join(", ")
+                                : noNumbersLabel }), contact.emailAddresses.length > 0 ? (_jsx("div", { className: "mt-1 text-xs text-muted", children: contact.emailAddresses.join(", ") })) : null] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(SecondaryButton, { agentId: `phone-contact-dial-${contact.id}`, agentLabel: `${dialLabel} ${contact.displayName || contactNumber}`, agentGroup: "phone-contacts", disabled: !contactNumber, icon: _jsx(PhoneCall, { className: "h-4 w-4" }), onClick: handleDial, children: dialLabel }), _jsx(SecondaryButton, { agentId: `phone-contact-sms-${contact.id}`, agentLabel: `${smsLabel} ${contact.displayName || contactNumber}`, agentGroup: "phone-contacts", disabled: !contactNumber, icon: _jsx(MessageSquare, { className: "h-4 w-4" }), onClick: handleSms, children: smsLabel })] })] }) }));
+});
+function PhoneRoleRow({ role, heldLabel, notHeldLabel, holdersLabel, requestLabel, disabled, onRequest, }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 rounded-sm border border-border bg-card p-2 text-sm", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "font-medium text-txt", children: [role.role, ": ", role.held ? heldLabel : notHeldLabel] }), _jsx("div", { className: "truncate text-xs text-muted", children: holdersLabel })] }), _jsx(SecondaryButton, { agentId: `phone-role-request-${role.role}`, agentLabel: `${requestLabel} ${role.role}`, agentGroup: "phone-roles", disabled: disabled || !role.available || role.held, icon: _jsx(ShieldCheck, { className: "h-4 w-4" }), onClick: () => onRequest(role), children: requestLabel })] }));
 }
 function roleHolderText(role) {
     return role.holders.length > 0 ? role.holders.join(", ") : "none";
@@ -126,6 +240,7 @@ function openMessagesForNumber(number) {
     window.location.hash = `#messages?recipient=${encodeURIComponent(number)}`;
 }
 export function PhonePageView() {
+    const { t } = useTranslation();
     const params = useLaunchParams();
     const fileInputRef = useRef(null);
     const [activePanel, setActivePanel] = useState("dialer");
@@ -155,6 +270,16 @@ export function PhonePageView() {
     const [error, setError] = useState(null);
     const selectedCall = useMemo(() => calls.find((call) => call.id === selectedCallId) ?? calls[0] ?? null, [calls, selectedCallId]);
     const contactListOptions = useMemo(() => ({ limit: 200, query: contactQuery.trim() || undefined }), [contactQuery]);
+    // Stable per-row handlers so the memoized RecentCallButton / PhoneContactRow
+    // hold across re-renders of this page.
+    const handleSelectCall = useCallback((call) => {
+        setSelectedCallId(call.id);
+        setActivePanel("transcripts");
+    }, []);
+    const handleDialContact = useCallback((contactNumber) => {
+        setNumber(contactNumber);
+        setActivePanel("dialer");
+    }, []);
     useEffect(() => {
         const launchNumber = params.get("number") ?? numberFromTelUri(params.get("uri"));
         if (launchNumber)
@@ -400,37 +525,130 @@ export function PhonePageView() {
     };
     const renderPanel = () => {
         if (activePanel === "recents") {
-            return (_jsxs(Panel, { title: "Recent Calls", description: "Android call log entries.", children: [_jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: _jsx(SecondaryButton, { disabled: busy, icon: _jsx(RefreshCw, { className: "h-4 w-4" }), onClick: refresh, children: "Refresh" }) }), _jsx("div", { className: "grid max-h-[62vh] gap-2 overflow-y-auto", children: calls.length > 0 ? (calls.map((call) => (_jsxs("button", { type: "button", onClick: () => {
-                                setSelectedCallId(call.id);
-                                setActivePanel("transcripts");
-                            }, className: "rounded border border-border bg-bg p-3 text-left text-sm hover:border-primary", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("span", { className: "font-medium text-txt", children: callDisplayName(call) }), _jsxs("span", { className: "text-xs text-muted", children: [callTypeLabel(call.type), " \u00B7", " ", durationLabel(call.durationSeconds)] })] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center justify-between gap-2 text-xs text-muted", children: [_jsx("span", { children: call.number || "unknown number" }), _jsx("span", { children: formatTimestamp(call.date) })] }), call.agentTranscript || call.transcription ? (_jsx("div", { className: "mt-2 line-clamp-2 text-xs text-muted", children: call.agentSummary ||
-                                        call.agentTranscript ||
-                                        call.transcription })) : null] }, call.id)))) : (_jsx(EmptyState, { children: "No calls returned by Android." })) })] }));
+            return (_jsxs(Panel, { title: t("elizaosapps.phone.recents.title", {
+                    defaultValue: "Recent Calls",
+                }), description: t("elizaosapps.phone.recents.description", {
+                    defaultValue: "Android call log entries.",
+                }), children: [_jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: _jsx(SecondaryButton, { agentId: "recents-refresh", agentLabel: t("elizaosapps.phone.refresh", {
+                                defaultValue: "Refresh",
+                            }), disabled: busy, icon: _jsx(RefreshCw, { className: "h-4 w-4" }), onClick: refresh, children: t("elizaosapps.phone.refresh", { defaultValue: "Refresh" }) }) }), _jsx("div", { className: "grid max-h-[62vh] gap-2 overflow-y-auto", children: calls.length > 0 ? (calls.map((call) => (_jsx(RecentCallButton, { call: call, onSelect: handleSelectCall }, call.id)))) : (_jsx(EmptyState, { children: t("elizaosapps.phone.recents.empty", {
+                                defaultValue: "No calls returned by Android.",
+                            }) })) })] }));
         }
         if (activePanel === "contacts") {
-            return (_jsxs(Panel, { title: "Contacts", description: "Android Contacts Provider.", children: [_jsxs("div", { className: "mb-3 grid gap-3 sm:grid-cols-[1fr_auto]", children: [_jsx(TextInput, { label: "Search", placeholder: "Name, number, or email", value: contactQuery, onChange: setContactQuery }), _jsx("div", { className: "flex items-end", children: _jsx(SecondaryButton, { disabled: busy, icon: _jsx(Search, { className: "h-4 w-4" }), onClick: refresh, children: "Search" }) })] }), _jsx("div", { className: "grid max-h-[62vh] gap-2 overflow-y-auto", children: contacts.length > 0 ? (contacts.map((contact) => {
-                            const contactNumber = primaryPhoneNumber(contact);
-                            return (_jsx("div", { className: "rounded border border-border bg-bg p-3 text-sm", children: _jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium text-txt", children: contact.displayName || "Unnamed contact" }), _jsx("div", { className: "mt-1 text-muted", children: contact.phoneNumbers.length > 0
-                                                        ? contact.phoneNumbers.join(", ")
-                                                        : "No phone numbers" }), contact.emailAddresses.length > 0 ? (_jsx("div", { className: "mt-1 text-xs text-muted", children: contact.emailAddresses.join(", ") })) : null] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(SecondaryButton, { disabled: !contactNumber, icon: _jsx(PhoneCall, { className: "h-4 w-4" }), onClick: () => {
-                                                        setNumber(contactNumber);
-                                                        setActivePanel("dialer");
-                                                    }, children: "Dial" }), _jsx(SecondaryButton, { disabled: !contactNumber, icon: _jsx(MessageSquare, { className: "h-4 w-4" }), onClick: () => openMessagesForNumber(contactNumber), children: "SMS" })] })] }) }, contact.id));
-                        })) : (_jsx(EmptyState, { children: "No contacts returned by Android." })) })] }));
+            return (_jsxs(Panel, { title: t("elizaosapps.phone.contacts.title", {
+                    defaultValue: "Contacts",
+                }), description: t("elizaosapps.phone.contacts.description", {
+                    defaultValue: "Android Contacts Provider.",
+                }), children: [_jsxs("div", { className: "mb-3 grid gap-3 sm:grid-cols-[1fr_auto]", children: [_jsx(TextInput, { agentId: "phone-contacts-search", label: t("elizaosapps.phone.contacts.searchLabel", {
+                                    defaultValue: "Search",
+                                }), placeholder: t("elizaosapps.phone.contacts.searchPlaceholder", {
+                                    defaultValue: "Name, number, or email",
+                                }), value: contactQuery, onChange: setContactQuery }), _jsx("div", { className: "flex items-end", children: _jsx(SecondaryButton, { agentId: "phone-contacts-search-submit", agentLabel: t("elizaosapps.phone.contacts.search", {
+                                        defaultValue: "Search",
+                                    }), disabled: busy, icon: _jsx(Search, { className: "h-4 w-4" }), onClick: refresh, children: t("elizaosapps.phone.contacts.search", {
+                                        defaultValue: "Search",
+                                    }) }) })] }), _jsx("div", { className: "grid max-h-[62vh] gap-2 overflow-y-auto", children: contacts.length > 0 ? (contacts.map((contact) => (_jsx(PhoneContactRow, { contact: contact, dialLabel: t("elizaosapps.phone.dial", {
+                                defaultValue: "Dial",
+                            }), smsLabel: t("elizaosapps.phone.sms", { defaultValue: "SMS" }), unnamedLabel: t("elizaosapps.phone.contacts.unnamed", {
+                                defaultValue: "Unnamed contact",
+                            }), noNumbersLabel: t("elizaosapps.phone.contacts.noNumbers", {
+                                defaultValue: "No phone numbers",
+                            }), onDial: handleDialContact, onSms: openMessagesForNumber }, contact.id)))) : (_jsx(EmptyState, { children: t("elizaosapps.phone.contacts.empty", {
+                                defaultValue: "No contacts returned by Android.",
+                            }) })) })] }));
         }
         if (activePanel === "import") {
-            return (_jsx(Panel, { title: "Import Contacts", description: "vCard contacts import.", children: _jsxs("div", { className: "grid gap-3", children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".vcf,text/vcard,text/x-vcard", className: "hidden", onChange: importSelectedFile }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(PrimaryButton, { disabled: busy, icon: _jsx(FileUp, { className: "h-4 w-4" }), onClick: () => fileInputRef.current?.click(), children: "Choose vCard" }), _jsx(SecondaryButton, { disabled: busy || !vcardText.trim(), icon: _jsx(Plus, { className: "h-4 w-4" }), onClick: () => importVCardText(vcardText), children: "Import Text" })] }), _jsx(TextArea, { label: "vCard Text", placeholder: "BEGIN:VCARD", value: vcardText, onChange: setVcardText })] }) }));
+            return (_jsx(Panel, { title: t("elizaosapps.phone.import.title", {
+                    defaultValue: "Import Contacts",
+                }), description: t("elizaosapps.phone.import.description", {
+                    defaultValue: "vCard contacts import.",
+                }), children: _jsxs("div", { className: "grid gap-3", children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".vcf,text/vcard,text/x-vcard", className: "hidden", onChange: importSelectedFile }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(PrimaryButton, { agentId: "phone-import-choose-vcard", agentLabel: t("elizaosapps.phone.import.chooseVcard", {
+                                        defaultValue: "Choose vCard",
+                                    }), disabled: busy, icon: _jsx(FileUp, { className: "h-4 w-4" }), onClick: () => fileInputRef.current?.click(), children: t("elizaosapps.phone.import.chooseVcard", {
+                                        defaultValue: "Choose vCard",
+                                    }) }), _jsx(SecondaryButton, { agentId: "phone-import-text", agentLabel: t("elizaosapps.phone.import.importText", {
+                                        defaultValue: "Import Text",
+                                    }), disabled: busy || !vcardText.trim(), icon: _jsx(Plus, { className: "h-4 w-4" }), onClick: () => importVCardText(vcardText), children: t("elizaosapps.phone.import.importText", {
+                                        defaultValue: "Import Text",
+                                    }) })] }), _jsx(TextArea, { agentId: "phone-import-vcard-text", label: t("elizaosapps.phone.import.vcardLabel", {
+                                defaultValue: "vCard Text",
+                            }), placeholder: "BEGIN:VCARD", value: vcardText, onChange: setVcardText })] }) }));
         }
         if (activePanel === "transcripts") {
-            return (_jsx(Panel, { title: "Call Transcript", description: "Call log transcription and agent notes.", children: selectedCall ? (_jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { className: "rounded border border-border bg-bg p-3 text-sm", children: [_jsx("div", { className: "font-medium text-txt", children: callDisplayName(selectedCall) }), _jsxs("div", { className: "mt-1 text-xs text-muted", children: [selectedCall.number || "unknown number", " \u00B7", " ", callTypeLabel(selectedCall.type), " \u00B7", " ", formatTimestamp(selectedCall.date)] })] }), selectedCall.transcription ? (_jsxs("div", { className: "rounded border border-border bg-bg p-3 text-sm text-txt", children: [_jsx("div", { className: "mb-1 text-xs font-medium uppercase text-muted", children: "Voicemail transcription" }), selectedCall.transcription] })) : null, _jsx(TextArea, { label: "Agent Transcript", value: transcriptDraft, onChange: setTranscriptDraft }), _jsx(TextInput, { label: "Agent Summary", value: summaryDraft, onChange: setSummaryDraft }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(PrimaryButton, { disabled: busy || !transcriptDraft.trim(), icon: _jsx(NotebookText, { className: "h-4 w-4" }), onClick: saveTranscript, children: "Save Transcript" }), _jsx(SecondaryButton, { disabled: !selectedCall.number, icon: _jsx(MessageSquare, { className: "h-4 w-4" }), onClick: () => openMessagesForNumber(selectedCall.number), children: "Reply SMS" })] })] })) : (_jsx(EmptyState, { children: "No call selected." })) }));
-        }
-        return (_jsx(Panel, { title: "Dialer", description: "Android Telecom calling surface.", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(240px,320px)_1fr]", children: [_jsxs("div", { className: "grid gap-3", children: [_jsx(TextInput, { label: "Number", placeholder: "+15551234567", value: number, onChange: setNumber }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: DIALPAD_KEYS.map((key) => (_jsx("button", { type: "button", onClick: () => appendDialpadKey(key), className: "aspect-[1.6] rounded border border-border bg-bg text-lg font-semibold text-txt hover:border-primary", children: key }, key))) }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(PrimaryButton, { disabled: busy || !number.trim(), icon: _jsx(PhoneCall, { className: "h-4 w-4" }), onClick: placeCall, children: "Call" }), _jsx(SecondaryButton, { disabled: busy, icon: _jsx(PhoneCall, { className: "h-4 w-4" }), onClick: openDialer, children: "Open Dialer" }), _jsx(SecondaryButton, { disabled: !number.trim(), icon: _jsx(MessageSquare, { className: "h-4 w-4" }), onClick: () => openMessagesForNumber(number.trim()), children: "SMS" })] })] }), _jsxs("div", { className: "grid gap-3", children: [_jsx("div", { className: "grid gap-1 rounded border border-border bg-bg p-3 text-sm text-muted", children: status.length > 0
+            return (_jsx(Panel, { title: t("elizaosapps.phone.transcript.title", {
+                    defaultValue: "Call Transcript",
+                }), description: t("elizaosapps.phone.transcript.description", {
+                    defaultValue: "Call log transcription and agent notes.",
+                }), children: selectedCall ? (_jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { className: "rounded-sm border border-border bg-bg p-3 text-sm", children: [_jsx("div", { className: "font-medium text-txt", children: callDisplayName(selectedCall) }), _jsxs("div", { className: "mt-1 text-xs text-muted", children: [selectedCall.number ||
+                                            t("elizaosapps.phone.unknownNumber", {
+                                                defaultValue: "unknown number",
+                                            }), " ", "\u00B7 ", callTypeLabel(selectedCall.type), " \u00B7", " ", formatTimestamp(selectedCall.date)] })] }), selectedCall.transcription ? (_jsxs("div", { className: "rounded-sm border border-border bg-bg p-3 text-sm text-txt", children: [_jsx("div", { className: "mb-1 text-xs font-medium uppercase text-muted", children: t("elizaosapps.phone.transcript.voicemail", {
+                                        defaultValue: "Voicemail transcription",
+                                    }) }), selectedCall.transcription] })) : null, _jsx(TextArea, { agentId: "phone-transcript-draft", label: t("elizaosapps.phone.transcript.agentTranscript", {
+                                defaultValue: "Agent Transcript",
+                            }), value: transcriptDraft, onChange: setTranscriptDraft }), _jsx(TextInput, { agentId: "phone-transcript-summary", label: t("elizaosapps.phone.transcript.agentSummary", {
+                                defaultValue: "Agent Summary",
+                            }), value: summaryDraft, onChange: setSummaryDraft }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(PrimaryButton, { agentId: "phone-transcript-save", agentLabel: t("elizaosapps.phone.transcript.save", {
+                                        defaultValue: "Save Transcript",
+                                    }), disabled: busy || !transcriptDraft.trim(), icon: _jsx(NotebookText, { className: "h-4 w-4" }), onClick: saveTranscript, children: t("elizaosapps.phone.transcript.save", {
+                                        defaultValue: "Save Transcript",
+                                    }) }), _jsx(SecondaryButton, { agentId: "phone-transcript-reply-sms", agentLabel: t("elizaosapps.phone.transcript.replySms", {
+                                        defaultValue: "Reply SMS",
+                                    }), disabled: !selectedCall.number, icon: _jsx(MessageSquare, { className: "h-4 w-4" }), onClick: () => openMessagesForNumber(selectedCall.number), children: t("elizaosapps.phone.transcript.replySms", {
+                                        defaultValue: "Reply SMS",
+                                    }) })] })] })) : (_jsx(EmptyState, { children: t("elizaosapps.phone.transcript.empty", {
+                        defaultValue: "No call selected.",
+                    }) })) }));
+        }
+        return (_jsx(Panel, { title: t("elizaosapps.phone.dialer.title", { defaultValue: "Dialer" }), description: t("elizaosapps.phone.dialer.description", {
+                defaultValue: "Android Telecom calling surface.",
+            }), children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(240px,320px)_1fr]", children: [_jsxs("div", { className: "grid gap-3", children: [_jsx(TextInput, { agentId: "dialer-number", label: t("elizaosapps.phone.dialer.numberLabel", {
+                                    defaultValue: "Number",
+                                }), placeholder: "+15551234567", value: number, onChange: setNumber }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: DIALPAD_KEYS.map((key) => (_jsx(DialpadButton, { digit: key, onPress: appendDialpadKey }, key))) }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(PrimaryButton, { agentId: "dialer-call", agentLabel: t("elizaosapps.phone.dialer.call", {
+                                            defaultValue: "Call",
+                                        }), disabled: busy || !number.trim(), icon: _jsx(PhoneCall, { className: "h-4 w-4" }), onClick: placeCall, children: t("elizaosapps.phone.dialer.call", { defaultValue: "Call" }) }), _jsx(SecondaryButton, { agentId: "dialer-open-dialer", agentLabel: t("elizaosapps.phone.dialer.openDialer", {
+                                            defaultValue: "Open Dialer",
+                                        }), disabled: busy, icon: _jsx(PhoneCall, { className: "h-4 w-4" }), onClick: openDialer, children: t("elizaosapps.phone.dialer.openDialer", {
+                                            defaultValue: "Open Dialer",
+                                        }) }), _jsx(SecondaryButton, { agentId: "dialer-sms", agentLabel: t("elizaosapps.phone.sms", { defaultValue: "SMS" }), disabled: !number.trim(), icon: _jsx(MessageSquare, { className: "h-4 w-4" }), onClick: () => openMessagesForNumber(number.trim()), children: t("elizaosapps.phone.sms", { defaultValue: "SMS" }) })] })] }), _jsxs("div", { className: "grid gap-3", children: [_jsx("div", { className: "grid gap-1 rounded-sm border border-border bg-bg p-3 text-sm text-muted", children: status.length > 0
                                     ? status.map((line) => _jsx("div", { children: line }, line))
-                                    : "No status loaded." }), _jsxs("div", { className: "grid gap-2 rounded border border-border bg-bg p-3", children: [_jsx("div", { className: "text-sm font-medium text-txt", children: "Android default roles" }), roles.length > 0 ? (roles.map((role) => (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 rounded border border-border bg-card p-2 text-sm", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "font-medium text-txt", children: [role.role, ": ", role.held ? "held" : "not held"] }), _jsxs("div", { className: "truncate text-xs text-muted", children: ["holders: ", roleHolderText(role)] })] }), _jsx(SecondaryButton, { disabled: busy || !role.available || role.held, icon: _jsx(ShieldCheck, { className: "h-4 w-4" }), onClick: () => requestAndroidRole(role), children: "Request" })] }, role.role)))) : (_jsx(EmptyState, { children: "No Android roles returned." })), _jsx(SecondaryButton, { disabled: busy, icon: _jsx(Settings, { className: "h-4 w-4" }), onClick: openSystemSettings, children: "Settings" })] }), _jsxs("div", { className: "rounded border border-border bg-bg p-3", children: [_jsx("div", { className: "mb-3 text-sm font-medium text-txt", children: "New Contact" }), _jsxs("div", { className: "grid gap-3", children: [_jsx(TextInput, { label: "Display Name", value: displayName, onChange: setDisplayName }), _jsx(TextInput, { label: "Phone Number", value: phoneNumber, onChange: setPhoneNumber }), _jsx(TextInput, { label: "Email", value: emailAddress, onChange: setEmailAddress }), _jsx(PrimaryButton, { disabled: busy || !displayName.trim(), icon: _jsx(UserPlus, { className: "h-4 w-4" }), onClick: createContact, children: "Create Contact" })] })] })] })] }) }));
+                                    : t("elizaosapps.phone.dialer.noStatus", {
+                                        defaultValue: "No status loaded.",
+                                    }) }), _jsxs("div", { className: "grid gap-2 rounded-sm border border-border bg-bg p-3", children: [_jsx("div", { className: "text-sm font-medium text-txt", children: t("elizaosapps.phone.dialer.defaultRoles", {
+                                            defaultValue: "Android default roles",
+                                        }) }), roles.length > 0 ? (roles.map((role) => (_jsx(PhoneRoleRow, { role: role, heldLabel: t("elizaosapps.phone.role.held", {
+                                            defaultValue: "held",
+                                        }), notHeldLabel: t("elizaosapps.phone.role.notHeld", {
+                                            defaultValue: "not held",
+                                        }), holdersLabel: t("elizaosapps.phone.role.holders", {
+                                            holders: roleHolderText(role),
+                                            defaultValue: "holders: {{holders}}",
+                                        }), requestLabel: t("elizaosapps.phone.role.request", {
+                                            defaultValue: "Request",
+                                        }), disabled: busy, onRequest: requestAndroidRole }, role.role)))) : (_jsx(EmptyState, { children: t("elizaosapps.phone.role.empty", {
+                                            defaultValue: "No Android roles returned.",
+                                        }) })), _jsx(SecondaryButton, { agentId: "phone-open-settings", agentLabel: t("elizaosapps.phone.settings", {
+                                            defaultValue: "Settings",
+                                        }), disabled: busy, icon: _jsx(Settings, { className: "h-4 w-4" }), onClick: openSystemSettings, children: t("elizaosapps.phone.settings", { defaultValue: "Settings" }) })] }), _jsxs("div", { className: "rounded-sm border border-border bg-bg p-3", children: [_jsx("div", { className: "mb-3 text-sm font-medium text-txt", children: t("elizaosapps.phone.newContact.title", {
+                                            defaultValue: "New Contact",
+                                        }) }), _jsxs("div", { className: "grid gap-3", children: [_jsx(TextInput, { agentId: "phone-new-contact-display-name", agentGroup: "phone-new-contact", label: t("elizaosapps.phone.newContact.displayName", {
+                                                    defaultValue: "Display Name",
+                                                }), value: displayName, onChange: setDisplayName }), _jsx(TextInput, { agentId: "phone-new-contact-phone-number", agentGroup: "phone-new-contact", label: t("elizaosapps.phone.newContact.phoneNumber", {
+                                                    defaultValue: "Phone Number",
+                                                }), value: phoneNumber, onChange: setPhoneNumber }), _jsx(TextInput, { agentId: "phone-new-contact-email", agentGroup: "phone-new-contact", label: t("elizaosapps.phone.newContact.email", {
+                                                    defaultValue: "Email",
+                                                }), value: emailAddress, onChange: setEmailAddress }), _jsx(PrimaryButton, { agentId: "phone-new-contact-create", agentLabel: t("elizaosapps.phone.newContact.create", {
+                                                    defaultValue: "Create Contact",
+                                                }), agentGroup: "phone-new-contact", disabled: busy || !displayName.trim(), icon: _jsx(UserPlus, { className: "h-4 w-4" }), onClick: createContact, children: t("elizaosapps.phone.newContact.create", {
+                                                    defaultValue: "Create Contact",
+                                                }) })] })] })] })] }) }));
     };
-    return (_jsxs("div", { className: "flex h-full min-h-0 w-full flex-col gap-4 p-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold text-txt", children: "Phone" }), _jsx("div", { className: "text-sm text-muted", children: "ElizaOS Android phone workspace" })] }), _jsx(SecondaryButton, { disabled: busy, icon: _jsx(RefreshCw, { className: "h-4 w-4" }), onClick: refresh, children: "Refresh" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: PHONE_PANEL_ITEMS.map((item) => (_jsxs("button", { type: "button", onClick: () => setActivePanel(item.id), className: `inline-flex h-9 items-center gap-2 rounded border px-3 text-sm font-medium ${activePanel === item.id
-                        ? "border-primary bg-primary text-primary-foreground"
-                        : "border-border bg-bg text-txt"}`, children: [item.icon, _jsx("span", { children: item.label })] }, item.id))) }), _jsx(StatusNotice, { error: error, notice: notice }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: renderPanel() })] }));
+    return (_jsx(ShellViewAgentSurface, { viewId: "elizaos-apps-phone", children: _jsxs("div", { className: "flex h-full min-h-0 w-full flex-col gap-4 p-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold text-txt", children: t("elizaosapps.phone.heading", { defaultValue: "Phone" }) }), _jsx("div", { className: "text-sm text-muted", children: t("elizaosapps.phone.subheading", {
+                                        defaultValue: "ElizaOS Android phone workspace",
+                                    }) })] }), _jsx(SecondaryButton, { agentId: "phone-refresh", agentLabel: t("elizaosapps.phone.refresh", {
+                                defaultValue: "Refresh",
+                            }), disabled: busy, icon: _jsx(RefreshCw, { className: "h-4 w-4" }), onClick: refresh, children: t("elizaosapps.phone.refresh", { defaultValue: "Refresh" }) })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: PHONE_PANEL_ITEMS.map((item) => (_jsx(PhonePanelTabButton, { item: item, label: t(item.labelKey, { defaultValue: item.defaultLabel }), isActive: activePanel === item.id, onSelect: setActivePanel }, item.id))) }), _jsx(StatusNotice, { error: error, notice: notice }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: renderPanel() })] }) }));
 }
 function messageTypeLabel(type) {
     if (type === 1)
@@ -467,7 +685,37 @@ function initialMessageBody(params) {
         ? ""
         : (params.get("body") ?? "");
 }
+function androidSmsGatewayPayload(incoming) {
+    return {
+        type: "new-message",
+        data: {
+            guid: incoming.messageId ??
+                `android-sms-${incoming.sender}-${incoming.timestamp ?? Date.now()}`,
+            text: incoming.body,
+            isFromMe: false,
+            handle: {
+                address: incoming.sender,
+                service: "SMS",
+            },
+            chats: [
+                {
+                    guid: `SMS;-;${incoming.sender}`,
+                    chatIdentifier: incoming.sender,
+                },
+            ],
+            dateCreated: incoming.timestamp ?? Date.now(),
+            metadata: {
+                localPhoneNumber: ANDROID_SMS_GATEWAY_PHONE_NUMBER,
+                phoneNumber: ANDROID_SMS_GATEWAY_PHONE_NUMBER,
+                phoneAccountId: ANDROID_SMS_GATEWAY_PHONE_NUMBER,
+                phoneAccountLabel: ANDROID_SMS_GATEWAY_PHONE_LABEL,
+                androidSmsGateway: true,
+            },
+        },
+    };
+}
 export function MessagesPageView() {
+    const { t } = useTranslation();
     const params = useLaunchParams();
     const [address, setAddress] = useState(() => params.get("recipient") ?? params.get("sender") ?? "");
     const [body, setBody] = useState(() => initialMessageBody(params));
@@ -483,6 +731,7 @@ export function MessagesPageView() {
         return event;
     });
     const [error, setError] = useState(null);
+    const forwardedIncomingIds = useRef(new Set());
     useEffect(() => {
         const incoming = readIncomingSmsContext(params);
         setIncomingSms(incoming);
@@ -516,6 +765,64 @@ export function MessagesPageView() {
     useEffect(() => {
         void refresh();
     }, [refresh]);
+    useEffect(() => {
+        if (!ANDROID_SMS_GATEWAY_ENABLED || !incomingSms)
+            return;
+        if (!ANDROID_SMS_GATEWAY_SECRET) {
+            setError("Android SMS gateway secret is not configured.");
+            return;
+        }
+        const key = incomingSms.messageId ??
+            `${incomingSms.sender}:${incomingSms.timestamp ?? ""}:${incomingSms.body}`;
+        if (forwardedIncomingIds.current.has(key))
+            return;
+        forwardedIncomingIds.current.add(key);
+        let cancelled = false;
+        const forward = async () => {
+            try {
+                const response = await fetch(ANDROID_SMS_GATEWAY_WEBHOOK_URL, {
+                    method: "POST",
+                    headers: {
+                        "content-type": "application/json",
+                        "x-eliza-bridge": "android-sms",
+                        "x-eliza-gateway-secret": ANDROID_SMS_GATEWAY_SECRET,
+                    },
+                    body: JSON.stringify(androidSmsGatewayPayload(incomingSms)),
+                });
+                const cloudReply = (await response.json().catch(() => ({})));
+                if (!response.ok) {
+                    throw new Error(`Cloud gateway failed (${response.status}): ${JSON.stringify(cloudReply)}`);
+                }
+                const replyText = cloudReply.replyText?.trim();
+                if (!replyText) {
+                    if (!cancelled)
+                        setNotice("SMS forwarded to Eliza Cloud.");
+                    return;
+                }
+                const plugins = getPlugins();
+                if (typeof plugins.messages.plugin.sendSms !== "function") {
+                    throw new Error("ElizaMessages plugin is unavailable");
+                }
+                await plugins.messages.plugin.sendSms({
+                    address: incomingSms.sender,
+                    body: replyText,
+                });
+                if (!cancelled) {
+                    setNotice("SMS forwarded to Eliza Cloud and reply sent.");
+                    await refresh();
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : String(err));
+                }
+            }
+        };
+        void forward();
+        return () => {
+            cancelled = true;
+        };
+    }, [incomingSms, refresh]);
     const send = async () => {
         setBusy(true);
         setError(null);
@@ -545,11 +852,46 @@ export function MessagesPageView() {
             setBusy(false);
         }
     };
-    return (_jsxs("div", { className: "mx-auto grid w-full max-w-5xl gap-4 p-4 lg:grid-cols-[minmax(280px,360px)_1fr]", children: [_jsx(Panel, { title: "Compose", description: "Send through Android SMS Manager.", children: _jsxs("div", { className: "grid gap-3", children: [incomingSms ? (_jsxs("div", { className: "rounded border border-border bg-bg p-3 text-sm", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-xs text-muted", children: [_jsx("span", { children: incomingSms.sender || "unknown sender" }), _jsx("span", { children: incomingSms.timestamp
-                                                ? formatTimestamp(incomingSms.timestamp)
-                                                : "Unknown time" })] }), _jsx("p", { className: "mt-2 whitespace-pre-wrap text-txt", children: incomingSms.body || "Empty SMS body" }), incomingSms.messageId ? (_jsxs("div", { className: "mt-2 text-xs text-muted", children: ["message ", incomingSms.messageId] })) : null] })) : null, _jsx(TextInput, { label: "Address", placeholder: "+15551234567", value: address, onChange: setAddress }), _jsx(TextArea, { label: "Body", placeholder: "Message", value: body, onChange: setBody }), _jsx(PrimaryButton, { disabled: busy, icon: _jsx(Send, { className: "h-4 w-4" }), onClick: send, children: "Send SMS" }), _jsx(StatusNotice, { error: error, notice: notice })] }) }), _jsxs(Panel, { title: "Messages", description: "Recent rows from Android's SMS provider.", children: [_jsx("div", { className: "mb-3", children: _jsx(SecondaryButton, { disabled: busy, icon: _jsx(RefreshCw, { className: "h-4 w-4" }), onClick: refresh, children: "Refresh" }) }), _jsx("div", { className: "grid max-h-[60vh] gap-2 overflow-y-auto", children: messages.length > 0 ? (messages.map((message) => (_jsxs("div", { className: "rounded border border-border bg-bg p-3 text-sm", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-xs text-muted", children: [_jsx("span", { children: message.address || "unknown address" }), _jsxs("span", { children: [messageTypeLabel(message.type), " \u00B7", " ", new Date(message.date).toLocaleString()] })] }), _jsx("p", { className: "mt-2 whitespace-pre-wrap text-txt", children: message.body })] }, message.id)))) : (_jsx(EmptyState, { children: "No messages returned by Android." })) })] })] }));
+    return (_jsx(ShellViewAgentSurface, { viewId: "elizaos-apps-messages", children: _jsxs("div", { className: "mx-auto grid w-full max-w-5xl gap-4 p-4 lg:grid-cols-[minmax(280px,360px)_1fr]", children: [_jsx(Panel, { title: t("elizaosapps.messages.compose.title", {
+                        defaultValue: "Compose",
+                    }), description: t("elizaosapps.messages.compose.description", {
+                        defaultValue: "Send through Android SMS Manager.",
+                    }), children: _jsxs("div", { className: "grid gap-3", children: [incomingSms ? (_jsxs("div", { className: "rounded-sm border border-border bg-bg p-3 text-sm", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-xs text-muted", children: [_jsx("span", { children: incomingSms.sender ||
+                                                    t("elizaosapps.messages.unknownSender", {
+                                                        defaultValue: "unknown sender",
+                                                    }) }), _jsx("span", { children: incomingSms.timestamp
+                                                    ? formatTimestamp(incomingSms.timestamp)
+                                                    : t("elizaosapps.messages.unknownTime", {
+                                                        defaultValue: "Unknown time",
+                                                    }) })] }), _jsx("p", { className: "mt-2 whitespace-pre-wrap text-txt", children: incomingSms.body ||
+                                            t("elizaosapps.messages.emptyBody", {
+                                                defaultValue: "Empty SMS body",
+                                            }) }), incomingSms.messageId ? (_jsx("div", { className: "mt-2 text-xs text-muted", children: t("elizaosapps.messages.messageId", {
+                                            id: incomingSms.messageId,
+                                            defaultValue: "message {{id}}",
+                                        }) })) : null] })) : null, _jsx(TextInput, { agentId: "messages-address", agentGroup: "messages-compose", label: t("elizaosapps.messages.addressLabel", {
+                                    defaultValue: "Address",
+                                }), placeholder: "+15551234567", value: address, onChange: setAddress }), _jsx(TextArea, { agentId: "messages-body", agentGroup: "messages-compose", label: t("elizaosapps.messages.bodyLabel", {
+                                    defaultValue: "Body",
+                                }), placeholder: t("elizaosapps.messages.bodyPlaceholder", {
+                                    defaultValue: "Message",
+                                }), value: body, onChange: setBody }), _jsx(PrimaryButton, { agentId: "messages-send", agentLabel: t("elizaosapps.messages.send", {
+                                    defaultValue: "Send SMS",
+                                }), agentGroup: "messages-compose", disabled: busy, icon: _jsx(Send, { className: "h-4 w-4" }), onClick: send, children: t("elizaosapps.messages.send", { defaultValue: "Send SMS" }) }), _jsx(StatusNotice, { error: error, notice: notice })] }) }), _jsxs(Panel, { title: t("elizaosapps.messages.list.title", {
+                        defaultValue: "Messages",
+                    }), description: t("elizaosapps.messages.list.description", {
+                        defaultValue: "Recent rows from Android's SMS provider.",
+                    }), children: [_jsx("div", { className: "mb-3", children: _jsx(SecondaryButton, { agentId: "messages-refresh", agentLabel: t("elizaosapps.messages.refresh", {
+                                    defaultValue: "Refresh",
+                                }), disabled: busy, icon: _jsx(RefreshCw, { className: "h-4 w-4" }), onClick: refresh, children: t("elizaosapps.messages.refresh", { defaultValue: "Refresh" }) }) }), _jsx("div", { className: "grid max-h-[60vh] gap-2 overflow-y-auto", children: messages.length > 0 ? (messages.map((message) => (_jsxs("div", { className: "rounded-sm border border-border bg-bg p-3 text-sm", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-xs text-muted", children: [_jsx("span", { children: message.address ||
+                                                    t("elizaosapps.messages.unknownAddress", {
+                                                        defaultValue: "unknown address",
+                                                    }) }), _jsxs("span", { children: [messageTypeLabel(message.type), " \u00B7", " ", new Date(message.date).toLocaleString("en-US")] })] }), _jsx("p", { className: "mt-2 whitespace-pre-wrap text-txt", children: message.body })] }, message.id)))) : (_jsx(EmptyState, { children: t("elizaosapps.messages.list.empty", {
+                                    defaultValue: "No messages returned by Android.",
+                                }) })) })] })] }) }));
 }
 export function ContactsPageView() {
+    const { t } = useTranslation();
     const [query, setQuery] = useState("");
     const [displayName, setDisplayName] = useState("");
     const [phoneNumber, setPhoneNumber] = useState("");
@@ -612,7 +954,35 @@ export function ContactsPageView() {
             setBusy(false);
         }
     };
-    return (_jsxs("div", { className: "mx-auto grid w-full max-w-5xl gap-4 p-4 lg:grid-cols-[minmax(280px,360px)_1fr]", children: [_jsx(Panel, { title: "Create Contact", description: "Write into Android Contacts Provider.", children: _jsxs("div", { className: "grid gap-3", children: [_jsx(TextInput, { label: "Display Name", value: displayName, onChange: setDisplayName }), _jsx(TextInput, { label: "Phone Number", value: phoneNumber, onChange: setPhoneNumber }), _jsx(TextInput, { label: "Email", value: emailAddress, onChange: setEmailAddress }), _jsx(PrimaryButton, { disabled: busy, icon: _jsx(UserPlus, { className: "h-4 w-4" }), onClick: create, children: "Create" }), _jsx(StatusNotice, { error: error, notice: notice })] }) }), _jsxs(Panel, { title: "Contacts", description: "Read from Android Contacts Provider.", children: [_jsxs("div", { className: "mb-3 flex flex-col gap-2 sm:flex-row", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(TextInput, { label: "Search", placeholder: "Name, number, or email", value: query, onChange: setQuery }) }), _jsx("div", { className: "flex items-end", children: _jsx(SecondaryButton, { disabled: busy, icon: _jsx(RefreshCw, { className: "h-4 w-4" }), onClick: refresh, children: "Refresh" }) })] }), _jsx("div", { className: "grid max-h-[60vh] gap-2 overflow-y-auto", children: contacts.length > 0 ? (contacts.map((contact) => (_jsxs("div", { className: "rounded border border-border bg-bg p-3 text-sm", children: [_jsx("div", { className: "font-medium text-txt", children: contact.displayName }), _jsx("div", { className: "mt-1 text-muted", children: contact.phoneNumbers.length > 0
-                                        ? contact.phoneNumbers.join(", ")
-                                        : "No phone numbers" }), contact.emailAddresses.length > 0 ? (_jsx("div", { className: "mt-1 text-xs text-muted", children: contact.emailAddresses.join(", ") })) : null] }, contact.id)))) : (_jsx(EmptyState, { children: "No contacts returned by Android." })) })] })] }));
+    return (_jsx(ShellViewAgentSurface, { viewId: "elizaos-apps-contacts", children: _jsxs("div", { className: "mx-auto grid w-full max-w-5xl gap-4 p-4 lg:grid-cols-[minmax(280px,360px)_1fr]", children: [_jsx(Panel, { title: t("elizaosapps.contacts.create.title", {
+                        defaultValue: "Create Contact",
+                    }), description: t("elizaosapps.contacts.create.description", {
+                        defaultValue: "Write into Android Contacts Provider.",
+                    }), children: _jsxs("div", { className: "grid gap-3", children: [_jsx(TextInput, { agentId: "contacts-create-display-name", agentGroup: "contacts-create", label: t("elizaosapps.contacts.displayName", {
+                                    defaultValue: "Display Name",
+                                }), value: displayName, onChange: setDisplayName }), _jsx(TextInput, { agentId: "contacts-create-phone-number", agentGroup: "contacts-create", label: t("elizaosapps.contacts.phoneNumber", {
+                                    defaultValue: "Phone Number",
+                                }), value: phoneNumber, onChange: setPhoneNumber }), _jsx(TextInput, { agentId: "contacts-create-email", agentGroup: "contacts-create", label: t("elizaosapps.contacts.email", {
+                                    defaultValue: "Email",
+                                }), value: emailAddress, onChange: setEmailAddress }), _jsx(PrimaryButton, { agentId: "contacts-create-submit", agentLabel: t("elizaosapps.contacts.create.button", {
+                                    defaultValue: "Create",
+                                }), agentGroup: "contacts-create", disabled: busy, icon: _jsx(UserPlus, { className: "h-4 w-4" }), onClick: create, children: t("elizaosapps.contacts.create.button", {
+                                    defaultValue: "Create",
+                                }) }), _jsx(StatusNotice, { error: error, notice: notice })] }) }), _jsxs(Panel, { title: t("elizaosapps.contacts.list.title", {
+                        defaultValue: "Contacts",
+                    }), description: t("elizaosapps.contacts.list.description", {
+                        defaultValue: "Read from Android Contacts Provider.",
+                    }), children: [_jsxs("div", { className: "mb-3 flex flex-col gap-2 sm:flex-row", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(TextInput, { agentId: "contacts-search", label: t("elizaosapps.contacts.searchLabel", {
+                                            defaultValue: "Search",
+                                        }), placeholder: t("elizaosapps.contacts.searchPlaceholder", {
+                                            defaultValue: "Name, number, or email",
+                                        }), value: query, onChange: setQuery }) }), _jsx("div", { className: "flex items-end", children: _jsx(SecondaryButton, { agentId: "contacts-refresh", agentLabel: t("elizaosapps.contacts.refresh", {
+                                            defaultValue: "Refresh",
+                                        }), disabled: busy, icon: _jsx(RefreshCw, { className: "h-4 w-4" }), onClick: refresh, children: t("elizaosapps.contacts.refresh", { defaultValue: "Refresh" }) }) })] }), _jsx("div", { className: "grid max-h-[60vh] gap-2 overflow-y-auto", children: contacts.length > 0 ? (contacts.map((contact) => (_jsxs("div", { className: "rounded-sm border border-border bg-bg p-3 text-sm", children: [_jsx("div", { className: "font-medium text-txt", children: contact.displayName }), _jsx("div", { className: "mt-1 text-muted", children: contact.phoneNumbers.length > 0
+                                            ? contact.phoneNumbers.join(", ")
+                                            : t("elizaosapps.contacts.noNumbers", {
+                                                defaultValue: "No phone numbers",
+                                            }) }), contact.emailAddresses.length > 0 ? (_jsx("div", { className: "mt-1 text-xs text-muted", children: contact.emailAddresses.join(", ") })) : null] }, contact.id)))) : (_jsx(EmptyState, { children: t("elizaosapps.contacts.list.empty", {
+                                    defaultValue: "No contacts returned by Android.",
+                                }) })) })] })] }) }));
 }