@agent-native/core 0.102.1 → 0.102.2

package/corpus/templates/clips/actions/generate-workflow.ts

@@ -15,7 +15,10 @@
  */
 
 import { defineAction } from "@agent-native/core";
-import { writeAppState } from "@agent-native/core/application-state";
+import {
+  readAppState,
+  writeAppState,
+} from "@agent-native/core/application-state";
 import { assertAccess } from "@agent-native/core/sharing";
 import { eq } from "drizzle-orm";
 import { z } from "zod";
@@ -51,6 +54,11 @@ Output markdown.`,
 Keep it concise, warm, and professional.`,
 } as const;
 
+// Actions for the same recording can arrive concurrently when the player and
+// agent both retry a request. Keep the read-check-write/enqueue sequence
+// single-flight within this runtime so only one request can claim generation.
+const workflowGenerationLocks = new Set<string>();
+
 export default defineAction({
   description:
     "Ask the agent to generate a structured workflow doc (pr/sop/ticket/email) from this recording's transcript (and the full video when Include full video is enabled). The agent writes the result to clips-workflow-<recordingId> in application_state.",
@@ -61,71 +69,106 @@ export default defineAction({
   run: async (args) => {
     await assertAccess("recording", args.recordingId, "viewer");
 
-    const db = getDb();
-    const [rec] = await db
-      .select()
-      .from(schema.recordings)
-      .where(eq(schema.recordings.id, args.recordingId))
-      .limit(1);
-    if (!rec) throw new Error(`Recording not found: ${args.recordingId}`);
+    const stateKey = `clips-workflow-${args.recordingId}`;
+    if (workflowGenerationLocks.has(stateKey)) {
+      return {
+        queued: false,
+        duplicate: true,
+        recordingId: args.recordingId,
+        kind: args.kind,
+        stateKey,
+      };
+    }
+    workflowGenerationLocks.add(stateKey);
 
-    const [transcript] = await db
-      .select()
-      .from(schema.recordingTranscripts)
-      .where(eq(schema.recordingTranscripts.recordingId, args.recordingId))
-      .limit(1);
+    try {
+      const db = getDb();
+      const [rec] = await db
+        .select()
+        .from(schema.recordings)
+        .where(eq(schema.recordings.id, args.recordingId))
+        .limit(1);
+      if (!rec) throw new Error(`Recording not found: ${args.recordingId}`);
 
-    const stateKey = `clips-workflow-${args.recordingId}`;
-    const includeFullVideoInAi = await readIncludeFullVideoInAi();
+      const [transcript] = await db
+        .select()
+        .from(schema.recordingTranscripts)
+        .where(eq(schema.recordingTranscripts.recordingId, args.recordingId))
+        .limit(1);
 
-    // Seed the output state with a "generating" placeholder so the UI can show
-    // a loading state immediately.
-    await writeAppState(stateKey, {
-      kind: args.kind,
-      status: "generating",
-      recordingId: args.recordingId,
-      requestedAt: new Date().toISOString(),
-    } as any);
+      const includeFullVideoInAi = await readIncludeFullVideoInAi();
 
-    const baseMessage =
-      `Generate a ${args.kind.toUpperCase()} workflow document from recording ${args.recordingId} ` +
-      `(title: "${rec.title}"). Read the transcript from this request's context. ` +
-      `${KIND_PROMPTS[args.kind]} ` +
-      `Then write the final markdown to application_state key "${stateKey}" as ` +
-      `\`{ kind: "${args.kind}", status: "ready", content: "...", recordingId: "${args.recordingId}" }\`. ` +
-      `Finish by replying in chat with the same generated markdown so the user can read it immediately.`;
+      const existing = await readAppState(stateKey).catch(() => null);
+      if (existing?.status === "generating") {
+        const requestedAt = Date.parse(String(existing.requestedAt ?? ""));
+        const isRecent =
+          !Number.isFinite(requestedAt) ||
+          Date.now() - requestedAt < 10 * 60_000;
+        if (isRecent) {
+          return {
+            queued: false,
+            duplicate: true,
+            recordingId: args.recordingId,
+            kind: existing.kind ?? args.kind,
+            stateKey,
+          };
+        }
+      }
 
-    const request = {
-      kind: "generate-workflow" as const,
-      workflowKind: args.kind,
-      recordingId: args.recordingId,
-      requestedAt: new Date().toISOString(),
-      recordingTitle: rec.title,
-      recordingDescription: rec.description,
-      transcriptStatus: transcript?.status ?? "pending",
-      transcriptText: transcript?.fullText ?? "",
-      stateKey,
-      instructions: KIND_PROMPTS[args.kind],
-      includeFullVideoInAi,
-      message: withFullVideoAiInstructions(
-        baseMessage,
-        args.recordingId,
+      // Seed the output state with a "generating" placeholder so the UI can show
+      // a loading state immediately.
+      await writeAppState(stateKey, {
+        kind: args.kind,
+        status: "generating",
+        recordingId: args.recordingId,
+        requestedAt: new Date().toISOString(),
+      } as any);
+
+      const baseMessage =
+        `Generate a ${args.kind.toUpperCase()} workflow document from recording ${args.recordingId} ` +
+        `(title: "${rec.title}"). Read the transcript from this request's context. ` +
+        `${KIND_PROMPTS[args.kind]} ` +
+        `Then write the final markdown to application_state key "${stateKey}" as ` +
+        `\`{ kind: "${args.kind}", status: "ready", content: "...", recordingId: "${args.recordingId}" }\`. ` +
+        `Finish by replying in chat with the same generated markdown so the user can read it immediately.`;
+
+      const request = {
+        kind: "generate-workflow" as const,
+        workflowKind: args.kind,
+        recordingId: args.recordingId,
+        requestedAt: new Date().toISOString(),
+        recordingTitle: rec.title,
+        recordingDescription: rec.description,
+        transcriptStatus: transcript?.status ?? "pending",
+        transcriptText: transcript?.fullText ?? "",
+        stateKey,
+        instructions: KIND_PROMPTS[args.kind],
         includeFullVideoInAi,
-      ),
-    };
+        message: withFullVideoAiInstructions(
+          baseMessage,
+          args.recordingId,
+          includeFullVideoInAi,
+        ),
+      };
 
-    await writeAppState(`clips-ai-request-${args.recordingId}`, request as any);
-    await writeAppState("refresh-signal", { ts: Date.now() });
+      await writeAppState(
+        `clips-ai-request-${args.recordingId}`,
+        request as any,
+      );
+      await writeAppState("refresh-signal", { ts: Date.now() });
 
-    console.log(
-      `Delegation queued: generate-workflow (${args.kind}) for ${args.recordingId}`,
-    );
-    return {
-      queued: true,
-      recordingId: args.recordingId,
-      kind: args.kind,
-      stateKey,
-      includeFullVideoInAi,
-    };
+      console.log(
+        `Delegation queued: generate-workflow (${args.kind}) for ${args.recordingId}`,
+      );
+      return {
+        queued: true,
+        recordingId: args.recordingId,
+        kind: args.kind,
+        stateKey,
+        includeFullVideoInAi,
+      };
+    } finally {
+      workflowGenerationLocks.delete(stateKey);
+    }
   },
 });

package/corpus/templates/clips/actions/get-recording-player-data.ts

@@ -20,12 +20,20 @@
 import { defineAction, embedApp } from "@agent-native/core";
 import { readAppState } from "@agent-native/core/application-state";
 import { buildDeepLink } from "@agent-native/core/server";
+import {
+  getRequestOrgId,
+  getRequestUserEmail,
+} from "@agent-native/core/server/request-context";
 import { resolveAccess, ForbiddenError } from "@agent-native/core/sharing";
-import { asc, eq } from "drizzle-orm";
+import { and, asc, eq, or, sql } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 import { resolvePlayerVideoUrl } from "../server/lib/player-video-url.js";
+import {
+  canOpenDirectRecordingPage,
+  isRecordingExpired,
+} from "../server/lib/recording-page-access.js";
 import { parseSpaceIds } from "../server/lib/recordings.js";
 import { parseBrowserDiagnosticsRow } from "../shared/browser-diagnostics.js";
 import {
@@ -106,6 +114,61 @@ export default defineAction({
     const db = getDb();
     const rec: any = access.resource;
 
+    if (isRecordingExpired(rec.expiresAt)) {
+      throw new ForbiddenError("Recording has expired");
+    }
+
+    let hasExplicitShare = access.role === "owner";
+    if (rec.visibility === "public" && access.role !== "owner") {
+      const userEmail = getRequestUserEmail()?.trim().toLowerCase();
+      const orgId = getRequestOrgId();
+      const principals = [];
+      if (userEmail) {
+        principals.push(
+          and(
+            eq(schema.recordingShares.principalType, "user"),
+            sql`lower(${schema.recordingShares.principalId}) = ${userEmail}`,
+          ),
+        );
+      }
+      if (orgId) {
+        principals.push(
+          and(
+            eq(schema.recordingShares.principalType, "org"),
+            eq(schema.recordingShares.principalId, orgId),
+          ),
+        );
+      }
+      if (principals.length > 0) {
+        const [share] = await db
+          .select({ id: schema.recordingShares.id })
+          .from(schema.recordingShares)
+          .where(
+            and(
+              eq(schema.recordingShares.resourceId, args.recordingId),
+              or(...principals),
+            ),
+          )
+          .limit(1);
+        hasExplicitShare = Boolean(share);
+      } else {
+        hasExplicitShare = false;
+      }
+    }
+
+    if (
+      !canOpenDirectRecordingPage({
+        role: access.role,
+        visibility: rec.visibility,
+        hasPassword: Boolean(rec.password),
+        hasExplicitShare,
+      })
+    ) {
+      throw new ForbiddenError(
+        "Open this recording from its share link instead of the direct recording URL",
+      );
+    }
+
     const [transcript] = await db
       .select()
       .from(schema.recordingTranscripts)

package/corpus/templates/clips/actions/regenerate-summary.ts

@@ -22,6 +22,12 @@ export default defineAction({
     "Ask the agent to regenerate this recording's description/summary based on its transcript (and the full video when Include full video is enabled).",
   schema: z.object({
     recordingId: z.string().describe("Recording ID"),
+    openInChat: z
+      .boolean()
+      .optional()
+      .describe(
+        "When true, focus the queued generation request in the agent chat instead of keeping it hidden.",
+      ),
   }),
   run: async (args) => {
     await assertAccess("recording", args.recordingId, "editor");
@@ -74,6 +80,7 @@ export default defineAction({
       transcriptStatus: transcript?.status ?? "pending",
       transcriptText: transcript?.fullText ?? "",
       includeFullVideoInAi,
+      openInChat: args.openInChat === true,
       message: withFullVideoAiInstructions(
         baseMessage,
         args.recordingId,

package/corpus/templates/clips/actions/regenerate-title.ts

@@ -59,7 +59,9 @@ function buildTitleContext({
 }): string | undefined {
   const parts: string[] = [];
   if (currentTitle && !isDefaultTitle(currentTitle)) {
-    parts.push(`Current title: ${currentTitle}`);
+    parts.push(
+      `Current title: ${currentTitle}\nWhen regenerating, do not return this title verbatim; choose a more specific alternative when the transcript supports one.`,
+    );
   }
   if (agentsContext) parts.push(agentsContext);
   return parts.length > 0 ? parts.join("\n\n") : undefined;
@@ -237,9 +239,14 @@ export default defineAction({
 
         if (!fresh) throw new Error(`Recording not found: ${args.recordingId}`);
 
+        const titleMatchesCurrent =
+          fresh.title?.trim().toLocaleLowerCase() ===
+          generatedTitle.trim().toLocaleLowerCase();
+
         if (
-          isAutoTitleReplaceable(fresh.title, fresh.titleSource) ||
-          fresh.title === rec.title
+          !titleMatchesCurrent &&
+          (isAutoTitleReplaceable(fresh.title, fresh.titleSource) ||
+            fresh.title === rec.title)
         ) {
           await db
             .update(schema.recordings)
@@ -272,12 +279,18 @@ export default defineAction({
           };
         }
 
-        return {
-          updated: false,
-          skipped: true,
-          reason: "Recording title changed before generation completed",
-          recordingId: args.recordingId,
-        };
+        if (!titleMatchesCurrent) {
+          return {
+            updated: false,
+            skipped: true,
+            reason: "Recording title changed before generation completed",
+            recordingId: args.recordingId,
+          };
+        }
+
+        console.warn(
+          `[clips] AI title regeneration returned the existing title for ${args.recordingId}; queueing a refinement instead`,
+        );
       }
     } catch (err) {
       builderCreditsPaused = isBuilderCreditsExhaustedMessage(
@@ -302,9 +315,14 @@ export default defineAction({
 
       if (!fresh) throw new Error(`Recording not found: ${args.recordingId}`);
 
+      const titleMatchesCurrent =
+        fresh.title?.trim().toLocaleLowerCase() ===
+        fallbackTitle.trim().toLocaleLowerCase();
+
       if (
-        isAutoTitleReplaceable(fresh.title, fresh.titleSource) ||
-        fresh.title === rec.title
+        !titleMatchesCurrent &&
+        (isAutoTitleReplaceable(fresh.title, fresh.titleSource) ||
+          fresh.title === rec.title)
       ) {
         await db
           .update(schema.recordings)

package/corpus/templates/clips/app/components/editor/editor-layout.tsx

@@ -63,6 +63,7 @@ import {
   parseEdits,
   getExcludedRanges,
   formatMs,
+  skipExcludedRange,
   type EditsJson,
 } from "@/lib/timestamp-mapping";
 import { cn } from "@/lib/utils";
@@ -435,10 +436,15 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
   useEffect(() => {
     const v = videoRef.current;
     if (!v) return;
-    const onTime = () => setPlayheadMs(v.currentTime * 1000);
+    const onTime = () => {
+      const rawMs = v.currentTime * 1000;
+      const visibleMs = skipExcludedRange(rawMs, excludedRanges, durationMs);
+      if (visibleMs !== rawMs) v.currentTime = visibleMs / 1000;
+      setPlayheadMs(visibleMs);
+    };
     v.addEventListener("timeupdate", onTime);
     return () => v.removeEventListener("timeupdate", onTime);
-  }, [videoUrl]);
+  }, [durationMs, excludedRanges, videoUrl]);
 
   // Expose the in-editor state so the agent can read "the user is editing and scrubbed to X".
   useEffect(() => {
@@ -510,11 +516,15 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
     [recordingId, trim],
   );
 
-  const seek = useCallback((ms: number) => {
-    const v = videoRef.current;
-    if (v) v.currentTime = ms / 1000;
-    setPlayheadMs(ms);
-  }, []);
+  const seek = useCallback(
+    (ms: number) => {
+      const visibleMs = skipExcludedRange(ms, excludedRanges, durationMs);
+      const v = videoRef.current;
+      if (v) v.currentTime = visibleMs / 1000;
+      setPlayheadMs(visibleMs);
+    },
+    [durationMs, excludedRanges],
+  );
 
   // --- keyboard shortcuts -------------------------------------------------
   useEffect(() => {
@@ -585,8 +595,8 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
 
   // Default selection window so the TrimHandles have something to render.
   const effectiveSelection = selectionRange ?? {
-    startMs: Math.max(0, playheadMs - 1000),
-    endMs: Math.min(durationMs || 1_000, playheadMs + 1000),
+    startMs: 0,
+    endMs: durationMs || 1_000,
   };
 
   if (playerDataQuery.isLoading) {
@@ -684,7 +694,8 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
                 playheadMs={playheadMs}
                 durationMs={durationMs}
                 excludedRanges={excludedRanges}
-                selectionRange={selectionRange}
+                selectionRange={effectiveSelection}
+                splitPoints={splitPoints}
                 activityRanges={transcriptSegments}
                 onSeek={seek}
                 scrollLeft={scrollLeft}
@@ -707,6 +718,7 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
                     value={effectiveSelection}
                     onChange={setSelectionRange}
                     durationMs={durationMs}
+                    splitPoints={splitPoints}
                   />
                 </div>
               </div>
@@ -727,7 +739,6 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
                   durationMs={durationMs}
                   playheadMs={playheadMs}
                   chapters={chapters}
-                  excludedRanges={excludedRanges}
                   splitPoints={splitPoints}
                   onSeek={seek}
                   onClickChapter={(c) => seek(c.startMs)}

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 */}