@agent-native/toolkit 0.214.0 → 0.217.0

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

@@ -1,4 +1,5 @@
 import { useT } from "@agent-native/core/client/i18n";
+import { DATA_WIDGET_MAX_CHART_POINTS } from "@agent-native/core/data-widgets";
 import { lazy, Suspense, useEffect, useState } from "react";
 
 import type {
@@ -27,6 +28,10 @@ export function DataChartWidget({
   const [mounted, setMounted] = useState(false);
   const contentHeight = chart.contentHeight;
   const contentPadding = chart.contentPadding ?? 0;
+  const hasOmittedRows =
+    chart.sampled === true ||
+    chart.truncated === true ||
+    chart.data.length > DATA_WIDGET_MAX_CHART_POINTS;
 
   useEffect(() => {
     setMounted(true);
@@ -69,6 +74,11 @@ export function DataChartWidget({
           <LazyDataChartRenderer chart={chart} />
         </Suspense>
       )}
+      {hasOmittedRows ? (
+        <p className="px-3 pb-3 text-xs text-muted-foreground" role="status">
+          {t("agentChat.widget.chartRowsOmitted")}
+        </p>
+      ) : null}
       <DataWidgetSourceChips sources={display?.sources ?? []} />
     </div>
   );

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

@@ -23,7 +23,7 @@ import { forwardRef } from "react";
 
 import { toast } from "../../../../hooks/use-toast.js";
 import type {
-  DataWidgetAction,
+  DataWidgetChartAction,
   DataWidgetActionIcon,
   DataWidgetDataSource,
   DataWidgetDisplay,
@@ -82,12 +82,15 @@ const WidgetActionLink = forwardRef<
     label: string;
     className: string;
     icon?: DataWidgetActionIcon;
+    iconOnly?: boolean;
   }
->(function WidgetActionLink({ href, label, className, icon }, ref) {
+>(function WidgetActionLink({ href, label, className, icon, iconOnly }, ref) {
   return (
     <a
       ref={ref}
       href={href}
+      aria-label={iconOnly ? label : undefined}
+      title={iconOnly ? label : undefined}
       onClick={(event) => {
         if (
           event.defaultPrevented ||
@@ -109,7 +112,7 @@ const WidgetActionLink = forwardRef<
       }}
       className={className}
     >
-      <span className="truncate">{label}</span>
+      <span className={iconOnly ? "sr-only" : "truncate"}>{label}</span>
       {icon === "explore" ? (
         <IconCompass aria-hidden="true" className="size-3.5 shrink-0" />
       ) : icon === "camera" ? (
@@ -144,7 +147,7 @@ export function DataWidgetDisplayControls({
   kind = "chart",
 }: {
   display?: DataWidgetDisplay;
-  chartActions?: DataWidgetAction[];
+  chartActions?: DataWidgetChartAction[];
   variant?: "primary" | "secondary";
   kind?: "chart" | "table";
 }) {
@@ -194,6 +197,13 @@ export function DataWidgetDisplayControls({
       key: action.id ?? `copy-${index}`,
     });
   }
+  const directActions = actions.filter(
+    (item): item is Extract<PreparedDisplayAction, { type: "link" }> =>
+      item.type === "link" && item.action.presentation === "icon",
+  );
+  const overflowActions = actions.filter(
+    (item) => item.type !== "link" || item.action.presentation !== "icon",
+  );
   const actionsLabel =
     kind === "table"
       ? t("agentChat.widget.tableActions", { defaultValue: "Table actions" })
@@ -213,7 +223,17 @@ export function DataWidgetDisplayControls({
           }
         />
       ) : null}
-      {actions.length > 0 ? (
+      {directActions.map((item) => (
+        <WidgetActionLink
+          key={item.key}
+          href={item.href}
+          label={item.action.label}
+          icon={item.action.icon}
+          iconOnly
+          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"
+        />
+      ))}
+      {overflowActions.length > 0 ? (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <button
@@ -226,7 +246,7 @@ export function DataWidgetDisplayControls({
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-            {actions.map((item) =>
+            {overflowActions.map((item) =>
               item.type === "copy" ? (
                 <DropdownMenuItem
                   key={item.key}

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

@@ -1523,6 +1523,7 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.workedFor": "عمل لمدة {{duration}}",
   "widget.chart": "مخطط",
   "widget.chartActions": "إجراءات المخطط",
+  "widget.chartRowsOmitted": "يعرض هذا المخطط بعض الصفوف المتاحة فقط.",
   "widget.dataSources": "مصادر البيانات",
   "widget.tableActions": "إجراءات الجدول",
   "widget.dataChart": "مخطط بيانات",

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

@@ -1069,6 +1069,8 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.workedFor": "{{duration}} verarbeitet",
   "widget.chart": "Diagramm",
   "widget.chartActions": "Diagrammaktionen",
+  "widget.chartRowsOmitted":
+    "Dieses Diagramm zeigt nur einen Teil der verfügbaren Zeilen.",
   "widget.dataSources": "Datenquellen",
   "widget.tableActions": "Tabellenaktionen",
   "widget.dataChart": "Datendiagramm",

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

@@ -1514,6 +1514,8 @@ const messages = {
   "tool.workedFor": "Worked for {{duration}}",
   "widget.chart": "Chart",
   "widget.chartActions": "Chart actions",
+  "widget.chartRowsOmitted":
+    "This chart shows only some of the available rows.",
   "widget.dataSources": "Data sources",
   "widget.tableActions": "Table actions",
   "widget.dataChart": "Data chart",

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

@@ -1064,6 +1064,8 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.workedFor": "Trabajó durante {{duration}}",
   "widget.chart": "Gráfico",
   "widget.chartActions": "Acciones del gráfico",
+  "widget.chartRowsOmitted":
+    "Este gráfico muestra solo algunas de las filas disponibles.",
   "widget.dataSources": "Fuentes de datos",
   "widget.tableActions": "Acciones de la tabla",
   "widget.dataChart": "Gráfico de datos",

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

@@ -1069,6 +1069,8 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.workedFor": "A travaillé pendant {{duration}}",
   "widget.chart": "Graphique",
   "widget.chartActions": "Actions du graphique",
+  "widget.chartRowsOmitted":
+    "Ce graphique n’affiche qu’une partie des lignes disponibles.",
   "widget.dataSources": "Sources de données",
   "widget.tableActions": "Actions du tableau",
   "widget.dataChart": "Graphique de données",

package/src/app/i18n/catalogs/hi-IN.ts

@@ -1492,6 +1492,7 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.workedFor": "{{duration}} तक काम किया",
   "widget.chart": "चार्ट",
   "widget.chartActions": "चार्ट कार्रवाइयाँ",
+  "widget.chartRowsOmitted": "यह चार्ट उपलब्ध पंक्तियों में से केवल कुछ दिखाता है।",
   "widget.dataSources": "डेटा स्रोत",
   "widget.tableActions": "टेबल कार्रवाइयाँ",
   "widget.dataChart": "डेटा चार्ट",

package/src/app/i18n/catalogs/ja-JP.ts

@@ -1537,6 +1537,8 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.workedFor": "{{duration}} 作業しました",
   "widget.chart": "チャート",
   "widget.chartActions": "チャート操作",
+  "widget.chartRowsOmitted":
+    "このグラフには、利用可能な行の一部のみが表示されます。",
   "widget.dataSources": "データソース",
   "widget.tableActions": "テーブル操作",
   "widget.dataChart": "データチャート",

package/src/app/i18n/catalogs/ko-KR.ts

@@ -1511,6 +1511,7 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.workedFor": "{{duration}} 동안 작업함",
   "widget.chart": "차트",
   "widget.chartActions": "차트 작업",
+  "widget.chartRowsOmitted": "이 차트에는 사용 가능한 행 중 일부만 표시됩니다.",
   "widget.dataSources": "데이터 소스",
   "widget.tableActions": "표 작업",
   "widget.dataChart": "데이터 차트",

package/src/app/i18n/catalogs/pt-BR.ts

@@ -1056,6 +1056,8 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.workedFor": "Trabalhou por {{duration}}",
   "widget.chart": "Gráfico",
   "widget.chartActions": "Ações do gráfico",
+  "widget.chartRowsOmitted":
+    "Este gráfico mostra apenas algumas das linhas disponíveis.",
   "widget.dataSources": "Fontes de dados",
   "widget.tableActions": "Ações da tabela",
   "widget.dataChart": "Gráfico de dados",

package/src/app/i18n/catalogs/zh-CN.ts

@@ -1420,6 +1420,7 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.workedFor": "处理了 {{duration}}",
   "widget.chart": "图表",
   "widget.chartActions": "图表操作",
+  "widget.chartRowsOmitted": "此图表仅显示部分可用行。",
   "widget.dataSources": "数据来源",
   "widget.tableActions": "表格操作",
   "widget.dataChart": "数据图表",

package/src/app/i18n/catalogs/zh-TW.ts

@@ -1425,6 +1425,7 @@ const messages: ToolkitAgentChatTranslation = {
   "tool.workedFor": "處理了 {{duration}}",
   "widget.chart": "圖表",
   "widget.chartActions": "圖表操作",
+  "widget.chartRowsOmitted": "此圖表僅顯示部分可用資料列。",
   "widget.dataSources": "資料來源",
   "widget.tableActions": "表格操作",
   "widget.dataChart": "資料圖表",

package/src/app/onboarding/GettingStartedCard.tsx

@@ -0,0 +1,203 @@
+import { useOnboardingChecklist } from "@agent-native/core/client/onboarding/use-onboarding-checklist";
+import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import type { ComponentType, ReactNode } from "react";
+
+import { Button } from "../../ui/button.js";
+import { Progress } from "../../ui/progress.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { cn } from "../../utils.js";
+
+export interface GettingStartedLabels {
+  title: string;
+  progress: (completeCount: number, totalCount: number) => string;
+  /** Read by screen readers on a finished row; the check mark is decorative. */
+  completed: string;
+  collapse: string;
+  expand: string;
+  loadError: string;
+  retry: string;
+}
+
+export interface GettingStartedLinkProps {
+  to: string;
+  className?: string;
+  children: ReactNode;
+}
+
+function NativeLink({ to, className, children }: GettingStartedLinkProps) {
+  return (
+    <a href={to} className={className}>
+      {children}
+    </a>
+  );
+}
+
+export interface GettingStartedCardProps {
+  /** Name the steps were registered under with `registerOnboardingStep({ checklist })`. */
+  checklist: string;
+  labels: GettingStartedLabels;
+  /** Localized row titles by step id; a step without one shows its registered title. */
+  stepTitles?: Record<string, string>;
+  /** Router link for in-app rows so a click keeps the SPA and Cmd/Ctrl-click opens a tab. */
+  LinkComponent?: ComponentType<GettingStartedLinkProps>;
+  /** Number of rows to reserve while the first answer loads. */
+  expectedSteps?: number;
+  className?: string;
+}
+
+/**
+ * Progress checklist pinned to the app sidebar. Each app registers its own
+ * steps on the onboarding registry; the card only renders what the server
+ * derived. It renders nothing once every step is done.
+ */
+export function GettingStartedCard({
+  checklist,
+  labels,
+  stepTitles,
+  LinkComponent = NativeLink,
+  expectedSteps = 6,
+  className,
+}: GettingStartedCardProps) {
+  const {
+    steps,
+    completeCount,
+    totalCount,
+    dismissed,
+    collapsed,
+    status,
+    refresh,
+    setCollapsed,
+  } = useOnboardingChecklist(checklist);
+
+  const frame = cn(
+    "overflow-hidden rounded-[14px] border border-border bg-card text-card-foreground shadow-sm",
+    className,
+  );
+
+  if (status === "loading") {
+    return (
+      <div className={frame} aria-hidden>
+        <div className="space-y-3 px-4 py-3">
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="h-1.5 w-full rounded-full" />
+        </div>
+        <div className="border-t border-border">
+          {Array.from({ length: expectedSteps }, (_, index) => (
+            <div key={index} className="flex min-h-12 items-center gap-3 px-4">
+              <Skeleton className="size-4 rounded-full" />
+              <Skeleton className="h-3.5 w-28" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (status === "error") {
+    return (
+      <div
+        role="alert"
+        className={cn(
+          frame,
+          "flex items-center justify-between gap-2 px-4 py-3",
+        )}
+      >
+        <span className="text-[13px] text-muted-foreground">
+          {labels.loadError}
+        </span>
+        <Button
+          type="button"
+          variant="outline"
+          size="xs"
+          onClick={() => void refresh()}
+        >
+          {labels.retry}
+        </Button>
+      </div>
+    );
+  }
+
+  if (dismissed || totalCount === 0 || completeCount === totalCount) {
+    return null;
+  }
+
+  const progressText = labels.progress(completeCount, totalCount);
+  const ToggleIcon = collapsed ? IconChevronUp : IconChevronDown;
+
+  return (
+    <section className={frame} aria-label={labels.title}>
+      <div className="space-y-3 px-4 py-3">
+        <div className="flex items-center justify-between gap-2">
+          <h2 className="text-base font-semibold leading-5">{labels.title}</h2>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-6"
+            aria-label={collapsed ? labels.expand : labels.collapse}
+            aria-expanded={!collapsed}
+            onClick={() => void setCollapsed(!collapsed)}
+          >
+            <ToggleIcon className="size-4" />
+          </Button>
+        </div>
+        <Progress
+          value={(completeCount / totalCount) * 100}
+          className="h-1.5 bg-muted"
+          aria-label={progressText}
+        />
+      </div>
+      {collapsed ? null : (
+        <ul className="border-t border-border">
+          {steps.map((step) => {
+            const rowClass =
+              "flex min-h-12 items-center gap-3 px-4 text-[13px]";
+            const content = (
+              <>
+                <span
+                  aria-hidden
+                  className={cn(
+                    "flex size-4 shrink-0 items-center justify-center rounded-full border",
+                    step.complete
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-muted-foreground/60",
+                  )}
+                >
+                  {step.complete ? <IconCheck className="size-3" /> : null}
+                </span>
+                <span
+                  className={cn(
+                    "min-w-0 flex-1 truncate",
+                    step.complete && "text-muted-foreground",
+                  )}
+                >
+                  {stepTitles?.[step.id] ?? step.title}
+                </span>
+                {step.complete ? (
+                  <span className="sr-only">{labels.completed}</span>
+                ) : null}
+              </>
+            );
+            return (
+              <li key={step.id}>
+                {step.href ? (
+                  <LinkComponent
+                    to={step.href}
+                    className={cn(
+                      rowClass,
+                      "hover:bg-accent/60 focus-visible:bg-accent/60 focus-visible:outline-none",
+                    )}
+                  >
+                    {content}
+                  </LinkComponent>
+                ) : (
+                  <div className={rowClass}>{content}</div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  );
+}

package/src/app/onboarding/index.ts

@@ -1,4 +1,5 @@
 export * from "./FirstRunOnboarding.js";
+export * from "./GettingStartedCard.js";
 export * from "./NewWorkspaceAppFlow.js";
 export * from "./OnboardingBanner.js";
 export * from "./OnboardingPanel.js";

package/src/app/providers/AppProviders.tsx

@@ -39,6 +39,7 @@ import {
   type AppShellSkeletonLayout,
 } from "../shared/AppShellSkeleton.js";
 import { ClientOnly } from "../shared/ClientOnly.js";
+import { ConsentBanner } from "../shared/ConsentBanner.js";
 import { EnvironmentBadge } from "../shared/EnvironmentBadge.js";
 import { RouteTransitionIndicator } from "../shared/RouteTransitionIndicator.js";
 import { RuntimeConfigNotice } from "../shared/RuntimeConfigNotice.js";
@@ -436,12 +437,17 @@ function ProvidersInner({
   settingsShortcut: boolean;
   children: React.ReactNode;
 }) {
+  // The banner reads the app's locale, so it sits inside the same provider.
   const localizedChildren =
     i18n === false ? (
-      children
+      <>
+        {children}
+        {ownsDocument ? <ConsentBanner /> : null}
+      </>
     ) : (
       <AgentNativeI18nProvider {...(i18n ?? {})}>
         {children}
+        {ownsDocument ? <ConsentBanner /> : null}
       </AgentNativeI18nProvider>
     );
 

package/src/app/settings/AccountSettingsCard.spec.tsx

@@ -148,6 +148,7 @@ vi.mock("@agent-native/core/client/i18n", () => ({
       "settings.privacyDeletionDescription":
         "This records a deletion request; it does not delete data immediately. An administrator will verify your identity and complete the request under the deployment's retention and legal obligations.",
       "settings.privacyDocsLink": "Read privacy and data rights",
+      "consentBanner.cookieSettings": "Cookie settings",
       "common.cancel": "Cancel",
       "agentChat.auth.logOut": "Log out",
     }[key] ??
@@ -155,6 +156,11 @@ vi.mock("@agent-native/core/client/i18n", () => ({
     key,
 }));
 
+const openConsentSettingsMock = vi.hoisted(() => vi.fn());
+vi.mock("@agent-native/core/client/consent", () => ({
+  openConsentSettings: openConsentSettingsMock,
+}));
+
 vi.mock("./SchedulingTimezoneField.js", () => ({
   SchedulingTimezoneField: () => <div data-testid="timezone" />,
 }));
@@ -454,4 +460,29 @@ describe("AccountSettingsForm name editing", () => {
       requestType: "deletion",
     });
   });
+
+  it("reopens the cookie banner from Privacy & data", async () => {
+    await act(async () => {
+      root.render(
+        <TooltipProvider>
+          <AccountSettingsForm />
+        </TooltipProvider>,
+      );
+    });
+    act(() => {
+      Array.from(
+        container.querySelectorAll<HTMLButtonElement>("#privacy-data button"),
+      )
+        .find((button) => button.textContent?.trim() === "Manage")
+        ?.click();
+    });
+
+    act(() => {
+      Array.from(document.querySelectorAll<HTMLButtonElement>("button"))
+        .find((button) => button.textContent?.trim() === "Cookie settings")
+        ?.click();
+    });
+
+    expect(openConsentSettingsMock).toHaveBeenCalledTimes(1);
+  });
 });

package/src/app/settings/AccountSettingsCard.tsx

@@ -1,3 +1,4 @@
+import { openConsentSettings } from "@agent-native/core/client/consent";
 import {
   useActionMutation,
   useActionQuery,
@@ -579,6 +580,13 @@ function PrivacySettings() {
                   {t("settings.privacyRequestError")}
                 </p>
               )}
+              <button
+                type="button"
+                onClick={openConsentSettings}
+                className="block text-xs font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
+              >
+                {t("consentBanner.cookieSettings")}
+              </button>
               <a
                 href={docsUrl("privacy-and-data-rights")}
                 target="_blank"

package/src/app/settings/index.ts

@@ -73,6 +73,7 @@ export {
   type SettingsGroupProps,
   type SettingsRowProps,
 } from "./SettingsRow.js";
+export { ThemeFamilySettings } from "./account/ThemeFamilySettings.js";
 export {
   SettingsSection,
   SettingsSurfaceProvider,