From 67882bf81c00598b9c0161cbebe6274004911b72 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Fri, 20 Mar 2026 15:02:43 +1100 Subject: [PATCH 1/9] feat(ui): persistent timeline cache with stale-while-revalidate Remove the 30s TTL from the timeline cache so cached data never expires on its own. When switching back to a project, show cached timeline data immediately and display a "Looking for changes..." spinner row at the bottom while revalidating in the background. - Remove TIMELINE_CACHE_MAX_AGE_MS; cache entries persist until explicitly invalidated - Add getBranchTimelineWithRevalidation() that returns cached data and kicks off a background re-fetch - Add invalidateProjectBranchTimelines() for batch cache eviction - Update BranchCard.loadTimeline() to use stale-while-revalidate on initial load with a version counter to discard stale results - Add revalidating prop to BranchTimeline with a pending-commit style "Looking for changes..." row - Invalidate cache entries on project and branch deletion Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/staged/src/lib/commands.ts | 20 +++++++++-- .../lib/features/branches/BranchCard.svelte | 33 ++++++++++++++++++- .../lib/features/projects/ProjectHome.svelte | 2 ++ .../features/timeline/BranchTimeline.svelte | 10 ++++++ 4 files changed, 62 insertions(+), 3 deletions(-) diff --git a/apps/staged/src/lib/commands.ts b/apps/staged/src/lib/commands.ts index 464fb650..28468059 100644 --- a/apps/staged/src/lib/commands.ts +++ b/apps/staged/src/lib/commands.ts @@ -293,7 +293,6 @@ type TimelineJob = { }; const TIMELINE_MAX_CONCURRENCY = 1; -const TIMELINE_CACHE_MAX_AGE_MS = 30_000; const timelineQueue: TimelineJob[] = []; const timelineCache = new Map(); const inFlightTimelines = new Map>(); @@ -334,7 +333,7 @@ export function getBranchTimeline( ): Promise { if (!force) { const cached = timelineCache.get(branchId); - if (cached && Date.now() - cached.fetchedAt <= TIMELINE_CACHE_MAX_AGE_MS) { + if (cached) { return Promise.resolve(cached.timeline); } } @@ -357,6 +356,23 @@ export function getBranchTimeline( return request; } +export function getBranchTimelineWithRevalidation(branchId: string): { + cached: BranchTimeline | null; + fresh: Promise; +} { + const entry = timelineCache.get(branchId); + return { + cached: entry?.timeline ?? null, + fresh: getBranchTimeline(branchId, { force: true }), + }; +} + +export function invalidateProjectBranchTimelines(branchIds: string[]): void { + for (const id of branchIds) { + timelineCache.delete(id); + } +} + // ============================================================================= // Actions // ============================================================================= diff --git a/apps/staged/src/lib/features/branches/BranchCard.svelte b/apps/staged/src/lib/features/branches/BranchCard.svelte index e16fdffe..0db397f9 100644 --- a/apps/staged/src/lib/features/branches/BranchCard.svelte +++ b/apps/staged/src/lib/features/branches/BranchCard.svelte @@ -90,6 +90,7 @@ let timeline = $state(null); let loading = $state(true); + let revalidating = $state(false); let error = $state(null); let showBranchDiff = $state(false); let loadedTimelineKey = $state(null); @@ -283,12 +284,41 @@ void loadTimeline(); }); + let revalidationVersion = 0; + async function loadTimeline() { const isInitialLoad = !timeline; + error = null; + if (isInitialLoad) { + const { cached, fresh } = commands.getBranchTimelineWithRevalidation(branch.id); + if (cached) { + // Show stale data immediately + timeline = cached; + prunedSessionIds = sessionMgr.prunePendingSessionItems(cached); + revalidating = true; + const version = ++revalidationVersion; + fresh + .then((next) => { + if (version !== revalidationVersion) return; + timeline = next; + prunedSessionIds = sessionMgr.prunePendingSessionItems(next); + void loadTimelineReviewDetails(next.reviews); + }) + .catch((e) => { + if (version !== revalidationVersion) return; + error = e instanceof Error ? e.message : String(e); + }) + .finally(() => { + if (version !== revalidationVersion) return; + revalidating = false; + }); + return; + } + // No cache — show loading spinner as before loading = true; } - error = null; + try { const nextTimeline = await commands.getBranchTimeline(branch.id, { force: !isInitialLoad }); timeline = nextTimeline; @@ -726,6 +756,7 @@ pendingDropNotes={isLocal ? pendingDropNotes : undefined} pendingItems={sessionMgr.pendingSessionItems} {prunedSessionIds} + {revalidating} deletingItems={timelineDeletingItems} reviewCommentBreakdown={timelineReviewDetailsById} onSessionClick={(sid) => sessionMgr.handleTimelineSessionClick(sid)} diff --git a/apps/staged/src/lib/features/projects/ProjectHome.svelte b/apps/staged/src/lib/features/projects/ProjectHome.svelte index eea84b46..48592599 100644 --- a/apps/staged/src/lib/features/projects/ProjectHome.svelte +++ b/apps/staged/src/lib/features/projects/ProjectHome.svelte @@ -448,6 +448,7 @@ if (repo.projectId === id) nextRepos.delete(repoId); } reposById = nextRepos; + commands.invalidateProjectBranchTimelines(branchesToClear.map((b) => b.id)); for (const branch of branchesToClear) { workspaceLifecycle.clearBranchState(branch.id); } @@ -589,6 +590,7 @@ const next = new Set(deletingBranches); next.delete(branch.id); deletingBranches = next; + commands.invalidateBranchTimeline(branch.id); workspaceLifecycle.clearBranchState(branch.id); } } diff --git a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte index 54de388e..7eebecc4 100644 --- a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte +++ b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte @@ -63,6 +63,8 @@ onNewCommit?: () => void; onNewReview?: (e: MouseEvent) => void; newSessionDisabled?: boolean; + /** Whether the timeline is being revalidated in the background. */ + revalidating?: boolean; footerActions?: Snippet; } @@ -88,6 +90,7 @@ onNewCommit, onNewReview, newSessionDisabled = false, + revalidating = false, footerActions, }: Props = $props(); @@ -495,6 +498,13 @@ /> {/each} + {#if revalidating} + + {/if} {#if onNewNote || onNewCommit || onNewReview || footerActions}
From 53c77c478125773c4a356577bebc1729d244bed5 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Fri, 20 Mar 2026 15:11:13 +1100 Subject: [PATCH 2/9] fix(ui): resolve stale-while-revalidate cache bugs hiding timeline data - Set loading=false in cached path so timeline data isn't hidden behind the loading spinner when switching back to a project - Add !revalidating to all isLast calculations so the vertical connector line extends to the "Looking for changes..." row - Move cache invalidation to success path in branch deletion to avoid triggering revalidation for a just-deleted branch - Remove dead fetchedAt field from timeline cache entries Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/staged/src/lib/commands.ts | 4 ++-- apps/staged/src/lib/features/branches/BranchCard.svelte | 1 + apps/staged/src/lib/features/projects/ProjectHome.svelte | 2 +- .../staged/src/lib/features/timeline/BranchTimeline.svelte | 7 +++++-- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/staged/src/lib/commands.ts b/apps/staged/src/lib/commands.ts index 28468059..cafe741c 100644 --- a/apps/staged/src/lib/commands.ts +++ b/apps/staged/src/lib/commands.ts @@ -294,7 +294,7 @@ type TimelineJob = { const TIMELINE_MAX_CONCURRENCY = 1; const timelineQueue: TimelineJob[] = []; -const timelineCache = new Map(); +const timelineCache = new Map(); const inFlightTimelines = new Map>(); let activeTimelineJobs = 0; @@ -306,7 +306,7 @@ function pumpTimelineQueue() { activeTimelineJobs += 1; invoke('get_branch_timeline', { branchId: job.branchId }) .then((timeline) => { - timelineCache.set(job.branchId, { timeline, fetchedAt: Date.now() }); + timelineCache.set(job.branchId, { timeline }); job.resolve(timeline); }) .catch((error) => { diff --git a/apps/staged/src/lib/features/branches/BranchCard.svelte b/apps/staged/src/lib/features/branches/BranchCard.svelte index 0db397f9..b74105d5 100644 --- a/apps/staged/src/lib/features/branches/BranchCard.svelte +++ b/apps/staged/src/lib/features/branches/BranchCard.svelte @@ -295,6 +295,7 @@ if (cached) { // Show stale data immediately timeline = cached; + loading = false; prunedSessionIds = sessionMgr.prunePendingSessionItems(cached); revalidating = true; const version = ++revalidationVersion; diff --git a/apps/staged/src/lib/features/projects/ProjectHome.svelte b/apps/staged/src/lib/features/projects/ProjectHome.svelte index 48592599..3d23b9ca 100644 --- a/apps/staged/src/lib/features/projects/ProjectHome.svelte +++ b/apps/staged/src/lib/features/projects/ProjectHome.svelte @@ -584,13 +584,13 @@ existing.filter((b) => b.id !== branch.id) ); } + commands.invalidateBranchTimeline(branch.id); } catch (e) { console.error('Failed to delete branch:', e); } finally { const next = new Set(deletingBranches); next.delete(branch.id); deletingBranches = next; - commands.invalidateBranchTimeline(branch.id); workspaceLifecycle.clearBranchState(branch.id); } } diff --git a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte index 7eebecc4..721b449e 100644 --- a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte +++ b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte @@ -461,7 +461,9 @@ isLast={index === items.length - 1 && !onNewNote && !onNewCommit && - pendingDropNotes.length === 0} + pendingDropNotes.length === 0 && + pendingItems.length === 0 && + !revalidating} sessionId={item.sessionId} deleteDisabledReason={item.deleteDisabledReason} {onSessionClick} @@ -478,6 +480,7 @@ secondaryMeta="adding..." isLast={index === pendingDropNotes.length - 1 && pendingItems.length === 0 && + !revalidating && !onNewNote && !onNewCommit} /> @@ -494,7 +497,7 @@ fallbackHintForPendingType(item.type)) : item.secondaryMeta} sessionId={item.sessionId} - isLast={index === pendingItems.length - 1 && !onNewNote && !onNewCommit} + isLast={index === pendingItems.length - 1 && !revalidating && !onNewNote && !onNewCommit} />
{/each} From b8234b74ff9dcc9135a977368042d2a98f1e7b9c Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Fri, 20 Mar 2026 15:18:06 +1100 Subject: [PATCH 3/9] fix(ui): make revalidating timeline row grey and compact Add a 'revalidating' type to TimelineRow that renders a grey spinner (default icon styling) instead of green commit styling. The row always hides the vertical connector line and uses reduced vertical padding. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/lib/features/timeline/BranchTimeline.svelte | 6 +----- .../src/lib/features/timeline/TimelineRow.svelte | 11 +++++++++-- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte index 721b449e..10ceaf68 100644 --- a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte +++ b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte @@ -502,11 +502,7 @@
{/each} {#if revalidating} - + {/if} {#if onNewNote || onNewCommit || onNewReview || footerActions}
diff --git a/apps/staged/src/lib/features/timeline/TimelineRow.svelte b/apps/staged/src/lib/features/timeline/TimelineRow.svelte index 808b768a..4419f901 100644 --- a/apps/staged/src/lib/features/timeline/TimelineRow.svelte +++ b/apps/staged/src/lib/features/timeline/TimelineRow.svelte @@ -26,7 +26,8 @@ | 'review' | 'generating-review' | 'failed-review' - | 'image'; + | 'image' + | 'revalidating'; export type TimelineBadge = { icon: 'comment' | 'warning'; @@ -73,7 +74,8 @@ deleting || type === 'pending-commit' || type === 'generating-note' || - type === 'generating-review' + type === 'generating-review' || + type === 'revalidating' ); let isFailed = $derived( !deleting && (type === 'failed-commit' || type === 'failed-note' || type === 'failed-review') @@ -107,6 +109,7 @@ class:pending={isPending} class:failed={isFailed} class:clickable={isClickable} + class:compact={type === 'revalidating'} onclick={handleRowClick} >
@@ -209,6 +212,10 @@ cursor: default; } + .timeline-row.compact { + padding: 4px 8px; + } + .timeline-row.failed { cursor: default; } From 35917775f0914947ea2045a5a28b611083863f62 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Fri, 20 Mar 2026 15:27:26 +1100 Subject: [PATCH 4/9] fix(ui): tone down revalidating row to be less visually prominent Remove the icon box background/border and use --text-faint for the spinner, icon, and title text so the "Looking for changes..." row blends into the background rather than competing with actual timeline content. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/lib/features/timeline/TimelineRow.svelte | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/apps/staged/src/lib/features/timeline/TimelineRow.svelte b/apps/staged/src/lib/features/timeline/TimelineRow.svelte index 4419f901..f64a09f3 100644 --- a/apps/staged/src/lib/features/timeline/TimelineRow.svelte +++ b/apps/staged/src/lib/features/timeline/TimelineRow.svelte @@ -307,6 +307,21 @@ color: var(--review-color); } + .timeline-row.compact .timeline-icon { + background-color: transparent; + border-color: transparent; + color: var(--text-faint); + } + + .timeline-row.compact .timeline-icon :global(.spinner) { + color: var(--text-faint); + } + + .timeline-row.compact .timeline-title { + color: var(--text-faint); + font-weight: normal; + } + .timeline-icon.failed-icon { color: var(--text-muted); border-color: var(--border-muted); From 91a8bb400f36902e2252319ae60e101e1805d41a Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Fri, 20 Mar 2026 15:54:12 +1100 Subject: [PATCH 5/9] fix(ui): use opacity for revalidating icon box instead of removing it Keep the icon background box but apply opacity: 0.5 so it fades into the background rather than disappearing entirely. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/staged/src/lib/features/timeline/TimelineRow.svelte | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/staged/src/lib/features/timeline/TimelineRow.svelte b/apps/staged/src/lib/features/timeline/TimelineRow.svelte index f64a09f3..9693c130 100644 --- a/apps/staged/src/lib/features/timeline/TimelineRow.svelte +++ b/apps/staged/src/lib/features/timeline/TimelineRow.svelte @@ -308,9 +308,7 @@ } .timeline-row.compact .timeline-icon { - background-color: transparent; - border-color: transparent; - color: var(--text-faint); + opacity: 0.5; } .timeline-row.compact .timeline-icon :global(.spinner) { From b75ead26fadb594275da996e5c03a4777e105d35 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Fri, 20 Mar 2026 16:02:58 +1100 Subject: [PATCH 6/9] fix(ui): use subtler background color for revalidating icon box Replace opacity hack with --bg-hover for the icon box background and border, making it barely visible against the page background while still present. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/staged/src/lib/features/timeline/TimelineRow.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/staged/src/lib/features/timeline/TimelineRow.svelte b/apps/staged/src/lib/features/timeline/TimelineRow.svelte index 9693c130..f5492653 100644 --- a/apps/staged/src/lib/features/timeline/TimelineRow.svelte +++ b/apps/staged/src/lib/features/timeline/TimelineRow.svelte @@ -308,7 +308,8 @@ } .timeline-row.compact .timeline-icon { - opacity: 0.5; + background-color: var(--bg-hover); + border-color: var(--bg-hover); } .timeline-row.compact .timeline-icon :global(.spinner) { From 4bd2a0f2e832a25b257544a1bc0b68fe36c66d8c Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Fri, 20 Mar 2026 16:10:54 +1100 Subject: [PATCH 7/9] fix(ui): increase vertical padding on revalidating timeline row Bump compact row padding from 4px to 6px vertical to give the "Looking for changes..." row a bit more breathing room. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/staged/src/lib/features/timeline/TimelineRow.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/staged/src/lib/features/timeline/TimelineRow.svelte b/apps/staged/src/lib/features/timeline/TimelineRow.svelte index f5492653..1e77809f 100644 --- a/apps/staged/src/lib/features/timeline/TimelineRow.svelte +++ b/apps/staged/src/lib/features/timeline/TimelineRow.svelte @@ -213,7 +213,7 @@ } .timeline-row.compact { - padding: 4px 8px; + padding: 6px 8px; } .timeline-row.failed { From a1d7ae2f0bfa7157682fd3d208e8c74aa777c29b Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Fri, 20 Mar 2026 16:21:13 +1100 Subject: [PATCH 8/9] fix(ui): animate revalidating timeline row with slide transition Wrap the "Looking for changes..." row in a slide transition so it smoothly animates in and out, matching the other dynamic timeline rows. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/staged/src/lib/features/timeline/BranchTimeline.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte index 10ceaf68..572e9415 100644 --- a/apps/staged/src/lib/features/timeline/BranchTimeline.svelte +++ b/apps/staged/src/lib/features/timeline/BranchTimeline.svelte @@ -502,7 +502,9 @@
{/each} {#if revalidating} - +
+ +
{/if} {#if onNewNote || onNewCommit || onNewReview || footerActions}
From 5a6f5eddc5e7b0979f7f47a141aad483f5b9b81f Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Fri, 20 Mar 2026 16:28:34 +1100 Subject: [PATCH 9/9] fix(ui): show stale timeline data alongside revalidation errors When background revalidation fails and we have cached timeline data, keep showing the stale data with a subtle error below instead of replacing it with a full error state. Also cancel in-flight revalidations when loadTimeline is called from any path to prevent stale responses from overwriting fresher data. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/lib/features/branches/BranchCard.svelte | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/apps/staged/src/lib/features/branches/BranchCard.svelte b/apps/staged/src/lib/features/branches/BranchCard.svelte index b74105d5..b014d583 100644 --- a/apps/staged/src/lib/features/branches/BranchCard.svelte +++ b/apps/staged/src/lib/features/branches/BranchCard.svelte @@ -289,6 +289,8 @@ async function loadTimeline() { const isInitialLoad = !timeline; error = null; + // Cancel any in-flight revalidation so it can't overwrite fresher data + revalidationVersion++; if (isInitialLoad) { const { cached, fresh } = commands.getBranchTimelineWithRevalidation(branch.id); @@ -298,10 +300,11 @@ loading = false; prunedSessionIds = sessionMgr.prunePendingSessionItems(cached); revalidating = true; - const version = ++revalidationVersion; + const version = revalidationVersion; fresh .then((next) => { if (version !== revalidationVersion) return; + error = null; timeline = next; prunedSessionIds = sessionMgr.prunePendingSessionItems(next); void loadTimelineReviewDetails(next.reviews); @@ -746,7 +749,7 @@ Loading...
- {:else if error} + {:else if error && !timeline}
{error}
@@ -804,6 +807,11 @@ {/if} {/snippet} + {#if error} +
+ {error} +
+ {/if} {/if}
{/if} @@ -1058,6 +1066,11 @@ font-size: var(--size-sm); } + .revalidation-error { + padding: 4px 12px; + color: var(--text-faint); + } + /* Worktree error state */ .worktree-error { display: flex;