@agent-native/toolkit 0.213.1 → 0.214.0

package/src/app/chat/chat/widgets/DataTableWidget.tsx

@@ -1,18 +1,20 @@
-import { requestAgentSidebarOpen } from "@agent-native/core/client/agent-chat";
-import { startAgentChatViewTransition } from "@agent-native/core/client/agent-chat";
-import { appPath } from "@agent-native/core/client/api-path";
 import {
   DEFAULT_LOCALE,
   useOptionalLocale,
   useT,
 } from "@agent-native/core/client/i18n";
 import { cn } from "@agent-native/toolkit/utils";
-import { IconDownload, IconExternalLink, IconTable } from "@tabler/icons-react";
+import { IconDownload, IconTable } from "@tabler/icons-react";
 
 import { downloadFile, toCSVTable } from "../../../db-admin/export-utils.js";
-import type { DataTableWidget as DataTableWidgetData } from "./data-widget-types.js";
-
-const SAFE_ACTION_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+import type {
+  DataTableWidget as DataTableWidgetData,
+  DataWidgetDisplay,
+} from "./data-widget-types.js";
+import {
+  DataWidgetDisplayControls,
+  DataWidgetSourceChips,
+} from "./DataWidgetDisplayControls.js";
 
 function formatCell(
   value: unknown,
@@ -42,60 +44,6 @@ function formatCell(
   return text;
 }
 
-function normalizeActionHref(href: string): string | null {
-  const trimmed = href.trim();
-  if (!trimmed) return null;
-  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
-    return appPath(trimmed);
-  }
-
-  const base =
-    typeof window === "undefined"
-      ? "http://agent-native.local/"
-      : window.location.href;
-  try {
-    const url = new URL(trimmed, base);
-    if (!SAFE_ACTION_PROTOCOLS.has(url.protocol)) return null;
-
-    if (
-      typeof window !== "undefined" &&
-      url.origin === window.location.origin
-    ) {
-      return appPath(`${url.pathname}${url.search}${url.hash}`);
-    }
-
-    return url.toString();
-  } catch {
-    return null;
-  }
-}
-
-function isSameAppHref(href: string): boolean {
-  if (typeof window === "undefined") return false;
-  try {
-    const url = new URL(href, window.location.href);
-    return (
-      url.origin === window.location.origin && url.pathname.startsWith("/")
-    );
-  } catch {
-    return false;
-  }
-}
-
-function navigateSameAppHref(href: string): void {
-  if (typeof window === "undefined") return;
-  const url = new URL(href, window.location.href);
-  startAgentChatViewTransition(() => {
-    requestAgentSidebarOpen();
-    window.history.pushState(
-      window.history.state,
-      "",
-      `${url.pathname}${url.search}${url.hash}`,
-    );
-    window.dispatchEvent(new PopStateEvent("popstate"));
-  });
-}
-
 function slugifyFilenamePart(value: string | undefined): string {
   const slug = (value ?? "data-table")
     .trim()
@@ -108,14 +56,20 @@ function slugifyFilenamePart(value: string | undefined): string {
 export function DataTableWidget({
   table,
   action,
+  display,
 }: {
   table: DataTableWidgetData;
   action?: { label: string; href: string };
+  display?: DataWidgetDisplay;
 }) {
   const t = useT();
   const locale = useOptionalLocale()?.locale ?? DEFAULT_LOCALE;
   const rows = table.rows ?? [];
-  const actionHref = action ? normalizeActionHref(action.href) : null;
+  const resolvedDisplay = display
+    ? { ...display, primaryAction: display.primaryAction ?? action }
+    : action
+      ? { primaryAction: action }
+      : undefined;
   const canExportCsv = table.columns.length > 0;
   const exportCsv = () => {
     if (!canExportCsv) return;
@@ -151,30 +105,11 @@ export function DataTableWidget({
             {table.truncated ? ` ${t("agentChat.widget.sampled")}` : ""}
           </div>
         </div>
-        {action && actionHref ? (
-          <a
-            href={actionHref}
-            onClick={(event) => {
-              if (
-                event.defaultPrevented ||
-                event.button !== 0 ||
-                event.metaKey ||
-                event.ctrlKey ||
-                event.shiftKey ||
-                event.altKey ||
-                !isSameAppHref(actionHref)
-              ) {
-                return;
-              }
-              event.preventDefault();
-              navigateSameAppHref(actionHref);
-            }}
-            className="inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] font-medium text-foreground no-underline hover:bg-muted hover:no-underline"
-          >
-            {action.label}
-            <IconExternalLink className="h-3 w-3" />
-          </a>
-        ) : null}
+        <DataWidgetDisplayControls
+          display={resolvedDisplay}
+          variant="secondary"
+          kind="table"
+        />
         <button
           type="button"
           onClick={exportCsv}
@@ -240,6 +175,7 @@ export function DataTableWidget({
           </tbody>
         </table>
       </div>
+      <DataWidgetSourceChips sources={display?.sources ?? []} />
     </div>
   );
 }

package/src/app/chat/chat/widgets/DataWidgetDisplayControls.tsx

@@ -0,0 +1,301 @@
+import {
+  requestAgentSidebarOpen,
+  startAgentChatViewTransition,
+} from "@agent-native/core/client/agent-chat";
+import { appPath } from "@agent-native/core/client/api-path";
+import { useT } from "@agent-native/core/client/i18n";
+import { writeClipboardText } from "@agent-native/toolkit/clipboard";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import {
+  IconCamera,
+  IconCompass,
+  IconCopy,
+  IconDotsVertical,
+  IconExternalLink,
+  IconNotebook,
+} from "@tabler/icons-react";
+import { forwardRef } from "react";
+
+import { toast } from "../../../../hooks/use-toast.js";
+import type {
+  DataWidgetAction,
+  DataWidgetActionIcon,
+  DataWidgetDataSource,
+  DataWidgetDisplay,
+  DataWidgetDisplayAction,
+} from "./data-widget-types.js";
+
+const SAFE_ACTION_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+
+function normalizeActionHref(href: string): string | null {
+  const trimmed = href.trim();
+  if (!trimmed) return null;
+
+  const hasWindow = typeof window !== "undefined";
+  const isRelative =
+    !/^[a-z][a-z\d+.-]*:/i.test(trimmed) && !trimmed.startsWith("//");
+  const base = hasWindow ? window.location.href : "http://agent-native.local/";
+  let url: URL;
+  try {
+    url = new URL(trimmed, base);
+  } catch (error) {
+    if (error instanceof TypeError) return null;
+    throw error;
+  }
+
+  if (!SAFE_ACTION_PROTOCOLS.has(url.protocol)) return null;
+
+  if (!hasWindow && isRelative) {
+    return appPath(`${url.pathname}${url.search}${url.hash}`);
+  }
+
+  if (hasWindow && url.origin === window.location.origin) {
+    return appPath(`${url.pathname}${url.search}${url.hash}`);
+  }
+
+  return url.toString();
+}
+
+function navigateSameAppHref(href: string): void {
+  if (typeof window === "undefined") return;
+  const url = new URL(href, window.location.href);
+  startAgentChatViewTransition(() => {
+    requestAgentSidebarOpen();
+    window.history.pushState(
+      window.history.state,
+      "",
+      `${url.pathname}${url.search}${url.hash}`,
+    );
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  });
+}
+
+const WidgetActionLink = forwardRef<
+  HTMLAnchorElement,
+  {
+    href: string;
+    label: string;
+    className: string;
+    icon?: DataWidgetActionIcon;
+  }
+>(function WidgetActionLink({ href, label, className, icon }, ref) {
+  return (
+    <a
+      ref={ref}
+      href={href}
+      onClick={(event) => {
+        if (
+          event.defaultPrevented ||
+          event.button !== 0 ||
+          event.metaKey ||
+          event.ctrlKey ||
+          event.shiftKey ||
+          event.altKey ||
+          typeof window === "undefined"
+        ) {
+          return;
+        }
+
+        const url = new URL(href, window.location.href);
+        if (url.origin !== window.location.origin) return;
+
+        event.preventDefault();
+        navigateSameAppHref(href);
+      }}
+      className={className}
+    >
+      <span className="truncate">{label}</span>
+      {icon === "explore" ? (
+        <IconCompass aria-hidden="true" className="size-3.5 shrink-0" />
+      ) : icon === "camera" ? (
+        <IconCamera aria-hidden="true" className="size-3.5 shrink-0" />
+      ) : icon === "notebook" ? (
+        <IconNotebook aria-hidden="true" className="size-3.5 shrink-0" />
+      ) : (
+        <IconExternalLink aria-hidden="true" className="size-3.5 shrink-0" />
+      )}
+    </a>
+  );
+});
+
+type PreparedDisplayAction =
+  | {
+      type: "link";
+      action: Extract<DataWidgetDisplayAction, { type: "link" }>;
+      href: string;
+      key: string;
+    }
+  | {
+      type: "copy";
+      action: Extract<DataWidgetDisplayAction, { type: "copy" }>;
+      href: null;
+      key: string;
+    };
+
+export function DataWidgetDisplayControls({
+  display,
+  chartActions = [],
+  variant = "primary",
+  kind = "chart",
+}: {
+  display?: DataWidgetDisplay;
+  chartActions?: DataWidgetAction[];
+  variant?: "primary" | "secondary";
+  kind?: "chart" | "table";
+}) {
+  const t = useT();
+  const copyText = async (text: string) => {
+    let copied = false;
+    try {
+      copied = await writeClipboardText(text);
+    } catch {
+      copied = false;
+    }
+
+    toast({
+      title: copied
+        ? t("agentChat.common.copied")
+        : t("agentChat.recovery.copyFailed"),
+    });
+  };
+  const displayActions: DataWidgetDisplayAction[] = [
+    ...(display?.actions ?? []),
+    ...chartActions.map((action) => ({ ...action, type: "link" as const })),
+  ];
+  const primary = display?.primaryAction
+    ? {
+        ...display.primaryAction,
+        href: normalizeActionHref(display.primaryAction.href),
+      }
+    : null;
+  const actions: PreparedDisplayAction[] = [];
+  for (const [index, action] of displayActions.entries()) {
+    if (action.type === "link") {
+      const href = normalizeActionHref(action.href);
+      if (href) {
+        actions.push({
+          type: "link",
+          action,
+          href,
+          key: action.id ?? `link-${index}`,
+        });
+      }
+      continue;
+    }
+    actions.push({
+      type: "copy",
+      action,
+      href: null,
+      key: action.id ?? `copy-${index}`,
+    });
+  }
+  const actionsLabel =
+    kind === "table"
+      ? t("agentChat.widget.tableActions", { defaultValue: "Table actions" })
+      : t("agentChat.widget.chartActions", { defaultValue: "Chart actions" });
+
+  return (
+    <div className="flex shrink-0 items-center gap-1.5">
+      {primary?.href ? (
+        <WidgetActionLink
+          href={primary.href}
+          label={primary.label}
+          icon={primary.icon}
+          className={
+            variant === "secondary"
+              ? "inline-flex max-w-44 items-center gap-1.5 truncate rounded-md border border-border px-2 py-1 text-[11px] font-medium text-foreground no-underline hover:bg-muted hover:no-underline"
+              : "inline-flex max-w-44 items-center gap-1.5 truncate rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground no-underline hover:bg-primary/90 hover:no-underline"
+          }
+        />
+      ) : null}
+      {actions.length > 0 ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              aria-label={actionsLabel}
+              title={actionsLabel}
+              className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <IconDotsVertical aria-hidden="true" className="size-4" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {actions.map((item) =>
+              item.type === "copy" ? (
+                <DropdownMenuItem
+                  key={item.key}
+                  onSelect={() => void copyText(item.action.text)}
+                >
+                  <IconCopy aria-hidden="true" className="size-4" />
+                  {item.action.label}
+                </DropdownMenuItem>
+              ) : (
+                <DropdownMenuItem key={item.key} asChild>
+                  <WidgetActionLink
+                    href={item.href}
+                    label={item.action.label}
+                    icon={
+                      item.action.type === "link" ? item.action.icon : undefined
+                    }
+                    className="flex w-full items-center justify-between gap-3"
+                  />
+                </DropdownMenuItem>
+              ),
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+    </div>
+  );
+}
+
+export function DataWidgetSourceChips({
+  sources,
+}: {
+  sources: DataWidgetDataSource[];
+}) {
+  const t = useT();
+
+  if (sources.length === 0) return null;
+
+  return (
+    <div
+      aria-label={t("agentChat.widget.dataSources", {
+        defaultValue: "Data sources",
+      })}
+      className="flex flex-wrap items-center gap-1.5 border-t border-border px-3 py-2"
+      role="group"
+    >
+      <span className="text-[10px] font-medium text-muted-foreground">
+        {t("agentChat.widget.dataSources", { defaultValue: "Data sources" })}
+      </span>
+      {sources.map((source, index) => {
+        const href = source.href ? normalizeActionHref(source.href) : null;
+        const className =
+          "inline-flex max-w-52 items-center truncate rounded-full border border-border bg-muted/30 px-2 py-0.5 text-[10px] font-medium text-muted-foreground no-underline hover:bg-muted hover:text-foreground hover:no-underline";
+
+        return href ? (
+          <WidgetActionLink
+            key={source.id ?? `${source.label}-${index}`}
+            href={href}
+            label={source.label}
+            className={className}
+          />
+        ) : (
+          <span
+            key={source.id ?? `${source.label}-${index}`}
+            className={className}
+          >
+            {source.label}
+          </span>
+        );
+      })}
+    </div>
+  );
+}

package/src/app/chat/chat/widgets/builtin-tool-renderers.tsx

@@ -282,17 +282,17 @@ function renderDataWidget(context: ToolRendererContext) {
   if (widget === DATA_TABLE_WIDGET && result.table) {
     return (
       <Suspense fallback={<BuiltinToolRendererSkeleton />}>
-        <LazyDataTableWidget
-          table={result.table}
-          action={result.display?.primaryAction}
-        />
+        <LazyDataTableWidget table={result.table} display={result.display} />
       </Suspense>
     );
   }
   if (widget === DATA_CHART_WIDGET && result.chartSeries) {
     return (
       <Suspense fallback={<BuiltinToolRendererSkeleton />}>
-        <LazyDataChartWidget chart={result.chartSeries} />
+        <LazyDataChartWidget
+          chart={result.chartSeries}
+          display={result.display}
+        />
       </Suspense>
     );
   }

package/src/app/chat/mcp-apps/McpAppRenderer.tsx

@@ -36,6 +36,7 @@ import {
   SESSION_REPLAY_BLOCK_PROPS,
   SESSION_REPLAY_MASK_PROPS,
 } from "../session-replay-privacy.js";
+import { resolveMcpAppTheme } from "./mcp-app-theme.js";
 
 type CallToolResult = Parameters<
   InstanceType<typeof AppBridge>["sendToolResult"]
@@ -810,11 +811,15 @@ function buildHostContext(app: AgentMcpAppPayload, maxHeight: number) {
       : null;
   const cssVar = (name: string) => root?.getPropertyValue(name).trim() || "";
   const theme =
-    typeof document !== "undefined" &&
-    (document.documentElement.classList.contains("dark") ||
-      window.matchMedia?.("(prefers-color-scheme: dark)").matches)
-      ? "dark"
-      : "light";
+    typeof document === "undefined"
+      ? "light"
+      : resolveMcpAppTheme(
+          document.documentElement,
+          () =>
+            typeof window !== "undefined" &&
+            (window.matchMedia?.("(prefers-color-scheme: dark)").matches ??
+              false),
+        );
   return {
     toolInfo: app.tool
       ? {

package/src/app/chat/mcp-apps/mcp-app-theme.spec.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { resolveMcpAppTheme } from "./mcp-app-theme.js";
+
+function themeRoot(className: string, dataTheme: string | null) {
+  return {
+    classList: {
+      contains: (name: string) => className.split(" ").includes(name),
+    },
+    getAttribute: () => dataTheme,
+  } as unknown as Pick<HTMLElement, "classList" | "getAttribute">;
+}
+
+describe("resolveMcpAppTheme", () => {
+  it("keeps the selected host theme when the operating system prefers another theme", () => {
+    const readSystemTheme = vi.fn(() => true);
+    expect(
+      resolveMcpAppTheme(themeRoot("light", "light"), readSystemTheme),
+    ).toBe("light");
+    expect(resolveMcpAppTheme(themeRoot("dark", "dark"), readSystemTheme)).toBe(
+      "dark",
+    );
+    expect(readSystemTheme).not.toHaveBeenCalled();
+  });
+
+  it("uses the system preference only when no selected theme is present", () => {
+    expect(resolveMcpAppTheme(themeRoot("", null), () => true)).toBe("dark");
+    expect(resolveMcpAppTheme(themeRoot("", null), () => false)).toBe("light");
+  });
+});

package/src/app/chat/mcp-apps/mcp-app-theme.ts

@@ -0,0 +1,11 @@
+export function resolveMcpAppTheme(
+  root: Pick<HTMLElement, "classList" | "getAttribute">,
+  readSystemTheme: () => boolean,
+): "dark" | "light" {
+  if (root.classList.contains("dark")) return "dark";
+  if (root.classList.contains("light")) return "light";
+
+  const dataTheme = root.getAttribute("data-theme");
+  if (dataTheme === "dark" || dataTheme === "light") return dataTheme;
+  return readSystemTheme() ? "dark" : "light";
+}

package/src/app/i18n/catalogs/ar-SA.ts

@@ -1522,6 +1522,9 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.worked": "عمل",
   "tool.workedFor": "عمل لمدة {{duration}}",
   "widget.chart": "مخطط",
+  "widget.chartActions": "إجراءات المخطط",
+  "widget.dataSources": "مصادر البيانات",
+  "widget.tableActions": "إجراءات الجدول",
   "widget.dataChart": "مخطط بيانات",
   "widget.dataInsights": "رؤى البيانات",
   "widget.dataTable": "جدول بيانات",
@@ -2246,6 +2249,12 @@ const messages: ToolkitAgentChatTranslation = {
     "تحقق من بريدك الإلكتروني للاطلاع على تعليمات تأكيد هذا التغيير.",
   "settingsShell.account.languageAndRegion": "اللغة والمنطقة",
   "settingsShell.account.languageDescription": "يُطبَّق على جميع أجهزتك.",
+  "settingsShell.account.appearance": "المظهر",
+  "settingsShell.account.themeFamily": "نمط السمة",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal": "الألوان الأصلية للتطبيق",
+  "settingsShell.account.themeFamilySaveError":
+    "تعذّر تحديث نمط السمة. حاول مرة أخرى.",
   "settingsShell.account.manage": "إدارة",
   "settingsShell.account.name": "الاسم",
   "settingsShell.account.nameDescription":

package/src/app/i18n/catalogs/de-DE.ts

@@ -1068,6 +1068,9 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.worked": "Verarbeitet",
   "tool.workedFor": "{{duration}} verarbeitet",
   "widget.chart": "Diagramm",
+  "widget.chartActions": "Diagrammaktionen",
+  "widget.dataSources": "Datenquellen",
+  "widget.tableActions": "Tabellenaktionen",
   "widget.dataChart": "Datendiagramm",
   "widget.dataInsights": "Datenerkenntnisse",
   "widget.dataTable": "Datentabelle",
@@ -2204,6 +2207,12 @@ const messages: ToolkitAgentChatTranslation = {
     "Prüfe deine E-Mails, um die Änderung zu bestätigen.",
   "settingsShell.account.languageAndRegion": "Sprache und Region",
   "settingsShell.account.languageDescription": "Gilt auf allen deinen Geräten.",
+  "settingsShell.account.appearance": "Darstellung",
+  "settingsShell.account.themeFamily": "Farbschema",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal": "Originalfarben der App",
+  "settingsShell.account.themeFamilySaveError":
+    "Das Farbschema konnte nicht aktualisiert werden. Versuch es noch einmal.",
   "settingsShell.account.manage": "Verwalten",
   "settingsShell.account.name": "Name",
   "settingsShell.account.nameDescription":

package/src/app/i18n/catalogs/en-US.ts

@@ -1513,6 +1513,9 @@ const messages = {
   "tool.worked": "Worked",
   "tool.workedFor": "Worked for {{duration}}",
   "widget.chart": "Chart",
+  "widget.chartActions": "Chart actions",
+  "widget.dataSources": "Data sources",
+  "widget.tableActions": "Table actions",
   "widget.dataChart": "Data chart",
   "widget.dataInsights": "Data insights",
   "widget.dataTable": "Data table",
@@ -2095,6 +2098,12 @@ const messages = {
     "Check your email for instructions to confirm this change.",
   "settingsShell.account.languageAndRegion": "Language and region",
   "settingsShell.account.languageDescription": "Applies on all your devices.",
+  "settingsShell.account.appearance": "Appearance",
+  "settingsShell.account.themeFamily": "Theme family",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal": "Original app colors",
+  "settingsShell.account.themeFamilySaveError":
+    "Could not update the theme family. Try again.",
   "settingsShell.account.manage": "Manage",
   "settingsShell.account.name": "Name",
   "settingsShell.account.nameDescription":

package/src/app/i18n/catalogs/es-ES.ts

@@ -1063,6 +1063,9 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.worked": "Trabajó",
   "tool.workedFor": "Trabajó durante {{duration}}",
   "widget.chart": "Gráfico",
+  "widget.chartActions": "Acciones del gráfico",
+  "widget.dataSources": "Fuentes de datos",
+  "widget.tableActions": "Acciones de la tabla",
   "widget.dataChart": "Gráfico de datos",
   "widget.dataInsights": "Información sobre los datos",
   "widget.dataTable": "Tabla de datos",
@@ -2231,6 +2234,13 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsShell.account.languageAndRegion": "Idioma y región",
   "settingsShell.account.languageDescription":
     "Se aplica en todos tus dispositivos.",
+  "settingsShell.account.appearance": "Apariencia",
+  "settingsShell.account.themeFamily": "Familia de tema",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal":
+    "Colores originales de la aplicación",
+  "settingsShell.account.themeFamilySaveError":
+    "No se pudo actualizar el tema. Inténtalo de nuevo.",
   "settingsShell.account.manage": "Gestionar",
   "settingsShell.account.name": "Nombre",
   "settingsShell.account.nameDescription":

package/src/app/i18n/catalogs/fr-FR.ts

@@ -1068,6 +1068,9 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.worked": "A travaillé",
   "tool.workedFor": "A travaillé pendant {{duration}}",
   "widget.chart": "Graphique",
+  "widget.chartActions": "Actions du graphique",
+  "widget.dataSources": "Sources de données",
+  "widget.tableActions": "Actions du tableau",
   "widget.dataChart": "Graphique de données",
   "widget.dataInsights": "Informations sur les données",
   "widget.dataTable": "Tableau de données",
@@ -2245,6 +2248,13 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsShell.account.languageAndRegion": "Langue et région",
   "settingsShell.account.languageDescription":
     "S’applique sur tous vos appareils.",
+  "settingsShell.account.appearance": "Apparence",
+  "settingsShell.account.themeFamily": "Famille de thème",
+  "settingsShell.account.themeFamilyAgentNative": "Agent-Native",
+  "settingsShell.account.themeFamilyOriginal":
+    "Couleurs d’origine de l’application",
+  "settingsShell.account.themeFamilySaveError":
+    "Impossible de mettre à jour le thème. Réessayez.",
   "settingsShell.account.manage": "Gérer",
   "settingsShell.account.name": "Nom",
   "settingsShell.account.nameDescription":