@agent-native/core 0.114.15 → 0.114.16

package/bin/agent-native.js

@@ -5,6 +5,8 @@ import { existsSync, statSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 
+import { shouldUseSourceFallback } from "./launcher.js";
+
 const binDir = dirname(fileURLToPath(import.meta.url));
 const distEntry = join(binDir, "../dist/cli/index.js");
 const sourceEntry = join(binDir, "../src/cli/index.ts");
@@ -16,31 +18,50 @@ const freshnessChecks = [
   ],
 ];
 
-function shouldUseSourceFallback() {
-  if (!existsSync(sourceEntry)) return false;
-  if (!existsSync(distEntry)) return true;
+// The tsx source fallback and mtime freshness check are for local monorepo
+// development only. Published installs ship both src and dist, and tarball
+// extraction can leave .ts files newer than .js, which must not trigger tsx
+// (not a runtime dependency). Only consider the fallback in a source checkout.
+const isSourceCheckout = existsSync(join(binDir, "../tsconfig.cli.json"));
+
+function statMtimeMs(path) {
   try {
-    return freshnessChecks.some(
-      ([source, dist]) =>
-        existsSync(source) &&
-        existsSync(dist) &&
-        statSync(source).mtimeMs > statSync(dist).mtimeMs,
-    );
+    return statSync(path).mtimeMs;
   } catch {
-    return false;
+    return 0;
   }
 }
 
-if (!shouldUseSourceFallback() && existsSync(distEntry)) {
-  await import(pathToFileURL(distEntry).href);
-} else {
-  if (!existsSync(sourceEntry)) {
+const freshness = freshnessChecks.map(([source, dist]) => {
+  const sourceExists = existsSync(source);
+  const distExists = existsSync(dist);
+  return {
+    sourceExists,
+    distExists,
+    sourceMtimeMs: sourceExists ? statMtimeMs(source) : 0,
+    distMtimeMs: distExists ? statMtimeMs(dist) : 0,
+  };
+});
+
+const useSourceFallback = shouldUseSourceFallback({
+  isSourceCheckout,
+  sourceEntryExists: existsSync(sourceEntry),
+  distEntryExists: existsSync(distEntry),
+  freshness,
+});
+
+if (!useSourceFallback) {
+  // Installed packages (and up-to-date checkouts) always run the shipped build.
+  // tsx is not a runtime dependency, so it must never be invoked here.
+  if (!existsSync(distEntry)) {
     console.error(
       "agent-native CLI build output is missing. Run `pnpm --filter @agent-native/core build` and try again.",
     );
     process.exit(1);
   }
 
+  await import(pathToFileURL(distEntry).href);
+} else {
   const child = spawn("tsx", [sourceEntry, ...process.argv.slice(2)], {
     stdio: "inherit",
     env: process.env,

package/bin/launcher.js

@@ -0,0 +1,34 @@
+// Pure decision logic for the agent-native CLI launcher shim, kept dependency
+// free so it can be unit tested without touching the filesystem.
+//
+// The tsx source fallback and mtime freshness check exist for local monorepo
+// development only. Published installs ship both src and dist, and tarball
+// extraction can leave .ts files newer than .js — that must never route to tsx
+// (not a runtime dependency), or `npx @agent-native/core ...` fails with
+// `spawn tsx ENOENT`. The `isSourceCheckout` gate is what keeps installed
+// packages on the shipped dist build.
+
+/**
+ * @param {object} input
+ * @param {boolean} input.isSourceCheckout Whether we run from a monorepo checkout.
+ * @param {boolean} input.sourceEntryExists Whether the .ts CLI entry exists.
+ * @param {boolean} input.distEntryExists Whether the compiled .js CLI entry exists.
+ * @param {Array<{sourceExists: boolean, distExists: boolean, sourceMtimeMs: number, distMtimeMs: number}>} [input.freshness]
+ * @returns {boolean}
+ */
+export function shouldUseSourceFallback({
+  isSourceCheckout,
+  sourceEntryExists,
+  distEntryExists,
+  freshness = [],
+}) {
+  if (!isSourceCheckout) return false;
+  if (!sourceEntryExists) return false;
+  if (!distEntryExists) return true;
+  return freshness.some(
+    (pair) =>
+      pair.sourceExists &&
+      pair.distExists &&
+      pair.sourceMtimeMs > pair.distMtimeMs,
+  );
+}

package/corpus/README.md

@@ -28,6 +28,6 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- core files: 1520
+- core files: 1521
 - toolkit files: 137
 - template files: 6194

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @agent-native/core
 
+## 0.114.16
+
+### Patch Changes
+
+- 3a3eb9a: Fix `npx @agent-native/core create` failing with `spawn tsx ENOENT`. The CLI launcher's tsx source fallback is now scoped to monorepo source checkouts, so installed packages always run the shipped `dist` build even when tarball extraction leaves `.ts` files newer than their compiled `.js`.
+
 ## 0.114.15
 
 ### Patch Changes

package/corpus/core/bin/agent-native.js

@@ -5,6 +5,8 @@ import { existsSync, statSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 
+import { shouldUseSourceFallback } from "./launcher.js";
+
 const binDir = dirname(fileURLToPath(import.meta.url));
 const distEntry = join(binDir, "../dist/cli/index.js");
 const sourceEntry = join(binDir, "../src/cli/index.ts");
@@ -16,31 +18,50 @@ const freshnessChecks = [
   ],
 ];
 
-function shouldUseSourceFallback() {
-  if (!existsSync(sourceEntry)) return false;
-  if (!existsSync(distEntry)) return true;
+// The tsx source fallback and mtime freshness check are for local monorepo
+// development only. Published installs ship both src and dist, and tarball
+// extraction can leave .ts files newer than .js, which must not trigger tsx
+// (not a runtime dependency). Only consider the fallback in a source checkout.
+const isSourceCheckout = existsSync(join(binDir, "../tsconfig.cli.json"));
+
+function statMtimeMs(path) {
   try {
-    return freshnessChecks.some(
-      ([source, dist]) =>
-        existsSync(source) &&
-        existsSync(dist) &&
-        statSync(source).mtimeMs > statSync(dist).mtimeMs,
-    );
+    return statSync(path).mtimeMs;
   } catch {
-    return false;
+    return 0;
   }
 }
 
-if (!shouldUseSourceFallback() && existsSync(distEntry)) {
-  await import(pathToFileURL(distEntry).href);
-} else {
-  if (!existsSync(sourceEntry)) {
+const freshness = freshnessChecks.map(([source, dist]) => {
+  const sourceExists = existsSync(source);
+  const distExists = existsSync(dist);
+  return {
+    sourceExists,
+    distExists,
+    sourceMtimeMs: sourceExists ? statMtimeMs(source) : 0,
+    distMtimeMs: distExists ? statMtimeMs(dist) : 0,
+  };
+});
+
+const useSourceFallback = shouldUseSourceFallback({
+  isSourceCheckout,
+  sourceEntryExists: existsSync(sourceEntry),
+  distEntryExists: existsSync(distEntry),
+  freshness,
+});
+
+if (!useSourceFallback) {
+  // Installed packages (and up-to-date checkouts) always run the shipped build.
+  // tsx is not a runtime dependency, so it must never be invoked here.
+  if (!existsSync(distEntry)) {
     console.error(
       "agent-native CLI build output is missing. Run `pnpm --filter @agent-native/core build` and try again.",
     );
     process.exit(1);
   }
 
+  await import(pathToFileURL(distEntry).href);
+} else {
   const child = spawn("tsx", [sourceEntry, ...process.argv.slice(2)], {
     stdio: "inherit",
     env: process.env,

package/corpus/core/bin/launcher.js

@@ -0,0 +1,34 @@
+// Pure decision logic for the agent-native CLI launcher shim, kept dependency
+// free so it can be unit tested without touching the filesystem.
+//
+// The tsx source fallback and mtime freshness check exist for local monorepo
+// development only. Published installs ship both src and dist, and tarball
+// extraction can leave .ts files newer than .js — that must never route to tsx
+// (not a runtime dependency), or `npx @agent-native/core ...` fails with
+// `spawn tsx ENOENT`. The `isSourceCheckout` gate is what keeps installed
+// packages on the shipped dist build.
+
+/**
+ * @param {object} input
+ * @param {boolean} input.isSourceCheckout Whether we run from a monorepo checkout.
+ * @param {boolean} input.sourceEntryExists Whether the .ts CLI entry exists.
+ * @param {boolean} input.distEntryExists Whether the compiled .js CLI entry exists.
+ * @param {Array<{sourceExists: boolean, distExists: boolean, sourceMtimeMs: number, distMtimeMs: number}>} [input.freshness]
+ * @returns {boolean}
+ */
+export function shouldUseSourceFallback({
+  isSourceCheckout,
+  sourceEntryExists,
+  distEntryExists,
+  freshness = [],
+}) {
+  if (!isSourceCheckout) return false;
+  if (!sourceEntryExists) return false;
+  if (!distEntryExists) return true;
+  return freshness.some(
+    (pair) =>
+      pair.sourceExists &&
+      pair.distExists &&
+      pair.sourceMtimeMs > pair.distMtimeMs,
+  );
+}

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.114.15",
+  "version": "0.114.16",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/templates/clips/app/components/library/bulk-action-toolbar.tsx

@@ -27,6 +27,8 @@ export interface BulkMoveTarget {
 
 interface BulkActionToolbarProps {
   count: number;
+  allSelected?: boolean;
+  onSelectAll?: () => void;
   onArchive?: () => void;
   onMove?: (folderId: string | null) => void;
   onTrash?: () => void;
@@ -38,6 +40,8 @@ interface BulkActionToolbarProps {
 
 export function BulkActionToolbar({
   count,
+  allSelected = false,
+  onSelectAll,
   onArchive,
   onMove,
   onTrash,
@@ -53,17 +57,30 @@ export function BulkActionToolbar({
   return (
     <div
       className={cn(
-        "flex w-fit max-w-full items-center gap-1 rounded-xl border border-border bg-popover px-3 py-2 shadow-lg",
+        "flex w-fit max-w-full items-center gap-1 rounded-xl bg-foreground px-3 py-2 text-background shadow-2xl ring-1 ring-black/10 dark:ring-white/10",
       )}
     >
-      <span className="pe-2 text-xs font-medium text-foreground">
+      <span className="pe-2 text-xs font-medium">
         {t("clipsFinalRaw.selectedCount", { count })}
       </span>
-      <div className="h-4 w-px bg-border" />
+      {onSelectAll && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 gap-1.5 text-background hover:bg-background/15 hover:text-background"
+          onClick={onSelectAll}
+          disabled={isPending}
+        >
+          {allSelected
+            ? t("clipsFinalRaw.deselectAll")
+            : t("clipsFinalRaw.selectAll")}
+        </Button>
+      )}
+      <div className="h-4 w-px bg-background/20" />
       <Button
         variant="ghost"
         size="sm"
-        className="h-8 gap-1.5"
+        className="h-8 gap-1.5 text-background hover:bg-background/15 hover:text-background"
         onClick={onArchive}
         disabled={isPending}
       >
@@ -75,7 +92,7 @@ export function BulkActionToolbar({
             <Button
               variant="ghost"
               size="sm"
-              className="h-8 gap-1.5"
+              className="h-8 gap-1.5 text-background hover:bg-background/15 hover:text-background"
               disabled={isPending}
             >
               <IconFolder className="h-3.5 w-3.5" /> {t("clipsFinalRaw.move")}
@@ -121,17 +138,17 @@ export function BulkActionToolbar({
       <Button
         variant="ghost"
         size="sm"
-        className="h-8 gap-1.5 text-destructive hover:text-destructive"
+        className="h-8 gap-1.5 text-red-400 hover:bg-background/15 hover:text-red-400"
         onClick={onTrash}
         disabled={isPending}
       >
         <IconTrash className="h-3.5 w-3.5" /> {t("navigation.trash")}
       </Button>
-      <div className="h-4 w-px bg-border mx-1" />
+      <div className="mx-1 h-4 w-px bg-background/20" />
       <button
         type="button"
         onClick={onClear}
-        className="rounded p-1 text-muted-foreground hover:bg-accent"
+        className="rounded p-1 text-background/70 hover:bg-background/15 hover:text-background"
         aria-label={t("clipsFinalRaw.clearSelection")}
       >
         <IconX className="h-3.5 w-3.5" />

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

@@ -3,8 +3,12 @@ import {
   setClientAppState,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { IconAlertTriangle } from "@tabler/icons-react";
-import { useEffect, useMemo, useState } from "react";
+import {
+  IconAlertTriangle,
+  IconChevronLeft,
+  IconChevronRight,
+} from "@tabler/icons-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 
 import { CreateFolderDialog } from "@/components/library/create-folder-dialog";
@@ -13,6 +17,7 @@ import { Button } from "@/components/ui/button";
 import {
   useFolders,
   useRecordings,
+  useRecordingsCount,
   useTrashRecording,
   useArchiveRecording,
   useRestoreRecording,
@@ -54,6 +59,8 @@ function Skeleton() {
   );
 }
 
+const PAGE_SIZE = 100;
+
 interface FolderTargetRow {
   id: string;
   parentId: string | null;
@@ -105,13 +112,38 @@ export function LibraryGrid({
   const t = useT();
   const [sort, setSort] = useState<SortKey>("recent");
   const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [lastSelectedId, setLastSelectedId] = useState<string | null>(null);
   const selectionMode = selected.size > 0;
   const [sharingRec, setSharingRec] = useState<RecordingSummary | null>(null);
   const [createFolderTarget, setCreateFolderTarget] =
     useState<CreateFolderTarget | null>(null);
   const [isBulkPending, setIsBulkPending] = useState(false);
+  const [page, setPage] = useState(1);
   const selectionStateKey = useMemo(() => `selection:${getBrowserTabId()}`, []);
 
+  useEffect(() => {
+    setPage(1);
+    setSelected(new Set());
+    setLastSelectedId(null);
+  }, [view, folderId, spaceId, tagFilter, sort]);
+
+  const countArgs = useMemo(
+    () => ({
+      view,
+      folderId: folderId ?? null,
+      spaceId: spaceId ?? null,
+      tag: tagFilter ?? null,
+    }),
+    [view, folderId, spaceId, tagFilter],
+  );
+  const { data: totalCount } = useRecordingsCount(countArgs);
+  const total = totalCount ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages);
+  }, [page, totalPages]);
+
   const args: ListRecordingsArgs = useMemo(
     () => ({
       view,
@@ -119,8 +151,10 @@ export function LibraryGrid({
       spaceId: spaceId ?? null,
       tag: tagFilter ?? null,
       sort,
+      limit: PAGE_SIZE,
+      offset: (page - 1) * PAGE_SIZE,
     }),
-    [view, folderId, spaceId, tagFilter, sort],
+    [view, folderId, spaceId, tagFilter, sort, page],
   );
 
   const { data, isLoading, isError, refetch, isRefetching } =
@@ -189,17 +223,53 @@ export function LibraryGrid({
     };
   }, [selectionStateKey]);
 
-  const toggleSelect = (id: string) => {
+  const handleToggleSelect = useCallback(
+    (id: string, shiftKey = false) => {
+      setSelected((prev) => {
+        if (shiftKey && lastSelectedId && lastSelectedId !== id) {
+          const ids = recordings.map((r) => r.id);
+          const fromIndex = ids.indexOf(lastSelectedId);
+          const toIndex = ids.indexOf(id);
+          if (fromIndex !== -1 && toIndex !== -1) {
+            const [start, end] =
+              fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
+            const next = new Set(prev);
+            for (let i = start; i <= end; i++) next.add(ids[i]);
+            return next;
+          }
+        }
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+      setLastSelectedId(id);
+    },
+    [lastSelectedId, recordings],
+  );
+
+  const allSelected =
+    recordings.length > 0 && recordings.every(({ id }) => selected.has(id));
+
+  const toggleSelectAll = useCallback(() => {
     setSelected((prev) => {
       const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
+      const visibleIds = recordings.map(({ id }) => id);
+      const allVisibleSelected = visibleIds.every((id) => prev.has(id));
+
+      for (const id of visibleIds) {
+        if (allVisibleSelected) next.delete(id);
+        else next.add(id);
+      }
+
       return next;
     });
-  };
+    setLastSelectedId(null);
+  }, [recordings]);
 
   const clearSelection = () => {
     setSelected(new Set());
+    setLastSelectedId(null);
   };
 
   const moveRecordings = async (
@@ -321,7 +391,7 @@ export function LibraryGrid({
       )}
 
       {/* Grid body */}
-      <div className="relative flex min-h-0 flex-1 overflow-hidden">
+      <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
         <div
           className={cn(
             "min-h-0 flex-1 overflow-y-auto",
@@ -371,7 +441,7 @@ export function LibraryGrid({
                     }
                     selectionMode={canManageRecordings && selectionMode}
                     onToggleSelect={
-                      canManageRecordings ? toggleSelect : undefined
+                      canManageRecordings ? handleToggleSelect : undefined
                     }
                     onShare={(rec) => setSharingRec(rec)}
                     moveTargets={moveTargets}
@@ -426,12 +496,51 @@ export function LibraryGrid({
           </div>
         </div>
 
+        {!isLoading && recordings.length > 0 && totalPages > 1 && (
+          <div className="flex shrink-0 items-center justify-between gap-3 border-t border-border px-5 py-2.5">
+            <span className="text-xs text-muted-foreground">
+              {t("libraryGrid.paginationRange", {
+                start: (page - 1) * PAGE_SIZE + 1,
+                end: (page - 1) * PAGE_SIZE + recordings.length,
+                total,
+              })}
+            </span>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                className="gap-1"
+                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                disabled={page <= 1}
+              >
+                <IconChevronLeft className="h-3.5 w-3.5" />
+                {t("libraryGrid.paginationPrevious")}
+              </Button>
+              <span className="text-xs text-muted-foreground">
+                {t("libraryGrid.paginationPage", { page, totalPages })}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                className="gap-1"
+                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                disabled={page >= totalPages}
+              >
+                {t("libraryGrid.paginationNext")}
+                <IconChevronRight className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          </div>
+        )}
+
         {/* Keep selected-library actions visible while the recording list scrolls. */}
         {canManageRecordings && selected.size > 0 && (
           <div className="pointer-events-none absolute inset-x-0 bottom-0 z-30 flex justify-center px-4 pb-4">
             <div className="pointer-events-auto max-w-full overflow-x-auto">
               <BulkActionToolbar
                 count={selected.size}
+                allSelected={allSelected}
+                onSelectAll={toggleSelectAll}
                 moveTargets={moveTargets}
                 onArchive={async () => {
                   setIsBulkPending(true);

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

@@ -566,7 +566,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
         browserTabId={getBrowserTabId()}
       >
         {/* Main content area */}
-        <div className="flex min-w-0 flex-1 flex-col">
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
           {!pageOwnsToolbar && (
             <header className="flex shrink-0 items-center gap-3 border-b border-border px-5 py-3">
               <button

package/corpus/templates/clips/app/components/library/recording-card.tsx

@@ -65,7 +65,7 @@ interface RecordingCardProps {
   recording: RecordingSummary;
   selected?: boolean;
   selectionMode?: boolean;
-  onToggleSelect?: (id: string) => void;
+  onToggleSelect?: (id: string, shiftKey: boolean) => void;
   onShare?: (rec: RecordingSummary) => void;
   onMove?: (rec: RecordingSummary, folderId: string | null) => void;
   moveTargets?: BulkMoveTarget[];
@@ -147,18 +147,18 @@ export function RecordingCard({
   const handleLinkClick = useCallback(
     (event: React.MouseEvent<HTMLAnchorElement>) => {
       if (
-        !selectionMode ||
+        !onToggleSelect ||
         event.button !== 0 ||
         event.metaKey ||
         event.ctrlKey ||
-        event.shiftKey ||
-        event.altKey
+        event.altKey ||
+        (!selectionMode && !event.shiftKey)
       ) {
         return;
       }
 
       event.preventDefault();
-      onToggleSelect?.(recording.id);
+      onToggleSelect(recording.id, event.shiftKey);
     },
     [onToggleSelect, recording.id, selectionMode],
   );
@@ -166,7 +166,7 @@ export function RecordingCard({
   const handleCheckbox = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
-      onToggleSelect?.(recording.id);
+      onToggleSelect?.(recording.id, e.shiftKey);
     },
     [onToggleSelect, recording.id],
   );
@@ -243,8 +243,10 @@ export function RecordingCard({
           >
             <Checkbox
               checked={selected}
-              onCheckedChange={() => onToggleSelect?.(recording.id)}
-              onClick={(e) => e.stopPropagation()}
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleSelect?.(recording.id, e.shiftKey);
+              }}
               className="h-3.5 w-3.5"
             />
           </div>

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

@@ -833,6 +833,10 @@ All notable user-facing changes to Clips are documented here. Open it any time f
     loadFailedBody:
       "Something went wrong while loading this list. Your recordings are safe — try again.",
     retry: "Retry",
+    paginationRange: "{{start}}–{{end}} of {{total}}",
+    paginationPrevious: "Previous",
+    paginationNext: "Next",
+    paginationPage: "Page {{page}} of {{totalPages}}",
   },
   notificationsRoute: {
     pageTitle: "Notifications · Clips",
@@ -1370,6 +1374,8 @@ All notable user-facing changes to Clips are documented here. Open it any time f
   clipsFinalRaw: {
     splitAtPlayhead: "Split at playhead (S)",
     selectedCount: "{{count}} selected",
+    selectAll: "Select all",
+    deselectAll: "Deselect all",
     move: "Move",
     moveSelected: "Move {{count}} selected",
     current: "Current",

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

@@ -46,6 +46,7 @@ export default function TrashRoute() {
   const t = useT();
   const [sort, setSort] = useState<SortKey>("recent");
   const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [lastSelectedId, setLastSelectedId] = useState<string | null>(null);
   const [confirmPurge, setConfirmPurge] = useState(false);
   const [singlePurgeId, setSinglePurgeId] = useState<string | null>(null);
   const [isBulkPending, setIsBulkPending] = useState(false);
@@ -60,13 +61,26 @@ export default function TrashRoute() {
     "delete-recording-permanent",
   );
 
-  const toggleSelect = (id: string) => {
+  const toggleSelect = (id: string, shiftKey = false) => {
     setSelected((prev) => {
+      if (shiftKey && lastSelectedId && lastSelectedId !== id) {
+        const ids = recordings.map((r) => r.id);
+        const fromIndex = ids.indexOf(lastSelectedId);
+        const toIndex = ids.indexOf(id);
+        if (fromIndex !== -1 && toIndex !== -1) {
+          const [start, end] =
+            fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
+          const next = new Set(prev);
+          for (let i = start; i <= end; i++) next.add(ids[i]);
+          return next;
+        }
+      }
       const next = new Set(prev);
       if (next.has(id)) next.delete(id);
       else next.add(id);
       return next;
     });
+    setLastSelectedId(id);
   };
 
   const restoreAll = async (ids: string[]) => {
@@ -170,6 +184,7 @@ export default function TrashRoute() {
         ? new Set()
         : new Set(recordings.map((r) => r.id)),
     );
+    setLastSelectedId(null);
   };
 
   return (

package/corpus/templates/clips/desktop/src/app.tsx

@@ -572,6 +572,21 @@ function openPrivacySettings(pane: MacosPrivacyPane): void {
   }
 }
 
+// Same explicit-drag pattern the toolbar/bubble overlays use —
+// `data-tauri-drag-region` has been unreliable, so we call `startDragging()`
+// directly on mousedown. Clicks on buttons/inputs still reach their handlers
+// since we only start a drag when the mousedown target isn't inside one.
+function handlePopoverHeaderMouseDown(event: React.MouseEvent) {
+  if (event.button !== 0) return;
+  const target = event.target as HTMLElement;
+  if (target.closest("button, a, input, select, textarea")) return;
+  getCurrentWindow()
+    .startDragging()
+    .catch((err) => {
+      console.warn("[clips-popover] startDragging failed:", err);
+    });
+}
+
 function nativeVoiceProvider(): VoiceProvider {
   return isMacPlatform() ? "macos-native" : "browser";
 }
@@ -4248,7 +4263,10 @@ function Header({
   // close button lives top-right as an absolute-positioned sibling, so the
   // tabs aren't offset by the close button's width.
   return (
-    <div className="header header-centered">
+    <div
+      className="header header-centered"
+      onMouseDown={handlePopoverHeaderMouseDown}
+    >
       <FeedbackButton submitterEmail={submitterEmail} />
       <div
         className="mode-toggle"
@@ -4444,7 +4462,10 @@ function PopoverSubViewHeader({
   action?: ReactNode;
 }) {
   return (
-    <div className="setup-header popover-view-header">
+    <div
+      className="setup-header popover-view-header"
+      onMouseDown={handlePopoverHeaderMouseDown}
+    >
       <button
         type="button"
         className="setup-back"
@@ -6376,7 +6397,7 @@ function Setup({
 
   return (
     <div className="setup">
-      <div className="setup-header">
+      <div className="setup-header" onMouseDown={handlePopoverHeaderMouseDown}>
         {onCancel ? (
           <button
             type="button"

package/corpus/templates/content/app/components/editor/database/DatabaseView.tsx

@@ -4143,25 +4143,6 @@ function DatabaseItemPreview({
             draftVersionsRef.current.set(documentId, null);
           else if (result.draft) {
             draftVersionsRef.current.set(documentId, result.draft.version);
-            if (
-              previewDraftNeedsConflict({
-                returnedDraft: result.draft,
-                pending: controller.pending,
-              })
-            ) {
-              controller.notifyDraftConflict({
-                lastSaved: snapshot.lastSaved,
-                pending: {
-                  title: result.draft.title,
-                  content: result.draft.content,
-                  loadedUpdatedAt:
-                    result.draft.baseDocumentUpdatedAt ?? undefined,
-                  loadedContentWasEmpty:
-                    result.draft.loadedContentWasEmpty === 1,
-                },
-                deferredReason: "conflict",
-              });
-            }
           } else {
             // Another tab already removed the row. Treat the stale delete as
             // converged instead of retaining a version that can never match.
@@ -4186,24 +4167,6 @@ function DatabaseItemPreview({
           draftVersionsRef.current.set(documentId, result.draft.version);
         } else if (result.draft) {
           draftVersionsRef.current.set(documentId, result.draft.version);
-          if (
-            previewDraftNeedsConflict({
-              returnedDraft: result.draft,
-              pending: controller.pending,
-            })
-          ) {
-            controller.notifyDraftConflict({
-              lastSaved: snapshot.lastSaved,
-              pending: {
-                title: result.draft.title,
-                content: result.draft.content,
-                loadedUpdatedAt:
-                  result.draft.baseDocumentUpdatedAt ?? undefined,
-                loadedContentWasEmpty: result.draft.loadedContentWasEmpty === 1,
-              },
-              deferredReason: "conflict",
-            });
-          }
         } else {
           // A competing tab deleted the version we tried to update. Reset to
           // create mode and enqueue the latest pending payload once; keeping
@@ -4298,7 +4261,13 @@ function DatabaseItemPreview({
                 );
                 return;
               }
-              resolve(undefined);
+              resolve({
+                outcome: "saved" as const,
+                loadedUpdatedAt: result.updatedAt,
+                loadedContentWasEmpty: isEffectivelyEmptyDocumentContent(
+                  result.content,
+                ),
+              });
             },
             onError: reject,
           },
@@ -4410,6 +4379,8 @@ function DatabaseItemPreview({
       }
       return;
     }
+    const previouslyExpectedVersion =
+      draftVersionsRef.current.get(documentId) ?? null;
     draftVersionsRef.current.set(documentId, draft.version);
     const controller = peekPreviewDocumentSaveController(documentId);
     if (!controller) return;
@@ -4431,8 +4402,19 @@ function DatabaseItemPreview({
           ? draft.deferredReason
           : null,
     } as const;
+    // A poll tick simply confirming a version this client's own debounced
+    // write already advanced the ref to is not an external change — it is
+    // this client's typing racing ahead of its own last round trip. Comparing
+    // that echo against the still-live `pending` would flag a conflict on
+    // almost every keystroke. Only treat the draft as having moved out from
+    // under the user when its version is newer than what this client itself
+    // last recorded.
+    const draftAdvancedExternally =
+      previouslyExpectedVersion !== null &&
+      draft.version > previouslyExpectedVersion;
     if (controllerDirty) {
       if (
+        draftAdvancedExternally &&
         previewDraftNeedsConflict({
           returnedDraft: draft,
           pending: controller.pending,

package/corpus/templates/content/app/components/editor/previewDocumentSaveController.ts

@@ -67,6 +67,19 @@ export interface PreviewDocumentSaveDeferred {
   conflictSnapshot?: PreviewDocumentDraftSnapshot;
 }
 
+/**
+ * A successful save can report the server's fresh `updatedAt`/emptiness back
+ * to the controller so its baseline stops looking stale. Without this, a
+ * baseline seeded as empty (a brand-new page) stays flagged empty forever, so
+ * a later poll of content the user just saved themselves gets mistaken for a
+ * non-empty body arriving externally over an empty one.
+ */
+export interface PreviewDocumentSaveSuccess {
+  outcome: "saved";
+  loadedUpdatedAt?: string;
+  loadedContentWasEmpty?: boolean;
+}
+
 export interface PreviewDocumentSaveAdapter {
   save: (
     documentId: string,
@@ -151,6 +164,18 @@ function payloadsEqual(a: PreviewDocumentPayload, b: PreviewDocumentPayload) {
   return a.title === b.title && a.content === b.content;
 }
 
+function asSaveSuccess(result: unknown): PreviewDocumentSaveSuccess | null {
+  if (
+    result &&
+    typeof result === "object" &&
+    "outcome" in result &&
+    (result as { outcome?: unknown }).outcome === "saved"
+  ) {
+    return result as PreviewDocumentSaveSuccess;
+  }
+  return null;
+}
+
 export function createPreviewDocumentSaveController(
   args: PreviewDocumentSaveAdapter & {
     /**
@@ -230,7 +255,21 @@ export function createPreviewDocumentSaveController(
           }
           return;
         }
-        lastSaved = attempted;
+        // Adopt the server's fresh metadata (if the adapter reported it) into
+        // the confirmed baseline. Otherwise `loadedUpdatedAt`/
+        // `loadedContentWasEmpty` would keep carrying whatever was true when
+        // the controller was created/last marked — e.g. "empty" for a
+        // brand-new page — forever, even after real content has been saved.
+        const success = asSaveSuccess(result);
+        lastSaved = {
+          ...attempted,
+          ...(success?.loadedUpdatedAt !== undefined
+            ? { loadedUpdatedAt: success.loadedUpdatedAt }
+            : {}),
+          ...(success?.loadedContentWasEmpty !== undefined
+            ? { loadedContentWasEmpty: success.loadedContentWasEmpty }
+            : {}),
+        };
         hasSavedLocally = true;
         deferredReason = null;
         inFlight = null;

package/dist/notifications/routes.d.ts

@@ -13,13 +13,13 @@
 export declare function createNotificationsHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<"" | import("./types.js").Notification[] | {
     count: number;
     updated?: undefined;
-    ok?: undefined;
     error?: undefined;
+    ok?: undefined;
 } | {
     count?: undefined;
     updated: number;
-    ok?: undefined;
     error?: undefined;
+    ok?: undefined;
 } | {
     count?: undefined;
     updated?: undefined;
@@ -28,7 +28,7 @@ export declare function createNotificationsHandler(): import("h3").EventHandlerW
 } | {
     count?: undefined;
     updated?: undefined;
-    ok: boolean;
     error?: undefined;
+    ok: boolean;
 }>>;
 //# sourceMappingURL=routes.d.ts.map

package/dist/observability/routes.d.ts

@@ -41,28 +41,28 @@ export declare function createObservabilityHandler(): import("h3").EventHandlerW
     thumbsUpRate: number;
     avgEvalScore: number;
 } | {
+    error?: undefined;
+    ok?: undefined;
     summary: import("./types.js").TraceSummary;
     spans: import("./types.js").TraceSpan[];
     id?: undefined;
+} | {
     error?: undefined;
     ok?: undefined;
-} | {
     summary?: undefined;
     spans?: undefined;
     id: string;
-    error?: undefined;
-    ok?: undefined;
 } | {
+    ok?: undefined;
     summary?: undefined;
     spans?: undefined;
     id?: undefined;
     error: any;
-    ok?: undefined;
 } | {
+    error?: undefined;
     summary?: undefined;
     spans?: undefined;
     id?: undefined;
-    error?: undefined;
     ok: boolean;
 }>>;
 //# sourceMappingURL=routes.d.ts.map

package/dist/secrets/routes.d.ts

@@ -34,37 +34,37 @@ export declare function createListSecretsHandler(): import("h3").EventHandlerWit
 /** POST /_agent-native/secrets/:key — write a secret. */
 export declare function createWriteSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
     error: string;
-    status?: undefined;
     ok?: undefined;
+    status?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     status: string;
-    error?: undefined;
 } | {
+    ok?: undefined;
     error: string;
     removed?: undefined;
-    ok?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     removed: boolean;
-    error?: undefined;
 }>>;
 /**
  * POST /_agent-native/secrets/:key/test — re-run the validator against the
  * current stored value without changing anything. Useful for the "Test" button.
  */
 export declare function createTestSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
+    ok?: undefined;
     error: string;
     note?: undefined;
-    ok?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     note?: undefined;
-    error?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     note: string;
-    error?: undefined;
 } | {
     note?: undefined;
     ok: boolean;
@@ -95,12 +95,12 @@ export interface AdHocSecretPayload {
 export declare function createAdHocSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<AdHocSecretPayload[] | {
     error: string;
 } | {
+    error?: undefined;
     ok: boolean;
     key: string;
-    error?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     removed: boolean;
-    error?: undefined;
 }>>;
 //# sourceMappingURL=routes.d.ts.map

package/dist/server/agent-engine-api-key-route.d.ts

@@ -27,11 +27,11 @@ export declare function resolveAgentEngineApiKeyWriteTarget(event: H3Event, scop
 export declare function createAgentEngineApiKeyHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
     error: any;
 } | {
+    error?: undefined;
     ok: boolean;
     key: string;
     baseUrlKey?: string;
     scope: AgentEngineApiKeyScope;
-    error?: undefined;
 }>>;
 export {};
 //# sourceMappingURL=agent-engine-api-key-route.d.ts.map

package/dist/server/transcribe-voice.d.ts

@@ -20,7 +20,7 @@ export declare function createTranscribeVoiceHandler(): import("h3").EventHandle
     error: string;
     text?: undefined;
 } | {
-    text: string;
     error?: undefined;
+    text: string;
 }>>;
 //# sourceMappingURL=transcribe-voice.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.114.15",
+  "version": "0.114.16",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {