@agent-native/toolkit 0.209.1 → 0.209.2-nightly-20261016005836

package/src/app/feedback/ReportProblemDialog.tsx

@@ -0,0 +1,212 @@
+import { sendToAgentChat } from "@agent-native/core/client/agent-chat";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  countRecorderEventsByType,
+  formatProblemReportSummary,
+  formatRecorderEvent,
+  isFailedRecorderEvent,
+  uploadProblemReport,
+} from "@agent-native/core/client/problem-report";
+import {
+  recorder,
+  type RecorderEvent,
+  type RecorderReport,
+} from "@agent-native/core/client/recorder";
+import { writeClipboardText } from "@agent-native/toolkit/clipboard";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+} from "@agent-native/toolkit/ui/dialog";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+import { cn } from "@agent-native/toolkit/utils";
+import { useRef, useState } from "react";
+
+import { useHasAgentChat } from "../chat/agent-chat-presence.js";
+
+const PREVIEW_FAILURES = 3;
+const PREVIEW_EVENTS = 5;
+const PREVIEW_DATA_CHARS = 80;
+
+type Step =
+  | { kind: "preview" }
+  | { kind: "attaching" }
+  | { kind: "notAttached"; message?: string }
+  | { kind: "copy"; summary: string; copied: boolean };
+
+export interface ReportProblemDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ReportProblemDialog({
+  open,
+  onOpenChange,
+}: ReportProblemDialogProps) {
+  const [attaching, setAttaching] = useState(false);
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!attaching) onOpenChange(next);
+      }}
+    >
+      <DialogContent aria-describedby={undefined} className="max-w-md gap-4">
+        <ReportProblemBody
+          onAttachingChange={setAttaching}
+          onClose={() => onOpenChange(false)}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ReportProblemBody({
+  onAttachingChange,
+  onClose,
+}: {
+  onAttachingChange: (attaching: boolean) => void;
+  onClose: () => void;
+}) {
+  const t = useT();
+  const hasAgentChat = useHasAgentChat();
+  const [preview] = useState(() => recorder.report());
+  const [step, setStep] = useState<Step>({ kind: "preview" });
+  // Built once on consent: a retry re-sends this report instead of firing the
+  // recorder's onReport destinations a second time.
+  const consentedReport = useRef<RecorderReport | null>(null);
+
+  const copySummary = async (summary: string) => {
+    const copied = await writeClipboardText(summary);
+    setStep({ kind: "copy", summary, copied });
+  };
+
+  const attach = async () => {
+    setStep({ kind: "attaching" });
+    onAttachingChange(true);
+    const report = (consentedReport.current ??= recorder.report({
+      reason: "user",
+    }));
+    const upload = await uploadProblemReport(report);
+    onAttachingChange(false);
+    if (upload.status === "failed") {
+      setStep({ kind: "notAttached", message: upload.message });
+      return;
+    }
+    const summary = formatProblemReportSummary(report, upload.ref);
+    if (!hasAgentChat) {
+      await copySummary(summary);
+      return;
+    }
+    sendToAgentChat({
+      message: t("agentChat.reportProblem.agentMessage"),
+      context: summary,
+      submit: true,
+      openSidebar: true,
+    });
+    onClose();
+  };
+
+  const attaching = step.kind === "attaching";
+  const primaryLabel =
+    step.kind === "attaching"
+      ? t("agentChat.reportProblem.attaching")
+      : step.kind === "notAttached"
+        ? t("agentChat.common.retry")
+        : step.kind === "copy"
+          ? step.copied
+            ? t("agentChat.common.copied")
+            : t("agentChat.recovery.copyFailed")
+          : hasAgentChat
+            ? t("agentChat.reportProblem.send")
+            : t("agentChat.reportProblem.copy");
+
+  return (
+    <>
+      <DialogTitle className="text-base">
+        {t("agentChat.reportProblem.title", { count: preview.windowSeconds })}
+      </DialogTitle>
+      <ReportPreview report={preview} />
+      {step.kind === "notAttached" ? (
+        <p role="alert" className="text-sm text-destructive">
+          {t("agentChat.reportProblem.notAttached")}
+          {step.message ? ` ${step.message}` : null}
+        </p>
+      ) : null}
+      <DialogFooter>
+        <Button
+          type="button"
+          variant="outline"
+          disabled={attaching}
+          onClick={onClose}
+        >
+          {t("agentChat.common.cancel")}
+        </Button>
+        <Button
+          type="button"
+          disabled={attaching}
+          onClick={() =>
+            void (step.kind === "copy" ? copySummary(step.summary) : attach())
+          }
+        >
+          {attaching ? <Spinner aria-hidden /> : null}
+          {primaryLabel}
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+function ReportPreview({ report }: { report: RecorderReport }) {
+  const t = useT();
+  if (report.events.length === 0) {
+    return (
+      <p className="rounded-md border border-border px-3 py-2 text-xs text-muted-foreground">
+        {t("agentChat.reportProblem.noEvents")}
+      </p>
+    );
+  }
+  const counts = Object.entries(countRecorderEventsByType(report.events))
+    .map(([type, count]) => `${type} ${count}`)
+    .join(" · ");
+  const failures = report.events
+    .filter(isFailedRecorderEvent)
+    .slice(0, PREVIEW_FAILURES);
+  return (
+    <div className="overflow-hidden rounded-md border border-border font-mono text-xs">
+      <p className="border-b border-border px-3 py-2 text-foreground">
+        {counts}
+      </p>
+      {failures.length > 0 ? (
+        <EventLines
+          events={failures}
+          className="border-b border-border text-destructive"
+        />
+      ) : null}
+      <EventLines
+        events={report.events.slice(0, PREVIEW_EVENTS)}
+        className="text-muted-foreground"
+      />
+    </div>
+  );
+}
+
+function EventLines({
+  events,
+  className,
+}: {
+  events: RecorderEvent[];
+  className: string;
+}) {
+  return (
+    <ul className={cn("space-y-1 px-3 py-2", className)}>
+      {events.map((event, index) => (
+        <li key={index} className="truncate">
+          {formatRecorderEvent(event, PREVIEW_DATA_CHARS)}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/app/feedback/index.ts

@@ -7,3 +7,7 @@ export {
   type SubmitFeedbackFormOptions,
 } from "./FeedbackButton.js";
 export { FeedbackButton, type FeedbackButtonProps } from "./FeedbackButton.js";
+export {
+  ReportProblemButton,
+  type ReportProblemButtonProps,
+} from "./ReportProblemButton.js";

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

@@ -3243,6 +3243,26 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsSubAgents.close": "إغلاق",
   "observability.insights.rawTrace":
     "التتبع الخام (كل الخطوات مع المدخلات والمخرجات)",
+  "reportProblem.menuItem": "الإبلاغ عن مشكلة",
+  "reportProblem.title_zero":
+    "هل تريد إرفاق ما فعله التطبيق خلال آخر {{count}} ثانية؟",
+  "reportProblem.title_one":
+    "هل تريد إرفاق ما فعله التطبيق خلال آخر {{count}} ثانية؟",
+  "reportProblem.title_two":
+    "هل تريد إرفاق ما فعله التطبيق خلال آخر {{count}} ثانيتين؟",
+  "reportProblem.title_few":
+    "هل تريد إرفاق ما فعله التطبيق خلال آخر {{count}} ثوانٍ؟",
+  "reportProblem.title_many":
+    "هل تريد إرفاق ما فعله التطبيق خلال آخر {{count}} ثانيةً؟",
+  "reportProblem.title_other":
+    "هل تريد إرفاق ما فعله التطبيق خلال آخر {{count}} ثانية؟",
+  "reportProblem.noEvents": "لم يُسجَّل شيء بعد.",
+  "reportProblem.send": "إرسال إلى الوكيل",
+  "reportProblem.copy": "نسخ تقرير المشكلة",
+  "reportProblem.attaching": "جارٍ الإرفاق…",
+  "reportProblem.notAttached": "لم يتم إرفاق التقرير.",
+  "reportProblem.agentMessage":
+    "حدث خطأ ما في التطبيق. استخدم تقرير المشكلة المرفق لشرح ما حدث.",
 };
 
 export default messages;

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

@@ -3261,6 +3261,18 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsSubAgents.close": "Schließen",
   "observability.insights.rawTrace":
     "Rohdaten-Trace (alle Spans mit Ein- und Ausgaben)",
+  "reportProblem.menuItem": "Problem melden",
+  "reportProblem.title_one":
+    "Anhängen, was die App in der letzten {{count}} Sekunde getan hat?",
+  "reportProblem.title_other":
+    "Anhängen, was die App in den letzten {{count}} Sekunden getan hat?",
+  "reportProblem.noEvents": "Noch nichts aufgezeichnet.",
+  "reportProblem.send": "An Agent senden",
+  "reportProblem.copy": "Problembericht kopieren",
+  "reportProblem.attaching": "Wird angehängt…",
+  "reportProblem.notAttached": "Der Bericht wurde nicht angehängt.",
+  "reportProblem.agentMessage":
+    "In der App ist etwas schiefgelaufen. Erkläre anhand des angehängten Problemberichts, was passiert ist.",
 };
 
 export default messages;

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

@@ -3113,6 +3113,18 @@ const messages = {
   "settingsSubAgents.close": "Close",
   "observability.insights.rawTrace":
     "Raw trace (every span, with inputs and outputs)",
+  "reportProblem.menuItem": "Report a problem",
+  "reportProblem.title_one":
+    "Attach what the app did in the last {{count}} second?",
+  "reportProblem.title_other":
+    "Attach what the app did in the last {{count}} seconds?",
+  "reportProblem.noEvents": "Nothing recorded yet.",
+  "reportProblem.send": "Send to agent",
+  "reportProblem.copy": "Copy problem report",
+  "reportProblem.attaching": "Attaching…",
+  "reportProblem.notAttached": "The report was not attached.",
+  "reportProblem.agentMessage":
+    "Something went wrong in the app. Use the attached problem report to explain what happened.",
 } as const;
 
 export default messages;

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

@@ -3283,6 +3283,20 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsSubAgents.close": "Cerrar",
   "observability.insights.rawTrace":
     "Traza completa (todos los spans, con entradas y salidas)",
+  "reportProblem.menuItem": "Informar de un problema",
+  "reportProblem.title_one":
+    "¿Adjuntar lo que hizo la app en el último {{count}} segundo?",
+  "reportProblem.title_many":
+    "¿Adjuntar lo que hizo la app en los últimos {{count}} segundos?",
+  "reportProblem.title_other":
+    "¿Adjuntar lo que hizo la app en los últimos {{count}} segundos?",
+  "reportProblem.noEvents": "Todavía no hay nada registrado.",
+  "reportProblem.send": "Enviar al agente",
+  "reportProblem.copy": "Copiar informe del problema",
+  "reportProblem.attaching": "Adjuntando…",
+  "reportProblem.notAttached": "El informe no se adjuntó.",
+  "reportProblem.agentMessage":
+    "Algo salió mal en la app. Usa el informe del problema adjunto para explicar qué pasó.",
 };
 
 export default messages;

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

@@ -3316,6 +3316,20 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsSubAgents.close": "Fermer",
   "observability.insights.rawTrace":
     "Trace brute (tous les spans, avec entrées et sorties)",
+  "reportProblem.menuItem": "Signaler un problème",
+  "reportProblem.title_one":
+    "Joindre ce que l'app a fait au cours de la dernière {{count}} seconde ?",
+  "reportProblem.title_many":
+    "Joindre ce que l'app a fait au cours des {{count}} dernières secondes ?",
+  "reportProblem.title_other":
+    "Joindre ce que l'app a fait au cours des {{count}} dernières secondes ?",
+  "reportProblem.noEvents": "Rien n'a encore été enregistré.",
+  "reportProblem.send": "Envoyer à l'agent",
+  "reportProblem.copy": "Copier le rapport de problème",
+  "reportProblem.attaching": "Ajout en cours…",
+  "reportProblem.notAttached": "Le rapport n'a pas été joint.",
+  "reportProblem.agentMessage":
+    "Un problème est survenu dans l'app. Utilisez le rapport de problème joint pour expliquer ce qui s'est passé.",
 };
 
 export default messages;

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

@@ -3044,6 +3044,18 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsSubAgents.connectTitle": "{{name}} कनेक्ट करें",
   "settingsSubAgents.close": "बंद करें",
   "observability.insights.rawTrace": "रॉ ट्रेस (हर स्पैन, इनपुट और आउटपुट के साथ)",
+  "reportProblem.menuItem": "समस्या की रिपोर्ट करें",
+  "reportProblem.title_one":
+    "पिछले {{count}} सेकंड में ऐप ने जो किया, क्या उसे संलग्न करें?",
+  "reportProblem.title_other":
+    "पिछले {{count}} सेकंड में ऐप ने जो किया, क्या उसे संलग्न करें?",
+  "reportProblem.noEvents": "अभी तक कुछ रिकॉर्ड नहीं हुआ।",
+  "reportProblem.send": "एजेंट को भेजें",
+  "reportProblem.copy": "समस्या रिपोर्ट कॉपी करें",
+  "reportProblem.attaching": "संलग्न किया जा रहा है…",
+  "reportProblem.notAttached": "रिपोर्ट संलग्न नहीं हुई।",
+  "reportProblem.agentMessage":
+    "ऐप में कुछ गड़बड़ हो गई। संलग्न समस्या रिपोर्ट से बताइए कि क्या हुआ।",
 };
 
 export default messages;

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

@@ -3111,6 +3111,16 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsSubAgents.connectTitle": "{{name}} を接続",
   "settingsSubAgents.close": "閉じる",
   "observability.insights.rawTrace": "生のトレース（すべてのスパンと入出力）",
+  "reportProblem.menuItem": "問題を報告",
+  "reportProblem.title_other":
+    "過去 {{count}} 秒間のアプリの動作を添付しますか？",
+  "reportProblem.noEvents": "まだ記録はありません。",
+  "reportProblem.send": "エージェントに送信",
+  "reportProblem.copy": "問題レポートをコピー",
+  "reportProblem.attaching": "添付中…",
+  "reportProblem.notAttached": "レポートは添付されませんでした。",
+  "reportProblem.agentMessage":
+    "アプリで問題が発生しました。添付の問題レポートをもとに、何が起きたのか説明してください。",
 };
 
 export default messages;

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

@@ -3060,6 +3060,16 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsSubAgents.connectTitle": "{{name}} 연결",
   "settingsSubAgents.close": "닫기",
   "observability.insights.rawTrace": "원시 트레이스 (모든 스팬과 입력/출력)",
+  "reportProblem.menuItem": "문제 신고",
+  "reportProblem.title_other":
+    "최근 {{count}}초 동안 앱이 한 작업을 첨부할까요?",
+  "reportProblem.noEvents": "아직 기록된 내용이 없습니다.",
+  "reportProblem.send": "에이전트에게 보내기",
+  "reportProblem.copy": "문제 보고서 복사",
+  "reportProblem.attaching": "첨부하는 중…",
+  "reportProblem.notAttached": "보고서가 첨부되지 않았습니다.",
+  "reportProblem.agentMessage":
+    "앱에 문제가 생겼습니다. 첨부된 문제 보고서를 바탕으로 무슨 일이 있었는지 설명해 주세요.",
 };
 
 export default messages;

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

