@agent-native/core 0.77.3 → 0.77.4

package/corpus/templates/analytics/app/pages/NotFound.tsx

@@ -1,20 +1,25 @@
+import { useT } from "@agent-native/core/client";
 import { IconFileUnknown } from "@tabler/icons-react";
 import { Link } from "react-router";
 
 import { Button } from "@/components/ui/button";
 
 export default function NotFound() {
+  const t = useT();
+
   return (
     <div className="flex flex-col items-center justify-center min-h-[60vh] text-center space-y-4">
       <div className="bg-destructive/10 p-4 rounded-full">
         <IconFileUnknown className="h-8 w-8 text-destructive" />
       </div>
-      <h2 className="text-2xl font-bold tracking-tight">Page Not Found</h2>
+      <h2 className="text-2xl font-bold tracking-tight">
+        {t("common.pageNotFound")}
+      </h2>
       <p className="text-muted-foreground max-w-sm">
-        The page you are looking for doesn't exist or has been moved.
+        {t("common.pageNotFoundDescription")}
       </p>
       <Link to="/">
-        <Button variant="default">Return to Dashboard</Button>
+        <Button variant="default">{t("common.returnToDashboard")}</Button>
       </Link>
     </div>
   );

package/corpus/templates/analytics/app/pages/Placeholder.tsx

@@ -1,9 +1,11 @@
+import { useT } from "@agent-native/core/client";
 import { IconBarrierBlock } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router";
 
 import { Button } from "@/components/ui/button";
 
 export default function Placeholder() {
+  const t = useT();
   const location = useLocation();
   const pageName = location.pathname.split("/")[1] || "Page";
   const formattedName = pageName.charAt(0).toUpperCase() + pageName.slice(1);
@@ -15,11 +17,10 @@ export default function Placeholder() {
       </div>
       <h2 className="text-2xl font-bold tracking-tight">{formattedName}</h2>
       <p className="text-muted-foreground max-w-sm">
-        This page is currently under construction. Please check back later or
-        return to the dashboard.
+        {t("common.pageUnderConstruction")}
       </p>
       <Link to="/">
-        <Button>Return to Dashboard</Button>
+        <Button>{t("common.returnToDashboard")}</Button>
       </Link>
     </div>
   );

package/corpus/templates/analytics/app/pages/adhoc/BlankDashboard.tsx

@@ -1,11 +1,14 @@
+import { useT } from "@agent-native/core/client";
 import { IconFlask } from "@tabler/icons-react";
 
 import { useSetPageTitle } from "@/components/layout/HeaderActions";
 
 export default function BlankDashboard() {
+  const t = useT();
+
   useSetPageTitle(
     <h1 className="text-lg font-semibold tracking-tight truncate">
-      Empty Dashboard
+      {t("common.emptyDashboard")}
     </h1>,
   );
 
@@ -14,11 +17,11 @@ export default function BlankDashboard() {
       <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 mb-6">
         <IconFlask className="h-8 w-8 text-primary" />
       </div>
-      <h3 className="text-lg font-semibold mb-2">Empty Dashboard</h3>
+      <h3 className="text-lg font-semibold mb-2">
+        {t("common.emptyDashboard")}
+      </h3>
       <p className="text-sm text-muted-foreground max-w-md">
-        This dashboard is empty. Tell the AI assistant what charts and data you
-        want to see here — for example, "show me signups by attribution source
-        over the last 90 days" — and it will populate this dashboard for you.
+        {t("common.emptyDashboardDescription")}
       </p>
     </div>
   );

package/corpus/templates/analytics/app/pages/adhoc/_shared/KpiChart.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconCode } from "@tabler/icons-react";
 import { useMemo } from "react";
 import {
@@ -55,6 +56,7 @@ export function KpiChart({
   referenceLine,
   onEditSql,
 }: KpiChartProps) {
+  const t = useT();
   const data = useMemo(() => {
     return rows.map((r) => ({
       period: String(r.period ?? ""),
@@ -98,7 +100,7 @@ export function KpiChart({
                     <IconCode className="h-3.5 w-3.5" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>Edit SQL Query</TooltipContent>
+                <TooltipContent>{t("common.editSqlQuery")}</TooltipContent>
               </ShadcnTooltip>
             )}
           </div>
@@ -111,7 +113,7 @@ export function KpiChart({
           <p className="text-sm text-red-400 py-4 text-center">{error}</p>
         ) : data.length === 0 ? (
           <p className="text-sm text-muted-foreground py-4 text-center">
-            No data
+            {t("common.noData")}
           </p>
         ) : (
           <div className="h-[220px] w-full">

package/corpus/templates/analytics/app/pages/adhoc/explorer/components/EventCombobox.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconCheck, IconSelector } from "@tabler/icons-react";
 import { useState, useMemo } from "react";
 
@@ -27,6 +28,7 @@ interface EventComboboxProps {
 }
 
 export function EventCombobox({ value, onChange }: EventComboboxProps) {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const {
     events: dynamicEvents,
@@ -69,13 +71,15 @@ export function EventCombobox({ value, onChange }: EventComboboxProps) {
           aria-expanded={open}
           className="w-full justify-between font-normal text-sm h-8"
         >
-          <span className="truncate">{displayLabel || "Select event..."}</span>
+          <span className="truncate">
+            {displayLabel || t("explorer.selectEvent")}
+          </span>
           <IconSelector className="ml-2 h-3 w-3 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[360px] p-0" align="start">
         <Command shouldFilter={true}>
-          <CommandInput placeholder="Search events..." />
+          <CommandInput placeholder={t("explorer.searchEvents")} />
           <CommandList className="max-h-[350px]">
             <CommandEmpty>
               {isLoading ? (
@@ -85,10 +89,10 @@ export function EventCombobox({ value, onChange }: EventComboboxProps) {
                   ))}
                 </div>
               ) : (
-                "No events found."
+                t("explorer.noEventsFound")
               )}
             </CommandEmpty>
-            <CommandGroup heading="Common Events">
+            <CommandGroup heading={t("explorer.commonEvents")}>
               {KNOWN_EVENTS.map((ev) => (
                 <CommandItem
                   key={ev.value}
@@ -113,7 +117,11 @@ export function EventCombobox({ value, onChange }: EventComboboxProps) {
               ))}
             </CommandGroup>
             {extraEvents.length > 0 && (
-              <CommandGroup heading={`All Events (${dynamicEvents.length})`}>
+              <CommandGroup
+                heading={t("explorer.allEvents", {
+                  count: dynamicEvents.length,
+                })}
+              >
                 {extraEvents.map((ev) => (
                   <CommandItem
                     key={`e-${ev.value}`}
@@ -138,7 +146,9 @@ export function EventCombobox({ value, onChange }: EventComboboxProps) {
               </CommandGroup>
             )}
             {extraNames.length > 0 && (
-              <CommandGroup heading={`Event Names (${eventNames.length})`}>
+              <CommandGroup
+                heading={t("explorer.eventNames", { count: eventNames.length })}
+              >
                 {extraNames.slice(0, 80).map((ev) => (
                   <CommandItem
                     key={`n-${ev.value}`}

package/corpus/templates/analytics/app/pages/adhoc/explorer/components/EventPanel.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconPlus } from "@tabler/icons-react";
 
 import { Button } from "@/components/ui/button";
@@ -12,6 +13,7 @@ interface EventPanelProps {
 }
 
 export function EventPanel({ events, onChange }: EventPanelProps) {
+  const t = useT();
   const updateEvent = (index: number, event: ExplorerEvent) => {
     const next = [...events];
     next[index] = event;
@@ -28,7 +30,9 @@ export function EventPanel({ events, onChange }: EventPanelProps) {
 
   return (
     <div className="space-y-3">
-      <div className="text-sm font-medium text-muted-foreground">Events</div>
+      <div className="text-sm font-medium text-muted-foreground">
+        {t("explorer.events")}
+      </div>
       {events.map((ev, i) => (
         <EventRow
           key={i}
@@ -39,7 +43,7 @@ export function EventPanel({ events, onChange }: EventPanelProps) {
       ))}
       <Button variant="outline" size="sm" className="w-full" onClick={addEvent}>
         <IconPlus className="h-4 w-4 mr-1" />
-        Add Event
+        {t("explorer.addEvent")}
       </Button>
     </div>
   );

package/corpus/templates/analytics/app/pages/adhoc/explorer/components/ExplorerChart.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 import {
@@ -48,6 +49,7 @@ export function ExplorerChart({
   isLoading,
   sql,
 }: ExplorerChartProps) {
+  const t = useT();
   const rows = result?.rows ?? [];
   const error = result?.error;
 
@@ -55,7 +57,7 @@ export function ExplorerChart({
     return (
       <Card>
         <CardContent className="flex items-center justify-center h-64 text-muted-foreground text-sm">
-          Add an event and select it to see results
+          {t("explorer.addEventToSeeResults")}
         </CardContent>
       </Card>
     );
@@ -76,7 +78,9 @@ export function ExplorerChart({
     return (
       <Card>
         <CardContent className="p-6">
-          <div className="text-destructive text-sm">Query error: {error}</div>
+          <div className="text-destructive text-sm">
+            {t("explorer.queryError", { message: error })}
+          </div>
         </CardContent>
       </Card>
     );
@@ -86,7 +90,7 @@ export function ExplorerChart({
     return (
       <Card>
         <CardContent className="flex items-center justify-center h-64 text-muted-foreground text-sm">
-          No data returned
+          {t("explorer.noDataReturned")}
         </CardContent>
       </Card>
     );
@@ -135,6 +139,7 @@ function MetricView({
 }
 
 function TableView({ rows }: { rows: Record<string, unknown>[] }) {
+  const t = useT();
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(10);
 
@@ -177,7 +182,7 @@ function TableView({ rows }: { rows: Record<string, unknown>[] }) {
         {rows.length > PAGE_SIZE_OPTIONS[0] && (
           <div className="flex items-center justify-between px-3 py-2 border-t border-border text-xs text-muted-foreground">
             <div className="flex items-center gap-2">
-              <span>Rows per page:</span>
+              <span>{t("common.rowsPerPage")}</span>
               <select
                 className="bg-background border border-border rounded px-1 py-0.5 text-xs"
                 value={pageSize}
@@ -196,7 +201,11 @@ function TableView({ rows }: { rows: Record<string, unknown>[] }) {
             <div className="flex items-center gap-1">
               <span>
                 {page * pageSize + 1}–
-                {Math.min((page + 1) * pageSize, rows.length)} of {rows.length}
+                {t("explorer.rowsRange", {
+                  start: page * pageSize + 1,
+                  end: Math.min((page + 1) * pageSize, rows.length),
+                  total: rows.length,
+                })}
               </span>
               <Button
                 variant="ghost"

package/corpus/templates/analytics/app/pages/adhoc/explorer/components/FilterBuilder.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconPlus, IconX } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -31,6 +32,7 @@ interface FilterBuilderProps {
 }
 
 export function FilterBuilder({ filters, onChange }: FilterBuilderProps) {
+  const t = useT();
   const [adding, setAdding] = useState(false);
 
   return (
@@ -56,7 +58,7 @@ export function FilterBuilder({ filters, onChange }: FilterBuilderProps) {
               onChange([...filters, { property, operator: "=", value: "" }]);
               setAdding(false);
             }}
-            triggerLabel="Pick a property to filter"
+            triggerLabel={t("explorer.pickPropertyToFilter")}
           />
         </div>
       ) : (
@@ -67,7 +69,7 @@ export function FilterBuilder({ filters, onChange }: FilterBuilderProps) {
           onClick={() => setAdding(true)}
         >
           <IconPlus className="h-3 w-3 mr-1" />
-          Filter by
+          {t("explorer.filterBy")}
         </Button>
       )}
     </div>
@@ -83,6 +85,7 @@ function FilterRow({
   onChange: (f: ExplorerFilter) => void;
   onRemove: () => void;
 }) {
+  const t = useT();
   const needsValue = !NO_VALUE_OPS.has(filter.operator);
 
   return (
@@ -91,7 +94,7 @@ function FilterRow({
       <PropertyCombobox
         value={filter.property}
         onChange={(property) => onChange({ ...filter, property })}
-        triggerLabel="property"
+        triggerLabel={t("explorer.property")}
       />
       <Select
         value={filter.operator}

package/corpus/templates/analytics/app/pages/adhoc/explorer/components/GroupByPicker.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconPlus, IconX } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -11,12 +12,15 @@ interface GroupByPickerProps {
 }
 
 export function GroupByPicker({ groupBy, onChange }: GroupByPickerProps) {
+  const t = useT();
   const [adding, setAdding] = useState(false);
 
   return (
     <div className="flex items-center gap-1.5 flex-wrap pl-4">
       {groupBy.length > 0 && (
-        <span className="text-xs text-muted-foreground">grouped by</span>
+        <span className="text-xs text-muted-foreground">
+          {t("explorer.groupedBy")}
+        </span>
       )}
       {groupBy.map((g, i) => (
         <span
@@ -43,7 +47,7 @@ export function GroupByPicker({ groupBy, onChange }: GroupByPickerProps) {
             }
             setAdding(false);
           }}
-          triggerLabel="Pick a property"
+          triggerLabel={t("explorer.pickProperty")}
         />
       ) : (
         <Button
@@ -53,7 +57,7 @@ export function GroupByPicker({ groupBy, onChange }: GroupByPickerProps) {
           onClick={() => setAdding(true)}
         >
           <IconPlus className="h-3 w-3 mr-1" />
-          Group-by
+          {t("explorer.groupBy")}
         </Button>
       )}
     </div>

package/corpus/templates/analytics/app/pages/adhoc/explorer/components/PropertyCombobox.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconCheck, IconSelector } from "@tabler/icons-react";
 import { useState, useMemo } from "react";
 
@@ -35,6 +36,7 @@ export function PropertyCombobox({
   triggerLabel,
   autoOpen,
 }: PropertyComboboxProps) {
+  const t = useT();
   const [open, setOpen] = useState(autoOpen ?? false);
   const { properties: dynamicProps, isLoading } = useDynamicProperties();
   const [search, setSearch] = useState("");
@@ -75,7 +77,7 @@ export function PropertyCombobox({
           size="sm"
         >
           <span className="truncate">
-            {value || triggerLabel || "Select property..."}
+            {value || triggerLabel || t("explorer.selectProperty")}
           </span>
           <IconSelector className="ml-1 h-3 w-3 shrink-0 opacity-50" />
         </Button>
@@ -83,7 +85,7 @@ export function PropertyCombobox({
       <PopoverContent className="w-[280px] p-0" align="start">
         <Command shouldFilter={true}>
           <CommandInput
-            placeholder="Search or type property..."
+            placeholder={t("explorer.searchOrTypeProperty")}
             value={search}
             onValueChange={setSearch}
             onKeyDown={(e) => {
@@ -113,10 +115,10 @@ export function PropertyCombobox({
                     setSearch("");
                   }}
                 >
-                  Use "<strong>{search.trim()}</strong>"
+                  {t("explorer.useValue", { value: search.trim() })}
                 </button>
               ) : (
-                "No properties found."
+                t("explorer.noPropertiesFound")
               )}
             </CommandEmpty>
             {KNOWN_PROPERTIES.map((group) => (
@@ -138,7 +140,7 @@ export function PropertyCombobox({
                       {enriched?.label ?? prop}
                       {enriched && (
                         <span className="ml-auto text-[9px] bg-primary/10 text-primary px-1.5 py-0.5 rounded">
-                          joined
+                          {t("explorer.joined")}
                         </span>
                       )}
                     </CommandItem>
@@ -147,7 +149,11 @@ export function PropertyCombobox({
               </CommandGroup>
             ))}
             {extraProps.length > 0 && (
-              <CommandGroup heading={`Data Properties (${extraProps.length})`}>
+              <CommandGroup
+                heading={t("explorer.dataProperties", {
+                  count: extraProps.length,
+                })}
+              >
                 {extraProps.map((p) => (
                   <CommandItem
                     key={p.name}

package/corpus/templates/analytics/app/pages/adhoc/explorer/components/PropertyValueCombobox.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconCheck, IconSelector, IconLoader2 } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -31,6 +32,7 @@ export function PropertyValueCombobox({
   value,
   onChange,
 }: PropertyValueComboboxProps) {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const { values, isLoading, error } = usePropertyValues(property);
@@ -51,7 +53,7 @@ export function PropertyValueCombobox({
           className="justify-between font-normal text-xs h-7 px-2 w-28"
           size="sm"
         >
-          <span className="truncate">{value || "value"}</span>
+          <span className="truncate">{value || t("explorer.value")}</span>
           {isLoading && !value ? (
             <IconLoader2 className="ml-1 h-3 w-3 shrink-0 animate-spin opacity-50" />
           ) : (
@@ -62,7 +64,7 @@ export function PropertyValueCombobox({
       <PopoverContent className="w-[240px] p-0" align="start">
         <Command shouldFilter={true}>
           <CommandInput
-            placeholder="Search or type value..."
+            placeholder={t("explorer.searchOrTypeValue")}
             value={search}
             onValueChange={setSearch}
             onKeyDown={(e) => {
@@ -84,16 +86,18 @@ export function PropertyValueCombobox({
                   className="w-full text-left px-2 py-1.5 text-sm hover:bg-accent rounded cursor-pointer"
                   onClick={() => handleSelect(search.trim())}
                 >
-                  Use "<strong>{search.trim()}</strong>"
+                  {t("explorer.useValue", { value: search.trim() })}
                 </button>
               ) : error ? (
                 <span className="text-xs text-destructive px-2">{error}</span>
               ) : (
-                "No values found."
+                t("explorer.noValuesFound")
               )}
             </CommandEmpty>
             {values.length > 0 && (
-              <CommandGroup heading={`Top values for ${property}`}>
+              <CommandGroup
+                heading={t("explorer.topValuesForProperty", { property })}
+              >
                 {values.map((v) => (
                   <CommandItem
                     key={v.value}

package/corpus/templates/analytics/app/pages/adhoc/explorer/components/SqlPreview.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconChevronRight, IconCopy, IconCheck } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -10,6 +11,7 @@ interface SqlPreviewProps {
 }
 
 export function SqlPreview({ sql }: SqlPreviewProps) {
+  const t = useT();
   const [expanded, setExpanded] = useState(false);
   const [copied, setCopied] = useState(false);
 
@@ -31,7 +33,7 @@ export function SqlPreview({ sql }: SqlPreviewProps) {
             expanded && "rotate-90",
           )}
         />
-        SQL Query
+        {t("explorer.sqlQuery")}
       </button>
       {expanded && (
         <div className="relative border-t">

package/corpus/templates/analytics/app/pages/adhoc/explorer/index.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconChevronDown,
   IconDeviceFloppy,
@@ -46,6 +47,7 @@ import { buildSql } from "./sql-builder";
 import { useExplorerConfig } from "./use-explorer-config";
 
 export default function ExplorerPage() {
+  const t = useT();
   const [searchParams] = useSearchParams();
   const {
     config,
@@ -105,7 +107,7 @@ export default function ExplorerPage() {
   };
 
   const handleSaveConfirm = () => {
-    const name = saveName.trim() || "Untitled";
+    const name = saveName.trim() || t("explorer.untitled");
     setConfig({ ...config, name });
     saveConfig(name);
     setSaveDialogOpen(false);
@@ -116,7 +118,9 @@ export default function ExplorerPage() {
       {/* Header bar */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
         <div className="flex items-center gap-2 min-w-0">
-          <h2 className="text-lg font-semibold shrink-0">Explorer</h2>
+          <h2 className="text-lg font-semibold shrink-0">
+            {t("explorer.title")}
+          </h2>
           {currentId && (
             <span className="text-sm text-muted-foreground truncate">
               — {config.name}
@@ -132,26 +136,26 @@ export default function ExplorerPage() {
             disabled={isSaving}
           >
             <IconDeviceFloppy className="h-4 w-4 mr-1" />
-            {isSaving ? "Saving..." : "Save"}
+            {isSaving ? t("explorer.saving") : t("explorer.save")}
           </Button>
 
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button size="sm" variant="outline">
                 <IconFolderOpen className="h-4 w-4 mr-1" />
-                Load
+                {t("explorer.load")}
                 <IconChevronDown className="h-3 w-3 ml-1" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-56">
               <DropdownMenuItem onClick={newConfig}>
                 <IconFilePlus className="h-4 w-4 mr-2" />
-                New Explorer
+                {t("explorer.newExplorer")}
               </DropdownMenuItem>
               {currentId && (
                 <DropdownMenuItem onClick={handleSaveAs}>
                   <IconDeviceFloppy className="h-4 w-4 mr-2" />
-                  Save As...
+                  {t("explorer.saveAs")}
                 </DropdownMenuItem>
               )}
               {savedConfigs.length > 0 && <DropdownMenuSeparator />}
@@ -195,7 +199,9 @@ export default function ExplorerPage() {
           />
 
           <div className="flex items-center gap-3">
-            <span className="text-sm text-muted-foreground">Chart Type</span>
+            <span className="text-sm text-muted-foreground">
+              {t("explorer.chartType")}
+            </span>
             <ChartTypePicker
               value={config.chartType}
               onChange={(chartType) => setConfig({ ...config, chartType })}
@@ -219,10 +225,10 @@ export default function ExplorerPage() {
       <Dialog open={saveDialogOpen} onOpenChange={setSaveDialogOpen}>
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>Save Explorer</DialogTitle>
+            <DialogTitle>{t("explorer.saveExplorer")}</DialogTitle>
           </DialogHeader>
           <Input
-            placeholder="Dashboard name..."
+            placeholder={t("explorer.dashboardNamePlaceholder")}
             value={saveName}
             onChange={(e) => setSaveName(e.target.value)}
             onKeyDown={(e) => e.key === "Enter" && handleSaveConfirm()}
@@ -230,9 +236,9 @@ export default function ExplorerPage() {
           />
           <DialogFooter>
             <Button variant="outline" onClick={() => setSaveDialogOpen(false)}>
-              Cancel
+              {t("sidebar.cancel")}
             </Button>
-            <Button onClick={handleSaveConfirm}>Save</Button>
+            <Button onClick={handleSaveConfirm}>{t("explorer.save")}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -244,13 +250,17 @@ export default function ExplorerPage() {
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete saved explorer?</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("explorer.deleteSavedExplorerTitle")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              Delete &ldquo;{deleteConfirm?.name}&rdquo;? This cannot be undone.
+              {t("explorer.deleteSavedExplorerDescription", {
+                name: deleteConfirm?.name ?? "",
+              })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("sidebar.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={() => {
                 if (deleteConfirm) {
@@ -259,7 +269,7 @@ export default function ExplorerPage() {
                 }
               }}
             >
-              Delete
+              {t("sidebar.delete")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>