@makefinks/daemon 0.3.0 → 0.3.1

package/package.json

@@ -28,7 +28,7 @@
 	},
 	"module": "src/index.tsx",
 	"type": "module",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"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/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);
 
+				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, keeping it at max width by trimming from the left
 				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 newDisplay.slice(-lineWidth);
 					}
 					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,38 @@
+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}`}>
+					{segment.text}
+				</span>
+			))}
+		</text>
+	);
+}