@agent-native/core 0.114.13 → 0.114.16

package/corpus/templates/analytics/server/lib/first-party-dashboard-repair.ts

@@ -0,0 +1,114 @@
+import { randomUUID } from "node:crypto";
+
+import { recordChange } from "@agent-native/core/server";
+import { and, desc, eq } from "drizzle-orm";
+
+import { getDb, schema } from "../db/index.js";
+import {
+  FIRST_PARTY_DASHBOARD_ID,
+  repairFirstPartyRecurringUserPanels,
+} from "./first-party-metric-catalog";
+
+export async function repairPersistedFirstPartyDashboardQueries(): Promise<boolean> {
+  // guard:allow-unscoped — startup repair targets one fixed canonical dashboard
+  // and only replaces the exact shipped legacy SQL under an optimistic fence.
+  const db = getDb() as any;
+  const [row] = await db
+    .select({
+      id: schema.dashboards.id,
+      config: schema.dashboards.config,
+      kind: schema.dashboards.kind,
+      title: schema.dashboards.title,
+      updatedAt: schema.dashboards.updatedAt,
+      ownerEmail: schema.dashboards.ownerEmail,
+      orgId: schema.dashboards.orgId,
+      visibility: schema.dashboards.visibility,
+    })
+    .from(schema.dashboards)
+    .where(eq(schema.dashboards.id, FIRST_PARTY_DASHBOARD_ID));
+  if (!row || row.kind !== "sql" || typeof row.config !== "string") {
+    return false;
+  }
+
+  let config: Record<string, unknown>;
+  try {
+    config = JSON.parse(row.config) as Record<string, unknown>;
+  } catch {
+    return false;
+  }
+  const repaired = repairFirstPartyRecurringUserPanels(config);
+  if (!repaired.changed) return false;
+
+  const repairedAt = new Date().toISOString();
+  const revisionId = `dashrev-${Date.now()}-${randomUUID()}`;
+  const changed = await db.transaction(async (tx: any) => {
+    const updated = await tx
+      .update(schema.dashboards)
+      .set({
+        config: JSON.stringify(repaired.config),
+        updatedAt: repairedAt,
+        updatedBy: null,
+      })
+      .where(
+        and(
+          eq(schema.dashboards.id, FIRST_PARTY_DASHBOARD_ID),
+          eq(schema.dashboards.config, row.config),
+          eq(schema.dashboards.updatedAt, row.updatedAt),
+        ),
+      )
+      .returning({ id: schema.dashboards.id });
+    if (updated.length !== 1) return false;
+
+    await tx.insert(schema.dashboardRevisions).values({
+      id: revisionId,
+      dashboardId: row.id,
+      kind: row.kind,
+      title: row.title,
+      config: row.config,
+      createdAt: repairedAt,
+      createdBy: null,
+      ownerEmail: row.ownerEmail,
+      orgId: row.orgId,
+    });
+    const revisions = await tx
+      .select({ id: schema.dashboardRevisions.id })
+      .from(schema.dashboardRevisions)
+      .where(eq(schema.dashboardRevisions.dashboardId, row.id))
+      .orderBy(
+        desc(schema.dashboardRevisions.createdAt),
+        desc(schema.dashboardRevisions.id),
+      );
+    const retainedRevisionIds = new Set([revisionId]);
+    for (const revision of revisions) {
+      if (retainedRevisionIds.size >= 50) break;
+      retainedRevisionIds.add(revision.id);
+    }
+    for (const revision of revisions) {
+      if (retainedRevisionIds.has(revision.id)) continue;
+      await tx
+        .delete(schema.dashboardRevisions)
+        .where(eq(schema.dashboardRevisions.id, revision.id));
+    }
+    return true;
+  });
+  if (!changed) return false;
+
+  try {
+    recordChange({
+      source: "dashboards",
+      type: "change",
+      key: row.id,
+      ...(row.visibility === "public"
+        ? {}
+        : row.visibility === "org" && row.orgId
+          ? { orgId: row.orgId }
+          : { owner: row.ownerEmail }),
+    });
+  } catch (err) {
+    console.warn(
+      "[db] Canonical dashboard repair committed without a live change event:",
+      err instanceof Error ? err.message : err,
+    );
+  }
+  return true;
+}

package/corpus/templates/analytics/server/lib/first-party-metric-catalog.ts

@@ -26,6 +26,8 @@
 
 export type MetricWindow = "30d" | "90d" | "all";
 
