@makefinks/daemon 0.1.0

package/src/avatar-preview.ts

@@ -0,0 +1,186 @@
+import { OptimizedBuffer, createCliRenderer, RGBA } from "@opentui/core";
+import { SuperSampleType, ThreeCliRenderer } from "@opentui/core/3d";
+import { spawn } from "node:child_process";
+import { existsSync } from "node:fs";
+import { mkdir } from "node:fs/promises";
+import { join } from "node:path";
+import { createDaemonRig } from "./avatar/daemon-avatar-rig";
+
+/** Resolve ffmpeg path - tries ffmpeg-static if available, otherwise falls back to system PATH. */
+function getFfmpegPath(): string {
+	try {
+		// eslint-disable-next-line @typescript-eslint/no-require-imports
+		const ffmpegStatic = require("ffmpeg-static") as string;
+		if (ffmpegStatic && existsSync(ffmpegStatic)) {
+			return ffmpegStatic;
+		}
+	} catch {
+		// ffmpeg-static not installed, use system ffmpeg
+	}
+	return "ffmpeg";
+}
+
+type PreviewOptions = {
+	outDir: string;
+	width: number;
+	height: number;
+	frames: number;
+	fps: number;
+	mp4?: string;
+};
+
+function parseArgs(argv: string[]): PreviewOptions {
+	const out: PreviewOptions = {
+		outDir: "tmp/avatar-preview",
+		width: 320,
+		height: 180,
+		frames: 180,
+		fps: 30,
+	};
+
+	for (let i = 0; i < argv.length; i++) {
+		const arg = argv[i];
+		const next = argv[i + 1];
+		if (!arg) continue;
+
+		if (arg === "--out" && next) {
+			out.outDir = next;
+			i++;
+			continue;
+		}
+		if (arg === "--width" && next) {
+			out.width = Number(next);
+			i++;
+			continue;
+		}
+		if (arg === "--height" && next) {
+			out.height = Number(next);
+			i++;
+			continue;
+		}
+		if (arg === "--frames" && next) {
+			out.frames = Number(next);
+			i++;
+			continue;
+		}
+		if (arg === "--fps" && next) {
+			out.fps = Number(next);
+			i++;
+			continue;
+		}
+		if (arg === "--mp4" && next) {
+			out.mp4 = next;
+			i++;
+			continue;
+		}
+	}
+
+	if (!Number.isFinite(out.width) || out.width <= 0) throw new Error("Invalid --width");
+	if (!Number.isFinite(out.height) || out.height <= 0) throw new Error("Invalid --height");
+	if (!Number.isFinite(out.frames) || out.frames <= 0) throw new Error("Invalid --frames");
+	if (!Number.isFinite(out.fps) || out.fps <= 0) throw new Error("Invalid --fps");
+
+	return out;
+}
+
+async function stitchToMp4(opts: { outDir: string; fps: number; mp4Path: string }): Promise<void> {
+	const inputPattern = join(opts.outDir, "frame_%04d.png");
+
+	const args = [
+		"-y",
+		"-hide_banner",
+		"-loglevel",
+		"error",
+		"-framerate",
+		String(opts.fps),
+		"-i",
+		inputPattern,
+		"-c:v",
+		"libx264",
+		"-pix_fmt",
+		"yuv420p",
+		"-crf",
+		"18",
+		"-preset",
+		"medium",
+		// Avoid odd-size issues with yuv420p encodes.
+		"-vf",
+		"pad=ceil(iw/2)*2:ceil(ih/2)*2",
+		opts.mp4Path,
+	];
+
+	await new Promise<void>((resolve, reject) => {
+		const ffmpegPath = getFfmpegPath();
+		const child = spawn(ffmpegPath, args, { stdio: "inherit" });
+		child.on("error", (err) => reject(err));
+		child.on("exit", (code) => {
+			if (code === 0) resolve();
+			else reject(new Error(`ffmpeg exited with code ${code}`));
+		});
+	});
+}
+
+async function main() {
+	const opts = parseArgs(process.argv.slice(2));
+	await mkdir(opts.outDir, { recursive: true });
+
+	// We still need CliRenderer because ThreeCliRenderer plugs into OpenTUI's WebGPU + lifecycle.
+	// But this script doesn't mount a UI; it just renders frames to PNG.
+	const cli = await createCliRenderer({
+		useConsole: false,
+		useMouse: false,
+		enableMouseMovement: false,
+		useAlternateScreen: false,
+		exitOnCtrlC: true,
+		targetFps: 60,
+		maxFps: 60,
+		backgroundColor: "#000000",
+	});
+
+	const three = new ThreeCliRenderer(cli, {
+		width: opts.width,
+		height: opts.height,
+		alpha: true,
+		backgroundColor: RGBA.fromValues(0, 0, 0, 0),
+		superSample: SuperSampleType.GPU,
+		autoResize: false,
+	});
+
+	const buffer = OptimizedBuffer.create(opts.width, opts.height, cli.widthMethod, {
+		respectAlpha: true,
+		id: "avatar-preview",
+	});
+
+	let rig: ReturnType<typeof createDaemonRig> | null = null;
+	try {
+		await three.init();
+		rig = createDaemonRig({ aspectRatio: three.aspectRatio });
+		three.setActiveCamera(rig.camera);
+
+		const deltaS = 1 / opts.fps;
+
+		for (let frame = 0; frame < opts.frames; frame++) {
+			rig.update(deltaS);
+			await three.drawScene(rig.scene, buffer, deltaS);
+
+			const filename = `frame_${String(frame).padStart(4, "0")}.png`;
+			await three.saveToFile(join(opts.outDir, filename));
+		}
+
+		if (opts.mp4) {
+			try {
+				await stitchToMp4({ outDir: opts.outDir, fps: opts.fps, mp4Path: opts.mp4 });
+			} catch (err: unknown) {
+				const e = err instanceof Error ? err : new Error(String(err));
+				console.error(`Failed to stitch MP4. Ensure ffmpeg is installed and on PATH. (${e.message})`);
+			}
+		}
+	} finally {
+		rig?.dispose();
+		buffer.destroy();
+		three.destroy();
+		cli.destroy();
+	}
+}
+
+await main();

