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

package/components/pages/DocumentsView.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BadgeCheck, Bot, FileSearch, FileText, Globe2, Layers, Lock, Shield, User, } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/client.js";
 import { isApiError } from "../../api/client-types-core.js";
 import { getCached, setCached } from "../../hooks/resource-cache.js";
-import { useApp } from "../../state/useApp.js";
+import { useAppSelector, useTranslation } from "../../state/index.js";
 import { useRegisterViewChatBinding } from "../../state/view-chat-binding.js";
 import { confirmDesktopAction } from "../../utils/desktop-dialogs.js";
 import { isDocumentImageFile, MAX_DOCUMENT_IMAGE_PROCESSING_BYTES, maybeCompressDocumentUploadImage, } from "../../utils/documents-upload-image.js";
@@ -67,8 +67,8 @@ function ScopeFilterChip({ value, label, Icon, active, onSelect, }) {
             : "border-border/30 bg-bg-muted/20 text-muted hover:border-border/55 hover:text-txt"}`, children: [_jsx(Icon, { className: "h-3 w-3", "aria-hidden": true }), label] }));
 }
 /* ── Search Result Item ─────────────────────────────────────────────── */
-function SearchResultListItem({ result, active, onSelect, }) {
-    const { t } = useApp();
+const SearchResultListItem = memo(function SearchResultListItem({ result, active, onSelect, }) {
+    const { t } = useTranslation();
     const documentId = result.documentId || result.id;
     const title = result.documentTitle ||
         t("documentsview.UnknownDocument", {
@@ -86,10 +86,10 @@ function SearchResultListItem({ result, active, onSelect, }) {
     return (_jsxs("button", { ref: ref, ...agentProps, onClick: () => onSelect(documentId), type: "button", "aria-current": active ? "page" : undefined, className: `group flex w-full items-start px-0 py-3 text-left transition-colors ${active ? "bg-transparent" : "bg-transparent hover:bg-bg-hover"}`, children: [_jsxs("span", { className: `mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-2xs font-bold ${active
                     ? "border-accent/25 bg-accent/10 text-accent-fg"
                     : "border-border/15 bg-transparent text-muted-strong"}`, children: [(result.similarity * 100).toFixed(0), "%"] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(FileSearch, { className: "h-3.5 w-3.5 shrink-0 text-muted", "aria-hidden": true }), _jsx("div", { className: "truncate text-sm font-semibold text-txt", children: title })] }), _jsx("div", { className: "mt-1 line-clamp-2 text-xs text-muted", children: result.text })] })] }));
-}
+});
 /* ── Document Card ──────────────────────────────────────────────────── */
-function DocumentListItem({ doc, active, onSelect, onDelete, deleting, }) {
-    const { t } = useApp();
+const DocumentListItem = memo(function DocumentListItem({ doc, active, onSelect, onDelete, deleting, }) {
+    const { t } = useTranslation();
     const scopeLabel = doc.scope === "owner-private"
         ? t("documentsview.ScopeOwner", { defaultValue: "Owner" })
         : doc.scope === "user-private"
@@ -118,11 +118,11 @@ function DocumentListItem({ doc, active, onSelect, onDelete, deleting, }) {
                     filename: doc.filename,
                 }), "aria-current": active ? "page" : undefined, title: doc.filename, className: "flex min-w-0 flex-1 items-center gap-3 px-3.5 py-3 text-left", children: [_jsx("span", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-sm border ${active
                             ? "border-accent/30 bg-accent/10 text-accent"
-                            : "border-border/30 bg-bg-muted/20 text-muted"}`, children: _jsx(FileText, { className: "h-4 w-4", "aria-hidden": true }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-semibold leading-snug text-txt", children: doc.filename }), _jsx("div", { className: "mt-1 truncate text-xs text-muted", children: getDocumentSummary(doc, t) }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5 text-2xs text-muted/70", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-accent/20 bg-accent/8 px-1.5 py-0.5 text-accent-fg", children: [_jsx(ScopeIcon, { className: "h-3 w-3", "aria-hidden": true }), scopeLabel] }), _jsx("span", { className: "rounded-full border border-border/30 bg-bg-muted/20 px-1.5 py-0.5", children: getDocumentTypeLabel(doc.contentType) }), doc.canEditText ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-status-success/25 bg-status-success-bg px-1.5 py-0.5 text-status-success", children: [_jsx(BadgeCheck, { className: "h-3 w-3", "aria-hidden": true }), t("documentsview.Editable", { defaultValue: "editable" })] })) : null, !doc.canDelete ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-border/30 bg-bg-muted/20 px-1.5 py-0.5", children: [_jsx(Lock, { className: "h-3 w-3", "aria-hidden": true }), t("documentsview.Locked", { defaultValue: "locked" })] })) : null] })] })] }), _jsx("span", { className: "absolute right-2 top-2 opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100 focus-within:opacity-100", children: _jsx(ConfirmDeleteControl, { triggerClassName: "h-7 rounded-sm border border-transparent px-2 text-2xs font-bold !bg-transparent text-danger/70 transition-all hover:!bg-danger/12 hover:border-danger/25 hover:text-danger", confirmClassName: "h-7 rounded-sm border border-danger/25 bg-danger/14 px-2 text-2xs font-bold text-danger transition-all hover:bg-danger/20", cancelClassName: "h-7 rounded-sm border border-border/35 px-2 text-2xs font-bold text-muted-strong transition-all hover:border-border-strong hover:text-txt", disabled: deleting || !doc.canDelete, busyLabel: "...", onConfirm: () => onDelete(doc.id) }) })] }));
-}
+                            : "border-border/30 bg-bg-muted/20 text-muted"}`, children: _jsx(FileText, { className: "h-4 w-4", "aria-hidden": true }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-semibold leading-snug text-txt", children: doc.filename }), _jsx("div", { className: "mt-1 truncate text-xs text-muted", children: getDocumentSummary(doc, t) }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5 text-2xs text-muted/70", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-accent/20 bg-accent/8 px-1.5 py-0.5 text-accent-fg", children: [_jsx(ScopeIcon, { className: "h-3 w-3", "aria-hidden": true }), scopeLabel] }), _jsx("span", { className: "rounded-full border border-border/30 bg-bg-muted/20 px-1.5 py-0.5", children: getDocumentTypeLabel(doc.contentType) }), doc.canEditText ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-status-success/25 bg-status-success-bg px-1.5 py-0.5 text-status-success", children: [_jsx(BadgeCheck, { className: "h-3 w-3", "aria-hidden": true }), t("documentsview.Editable", { defaultValue: "editable" })] })) : null, !doc.canDelete ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-border/30 bg-bg-muted/20 px-1.5 py-0.5", children: [_jsx(Lock, { className: "h-3 w-3", "aria-hidden": true }), t("documentsview.Locked", { defaultValue: "locked" })] })) : null] })] })] }), _jsx("span", { className: "absolute right-2 top-2 opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100 ", children: _jsx(ConfirmDeleteControl, { triggerClassName: "h-7 rounded-sm border border-transparent px-2 text-2xs font-bold !bg-transparent text-danger/70 transition-all hover:!bg-danger/12 hover:border-danger/25 hover:text-danger", confirmClassName: "h-7 rounded-sm border border-danger/25 bg-danger/14 px-2 text-2xs font-bold text-danger transition-all hover:bg-danger/20", cancelClassName: "h-7 rounded-sm border border-border/35 px-2 text-2xs font-bold text-muted-strong transition-all hover:border-border-strong hover:text-txt", disabled: deleting || !doc.canDelete, busyLabel: "...", onConfirm: () => onDelete(doc.id) }) })] }));
+});
 /* ── Compact strip chips ────────────────────────────────────────────── */
-function CompactSearchChip({ result, active, onSelect, }) {
-    const { t } = useApp();
+const CompactSearchChip = memo(function CompactSearchChip({ result, active, onSelect, }) {
+    const { t } = useTranslation();
     const id = result.documentId || result.id;
     const title = result.documentTitle ||
         t("documentsview.UnknownDocument", {
@@ -140,7 +140,7 @@ function CompactSearchChip({ result, active, onSelect, }) {
     return (_jsxs("button", { ref: ref, ...agentProps, type: "button", onClick: () => onSelect(id), className: `inline-flex max-w-[16rem] shrink-0 items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold transition ${active
             ? "border-accent/45 bg-accent/12 text-accent-fg"
             : "border-border/30 bg-bg-muted/20 text-muted hover:text-txt"}`, children: [_jsx(FileSearch, { className: "h-3.5 w-3.5", "aria-hidden": true }), _jsx("span", { className: "truncate", children: title })] }));
-}
+});
 function CompactDocChip({ doc, active, onSelect, }) {
     const { ref, agentProps } = useAgentElement({
         id: `document-${doc.id}`,
@@ -157,8 +157,8 @@ function CompactDocChip({ doc, active, onSelect, }) {
 }
 /* ── Main DocumentsView Component ───────────────────────────────────── */
 export function DocumentsView({ fileInputId, inModal, embedded = false, onDocumentsChange, onSelectedDocumentIdChange, selectedDocumentId, showSelectorRail, } = {}) {
-    const { t } = useApp();
-    const { setActionNotice } = useApp();
+    const t = useAppSelector((s) => s.t);
+    const setActionNotice = useAppSelector((s) => s.setActionNotice);
     const setActionNoticeRef = useRef(setActionNotice);
     setActionNoticeRef.current = setActionNotice;
     const [searchQuery, setSearchQuery] = useState("");
@@ -701,7 +701,7 @@ export function DocumentsView({ fileInputId, inModal, embedded = false, onDocume
             } }) }));
     const selectorRail = (_jsxs("div", { className: `order-1 flex w-full shrink-0 flex-col gap-3 lg:order-2 ${useCompactSelectorRail
             ? "lg:w-[18.5rem] xl:w-[20rem]"
-            : "lg:w-[22rem] xl:w-[24rem]"}`, children: [_jsx(PagePanel, { variant: "inset", className: `${useCompactSelectorRail ? "p-2" : "p-3"} !rounded-none !border-0 !bg-transparent !shadow-none !ring-0`, children: _jsx(UploadZone, { fileInputId: fileInputId, onFilesUpload: handleFilesUpload, onTextUpload: handleTextUpload, onUrlUpload: handleUrlUpload, uploading: uploading, uploadStatus: uploadStatus }) }), _jsxs(PagePanel, { variant: "inset", className: `flex flex-1 flex-col overflow-hidden p-2.5 !rounded-none !border-0 !bg-transparent !shadow-none !ring-0 ${useCompactSelectorRail ? "min-h-[14rem]" : "min-h-[18rem]"}`, children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3 px-1", children: [_jsx("div", { className: "min-w-0 text-xs font-semibold uppercase tracking-[0.12em] text-muted/70", children: isShowingSearchResults
+            : "lg:w-[22rem] xl:w-[24rem]"}`, children: [_jsx(PagePanel, { variant: "inset", className: `${useCompactSelectorRail ? "p-2" : "p-3"} !rounded-none !border-0 !bg-transparent !shadow-none `, children: _jsx(UploadZone, { fileInputId: fileInputId, onFilesUpload: handleFilesUpload, onTextUpload: handleTextUpload, onUrlUpload: handleUrlUpload, uploading: uploading, uploadStatus: uploadStatus }) }), _jsxs(PagePanel, { variant: "inset", className: `flex flex-1 flex-col overflow-hidden p-2.5 !rounded-none !border-0 !bg-transparent !shadow-none  ${useCompactSelectorRail ? "min-h-[14rem]" : "min-h-[18rem]"}`, children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3 px-1", children: [_jsx("div", { className: "min-w-0 text-xs font-semibold uppercase tracking-[0.12em] text-muted/70", children: isShowingSearchResults
                                     ? t("documentsview.SearchResults", {
                                         defaultValue: "Search results",
                                     })
@@ -712,26 +712,26 @@ export function DocumentsView({ fileInputId, inModal, embedded = false, onDocume
                                     : t("documentsview.DocumentCountMany", {
                                         defaultValue: "{{count}} docs",
                                         count: documents.length,
-                                    }) })] }), _jsx(ChatSearchHint, { noun: "documents", query: searchQuery, className: "px-1" }), _jsx("div", { className: "mt-2", children: scopeFilterStrip }), _jsxs("div", { className: "custom-scrollbar mt-2 flex min-h-0 flex-1 flex-col gap-1.5 overflow-y-auto px-0.5 py-0.5", children: [loading && !isShowingSearchResults && documents.length === 0 && (_jsx(ListSkeleton, { rows: 6 })), !loading && !isShowingSearchResults && documents.length === 0 && (_jsx(PagePanel.Empty, { variant: "inset", className: "min-h-[12rem] px-0 py-8 !rounded-none !border-0 !bg-transparent !shadow-none !ring-0", description: t("documentsview.UploadFilesOrImpo"), title: t("documentsview.NoDocumentsYet") })), !loading &&
+                                    }) })] }), _jsx(ChatSearchHint, { noun: "documents", query: searchQuery, className: "px-1" }), _jsx("div", { className: "mt-2", children: scopeFilterStrip }), _jsxs("div", { className: "custom-scrollbar mt-2 flex min-h-0 flex-1 flex-col gap-1.5 overflow-y-auto px-0.5 py-0.5", children: [loading && !isShowingSearchResults && documents.length === 0 && (_jsx(ListSkeleton, { rows: 6 })), !loading && !isShowingSearchResults && documents.length === 0 && (_jsx(PagePanel.Empty, { variant: "inset", className: "min-h-[12rem] px-0 py-8 !rounded-none !border-0 !bg-transparent !shadow-none ", description: t("documentsview.UploadFilesOrImpo"), title: t("documentsview.NoDocumentsYet") })), !loading &&
                                 !isShowingSearchResults &&
                                 documents.length > 0 &&
-                                filteredDocuments.length === 0 && (_jsx(PagePanel.Empty, { variant: "inset", className: "min-h-[12rem] px-0 py-8 !rounded-none !border-0 !bg-transparent !shadow-none !ring-0", description: t("documentsview.SearchTips", {
+                                filteredDocuments.length === 0 && (_jsx(PagePanel.Empty, { variant: "inset", className: "min-h-[12rem] px-0 py-8 !rounded-none !border-0 !bg-transparent !shadow-none ", description: t("documentsview.SearchTips", {
                                     defaultValue: "Try a filename, topic, or phrase from the document body.",
                                 }), title: t("documentsview.NoMatchingDocuments", {
                                     defaultValue: "No matching documents",
-                                }) })), isShowingSearchResults && visibleSearchResults.length === 0 && (_jsx(PagePanel.Empty, { variant: "inset", className: "min-h-[12rem] px-0 py-8 !rounded-none !border-0 !bg-transparent !shadow-none !ring-0", description: t("documentsview.SearchTips", {
+                                }) })), isShowingSearchResults && visibleSearchResults.length === 0 && (_jsx(PagePanel.Empty, { variant: "inset", className: "min-h-[12rem] px-0 py-8 !rounded-none !border-0 !bg-transparent !shadow-none ", description: t("documentsview.SearchTips", {
                                     defaultValue: "Try a filename, topic, or phrase from the document body.",
                                 }), title: t("documentsview.NoResultsFound") })), isShowingSearchResults
                                 ? visibleSearchResults.map((result) => (_jsx(SearchResultListItem, { result: result, active: selectedDocId === (result.documentId || result.id), onSelect: setSelectedDocId }, result.id)))
                                 : filteredDocuments.map((doc) => (_jsx(DocumentListItem, { doc: doc, active: selectedDocId === doc.id, onSelect: setSelectedDocId, onDelete: handleDelete, deleting: deleting === doc.id }, doc.id)))] })] })] }));