@@ -3275,6 +3275,20 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsSubAgents.close": "Fechar",
   "observability.insights.rawTrace":
     "Trace bruto (todos os spans, com entradas e saídas)",
+  "reportProblem.menuItem": "Relatar um problema",
+  "reportProblem.title_one":
+    "Anexar o que o app fez no último {{count}} segundo?",
+  "reportProblem.title_many":
+    "Anexar o que o app fez nos últimos {{count}} segundos?",
+  "reportProblem.title_other":
+    "Anexar o que o app fez nos últimos {{count}} segundos?",
+  "reportProblem.noEvents": "Nada registrado ainda.",
+  "reportProblem.send": "Enviar ao agente",
+  "reportProblem.copy": "Copiar relatório do problema",
+  "reportProblem.attaching": "Anexando…",
+  "reportProblem.notAttached": "O relatório não foi anexado.",
+  "reportProblem.agentMessage":
+    "Algo deu errado no app. Use o relatório do problema anexado para explicar o que aconteceu.",
 };
 
 export default messages;

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

@@ -2825,6 +2825,15 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsSubAgents.connectTitle": "连接 {{name}}",
   "settingsSubAgents.close": "关闭",
   "observability.insights.rawTrace": "原始追踪（所有 span 及其输入和输出）",
+  "reportProblem.menuItem": "报告问题",
+  "reportProblem.title_other": "要附上应用在过去 {{count}} 秒内的操作记录吗？",
+  "reportProblem.noEvents": "暂时还没有记录。",
+  "reportProblem.send": "发送给智能体",
+  "reportProblem.copy": "复制问题报告",
+  "reportProblem.attaching": "正在附加…",
+  "reportProblem.notAttached": "报告未能附加。",
+  "reportProblem.agentMessage":
+    "应用出了问题。请根据附带的问题报告解释发生了什么。",
 };
 
 export default messages;

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