package/src/cli.ts

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+
+const args = process.argv.slice(2);
+const bunCmd = process.platform === "win32" ? "bun.exe" : "bun";
+const bunCheck = spawnSync(bunCmd, ["--version"], { stdio: "ignore" });
+
+if (bunCheck.error || bunCheck.status !== 0) {
+	console.error("DAEMON requires Bun. Install it from https://bun.sh and try again.");
+	process.exit(1);
+}
+
+const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const entry = path.join(packageRoot, "src", "index.tsx");
+const result = spawnSync(bunCmd, [entry, ...args], { stdio: "inherit" });
+
+if (result.error) {
+	const error = result.error instanceof Error ? result.error : new Error(String(result.error));
+	console.error(error.message);
+	process.exit(1);
+}
+
+process.exit(result.status ?? 0);

package/src/components/ApiKeyInput.tsx

@@ -0,0 +1,99 @@
+/**
+ * API key input component for onboarding.
+ * Simple single-line input using OpenTUI textarea.
+ */
+
+import type { TextareaRenderable, PasteEvent, KeyEvent } from "@opentui/core";
+import { useRef, type RefObject } from "react";
+import { COLORS } from "../ui/constants";
+import { debug } from "../utils/debug-logger";
+import { pasteClipboardIntoTextarea } from "../utils/paste";
+
+export interface ApiKeyInputProps {
+	onSubmit: () => void;
+	placeholder?: string;
+	textareaRef?: RefObject<TextareaRenderable | null>;
+}
+
+export function ApiKeyInput({
+	onSubmit,
+	placeholder = "Paste your API key here...",
+	textareaRef,
+}: ApiKeyInputProps) {
+	const localRef = useRef<TextareaRenderable | null>(null);
+	const activeRef = textareaRef ?? localRef;
+
+	const handleContentChange = () => {
+		const text = activeRef.current?.plainText ?? "";
+		// Strip newlines - API keys should be single line
+		const cleanedText = text.replace(/[\r\n]/g, "");
+		if (cleanedText !== text) {
+			activeRef.current?.setText(cleanedText);
+		}
+	};
+
+	const handlePaste = (event: PasteEvent) => {
+		debug.log("[ApiKeyInput] onPaste received", {
+			textLength: event.text.length,
+			textPreview: event.text.slice(0, 50),
+			defaultPrevented: event.defaultPrevented,
+		});
+		if (!event.text.trim()) {
+			event.preventDefault();
+			void pasteClipboardIntoTextarea(activeRef.current, {
+				singleLine: true,
+				source: "apikey-onPaste",
+			});
+		}
+		// Otherwise, let the textarea handle it
+	};
+
+	const handleKeyDown = (key: KeyEvent) => {
+		if (key.eventType !== "press") return;
+		if (key.name !== "v") return;
+		if (!(key.ctrl || key.meta || key.super)) return;
+		key.preventDefault();
+		void pasteClipboardIntoTextarea(activeRef.current, {
+			singleLine: true,
+			source: "apikey-shortcut",
+		});
+	};
+
+	return (
+		<box
+			border={true}
+			borderStyle="single"
+			borderColor={COLORS.MENU_BORDER}
+			backgroundColor={COLORS.MENU_SELECTED_BG}
+			flexDirection="row"
+			alignItems="stretch"
+			width="100%"
+			maxWidth={100}
+			height={3}
+			paddingLeft={1}
+			paddingRight={1}
+		>
+			<textarea
+				ref={activeRef}
+				placeholder={placeholder}
+				focused={true}
+				wrapMode="none"
+				keyBindings={[{ name: "return", action: "submit" }]}
+				onContentChange={handleContentChange}
+				onPaste={handlePaste}
+				onKeyDown={handleKeyDown}
+				onSubmit={() => onSubmit()}
+				width="100%"
+				height="100%"
+				style={{
+					backgroundColor: "transparent",
+					focusedBackgroundColor: "transparent",
+					textColor: COLORS.DAEMON_LABEL,
+					focusedTextColor: COLORS.DAEMON_LABEL,
+					cursorColor: COLORS.DAEMON_LABEL,
+					cursorStyle: { style: "block", blinking: true },
+				}}
+			/>
+		</box>
+	);
+}

