@makefinks/daemon 0.1.0

package/src/components/TokenUsageDisplay.tsx

@@ -0,0 +1,92 @@
+/**
+ * Component for displaying token usage statistics.
+ */
+
+import { COLORS } from "../ui/constants";
+import { formatTokenCount } from "../utils/formatters";
+import { calculateCost, formatCost, formatContextUsage, type ModelMetadata } from "../utils/model-metadata";
+import type { TokenUsage } from "../types";
+
+interface TokenUsageDisplayProps {
+	usage: TokenUsage;
+	modelMetadata?: ModelMetadata | null;
+}
+
+export function TokenUsageDisplay({ usage, modelMetadata }: TokenUsageDisplayProps) {
+	const mainPromptTokens = usage.promptTokens;
+	const mainCompletionTokens = usage.completionTokens;
+	const mainTotalTokens = mainPromptTokens + mainCompletionTokens;
+
+	// Calculate cost if we have pricing info
+	const cost =
+		typeof usage.cost === "number"
+			? usage.cost
+			: modelMetadata?.pricing
+				? calculateCost(
+						mainPromptTokens + (usage.subagentPromptTokens ?? 0),
+						mainCompletionTokens + (usage.subagentCompletionTokens ?? 0),
+						modelMetadata.pricing,
+						usage.cachedInputTokens
+					)
+				: null;
+
+	// Calculate context usage percentage
+	const contextTotalTokens = mainTotalTokens;
+	const contextUsage = modelMetadata?.contextLength
+		? formatContextUsage(contextTotalTokens, modelMetadata.contextLength)
+		: null;
+
+	return (
+		<box
+			height={1}
+			width="100%"
+			flexShrink={0}
+			flexDirection="row"
+			justifyContent="center"
+			alignItems="center"
+		>
+			<text>
+				{/* Context usage: X/Y (Z%) */}
+				{modelMetadata?.contextLength && (
+					<>
+						<span fg={COLORS.TOKEN_USAGE_LABEL}>Tokens: </span>
+						<span fg={COLORS.TOKEN_USAGE}>{formatTokenCount(contextTotalTokens)}</span>
+						<span fg={COLORS.TOKEN_USAGE_LABEL}>/</span>
+						<span fg={COLORS.TOKEN_USAGE}>{formatTokenCount(modelMetadata.contextLength)}</span>
+						<span fg={COLORS.REASONING_DIM}> ({contextUsage})</span>
+						<span fg={COLORS.TOKEN_USAGE_LABEL}> · </span>
+					</>
+				)}
+
+				{/* Token breakdown: in/out */}
+				<span fg={COLORS.TOKEN_USAGE}>{formatTokenCount(mainPromptTokens)} in</span>
+				<span fg={COLORS.TOKEN_USAGE_LABEL}> / </span>
+				<span fg={COLORS.TOKEN_USAGE}>{formatTokenCount(mainCompletionTokens)} out</span>
+
+				{/* Reasoning tokens */}
+				{usage.reasoningTokens !== undefined && usage.reasoningTokens > 0 && (
+					<>
+						<span fg={COLORS.TOKEN_USAGE_LABEL}> / </span>
+						<span fg={COLORS.REASONING_DIM}>{formatTokenCount(usage.reasoningTokens)} reasoning</span>
+					</>
+				)}
+
+				{/* Cached tokens */}
+				{usage.cachedInputTokens !== undefined && usage.cachedInputTokens > 0 && (
+					<>
+						<span fg={COLORS.TOKEN_USAGE_LABEL}> / </span>
+						<span fg={COLORS.DAEMON_LABEL}>{formatTokenCount(usage.cachedInputTokens)} cached</span>
+					</>
+				)}
+
+				{/* Cost */}
+				{cost !== null && (
+					<>
+						<span fg={COLORS.TOKEN_USAGE_LABEL}> · </span>
+						<span fg={COLORS.TYPING_PROMPT}>{formatCost(cost)}</span>
+					</>
+				)}
+			</text>
+		</box>
+	);
+}

package/src/components/ToolCallView.tsx

