@agent-native/core 0.79.12 → 0.79.16

package/corpus/templates/clips/app/routes/bug-report.done.tsx

@@ -0,0 +1,126 @@
+import { appBasePath, useT } from "@agent-native/core/client";
+import {
+  IconArrowLeft,
+  IconCheck,
+  IconCopy,
+  IconExternalLink,
+} from "@tabler/icons-react";
+import { useEffect, useMemo, useState } from "react";
+import { Link, useLocation } from "react-router";
+
+import { Button } from "@/components/ui/button";
+import enMessages from "@/i18n/en-US";
+
+export function meta() {
+  return [{ title: enMessages.bugReportRoute.donePageTitle }];
+}
+
+function absoluteAppUrl(path: string) {
+  if (typeof window === "undefined") return path;
+  return new URL(`${appBasePath()}${path}`, window.location.origin).toString();
+}
+
+function targetOrigin(returnUrl: string | null) {
+  if (!returnUrl) return "*";
+  try {
+    return new URL(returnUrl).origin;
+  } catch {
+    return "*";
+  }
+}
+
+export default function BugReportDoneRoute() {
+  const t = useT();
+  const location = useLocation();
+  const [copied, setCopied] = useState(false);
+  const params = useMemo(
+    () => new URLSearchParams(location.search),
+    [location.search],
+  );
+  const recordingId = params.get("recordingId")?.trim() || null;
+  const returnUrl = params.get("returnUrl")?.trim() || null;
+
+  const recordingUrl = recordingId
+    ? absoluteAppUrl(`/r/${encodeURIComponent(recordingId)}`)
+    : null;
+  const embedUrl = recordingId
+    ? absoluteAppUrl(`/embed/${encodeURIComponent(recordingId)}`)
+    : null;
+  const agentContextUrl = recordingId
+    ? absoluteAppUrl(
+        `/api/agent-context.json?id=${encodeURIComponent(recordingId)}`,
+      )
+    : null;
+
+  useEffect(() => {
+    if (!recordingId || !recordingUrl) return;
+    const message = {
+      type: "agent-native.clips.bug-report.submitted",
+      recordingId,
+      recordingUrl,
+      embedUrl,
+      agentContextUrl,
+    };
+    const origin = targetOrigin(returnUrl);
+    window.opener?.postMessage(message, origin);
+    if (window.parent && window.parent !== window) {
+      window.parent.postMessage(message, origin);
+    }
+  }, [agentContextUrl, embedUrl, recordingId, recordingUrl, returnUrl]);
+
+  const copyRecordingUrl = async () => {
+    if (!recordingUrl) return;
+    await navigator.clipboard.writeText(recordingUrl);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1800);
+  };
+
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto flex min-h-screen w-full max-w-lg flex-col justify-center px-4 py-5 sm:px-6">
+        <section className="rounded-lg border bg-card p-5 text-center shadow-sm">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-md bg-emerald-600 text-white">
+            <IconCheck size={24} />
+          </div>
+          <h1 className="mt-4 text-xl font-semibold">
+            {recordingId
+              ? t("bugReportRoute.doneTitle")
+              : t("bugReportRoute.missingRecording")}
+          </h1>
+          <p className="mx-auto mt-2 max-w-sm text-sm leading-6 text-muted-foreground">
+            {t("bugReportRoute.doneDescription")}
+          </p>
+
+          {recordingUrl ? (
+            <div className="mt-5 grid gap-2">
+              <Button asChild className="h-11">
+                <Link to={`/r/${recordingId}`}>
+                  <IconExternalLink size={18} />
+                  {t("bugReportRoute.openRecording")}
+                </Link>
+              </Button>
+              <Button
+                variant="outline"
+                className="h-10"
+                onClick={copyRecordingUrl}
+              >
+                <IconCopy size={17} />
+                {copied
+                  ? t("bugReportRoute.copied")
+                  : t("bugReportRoute.copyLink")}
+              </Button>
+              {returnUrl ? (
+                <Button variant="ghost" className="h-10" asChild>
+                  <a href={returnUrl}>
+                    <IconArrowLeft size={17} />
+                    {t("bugReportRoute.returnToProduct")}
+                  </a>
+                </Button>
+              ) : null}
+            </div>
+          ) : null}
+        </section>
+      </div>
+    </main>
+  );
+}

