@makefinks/daemon 0.1.0

package/src/app/components/AppOverlays.tsx

@@ -0,0 +1,131 @@
+import { memo } from "react";
+import { DeviceMenu } from "../../components/DeviceMenu";
+import { GroundingMenu } from "../../components/GroundingMenu";
+import { HotkeysPane } from "../../components/HotkeysPane";
+import { ModelMenu } from "../../components/ModelMenu";
+import { OnboardingOverlay } from "../../components/OnboardingOverlay";
+import { ProviderMenu } from "../../components/ProviderMenu";
+import { SessionMenu } from "../../components/SessionMenu";
+import { SettingsMenu } from "../../components/SettingsMenu";
+import { useAppContext } from "../../state/app-context";
+
+function AppOverlaysImpl() {
+	const ctx = useAppContext();
+	const { menus, device, settings, model, session, grounding, onboarding } = ctx;
+	const {
+		deviceCallbacks,
+		settingsCallbacks,
+		modelCallbacks,
+		sessionCallbacks,
+		groundingCallbacks,
+		onboardingCallbacks,
+	} = ctx;
+
+	return (
+		<>
+			{menus.showDeviceMenu && (
+				<DeviceMenu
+					devices={device.devices}
+					currentDevice={device.currentDevice}
+					currentOutputDevice={device.currentOutputDevice}
+					soxAvailable={device.soxAvailable}
+					soxInstallHint={device.soxInstallHint}
+					onClose={() => menus.setShowDeviceMenu(false)}
+					onSelect={deviceCallbacks.onDeviceSelect}
+					onOutputSelect={deviceCallbacks.onOutputDeviceSelect}
+				/>
+			)}
+
+			{menus.showSettingsMenu && (
+				<SettingsMenu
+					interactionMode={settings.interactionMode}
+					voiceInteractionType={settings.voiceInteractionType}
+					speechSpeed={settings.speechSpeed}
+					reasoningEffort={settings.reasoningEffort}
+					bashApprovalLevel={settings.bashApprovalLevel}
+					supportsReasoning={settings.supportsReasoning}
+					canEnableVoiceOutput={settings.canEnableVoiceOutput}
+					showFullReasoning={settings.showFullReasoning}
+					showToolOutput={settings.showToolOutput}
+					onClose={() => menus.setShowSettingsMenu(false)}
+					toggleInteractionMode={settingsCallbacks.onToggleInteractionMode}
+					setVoiceInteractionType={settingsCallbacks.onSetVoiceInteractionType}
+					setSpeechSpeed={settingsCallbacks.onSetSpeechSpeed}
+					setReasoningEffort={settingsCallbacks.onSetReasoningEffort}
+					setBashApprovalLevel={settingsCallbacks.onSetBashApprovalLevel}
+					setShowFullReasoning={settings.setShowFullReasoning}
+					setShowToolOutput={settings.setShowToolOutput}
+					persistPreferences={settings.persistPreferences}
+				/>
+			)}
+
+			{menus.showModelMenu && (
+				<ModelMenu
+					curatedModels={model.curatedModels}
+					allModels={model.openRouterModels}
+					allModelsLoading={model.openRouterModelsLoading}
+					allModelsUpdatedAt={model.openRouterModelsUpdatedAt}
+					currentModelId={model.currentModelId}
+					onClose={() => menus.setShowModelMenu(false)}
+					onSelect={modelCallbacks.onModelSelect}
+					onRefreshAllModels={modelCallbacks.onModelRefresh}
+				/>
+			)}
+
+			{menus.showProviderMenu && (
+				<ProviderMenu
+					items={model.providerMenuItems}
+					currentProviderTag={model.currentOpenRouterProviderTag}
+					modelId={model.currentModelId}
+					onClose={() => menus.setShowProviderMenu(false)}
+					onSelect={modelCallbacks.onProviderSelect}
+				/>
+			)}
+
+			{menus.showSessionMenu && (
+				<SessionMenu
+					items={session.sessionMenuItems}
+					currentSessionId={session.currentSessionId}
+					onClose={() => menus.setShowSessionMenu(false)}
+					onSelect={sessionCallbacks.onSessionSelect}
+					onDelete={sessionCallbacks.onSessionDelete}
+				/>
+			)}
+
+			{menus.showHotkeysPane && <HotkeysPane onClose={() => menus.setShowHotkeysPane(false)} />}
+
+			{menus.showGroundingMenu && grounding.latestGroundingMap && (
+				<GroundingMenu
+					groundingMap={grounding.latestGroundingMap}
+					initialIndex={grounding.groundingInitialIndex}
+					onClose={() => menus.setShowGroundingMenu(false)}
+					onSelect={groundingCallbacks.onGroundingSelect}
+					onSelectedIndexChange={groundingCallbacks.onGroundingIndexChange}
+				/>
+			)}
+
+			{onboarding.onboardingActive && (
+				<OnboardingOverlay
+					step={onboarding.onboardingStep}
+					preferences={onboarding.onboardingPreferences}
+					devices={device.devices}
+					currentDevice={device.currentDevice}
+					currentOutputDevice={device.currentOutputDevice}
+					models={model.curatedModels}
+					currentModelId={model.currentModelId}
+					deviceLoadTimedOut={device.deviceLoadTimedOut}
+					setCurrentDevice={device.setCurrentDevice}
+					setCurrentOutputDevice={device.setCurrentOutputDevice}
+					setCurrentModelId={model.setCurrentModelId}
+					setOnboardingStep={onboarding.setOnboardingStep}
+					completeOnboarding={onboardingCallbacks.completeOnboarding}
+					persistPreferences={settings.persistPreferences}
+					onKeySubmit={onboardingCallbacks.onKeySubmit}
+					apiKeyTextareaRef={onboarding.apiKeyTextareaRef}
+				/>
+			)}
+		</>
+	);
+}
+
+export const AppOverlays = memo(AppOverlaysImpl);

