@myrialabs/clopen 0.0.1

package/frontend/lib/components/checkpoint/timeline/animation.ts

@@ -0,0 +1,168 @@
+/**
+ * Timeline animation utilities
+ * Handles FLIP animation technique and interpolation
+ */
+
+import { ANIMATION, SIZE } from './config';
+import type { GraphNode, GraphEdge, VersionGroup, AnimationState } from './types';
+
+/**
+ * Cubic bezier easing function (ease-in-out)
+ */
+export function cubicBezier(t: number): number {
+	// ease-in-out: cubic-bezier(0.42, 0, 0.58, 1)
+	const x1 = 0.42, x2 = 0.58;
+
+	const c = 3 * x1;
+	const b = 3 * (x2 - x1) - c;
+	const a = 1 - c - b;
+
+	const t2 = t * t;
+	const t3 = t2 * t;
+
+	return a * t3 + b * t2 + c * t;
+}
+
+/**
+ * Get interpolated position for a node
+ */
+export function getInterpolatedPosition(
+	node: GraphNode,
+	animationState: AnimationState
+): { x: number, y: number } {
+	if (!animationState.isAnimating) {
+		return { x: node.x, y: node.y };
+	}
+
+	const oldPos = animationState.oldNodePositions.get(node.id);
+	if (!oldPos) {
+		// Node is new, just use current position
+		return { x: node.x, y: node.y };
+	}
+
+	// Interpolate between old and new position
+	const x = oldPos.x + (node.x - oldPos.x) * animationState.progress;
+	const y = oldPos.y + (node.y - oldPos.y) * animationState.progress;
+
+	return { x, y };
+}
+
+/**
+ * Get interpolated color for a node
+ */
+export function getInterpolatedNodeClass(node: GraphNode): string {
+	if (node.isCurrent) {
+		return 'fill-green-500 stroke-green-300';
+	}
+
+	// Orphaned nodes (descendants of current active checkpoint) are always gray
+	if (node.isOrphaned) {
+		return 'fill-slate-300 stroke-slate-200 dark:fill-slate-600 dark:stroke-slate-500';
+	}
+
+	// All non-orphaned nodes use blue (Active Path)
+	return 'fill-blue-500 stroke-blue-300';
+}
+
+/**
+ * Get interpolated path for an edge
+ * Recalculates path using interpolated node positions for smooth transitions
+ */
+export function getInterpolatedEdgePath(
+	edge: GraphEdge,
+	graphNodes: GraphNode[],
+	animationState: AnimationState
+): string {
+	if (!animationState.isAnimating) {
+		return edge.path;
+	}
+
+	// Find the from and to nodes
+	const fromNode = graphNodes.find(n => n.id === edge.from);
+	const toNode = graphNodes.find(n => n.id === edge.to);
+
+	if (!fromNode || !toNode) {
+		return edge.path;
+	}
+
+	// Get interpolated positions
+	const fromPos = getInterpolatedPosition(fromNode, animationState);
+	const toPos = getInterpolatedPosition(toNode, animationState);
+
+	// Recalculate path with interpolated positions
+	if (edge.type === 'straight') {
+		// Straight vertical line
+		return `M ${fromPos.x} ${fromPos.y + SIZE.node} L ${toPos.x} ${toPos.y - SIZE.node}`;
+	} else if (edge.type === 'branch') {
+		// Horizontal line from main vertical line to branch
+		const startX = fromPos.x + 1;
+		const endX = toPos.x - SIZE.node;
+		const lineY = toPos.y;
+		return `M ${startX} ${lineY} L ${endX} ${lineY}`;
+	}
+
+	return edge.path;
+}
+
+/**
+ * Get interpolated bracket position for version group
+ */
+export function getInterpolatedBracket(
+	group: VersionGroup,
+	animationState: AnimationState
+): { minY: number, maxY: number, height: number } {
+	if (!animationState.isAnimating) {
+		return {
+			minY: group.minY,
+			maxY: group.maxY,
+			height: group.height
+		};
+	}
+
+	// Find old group with same branch name
+	const oldGroup = animationState.oldVersionGroups.find(g => g.branchName === group.branchName);
+	if (!oldGroup) {
+		// New group, just use current values
+		return {
+			minY: group.minY,
+			maxY: group.maxY,
+			height: group.height
+		};
+	}
+
+	// Interpolate bracket position
+	const minY = oldGroup.minY + (group.minY - oldGroup.minY) * animationState.progress;
+	const maxY = oldGroup.maxY + (group.maxY - oldGroup.maxY) * animationState.progress;
+	const height = oldGroup.height + (group.height - oldGroup.height) * animationState.progress;
+
+	return { minY, maxY, height };
+}
+
+/**
+ * Start animation loop
+ */
+export function startAnimation(
+	targetNodeId: string,
+	onProgressUpdate: (progress: number) => void,
+	onComplete: () => void
+): void {
+	const startTime = performance.now();
+
+	function animate(currentTime: number) {
+		const elapsed = currentTime - startTime;
+		const rawProgress = Math.min(elapsed / ANIMATION.duration, 1);
+
+		// Apply easing
+		const easedProgress = cubicBezier(rawProgress);
+		onProgressUpdate(easedProgress);
+
+		if (rawProgress < 1) {
+			requestAnimationFrame(animate);
+		} else {
+			// Animation complete
+			onComplete();
+		}
+	}
+
+	requestAnimationFrame(animate);
+}

