@makefinks/daemon 0.2.0 → 0.3.0

package/src/app/App.tsx

@@ -1,51 +1,15 @@
 import { Toaster } from "@opentui-ui/toast/react";
-import type { ScrollBoxRenderable, TextareaRenderable } from "@opentui/core";
-import { extend, useRenderer } from "@opentui/react";
+import { extend } from "@opentui/react";
 import "opentui-spinner/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { setOpenRouterProviderTag, setResponseModel } from "../ai/model-config";
+
 import { DaemonAvatarRenderable } from "../avatar/DaemonAvatarRenderable";
-import { useAppAudioDevicesLoader } from "../hooks/use-app-audio-devices-loader";
-import { useAppCallbacks } from "../hooks/use-app-callbacks";
-import { useAppContextBuilder } from "../hooks/use-app-context-builder";
-import { useAppDisplayState } from "../hooks/use-app-display-state";
-import { useAppMenus } from "../hooks/use-app-menus";
-import { useAppModel } from "../hooks/use-app-model";
-import { useAppPreferencesBootstrap } from "../hooks/use-app-preferences-bootstrap";
-import { useAppSessions } from "../hooks/use-app-sessions";
-import { useAppSettings } from "../hooks/use-app-settings";
-import { useConversationManager } from "../hooks/use-conversation-manager";
-import { useCopyOnSelect } from "../hooks/use-copy-on-select";
-import { useDaemonEvents } from "../hooks/use-daemon-events";
-import { useDaemonKeyboard } from "../hooks/use-daemon-keyboard";
-import { useGrounding } from "../hooks/use-grounding";
-import { useGroundingMenuController } from "../hooks/use-grounding-menu-controller";
-import { useInputHistory } from "../hooks/use-input-history";
-import { useOverlayController } from "../hooks/use-overlay-controller";
-import { usePlaywrightNotification } from "../hooks/use-playwright-notification";
-import { useReasoningAnimation } from "../hooks/use-reasoning-animation";
-import { useResponseTimer } from "../hooks/use-response-timer";
+import { useAppController } from "../hooks/use-app-controller";
 import { ToolApprovalProvider } from "../hooks/use-tool-approval";
-import { useTypingMode } from "../hooks/use-typing-mode";
-import { useVoiceDependenciesNotification } from "../hooks/use-voice-dependencies-notification";
 import { AppProvider } from "../state/app-context";
-import { daemonEvents } from "../state/daemon-events";
-import { getDaemonManager } from "../state/daemon-state";
-import { deleteSession } from "../state/session-store";
-import type { AppPreferences, AudioDevice, OnboardingStep } from "../types";
-import { DaemonState } from "../types";
 import { COLORS } from "../ui/constants";
-import { getSoxInstallHint, isSoxAvailable, setAudioDevice } from "../voice/audio-recorder";
 import { AppOverlays } from "./components/AppOverlays";
 import { AvatarLayer } from "./components/AvatarLayer";
-import {
-	type ConversationDisplayState,
-	ConversationPane,
-	type ProgressDisplayState,
-	type ReasoningDisplayState,
-	type StatusDisplayState,
-	type TypingInputState,
-} from "./components/ConversationPane";
+import { ConversationPane } from "./components/ConversationPane";
 
 const INITIAL_STATUS_TOP = "70%";
 
