@makefinks/daemon 0.1.0

package/src/components/DeviceMenu.tsx

@@ -0,0 +1,166 @@
+import { useMemo } from "react";
+import { useMenuKeyboard } from "../hooks/use-menu-keyboard";
+import type { AudioDevice } from "../types";
+import { COLORS } from "../ui/constants";
+
+interface DeviceMenuProps {
+	devices: AudioDevice[];
+	currentDevice: string | undefined;
+	currentOutputDevice: string | undefined;
+	soxAvailable: boolean;
+	soxInstallHint: string;
+	onClose: () => void;
+	onSelect: (device: AudioDevice) => void;
+	onOutputSelect: (device: AudioDevice) => void;
+}
+
+export function DeviceMenu({
+	devices,
+	currentDevice,
+	currentOutputDevice,
+	soxAvailable,
+	soxInstallHint,
+	onClose,
+	onSelect,
+	onOutputSelect,
+}: DeviceMenuProps) {
+	const totalItems = devices.length * 2;
+
+	const initialIndex = useMemo(() => {
+		if (devices.length === 0) return 0;
+		const idx = currentDevice ? devices.findIndex((device) => device.name === currentDevice) : -1;
+		if (idx >= 0) return idx;
+		return devices.length > 1 ? 1 : 0;
+	}, [devices, currentDevice]);
+
+	const { selectedIndex } = useMenuKeyboard({
+		itemCount: totalItems,
+		initialIndex,
+		onClose,
+		closeOnSelect: false,
+		onSelect: (selectedIdx) => {
+			const isOutputSection = selectedIdx >= devices.length;
+			const deviceIdx = isOutputSection ? selectedIdx - devices.length : selectedIdx;
+			const selectedDevice = devices[deviceIdx];
+			if (selectedDevice) {
+				if (isOutputSection) {
+					onOutputSelect(selectedDevice);
+				} else {
+					onSelect(selectedDevice);
+				}
+			}
+		},
+	});
+
+	const isInputSection = selectedIndex < devices.length;
+	const inputSelectedIdx = isInputSection ? selectedIndex : -1;
+	const outputSelectedIdx = !isInputSection ? selectedIndex - devices.length : -1;
+
+	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="50%"
+				minWidth={50}
+				maxWidth={120}
+			>
+				<box marginBottom={1}>
+					<text>
+						<span fg={COLORS.USER_LABEL}>
+							{soxAvailable ? "↑/↓ or j/k to navigate, ENTER to select, ESC to cancel" : "ESC to close"}
+						</span>
+					</text>
+				</box>
+				{!soxAvailable ? (
+					<box flexDirection="column" paddingTop={1}>
+						<text>
+							<span fg={COLORS.ERROR}>sox is not installed</span>
+						</text>
+						<box marginTop={1}>
+							<text>
+								<span fg={COLORS.USER_LABEL}>Voice input requires sox for audio capture.</span>
+							</text>
+						</box>
+						<box marginTop={1}>
+							<text>
+								<span fg={COLORS.MENU_TEXT}>{soxInstallHint}</span>
+							</text>
+						</box>
+					</box>
+				) : devices.length === 0 ? (
+					<box>
+						<text>
+							<span fg={COLORS.USER_LABEL}>Loading devices...</span>
+						</text>
+					</box>
+				) : (
+					<>
+						<box marginBottom={1} marginTop={1}>
+							<text>
+								<span fg={COLORS.DAEMON_LABEL}>[ INPUT ]</span>
+							</text>
+						</box>
+						<box flexDirection="column">
+							{devices.map((device, idx) => (
+								<box
+									key={`input-${device.name}`}
+									backgroundColor={idx === inputSelectedIdx ? COLORS.MENU_SELECTED_BG : COLORS.MENU_BG}
+									paddingLeft={1}
+									paddingRight={1}
+								>
+									<text>
+										<span fg={idx === inputSelectedIdx ? COLORS.DAEMON_LABEL : COLORS.MENU_TEXT}>
+											{idx === inputSelectedIdx ? "▶ " : "  "}
+											{device.name}
+											{device.name === currentDevice ? " ●" : ""}
+										</span>
+									</text>
+								</box>
+							))}
+						</box>
+						<box marginBottom={1} marginTop={1}>
+							<text>
+								<span fg={COLORS.DAEMON_LABEL}>[ OUTPUT ]</span>
+							</text>
+						</box>
+						<box flexDirection="column">
+							{devices.map((device, idx) => (
+								<box
+									key={`output-${device.name}`}
+									backgroundColor={idx === outputSelectedIdx ? COLORS.MENU_SELECTED_BG : COLORS.MENU_BG}
+									paddingLeft={1}
+									paddingRight={1}
+								>
+									<text>
+										<span fg={idx === outputSelectedIdx ? COLORS.DAEMON_LABEL : COLORS.MENU_TEXT}>
+											{idx === outputSelectedIdx ? "▶ " : "  "}
+											{device.name}
+											{device.name === currentOutputDevice ? " ●" : ""}
+										</span>
+									</text>
+								</box>
+							))}
+						</box>
+					</>
+				)}
+			</box>
+		</box>
+	);
+}

