@agent-native/core 0.88.0 → 0.90.1

package/corpus/templates/clips/app/components/sharing/viewed-by-popover.tsx

@@ -0,0 +1,132 @@
+import { useActionQuery, useFormatters, useT } from "@agent-native/core/client";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface ClipViewRecord {
+  id: string;
+  viewerEmail: string | null;
+  viewerName: string | null;
+  viewedAt: string;
+}
+
+export interface ViewedByPopoverProps {
+  recordingId: string;
+  /** Rendered as the click target — usually the existing "N views" text. */
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Wraps the aggregate view count with a click-to-open popover listing
+ * individual view records (who viewed, and when), most recent first.
+ * Owner-only data — `list-clip-views` is access-checked server-side, so a
+ * non-owner opening this (if ever rendered for them) simply sees an error
+ * state, never other viewers' identities.
+ */
+export function ViewedByPopover({
+  recordingId,
+  children,
+  className,
+}: ViewedByPopoverProps) {
+  const t = useT();
+  const { formatDate, formatRelativeTime } = useFormatters();
+  const [open, setOpen] = useState(false);
+
+  const q = useActionQuery<{ views: ClipViewRecord[] }>(
+    "list-clip-views",
+    { recordingId, limit: 50 },
+    { enabled: open },
+  );
+
+  const relative = (iso: string) => {
+    const date = new Date(iso);
+    const diff = (date.getTime() - Date.now()) / 1000;
+    const abs = Math.abs(diff);
+    if (abs < 60) return formatRelativeTime(Math.round(diff), "second");
+    if (abs < 3600) return formatRelativeTime(Math.round(diff / 60), "minute");
+    if (abs < 86400) return formatRelativeTime(Math.round(diff / 3600), "hour");
+    if (abs < 604800)
+      return formatRelativeTime(Math.round(diff / 86400), "day");
+    return formatDate(date);
+  };
+
+  const views = q.data?.views ?? [];
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild onClick={(e) => e.stopPropagation()}>
+        <button
+          type="button"
+          className={cn("cursor-pointer text-start", className)}
+        >
+          {children}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-72 p-0"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="border-b border-border px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+          {t("recordingInsights.viewedBy")}
+        </div>
+        <div className="max-h-80 overflow-y-auto p-1.5">
+          {q.isLoading ? (
+            <p className="px-2 py-3 text-sm text-muted-foreground">
+              {t("recordingInsights.loading")}
+            </p>
+          ) : views.length === 0 ? (
+            <p className="px-2 py-3 text-sm text-muted-foreground">
+              {t("recordingInsights.noViewsYet")}
+            </p>
+          ) : (
+            <ul className="space-y-0.5">
+              {views.map((v) => {
+                const label =
+                  v.viewerName ||
+                  (v.viewerEmail
+                    ? v.viewerEmail.split("@")[0]
+                    : t("recordingInsights.someone"));
+                return (
+                  <li
+                    key={v.id}
+                    className="flex items-center gap-2 rounded-md px-2 py-1.5"
+                  >
+                    <Avatar className="h-6 w-6 shrink-0">
+                      <AvatarFallback className="text-[10px] bg-primary text-primary-foreground">
+                        {initials(v.viewerName || v.viewerEmail || "?")}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate text-sm text-foreground">
+                        {label}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {relative(v.viewedAt)}
+                      </div>
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function initials(s: string): string {
+  return s
+    .split(/\s+|@/)
+    .slice(0, 2)
+    .map((p) => p[0]?.toUpperCase() ?? "")
+    .join("");
+}

package/corpus/templates/clips/app/components/ui/alert-dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/alert-dialog";

package/corpus/templates/clips/app/components/ui/avatar.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/avatar";

package/corpus/templates/clips/app/components/ui/badge.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/badge";

package/corpus/templates/clips/app/components/ui/button.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/button";

package/corpus/templates/clips/app/components/ui/card.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/card";

package/corpus/templates/clips/app/components/ui/checkbox.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/checkbox";

package/corpus/templates/clips/app/components/ui/collapsible.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/collapsible";

package/corpus/templates/clips/app/components/ui/context-menu.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/context-menu";

package/corpus/templates/clips/app/components/ui/dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/dialog";

package/corpus/templates/clips/app/components/ui/dropdown-menu.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/dropdown-menu";

package/corpus/templates/clips/app/components/ui/input.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/input";

package/corpus/templates/clips/app/components/ui/label.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/label";

package/corpus/templates/clips/app/components/ui/popover.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/popover";

package/corpus/templates/clips/app/components/ui/scroll-area.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/scroll-area";

package/corpus/templates/clips/app/components/ui/select.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/select";

package/corpus/templates/clips/app/components/ui/separator.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/separator";

package/corpus/templates/clips/app/components/ui/sheet.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/sheet";

package/corpus/templates/clips/app/components/ui/skeleton.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/skeleton";

package/corpus/templates/clips/app/components/ui/slider.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/slider";

package/corpus/templates/clips/app/components/ui/sonner.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/sonner";

package/corpus/templates/clips/app/components/ui/spinner.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/spinner";

package/corpus/templates/clips/app/components/ui/switch.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/switch";

package/corpus/templates/clips/app/components/ui/table.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/table";

package/corpus/templates/clips/app/components/ui/tabs.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/tabs";

package/corpus/templates/clips/app/components/ui/textarea.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/textarea";

package/corpus/templates/clips/app/components/ui/toolkit-provider.tsx

@@ -0,0 +1,12 @@
+import { ToolkitProvider, type ToolkitComponents } from "@agent-native/toolkit";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+
+const components: ToolkitComponents = {
+  Button: Button as ToolkitComponents["Button"],
+};
+
+export function AppToolkitProvider({ children }: { children: ReactNode }) {
+  return <ToolkitProvider components={components}>{children}</ToolkitProvider>;
+}

package/corpus/templates/clips/app/components/ui/tooltip.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/tooltip";

package/corpus/templates/clips/app/components/workspace/branding-editor.tsx

@@ -3,20 +3,16 @@ import {
   useActionMutation,
   useT,
 } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@agent-native/toolkit/ui/card";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
 import { IconPalette, IconPhoto } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
 interface BrandingEditorProps {
   organizationId: string;
   initialName: string;

package/corpus/templates/clips/app/components/workspace/insights-hub.tsx

@@ -1,29 +1,19 @@
 import { appBasePath, useActionQuery, useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@agent-native/toolkit/ui/card";
+import { IconChartLine, IconDownload, IconUsers } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+
+import { PageHeader } from "@/components/library/page-header";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@agent-native/toolkit/ui/tabs";
-import { IconChartLine, IconDownload, IconUsers } from "@tabler/icons-react";
-import { useMemo, useState } from "react";
-
-import { PageHeader } from "@/components/library/page-header";
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import { EngagementChart } from "./engagement-chart";
 import { TopCreatorsTable } from "./top-creators-table";

package/corpus/templates/clips/app/components/workspace/invite-dialog.tsx

@@ -1,5 +1,10 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
+import { IconMailFast, IconUserPlus } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -8,20 +13,16 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@agent-native/toolkit/ui/dialog";
-import { Label } from "@agent-native/toolkit/ui/label";
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { Textarea } from "@agent-native/toolkit/ui/textarea";
-import { IconMailFast, IconUserPlus } from "@tabler/icons-react";
-import { useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-import { toast } from "sonner";
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 
 export type InviteRole = "member" | "admin";
 

package/corpus/templates/clips/app/components/workspace/members-list.tsx

@@ -1,4 +1,9 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
+import { IconCrown, IconUserX } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -8,17 +13,17 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@agent-native/toolkit/ui/alert-dialog";
-import { Avatar, AvatarFallback } from "@agent-native/toolkit/ui/avatar";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
+} from "@/components/ui/alert-dialog";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@agent-native/toolkit/ui/select";
+} from "@/components/ui/select";
 import {
   Table,
   TableBody,
@@ -26,11 +31,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@agent-native/toolkit/ui/table";
-import { IconCrown, IconUserX } from "@tabler/icons-react";
-import { useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-import { toast } from "sonner";
+} from "@/components/ui/table";
 
 export type MemberRole = "owner" | "admin" | "member";
 

package/corpus/templates/clips/app/components/workspace/notifications-list.tsx

@@ -1,5 +1,4 @@
 import { useFormatters, useT } from "@agent-native/core/client";
-import { Avatar, AvatarFallback } from "@agent-native/toolkit/ui/avatar";
 import {
   IconMessage,
   IconMoodSmile,
@@ -9,6 +8,8 @@ import {
 } from "@tabler/icons-react";
 import { Link } from "react-router";
 
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
 export type NotificationKind = "comment" | "reaction" | "mention" | "share";
 
 export interface NotificationItem {

package/corpus/templates/clips/app/components/workspace/top-creators-table.tsx

@@ -1,5 +1,6 @@
 import { useT } from "@agent-native/core/client";
-import { Avatar, AvatarFallback } from "@agent-native/toolkit/ui/avatar";
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import {
   Table,
   TableBody,
@@ -7,7 +8,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@agent-native/toolkit/ui/table";
+} from "@/components/ui/table";
 
 export interface TopCreatorRow {
   email: string;

package/corpus/templates/clips/app/components/workspace/top-videos-table.tsx

@@ -1,3 +1,5 @@
+import { Link } from "react-router";
+
 import {
   Table,
   TableBody,
@@ -5,8 +7,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@agent-native/toolkit/ui/table";
-import { Link } from "react-router";
+} from "@/components/ui/table";
 
 export interface TopVideoRow {
   id: string;

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

@@ -3,6 +3,7 @@
 
 @import "tailwindcss";
 @import "@agent-native/core/styles/agent-native.css";
+@import "@agent-native/toolkit/styles.css";
 
 @source "./**/*.{ts,tsx}";
 

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

@@ -1,6 +1,7 @@
-import { useIsMobile } from "@agent-native/toolkit/hooks/use-mobile";
 import { useCallback, useEffect, useState } from "react";
 
+import { useIsMobile } from "@/hooks/use-mobile";
+
 const DISMISSED_KEY = "clips.desktop-promo.dismissed";
 
 function detectDesktopApp(): boolean {

package/corpus/templates/clips/app/hooks/use-mobile.ts

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/hooks/use-mobile";

package/corpus/templates/clips/app/hooks/use-player-shortcuts.ts

@@ -57,14 +57,16 @@ export function usePlayerShortcuts(opts: UsePlayerShortcutsOpts) {
         case "j":
         case "J":
           e.preventDefault();
-          v.currentTime = Math.max(0, v.currentTime - 6);
+          player.seek(Math.max(0, v.currentTime * 1000 - 6000));
           break;
         case "l":
         case "L":
           e.preventDefault();
-          v.currentTime = Math.min(
-            v.duration || v.currentTime,
-            v.currentTime + 6,
+          player.seek(
+            Math.min(
+              (v.duration || v.currentTime) * 1000,
+              v.currentTime * 1000 + 6000,
+            ),
           );
           break;
         case "ArrowLeft":
@@ -75,9 +77,9 @@ export function usePlayerShortcuts(opts: UsePlayerShortcutsOpts) {
             const prev = [...chapters]
               .reverse()
               .find((c) => c.startMs < currentMs - 500);
-            v.currentTime = prev ? prev.startMs / 1000 : 0;
+            player.seek(prev ? prev.startMs : 0);
           } else {
-            v.currentTime = Math.max(0, v.currentTime - 6);
+            player.seek(Math.max(0, v.currentTime * 1000 - 6000));
           }
           break;
         case "ArrowRight":
@@ -86,11 +88,13 @@ export function usePlayerShortcuts(opts: UsePlayerShortcutsOpts) {
             // Next chapter
             const currentMs = v.currentTime * 1000;
             const next = chapters.find((c) => c.startMs > currentMs + 500);
-            if (next) v.currentTime = next.startMs / 1000;
+            if (next) player.seek(next.startMs);
           } else {
-            v.currentTime = Math.min(
-              v.duration || v.currentTime,
-              v.currentTime + 6,
+            player.seek(
+              Math.min(
+                (v.duration || v.currentTime) * 1000,
+                v.currentTime * 1000 + 6000,
+              ),
             );
           }
           break;

package/corpus/templates/clips/app/hooks/use-view-tracking.ts

@@ -21,6 +21,15 @@ function getSessionId(): string {
   }
 }
 
+function createViewSessionId(recordingId: string): string {
+  return [
+    "v",
+    recordingId,
+    Date.now().toString(36),
+    Math.random().toString(36).slice(2, 8),
+  ].join("-");
+}
+
 export interface UseViewTrackingOpts {
   recordingId: string;
   videoRef: React.RefObject<HTMLVideoElement | null>;
@@ -45,6 +54,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
   const openTrackedRecordingRef = useRef<string | null>(null);
   const lastSentProgressRef = useRef(0);
   const maxPctRef = useRef(0);
+  const viewSessionRef = useRef<string | null>(null);
 
   useEffect(() => {
     if (disabled) return;
@@ -58,6 +68,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         return;
       }
       openTrackedRecordingRef.current = recordingId;
+      viewSessionRef.current = createViewSessionId(recordingId);
       fetch(`${appBasePath()}/api/view-event`, {
         method: "POST",
         keepalive: true,
@@ -67,6 +78,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
           kind: "view-start",
           timestampMs: 0,
           sessionId: getSessionId(),
+          viewSessionId: viewSessionRef.current,
           totalWatchMs: 0,
           completedPct: 0,
           scrubbedToEnd: false,
@@ -77,6 +89,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
     }
 
     const sessionId = getSessionId();
+    viewSessionRef.current = createViewSessionId(recordingId);
     let progressTimer: ReturnType<typeof setInterval> | null = null;
 
     function post(
@@ -104,6 +117,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
           kind,
           timestampMs: Math.floor(v.currentTime * 1000),
           sessionId,
+          viewSessionId: viewSessionRef.current,
           totalWatchMs: Math.floor(watchMsRef.current),
           completedPct: Math.floor(maxPctRef.current),
           scrubbedToEnd: v.duration > 0 && v.currentTime >= v.duration - 0.5,