package/frontend/lib/components/checkpoint/timeline/config.ts

@@ -0,0 +1,44 @@
+/**
+ * Timeline visualization configuration
+ * Contains all constants for spacing, sizing, layout, style, and animation
+ */
+
+// Spacing (distances between elements)
+export const SPACING = {
+	nodeGap: 52,            // Vertical gap between nodes in same timeline
+	branchGap: 0,           // Gap between different branches from same point
+	checkpointToBranch: 52, // Gap from checkpoint to first branch
+	branchToCheckpoint: 52, // Gap from last branch to next checkpoint
+	branchIndent: 32,       // Horizontal indent for branches
+	labelGap: 12,           // Gap between node and label
+	bracketGap: 10,         // Gap from label to bracket
+	bracketLength: 15       // Length of bracket lines
+};
+
+// Size (element dimensions)
+export const SIZE = {
+	node: 6,            // Node radius
+	nodeDot: 2,         // Inner dot radius
+	nodeRing: 3,        // Current node ring radius
+	line: 2,            // Line thickness
+	labelWidth: 280,    // Label width
+	labelHeight: 44     // Label height
+};
+
+// Layout (starting positions)
+export const LAYOUT = {
+	startX: 10,         // Starting X position
+	startY: 30          // Starting Y position
+};
+
+// Style (colors & opacity)
+export const STYLE = {
+	lineColor: '#94a3b8',
+	lineOpacity: 0.4,
+	lineDash: '0'     // Dash pattern for branch lines
+};
+
+// Animation configuration
+export const ANIMATION = {
+	duration: 300            // ms
+};

package/frontend/lib/components/checkpoint/timeline/graph-builder.ts

