@agent-native/core 0.77.2 → 0.77.4

package/corpus/templates/analytics/app/components/Markdown.tsx

@@ -1,15 +1,34 @@
+import { useT } from "@agent-native/core/client";
 import { useMemo } from "react";
 
+import { messagesByLocale } from "@/i18n-data";
+
 /**
  * Lightweight Markdown renderer — handles headings, bold, italic, code blocks,
  * inline code, links, unordered/ordered lists, horizontal rules, and tables.
  * No external deps required.
  */
 export default function Markdown({ content }: { content: string }) {
-  const html = useMemo(() => renderMarkdown(content), [content]);
+  const t = useT();
+  const labels = useMemo(
+    () => ({
+      embedBlocked: t("markdown.embedBlocked"),
+      sameOriginEmbedsOnly: t("markdown.sameOriginEmbedsOnly"),
+      embeddedContent: t("markdown.embeddedContent"),
+    }),
+    [t],
+  );
+  const html = useMemo(
+    () => renderMarkdown(content, labels),
+    [content, labels],
+  );
   return <div dangerouslySetInnerHTML={{ __html: html }} />;
 }
 
+type MarkdownLabels = (typeof messagesByLocale)["en-US"]["markdown"];
+
+const DEFAULT_MARKDOWN_LABELS = messagesByLocale["en-US"].markdown;
+
 function escapeHtml(str: string): string {
   return str
     .replace(/&/g, "&amp;")
@@ -140,17 +159,21 @@ function sanitizeEmbedSrc(src: string | undefined): string | null {
   return null;
 }
 
-function renderEmbedBlock(body: string): string {
+function renderEmbedBlock(
+  body: string,
+  labels: MarkdownLabels = DEFAULT_MARKDOWN_LABELS,
+): string {
   const parsed = parseEmbedBody(body);
   const safeSrc = sanitizeEmbedSrc(parsed.src);
   if (!safeSrc) {
+    const blockedSourceHtml = parsed.src
+      ? `<div class="mt-1 truncate font-mono text-[10px]">${escapeHtml(parsed.src)}</div>` // i18n-ignore stable sanitized URL echo in generated HTML
+      : "";
     return [
       '<div class="my-3 rounded-lg border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground">',
-      '<strong class="text-foreground">Embed blocked</strong>',
-      '<div class="mt-1">Only same-origin embed paths are allowed.</div>',
-      parsed.src
-        ? `<div class="mt-1 truncate font-mono text-[10px]">${escapeHtml(parsed.src)}</div>`
-        : "",
+      `<strong class="text-foreground">${escapeHtml(labels.embedBlocked)}</strong>`,
+      `<div class="mt-1">${escapeHtml(labels.sameOriginEmbedsOnly)}</div>`, // i18n-ignore generated HTML expression boundary
+      blockedSourceHtml,
       "</div>",
     ].join("");
   }
@@ -163,7 +186,7 @@ function renderEmbedBlock(body: string): string {
     : `aspect-ratio:${aspect.replace("/", " / ")}`;
   return [
     `<div class="my-4 overflow-hidden rounded-lg border border-border bg-muted/20" style="${style}">`,
-    `<iframe src="${escapeHtml(safeSrc)}" title="${escapeHtml(parsed.title || "Embedded content")}" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" referrerpolicy="same-origin" loading="lazy" class="h-full w-full border-0 bg-transparent"></iframe>`,
+    `<iframe src="${escapeHtml(safeSrc)}" title="${escapeHtml(parsed.title || labels.embeddedContent)}" sandbox="allow-scripts allow-same-origin allow-forms allow-popups" referrerpolicy="same-origin" loading="lazy" class="h-full w-full border-0 bg-transparent"></iframe>`,
     "</div>",
   ].join("");
 }
@@ -197,7 +220,10 @@ function renderInline(text: string): string {
   );
 }
 
-export function renderMarkdown(md: string): string {
+export function renderMarkdown(
+  md: string,
+  labels: MarkdownLabels = DEFAULT_MARKDOWN_LABELS,
+): string {
   const lines = md.split("\n");
   const out: string[] = [];
   let i = 0;
@@ -228,7 +254,7 @@ export function renderMarkdown(md: string): string {
       }
       i++; // skip closing ```
       if (safeLang === "embed") {
-        out.push(renderEmbedBlock(codeLines.join("\n")));
+        out.push(renderEmbedBlock(codeLines.join("\n"), labels));
         continue;
       }
       out.push(

package/corpus/templates/analytics/app/components/ProviderCorpusJobNotifier.tsx

@@ -1,4 +1,4 @@
-import { useActionQuery } from "@agent-native/core/client";
+import { useActionQuery, useT } from "@agent-native/core/client";
 import { useEffect, useRef } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
@@ -44,6 +44,7 @@ const RECENT_WINDOW_MS = 24 * 60 * 60 * 1_000;
 
 export function ProviderCorpusJobNotifier() {
   const { auth, isLoading } = useAuth();
+  const t = useT();
   const navigate = useNavigate();
   const seenRef = useRef<Record<string, string> | null>(null);
   const { data } = useActionQuery(
@@ -70,13 +71,13 @@ export function ProviderCorpusJobNotifier() {
       const key = notificationKey(entry);
       if (seen[entry.job.id] === key) continue;
 
-      showJobToast(entry, () => navigate("/ask"));
+      showJobToast(entry, () => navigate("/ask"), t);
       seen[entry.job.id] = key;
       changed = true;
     }
 
     if (changed) writeSeenJobs(seen);
-  }, [data, navigate]);
+  }, [data, navigate, t]);
 
   return null;
 }
@@ -103,21 +104,27 @@ function notificationKey(entry: ProviderCorpusJobEntry): string {
   ].join(":");
 }
 
-function showJobToast(entry: ProviderCorpusJobEntry, openAsk: () => void) {
+function showJobToast(
+  entry: ProviderCorpusJobEntry,
+  openAsk: () => void, // i18n-ignore TypeScript helper signature
+  t: ReturnType<typeof useT>, // i18n-ignore TypeScript helper type
+) {
   const title =
     entry.job.status === "completed"
-      ? "Provider corpus job completed"
+      ? t("providerCorpusNotifier.completed")
       : entry.job.status === "quota_wait"
-        ? "Provider corpus job waiting for quota"
-        : "Provider corpus job failed";
+        ? t("providerCorpusNotifier.quotaWait")
+        : t("providerCorpusNotifier.failed");
   const description = [
     `${entry.job.name} (${entry.job.provider})`,
-    coverageSummary(entry),
+    coverageSummary(entry, t),
     entry.nextResumeAt
-      ? `Resume after ${formatDateTime(entry.nextResumeAt)}`
+      ? t("providerCorpusNotifier.resumeAfter", {
+          date: formatDateTime(entry.nextResumeAt),
+        })
       : "",
     entry.error ?? "",
-    `Job ${entry.job.id}`,
+    t("providerCorpusNotifier.jobId", { id: entry.job.id }),
   ]
     .filter(Boolean)
     .join(" · ");
@@ -126,7 +133,7 @@ function showJobToast(entry: ProviderCorpusJobEntry, openAsk: () => void) {
     description,
     duration: entry.job.status === "completed" ? 14_000 : 20_000,
     action: {
-      label: "Open Ask",
+      label: t("providerCorpusNotifier.openAsk"),
       onClick: openAsk,
     },
   };
@@ -140,15 +147,32 @@ function showJobToast(entry: ProviderCorpusJobEntry, openAsk: () => void) {
   }
 }
 
-function coverageSummary(entry: ProviderCorpusJobEntry): string {
+function coverageSummary(
+  entry: ProviderCorpusJobEntry,
+  t: ReturnType<typeof useT>, // i18n-ignore TypeScript helper type
+): string {
   const units =
     entry.coverage.batchesProcessed > 0
-      ? `${entry.coverage.batchesProcessed} batches`
-      : `${entry.coverage.pagesProcessed} pages`;
+      ? t("providerCorpusNotifier.batches", {
+          count: entry.coverage.batchesProcessed,
+        })
+      : t("providerCorpusNotifier.pages", {
+          count: entry.coverage.pagesProcessed,
+        });
   const hits = entry.coverage.truncatedHits
-    ? `${entry.coverage.storedHits}/${entry.coverage.totalHits} hits stored`
-    : `${entry.coverage.totalHits} hits`;
-  return `${entry.coverage.itemsProcessed} items, ${entry.coverage.matchedItems} matched, ${hits}, ${units}`;
+    ? t("providerCorpusNotifier.truncatedHits", {
+        stored: entry.coverage.storedHits,
+        total: entry.coverage.totalHits,
+      })
+    : t("providerCorpusNotifier.hits", {
+        count: entry.coverage.totalHits,
+      });
+  return t("providerCorpusNotifier.coverageSummary", {
+    items: entry.coverage.itemsProcessed,
+    matched: entry.coverage.matchedItems,
+    hits,
+    units,
+  });
 }
 
 function formatDateTime(value: string): string {

package/corpus/templates/analytics/app/components/dashboard/CumulativeNetChart.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   Area,
   AreaChart,
@@ -40,6 +41,7 @@ export function CumulativeNetChart({
   isLoading,
   error,
 }: CumulativeNetChartProps) {
+  const t = useT();
   const lastValue = data.length > 0 ? data[data.length - 1].cumulative_net : 0;
   const isPositive = lastValue >= 0;
   const color = isPositive ? "#10b981" : "#ef4444";
@@ -56,7 +58,7 @@ export function CumulativeNetChart({
           <p className="text-sm text-red-400 py-8 text-center">{error}</p>
         ) : data.length === 0 ? (
           <p className="text-sm text-muted-foreground py-8 text-center">
-            No data available
+            {t("common.noDataAvailable")}
           </p>
         ) : (
           <div className="h-[300px] w-full">

package/corpus/templates/analytics/app/components/dashboard/DataTable.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconArrowsUpDown,
   IconChevronLeft,
@@ -44,6 +45,7 @@ export function DataTable({
   error,
   maxRows,
 }: DataTableProps) {
+  const t = useT();
   const [sortCol, setSortCol] = useState<string | null>(null);
   const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
   const [page, setPage] = useState(0);
@@ -116,7 +118,7 @@ export function DataTable({
         <p className="text-sm text-red-400 py-4">{error}</p>
       ) : data.length === 0 ? (
         <p className="text-sm text-muted-foreground py-4 text-center">
-          No data
+          {t("common.noData")}
         </p>
       ) : (
         <div className="overflow-x-auto">
@@ -162,7 +164,7 @@ export function DataTable({
           {sorted.length > PAGE_SIZE_OPTIONS[0] && (
             <div className="flex items-center justify-between px-2 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
                   value={String(pageSize)}
                   onValueChange={(value) => {

package/corpus/templates/analytics/app/components/dashboard/RecentActivity.tsx

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client";
+
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   Card,
@@ -9,35 +11,35 @@ import {
 
 const activities = [
   {
-    name: "Olivia Martin",
+    name: "Olivia Martin", // i18n-ignore stable sample person name
     email: "olivia.martin@email.com",
     amount: "+$1,999.00",
     avatar: "/avatars/01.png",
     initials: "OM",
   },
   {
-    name: "Jackson Lee",
+    name: "Jackson Lee", // i18n-ignore stable sample person name
     email: "jackson.lee@email.com",
     amount: "+$39.00",
     avatar: "/avatars/02.png",
     initials: "JL",
   },
   {
-    name: "Isabella Nguyen",
+    name: "Isabella Nguyen", // i18n-ignore stable sample person name
     email: "isabella.nguyen@email.com",
     amount: "+$299.00",
     avatar: "/avatars/03.png",
     initials: "IN",
   },
   {
-    name: "William Kim",
+    name: "William Kim", // i18n-ignore stable sample person name
     email: "will@email.com",
     amount: "+$99.00",
     avatar: "/avatars/04.png",
     initials: "WK",
   },
   {
-    name: "Sofia Davis",
+    name: "Sofia Davis", // i18n-ignore stable sample person name
     email: "sofia.davis@email.com",
     amount: "+$39.00",
     avatar: "/avatars/05.png",
@@ -46,11 +48,15 @@ const activities = [
 ];
 
 export function RecentActivity() {
+  const t = useT();
+
   return (
     <Card className="col-span-full lg:col-span-3 bg-card border-border/50">
       <CardHeader>
-        <CardTitle>Recent Sales</CardTitle>
-        <CardDescription>You made 265 sales this month.</CardDescription>
+        <CardTitle>{t("dashboard.recentSales")}</CardTitle>
+        <CardDescription>
+          {t("dashboard.recentSalesDescription")}
+        </CardDescription>
       </CardHeader>
       <CardContent>
         <div className="space-y-8">

package/corpus/templates/analytics/app/components/dashboard/RevenueChart.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   Area,
   AreaChart,
@@ -21,10 +22,12 @@ const data = [
 ];
 
 export function RevenueChart() {
+  const t = useT();
+
   return (
     <Card className="col-span-full lg:col-span-4 bg-card border-border/50">
       <CardHeader>
-        <CardTitle>Revenue over time</CardTitle>
+        <CardTitle>{t("dashboard.revenueOverTime")}</CardTitle>
       </CardHeader>
       <CardContent className="pl-2">
         <div className="h-[300px] w-full">

package/corpus/templates/analytics/app/components/dashboard/RevenueComparisonChart.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   Bar,
   CartesianGrid,
@@ -66,6 +67,7 @@ export function RevenueComparisonChart({
   isLoading,
   error,
 }: RevenueComparisonChartProps) {
+  const t = useT();
   // Flip churn_out to negative for display
   const chartData = data.map((d) => ({
     ...d,
@@ -84,7 +86,7 @@ export function RevenueComparisonChart({
           <p className="text-sm text-red-400 py-8 text-center">{error}</p>
         ) : data.length === 0 ? (
           <p className="text-sm text-muted-foreground py-8 text-center">
-            No data available
+            {t("common.noDataAvailable")}
           </p>
         ) : (
           <div className="h-[400px] w-full">

package/corpus/templates/analytics/app/components/dashboard/SqlChart.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconArrowsSort,
   IconSortAscending,
@@ -836,8 +837,6 @@ interface SqlChartProps {
   className?: string;
   loadData?: boolean;
   onExportCsvChange?: (handler: (() => void) | null) => void;
-  onRefreshChange?: (handler: (() => Promise<void>) | null) => void;
-  onRefreshingChange?: (refreshing: boolean) => void;
 }
 
 export function SqlChart({
@@ -845,65 +844,23 @@ export function SqlChart({
   resolvedSql,
   loadData = true,
   onExportCsvChange,
-  onRefreshChange,
-  onRefreshingChange,
 }: SqlChartProps) {
+  const t = useT();
   // Hooks must be called unconditionally before any early return.
   const isSection = panel.chartType === "section";
   const shouldQuery = !isSection && loadData;
   const sql = serializePanelSql(resolvedSql ?? panel.sql);
-  const queryIdentity = `${panel.id}\n${panel.source}\n${sql}`;
-  const [loadedQueryIdentity, setLoadedQueryIdentity] = useState<string | null>(
-    null,
-  );
-  const queryEnabled = shouldQuery && loadedQueryIdentity !== queryIdentity;
-  const {
-    data: result,
-    isFetching,
-    isLoading,
-    refetch,
-  } = useSqlQuery(
+  const { data: result, isLoading } = useSqlQuery(
     ["sql-chart", panel.id, sql, panel.source],
     sql,
     panel.source,
     // Skip the query for section panels — they are pure layout with no data.
-    {
-      enabled: queryEnabled,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-    },
+    { enabled: shouldQuery },
   );
 
   const rawRows = result?.rows ?? [];
   const error = result?.error;
 
-  useEffect(() => {
-    if (!shouldQuery || !result || isFetching || isLoading) return;
-    setLoadedQueryIdentity((current) =>
-      current === queryIdentity ? current : queryIdentity,
-    );
-  }, [isFetching, isLoading, queryIdentity, result, shouldQuery]);
-
-  const handleRefresh = useCallback(async () => {
-    await refetch();
-  }, [refetch]);
-
-  useEffect(() => {
-    if (!onRefreshChange) return;
-    if (!shouldQuery) {
-      onRefreshChange(null);
-      return;
-    }
-    onRefreshChange(handleRefresh);
-    return () => onRefreshChange(null);
-  }, [handleRefresh, onRefreshChange, shouldQuery]);
-
-  useEffect(() => {
-    onRefreshingChange?.(shouldQuery && isFetching && !isLoading);
-    return () => onRefreshingChange?.(false);
-  }, [isFetching, isLoading, onRefreshingChange, shouldQuery]);
-
   const { rows, forcedYKeys } = useMemo(() => {
     if (panel.config?.pivot && rawRows.length) {
       const pivoted = pivotRows(rawRows, panel.config.pivot);
@@ -956,7 +913,9 @@ export function SqlChart({
       <div
         className={`flex flex-1 items-center justify-center ${placeholderPadY} ${placeholderMinH}`}
       >
-        <p className="text-sm text-muted-foreground text-center">No data</p>
+        <p className="text-sm text-muted-foreground text-center">
+          {t("common.noData")}
+        </p>
       </div>
     );
   }
@@ -1170,6 +1129,7 @@ function TableRenderer({
   panel: SqlPanel;
   onExportCsvChange?: (handler: (() => void) | null) => void;
 }) {
+  const t = useT();
   const config = panel.config;
   const sortable = config?.sortable !== false; // default on
 
@@ -1351,7 +1311,7 @@ function TableRenderer({
       {sortedRows.length > PAGE_SIZE_OPTIONS[0] && (
         <div className="flex items-center justify-between px-1 pt-1 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
               value={String(pageSize)}
               onValueChange={(value) => {
@@ -1782,6 +1742,7 @@ function HeatmapRenderer({
   rows: Record<string, unknown>[];
   panel: SqlPanel;
 }) {
+  const t = useT();
   const cfg = panel.config;
   const yFormatter = cfg?.yFormatter;
 
@@ -1863,7 +1824,9 @@ function HeatmapRenderer({
   if (rows.length === 0 || !valueKey) {
     return (
       <div className="flex min-h-[250px] items-center justify-center py-8">
-        <p className="text-sm text-muted-foreground text-center">No data</p>
+        <p className="text-sm text-muted-foreground text-center">
+          {t("common.noData")}
+        </p>
       </div>
     );
   }

package/corpus/templates/analytics/app/components/dashboard/TimeSeriesChart.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   Area,
   AreaChart,
@@ -32,6 +33,7 @@ export function TimeSeriesChart({
   error,
   yFormatter,
 }: TimeSeriesChartProps) {
+  const t = useT();
   const formatXLabel = (value: any) => {
     try {
       const d = new Date(value);
@@ -53,7 +55,7 @@ export function TimeSeriesChart({
           <p className="text-sm text-red-400 py-8 text-center">{error}</p>
         ) : data.length === 0 ? (
           <p className="text-sm text-muted-foreground py-8 text-center">
-            No data available
+            {t("common.noDataAvailable")}
           </p>
         ) : (
           <div className="h-[300px] w-full">