-    const compactDocumentStrip = !shouldRenderSelectorRail ? (_jsxs(PagePanel, { variant: "inset", className: "flex shrink-0 flex-col gap-2 px-0 py-0 !rounded-none !border-0 !bg-transparent !shadow-none !ring-0", children: [_jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center", children: [_jsx(ChatSearchHint, { noun: "documents", query: searchQuery, className: "min-w-0 flex-1" }), fileInputId ? (_jsxs("label", { htmlFor: fileInputId, className: `inline-flex h-9 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-sm border border-accent/35 bg-accent/10 px-3 text-xs font-semibold text-accent-fg transition hover:bg-accent/16 ${uploading ? "pointer-events-none opacity-60" : ""}`, children: [_jsx(FileText, { className: "h-3.5 w-3.5", "aria-hidden": true }), uploading
+    const compactDocumentStrip = !shouldRenderSelectorRail ? (_jsxs(PagePanel, { variant: "inset", className: "flex shrink-0 flex-col gap-2 px-0 py-0 !rounded-none !border-0 !bg-transparent !shadow-none ", children: [_jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center", children: [_jsx(ChatSearchHint, { noun: "documents", query: searchQuery, className: "min-w-0 flex-1" }), fileInputId ? (_jsxs("label", { htmlFor: fileInputId, className: `inline-flex h-9 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-sm border border-accent/35 bg-accent/10 px-3 text-xs font-semibold text-accent-fg transition hover:bg-accent/16 ${uploading ? "pointer-events-none opacity-60" : ""}`, children: [_jsx(FileText, { className: "h-3.5 w-3.5", "aria-hidden": true }), uploading
                                 ? t("documentsview.Uploading", { defaultValue: "Uploading" })
                                 : t("documentsview.AddKnowledge", {
                                     defaultValue: "Add Knowledge",
                                 })] })) : null] }), _jsx("div", { children: scopeFilterStrip }), _jsx("div", { className: "custom-scrollbar flex gap-2 overflow-x-auto pb-1", children: isShowingSearchResults
                     ? visibleSearchResults.map((result) => (_jsx(CompactSearchChip, { result: result, active: selectedDocId === (result.documentId || result.id), onSelect: setSelectedDocId }, result.id)))
                     : filteredDocuments.map((doc) => (_jsx(CompactDocChip, { doc: doc, active: selectedDocId === doc.id, onSelect: setSelectedDocId }, doc.id))) })] })) : null;