@@ -0,0 +1,304 @@
+/**
+ * Timeline Graph Builder (Rewritten)
+ *
+ * Builds visual tree from checkpoint nodes with parent-child relationships.
+ * Uses activeChildId to determine which child continues straight (main line)
+ * and which children become branches (indented).
+ */
+
+import { SPACING, SIZE, LAYOUT } from './config';
+import type { TimelineResponse, GraphNode, GraphEdge, VersionGroup, CheckpointNode } from './types';
+import { debug } from '$shared/utils/logger';
+
+export interface GraphData {
+	nodes: GraphNode[];
+	edges: GraphEdge[];
+	versionGroups: VersionGroup[];
+	svgWidth: number;
+	svgHeight: number;
+}
+
+interface TreeNode {
+	checkpoint: CheckpointNode;
+	children: TreeNode[];
+	activeChild: TreeNode | null; // the child that continues straight
+	branchChildren: TreeNode[]; // children that are branches (indented)
+}
+
+/**
+ * Build a tree structure from flat checkpoint nodes
+ */
+function buildTree(nodes: CheckpointNode[]): TreeNode[] {
+	const nodeMap = new Map<string, TreeNode>();
+
+	// Create TreeNode for each checkpoint
+	for (const cp of nodes) {
+		nodeMap.set(cp.id, {
+			checkpoint: cp,
+			children: [],
+			activeChild: null,
+			branchChildren: []
+		});
+	}
+
+	// Build parent-child relationships
+	const roots: TreeNode[] = [];
+	for (const cp of nodes) {
+		const treeNode = nodeMap.get(cp.id)!;
+
+		if (cp.parentId && nodeMap.has(cp.parentId)) {
+			const parent = nodeMap.get(cp.parentId)!;
+			parent.children.push(treeNode);
+		} else {
+			roots.push(treeNode);
+		}
+	}
+
+	// Determine active child vs branch children for each node
+	for (const cp of nodes) {
+		const treeNode = nodeMap.get(cp.id)!;
+		if (treeNode.children.length === 0) continue;
+
+		if (treeNode.children.length === 1) {
+			// Only one child - it's the active/straight continuation
+			treeNode.activeChild = treeNode.children[0];
+			treeNode.branchChildren = [];
+		} else {
+			// Multiple children - use activeChildId to determine which goes straight
+			const activeChildNode = cp.activeChildId
+				? treeNode.children.find(c => c.checkpoint.id === cp.activeChildId)
+				: null;
+
+			if (activeChildNode) {
+				treeNode.activeChild = activeChildNode;
+				treeNode.branchChildren = treeNode.children.filter(c => c !== activeChildNode);
+			} else {
+				// No activeChildId set or not found.
+				// Use the child on the active path, or fallback to the first child
+				const activePathChild = treeNode.children.find(c => c.checkpoint.isOnActivePath);
+				if (activePathChild) {
+					treeNode.activeChild = activePathChild;
+					treeNode.branchChildren = treeNode.children.filter(c => c !== activePathChild);
+				} else {
+					// Fallback: first child by timestamp goes straight
+					const sorted = [...treeNode.children].sort(
+						(a, b) => a.checkpoint.timestamp.localeCompare(b.checkpoint.timestamp)
+					);
+					treeNode.activeChild = sorted[sorted.length - 1]; // last created goes straight
+					treeNode.branchChildren = sorted.slice(0, sorted.length - 1);
+				}
+			}
+
+			// Sort branch children: reverse creation order (newest first)
+			treeNode.branchChildren.sort(
+				(a, b) => b.checkpoint.timestamp.localeCompare(a.checkpoint.timestamp)
+			);
+		}
+	}
+
+	return roots;
+}
+
+/**
+ * Calculate the total height of a subtree (for spacing)
+ */
+function calculateSubtreeHeight(node: TreeNode, depth: number): number {
+	let height = SPACING.nodeGap;
+
+	// Add height for branch children
+	for (const branch of node.branchChildren) {
+		height += calculateBranchHeight(branch, depth + 1);
+		height += SPACING.branchGap;
+	}
+
+	// Add height for active child's subtree
+	if (node.activeChild) {
+		height += calculateSubtreeHeight(node.activeChild, depth);
+	}
+
+	return height;
+}
+
+/**
+ * Calculate the height of a branch (including its own subtree)
+ */
+function calculateBranchHeight(node: TreeNode, depth: number): number {
+	let height = SPACING.nodeGap; // This node itself
+
+	// Add height for this branch's sub-branches
+	for (const branch of node.branchChildren) {
+		height += calculateBranchHeight(branch, depth + 1);
+		height += SPACING.branchGap;
+	}
+
+	// Add height for active child continuation
+	if (node.activeChild) {
+		height += calculateBranchHeight(node.activeChild, depth);
+	}
+
+	return height;
+}
+
+/**
+ * Build graph visualization from timeline data
+ */
+export function buildGraph(timelineData: TimelineResponse | null): GraphData {
+	if (!timelineData || timelineData.nodes.length === 0) {
+		return {
+			nodes: [],
+			edges: [],
+			versionGroups: [],
+			svgWidth: 800,
+			svgHeight: 100
+		};
+	}
+
+	debug.log('snapshot', `Graph builder: ${timelineData.nodes.length} nodes`);
+
+	// Build tree structure
+	const roots = buildTree(timelineData.nodes);
+
+	if (roots.length === 0) {
+		return { nodes: [], edges: [], versionGroups: [], svgWidth: 800, svgHeight: 100 };
+	}
+
+	const graphNodes: GraphNode[] = [];
+	const graphEdges: GraphEdge[] = [];
+
+	/**
+	 * Recursively layout the tree.
+	 * Returns the Y position after this subtree.
+	 */
+	function layoutNode(
+		treeNode: TreeNode,
+		x: number,
+		startY: number,
+		parentId: string | null,
+		isMainLine: boolean,
+		isBranchEdge: boolean
+	): number {
+		const nodeY = startY;
+
+		// Create graph node
+		const graphNode: GraphNode = {
+			id: treeNode.checkpoint.id,
+			checkpoint: treeNode.checkpoint,
+			x,
+			y: nodeY,
+			type: isMainLine ? 'main' : 'branch',
+			isCurrent: treeNode.checkpoint.isCurrent,
+			isOrphaned: treeNode.checkpoint.isOrphaned
+		};
+		graphNodes.push(graphNode);
+
+		// Create edge from parent
+		if (parentId) {
+			graphEdges.push({
+				from: parentId,
+				to: treeNode.checkpoint.id,
+				type: isBranchEdge ? 'branch' : 'straight',
+				path: '' // Will be calculated later
+			});
+		}
+
+		let currentY = nodeY;
+
+		// Layout branch children first (they go between this node and the active child)
+		for (let i = 0; i < treeNode.branchChildren.length; i++) {
+			const branch = treeNode.branchChildren[i];
+			const branchX = x + SPACING.branchIndent;
+			const branchStartY = currentY + SPACING.checkpointToBranch;
+
+			const branchEndY = layoutNode(
+				branch,
+				branchX,
+				branchStartY,
+				treeNode.checkpoint.id,
+				false, // not main line
+				true  // is a branch edge
+			);
+
+			currentY = branchEndY;
+
+			// Add gap after branch
+			if (i < treeNode.branchChildren.length - 1) {
+				currentY += SPACING.branchGap;
+			}
+		}
+
+		// Layout active child (straight continuation)
+		if (treeNode.activeChild) {
+			// If we had branches, add transition spacing
+			if (treeNode.branchChildren.length > 0) {
+				currentY += SPACING.branchToCheckpoint;
+			} else {
+				currentY += SPACING.nodeGap;
+			}
+
+			currentY = layoutNode(
+				treeNode.activeChild,
+				x, // same X (straight continuation)
+				currentY,
+				treeNode.checkpoint.id,
+				isMainLine, // inherit main line status
+				false // straight edge
+			);
+		}
+
+		return currentY;
+	}
+
+	// Layout from root
+	let currentY = LAYOUT.startY;
+	for (let i = 0; i < roots.length; i++) {
+		currentY = layoutNode(
+			roots[i],
+			LAYOUT.startX,
+			currentY,
+			null,
+			true, // root is main line
+			false
+		);
+
+		if (i < roots.length - 1) {
+			currentY += SPACING.nodeGap;
+		}
+	}
+
+	// Calculate SVG paths for edges
+	for (const edge of graphEdges) {
+		const fromNode = graphNodes.find(n => n.id === edge.from);
+		const toNode = graphNodes.find(n => n.id === edge.to);
+
+		if (fromNode && toNode) {
+			if (edge.type === 'straight') {
+				// Vertical line
+				edge.path = `M ${fromNode.x} ${fromNode.y + SIZE.node} L ${toNode.x} ${toNode.y - SIZE.node}`;
+			} else if (edge.type === 'branch') {
+				// Horizontal line from main line to branch node
+				const startX = fromNode.x + 1;
+				const endX = toNode.x - SIZE.node;
+				const lineY = toNode.y;
+				edge.path = `M ${startX} ${lineY} L ${endX} ${lineY}`;
+			}
+		}
+	}
+
+	// Calculate SVG dimensions
+	const maxX = graphNodes.length > 0
+		? Math.max(...graphNodes.map(n => n.x)) + SIZE.labelWidth + 30
+		: 800;
+	const maxY = graphNodes.length > 0
+		? Math.max(...graphNodes.map(n => n.y)) + 50
+		: 100;
+
+	debug.log('snapshot', `Graph: ${graphNodes.length} nodes, ${graphEdges.length} edges, ${maxX}x${maxY}`);
+
+	return {
+		nodes: graphNodes,
+		edges: graphEdges,
+		versionGroups: [], // No longer using version groups
+		svgWidth: maxX,
+		svgHeight: maxY
+	};
+}