@@ -2838,6 +2838,16 @@ const messages: ToolkitAgentChatTranslation = {
   "settingsSubAgents.connectTitle": "連接 {{name}}",
   "settingsSubAgents.close": "關閉",
   "observability.insights.rawTrace": "原始追蹤（所有 span 及其輸入與輸出）",
+  "reportProblem.menuItem": "回報問題",
+  "reportProblem.title_other":
+    "要附上應用程式在過去 {{count}} 秒內的操作記錄嗎？",
+  "reportProblem.noEvents": "目前還沒有記錄。",
+  "reportProblem.send": "傳送給代理",
+  "reportProblem.copy": "複製問題回報",
+  "reportProblem.attaching": "正在附加…",
+  "reportProblem.notAttached": "回報未能附加。",
+  "reportProblem.agentMessage":
+    "應用程式出了問題。請根據附上的問題回報說明發生了什麼事。",
 };
 
 export default messages;

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

@@ -381,7 +381,7 @@ describe("BuilderConnectPopover", () => {
     expect(open).not.toHaveBeenCalled();
   });
 
-  it("keeps the chooser busy during activation and available after it finishes", () => {
+  it("keeps the chooser busy during activation and closes after it succeeds", () => {
     const onConnect = vi.fn();
     const flow = {
       connecting: false,
@@ -390,7 +390,7 @@ describe("BuilderConnectPopover", () => {
       start: vi.fn(),
       statusResolved: true,
       agentNativeProvisioningEnabled: true,
-      accountExists: true,
+      accountExists: false,
     };
     const renderPopover = () =>
       render(
@@ -414,7 +414,7 @@ describe("BuilderConnectPopover", () => {
     expect(consent?.textContent).toContain(
       "Create a new account to activate free credits, or continue with an existing account.",
     );
-    expect(consent?.textContent).toContain(
+    expect(consent?.textContent).not.toContain(
       "You already have a Builder.io account",
     );
     expect(consent?.querySelector("[data-testid='create']")?.textContent).toBe(
@@ -440,15 +440,10 @@ describe("BuilderConnectPopover", () => {
     flow.connecting = false;
     flow.configured = true;
     renderPopover();
-    click(
-      document.querySelector(
-        "[data-testid='consent'] [data-testid='sign-in']",
-      ) as HTMLElement,
-    );
-    expect(onConnect).toHaveBeenLastCalledWith(false);
+    expect(document.querySelector("[data-testid='consent']")).toBeNull();
   });
 
-  it("reopens the same two choices after activation finds an existing account", () => {
+  it("offers only sign-in after activation finds an existing account", () => {
     const flow = {
       connecting: false,
       start: vi.fn(),
@@ -481,10 +476,20 @@ describe("BuilderConnectPopover", () => {
     );
 
     const consent = document.querySelector("[data-testid='consent']");
-    expect(consent?.querySelector("[data-testid='create']")).not.toBeNull();
-    expect(consent?.querySelector("[data-testid='sign-in']")).not.toBeNull();
-    click(consent?.querySelector("[data-testid='create']") as HTMLElement);
-    expect(flow.start).toHaveBeenLastCalledWith({ provisionAccount: true });
+    const existingAccount = consent?.querySelector<HTMLButtonElement>(
+      "[data-testid='create']",
+    );
+    expect(existingAccount?.textContent).toBe("I have a Builder.io account");
+    expect(consent?.textContent).not.toContain("Create and activate");
+    expect(consent?.querySelector("[data-testid='sign-in']")).toBeNull();
+    expect(existingAccount?.getAttribute("aria-describedby")).toBe(
+      "builder-connect-popover-account-exists",
+    );
+    expect(
+      document.getElementById("builder-connect-popover-description"),
+    ).toBeNull();
+    click(existingAccount!);
+    expect(flow.start).toHaveBeenLastCalledWith({ provisionAccount: false });
   });
 
   it("shows included services collapsed and stacks both choices above the terms", () => {