@vuer-ai/vuer-uikit 0.0.11 → 0.0.13

package/src/ui/timeline.tsx

@@ -0,0 +1,717 @@
+import { ChevronLeft, ChevronRight, Magnet } from "lucide-react";
+import React, { useEffect, useMemo, useRef, useState, useCallback } from "react";
+
+import { TreeViewV2, type TreeDataItemV2 } from "./tree-view-v2";
+import { cn } from "../utils/cn";
+
+type LogItemData = TreeDataItemV2 & {
+  type: "task" | "attempt" | "info" | "step";
+  icon?: "history" | "file-code" | "bot" | "check-circle" | "pause-circle";
+  createTime?: number;
+  startTime?: number;
+  duration?: number;
+  time?: number;
+  color?: "blue" | "green" | "orange" | "gray-light" | "gray-medium" | "purple";
+  hasStripes?: boolean;
+  isHalted?: boolean;
+};
+
+type TimelineProps = {
+  data: LogItemData[];
+  totalDuration: number;
+  getIcon: (item: LogItemData) => React.ReactNode;
+};
+
+const formatDuration = (seconds: number): string => {
+  const sign = seconds < 0 ? "-" : "";
+  const absSeconds = Math.abs(seconds);
+
+  if (absSeconds < 1) {
+    if (absSeconds < 0.0005) return "0s";
+    return `${sign}${Math.round(absSeconds * 1000)}ms`;
+  }
+  if (absSeconds < 60) {
+    return `${sign}${absSeconds.toFixed(3)}s`;
+  }
+
+  const SECONDS_IN_MINUTE = 60;
+  const SECONDS_IN_HOUR = 3600;
+  const SECONDS_IN_DAY = 86400;
+  const SECONDS_IN_MONTH = 2592000; // 30 days
+  const SECONDS_IN_YEAR = 31536000; // 365 days
+
+  if (absSeconds < SECONDS_IN_HOUR) {
+    const m = Math.floor(absSeconds / SECONDS_IN_MINUTE);
+    const s = absSeconds % SECONDS_IN_MINUTE;
+    return `${sign}${m}m ${s.toFixed(2).padStart(5, "0")}s`;
+  }
+
+  if (absSeconds < SECONDS_IN_DAY) {
+    const h = Math.floor(absSeconds / SECONDS_IN_HOUR);
+    const m = Math.floor((absSeconds % SECONDS_IN_HOUR) / SECONDS_IN_MINUTE);
+    const s = Math.floor(absSeconds % SECONDS_IN_MINUTE);
+    return `${sign}${h}h ${String(m).padStart(2, "0")}m ${String(s).padStart(2, "0")}s`;
+  }
+
+  if (absSeconds < SECONDS_IN_MONTH) {
+    const d = Math.floor(absSeconds / SECONDS_IN_DAY);
+    const h = Math.floor((absSeconds % SECONDS_IN_DAY) / SECONDS_IN_HOUR);
+    const m = Math.floor((absSeconds % SECONDS_IN_HOUR) / SECONDS_IN_MINUTE);
+    return `${sign}${d}d ${String(h).padStart(2, "0")}h ${String(m).padStart(2, "0")}m`;
+  }
+
+  if (absSeconds < SECONDS_IN_YEAR) {
+    const mo = Math.floor(absSeconds / SECONDS_IN_MONTH);
+    const d = Math.floor((absSeconds % SECONDS_IN_MONTH) / SECONDS_IN_DAY);
+    const h = Math.floor((absSeconds % SECONDS_IN_DAY) / SECONDS_IN_HOUR);
+    return `${sign}${mo}mo ${String(d).padStart(3, "0")}d ${String(h).padStart(2, "0")}h`;
+  }
+
+  const y = Math.floor(absSeconds / SECONDS_IN_YEAR);
+  const mo = Math.floor((absSeconds % SECONDS_IN_YEAR) / SECONDS_IN_MONTH);
+  const d = Math.floor((absSeconds % SECONDS_IN_MONTH) / SECONDS_IN_DAY);
+  return `${sign}${y}y ${String(mo).padStart(2, "0")}mo ${String(d).padStart(3, "0")}d`;
+};
+
+const borderColorClasses = {
+  blue: "border-blue-500/85",
+  green: "border-green-500/85",
+  orange: "border-orange-500/85",
+  purple: "border-purple-500/85",
+  "gray-light": "border-line-secondary/20",
+  "gray-medium": "border-slate-500/85",
+};
+
+const colorClasses = {
+  blue: "bg-blue-500/85",
+  green: "bg-green-500/85",
+  orange: "bg-orange-500/85",
+  purple: "bg-purple-500/85",
+  "gray-light": "bg-line-secondary/20",
+  "gray-medium": "bg-slate-500/85",
+};
+
+const leftWedgeClasses = {
+  blue: "border-l-blue-500/85",
+  green: "border-l-green-500/85",
+  orange: "border-l-orange-500/85",
+  purple: "border-l-purple-500/85",
+  "gray-light": "border-l-slate-300",
+  "gray-medium": "border-l-slate-500/85",
+};
+
+const rightWedgeClasses = {
+  blue: "border-r-blue-500/85",
+  green: "border-r-green-500/85",
+  orange: "border-r-orange-500/85",
+  purple: "border-r-purple-500/85",
+  "gray-light": "border-r-slate-300",
+  "gray-medium": "border-r-slate-500/85",
+};
+
+function Timeline({ data, totalDuration, getIcon }: TimelineProps) {
+  const [visibleData, setVisibleData] = useState<LogItemData[]>([]);
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  const timelineContainerRef = useRef<HTMLDivElement>(null);
+  const [viewStart, setViewStart] = useState(-totalDuration * 0.25);
+  const [viewDuration, setViewDuration] = useState(totalDuration * 1.5);
+
+  const timeToPercent = useCallback(
+    (time: number) => ((time - viewStart) / viewDuration) * 100,
+    [viewStart, viewDuration],
+  );
+
+  const handlePan = (direction: "left" | "right") => {
+    const panAmount = viewDuration * 0.1;
+    if (direction === "left") {
+      setViewStart((s) => s - panAmount);
+    } else {
+      setViewStart((s) => s + panAmount);
+    }
+  };
+
+  const timeMarkers = useMemo(() => {
+    const markers: { time: number; label: string }[] = [];
+    const niceIntervals = [
+      0.001, 0.002, 0.005, 0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50, 100,
+    ];
+    const targetMarkerCount = 10;
+    const rawInterval = viewDuration / targetMarkerCount;
+    const interval =
+      niceIntervals.find((i) => i > rawInterval) || niceIntervals[niceIntervals.length - 1];
+
+    const viewEnd = viewStart + viewDuration;
+    const shownSeconds = new Set<number>();
+
+    const formatTickLabel = (seconds: number) => {
+      const sign = seconds < 0 ? "-" : "";
+      const absSeconds = Math.abs(seconds);
+
+      let s = Math.floor(absSeconds);
+      let ms = Math.round((absSeconds - s) * 1000);
+
+      if (ms >= 1000) {
+        s += 1;
+        ms -= 1000;
+      }
+
+      if (absSeconds < 1 && absSeconds > -1) {
+        return `${sign}${ms}ms`;
+      }
+
+      const baseSecond = s * (sign === "-" ? -1 : 1);
+      if (shownSeconds.has(baseSecond)) {
+        return ms > 0 ? `+${ms}ms` : "";
+      }
+
+      shownSeconds.add(baseSecond);
+      if (ms === 0) {
+        return `${sign}${s}s`;
+      }
+
+      return `${sign}${s}s`;
+    };
+
+    const firstMarkerTime = Math.floor(viewStart / interval) * interval;
+    const lastMarkerTime = Math.ceil(viewEnd / interval) * interval;
+
+    for (let time = firstMarkerTime; time <= lastMarkerTime; time += interval) {
+      const roundedTime = Number.parseFloat(time.toPrecision(15));
+      const label = formatTickLabel(roundedTime);
+      if (label) {
+        markers.push({ time: roundedTime, label });
+      }
+    }
+    return markers;
+  }, [viewStart, viewDuration]);
+
+  const keyEventTimes = useMemo(() => {
+    const events: { time: number; type: string }[] = [];
+    const timeSet = new Set<string>();
+
+    const addEvent = (time: number, type: string) => {
+      const key = `${time.toFixed(6)}-${type}`;
+      if (!timeSet.has(key)) {
+        events.push({ time, type });
+        timeSet.add(key);
+      }
+    };
+
+    visibleData.forEach((item) => {
+      if (item.createTime !== undefined) addEvent(item.createTime, "create");
+      if (item.startTime !== undefined) addEvent(item.startTime, "start");
+      if (item.startTime !== undefined && item.duration !== undefined) {
+        addEvent(item.startTime + item.duration, "end");
+      }
+      if (item.time !== undefined) addEvent(item.time, "event");
+    });
+    return events.sort((a, b) => a.time - b.time);
+  }, [visibleData]);
+
+  const cursorContainerRef = useRef<HTMLDivElement>(null);
+  const lastClientX = useRef(0);
+  const isMouseOver = useRef(false);
+  const animationFrameRef = useRef<number | null>(null);
+
+  const updateCursor = useCallback(() => {
+    if (!isMouseOver.current) return;
+
+    const timelineEl = timelineContainerRef.current;
+    const cursorEl = cursorContainerRef.current;
+    if (!timelineEl || !cursorEl) return;
+
+    const rect = timelineEl.getBoundingClientRect();
+    const cursorX = lastClientX.current - rect.left;
+    const rawHoverTime = viewStart + (cursorX / timelineEl.offsetWidth) * viewDuration;
+
+    // Snapping logic
+    const snapThresholdInPixels = 8;
+    const snapThresholdInTime = (snapThresholdInPixels / timelineEl.offsetWidth) * viewDuration;
+
+    let closestSnap: { time: number; type: string } | null = null;
+    let minDistance = Number.POSITIVE_INFINITY;
+
+    for (const event of keyEventTimes) {
+      const distance = Math.abs(event.time - rawHoverTime);
+      if (distance < minDistance && distance < snapThresholdInTime) {
+        minDistance = distance;
+        closestSnap = event;
+      }
+    }
+
+    const displayTime = closestSnap?.time ?? rawHoverTime;
+    const percent = timeToPercent(displayTime);
+
+    cursorEl.style.setProperty("--cursor-left", `${percent}%`);
+    cursorEl.style.setProperty("--readout-text", `"${formatDuration(displayTime)}"`);
+    cursorEl.style.setProperty("--magnet-opacity", closestSnap ? "1" : "0");
+    cursorEl.classList.remove("opacity-0");
+  }, [viewStart, viewDuration, keyEventTimes, timeToPercent]);
+
+  useEffect(() => {
+    const timelineEl = timelineContainerRef.current;
+    if (!timelineEl) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      lastClientX.current = e.clientX;
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = requestAnimationFrame(updateCursor);
+    };
+
+    const handleMouseEnter = () => {
+      isMouseOver.current = true;
+    };
+
+    const handleMouseLeave = () => {
+      isMouseOver.current = false;
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+      cursorContainerRef.current?.classList.add("opacity-0");
+    };
+
+    timelineEl.addEventListener("mousemove", handleMouseMove);
+    timelineEl.addEventListener("mouseenter", handleMouseEnter);
+    timelineEl.addEventListener("mouseleave", handleMouseLeave);
+
+    return () => {
+      timelineEl.removeEventListener("mousemove", handleMouseMove);
+      timelineEl.removeEventListener("mouseenter", handleMouseEnter);
+      timelineEl.removeEventListener("mouseleave", handleMouseLeave);
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+    };
+  }, [updateCursor]);
+
+  // Handle wheel events with passive: false to allow preventDefault
+  useEffect(() => {
+    const timelineEl = timelineContainerRef.current;
+    if (!timelineEl) return;
+
+    const wheelHandler = (e: WheelEvent) => {
+      e.preventDefault();
+      const container = timelineContainerRef.current;
+      if (!container) return;
+
+      if (e.ctrlKey || e.altKey) {
+        // Zooming
+        const rect = container.getBoundingClientRect();
+        const cursorX = e.clientX - rect.left;
+        const timeAtCursor = viewStart + (cursorX / container.offsetWidth) * viewDuration;
+        const zoomFactor = 1.1;
+        const newDuration = e.deltaY < 0 ? viewDuration / zoomFactor : viewDuration * zoomFactor;
+        const minDuration = 0.01; // 10ms
+        const maxDuration = totalDuration * 10;
+        if (newDuration < minDuration || newDuration > maxDuration) return;
+        const newViewStart = timeAtCursor - (cursorX / container.offsetWidth) * newDuration;
+        setViewDuration(newDuration);
+        setViewStart(newViewStart);
+      } else {
+        // Panning
+        const panX = (e.deltaX / container.offsetWidth) * viewDuration;
+        const panY = (e.deltaY / container.offsetWidth) * viewDuration;
+        setViewStart((s) => s + panX + panY);
+      }
+    };
+
+    timelineEl.addEventListener("wheel", wheelHandler, { passive: false });
+
+    return () => {
+      timelineEl.removeEventListener("wheel", wheelHandler);
+    };
+  }, [viewStart, viewDuration, totalDuration]);
+
+  // This effect handles cursor updates on pan/zoom
+  useEffect(() => {
+    if (isMouseOver.current) {
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = requestAnimationFrame(updateCursor);
+    }
+  }, [viewStart, viewDuration, updateCursor]);
+
+  return (
+    <div className="bg-bg-primary text-text-primary border-line-secondary/20 rounded-uk-md mx-auto w-full max-w-7xl overflow-hidden border font-sans shadow-2xl">
+      <div className="grid grid-cols-[minmax(300px,30%)_1fr]">
+        <TreeViewV2
+          data={data}
+          getIcon={getIcon}
+          onVisibleDataChange={setVisibleData}
+          onItemHover={setHoveredId}
+          hoveredId={hoveredId}
+        />
+
+        {/* Timeline */}
+        <div className="relative">
+          <div
+            className="border-line-secondary/20 scrollbar-hide relative cursor-crosshair overflow-x-auto border-l active:cursor-grabbing"
+            ref={timelineContainerRef}
+          >
+            {/* Time Ruler timeline */}
+            <div className="bg-bg-primary sticky top-0 z-10">
+              <div className="border-line-secondary/20 relative h-8 border-b">
+                {/* These dots on the ruler indicate the positions of key events that the cursor can snap to. */}
+                {keyEventTimes.map(({ time }, tickIndex) => {
+                  const percent = timeToPercent(time);
+                  if (percent < 0 || percent > 100) return null;
+                  return (
+                    <div
+                      key={`snap-${time}-${tickIndex}`}
+                      className="bg-line-secondary/20 absolute top-1/2 z-0 h-1 w-1 -translate-y-1/2 rounded-full"
+                      style={{ left: `${percent}%` }}
+                    />
+                  );
+                })}
+
+                {timeMarkers.map((marker, ind) => {
+                  const naturalCenterPercent = timeToPercent(marker.time);
+
+                  // Filter out markers that are too far off-screen to improve performance
+                  if (naturalCenterPercent < -20 || naturalCenterPercent > 120) {
+                    return null;
+                  }
+
+                  // This is the offset from the edge, in percent.
+                  // It ensures the label doesn't sit flush against the edge.
+                  const labelHalfWidthPercent = 3;
+
+                  // Clamp the label's center position to keep it within the viewport
+                  const clampedCenterPercent = Math.min(
+                    100 - labelHalfWidthPercent,
+                    Math.max(labelHalfWidthPercent, naturalCenterPercent),
+                  );
+
+                  const zInd = ind < timeMarkers.length - 1 ? "10" : "0";
+
+                  return (
+                    <React.Fragment key={marker.time}>
+                      {/* The tick line, always at its natural position */}
+                      <div
+                        className="bg-border bg-line-secondary/20 absolute top-0 h-full w-px"
+                        style={{ left: `${naturalCenterPercent}%` }}
+                      />
+                      {/* The label, with its position clamped to the viewport edges */}
+                      <div
+                        className={cn(
+                          "bg-bg-primary text-text-secondary rounded-uk-xs text-uk-sm pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 px-1 backdrop-blur-sm",
+                          "z-" + zInd,
+                        )}
+                        style={{ left: `${clampedCenterPercent}%` }}
+                      >
+                        {marker.label}
+                      </div>
+                    </React.Fragment>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Timeline Bars */}
+            <div className="relative pb-12">
+              {visibleData.map((item) => {
+                const isHaltedStep = item.isHalted;
+                const barStart = item.startTime;
+                const barEnd =
+                  item.startTime !== undefined && item.duration !== undefined
+                    ? item.startTime + item.duration
+                    : undefined;
+
+                const viewEnd = viewStart + viewDuration;
+
+                return (
+                  <div
+                    key={item.id}
+                    className={cn(
+                      "relative h-[32px]",
+                      hoveredId === item.id && "bg-bg-secondary/80",
+                    )}
+                    onMouseEnter={() => setHoveredId(item.id)}
+                    onMouseLeave={() => setHoveredId(null)}
+                  >
+                    {/* Launch Wait Line */}
+                    {item.createTime !== undefined &&
+                      item.startTime !== undefined &&
+                      item.createTime < item.startTime &&
+                      item.color && (
+                        <div
+                          className="absolute top-1/2 h-2 -translate-y-1/2"
+                          style={{
+                            left: `${timeToPercent(item.createTime)}%`,
+                            width: `${((item.startTime - item.createTime) / viewDuration) * 100}%`,
+                          }}
+                        >
+                          <div
+                            className={cn(
+                              "absolute top-1/2 left-0 h-2 w-px -translate-y-1/2",
+                              colorClasses[item.color],
+                            )}
+                          />
+                          <div
+                            className={cn(
+                              "absolute top-1/2 w-full -translate-y-1/2 border-t",
+                              borderColorClasses[item.color],
+                            )}
+                          />
+                          <div
+                            className={cn(
+                              "absolute top-1/2 right-0 h-2 w-px -translate-y-1/2",
+                              colorClasses[item.color],
+                            )}
+                          />
+                        </div>
+                      )}
+
+                    {/* Execution Bar */}
+                    {item.startTime !== undefined &&
+                      item.duration !== undefined &&
+                      !isHaltedStep && (
+                        <div
+                          className={cn(
+                            "rounded-uk-xs absolute top-1/2 flex h-5 -translate-y-1/2 items-center justify-center overflow-hidden",
+                            item.color && colorClasses[item.color],
+                            item.hasStripes &&
+                              "bg-[repeating-linear-gradient(-45deg,transparent,transparent_4px,rgba(0,0,0,0.1)_4px,rgba(0,0,0,0.1)_8px)]",
+                          )}
+                          style={{
+                            left: `${timeToPercent(item.startTime)}%`,
+                            width: `${(item.duration / viewDuration) * 100}%`,
+                          }}
+                        />
+                      )}
+
+                    {/* Visible Label for Execution Bar */}
+                    {item.startTime !== undefined &&
+                      item.duration !== undefined &&
+                      !isHaltedStep &&
+                      (() => {
+                        const visibleStart = Math.max(barStart || 0, viewStart);
+                        const visibleEnd = Math.min(barEnd || 0, viewEnd);
+
+                        if (visibleEnd <= visibleStart) return null;
+
+                        const visibleDuration = visibleEnd - visibleStart;
+                        const visibleWidthPercent = (visibleDuration / viewDuration) * 100;
+
+                        if (visibleWidthPercent < 4) return null;
+
+                        return (
+                          <div
+                            className="pointer-events-none absolute top-1/2 flex h-5 -translate-y-1/2 items-center justify-center"
+                            style={{
+                              left: `${timeToPercent(visibleStart)}%`,
+                              width: `${visibleWidthPercent}%`,
+                            }}
+                          >
+                            <span
+                              className={cn(
+                                "text-uk-sm font-medium whitespace-nowrap",
+                                item.color === "gray-light" || item.color === "gray-medium"
+                                  ? "text-slate-600 dark:text-slate-300"
+                                  : "text-text-highlight",
+                              )}
+                            >
+                              {formatDuration(item.duration)}
+                            </span>
+                          </div>
+                        );
+                      })()}
+
+                    {/* Start Circle */}
+                    {item.startTime !== undefined &&
+                      item.duration !== undefined &&
+                      !isHaltedStep &&
+                      item.color && (
+                        <div
+                          className={cn(
+                            "bg-bg-primary absolute top-1/2 z-10 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2",
+                            borderColorClasses[item.color],
+                          )}
+                          style={{
+                            left: `${timeToPercent(item.startTime)}%`,
+                          }}
+                        />
+                      )}
+
+                    {/* Special Halted Step Visualization */}
+                    {isHaltedStep &&
+                      item.startTime !== undefined &&
+                      item.duration !== undefined && (
+                        <div
+                          className="absolute top-1/2 flex h-full -translate-y-1/2 items-center"
+                          style={{
+                            left: `${timeToPercent(item.startTime)}%`,
+                            width: `${(item.duration / viewDuration) * 100}%`,
+                          }}
+                        >
+                          <div className="relative flex h-full w-full items-center justify-center">
+                            <div className="bg-line-secondary absolute top-1/2 left-0 h-2 w-px -translate-y-1/2" />
+                            <div className="border-line-secondary w-full border-t border-dashed" />
+                            <div className="bg-line-secondary absolute top-1/2 right-0 h-2 w-px -translate-y-1/2" />
+                          </div>
+                        </div>
+                      )}
+
+                    {/* Halted Step Label */}
+                    {isHaltedStep &&
+                      item.startTime !== undefined &&
+                      item.duration !== undefined &&
+                      (() => {
+                        const visibleStart = Math.max(barStart || 0, viewStart);
+                        const visibleEnd = Math.min(barEnd || 0, viewEnd);
+
+                        if (visibleEnd <= visibleStart) return null;
+
+                        const visibleDuration = visibleEnd - visibleStart;
+                        const visibleWidthPercent = (visibleDuration / viewDuration) * 100;
+
+                        if (visibleWidthPercent < 4) return null;
+
+                        return (
+                          <div
+                            className="pointer-events-none absolute top-1/2 flex h-5 -translate-y-1/2 items-center justify-center"
+                            style={{
+                              left: `${timeToPercent(visibleStart)}%`,
+                              width: `${visibleWidthPercent}%`,
+                            }}
+                          >
+                            <div className="text-text-highlight text-uk-sm flex h-5 items-center rounded-full bg-orange-500/85 px-2 font-medium whitespace-nowrap">
+                              {formatDuration(item.duration)}
+                            </div>
+                          </div>
+                        );
+                      })()}
+
+                    {/* Point in Time Event */}
+                    {item.time !== undefined && (
+                      <div
+                        className="absolute top-1/2 size-4 -translate-y-1/2 rounded-full"
+                        style={{
+                          left: `calc(${timeToPercent(item.time)}% - 4px)`,
+                        }}
+                      >
+                        {getIcon(item)}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Left Wedges */}
+            <div className="pointer-events-none absolute top-0 left-0 z-10 h-full w-2">
+              {visibleData.map((item, index) => {
+                const barEnd =
+                  item.startTime !== undefined && item.duration !== undefined
+                    ? item.startTime + item.duration
+                    : undefined;
+                const isOffscreenLeft =
+                  (barEnd !== undefined && barEnd < viewStart) ||
+                  (item.time !== undefined && item.time < viewStart);
+
+                if (isOffscreenLeft && item.color) {
+                  return (
+                    <div
+                      key={`left-wedge-${item.id}`}
+                      className={cn(
+                        "absolute h-0 w-0 border-y-[6px] border-r-[5px] border-y-transparent",
+                        rightWedgeClasses[item.color],
+                      )}
+                      style={{
+                        top: `${32 + index * 32 + 16}px`,
+                        transform: "translateY(-50%)",
+                      }}
+                    />
+                  );
+                }
+                return null;
+              })}
+            </div>
+
+            {/* Right Wedges */}
+            <div className="pointer-events-none absolute top-0 right-0 z-10 h-full w-2">
+              {visibleData.map((item, index) => {
+                const barStart = item.startTime;
+                const viewEnd = viewStart + viewDuration;
+                const isOffscreenRight =
+                  (barStart !== undefined && barStart > viewEnd) ||
+                  (item.time !== undefined && item.time > viewEnd);
+
+                if (isOffscreenRight && item.color) {
+                  return (
+                    <div
+                      key={`right-wedge-${item.id}`}
+                      className={cn(
+                        "absolute h-0 w-0 border-y-[6px] border-l-[5px] border-y-transparent",
+                        leftWedgeClasses[item.color],
+                      )}
+                      style={{
+                        top: `${32 + index * 32 + 16}px`,
+                        transform: "translateY(-50%)",
+                      }}
+                    />
+                  );
+                }
+                return null;
+              })}
+            </div>
+
+            {/* Imperative Cursor and Readout */}
+            <div
+              ref={cursorContainerRef}
+              className="pointer-events-none absolute top-0 left-0 z-10 h-full w-full opacity-0 transition-opacity duration-150"
+              style={
+                {
+                  "--cursor-left": "0%",
+                  "--readout-text": '""',
+                  "--magnet-opacity": "0",
+                } as React.CSSProperties
+              }
+            >
+              {/* Cursor Line */}
+              <div
+                className="absolute top-0 h-full w-px bg-red-500"
+                style={{ left: "var(--cursor-left)" }}
+              />
+
+              {/* Time Readout */}
+              <div
+                className="bg-bg-primary border-line-secondary/20 rounded-uk-sm text-uk-sm absolute top-1 flex items-center justify-center border px-2 py-0.5 whitespace-nowrap shadow-lg"
+                style={{
+                  left: "var(--cursor-left)",
+                  transform: "translateX(-50%)",
+                  minWidth: "11ch",
+                }}
+              >
+                <Magnet
+                  className="text-text-secondary mr-1.5 size-3 transition-opacity"
+                  style={{ opacity: "var(--magnet-opacity)" }}
+                />
+                <span className="font-mono tabular-nums after:content-[var(--readout-text)]" />
+              </div>
+            </div>
+          </div>
+
+          {/* Timeline Controls */}
+          <div className="absolute bottom-4 left-1/2 z-20 w-max -translate-x-1/2">
+            <div className="bg-bg-primary/75 flex items-center gap-2 rounded-full p-1 shadow-lg backdrop-blur-[2px]">
+              <button
+                onClick={() => handlePan("left")}
+                className="hover:bg-bg-secondary rounded-full p-1"
+              >
+                <ChevronLeft className="size-4" />
+              </button>
+              <span className="text-uk-sm w-24 text-center font-mono">
+                {formatDuration(viewDuration)}
+              </span>
+              <button
+                onClick={() => handlePan("right")}
+                className="hover:bg-bg-secondary rounded-full p-1"
+              >
+                <ChevronRight className="size-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { Timeline, type LogItemData };