@agent-native/core 0.68.0 → 0.68.2

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

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

@@ -82,6 +82,35 @@ export interface ExchangeCodeArgs {
   redirectUri: string;
 }
 
+export interface GoogleOAuthClientCredentials {
+  clientId: string;
+  clientSecret: string;
+}
+
+function readCredentialPair(
+  clientIdKey: string,
+  clientSecretKey: string,
+): GoogleOAuthClientCredentials | null {
+  const clientId = process.env[clientIdKey];
+  const clientSecret = process.env[clientSecretKey];
+  if (!clientId || !clientSecret) return null;
+  return { clientId, clientSecret };
+}
+
+export function resolveGoogleOAuthCredentialCandidates(): GoogleOAuthClientCredentials[] {
+  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];
+}
+
 /** Exchange an authorization code for tokens. Throws on non-2xx. */
 export async function exchangeCode(
   args: ExchangeCodeArgs,
@@ -129,6 +158,38 @@ export async function refreshAccessToken(args: {
   return (await res.json()) as GoogleTokenResponse;
 }
 
+function isPermanentRefreshFailure(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error || "");
+  const lower = message.toLowerCase();
+  return (
+    lower.includes("invalid_grant") ||
+    lower.includes("unauthorized_client") ||
+    lower.includes("invalid_client")
+  );
+}
+
+export async function refreshAccessTokenWithFallback(args: {
+  refreshToken: string;
+  credentials: GoogleOAuthClientCredentials[];
+}): Promise<GoogleTokenResponse> {
+  let lastError: unknown;
+  for (const credentials of args.credentials) {
+    try {
+      return await refreshAccessToken({
+        refreshToken: args.refreshToken,
+        clientId: credentials.clientId,
+        clientSecret: credentials.clientSecret,
+      });
+    } catch (error) {
+      lastError = error;
+      if (!isPermanentRefreshFailure(error)) throw error;
+    }
+  }
+  throw lastError instanceof Error
+    ? lastError
+    : new Error("Google token refresh failed.");
+}
+
 /** Best-effort revoke. Returns true if Google returned 2xx, false otherwise. */
 export async function revokeToken(token: string): Promise<boolean> {
   try {

package/corpus/templates/clips/server/routes/_agent-native/google/auth-url.get.ts

@@ -8,6 +8,7 @@ import {
   encodeOAuthState,
   getSession,
   isElectron,
+  resolveGoogleSignInCredentials,
   resolveOAuthRedirectUri,
   safeReturnPath,
 } from "@agent-native/core/server";
@@ -34,17 +35,6 @@ function oauthRedirectResponse(url: string) {
 }
 
 export default defineEventHandler(async (event: H3Event) => {
-  const clientId = process.env.GOOGLE_CLIENT_ID;
-  const clientSecret = process.env.GOOGLE_CLIENT_SECRET;
-  if (!clientId || !clientSecret) {
-    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);
@@ -67,6 +57,23 @@ export default defineEventHandler(async (event: H3Event) => {
     const returnUrl = requestedReturn !== "/" ? requestedReturn : undefined;
     const calendarConnect =
       q.calendar === "1" || q.calendar === "true" || q.product === "calendar";
+    const credentials = calendarConnect
+      ? process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET
+        ? {
+            clientId: process.env.GOOGLE_CLIENT_ID,
+            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+          }
+        : null
+      : 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);
@@ -87,7 +94,7 @@ export default defineEventHandler(async (event: H3Event) => {
     });
 
     const params = new URLSearchParams({
-      client_id: clientId,
+      client_id: credentials.clientId,
       redirect_uri: redirectUri,
       response_type: "code",
       state,

package/corpus/templates/clips/server/routes/_agent-native/google/callback.get.ts

@@ -10,6 +10,7 @@ import {
   getAppUrl,
   oauthCallbackResponse,
   oauthErrorPage,
+  resolveGoogleSignInCredentials,
   resolveOAuthOwner,
   setDesktopExchange,
   type OAuthStatePayload,
@@ -51,11 +52,10 @@ async function handleGoogleSignInCallback(
       return { error: "Missing authorization code" };
     }
 
-    const clientId = process.env.GOOGLE_CLIENT_ID;
-    const clientSecret = process.env.GOOGLE_CLIENT_SECRET;
-    if (!clientId || !clientSecret) {
+    const credentials = resolveGoogleSignInCredentials();
+    if (!credentials) {
       return oauthErrorPage(
-        "Google OAuth is not configured (missing client id/secret).",
+        "Google sign-in is not configured (missing client id/secret).",
       );
     }
 
@@ -66,8 +66,8 @@ async function handleGoogleSignInCallback(
       },
       body: new URLSearchParams({
         code,
-        client_id: clientId,
-        client_secret: clientSecret,
+        client_id: credentials.clientId,
+        client_secret: credentials.clientSecret,
         redirect_uri: state.redirectUri,
         grant_type: "authorization_code",
       }),

package/corpus/templates/design/actions/show-design-questions.ts

@@ -47,6 +47,18 @@ const questionSchema = z.object({
   includeDecide: z.boolean().optional(),
 });
 
+function normalizeDesignQuestions(
+  questions: z.infer<typeof questionSchema>[],
+): z.infer<typeof questionSchema>[] {
+  return questions.map((question) => ({
+    ...question,
+    // The agent supplies Explore/Decide choices explicitly when needed.
+    // Default injection duplicates cards on every question in the form.
+    includeExplore: question.includeExplore ?? false,
+    includeDecide: question.includeDecide ?? false,
+  }));
+}
+
 export default defineAction({
   description:
     "Show a Claude Design-style question form in the Design editor before " +
@@ -95,6 +107,8 @@ export default defineAction({
   }) => {
     await assertAccess("design", designId, "editor");
 
+    const normalizedQuestions = normalizeDesignQuestions(questions);
+
     await writeAppState(designQuestionsStateKey(designId), {
       designId,
       title: title ?? "Quick questions before I design",
@@ -103,7 +117,7 @@ export default defineAction({
         "Pick what matters. Use Other for specifics, or let the agent decide.",
       skipLabel: skipLabel ?? "Decide for me",
       submitLabel: submitLabel ?? "Continue",
-      questions,
+      questions: normalizedQuestions,
     });
 
     return {