import { useMemo, useState } from "react"; import { useEditor } from "./EditorContext"; import HotspotEditor from "../../components/HotspotEditor"; import { buildCaptureInsights, markerTypeLabel } from "./activityHeuristics"; import type { TimelineMarker } from "../../lib/api"; const EVENT_TYPE_COLORS: Record = { command: "var(--status-success)", click: "var(--accent-1)", file_change: "var(--status-warning)", marker: "var(--accent-2)", shortcut: "var(--status-danger)", keypress: "var(--text-secondary)", mouse_scroll: "var(--accent-3)", app_focus: "var(--accent-4)", dom_navigation: "var(--accent-5)", dom_action: "var(--accent-2)", }; const EditorSidebar = () => { const { sessionId, metadata, currentFrame, totalFrames, currentTime, duration, hotspots, selectedHotspotId, setSelectedHotspotId, editingHotspots, setEditingHotspots, placingHotspot, setPlacingHotspot, setWalkthroughMode, handleUpdateHotspot, handleDeleteHotspot, hasTerminal, steps, selectedStepId, handleSelectStep, handleRenameStep, moveStepUp, moveStepDown, splitSelectedStepAtCurrentFrame, mergeSelectedStepWithNext, markers, clicks, seekToTimestamp, handleGenerateStepsFromActivity, transcript, transcribing, transcriptError, handleTranscribe, } = useEditor(); const [editingStepId, setEditingStepId] = useState(null); const [editingStepTitle, setEditingStepTitle] = useState(""); const insights = useMemo(() => buildCaptureInsights(markers, clicks), [markers, clicks]); const recentActivity = useMemo(() => { const sorted = [...markers].sort((a, b) => b.timestamp_ms - a.timestamp_ms); const filtered: TimelineMarker[] = []; for (const marker of sorted) { if (marker.type === "keypress" && marker.label.toLowerCase() === "key press") continue; const previous = filtered[filtered.length - 1]; if ( previous && previous.type === marker.type && previous.label === marker.label && Math.abs(previous.timestamp_ms - marker.timestamp_ms) < 450 ) { continue; } filtered.push(marker); if (filtered.length >= 10) break; } return filtered; }, [markers]); const formatTime = (s: number) => { const mins = Math.floor(s / 60); const secs = Math.floor(s % 60); const ms = Math.floor((s % 1) * 100); return `${mins}:${secs.toString().padStart(2, "0")}.${ms.toString().padStart(2, "0")}`; }; const formatTimestampMs = (ms: number) => { const totalSecs = Math.floor(ms / 1000); const mins = Math.floor(totalSecs / 60); const secs = totalSecs % 60; return `${mins}:${secs.toString().padStart(2, "0")}`; }; const saveStepTitle = () => { if (!editingStepId) return; handleRenameStep(editingStepId, editingStepTitle); setEditingStepId(null); setEditingStepTitle(""); }; return ( ); }; export default EditorSidebar;