package/src/app/components/AvatarLayer.tsx

@@ -0,0 +1,51 @@
+import { memo, useCallback } from "react";
+import type { RefObject } from "react";
+import type { DaemonAvatarRenderable } from "../../avatar/DaemonAvatarRenderable";
+import { DaemonState } from "../../types";
+
+export interface AvatarLayerProps {
+	avatarRef: RefObject<DaemonAvatarRenderable | null>;
+	daemonState: DaemonState;
+	applyAvatarForState: (state: DaemonState) => void;
+	width: number;
+	height: number;
+	zIndex?: number;
+}
+
+function AvatarLayerImpl(props: AvatarLayerProps) {
+	const { avatarRef, daemonState, applyAvatarForState, width, height, zIndex = 0 } = props;
+
+	const handleAvatarRef = useCallback(
+		(ref: DaemonAvatarRenderable | null) => {
+			avatarRef.current = ref;
+			if (ref) {
+				applyAvatarForState(daemonState);
+			}
+		},
+		[avatarRef, applyAvatarForState, daemonState]
+	);
+
+	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>
+	);
+}
+
+export const AvatarLayer = memo(AvatarLayerImpl);

package/src/app/components/ConversationPane.tsx

@@ -0,0 +1,476 @@
+import type { ScrollBoxRenderable, TextareaRenderable } from "@opentui/core";
+import { memo } from "react";
+import type { MutableRefObject } from "react";
+import {
+	ContentBlockView,
+	isLastReasoningBlockInList,
+	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";
+import { TokenUsageDisplay } from "../../components/TokenUsageDisplay";
+import { TypingInputBar } from "../../components/TypingInputBar";
+import type { ContentBlock, ConversationMessage, TokenUsage } from "../../types";
+import { DaemonState } from "../../types";
+import { COLORS, REASONING_MARKDOWN_STYLE } from "../../ui/constants";
+import type { ModelMetadata } from "../../utils/model-metadata";
+
+export interface ConversationDisplayState {
+	conversationHistory: ConversationMessage[];
+	currentTranscription: string;
+	currentResponse: string;
+	currentContentBlocks: ContentBlock[];
+}
+
+export interface StatusDisplayState {
+	daemonState: DaemonState;
+	statusText: string;
+	statusColor: string;
+	apiKeyMissingError: string;
+	error: string;
+	resetNotification: string;
+	escPendingCancel: boolean;
+}
+
+export interface ReasoningDisplayState {
+	showFullReasoning: boolean;
+	showToolOutput: boolean;
+	reasoningQueue: string;
+	reasoningDisplay: string;
+	fullReasoning: string;
+}
+
+export interface ProgressDisplayState {
+	showWorkingSpinner: boolean;
+	workingSpinnerLabel: string;
+	isToolCalling: boolean;
+	responseElapsedMs: number;
+}
+
+export interface TypingInputState {
+	typingTextareaRef: MutableRefObject<TextareaRenderable | null>;
+	conversationScrollRef: MutableRefObject<ScrollBoxRenderable | null>;
+	onTypingContentChange: (value: string) => void;
+	onTypingSubmit: () => void;
+	onHistoryUp?: () => void;
+	onHistoryDown?: () => void;
+}
+
+export interface ConversationPaneProps {
+	conversation: ConversationDisplayState;
+	status: StatusDisplayState;
+	reasoning: ReasoningDisplayState;
+	progress: ProgressDisplayState;
+	typing: TypingInputState;
+	sessionUsage: TokenUsage;
+	modelMetadata: ModelMetadata | null;
+	hasInteracted: boolean;
+	suppressStatusBar?: boolean;
+	frostColor: string;
+	initialStatusTop: number | "auto" | `${number}%`;
+	hasGrounding?: boolean;
+	groundingCount?: number;
+	modelName?: string;
+	sessionTitle?: string;
+	isVoiceOutputEnabled?: boolean;
+}
+
+function ConversationPaneImpl(props: ConversationPaneProps) {
+	const {
+		conversation,
+		status,
+		reasoning,
+		progress,
+		typing,
+		sessionUsage,
+		modelMetadata,
+		hasInteracted,
+		suppressStatusBar = false,
+		frostColor,
+		initialStatusTop,
+		hasGrounding,
+		groundingCount,
+		modelName,
+		sessionTitle,
+		isVoiceOutputEnabled,
+	} = props;
+
+	const { conversationHistory, currentTranscription, currentContentBlocks } = conversation;
+	const {
+		daemonState,
+		statusText,
+		statusColor,
+		apiKeyMissingError,
+		error,
+		resetNotification,
+		escPendingCancel,
+	} = status;
+	const { showFullReasoning, showToolOutput, reasoningQueue, reasoningDisplay, fullReasoning } = reasoning;
+	const { showWorkingSpinner, isToolCalling, responseElapsedMs } = progress;
+	const {
+		typingTextareaRef,
+		conversationScrollRef,
+		onTypingContentChange,
+		onTypingSubmit,
+		onHistoryUp,
+		onHistoryDown,
+	} = typing;
+
+	const showSessionDebug = Boolean(process.env.DEBUG_SESSION);
+
+	const renderHistoryBlock = (block: ContentBlock, idx: number, blocks: ContentBlock[]) => {
+		if (shouldHideContentBlock(block)) {
+			return null;
+		}
+
+		let nextBlock: ContentBlock | undefined;
+		for (let i = idx + 1; i < blocks.length; i++) {
+			const b = blocks[i];
+			if (b && !shouldHideContentBlock(b)) {
+				nextBlock = b;
+				break;
+			}
+		}
+
+		const isTool = block.type === "tool";
+		const isNextTool = nextBlock?.type === "tool";
+		const marginBottom = isTool && isNextTool ? 0 : 1;
+
+		return (
+			<box key={idx} flexDirection="column" marginBottom={marginBottom}>
+				<ContentBlockView
+					block={block}
+					isLastReasoningBlock={isLastReasoningBlockInList(blocks, block)}
+					isLastTextBlock={isLastTextBlockInList(blocks, block)}
+					isLastBlock={idx === blocks.length - 1}
+					isStreaming={false}
+					showFullReasoning={showFullReasoning}
+					showToolOutput={showToolOutput}
+				/>
+			</box>
+		);
+	};
+
+	const renderMessageDebug = (msg: ConversationMessage) => {
+		if (!showSessionDebug) return null;
+		const roles = msg.messages?.map((m) => m.role).join(",") ?? "none";
+		const pendingLabel = msg.pending ? " · pending" : "";
+		return (
+			<box marginBottom={1}>
+				<text>
+					<span fg={COLORS.REASONING_DIM}>
+						#id:{msg.id} · type:{msg.type} · roles:{roles} · blocks:
+						{msg.contentBlocks?.length ?? 0}
+						{pendingLabel}
+					</span>
+				</text>
+			</box>
+		);
+	};
+
+	const showTypingInput = hasInteracted && daemonState === DaemonState.TYPING;
+	const isReasoning =
+		daemonState === DaemonState.RESPONDING &&
+		(!conversation.currentResponse || !!reasoningDisplay || !!reasoningQueue);
+
+	return (
+		<>
+			{hasInteracted && !suppressStatusBar && (
+				<StatusBar
+					statusText={statusText}
+					statusColor={statusColor}
+					errorText={apiKeyMissingError || error}
+					modelName={modelName}
+					sessionTitle={sessionTitle}
+					hasInteracted={hasInteracted}
+				/>
+			)}
+
+			{!hasInteracted && (
+				<box
+					position="absolute"
+					left={0}
+					top={initialStatusTop}
+					width="100%"
+					alignItems="center"
+					justifyContent="center"
+					zIndex={2}
+				>
+					<box flexDirection="column" alignItems="center">
+						<StatusBar
+							statusText={statusText}
+							statusColor={statusColor}
+							errorText={apiKeyMissingError || error}
+							modelName={modelName}
+						/>
+
+						{isVoiceOutputEnabled && daemonState === DaemonState.IDLE && (
+							<box marginTop={1}>
+								<text>
+									<span fg={COLORS.REASONING_DIM}>◉ voice output active</span>
+								</text>
+							</box>
+						)}
+
+						<box marginTop={2} width="100%" justifyContent="center">
+							{daemonState === DaemonState.TYPING ? (
+								<TypingInputBar
+									onContentChange={onTypingContentChange}
+									onSubmit={onTypingSubmit}
+									onHistoryUp={onHistoryUp}
+									onHistoryDown={onHistoryDown}
+									textareaRef={typingTextareaRef}
+									placeholder="Enter instructions..."
+									width="75%"
+									maxWidth={140}
+									minWidth={55}
+									height={5}
+								/>
+							) : (
+								<></>
+							)}
+						</box>
+					</box>
+				</box>
+			)}
+
+			{hasInteracted &&
+				(sessionUsage.totalTokens > 0 ||
+					(sessionUsage.subagentTotalTokens ?? 0) > 0 ||
+					typeof sessionUsage.cost === "number") && (
+					<TokenUsageDisplay usage={sessionUsage} modelMetadata={modelMetadata} />
+				)}
+
+			{hasInteracted && resetNotification && (
+				<box
+					height={1}
+					width="100%"
+					flexShrink={0}
+					flexDirection="row"
+					justifyContent="center"
+					alignItems="center"
+					marginTop={1}
+				>
+					<text>
+						<span fg={COLORS.REASONING}>[ {resetNotification} ]</span>
+					</text>
+				</box>
+			)}
+
+			{hasInteracted && escPendingCancel && (
+				<box
+					height={1}
+					width="100%"
+					flexShrink={0}
+					flexDirection="row"
+					justifyContent="center"
+					alignItems="center"
+				>
+					<text>
+						<span fg={COLORS.ERROR}>[ Press ESC again to cancel ]</span>
+					</text>
+				</box>
+			)}
+
+			{hasInteracted && (
+				<scrollbox
+					flexGrow={1}
+					flexShrink={1}
+					focused={false}
+					stickyScroll={true}
+					stickyStart="bottom"
+					ref={conversationScrollRef}
+					style={{
+						rootOptions: { backgroundColor: frostColor },
+						contentOptions: {
+							backgroundColor: frostColor,
+							paddingLeft: 2,
+							paddingRight: 2,
+						},
+					}}
+				>
+					<box
+						flexDirection="column"
+						paddingTop={1}
+						paddingBottom={2}
+						width="100%"
+						backgroundColor={frostColor}
+					>
+						{conversationHistory.map((msg: ConversationMessage) => (
+							<box key={msg.id} flexDirection="column">
+								{msg.type === "user" ? (
+									<box
+										marginBottom={1}
+										paddingLeft={2}
+										paddingRight={2}
+										paddingTop={1}
+										paddingBottom={1}
+										backgroundColor={COLORS.USER_BG}
+										width="100%"
+									>
+										<>
+											{renderMessageDebug(msg)}
+											<text>
+												<span fg={COLORS.USER_LABEL}>YOU: </span>
+												<span fg={COLORS.USER_TEXT}>{msg.content}</span>
+											</text>
+										</>
+									</box>
+								) : msg.contentBlocks && msg.contentBlocks.length > 0 ? (
+									<>
+										{renderMessageDebug(msg)}
+										{msg.contentBlocks.map((block, idx) =>
+											renderHistoryBlock(block, idx, msg.contentBlocks!)
+										)}
+									</>
+								) : null}
+							</box>
+						))}
+
+						{currentTranscription && (
+							<box
+								marginBottom={1}
+								paddingLeft={2}
+								paddingRight={2}
+								paddingTop={1}
+								paddingBottom={1}
+								backgroundColor={COLORS.USER_BG}
+								width="100%"
+							>
+								<text>
+									<span fg={COLORS.USER_LABEL}>YOU: </span>
+									<span fg={COLORS.USER_TEXT}>{currentTranscription}</span>
+								</text>
+							</box>
+						)}
+
+						{currentContentBlocks.length > 0 && (
+							<box flexDirection="column">
+								{currentContentBlocks.map((block, idx) => {
+									if (shouldHideContentBlock(block)) {
+										return null;
+									}
+
+									let nextBlock: ContentBlock | undefined;
+									for (let i = idx + 1; i < currentContentBlocks.length; i++) {
+										const b = currentContentBlocks[i];
+										if (b && !shouldHideContentBlock(b)) {
+											nextBlock = b;
+											break;
+										}
+									}
+
+									const isLastBlock = idx === currentContentBlocks.length - 1;
+									const isLastText = isLastTextBlockInList(currentContentBlocks, block);
+									const isLastReasoning = isLastReasoningBlockInList(currentContentBlocks, block);
+									const isStreaming =
+										daemonState === DaemonState.RESPONDING &&
+										isLastBlock &&
+										(block.type === "text" || block.type === "reasoning");
+
+									const hasReasoningContent = !!(reasoningQueue || reasoningDisplay);
+
+									const isTool = block.type === "tool";
+									const isNextTool = nextBlock?.type === "tool";
+									const marginBottom = isTool && isNextTool ? 0 : 1;
+
+									return (
+										<box key={idx} flexDirection="column" marginBottom={marginBottom}>
+											<ContentBlockView
+												block={block}
+												isLastReasoningBlock={isLastReasoning}
+												isLastTextBlock={isLastText}
+												isLastBlock={isLastBlock}
+												isStreaming={isStreaming}
+												showFullReasoning={showFullReasoning}
+												showToolOutput={showToolOutput}
+												reasoningDisplay={reasoningDisplay}
+												showReasoningTicker={hasReasoningContent}
+											/>
+										</box>
+									);
+								})}
+							</box>
+						)}
+
+						{currentContentBlocks.length === 0 && (reasoningDisplay || reasoningQueue) && (
+							<box marginBottom={1}>
+								{showFullReasoning && fullReasoning ? (
+									<box
+										flexDirection="column"
+										border={["left"]}
+										borderStyle="heavy"
+										borderColor={COLORS.REASONING_DIM}
+										paddingLeft={1}
+									>
+										<text>
+											<span fg={COLORS.REASONING}>{"REASONING"}</span>
+										</text>
+										<code
+											content={fullReasoning}
+											filetype="markdown"
+											syntaxStyle={REASONING_MARKDOWN_STYLE}
+											streaming={true}
+											drawUnstyledText={false}
+										/>
+									</box>
+								) : reasoningDisplay ? (
+									<text>
+										<span fg={COLORS.REASONING_DIM}>
+											{"⟡ "}
+											{reasoningDisplay}
+										</span>
+									</text>
+								) : null}
+							</box>
+						)}
+
+						{hasGrounding && groundingCount && daemonState === DaemonState.IDLE && (
+							<GroundingBadge count={groundingCount} />
+						)}
+
+						{showWorkingSpinner && (
+							<InlineStatusIndicator
+								daemonState={daemonState}
+								isToolCalling={isToolCalling}
+								isReasoning={isReasoning}
+								responseElapsedMs={responseElapsedMs}
+							/>
+						)}
+
+						{isReasoning && <box height={0} />}
+					</box>
+				</scrollbox>
+			)}
+
+			{showTypingInput && (
+				<box
+					flexShrink={0}
+					marginTop={1}
+					marginBottom={1}
+					width="100%"
+					justifyContent="center"
+					alignItems="center"
+				>
+					<TypingInputBar
+						onContentChange={onTypingContentChange}
+						onSubmit={onTypingSubmit}
+						onHistoryUp={onHistoryUp}
+						onHistoryDown={onHistoryDown}
+						textareaRef={typingTextareaRef}
+						placeholder="Enter instructions..."
+						height={4}
+						width="92%"
+						maxWidth={170}
+						minWidth={80}
+					/>
+				</box>
+			)}
+		</>
+	);
+}
+
+export const ConversationPane = memo(ConversationPaneImpl);