@agent-native/toolkit 0.212.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": "جدول بيانات",
@@ -2157,6 +2160,9 @@ const messages: ToolkitAgentChatTranslation = {
     "معيّن. يتيح لتطبيقات مساحة العمل هذه التحقق من بعضها.",
   "settingsOrg.auth.sharedSecretNotSet":
     "غير معيّن. يتيح لتطبيقات مساحة العمل هذه التحقق من بعضها.",
+  "settingsOrg.auth.memberDelegation": "تفويض هوية أعضاء المؤسسة",
+  "settingsOrg.auth.memberDelegationHelp":
+    "يمكن للتطبيقات المتصلة التي تستخدم السر المشترك لهذه المؤسسة ادّعاء هوية أي عضو حالي عند الاتصال بهذا التطبيق. يتحقق هذا التطبيق من قائمة الأعضاء الحالية ويقيّد الوصول المفوّض إلى المؤسسة بصلاحيات مستوى العضو.",
   "settingsOrg.auth.secretNotSetValue": "غير معيّن",
   "settingsOrg.auth.manage": "إدارة",
   "settingsOrg.auth.reveal": "إظهار",
@@ -2243,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",
@@ -2135,6 +2138,10 @@ const messages: ToolkitAgentChatTranslation = {
     "Festgelegt. Damit können sich die Apps in diesem Workspace gegenseitig verifizieren.",
   "settingsOrg.auth.sharedSecretNotSet":
     "Nicht festgelegt. Damit können sich die Apps in diesem Workspace gegenseitig verifizieren.",
+  "settingsOrg.auth.memberDelegation":
+    "Identitätsdelegierung für Organisationsmitglieder",
+  "settingsOrg.auth.memberDelegationHelp":
+    "Verbundene Apps mit diesem gemeinsamen Organisations-Secret können beim Aufruf dieser App die Identität eines beliebigen aktuellen Mitglieds annehmen. Diese App prüft die aktuelle Mitgliederliste und beschränkt den delegierten Organisationszugriff auf Berechtigungen der Mitgliedsrolle.",
   "settingsOrg.auth.secretNotSetValue": "Nicht festgelegt",
   "settingsOrg.auth.manage": "Verwalten",
   "settingsOrg.auth.reveal": "Anzeigen",
@@ -2200,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",
@@ -2030,6 +2033,9 @@ const messages = {
     "Set. Lets the apps in this workspace verify each other.",
   "settingsOrg.auth.sharedSecretNotSet":
     "Not set. Lets the apps in this workspace verify each other.",
+  "settingsOrg.auth.memberDelegation": "Org-member identity delegation",
+  "settingsOrg.auth.memberDelegationHelp":
+    "Connected apps with this shared organization secret can claim any current member's identity when calling this app. This app checks the live member roster and limits delegated organization access to member-level permissions.",
   "settingsOrg.auth.secretNotSetValue": "Not set",
   "settingsOrg.auth.manage": "Manage",
   "settingsOrg.auth.reveal": "Reveal",
@@ -2092,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":