From aba21db4665015111d61b06b8f1ee46b9a36fa13 Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Fri, 12 Jun 2026 04:18:57 -0700
Subject: [PATCH] Studio: bottom update banners, smooth llama.cpp progress,
re-prompt after copy (#6233)
Web "New Unsloth version" banner now matches the llama.cpp banner design
(borderless rounded card, drop shadow, heading title) and moves to the
bottom-right, stacked with the llama.cpp banner in a shared container. Keeps
the Release notes link, and the copy command is platform aware (curl for
macOS/Linux/WSL, irm for Windows).
The web banner is checked once per launch only, with no polling; a re-check
just happens the next time the user opens the app. Copying the install
command no longer dismisses it for good: it hides and returns on the next
launch while the install is still behind. The X button still dismisses the
version permanently.
llama.cpp progress bar: poll the job every 500ms and smooth the displayed
value so it animates with the real download instead of snapping to the ~90%
post-download hold and finishing.
---
studio/frontend/src/app/provider.tsx | 12 +-
.../src/components/llama-update-banner.tsx | 99 ++++++++++++++--
.../src/components/web/update-banner.tsx | 111 ++++++++++--------
.../src/hooks/use-llama-update-check.ts | 14 ++-
.../src/hooks/use-web-update-check.ts | 31 +++--
5 files changed, 188 insertions(+), 79 deletions(-)
diff --git a/studio/frontend/src/app/provider.tsx b/studio/frontend/src/app/provider.tsx
index 91d99e238e..f806a0f405 100644
--- a/studio/frontend/src/app/provider.tsx
+++ b/studio/frontend/src/app/provider.tsx
@@ -259,8 +259,16 @@ function TauriWrapper({ children }: { children: ReactNode }) {
<>
{children}
-
-
+
+
+
+
);
}
diff --git a/studio/frontend/src/components/llama-update-banner.tsx b/studio/frontend/src/components/llama-update-banner.tsx
index 83320f8e15..88826e57e5 100644
--- a/studio/frontend/src/components/llama-update-banner.tsx
+++ b/studio/frontend/src/components/llama-update-banner.tsx
@@ -5,13 +5,80 @@ import { Button } from "@/components/ui/button";
import { useLlamaUpdateCheck } from "@/hooks/use-llama-update-check";
import { useShowLlamaUpdateBanner } from "@/hooks/use-llama-update-pref";
import { toast } from "@/lib/toast";
+import { cn } from "@/lib/utils";
import { AnimatePresence, motion } from "motion/react";
-import type { ReactElement } from "react";
+import { type ReactElement, useEffect, useRef, useState } from "react";
const EASE_OUT_QUART: [number, number, number, number] = [0.165, 0.84, 0.44, 1];
+// Backend progress is coarse (5% steps, ~0.9 max) and the extract tail emits no
+// signal. Creep toward this cap so the bar keeps moving rather than freezing.
+const RUNNING_CAP = 0.95;
+
+// Smoothed 0..1 bar progress: eases toward real `progress`, trickles toward a
+// ceiling when idle, animates to 100% when `done`. Resets to 0 on each start.
+function useSmoothedProgress(
+ active: boolean,
+ progress: number | null,
+ done: boolean,
+): number {
+ const [display, setDisplay] = useState(0);
+ const displayRef = useRef(0);
+ const progressRef = useRef(progress);
+ const doneRef = useRef(done);
+ progressRef.current = progress;
+ doneRef.current = done;
+
+ useEffect(() => {
+ if (!active) {
+ displayRef.current = 0;
+ setDisplay(0);
+ return;
+ }
+ let raf = 0;
+ let last = performance.now();
+ const tick = (now: number) => {
+ // rAF timestamps can predate the performance.now() captured above, so
+ // clamp dt at 0 to keep the first frame from stepping backwards.
+ const dt = Math.max(0, Math.min((now - last) / 1000, 0.1));
+ last = now;
+ const current = displayRef.current;
+ const real = progressRef.current ?? 0;
+ let target: number;
+ let speed: number; // approach rate (fraction of remaining gap per second)
+ if (doneRef.current) {
+ target = 1;
+ speed = 5;
+ } else if (real > current) {
+ target = real; // catch up to a freshly observed milestone
+ speed = 4;
+ } else {
+ target = RUNNING_CAP; // no signal: creep toward the cap, never frozen
+ speed = 0.3;
+ }
+ const cap = doneRef.current ? 1 : RUNNING_CAP;
+ const next = Math.min(
+ current + (target - current) * Math.min(speed * dt, 1),
+ cap,
+ );
+ displayRef.current = next;
+ setDisplay(next);
+ if (doneRef.current && next > 0.999) {
+ return;
+ }
+ raf = requestAnimationFrame(tick);
+ };
+ raf = requestAnimationFrame(tick);
+ return () => cancelAnimationFrame(raf);
+ }, [active]);
+
+ return display;
+}
interface LlamaUpdateBannerProps {
enabled?: boolean;
+ // false: fill the parent instead of self-anchoring, so banners can stack in a
+ // shared container. true (default) keeps standalone desktop mounts working.
+ positioned?: boolean;
}
/**
@@ -23,6 +90,7 @@ interface LlamaUpdateBannerProps {
*/
export function LlamaUpdateBanner({
enabled = true,
+ positioned = true,
}: LlamaUpdateBannerProps): ReactElement | null {
const showBannerPref = useShowLlamaUpdateBanner();
const { status, visible, applying, apply, dismiss, snooze } =
@@ -46,6 +114,13 @@ export function LlamaUpdateBanner({
const show =
visible && status != null && (status.update_available || applying);
const updateProgress = status?.job.progress ?? null;
+ const jobSucceeded = status?.job.state === "success";
+ // Drives the bar so it animates continuously; aria reports the real value.
+ const displayProgress = useSmoothedProgress(
+ applying,
+ updateProgress,
+ jobSucceeded,
+ );
return (
@@ -55,7 +130,11 @@ export function LlamaUpdateBanner({
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 8, scale: 0.97 }}
transition={{ duration: 0.35, ease: EASE_OUT_QUART }}
- className="fixed bottom-4 right-4 z-[9998] w-[calc(100vw-2rem)] max-w-[340px]"
+ className={cn(
+ positioned
+ ? "fixed bottom-4 right-4 z-[9998] w-[calc(100vw-2rem)] max-w-[340px]"
+ : "pointer-events-auto w-full",
+ )}
data-testid="llama-update-banner"
>