+export const FIRST_PARTY_DASHBOARD_ID = "agent-native-templates-first-party";
+
 export interface FirstPartyMetric {
   /** Stable catalog key, also used as the default panel id. */
   key: string;
@@ -122,6 +124,7 @@ const USER_KEY_SQL = "NULLIF(user_key, '')";
 const RETENTION_ROLLING_DAYS = 7;
 const RETENTION_MIN_COHORT_SIZE = 5;
 const PER_TEMPLATE_RETENTION_MIN_COHORT_SIZE = 20;
+const RECURRING_ACTIVITY_LOOKBACK_DAYS = 365;
 
 function daysAgoSql(days: number): string {
   const unit = days === 1 ? "day" : "days";
@@ -223,8 +226,85 @@ const RETENTION_OVER_TIME_SQL = `WITH base AS (SELECT ${SIGNED_IN_ACTIVITY_KEY_S
 const ONE_DAY_RETENTION_BY_TEMPLATE_SQL = `WITH base AS (SELECT ${SIGNED_IN_ACTIVITY_KEY_SQL} AS user_key, ${TEMPLATE_EXPR} AS template, ${EVENT_DATE_SQL} AS event_date, user_id FROM analytics_events WHERE ${SIGNED_IN_ACTIVITY_FILTER} AND ${DASHBOARD_EMAIL_FILTER} AND ${KNOWN_PRODUCT_ACTIVITY_TEMPLATE_FILTER}), ranked_first_seen AS (SELECT user_key, template, event_date AS cohort_date, ROW_NUMBER() OVER (PARTITION BY user_key ORDER BY event_date, template) AS rn FROM base), first_seen AS (SELECT user_key, template, cohort_date FROM ranked_first_seen WHERE rn = 1), cohorts AS (SELECT user_key, template, cohort_date FROM first_seen WHERE cohort_date <= ${daysAgoSql(7)} AND ${dashboardTimeRangeFilter("cohort_date")}), cohort_sizes AS (SELECT template, COUNT(DISTINCT user_key) AS users FROM cohorts GROUP BY template), retained AS (SELECT c.template, COUNT(DISTINCT c.user_key) AS retained FROM cohorts c JOIN base b ON b.user_key = c.user_key AND b.event_date > c.cohort_date AND b.event_date <= to_char(c.cohort_date::date + INTERVAL '7 days', 'YYYY-MM-DD') GROUP BY c.template) SELECT cs.template, COALESCE(r.retained, 0) AS retained_users, cs.users AS cohort_users, COALESCE(r.retained::float / NULLIF(cs.users, 0), 0) AS rate FROM cohort_sizes cs LEFT JOIN retained r ON r.template = cs.template WHERE cs.users >= ${PER_TEMPLATE_RETENTION_MIN_COHORT_SIZE} ORDER BY rate DESC, cs.users DESC, cs.template`;
 const SEVEN_DAY_RETENTION_BY_TEMPLATE_SQL = `WITH base AS (SELECT ${SIGNED_IN_ACTIVITY_KEY_SQL} AS user_key, ${TEMPLATE_EXPR} AS template, ${EVENT_DATE_SQL} AS event_date, user_id FROM analytics_events WHERE ${SIGNED_IN_ACTIVITY_FILTER} AND ${DASHBOARD_EMAIL_FILTER} AND ${KNOWN_PRODUCT_ACTIVITY_TEMPLATE_FILTER}), ranked_first_seen AS (SELECT user_key, template, event_date AS cohort_date, ROW_NUMBER() OVER (PARTITION BY user_key ORDER BY event_date, template) AS rn FROM base), first_seen AS (SELECT user_key, template, cohort_date FROM ranked_first_seen WHERE rn = 1), cohorts AS (SELECT user_key, template, cohort_date FROM first_seen WHERE cohort_date <= ${daysAgoSql(14)} AND ${dashboardTimeRangeFilter("cohort_date")}), cohort_sizes AS (SELECT template, COUNT(DISTINCT user_key) AS users FROM cohorts GROUP BY template), retained AS (SELECT c.template, COUNT(DISTINCT c.user_key) AS retained FROM cohorts c JOIN base b ON b.user_key = c.user_key AND b.event_date >= to_char(c.cohort_date::date + INTERVAL '7 days', 'YYYY-MM-DD') AND b.event_date <= to_char(c.cohort_date::date + INTERVAL '14 days', 'YYYY-MM-DD') GROUP BY c.template) SELECT cs.template, COALESCE(r.retained, 0) AS retained_users, cs.users AS cohort_users, COALESCE(r.retained::float / NULLIF(cs.users, 0), 0) AS rate FROM cohort_sizes cs LEFT JOIN retained r ON r.template = cs.template WHERE cs.users >= ${PER_TEMPLATE_RETENTION_MIN_COHORT_SIZE} ORDER BY rate DESC, cs.users DESC, cs.template`;
 const SIGNUPS_BY_TEMPLATE_SQL = `SELECT ${TEMPLATE_EXPR} AS template, COUNT(*) AS count FROM analytics_events WHERE event_name = 'signup' AND ${DASHBOARD_TIME_RANGE_FILTER} AND ${DASHBOARD_EMAIL_FILTER} GROUP BY ${TEMPLATE_EXPR} ORDER BY count DESC`;
-const RECURRING_USERS_BY_TEMPLATE_SQL = `WITH all_users AS (SELECT ${SIGNED_IN_ACTIVITY_KEY_SQL} AS user_key, ${EVENT_DATE_SQL}, user_id, ${TEMPLATE_EXPR} AS template FROM analytics_events WHERE ${SIGNED_IN_PRODUCT_ACTIVITY_FILTER} AND ${DASHBOARD_EMAIL_FILTER}), first_seen AS (SELECT user_key, MIN(event_date) AS first_date FROM all_users GROUP BY user_key) SELECT a.event_date AS date, a.template AS template, COUNT(DISTINCT a.user_key) AS users FROM all_users a JOIN first_seen f ON f.user_key = a.user_key WHERE a.event_date <> f.first_date AND a.template <> 'unknown' AND ${dashboardTimeRangeFilter("a.event_date")} GROUP BY 1, 2 ORDER BY date, template`;
-const RECURRING_USERS_BY_TEMPLATE_WEEKLY_SQL = `WITH all_users AS (SELECT ${SIGNED_IN_ACTIVITY_KEY_SQL} AS user_key, ${EVENT_DATE_SQL}, user_id, ${TEMPLATE_EXPR} AS template FROM analytics_events WHERE ${SIGNED_IN_PRODUCT_ACTIVITY_FILTER} AND ${DASHBOARD_EMAIL_FILTER}), first_seen AS (SELECT user_key, MIN(event_date) AS first_date FROM all_users GROUP BY user_key) SELECT to_char(date_trunc('week', a.event_date::date), 'YYYY-MM-DD') AS date, a.template AS template, COUNT(DISTINCT a.user_key) AS users FROM all_users a JOIN first_seen f ON f.user_key = a.user_key WHERE a.event_date <> f.first_date AND a.template <> 'unknown' AND ${dashboardTimeRangeFilter("a.event_date")} GROUP BY 1, 2 ORDER BY date, template`;
+export const LEGACY_RECURRING_USERS_BY_TEMPLATE_SQL = `WITH all_users AS (SELECT ${SIGNED_IN_ACTIVITY_KEY_SQL} AS user_key, ${EVENT_DATE_SQL}, user_id, ${TEMPLATE_EXPR} AS template FROM analytics_events WHERE ${SIGNED_IN_PRODUCT_ACTIVITY_FILTER} AND ${DASHBOARD_EMAIL_FILTER}), first_seen AS (SELECT user_key, MIN(event_date) AS first_date FROM all_users GROUP BY user_key) SELECT a.event_date AS date, a.template AS template, COUNT(DISTINCT a.user_key) AS users FROM all_users a JOIN first_seen f ON f.user_key = a.user_key WHERE a.event_date <> f.first_date AND a.template <> 'unknown' AND ${dashboardTimeRangeFilter("a.event_date")} GROUP BY 1, 2 ORDER BY date, template`;
+export const LEGACY_RECURRING_USERS_BY_TEMPLATE_WEEKLY_SQL = `WITH all_users AS (SELECT ${SIGNED_IN_ACTIVITY_KEY_SQL} AS user_key, ${EVENT_DATE_SQL}, user_id, ${TEMPLATE_EXPR} AS template FROM analytics_events WHERE ${SIGNED_IN_PRODUCT_ACTIVITY_FILTER} AND ${DASHBOARD_EMAIL_FILTER}), first_seen AS (SELECT user_key, MIN(event_date) AS first_date FROM all_users GROUP BY user_key) SELECT to_char(date_trunc('week', a.event_date::date), 'YYYY-MM-DD') AS date, a.template AS template, COUNT(DISTINCT a.user_key) AS users FROM all_users a JOIN first_seen f ON f.user_key = a.user_key WHERE a.event_date <> f.first_date AND a.template <> 'unknown' AND ${dashboardTimeRangeFilter("a.event_date")} GROUP BY 1, 2 ORDER BY date, template`;
+const RECURRING_ACTIVITY_LOOKBACK_FILTER = `${EVENT_DATE_SQL} >= ${daysAgoSql(RECURRING_ACTIVITY_LOOKBACK_DAYS)}`;
+const RECURRING_USERS_BY_TEMPLATE_SQL =
+  LEGACY_RECURRING_USERS_BY_TEMPLATE_SQL.replace(
+    `${DASHBOARD_EMAIL_FILTER}), first_seen`,
+    `${DASHBOARD_EMAIL_FILTER} AND ${RECURRING_ACTIVITY_LOOKBACK_FILTER}), first_seen`,
+  );
+const RECURRING_USERS_BY_TEMPLATE_WEEKLY_SQL =
+  LEGACY_RECURRING_USERS_BY_TEMPLATE_WEEKLY_SQL.replace(
+    `${DASHBOARD_EMAIL_FILTER}), first_seen`,
+    `${DASHBOARD_EMAIL_FILTER} AND ${RECURRING_ACTIVITY_LOOKBACK_FILTER}), first_seen`,
+  );
+const LEGACY_RECURRING_USERS_DESCRIPTION =
+  "Daily signed-in visitors who are NOT on their all-time first active day (Recurring only), stacked by inferred template/app used that day. Docs traffic and unknown template are excluded.";
+const LEGACY_RECURRING_USERS_WEEKLY_DESCRIPTION =
+  "Weekly distinct signed-in visitors who are NOT on their all-time first active day (Recurring only), stacked by inferred template/app used that week. Weeks start Monday; docs traffic and unknown template are excluded.";
+const RECURRING_USERS_DESCRIPTION =
+  "Daily signed-in visitors who are not on their first active day observed in the previous 365 days, stacked by inferred template/app used that day. Docs traffic and unknown template are excluded.";
+const RECURRING_USERS_WEEKLY_DESCRIPTION =
+  "Weekly distinct signed-in visitors who are not on their first active day observed in the previous 365 days, stacked by inferred template/app used that week. Weeks start Monday; docs traffic and unknown template are excluded.";
+
+export function repairFirstPartyRecurringUserPanels(
+  config: Record<string, unknown>,
+): { config: Record<string, unknown>; changed: boolean } {
+  if (!Array.isArray(config.panels)) return { config, changed: false };
+
+  const replacements = new Map([
+    [
+      "recurring-users-by-template",
+      {
+        legacySql: LEGACY_RECURRING_USERS_BY_TEMPLATE_SQL,
+        sql: RECURRING_USERS_BY_TEMPLATE_SQL,
+        legacyDescription: LEGACY_RECURRING_USERS_DESCRIPTION,
+        description: RECURRING_USERS_DESCRIPTION,
+      },
+    ],
+    [
+      "recurring-users-by-template-bar",
+      {
+        legacySql: LEGACY_RECURRING_USERS_BY_TEMPLATE_WEEKLY_SQL,
+        sql: RECURRING_USERS_BY_TEMPLATE_WEEKLY_SQL,
+        legacyDescription: LEGACY_RECURRING_USERS_WEEKLY_DESCRIPTION,
+        description: RECURRING_USERS_WEEKLY_DESCRIPTION,
+      },
+    ],
+  ]);
+  let changed = false;
+  const panels = config.panels.map((rawPanel) => {
+    if (!rawPanel || typeof rawPanel !== "object") return rawPanel;
+    const panel = rawPanel as Record<string, unknown>;
+    const replacement =
+      typeof panel.id === "string" ? replacements.get(panel.id) : undefined;
+    if (!replacement || panel.sql !== replacement.legacySql) return rawPanel;
+
+    changed = true;
+    const panelConfig =
+      panel.config && typeof panel.config === "object"
+        ? (panel.config as Record<string, unknown>)
+        : null;
+    return {
+      ...panel,
+      sql: replacement.sql,
+      ...(panelConfig
+        ? {
+            config: {
+              ...panelConfig,
+              ...(panelConfig.description === replacement.legacyDescription
+                ? { description: replacement.description }
+                : {}),
+            },
+          }
+        : {}),
+    };
+  });
+  return changed
+    ? { config: { ...config, panels }, changed }
+    : { config, changed };
+}
 const DAU_BY_TEMPLATE_SQL = `SELECT ${EVENT_DATE_SQL} AS date, ${TEMPLATE_EXPR} AS template, COUNT(DISTINCT ${SIGNED_IN_ACTIVITY_KEY_SQL}) AS visitors FROM analytics_events WHERE ${SIGNED_IN_ACTIVITY_FILTER} AND ${DASHBOARD_TIME_RANGE_FILTER} AND ${DASHBOARD_EMAIL_FILTER} AND ${KNOWN_PRODUCT_ACTIVITY_TEMPLATE_FILTER} GROUP BY ${EVENT_DATE_SQL}, ${TEMPLATE_EXPR} ORDER BY date, template`;
 const WAU_BY_TEMPLATE_SQL = `WITH base AS (SELECT ${SIGNED_IN_ACTIVITY_KEY_SQL} AS visitor_key, ${TEMPLATE_EXPR} AS template, ${EVENT_DATE_SQL} AS event_date, user_id FROM analytics_events WHERE ${SIGNED_IN_ACTIVITY_FILTER} AND ${DASHBOARD_EMAIL_FILTER} AND ${KNOWN_PRODUCT_ACTIVITY_TEMPLATE_FILTER} AND ${DASHBOARD_WAU_BASE_RANGE_FILTER}), days AS (SELECT DISTINCT event_date AS date FROM base WHERE ${DASHBOARD_EVENT_DATE_RANGE_FILTER}) SELECT d.date, b.template, COUNT(DISTINCT b.visitor_key) AS visitors FROM days d JOIN base b ON b.event_date >= to_char(d.date::date - INTERVAL '6 days', 'YYYY-MM-DD') AND b.event_date <= d.date GROUP BY d.date, b.template ORDER BY d.date, b.template`;
 
@@ -684,8 +764,7 @@ const ENTRIES: FirstPartyMetric[] = [
         valueKey: "users",
       },
       stacked: true,
-      description:
-        "Daily signed-in visitors who are NOT on their all-time first active day (Recurring only), stacked by inferred template/app used that day. Docs traffic and unknown template are excluded.",
+      description: RECURRING_USERS_DESCRIPTION,
     },
   },
   {
@@ -706,8 +785,7 @@ const ENTRIES: FirstPartyMetric[] = [
         valueKey: "users",
       },
       stacked: true,
-      description:
-        "Weekly distinct signed-in visitors who are NOT on their all-time first active day (Recurring only), stacked by inferred template/app used that week. Weeks start Monday; docs traffic and unknown template are excluded.",
+      description: RECURRING_USERS_WEEKLY_DESCRIPTION,
     },
   },
   {

package/corpus/templates/analytics/server/plugins/db.ts

@@ -8,6 +8,7 @@ import {
 // startup so the dashboard / analysis share actions know where to dispatch.
 import "../db/index.js";
 import * as schema from "../db/schema.js";
+import { repairPersistedFirstPartyDashboardQueries } from "../lib/first-party-dashboard-repair.js";
 
 /**
  * Every Drizzle table exported from schema.ts. Filters out type-only and
@@ -1280,6 +1281,18 @@ const runAnalyticsMigrations = runMigrations(
  */
 export default async (nitroApp: any): Promise<void> => {
   await runAnalyticsMigrations(nitroApp);
+  try {
+    if (await repairPersistedFirstPartyDashboardQueries()) {
+      console.info(
+        "[db] Repaired bounded recurring-user queries on the canonical first-party dashboard.",
+      );
+    }
+  } catch (err) {
+    console.warn(
+      "[db] Failed to repair canonical first-party dashboard queries (non-fatal):",
+      err instanceof Error ? err.message : err,
+    );
+  }
   try {
     const summary = await ensureAdditiveColumns({
       db: getDbExec(),

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/components/player/video-player.tsx

@@ -646,10 +646,10 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
     const togglePlayback = useCallback(() => {
       const v = videoRef.current;
       if (!v) return;
-      if (!v.paused || isPlaying) {
-        pauseVideo();
-        return;
-      }
+      // A finished clip must always replay from the start, even when the browser
+      // left `paused` false at end of stream (MSE end-of-stream / DB-duration
+      // mismatch) or `isPlaying` is stale — otherwise the toggle below would
+      // pause an already-ended element and the play button appears to do nothing.
       if (v.ended) {
         try {
           v.currentTime = 0;
@@ -657,6 +657,12 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
         } catch {
           // Let the normal play attempt report a media error if the seek fails.
         }
+        requestPlay();
+        return;
+      }
+      if (!v.paused || isPlaying) {
+        pauseVideo();
+        return;
       }
       requestPlay();
     }, [isPlaying, pauseVideo, requestPlay]);

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