package/src/components/ApiKeyStep.tsx

@@ -0,0 +1,95 @@
+/**
+ * Reusable API key input step for onboarding.
+ * Reduces repetition across openrouter, openai, and exa key steps.
+ */
+
+import type { TextareaRenderable } from "@opentui/core";
+import type { RefObject } from "react";
+import { ApiKeyInput } from "./ApiKeyInput";
+import { COLORS } from "../ui/constants";
+
+interface ApiKeyStepProps {
+	/** Title displayed in the header */
+	title: string;
+	/** Main description of what the service does */
+	description: string;
+	/** Optional error message (e.g., "env variable not found") */
+	errorMessage?: string;
+	/** Environment variable name for Option 2 */
+	envVarName: string;
+	/** URL where the user can get their API key */
+	keyUrl: string;
+	/** Whether this key is optional (shows ESC to skip option) */
+	optional?: boolean;
+	/** What happens if skipped (e.g., "text-only mode", "web search disabled") */
+	skipConsequence?: string;
+	/** Callback when key is submitted */
+	onSubmit: () => void;
+	/** Ref to the textarea for focus management */
+	textareaRef?: RefObject<TextareaRenderable | null>;
+}
+
+export function ApiKeyStep({
+	title,
+	description,
+	errorMessage,
+	envVarName,
+	keyUrl,
+	optional = false,
+	skipConsequence,
+	onSubmit,
+	textareaRef,
+}: ApiKeyStepProps) {
+	return (
+		<>
+			<box marginBottom={1}>
+				<text>
+					<span fg={COLORS.DAEMON_LABEL}>[ {title} ]</span>
+				</text>
+			</box>
+			{errorMessage && (
+				<box marginBottom={1}>
+					<text>
+						<span fg={COLORS.DAEMON_ERROR}>{errorMessage}</span>
+					</text>
+				</box>
+			)}
+			<box marginBottom={1}>
+				<text>
+					<span fg={COLORS.MENU_TEXT}>{description}</span>
+				</text>
+			</box>
+			{optional && skipConsequence && (
+				<box marginBottom={1}>
+					<text>
+						<span fg={COLORS.REASONING_DIM}>Without this key, {skipConsequence}.</span>
+					</text>
+				</box>
+			)}
+			<box marginBottom={1}>
+				<text>
+					<span fg={COLORS.REASONING_DIM}>Option 1: Paste your key (Ctrl+v) below and press ENTER</span>
+				</text>
+			</box>
+			<box marginBottom={1}>
+				<text>
+					<span fg={COLORS.REASONING_DIM}>Option 2: Quit, set {envVarName} env variable and restart</span>
+				</text>
+			</box>
+			{optional && (
+				<box marginBottom={1}>
+					<text>
+						<span fg={COLORS.REASONING_DIM}>Option 3: Press ESC to skip ({skipConsequence})</span>
+					</text>
+				</box>
+			)}
+			<box marginBottom={1}>
+				<text>
+					<span fg={COLORS.REASONING_DIM}>Get your key: {keyUrl}</span>
+					<span fg={COLORS.USER_LABEL}> · Shift+O to open</span>
+				</text>
+			</box>
+			<ApiKeyInput onSubmit={onSubmit} textareaRef={textareaRef} />
+		</>
+	);
+}