@@ -0,0 +1,113 @@
+import { useMemo } from "react";
+import { COLORS } from "../ui/constants";
+import type { ToolCall } from "../types";
+import {
+	getToolLayout,
+	defaultToolLayout,
+	getDefaultAbbreviation,
+	ToolHeaderView,
+	ToolBodyView,
+	ResultPreviewView,
+	ErrorPreviewView,
+	getStatusBorderColor,
+} from "./tool-layouts";
+import { ApprovalPicker } from "./ApprovalPicker";
+import { useToolApprovalForCall } from "../hooks/use-tool-approval";
+
+interface ToolCallViewProps {
+	call: ToolCall;
+	result?: unknown;
+	showOutput?: boolean;
+}
+
+function ApprovalResultBadge({ result }: { result: "approved" | "denied" }) {
+	const isApproved = result === "approved";
+	const color = isApproved ? COLORS.STATUS_COMPLETED : COLORS.STATUS_FAILED;
+	const label = isApproved ? "APPROVED" : "DENIED";
+
+	return (
+		<box marginTop={1}>
+			<text>
+				<span fg={color}>
+					{">> "}
+					{label}
+				</span>
+			</text>
+		</box>
+	);
+}
+
+export function ToolCallView({ call, result, showOutput = true }: ToolCallViewProps) {
+	const layout = getToolLayout(call.name) ?? defaultToolLayout;
+	const isAwaitingApproval = call.status === "awaiting_approval";
+	const isRunning = call.status === "running" || call.status === "streaming";
+	const isFailed = call.status === "failed";
+
+	const { needsApproval, isActive, approve, deny, approveAll, denyAll } = useToolApprovalForCall(
+		call.toolCallId
+	);
+
+	const header = useMemo(() => layout.getHeader?.(call.input, result) ?? null, [call.input, result, layout]);
+
+	const body = useMemo(
+		() => layout.getBody?.(call.input, result, call) ?? null,
+		[call.input, result, call, layout]
+	);
+
+	const resultPreviewLines = useMemo(() => {
+		if (!showOutput) return null;
+		return layout.formatResult?.(result) ?? null;
+	}, [result, showOutput, layout]);
+
+	const toolColor =
+		call.status === "completed"
+			? COLORS.STATUS_COMPLETED
+			: isAwaitingApproval
+				? COLORS.STATUS_APPROVAL
+				: COLORS.TOOLS;
+	const toolName = layout.abbreviation ?? getDefaultAbbreviation(call.name);
+	const borderColor = getStatusBorderColor(call.status);
+
+	const customBody = useMemo(() => {
+		if (!layout.renderBody) return null;
+		return layout.renderBody({ call, result, showOutput });
+	}, [layout, call, result, showOutput]);
+
+	return (
+		<box
+			flexDirection="column"
+			backgroundColor={COLORS.TOOL_INPUT_BG}
+			borderStyle="single"
+			borderColor={borderColor}
+			paddingLeft={1}
+			paddingRight={1}
+			paddingTop={0}
+			paddingBottom={0}
+			width="100%"
+		>
+			<ToolHeaderView toolName={toolName} header={header} isRunning={isRunning} toolColor={toolColor} />
+
+			{customBody}
+
+			{!customBody && body && <ToolBodyView body={body} />}
+
+			{needsApproval && (
+				<ApprovalPicker
+					onApprove={approve}
+					onDeny={deny}
+					onApproveAll={approveAll}
+					onDenyAll={denyAll}
+					focused={isActive}
+				/>
+			)}
+
+			{showOutput && resultPreviewLines && resultPreviewLines.length > 0 && (
+				<ResultPreviewView lines={resultPreviewLines} />
+			)}
+
+			{isFailed && call.error && <ErrorPreviewView error={call.error} />}
+
+			{call.approvalResult && <ApprovalResultBadge result={call.approvalResult} />}
+		</box>
+	);
+}

package/src/components/TypingInputBar.tsx

