@makefinks/daemon 0.5.0 → 0.6.0

package/package.json

@@ -28,7 +28,7 @@
 	},
 	"module": "src/index.tsx",
 	"type": "module",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"bin": {
 		"daemon": "dist/cli.js"
 	},

package/src/app/App.tsx

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

package/src/app/components/AvatarLayer.tsx

@@ -1,6 +1,7 @@
-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";
 import { DaemonState } from "../../types";
 
 export interface AvatarLayerProps {
@@ -10,41 +11,112 @@ export interface AvatarLayerProps {
 	width: number;
 	height: number;
 	zIndex?: number;
+	showBanner?: boolean;
+	animateBanner?: boolean;
+	startupAnimationActive?: boolean;
 }
 
 function AvatarLayerImpl(props: AvatarLayerProps) {
-	const { avatarRef, daemonState, applyAvatarForState, width, height, zIndex = 0 } = props;
+	const {
+		avatarRef,
+		daemonState,
+		applyAvatarForState,
+		width,
+		height,
+		zIndex = 0,
+		showBanner = false,
+		animateBanner = false,
+		startupAnimationActive = false,
+	} = props;
+
+	// Use glitchy banner animation when animateBanner is true
+	const glitchyBanner = useGlitchyBanner(showBanner && animateBanner);
+
+	// Determine which lines/colors to use
+	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 (
-		<box
-			position="absolute"
-			top={0}
-			left={0}
-			width="100%"
-			height="100%"
-			alignItems="center"
-			justifyContent="center"
-			zIndex={zIndex}
-		>
-			<daemon-avatar
-				id="daemon-avatar"
-				live
-				width={width}
-				height={height}
-				respectAlpha={true}
-				ref={handleAvatarRef}
-			/>
-		</box>
+		<>
+			{showBanner && (
+				<box
+					position="absolute"
+					top={6}
+					left={0}
+					width="100%"
+					alignItems="center"
+					justifyContent="center"
+					flexDirection="column"
+					zIndex={10}
+				>
+					{bannerLines.map((line, i) => (
+						<text key={i}>
+							<span fg={bannerColors[i]}>{line}</span>
+						</text>
+					))}
+				</box>
+			)}
+			<box
+				position="absolute"
+				top={0}
+				left={0}
+				width="100%"
+				height="100%"
+				alignItems="center"
+				justifyContent="center"
+				zIndex={zIndex}
+			>
+				<daemon-avatar
+					id="daemon-avatar"
+					live
+					width={width}
+					height={height}
+					respectAlpha={true}
+					ref={handleAvatarRef}
+				/>
+			</box>
+		</>
 	);
 }
 

package/src/app/components/ConversationPane.tsx

@@ -7,7 +7,6 @@ import {
 	isLastTextBlockInList,
 	shouldHideContentBlock,
 } from "../../components/ContentBlockView";
-import { DaemonText } from "../../components/DaemonText";
 import { GroundingBadge } from "../../components/GroundingBadge";
 import { InlineStatusIndicator } from "../../components/InlineStatusIndicator";
 import { StatusBar } from "../../components/StatusBar";
@@ -78,6 +77,7 @@ export interface ConversationPaneProps {
 	modelName?: string;
 	sessionTitle?: string;
 	isVoiceOutputEnabled?: boolean;
+	startupIntroDone?: boolean;
 }
 
 function ConversationPaneImpl(props: ConversationPaneProps) {
@@ -98,6 +98,7 @@ function ConversationPaneImpl(props: ConversationPaneProps) {
 		modelName,
 		sessionTitle,
 		isVoiceOutputEnabled,
+		startupIntroDone = true,
 	} = props;
 
 	const { conversationHistory, currentTranscription, currentContentBlocks } = conversation;
@@ -193,7 +194,7 @@ function ConversationPaneImpl(props: ConversationPaneProps) {
 				/>
 			)}
 
-			{!hasInteracted && (
+			{!hasInteracted && startupIntroDone && (
 				<box
 					position="absolute"
 					left={0}

package/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();
+		}
+	}
 }