package/src/components/ApprovalPicker.tsx

@@ -0,0 +1,109 @@
+import { useState, useCallback, useRef } from "react";
+import { useKeyboard } from "@opentui/react";
+import { TextAttributes, type KeyEvent } from "@opentui/core";
+import { COLORS } from "../ui/constants";
+
+interface ApprovalPickerProps {
+	onApprove: () => void;
+	onDeny: () => void;
+	onApproveAll?: () => void;
+	onDenyAll?: () => void;
+	focused?: boolean;
+}
+
+export function ApprovalPicker({
+	onApprove,
+	onDeny,
+	onApproveAll,
+	onDenyAll,
+	focused = true,
+}: ApprovalPickerProps) {
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const respondedRef = useRef(false);
+
+	const handleSelect = useCallback(() => {
+		if (respondedRef.current) return;
+		respondedRef.current = true;
+		if (selectedIndex === 0) {
+			onApprove();
+		} else {
+			onDeny();
+		}
+	}, [selectedIndex, onApprove, onDeny]);
+
+	useKeyboard((key: KeyEvent) => {
+		if (!focused) return;
+		if (respondedRef.current) return;
+		if (key.eventType !== "press") return;
+
+		if (key.name === "left" || key.name === "right" || key.name === "tab") {
+			setSelectedIndex((prev) => (prev === 0 ? 1 : 0));
+			key.preventDefault();
+		} else if (key.name === "return") {
+			handleSelect();
+			key.preventDefault();
+		} else if (key.sequence === "y") {
+			respondedRef.current = true;
+			onApprove();
+			key.preventDefault();
+		} else if (key.sequence === "Y" && onApproveAll) {
+			respondedRef.current = true;
+			onApproveAll();
+			key.preventDefault();
+		} else if (key.sequence === "n") {
+			respondedRef.current = true;
+			onDeny();
+			key.preventDefault();
+		} else if (key.sequence === "N" && onDenyAll) {
+			respondedRef.current = true;
+			onDenyAll();
+			key.preventDefault();
+		}
+	});
+
+	const approveSelected = selectedIndex === 0;
+	const denySelected = selectedIndex === 1;
+
+	if (!focused) {
+		return (
+			<box flexDirection="row" alignItems="center" gap={1} marginTop={1} paddingLeft={2}>
+				<text>
+					<span fg={COLORS.REASONING_DIM}>{"   awaiting review..."}</span>
+				</text>
+			</box>
+		);
+	}
+
+	return (
+		<box flexDirection="row" alignItems="center" gap={1} marginTop={1} paddingLeft={2}>
+			<text>
+				<span fg={COLORS.STATUS_APPROVAL}>{">> "}</span>
+				<span fg={COLORS.TOOL_INPUT_TEXT}>{"approve? "}</span>
+			</text>
+			<box
+				paddingLeft={1}
+				paddingRight={1}
+				backgroundColor={approveSelected ? COLORS.STATUS_COMPLETED : undefined}
+			>
+				<text>
+					<span
+						fg={approveSelected ? COLORS.MENU_BG : COLORS.STATUS_COMPLETED}
+						attributes={approveSelected ? TextAttributes.BOLD : TextAttributes.NONE}
+					>
+						{"[Y]es"}
+					</span>
+				</text>
+			</box>
+			<box paddingLeft={1} paddingRight={1} backgroundColor={denySelected ? COLORS.STATUS_FAILED : undefined}>
+				<text>
+					<span
+						fg={denySelected ? COLORS.MENU_BG : COLORS.STATUS_FAILED}
+						attributes={denySelected ? TextAttributes.BOLD : TextAttributes.NONE}
+					>
+						{"[N]o"}
+					</span>
+				</text>
+			</box>
+		</box>
+	);
+}

