windmill-components 1.596.1 → 1.612.2

package/package/components/raw_apps/RawAppHistoryList.svelte

@@ -1,6 +1,12 @@
-<script lang="ts">import { classNames, displayDate } from '../../utils';
-import { GitBranch } from 'lucide-svelte';
-let { entries, branches, selectedId, onSelect } = $props();
+<script lang="ts">import { displayDate } from '../../utils';
+import { Circle, CircleDot, CircleDotDashed, CircleDashed } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+let { entries, branches, selectedId, onSelect, onSelectCurrent } = $props();
+// Constants for layout
+const LINE_X = 8; // X position of main timeline line (center of dots)
+const BRANCH_OFFSET_X = 45; // How far branches are offset horizontally
+const ENTRY_HEIGHT = 28; // Height of each entry
+const CURRENT_HEIGHT = 32; // Height of current state button
 // Build a map of fork points to their branches for rendering
 const branchesByForkPoint = $derived(branches.reduce((acc, branch) => {
     if (!acc[branch.forkPointId]) {
@@ -9,98 +15,276 @@ const branchesByForkPoint = $derived(branches.reduce((acc, branch) => {
     acc[branch.forkPointId].push(branch);
     return acc;
 }, {}));
-// Entries in reverse order (newest first)
+// Entries in reverse order (newest first) for display
 const reversedEntries = $derived(entries.slice().reverse());
+// Calculate positions for rendering
+const entryPositions = $derived.by(() => {
+    const positions = {};
+    let currentY = CURRENT_HEIGHT + 12; // Start below current button
+    reversedEntries.forEach((entry, index) => {
+        // For each entry, calculate space needed for branches above it
+        const entryBranches = branchesByForkPoint[entry.id] ?? [];
+        const branchSpaceAbove = entryBranches.reduce((total, branch) => {
+            return total + branch.entries.length * ENTRY_HEIGHT;
+        }, 0);
+        // Add space for branches above this entry
+        currentY += branchSpaceAbove;
+        // Position this entry
+        positions[entry.id] = { x: LINE_X, y: currentY, index };
+        // Move to next entry position
+        currentY += ENTRY_HEIGHT;
+    });
+    return positions;
+});
+// Calculate total height needed for the container
+const totalHeight = $derived.by(() => {
+    const mainTimelineMaxY = Object.values(entryPositions).reduce((max, pos) => Math.max(max, pos.y), 0);
+    const branchMaxY = Object.values(branchPositions)
+        .flatMap((groups) => Object.values(groups).flatMap((nodes) => nodes.map((node) => node.y)))
+        .reduce((max, y) => Math.max(max, y), 0);
+    return Math.max(mainTimelineMaxY, branchMaxY, 150) + 20; // Add padding at bottom
+});
+// Calculate branch positions
+const branchPositions = $derived.by(() => {
+    const positions = {};
+    Object.entries(branchesByForkPoint).forEach(([forkPointId, forkBranches]) => {
+        const forkPoint = entryPositions[Number(forkPointId)];
+        if (!forkPoint)
+            return;
+        positions[Number(forkPointId)] = {};
+        forkBranches.forEach((branch) => {
+            positions[Number(forkPointId)][branch.id] = [];
+            // Branch flows from fork point upward (toward newer/current)
+            // Start just above the fork point and continue upward
+            // Oldest branch entry is closest to fork point, newest is furthest
+            let currentY = forkPoint.y - ENTRY_HEIGHT;
+            branch.entries.forEach((entry) => {
+                positions[Number(forkPointId)][branch.id].push({
+                    id: entry.id,
+                    x: LINE_X + BRANCH_OFFSET_X,
+                    y: currentY
+                });
+                currentY -= ENTRY_HEIGHT; // Move upward (decreasing Y)
+            });
+        });
+    });
+    return positions;
+});
+// Helper to create SVG path for branch connection
+function createBranchPath(startX, startY, endX, endY) {
+    // Control points are vertically offset to create vertical tangents
+    const controlOffset = Math.abs(startY - endY) * 0.85; // 85% of vertical distance for very intense curve
+    // Both tangents point upward (toward smaller Y values)
+    // Start control point: above the start point
+    // End control point: above the end point (since endY < startY, we add to go further up)
+    return `M ${startX} ${startY} C ${startX} ${startY - controlOffset}, ${endX} ${endY + controlOffset}, ${endX} ${endY}`;
+}
 </script>
 
+{#snippet timelineButton(
+	label: string,
+	timestamp: string | null,
+	isSelected: boolean,
+	onClick: () => void,
+	position: { x: number; y: number },
+	type: 'current' | 'main' | 'branch' = 'main'
+)}
+	{@const colors = {
+		current: {
+			selected: 'text-accent',
+			default: 'text-primary',
+			textSelected: 'text-accent',
+			bgSelected: 'bg-surface-accent-selected'
+		},
+		main: {
+			selected: 'text-accent',
+			default: 'text-primary',
+			textSelected: 'text-accent',
+			bgSelected: 'bg-surface-accent-selected'
+		},
+		branch: {
+			selected: 'text-amber-500 dark:text-amber-400',
+			default: 'text-secondary',
+			textSelected: 'text-amber-600 dark:text-amber-400',
+			bgSelected: 'bg-amber-50 dark:bg-amber-900/20'
+		}
+	}}
+	{@const color = colors[type]}
+
+	<button
+		onclick={onClick}
+		aria-label={timestamp ? `Snapshot from ${displayDate(timestamp, true, false)}` : label}
+		aria-current={isSelected ? 'true' : 'false'}
+		class={'absolute flex items-center gap-1 transition-all duration-200 animate-fadeIn'}
+		style="left: {position.x - 6}px; top: {position.y - 6}px;"
+	>
+		{#if isSelected}
+			{#if type === 'current'}
+				<CircleDotDashed size={12} class="bg-surface {color.selected}" />
+			{:else}
+				<CircleDot size={12} class="bg-surface {color.selected}" />
+			{/if}
+		{:else if type === 'current'}
+			<CircleDashed size={12} class="bg-surface {color.default}" />
+		{:else}
+			<Circle size={12} class="bg-surface {color.default}" />
+		{/if}
+		<span
+			class={twMerge(
+				'text-2xs truncate px-2 py-1 rounded-md',
+				type === 'current' ? 'font-semibold text-emphasis' : 'font-normal',
+				isSelected ? color.textSelected : 'text-tertiary',
+				isSelected ? color.bgSelected : 'hover:bg-surface-hover'
+			)}
+		>
+			{timestamp ? displayDate(timestamp, true, false) : label}
+		</span>
+	</button>
+{/snippet}
+
 {#if entries.length === 0}
 	<div class="text-tertiary py-2 text-center text-2xs">
 		No snapshots yet. Auto-saved every 5 min.
 	</div>
 {:else}
-	<div class="relative w-full">
-		<!-- Timeline line -->
-		<div class="absolute left-[0.95rem] top-2 bottom-2 w-px bg-gray-200 dark:bg-gray-700"></div>
+	<div
+		class="relative w-full"
+		style="height: {totalHeight}px; transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);"
+		role="list"
+		aria-label="History timeline"
+	>
+		<!-- SVG for lines and connections -->
+		<svg class="absolute inset-0 pointer-events-none" style="width: 100%; height: 100%;">
+			<!-- Always show the main line if there are entries -->
+			{#if reversedEntries.length > 0}
+				{@const mainTimelineMaxY = Math.max(...Object.values(entryPositions).map((pos) => pos.y))}
+				{@const branchMaxY = Object.values(branchPositions)
+					.flatMap((groups) =>
+						Object.values(groups).flatMap((nodes) => nodes.map((node) => node.y))
+					)
+					.reduce((max, y) => Math.max(max, y), 0)}
+				{@const maxY = Math.max(mainTimelineMaxY, branchMaxY)}
+				<line
+					x1={LINE_X}
+					y1={8}
+					x2={LINE_X}
+					y2={maxY + 8}
+					stroke="currentColor"
+					stroke-width="1"
+					opacity="1"
+					class="text-primary"
+					style="transition: y2 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+				/>
+			{/if}
 
-		{#each reversedEntries as entry, i (entry.id)}
-			{@const isSelected = selectedId === entry.id}
-			{@const isFirst = i === 0}
-			{@const entryBranches = branchesByForkPoint[entry.id] ?? []}
+			<!-- Branch connection lines -->
+			{#each Object.entries(branchPositions) as [forkPointId, branchGroups] (forkPointId)}
+				{@const forkPoint = entryPositions[Number(forkPointId)]}
+				{#if forkPoint}
+					{#each Object.entries(branchGroups) as [branchId, branchNodes] (branchId)}
+						{#if branchNodes.length > 0}
+							<!-- Connection from fork point to first branch entry -->
+							<path
+								d={createBranchPath(forkPoint.x, forkPoint.y, branchNodes[0].x, branchNodes[0].y)}
+								stroke="currentColor"
+								stroke-width="1.5"
+								fill="none"
+								stroke-dasharray="4 2"
+								opacity="0.6"
+								class="text-secondary transition-all duration-300"
+							/>
 
-			<!-- Render branches ABOVE their fork point (newest first within branch) -->
-			{#each entryBranches as branch (branch.id)}
-				<div
-					class="ml-4 relative border-l border-dashed border-gray-300 dark:border-gray-600 pl-2 my-1"
-				>
-					<div class="absolute left-3 bottom-2 text-tertiary">
-						<GitBranch size={10} />
-					</div>
-					<!-- Branch entries in reverse order (newest first) -->
-					{#each branch.entries.slice().reverse() as branchEntry (branchEntry.id)}
-						{@const isBranchSelected = selectedId === branchEntry.id}
-						<button
-							onclick={() => onSelect(branchEntry.id)}
-							class={classNames(
-								'relative flex items-center gap-2 py-1 pr-1 pl-2 w-full text-left rounded transition-colors',
-								'hover:bg-surface-hover',
-								isBranchSelected ? 'bg-amber-50 dark:bg-amber-900/20' : ''
-							)}
-						>
-							<!-- Branch dot -->
-							<div
-								class={classNames(
-									'w-1 h-1 rounded-full',
-									isBranchSelected
-										? 'bg-amber-500 dark:bg-amber-400'
-										: 'bg-gray-300 dark:bg-gray-600'
-								)}
-							></div>
-							<span
-								class={classNames(
-									'text-2xs truncate',
-									isBranchSelected
-										? 'text-amber-600 dark:text-amber-400 font-medium'
-										: 'text-tertiary'
-								)}
-							>
-								{displayDate(branchEntry.timestamp.toISOString(), true, false)}
-							</span>
-						</button>
+							<!-- Vertical line connecting branch entries within this branch -->
+							{#if branchNodes.length > 1}
+								{@const firstNode = branchNodes[0]}
+								{@const lastNode = branchNodes[branchNodes.length - 1]}
+								<line
+									x1={firstNode.x}
+									y1={firstNode.y}
+									x2={lastNode.x}
+									y2={lastNode.y}
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-dasharray="4 2"
+									opacity="0.6"
+									class="text-secondary"
+									style="transition: y1 0.3s cubic-bezier(0.4, 0, 0.2, 1), y2 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+								/>
+							{/if}
+						{/if}
 					{/each}
-				</div>
+				{/if}
 			{/each}
+		</svg>
 
-			<!-- Main timeline entry -->
-			<button
-				onclick={() => onSelect(entry.id)}
-				class={classNames(
-					'relative flex items-center gap-2 py-1 pr-1 pl-3 w-full text-left rounded transition-colors',
-					'hover:bg-surface-hover',
-					isSelected ? 'bg-blue-50 dark:bg-blue-900/20' : ''
-				)}
-			>
-				<!-- Timeline dot -->
-				<div
-					class={classNames(
-						'absolute left-0 w-1.5 h-1.5 rounded-full border-[1.5px] bg-surface',
-						isSelected
-							? 'border-blue-500 dark:border-blue-400'
-							: 'border-gray-300 dark:border-gray-600'
-					)}
-				></div>
+		<!-- Interactive elements -->
+		<div class="relative">
+			<!-- Current Working State -->
+			{@render timelineButton(
+				'Current',
+				null,
+				selectedId === undefined,
+				() => onSelectCurrent?.(),
+				{ x: LINE_X, y: 6 },
+				'current'
+			)}
+
+			<!-- Main timeline entries -->
+			{#each reversedEntries as entry (entry.id)}
+				{@const pos = entryPositions[entry.id]}
+				{@const isSelected = selectedId === entry.id}
+				{@const entryBranches = branchesByForkPoint[entry.id] ?? []}
 
-				<span
-					class={classNames(
-						'text-2xs truncate',
-						isSelected ? 'text-blue-600 dark:text-blue-400 font-medium' : 'text-secondary'
+				{#if pos}
+					<!-- Main entry button -->
+					{@render timelineButton(
+						'',
+						entry.timestamp.toISOString(),
+						isSelected,
+						() => onSelect(entry.id),
+						pos,
+						'main'
 					)}
-				>
-					{#if isFirst && !isSelected}
-						<span class="text-tertiary">Latest · </span>
+
+					<!-- Branch entries -->
+					{#if entryBranches.length > 0}
+						{#each Object.values(branchPositions[entry.id] ?? {}) as branchNodes}
+							{#each branchNodes as branchNode (branchNode.id)}
+								{@const branchEntry = branches
+									.flatMap((b) => b.entries)
+									.find((e) => e.id === branchNode.id)}
+								{@const isBranchSelected = selectedId === branchNode.id}
+								{#if branchEntry}
+									{@render timelineButton(
+										'',
+										branchEntry.timestamp.toISOString(),
+										isBranchSelected,
+										() => onSelect(branchNode.id),
+										{ x: branchNode.x, y: branchNode.y - 4 },
+										'branch'
+									)}
+								{/if}
+							{/each}
+						{/each}
 					{/if}
-					{displayDate(entry.timestamp.toISOString(), true, false)}
-				</span>
-			</button>
-		{/each}
+				{/if}
+			{/each}
+		</div>
 	</div>
 {/if}
+
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.animate-fadeIn {
+		animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+	}</style>

package/package/components/raw_apps/RawAppHistoryList.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     branches: HistoryBranch[];
     selectedId: number | undefined;
     onSelect: (id: number) => void;
+    onSelectCurrent?: () => void;
 }
 declare const RawAppHistoryList: import("svelte").Component<Props, {}, "">;
 type RawAppHistoryList = ReturnType<typeof RawAppHistoryList>;

package/package/components/raw_apps/RawAppHistoryManager.svelte.d.ts

@@ -54,6 +54,7 @@ export declare class RawAppHistoryManager {
     private entryIdCounter;
     private branchIdCounter;
     private hasPendingChanges;
+    private temporaryCurrentState;
     readonly hasEntries: boolean;
     readonly entryCount: number;
     readonly allEntries: HistoryEntry[];
@@ -61,6 +62,7 @@ export declare class RawAppHistoryManager {
     readonly canSnapshot: boolean;
     readonly selectedEntryId: number | undefined;
     readonly needsSnapshotBeforeNav: boolean;
+    readonly hasTemporaryState: boolean;
     readonly canUndo: boolean;
     readonly canRedo: boolean;
     constructor(config: HistoryConfig);
@@ -115,9 +117,21 @@ export declare class RawAppHistoryManager {
      */
     selectEntry(id: number): HistoryEntry | undefined;
     /**
-     * Clear selection (go back to latest state)
+     * Clear selection (go back to current state)
      */
     clearSelection(): void;
+    /**
+     * Save current state temporarily when viewing history
+     */
+    saveTemporaryCurrentState(files: Record<string, string>, runnables: Record<string, Runnable>, summary: string, data: RawAppData): void;
+    /**
+     * Get and clear temporary current state
+     */
+    getAndClearTemporaryState(): HistoryEntry | undefined;
+    /**
+     * Convert temporary current state to a real snapshot
+     */
+    convertTemporaryToSnapshot(): void;
     /**
      * Get entry by ID (searches main timeline and branches)
      */

package/package/components/raw_apps/RawAppHistoryManager.svelte.js

@@ -31,6 +31,8 @@ export class RawAppHistoryManager {
     branchIdCounter = $state(0);
     // Track if current state has pending changes
     hasPendingChanges = $state(false);
+    // Temporary storage for current state when viewing history
+    temporaryCurrentState = $state(undefined);
     // Derived state
     hasEntries = $derived(this.entries.length > 0);
     entryCount = $derived(this.entries.length);
@@ -49,6 +51,8 @@ export class RawAppHistoryManager {
     });
     // Whether we need to save current state before navigating
     needsSnapshotBeforeNav = $derived(this.currentIndex === -1 && this.currentBranchId === undefined && this.hasPendingChanges);
+    // Whether we have a temporary current state saved
+    hasTemporaryState = $derived(this.temporaryCurrentState !== undefined);
     canUndo = $derived(this.currentIndex > 0 ||
         (this.currentIndex === -1 && this.entries.length > 1) ||
         (this.currentIndex === -1 && this.entries.length === 1 && this.hasPendingChanges));
@@ -111,18 +115,23 @@ export class RawAppHistoryManager {
      * When making changes from a historical position, create a branch from the "future"
      */
     markPendingChanges() {
-        // If we're on a branch and making changes, that branch becomes main
-        if (this.currentBranchId !== undefined) {
-            this.promoteBranchToMain();
-        }
-        // If we're at a historical position on main timeline
-        else if (this.currentIndex !== -1 && this.currentIndex < this.entries.length - 1) {
-            this.createBranchFromFuture();
+        // If we're viewing history (not at current state)
+        if (this.currentIndex !== -1 || this.currentBranchId !== undefined) {
+            // Convert temporary current state to a real snapshot first
+            this.convertTemporaryToSnapshot();
+            // If we're on a branch and making changes, that branch becomes main
+            if (this.currentBranchId !== undefined) {
+                this.promoteBranchToMain();
+            }
+            // If we're at a historical position on main timeline
+            else if (this.currentIndex !== -1 && this.currentIndex < this.entries.length - 1) {
+                this.createBranchFromFuture();
+            }
+            // Clear selection - we're now at current state
+            this.currentIndex = -1;
+            this.currentBranchId = undefined;
+            this.currentBranchEntryIndex = -1;
         }
-        // Clear selection - we're now in a new unsaved state
-        this.currentIndex = -1;
-        this.currentBranchId = undefined;
-        this.currentBranchEntryIndex = -1;
         this.hasPendingChanges = true;
     }
     /**
@@ -244,12 +253,36 @@ export class RawAppHistoryManager {
         return undefined;
     }
     /**
-     * Clear selection (go back to latest state)
+     * Clear selection (go back to current state)
      */
     clearSelection() {
         this.currentIndex = -1;
         this.currentBranchId = undefined;
         this.currentBranchEntryIndex = -1;
+        this.hasPendingChanges = false;
+    }
+    /**
+     * Save current state temporarily when viewing history
+     */
+    saveTemporaryCurrentState(files, runnables, summary, data) {
+        this.temporaryCurrentState = this.createSnapshot(files, runnables, summary, data);
+    }
+    /**
+     * Get and clear temporary current state
+     */
+    getAndClearTemporaryState() {
+        const temp = this.temporaryCurrentState;
+        this.temporaryCurrentState = undefined;
+        return temp;
+    }
+    /**
+     * Convert temporary current state to a real snapshot
+     */
+    convertTemporaryToSnapshot() {
+        if (this.temporaryCurrentState) {
+            this.addSnapshot(this.temporaryCurrentState);
+            this.temporaryCurrentState = undefined;
+        }
     }
     /**
      * Get entry by ID (searches main timeline and branches)
@@ -305,6 +338,7 @@ export class RawAppHistoryManager {
         this.currentIndex = -1;
         this.currentBranchId = undefined;
         this.currentBranchEntryIndex = -1;
+        this.temporaryCurrentState = undefined;
     }
     /**
      * Cleanup resources