@agent-native/core 0.68.1 → 0.68.2

package/corpus/templates/clips/app/components/capture-install-options.tsx

@@ -0,0 +1,157 @@
+import { type ReactNode } from "react";
+import { Link } from "react-router";
+import {
+  IconBrowser,
+  IconChevronDown,
+  IconDeviceDesktop,
+  IconExternalLink,
+} from "@tabler/icons-react";
+import { Button, type ButtonProps } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import {
+  clipsChromeExtensionEnabled,
+  clipsChromeExtensionUrl,
+} from "@/lib/capture-install-options";
+
+type PopoverPlacement = {
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
+};
+
+type CaptureInstallButtonProps = Omit<ButtonProps, "asChild"> &
+  PopoverPlacement & {
+    children: ReactNode;
+    desktopHref?: string;
+  };
+
+type CaptureInstallInlineLinkProps = PopoverPlacement & {
+  children: ReactNode;
+  className?: string;
+  desktopHref?: string;
+};
+
+function InstallOptionsContent({ desktopHref = "/download" }) {
+  const chromeAvailable = Boolean(clipsChromeExtensionUrl);
+
+  return (
+    <div className="grid gap-2">
+      <div className="px-1 pb-1">
+        <div className="text-sm font-medium text-popover-foreground">
+          Choose your recorder
+        </div>
+        <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+          Use Chrome when you need browser logs, or desktop for the smoothest
+          everyday capture.
+        </p>
+      </div>
+
+      {chromeAvailable ? (
+        <a
+          href={clipsChromeExtensionUrl ?? undefined}
+          target="_blank"
+          rel="noreferrer"
+          className="flex items-start gap-3 rounded-md border border-border p-3 text-left transition hover:bg-accent"
+        >
+          <IconBrowser className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+          <span className="min-w-0 flex-1">
+            <span className="block text-sm font-medium">Chrome extension</span>
+            <span className="mt-0.5 block text-xs leading-snug text-muted-foreground">
+              Best when you want redacted console and network diagnostics from
+              the browser tab.
+            </span>
+          </span>
+          <IconExternalLink className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        </a>
+      ) : (
+        <div className="flex items-start gap-3 rounded-md border border-dashed border-border p-3 text-left opacity-70">
+          <IconBrowser className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+          <span className="min-w-0 flex-1">
+            <span className="block text-sm font-medium">Chrome extension</span>
+            <span className="mt-0.5 block text-xs leading-snug text-muted-foreground">
+              Browser logs option is ready, pending the Chrome Web Store URL.
+            </span>
+          </span>
+        </div>
+      )}
+
+      <Link
+        to={desktopHref}
+        className="flex items-start gap-3 rounded-md border border-border p-3 text-left transition hover:bg-accent"
+      >
+        <IconDeviceDesktop className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+        <span className="min-w-0 flex-1">
+          <span className="block text-sm font-medium">Desktop app</span>
+          <span className="mt-0.5 block text-xs leading-snug text-muted-foreground">
+            Most seamless for global shortcuts, menu-bar recording, meetings,
+            and repeat captures.
+          </span>
+        </span>
+      </Link>
+    </div>
+  );
+}
+
+export function CaptureInstallButton({
+  children,
+  className,
+  desktopHref = "/download",
+  align = "end",
+  side = "bottom",
+  ...buttonProps
+}: CaptureInstallButtonProps) {
+  if (!clipsChromeExtensionEnabled) {
+    return (
+      <Button asChild className={className} {...buttonProps}>
+        <Link to={desktopHref}>{children}</Link>
+      </Button>
+    );
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button className={className} {...buttonProps}>
+          {children}
+          <IconChevronDown className="h-3.5 w-3.5" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align={align} side={side} className="w-80 p-3">
+        <InstallOptionsContent desktopHref={desktopHref} />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function CaptureInstallInlineLink({
+  children,
+  className,
+  desktopHref = "/download",
+  align = "start",
+  side = "bottom",
+}: CaptureInstallInlineLinkProps) {
+  if (!clipsChromeExtensionEnabled) {
+    return (
+      <Link to={desktopHref} className={className}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button type="button" className={cn("cursor-pointer", className)}>
+          {children}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align={align} side={side} className="w-80 p-3">
+        <InstallOptionsContent desktopHref={desktopHref} />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -53,6 +53,10 @@ import { FolderTree, type FolderNode } from "./folder-tree";
 import { SearchBar } from "./search-bar";
 import { PageHeaderSlotProvider } from "./page-header";
 import { CreateSpaceDialog } from "./create-space-dialog";
+import {
+  CaptureInstallButton,
+  CaptureInstallInlineLink,
+} from "@/components/capture-install-options";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { toast } from "sonner";
 import {
@@ -477,13 +481,10 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
               <>
                 <div className="shrink-0 space-y-1.5 border-t border-border px-2 py-1.5">
                   {shouldShowSidebarLink && (
-                    <NavLink
-                      to="/download"
-                      className="flex items-center gap-2 rounded px-2 py-1.5 text-xs text-foreground hover:bg-accent/60"
-                    >
+                    <CaptureInstallInlineLink className="flex items-center gap-2 rounded px-2 py-1.5 text-xs text-foreground hover:bg-accent/60">
                       <IconAppWindow className="h-4 w-4" />
                       Get desktop app
-                    </NavLink>
+                    </CaptureInstallInlineLink>
                   )}
                   <SearchBar />
                 </div>
@@ -532,9 +533,9 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                     Record from the menu bar, global shortcut, auto-updates.
                   </span>
                 </div>
-                <Button asChild size="sm" className="shrink-0">
-                  <NavLink to="/download">Download</NavLink>
-                </Button>
+                <CaptureInstallButton size="sm" className="shrink-0">
+                  Download
+                </CaptureInstallButton>
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button

package/corpus/templates/clips/app/components/recorder/pre-record-panel.tsx

@@ -18,9 +18,10 @@ import {
   IconUpload,
   IconVideo,
 } from "@tabler/icons-react";
-import { agentNativePath, appPath } from "@agent-native/core/client";
+import { agentNativePath } from "@agent-native/core/client";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { CaptureInstallInlineLink } from "@/components/capture-install-options";
 import {
   Popover,
   PopoverContent,
@@ -724,12 +725,9 @@ export function PreRecordPanel({
                 {micAccessError ? (
                   <p className="text-[11px] leading-snug text-muted-foreground">
                     {micAccessError}{" "}
-                    <a
-                      href={appPath("/download")}
-                      className="text-foreground underline-offset-4 hover:underline"
-                    >
+                    <CaptureInstallInlineLink className="text-foreground underline-offset-4 hover:underline">
                       Try Clips Desktop.
-                    </a>
+                    </CaptureInstallInlineLink>
                   </p>
                 ) : null}
               </div>

package/corpus/templates/clips/app/lib/capture-install-options.ts

@@ -0,0 +1,13 @@
+function isTruthy(value: unknown): boolean {
+  if (typeof value !== "string") return false;
+  return ["1", "true", "yes", "on"].includes(value.trim().toLowerCase());
+}
+
+const chromeExtensionUrl =
+  import.meta.env.VITE_CLIPS_CHROME_EXTENSION_URL?.trim() ?? "";
+
+export const clipsChromeExtensionEnabled = isTruthy(
+  import.meta.env.VITE_CLIPS_CHROME_EXTENSION_ENABLED,
+);
+
+export const clipsChromeExtensionUrl = chromeExtensionUrl || null;

package/corpus/templates/clips/app/root.tsx

@@ -19,9 +19,18 @@ import {
   getThemeInitScript,
   useCommandMenuShortcut,
 } from "@agent-native/core/client";
-import { IconSun, IconMoon } from "@tabler/icons-react";
+import { IconCheck, IconSun, IconMoon } from "@tabler/icons-react";
 import { useTheme } from "next-themes";
 import { Toaster } from "@/components/ui/sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import type { LinksFunction } from "react-router";
 import stylesheet from "./global.css?url";
 import { configureTracking } from "@agent-native/core/client";
@@ -117,8 +126,30 @@ type ExternalChromeRuntime = {
   ) => void;
 };
 
+const CLIPS_COMMAND_DOCS = [
+  {
+    title: "Use the Chrome extension for browser logs",
+    description:
+      "Record a browser tab with redacted console logs, JavaScript exceptions, and fetch/XHR diagnostics.",
+    href: "https://www.agent-native.com/docs/template-clips#browser-logs-and-developer-diagnostics",
+    keywords: [
+      "logs",
+      "browser logs",
+      "developer logs",
+      "console logs",
+      "network logs",
+      "fetch",
+      "xhr",
+      "diagnostics",
+      "chrome extension",
+      "recording",
+    ],
+  },
+] satisfies React.ComponentProps<typeof CommandMenu.DocsGroup>["docs"];
+
 function ClipsExtensionAuthBridge() {
   const location = useLocation();
+  const [showAuthSuccess, setShowAuthSuccess] = useState(false);
 
   useEffect(() => {
     const params = new URLSearchParams(location.search);
@@ -163,6 +194,7 @@ function ClipsExtensionAuthBridge() {
           cleaned.searchParams.delete("clipsExtensionAuth");
           cleaned.searchParams.delete("clipsExtensionId");
           window.history.replaceState(window.history.state, "", cleaned);
+          setShowAuthSuccess(true);
         },
       );
     }
@@ -173,7 +205,26 @@ function ClipsExtensionAuthBridge() {
     };
   }, [location.search]);
 
-  return null;
+  return (
+    <Dialog open={showAuthSuccess} onOpenChange={setShowAuthSuccess}>
+      <DialogContent className="max-w-sm text-center sm:text-center">
+        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-500">
+          <IconCheck className="h-9 w-9" strokeWidth={2.5} />
+        </div>
+        <DialogHeader className="items-center text-center sm:text-center">
+          <DialogTitle>Signed in</DialogTitle>
+          <DialogDescription className="max-w-xs">
+            Open the Clips extension again to start recording.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="sm:justify-center">
+          <Button type="button" onClick={() => setShowAuthSuccess(false)}>
+            Got it
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
 }
 
 /**
@@ -211,6 +262,7 @@ function AppContent() {
           <CommandMenu.Group heading="Actions">
             <CommandMenu.Item onSelect={() => {}}>Search</CommandMenu.Item>
           </CommandMenu.Group>
+          <CommandMenu.DocsGroup docs={CLIPS_COMMAND_DOCS} />
           <CommandMenu.Group heading="Appearance">
             <ThemeToggleItem />
           </CommandMenu.Group>

package/corpus/templates/clips/app/routes/_app.dictate.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Link } from "react-router";
 import { toast } from "sonner";
 import {
   IconArrowsExchange,
@@ -34,6 +33,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useDesktopPromo } from "@/hooks/use-desktop-promo";
+import { CaptureInstallButton } from "@/components/capture-install-options";
 
 export function meta() {
   return [{ title: "Dictate · Clips" }];
@@ -609,12 +609,10 @@ function EmptyState({ isDesktopApp }: { isDesktopApp: boolean }) {
             work in any app — Slack, your editor, anywhere.
           </p>
           <div className="mt-5 flex items-center justify-center">
-            <Button asChild size="sm" className="gap-1.5">
-              <Link to="/download">
-                <IconDownload className="h-3.5 w-3.5" />
-                Download Clips desktop app
-              </Link>
-            </Button>
+            <CaptureInstallButton size="sm" className="gap-1.5">
+              <IconDownload className="h-3.5 w-3.5" />
+              Download Clips desktop app
+            </CaptureInstallButton>
           </div>
           <div className="mt-3 flex items-center justify-center gap-2 text-xs text-muted-foreground">
             <Kbd>Fn</Kbd>
@@ -646,12 +644,10 @@ function DownloadDesktopAppCard() {
           desktop app is the way to use this.
         </p>
       </div>
-      <Button asChild size="sm" className="gap-1.5">
-        <Link to="/download">
-          <IconDownload className="h-3.5 w-3.5" />
-          Download
-        </Link>
-      </Button>
+      <CaptureInstallButton size="sm" className="gap-1.5">
+        <IconDownload className="h-3.5 w-3.5" />
+        Download
+      </CaptureInstallButton>
     </div>
   );
 }

package/corpus/templates/clips/app/routes/_app.meetings.$meetingId.tsx

@@ -61,6 +61,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { CaptureInstallButton } from "@/components/capture-install-options";
 
 export function meta() {
   return [{ title: "Meeting · Clips" }];
@@ -699,17 +700,14 @@ export default function MeetingDetailRoute() {
             transcript and AI notes will appear here automatically.
           </span>
           {!isDesktopApp && (
-            <Button
-              asChild
+            <CaptureInstallButton
               size="sm"
               variant="secondary"
               className="ml-auto h-8 gap-1.5 cursor-pointer"
             >
-              <NavLink to="/download">
-                <IconExternalLink className="h-3.5 w-3.5" />
-                Get desktop app
-              </NavLink>
-            </Button>
+              <IconExternalLink className="h-3.5 w-3.5" />
+              Get desktop app
+            </CaptureInstallButton>
           )}
         </div>
       )}

package/corpus/templates/clips/app/routes/_app.meetings._index.tsx

@@ -45,6 +45,7 @@ import { Input } from "@/components/ui/input";
 import { DayHeader, formatDayLabel } from "@/components/meetings/day-header";
 import type { AttendeeStackParticipant } from "@/components/meetings/attendee-stack";
 import { PageHeader } from "@/components/library/page-header";
+import { CaptureInstallButton } from "@/components/capture-install-options";
 
 export function meta() {
   return [{ title: "Meetings · Clips" }];
@@ -668,17 +669,14 @@ function MeetingsHeader({
         </div>
         {showDesktopCta && (
           <div className="flex w-fit shrink-0 flex-col items-start gap-1 sm:items-end">
-            <Button
-              asChild
+            <CaptureInstallButton
               size="sm"
               variant="secondary"
               className="h-8 w-fit gap-1.5 cursor-pointer"
             >
-              <NavLink to="/download">
-                <IconAppWindow className="h-4 w-4" />
-                Get desktop app
-              </NavLink>
-            </Button>
+              <IconAppWindow className="h-4 w-4" />
+              Get desktop app
+            </CaptureInstallButton>
             <p className="max-w-56 text-[11px] leading-snug text-muted-foreground">
               Required for meeting reminders and transcription.
             </p>

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

@@ -1,12 +1,18 @@
 import { useEffect, useState } from "react";
 import {
+  IconBrowser,
   IconBrandApple,
   IconBrandWindows,
+  IconExternalLink,
   IconPlayerRecord,
 } from "@tabler/icons-react";
 import { appBasePath, appPath } from "@agent-native/core/client";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
+import {
+  clipsChromeExtensionEnabled,
+  clipsChromeExtensionUrl,
+} from "@/lib/capture-install-options";
 
 export function meta() {
   return [
@@ -237,6 +243,49 @@ export default function DownloadPage() {
               )}
             </div>
           </div>
+
+          {clipsChromeExtensionEnabled && (
+            <section className="mt-10 w-full max-w-xl rounded-2xl border border-border bg-card p-4 text-left shadow-sm">
+              <div className="flex items-start gap-3">
+                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
+                  <IconBrowser className="h-4 w-4" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <h2 className="text-sm font-semibold text-foreground">
+                    Chrome extension for browser logs
+                  </h2>
+                  <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
+                    Use the extension when you want a recording plus redacted
+                    console and fetch/XHR diagnostics from the tab you launch
+                    from. The desktop app is still the smoothest everyday
+                    recorder.
+                  </p>
+                </div>
+              </div>
+              <Button
+                asChild={Boolean(clipsChromeExtensionUrl)}
+                disabled={!clipsChromeExtensionUrl}
+                variant="outline"
+                className="mt-4 w-full gap-2"
+              >
+                {clipsChromeExtensionUrl ? (
+                  <a
+                    href={clipsChromeExtensionUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <IconExternalLink className="h-4 w-4" />
+                    Install Chrome extension
+                  </a>
+                ) : (
+                  <>
+                    <IconExternalLink className="h-4 w-4" />
+                    Chrome Web Store URL pending
+                  </>
+                )}
+              </Button>
+            </section>
+          )}
         </div>
       </main>
     </div>

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

@@ -71,6 +71,7 @@ async function writeAppState(key: string, value: unknown): Promise<void> {
 }
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import { CaptureInstallButton } from "@/components/capture-install-options";
 import { toast } from "sonner";
 
 import { PreRecordPanel } from "@/components/recorder/pre-record-panel";
@@ -542,13 +543,12 @@ function DesktopRecorderCallout() {
           </p>
         </div>
       </div>
-      <Button
-        asChild
+      <CaptureInstallButton
         size="sm"
         className="mt-4 w-full bg-primary text-primary-foreground hover:bg-primary/90"
       >
-        <Link to="/download">Download desktop app</Link>
-      </Button>
+        Download desktop app
+      </CaptureInstallButton>
     </aside>
   );
 }

package/corpus/templates/clips/app/routes/share.$shareId.tsx

@@ -41,6 +41,7 @@ import { DeleteRecordingMenu } from "@/components/player/delete-recording-menu";
 import { usePlayerShortcuts } from "@/hooks/use-player-shortcuts";
 import { useViewTracking } from "@/hooks/use-view-tracking";
 import { Button } from "@/components/ui/button";
+import { CaptureInstallButton } from "@/components/capture-install-options";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -1004,12 +1005,10 @@ function PublicAgentEmptyState() {
         Loom alternative
       </p>
       <div className="mt-7 flex w-full max-w-[220px] flex-col gap-2">
-        <Button asChild className="w-full gap-2">
-          <a href={appPath("/download")}>
-            <IconDownload className="h-4 w-4" />
-            {downloadLabel}
-          </a>
-        </Button>
+        <CaptureInstallButton className="w-full gap-2" align="center">
+          <IconDownload className="h-4 w-4" />
+          {downloadLabel}
+        </CaptureInstallButton>
         <Button asChild variant="outline" className="w-full">
           <a href={appPath("/signup")}>Sign up</a>
         </Button>

package/corpus/templates/clips/chrome-extension/STORE_DRAFT.md

@@ -39,3 +39,29 @@ Diagnostics are bounded and redacted before they are saved. Clips does not colle
 ## Review Notes
 
 The extension opens `https://clips.agent-native.com/record` by default. Local development can point the settings page to a localhost Clips instance.
+
+## Submission Artifact
+
+Build the latest Chrome Web Store ZIP from the repo root:
+
+```bash
+pnpm --filter clips-chrome-extension package
+```
+
+Upload the generated artifact:
+
+```txt
+templates/clips/chrome-extension/releases/clips-chrome-extension-0.1.0.zip
+```
+
+## Web App Rollout Gate
+
+Keep the web app's Chrome extension UI hidden until the Web Store listing is
+approved and there is a stable public URL.
+
+- `VITE_CLIPS_CHROME_EXTENSION_ENABLED=1` reveals the Chrome option beside
+  Clips desktop prompts.
+- `VITE_CLIPS_CHROME_EXTENSION_URL=<chrome-web-store-url>` powers the install
+  links.
+- Leave both unset while submitting the draft so production continues to send
+  users directly to the desktop app.

package/corpus/templates/clips/server/lib/calendar-event-meetings.ts

@@ -12,7 +12,8 @@ import {
   detectPlatform,
   getEvent,
   pickJoinUrl,
-  refreshAccessToken,
+  resolveGoogleOAuthCredentialCandidates,
+  refreshAccessTokenWithFallback,
   type CalendarEvent,
 } from "./google-calendar-client.js";
 
@@ -77,9 +78,8 @@ export function shouldMarkNeedsReauth(message: string): boolean {
 export async function resolveCalendarAccessToken(
   account: CalendarAccountForEvents,
 ): Promise<string | null> {
-  const clientId = process.env.GOOGLE_CLIENT_ID;
-  const clientSecret = process.env.GOOGLE_CLIENT_SECRET;
-  if (!clientId || !clientSecret || !account.ownerEmail) return null;
+  const credentialCandidates = resolveGoogleOAuthCredentialCandidates();
+  if (!credentialCandidates.length || !account.ownerEmail) return null;
 
   let bundle: AccessTokenBundle | null = null;
   if (account.accessTokenSecretRef) {
@@ -112,10 +112,9 @@ export async function resolveCalendarAccessToken(
 
   let refreshed;
   try {
-    refreshed = await refreshAccessToken({
+    refreshed = await refreshAccessTokenWithFallback({
       refreshToken: refreshSecret.value,
-      clientId,
-      clientSecret,
+      credentials: credentialCandidates,
     });
   } catch {
     // TODO(needs-reauth classification): a transient refresh failure (network