@@ -0,0 +1,131 @@
+/**
+ * Shared typing input row used in both initial and conversation layouts.
+ * Ensures the OpenTUI input has a usable width and supports multi-line text.
+ */
+
+import type { KeyBinding, 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 TypingInputBarProps {
+	onSubmit: () => void;
+	onContentChange?: (value: string) => void;
+	onHistoryUp?: () => void;
+	onHistoryDown?: () => void;
+	placeholder?: string;
+	width?: number | "auto" | `${number}%`;
+	maxWidth?: number | "auto" | `${number}%`;
+	minWidth?: number | "auto" | `${number}%`;
+	height?: number;
+	textareaRef?: RefObject<TextareaRenderable | null>;
+	keyBindings?: KeyBinding[];
+}
+
+export function TypingInputBar({
+	onSubmit,
+	onContentChange,
+	onHistoryUp,
+	onHistoryDown,
+	placeholder = "",
+	width = "100%",
+	maxWidth = "100%",
+	minWidth = 20,
+	height = 4,
+	textareaRef,
+	keyBindings = [
+		{ name: "return", action: "submit" },
+		{ name: "linefeed", action: "newline" },
+	],
+}: TypingInputBarProps) {
+	const localRef = useRef<TextareaRenderable | null>(null);
+	const activeRef = textareaRef ?? localRef;
+
+	const handleContentChange = () => {
+		const text = activeRef.current?.plainText ?? "";
+		onContentChange?.(text);
+	};
+
+	const handlePaste = (event: PasteEvent) => {
+		debug.log("[TypingInputBar] 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, { source: "typing-onPaste" });
+		}
+		// Otherwise, let the textarea handle it
+	};
+
+	const handleKeyDown = (key: KeyEvent) => {
+		if (key.eventType !== "press") return;
+
+		if (key.name === "up" && onHistoryUp) {
+			key.preventDefault();
+			onHistoryUp();
+			return;
+		}
+		if (key.name === "down" && onHistoryDown) {
+			key.preventDefault();
+			onHistoryDown();
+			return;
+		}
+
+		if (key.name !== "v") return;
+		if (!(key.ctrl || key.meta || key.super)) return;
+		key.preventDefault();
+		void pasteClipboardIntoTextarea(activeRef.current, { source: "typing-shortcut" });
+	};
+
+	return (
+		<box flexDirection="column" width={width} maxWidth={maxWidth} minWidth={minWidth}>
+			<box
+				border={true}
+				borderStyle="single"
+				borderColor="#3f4651"
+				backgroundColor="#0d0d14"
+				flexDirection="row"
+				alignItems="stretch"
+				width="100%"
+				height={height}
+				paddingLeft={1}
+				paddingRight={1}
+			>
+				<box paddingTop={0} paddingRight={2}>
+					<text>
+						<span fg="#6b7280">{">"}</span>
+					</text>
+				</box>
+				<textarea
+					ref={activeRef}
+					placeholder={placeholder}
+					focused={true}
+					wrapMode="word"
+					keyBindings={keyBindings}
+					onContentChange={handleContentChange}
+					onPaste={handlePaste}
+					onKeyDown={handleKeyDown}
+					onSubmit={() => onSubmit()}
+					width="100%"
+					height="100%"
+					style={{
+						backgroundColor: "transparent",
+						focusedBackgroundColor: "transparent",
+						textColor: "#9ca3af",
+						focusedTextColor: "#e5e7eb",
+						cursorColor: COLORS.TYPING_PROMPT,
+						cursorStyle: { style: "block", blinking: true },
+					}}
+				/>
+			</box>
+			<box justifyContent="center" width="100%" marginTop={0}>
+				<text>
+					<span fg="#4b5563">Ctrl+V to paste · Ctrl+J for new line</span>
+				</text>
+			</box>
+		</box>
+	);
+}

package/src/components/tool-layouts/components.tsx

@@ -0,0 +1,120 @@
+import { TextAttributes } from "@opentui/core";
+import { COLORS } from "../../ui/constants";
+import type { ToolHeader, ToolBody, ToolBodyLine } from "./types";
+import type { ToolCallStatus } from "../../types";
+
+interface ToolHeaderViewProps {
+	toolName: string;
+	header: ToolHeader | null;
+	isRunning: boolean;
+	toolColor: string;
+}
+
+export function ToolHeaderView({ toolName, header, isRunning, toolColor }: ToolHeaderViewProps) {
+	return (
+		<box flexDirection="row" alignItems="center" justifyContent="space-between" width="100%">
+			<text>
+				<span fg={toolColor}>{"↯ "}</span>
+				<span fg={toolColor}>{toolName}</span>
+				{header?.primary && <span fg={COLORS.TOOL_INPUT_TEXT}>{` ${header.primary}`}</span>}
+				{header?.secondary && (
+					<span
+						fg={COLORS.REASONING_DIM}
+						attributes={header.secondaryStyle === "italic" ? TextAttributes.ITALIC : TextAttributes.NONE}
+					>
+						{` ${header.secondary}`}
+					</span>
+				)}
+			</text>
+			{isRunning && <spinner name="dots" color={COLORS.STATUS_RUNNING} />}
+		</box>
+	);
+}
+
+interface ToolBodyViewProps {
+	body: ToolBody;
+}
+
+function getLineColor(line: ToolBodyLine): string {
+	if (line.color) return line.color;
+	if (line.status) {
+		switch (line.status) {
+			case "running":
+				return COLORS.STATUS_RUNNING;
+			case "completed":
+				return COLORS.STATUS_COMPLETED;
+			case "failed":
+				return COLORS.STATUS_FAILED;
+			default:
+				return COLORS.STATUS_PENDING;
+		}
+	}
+	return COLORS.TOOL_INPUT_TEXT;
+}
+
+export function ToolBodyView({ body }: ToolBodyViewProps) {
+	return (
+		<box flexDirection="column" paddingLeft={2} marginTop={0}>
+			{body.lines.map((line, idx) => (
+				<box key={idx} flexDirection="row" alignItems="center">
+					{line.status === "running" ? (
+						<spinner name="dots" color={getLineColor(line)} />
+					) : line.icon ? (
+						<text>
+							<span fg={getLineColor(line)}>{line.icon}</span>
+						</text>
+					) : null}
+					<text marginLeft={line.icon || line.status === "running" ? 1 : 0}>
+						<span fg={getLineColor(line)} attributes={line.attributes ?? TextAttributes.NONE}>
+							{line.text}
+						</span>
+					</text>
+				</box>
+			))}
+		</box>
+	);
+}
+
+interface ResultPreviewViewProps {
+	lines: string[];
+}
+
+export function ResultPreviewView({ lines }: ResultPreviewViewProps) {
+	return (
+		<box flexDirection="column" paddingLeft={2}>
+			{lines.map((line, idx) => (
+				<text key={idx}>
+					<span fg={COLORS.REASONING_DIM}>{`› ${line}`}</span>
+				</text>
+			))}
+		</box>
+	);
+}
+
+interface ErrorPreviewViewProps {
+	error: string;
+	maxLength?: number;
+}
+
+export function ErrorPreviewView({ error, maxLength = 120 }: ErrorPreviewViewProps) {
+	const displayError = error.length > maxLength ? `${error.slice(0, maxLength)}…` : error;
+
+	return (
+		<box flexDirection="column" paddingLeft={2}>
+			<text>
+				<span fg={COLORS.STATUS_FAILED}>{`⚠ ${displayError}`}</span>
+			</text>
+		</box>
+	);
+}
+
+export function getStatusBorderColor(status: ToolCallStatus | undefined): string {
+	switch (status) {
+		case "completed":
+			return COLORS.TOOL_INPUT_BORDER;
+		case "failed":
+			return COLORS.STATUS_FAILED;
+		default:
+			return COLORS.TOOL_INPUT_BORDER;
+	}
+}

package/src/components/tool-layouts/defaults.ts

@@ -0,0 +1,9 @@
+import type { ToolLayoutConfig } from "./types";
+
+export const defaultToolLayout: ToolLayoutConfig = {
+	abbreviation: "tool",
+};
+
+export function getDefaultAbbreviation(toolName: string): string {
+	return toolName.length > 8 ? toolName.slice(0, 8) : toolName;
+}

package/src/components/tool-layouts/index.ts

@@ -0,0 +1,22 @@
+export type {
+	ToolLayoutConfig,
+	ToolHeader,
+	ToolBody,
+	ToolBodyLine,
+	ToolLayoutRenderProps,
+	ToolLayoutRegistry,
+} from "./types";
+
+export { registerToolLayout, getToolLayout, hasToolLayout, registry } from "./registry";
+
+export { defaultToolLayout, getDefaultAbbreviation } from "./defaults";
+
+export {
+	ToolHeaderView,
+	ToolBodyView,
+	ResultPreviewView,
+	ErrorPreviewView,
+	getStatusBorderColor,
+} from "./components";
+
+import "./layouts";

package/src/components/tool-layouts/layouts/bash.ts

@@ -0,0 +1,110 @@
+import type { ToolLayoutConfig, ToolHeader, ToolBody } from "../types";
+import { registerToolLayout } from "../registry";
+
+type UnknownRecord = Record<string, unknown>;
+
+function isRecord(value: unknown): value is UnknownRecord {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+interface BashInput {
+	command: string;
+	description: string;
+}
+
+function extractBashInput(input: unknown): BashInput | null {
+	if (!isRecord(input)) return null;
+	if (!("command" in input) || typeof input.command !== "string") return null;
+	const description =
+		"description" in input && typeof input.description === "string" ? input.description : "";
+	return { command: input.command, description };
+}
+
+function pickFirstNonEmpty(...parts: Array<string | undefined | null>): string {
+	for (const part of parts) {
+		if (typeof part === "string" && part.trim().length > 0) return part;
+	}
+	return "";
+}
+
+function formatBashResult(result: unknown): string[] | null {
+	if (!isRecord(result)) return null;
+	const success = "success" in result ? result.success : undefined;
+	const exitCode =
+		typeof result.exitCode === "number" || result.exitCode === null ? result.exitCode : undefined;
+
+	const stdout = typeof result.stdout === "string" ? result.stdout : "";
+	const stderr = typeof result.stderr === "string" ? result.stderr : "";
+	const error = typeof result.error === "string" ? result.error : "";
+
+	const body = pickFirstNonEmpty(stdout, stderr, error);
+	if (!body) {
+		if (typeof success === "boolean") {
+			const line = `success=${success}${exitCode !== undefined ? ` exit=${String(exitCode)}` : ""}`;
+			return [line];
+		}
+		return null;
+	}
+
+	const label = stdout.trim().length > 0 ? "stdout" : stderr.trim().length > 0 ? "stderr" : "error";
+	const meta =
+		typeof success === "boolean" || exitCode !== undefined
+			? ` (${typeof success === "boolean" ? `success=${success}` : ""}${exitCode !== undefined ? `${typeof success === "boolean" ? " " : ""}exit=${String(exitCode)}` : ""})`
+			: "";
+
+	const MAX_LINES = 4;
+	const MAX_CHARS_PER_LINE = 160;
+	const lines = body
+		.split("\n")
+		.map((l) => l.trimEnd())
+		.filter((l) => l.length > 0)
+		.slice(0, MAX_LINES)
+		.map((l) => (l.length > MAX_CHARS_PER_LINE ? `${l.slice(0, MAX_CHARS_PER_LINE - 1)}…` : l));
+
+	if (lines.length === 0) return [`${label}${meta}: (empty)`];
+	lines[0] = `${label}${meta}: ${lines[0]}`;
+	return lines;
+}
+
+export const bashLayout: ToolLayoutConfig = {
+	abbreviation: "bash",
+
+	getHeader: (input): ToolHeader | null => {
+		const bashInput = extractBashInput(input);
+		if (!bashInput) return null;
+		return {
+			secondary: bashInput.description,
+			secondaryStyle: "italic",
+		};
+	},
+
+	getBody: (input): ToolBody | null => {
+		const bashInput = extractBashInput(input);
+		if (!bashInput) return null;
+
+		const command = bashInput.command;
+		const lines = command.split("\n");
+		const isMultiLine = lines.length > 1;
+		const MAX_DISPLAY_LENGTH = 120;
+
+		let displayText: string;
+		if (isMultiLine) {
+			const firstLine = lines[0]?.trimEnd() ?? "";
+			const truncatedFirst =
+				firstLine.length > MAX_DISPLAY_LENGTH ? `${firstLine.slice(0, MAX_DISPLAY_LENGTH - 1)}…` : firstLine;
+			displayText = `${truncatedFirst} (+${lines.length - 1} more lines)`;
+		} else if (command.length > MAX_DISPLAY_LENGTH) {
+			displayText = `${command.slice(0, MAX_DISPLAY_LENGTH - 1)}…`;
+		} else {
+			displayText = command;
+		}
+
+		return {
+			lines: [{ text: displayText }],
+		};
+	},
+
+	formatResult: formatBashResult,
+};
+
+registerToolLayout("runBash", bashLayout);

package/src/components/tool-layouts/layouts/grounding.tsx

@@ -0,0 +1,98 @@
+import { COLORS } from "../../../ui/constants";
+import { registerToolLayout } from "../registry";
+import type { ToolHeader, ToolLayoutConfig, ToolLayoutRenderProps } from "../types";
+
+type UnknownRecord = Record<string, unknown>;
+
+function isRecord(value: unknown): value is UnknownRecord {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+interface GroundingSource {
+	url: string;
+	quote: string;
+	textFragment?: string;
+}
+
+interface GroundedStatement {
+	id: string;
+	statement: string;
+	source: GroundingSource;
+}
+
+interface GroundingInput {
+	action: "set" | "append";
+	items: GroundedStatement[];
+}
+
+function extractGroundingInput(input: unknown): GroundingInput | null {
+	if (!isRecord(input)) return null;
+	if (!("items" in input) || !Array.isArray(input.items)) return null;
+
+	const items = input.items as GroundedStatement[];
+	const action =
+		"action" in input && (input.action === "set" || input.action === "append")
+			? (input.action as "set" | "append")
+			: "append";
+
+	return { action, items };
+}
+
+function GroundingBody({ call }: ToolLayoutRenderProps) {
+	const input = extractGroundingInput(call.input);
+	if (!input || input.items.length === 0) return null;
+
+	const MAX_ITEMS = 4;
+	const visibleItems = input.items.slice(0, MAX_ITEMS);
+	const remainingCount = input.items.length - MAX_ITEMS;
+
+	return (
+		<box flexDirection="column" paddingLeft={2} marginTop={1}>
+			{visibleItems.map((item, idx) => {
+				let domain = "";
+				try {
+					const url = new URL(item.source.url);
+					domain = url.hostname;
+				} catch {
+					domain = item.source.url;
+				}
+
+				const MAX_LEN = 90;
+				const statement =
+					item.statement.length > MAX_LEN ? item.statement.slice(0, MAX_LEN) + "..." : item.statement;
+
+				return (
+					<box key={idx} flexDirection="column">
+						<text>
+							<span fg={COLORS.MENU_TEXT}>{statement}</span>
+						</text>
+						<text>
+							<span fg={COLORS.TOOLS}> └─ {domain}</span>
+						</text>
+					</box>
+				);
+			})}
+			{remainingCount > 0 && (
+				<text>
+					<span fg={COLORS.TOOLS}> + {remainingCount} more statements</span>
+				</text>
+			)}
+		</box>
+	);
+}
+
+export const groundingLayout: ToolLayoutConfig = {
+	abbreviation: "grounding",
+
+	getHeader: (input): ToolHeader | null => {
+		const data = extractGroundingInput(input);
+		if (!data) return null;
+		return {
+			secondary: `${data.action} ${data.items.length} item${data.items.length === 1 ? "" : "s"}`,
+		};
+	},
+
+	renderBody: GroundingBody,
+};
+
+registerToolLayout("groundingManager", groundingLayout);