@agent-native/core 0.102.1 → 0.103.0

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

@@ -156,7 +156,7 @@ export function SettingsPanel(props: SettingsPanelProps) {
             <Label className="text-xs">
               {t("playerSettings.passwordProtection")}
             </Label>
-            <div className="flex gap-2 mt-1">
+            <div className="mt-1 space-y-2">
               <Input
                 type="text"
                 value={password}
@@ -166,18 +166,36 @@ export function SettingsPanel(props: SettingsPanelProps) {
                     ? t("playerSettings.passwordSetPlaceholder")
                     : t("playerSettings.noPasswordPlaceholder")
                 }
-                className="flex-1"
               />
-              <Button
-                variant="outline"
-                onClick={() => {
-                  patch({ password: password || null });
-                  setPassword("");
-                }}
-                disabled={update.isPending}
-              >
-                {t("common.save")}
-              </Button>
+              {password.length > 0 && !password.trim() ? (
+                <p className="text-xs text-muted-foreground">
+                  {t("playerSettings.passwordWhitespaceOnly")}
+                </p>
+              ) : null}
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    patch({ password: password.trim() });
+                    setPassword("");
+                  }}
+                  disabled={update.isPending || !password.trim()}
+                >
+                  {t("common.save")}
+                </Button>
+                {recording.hasPassword ? (
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      patch({ password: null });
+                      setPassword("");
+                    }}
+                    disabled={update.isPending}
+                  >
+                    {t("playerSettings.removePassword")}
+                  </Button>
+                ) : null}
+              </div>
             </div>
           </div>
 
@@ -361,6 +379,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 +406,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]);
 
@@ -671,7 +679,10 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
           (isPlaying || playAttemptPendingRef.current || !v.paused),
         );
 
-        if (v) v.playbackRate = nextSpeed;
+        if (v) {
+          v.defaultPlaybackRate = nextSpeed;
+          v.playbackRate = nextSpeed;
+        }
         setSpeed(nextSpeed);
         savePlaybackSpeedPreference(nextSpeed);
         onSpeedChange?.(nextSpeed);
@@ -770,6 +781,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       const v = videoRef.current;
       if (!v) return;
       const initialSpeed = readPlaybackSpeedPreference(defaultSpeed);
+      v.defaultPlaybackRate = initialSpeed;
       v.playbackRate = initialSpeed;
       setSpeed(initialSpeed);
       onSpeedChange?.(initialSpeed);
@@ -1423,6 +1435,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 +1489,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 +1511,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/components/recorder/microphone-visualizer.tsx

@@ -41,6 +41,26 @@ function stopStream(stream: MediaStream | null): void {
 
 type MicrophonePermissionState = PermissionState | "unknown";
 
+function isDesktopShell(): boolean {
+  if (typeof window === "undefined") return false;
+  const w = window as typeof window & {
+    electronAPI?: unknown;
+    __TAURI_INTERNALS__?: unknown;
+    __TAURI__?: unknown;
+  };
+  if (w.electronAPI || w.__TAURI_INTERNALS__ || w.__TAURI__) return true;
+  return (
+    typeof navigator !== "undefined" && /Electron/i.test(navigator.userAgent)
+  );
+}
+
+function micBlockedMessage(): string {
+  if (isDesktopShell()) {
+    return "Microphone access is blocked for this app. Enable the microphone for the app in your system Privacy settings, then reopen the recorder.";
+  }
+  return "Your browser has blocked microphone access for this site, so it won't prompt. Allow the microphone in this site's settings, then reload.";
+}
+
 function isMicrophoneBlockedByPolicy(): boolean {
   const policy =
     (
@@ -96,7 +116,7 @@ export async function friendlyMicError(err: unknown): Promise<string> {
     return "Microphone prompts require HTTPS or localhost. Open this app on localhost or an HTTPS URL, then try again.";
   }
   if (permissionState === "denied") {
-    return "This site is blocked from using the microphone. Open the browser site settings, set Microphone to Allow, then reload.";
+    return micBlockedMessage();
   }
   if (/NotAllowedError|Permission denied|denied|blocked/i.test(combined)) {
     return "The browser or operating system denied microphone access. Check this site's microphone setting and your system privacy settings for this browser, then reload.";
@@ -328,8 +348,7 @@ export function MicrophoneVisualizer({
     const permissionState = await getMicrophonePermissionState();
     if (runIdRef.current !== runId) return;
     if (permissionState === "denied") {
-      const message =
-        "Brave already has Microphone set to Block for this site, so it will not show the popup. Click the lock/tune icon in the address bar → Site settings → Microphone → Allow, then reload.";
+      const message = micBlockedMessage();
       setError(message);
       setStatus("error");
       onStatusChange?.("error", { error: message });

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:
@@ -1225,9 +1227,10 @@ const messages = {
     visibilityOrg: "Organization (مترجم)",
     visibilityPublic: "Public (مترجم)",
     passwordProtection: "Password protection (مترجم)",
-    passwordSetPlaceholder:
-      "Password is set — type to replace, leave empty + Save to clear (مترجم)",
+    passwordSetPlaceholder: "Password is set — type to replace (مترجم)",
     noPasswordPlaceholder: "No password (مترجم)",
+    passwordWhitespaceOnly: "Spaces alone aren't a valid password. (مترجم)",
+    removePassword: "Remove (مترجم)",
     expiry: "Expiry (مترجم)",
     viewerOptions: "Viewer options (مترجم)",
     comments: "Comments (مترجم)",

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:
@@ -1251,9 +1253,11 @@ Alle sichtbaren Änderungen für Clips-Nutzer werden hier dokumentiert. Du kanns
     visibilityOrg: "Organization (Lokalisiert)",
     visibilityPublic: "Public (Lokalisiert)",
     passwordProtection: "Password protection (Lokalisiert)",
-    passwordSetPlaceholder:
-      "Password is set — type to replace, leave empty + Save to clear (Lokalisiert)",
+    passwordSetPlaceholder: "Password is set — type to replace (Lokalisiert)",
     noPasswordPlaceholder: "No password (Lokalisiert)",
+    passwordWhitespaceOnly:
+      "Spaces alone aren't a valid password. (Lokalisiert)",
+    removePassword: "Remove (Lokalisiert)",
     expiry: "Expiry (Lokalisiert)",
     viewerOptions: "Viewer options (Lokalisiert)",
     comments: "Comments (Lokalisiert)",