package/corpus/templates/clips/app/routes/bug-report.tsx

@@ -0,0 +1,222 @@
+import { appBasePath, useT } from "@agent-native/core/client";
+import {
+  bugReportContextToSearchParams,
+  parseBugReportContext,
+  type BugReportContext,
+  type BugReportSeverity,
+} from "@shared/bug-report";
+import {
+  IconArrowRight,
+  IconBug,
+  IconExternalLink,
+  IconShieldCheck,
+} from "@tabler/icons-react";
+import { useEffect, useMemo, useState } from "react";
+import { useLocation, useOutlet } from "react-router";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import enMessages from "@/i18n/en-US";
+import { cn } from "@/lib/utils";
+
+export function meta() {
+  return [{ title: enMessages.bugReportRoute.pageTitle }];
+}
+
+function openRecorder(url: string) {
+  const opened = window.open(
+    url,
+    "agent-native-clips-bug-report",
+    "popup,width=1120,height=820",
+  );
+  if (!opened) {
+    window.location.href = url;
+    return;
+  }
+  opened.focus();
+}
+
+export default function BugReportRoute() {
+  const t = useT();
+  const location = useLocation();
+  const outlet = useOutlet();
+  const initialContext = useMemo(() => {
+    const params = new URLSearchParams(location.search);
+    return parseBugReportContext(params, { allowLoose: true });
+  }, [location.search]);
+
+  const [title, setTitle] = useState(initialContext?.title ?? "");
+  const [description, setDescription] = useState(
+    initialContext?.description ?? "",
+  );
+  const [reporterEmail, setReporterEmail] = useState(
+    initialContext?.reporterEmail ?? "",
+  );
+  const [severity, setSeverity] = useState<BugReportSeverity>(
+    initialContext?.severity ?? "normal",
+  );
+  const [referrer, setReferrer] = useState<string | null>(null);
+
+  useEffect(() => {
+    setReferrer(document.referrer || null);
+  }, []);
+
+  const sourceUrl = initialContext?.sourceUrl ?? referrer;
+  const pageTitle = initialContext?.pageTitle ?? null;
+  const sourceLabel =
+    pageTitle || sourceUrl || t("bugReportRoute.sourceUnknown");
+
+  if (outlet) return outlet;
+
+  const startRecording = () => {
+    const context: BugReportContext = {
+      projectId: initialContext?.projectId ?? null,
+      title: title.trim() || initialContext?.title || null,
+      description: description.trim() || initialContext?.description || null,
+      severity,
+      sourceUrl,
+      pageTitle,
+      appVersion: initialContext?.appVersion ?? null,
+      environment: initialContext?.environment ?? null,
+      reporterEmail:
+        reporterEmail.trim() || initialContext?.reporterEmail || null,
+      reporterName: initialContext?.reporterName ?? null,
+      reporterId: initialContext?.reporterId ?? null,
+      metadata: initialContext?.metadata ?? null,
+      returnUrl: initialContext?.returnUrl ?? sourceUrl,
+    };
+    const params = bugReportContextToSearchParams(context);
+    params.set("intent", "bug-report");
+    params.set("mode", "screen");
+    params.set("surface", "browser");
+    openRecorder(`${appBasePath()}/record?${params.toString()}`);
+  };
+
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="mx-auto flex min-h-screen w-full max-w-xl flex-col justify-center px-4 py-5 sm:px-6">
+        <section className="rounded-lg border bg-card p-4 shadow-sm sm:p-5">
+          <div className="mb-5 flex items-start gap-3">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <IconBug size={20} />
+            </div>
+            <div className="min-w-0">
+              <p className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">
+                {t("bugReportRoute.eyebrow")}
+              </p>
+              <h1 className="mt-1 text-xl font-semibold leading-tight">
+                {t("bugReportRoute.title")}
+              </h1>
+              <p className="mt-2 text-sm leading-6 text-muted-foreground">
+                {t("bugReportRoute.description")}
+              </p>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="bug-title">
+                {t("bugReportRoute.issueTitleLabel")}
+              </Label>
+              <Input
+                id="bug-title"
+                value={title}
+                onChange={(event) => setTitle(event.target.value)}
+                placeholder={t("bugReportRoute.issueTitlePlaceholder")}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="bug-details">
+                {t("bugReportRoute.detailsLabel")}
+              </Label>
+              <Textarea
+                id="bug-details"
+                value={description}
+                onChange={(event) => setDescription(event.target.value)}
+                placeholder={t("bugReportRoute.detailsPlaceholder")}
+                className="min-h-24 resize-none"
+              />
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-[1fr_180px]">
+              <div className="space-y-2">
+                <Label htmlFor="bug-email">
+                  {t("bugReportRoute.emailLabel")}
+                </Label>
+                <Input
+                  id="bug-email"
+                  type="email"
+                  value={reporterEmail}
+                  onChange={(event) => setReporterEmail(event.target.value)}
+                  placeholder={t("bugReportRoute.emailPlaceholder")}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>{t("bugReportRoute.severityLabel")}</Label>
+                <Select
+                  value={severity}
+                  onValueChange={(value) =>
+                    setSeverity(value as BugReportSeverity)
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="low">
+                      {t("bugReportRoute.severityLow")}
+                    </SelectItem>
+                    <SelectItem value="normal">
+                      {t("bugReportRoute.severityNormal")}
+                    </SelectItem>
+                    <SelectItem value="high">
+                      {t("bugReportRoute.severityHigh")}
+                    </SelectItem>
+                    <SelectItem value="urgent">
+                      {t("bugReportRoute.severityUrgent")}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="rounded-md border bg-muted/40 px-3 py-2">
+              <p className="text-xs font-medium text-muted-foreground">
+                {t("bugReportRoute.sourceLabel")}
+              </p>
+              <p
+                className={cn(
+                  "mt-1 truncate text-sm",
+                  !sourceUrl && "text-muted-foreground",
+                )}
+              >
+                {sourceLabel}
+              </p>
+            </div>
+
+            <Button className="h-11 w-full" onClick={startRecording}>
+              <IconExternalLink size={18} />
+              {t("bugReportRoute.startRecording")}
+              <IconArrowRight size={18} className="ms-auto" />
+            </Button>
+          </div>
+
+          <div className="mt-5 flex items-start gap-2 rounded-md bg-muted/50 p-3 text-xs leading-5 text-muted-foreground">
+            <IconShieldCheck size={16} className="mt-0.5 shrink-0" />
+            <p>{t("bugReportRoute.privacyNote")}</p>
+          </div>
+        </section>
+      </div>
+    </main>
+  );
+}

