@agent-native/core 0.68.0 → 0.68.2

package/corpus/templates/calendar/server/handlers/google-auth.ts

@@ -9,6 +9,7 @@ import {
   getSession,
   isElectron,
   getAppUrl,
+  resolveGoogleSignInCredentials,
   resolveOAuthRedirectUri,
   encodeOAuthState,
   decodeOAuthState,
@@ -19,6 +20,7 @@ import {
   oauthErrorPage,
   setDesktopExchange,
   setDesktopExchangeError,
+  safeReturnPath,
 } from "@agent-native/core/server";
 import {
   getAuthUrl,
@@ -29,6 +31,85 @@ import {
 import { OAuthAccountOwnedByOtherUserError } from "@agent-native/core/oauth-tokens";
 
 const OAUTH_STATE_APP_ID = process.env.APP_NAME || "calendar";
+const GOOGLE_AUTH_URL = "https://accounts.google.com/o/oauth2/v2/auth";
+const GOOGLE_TOKEN_URL = "https://oauth2.googleapis.com/token";
+const GOOGLE_USERINFO_URL = "https://www.googleapis.com/oauth2/v2/userinfo";
+const GOOGLE_IDENTITY_SCOPES = [
+  "openid",
+  "https://www.googleapis.com/auth/userinfo.email",
+  "https://www.googleapis.com/auth/userinfo.profile",
+];
+
+function resolveCalendarOAuthCredentials() {
+  const clientId = process.env.GOOGLE_CLIENT_ID;
+  const clientSecret = process.env.GOOGLE_CLIENT_SECRET;
+  if (!clientId || !clientSecret) return null;
+  return { clientId, clientSecret };
+}
+
+function isCalendarConnectRequest(
+  query: Record<string, any>,
+  owner: string | undefined,
+) {
+  return (
+    !!owner ||
+    query.calendar === "1" ||
+    query.calendar === "true" ||
+    query.product === "calendar"
+  );
+}
+
+async function exchangeIdentityCode(
+  code: string,
+  redirectUri: string,
+): Promise<{
+  email: string;
+  id?: string;
+  name?: string;
+}> {
+  const credentials = resolveGoogleSignInCredentials();
+  if (!credentials) {
+    throw new Error(
+      "Google sign-in credentials are not configured. Set GOOGLE_SIGN_IN_CLIENT_ID and GOOGLE_SIGN_IN_CLIENT_SECRET.",
+    );
+  }
+
+  const tokenRes = await fetch(GOOGLE_TOKEN_URL, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: new URLSearchParams({
+      code,
+      client_id: credentials.clientId,
+      client_secret: credentials.clientSecret,
+      redirect_uri: redirectUri,
+      grant_type: "authorization_code",
+    }),
+  });
+  const tokens = await tokenRes.json();
+  if (!tokenRes.ok) {
+    throw new Error(
+      tokens.error_description || tokens.error || "Token exchange failed",
+    );
+  }
+
+  const userRes = await fetch(GOOGLE_USERINFO_URL, {
+    headers: { Authorization: `Bearer ${tokens.access_token}` },
+  });
+  const user = await userRes.json();
+  const email = user.email as string | undefined;
+  if (!email) throw new Error("Could not get email from Google");
+  if (user.verified_email !== true) {
+    throw new Error(
+      "Google account email is not verified. Please verify your email with Google and try again.",
+    );
+  }
+
+  return {
+    email,
+    id: typeof user.id === "string" ? user.id : undefined,
+    name: typeof user.name === "string" ? user.name : undefined,
+  };
+}
 
 function oauthRedirectResponse(url: string) {
   // h3 v2 sendRedirect returns an object the framework shim can stringify as
@@ -93,14 +174,6 @@ function googleOAuthErrorResponse(
 }
 
 export const getGoogleAuthUrl = defineEventHandler(async (event: H3Event) => {
-  if (!process.env.GOOGLE_CLIENT_ID || !process.env.GOOGLE_CLIENT_SECRET) {
-    setResponseStatus(event, 422);
-    return {
-      error: "missing_credentials",
-      message:
-        "Google OAuth credentials are not configured. Set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET.",
-    };
-  }
   try {
     const q = getQuery(event);
     const redirectUri = resolveOAuthRedirectUri(event);
@@ -116,17 +189,55 @@ export const getGoogleAuthUrl = defineEventHandler(async (event: H3Event) => {
     const desktop =
       isElectron(event) || q.desktop === "1" || q.desktop === "true";
     const flowId = desktop ? (q.flow_id as string) || undefined : undefined;
+    const calendarConnect = isCalendarConnectRequest(q, owner);
+    const credentials = calendarConnect
+      ? resolveCalendarOAuthCredentials()
+      : resolveGoogleSignInCredentials();
+
+    if (!credentials) {
+      setResponseStatus(event, 422);
+      return {
+        error: "missing_credentials",
+        message: calendarConnect
+          ? "Google Calendar OAuth credentials are not configured. Set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET."
+          : "Google sign-in credentials are not configured. Set GOOGLE_SIGN_IN_CLIENT_ID and GOOGLE_SIGN_IN_CLIENT_SECRET.",
+      };
+    }
+
+    if (calendarConnect && !owner) {
+      setResponseStatus(event, 401);
+      return {
+        error: "not_authenticated",
+        message: "Sign in before connecting Google Calendar.",
+      };
+    }
+
+    const requestedReturn =
+      typeof q.return === "string" ? safeReturnPath(q.return) : "/";
+    const returnUrl = requestedReturn !== "/" ? requestedReturn : undefined;
     // Use the named-arg overload — the positional form previously passed
     // `flowId` in the `returnUrl` slot, breaking desktop completion.
     const state = encodeOAuthState({
       redirectUri,
       owner,
       desktop,
-      addAccount: false,
+      addAccount: calendarConnect,
       app: OAUTH_STATE_APP_ID,
+      returnUrl,
       flowId,
     });
-    const url = getAuthUrl(undefined, redirectUri, state);
+
+    const url = calendarConnect
+      ? getAuthUrl(undefined, redirectUri, state)
+      : `${GOOGLE_AUTH_URL}?${new URLSearchParams({
+          client_id: credentials.clientId,
+          redirect_uri: redirectUri,
+          response_type: "code",
+          scope: GOOGLE_IDENTITY_SCOPES.join(" "),
+          access_type: "online",
+          prompt: "select_account",
+          state,
+        })}`;
     if (q.redirect === "1") {
       return oauthRedirectResponse(url);
     }
@@ -172,7 +283,7 @@ export const handleGoogleCallback = defineEventHandler(
         return { error: "Missing authorization code" };
       }
 
-      const { redirectUri, owner: stateOwner, addAccount } = state;
+      const { redirectUri, owner: stateOwner, addAccount, returnUrl } = state;
 
       // 1. Resolve owner (needs session context, before exchangeCode)
       const { owner, hasProductionSession } = await resolveOAuthOwner(
@@ -180,7 +291,36 @@ export const handleGoogleCallback = defineEventHandler(
         stateOwner,
       );
 
-      // 2. Exchange code with Google (template-specific)
+      if (!addAccount) {
+        const identity = await exchangeIdentityCode(code, redirectUri);
+        const { sessionToken } = await createOAuthSession(
+          event,
+          identity.email,
+          {
+            hasProductionSession,
+            desktop,
+            trackSignup: {
+              authProvider: "google",
+              authUserId: identity.id,
+              name: identity.name,
+            },
+          },
+        );
+
+        if (flowId && sessionToken) {
+          setDesktopExchange(flowId, sessionToken, identity.email);
+        }
+
+        return oauthCallbackResponse(event, identity.email, {
+          sessionToken,
+          desktop,
+          returnUrl,
+          flowId,
+          appName: "Calendar",
+        });
+      }
+
+      // 2. Exchange code with Google (template-specific Calendar connect)
       const email = await exchangeCode(code, undefined, redirectUri, owner);
 
       // 3. Create session token (after we have the email)

package/corpus/templates/calendar/server/lib/google-calendar.ts

@@ -46,21 +46,59 @@ interface GoogleTokens {
   photoUrl?: string;
 }
 
+interface GoogleOAuthCredentials {
+  clientId: string;
+  clientSecret: string;
+}
+
 function optionalString(value: unknown): string | undefined {
   return typeof value === "string" && value.length > 0 ? value : undefined;
 }
 
 function getOAuth2Credentials() {
-  const clientId = process.env.GOOGLE_CLIENT_ID;
-  const clientSecret = process.env.GOOGLE_CLIENT_SECRET;
-  if (!clientId || !clientSecret) {
+  const credentials = resolveGoogleProviderCredentialCandidates()[0];
+  if (!credentials) {
     throw new Error(
       "GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET must be set in environment",
     );
   }
+  return credentials;
+}
+
+function getOAuth2RefreshCredentials() {
+  const candidates = resolveGoogleProviderCredentialCandidates();
+  if (!candidates.length) {
+    throw new Error(
+      "GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET must be set in environment",
+    );
+  }
+  return candidates;
+}
+
+function readCredentialPair(
+  clientIdKey: string,
+  clientSecretKey: string,
+): GoogleOAuthCredentials | null {
+  const clientId = process.env[clientIdKey];
+  const clientSecret = process.env[clientSecretKey];
+  if (!clientId || !clientSecret) return null;
   return { clientId, clientSecret };
 }
 
+function resolveGoogleProviderCredentialCandidates(): GoogleOAuthCredentials[] {
+  const primary = readCredentialPair(
+    "GOOGLE_CLIENT_ID",
+    "GOOGLE_CLIENT_SECRET",
+  );
+  const legacy = readCredentialPair(
+    "GOOGLE_LEGACY_CLIENT_ID",
+    "GOOGLE_LEGACY_CLIENT_SECRET",
+  );
+  if (!primary) return legacy ? [legacy] : [];
+  if (!legacy || legacy.clientId === primary.clientId) return [primary];
+  return [primary, legacy];
+}
+
 /**
  * Permanent OAuth refresh failures Google can return. When we hit one of
  * these, the refresh_token is dead — keeping the row around makes
@@ -316,17 +354,27 @@ async function getValidAccessToken(
       );
     }
     try {
-      const { clientId, clientSecret } = getOAuth2Credentials();
-      const oauth2 = createOAuth2Client(clientId, clientSecret, "");
-      const newTokens = await oauth2.refreshToken(tokens.refresh_token);
-      const merged = { ...tokens, ...newTokens };
-      await saveOAuthTokens(
-        "google",
-        accountId,
-        merged as unknown as Record<string, unknown>,
-        owner ?? accountId,
-      );
-      return merged.access_token;
+      let lastRefreshError: any;
+      for (const { clientId, clientSecret } of getOAuth2RefreshCredentials()) {
+        try {
+          const oauth2 = createOAuth2Client(clientId, clientSecret, "");
+          const newTokens = await oauth2.refreshToken(tokens.refresh_token);
+          const merged = { ...tokens, ...newTokens };
+          await saveOAuthTokens(
+            "google",
+            accountId,
+            merged as unknown as Record<string, unknown>,
+            owner ?? accountId,
+          );
+          return merged.access_token;
+        } catch (err: any) {
+          lastRefreshError = err;
+          if (!isPermanentRefreshError(err?.message || "")) {
+            throw err;
+          }
+        }
+      }
+      throw lastRefreshError;
     } catch (err: any) {
       if (isPermanentRefreshError(err?.message || "")) {
         // Drop the dead row so isOAuthConnected returns false and the UI
@@ -860,6 +908,7 @@ export async function listOverlayEvents(
           eventType: event.eventType || "default",
           accountEmail: undefined,
           overlayEmail,
+          ...mapColor(event),
           attendees: mapAttendees(event),
           organizer: mapOrganizer(event),
           createdAt: event.created || new Date().toISOString(),

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,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;