delay animation until onboarding is complete

Author: makefinks

__tests__/formatters.test.ts

@@ -35,8 +35,8 @@ describe("formatReasoningPreview", () => {
 	it("truncates to last N characters when too long", () => {
 		const longText = "a".repeat(150);
 		const result = formatReasoningPreview(longText);
-		expect(result.length).toBeLessThanOrEqual(120);
-		expect(result).toBe("a".repeat(120));
+		expect(result.length).toBeLessThanOrEqual(200);
+		expect(result).toBe("a".repeat(150));
 	});
 });
 

src/app/App.tsx

@@ -72,6 +72,7 @@ export function App() {
 						zIndex={controller.avatarLayerProps.zIndex}
 						showBanner={controller.avatarLayerProps.showBanner}
 						animateBanner={controller.avatarLayerProps.animateBanner}
+						startupAnimationActive={controller.avatarLayerProps.startupAnimationActive}
 					/>
 
 					{controller.isListeningDim ? (

src/app/components/AvatarLayer.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback } from "react";
+import { memo, useCallback, useEffect, useRef } from "react";
 import type { RefObject } from "react";
 import type { DaemonAvatarRenderable } from "../../avatar/DaemonAvatarRenderable";
 import { BANNER_GRADIENT, DAEMON_BANNER_LINES, useGlitchyBanner } from "../../hooks/use-glitchy-banner";
@@ -13,6 +13,7 @@ export interface AvatarLayerProps {
 	zIndex?: number;
 	showBanner?: boolean;
 	animateBanner?: boolean;
+	startupAnimationActive?: boolean;
 }
 
 function AvatarLayerImpl(props: AvatarLayerProps) {
@@ -25,6 +26,7 @@ function AvatarLayerImpl(props: AvatarLayerProps) {
 		zIndex = 0,
 		showBanner = false,
 		animateBanner = false,
+		startupAnimationActive = false,
 	} = props;
 
 	// Use glitchy banner animation when animateBanner is true
@@ -34,16 +36,47 @@ function AvatarLayerImpl(props: AvatarLayerProps) {
 	const bannerLines = animateBanner ? glitchyBanner.lines : DAEMON_BANNER_LINES;
 	const bannerColors = animateBanner ? glitchyBanner.colors : BANNER_GRADIENT;
 
+	// Keep a stable callback ref so we don't detach/reattach on daemonState changes.
+	const daemonStateRef = useRef(daemonState);
+	const applyAvatarForStateRef = useRef(applyAvatarForState);
+	const startupAnimationActiveRef = useRef(startupAnimationActive);
+
+	useEffect(() => {
+		daemonStateRef.current = daemonState;
+	}, [daemonState]);
+	useEffect(() => {
+		applyAvatarForStateRef.current = applyAvatarForState;
+	}, [applyAvatarForState]);
+	useEffect(() => {
+		startupAnimationActiveRef.current = startupAnimationActive;
+	}, [startupAnimationActive]);
+
 	const handleAvatarRef = useCallback(
 		(ref: DaemonAvatarRenderable | null) => {
+			if (ref === avatarRef.current) return;
 			avatarRef.current = ref;
-			if (ref) {
-				applyAvatarForState(daemonState);
+			if (!ref) return;
+
+			applyAvatarForStateRef.current(daemonStateRef.current);
+			if (startupAnimationActiveRef.current) {
+				ref.resetSpawn();
+			} else {
+				ref.skipSpawn();
 			}
 		},
-		[avatarRef, applyAvatarForState, daemonState]
+		[avatarRef]
 	);
 
+	useEffect(() => {
+		const ref = avatarRef.current;
+		if (!ref) return;
+		if (startupAnimationActive) {
+			ref.resetSpawn();
+		} else {
+			ref.skipSpawn();
+		}
+	}, [avatarRef, startupAnimationActive]);
+
 	return (
 		<>
 			{showBanner && (

src/avatar/DaemonAvatarRenderable.ts

@@ -1,16 +1,16 @@
 import {
+	type CliRenderer,
 	FrameBufferRenderable,
+	OptimizedBuffer,
 	RGBA,
 	TextAttributes,
-	OptimizedBuffer,
-	type CliRenderer,
 } from "@opentui/core";
 import { SuperSampleType, ThreeCliRenderer } from "@opentui/core/3d";
 import {
-	createDaemonRig,
 	type DaemonColorTheme,
 	type DaemonRig,
 	type ToolCategory,
+	createDaemonRig,
 } from "./daemon-avatar-rig";
 
 export type { ToolCategory } from "./daemon-avatar-rig";
@@ -30,6 +30,7 @@ export class DaemonAvatarRenderable extends FrameBufferRenderable {
 	private pendingTheme: DaemonColorTheme | null = null;
 	private pendingIntensity: { value: number; immediate: boolean } | null = null;
 	private pendingAudioLevel: { value: number; immediate: boolean } | null = null;
+	private pendingSpawnAction: "reset" | "skip" | null = null;
 
 	private getDesiredAspectRatio(width: number, height: number): number {
 		if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return 1;
@@ -138,6 +139,14 @@ export class DaemonAvatarRenderable extends FrameBufferRenderable {
 		if (this.pendingAudioLevel) {
 			this.rig.setAudioLevel(this.pendingAudioLevel.value, { immediate: this.pendingAudioLevel.immediate });
 		}
+		if (this.pendingSpawnAction) {
+			if (this.pendingSpawnAction === "reset") {
+				this.rig.resetSpawn();
+			} else {
+				this.rig.skipSpawn();
+			}
+			this.pendingSpawnAction = null;
+		}
 		this.renderBuffer = OptimizedBuffer.create(
 			this.frameBuffer.width,
 			this.frameBuffer.height,
@@ -340,4 +349,18 @@ export class DaemonAvatarRenderable extends FrameBufferRenderable {
 			this.rig.triggerTypingPulse();
 		}
 	}
+
+	public resetSpawn(): void {
+		this.pendingSpawnAction = "reset";
+		if (this.rig) {
+			this.rig.resetSpawn();
+		}
+	}
+
+	public skipSpawn(): void {
+		this.pendingSpawnAction = "skip";
+		if (this.rig) {
+			this.rig.skipSpawn();
+		}
+	}
 }

src/avatar/rig/core/rig-engine.ts

@@ -14,7 +14,7 @@ import { updateMainAnchor } from "../update/update-main-anchor";
 import { updateParticles } from "../update/update-particles";
 import { updateRings } from "../update/update-rings";
 import { updateSigils } from "../update/update-sigils";
-import { advanceSpawn, applySpawn } from "../update/update-spawn";
+import { advanceSpawn, applySpawn, resetSpawnState, skipSpawnAnimation } from "../update/update-spawn";
 import { clamp01 } from "../utils/math";
 import type { RigEngineOptions, RigEvent } from "./rig-types";
 
@@ -178,6 +178,14 @@ export class RigEngine {
 		this.state.intensity.spinBoost = Math.max(this.state.intensity.spinBoost, 1.5);
 	}
 
+	public resetSpawn(): void {
+		resetSpawnState(this.state);
+	}
+
+	public skipSpawn(): void {
+		skipSpawnAnimation(this.state);
+	}
+
 	/** Returns the current spawn progress (0-1, where 1 = fully spawned) */
 	public getSpawnProgress(): number {
 		return this.state.spawn.progress;

src/hooks/use-app-controller.ts

@@ -34,6 +34,7 @@ export interface AppControllerResult {
 		zIndex: number;
 		showBanner: boolean;
 		animateBanner: boolean;
+		startupAnimationActive: boolean;
 	};
 	isListeningDim: boolean;
 	listeningDimTop: number;
@@ -65,13 +66,6 @@ export function useAppController({
 	const [isInitialLoad, setIsInitialLoad] = useState(true);
 	const [startupIntroDone, setStartupIntroDone] = useState(false);
 
-	useEffect(() => {
-		// Delay idle UI chrome (status/hotkeys) so the banner can resolve first.
-		const delayMs = Math.max(0, STARTUP_BANNER_DURATION_MS - STARTUP_IDLE_CHROME_LEAD_MS);
-		const t = setTimeout(() => setStartupIntroDone(true), delayMs);
-		return () => clearTimeout(t);
-	}, []);
-
 	// Update terminal size state on resize to trigger re-render
 	useOnResize((width, height) => {
 		setTerminalSize({ width, height });
@@ -141,6 +135,19 @@ export function useAppController({
 		preferencesLoaded,
 		showDeviceMenu,
 	});
+	const onboardingComplete = preferencesLoaded && !bootstrap.onboardingActive;
+
+	useEffect(() => {
+		if (!onboardingComplete) {
+			setStartupIntroDone(false);
+			return;
+		}
+		// Delay idle UI chrome (status/hotkeys) so the banner can resolve first.
+		const delayMs = Math.max(0, STARTUP_BANNER_DURATION_MS - STARTUP_IDLE_CHROME_LEAD_MS);
+		setStartupIntroDone(false);
+		const t = setTimeout(() => setStartupIntroDone(true), delayMs);
+		return () => clearTimeout(t);
+	}, [onboardingComplete]);
 
 	const daemon = useDaemonRuntimeController({
 		currentModelId,
@@ -408,6 +415,8 @@ export function useAppController({
 		}
 	}, [daemon.hasInteracted, startupIntroDone]);
 
+	const startupAnimationActive = onboardingComplete && isInitialLoad;
+
 	const appContextValue = useAppContextBuilder({
 		menus: {
 			showDeviceMenu,
@@ -521,10 +530,10 @@ export function useAppController({
 			height: avatarHeight,
 			zIndex: isListening && daemon.hasInteracted ? 2 : 0,
 			// Show banner only when idle, not interacted, and terminal is large enough
-			// Banner is 8 lines tall and ~94 chars wide
-			showBanner: !daemon.hasInteracted && terminalSize.height >= 30 && terminalSize.width >= 100,
-			// Animate banner with glitch effect on initial app load
-			animateBanner: isInitialLoad,
+			showBanner:
+				onboardingComplete && !daemon.hasInteracted && terminalSize.height >= 30 && terminalSize.width >= 100,
+			animateBanner: startupAnimationActive,
+			startupAnimationActive,
 		},
 		isListeningDim,
 		listeningDimTop: statusBarHeight,