-    return (_jsxs("div", { className: `flex flex-1 min-h-0 flex-col gap-4 ${inModal ? "min-h-0" : ""}`, "data-testid": "documents-view", children: [!shouldRenderSelectorRail && fileInputId ? (_jsx("input", { id: fileInputId, type: "file", className: "hidden", multiple: true, accept: DOCUMENT_UPLOAD_ACCEPT, onChange: handleExternalFileInputChange })) : null, isServiceLoading && (_jsxs(PagePanel, { variant: "inset", className: "flex items-center gap-2 px-0 py-3 text-sm text-muted-strong !rounded-none !border-0 !bg-transparent !shadow-none !ring-0", children: [_jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-accent border-t-transparent" }), t("documentsview.DocumentServiceIs")] })), documentsUnavailable && !isServiceLoading && (_jsx(PagePanel.Notice, { tone: "default", children: t("documentsview.DocumentsUnavailableHere", {
+    return (_jsxs("div", { className: `flex flex-1 min-h-0 flex-col gap-4 ${inModal ? "min-h-0" : ""}`, "data-testid": "documents-view", children: [!shouldRenderSelectorRail && fileInputId ? (_jsx("input", { id: fileInputId, type: "file", className: "hidden", multiple: true, accept: DOCUMENT_UPLOAD_ACCEPT, onChange: handleExternalFileInputChange })) : null, isServiceLoading && (_jsxs(PagePanel, { variant: "inset", className: "flex items-center gap-2 px-0 py-3 text-sm text-muted-strong !rounded-none !border-0 !bg-transparent !shadow-none ", children: [_jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-accent border-t-transparent" }), t("documentsview.DocumentServiceIs")] })), documentsUnavailable && !isServiceLoading && (_jsx(PagePanel.Notice, { tone: "default", children: t("documentsview.DocumentsUnavailableHere", {
                     defaultValue: "Knowledge isn't available on this device. Manage documents from the desktop or web app.",
                 }) })), loadError && !documentsUnavailable && !isServiceLoading && (_jsx(PagePanel.Notice, { tone: "danger", actions: _jsx(Button, { variant: "outline", size: "sm", className: "border-danger/30 px-3 text-xs text-danger hover:bg-danger/16", onClick: () => loadData(), children: t("common.retry") }), children: loadError })), compactDocumentStrip, _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4 lg:flex-row", children: [documentContent, shouldRenderSelectorRail ? selectorRail : null] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ElizaCloudDashboard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/ElizaCloudDashboard.tsx"],"names":[],"mappings":"AA4CA,wBAAgB,cAAc,4CAs6B7B"}
+{"version":3,"file":"ElizaCloudDashboard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/ElizaCloudDashboard.tsx"],"names":[],"mappings":"AA4CA,wBAAgB,cAAc,4CAw7B7B"}

package/components/pages/ElizaCloudDashboard.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import { client, isRateLimitedError, } from "../../api/index.js";
 import { useBranding } from "../../config/branding.js";
 import { isElizaCloudRuntimeLocked } from "../../first-run/mobile-runtime-mode.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelectorShallow } from "../../state/index.js";
 import { openExternalUrl, preOpenWindow } from "../../utils/index.js";
 import { StripeEmbeddedCheckout } from "../cloud/StripeEmbeddedCheckout.js";
 import { Button } from "../ui/button.js";
@@ -13,7 +13,25 @@ import { Input } from "../ui/input.js";
 import { Switch } from "../ui/switch.js";
 import { autoTopUpFormReducer, BILLING_PRESET_AMOUNTS, buildAutoTopUpFormState, consumeManagedDiscordCallbackUrl, consumeManagedGithubCallbackUrl, ELIZA_CLOUD_WEB_URL, getBillingAutoTopUp, getBillingLimits, isRecord, normalizeBillingSettings, normalizeBillingSummary, readBoolean, readNumber, readString, resolveCheckoutUrl, resolveCloudAccountIdDisplay, } from "./cloud-dashboard-utils.js";
 export function CloudDashboard() {
-    const { t, elizaCloudConnected, elizaCloudCredits, elizaCloudCreditsLow, elizaCloudCreditsCritical, elizaCloudAuthRejected, elizaCloudTopUpUrl, elizaCloudUserId, elizaCloudStatusReason, cloudDashboardView, elizaCloudLoginBusy, elizaCloudLoginFallbackUrl, handleCloudLogin, handleCloudDisconnect, elizaCloudDisconnecting: cloudDisconnecting, setActionNotice, setState, } = useApp();
+    const { t, elizaCloudConnected, elizaCloudCredits, elizaCloudCreditsLow, elizaCloudCreditsCritical, elizaCloudAuthRejected, elizaCloudTopUpUrl, elizaCloudUserId, elizaCloudStatusReason, cloudDashboardView, elizaCloudLoginBusy, elizaCloudLoginFallbackUrl, handleCloudLogin, handleCloudDisconnect, cloudDisconnecting, setActionNotice, setState, } = useAppSelectorShallow((s) => ({
+        t: s.t,
+        elizaCloudConnected: s.elizaCloudConnected,
+        elizaCloudCredits: s.elizaCloudCredits,
+        elizaCloudCreditsLow: s.elizaCloudCreditsLow,
+        elizaCloudCreditsCritical: s.elizaCloudCreditsCritical,
+        elizaCloudAuthRejected: s.elizaCloudAuthRejected,
+        elizaCloudTopUpUrl: s.elizaCloudTopUpUrl,
+        elizaCloudUserId: s.elizaCloudUserId,
+        elizaCloudStatusReason: s.elizaCloudStatusReason,
+        cloudDashboardView: s.cloudDashboardView,
+        elizaCloudLoginBusy: s.elizaCloudLoginBusy,
+        elizaCloudLoginFallbackUrl: s.elizaCloudLoginFallbackUrl,
+        handleCloudLogin: s.handleCloudLogin,
+        handleCloudDisconnect: s.handleCloudDisconnect,
+        cloudDisconnecting: s.elizaCloudDisconnecting,
+        setActionNotice: s.setActionNotice,
+        setState: s.setState,
+    }));
     const branding = useBranding();
     const [refreshing, setRefreshing] = useState(false);
     const [billingLoading, setBillingLoading] = useState(false);

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

@@ -1 +1 @@
-{"version":3,"file":"ElizaOsAppsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/ElizaOsAppsView.tsx"],"names":[],"mappings":"AAslBA,wBAAgB,aAAa,4CA4xB5B;AA+ED,wBAAgB,gBAAgB,4CAgS/B;AAED,wBAAgB,gBAAgB,4CAmM/B"}
+{"version":3,"file":"ElizaOsAppsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/ElizaOsAppsView.tsx"],"names":[],"mappings":"AAknBA,wBAAgB,aAAa,4CAwwB5B;AA+ED,wBAAgB,gBAAgB,4CAgS/B;AAED,wBAAgB,gBAAgB,4CAmM/B"}

package/components/pages/ElizaOsAppsView.js

@@ -1,6 +1,6 @@
 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, useId, 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";
@@ -159,22 +159,30 @@ function DialpadButton({ digit, onPress, }) {
     });
     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 }));
 }
-function RecentCallButton({ call, onSelect, children, }) {
+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: onSelect,
+        onActivate: handleSelect,
     });
-    return (_jsx("button", { ref: ref, type: "button", onClick: onSelect, className: "rounded-sm border border-border bg-bg p-3 text-left text-sm hover:border-primary", ...agentProps, children: children }));
-}
-function PhoneContactRow({ contact, dialLabel, smsLabel, unnamedLabel, noNumbersLabel, onDial, onSms, }) {
+    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: () => onDial(contactNumber), 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: () => onSms(contactNumber), children: smsLabel })] })] }) }));
-}
+                                : 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 })] }));
 }
