@makefinks/daemon 0.1.0

package/src/components/SessionMenu.tsx

@@ -0,0 +1,297 @@
+import type { ScrollBoxRenderable, TextareaRenderable } from "@opentui/core";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { SessionInfo } from "../types";
+import { useMenuKeyboard } from "../hooks/use-menu-keyboard";
+import { COLORS } from "../ui/constants";
+
+export interface SessionMenuItem extends SessionInfo {
+	isNew?: boolean;
+}
+
+interface SessionMenuProps {
+	items: SessionMenuItem[];
+	currentSessionId: string | null;
+	onClose: () => void;
+	onSelect: (index: number) => void;
+	onDelete: (index: number) => void;
+}
+
+const SESSION_ITEM_HEIGHT = 2;
+const MAX_SCROLLBOX_HEIGHT = 20;
+
+function formatTimestamp(value: string): string {
+	if (!value) return "";
+	return value.replace("T", " ").slice(0, 16);
+}
+
+export function SessionMenu({ items, currentSessionId, onClose, onSelect, onDelete }: SessionMenuProps) {
+	const [searchQuery, setSearchQuery] = useState("");
+	const [isSearchFocused, setIsSearchFocused] = useState(false);
+	const searchInputRef = useRef<TextareaRenderable | null>(null);
+
+	const filteredItems = useMemo(() => {
+		if (!searchQuery) return items;
+		const lowerQuery = searchQuery.toLowerCase();
+		return items.filter(
+			(item) => item.title.toLowerCase().includes(lowerQuery) || item.id.toLowerCase().includes(lowerQuery)
+		);
+	}, [items, searchQuery]);
+
+	const handleSelect = (filteredIndex: number) => {
+		const item = filteredItems[filteredIndex];
+		if (!item) return;
+		const originalIndex = items.indexOf(item);
+		if (originalIndex >= 0) {
+			onSelect(originalIndex);
+		}
+	};
+
+	const handleDelete = (filteredIndex: number) => {
+		const item = filteredItems[filteredIndex];
+		if (!item || item.isNew) return;
+		const originalIndex = items.indexOf(item);
+		if (originalIndex >= 0) {
+			onDelete(originalIndex);
+		}
+	};
+
+	const initialIndex = useMemo(() => {
+		if (filteredItems.length === 0) return 0;
+		if (!currentSessionId) return 0;
+		const idx = filteredItems.findIndex((item) => item.id === currentSessionId);
+		return idx >= 0 ? idx : 0;
+	}, [filteredItems, currentSessionId]);
+
+	const { selectedIndex } = useMenuKeyboard({
+		itemCount: filteredItems.length,
+		initialIndex,
+		onClose,
+		onSelect: handleSelect,
+		enableViKeys: !isSearchFocused,
+		ignoreEscape: isSearchFocused,
+	});
+
+	useKeyboard((key) => {
+		if (key.eventType !== "press") return;
+
+		if (!isSearchFocused && (key.name === "x" || key.sequence?.toLowerCase() === "x")) {
+			handleDelete(selectedIndex);
+			key.preventDefault();
+			return;
+		}
+
+		if ((key.name === "tab" && key.shift) || (!isSearchFocused && key.name === "/")) {
+			setIsSearchFocused(true);
+			searchInputRef.current?.focus();
+			key.preventDefault();
+		}
+	});
+
+	const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+	const scrollboxHeight = Math.min(
+		MAX_SCROLLBOX_HEIGHT,
+		Math.max(SESSION_ITEM_HEIGHT, filteredItems.length * SESSION_ITEM_HEIGHT)
+	);
+
+	useEffect(() => {
+		const scrollbox = scrollRef.current;
+		if (!scrollbox) return;
+		const viewportHeight = scrollbox.viewport?.height ?? 0;
+		if (viewportHeight <= 0) return;
+
+		const maxScrollTop = Math.max(0, scrollbox.scrollHeight - viewportHeight);
+		const itemTop = selectedIndex * SESSION_ITEM_HEIGHT;
+		const itemBottom = itemTop + SESSION_ITEM_HEIGHT;
+		const currentTop = scrollbox.scrollTop;
+		const currentBottom = currentTop + viewportHeight;
+		let nextTop = currentTop;
+
+		if (itemTop < currentTop) {
+			nextTop = itemTop;
+		} else if (itemBottom > currentBottom) {
+			nextTop = itemBottom - viewportHeight;
+		}
+
+		nextTop = Math.max(0, Math.min(nextTop, maxScrollTop));
+		if (nextTop !== currentTop) {
+			scrollbox.scrollTop = nextTop;
+		}
+	}, [filteredItems.length, selectedIndex]);
+
+	return (
+		<box
+			position="absolute"
+			left={0}
+			top={0}
+			width="100%"
+			height="100%"
+			flexDirection="column"
+			alignItems="center"
+			justifyContent="center"
+			zIndex={100}
+		>
+			<box
+				flexDirection="column"
+				alignItems="flex-start"
+				backgroundColor={COLORS.MENU_BG}
+				borderStyle="single"
+				borderColor={COLORS.MENU_BORDER}
+				paddingLeft={2}
+				paddingRight={2}
+				paddingTop={1}
+				paddingBottom={1}
+				width="70%"
+				minWidth={56}
+				maxWidth={130}
+			>
+				<box marginBottom={1}>
+					<text>
+						<span fg={COLORS.DAEMON_LABEL}>[ SESSIONS ]</span>
+					</text>
+				</box>
+
+				<box marginBottom={1}>
+					<text>
+						<span fg={COLORS.REASONING_DIM}>
+							↑/↓ j/k navigate · ENTER load · X delete · / search · ESC close
+						</span>
+					</text>
+				</box>
+
+				<box marginBottom={0}>
+					<text>
+						<span fg={COLORS.USER_LABEL}>— SEARCH —</span>
+					</text>
+				</box>
+
+				<box
+					marginBottom={1}
+					marginTop={0}
+					width="100%"
+					height={1}
+					flexDirection="row"
+					alignItems="center"
+					paddingLeft={1}
+					backgroundColor={isSearchFocused ? COLORS.MENU_SELECTED_BG : COLORS.MENU_BG}
+				>
+					<box width={2}>
+						<text>
+							<span fg={isSearchFocused ? COLORS.TYPING_PROMPT : COLORS.REASONING_DIM}>/ </span>
+						</text>
+					</box>
+					<box flexGrow={1} height={1}>
+						<textarea
+							ref={searchInputRef}
+							focused={isSearchFocused}
+							width="100%"
+							height={1}
+							placeholder="Type to filter... (/ or Shift+Tab)"
+							style={{
+								backgroundColor: "transparent",
+								focusedBackgroundColor: "transparent",
+								textColor: COLORS.MENU_TEXT,
+								focusedTextColor: COLORS.TYPING_PROMPT,
+								cursorColor: COLORS.TYPING_PROMPT,
+							}}
+							onContentChange={() => {
+								const text = searchInputRef.current?.plainText ?? "";
+								const cleaned = text.replace(/[\r\n]/g, "");
+								if (cleaned !== text) {
+									searchInputRef.current?.setText(cleaned);
+								}
+								setSearchQuery(cleaned);
+							}}
+							onKeyDown={(key) => {
+								if (key.eventType === "press") {
+									if (key.name === "escape") {
+										setIsSearchFocused(false);
+										key.preventDefault();
+									}
+									if (key.name === "return") {
+										key.preventDefault();
+									}
+								}
+							}}
+						/>
+					</box>
+				</box>
+
+				<box marginBottom={0}>
+					<text>
+						<span fg={COLORS.USER_LABEL}>— SESSIONS —</span>
+					</text>
+				</box>
+
+				{filteredItems.length === 0 ? (
+					<box marginTop={1} paddingLeft={1}>
+						<text>
+							<span fg={COLORS.REASONING_DIM}>No sessions found</span>
+						</text>
+					</box>
+				) : (
+					<scrollbox
+						ref={scrollRef}
+						height={scrollboxHeight}
+						alignSelf="flex-start"
+						focused={false}
+						scrollY={true}
+						scrollX={false}
+						style={{
+							rootOptions: { backgroundColor: COLORS.MENU_BG },
+							wrapperOptions: { backgroundColor: COLORS.MENU_BG },
+							viewportOptions: { backgroundColor: COLORS.MENU_BG },
+							contentOptions: { backgroundColor: COLORS.MENU_BG },
+						}}
+					>
+						<box flexDirection="column">
+							{filteredItems.map((item, idx) => {
+								const isSelected = idx === selectedIndex;
+								const isCurrent = !item.isNew && item.id === currentSessionId;
+
+								const labelColor = item.isNew
+									? isSelected
+										? COLORS.DAEMON_TEXT
+										: COLORS.DAEMON_TEXT
+									: isSelected
+										? COLORS.DAEMON_LABEL
+										: COLORS.MENU_TEXT;
+
+								const currentIndicatorColor = COLORS.TYPING_PROMPT;
+								const detailColor = COLORS.REASONING_DIM;
+								const detail = item.isNew
+									? "Start a fresh conversation"
+									: `Updated ${formatTimestamp(item.updatedAt)}`;
+
+								return (
+									<box
+										key={item.id}
+										backgroundColor={isSelected ? COLORS.MENU_SELECTED_BG : COLORS.MENU_BG}
+										paddingLeft={1}
+										paddingRight={1}
+										flexDirection="column"
+									>
+										<box>
+											<text>
+												<span fg={labelColor}>
+													{isSelected ? "▶ " : "  "}
+													{item.isNew ? "+ NEW SESSION" : item.title}
+												</span>
+												{isCurrent && <span fg={currentIndicatorColor}> ●</span>}
+											</text>
+										</box>
+										<box marginLeft={4}>
+											<text>
+												<span fg={detailColor}>{detail}</span>
+											</text>
+										</box>
+									</box>
+								);
+							})}
+						</box>
+					</scrollbox>
+				)}
+			</box>
+		</box>
+	);
+}

