@elyx-code/editor-ui 0.0.2

package/src/components/project-name/ProjectName.tsx

@@ -0,0 +1,2025 @@
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+	useRef,
+} from 'react';
+import './project-name.css';
+import { IUser } from '@elyx-code/definitions';
+import Tooltip from '@mui/material/Tooltip';
+import { EditorService } from '../../services/editor';
+import { IComponentLifecycleProps } from '../../utils/react';
+import { onClickAway } from '../../utils/DOM';
+import {
+	EntityType,
+	IBranch,
+	IBranchHead,
+	IBranchMerge,
+	StateMutationAction,
+	toSentenceCase,
+} from '@elyx-code/project-logic-tree';
+import axios from 'axios';
+import { getUser } from '../../services/user';
+import { ProPlanChip } from '../ProPlanChip';
+import { useWorkspaceStore } from '../../store/workspace';
+import { popupNotification } from '../../popup-notification';
+
+// --- FEATURE FLAGS ---
+const ENABLE_HISTORY_DROPDOWN = true;
+const ENABLE_HISTORY_ACTIONS = true;
+const ENABLE_REAL_HISTORY_DATA = true;
+
+interface IProjectNameProps extends IComponentLifecycleProps {
+	ready: boolean;
+	project: EditorService;
+}
+
+type SyncStatus = 'loading' | 'offline' | 'saving' | 'synced' | 'error';
+
+export interface IVersionMetadata {
+	version: string;
+	author: string;
+	createdAt: string;
+	previousVersion: string | null;
+	deleted: boolean;
+}
+
+// --- MOCK DATA (Massive & Complex) ---
+const MOCK_USERS = {
+	sophie: {
+		id: 'usr_1',
+		name: 'Sophie',
+		avatar: 'https://i.pravatar.cc/150?u=sophie',
+	},
+	helen: {
+		id: 'usr_2',
+		name: 'Helen',
+		avatar: 'https://i.pravatar.cc/150?u=helen',
+	},
+	mike: {
+		id: 'usr_3',
+		name: 'Mike Smith',
+		avatar: 'https://i.pravatar.cc/150?u=mike',
+	},
+};
+
+const MOCK_PROJECT_ID = 'proj_alpha';
+
+export const MOCK_VERSIONS: IVersionMetadata[] = [
+	{
+		version: 'v_0',
+		author: 'usr_1',
+		createdAt: '2026-04-20T10:00:00Z',
+		previousVersion: null,
+		deleted: false,
+	},
+	{
+		version: 'v_1',
+		author: 'usr_1',
+		createdAt: '2026-04-20T11:00:00Z',
+		previousVersion: 'v_0',
+		deleted: false,
+	},
+	{
+		version: 'v_1a',
+		author: 'usr_1',
+		createdAt: '2026-04-20T11:15:00Z',
+		previousVersion: 'v_1',
+		deleted: false,
+	},
+	{
+		version: 'v_1b',
+		author: 'usr_1',
+		createdAt: '2026-04-20T11:30:00Z',
+		previousVersion: 'v_1a',
+		deleted: false,
+	},
+	{
+		version: 'v_2',
+		author: 'usr_2',
+		createdAt: '2026-04-20T12:00:00Z',
+		previousVersion: 'v_1b',
+		deleted: false,
+	},
+	{
+		version: 'v_3',
+		author: 'usr_1',
+		createdAt: '2026-04-20T13:00:00Z',
+		previousVersion: 'v_2',
+		deleted: false,
+	},
+	{
+		version: 'v_feat_1',
+		author: 'usr_1',
+		createdAt: '2026-04-20T14:00:00Z',
+		previousVersion: 'v_2',
+		deleted: false,
+	},
+	{
+		version: 'v_4',
+		author: 'usr_2',
+		createdAt: '2026-04-20T15:00:00Z',
+		previousVersion: 'v_3',
+		deleted: false,
+	},
+	{
+		version: 'v_fix_1',
+		author: 'usr_2',
+		createdAt: '2026-04-20T16:00:00Z',
+		previousVersion: 'v_4',
+		deleted: false,
+	},
+	{
+		version: 'v_feat_2',
+		author: 'usr_1',
+		createdAt: '2026-04-20T17:00:00Z',
+		previousVersion: 'v_feat_1',
+		deleted: false,
+	},
+	{
+		version: 'v_fix_2',
+		author: 'usr_2',
+		createdAt: '2026-04-20T18:00:00Z',
+		previousVersion: 'v_fix_1',
+		deleted: false,
+	},
+	{
+		version: 'v_fix_2a',
+		author: 'usr_2',
+		createdAt: '2026-04-20T18:15:00Z',
+		previousVersion: 'v_fix_2',
+		deleted: false,
+	},
+	{
+		version: 'v_fix_2b',
+		author: 'usr_2',
+		createdAt: '2026-04-20T18:30:00Z',
+		previousVersion: 'v_fix_2a',
+		deleted: false,
+	},
+	{
+		version: 'v_5',
+		author: 'usr_2',
+		createdAt: '2026-04-20T19:00:00Z',
+		previousVersion: 'v_4',
+		deleted: false,
+	},
+	{
+		version: 'v_6',
+		author: 'usr_1',
+		createdAt: '2026-04-20T20:00:00Z',
+		previousVersion: 'v_5',
+		deleted: false,
+	},
+	{
+		version: 'v_exp_1',
+		author: 'usr_3',
+		createdAt: '2026-04-20T21:00:00Z',
+		previousVersion: 'v_6',
+		deleted: false,
+	},
+	{
+		version: 'v_feat_3',
+		author: 'usr_1',
+		createdAt: '2026-04-20T22:00:00Z',
+		previousVersion: 'v_feat_2',
+		deleted: false,
+	},
+	{
+		version: 'v_exp_2',
+		author: 'usr_3',
+		createdAt: '2026-04-20T23:00:00Z',
+		previousVersion: 'v_exp_1',
+		deleted: false,
+	},
+	{
+		version: 'v_7',
+		author: 'usr_1',
+		createdAt: '2026-04-21T00:00:00Z',
+		previousVersion: 'v_6',
+		deleted: false,
+	},
+	{
+		version: 'v_8',
+		author: 'usr_2',
+		createdAt: '2026-04-21T01:00:00Z',
+		previousVersion: 'v_7',
+		deleted: false,
+	},
+	{
+		version: 'v_exp_3',
+		author: 'usr_3',
+		createdAt: '2026-04-21T01:30:00Z',
+		previousVersion: 'v_exp_2',
+		deleted: false,
+	},
+	{
+		version: 'v_exp_4',
+		author: 'usr_3',
+		createdAt: '2026-04-21T01:40:00Z',
+		previousVersion: 'v_exp_3',
+		deleted: false,
+	},
+	{
+		version: 'v_9',
+		author: 'usr_3',
+		createdAt: '2026-04-21T02:00:00Z',
+		previousVersion: 'v_8',
+		deleted: false,
+	},
+	{
+		version: 'v_10',
+		author: 'usr_3',
+		createdAt: '2026-04-21T03:00:00Z',
+		previousVersion: 'v_9',
+		deleted: false,
+	},
+	{
+		version: 'v_11',
+		author: 'usr_3',
+		createdAt: '2026-04-21T04:00:00Z',
+		previousVersion: 'v_10',
+		deleted: false,
+	},
+];
+
+const MOCK_HEADS = (project: EditorService): IBranchHead[] => [
+	{
+		id: 'h_1',
+		branch: 'b_main',
+		userAuthor: 'usr_1',
+		versionId: 'v_1',
+		timestamp: '2026-04-20T11:00:00Z',
+		actionName: StateMutationAction.AddCall,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_1',
+	},
+	{
+		id: 'h_1a',
+		branch: 'b_main',
+		userAuthor: 'usr_1',
+		versionId: 'v_1a',
+		timestamp: '2026-04-20T11:15:00Z',
+		actionName: StateMutationAction.RemoveInput,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_1a',
+	},
+	{
+		id: 'h_1b',
+		branch: 'b_main',
+		userAuthor: 'usr_1',
+		versionId: 'v_1b',
+		timestamp: '2026-04-20T11:30:00Z',
+		actionName: StateMutationAction.SetDataType,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_1b',
+	},
+	{
+		id: 'h_2',
+		branch: 'b_main',
+		userAuthor: 'usr_2',
+		versionId: 'v_2',
+		timestamp: '2026-04-20T12:00:00Z',
+		actionName: StateMutationAction.SetParent,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_2',
+	},
+	{
+		id: 'h_3',
+		branch: 'b_main',
+		userAuthor: 'usr_1',
+		versionId: 'v_3',
+		timestamp: '2026-04-20T13:00:00Z',
+		actionName: StateMutationAction.AddSuccessCall,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_3',
+	},
+	{
+		id: 'h_4',
+		branch: 'b_feat1',
+		userAuthor: 'usr_1',
+		versionId: 'v_feat_1',
+		timestamp: '2026-04-20T14:00:00Z',
+		actionName: StateMutationAction.AddErrorCall,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_feat_1',
+	},
+	{
+		id: 'h_5',
+		branch: 'b_main',
+		userAuthor: 'usr_2',
+		versionId: 'v_4',
+		timestamp: '2026-04-20T15:00:00Z',
+		actionName: StateMutationAction.RemoveEntity,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_4',
+	},
+	{
+		id: 'h_6',
+		branch: 'b_fix',
+		userAuthor: 'usr_2',
+		versionId: 'v_fix_1',
+		timestamp: '2026-04-20T16:00:00Z',
+		actionName: StateMutationAction.SyncInputs,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_fix_1',
+	},
+	{
+		id: 'h_7',
+		branch: 'b_feat1',
+		userAuthor: 'usr_1',
+		versionId: 'v_feat_2',
+		timestamp: '2026-04-20T17:00:00Z',
+		actionName: StateMutationAction.AddInput,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_feat_2',
+	},
+	{
+		id: 'h_8',
+		branch: 'b_fix',
+		userAuthor: 'usr_2',
+		versionId: 'v_fix_2',
+		timestamp: '2026-04-20T18:00:00Z',
+		actionName: StateMutationAction.AddProperty,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_fix_2',
+	},
+	{
+		id: 'h_8a',
+		branch: 'b_fix',
+		userAuthor: 'usr_2',
+		versionId: 'v_fix_2a',
+		timestamp: '2026-04-20T18:15:00Z',
+		actionName: StateMutationAction.AddCall,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_fix_2a',
+	},
+	{
+		id: 'h_8b',
+		branch: 'b_fix',
+		userAuthor: 'usr_2',
+		versionId: 'v_fix_2b',
+		timestamp: '2026-04-20T18:30:00Z',
+		actionName: StateMutationAction.SetParent,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_fix_2b',
+	},
+	{
+		id: 'h_9',
+		branch: 'b_main',
+		userAuthor: 'usr_2',
+		versionId: 'v_5',
+		timestamp: '2026-04-20T19:00:00Z',
+		actionName: StateMutationAction.MergeDataTypes,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_5',
+	},
+	{
+		id: 'h_10',
+		branch: 'b_main',
+		userAuthor: 'usr_1',
+		versionId: 'v_6',
+		timestamp: '2026-04-20T20:00:00Z',
+		actionName: StateMutationAction.AddMethod,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_6',
+	},
+	{
+		id: 'h_11',
+		branch: 'b_exp',
+		userAuthor: 'usr_3',
+		versionId: 'v_exp_1',
+		timestamp: '2026-04-20T21:00:00Z',
+		actionName: StateMutationAction.CloneEntity,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_exp_1',
+	},
+	{
+		id: 'h_12',
+		branch: 'b_feat1',
+		userAuthor: 'usr_1',
+		versionId: 'v_feat_3',
+		timestamp: '2026-04-20T22:00:00Z',
+		actionName: StateMutationAction.SetDataType,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_feat_3',
+	},
+	{
+		id: 'h_13',
+		branch: 'b_exp',
+		userAuthor: 'usr_3',
+		versionId: 'v_exp_2',
+		timestamp: '2026-04-20T23:00:00Z',
+		actionName: StateMutationAction.RemoveChildGroup,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_exp_2',
+	},
+	{
+		id: 'h_14',
+		branch: 'b_main',
+		userAuthor: 'usr_1',
+		versionId: 'v_7',
+		timestamp: '2026-04-21T00:00:00Z',
+		actionName: StateMutationAction.AddEntryCaller,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_7',
+	},
+	{
+		id: 'h_15',
+		branch: 'b_main',
+		userAuthor: 'usr_2',
+		versionId: 'v_8',
+		timestamp: '2026-04-21T01:00:00Z',
+		actionName: StateMutationAction.SetValueWriter,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_8',
+	},
+	{
+		id: 'h_15a',
+		branch: 'b_exp',
+		userAuthor: 'usr_3',
+		versionId: 'v_exp_3',
+		timestamp: '2026-04-21T01:30:00Z',
+		actionName: null as any,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_exp_3',
+	},
+	{
+		id: 'h_15b',
+		branch: 'b_exp',
+		userAuthor: 'usr_3',
+		versionId: 'v_exp_4',
+		timestamp: '2026-04-21T01:40:00Z',
+		actionName: null as any,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_exp_4',
+	},
+	{
+		id: 'h_16',
+		branch: 'b_main',
+		userAuthor: 'usr_3',
+		versionId: 'v_9',
+		timestamp: '2026-04-21T02:00:00Z',
+		actionName: StateMutationAction.AddEntryCaller,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_9',
+	},
+	{
+		id: 'h_17',
+		branch: 'b_main',
+		userAuthor: 'usr_3',
+		versionId: 'v_10',
+		timestamp: '2026-04-21T03:00:00Z',
+		actionName: StateMutationAction.SetValueWriter,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: 'v_10',
+	},
+	{
+		id: 'h_18',
+		branch: 'b_main',
+		userAuthor: 'usr_3',
+		versionId: project?.logic?.version || 'v_11',
+		timestamp: '2026-04-21T04:00:00Z',
+		actionName: StateMutationAction.UpdateWithGenerationTarget,
+		selfId: project?.projectId || 'tmp_proj_id',
+		selfType: EntityType.Project,
+		selfVersion: project?.logic?.version || 'v_11',
+	},
+];
+
+const MOCK_BRANCHES: IBranch[] = [
+	{
+		id: 'b_main',
+		userAuthor: 'usr_1',
+		project: MOCK_PROJECT_ID,
+		fromVersionId: 'v_0',
+		name: 'Main',
+		identifier: 'main',
+		createdAt: '2026-04-20T10:00:00Z',
+		default: true,
+	},
+	{
+		id: 'b_feat1',
+		userAuthor: 'usr_1',
+		project: MOCK_PROJECT_ID,
+		fromVersionId: 'v_2',
+		name: 'New Feature',
+		identifier: 'new-feature',
+		createdAt: '2026-04-20T13:30:00Z',
+		default: false,
+	},
+	{
+		id: 'b_fix',
+		userAuthor: 'usr_2',
+		project: MOCK_PROJECT_ID,
+		fromVersionId: 'v_4',
+		name: 'Fix User Bug',
+		identifier: 'fix-user-bug',
+		createdAt: '2026-04-20T15:30:00Z',
+		default: false,
+	},
+	{
+		id: 'b_exp',
+		userAuthor: 'usr_3',
+		project: MOCK_PROJECT_ID,
+		fromVersionId: 'v_6',
+		name: 'Change Button',
+		identifier: 'change-button',
+		createdAt: '2026-04-20T20:30:00Z',
+		default: false,
+	},
+];
+
+const MOCK_MERGES: IBranchMerge[] = [
+	{
+		id: 'm_1',
+		branch: 'b_fix',
+		userAuthor: 'usr_2',
+		mergedIntoBranch: 'b_main',
+		mergedIntoVersion: 'v_4',
+		mergedAsNewVersion: 'v_5',
+		timestamp: '2026-04-20T19:00:00Z',
+	},
+	{
+		id: 'm_2',
+		branch: 'b_feat1',
+		userAuthor: 'usr_1',
+		mergedIntoBranch: 'b_main',
+		mergedIntoVersion: 'v_6',
+		mergedAsNewVersion: 'v_7',
+		timestamp: '2026-04-21T00:00:00Z',
+	},
+	{
+		id: 'm_3',
+		branch: 'b_main',
+		userAuthor: 'usr_3',
+		mergedIntoBranch: 'b_exp',
+		mergedIntoVersion: 'v_exp_2',
+		mergedAsNewVersion: 'v_exp_3',
+		timestamp: '2026-04-21T01:30:00Z',
+	},
+];
+
+const BRANCH_COLORS = ['#a683fc', '#22c55e', '#ef4444', '#facc15', '#3b82f6'];
+const getBranchColor = (id: string, index: number) =>
+	id === 'b_main'
+		? BRANCH_COLORS[0]
+		: BRANCH_COLORS[(index + 1) % BRANCH_COLORS.length];
+
+// Engine now accepts enriched users and 'hasMoreData' to solve bottom clipping
+const getCombinedTimeline = (
+	project: EditorService,
+	filterUser: string,
+	filterBranch: string,
+	useRealData: boolean,
+	apiData: {
+		items: any[];
+		branches: any[];
+		versions: any[];
+		total: number;
+	} | null,
+	enrichedUsers: Record<string, any>,
+	hasMoreData: boolean,
+) => {
+	let timeline: any[] = [];
+	let mergesByVersion = new Map();
+	let branchesDb: any[] = [];
+
+	if (useRealData) {
+		if (!apiData) return [];
+
+		branchesDb = apiData.branches || [];
+		timeline = (apiData.items || []).map((item) => ({
+			...item,
+			type: item.eventType,
+		}));
+
+		timeline.forEach((item) => {
+			if (item.type === 'merge' && item.mergedAsNewVersion) {
+				mergesByVersion.set(item.mergedAsNewVersion, item);
+			}
+		});
+	} else {
+		let rawEvents = MOCK_HEADS(project).map((head) => ({
+			...head,
+			type: 'commit' as const,
+		}));
+		let merges = MOCK_MERGES.map((m) => ({ ...m, type: 'merge' as const }));
+
+		if (filterUser !== 'all') {
+			rawEvents = rawEvents.filter((h) => h.userAuthor === filterUser);
+			merges = merges.filter((m) => m.userAuthor === filterUser);
+		}
+		if (filterBranch !== 'all') {
+			rawEvents = rawEvents.filter((h) => h.branch === filterBranch);
+			merges = merges.filter(
+				(m) => m.branch === filterBranch || m.mergedIntoBranch === filterBranch,
+			);
+		}
+
+		mergesByVersion = new Map(merges.map((m) => [m.mergedAsNewVersion, m]));
+		timeline = [...rawEvents, ...merges].sort(
+			(a, b) =>
+				new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
+		);
+		branchesDb = MOCK_BRANCHES;
+	}
+
+	const tracks: (string | null)[] = [];
+	const getCol = (bId: string) => {
+		let idx = tracks.indexOf(bId);
+		if (idx === -1) {
+			idx = tracks.indexOf(null);
+			if (idx === -1) {
+				idx = tracks.length;
+				tracks.push(bId);
+			} else {
+				tracks[idx] = bId;
+			}
+		}
+		return idx;
+	};
+
+	const getParentBranchId = (bId: string) => {
+		const branch = branchesDb.find((b) => b.id === bId);
+		if (!branch) return 'b_main';
+		const parentHead = timeline.find(
+			(t) => t.versionId === branch.fromVersionId,
+		);
+		return parentHead ? parentHead.branch : 'b_main';
+	};
+
+	const seenBranches = new Set<string>();
+	const branchesMergedIn = new Set<string>();
+
+	return timeline.map((item, i) => {
+		const branch = branchesDb.find((b) => b.id === item.branch);
+
+		// ENRICHMENT: Map enriched API user, fallback to Mock, fallback to Dicebear
+		const userFallback = Object.values(MOCK_USERS).find(
+			(u) => u.id === item.userAuthor,
+		) || {
+			id: item.userAuthor,
+			name: `User`,
+			lastName: item.userAuthor?.substring(0, 4) || 'Unk',
+			picture: `https://api.dicebear.com/7.x/identicon/svg?seed=${item.userAuthor}`,
+		};
+		const user = enrichedUsers[item.userAuthor] || userFallback;
+
+		const mergeData = mergesByVersion.get(item.versionId);
+		const isMerge = !!mergeData;
+		const sourceBranch = mergeData
+			? branchesDb.find((b) => b.id === mergeData.branch)
+			: undefined;
+
+		const prevItem = timeline[i - 1];
+		const isPrevMerge = prevItem
+			? !!mergesByVersion.get(prevItem.versionId)
+			: false;
+
+		let isSubItem = false;
+		if (
+			prevItem &&
+			prevItem.type === 'commit' &&
+			item.type === 'commit' &&
+			prevItem.branch === item.branch &&
+			prevItem.userAuthor === item.userAuthor &&
+			!isPrevMerge &&
+			!isMerge
+		) {
+			isSubItem = true;
+		}
+
+		const trackIndex = getCol(item.branch);
+		const isTip = !seenBranches.has(item.branch);
+		seenBranches.add(item.branch);
+
+		const activeTracks = tracks
+			.map((id, col) =>
+				id ? { id, col, color: getBranchColor(id, col) } : null,
+			)
+			.filter(Boolean);
+
+		const connections: any[] = [];
+
+		if (isMerge && sourceBranch) {
+			const srcCol = getCol(sourceBranch.id);
+			branchesMergedIn.add(sourceBranch.id);
+			connections.push({
+				fromCol: srcCol,
+				toCol: trackIndex,
+				color: getBranchColor(sourceBranch.id, srcCol),
+				isBranchOff: false,
+			});
+		}
+
+		const olderCommits = timeline
+			.slice(i + 1)
+			.filter((t) => t.branch === item.branch);
+		const isFirstInBranch = olderCommits.length === 0;
+		const isRootOfProject = isFirstInBranch && item.branch === 'b_main';
+
+		// Absolute Origin only triggers if there is NO more data waiting on the server
+		const isAbsoluteOrigin = isFirstInBranch && !hasMoreData;
+
+		if (isAbsoluteOrigin && !isRootOfProject) {
+			const parentBranchId = getParentBranchId(item.branch);
+			const parentCol = getCol(parentBranchId);
+			connections.push({
+				fromCol: trackIndex,
+				toCol: parentCol,
+				color: getBranchColor(item.branch, trackIndex),
+				isBranchOff: true,
+			});
+			tracks[trackIndex] = null;
+		} else if (isAbsoluteOrigin && isRootOfProject) {
+			tracks[trackIndex] = null;
+		}
+
+		let maxCol = trackIndex;
+		activeTracks.forEach((t: any) => {
+			if (t.col > maxCol) maxCol = t.col;
+		});
+		connections.forEach((c: any) => {
+			if (c.fromCol > maxCol) maxCol = c.fromCol;
+			if (c.toCol > maxCol) maxCol = c.toCol;
+		});
+
+		const wasMerged = branchesMergedIn.has(item.branch);
+
+		return {
+			...item,
+			isMerge,
+			sourceBranch,
+			isAbsoluteOrigin, // Passed to renderer to know if it should cap the bottom
+			isTip,
+			wasMerged,
+			isSubItem,
+			track: trackIndex,
+			activeTracks,
+			connections,
+			branchObj: branch,
+			user,
+			maxCol,
+		};
+	});
+};
+
+const ProjectName = (props: IProjectNameProps) => {
+	const useForceUpdate = () => {
+		const [_, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate();
+
+	const { ready, project } = props;
+
+	const [status, setStatus] = useState<SyncStatus>(() =>
+		ready ? 'synced' : 'loading',
+	);
+	const [isHistoryOpen, setIsHistoryOpen] = useState(false);
+	const [activeTab, setActiveTab] = useState<'timeline' | 'merges'>('timeline');
+	const [openActionMenuId, setOpenActionMenuId] = useState<string | null>(null);
+
+	// State Hooks for Filters, Data, and Load More
+	const [filterBranch, setFilterBranch] = useState<string>('all');
+	const [filterUser, setFilterUser] = useState<string>('all');
+	const [showFilters, setShowFilters] = useState<boolean>(false);
+
+	const [apiData, setApiData] = useState<{
+		items: any[];
+		branches: any[];
+		versions: any[];
+		total: number;
+	} | null>(null);
+	const [isLoadingTimeline, setIsLoadingTimeline] = useState(false);
+
+	const [offset, setOffset] = useState(0);
+	const limit = 50;
+	const [isLoadingMore, setIsLoadingMore] = useState(false);
+
+	const [enrichedUsers, setEnrichedUsers] = useState<Record<string, IUser>>({});
+
+	const dropdownRef = useRef<HTMLDivElement>(null);
+
+	// const [currentUser, setCurrentUser] = useState<IUser | null>(null);
+	// const [isUserLoaded, setIsUserLoaded] = useState(false);
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	// useEffect(() => {
+	// getCurrentUserOrLogoutRedirect()
+	// 	.then((user: IUser) => {
+	// 		// if (activeWorkspace?.features?.versionControl !== undefined) {
+	// 		// 	// for testing
+	// 		// 	activeWorkspace.features.versionControl = false;
+	// 		// }
+	// 		setCurrentUser(user);
+	// 		setIsUserLoaded(true);
+	// 	})
+	// 	.catch((e) => {
+	// 		console.error('Failed to fetch user for history panel', e);
+	// 		setIsUserLoaded(true);
+	// 	});
+	// }, []);
+
+	const hasVersionControl = activeWorkspace?.features?.versionControl === true;
+
+	const statusText: Record<SyncStatus, string> = useMemo(
+		() => ({
+			loading: 'Loading project…',
+			offline: 'Offline — changes queued',
+			saving: 'Saving changes…',
+			synced: 'All changes saved',
+			error: 'Error — not in sync',
+		}),
+		[],
+	);
+
+	const statusClass = useMemo(() => {
+		switch (status) {
+			case 'saving':
+				return 'saving';
+			case 'synced':
+				return 'synced';
+			case 'error':
+				return 'error';
+			case 'offline':
+			case 'loading':
+			default:
+				return 'offline';
+		}
+	}, [status]);
+
+	const handleConnectionLost = useCallback(() => setStatus('offline'), []);
+	const handleConnectionRestored = useCallback(() => setStatus('saving'), []);
+	const handleChangeSetClosed = useCallback(() => {
+		if (
+			project.logic.history.find(
+				(changeSet) => !changeSet.open && changeSet.dirty,
+			)
+		)
+			setStatus('saving');
+	}, [project]);
+
+	const handleSubmissionSucceeded = useCallback(
+		(wsMessage: any) => {
+			setStatus('synced');
+
+			const newVersionId =
+				wsMessage.payload.updated?.[props.project.projectId]?.version;
+
+			// Push a new item to the timeline for this changeSet
+			const newTimelineItem = {
+				id: newVersionId || wsMessage.actionId, // Fallback to actionId if version is missing
+				branch: wsMessage.payload.branch,
+				userAuthor: wsMessage.userAuthor,
+				versionId: newVersionId,
+				timestamp: wsMessage.emittedAt || new Date().toISOString(),
+				actionName: wsMessage.payload?.actionName || null,
+				eventType: 'commit', // FIX: Use eventType so the engine maps it correctly
+			};
+
+			setApiData((prev: any) => {
+				if (!prev) return prev;
+
+				return {
+					...prev,
+					// Prepend the new item so it remains chronologically sorted at the top
+					items: [newTimelineItem, ...prev.items],
+
+					// FIX: Use .some() instead of .includes() since we are checking arrays of objects
+					branches: prev.branches.some(
+						(b: any) => b.id === wsMessage.payload.branch,
+					)
+						? prev.branches
+						: [...prev.branches, { id: wsMessage.payload.branch }],
+
+					versions: prev.versions.some((v: any) => v.version === newVersionId)
+						? prev.versions
+						: [...prev.versions, { version: newVersionId }],
+				};
+			});
+		},
+		[props.project?.projectId],
+	);
+
+	const handleSubmissionFailed = useCallback(() => setStatus('error'), []);
+
+	const projectId =
+		project?.projectId || window.location.pathname.split('/editor/')[1];
+
+	// Filter Change Handlers (Resets Offset)
+	const handleFilterBranchChange = (e: any) => {
+		setFilterBranch(e.target.value);
+		setOffset(0);
+	};
+	const handleFilterUserChange = (e: any) => {
+		setFilterUser(e.target.value);
+		setOffset(0);
+	};
+
+	// Fetch Timeline Effect
+	useEffect(() => {
+		if (
+			!project ||
+			!ENABLE_REAL_HISTORY_DATA ||
+			!isHistoryOpen ||
+			!projectId ||
+			!hasVersionControl
+		) {
+			return;
+		}
+
+		if (offset === 0) setIsLoadingTimeline(true);
+		else setIsLoadingMore(true);
+
+		const fetchTimeline = async () => {
+			try {
+				const url = `${project.env.API_BASE_URL}/editor-service/v1/project/${projectId}/timeline?limit=${limit}&offset=${offset}&filterUser=${filterUser}&filterBranch=${filterBranch}`;
+
+				const response = await axios.get(url, {
+					headers: {
+						'Content-Type': 'application/json',
+						Authorization: `Bearer ${(await project.getAccessToken()) || ''}`,
+					},
+				});
+
+				const data = response.data;
+
+				setApiData((prev: any) => {
+					// Append data if paginating, otherwise replace
+					if (offset > 0 && prev) {
+						const newBranches = data.branches.filter(
+							(b: any) => !prev.branches.some((pb: any) => pb.id === b.id),
+						);
+						const newVersions = data.versions.filter(
+							(v: any) =>
+								!prev.versions.some((pv: any) => pv.version === v.version),
+						);
+						return {
+							...data,
+							items: [...prev.items, ...data.items],
+							branches: [...prev.branches, ...newBranches],
+							versions: [...prev.versions, ...newVersions],
+						};
+					}
+					return data;
+				});
+				setIsLoadingTimeline(false);
+				setIsLoadingMore(false);
+			} catch (error) {
+				console.error('Error fetching live timeline:', error);
+				setIsLoadingTimeline(false);
+				setIsLoadingMore(false);
+			}
+		};
+
+		fetchTimeline();
+	}, [
+		projectId,
+		filterUser,
+		filterBranch,
+		isHistoryOpen,
+		offset,
+		project,
+		hasVersionControl,
+	]);
+
+	// User Enrichment Effect
+	useEffect(() => {
+		if (!apiData?.items) return;
+
+		// Collect all unique user UUIDs from the current timeline chunk
+		const uniqueUserIds = Array.from(
+			new Set(
+				apiData.items.map((item: any) => item.userAuthor).filter(Boolean),
+			),
+		);
+
+		uniqueUserIds.forEach(async (id) => {
+			if (!enrichedUsers[id as string]) {
+				// getUser inherently caches internally, so this is safe
+				const user = await getUser({ id: id as string });
+				if (user) {
+					setEnrichedUsers((prev) => ({ ...prev, [id as string]: user }));
+				}
+			}
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [apiData?.items]);
+
+	useEffect(() => {
+		setStatus(ready ? 'synced' : 'loading');
+	}, [ready]);
+
+	useEffect(() => {
+		if (!project) return;
+		const handleEntityUpdate = () => forceUpdate();
+		project.on(project.projectId, handleEntityUpdate);
+		project.on('connection-status-lost', handleConnectionLost);
+		project.on('connection-status-restored', handleConnectionRestored);
+		project.on('change-set-closed', handleChangeSetClosed);
+		project.on('change-set-submission-succeeded', handleSubmissionSucceeded);
+		project.on('change-set-submission-failed', handleSubmissionFailed);
+
+		return () => {
+			project.off(project.projectId, handleEntityUpdate);
+			project.off('connection-status-lost', handleConnectionLost);
+			project.off('connection-status-restored', handleConnectionRestored);
+			project.off('change-set-closed', handleChangeSetClosed);
+			project.off('change-set-submission-succeeded', handleSubmissionSucceeded);
+			project.off('change-set-submission-failed', handleSubmissionFailed);
+		};
+	}, [
+		project,
+		handleConnectionLost,
+		handleConnectionRestored,
+		handleChangeSetClosed,
+		handleSubmissionSucceeded,
+		handleSubmissionFailed,
+		forceUpdate,
+	]);
+
+	useEffect(() => {
+		if (isHistoryOpen && dropdownRef.current) {
+			const clickAwayHandler = onClickAway(dropdownRef.current, () =>
+				setIsHistoryOpen(false),
+			);
+			return () =>
+				document.removeEventListener('click', clickAwayHandler as any);
+		}
+	}, [isHistoryOpen]);
+
+	const projectName = ready ? project?.logic?.name || 'Untitled' : '-';
+	const runtimeIp = project?.env?.EDITOR_RUNTIME_IP_ADDRESS || 'Not available';
+
+	const hasMoreData =
+		ENABLE_REAL_HISTORY_DATA && apiData
+			? apiData.total > offset + limit
+			: false;
+
+	const processedTimeline = useMemo(
+		() =>
+			getCombinedTimeline(
+				project,
+				filterUser,
+				filterBranch,
+				hasVersionControl && ENABLE_REAL_HISTORY_DATA,
+				apiData,
+				enrichedUsers,
+				hasMoreData,
+			),
+		[
+			project,
+			filterUser,
+			filterBranch,
+			apiData?.total,
+			apiData?.items?.map((i: any) => i.id).join(','),
+			apiData?.branches?.map((b: any) => b.id).join(','),
+			apiData?.versions?.map((v: any) => v.version).join(','),
+			enrichedUsers,
+			hasMoreData,
+			hasVersionControl,
+		],
+	);
+
+	// Derived loading state that doesn't lag behind the useEffect
+	const isWaitingForRealData =
+		hasVersionControl && ENABLE_REAL_HISTORY_DATA && !apiData;
+
+	const availableBranches = isWaitingForRealData
+		? [] // Empty while loading real data
+		: hasVersionControl && ENABLE_REAL_HISTORY_DATA
+			? apiData.branches
+			: MOCK_BRANCHES; // Mock only if they don't have version control
+
+	const availableUsers = isWaitingForRealData
+		? [] // Empty while loading real data
+		: hasVersionControl && ENABLE_REAL_HISTORY_DATA
+			? Object.values(enrichedUsers)
+			: Object.values(MOCK_USERS); // Mock only if they don't have version control
+
+	const isViewingOlderVersion = project?.isViewingNonHead;
+
+	// Extract the currently viewed version's data from the timeline
+	const currentActiveVersion = project?.logic?.version || 'v_9';
+	const currentlyViewedItem = processedTimeline.find(
+		(item) => item.versionId === currentActiveVersion,
+	);
+
+	let viewedItemDateStr = '';
+	let viewedItemAction = '';
+
+	const date = !!project?.logic?.createdAt
+		? new Date(project?.logic?.createdAt)
+		: null;
+	viewedItemDateStr = !!date
+		? `${date.toLocaleString('default', { month: 'short' })} ${date.getDate()}, ${date.getFullYear()}, ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
+		: '';
+	viewedItemAction = !!currentlyViewedItem?.actionName
+		? toSentenceCase(currentlyViewedItem.actionName)
+		: 'Modified';
+
+	return (
+		<div className='editor__project-top-bar-wrapper'>
+			<div id='project-name-chip' className='editor__project-name__container'>
+				<Tooltip placement='bottom' title={'Back to the gallery'}>
+					<a
+						id='editor__project-name__back-to-gallery-link'
+						href={`/ws/${activeWorkspace?.slug}/gallery`}
+						onClick={(e) => {
+							e.preventDefault();
+							if (e.metaKey || e.ctrlKey) {
+								window.open(`/ws/${activeWorkspace?.slug}/gallery`, '_blank');
+								return;
+							}
+							props.project?.hideEntityCreationMenu();
+							EditorService.navigate(`/ws/${activeWorkspace?.slug}/gallery`);
+						}}
+					>
+						<i className='fa-solid fa-arrow-left' />
+					</a>
+				</Tooltip>
+
+				<span className='editor__project-name__separator' />
+
+				<Tooltip
+					placement='bottom'
+					title={
+						<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+							<span>{statusText[status]}</span>
+							<span
+								style={{
+									fontSize: 10,
+									opacity: 0.8,
+									borderTop: '1px solid rgba(255,255,255,0.2)',
+									paddingTop: 4,
+									marginTop: 2,
+								}}
+							>
+								Runtime IP:{' '}
+								<strong style={{ userSelect: 'all' }}>{runtimeIp}</strong>
+							</span>
+						</div>
+					}
+				>
+					<span
+						role='status'
+						aria-label={statusText[status]}
+						className={`editor__project-status-dot editor__project-status-dot--${statusClass}${['loading', 'saving', 'error'].includes(status) ? ' blinking' : ''}`}
+					/>
+				</Tooltip>
+
+				<a
+					href={`${props.project?.editorBasePath}/project-configuration`}
+					title='Project settings'
+					onClick={(e) => {
+						e.preventDefault();
+						EditorService.navigate(
+							`${props.project?.editorBasePath}/project-configuration`,
+						);
+					}}
+				>
+					<p className='editor__project-name__label'>Project</p>
+					<Tooltip placement='bottom' title={projectName}>
+						<h1 className='editor__project-name__name'>{projectName}</h1>
+					</Tooltip>
+				</a>
+
+				{ENABLE_HISTORY_DROPDOWN && (
+					<>
+						<span className='editor__project-name__separator' />
+						<div
+							className='editor__project-name__branch-toggle'
+							onClick={(e) => {
+								e.stopPropagation();
+								setIsHistoryOpen(!isHistoryOpen);
+							}}
+						>
+							<p className='editor__project-name__branch-label'>
+								{props?.project?.branchHead?.name || 'Main'}
+								{' - '}
+								{isViewingOlderVersion ? viewedItemDateStr : 'Latest'}
+							</p>
+							<i
+								className='fa-solid fa-chevron-down'
+								style={{ fontSize: 10, color: 'rgba(255,255,255,0.85)' }}
+							/>
+						</div>
+
+						{isHistoryOpen && (
+							<div
+								className='editor__project-history-dropdown'
+								ref={dropdownRef}
+								onClick={(e) => e.stopPropagation()}
+							>
+								<div className='editor__project-history-tabs'>
+									<button
+										className={`editor__project-history-tab ${activeTab === 'timeline' ? 'active' : ''}`}
+										onClick={() => setActiveTab('timeline')}
+									>
+										Timeline
+									</button>
+									<button
+										className={`editor__project-history-tab ${activeTab === 'merges' ? 'active' : ''}`}
+										onClick={() => setActiveTab('merges')}
+									>
+										Merges
+									</button>
+								</div>
+
+								<div className='editor__project-history-content'>
+									{activeTab === 'timeline' && (
+										<>
+											{/* 1. Filters (Naturally fixed at the top of the flex column) */}
+											<div
+												className='editor__project-history-sticky-filters-container'
+												style={{ flexShrink: 0, zIndex: 15 }}
+											>
+												<div
+													className='editor__project-history-filter-toggle'
+													onClick={() => setShowFilters(!showFilters)}
+												>
+													<div
+														style={{
+															display: 'flex',
+															alignItems: 'center',
+															gap: '6px',
+														}}
+													>
+														<i
+															className='fa-solid fa-filter'
+															style={{ fontSize: '10px' }}
+														/>
+														<span>
+															{filterBranch !== 'all' || filterUser !== 'all'
+																? 'Filters active'
+																: 'Filter timeline'}
+														</span>
+													</div>
+													<i
+														className={`fa-solid fa-chevron-${showFilters ? 'up' : 'down'}`}
+														style={{ fontSize: '10px' }}
+													/>
+												</div>
+
+												{showFilters && (
+													<div className='editor__project-history-filters'>
+														<select
+															className='history-filter-select'
+															value={filterBranch}
+															onChange={handleFilterBranchChange}
+														>
+															<option value='all'>All branches</option>
+															{availableBranches.map((b: any) => (
+																<option key={b.id} value={b.id}>
+																	{b.name}
+																</option>
+															))}
+														</select>
+														<select
+															className='history-filter-select'
+															value={filterUser}
+															onChange={handleFilterUserChange}
+														>
+															<option value='all'>All users</option>
+															{availableUsers.map(
+																(u: IUser | { id: string; name?: string }) => (
+																	<option key={u.id} value={u.id}>
+																		{u.name || u.id}
+																	</option>
+																),
+															)}
+														</select>
+													</div>
+												)}
+											</div>
+
+											{/* 2. Dynamic Content Area */}
+											{isLoadingTimeline ||
+											(hasVersionControl &&
+												ENABLE_REAL_HISTORY_DATA &&
+												!apiData) ? (
+												<div
+													className='editor__project-history-empty'
+													style={{ padding: '60px 20px' }}
+												>
+													<i
+														className='fa-solid fa-circle-notch fa-spin'
+														style={{
+															fontSize: 24,
+															marginBottom: 8,
+															opacity: 0.5,
+														}}
+													/>
+													<p>Loading timeline...</p>
+												</div>
+											) : processedTimeline.length === 0 ? (
+												<div className='editor__project-history-empty'>
+													<p>No commits found.</p>
+												</div>
+											) : (
+												// The Relative Wrapper uses `flex: 1` to fill the remaining space below the filters securely.
+												<div
+													style={{
+														position: 'relative',
+														flex: 1,
+														display: 'flex',
+														flexDirection: 'column',
+														minHeight: 0,
+													}}
+												>
+													{/* The Dedicated Scroll Container */}
+													<div
+														style={{
+															flex: 1,
+															overflowY: 'auto',
+															paddingBottom: '20px',
+														}}
+													>
+														<div
+															className='editor__project-history-list'
+															style={{
+																opacity: hasVersionControl ? 1 : 0.4, // Bumped slightly to 0.4 so it's easier to see while scrolling
+																pointerEvents: hasVersionControl
+																	? 'auto'
+																	: 'none',
+																userSelect: hasVersionControl ? 'auto' : 'none',
+																filter: hasVersionControl
+																	? 'none'
+																	: 'blur(1px)',
+															}}
+														>
+															{processedTimeline.map((item) => {
+																const date = new Date(item.timestamp);
+																const formattedDate = `${date.toLocaleString('default', { month: 'short' })} ${date.getDate()}, ${date.getFullYear()}, ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
+
+																const color = getBranchColor(
+																	item.branch,
+																	item.track,
+																);
+
+																const isActiveVersion =
+																	item.type === 'commit' &&
+																	item.versionId ===
+																		props.project?.viewingVersionId;
+
+																const liveVersionId =
+																	props.project?.lastPublishedProjectState
+																		?.version;
+																const isLiveVersion =
+																	item.type === 'commit' &&
+																	!!liveVersionId &&
+																	item.versionId === liveVersionId;
+
+																const COL_W = 20;
+																const rowCenter = item.isSubItem ? 14 : 20;
+
+																const userDisplayLabel = item.user.lastName
+																	? `${item.user.name} ${item.user.lastName}`
+																	: item.user.name;
+
+																return (
+																	<div
+																		key={item.id}
+																		className={`editor__project-history-item ${isActiveVersion ? 'active' : ''} ${item.isSubItem ? 'sub-item' : ''}`}
+																		onMouseLeave={() =>
+																			setOpenActionMenuId(null)
+																		}
+																	>
+																		<div
+																			className='editor__project-history-visuals'
+																			style={{
+																				width: `${(item.maxCol + 1) * COL_W}px`,
+																			}}
+																		>
+																			<svg className='history-svg-overlay'>
+																				{item.activeTracks.map((t: any) => {
+																					let y1: string | number = '0';
+																					let y2: string | number = '100%';
+
+																					if (t.id === item.branch) {
+																						if (item.isTip && !item.wasMerged)
+																							y1 = rowCenter;
+																						if (item.isAbsoluteOrigin)
+																							y2 = rowCenter;
+																					}
+
+																					return (
+																						<line
+																							key={t.id}
+																							x1={t.col * COL_W + 10}
+																							x2={t.col * COL_W + 10}
+																							y1={y1}
+																							y2={y2}
+																							stroke={t.color}
+																							strokeWidth='2'
+																							strokeOpacity='0.6'
+																						/>
+																					);
+																				})}
+																				{item.connections.map(
+																					(c: any, i: number) => (
+																						<line
+																							key={`conn-${i}`}
+																							x1={c.fromCol * COL_W + 10}
+																							y1={
+																								c.isBranchOff
+																									? rowCenter
+																									: '100%'
+																							}
+																							x2={c.toCol * COL_W + 10}
+																							y2={
+																								c.isBranchOff
+																									? '100%'
+																									: rowCenter
+																							}
+																							stroke={c.color}
+																							strokeWidth='2'
+																							strokeOpacity='0.6'
+																						/>
+																					),
+																				)}
+																			</svg>
+
+																			<div
+																				className='history-dot'
+																				style={{
+																					left: `${item.track * COL_W + 10}px`,
+																					top: `${rowCenter}px`,
+																					width: item.isSubItem ? '6px' : '8px',
+																					height: item.isSubItem
+																						? '6px'
+																						: '8px',
+																					backgroundColor: color,
+																				}}
+																			/>
+																		</div>
+
+																		{item.isSubItem ? (
+																			<div
+																				style={{ width: '24px', flexShrink: 0 }}
+																			/>
+																		) : (
+																			<Tooltip
+																				title={userDisplayLabel}
+																				placement='bottom'
+																				arrow
+																			>
+																				<div
+																					className={`editor__project-history-avatar user-avatar ${item.user.online ? 'user-avatar-online' : ''}`}
+																				>
+																					{item.user.picture ||
+																					item.user.avatar ? (
+																						<img
+																							src={
+																								item.user.picture ||
+																								item.user.avatar
+																							}
+																							alt={`Profile of ${userDisplayLabel}`}
+																						/>
+																					) : (
+																						<i
+																							className='fa-solid fa-user'
+																							style={{ fontSize: '14px' }}
+																						/>
+																					)}
+																				</div>
+																			</Tooltip>
+																		)}
+
+																		<div
+																			className={`editor__project-history-content-right ${item.isSubItem ? 'sub-item' : ''}`}
+																		>
+																			<div
+																				style={{
+																					display: 'flex',
+																					justifyContent: 'space-between',
+																					alignItems: !!item.isSubItem
+																						? 'center'
+																						: 'flex-start',
+																					width: '100%',
+																				}}
+																			>
+																				<div
+																					style={{
+																						display: 'flex',
+																						flexDirection: 'column',
+																						gap: '4px',
+																						minWidth: 0,
+																					}}
+																				>
+																					{!item.isSubItem && (
+																						<div
+																							style={{
+																								display: 'flex',
+																								gap: '4px',
+																								alignItems: 'center',
+																							}}
+																						>
+																							<span className='history-user'>
+																								{userDisplayLabel}
+																							</span>
+																							{isActiveVersion && (
+																								<span className='history-active-badge'>
+																									Viewing
+																								</span>
+																							)}
+																							{isLiveVersion && (
+																								<Tooltip
+																									title='This version is currently live for your users'
+																									placement='top'
+																									arrow
+																								>
+																									<span className='history-live-badge'>
+																										<span className='history-live-badge__dot' />
+																										Live
+																									</span>
+																								</Tooltip>
+																							)}
+																						</div>
+																					)}
+																					<div
+																						style={{
+																							display: 'flex',
+																							gap: '6px',
+																							flexWrap: 'wrap',
+																						}}
+																					>
+																						{item.isMerge && (
+																							<span className='history-action-badge'>
+																								Merged
+																							</span>
+																						)}
+																						{!item.isMerge &&
+																							!item.isSubItem && (
+																								<span
+																									className='history-branch-badge'
+																									style={{
+																										backgroundColor: color,
+																									}}
+																								>
+																									{item.branchObj?.name}
+																								</span>
+																							)}
+																						{item.isSubItem && (
+																							<Tooltip
+																								title={
+																									<div
+																										style={{
+																											display: 'flex',
+																											flexDirection: 'column',
+																											gap: '2px',
+																										}}
+																									>
+																										<span>
+																											{item.actionName
+																												? toSentenceCase(
+																														item.actionName,
+																													)
+																												: 'Change made at:'}
+																										</span>
+																										<span
+																											style={{
+																												fontSize: '9px',
+																												opacity: 0.7,
+																											}}
+																										>
+																											{formattedDate}
+																										</span>
+																									</div>
+																								}
+																								placement='top'
+																							>
+																								<span className='history-mutation-label sub-item-label'>
+																									{!!item.actionName
+																										? toSentenceCase(
+																												item.actionName,
+																											)
+																										: `Modified at ${formattedDate}`}
+																								</span>
+																							</Tooltip>
+																						)}
+																						{item.isSubItem &&
+																							isActiveVersion && (
+																								<span className='history-active-badge'>
+																									Viewing
+																								</span>
+																							)}
+																						{item.isSubItem &&
+																							isLiveVersion && (
+																								<Tooltip
+																									title='This version is currently live for your users'
+																									placement='top'
+																									arrow
+																								>
+																									<span className='history-live-badge'>
+																										<span className='history-live-badge__dot' />
+																										Live
+																									</span>
+																								</Tooltip>
+																							)}
+																					</div>
+																				</div>
+
+																				<div
+																					style={{
+																						display: 'flex',
+																						flexDirection: 'column',
+																						alignItems: 'flex-end',
+																						gap: '4px',
+																						flexShrink: 0,
+																					}}
+																				>
+																					{!item.isSubItem && (
+																						<span className='editor__project-history-timestamp'>
+																							{formattedDate}
+																						</span>
+																					)}
+																					{ENABLE_HISTORY_ACTIONS && (
+																						<div className='history-item-menu-wrapper'>
+																							<button
+																								className='history-item-action-btn'
+																								onClick={(e) => {
+																									e.stopPropagation();
+																									setOpenActionMenuId(
+																										openActionMenuId === item.id
+																											? null
+																											: item.id,
+																									);
+																								}}
+																							>
+																								<i className='fa-solid fa-ellipsis-vertical' />
+																							</button>
+																							{openActionMenuId === item.id && (
+																								<div className='history-item-dropdown-menu'>
+																									<button
+																										className='history-item-dropdown-btn'
+																										disabled={
+																											item.versionId ===
+																											props.project
+																												?.viewingVersionId
+																										}
+																										onClick={(e) => {
+																											e.stopPropagation();
+
+																											// Navigate to the version's URL, which will trigger the project to load that version
+																											// Assemble new URL like `/ws/{workspaceSlug}/editor/{projectId}/{branchIdentifier}/{versionId}`
+																											const workspaceSlug =
+																												activeWorkspace?.slug;
+																											const projectId =
+																												project?.projectId;
+																											const branchIdentifier =
+																												item.branchObj
+																													?.identifier;
+																											const versionId =
+																												item.versionId;
+
+																											if (
+																												!workspaceSlug ||
+																												!projectId ||
+																												!branchIdentifier ||
+																												!versionId
+																											) {
+																												popupNotification({
+																													color: 'error',
+																													text: 'Cannot preview version. Missing necessary data to load this version.',
+																												});
+																												return;
+																											}
+
+																											const path = `/ws/${workspaceSlug}/editor/${projectId}/${branchIdentifier}/${versionId}`;
+
+																											// Check if new tab
+																											if (
+																												e.metaKey ||
+																												e.ctrlKey
+																											) {
+																												// Open same target in new tab
+																												window.open(
+																													path,
+																													'_blank',
+																												);
+																												setOpenActionMenuId(
+																													null,
+																												);
+																												return;
+																											}
+
+																											// Replace the url and reload
+																											window.history.pushState(
+																												{},
+																												'',
+																												path,
+																											);
+																											window.location.reload();
+
+																											setOpenActionMenuId(null);
+																										}}
+																									>
+																										<i className='fa-regular fa-eye' />{' '}
+																										Preview Version
+																									</button>
+																								</div>
+																							)}
+																						</div>
+																					)}
+																				</div>
+																			</div>
+
+																			{!item.isSubItem && item.actionName && (
+																				<Tooltip
+																					title={
+																						<div
+																							style={{
+																								display: 'flex',
+																								flexDirection: 'column',
+																								gap: '2px',
+																							}}
+																						>
+																							<span>
+																								{toSentenceCase(
+																									item.actionName,
+																								)}
+																							</span>
+																							<span
+																								style={{
+																									fontSize: '9px',
+																									opacity: 0.7,
+																								}}
+																							>
+																								{formattedDate}
+																							</span>
+																						</div>
+																					}
+																					placement='top'
+																				>
+																					<span className='history-mutation-label full-width'>
+																						{toSentenceCase(item.actionName)}
+																					</span>
+																				</Tooltip>
+																			)}
+																		</div>
+																	</div>
+																);
+															})}
+														</div>
+
+														{/* Load More Button */}
+														{hasMoreData && hasVersionControl && (
+															<div
+																className='editor__project-history-load-more'
+																style={{
+																	display: 'flex',
+																	justifyContent: 'center',
+																	padding: '16px',
+																}}
+															>
+																<button
+																	className='history-btn outline'
+																	style={{ width: 'auto', padding: '6px 24px' }}
+																	onClick={() =>
+																		setOffset((prev) => prev + limit)
+																	}
+																	disabled={isLoadingMore}
+																>
+																	{isLoadingMore ? (
+																		<i className='fa-solid fa-circle-notch fa-spin' />
+																	) : (
+																		'Load More'
+																	)}
+																</button>
+															</div>
+														)}
+													</div>
+
+													{/* The Overlay Magic (pointer-events: none) */}
+													{!hasVersionControl && (
+														<div
+															className='editor__project-history-upgrade-overlay'
+															style={{
+																position: 'absolute',
+																top: 0,
+																left: 0,
+																right: 0,
+																bottom: 0,
+																// Fades slightly slower so the scroll feels dynamic
+																background:
+																	'linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 120px, rgba(255, 255, 255, 0.8) 280px, rgb(255, 255, 255) 500px)',
+																display: 'flex',
+																flexDirection: 'column',
+																alignItems: 'center',
+																textAlign: 'center',
+																padding: '32px',
+																zIndex: 10,
+																borderRadius: '0 0 8px 8px',
+																pointerEvents: 'none',
+															}}
+														>
+															{/* Re-enable pointer events just for the text/button so it remains clickable */}
+															<div
+																style={{
+																	pointerEvents: 'auto',
+																	display: 'flex',
+																	flexDirection: 'column',
+																	alignItems: 'center',
+																}}
+															>
+																<ProPlanChip />
+																<h4
+																	style={{
+																		marginTop: '12px',
+																		marginBottom: '4px',
+																		color: '#111827',
+																		fontSize: '14px',
+																	}}
+																>
+																	Unlock Version History
+																</h4>
+																<p
+																	style={{
+																		margin: 0,
+																		fontSize: '12px',
+																		color: '#6b7280',
+																		marginBottom: '20px',
+																	}}
+																>
+																	Upgrade to Pro to track every change, restore
+																	past versions, and collaborate safely.
+																</p>
+																<button
+																	className='history-btn solid'
+																	style={{ width: '100%', flex: 'none' }}
+																	onClick={() =>
+																		window.open('/pricing/plans', '_blank')
+																	}
+																>
+																	Upgrade to Pro
+																</button>
+															</div>
+														</div>
+													)}
+												</div>
+											)}
+										</>
+									)}
+
+									{activeTab === 'merges' && (
+										<div className='editor__project-history-empty'>
+											<i
+												className='fa-solid fa-code-merge'
+												style={{
+													fontSize: 24,
+													marginBottom: 12,
+													color: '#a683fc',
+												}}
+											/>
+											<p
+												style={{
+													margin: '0 0 8px 0',
+													fontWeight: 600,
+													color: '#111827',
+												}}
+											>
+												Merge Requests
+											</p>
+											<span className='history-coming-soon-badge'>
+												Coming soon
+											</span>
+										</div>
+									)}
+								</div>
+
+								<div className='editor__project-history-footer'>
+									<div className='history-btn-wrapper'>
+										<button
+											className='history-btn outline'
+											disabled
+											style={{ opacity: 0.5, cursor: 'not-allowed' }}
+										>
+											<i className='fa-solid fa-code-merge' /> MERGE
+										</button>
+										<span className='history-coming-soon-badge floating'>
+											Coming soon
+										</span>
+									</div>
+									<div className='history-btn-wrapper'>
+										<button
+											className='history-btn solid'
+											disabled
+											style={{ opacity: 0.5, cursor: 'not-allowed' }}
+										>
+											<i className='fa-solid fa-code-branch' /> BRANCH
+										</button>
+										<span className='history-coming-soon-badge floating'>
+											Coming soon
+										</span>
+									</div>
+								</div>
+							</div>
+						)}
+					</>
+				)}
+			</div>
+
+			{isViewingOlderVersion ? (
+				<div className='editor__project-name-secondary-badge'>
+					<Tooltip
+						title={
+							currentlyViewedItem ? (
+								<div
+									style={{
+										display: 'flex',
+										flexDirection: 'column',
+										gap: '2px',
+									}}
+								>
+									<span>{viewedItemAction}</span>
+									<span style={{ fontSize: '9px', opacity: 0.7 }}>
+										{viewedItemDateStr}
+									</span>
+								</div>
+							) : (
+								'Viewing an older version of the project'
+							)
+						}
+						placement='bottom'
+						arrow
+					>
+						<span style={{ cursor: 'default' }}>Viewing older version</span>
+					</Tooltip>
+
+					<Tooltip
+						title='Restore this version to be the new active latest version'
+						placement='bottom'
+						arrow
+					>
+						<button
+							onClick={async () => {
+								if (!project) return;
+
+								try {
+									await project.moveBranchHeadToVersion(
+										project.viewingVersion,
+										'restore',
+										true,
+									);
+
+									// Set the URL and reload the page
+									const newUrl = `${window.location.origin}/editor/${project.projectId}/${project.branchHead?.identifier || 'main'}/latest`;
+									window.history.pushState({ path: newUrl }, '', newUrl);
+									window.location.reload();
+								} catch (error) {
+									console.error('Error restoring version:', error);
+									// Optionally, you could show a user-friendly error message here
+								}
+							}}
+						>
+							Restore
+						</button>
+					</Tooltip>
+				</div>
+			) : (
+				project?.ready &&
+				project?.READ_ONLY && (
+					<div className='editor__project-name-secondary-badge'>
+						<Tooltip
+							title="This project is read-only because because you don't have permission to edit"
+							placement='bottom'
+							arrow
+						>
+							<span style={{ cursor: 'default' }}>Read-only</span>
+						</Tooltip>
+					</div>
+				)
+			)}
+		</div>
+	);
+};
+
+export default ProjectName;