package/src/components/ContentBlockView.tsx

@@ -0,0 +1,141 @@
+/**
+ * Component for rendering a single content block (reasoning, tool, or text).
+ */
+
+import { DaemonText } from "./DaemonText";
+import { ToolCallView } from "./ToolCallView";
+import { COLORS, REASONING_MARKDOWN_STYLE } from "../ui/constants";
+import type { ContentBlock } from "../types";
+import { formatElapsedTime, hasVisibleText } from "../utils/formatters";
+
+interface ContentBlockViewProps {
+	block: ContentBlock;
+	isLastReasoningBlock: boolean;
+	isLastTextBlock: boolean;
+	isLastBlock?: boolean;
+	isStreaming: boolean;
+	showFullReasoning: boolean;
+	showToolOutput?: boolean;
+	reasoningDisplay?: string;
+	showReasoningTicker?: boolean;
+}
+
+export function ContentBlockView({
+	block,
+	isLastReasoningBlock,
+	isLastTextBlock,
+	isLastBlock = false,
+	isStreaming,
+	showFullReasoning,
+	showToolOutput = true,
+	reasoningDisplay,
+	showReasoningTicker,
+}: ContentBlockViewProps) {
+	if (block.type === "reasoning") {
+		if (shouldHideContentBlock(block)) {
+			return null;
+		}
+
+		const cleanedContent = block.content.replace(/\[REDACTED\]/g, "");
+
+		// Show full reasoning if enabled
+		if (showFullReasoning) {
+			return (
+				<box
+					flexDirection="column"
+					border={["left"]}
+					borderStyle="heavy"
+					borderColor={COLORS.REASONING_DIM}
+					paddingLeft={1}
+				>
+					<text>
+						<span fg={COLORS.REASONING}>{"REASONING"}</span>
+					</text>
+					<code
+						content={cleanedContent}
+						filetype="markdown"
+						syntaxStyle={REASONING_MARKDOWN_STYLE}
+						streaming={isStreaming && isLastBlock}
+						drawUnstyledText={false}
+					/>
+				</box>
+			);
+		}
+
+		// For non-full-reasoning mode, show animated display only for the latest reasoning block
+		if (showReasoningTicker && isLastReasoningBlock && reasoningDisplay) {
+			return (
+				<text>
+					<span fg={COLORS.REASONING_DIM}>
+						{"// "}
+						{reasoningDisplay}
+					</span>
+				</text>
+			);
+		}
+		const durationLabel =
+			block.durationMs !== undefined
+				? ` · ${formatElapsedTime(block.durationMs, { style: "detailed" })}`
+				: "";
+		return (
+			<text>
+				<span fg={COLORS.REASONING_DIM}>
+					{"// REASONING"}
+					{durationLabel}
+				</span>
+			</text>
+		);
+	}
+
+	if (block.type === "tool") {
+		return (
+			<box flexDirection="column">
+				<ToolCallView call={block.call} result={block.result} showOutput={showToolOutput} />
+			</box>
+		);
+	}
+
+	if (block.type === "text") {
+		return (
+			<box flexDirection="column">
+				<DaemonText
+					content={block.content}
+					showLabel={isLastTextBlock && hasVisibleText(block.content)}
+					streaming={isStreaming}
+				/>
+			</box>
+		);
+	}
+
+	return null;
+}
+
+/**
+ * Helper to find if a block is the last text block in a list
+ */
+export function isLastTextBlockInList(blocks: ContentBlock[], block: ContentBlock): boolean {
+	const lastTextBlock = [...blocks].reverse().find((b) => b.type === "text");
+	return lastTextBlock === block;
+}
+
+/**
+ * Helper to find if a block is the last reasoning block in a list
+ */
+export function isLastReasoningBlockInList(blocks: ContentBlock[], block: ContentBlock): boolean {
+	const lastReasoningBlock = [...blocks].reverse().find((b) => b.type === "reasoning");
+	return lastReasoningBlock === block;
+}
+
+/**
+ * Helper to determine if a content block should be hidden entirely
+ * (e.g. reasoning blocks that only contain redacted content)
+ */
+export function shouldHideContentBlock(block: ContentBlock): boolean {
+	if (block.type === "reasoning") {
+		const cleanedContent = block.content.replace(/\[REDACTED\]/g, "");
+		if (cleanedContent.trim().length === 0 && block.content.includes("[REDACTED]")) {
+			return true;
+		}
+	}
+	return false;
+}