package/src/components/SettingsMenu.tsx

@@ -0,0 +1,291 @@
+import type { KeyEvent } from "@opentui/core";
+import { useKeyboard } from "@opentui/react";
+import { useEffect, useState } from "react";
+import type {
+	AppPreferences,
+	InteractionMode,
+	VoiceInteractionType,
+	SpeechSpeed,
+	ReasoningEffort,
+	BashApprovalLevel,
+} from "../types";
+import { REASONING_EFFORT_LABELS, BASH_APPROVAL_LABELS } from "../types";
+import { getDaemonManager } from "../state/daemon-state";
+import { handleSettingsMenuKey } from "../hooks/keyboard-handlers";
+import { COLORS } from "../ui/constants";
+
+interface SettingsMenuItem {
+	id: string;
+	label: string;
+	value?: string;
+	description?: string;
+	isToggle?: boolean;
+	isCyclic?: boolean;
+	isHeader?: boolean;
+	disabled?: boolean;
+}
+
+interface SettingsMenuProps {
+	interactionMode: InteractionMode;
+	voiceInteractionType: VoiceInteractionType;
+	speechSpeed: SpeechSpeed;
+	reasoningEffort: ReasoningEffort;
+	bashApprovalLevel: BashApprovalLevel;
+	supportsReasoning: boolean;
+	canEnableVoiceOutput: boolean;
+	showFullReasoning: boolean;
+	showToolOutput: boolean;
+	onClose: () => void;
+	toggleInteractionMode: () => void;
+	setVoiceInteractionType: (type: VoiceInteractionType) => void;
+	setSpeechSpeed: (speed: SpeechSpeed) => void;
+	setReasoningEffort: (effort: ReasoningEffort) => void;
+	setBashApprovalLevel: (level: BashApprovalLevel) => void;
+	setShowFullReasoning: (show: boolean) => void;
+	setShowToolOutput: (show: boolean) => void;
+	persistPreferences: (updates: Partial<AppPreferences>) => void;
+}
+
+export function SettingsMenu({
+	interactionMode,
+	voiceInteractionType,
+	speechSpeed,
+	reasoningEffort,
+	bashApprovalLevel,
+	supportsReasoning,
+	canEnableVoiceOutput,
+	showFullReasoning,
+	showToolOutput,
+	onClose,
+	toggleInteractionMode,
+	setVoiceInteractionType,
+	setSpeechSpeed,
+	setReasoningEffort,
+	setBashApprovalLevel,
+	setShowFullReasoning,
+	setShowToolOutput,
+	persistPreferences,
+}: SettingsMenuProps) {
+	const [selectedIdx, setSelectedIdx] = useState(0);
+	const manager = getDaemonManager();
+	const interactionModeLocked = !canEnableVoiceOutput && interactionMode === "text";
+	const interactionModeDescription = interactionModeLocked
+		? "[LOCKED] OpenAI key required for voice output"
+		: interactionMode === "voice"
+			? "Conversational responses and speech output"
+			: "Markdown responses for terminal";
+
+	const items: SettingsMenuItem[] = [
+		{
+			id: "header-core",
+			label: "CORE SYSTEMS",
+			isHeader: true,
+		},
+		{
+			id: "interaction-mode",
+			label: "Interaction Mode",
+			value: interactionMode === "voice" ? "VOICE" : "TEXT",
+			description: interactionModeDescription,
+			isToggle: true,
+			disabled: interactionModeLocked,
+		},
+		{
+			id: "voice-interaction-type",
+			label: "Voice Flow",
+			value: voiceInteractionType === "direct" ? "DIRECT" : "REVIEW",
+			description:
+				voiceInteractionType === "direct"
+					? "Send transcript immediately"
+					: "Review/Edit trasncript before sending",
+			isToggle: true,
+		},
+		{
+			id: "reasoning-effort",
+			label: "Reasoning Effort",
+			value: supportsReasoning ? REASONING_EFFORT_LABELS[reasoningEffort] : "N/A",
+			description: supportsReasoning
+				? "Depth of reasoning (LOW / MEDIUM / HIGH)"
+				: "Not supported by current model",
+			isCyclic: supportsReasoning,
+		},
+		{
+			id: "bash-approvals",
+			label: "Bash Approvals",
+			value: BASH_APPROVAL_LABELS[bashApprovalLevel],
+			description: "Require approval for bash commands (NONE / DANGEROUS / ALL)",
+			isCyclic: true,
+		},
+	];
+
+	if (interactionMode === "voice") {
+		items.push(
+			{
+				id: "header-audio",
+				label: "AUDIO PARAMETERS",
+				isHeader: true,
+			},
+			{
+				id: "speech-speed",
+				label: "Speech Speed",
+				value: `${speechSpeed.toFixed(2)}x`,
+				description: "Adjust speech rate (1.0x - 2.0x)",
+				isCyclic: true,
+			}
+		);
+	}
+
+	items.push(
+		{
+			id: "header-display",
+			label: "DISPLAY",
+			isHeader: true,
+		},
+		{
+			id: "show-full-reasoning",
+			label: "Full Reasoning",
+			value: showFullReasoning ? "ON" : "OFF",
+			description: "Show full reasoning blocks (hotkey: T)",
+			isToggle: true,
+		},
+		{
+			id: "show-tool-output",
+			label: "Tool Output",
+			value: showToolOutput ? "ON" : "OFF",
+			description: "Show tool output previews (hotkey: O)",
+			isToggle: true,
+		}
+	);
+
+	// Filter out headers for selection logic
+	const selectableItems = items.filter((item) => !item.isHeader);
+	const selectableCount = selectableItems.length;
+
+	useEffect(() => {
+		if (selectableCount === 0) {
+			setSelectedIdx(0);
+			return;
+		}
+		setSelectedIdx((prev) => (prev >= selectableCount ? selectableCount - 1 : prev));
+	}, [selectableCount]);
+
+	useKeyboard((key: KeyEvent) => {
+		handleSettingsMenuKey(key, {
+			selectedIdx,
+			menuItemCount: selectableCount,
+			interactionMode,
+			voiceInteractionType,
+			speechSpeed,
+			reasoningEffort,
+			bashApprovalLevel,
+			supportsReasoning,
+			canEnableVoiceOutput,
+			showFullReasoning,
+			showToolOutput,
+			setSelectedIdx,
+			toggleInteractionMode,
+			setVoiceInteractionType,
+			setSpeechSpeed,
+			setReasoningEffort,
+			setBashApprovalLevel,
+			setShowFullReasoning,
+			setShowToolOutput,
+			persistPreferences,
+			onClose,
+			manager,
+		});
+	});
+
+	return (
+		<box
+			position="absolute"
+			left={0}
+			top={0}
+			width="100%"
+			height="100%"
+			flexDirection="column"
+			alignItems="center"
+			justifyContent="center"
+			zIndex={100}
+		>
+			<box
+				flexDirection="column"
+				backgroundColor={COLORS.MENU_BG}
+				borderStyle="single"
+				borderColor={COLORS.MENU_BORDER}
+				paddingLeft={2}
+				paddingRight={2}
+				paddingTop={1}
+				paddingBottom={1}
+				width="60%"
+				minWidth={50}
+				maxWidth={130}
+			>
+				<box marginBottom={1}>
+					<text>
+						<span fg={COLORS.DAEMON_LABEL}>[ SETTINGS ]</span>
+					</text>
+				</box>
+				<box marginBottom={1}>
+					<text>
+						<span fg={COLORS.USER_LABEL}>↑/↓ or j/k to navigate, ENTER to cycle, ESC to close</span>
+					</text>
+				</box>
+				<box flexDirection="column">
+					{items.map((item) => {
+						if (item.isHeader) {
+							return (
+								<box key={item.id} marginTop={1} marginBottom={0}>
+									<text>
+										<span fg={COLORS.USER_LABEL}>— {item.label} —</span>
+									</text>
+								</box>
+							);
+						}
+
+						const selectableIdx = selectableItems.indexOf(item);
+						const isSelected = selectableIdx === selectedIdx;
+						const labelColor = item.disabled
+							? COLORS.REASONING_DIM
+							: isSelected
+								? COLORS.DAEMON_LABEL
+								: COLORS.MENU_TEXT;
+						const valueColor = item.disabled
+							? COLORS.REASONING_DIM
+							: item.value === "VOICE"
+								? COLORS.DAEMON_LABEL
+								: COLORS.DAEMON_TEXT;
+
+						return (
+							<box
+								key={item.id}
+								backgroundColor={isSelected ? COLORS.MENU_SELECTED_BG : COLORS.MENU_BG}
+								paddingLeft={1}
+								paddingRight={1}
+								flexDirection="column"
+							>
+								<box>
+									<text>
+										<span fg={labelColor}>
+											{isSelected ? "▶ " : "  "}
+											{item.label}:{" "}
+										</span>
+										<span fg={valueColor}>{item.value}</span>
+										{item.isToggle && !item.disabled && <span fg={COLORS.USER_LABEL}></span>}
+										{item.isCyclic && !item.disabled && <span fg={COLORS.USER_LABEL}></span>}
+									</text>
+								</box>
+								{item.description && (
+									<box marginLeft={4}>
+										<text>
+											<span fg={COLORS.REASONING_DIM}>{item.description}</span>
+										</text>
+									</box>
+								)}
+							</box>
+						);
+					})}
+				</box>
+			</box>
+		</box>
+	);
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,126 @@
+/**
+ * Status bar component that displays the current daemon state.
+ */
+
+import { COLORS } from "../ui/constants";
+
+const SESSION_TITLE_MAX_LENGTH = 40;
+
+// Matches default timestamp titles: "Session 2025-12-30 20:53"
+const DEFAULT_TITLE_PATTERN = /^Session \d{4}-\d{2}-\d{2} \d{2}:\d{2}$/;
+
+function isDefaultSessionTitle(title: string): boolean {
+	return DEFAULT_TITLE_PATTERN.test(title);
+}
+
+function truncateWithEllipsis(text: string, maxLength: number): string {
+	if (text.length <= maxLength) return text;
+	return text.slice(0, maxLength - 1) + "…";
+}
+
+interface StatusBarProps {
+	statusText: string;
+	statusColor: string;
+	errorText?: string;
+	modelName?: string;
+	sessionTitle?: string;
+	hasInteracted?: boolean;
+}
+
+export function StatusBar({
+	statusText,
+	statusColor,
+	errorText,
+	modelName,
+	sessionTitle,
+	hasInteracted,
+}: StatusBarProps) {
+	if (hasInteracted) {
+		const showTitleSpinner = sessionTitle && isDefaultSessionTitle(sessionTitle);
+		const displayTitle =
+			sessionTitle && !showTitleSpinner ? truncateWithEllipsis(sessionTitle, SESSION_TITLE_MAX_LENGTH) : null;
+
+		return (
+			<box
+				width="100%"
+				flexShrink={0}
+				flexDirection="column"
+				borderStyle="single"
+				borderColor={COLORS.STATUS_BORDER}
+				paddingTop={0}
+				paddingLeft={1}
+				paddingRight={1}
+			>
+				<box width="100%" flexDirection="row" justifyContent="center" alignItems="center">
+					<box position="absolute" left={0} top={0}>
+						{modelName && (
+							<text>
+								<span fg={COLORS.STATUS_BORDER}>{modelName}</span>
+							</text>
+						)}
+					</box>
+
+					<text>
+						<span fg={statusColor}>{statusText}</span>
+					</text>
+
+					<box position="absolute" right={0} top={0} flexDirection="row">
+						{showTitleSpinner && (
+							<>
+								<spinner name="dots" color={COLORS.STATUS_BORDER} />
+								<text marginLeft={1}>
+									<span fg={COLORS.STATUS_BORDER}>title generating...</span>
+								</text>
+							</>
+						)}
+						{displayTitle && (
+							<text>
+								<span fg={COLORS.STATUS_BORDER}>{displayTitle}</span>
+							</text>
+						)}
+					</box>
+				</box>
+
+				{errorText && (
+					<box width="100%" flexDirection="row" justifyContent="center" alignItems="center" marginTop={1}>
+						<text>
+							<span fg={COLORS.DAEMON_ERROR}>{errorText}</span>
+						</text>
+					</box>
+				)}
+			</box>
+		);
+	}
+
+	return (
+		<box
+			width="100%"
+			flexShrink={0}
+			flexDirection="column"
+			alignItems="center"
+			borderStyle="single"
+			borderColor={COLORS.STATUS_BORDER}
+			title={modelName}
+			titleAlignment="center"
+			paddingTop={0}
+			paddingLeft={1}
+			paddingRight={1}
+		>
+			{/* Main status text */}
+			<box width="100%" flexDirection="row" justifyContent="center" alignItems="center">
+				<text>
+					<span fg={statusColor}>{statusText}</span>
+				</text>
+			</box>
+
+			{/* Error text if present */}
+			{errorText && (
+				<box width="100%" flexDirection="row" justifyContent="center" alignItems="center" marginTop={1}>
+					<text>
+						<span fg={COLORS.DAEMON_ERROR}>{errorText}</span>
+					</text>
+				</box>
+			)}
+		</box>
+	);
+}