+
{/* Header */}
@@ -134,10 +168,11 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
rows={2}
className="w-full px-3 py-2 text-xs bg-neutral-800/60 border border-neutral-700/40 rounded-lg text-neutral-200 placeholder:text-neutral-600 resize-none focus:outline-none focus:border-studio-accent/40 transition-colors"
/>
+ {sendError &&
{sendError}
}
{/* Action */}
-
+
+
+
+
+ {/* Agent target */}
+
+
+ Agent
+ {agentRunPreview?.adapters?.some((a) => a.detected) ? (
+
+ ) : (
+
+ {agentRunPreview?.agent ?? "unavailable"}
+
+ )}
+
+
+ Path
+
+ {agentRunPreview?.path ?? "unavailable"}
+
+
diff --git a/packages/studio/src/player/components/Timeline.tsx b/packages/studio/src/player/components/Timeline.tsx
index 30ca7205f..fd1df23da 100644
--- a/packages/studio/src/player/components/Timeline.tsx
+++ b/packages/studio/src/player/components/Timeline.tsx
@@ -20,6 +20,11 @@ import {
shouldShowTimelineShortcutHint,
resolveTimelineAssetDrop,
} from "./timelineLayout";
+import type {
+ AgentRunPreview,
+ SendPromptToAgentInput,
+ TimelineComment,
+} from "../../timeline-comments/types";
// Re-export pure utilities so existing imports from "./Timeline" still resolve.
export {
@@ -63,6 +68,10 @@ interface TimelineProps {
) => Promise
| void;
onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
onSelectElement?: (element: TimelineElement | null) => void;
+ onSendPromptToAgent?: (input: SendPromptToAgentInput) => Promise | void;
+ agentRunPreview?: AgentRunPreview | null;
+ onSelectAgent?: (adapterKind: string) => Promise | void;
+ comments?: Pick[];
theme?: Partial;
}
@@ -78,6 +87,10 @@ export const Timeline = memo(function Timeline({
onResizeElement,
onBlockedEditAttempt,
onSelectElement,
+ onSendPromptToAgent,
+ agentRunPreview,
+ onSelectAgent,
+ comments = [],
theme: themeOverrides,
}: TimelineProps = {}) {
const theme = useMemo(() => ({ ...defaultTimelineTheme, ...themeOverrides }), [themeOverrides]);
@@ -422,6 +435,7 @@ export const Timeline = memo(function Timeline({
majorTickInterval={majorTickInterval}
shiftHeld={shiftHeld}
rangeSelection={rangeSelection}
+ comments={comments}
theme={theme}
displayTrackOrder={displayTrackOrder}
trackOrder={trackOrder}
@@ -483,6 +497,9 @@ export const Timeline = memo(function Timeline({
setShowPopover(false);
setRangeSelection(null);
}}
+ onSendPromptToAgent={onSendPromptToAgent}
+ agentRunPreview={agentRunPreview}
+ onSelectAgent={onSelectAgent}
/>
)}
diff --git a/packages/studio/src/player/components/TimelineCanvas.tsx b/packages/studio/src/player/components/TimelineCanvas.tsx
index ce9119331..1e95637a4 100644
--- a/packages/studio/src/player/components/TimelineCanvas.tsx
+++ b/packages/studio/src/player/components/TimelineCanvas.tsx
@@ -12,6 +12,7 @@ import type { TimelineElement } from "../store/playerStore";
import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./useTimelineClipDrag";
import { formatTime } from "../lib/time";
import type { TrackVisualStyle } from "./timelineIcons";
+import type { TimelineComment } from "../../timeline-comments/types";
interface TimelineCanvasProps {
major: number[];
@@ -23,6 +24,7 @@ interface TimelineCanvasProps {
majorTickInterval: number;
shiftHeld: boolean;
rangeSelection: TimelineRangeSelection | null;
+ comments?: Pick
[];
theme: TimelineTheme;
displayTrackOrder: number[];
trackOrder: number[];
@@ -71,6 +73,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
majorTickInterval,
shiftHeld,
rangeSelection,
+ comments,
theme,
displayTrackOrder,
trackOrder,
@@ -173,6 +176,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
majorTickInterval={majorTickInterval}
shiftHeld={shiftHeld}
rangeSelection={rangeSelection}
+ comments={comments}
theme={theme}
/>
diff --git a/packages/studio/src/player/components/TimelineRuler.tsx b/packages/studio/src/player/components/TimelineRuler.tsx
index be4eaed1d..ad44182d1 100644
--- a/packages/studio/src/player/components/TimelineRuler.tsx
+++ b/packages/studio/src/player/components/TimelineRuler.tsx
@@ -2,6 +2,7 @@ import { memo } from "react";
import type { TimelineTheme } from "./timelineTheme";
import type { TimelineRangeSelection } from "./timelineEditing";
import { GUTTER, RULER_H, formatTimelineTickLabel } from "./timelineLayout";
+import type { TimelineComment } from "../../timeline-comments/types";
interface TimelineRulerProps {
major: number[];
@@ -13,6 +14,7 @@ interface TimelineRulerProps {
majorTickInterval: number;
shiftHeld: boolean;
rangeSelection: TimelineRangeSelection | null;
+ comments?: Pick[];
theme: TimelineTheme;
}
@@ -26,6 +28,7 @@ export const TimelineRuler = memo(function TimelineRuler({
majorTickInterval,
shiftHeld,
rangeSelection,
+ comments = [],
theme,
}: TimelineRulerProps) {
return (
@@ -84,6 +87,19 @@ export const TimelineRuler = memo(function TimelineRuler({
))}
+ {comments.map((comment) => {
+ const start = Math.max(0, Math.min(effectiveDuration, comment.rangeStart));
+ const end = Math.max(start, Math.min(effectiveDuration, comment.rangeEnd));
+ const width = Math.max(6, (end - start) * pps);
+ return (
+