@agent-native/core 0.76.9 → 0.76.11

package/corpus/core/src/server/og-fonts.ts

@@ -5,14 +5,16 @@ import path from "node:path";
 import {
   LIBERATION_SANS_BOLD_BASE64,
   LIBERATION_SANS_REGULAR_BASE64,
+  NOTO_NASKH_ARABIC_BASE64,
 } from "./og-fonts-data.js";
 
 /**
  * Liberation Sans is the metric-compatible libre replacement for
- * Arial/Helvetica that the OG image SVG asks for. It ships embedded as base64
+ * Arial/Helvetica that the OG image SVG asks for. Noto Naskh Arabic fills the
+ * Arabic script gap for localized docs titles. They ship embedded as base64
  * (see {@link ./og-fonts-data.ts}) so the renderer never depends on the host's
- * system fonts — Linux serverless runtimes (Netlify/Lambda) have neither Arial
- * nor Inter, which previously left every `<text>` element rendering nothing.
+ * system fonts — Linux serverless runtimes (Netlify/Lambda) have neither Arial,
+ * Inter, nor Arabic fallback fonts.
  */
 const OG_FONT_FILES = [
   {
@@ -20,9 +22,14 @@ const OG_FONT_FILES = [
     base64: LIBERATION_SANS_REGULAR_BASE64,
   },
   { filename: "LiberationSans-Bold.ttf", base64: LIBERATION_SANS_BOLD_BASE64 },
+  {
+    filename: "NotoNaskhArabic-Variable.ttf",
+    base64: NOTO_NASKH_ARABIC_BASE64,
+  },
 ] as const;
 
 export const OG_FONT_FAMILY = "Liberation Sans";
+export const OG_ARABIC_FONT_FAMILY = "Noto Naskh Arabic";
 
 let cachedFontFiles: string[] | null | undefined;
 

package/corpus/core/src/server/social-og-image.ts

@@ -11,7 +11,11 @@ import {
   resolveBuiltInAuthMarketingByName,
 } from "./auth-marketing.js";
 import { getAppName } from "./app-name.js";
-import { OG_FONT_FAMILY, resolveOgFontFiles } from "./og-fonts.js";
+import {
+  OG_ARABIC_FONT_FAMILY,
+  OG_FONT_FAMILY,
+  resolveOgFontFiles,
+} from "./og-fonts.js";
 
 export interface AgentNativeOgImageInput {
   appName?: string | null;
@@ -32,7 +36,8 @@ const BRAND_BLUE = "#00B5FF";
 const BRAND_MINT = "#48FFE4";
 const BG = "#000000";
 const FG = "#f5f5f5";
-const FONT_FAMILY = `${OG_FONT_FAMILY}, Arial, Helvetica, system-ui, sans-serif`;
+const DEFAULT_FONT_FAMILY = `${OG_FONT_FAMILY}, Arial, Helvetica, system-ui, sans-serif`;
+const ARABIC_FONT_FAMILY = `${OG_ARABIC_FONT_FAMILY}, ${OG_FONT_FAMILY}, Arial, Helvetica, system-ui, sans-serif`;
 const DEFAULT_ACCENT_TEXT = "100% free and open source";
 
 const LOGO_MARK = `
@@ -101,6 +106,16 @@ function estimateTextWidth(value: string, fontSize: number): number {
   return units * fontSize;
 }
 
+function containsArabicText(value: string): boolean {
+  return /[\u0600-\u06ff\u0750-\u077f\u0870-\u089f\ufb50-\ufdff\ufe70-\ufeff]/u.test(
+    value,
+  );
+}
+
+function fontFamilyForText(value: string): string {
+  return containsArabicText(value) ? ARABIC_FONT_FAMILY : DEFAULT_FONT_FAMILY;
+}
+
 function trimTextToWidth(
   value: string,
   fontSize: number,
@@ -205,6 +220,8 @@ function textBlock({
   weight,
   fill,
   anchor = "start",
+  direction,
+  fontFamily = DEFAULT_FONT_FAMILY,
 }: {
   lines: string[];
   x: number;
@@ -213,9 +230,14 @@ function textBlock({
   lineHeight: number;
   weight: number;
   fill: string;
-  anchor?: "start" | "middle";
+  anchor?: "start" | "middle" | "end";
+  direction?: "ltr" | "rtl";
+  fontFamily?: string;
 }): string {
-  return `<text x="${x}" y="${y}" text-anchor="${anchor}" font-family="${FONT_FAMILY}" font-size="${fontSize}" font-weight="${weight}" fill="${fill}">${lines
+  const directionAttrs = direction
+    ? ` direction="${direction}" unicode-bidi="plaintext"`
+    : "";
+  return `<text x="${x}" y="${y}" text-anchor="${anchor}"${directionAttrs} font-family="${fontFamily}" font-size="${fontSize}" font-weight="${weight}" fill="${fill}">${lines
     .map(
       (line, index) =>
         `<tspan x="${x}" dy="${index === 0 ? 0 : lineHeight}">${escapeSvg(line)}</tspan>`,
@@ -289,6 +311,10 @@ export function renderAgentNativeOgImageSvg(
   const title = cleanText(input.title) || titleFromAppName(appName);
   const accentText = cleanText(input.accentText) || DEFAULT_ACCENT_TEXT;
   const titleLayout = getTitleLayout(title);
+  const titleIsRtl = containsArabicText(title);
+  const textX = titleIsRtl ? WIDTH - 80 : 80;
+  const accentX = titleIsRtl ? WIDTH - 84 : 84;
+  const textAnchor = titleIsRtl ? "end" : "start";
   const titleY = titleLayout.lines.length > 1 ? 288 : 330;
   const accentY =
     titleY + titleLayout.lineHeight * (titleLayout.lines.length - 1) + 70;
@@ -312,7 +338,7 @@ export function renderAgentNativeOgImageSvg(
   <g>
     ${textBlock({
       lines: titleLayout.lines,
-      x: 80,
+      x: textX,
       y: titleY,
       fontSize: titleLayout.fontSize,
       lineHeight: titleLayout.lineHeight,
@@ -321,8 +347,21 @@ export function renderAgentNativeOgImageSvg(
       // bundle, which is the intended look for the display title.
       weight: 800,
       fill: FG,
+      anchor: textAnchor,
+      direction: titleIsRtl ? "rtl" : undefined,
+      fontFamily: fontFamilyForText(title),
+    })}
+    ${textBlock({
+      lines: [accentText],
+      x: accentX,
+      y: accentY,
+      fontSize: 34,
+      lineHeight: 40,
+      weight: 800,
+      fill: BRAND_BLUE,
+      anchor: textAnchor,
+      fontFamily: fontFamilyForText(accentText),
     })}
-    <text x="84" y="${accentY}" font-family="${FONT_FAMILY}" font-size="34" font-weight="800" fill="${BRAND_BLUE}">${escapeSvg(accentText)}</text>
   </g>
 </svg>`;
 }

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

@@ -97,6 +97,10 @@ const CHART_LEGEND_PROPS = {
   wrapperStyle: CHART_LEGEND_WRAPPER_STYLE,
 } as const;
 
+const PARTIAL_DAY_TIME_ZONE = "America/Los_Angeles";
+const PARTIAL_DAY_DASH = "3 5";
+const PARTIAL_DAY_KEY_PREFIX = "__sql_chart_partial_day";
+
 function formatYValue(
   value: number,
   formatter?: "number" | "currency" | "percent",
@@ -167,6 +171,122 @@ function truncateLabel(value: string, max = 48): string {
   return `${value.slice(0, max - 3)}...`;
 }
 
+function parseCalendarDate(value: string): Date | null {
+  const normalized = /^\d{8}$/.test(value)
+    ? `${value.slice(0, 4)}-${value.slice(4, 6)}-${value.slice(6, 8)}`
+    : value;
+  const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/.exec(normalized);
+  if (dateOnly) {
+    return new Date(
+      Number(dateOnly[1]),
+      Number(dateOnly[2]) - 1,
+      Number(dateOnly[3]),
+    );
+  }
+  const parsed = new Date(normalized);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+export function toSqlChartDateKey(value: unknown): string | null {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    const ymd = /^(\d{4})-(\d{2})-(\d{2})$/.exec(trimmed);
+    if (ymd) return `${ymd[1]}-${ymd[2]}-${ymd[3]}`;
+    const compact = /^(\d{4})(\d{2})(\d{2})$/.exec(trimmed);
+    if (compact) return `${compact[1]}-${compact[2]}-${compact[3]}`;
+  }
+
+  const parsed = new Date(String(value ?? ""));
+  return Number.isNaN(parsed.getTime()) ? null : sqlChartLocalDateKey(parsed);
+}
+
+export function sqlChartLocalDateKey(
+  date = new Date(),
+  timeZone = PARTIAL_DAY_TIME_ZONE,
+): string {
+  try {
+    const parts = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    }).formatToParts(date);
+    const get = (type: string) =>
+      parts.find((part) => part.type === type)?.value ?? "";
+    const year = get("year");
+    const month = get("month");
+    const day = get("day");
+    if (year && month && day) return `${year}-${month}-${day}`;
+  } catch {}
+  return date.toISOString().slice(0, 10);
+}
+
+export interface SplitTimeSeries {
+  key: string;
+  solidKey: string;
+  partialKey: string | null;
+}
+
+export function splitCurrentDayTimeSeriesRows(
+  rows: Record<string, unknown>[],
+  xKey: string,
+  yKeys: string[],
+  todayKey = sqlChartLocalDateKey(),
+): { rows: Record<string, unknown>[]; series: SplitTimeSeries[] } {
+  const todayIndexes = rows
+    .map((row, index) => ({ index, dateKey: toSqlChartDateKey(row[xKey]) }))
+    .filter((entry) => entry.dateKey === todayKey)
+    .map((entry) => entry.index);
+  const firstTodayIndex = todayIndexes[0] ?? -1;
+
+  if (firstTodayIndex <= 0 || yKeys.length === 0) {
+    return {
+      rows,
+      series: yKeys.map((key) => ({ key, solidKey: key, partialKey: null })),
+    };
+  }
+
+  const todaySet = new Set(todayIndexes);
+  const previousIndex = firstTodayIndex - 1;
+  const series = yKeys.map((key, index) => ({
+    key,
+    solidKey: `${PARTIAL_DAY_KEY_PREFIX}_${index}_solid`,
+    partialKey: `${PARTIAL_DAY_KEY_PREFIX}_${index}_partial`,
+  }));
+  const splitRows = rows.map((row, index) => {
+    const next = { ...row };
+    const isToday = todaySet.has(index);
+    const isPartialSegmentStart = index === previousIndex;
+    for (const item of series) {
+      next[item.solidKey] = isToday ? null : row[item.key];
+      next[item.partialKey] =
+        isToday || isPartialSegmentStart ? row[item.key] : null;
+    }
+    return next;
+  });
+
+  return { rows: splitRows, series };
+}
+
+export function shouldSplitCurrentDayTimeSeries(
+  panel: Pick<SqlPanel, "source">,
+  xKey: string,
+): boolean {
+  if (panel.source === "prometheus") return false;
+
+  const normalizedKey = xKey.trim().toLowerCase();
+  if (normalizedKey === "timestamp" || normalizedKey.endsWith("_timestamp")) {
+    return false;
+  }
+
+  return (
+    normalizedKey === "date" ||
+    normalizedKey === "day" ||
+    normalizedKey.endsWith("_date") ||
+    normalizedKey.endsWith("_day")
+  );
+}
+
 function formatSeriesLabel(value: string): string {
   const { metric, labels } = parsePrometheusSeriesLabel(value);
   const target =
@@ -232,11 +352,8 @@ function formatSeriesLabelForPanel(panel: SqlPanel, value: string): string {
 function formatXLabel(value: string, panel: SqlPanel): string {
   try {
     const s = String(value);
-    const normalized = /^\d{8}$/.test(s)
-      ? `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)}`
-      : s;
-    const d = new Date(normalized);
-    if (!isNaN(d.getTime()) && s.length >= 8) {
+    const d = parseCalendarDate(s);
+    if (d && s.length >= 8) {
       return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
     }
   } catch {}
@@ -252,12 +369,21 @@ function numericTooltipValue(value: unknown): number {
   return Number.isFinite(numeric) ? numeric : Number.NEGATIVE_INFINITY;
 }
 
+function tooltipItemName(item: {
+  dataKey?: string | number;
+  name?: string | number;
+}): string {
+  return String(item.name ?? item.dataKey ?? "");
+}
+
 export function sortTooltipPayloadItems<
   T extends {
+    dataKey?: string | number;
+    name?: string | number;
     value?: unknown;
   },
 >(items: T[]): T[] {
-  return items
+  const sorted = items
     .map((item, index) => ({ item, index }))
     .sort((a, b) => {
       const diff =
@@ -265,6 +391,13 @@ export function sortTooltipPayloadItems<
       return diff !== 0 ? diff : a.index - b.index;
     })
     .map(({ item }) => item);
+  const seen = new Set<string>();
+  return sorted.filter((item) => {
+    const name = tooltipItemName(item);
+    if (seen.has(name)) return false;
+    seen.add(name);
+    return true;
+  });
 }
 
 function useSeriesVisibility(keys: string[]): {
@@ -1390,6 +1523,21 @@ function TimeSeriesRenderer({
   const seriesNameFormatter = (name: string) =>
     formatSeriesLabelForPanel(panel, name);
   const { hiddenKeys, visibleKeys, toggleSeries } = useSeriesVisibility(yKeys);
+  const splitPartialDay = shouldSplitCurrentDayTimeSeries(panel, xKey);
+  const { rows: chartRows, series } = useMemo(
+    () =>
+      splitPartialDay
+        ? splitCurrentDayTimeSeriesRows(rows, xKey, yKeys)
+        : {
+            rows,
+            series: yKeys.map((key) => ({
+              key,
+              solidKey: key,
+              partialKey: null,
+            })),
+          },
+    [rows, xKey, yKeys, splitPartialDay],
+  );
 
   if (chartType === "line") {
     return (
@@ -1402,7 +1550,7 @@ function TimeSeriesRenderer({
         showCustomLegend
       >
         <ResponsiveContainer width="100%" height="100%">
-          <LineChart data={rows}>
+          <LineChart data={chartRows}>
             <XAxis
               dataKey={xKey}
               stroke="hsl(var(--muted-foreground))"
@@ -1435,18 +1583,33 @@ function TimeSeriesRenderer({
               }
               itemSorter={(item) => -(Number(item.value) || 0)}
             />
-            {yKeys.map((key, i) => (
+            {series.map((item, i) => (
               <Line
-                key={key}
+                key={item.solidKey}
                 type="monotone"
-                dataKey={key}
-                name={seriesNameFormatter(key)}
+                dataKey={item.solidKey}
+                name={seriesNameFormatter(item.key)}
                 stroke={colors[i % colors.length]}
                 strokeWidth={2}
                 dot={false}
-                hide={hiddenKeys.has(key)}
+                hide={hiddenKeys.has(item.key)}
               />
             ))}
+            {series.map((item, i) =>
+              item.partialKey ? (
+                <Line
+                  key={item.partialKey}
+                  type="monotone"
+                  dataKey={item.partialKey}
+                  name={seriesNameFormatter(item.key)}
+                  stroke={colors[i % colors.length]}
+                  strokeWidth={2}
+                  strokeDasharray={PARTIAL_DAY_DASH}
+                  dot={false}
+                  hide={hiddenKeys.has(item.key)}
+                />
+              ) : null,
+            )}
           </LineChart>
         </ResponsiveContainer>
       </ChartFrame>
@@ -1468,7 +1631,7 @@ function TimeSeriesRenderer({
       showCustomLegend
     >
       <ResponsiveContainer width="100%" height="100%">
-        <AreaChart data={rows}>
+        <AreaChart data={chartRows}>
           {showFill && (
             <defs>
               {yKeys.map((key, i) => (
@@ -1526,20 +1689,37 @@ function TimeSeriesRenderer({
             }
             itemSorter={(item) => -(Number(item.value) || 0)}
           />
-          {yKeys.map((key, i) => (
+          {series.map((item, i) => (
             <Area
-              key={key}
+              key={item.solidKey}
               type="monotone"
-              dataKey={key}
-              name={seriesNameFormatter(key)}
+              dataKey={item.solidKey}
+              name={seriesNameFormatter(item.key)}
               stroke={colors[i % colors.length]}
               strokeWidth={2}
               fillOpacity={showFill ? 1 : 0}
-              fill={showFill ? `url(#sql-gradient-${key})` : "none"}
+              fill={showFill ? `url(#sql-gradient-${item.key})` : "none"}
               stackId={stacked ? "stack" : undefined}
-              hide={hiddenKeys.has(key)}
+              hide={hiddenKeys.has(item.key)}
             />
           ))}
+          {series.map((item, i) =>
+            item.partialKey ? (
+              <Area
+                key={item.partialKey}
+                type="monotone"
+                dataKey={item.partialKey}
+                name={seriesNameFormatter(item.key)}
+                stroke={colors[i % colors.length]}
+                strokeWidth={2}
+                strokeDasharray={PARTIAL_DAY_DASH}
+                fill="none"
+                fillOpacity={0}
+                stackId={stacked ? "partial-stack" : undefined}
+                hide={hiddenKeys.has(item.key)}
+              />
+            ) : null,
+          )}
         </AreaChart>
       </ResponsiveContainer>
     </ChartFrame>

package/corpus/templates/analytics/app/components/layout/CommandPalette.tsx

@@ -27,6 +27,7 @@ import {
   callAction,
   useChangeVersions,
   ChangelogDialog,
+  useT,
 } from "@agent-native/core/client";
 import { extensionPath } from "@agent-native/core/client/extensions";
 import changelog from "../../../CHANGELOG.md?raw";
@@ -50,10 +51,14 @@ interface ExtensionSearchItem {
 }
 
 const defaultTools = [
-  { id: "explorer", name: "Explorer", href: "/dashboards/explorer" },
+  {
+    id: "explorer",
+    nameKey: "commandPalette.toolExplorer",
+    href: "/dashboards/explorer",
+  },
   {
     id: "customer-health",
-    name: "Customer Health",
+    nameKey: "commandPalette.toolCustomerHealth",
     href: "/dashboards/customer-health",
   },
 ];
@@ -126,9 +131,9 @@ async function fetchExplorerDashboards(): Promise<ExplorerDashboard[]> {
   }
 }
 
-async function fetchSqlDashboards(): Promise<
-  { id: string; name: string; hiddenAt: string | null }[]
-> {
+async function fetchSqlDashboards(
+  t: (key: string) => string,
+): Promise<{ id: string; name: string; hiddenAt: string | null }[]> {
   try {
     const rows = await callAction(
       "list-sql-dashboards",
@@ -142,7 +147,7 @@ async function fetchSqlDashboards(): Promise<
         name:
           typeof d.name === "string" && d.name.trim().length > 0
             ? d.name
-            : "Untitled dashboard",
+            : t("commandPalette.untitledDashboard"),
         hiddenAt: typeof d.hiddenAt === "string" ? d.hiddenAt : null,
       }));
   } catch {
@@ -183,6 +188,7 @@ function persistThemePreference(theme: "light" | "dark") {
 }
 
 export function CommandPalette() {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const [changelogOpen, setChangelogOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
@@ -213,7 +219,7 @@ export function CommandPalette() {
   const { data: sqlDashboards = [], isFetching: sqlDashboardsFetching } =
     useQuery({
       queryKey: ["sql-dashboards-palette", dashboardsSync],
-      queryFn: fetchSqlDashboards,
+      queryFn: () => fetchSqlDashboards(t),
       staleTime: 30_000,
       enabled: open,
       placeholderData: (prev) => prev,
@@ -276,21 +282,24 @@ export function CommandPalette() {
         }}
       >
         <CommandInput
-          placeholder="Search dashboards, extensions, charts..."
+          placeholder={t("commandPalette.searchPlaceholder")}
           value={searchQuery}
           onValueChange={setSearchQuery}
         />
         <CommandList>
           {!asyncGroupsLoading && (
-            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandEmpty>{t("commandPalette.noResults")}</CommandEmpty>
           )}
 
           {explorerDashboardsFetching && explorerDashboards.length === 0 && (
-            <CommandLoadingGroup heading="Explorer Dashboards" rows={2} />
+            <CommandLoadingGroup
+              heading={t("commandPalette.groupExplorerDashboards")}
+              rows={2}
+            />
           )}
 
           {visibleExplorerDashboards.length > 0 && (
-            <CommandGroup heading="Explorer Dashboards">
+            <CommandGroup heading={t("commandPalette.groupExplorerDashboards")}>
               {visibleExplorerDashboards.map((d) => (
                 <CommandItem
                   key={`ed-${d.id}`}
@@ -307,7 +316,7 @@ export function CommandPalette() {
                   <span className="truncate">{d.name}</span>
                   {d.hiddenAt ? (
                     <span className="ms-2 rounded border border-border px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-                      Hidden
+                      {t("commandPalette.hidden")}
                     </span>
                   ) : null}
                 </CommandItem>
@@ -316,11 +325,14 @@ export function CommandPalette() {
           )}
 
           {sqlDashboardsFetching && sqlDashboards.length === 0 && (
-            <CommandLoadingGroup heading="SQL Dashboards" rows={3} />
+            <CommandLoadingGroup
+              heading={t("commandPalette.groupSqlDashboards")}
+              rows={3}
+            />
           )}
 
           {visibleSqlDashboards.length > 0 && (
-            <CommandGroup heading="SQL Dashboards">
+            <CommandGroup heading={t("commandPalette.groupSqlDashboards")}>
               {visibleSqlDashboards.map((d) => (
                 <CommandItem
                   key={`sql-${d.id}`}
@@ -335,7 +347,7 @@ export function CommandPalette() {
                   <span className="truncate">{d.name}</span>
                   {d.hiddenAt ? (
                     <span className="ms-2 rounded border border-border px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-                      Hidden
+                      {t("commandPalette.hidden")}
                     </span>
                   ) : null}
                 </CommandItem>
@@ -344,11 +356,14 @@ export function CommandPalette() {
           )}
 
           {extensionsFetching && extensions.length === 0 && (
-            <CommandLoadingGroup heading="Extensions" rows={3} />
+            <CommandLoadingGroup
+              heading={t("commandPalette.groupExtensions")}
+              rows={3}
+            />
           )}
 
           {extensions.length > 0 && (
-            <CommandGroup heading="Extensions">
+            <CommandGroup heading={t("commandPalette.groupExtensions")}>
               {extensions.map((extension) => (
                 <CommandItem
                   key={`extension-${extension.id}`}
@@ -369,7 +384,7 @@ export function CommandPalette() {
             </CommandGroup>
           )}
 
-          <CommandGroup heading="Dashboards">
+          <CommandGroup heading={t("commandPalette.groupDashboards")}>
             {dashboards.map((d) => (
               <CommandItem
                 key={`dash-${d.id}`}
@@ -382,20 +397,20 @@ export function CommandPalette() {
             ))}
           </CommandGroup>
 
-          <CommandGroup heading="Tools">
-            {defaultTools.map((t) => (
+          <CommandGroup heading={t("commandPalette.groupTools")}>
+            {defaultTools.map((tool) => (
               <CommandItem
-                key={`tool-${t.id}`}
-                onSelect={() => go(t.href)}
-                keywords={commandPaletteKeywords(t.name, "tool")}
+                key={`tool-${tool.id}`}
+                onSelect={() => go(tool.href)}
+                keywords={commandPaletteKeywords(t(tool.nameKey), "tool")}
               >
                 <IconTool className="me-2 h-4 w-4 text-muted-foreground" />
-                {t.name}
+                {t(tool.nameKey)}
               </CommandItem>
             ))}
           </CommandGroup>
 
-          <CommandGroup heading="Appearance">
+          <CommandGroup heading={t("commandPalette.groupAppearance")}>
             <CommandItem
               onSelect={() => {
                 const nextTheme = isDark ? "light" : "dark";
@@ -409,18 +424,20 @@ export function CommandPalette() {
               ) : (
                 <IconMoon className="me-2 h-4 w-4 text-muted-foreground" />
               )}
-              Toggle {isDark ? "light" : "dark"} mode
+              {isDark
+                ? t("commandPalette.toggleLightMode")
+                : t("commandPalette.toggleDarkMode")}
             </CommandItem>
           </CommandGroup>
 
-          <CommandGroup heading="Help">
+          <CommandGroup heading={t("commandPalette.groupHelp")}>
             <CommandItem
               onSelect={() => {
                 setOpen(false);
                 setChangelogOpen(true);
               }}
               keywords={commandPaletteKeywords(
-                "What's new",
+                t("commandPalette.whatsNew"),
                 "changelog",
                 "updates",
                 "release notes",
@@ -428,16 +445,19 @@ export function CommandPalette() {
               )}
             >
               <IconHistory className="me-2 h-4 w-4 text-muted-foreground" />
-              What's new
+              {t("commandPalette.whatsNew")}
             </CommandItem>
           </CommandGroup>
 
           {savedChartsFetching && savedCharts.length === 0 && (
-            <CommandLoadingGroup heading="Saved Charts" rows={2} />
+            <CommandLoadingGroup
+              heading={t("commandPalette.groupSavedCharts")}
+              rows={2}
+            />
           )}
 
           {savedCharts.length > 0 && (
-            <CommandGroup heading="Saved Charts">
+            <CommandGroup heading={t("commandPalette.groupSavedCharts")}>
               {savedCharts.map((c) => (
                 <CommandItem
                   key={`chart-${c.id}`}