@makefinks/daemon 0.3.0 → 0.4.0

package/package.json

@@ -28,7 +28,7 @@
 	},
 	"module": "src/index.tsx",
 	"type": "module",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"bin": {
 		"daemon": "dist/cli.js"
 	},

package/src/components/ContentBlockView.tsx

@@ -2,11 +2,12 @@
  * 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 { COLORS, REASONING_MARKDOWN_STYLE } from "../ui/constants";
+import { renderReasoningTicker } from "../ui/reasoning-ticker";
 import { formatElapsedTime, hasVisibleText } from "../utils/formatters";
+import { DaemonText } from "./DaemonText";
+import { ToolCallView } from "./ToolCallView";
 
 interface ContentBlockViewProps {
 	block: ContentBlock;
@@ -64,14 +65,7 @@ export function ContentBlockView({
 
 		// 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>
-			);
+			return renderReasoningTicker(reasoningDisplay);
 		}
 		const durationLabel =
 			block.durationMs !== undefined

package/src/components/ModelMenu.tsx

@@ -1,8 +1,8 @@
 import type { ScrollBoxRenderable, TextareaRenderable } from "@opentui/core";
 import { useKeyboard } from "@opentui/react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import type { ModelOption } from "../types";
 import { useMenuKeyboard } from "../hooks/use-menu-keyboard";
+import type { ModelOption } from "../types";
 import { COLORS } from "../ui/constants";
 import { formatContextWindowK, formatPrice } from "../utils/formatters";
 
@@ -58,15 +58,26 @@ export function ModelMenu({
 
 	const curatedIdSet = useMemo(() => new Set(sortedCurated.map((model) => model.id)), [sortedCurated]);
 
+	const savedModel = useMemo(() => {
+		if (!currentModelId) return null;
+		if (curatedIdSet.has(currentModelId)) return null;
+		const match = allModels.find((model) => model.id === currentModelId);
+		return match ?? { id: currentModelId, name: currentModelId };
+	}, [allModels, curatedIdSet, currentModelId]);
+
+	const savedModels = useMemo(() => (savedModel ? [savedModel] : []), [savedModel]);
+
 	const allModelsWithFallback = useMemo(() => {
 		if (!currentModelId) return allModels;
 		if (curatedIdSet.has(currentModelId)) return allModels;
-		if (allModels.some((model) => model.id === currentModelId)) return allModels;
+		if (savedModel) return allModels;
 		return [...allModels, { id: currentModelId, name: currentModelId }];
-	}, [allModels, curatedIdSet, currentModelId]);
+	}, [allModels, curatedIdSet, currentModelId, savedModel]);
 
 	const filteredAllModels = useMemo(() => {
-		const filtered = allModelsWithFallback.filter((model) => !curatedIdSet.has(model.id));
+		const filtered = allModelsWithFallback.filter(
+			(model) => !curatedIdSet.has(model.id) && model.id !== savedModel?.id
+		);
 		const query = searchQuery.trim().toLowerCase();
 		if (query.length < MIN_ALL_MODEL_QUERY_LENGTH) {
 			return [];
@@ -78,28 +89,44 @@ export function ModelMenu({
 			: filtered;
 
 		return matching.sort((a, b) => a.name.localeCompare(b.name));
-	}, [allModelsWithFallback, curatedIdSet, searchQuery]);
+	}, [allModelsWithFallback, curatedIdSet, savedModel?.id, searchQuery]);
 
-	const totalItems = sortedCurated.length + filteredAllModels.length;
+	const totalItems = sortedCurated.length + savedModels.length + filteredAllModels.length;
 
 	const initialIndex = useMemo(() => {
 		if (totalItems === 0) return 0;
 		const curatedIdx = sortedCurated.findIndex((model) => model.id === currentModelId);
 		if (curatedIdx >= 0) return curatedIdx;
+		const savedIdx = savedModels.findIndex((model) => model.id === currentModelId);
+		if (savedIdx >= 0) return sortedCurated.length + savedIdx;
 		const allIdx = filteredAllModels.findIndex((model) => model.id === currentModelId);
-		if (allIdx >= 0) return sortedCurated.length + allIdx;
+		if (allIdx >= 0) return sortedCurated.length + savedModels.length + allIdx;
 		return 0;
-	}, [sortedCurated, filteredAllModels, currentModelId, totalItems]);
+	}, [sortedCurated, savedModels, filteredAllModels, currentModelId, totalItems]);
 
 	const { selectedIndex } = useMenuKeyboard({
 		itemCount: totalItems,
 		initialIndex,
 		onClose,
 		onSelect: (selectedIdx) => {
-			const isCurated = selectedIdx < sortedCurated.length;
-			const model = isCurated
-				? sortedCurated[selectedIdx]
-				: filteredAllModels[selectedIdx - sortedCurated.length];
+			if (selectedIdx < sortedCurated.length) {
+				const model = sortedCurated[selectedIdx];
+				if (model) {
+					onSelect(model);
+				}
+				return;
+			}
+
+			const afterCurated = selectedIdx - sortedCurated.length;
+			if (afterCurated < savedModels.length) {
+				const model = savedModels[afterCurated];
+				if (model) {
+					onSelect(model);
+				}
+				return;
+			}
+
+			const model = filteredAllModels[afterCurated - savedModels.length];
 			if (model) {
 				onSelect(model);
 			}
@@ -124,7 +151,7 @@ export function ModelMenu({
 		}
 	});
 
-	const allSelectedIndex = selectedIndex - sortedCurated.length;
+	const allSelectedIndex = selectedIndex - sortedCurated.length - savedModels.length;
 	const isAllSectionSelected = allSelectedIndex >= 0;
 
 	const scrollRef = useRef<ScrollBoxRenderable | null>(null);
@@ -345,6 +372,25 @@ export function ModelMenu({
 					</>
 				)}
 
+				{savedModels.length > 0 ? (
+					<>
+						<box marginBottom={1} marginTop={1}>
+							<text>
+								<span fg={COLORS.DAEMON_LABEL}>[ SAVED ]</span>
+							</text>
+						</box>
+						<box flexDirection="column">
+							{savedModels.map((model, idx) =>
+								renderModelRow(
+									model,
+									sortedCurated.length + idx === selectedIndex,
+									model.id === currentModelId
+								)
+							)}
+						</box>
+					</>
+				) : null}
+
 				<box marginBottom={1} marginTop={1}>
 					<text>
 						<span fg={COLORS.DAEMON_LABEL}>[ ALL MODELS ]</span>

package/src/hooks/use-app-preferences-bootstrap.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from "react";
-import { AVAILABLE_MODELS, setOpenRouterProviderTag, setResponseModel } from "../ai/model-config";
+import { setOpenRouterProviderTag, setResponseModel } from "../ai/model-config";
 import type {
 	AppPreferences,
 	BashApprovalLevel,
@@ -94,11 +94,8 @@ export function useAppPreferencesBootstrap(
 			}
 
 			if (prefs?.modelId) {
-				const modelIdx = AVAILABLE_MODELS.findIndex((m) => m.id === prefs.modelId);
-				if (modelIdx >= 0) {
-					setResponseModel(prefs.modelId);
-					setCurrentModelId(prefs.modelId);
-				}
+				setResponseModel(prefs.modelId);
+				setCurrentModelId(prefs.modelId);
 			}
 
 			if (prefs?.openRouterProviderTag) {

package/src/hooks/use-reasoning-animation.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { REASONING_ANIMATION } from "../ui/constants";
 
 export interface ReasoningState {
@@ -57,11 +57,16 @@ export function useReasoningAnimation(): UseReasoningAnimationReturn {
 				const movedChars = queue.slice(0, charsToMove);
 				const remainingQueue = queue.slice(charsToMove);
 
-				// Add to display, keeping it at max width by trimming from the left
+				const terminalWidth =
+					typeof process !== "undefined" && process.stdout?.columns ? process.stdout.columns : undefined;
+				const maxWidth = terminalWidth ? Math.max(20, terminalWidth - 12) : REASONING_ANIMATION.LINE_WIDTH;
+				const lineWidth = Math.min(REASONING_ANIMATION.LINE_WIDTH, maxWidth);
+
+				// Add to display, restart when reaching the line width
 				setReasoningDisplay((display: string) => {
 					const newDisplay = display + movedChars;
-					if (newDisplay.length > REASONING_ANIMATION.LINE_WIDTH) {
-						return newDisplay.slice(-REASONING_ANIMATION.LINE_WIDTH);
+					if (newDisplay.length >= lineWidth) {
+						return movedChars;
 					}
 					return newDisplay;
 				});

package/src/ui/constants.ts

@@ -2,7 +2,7 @@
  * UI constants including colors, status text, and markdown syntax styles.
  */
 
-import { SyntaxStyle, RGBA } from "@opentui/core";
+import { RGBA, SyntaxStyle } from "@opentui/core";
 import { DaemonState } from "../types";
 
 // Status text displayed for each daemon state
@@ -27,9 +27,11 @@ export const STATE_COLOR_HEX: Record<DaemonState, string> = {
 
 // Animation settings for reasoning text ticker
 export const REASONING_ANIMATION = {
-	LINE_WIDTH: 120,
+	LINE_WIDTH: 200,
 	CHARS_PER_TICK: 6,
-	TICK_INTERVAL_MS: 16,
+	TICK_INTERVAL_MS: 12,
+	SEGMENT_LENGTH: 3,
+	PREFIX_COLOR: "#7a7a7a",
 	INTENSITY: 0.5,
 } as const;
 

package/src/ui/reasoning-ticker.tsx

@@ -0,0 +1,39 @@
+import { TextAttributes } from "@opentui/core";
+import { COLORS, REASONING_ANIMATION } from "./constants";
+
+export function renderReasoningTicker(reasoningDisplay: string) {
+	const segmentLength = REASONING_ANIMATION.SEGMENT_LENGTH;
+	const segments: Array<{ text: string; color: string }> = [];
+	const segmentCount = Math.max(1, Math.ceil(reasoningDisplay.length / segmentLength));
+	for (let index = 0; index < segmentCount; index += 1) {
+		const start = index * segmentLength;
+		const text = reasoningDisplay.slice(start, start + segmentLength);
+		const normalized = segmentCount > 1 ? index / (segmentCount - 1) : 1;
+
+		let color: string = COLORS.REASONING_DIM;
+		if (normalized >= 0.9) {
+			color = "#b2a2e0";
+		} else if (normalized >= 0.75) {
+			color = "#9c8ac8";
+		} else if (normalized >= 0.6) {
+			color = "#8774b0";
+		} else if (normalized >= 0.45) {
+			color = "#725e98";
+		} else if (normalized >= 0.3) {
+			color = "#5e4a80";
+		}
+
+		segments.push({ text, color });
+	}
+
+	return (
+		<text>
+			<span fg={REASONING_ANIMATION.PREFIX_COLOR}>{"// "}</span>
+			{segments.map((segment, index) => (
+				<span fg={segment.color} key={`reasoning-seg-${index}`} attributes={TextAttributes.ITALIC}>
+					{segment.text}
+				</span>
+			))}
+		</text>
+	);
+}