@agent-native/core 0.77.3 → 0.77.4

package/corpus/templates/analytics/app/pages/adhoc/explorer/types.ts

@@ -23,9 +23,11 @@ export interface ExplorerConfig {
   customDateEnd?: string;
 }
 
-export function createDefaultConfig(): ExplorerConfig {
+export function createDefaultConfig(
+  name = "Untitled Explorer",
+): ExplorerConfig {
   return {
-    name: "Untitled Explorer",
+    name,
     events: [createDefaultEvent()],
     chartType: "line",
     dateRange: "30d",
@@ -89,62 +91,62 @@ export const KNOWN_EVENTS = [
   // Acquisition
   { value: "signup", label: "Signup", category: "Acquisition" },
   { value: "login", label: "Login", category: "Acquisition" },
-  { value: "pageView", label: "Page View", category: "Acquisition" },
+  { value: "pageView", label: "Page View", category: "Acquisition" }, // i18n-ignore stable event label
   {
     value: "self reported attribution option selected",
-    label: "Self-Reported Attribution",
+    label: "Self-Reported Attribution", // i18n-ignore stable event label
     category: "Acquisition",
   },
   { value: "click", label: "Click", category: "Acquisition" },
 
   // Content
-  { value: "content saved", label: "Content Saved", category: "Content" },
+  { value: "content saved", label: "Content Saved", category: "Content" }, // i18n-ignore stable event label
   {
     value: "content published",
-    label: "Content Published",
+    label: "Content Published", // i18n-ignore stable event label
     category: "Content",
   },
   {
     value: "insert content-api call",
-    label: "Content API Call",
+    label: "Content API Call", // i18n-ignore stable event label
     category: "Content",
   },
   { value: "publish", label: "Publish", category: "Content" },
-  { value: "model created", label: "Model Created", category: "Content" },
-  { value: "space created", label: "Space Created", category: "Content" },
-  { value: "content created", label: "Content Created", category: "Content" },
-  { value: "content deleted", label: "Content Deleted", category: "Content" },
+  { value: "model created", label: "Model Created", category: "Content" }, // i18n-ignore stable event label
+  { value: "space created", label: "Space Created", category: "Content" }, // i18n-ignore stable event label
+  { value: "content created", label: "Content Created", category: "Content" }, // i18n-ignore stable event label
+  { value: "content deleted", label: "Content Deleted", category: "Content" }, // i18n-ignore stable event label
 
   // Agent Chat / AI
   {
     value: "agent chat message submitted",
-    label: "Agent Chat Message",
+    label: "Agent Chat Message", // i18n-ignore stable event label
     category: "AI",
   },
   {
     value: "agent chat accepted",
-    label: "Agent Chat Accepted",
+    label: "Agent Chat Accepted", // i18n-ignore stable event label
     category: "AI",
   },
   {
     value: "agent chat rejected",
-    label: "Agent Chat Rejected",
+    label: "Agent Chat Rejected", // i18n-ignore stable event label
     category: "AI",
   },
   {
     value: "agent chat started",
-    label: "Agent Chat Started",
+    label: "Agent Chat Started", // i18n-ignore stable event label
     category: "AI",
   },
   { value: "generate", label: "Generate", category: "AI" },
 
   // Visual Editor
-  { value: "import figma", label: "Import Figma", category: "Visual Editor" },
-  { value: "import code", label: "Import Code", category: "Visual Editor" },
-  { value: "drag and drop", label: "Drag and Drop", category: "Visual Editor" },
+  { value: "import figma", label: "Import Figma", category: "Visual Editor" }, // i18n-ignore stable event label
+  { value: "import code", label: "Import Code", category: "Visual Editor" }, // i18n-ignore stable event label
+  { value: "drag and drop", label: "Drag and Drop", category: "Visual Editor" }, // i18n-ignore stable event label
   {
     value: "open visual editor",
-    label: "Open Visual Editor",
+    label: "Open Visual Editor", // i18n-ignore stable event label
     category: "Visual Editor",
   },
   { value: "preview", label: "Preview", category: "Visual Editor" },
@@ -152,43 +154,43 @@ export const KNOWN_EVENTS = [
   // Integrations
   {
     value: "integration installed",
-    label: "Integration Installed",
+    label: "Integration Installed", // i18n-ignore stable event label
     category: "Integrations",
   },
   {
     value: "integration removed",
-    label: "Integration Removed",
+    label: "Integration Removed", // i18n-ignore stable event label
     category: "Integrations",
   },
-  { value: "sdk download", label: "SDK Download", category: "Integrations" },
+  { value: "sdk download", label: "SDK Download", category: "Integrations" }, // i18n-ignore stable event label
 
   // Billing
   {
     value: "subscription created",
-    label: "Subscription Created",
+    label: "Subscription Created", // i18n-ignore stable event label
     category: "Billing",
   },
   {
     value: "subscription updated",
-    label: "Subscription Updated",
+    label: "Subscription Updated", // i18n-ignore stable event label
     category: "Billing",
   },
   {
     value: "subscription cancelled",
-    label: "Subscription Cancelled",
+    label: "Subscription Cancelled", // i18n-ignore stable event label
     category: "Billing",
   },
-  { value: "checkout started", label: "Checkout Started", category: "Billing" },
-  { value: "plan selected", label: "Plan Selected", category: "Billing" },
+  { value: "checkout started", label: "Checkout Started", category: "Billing" }, // i18n-ignore stable event label
+  { value: "plan selected", label: "Plan Selected", category: "Billing" }, // i18n-ignore stable event label
 
   // Collaboration
-  { value: "invite sent", label: "Invite Sent", category: "Collaboration" },
+  { value: "invite sent", label: "Invite Sent", category: "Collaboration" }, // i18n-ignore stable event label
   {
     value: "invite accepted",
-    label: "Invite Accepted",
+    label: "Invite Accepted", // i18n-ignore stable event label
     category: "Collaboration",
   },
-  { value: "comment added", label: "Comment Added", category: "Collaboration" },
+  { value: "comment added", label: "Comment Added", category: "Collaboration" }, // i18n-ignore stable event label
 ];
 
 /** Known properties grouped by category */

package/corpus/templates/analytics/app/pages/adhoc/explorer/use-explorer-config.ts

@@ -1,4 +1,4 @@
-import { callAction } from "@agent-native/core/client";
+import { callAction, useT } from "@agent-native/core/client";
 import { useQuery } from "@tanstack/react-query";
 import { useState, useCallback, useEffect, useRef } from "react";
 
@@ -50,7 +50,11 @@ function persistConfig(id: string, config: ExplorerConfig) {
 }
 
 export function useExplorerConfig() {
-  const [config, setConfig] = useState<ExplorerConfig>(createDefaultConfig());
+  const t = useT();
+  const defaultConfigName = t("explorer.untitled");
+  const [config, setConfig] = useState<ExplorerConfig>(() =>
+    createDefaultConfig(defaultConfigName),
+  );
   const [currentId, setCurrentId] = useState<string | null>(null);
   const [isSaving, setIsSaving] = useState(false);
   const [initialized, setInitialized] = useState(false);
@@ -118,18 +122,18 @@ export function useExplorerConfig() {
     async (id: string) => {
       await callAction("delete-explorer-config", { id });
       if (currentId === id) {
-        setConfig(createDefaultConfig());
+        setConfig(createDefaultConfig(defaultConfigName));
         setCurrentId(null);
       }
       refetchList();
     },
-    [currentId, refetchList],
+    [currentId, defaultConfigName, refetchList],
   );
 
   const newConfig = useCallback(() => {
-    setConfig(createDefaultConfig());
+    setConfig(createDefaultConfig(defaultConfigName));
     setCurrentId(null);
-  }, []);
+  }, [defaultConfigName]);
 
   return {
     config,

package/corpus/templates/analytics/app/pages/adhoc/explorer-dashboard/ChartCard.tsx

@@ -1,4 +1,4 @@
-import { callAction } from "@agent-native/core/client";
+import { callAction, useT } from "@agent-native/core/client";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import {
@@ -67,6 +67,7 @@ export function DashboardChartCard({
   onEdit,
   editable = true,
 }: ChartCardProps) {
+  const t = useT();
   const [confirmOpen, setConfirmOpen] = useState(false);
 
   const {
@@ -137,7 +138,9 @@ export function DashboardChartCard({
                   </button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  {chart.width === 2 ? "Half width" : "Full width"}
+                  {chart.width === 2
+                    ? t("explorerDashboard.halfWidth")
+                    : t("explorerDashboard.fullWidth")}
                 </TooltipContent>
               </Tooltip>
               <Tooltip>
@@ -149,7 +152,9 @@ export function DashboardChartCard({
                     <IconExternalLink className="h-3.5 w-3.5" />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Edit in Explorer</TooltipContent>
+                <TooltipContent>
+                  {t("explorerDashboard.editInExplorer")}
+                </TooltipContent>
               </Tooltip>
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -160,7 +165,9 @@ export function DashboardChartCard({
                     <IconTrash className="h-3.5 w-3.5" />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Remove chart</TooltipContent>
+                <TooltipContent>
+                  {t("explorerDashboard.removeChart")}
+                </TooltipContent>
               </Tooltip>
             </div>
           ) : null}
@@ -177,7 +184,7 @@ export function DashboardChartCard({
             />
           ) : (
             <div className="flex items-center justify-center h-48 text-muted-foreground text-sm">
-              Config not found
+              {t("explorerDashboard.configNotFound")}
             </div>
           )}
         </CardContent>
@@ -187,21 +194,24 @@ export function DashboardChartCard({
         <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
           <AlertDialogContent>
             <AlertDialogHeader>
-              <AlertDialogTitle>Remove chart?</AlertDialogTitle>
+              <AlertDialogTitle>
+                {t("explorerDashboard.removeChartTitle")}
+              </AlertDialogTitle>
               <AlertDialogDescription>
-                Remove &ldquo;{config?.name ?? configName}&rdquo; from this
-                dashboard? This cannot be undone.
+                {t("explorerDashboard.removeChartDescription", {
+                  name: config?.name ?? configName,
+                })}
               </AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogCancel>{t("sidebar.cancel")}</AlertDialogCancel>
               <AlertDialogAction
                 onClick={() => {
                   setConfirmOpen(false);
                   onRemove();
                 }}
               >
-                Remove
+                {t("explorerDashboard.removeChart")}
               </AlertDialogAction>
             </AlertDialogFooter>
           </AlertDialogContent>

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

@@ -9,6 +9,7 @@ import {
   useActionMutation,
   agentNativePath,
   callAction,
+  useT,
   type CollabUser,
 } from "@agent-native/core/client";
 import {
@@ -160,6 +161,7 @@ async function fetchSavedConfigs(): Promise<SavedConfig[]> {
 }
 
 export default function ExplorerDashboardPage() {
+  const t = useT();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
@@ -304,7 +306,10 @@ export default function ExplorerDashboardPage() {
         canManage: d.canManage,
       });
     } else {
-      setDashboard({ name: "Untitled Dashboard", charts: [] });
+      setDashboard({
+        name: t("explorerDashboard.untitledDashboard"),
+        charts: [],
+      });
       setArchivedAt(null);
       setHiddenAt(null);
       setHiddenBy(null);
@@ -327,11 +332,17 @@ export default function ExplorerDashboardPage() {
       queryClient.invalidateQueries({
         queryKey: ["explorer-dashboards-palette"],
       });
-      toast.success(`Archived "${dashboard?.name ?? "dashboard"}"`);
+      toast.success(
+        t("explorerDashboard.archived", {
+          name: dashboard?.name ?? t("explorerDashboard.dashboardFallback"),
+        }),
+      );
       navigate("/dashboards/explorer");
     } catch (err) {
       toast.error(
-        err instanceof Error ? err.message : "Couldn't archive dashboard",
+        err instanceof Error
+          ? err.message
+          : t("explorerDashboard.archiveFailed"),
       );
     }
   }, [
@@ -358,10 +369,16 @@ export default function ExplorerDashboardPage() {
       queryClient.invalidateQueries({
         queryKey: ["data", "explorer-dashboard", dashboardId],
       });
-      toast.success(`Unhid "${dashboard?.name ?? "dashboard"}"`);
+      toast.success(
+        t("explorerDashboard.unhid", {
+          name: dashboard?.name ?? t("explorerDashboard.dashboardFallback"),
+        }),
+      );
     } catch (err) {
       toast.error(
-        err instanceof Error ? err.message : "Couldn't unhide dashboard",
+        err instanceof Error
+          ? err.message
+          : t("explorerDashboard.unhideFailed"),
       );
     }
   }, [dashboardId, dashboard?.name, hideDashboardAction, queryClient]);
@@ -370,9 +387,7 @@ export default function ExplorerDashboardPage() {
     (updated: ExplorerDashboardData) => {
       if (!dashboardId) return;
       if (!canEdit) {
-        toast.error(
-          "You can view this dashboard, but only editors can change it.",
-        );
+        toast.error(t("explorerDashboard.viewOnly"));
         return;
       }
       setDashboard(updated);
@@ -459,7 +474,7 @@ export default function ExplorerDashboardPage() {
 
   const handleSaveName = useCallback(() => {
     if (!dashboard || !canEdit) return;
-    const name = nameInput.trim() || "Untitled Dashboard";
+    const name = nameInput.trim() || t("explorerDashboard.untitledDashboard");
     persist({ ...dashboard, name });
     setEditingName(false);
   }, [dashboard, canEdit, nameInput, persist]);
@@ -467,7 +482,7 @@ export default function ExplorerDashboardPage() {
   useSetPageTitle(
     !dashboardId ? (
       <h1 className="text-lg font-semibold tracking-tight truncate">
-        Dashboard
+        {t("explorerDashboard.dashboard")}
       </h1>
     ) : dashboard ? (
       <h1 className="text-lg font-semibold tracking-tight truncate">
@@ -481,7 +496,7 @@ export default function ExplorerDashboardPage() {
   if (!dashboardId) {
     return (
       <div className="flex items-center justify-center h-64 text-muted-foreground">
-        No dashboard selected
+        {t("explorerDashboard.noDashboardSelected")}
       </div>
     );
   }
@@ -501,8 +516,7 @@ export default function ExplorerDashboardPage() {
         <div className="flex flex-wrap items-center gap-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-200">
           <IconEyeOff className="h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
           <span className="min-w-0 flex-1">
-            This dashboard is hidden from regular lists. It remains searchable
-            and openable by direct link.
+            {t("explorerDashboard.hiddenDescription")}
           </span>
           <Button
             size="sm"
@@ -512,7 +526,7 @@ export default function ExplorerDashboardPage() {
             className="shrink-0 border-amber-300 bg-amber-100 text-amber-950 hover:bg-amber-200 dark:border-amber-800 dark:bg-amber-900/40 dark:text-amber-100 dark:hover:bg-amber-900/70"
           >
             <IconEye className="mr-1.5 h-3.5 w-3.5" />
-            Unhide
+            {t("sidebar.unhide")}
           </Button>
         </div>
       ) : null}
@@ -559,7 +573,7 @@ export default function ExplorerDashboardPage() {
           {canEdit ? (
             <Button size="sm" onClick={() => setAddChartOpen(true)}>
               <IconPlus className="h-4 w-4 mr-1" />
-              Add Chart
+              {t("explorerDashboard.addChart")}
             </Button>
           ) : null}
           {canEdit || canManage ? (
@@ -571,13 +585,15 @@ export default function ExplorerDashboardPage() {
                       size="sm"
                       variant="ghost"
                       className="text-muted-foreground hover:text-foreground"
-                      aria-label="Dashboard actions"
+                      aria-label={t("explorerDashboard.dashboardActions")}
                     >
                       <IconDots className="h-4 w-4" />
                     </Button>
                   </DropdownMenuTrigger>
                 </TooltipTrigger>
-                <TooltipContent>More actions</TooltipContent>
+                <TooltipContent>
+                  {t("explorerDashboard.moreActions")}
+                </TooltipContent>
               </Tooltip>
               <DropdownMenuContent align="end" className="w-44">
                 {canEdit && !archivedAt ? (
@@ -603,7 +619,7 @@ export default function ExplorerDashboardPage() {
                     className="text-destructive focus:text-destructive"
                   >
                     <IconTrash className="mr-2 h-3.5 w-3.5" />
-                    Delete permanently
+                    {t("explorerDashboard.deletePermanently")}
                   </DropdownMenuItem>
                 ) : null}
               </DropdownMenuContent>
@@ -616,15 +632,17 @@ export default function ExplorerDashboardPage() {
             >
               <AlertDialogContent>
                 <AlertDialogHeader>
-                  <AlertDialogTitle>Delete permanently?</AlertDialogTitle>
+                  <AlertDialogTitle>
+                    {t("explorerDashboard.deletePermanentlyTitle")}
+                  </AlertDialogTitle>
                   <AlertDialogDescription>
-                    This permanently deletes &ldquo;{dashboard.name}&rdquo; and
-                    cannot be undone. To keep it recoverable, choose Archive
-                    instead.
+                    {t("explorerDashboard.deletePermanentlyDescription", {
+                      name: dashboard.name,
+                    })}
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogCancel>{t("sidebar.cancel")}</AlertDialogCancel>
                   <AlertDialogAction
                     onClick={async () => {
                       if (!dashboardId || !canManage) return;
@@ -644,13 +662,15 @@ export default function ExplorerDashboardPage() {
                         toast.error(
                           err instanceof Error
                             ? err.message
-                            : "Couldn't delete dashboard",
+                            : t("sidebar.deleteFailed", {
+                                name: dashboard.name,
+                              }),
                         );
                       }
                     }}
                     className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                   >
-                    Delete permanently
+                    {t("explorerDashboard.deletePermanently")}
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
@@ -663,9 +683,7 @@ export default function ExplorerDashboardPage() {
       {dashboard.charts.length === 0 ? (
         <Card>
           <CardContent className="flex flex-col items-center justify-center h-64 text-muted-foreground text-sm gap-3">
-            <p>
-              No charts yet. Add saved explorer charts to build your dashboard.
-            </p>
+            <p>{t("explorerDashboard.noChartsYet")}</p>
             {canEdit ? (
               <Button
                 size="sm"
@@ -673,7 +691,7 @@ export default function ExplorerDashboardPage() {
                 onClick={() => setAddChartOpen(true)}
               >
                 <IconPlus className="h-4 w-4 mr-1" />
-                Add Chart
+                {t("explorerDashboard.addChart")}
               </Button>
             ) : null}
           </CardContent>
@@ -714,13 +732,12 @@ export default function ExplorerDashboardPage() {
         <Dialog open={addChartOpen} onOpenChange={setAddChartOpen}>
           <DialogContent className="sm:max-w-md">
             <DialogHeader>
-              <DialogTitle>Add Chart</DialogTitle>
+              <DialogTitle>{t("explorerDashboard.addChart")}</DialogTitle>
             </DialogHeader>
             <div className="max-h-[400px] overflow-auto space-y-1">
               {savedConfigs.length === 0 ? (
                 <p className="text-sm text-muted-foreground py-4 text-center">
-                  No saved explorer charts yet. Create one in the Explorer tool
-                  first.
+                  {t("explorerDashboard.noSavedExplorerCharts")}
                 </p>
               ) : (
                 savedConfigs.map((config) => (
@@ -737,7 +754,7 @@ export default function ExplorerDashboardPage() {
             </div>
             <DialogFooter>
               <Button variant="outline" onClick={() => setAddChartOpen(false)}>
-                Cancel
+                {t("sidebar.cancel")}
               </Button>
             </DialogFooter>
           </DialogContent>

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/DashboardFilterBar.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconChevronDown,
   IconDeviceFloppy,
@@ -146,6 +147,7 @@ export function DashboardFilterBar({
   filters,
   onSaveView,
 }: DashboardFilterBarProps) {
+  const t = useT();
   const [searchParams, setSearchParams] = useSearchParams();
   const [saveDialogOpen, setSaveDialogOpen] = useState(false);
   const [viewName, setViewName] = useState("");
@@ -231,10 +233,10 @@ export function DashboardFilterBar({
         <div className="flex items-center justify-between gap-3">
           <div className="flex items-baseline gap-2">
             <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-              Filters
+              {t("sqlDashboard.filters")}
             </h3>
             <span className="text-[10px] text-muted-foreground/60">
-              auto-applied
+              {t("sqlDashboard.autoApplied")}
             </span>
           </div>
           <div className="flex items-center gap-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100 group-data-[state=closed]:opacity-100">
@@ -246,7 +248,7 @@ export function DashboardFilterBar({
                 onClick={() => setSaveDialogOpen(true)}
               >
                 <IconDeviceFloppy className="h-3 w-3 mr-1" />
-                Save view
+                {t("sqlDashboard.saveView")}
               </Button>
             )}
             {filtersActive && (
@@ -257,7 +259,7 @@ export function DashboardFilterBar({
                 onClick={clearAllFilters}
               >
                 <IconFilterOff className="h-3 w-3 mr-1" />
-                Clear all
+                {t("sqlDashboard.clearAll")}
               </Button>
             )}
             <CollapsibleTrigger asChild>
@@ -265,9 +267,13 @@ export function DashboardFilterBar({
                 variant="ghost"
                 size="sm"
                 className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
-                aria-label={filtersOpen ? "Collapse filters" : "Expand filters"}
+                aria-label={
+                  filtersOpen
+                    ? t("sqlDashboard.collapseFilters")
+                    : t("sqlDashboard.expandFilters")
+                }
               >
-                {filtersOpen ? "Hide" : "Show"}
+                {filtersOpen ? t("sqlDashboard.hide") : t("sqlDashboard.show")}
                 <IconChevronDown
                   className={cn(
                     "ml-1 h-3 w-3 transition-transform",
@@ -296,11 +302,11 @@ export function DashboardFilterBar({
       <Dialog open={saveDialogOpen} onOpenChange={setSaveDialogOpen}>
         <DialogContent className="sm:max-w-[400px]">
           <DialogHeader>
-            <DialogTitle>Save as View</DialogTitle>
+            <DialogTitle>{t("sqlDashboard.saveAsView")}</DialogTitle>
           </DialogHeader>
           <div className="py-4">
             <Input
-              placeholder="View name (e.g. 'Recent articles only')"
+              placeholder={t("sqlDashboard.viewNameRecentPlaceholder")}
               value={viewName}
               onChange={(e) => setViewName(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && handleSaveView()}
@@ -313,14 +319,14 @@ export function DashboardFilterBar({
               size="sm"
               onClick={() => setSaveDialogOpen(false)}
             >
-              Cancel
+              {t("sidebar.cancel")}
             </Button>
             <Button
               size="sm"
               onClick={handleSaveView}
               disabled={!viewName.trim()}
             >
-              Save
+              {t("explorer.save")}
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -346,6 +352,7 @@ function FilterControl({
   hasParam,
   setValue,
 }: FilterControlProps) {
+  const t = useT();
   if (filter.type === "date-range") {
     const startKey = `${filter.id}Start`;
     const endKey = `${filter.id}End`;
@@ -359,7 +366,9 @@ function FilterControl({
             value={vars[startKey] || ""}
             onChange={(v) => setValue({ [startKey]: v })}
           />
-          <span className="text-xs text-muted-foreground">to</span>
+          <span className="text-xs text-muted-foreground">
+            {t("sqlDashboard.to")}
+          </span>
           <DatePicker
             value={vars[endKey] || ""}
             onChange={(v) => setValue({ [endKey]: v })}
@@ -423,7 +432,7 @@ function FilterControl({
           className="text-xs h-8 px-3"
           onClick={() => setValue({ [filter.id]: active ? "" : "true" })}
         >
-          {active ? "On" : "Off"}
+          {active ? t("sqlDashboard.on") : t("sqlDashboard.off")}
         </Button>
       </div>
     );
@@ -453,13 +462,13 @@ function FilterControl({
               })
             }
           >
-            {active ? "On" : "Off"}
+            {active ? t("sqlDashboard.on") : t("sqlDashboard.off")}
           </Button>
         </div>
         {active && (
           <div className="flex flex-col gap-1">
             <label className="text-xs text-muted-foreground font-medium">
-              Since
+              {t("sqlDashboard.since")}
             </label>
             <DatePicker
               value={current}