package/corpus/templates/clips/app/routes/record.tsx

@@ -76,6 +76,11 @@ async function writeAppState(key: string, value: unknown): Promise<void> {
     },
   );
 }
+import {
+  bugReportTitle,
+  parseBugReportContext,
+  type BugReportContext,
+} from "@shared/bug-report";
 import { toast } from "sonner";
 
 import { CaptureInstallButton } from "@/components/capture-install-options";
@@ -166,6 +171,12 @@ function openUrlFromUserGesture(url: string): void {
   }
 }
 
+function bugReportDonePath(recordingId: string, context: BugReportContext) {
+  const params = new URLSearchParams({ recordingId });
+  if (context.returnUrl) params.set("returnUrl", context.returnUrl);
+  return `/bug-report/done?${params.toString()}`;
+}
+
 function sendClipsExtensionMessage<T>(
   extensionId: string,
   message: Record<string, unknown>,
@@ -852,6 +863,10 @@ export default function RecordRoute() {
       developerLogsEnabled: developerLogs !== "0",
     };
   }, [location.search]);
+  const bugReportContext = useMemo(
+    () => parseBugReportContext(new URLSearchParams(location.search)),
+    [location.search],
+  );
   const markStorageConfigured = useCallback(
     (status?: VideoStorageStatus) => {
       queryClient.setQueryData<VideoStorageStatus>(
@@ -870,6 +885,41 @@ export default function RecordRoute() {
   const liveTranscription = useLiveTranscription();
   const stopLiveTranscription = liveTranscription.stop;
 
+  const saveBugReportContext = useCallback(
+    async (recordingId: string) => {
+      if (!bugReportContext) return;
+      try {
+        await callAction(
+          "save-bug-report-context" as any,
+          {
+            recordingId,
+            projectId: bugReportContext.projectId,
+            title: bugReportContext.title,
+            description: bugReportContext.description,
+            severity: bugReportContext.severity,
+            sourceUrl: bugReportContext.sourceUrl,
+            pageTitle: bugReportContext.pageTitle,
+            appVersion: bugReportContext.appVersion,
+            environment: bugReportContext.environment,
+            reporterEmail: bugReportContext.reporterEmail,
+            reporterName: bugReportContext.reporterName,
+            reporterId: bugReportContext.reporterId,
+            metadata: bugReportContext.metadata ?? undefined,
+          } as any,
+        );
+      } catch (err) {
+        console.warn("[recorder] bug report context save failed:", err);
+      }
+    },
+    [bugReportContext],
+  );
+  const bugReportContextRef = useRef<BugReportContext | null>(null);
+  const saveBugReportContextRef = useRef(saveBugReportContext);
+  useEffect(() => {
+    bugReportContextRef.current = bugReportContext;
+    saveBugReportContextRef.current = saveBugReportContext;
+  }, [bugReportContext, saveBugReportContext]);
+
   const engineRef = useRef<RecorderEngine | null>(null);
   const pendingRef = useRef<PendingRecording | null>(null);
   const countdownAudioCueRef = useRef<CountdownAudioCue | null>(null);
@@ -1124,19 +1174,23 @@ export default function RecordRoute() {
         }
 
         // 2. Create the recording row server-side once permissions are granted.
+        const reportContext = bugReportContextRef.current;
+        const reportTitle = reportContext
+          ? `Bug report: ${bugReportTitle(reportContext)}`
+          : null;
         const res = await fetch(
           agentNativePath("/_agent-native/actions/create-recording"),
           {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
-              title: captureTitle.title,
-              titleSource: captureTitle.titleSource,
+              title: reportTitle ?? captureTitle.title,
+              titleSource: reportTitle ? "context" : captureTitle.titleSource,
               sourceAppName: captureTitle.sourceAppName,
               sourceWindowTitle: captureTitle.sourceWindowTitle,
               hasCamera: opts.mode !== "screen",
               hasAudio: wantsMic,
-              visibility: "public",
+              visibility: reportContext ? "org" : "public",
               spaceIds: spaceIdFromUrl ? [spaceIdFromUrl] : undefined,
               folderId: folderIdFromUrl ?? undefined,
             }),
@@ -1190,6 +1244,7 @@ export default function RecordRoute() {
           uploadUrl: uploadChunkUrl,
           abortUrl,
         });
+        await saveBugReportContextRef.current(info.id);
 
         setPreviewStream(ps);
         setCameraStream(cs);
@@ -1403,6 +1458,10 @@ export default function RecordRoute() {
           );
         }
         setUiState("uploading");
+        const reportContext = bugReportContextRef.current;
+        const reportTitle = reportContext
+          ? `Bug report: ${bugReportTitle(reportContext)}`
+          : null;
 
         const res = await fetch(
           agentNativePath("/_agent-native/actions/create-recording"),
@@ -1412,12 +1471,14 @@ export default function RecordRoute() {
             signal: abort.signal,
             body: JSON.stringify({
               title:
-                file.name.replace(/\.[^/.]+$/, "") || defaultRecordingTitle(),
-              titleSource: "upload",
+                reportTitle ??
+                (file.name.replace(/\.[^/.]+$/, "") || defaultRecordingTitle()),
+              titleSource: reportTitle ? "context" : "upload",
               hasCamera: false,
               hasAudio: true,
               width: meta.width,
               height: meta.height,
+              visibility: reportContext ? "org" : undefined,
               spaceIds: spaceIdFromUrl ? [spaceIdFromUrl] : undefined,
               folderId: folderIdFromUrl ?? undefined,
             }),
@@ -1451,6 +1512,7 @@ export default function RecordRoute() {
           throw new Error("create-recording did not return an id");
         }
         createdId = info.id;
+        await saveBugReportContextRef.current(info.id);
         if (isStale()) throw makeAbortError("Upload cancelled");
         const uploadBase = `${appBasePath()}${info.uploadChunkUrl}`;
 
@@ -1517,13 +1579,25 @@ export default function RecordRoute() {
         } else {
           toast.success(t("recordRoute.videoUploaded"));
         }
-        await writeAppState("navigate", {
-          view: "recording",
-          recordingId: createdId,
-        });
-        setTimeout(() => {
-          if (createdId) navigate(`/r/${createdId}`);
-        }, 50);
+        if (reportContext && createdId) {
+          const path = bugReportDonePath(createdId, reportContext);
+          await writeAppState("navigate", {
+            view: "bug-report-done",
+            recordingId: createdId,
+            path,
+          });
+          setTimeout(() => {
+            navigate(path);
+          }, 50);
+        } else {
+          await writeAppState("navigate", {
+            view: "recording",
+            recordingId: createdId,
+          });
+          setTimeout(() => {
+            if (createdId) navigate(`/r/${createdId}`);
+          }, 50);
+        }
       } catch (err) {
         const message =
           err instanceof Error ? err.message : t("recordRoute.uploadFailed");
@@ -1736,6 +1810,20 @@ export default function RecordRoute() {
         toast.success(t("recordRoute.recordingSaved"));
       }
 
+      const reportContext = bugReportContextRef.current;
+      if (reportContext) {
+        const path = bugReportDonePath(recordingId, reportContext);
+        await writeAppState("navigate", {
+          view: "bug-report-done",
+          recordingId,
+          path,
+        }).catch(() => {});
+        setTimeout(() => {
+          navigate(path);
+        }, 50);
+        return;
+      }
+
       await writeAppState("navigate", {
         view: "recording",
         recordingId,
@@ -2173,6 +2261,8 @@ export default function RecordRoute() {
               ) : (
                 <StorageSetupCard
                   onConfigured={() => markStorageConfigured()}
+                  connectSource="clips_record_storage_setup_card"
+                  connectFlow="record"
                 />
               )}
             </div>
@@ -2324,6 +2414,8 @@ export default function RecordRoute() {
                   }
                 }}
                 connectedDescription="Storage connected. Reopening recorder..."
+                connectSource="clips_record_storage_setup_card"
+                connectFlow="record"
               />
             </>
           ) : error === "SESSION_EXPIRED" ? (

package/corpus/templates/clips/changelog/2026-06-26-brief-network-blips-no-longer-block-recording-or-wrongly-pro.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+Brief network blips no longer block recording or wrongly prompt you to reconnect storage in the desktop app.

package/corpus/templates/clips/changelog/2026-06-26-bug-report-recordings-can-keep-redacted-host-app-context-wit.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-26
+---
+
+Bug-report recordings can keep redacted host-app context with the clip.

package/corpus/templates/clips/changelog/2026-06-26-bug-report-widgets-can-launch-clips-recordings-from-embedded.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-26
+---
+
+Bug report widgets can launch Clips recordings from embedded product surfaces.

package/corpus/templates/clips/changelog/2026-06-26-desktop-recording-keeps-connected-users-out-of-the-storage-s.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+Desktop recording keeps connected users out of the storage setup flow when a status check is indeterminate.

package/corpus/templates/clips/changelog/2026-06-26-if-a-recording-can-t-be-uploaded-the-chrome-extension-now-sa.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+If a recording can't be uploaded, the Chrome extension now saves it to your downloads so it's never lost.

package/corpus/templates/clips/changelog/2026-06-27-traditional-chinese-copy-uses-taiwan-terminology.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-27
+---
+
+Traditional Chinese copy now uses Taiwan terminology and clearer technical wording.

package/corpus/templates/clips/chrome-extension/public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Agent-Native Clips",
   "short_name": "Clips",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Start Clips recordings from Chrome, capture optional diagnostics, and preview Clips links on GitHub.",
   "minimum_chrome_version": "116",
   "action": {
@@ -18,7 +18,14 @@
     "32": "icons/icon-32.png",
     "128": "icons/icon-128.png"
   },
-  "permissions": ["activeTab", "debugger", "offscreen", "scripting", "storage"],
+  "permissions": [
+    "activeTab",
+    "debugger",
+    "downloads",
+    "offscreen",
+    "scripting",
+    "storage"
+  ],
   "host_permissions": [
     "https://clips.agent-native.com/*",
     "https://forms.agent-native.com/*",