package/src/components/GroundingBadge.tsx

@@ -0,0 +1,21 @@
+import { COLORS } from "../ui/constants";
+
+interface GroundingBadgeProps {
+	count: number;
+}
+
+export function GroundingBadge({ count }: GroundingBadgeProps) {
+	return (
+		<box flexDirection="row" marginTop={1}>
+			<text>
+				<span fg={COLORS.REASONING_DIM}>[ </span>
+				<span fg={COLORS.DAEMON_LABEL}>
+					-&gt; {count} source{count !== 1 ? "s" : ""}
+				</span>
+				<span fg={COLORS.REASONING_DIM}> · press </span>
+				<span fg={COLORS.DAEMON_LABEL}>G</span>
+				<span fg={COLORS.REASONING_DIM}> to view ]</span>
+			</text>
+		</box>
+	);
+}

package/src/components/GroundingMenu.tsx

@@ -0,0 +1,310 @@
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { useRenderer } from "@opentui/react";
+import { useEffect, useMemo, useRef } from "react";
+import { useMenuKeyboard } from "../hooks/use-menu-keyboard";
+import type { GroundedStatement, GroundingMap } from "../types";
+import { COLORS } from "../ui/constants";
+
+const QUOTE_INDENT = 2;
+
+const ITEM_PADDING_TOP = 1;
+const ITEM_PADDING_BOTTOM = 1;
+const ITEM_MARGIN_BOTTOM = 1;
+const MARGIN_QUOTE = 1;
+const MARGIN_SOURCE = 1;
+const SOURCE_LINE_HEIGHT = 1;
+const DEBUG_FRAGMENTS =
+	process.env.DAEMON_DEBUG_FRAGMENTS === "true" || process.env.DAEMON_DEBUG_FRAGMENTS === "1";
+
+function truncateText(text: string, maxLen: number): string {
+	if (text.length <= maxLen) return text;
+	return text.slice(0, maxLen - 1) + "…";
+}
+
+function wrapText(text: string, maxWidth: number): string[] {
+	if (!text || maxWidth <= 0) return [];
+	const words = text.split(/\s+/);
+	const lines: string[] = [];
+	let currentLine = "";
+
+	for (const word of words) {
+		if (currentLine.length === 0) {
+			currentLine = word;
+		} else if (currentLine.length + 1 + word.length <= maxWidth) {
+			currentLine += " " + word;
+		} else {
+			lines.push(currentLine);
+			currentLine = word;
+		}
+	}
+	if (currentLine.length > 0) {
+		lines.push(currentLine);
+	}
+	return lines;
+}
+
+interface LayoutItem {
+	item: GroundedStatement;
+	statementLines: string[];
+	quoteLines: string[];
+	fragmentLines: string[];
+	sourceDomain: string;
+	height: number;
+}
+
+interface GroundingMenuProps {
+	groundingMap: GroundingMap;
+	initialIndex?: number;
+	onClose: () => void;
+	onSelect: (index: number) => void;
+	onSelectedIndexChange?: (index: number) => void;
+}
+
+export function GroundingMenu({
+	groundingMap,
+	initialIndex = 0,
+	onClose,
+	onSelect,
+	onSelectedIndexChange,
+}: GroundingMenuProps) {
+	const items = groundingMap.items;
+	const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+	const renderer = useRenderer();
+
+	const menuWidth = useMemo(() => {
+		return Math.max(80, Math.min(300, Math.floor(renderer.terminalWidth * 0.85)));
+	}, [renderer.terminalWidth]);
+
+	const { contentWidth, statementWidth, quoteWidth } = useMemo(() => {
+		const cw = menuWidth - 6;
+		return {
+			contentWidth: cw,
+			statementWidth: cw - 2,
+			quoteWidth: cw - QUOTE_INDENT - 4,
+		};
+	}, [menuWidth]);
+
+	const { selectedIndex } = useMenuKeyboard({
+		itemCount: items.length,
+		initialIndex,
+		onClose,
+		onSelect,
+	});
+
+	const layoutItems = useMemo<LayoutItem[]>(() => {
+		return items.map((item: GroundedStatement) => {
+			const statementLines = wrapText(item.statement, statementWidth);
+
+			const quoteText = (item.source.quote ?? "").trim();
+			const quoteLinesAll = wrapText(quoteText, quoteWidth);
+			const quoteLines = quoteLinesAll.slice(0, 4);
+			if (quoteLinesAll.length > 4) {
+				const lastLine = quoteLines[3] ?? "";
+				quoteLines[3] = truncateText(lastLine, quoteWidth - 3);
+			}
+
+			let fragmentLines: string[] = [];
+			if (DEBUG_FRAGMENTS && item.source.textFragment) {
+				fragmentLines = wrapText(`[Fragment] ${item.source.textFragment}`, quoteWidth);
+			}
+
+			let sourceDomain = "";
+			try {
+				sourceDomain = new URL(item.source.url).hostname;
+			} catch {
+				sourceDomain = truncateText(item.source.url, 40);
+			}
+
+			let h = ITEM_PADDING_TOP;
+			h += statementLines.length;
+
+			if (quoteLines.length > 0) {
+				h += MARGIN_QUOTE;
+				h += quoteLines.length;
+			}
+
+			if (fragmentLines.length > 0) {
+				h += MARGIN_QUOTE;
+				h += fragmentLines.length;
+			}
+
+			h += MARGIN_SOURCE + SOURCE_LINE_HEIGHT;
+			h += ITEM_PADDING_BOTTOM;
+
+			return {
+				item,
+				statementLines,
+				quoteLines,
+				fragmentLines,
+				sourceDomain,
+				height: h,
+			};
+		});
+	}, [items, statementWidth, quoteWidth]);
+
+	useEffect(() => {
+		const scrollbox = scrollRef.current;
+		if (!scrollbox || layoutItems.length === 0) return;
+
+		const viewportHeight = scrollbox.viewport?.height ?? 0;
+		if (viewportHeight <= 0) return;
+
+		const selectedLayout = layoutItems[selectedIndex];
+		if (!selectedLayout) return;
+
+		let itemTop = 0;
+		for (let i = 0; i < selectedIndex; i++) {
+			const layout = layoutItems[i];
+			if (layout) {
+				itemTop += layout.height + ITEM_MARGIN_BOTTOM;
+			}
+		}
+		const itemBottom = itemTop + selectedLayout.height;
+
+		const currentScrollTop = scrollbox.scrollTop;
+		const currentScrollBottom = currentScrollTop + viewportHeight;
+		const maxScrollTop = Math.max(0, scrollbox.scrollHeight - viewportHeight);
+
+		let nextScrollTop = currentScrollTop;
+
+		if (itemTop < currentScrollTop) {
+			nextScrollTop = itemTop;
+		} else if (itemBottom > currentScrollBottom) {
+			nextScrollTop = itemBottom - viewportHeight;
+		}
+
+		nextScrollTop = Math.max(0, Math.min(nextScrollTop, maxScrollTop));
+		if (nextScrollTop !== currentScrollTop) {
+			scrollbox.scrollTop = nextScrollTop;
+		}
+	}, [selectedIndex, layoutItems]);
+
+	useEffect(() => {
+		onSelectedIndexChange?.(selectedIndex);
+	}, [onSelectedIndexChange, selectedIndex]);
+
+	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={3}
+				paddingRight={3}
+				paddingTop={1}
+				paddingBottom={1}
+				width={menuWidth}
+				maxHeight="85%"
+			>
+				<box marginBottom={1} flexDirection="row" width="100%">
+					<text>
+						<span fg={COLORS.DAEMON_LABEL}>[ GROUNDING ]</span>
+						<span fg={COLORS.REASONING_DIM}>
+							{" "}
+							— {items.length} source{items.length !== 1 ? "s" : ""}
+						</span>
+					</text>
+					<box flexGrow={1} />
+					<text>
+						<span fg={COLORS.USER_LABEL}>
+							<span fg={COLORS.DAEMON_LABEL}>ENTER</span> open · <span fg={COLORS.DAEMON_LABEL}>ESC</span>{" "}
+							close
+						</span>
+					</text>
+				</box>
+
+				{items.length === 0 ? (
+					<box height={3} justifyContent="center" alignItems="center">
+						<text>
+							<span fg={COLORS.USER_TEXT}>No grounded statements recorded.</span>
+						</text>
+					</box>
+				) : (
+					<scrollbox
+						ref={scrollRef}
+						flexGrow={1}
+						flexShrink={1}
+						focused={false}
+						scrollY={true}
+						scrollX={false}
+					>
+						<box flexDirection="column" paddingBottom={1}>
+							{layoutItems.map((layout, idx) => {
+								const isSelected = idx === selectedIndex;
+								const { item, statementLines, quoteLines, fragmentLines, sourceDomain } = layout;
+
+								return (
+									<box
+										key={item.id}
+										flexDirection="column"
+										padding={1}
+										backgroundColor={isSelected ? COLORS.MENU_SELECTED_BG : undefined}
+										marginBottom={1}
+									>
+										{statementLines.map((line, i) => (
+											<text key={`s-${i}`}>
+												<span fg={isSelected ? COLORS.DAEMON_TEXT : COLORS.USER_TEXT}>
+													{i === 0 && isSelected ? "▶ " : "  "}
+													{line}
+												</span>
+											</text>
+										))}
+
+										{quoteLines.length > 0 && (
+											<box marginTop={1} marginLeft={QUOTE_INDENT} flexDirection="column">
+												{quoteLines.map((line, i) => (
+													<text key={`q-${i}`}>
+														<span fg={COLORS.REASONING_DIM}>
+															{i === 0 ? "❝ " : "  "}
+															{line}
+															{i === quoteLines.length - 1 ? " ❞" : ""}
+														</span>
+													</text>
+												))}
+											</box>
+										)}
+
+										{fragmentLines.length > 0 && (
+											<box marginTop={1} marginLeft={QUOTE_INDENT} flexDirection="column">
+												{fragmentLines.map((line, i) => (
+													<text key={`f-${i}`}>
+														<span fg={COLORS.DAEMON_ERROR}>{line}</span>
+													</text>
+												))}
+											</box>
+										)}
+
+										<box marginTop={1} marginLeft={2}>
+											<text>
+												<span fg={isSelected ? COLORS.DAEMON_LABEL : COLORS.REASONING_DIM}>
+													[{idx + 1}] ↗ {sourceDomain}
+												</span>
+												{item.source.title && (
+													<span fg={COLORS.REASONING_DIM}>
+														{" · "}
+														{truncateText(item.source.title, 50)}
+													</span>
+												)}
+											</text>
+										</box>
+									</box>
+								);
+							})}
+						</box>
+					</scrollbox>
+				)}
+			</box>
+		</box>
+	);
+}

