@agent-native/core 0.68.1 → 0.68.3

package/corpus/templates/calendar/server/plugins/auth.ts

@@ -1,28 +1,12 @@
 import { createAuthPlugin } from "@agent-native/core/server";
 
-// Calendar requires a Google connection to read/write events, so the
-// onboarding page only offers "Sign in with Google" — no email/password
-// account creation, since that path can't be used to access the calendar.
-//
-// Calendar/Contacts/Directory scopes are requested up front during the
-// primary "Sign in with Google" flow. Tokens land in the framework's
-// `oauth_tokens` table automatically (via a Better Auth account hook)
-// so the existing `templates/calendar/server/lib/google-calendar.ts`
-// client works on first sign-in — no separate "Connect Google" page
-// needed. The template-specific routes under `/_agent-native/google/*`
-// remain available for "add another account" flows.
+// Calendar keeps Google as the primary auth surface, but the first sign-in is
+// identity-only. The template-owned `/_agent-native/google/*` routes request
+// Calendar/Contacts/Directory scopes only after there is a signed-in owner, so
+// basic login stays isolated from product API verification/blocking issues.
 export default createAuthPlugin({
   googleOnly: true,
   mountGoogleOAuthRoutes: false,
-  googleScopes: [
-    "https://www.googleapis.com/auth/calendar.readonly",
-    "https://www.googleapis.com/auth/calendar.events",
-    "https://www.googleapis.com/auth/userinfo.email",
-    "https://www.googleapis.com/auth/userinfo.profile",
-    "https://www.googleapis.com/auth/directory.readonly",
-    "https://www.googleapis.com/auth/contacts.readonly",
-    "https://www.googleapis.com/auth/contacts.other.readonly",
-  ],
   marketing: {
     appName: "Agent-Native Calendar",
     tagline:

package/corpus/templates/calendar/shared/api.ts

@@ -17,6 +17,10 @@ export interface CalendarEvent {
   accountEmail?: string;
   /** Set when this event belongs to an overlaid person's calendar */
   overlayEmail?: string;
+  /** Client-only marker for overlaid calendar ownership */
+  ownerColor?: string;
+  /** Client-only display name for the overlaid calendar owner */
+  ownerName?: string;
   color?: string;
   /** Google Calendar event color id (1-11). */
   colorId?: string;

package/corpus/templates/clips/.agents/skills/recording/SKILL.md

@@ -48,6 +48,23 @@ Loom iframe and the native Clips editor is hidden for those recordings. If the
 user needs Clips-native trimming, exports, frame extraction, or upload-based
 transcription, ask them to upload the original video file instead.
 
+## Browser diagnostics and recorder install options
+
+Browser recordings can save bounded, redacted diagnostics through
+`createBrowserDiagnosticsCapture`: console messages plus fetch/XHR method, URL,
+status, duration, and errors. The browser recorder only captures activity from
+the recorder page itself. The Clips Chrome extension is the active-tab path for
+browser logs: it launches `/record` with an extension capture session and passes
+`developerLogs=1/0`, then saves diagnostics with source `extension`.
+
+Keep the public Chrome extension option hidden until the Web Store listing is
+live. UI prompts that otherwise say "Download desktop app" should use the shared
+install-choice component so `VITE_CLIPS_CHROME_EXTENSION_ENABLED=1` can reveal
+two options: Chrome extension for browser logs, and desktop app for the most
+seamless native capture. Also set `VITE_CLIPS_CHROME_EXTENSION_URL` when the
+extension URL exists; leave the boolean unset while preparing/submitting the
+listing.
+
 ## Pause / resume
 
 `MediaRecorder.pause()` / `.resume()` are supported in all evergreen browsers. Keep a single `MediaRecorder` instance across pauses — don't tear down the stream, or the permission prompt will fire again. While paused, the upload worker keeps draining its buffer so we catch up before the user stops.

package/corpus/templates/clips/actions/sync-calendars.ts

@@ -21,7 +21,8 @@ import { accessFilter } from "@agent-native/core/sharing";
 import { readAppSecret, writeAppSecret } from "@agent-native/core/secrets";
 import {
   listEvents,
-  refreshAccessToken,
+  resolveGoogleOAuthCredentialCandidates,
+  refreshAccessTokenWithFallback,
   pickJoinUrl,
   type CalendarEvent,
 } from "../server/lib/google-calendar-client.js";
@@ -55,9 +56,8 @@ async function resolveAccessToken(args: {
   accessRef: string | null;
   refreshRef: string | null;
 }): Promise<string | null> {
-  const clientId = process.env.GOOGLE_CLIENT_ID;
-  const clientSecret = process.env.GOOGLE_CLIENT_SECRET;
-  if (!clientId || !clientSecret) return null;
+  const credentialCandidates = resolveGoogleOAuthCredentialCandidates();
+  if (!credentialCandidates.length) return null;
 
   let bundle: AccessTokenBundle | null = null;
   if (args.accessRef) {
@@ -93,10 +93,9 @@ async function resolveAccessToken(args: {
 
   let refreshed;
   try {
-    refreshed = await refreshAccessToken({
+    refreshed = await refreshAccessTokenWithFallback({
       refreshToken: refreshSecret.value,
-      clientId,
-      clientSecret,
+      credentials: credentialCandidates,
     });
   } catch {
     return null;

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,14 @@
+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() ??
+  "https://chromewebstore.google.com/detail/baoipacpchggcdigagnajakiidcgcffn";
+
+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>
   );
 }