@agent-native/core 0.102.0 → 0.102.2

package/corpus/templates/clips/app/components/editor/thumbnail-picker.tsx

@@ -4,6 +4,7 @@ import {
   IconPhotoEdit,
   IconUpload,
   IconLoader2,
+  IconX,
 } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -55,6 +56,10 @@ export function ThumbnailPicker({
   const [gifDataUrl, setGifDataUrl] = useState<string | null>(null);
 
   const videoRef = useRef<HTMLVideoElement | null>(null);
+  const framePreviewRef = useRef<HTMLVideoElement | null>(null);
+  const gifVideoRef = useRef<HTMLVideoElement | null>(null);
+  const gifPreviewRef = useRef<HTMLVideoElement | null>(null);
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
 
   const mutation = useActionMutation("set-thumbnail");
 
@@ -65,6 +70,7 @@ export function ThumbnailPicker({
       setFrameDataUrl(null);
       setGifDataUrl(null);
       setGifProgress(null);
+      if (uploadInputRef.current) uploadInputRef.current.value = "";
     }
   }, [open]);
 
@@ -98,6 +104,18 @@ export function ThumbnailPicker({
     }
   };
 
+  const seekPreview = (video: HTMLVideoElement | null, timeMs: number) => {
+    if (!video || !Number.isFinite(timeMs)) return;
+    const apply = () => {
+      video.currentTime = Math.max(0, timeMs) / 1000;
+    };
+    if (video.readyState === HTMLMediaElement.HAVE_NOTHING) {
+      video.addEventListener("loadedmetadata", apply, { once: true });
+    } else {
+      apply();
+    }
+  };
+
   const handleGifGenerate = async () => {
     if (!videoUrl) return;
     try {
@@ -187,6 +205,7 @@ export function ThumbnailPicker({
           <TabsContent value="upload" className="py-4 space-y-3">
             <Label>{t("thumbnailPicker.uploadImage")}</Label>
             <input
+              ref={uploadInputRef}
               type="file"
               accept="image/*"
               onChange={(e) => {
@@ -196,14 +215,39 @@ export function ThumbnailPicker({
                 reader.onload = () => setUploadDataUrl(reader.result as string);
                 reader.readAsDataURL(file);
               }}
-              className="text-sm"
+              className="sr-only"
             />
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              onClick={() => uploadInputRef.current?.click()}
+            >
+              <IconUpload className="mr-1 h-4 w-4" />
+              {t("shareDialog.chooseFile")}
+            </Button>
             {uploadDataUrl ? (
-              <img
-                src={uploadDataUrl}
-                alt={t("thumbnailPicker.uploadedPreview")}
-                className="max-h-60 rounded border border-border"
-              />
+              <div className="relative w-fit">
+                <img
+                  src={uploadDataUrl}
+                  alt={t("thumbnailPicker.uploadedPreview")}
+                  className="max-h-60 rounded border border-border"
+                />
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="icon"
+                  className="absolute right-1 top-1 h-7 w-7"
+                  aria-label={t("shareDialog.remove")}
+                  onClick={() => {
+                    setUploadDataUrl(null);
+                    if (uploadInputRef.current)
+                      uploadInputRef.current.value = "";
+                  }}
+                >
+                  <IconX className="h-4 w-4" />
+                </Button>
+              </div>
             ) : currentThumbnailUrl ? (
               <img
                 src={currentThumbnailUrl}
@@ -235,7 +279,13 @@ export function ThumbnailPicker({
                     max={Math.max(1000, durationMs)}
                     step={100}
                     value={[frameTime]}
-                    onValueChange={([v]) => setFrameTime(v)}
+                    onValueChange={([v]) => {
+                      const next = v ?? 0;
+                      setFrameTime(next);
+                      setFrameDataUrl(null);
+                      seekPreview(videoRef.current, next);
+                      seekPreview(framePreviewRef.current, next);
+                    }}
                   />
                   <Button
                     size="sm"
@@ -256,6 +306,15 @@ export function ThumbnailPicker({
                     alt={t("thumbnailPicker.capturedFrame")}
                     className="w-full rounded border border-border mt-1"
                   />
+                ) : videoUrl ? (
+                  <video
+                    ref={framePreviewRef}
+                    src={videoUrl}
+                    className="w-full rounded border border-border bg-black mt-1"
+                    crossOrigin="anonymous"
+                    preload="auto"
+                    muted
+                  />
                 ) : (
                   <div className="w-full aspect-video rounded border border-dashed border-border flex items-center justify-center text-xs text-muted-foreground mt-1">
                     {t("thumbnailPicker.capturePreview")}
@@ -269,6 +328,7 @@ export function ThumbnailPicker({
             <div className="grid grid-cols-2 gap-4">
               <div>
                 <video
+                  ref={gifVideoRef}
                   src={videoUrl ?? undefined}
                   className="w-full rounded border border-border bg-black"
                   crossOrigin="anonymous"
@@ -287,7 +347,13 @@ export function ThumbnailPicker({
                       max={Math.max(0, durationMs - gifDuration)}
                       step={100}
                       value={[gifStart]}
-                      onValueChange={([v]) => setGifStart(v)}
+                      onValueChange={([v]) => {
+                        const next = v ?? 0;
+                        setGifStart(next);
+                        setGifDataUrl(null);
+                        seekPreview(gifVideoRef.current, next);
+                        seekPreview(gifPreviewRef.current, next);
+                      }}
                     />
                   </div>
                   <div>
@@ -301,7 +367,10 @@ export function ThumbnailPicker({
                       max={10000}
                       step={100}
                       value={[gifDuration]}
-                      onValueChange={([v]) => setGifDuration(v)}
+                      onValueChange={([v]) => {
+                        setGifDuration(v ?? 500);
+                        setGifDataUrl(null);
+                      }}
                     />
                   </div>
                   <Button
@@ -331,6 +400,15 @@ export function ThumbnailPicker({
                     alt={t("thumbnailPicker.animatedPreview")}
                     className="w-full rounded border border-border mt-1"
                   />
+                ) : videoUrl ? (
+                  <video
+                    ref={gifPreviewRef}
+                    src={videoUrl}
+                    className="w-full rounded border border-border bg-black mt-1"
+                    crossOrigin="anonymous"
+                    preload="auto"
+                    muted
+                  />
                 ) : (
                   <div className="w-full aspect-video rounded border border-dashed border-border flex items-center justify-center text-xs text-muted-foreground mt-1">
                     {t("thumbnailPicker.generateGifPreview")}

package/corpus/templates/clips/app/components/editor/trim-handles.tsx

@@ -13,6 +13,7 @@ export interface TrimHandlesProps {
   /** Fires when the user releases the mouse after drag. */
   onCommit?: (value: { startMs: number; endMs: number }) => void;
   durationMs: number;
+  splitPoints?: number[];
   className?: string;
 }
 
@@ -44,6 +45,7 @@ export function TrimHandles({
   onChange,
   onCommit,
   durationMs,
+  splitPoints = [],
   className,
 }: TrimHandlesProps) {
   const rootRef = useRef<HTMLDivElement | null>(null);
@@ -111,6 +113,9 @@ export function TrimHandles({
 
   const startX = (value.startMs / Math.max(durationMs, 1)) * width;
   const endX = (value.endMs / Math.max(durationMs, 1)) * width;
+  const visibleSplitPoints = splitPoints.filter(
+    (ms) => ms > value.startMs && ms < value.endMs, // i18n-ignore numeric range predicate, not visible UI copy
+  );
 
   return (
     <div
@@ -133,6 +138,16 @@ export function TrimHandles({
         <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full bg-foreground text-background text-[10px] px-1.5 py-0.5 rounded font-mono whitespace-nowrap">
           {formatMs(value.endMs - value.startMs)}
         </div>
+        {visibleSplitPoints.map((splitMs) => (
+          <div
+            key={splitMs}
+            className="absolute top-0 h-full w-0.5 -translate-x-1/2 bg-rose-500/95"
+            style={{
+              left: `${((splitMs - value.startMs) / Math.max(value.endMs - value.startMs, 1)) * 100}%`,
+            }}
+            aria-hidden="true"
+          />
+        ))}
       </div>
 
       {/* Left handle */}

package/corpus/templates/clips/app/components/editor/waveform.tsx

@@ -18,6 +18,8 @@ export interface WaveformProps {
   durationMs: number;
   /** Excluded ranges (original time) — drawn as striped overlays. */
   excludedRanges?: Array<{ startMs: number; endMs: number }>;
+  /** Split markers (original time) — drawn over the active selection. */
+  splitPoints?: number[];
   /** Optional selection range (original time) highlighted in brand color. */
   selectionRange?: { startMs: number; endMs: number } | null;
   /** Transcript-backed activity ranges used when browser audio decoding fails. */
@@ -87,6 +89,7 @@ export function Waveform({
   playheadMs,
   durationMs,
   excludedRanges,
+  splitPoints = [],
   selectionRange,
   activityRanges = [],
   onSeek,
@@ -220,19 +223,28 @@ export function Waveform({
 
     // Selection overlay
     if (selectionRange) {
-      const xStart =
-        (Math.min(selectionRange.startMs, selectionRange.endMs) /
-          Math.max(durationMs, 1)) *
-        totalWidth;
-      const xEnd =
-        (Math.max(selectionRange.startMs, selectionRange.endMs) /
-          Math.max(durationMs, 1)) *
-        totalWidth;
+      const startMs = Math.min(selectionRange.startMs, selectionRange.endMs);
+      const endMs = Math.max(selectionRange.startMs, selectionRange.endMs);
+      const xStart = (startMs / Math.max(durationMs, 1)) * totalWidth;
+      const xEnd = (endMs / Math.max(durationMs, 1)) * totalWidth;
       ctx.fillStyle = getBrandColorAlpha(0.28);
       ctx.fillRect(xStart, 0, xEnd - xStart, height);
       ctx.strokeStyle = getBrandColor();
       ctx.lineWidth = 1;
       ctx.strokeRect(xStart + 0.5, 0.5, xEnd - xStart - 1, height - 1);
+
+      // Keep split markers visible on the selected track as well as on the
+      // ruler so a split is visibly actionable within the selection.
+      for (const splitMs of splitPoints) {
+        if (splitMs <= startMs || splitMs >= endMs) continue;
+        const splitX = (splitMs / Math.max(durationMs, 1)) * totalWidth;
+        ctx.strokeStyle = "rgba(244, 63, 94, 0.95)";
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(splitX, 0);
+        ctx.lineTo(splitX, height);
+        ctx.stroke();
+      }
     }
   }, [
     peaks,
@@ -240,6 +252,7 @@ export function Waveform({
     height,
     excludedRanges,
     selectionRange,
+    splitPoints,
     durationMs,
     activityRanges,
   ]);

package/corpus/templates/clips/app/components/library/folder-tree.tsx

@@ -6,6 +6,7 @@ import {
   IconFolderPlus,
   IconTrash,
   IconEdit,
+  IconDots,
 } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 import { NavLink } from "react-router";
@@ -33,6 +34,13 @@ import {
   ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   useCreateFolder,
   useDeleteFolder,
@@ -186,6 +194,50 @@ function FolderItem({
                   {node.name}
                 </span>
               </NavLink>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={`${node.name}: ${t("root.commandActions")}`}
+                    title={`${node.name}: ${t("root.commandActions")}`}
+                    className="rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
+                  >
+                    <IconDots className="h-3.5 w-3.5" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" side="right">
+                  <DropdownMenuItem
+                    onSelect={() => {
+                      setTimeout(() => {
+                        setRenameValue(node.name);
+                        setRenameOpen(true);
+                      }, 0);
+                    }}
+                  >
+                    <IconEdit className="h-3.5 w-3.5 me-2" />{" "}
+                    {t("folderTree.rename")}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={() => {
+                      setTimeout(() => {
+                        setNewValue("");
+                        setNewOpen(true);
+                      }, 0);
+                    }}
+                  >
+                    <IconFolderPlus className="h-3.5 w-3.5 me-2" />{" "}
+                    {t("folderTree.newSubfolder")}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onSelect={() => setTimeout(() => setConfirmDelete(true), 0)}
+                    className="text-destructive"
+                  >
+                    <IconTrash className="h-3.5 w-3.5 me-2" />{" "}
+                    {t("folderTree.delete")}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
           </ContextMenuTrigger>
           <ContextMenuContent>

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

@@ -361,6 +361,7 @@ function CtaEditor({
   // editing this card, so an agent edit to the CTA shows up live. `editing`
   // flips true while focus is anywhere inside the card.
   const editing = useRef(false);
+  const [collapsed, setCollapsed] = useState(true);
   const [label, setLabel] = useReconciledState(cta.label, {
     active: editing.current,
   });
@@ -387,52 +388,91 @@ function CtaEditor({
         }
       }}
     >
-      <Input
-        value={label}
-        onChange={(e) => setLabel(e.target.value)}
-        placeholder={t("playerSettings.buttonLabelPlaceholder")}
-      />
-      <Input
-        value={url}
-        onChange={(e) => setUrl(e.target.value)}
-        placeholder="https://…"
-      />
-      <div className="flex gap-2">
-        <input
-          type="color"
-          value={color}
-          onChange={(e) => setColor(e.target.value)}
-          className="h-9 w-12 rounded cursor-pointer border border-border"
-        />
-        <Select
-          value={placement}
-          onValueChange={(v) => setPlacement(v as "end" | "throughout")}
-        >
-          <SelectTrigger className="flex-1">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="throughout">
-              {t("playerSettings.placementThroughout")}
-            </SelectItem>
-            <SelectItem value="end">
-              {t("playerSettings.placementEnd")}
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-      <div className="flex gap-2">
-        <Button
-          size="sm"
-          className="bg-primary hover:bg-primary/90 text-primary-foreground"
-          onClick={() => onSave({ label, url, color, placement })}
-        >
-          {t("common.save")}
-        </Button>
-        <Button size="sm" variant="ghost" onClick={onDelete}>
-          {t("playerSettings.delete")}
-        </Button>
-      </div>
+      {collapsed ? (
+        <div className="flex items-center gap-2">
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium">{cta.label}</p>
+            <p className="text-xs text-muted-foreground">
+              {cta.placement === "throughout"
+                ? t("playerSettings.placementThroughout")
+                : t("playerSettings.placementEnd")}
+            </p>
+          </div>
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            title={t("recordingPage.edit")}
+            onClick={() => setCollapsed(false)}
+          >
+            {t("recordingPage.edit")}
+          </Button>
+          <Button type="button" size="sm" variant="ghost" onClick={onDelete}>
+            {t("playerSettings.delete")}
+          </Button>
+        </div>
+      ) : (
+        <>
+          <Input
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            placeholder={t("playerSettings.buttonLabelPlaceholder")}
+          />
+          <Input
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="https://…"
+          />
+          <div className="flex gap-2">
+            <input
+              type="color"
+              value={color}
+              onChange={(e) => setColor(e.target.value)}
+              className="h-9 w-12 rounded cursor-pointer border border-border"
+            />
+            <Select
+              value={placement}
+              onValueChange={(v) => setPlacement(v as "end" | "throughout")}
+            >
+              <SelectTrigger className="flex-1">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="throughout">
+                  {t("playerSettings.placementThroughout")}
+                </SelectItem>
+                <SelectItem value="end">
+                  {t("playerSettings.placementEnd")}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              size="sm"
+              className="bg-primary text-primary-foreground hover:bg-primary/90"
+              onClick={() => {
+                onSave({ label, url, color, placement });
+                setCollapsed(true);
+              }}
+            >
+              {t("common.save")}
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={() => setCollapsed(true)}
+            >
+              {t("recordingPage.done")}
+            </Button>
+            <Button type="button" size="sm" variant="ghost" onClick={onDelete}>
+              {t("playerSettings.delete")}
+            </Button>
+          </div>
+        </>
+      )}
     </div>
   );
 }

package/corpus/templates/clips/app/components/player/share-dialog.tsx

@@ -380,49 +380,55 @@ function LinkTab({
       )}
 
       <CopyField
-        label={t("shareDialog.shareWithHumans")}
+        label={
+          isPublic
+            ? t("shareDialog.shareLink")
+            : t("shareDialog.shareWithHumans")
+        }
         value={shareUrl}
         disabled={
           visibilityPending || !sharesLoaded || (!isPublic && canManage)
         }
       />
 
-      <div className="space-y-2">
-        <CopyField
-          label={t("shareDialog.shareWithAgents")}
-          value={agentLink}
-          disabled={agentShareDisabled}
-        />
-        {sharesLoaded && !isPublic ? (
-          <>
-            <p className="text-xs text-muted-foreground">
-              {t("shareDialog.agentTokenDescription")}
-            </p>
-            {agentLinkError ? (
-              <div className="flex items-center justify-between gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
-                <p className="text-xs text-muted-foreground">
-                  {t("shareDialog.agentLinkUnavailable")}
-                </p>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="h-7"
-                  onClick={() => void loadAgentContextUrl()}
-                  disabled={createAgentLink.isPending}
-                >
-                  {t("shareDialog.retryAgentLink")}
-                </Button>
-              </div>
-            ) : null}
-            <CopyField
-              label={t("shareDialog.copyAgentPrompt")}
-              value={agentPrompt}
-              disabled={agentShareDisabled}
-            />
-          </>
-        ) : null}
-      </div>
+      {!isPublic ? (
+        <div className="space-y-2">
+          <CopyField
+            label={t("shareDialog.shareWithAgents")}
+            value={agentLink}
+            disabled={agentShareDisabled}
+          />
+          {sharesLoaded ? (
+            <>
+              <p className="text-xs text-muted-foreground">
+                {t("shareDialog.agentTokenDescription")}
+              </p>
+              {agentLinkError ? (
+                <div className="flex items-center justify-between gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
+                  <p className="text-xs text-muted-foreground">
+                    {t("shareDialog.agentLinkUnavailable")}
+                  </p>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-7"
+                    onClick={() => void loadAgentContextUrl()}
+                    disabled={createAgentLink.isPending}
+                  >
+                    {t("shareDialog.retryAgentLink")}
+                  </Button>
+                </div>
+              ) : null}
+              <CopyField
+                label={t("shareDialog.copyAgentPrompt")}
+                value={agentPrompt}
+                disabled={agentShareDisabled}
+              />
+            </>
+          ) : null}
+        </div>
+      ) : null}
 
       {sharesLoaded && !isPublic && canManage ? (
         <MakePublicCard

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

@@ -592,6 +592,14 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
         pauseVideo();
         return;
       }
+      if (v.ended) {
+        try {
+          v.currentTime = 0;
+          setCurrentMs(0);
+        } catch {
+          // Let the normal play attempt report a media error if the seek fails.
+        }
+      }
       requestPlay();
     }, [isPlaying, pauseVideo, requestPlay]);
 
@@ -1423,6 +1431,21 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
           </div>
         )}
 
+        {thumbnailUrl &&
+        !autoPlay &&
+        !hasPlaybackStarted &&
+        (!startMs || startMs <= 0) ? (
+          <img
+            src={resolveLocalUrl(thumbnailUrl)}
+            alt=""
+            aria-hidden="true"
+            className={cn(
+              "pointer-events-none absolute inset-0 z-[1] h-full w-full",
+              cover ? "object-cover" : "object-contain",
+            )}
+          />
+        ) : null}
+
         {centerOverlayMode ? (
           <CenterPlaybackOverlay
             mode={centerOverlayMode}
@@ -1462,7 +1485,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
 
         {/* Floating CTA (throughout placement) */}
         {showThroughoutCta ? (
-          <div data-player-ui className="absolute bottom-16 right-4 z-20">
+          <div data-player-ui className="absolute bottom-16 right-4 z-30">
             <CtaButton
               cta={cta!}
               onClick={() => onCtaClick?.(cta!.id)}
@@ -1484,6 +1507,27 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
                 onClick={() => onCtaClick?.(cta!.id)}
                 large
               />
+              <button
+                type="button"
+                data-player-ui
+                aria-label={t("videoPlayer.playClip")}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  const v = videoRef.current;
+                  if (!v) return;
+                  try {
+                    v.currentTime = 0;
+                    setCurrentMs(0);
+                  } catch {
+                    // The regular play path will surface any media error.
+                  }
+                  requestPlay();
+                }}
+                className="pointer-events-auto inline-flex items-center gap-2 rounded-md border border-white/30 bg-white/10 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
+              >
+                <IconPlayerPlay className="h-4 w-4 fill-current" />
+                {t("videoPlayer.playClip")}
+              </button>
             </div>
           </div>
         ) : null}