package/src/components/HotkeysPane.tsx

@@ -0,0 +1,115 @@
+import type { KeyEvent } from "@opentui/core";
+import { useKeyboard } from "@opentui/react";
+import { useCallback } from "react";
+import { COLORS } from "../ui/constants";
+
+interface HotkeysPaneProps {
+	onClose: () => void;
+}
+
+export function HotkeysPane({ onClose }: HotkeysPaneProps) {
+	const handleKeyPress = useCallback(
+		(key: KeyEvent) => {
+			if (key.eventType !== "press") return;
+			if (key.name === "escape" || key.sequence === "?") {
+				onClose();
+				key.preventDefault();
+			}
+		},
+		[onClose]
+	);
+
+	useKeyboard(handleKeyPress);
+
+	const sections = [
+		{
+			title: "PRIMARY",
+			items: [
+				{ key: "SPACE", label: "Speak / stop listening" },
+				{ key: "SHIFT+TAB", label: "Toggle type mode" },
+				{ key: "↑/↓", label: "Scroll conversation" },
+				{ key: "J/K", label: "Scroll conversation" },
+				{ key: "CTRL+U", label: "Page up conversation" },
+				{ key: "CTRL+D", label: "Page down conversation" },
+			],
+		},
+		{
+			title: "SESSION",
+			items: [
+				{ key: "T", label: "Toggle full reasoning previews" },
+				{ key: "O", label: "Toggle tool output previews" },
+				{ key: "N", label: "New session" },
+				{ key: "G", label: "Open Grounding Menu" },
+				{ key: "CTRL+X", label: "Undo last message" },
+			],
+		},
+		{
+			title: "MENUS",
+			items: [
+				{ key: "D", label: "Devices" },
+				{ key: "M", label: "Models" },
+				{ key: "P", label: "Providers" },
+				{ key: "L", label: "Sessions" },
+				{ key: "S", label: "Settings" },
+			],
+		},
+	];
+
+	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={52}
+				maxWidth={140}
+			>
+				<box marginBottom={1}>
+					<text>
+						<span fg={COLORS.DAEMON_LABEL}>[ HOTKEYS ]</span>
+					</text>
+				</box>
+				<box marginBottom={1}>
+					<text>
+						<span fg={COLORS.USER_LABEL}>Press ? or ESC to close</span>
+					</text>
+				</box>
+				<box flexDirection="column">
+					{sections.map((section) => (
+						<box key={section.title} flexDirection="column" marginBottom={1}>
+							<box marginBottom={0}>
+								<text>
+									<span fg={COLORS.USER_LABEL}>— {section.title} —</span>
+								</text>
+							</box>
+							{section.items.map((item) => (
+								<box key={item.key} flexDirection="row">
+									<text>
+										<span fg={COLORS.DAEMON_LABEL}>{item.key}</span>
+										<span fg={COLORS.MENU_TEXT}> · {item.label}</span>
+									</text>
+								</box>
+							))}
+						</box>
+					))}
+				</box>
+			</box>
+		</box>
+	);
+}