@@ -262,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)
@@ -513,15 +531,7 @@ export function PhonePageView() {
                     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) => (_jsxs(RecentCallButton, { call: call, onSelect: () => {
-                                setSelectedCallId(call.id);
-                                setActivePanel("transcripts");
-                            }, 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) })] }), 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: t("elizaosapps.phone.recents.empty", {
+                            }), 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.",
                             }) })) })] }));
         }
@@ -544,10 +554,7 @@ export function PhonePageView() {
                                 defaultValue: "Unnamed contact",
                             }), noNumbersLabel: t("elizaosapps.phone.contacts.noNumbers", {
                                 defaultValue: "No phone numbers",
-                            }), onDial: (contactNumber) => {
-                                setNumber(contactNumber);
-                                setActivePanel("dialer");
-                            }, onSms: openMessagesForNumber }, contact.id)))) : (_jsx(EmptyState, { children: t("elizaosapps.phone.contacts.empty", {
+                            }), onDial: handleDialContact, onSms: openMessagesForNumber }, contact.id)))) : (_jsx(EmptyState, { children: t("elizaosapps.phone.contacts.empty", {
                                 defaultValue: "No contacts returned by Android.",
                             }) })) })] }));
         }
@@ -879,7 +886,7 @@ export function MessagesPageView() {
                                 }), 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()] })] }), _jsx("p", { className: "mt-2 whitespace-pre-wrap text-txt", children: message.body })] }, message.id)))) : (_jsx(EmptyState, { children: t("elizaosapps.messages.list.empty", {
+                                                    }) }), _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.",
                                 }) })) })] })] }) }));
 }

