@agent-native/toolkit 0.216.0 → 0.218.0

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

@@ -480,6 +480,9 @@ const messages: ToolkitAgentChatTranslation = {
   "history.ownedBy": "Eigentümer: {{name}}",
   "history.accessDirect": "Mit dir geteilt",
   "history.accessOrganization": "Mit deiner Organisation geteilt",
+  "history.copyLink": "Link kopieren",
+  "history.linkCopied": "Link kopiert",
+  "history.copyLinkFailed": "Link konnte nicht kopiert werden",
   "integrations.availableSection": "Verfügbare Integrationen",
   "integrations.connectedSection": "Verbunden",
   "integrations.goToApiKeys": "Zu den API-Schlüsseln",

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

@@ -769,6 +769,9 @@ const messages = {
   "history.ownedBy": "Owner: {{name}}",
   "history.accessDirect": "Shared with you",
   "history.accessOrganization": "Shared with your organization",
+  "history.copyLink": "Copy link",
+  "history.linkCopied": "Link copied",
+  "history.copyLinkFailed": "Couldn't copy the link",
   "integrations.availableSection": "Available integrations",
   "integrations.connectedSection": "Connected",
   "integrations.goToApiKeys": "Go to API keys",

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

@@ -479,6 +479,9 @@ const messages: ToolkitAgentChatTranslation = {
   "history.ownedBy": "Propietario: {{name}}",
   "history.accessDirect": "Compartidos contigo",
   "history.accessOrganization": "Compartido con tu organización",
+  "history.copyLink": "Copiar enlace",
+  "history.linkCopied": "Enlace copiado",
+  "history.copyLinkFailed": "No se pudo copiar el enlace",
   "integrations.availableSection": "Integraciones disponibles",
   "integrations.connectedSection": "Conectado",
   "integrations.goToApiKeys": "Ir a claves de API",

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

@@ -478,6 +478,9 @@ const messages: ToolkitAgentChatTranslation = {
   "history.ownedBy": "Propriétaire : {{name}}",
   "history.accessDirect": "Partagés avec vous",
   "history.accessOrganization": "Partagé avec votre organisation",
+  "history.copyLink": "Copier le lien",
+  "history.linkCopied": "Lien copié",
+  "history.copyLinkFailed": "Impossible de copier le lien",
   "integrations.availableSection": "Intégrations disponibles",
   "integrations.connectedSection": "Connecté",
   "integrations.goToApiKeys": "Aller aux clés API",

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

@@ -759,6 +759,9 @@ const messages: ToolkitAgentChatTranslation = {
   "history.ownedBy": "मालिक: {{name}}",
   "history.accessDirect": "आपके साथ साझा",
   "history.accessOrganization": "आपके संगठन के साथ साझा",
+  "history.copyLink": "लिंक कॉपी करें",
+  "history.linkCopied": "लिंक कॉपी हो गया",
+  "history.copyLinkFailed": "लिंक कॉपी नहीं हो सका",
   "integrations.availableSection": "उपलब्ध इंटीग्रेशन",
   "integrations.connectedSection": "कनेक्ट किए गए",
   "integrations.goToApiKeys": "API कुंजियों पर जाएं",

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

@@ -783,6 +783,9 @@ const messages: ToolkitAgentChatTranslation = {
   "history.ownedBy": "所有者: {{name}}",
   "history.accessDirect": "共有されたチャット",
   "history.accessOrganization": "組織と共有",
+  "history.copyLink": "リンクをコピー",
+  "history.linkCopied": "リンクをコピーしました",
+  "history.copyLinkFailed": "リンクをコピーできませんでした",
   "integrations.availableSection": "利用可能な連携",
   "integrations.connectedSection": "接続済み",
   "integrations.goToApiKeys": "API キーへ移動",

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

@@ -762,6 +762,9 @@ const messages: ToolkitAgentChatTranslation = {
   "history.ownedBy": "소유자: {{name}}",
   "history.accessDirect": "나와 공유된 채팅",
   "history.accessOrganization": "조직과 공유됨",
+  "history.copyLink": "링크 복사",
+  "history.linkCopied": "링크를 복사했어요",
+  "history.copyLinkFailed": "링크를 복사하지 못했어요",
   "integrations.availableSection": "사용 가능한 연동",
   "integrations.connectedSection": "연결됨",
   "integrations.goToApiKeys": "API 키로 이동",

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

@@ -473,6 +473,9 @@ const messages: ToolkitAgentChatTranslation = {
   "history.ownedBy": "Proprietário: {{name}}",
   "history.accessDirect": "Compartilhados com você",
   "history.accessOrganization": "Compartilhado com sua organização",
+  "history.copyLink": "Copiar link",
+  "history.linkCopied": "Link copiado",
+  "history.copyLinkFailed": "Não foi possível copiar o link",
   "integrations.availableSection": "Integrações disponíveis",
   "integrations.connectedSection": "Conectado",
   "integrations.goToApiKeys": "Ir para chaves de API",

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

@@ -726,6 +726,9 @@ const messages: ToolkitAgentChatTranslation = {
   "history.ownedBy": "所有者：{{name}}",
   "history.accessDirect": "与您共享",
   "history.accessOrganization": "与您的组织共享",
+  "history.copyLink": "复制链接",
+  "history.linkCopied": "链接已复制",
+  "history.copyLinkFailed": "无法复制链接",
   "integrations.availableSection": "可用集成",
   "integrations.connectedSection": "已连接",
   "integrations.goToApiKeys": "前往 API 密钥",

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

@@ -728,6 +728,9 @@ const messages: ToolkitAgentChatTranslation = {
   "history.ownedBy": "擁有者：{{name}}",
   "history.accessDirect": "與您共用",
   "history.accessOrganization": "與您的組織共用",
+  "history.copyLink": "複製連結",
+  "history.linkCopied": "已複製連結",
+  "history.copyLinkFailed": "無法複製連結",
   "integrations.availableSection": "可用整合",
   "integrations.connectedSection": "已連線",
   "integrations.goToApiKeys": "前往 API 金鑰",

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,