package/frontend/lib/components/checkpoint/timeline/types.ts

@@ -0,0 +1,65 @@
+/**
+ * Timeline data structures and type definitions
+ */
+
+export interface CheckpointNode {
+	id: string;
+	messageId: string;
+	parentId: string | null; // parent checkpoint ID in the tree
+	activeChildId: string | null; // which child continues straight
+	timestamp: string;
+	messageText: string;
+	isOnActivePath: boolean;
+	isOrphaned: boolean;
+	isCurrent: boolean;
+	hasSnapshot: boolean;
+	senderName?: string | null;
+	// File change statistics (git-like)
+	filesChanged?: number;
+	insertions?: number;
+	deletions?: number;
+}
+
+export interface TimelineResponse {
+	nodes: CheckpointNode[];
+	currentHeadId: string | null;
+}
+
+// Graph visualization interfaces
+export interface GraphNode {
+	id: string;
+	checkpoint: CheckpointNode;
+	x: number;
+	y: number;
+	type: 'main' | 'branch';
+	isCurrent: boolean;
+	isOrphaned: boolean;
+}
+
+export interface GraphEdge {
+	from: string;
+	to: string;
+	type: 'straight' | 'branch';
+	path: string;
+}
+
+export interface VersionGroup {
+	branchName: string;
+	versionNumber: number;
+	nodes: GraphNode[];
+	x: number;
+	minY: number;
+	maxY: number;
+	width: number;
+	height: number;
+}
+
+// Animation state
+export interface AnimationState {
+	isAnimating: boolean;
+	restoringNodeId: string | null;
+	progress: number;
+	oldNodePositions: Map<string, {x: number, y: number}>;
+	oldNodeStyles: Map<string, {type: string}>;
+	oldVersionGroups: VersionGroup[];
+}