package/src/components/InlineStatusIndicator.tsx

@@ -0,0 +1,106 @@
+import { COLORS } from "../ui/constants";
+import { DaemonState } from "../types";
+
+export interface InlineStatusProps {
+	daemonState: DaemonState;
+	isToolCalling: boolean;
+	isReasoning: boolean;
+	responseElapsedMs: number;
+}
+
+type InlineStatusConfig = {
+	spinnerName: "line" | "dots3" | "dots2" | "dots" | "bouncingBall";
+	label: string;
+	color: string;
+};
+
+function buildElapsedSuffix(responseElapsedMs: number): string {
+	if (!Number.isFinite(responseElapsedMs) || responseElapsedMs < 1000) {
+		return "";
+	}
+
+	const seconds = Math.max(1, Math.floor(responseElapsedMs / 1000));
+	return ` · ${seconds}s`;
+}
+
+function getInlineStatusConfig(args: {
+	daemonState: DaemonState;
+	isToolCalling: boolean;
+	isReasoning: boolean;
+	elapsedSuffix: string;
+}): InlineStatusConfig | null {
+	const { daemonState, isToolCalling, isReasoning, elapsedSuffix } = args;
+
+	if (daemonState === DaemonState.IDLE) {
+		return null;
+	}
+
+	if (isToolCalling) {
+		return {
+			spinnerName: "line",
+			label: `CALLING TOOL${elapsedSuffix}`,
+			color: COLORS.STATUS_RUNNING,
+		};
+	}
+
+	if (isReasoning) {
+		return {
+			spinnerName: "dots3",
+			label: `REASONING${elapsedSuffix}`,
+			color: COLORS.REASONING,
+		};
+	}
+
+	switch (daemonState) {
+		case DaemonState.RESPONDING:
+			return {
+				spinnerName: "dots2",
+				label: `RESPONDING${elapsedSuffix}`,
+				color: COLORS.STATUS_BORDER,
+			};
+		case DaemonState.TRANSCRIBING:
+			return {
+				spinnerName: "dots",
+				label: `TRANSCRIBING${elapsedSuffix}`,
+				color: COLORS.STATUS_BORDER,
+			};
+		case DaemonState.SPEAKING:
+			return {
+				spinnerName: "bouncingBall",
+				label: `SPEAKING${elapsedSuffix}`,
+				color: COLORS.STATUS_BORDER,
+			};
+		default:
+			return null;
+	}
+}
+
+export function InlineStatusIndicator({
+	daemonState,
+	isToolCalling,
+	isReasoning,
+	responseElapsedMs,
+}: InlineStatusProps) {
+	const elapsedSuffix = buildElapsedSuffix(responseElapsedMs);
+	const config = getInlineStatusConfig({
+		daemonState,
+		isToolCalling,
+		isReasoning,
+		elapsedSuffix,
+	});
+
+	if (!config) {
+		return null;
+	}
+
+	const { spinnerName, label, color } = config;
+
+	return (
+		<box flexDirection="row" alignItems="center" marginTop={1} marginBottom={1} paddingLeft={2}>
+			<spinner name={spinnerName} color={color} />
+			<text marginLeft={1}>
+				<span fg={color}>{label}</span>
+			</text>
+		</box>
+	);
+}