package/src/components/DaemonText.tsx

@@ -0,0 +1,34 @@
+import { formatMarkdownTables } from "../utils/markdown-tables";
+import { COLORS, DAEMON_MARKDOWN_STYLE } from "../ui/constants";
+
+export interface DaemonTextProps {
+	content: string;
+	showLabel?: boolean;
+	streaming?: boolean;
+}
+
+export function DaemonText({ content, showLabel = false, streaming = false }: DaemonTextProps) {
+	const maxWidth =
+		typeof process !== "undefined" && process.stdout?.columns ? process.stdout.columns : undefined;
+	// Trim trailing whitespace when not streaming to avoid gaps before subsequent blocks
+	const trimmedContent = streaming ? content : content.trimEnd();
+	const renderedContent = streaming ? trimmedContent : formatMarkdownTables(trimmedContent, { maxWidth });
+
+	return (
+		<box flexDirection="column">
+			{showLabel && (
+				<text>
+					<span fg={COLORS.DAEMON_LABEL}>DAEMON: </span>
+				</text>
+			)}
+			<code
+				content={renderedContent}
+				filetype="markdown"
+				syntaxStyle={DAEMON_MARKDOWN_STYLE}
+				conceal={true}
+				streaming={streaming}
+				drawUnstyledText={false}
+			/>
+		</box>
+	);
+}