package/components/pages/FilesView.d.ts

@@ -0,0 +1,15 @@
+/**
+ * FilesView (PR5, attachments v1) — first-class "Files" dashboard view.
+ *
+ * Lists every stored file (newest first) from `GET /api/files` and exposes
+ * per-row CRUD affordances: Download (download-share helper), Share (gated by
+ * `canShareFiles()`), and Delete (`DELETE /api/files/:filename` with optimistic
+ * removal + confirm). Facet filters (All / Images / Audio / Video / Documents)
+ * are derived from each file's `mimeType`.
+ *
+ * Data flows exclusively through the `client` singleton (`listFiles` /
+ * `deleteFile`); the view computes nothing the server should own — it just
+ * renders the DTO and routes user intents back through the client + helpers.
+ */
+export declare function FilesView(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FilesView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilesView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/FilesView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAwNH,wBAAgB,SAAS,4CA4OxB"}

package/components/pages/FilesView.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * FilesView (PR5, attachments v1) — first-class "Files" dashboard view.
+ *
+ * Lists every stored file (newest first) from `GET /api/files` and exposes
+ * per-row CRUD affordances: Download (download-share helper), Share (gated by
+ * `canShareFiles()`), and Delete (`DELETE /api/files/:filename` with optimistic
+ * removal + confirm). Facet filters (All / Images / Audio / Video / Documents)
+ * are derived from each file's `mimeType`.
+ *
+ * Data flows exclusively through the `client` singleton (`listFiles` /
+ * `deleteFile`); the view computes nothing the server should own — it just
+ * renders the DTO and routes user intents back through the client + helpers.
+ */
+import { AlertTriangle, Download, FileAudio, FileText, FileVideo, ImageIcon, Loader2, Share2, Trash2, } from "lucide-react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { client } from "../../api/index.js";
+import { useTranslation } from "../../state/TranslationContext.hooks.js";
+import { formatByteSize, formatRelativeTime, resolveAppAssetUrl, } from "../../utils/index.js";
+import { canShareFiles, downloadAttachment, filenameForMime, shareAttachment, } from "../../utils/download-share.js";
+import { PagePanel } from "../composites/page-panel/index.js";
+import { Button } from "../ui/button.js";
+const FACETS = [
+    "all",
+    "image",
+    "audio",
+    "video",
+    "document",
+];
+/**
+ * Map a MIME type to one of the facet kinds. Anything that isn't image/audio/
+ * video falls back to "document" (the catch-all for PDFs, text, archives, …).
+ */
+function kindForMime(mimeType) {
+    const mime = (mimeType || "").split(";")[0].trim().toLowerCase();
+    if (mime.startsWith("image/"))
+        return "image";
+    if (mime.startsWith("audio/"))
+        return "audio";
+    if (mime.startsWith("video/"))
+        return "video";
+    return "document";
+}
+function facetLabel(t, facet) {
+    switch (facet) {
+        case "all":
+            return t("filesview.facet.all", { defaultValue: "All" });
+        case "image":
+            return t("filesview.facet.images", { defaultValue: "Images" });
+        case "audio":
+            return t("filesview.facet.audio", { defaultValue: "Audio" });
+        case "video":
+            return t("filesview.facet.video", { defaultValue: "Video" });
+        case "document":
+            return t("filesview.facet.documents", { defaultValue: "Documents" });
+    }
+}
+function KindIcon({ kind }) {
+    const className = "h-6 w-6 text-muted";
+    switch (kind) {
+        case "image":
+            return _jsx(ImageIcon, { className: className, "aria-hidden": true });
+        case "audio":
+            return _jsx(FileAudio, { className: className, "aria-hidden": true });
+        case "video":
+            return _jsx(FileVideo, { className: className, "aria-hidden": true });
+        case "document":
+            return _jsx(FileText, { className: className, "aria-hidden": true });
+    }
+}
+const FileCard = memo(function FileCard({ file, kind, kindLabel, shareSupported, deleting, t, onDownload, onShare, onDelete, }) {
+    const previewUrl = resolveAppAssetUrl(file.url);
+    const sizeLabel = formatByteSize(file.size);
+    const dateLabel = formatRelativeTime(file.createdAt);
+    const absoluteDate = new Date(file.createdAt).toISOString();
+    return (_jsxs("li", { className: "flex flex-col gap-3 rounded-sm border border-border/55 bg-card p-3", "data-testid": "file-card", "data-file-name": file.fileName, "data-file-kind": kind, children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border/45 bg-surface", children: kind === "image" ? (_jsx("img", { src: previewUrl, alt: "", className: "h-full w-full object-cover", loading: "lazy" })) : (_jsx(KindIcon, { kind: kind })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-semibold text-txt", title: file.fileName, children: file.fileName }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-2xs font-semibold uppercase tracking-[0.14em] text-muted/75", children: [_jsx("span", { className: "rounded-full border border-accent/30 bg-accent/12 px-2 py-0.5 text-accent-fg", children: kindLabel }), _jsx("span", { children: sizeLabel })] }), _jsx("div", { className: "mt-1 text-xs-tight text-muted", title: absoluteDate, children: dateLabel })] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "rounded-sm", "data-testid": "file-download", "aria-label": t("filesview.downloadFile", {
+                            name: file.fileName,
+                            defaultValue: "Download {{name}}",
+                        }), onClick: () => onDownload(file), children: [_jsx(Download, { className: "mr-1.5 h-4 w-4", "aria-hidden": true }), t("filesview.download", { defaultValue: "Download" })] }), shareSupported ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "rounded-sm", "data-testid": "file-share", "aria-label": t("filesview.shareFile", {
+                            name: file.fileName,
+                            defaultValue: "Share {{name}}",
+                        }), onClick: () => onShare(file), children: [_jsx(Share2, { className: "mr-1.5 h-4 w-4", "aria-hidden": true }), t("filesview.share", { defaultValue: "Share" })] })) : null, _jsxs(Button, { type: "button", variant: "surfaceDestructive", size: "sm", className: "ml-auto rounded-sm", "data-testid": "file-delete", disabled: deleting, "aria-label": t("filesview.deleteFile", {
+                            name: file.fileName,
+                            defaultValue: "Delete {{name}}",
+                        }), onClick: () => onDelete(file), children: [deleting ? (_jsx(Loader2, { className: "mr-1.5 h-4 w-4 animate-spin", "aria-hidden": true })) : (_jsx(Trash2, { className: "mr-1.5 h-4 w-4", "aria-hidden": true })), t("filesview.delete", { defaultValue: "Delete" })] })] })] }));
+});
+/* ── main view ────────────────────────────────────────────────────────── */
+export function FilesView() {
+    const { t } = useTranslation();
+    const [files, setFiles] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState("");
+    const [facet, setFacet] = useState("all");
+    const [deletingName, setDeletingName] = useState(null);
+    const shareSupported = useMemo(() => canShareFiles(), []);
+    const loadFiles = useCallback(async () => {
+        setLoading(true);
+        setError("");
+        try {
+            const { files: list } = await client.listFiles();
+            setFiles(Array.isArray(list) ? list : []);
+        }
+        catch (err) {
+            setError(t("filesview.loadFailed", {
+                message: err instanceof Error ? err.message : "error",
+                defaultValue: "Failed to load files: {{message}}",
+            }));
+        }
+        setLoading(false);
+    }, [t]);
+    useEffect(() => {
+        void loadFiles();
+    }, [loadFiles]);
+    const facetCounts = useMemo(() => {
+        const counts = {
+            all: files.length,
+            image: 0,
+            audio: 0,
+            video: 0,
+            document: 0,
+        };
+        for (const file of files)
+            counts[kindForMime(file.mimeType)] += 1;
+        return counts;
+    }, [files]);
+    const filtered = useMemo(() => facet === "all"
+        ? files
+        : files.filter((f) => kindForMime(f.mimeType) === facet), [facet, files]);
+    const handleDownload = useCallback(async (file) => {
+        const url = resolveAppAssetUrl(file.url);
+        const filename = file.fileName || filenameForMime(file.mimeType);
+        try {
+            await downloadAttachment(url, filename);
+        }
+        catch {
+            // Download failed for this transport — nothing more we can do client-side.
+        }
+    }, []);
+    const handleShare = useCallback(async (file) => {
+        const url = resolveAppAssetUrl(file.url);
+        const shared = await shareAttachment(url, {
+            title: file.fileName,
+            filename: file.fileName || undefined,
+        });
+        if (!shared)
+            await handleDownload(file);
+    }, [handleDownload]);
+    const handleDelete = useCallback(async (file) => {
+        if (typeof window !== "undefined" &&
+            typeof window.confirm === "function") {
+            const confirmed = window.confirm(t("filesview.deleteConfirm", {
+                name: file.fileName,
+                defaultValue: 'Delete "{{name}}"? This cannot be undone.',
+            }));
+            if (!confirmed)
+                return;
+        }
+        setDeletingName(file.fileName);
+        // Optimistic removal — snapshot so we can restore on failure.
+        const snapshot = files;
+        setFiles((prev) => prev.filter((f) => f.fileName !== file.fileName));
+        try {
+            const { deleted } = await client.deleteFile(file.fileName);
+            if (!deleted) {
+                setFiles(snapshot);
+                setError(t("filesview.deleteFailed", {
+                    name: file.fileName,
+                    defaultValue: "Failed to delete {{name}}.",
+                }));
+            }
+        }
+        catch (err) {
+            setFiles(snapshot);
+            setError(t("filesview.deleteFailed", {
+                name: file.fileName,
+                message: err instanceof Error ? err.message : "error",
+                defaultValue: "Failed to delete {{name}}.",
+            }));
+        }
+        finally {
+            setDeletingName(null);
+        }
+    }, [files, t]);
+    const facetBar = (_jsx("div", { className: "flex flex-wrap gap-2", role: "toolbar", "aria-label": t("filesview.filterByType", {
+            defaultValue: "Filter files by type",
+        }), children: FACETS.map((f) => {
+            const active = facet === f;
+            return (_jsxs("button", { type: "button", "data-testid": `file-facet-${f}`, "aria-pressed": active, onClick: () => setFacet(f), className: `rounded-full border px-3 py-1 text-xs-tight font-semibold transition-colors ${active
+                    ? "border-accent/40 bg-accent/15 text-accent-fg"
+                    : "border-border/55 bg-card text-muted hover:bg-surface hover:text-txt"}`, children: [facetLabel(t, f), _jsx("span", { className: "ml-1.5 text-muted/70", children: facetCounts[f] })] }, f));
+        }) }));
+    return (_jsxs("section", { className: "mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-5 sm:px-6", "data-testid": "files-view", "aria-label": t("filesview.title", { defaultValue: "Files" }), "aria-busy": loading, children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-lg font-semibold text-txt", children: t("filesview.title", { defaultValue: "Files" }) }), _jsx("p", { className: "text-sm text-muted", children: t("filesview.subtitle", {
+                                    defaultValue: "Every file saved by your agent, with download, share, and delete.",
+                                }) })] }), facetBar] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-4", children: [error ? (_jsxs("div", { role: "alert", className: "flex items-center gap-2 rounded-sm border border-danger/35 bg-danger/10 px-4 py-3 text-sm text-danger", children: [_jsx(AlertTriangle, { className: "h-4 w-4 shrink-0", "aria-hidden": true }), _jsx("span", { children: error })] })) : null, loading ? (_jsxs("div", { className: "flex flex-1 items-center justify-center gap-2 text-sm italic text-muted", "data-testid": "files-loading", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), t("filesview.loading", { defaultValue: "Loading files…" })] })) : files.length === 0 ? (_jsx(PagePanel.Empty, { variant: "surface", "data-testid": "files-empty", title: t("filesview.emptyTitle", { defaultValue: "No files yet" }), description: t("filesview.emptyDescription", {
+                            defaultValue: "Files saved by your agent — uploads, attachments, and generated media — will appear here.",
+                        }) })) : filtered.length === 0 ? (_jsx(PagePanel.Empty, { variant: "inset", "data-testid": "files-empty-filter", title: t("filesview.noMatchesTitle", {
+                            defaultValue: "No files match this filter",
+                        }), description: t("filesview.noMatchesDescription", {
+                            defaultValue: "Try a different type filter.",
+                        }) })) : (_jsx("ul", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3", "data-testid": "files-grid", "aria-label": t("filesview.listLabel", { defaultValue: "Files" }), children: filtered.map((file) => (_jsx(FileCard, { file: file, kind: kindForMime(file.mimeType), kindLabel: facetLabel(t, kindForMime(file.mimeType)), shareSupported: shareSupported, deleting: deletingName === file.fileName, t: t, onDownload: (f) => void handleDownload(f), onShare: (f) => void handleShare(f), onDelete: (f) => void handleDelete(f) }, `${file.hash}:${file.fileName}`))) }))] })] }));
+}

package/components/pages/GeneratedViewHero.js

@@ -114,5 +114,5 @@ export function GeneratedViewHero({ viewId, icon, label, compact = false, }) {
     const angle = (seed >> 2) % 360;
     return (_jsxs("div", { className: "relative h-full w-full overflow-hidden transition-transform duration-200 group-hover:scale-[1.03]", style: {
             background: gradientCss(shape, angle, palette.from, palette.to),
-        }, children: [_jsx(PatternOverlay, { kind: pattern, seed: seed }), _jsx("div", { className: `pointer-events-none absolute ${CORNER_CLASS[corner]}`, style: { color: palette.glyph, opacity: 0.26 }, "aria-hidden": "true", children: _jsx(ViewIcon, { icon: icon, label: label, className: compact ? "h-24 w-24" : "h-40 w-40" }) }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: `flex items-center justify-center rounded-full bg-white/15 text-white shadow-[0_2px_8px_rgba(0,0,0,0.18)] ring-1 ring-white/25 backdrop-blur-[2px] ${compact ? "h-10 w-10" : "h-14 w-14"}`, children: _jsx(ViewIcon, { icon: icon, label: label, className: compact ? "h-5 w-5" : "h-7 w-7" }) }) }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-black/15 to-transparent" })] }));
+        }, children: [_jsx(PatternOverlay, { kind: pattern, seed: seed }), _jsx("div", { className: `pointer-events-none absolute ${CORNER_CLASS[corner]}`, style: { color: palette.glyph, opacity: 0.26 }, "aria-hidden": "true", children: _jsx(ViewIcon, { icon: icon, label: label, className: compact ? "h-24 w-24" : "h-40 w-40" }) }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: `flex items-center justify-center rounded-full bg-white/15 text-white   ${compact ? "h-10 w-10" : "h-14 w-14"}`, children: _jsx(ViewIcon, { icon: icon, label: label, className: compact ? "h-5 w-5" : "h-7 w-7" }) }) }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-black/15 to-transparent" })] }));
 }

package/components/pages/HeartbeatForm.d.ts

@@ -1,5 +1,5 @@
-import type { TriggerSummary } from "../../api/client";
-import { type TranslateFn, type TriggerFormState } from "./heartbeat-utils";
+import type { TriggerSummary } from "../../api/client.js";
+import { type TranslateFn, type TriggerFormState } from "./heartbeat-utils.js";
 export interface HeartbeatFormProps {
     /** Current form state. */
     form: TriggerFormState;
@@ -18,7 +18,7 @@ export interface HeartbeatFormProps {
     /** All triggers (used for looking up the editing trigger's metadata). */
     triggers: TriggerSummary[];
     /** Run history keyed by trigger ID. */
-    triggerRunsById: Record<string, import("../../api").TriggerRunRecord[]>;
+    triggerRunsById: Record<string, import("../../api/index.js").TriggerRunRecord[]>;
     /** Translation function. */
     t: TranslateFn;
     /** Currently selected trigger ID. */

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

@@ -1 +1 @@
-{"version":3,"file":"HeartbeatsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/HeartbeatsView.tsx"],"names":[],"mappings":"AAyjCA,wBAAgB,sBAAsB,4CAMrC;AAED,wBAAgB,cAAc,4CAM7B"}
+{"version":3,"file":"HeartbeatsView.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pages/HeartbeatsView.tsx"],"names":[],"mappings":"AAukCA,wBAAgB,sBAAsB,4CAMrC;AAED,wBAAgB,cAAc,4CAM7B"}