@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

package/corpus/templates/clips/app/components/recorder/storage-setup-card.tsx

@@ -1,6 +1,9 @@
 import { agentNativePath, appPath } from "@agent-native/core/client/api-path";
 import { useT } from "@agent-native/core/client/i18n";
-import { openBuilderConnectPopup } from "@agent-native/core/client/settings";
+import {
+  BuilderConnectPopover,
+  useBuilderConnectFlow,
+} from "@agent-native/core/client/settings";
 import {
   IconCheck,
   IconCloud,
@@ -62,6 +65,7 @@ export function StorageSetupCard({
   const mountedRef = useRef(true);
   const inFlightRef = useRef(false);
   const visibilityHandlerRef = useRef<(() => void) | null>(null);
+  const connectRequestedRef = useRef(false);
 
   const stopVisibilityHandler = useCallback(() => {
     if (visibilityHandlerRef.current) {
@@ -73,19 +77,7 @@ export function StorageSetupCard({
     }
   }, []);
 
-  useEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-      if (pollRef.current) {
-        clearInterval(pollRef.current);
-        pollRef.current = null;
-      }
-      stopVisibilityHandler();
-    };
-  }, [stopVisibilityHandler]);
-
-  const handleConnect = useCallback(() => {
+  const startFileUploadPoll = useCallback(() => {
     if (pollRef.current) {
       clearInterval(pollRef.current);
       pollRef.current = null;
@@ -95,11 +87,6 @@ export function StorageSetupCard({
     setConnecting(true);
     setErr(null);
 
-    openBuilderConnectPopup({
-      source: connectSource,
-      flow: connectFlow,
-    });
-
     const start = Date.now();
     const timeoutMs = 5 * 60 * 1000;
     const stop = () => {
@@ -154,7 +141,39 @@ export function StorageSetupCard({
       if (!document.hidden) void tick();
     };
     document.addEventListener("visibilitychange", visibilityHandlerRef.current);
-  }, [onConfigured, connectSource, connectFlow, stopVisibilityHandler, t]);
+  }, [onConfigured, stopVisibilityHandler, t]);
+
+  const handleBuilderConnected = useCallback(() => {
+    if (!connectRequestedRef.current) return;
+    connectRequestedRef.current = false;
+    startFileUploadPoll();
+  }, [startFileUploadPoll]);
+
+  const builderConnect = useBuilderConnectFlow({
+    provisionAccount: true,
+    trackingSource: connectSource,
+    trackingFlow: connectFlow,
+    onConnected: handleBuilderConnected,
+  });
+  const handleBuilderConnect = useCallback(
+    (provisionAccount: boolean) => {
+      connectRequestedRef.current = true;
+      builderConnect.start({ provisionAccount });
+    },
+    [builderConnect.start],
+  );
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+        pollRef.current = null;
+      }
+      stopVisibilityHandler();
+    };
+  }, [stopVisibilityHandler]);
 
   return (
     <div className="mx-auto flex w-full max-w-md flex-col gap-5 rounded-2xl border border-border bg-card p-6 shadow-lg">
@@ -167,55 +186,59 @@ export function StorageSetupCard({
       </div>
 
       {/* Builder.io — primary option, one-click Connect flow. */}
-      <button
-        type="button"
-        onClick={handleConnect}
-        disabled={connecting || connected}
-        className={
-          "flex items-start gap-3 rounded-xl border px-4 py-3.5 text-start transition-colors " +
-          (connected
-            ? "border-primary/50 bg-primary/5"
-            : "border-primary bg-primary text-primary-foreground hover:bg-primary/90")
-        }
+      <BuilderConnectPopover
+        flow={builderConnect}
+        onConnect={handleBuilderConnect}
       >
-        <div
+        <button
+          type="button"
+          disabled={connecting || connected}
           className={
-            "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg " +
+            "flex items-start gap-3 rounded-xl border px-4 py-3.5 text-start transition-colors " +
             (connected
-              ? "bg-foreground text-background"
-              : "bg-primary-foreground/15 text-primary-foreground")
+              ? "border-primary/50 bg-primary/5"
+              : "border-primary bg-primary text-primary-foreground hover:bg-primary/90")
           }
         >
-          {connected ? (
-            <IconCheck className="h-5 w-5" />
-          ) : connecting ? (
-            <IconLoader2 className="h-5 w-5 animate-spin" />
-          ) : (
-            <BuilderBMark className="h-5 w-5" />
-          )}
-        </div>
-        <div className="flex-1">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-medium">
-              {connected
-                ? t("storageSetup.builderConnected")
-                : connecting
-                  ? t("storageSetup.waitingForBuilder")
-                  : t("storageSetup.connectBuilder")}
-            </span>
-          </div>
-          <span
+          <div
             className={
-              "mt-0.5 block text-xs " +
+              "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg " +
               (connected
-                ? "text-muted-foreground"
-                : "text-primary-foreground/80")
+                ? "bg-foreground text-background"
+                : "bg-primary-foreground/15 text-primary-foreground")
             }
           >
-            {connected ? connectedDescription : connectDescription}
-          </span>
-        </div>
-      </button>
+            {connected ? (
+              <IconCheck className="h-5 w-5" />
+            ) : connecting ? (
+              <IconLoader2 className="h-5 w-5 animate-spin" />
+            ) : (
+              <BuilderBMark className="h-5 w-5" />
+            )}
+          </div>
+          <div className="flex-1">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium">
+                {connected
+                  ? t("storageSetup.builderConnected")
+                  : connecting
+                    ? t("storageSetup.waitingForBuilder")
+                    : t("storageSetup.connectBuilder")}
+              </span>
+            </div>
+            <span
+              className={
+                "mt-0.5 block text-xs " +
+                (connected
+                  ? "text-muted-foreground"
+                  : "text-primary-foreground/80")
+              }
+            >
+              {connected ? connectedDescription : connectDescription}
+            </span>
+          </div>
+        </button>
+      </BuilderConnectPopover>
 
       {err && <p className="text-xs text-muted-foreground">{err}</p>}
 

package/corpus/templates/clips/app/components/settings/ai-setup-section.tsx

@@ -3,6 +3,7 @@ import { useT } from "@agent-native/core/client/i18n";
 import {
   AGENT_PROVIDER_CATALOG,
   AgentProviderSetupForm,
+  BuilderConnectPopover,
   SettingsGroup,
   SettingsRow,
   type AgentProviderId,
@@ -104,23 +105,28 @@ export function AiSetupSection({ builder, secrets }: AiSetupSectionProps) {
                   Builder.io
                 </span>
               ) : (
-                <Button
-                  type="button"
-                  variant="default"
-                  size="sm"
-                  onClick={() =>
+                <BuilderConnectPopover
+                  flow={builder.connectFlow}
+                  onConnect={(provisionAccount) =>
                     builder.start({
+                      provisionAccount,
                       trackingSource: "clips_settings_ai_setup",
                       trackingFlow: "connect_llm",
                     })
                   }
-                  disabled={builder.connecting || builder.loading}
                 >
-                  {builder.connecting ? (
-                    <IconLoader2 className="h-4 w-4 animate-spin" />
-                  ) : null}
-                  {t("settings.connectBuilder")}
-                </Button>
+                  <Button
+                    type="button"
+                    variant="default"
+                    size="sm"
+                    disabled={builder.connecting || builder.loading}
+                  >
+                    {builder.connecting ? (
+                      <IconLoader2 className="h-4 w-4 animate-spin" />
+                    ) : null}
+                    {t("settings.connectBuilder")}
+                  </Button>
+                </BuilderConnectPopover>
               )}
               <CollapsibleTrigger asChild>
                 <Button type="button" variant="outline" size="sm">

package/corpus/templates/clips/app/components/settings/types.ts

@@ -1,4 +1,7 @@
-import type { BuilderConnectStartOptions } from "@agent-native/core/client/settings";
+import type {
+  BuilderConnectFlow,
+  BuilderConnectStartOptions,
+} from "@agent-native/core/client/settings";
 
 /**
  * The Builder.io connection as the settings sections need it. Video storage
@@ -11,4 +14,5 @@ export interface BuilderConnection {
   connecting: boolean;
   orgName: string | null;
   start: (options?: BuilderConnectStartOptions) => void;
+  connectFlow: BuilderConnectFlow;
 }

package/corpus/templates/clips/app/components/settings/video-storage-section.tsx

@@ -1,6 +1,10 @@
 import { agentNativePath } from "@agent-native/core/client/api-path";
 import { useT } from "@agent-native/core/client/i18n";
-import { SettingsGroup, SettingsRow } from "@agent-native/core/client/settings";
+import {
+  BuilderConnectPopover,
+  SettingsGroup,
+  SettingsRow,
+} from "@agent-native/core/client/settings";
 import { IconCheck, IconLoader2, IconTrash } from "@tabler/icons-react";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -242,23 +246,28 @@ export function VideoStorageSection({
                   {t("common.connected")}
                 </span>
               ) : (
-                <Button
-                  type="button"
-                  variant="default"
-                  size="sm"
-                  onClick={() =>
+                <BuilderConnectPopover
+                  flow={builder.connectFlow}
+                  onConnect={(provisionAccount) =>
                     builder.start({
+                      provisionAccount,
                       trackingSource: "clips_settings_video_storage",
                       trackingFlow: "video_storage",
                     })
                   }
-                  disabled={builder.connecting || builder.loading}
                 >
-                  {builder.connecting ? (
-                    <IconLoader2 className="h-4 w-4 animate-spin" />
-                  ) : null}
-                  {t("settings.connectBuilder")}
-                </Button>
+                  <Button
+                    type="button"
+                    variant="default"
+                    size="sm"
+                    disabled={builder.connecting || builder.loading}
+                  >
+                    {builder.connecting ? (
+                      <IconLoader2 className="h-4 w-4 animate-spin" />
+                    ) : null}
+                    {t("settings.connectBuilder")}
+                  </Button>
+                </BuilderConnectPopover>
               )}
               <CollapsibleTrigger asChild>
                 <Button type="button" variant="outline" size="sm">

package/corpus/templates/clips/app/global.css

@@ -155,33 +155,6 @@
   animation: clips-collapsible-up 120ms ease-out;
 }
 
-.clips-share-content {
-  container: clips-share-content / inline-size;
-}
-
-.clips-share-metadata-description {
-  order: 2;
-}
-
-.clips-share-metadata-actions {
-  order: 1;
-}
-
-@container clips-share-content (min-width: 860px) {
-  .clips-share-metadata {
-    align-items: flex-start;
-    flex-direction: row;
-  }
-
-  .clips-share-metadata-description {
-    order: 1;
-  }
-
-  .clips-share-metadata-actions {
-    order: 2;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .clips-collapsible-content[data-state] {
     animation-duration: 1ms;

package/corpus/templates/clips/app/hooks/use-desktop-promo.ts

@@ -1,10 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { useIsMobile } from "@/hooks/use-mobile";
-import {
-  hasDownloadedDesktopApp,
-  markDesktopAppDownloaded,
-} from "@/lib/capture-install-options";
 
 function detectDesktopApp(): boolean {
   if (typeof navigator === "undefined") return false;
@@ -24,27 +20,17 @@ export function useDesktopPromo() {
   const isMobile = useIsMobile();
   const [isDesktopApp, setIsDesktopApp] = useState(false);
   const [runtimeDetected, setRuntimeDetected] = useState(false);
-  const [dismissed, setDismissed] = useState(false);
 
   useEffect(() => {
     setIsDesktopApp(detectDesktopApp());
-    setDismissed(hasDownloadedDesktopApp());
-    // Keep desktop prompts hidden until the client runtime is known. This
-    // prevents the web CTA from flashing in the desktop shell's first render.
+    // Keep the web CTA hidden until the client runtime is known. This prevents
+    // it from flashing in the desktop shell's first render.
     setRuntimeDetected(true);
   }, []);
 
-  const dismiss = useCallback(() => {
-    setDismissed(true);
-    markDesktopAppDownloaded();
-  }, []);
-
   return {
     isDesktopApp,
     isMobile,
-    shouldShowPromo:
-      runtimeDetected && !isMobile && !isDesktopApp && !dismissed,
     shouldShowSidebarLink: runtimeDetected && !isMobile && !isDesktopApp,
-    dismiss,
   };
 }

package/corpus/templates/clips/app/hooks/use-mention-members.ts

@@ -0,0 +1,24 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+
+export interface MentionMember {
+  email: string;
+  name: string | null;
+}
+
+type MentionMembersResponse = { members: MentionMember[] };
+
+export function useMentionMembers(
+  recordingId?: string,
+  enabled = true,
+): { data: MentionMember[] } {
+  const query = useActionQuery<MentionMembersResponse>(
+    "list-recording-mention-members",
+    recordingId ? { recordingId } : undefined,
+    {
+      enabled: enabled && Boolean(recordingId),
+      retry: false,
+      staleTime: 60_000,
+    },
+  );
+  return { data: query.data?.members ?? [] };
+}

package/corpus/templates/clips/app/hooks/use-navigation-state.ts

@@ -43,7 +43,7 @@ interface NavigateCommand extends Partial<NavigationState> {
  *
  * Route conventions (keep in sync with the route files in app/routes):
  *
- *   /                           -> library
+ *   /home                       -> library
  *   /library                    -> library
  *   /library?q=...              -> library (with search)
  *   /library/folder/:folderId   -> library (with folderId)
@@ -146,7 +146,7 @@ export function stateFromLocation(
   }
   if (p === "/notifications") return { view: "notifications" };
   if (p.startsWith("/settings")) return { view: "settings" };
-  if (p === "/library" || p === "/" || p === "") {
+  if (p === "/library" || p === "/home") {
     return {
       view: "library",
       ...(searchTerm ? { search: searchTerm } : {}),

package/corpus/templates/clips/app/i18n/en-US.ts

@@ -631,6 +631,8 @@ const messages = {
     macSublabel: "Universal (Apple Silicon + Intel)",
     windowsSublabel: "64-bit MSI installer",
     downloadFor: "Download for {{platform}}",
+    downloadStarted: "Download started",
+    downloadAgain: "Didn't work? Try downloading again",
     alsoFor: "Also available for {{platform}}",
     backToLibrary: "Back to library",
     clipsDesktop: "Clips Desktop",
@@ -1053,6 +1055,10 @@ const messages = {
       "This can't be undone. Your recording so far will be permanently deleted.",
     resume: "Resume",
     discardRecording: "Discard recording",
+    restart: "Restart recording",
+    restartShortcut: "Restart (⌥⇧R)",
+    restartQuestion: "Start a new recording?",
+    restartConfirm: "Restart",
   },
   countdownOverlay: {
     startsIn: "Recording starts in {{count}}",
@@ -1526,6 +1532,15 @@ const messages = {
       "Open Clips from the menu bar to retry this saved upload; no need to re-record.",
     removeFailedClip: "Remove this failed clip.",
     remove: "Remove",
+    statusStalled: "stalled",
+    uploadAtRisk: "Taking longer than usual",
+    uploadAtRiskDetail:
+      "Still trying to save this clip. This can take a few minutes.",
+    retry: "Retry",
+    retrying: "Retrying…",
+    retryFailed: "Couldn't retry this upload.",
+    retryUnavailableHere:
+      "Retry is only available on the device or browser where this was recorded.",
     viewsCount: "{{count}} views",
     recordingMenu: "Recording menu",
     moveToFolder: "Move to folder",