package/frontend/lib/components/checkpoint/timeline/utils.ts

@@ -0,0 +1,53 @@
+/**
+ * Timeline utility functions
+ */
+
+import type { TimelineResponse, GraphNode } from './types';
+
+/**
+ * Format timestamp to time string (HH:MM)
+ */
+export function formatTime(timestamp: string): string {
+	const date = new Date(timestamp);
+	return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+/**
+ * Format timestamp to date string (MMM DD, HH:MM)
+ */
+export function formatDate(timestamp: string): string {
+	const date = new Date(timestamp);
+	return date.toLocaleDateString('en-US', {
+		month: 'short',
+		day: 'numeric',
+		hour: '2-digit',
+		minute: '2-digit'
+	});
+}
+
+/**
+ * Check if checkpoint is current HEAD
+ */
+export function isCurrentHead(
+	timelineData: TimelineResponse | null,
+	checkpointId: string
+): boolean {
+	return timelineData?.currentHeadId === checkpointId;
+}
+
+/**
+ * Get sorted nodes for Z-index (restoring node rendered last, on top)
+ */
+export function getSortedNodes(
+	graphNodes: GraphNode[],
+	isAnimating: boolean,
+	restoringNodeId: string | null
+): GraphNode[] {
+	if (isAnimating && restoringNodeId) {
+		return [
+			...graphNodes.filter(n => n.id !== restoringNodeId),
+			...graphNodes.filter(n => n.id === restoringNodeId)
+		];
+	}
+	return graphNodes;
+}