@agent-native/core 0.88.0 → 0.90.1

package/corpus/templates/clips/app/components/meetings/transcript-bubbles.tsx

@@ -1,13 +1,21 @@
 import { useT } from "@agent-native/core/client";
+import {
+  IconChevronDown,
+  IconChevronUp,
+  IconNotes,
+  IconSearch,
+  IconX,
+} from "@tabler/icons-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
-import { IconNotes } from "@tabler/icons-react";
-import { useEffect, useMemo, useRef } from "react";
-
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 export interface TranscriptSegment {
@@ -42,6 +50,31 @@ interface BubbleGroup {
   segments: { seg: TranscriptSegment; index: number }[];
 }
 
+// Splits `text` into plain/matched runs for a case-insensitive substring
+// highlight. Returns the original text as a single run when there's no query
+// or no match, so callers can render uniformly either way.
+function highlightRuns(
+  text: string,
+  query: string,
+): Array<{ text: string; match: boolean }> {
+  if (!query) return [{ text, match: false }];
+  const lower = text.toLowerCase();
+  const needle = query.toLowerCase();
+  const runs: Array<{ text: string; match: boolean }> = [];
+  let cursor = 0;
+  while (cursor < text.length) {
+    const at = lower.indexOf(needle, cursor);
+    if (at === -1) {
+      runs.push({ text: text.slice(cursor), match: false });
+      break;
+    }
+    if (at > cursor) runs.push({ text: text.slice(cursor, at), match: false });
+    runs.push({ text: text.slice(at, at + needle.length), match: true });
+    cursor = at + needle.length;
+  }
+  return runs.length ? runs : [{ text, match: false }];
+}
+
 function groupConsecutive(segments: TranscriptSegment[]): BubbleGroup[] {
   const groups: BubbleGroup[] = [];
   segments.forEach((seg, index) => {
@@ -70,9 +103,68 @@ export function TranscriptBubbles({
   const userPausedRef = useRef(false);
   const segmentRefs = useRef<Record<number, HTMLDivElement | null>>({});
   const flashTimeoutRef = useRef<number | null>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [matchCursor, setMatchCursor] = useState(0);
 
   const groups = useMemo(() => groupConsecutive(segments), [segments]);
 
+  const normalizedQuery = searchQuery.trim().toLowerCase();
+  const matchIndexes = useMemo(() => {
+    if (!normalizedQuery) return [];
+    const out: number[] = [];
+    segments.forEach((seg, index) => {
+      if (seg.text.toLowerCase().includes(normalizedQuery)) out.push(index);
+    });
+    return out;
+  }, [segments, normalizedQuery]);
+
+  // Keep the cursor in range as matches change (typing narrows the set).
+  useEffect(() => {
+    setMatchCursor(0);
+  }, [normalizedQuery]);
+
+  const scrollToSegmentRef = useRef<((segmentIndex: number) => void) | null>(
+    null,
+  );
+
+  // Only scroll when the resolved target actually changes — during a live
+  // meeting the segments array (and thus matchIndexes) gets a new identity on
+  // every poll, and re-scrolling each time would fight the user's scrolling.
+  const lastSearchScrollRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!normalizedQuery || !matchIndexes.length) {
+      lastSearchScrollRef.current = null;
+      return;
+    }
+    const target = matchIndexes[matchCursor % matchIndexes.length];
+    const scrollKey = `${normalizedQuery}:${target}`;
+    if (lastSearchScrollRef.current === scrollKey) return;
+    lastSearchScrollRef.current = scrollKey;
+    scrollToSegmentRef.current?.(target);
+  }, [normalizedQuery, matchIndexes, matchCursor]);
+
+  useEffect(() => {
+    if (searchOpen) {
+      const raf = requestAnimationFrame(() => searchInputRef.current?.focus());
+      return () => cancelAnimationFrame(raf);
+    }
+  }, [searchOpen]);
+
+  const closeSearch = () => {
+    setSearchOpen(false);
+    setSearchQuery("");
+  };
+
+  const goToMatch = (dir: 1 | -1) => {
+    if (!matchIndexes.length) return;
+    setMatchCursor(
+      (prev) => (prev + dir + matchIndexes.length) % matchIndexes.length,
+    );
+  };
+
   useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -91,24 +183,28 @@ export function TranscriptBubbles({
     }
   }, [isLive, segments.length]);
 
+  // Shared imperative scroll-and-flash, used by both the parent's bullet-jump
+  // wiring (registerScrollTo) and in-panel search navigation below.
+  const scrollToAndFlash = useRef((segmentIndex: number) => {
+    const node = segmentRefs.current[segmentIndex];
+    if (!node) return;
+    node.scrollIntoView({ behavior: "smooth", block: "center" });
+    // Yellow-flash highlight for ~1.5s.
+    node.classList.add("ring-2", "ring-yellow-400/70", "bg-yellow-400/10");
+    if (flashTimeoutRef.current) window.clearTimeout(flashTimeoutRef.current);
+    flashTimeoutRef.current = window.setTimeout(() => {
+      node.classList.remove("ring-2", "ring-yellow-400/70", "bg-yellow-400/10");
+    }, 1500);
+  }).current;
+
+  useEffect(() => {
+    scrollToSegmentRef.current = scrollToAndFlash;
+  }, [scrollToAndFlash]);
+
   useEffect(() => {
     if (!registerScrollTo) return;
-    registerScrollTo((segmentIndex: number) => {
-      const node = segmentRefs.current[segmentIndex];
-      if (!node) return;
-      node.scrollIntoView({ behavior: "smooth", block: "center" });
-      // Yellow-flash highlight for ~1.5s.
-      node.classList.add("ring-2", "ring-yellow-400/70", "bg-yellow-400/10");
-      if (flashTimeoutRef.current) window.clearTimeout(flashTimeoutRef.current);
-      flashTimeoutRef.current = window.setTimeout(() => {
-        node.classList.remove(
-          "ring-2",
-          "ring-yellow-400/70",
-          "bg-yellow-400/10",
-        );
-      }, 1500);
-    });
-  }, [registerScrollTo]);
+    registerScrollTo(scrollToAndFlash);
+  }, [registerScrollTo, scrollToAndFlash]);
 
   if (segments.length === 0) {
     if (isLive) {
@@ -133,8 +229,86 @@ export function TranscriptBubbles({
     );
   }
 
+  const activeMatchIndex = matchIndexes.length
+    ? matchIndexes[matchCursor % matchIndexes.length]
+    : null;
+
   return (
     <TooltipProvider delayDuration={200}>
+      <div className="flex shrink-0 items-center justify-end gap-1.5 border-b border-border px-2 py-1.5">
+        {searchOpen ? (
+          <>
+            <Input
+              ref={searchInputRef}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") {
+                  e.preventDefault();
+                  closeSearch();
+                } else if (e.key === "Enter") {
+                  e.preventDefault();
+                  goToMatch(e.shiftKey ? -1 : 1);
+                }
+              }}
+              onBlur={() => {
+                if (!searchQuery.trim()) closeSearch();
+              }}
+              placeholder={t("transcriptBubbles.searchPlaceholder")}
+              className="h-7 flex-1 text-xs"
+            />
+            {normalizedQuery && (
+              <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground">
+                {matchIndexes.length > 0
+                  ? t("transcriptBubbles.searchMatchCount", {
+                      current: (matchCursor % matchIndexes.length) + 1,
+                      total: matchIndexes.length,
+                    })
+                  : t("transcriptBubbles.searchNoMatches")}
+              </span>
+            )}
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-7 w-7 shrink-0 cursor-pointer"
+              disabled={!matchIndexes.length}
+              aria-label={t("transcriptBubbles.searchPrevMatch")}
+              onClick={() => goToMatch(-1)}
+            >
+              <IconChevronUp className="h-3.5 w-3.5" />
+            </Button>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-7 w-7 shrink-0 cursor-pointer"
+              disabled={!matchIndexes.length}
+              aria-label={t("transcriptBubbles.searchNextMatch")}
+              onClick={() => goToMatch(1)}
+            >
+              <IconChevronDown className="h-3.5 w-3.5" />
+            </Button>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-7 w-7 shrink-0 cursor-pointer"
+              aria-label={t("transcriptBubbles.searchClose")}
+              onClick={closeSearch}
+            >
+              <IconX className="h-3.5 w-3.5" />
+            </Button>
+          </>
+        ) : (
+          <Button
+            size="icon"
+            variant="ghost"
+            className="h-7 w-7 shrink-0 cursor-pointer"
+            aria-label={t("transcriptBubbles.searchTranscript")}
+            onClick={() => setSearchOpen(true)}
+          >
+            <IconSearch className="h-3.5 w-3.5" />
+          </Button>
+        )}
+      </div>
       <div ref={containerRef} className="flex-1 overflow-y-auto p-4">
         <div className="space-y-3">
           {groups.map((group, gi) => {
@@ -190,7 +364,27 @@ export function TranscriptBubbles({
                               {seg.speaker}
                             </div>
                           )}
-                          <p className="whitespace-pre-wrap">{seg.text}</p>
+                          <p className="whitespace-pre-wrap">
+                            {normalizedQuery
+                              ? highlightRuns(seg.text, normalizedQuery).map(
+                                  (run, ri) =>
+                                    run.match ? (
+                                      <mark
+                                        key={ri}
+                                        className={cn(
+                                          "rounded-sm bg-yellow-400/70 text-foreground",
+                                          index === activeMatchIndex &&
+                                            "bg-yellow-400 ring-1 ring-yellow-600",
+                                        )}
+                                      >
+                                        {run.text}
+                                      </mark>
+                                    ) : (
+                                      <span key={ri}>{run.text}</span>
+                                    ),
+                                )
+                              : seg.text}
+                          </p>
                         </div>
                       </TooltipTrigger>
                       <TooltipContent side={isMe ? "left" : "right"}>

package/corpus/templates/clips/app/components/player/access-password-prompt.tsx

@@ -1,9 +1,10 @@
 import { useT } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Input } from "@agent-native/toolkit/ui/input";
 import { IconLock } from "@tabler/icons-react";
 import { useState } from "react";
 
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
 export interface AccessPasswordPromptProps {
   onSubmit: (password: string) => void;
   error?: string | null;

package/corpus/templates/clips/app/components/player/comments-panel.tsx

@@ -1,18 +1,4 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
-import { Avatar, AvatarFallback } from "@agent-native/toolkit/ui/avatar";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@agent-native/toolkit/ui/popover";
-import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import {
   IconSend,
   IconCheck,
@@ -25,6 +11,20 @@ import {
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 
 import { msToClock } from "./scrubber";

package/corpus/templates/clips/app/components/player/delete-recording-menu.tsx

@@ -1,4 +1,8 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
+import { IconDots, IconDownload, IconTrash } from "@tabler/icons-react";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -8,18 +12,15 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@agent-native/toolkit/ui/alert-dialog";
-import { Button } from "@agent-native/toolkit/ui/button";
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
-import { IconDots, IconDownload, IconTrash } from "@tabler/icons-react";
-import { useCallback, useState } from "react";
-import { toast } from "sonner";
+} from "@/components/ui/dropdown-menu";
 
 interface DeleteRecordingMenuProps {
   recordingId: string;

package/corpus/templates/clips/app/components/player/insights-panel.tsx

@@ -1,5 +1,4 @@
 import { useActionQuery, useT } from "@agent-native/core/client";
-import { Avatar, AvatarFallback } from "@agent-native/toolkit/ui/avatar";
 import {
   IconEye,
   IconUser,
@@ -16,6 +15,9 @@ import {
   CartesianGrid,
 } from "recharts";
 
+import { ViewedByPopover } from "@/components/sharing/viewed-by-popover";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
 export interface InsightsPanelProps {
   recordingId: string;
   durationMs: number;
@@ -64,11 +66,21 @@ export function InsightsPanel({ recordingId, durationMs }: InsightsPanelProps) {
   return (
     <div className="p-4 space-y-6">
       <div className="grid grid-cols-2 gap-3">
-        <Stat
-          icon={<IconEye className="h-4 w-4" />}
-          label={t("recordingInsights.views")}
-          value={data.views}
-        />
+        {data.views > 0 ? (
+          <ViewedByPopover recordingId={recordingId} className="w-full">
+            <Stat
+              icon={<IconEye className="h-4 w-4" />}
+              label={t("recordingInsights.views")}
+              value={data.views}
+            />
+          </ViewedByPopover>
+        ) : (
+          <Stat
+            icon={<IconEye className="h-4 w-4" />}
+            label={t("recordingInsights.views")}
+            value={data.views}
+          />
+        )}
         <Stat
           icon={<IconUser className="h-4 w-4" />}
           label={t("recordingInsights.uniqueViewers")}

package/corpus/templates/clips/app/components/player/player-controls.tsx

@@ -1,4 +1,16 @@
 import { useT } from "@agent-native/core/client";
+import {
+  IconPlayerPlay,
+  IconPlayerPause,
+  IconVolume,
+  IconVolumeOff,
+  IconMaximize,
+  IconPictureInPicture,
+  IconSubtitles,
+  IconRectangle,
+} from "@tabler/icons-react";
+import { useState, type FocusEvent } from "react";
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -6,29 +18,17 @@ import {
   DropdownMenuTrigger,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-} from "@agent-native/toolkit/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@agent-native/toolkit/ui/popover";
+} from "@/components/ui/popover";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
-import {
-  IconPlayerPlay,
-  IconPlayerPause,
-  IconVolume,
-  IconVolumeOff,
-  IconMaximize,
-  IconPictureInPicture,
-  IconSubtitles,
-  IconRectangle,
-} from "@tabler/icons-react";
-import { useState, type FocusEvent } from "react";
-
+} from "@/components/ui/tooltip";
 import { PLAYBACK_SPEED_OPTIONS } from "@/lib/playback-speed";
 import { cn } from "@/lib/utils";
 
@@ -115,7 +115,7 @@ export function PlayerControls(props: PlayerControlsProps) {
         excludedRanges={excludedRanges}
       />
 
-      <div className="flex items-center gap-1.5 text-white">
+      <div className="flex min-w-0 items-center gap-1.5 text-white">
         <IconBtn
           onClick={onPlayPause}
           tooltip={isPlaying ? "Pause (K)" : "Play (K)"}
@@ -183,13 +183,15 @@ export function PlayerControls(props: PlayerControlsProps) {
         <div className="flex-1" />
 
         {hasCaptions ? (
-          <IconBtn
-            onClick={onToggleCaptions}
-            active={captionsOn}
-            tooltip="Captions (C)"
-          >
-            <IconSubtitles className="h-5 w-5" />
-          </IconBtn>
+          <div className="hidden sm:block">
+            <IconBtn
+              onClick={onToggleCaptions}
+              active={captionsOn}
+              tooltip="Captions (C)"
+            >
+              <IconSubtitles className="h-5 w-5" />
+            </IconBtn>
+          </div>
         ) : null}
 
         <DropdownMenu>
@@ -226,22 +228,26 @@ export function PlayerControls(props: PlayerControlsProps) {
           </DropdownMenuContent>
         </DropdownMenu>
 
-        <IconBtn
-          onClick={onTogglePip}
-          active={isPip}
-          tooltip="Picture in picture"
-        >
-          <IconPictureInPicture className="h-5 w-5" />
-        </IconBtn>
-
-        {onToggleTheater ? (
+        <div className="hidden sm:block">
           <IconBtn
-            onClick={onToggleTheater}
-            active={theaterMode}
-            tooltip="Theater mode (T)"
+            onClick={onTogglePip}
+            active={isPip}
+            tooltip="Picture in picture"
           >
-            <IconRectangle className="h-5 w-5" />
+            <IconPictureInPicture className="h-5 w-5" />
           </IconBtn>
+        </div>
+
+        {onToggleTheater ? (
+          <div className="hidden sm:block">
+            <IconBtn
+              onClick={onToggleTheater}
+              active={theaterMode}
+              tooltip="Theater mode (T)"
+            >
+              <IconRectangle className="h-5 w-5" />
+            </IconBtn>
+          </div>
         ) : null}
 
         <IconBtn onClick={onToggleFullscreen} tooltip="Fullscreen (F)">

package/corpus/templates/clips/app/components/player/reactions-tray.tsx

@@ -1,10 +1,10 @@
+import { useState } from "react";
+
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
-import { useState } from "react";
-
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 const EMOJIS = ["👍", "❤️", "🔥", "👏", "🎉", "😂", "🤯"] as const;
@@ -45,7 +45,7 @@ export function ReactionsTray({ onReact, disabled }: ReactionsTrayProps) {
               onClick={() => fire(emoji)}
               disabled={disabled}
               className={cn(
-                "flex h-8 w-8 items-center justify-center rounded-full text-lg sm:h-9 sm:w-9 sm:text-xl",
+                "flex h-7 w-7 items-center justify-center rounded-full text-base sm:h-9 sm:w-9 sm:text-xl",
                 disabled && "opacity-50 cursor-not-allowed",
               )}
             >

package/corpus/templates/clips/app/components/player/settings-panel.tsx

@@ -3,18 +3,6 @@ import {
   useActionMutation,
   useReconciledState,
 } from "@agent-native/core/client";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { Separator } from "@agent-native/toolkit/ui/separator";
-import { Switch } from "@agent-native/toolkit/ui/switch";
 import {
   IconLock,
   IconClock,
@@ -26,6 +14,19 @@ import {
 } from "@tabler/icons-react";
 import { useRef, useState } from "react";
 
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+
 import { SPEED_OPTIONS } from "./player-controls";
 
 export interface SettingsPanelProps {