@@ -79,575 +43,7 @@ extend({
 });
 
 export function App() {
-	const renderer = useRenderer();
-
-	const [onboardingActive, setOnboardingActive] = useState(false);
-	usePlaywrightNotification({ enabled: !onboardingActive });
-	useVoiceDependenciesNotification({ enabled: !onboardingActive });
-	const { handleCopyOnSelectMouseUp } = useCopyOnSelect();
-
-	const {
-		reasoningQueue,
-		reasoningDisplay,
-		fullReasoning,
-		setReasoningQueue,
-		setFullReasoning,
-		fullReasoningRef,
-		clearReasoningState,
-		clearReasoningTicker,
-	} = useReasoningAnimation();
-
-	const [preferencesLoaded, setPreferencesLoaded] = useState(false);
-
-	const menus = useAppMenus();
-	const {
-		showDeviceMenu,
-		setShowDeviceMenu,
-		showSettingsMenu,
-		setShowSettingsMenu,
-		showModelMenu,
-		setShowModelMenu,
-		showProviderMenu,
-		setShowProviderMenu,
-		showSessionMenu,
-		setShowSessionMenu,
-		showHotkeysPane,
-		setShowHotkeysPane,
-		showGroundingMenu,
-		setShowGroundingMenu,
-		showUrlMenu,
-		setShowUrlMenu,
-	} = menus;
-
-	const {
-		currentSessionId,
-		setCurrentSessionIdSafe,
-		currentSessionIdRef,
-		ensureSessionId,
-		setSessions,
-		sessionMenuItems,
-		handleFirstMessage,
-	} = useAppSessions({ showSessionMenu });
-
-	const { latestGroundingMap, hasGrounding } = useGrounding(currentSessionId);
-	const {
-		groundingInitialIndex,
-		groundingSelectedIndex,
-		setGroundingSelectedIndex,
-		onGroundingSelect,
-		onGroundingIndexChange,
-	} = useGroundingMenuController({ sessionId: currentSessionId, latestGroundingMap });
-
-	const appSettings = useAppSettings();
-	const {
-		interactionMode,
-		setInteractionMode,
-		voiceInteractionType,
-		setVoiceInteractionType,
-		speechSpeed,
-		setSpeechSpeed,
-		reasoningEffort,
-		setReasoningEffort,
-		bashApprovalLevel,
-		setBashApprovalLevel,
-		showFullReasoning,
-		setShowFullReasoning,
-		showToolOutput,
-		setShowToolOutput,
-		canEnableVoiceOutput,
-	} = appSettings;
-
-	const appModel = useAppModel({
-		preferencesLoaded,
-		showProviderMenu,
-	});
-	const {
-		currentModelId,
-		setCurrentModelId,
-		currentOpenRouterProviderTag,
-		setCurrentOpenRouterProviderTag,
-		modelsWithPricing,
-		openRouterModels,
-		openRouterModelsLoading,
-		openRouterModelsUpdatedAt,
-		providerMenuItems,
-		refreshOpenRouterModels,
-	} = appModel;
-
-	const { addToHistory, navigateUp, navigateDown, resetNavigation } = useInputHistory();
-
-	const {
-		daemonState,
-		conversationHistory,
-		currentTranscription,
-		currentResponse,
-		currentContentBlocks,
-		error,
-		sessionUsage,
-		modelMetadata,
-		avatarRef,
-		currentUserInputRef,
-		hydrateConversationHistory,
-		setCurrentTranscription,
-		setCurrentResponse,
-		clearCurrentContentBlocks,
-		resetSessionUsage,
-		setSessionUsage,
-		applyAvatarForState,
-	} = useDaemonEvents({
-		currentModelId,
-		preferencesLoaded,
-		setReasoningQueue,
-		setFullReasoning,
-		clearReasoningState,
-		clearReasoningTicker,
-		fullReasoningRef,
-		sessionId: currentSessionId,
-		sessionIdRef: currentSessionIdRef,
-		ensureSessionId,
-		addToHistory,
-		onFirstMessage: handleFirstMessage,
-	});
-
-	const {
-		setTypingInput,
-		typingTextareaRef,
-		handleTypingContentChange,
-		handleTypingSubmit,
-		prefillTypingInput,
-		handleHistoryUp,
-		handleHistoryDown,
-	} = useTypingMode({
-		daemonState,
-		currentUserInputRef,
-		setCurrentTranscription,
-		onTypingActivity: useCallback(() => {
-			avatarRef.current?.triggerTypingPulse();
-		}, [avatarRef]),
-		navigateUp,
-		navigateDown,
-		resetNavigation,
-	});
-
-	const { responseElapsedMs } = useResponseTimer({ daemonState });
-
-	const [loadedPreferences, setLoadedPreferences] = useState<AppPreferences | null>(null);
-	const [onboardingStep, setOnboardingStep] = useState<OnboardingStep>("intro");
-	const [devices, setDevices] = useState<AudioDevice[]>([]);
-	const [currentDevice, setCurrentDevice] = useState<string | undefined>(undefined);
-	const [currentOutputDevice, setCurrentOutputDevice] = useState<string | undefined>(undefined);
-	const [resetNotification, setResetNotification] = useState<string>("");
-	const [apiKeyMissingError, setApiKeyMissingError] = useState<string>("");
-	const [escPendingCancel, setEscPendingCancel] = useState(false);
-	const [deviceLoadTimedOut, setDeviceLoadTimedOut] = useState(false);
-	const soxAvailable = useMemo(() => isSoxAvailable(), []);
-	const soxInstallHint = useMemo(() => getSoxInstallHint(), []);
-	const apiKeyTextareaRef = useRef<TextareaRenderable | null>(null);
-	const conversationScrollRef = useRef<ScrollBoxRenderable | null>(null);
-
-	const manager = getDaemonManager();
-	const supportsReasoning = modelMetadata?.supportsReasoning ?? false;
-
-	useEffect(() => {
-		const handleTranscriptionReady = (text: string) => {
-			prefillTypingInput(text);
-		};
-		daemonEvents.on("transcriptionReady", handleTranscriptionReady);
-		return () => {
-			daemonEvents.off("transcriptionReady", handleTranscriptionReady);
-		};
-	}, [manager, prefillTypingInput]);
-
-	useEffect(() => {
-		manager.setEnsureSessionId(() => ensureSessionId());
-		return () => manager.setEnsureSessionId(null);
-	}, [manager, ensureSessionId]);
-
-	const { persistPreferences } = useAppPreferencesBootstrap({
-		manager,
-		setCurrentModelId,
-		setCurrentOpenRouterProviderTag,
-		setCurrentDevice,
-		setCurrentOutputDevice,
-		setInteractionMode,
-		setVoiceInteractionType,
-		setSpeechSpeed,
-		setReasoningEffort,
-		setBashApprovalLevel,
-		setShowFullReasoning,
-		setShowToolOutput,
-		setLoadedPreferences,
-		setOnboardingActive,
-		setOnboardingStep,
-		setPreferencesLoaded,
-	});
-
-	useAppAudioDevicesLoader({
-		preferencesLoaded,
-		showDeviceMenu,
-		onboardingStep,
-		setDevices,
-		setCurrentDevice,
-		setDeviceLoadTimedOut,
-	});
-
-	const conversationManager = useConversationManager({
-		conversationHistory,
-		sessionUsage,
-		currentSessionId,
-		ensureSessionId,
-		setCurrentSessionIdSafe,
-		currentSessionIdRef,
-		setSessions,
-		hydrateConversationHistory,
-		setCurrentTranscription,
-		setCurrentResponse,
-		clearCurrentContentBlocks,
-		clearReasoningState,
-		resetSessionUsage,
-		setSessionUsage,
-		currentUserInputRef,
-	});
-	const { clearConversationState, loadSessionById, startNewSession, undoLastTurn } = conversationManager;
-	const startNewSessionAndReset = useCallback(() => {
-		startNewSession();
-		applyAvatarForState(DaemonState.IDLE);
-	}, [startNewSession, applyAvatarForState]);
-
-	const {
-		handleDeviceSelect,
-		handleOutputDeviceSelect,
-		handleModelSelect,
-		handleProviderSelect,
-		toggleInteractionMode,
-		completeOnboarding,
-		handleApiKeySubmit,
-	} = useAppCallbacks({
-		currentModelId,
-		setCurrentModelId,
-		setCurrentDevice,
-		setCurrentOutputDevice,
-		setCurrentOpenRouterProviderTag,
-		setInteractionMode,
-		setVoiceInteractionType,
-		setSpeechSpeed,
-		setReasoningEffort,
-		persistPreferences,
-		loadedPreferences,
-		onboardingStep,
-		setOnboardingStep,
-		apiKeyTextareaRef,
-		setShowDeviceMenu,
-		setShowModelMenu,
-		setShowProviderMenu,
-		setShowSettingsMenu,
-		setShowSessionMenu,
-		setOnboardingActive,
-	});
-
-	const handleSessionSelect = useCallback(
-		(selectedIdx: number) => {
-			const item = sessionMenuItems[selectedIdx];
-			if (!item) return;
-			void loadSessionById(item.id);
-		},
-		[sessionMenuItems, loadSessionById]
-	);
-
-	const handleSessionDelete = useCallback(
-		(selectedIdx: number) => {
-			const item = sessionMenuItems[selectedIdx];
-			if (!item) return;
-
-			void (async () => {
-				await deleteSession(item.id);
-				setSessions((prev) => prev.filter((s) => s.id !== item.id));
-
-				if (currentSessionIdRef.current === item.id) {
-					clearConversationState();
-					setCurrentSessionIdSafe(null);
-					setResetNotification("SESSION DELETED");
-					setTimeout(() => setResetNotification(""), 2000);
-				}
-			})();
-		},
-		[sessionMenuItems, setSessions, currentSessionIdRef, clearConversationState, setCurrentSessionIdSafe]
-	);
-
-	useEffect(() => {
-		setGroundingSelectedIndex(0);
-	}, [currentSessionId]);
-
-	const keyboardActions = useMemo(
-		() => ({
-			setShowDeviceMenu,
-			setShowSettingsMenu,
-			setShowModelMenu,
-			setShowProviderMenu,
-			setShowSessionMenu,
-			setShowHotkeysPane,
-			setShowGroundingMenu,
-			setShowUrlMenu,
-			setTypingInput,
-			setCurrentTranscription,
-			setCurrentResponse,
-			setApiKeyMissingError,
-			setEscPendingCancel,
-			setShowFullReasoning,
-			setShowToolOutput,
-			persistPreferences,
-			clearReasoningState,
-			currentUserInputRef,
-			conversationScrollRef,
-			startNewSession: startNewSessionAndReset,
-			undoLastTurn,
-		}),
-		[
-			setShowDeviceMenu,
-			setShowSettingsMenu,
-			setShowModelMenu,
-			setShowProviderMenu,
-			setShowSessionMenu,
-			setShowHotkeysPane,
-			setShowGroundingMenu,
-			setShowUrlMenu,
-			setTypingInput,
-			setCurrentTranscription,
-			setCurrentResponse,
-			setApiKeyMissingError,
-			setEscPendingCancel,
-			setShowFullReasoning,
-			setShowToolOutput,
-			persistPreferences,
-			clearReasoningState,
-			currentUserInputRef,
-			conversationScrollRef,
-			startNewSessionAndReset,
-			undoLastTurn,
-		]
-	);
-
-	const hasInteracted =
-		conversationHistory.length > 0 || currentTranscription.length > 0 || currentContentBlocks.length > 0;
-
-	const { isOverlayOpen } = useOverlayController(
-		{
-			showDeviceMenu,
-			showSettingsMenu,
-			showModelMenu,
-			showProviderMenu,
-			showSessionMenu,
-			showHotkeysPane,
-			showGroundingMenu,
-			showUrlMenu,
-			onboardingActive,
-		},
-		{
-			setShowDeviceMenu,
-			setShowSettingsMenu,
-			setShowModelMenu,
-			setShowProviderMenu,
-			setShowSessionMenu,
-			setShowHotkeysPane,
-			setShowGroundingMenu,
-			setShowUrlMenu,
-		}
-	);
-
-	useDaemonKeyboard(
-		{
-			isOverlayOpen,
-			escPendingCancel,
-			hasInteracted,
-			hasGrounding,
-			showFullReasoning,
-			showToolOutput,
-		},
-		keyboardActions
-	);
-
-	const displayState = useAppDisplayState({
-		daemonState,
-		currentContentBlocks,
-		currentResponse,
-		reasoningDisplay,
-		reasoningQueue,
-		responseElapsedMs,
-		hasInteracted,
-		currentModelId,
-		modelMetadata,
-		preferencesLoaded,
-		currentSessionId,
-		sessionMenuItems,
-		terminalWidth: renderer.terminalWidth,
-		terminalHeight: renderer.terminalHeight,
-	});
-
-	const {
-		isToolCalling,
-		isReasoning,
-		statusText,
-		statusColor,
-		showWorkingSpinner,
-		workingSpinnerLabel,
-		modelName,
-		sessionTitle,
-		avatarWidth,
-		avatarHeight,
-		frostColor,
-		isListening,
-		isListeningDim,
-	} = displayState;
-
-	const statusBarHeight = hasInteracted ? (apiKeyMissingError ? 5 : 3) : 0;
-
-	useEffect(() => {
-		if (daemonState === DaemonState.IDLE) {
-			setEscPendingCancel(false);
-		}
-	}, [daemonState]);
-
-	const conversationDisplayState: ConversationDisplayState = {
-		conversationHistory,
-		currentTranscription,
-		currentResponse,
-		currentContentBlocks,
-	};
-
-	const statusDisplayState: StatusDisplayState = {
-		daemonState,
-		statusText,
-		statusColor,
-		apiKeyMissingError,
-		error,
-		resetNotification,
-		escPendingCancel,
-	};
-
-	const reasoningDisplayState: ReasoningDisplayState = {
-		showFullReasoning,
-		showToolOutput,
-		reasoningQueue,
-		reasoningDisplay,
-		fullReasoning,
-	};
-
-	const progressDisplayState: ProgressDisplayState = {
-		showWorkingSpinner,
-		workingSpinnerLabel,
-		isToolCalling,
-		responseElapsedMs,
-	};
-
-	const typingInputState: TypingInputState = {
-		typingTextareaRef,
-		conversationScrollRef,
-		onTypingContentChange: handleTypingContentChange,
-		onTypingSubmit: handleTypingSubmit,
-		onHistoryUp: handleHistoryUp,
-		onHistoryDown: handleHistoryDown,
-	};
-
-	const appContextValue = useAppContextBuilder({
-		menus: {
-			showDeviceMenu,
-			setShowDeviceMenu,
-			showSettingsMenu,
-			setShowSettingsMenu,
-			showModelMenu,
-			setShowModelMenu,
-			showProviderMenu,
-			setShowProviderMenu,
-			showSessionMenu,
-			setShowSessionMenu,
-			showHotkeysPane,
-			setShowHotkeysPane,
-			showGroundingMenu,
-			setShowGroundingMenu,
-			showUrlMenu,
-			setShowUrlMenu,
-		},
-		device: {
-			devices,
-			currentDevice,
-			setCurrentDevice,
-			currentOutputDevice,
-			setCurrentOutputDevice,
-			deviceLoadTimedOut,
-			soxAvailable,
-			soxInstallHint,
-		},
-		settings: {
-			interactionMode,
-			voiceInteractionType,
-			speechSpeed,
-			reasoningEffort,
-			bashApprovalLevel,
-			supportsReasoning,
-			canEnableVoiceOutput,
-			showFullReasoning,
-			setShowFullReasoning,
-			showToolOutput,
-			setShowToolOutput,
-			setBashApprovalLevel,
-			persistPreferences,
-		},
-		model: {
-			curatedModels: modelsWithPricing,
-			openRouterModels,
-			openRouterModelsLoading,
-			openRouterModelsUpdatedAt,
-			currentModelId,
-			setCurrentModelId,
-			providerMenuItems,
-			currentOpenRouterProviderTag,
-		},
-		session: {
-			sessionMenuItems,
-			currentSessionId,
-		},
-		grounding: {
-			latestGroundingMap,
-			groundingInitialIndex,
-			groundingSelectedIndex,
-			setGroundingSelectedIndex,
-		},
-		onboarding: {
-			onboardingActive,
-			onboardingStep,
-			setOnboardingStep,
-			onboardingPreferences: loadedPreferences,
-			apiKeyTextareaRef,
-		},
-		deviceCallbacks: {
-			onDeviceSelect: handleDeviceSelect,
-			onOutputDeviceSelect: handleOutputDeviceSelect,
-		},
-		settingsCallbacks: {
-			onToggleInteractionMode: toggleInteractionMode,
-			onSetVoiceInteractionType: setVoiceInteractionType,
-			onSetSpeechSpeed: setSpeechSpeed,
-			onSetReasoningEffort: setReasoningEffort,
-			onSetBashApprovalLevel: setBashApprovalLevel,
-		},
-		modelCallbacks: {
-			onModelSelect: handleModelSelect,
-			onModelRefresh: refreshOpenRouterModels,
-			onProviderSelect: handleProviderSelect,
-		},
-		sessionCallbacks: {
-			onSessionSelect: handleSessionSelect,
-			onSessionDelete: handleSessionDelete,
-		},
-		groundingCallbacks: {
-			onGroundingSelect,
-			onGroundingIndexChange,
-		},
-		onboardingCallbacks: {
-			onKeySubmit: handleApiKeySubmit,
-			completeOnboarding,
-		},
-	});
+	const controller = useAppController({ initialStatusTop: INITIAL_STATUS_TOP });
 
 	return (
 		<ToolApprovalProvider>
@@ -656,7 +52,7 @@ export function App() {
 				width="100%"
 				height="100%"
 				backgroundColor={COLORS.BACKGROUND}
-				onMouseUp={handleCopyOnSelectMouseUp}
+				onMouseUp={controller.handleCopyOnSelectMouseUp}
 			>
 				<>
 					<Toaster
@@ -668,18 +64,18 @@ export function App() {
 					/>
 
 					<AvatarLayer
-						avatarRef={avatarRef}
-						daemonState={daemonState}
-						applyAvatarForState={applyAvatarForState}
-						width={avatarWidth}
-						height={avatarHeight}
-						zIndex={isListening && hasInteracted ? 2 : 0}
+						avatarRef={controller.avatarLayerProps.avatarRef}
+						daemonState={controller.avatarLayerProps.daemonState}
+						applyAvatarForState={controller.avatarLayerProps.applyAvatarForState}
+						width={controller.avatarLayerProps.width}
+						height={controller.avatarLayerProps.height}
+						zIndex={controller.avatarLayerProps.zIndex}
 					/>
 
-					{isListeningDim ? (
+					{controller.isListeningDim ? (
 						<box
 							position="absolute"
-							top={statusBarHeight}
+							top={controller.listeningDimTop}
 							left={0}
 							width="100%"
 							height="100%"
@@ -688,31 +84,17 @@ export function App() {
 						/>
 					) : null}
 
-					<box flexDirection="column" width="100%" height="100%" zIndex={isListening ? 0 : 1}>
-						<ConversationPane
-							conversation={conversationDisplayState}
-							status={statusDisplayState}
-							reasoning={reasoningDisplayState}
-							progress={progressDisplayState}
-							typing={typingInputState}
-							sessionUsage={sessionUsage}
-							modelMetadata={modelMetadata}
-							hasInteracted={hasInteracted}
-							frostColor={frostColor}
-							initialStatusTop={INITIAL_STATUS_TOP}
-							hasGrounding={hasGrounding}
-							groundingCount={latestGroundingMap?.items.length}
-							modelName={modelName}
-							sessionTitle={sessionTitle}
-							isVoiceOutputEnabled={interactionMode === "voice"}
-						/>
+					<box
+						flexDirection="column"
+						width="100%"
+						height="100%"
+						zIndex={controller.conversationContainerZIndex}
+					>
+						<ConversationPane {...controller.conversationPaneProps} />
 					</box>
 
-					<AppProvider value={appContextValue}>
-						<AppOverlays
-							conversationHistory={conversationHistory}
-							currentContentBlocks={currentContentBlocks}
-						/>
+					<AppProvider value={controller.appContextValue}>
+						<AppOverlays {...controller.overlaysProps} />
 					</AppProvider>
 				</>
 			</box>