@agent-native/core 0.102.1 → 0.102.2

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}

package/corpus/templates/clips/app/i18n/ar-SA.ts

@@ -455,6 +455,8 @@ const messages = {
     retryAgentLink: "إعادة المحاولة",
     gifPreview: "معاينة GIF",
     openPlayer: "مشغل مفتوح",
+    chooseFile: "اختيار ملف",
+    remove: "إزالة",
     downloadMp4: "تحميل MP4",
     embedsNeedPublic: "التضمينات تحتاج إلى مقطع عام",
     embedPublicDescription:

package/corpus/templates/clips/app/i18n/de-DE.ts

@@ -468,6 +468,8 @@ const messages = {
     retryAgentLink: "Erneut versuchen",
     gifPreview: "GIF-Vorschau",
     openPlayer: "Spieler öffnen",
+    chooseFile: "Datei auswählen",
+    remove: "Entfernen",
     downloadMp4: "Laden Sie MP4 herunter",
     embedsNeedPublic: "Für Einbettungen ist ein öffentlicher Clip erforderlich",
     embedPublicDescription:

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

@@ -451,6 +451,8 @@ const messages = {
     retryAgentLink: "Retry",
     gifPreview: "GIF preview",
     openPlayer: "Open player",
+    chooseFile: "Choose file",
+    remove: "Remove",
     downloadMp4: "Download MP4",
     embedsNeedPublic: "Embeds need a public clip",
     embedPublicDescription:

package/corpus/templates/clips/app/i18n/es-ES.ts

@@ -465,6 +465,8 @@ const messages = {
     retryAgentLink: "Reintentar",
     gifPreview: "vista previa de GIF",
     openPlayer: "jugador abierto",
+    chooseFile: "Elige el archivo",
+    remove: "Eliminar",
     downloadMp4: "Descargar MP4",
     embedsNeedPublic: "Los elementos insertados necesitan un clip público",
     embedPublicDescription:

package/corpus/templates/clips/app/i18n/fr-FR.ts

@@ -465,6 +465,8 @@ const messages = {
     retryAgentLink: "Réessayer",
     gifPreview: "aperçu de GIF",
     openPlayer: "Joueur ouvert",
+    chooseFile: "Choisir un fichier",
+    remove: "Retirer",
     downloadMp4: "Télécharger MP4",
     embedsNeedPublic: "Les intégrations nécessitent un clip public",
     embedPublicDescription:

package/corpus/templates/clips/app/i18n/hi-IN.ts

@@ -448,6 +448,8 @@ const messages = {
     retryAgentLink: "फिर से प्रयास करें",
     gifPreview: "GIF पूर्वावलोकन",
     openPlayer: "खुला खिलाड़ी",
+    chooseFile: "फ़ाइल चुनें",
+    remove: "हटाएं",
     downloadMp4: "MP4 डाउनलोड करें",
     embedsNeedPublic: "एंबेड को एक सार्वजनिक क्लिप की आवश्यकता है",
     embedPublicDescription:

package/corpus/templates/clips/app/i18n/ja-JP.ts

@@ -460,6 +460,8 @@ const messages = {
     retryAgentLink: "再試行",
     gifPreview: "GIF プレビュー",
     openPlayer: "プレーヤーを開く",
+    chooseFile: "ファイルを選択してください",
+    remove: "取り除く",
     downloadMp4: "ダウンロード",
     embedsNeedPublic: "埋め込みにはパブリッククリップが必要です",
     embedPublicDescription:

package/corpus/templates/clips/app/i18n/ko-KR.ts

@@ -453,6 +453,8 @@ const messages = {
     retryAgentLink: "다시 시도",
     gifPreview: "GIF 미리보기",
     openPlayer: "플레이어 열기",
+    chooseFile: "파일 선택",
+    remove: "제거",
     downloadMp4: "MP4 다운로드",
     embedsNeedPublic: "퍼가기에는 공개 클립이 필요합니다",
     embedPublicDescription:

package/corpus/templates/clips/app/i18n/pt-BR.ts

@@ -462,6 +462,8 @@ const messages = {
     retryAgentLink: "Tentar novamente",
     gifPreview: "visualização de GIF",
     openPlayer: "Jogador aberto",
+    chooseFile: "Escolher arquivo",
+    remove: "Remover",
     downloadMp4: "Baixar MP4",
     embedsNeedPublic: "As incorporações precisam de um clipe público",
     embedPublicDescription:

package/corpus/templates/clips/app/i18n/zh-CN.ts

@@ -435,6 +435,8 @@ const messages = {
     retryAgentLink: "重试",
     gifPreview: "GIF 预览",
     openPlayer: "开放玩家",
+    chooseFile: "选择文件",
+    remove: "消除",
     downloadMp4: "下载MP4",
     embedsNeedPublic: "嵌入需要公共剪辑",
     embedPublicDescription:

package/corpus/templates/clips/app/i18n/zh-TW.ts

@@ -435,6 +435,8 @@ const messages = {
     retryAgentLink: "重試",
     gifPreview: "GIF 預覽",
     openPlayer: "開啟播放器",
+    chooseFile: "選取檔案",
+    remove: "消除",
     downloadMp4: "下載 MP4",
     embedsNeedPublic: "嵌入需要公開剪輯",
     embedPublicDescription:

package/corpus/templates/clips/app/lib/timestamp-mapping.ts

@@ -198,6 +198,20 @@ export function getKeptRanges(
   return out;
 }
 
+/** Move a source timestamp to the first visible timestamp after a cut. */
+export function skipExcludedRange(
+  ms: number,
+  excludedRanges: Pick<TrimRange, "startMs" | "endMs">[],
+  durationMs: number,
+): number {
+  const range = excludedRanges.find(
+    (candidate) => ms >= candidate.startMs && ms < candidate.endMs,
+  );
+  if (!range) return ms;
+  const next = Math.max(ms, range.endMs);
+  return durationMs > 0 ? Math.min(next, durationMs) : next;
+}
+
 /**
  * Merge a new excluded range into the edits, collapsing adjacent/overlapping
  * entries. Preserves existing non-excluded (split) markers as-is.

package/corpus/templates/clips/app/routes/_app.library._index.tsx

@@ -6,8 +6,7 @@ import { NavLink } from "react-router";
 import { LibraryGrid } from "@/components/library/library-grid";
 import { usePageHeaderLayout } from "@/components/library/page-header";
 
-const SEO_TITLE =
-  "Agent-Native Clips - Open Source, agent-friendly Loom alternative";
+const SEO_TITLE = "Agent-Native Clips - Open Source screen recorder";
 const SEO_DESCRIPTION =
   "Open Source screen recorder and meeting-notes app with AI transcripts, summaries, search, dictation, and agent-readable share links.";
 

package/corpus/templates/clips/app/routes/_index.tsx

@@ -1,8 +1,7 @@
 import { DefaultSpinner } from "@agent-native/core/client";
 import { redirect, type LoaderFunctionArgs } from "react-router";
 
-const SEO_TITLE =
-  "Agent-Native Clips - Open Source, agent-friendly Loom alternative";
+const SEO_TITLE = "Agent-Native Clips - Open Source screen recorder";
 const SEO_DESCRIPTION =
   "Open Source screen recorder and meeting-notes app with AI transcripts, summaries, search, dictation, and agent-readable share links.";