novacode 0.5.2 → 0.5.5

package/src/tui/app.tsx

@@ -1,19 +1,36 @@
 import chalk from "chalk"
 import { Box, render, Static, Text, useInput } from "ink"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import type { Agent } from "../agent/agent.ts"
 import { COMMANDS, dispatch } from "../commands/index.ts"
 import type { SessionStore } from "../session/store.ts"
-import type { Msg } from "../types.ts"
+import type { Msg, Prompts } from "../types.ts"
 import { checkForUpdate, getCurrentVersion } from "../update.ts"
-import { formatToolArgs, makeRelative } from "../util.ts"
-import { formatMarkdown } from "./markdown.ts"
+import { Cursor, LiveArea } from "./components/liveArea.tsx"
+import { hasMeaningfulContent, Message } from "./components/message.tsx"
+import { StatusBar } from "./components/statusBar.tsx"
+import { ConfirmPrompt, PasswordPrompt, SelectPrompt } from "./prompts.tsx"
+
+type PromptMode =
+	| { type: "chat" }
+	| {
+			type: "select"
+			message: string
+			options: Array<{ value: string; label: string; hint?: string }>
+			header?: string
+	  }
+	| {
+			type: "password"
+			message: string
+			validate?: (v: string) => string | undefined
+	  }
+	| { type: "confirm"; message: string }
+
 export async function interactive(
 	agent: Agent,
 	store: SessionStore,
 	sessionId: string,
 ): Promise<void> {
-	// Hide system cursor during session
 	process.stdout.write("\x1B[?25l")
 	const version = await getCurrentVersion()
 	process.stdout.write(`${chalk.cyan.bold("⚡ novacode")} ${chalk.gray(`v${version}`)}\n`)
@@ -22,37 +39,12 @@ export async function interactive(
 		const { waitUntilExit } = render(<App agent={agent} store={store} sessionId={sessionId} />)
 		await waitUntilExit()
 	} finally {
-		// Restore system cursor on exit
 		process.stdout.write("\x1B[?25h")
 	}
 }
 
-const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
-
-function Spinner() {
-	const [frame, setFrame] = useState(0)
-
-	useEffect(() => {
-		const timer = setInterval(() => {
-			setFrame((f) => (f + 1) % SPINNER_FRAMES.length)
-		}, 80)
-		return () => clearInterval(timer)
-	}, [])
-
-	return <Text color="yellow">{SPINNER_FRAMES[frame]}</Text>
-}
-
-function Cursor() {
-	const [visible, setVisible] = useState(true)
-	useEffect(() => {
-		const timer = setInterval(() => setVisible((v) => !v), 530)
-		return () => clearInterval(timer)
-	}, [])
-	return <Text color="green">{visible ? "│" : " "}</Text>
-}
-
 function App({
-	agent: initialAgent,
+	agent,
 	store,
 	sessionId,
 }: {
@@ -60,8 +52,7 @@ function App({
 	store: SessionStore
 	sessionId: string
 }) {
-	const [agent, _setAgent] = useState(initialAgent)
-	const [msgs, setMsgs] = useState<Msg[]>(initialAgent.messages)
+	const [msgs, setMsgs] = useState<Msg[]>(agent.messages)
 	const [stream, setStream] = useState("")
 	const [thinkStream, setThinkStream] = useState("")
 	const [busy, setBusy] = useState(false)
@@ -69,11 +60,15 @@ function App({
 	const [status, setStatus] = useState("")
 	const [usage, setUsage] = useState<{ in: number; out: number }>({ in: 0, out: 0 })
 	const [selCmdIdx, setSelCmdIdx] = useState(0)
-	const [cmdRunning, setCmdRunning] = useState(false)
+	const [mode, setMode] = useState<PromptMode>({ type: "chat" })
+	const resolveRef = useRef<((v: unknown) => void) | null>(null)
 	const history = useRef<string[]>([])
 	const hIdx = useRef(-1)
 	const abortCtrl = useRef<AbortController | null>(null)
-	const [updateInfo, setUpdateInfo] = useState<{ current: string; latest: string } | null>(null)
+	const [updateInfo, setUpdateInfo] = useState<{
+		current: string
+		latest: string
+	} | null>(null)
 
 	useEffect(() => {
 		const check = async () => {
@@ -94,19 +89,53 @@ function App({
 			)
 		: []
 
+	const prompts: Prompts = {
+		select: useCallback(
+			(config) =>
+				new Promise((resolve) => {
+					resolveRef.current = resolve as (v: unknown) => void
+					setMode({ type: "select", ...config })
+				}),
+			[],
+		),
+		password: useCallback(
+			(config) =>
+				new Promise((resolve) => {
+					resolveRef.current = resolve as (v: unknown) => void
+					setMode({ type: "password", ...config })
+				}),
+			[],
+		),
+		confirm: useCallback(
+			(config) =>
+				new Promise((resolve) => {
+					resolveRef.current = resolve as (v: unknown) => void
+					setMode({ type: "confirm", ...config })
+				}),
+			[],
+		),
+	}
+
+	function resolvePrompt(value: unknown) {
+		const fn = resolveRef.current
+		resolveRef.current = null
+		setMode({ type: "chat" })
+		fn?.(value)
+	}
+
+	function commitMsg(msg: Msg) {
+		setMsgs((prev) => [...prev, msg])
+		agent.setMessages([...agent.messages, msg])
+		store.append(sessionId, msg)
+	}
+
 	// biome-ignore lint/correctness/useExhaustiveDependencies: reset selection on input change
 	useEffect(() => {
 		setSelCmdIdx(0)
 	}, [input])
 
-	useEffect(() => {
-		if (!cmdRunning) {
-			process.stdout.write("\x1B[?25l")
-		}
-	}, [cmdRunning])
-
 	useInput((ch, key) => {
-		if (cmdRunning) return
+		if (mode.type !== "chat") return
 
 		if (key.escape) {
 			if (abortCtrl.current) {
@@ -147,7 +176,7 @@ function App({
 		if (!key.return) {
 			setInput((prev) => {
 				if (key.backspace || key.delete) return prev.slice(0, -1)
-				return prev + ch
+				return prev + (ch || "")
 			})
 			return
 		}
@@ -169,71 +198,34 @@ function App({
 		hIdx.current = -1
 
 		if (line.startsWith("/")) {
-			const cmdName = line.slice(1).split(" ")[0]?.toLowerCase() ?? ""
-			const isInteractive =
-				["providers", "prov", "config", "cfg", "models", "model"].includes(cmdName) &&
-				!line.includes(" ")
-
-			if (isInteractive) {
-				setCmdRunning(true)
-				// Small delay to let Ink clear
-				setTimeout(() => {
-					dispatch(line, agent, store, sessionId).then((r) => {
-						process.stdin.setRawMode?.(true)
-						setCmdRunning(false)
-						if (r) {
-							setMsgs((prev) => {
-								const updated: Msg[] = [
-									...prev,
-									{
-										role: "assistant",
-										content: [{ type: "text", text: r }],
-										model: "system",
-										provider: "system",
-										usage: { in: 0, out: 0 },
-										stop: "stop",
-										ts: Date.now(),
-									},
-								]
-								agent.setMessages(updated)
-								return updated
-							})
-						}
-					})
-				}, 50)
-				return
-			}
-
-			// Slash commands
-			dispatch(line, agent, store, sessionId).then((r) => {
+			dispatch(line, agent, store, sessionId, prompts).then((r) => {
 				if (r) {
-					setMsgs((prev) => {
-						const updated: Msg[] = [
-							...prev,
-							{
-								role: "assistant",
-								content: [{ type: "text", text: r }],
-								model: "system",
-								provider: "system",
-								usage: { in: 0, out: 0 },
-								stop: "stop",
-								ts: Date.now(),
-							},
-						]
-
-						agent.setMessages(updated)
-						return updated
+					commitMsg({
+						role: "assistant",
+						content: [{ type: "text", text: r }],
+						model: "system",
+						provider: "system",
+						usage: { in: 0, out: 0 },
+						stop: "stop",
+						ts: Date.now(),
 					})
 				}
 			})
 			return
 		}
 
+		const userMsg: Msg = { role: "user", content: line, ts: Date.now() }
+		commitMsg(userMsg)
+
 		abortCtrl.current = new AbortController()
-		const stream = agent.prompt(line, abortCtrl.current.signal)
+		const eventStream = agent.prompt(line, abortCtrl.current.signal)
+
+		runEventLoop(eventStream)
+	})
 
-		;(async () => {
-			for await (const ev of stream) {
+	async function runEventLoop(eventStream: ReturnType<Agent["prompt"]>) {
+		try {
+			for await (const ev of eventStream) {
 				switch (ev.type) {
 					case "start":
 						setBusy(true)
@@ -248,40 +240,21 @@ function App({
 						if (ev.text) setThinkStream((prev) => prev + ev.text)
 						break
 					case "assistant_msg":
+						commitMsg(ev.msg)
 						setStream("")
 						setThinkStream("")
-						setMsgs((prev) => {
-							const updated = [...prev, ev.msg]
-							agent.setMessages(updated)
-							return updated
-						})
-						store.append(sessionId, ev.msg)
+
 						break
 					case "tool_call":
 						setStatus(chalk.dim(`⏳ ${ev.call.name}…`))
 						break
 					case "tool_result":
-						setMsgs((prev) => {
-							const updated = [...prev, ev.result]
-							agent.setMessages(updated)
-							return updated
-						})
-						store.append(sessionId, ev.result)
-						{
-							const args = ev.args
-								? `(${Object.values(ev.args)
-										.map((v) => {
-											const val = typeof v === "string" ? makeRelative(v) : JSON.stringify(v)
-											return val.length > 20 ? `${val.slice(0, 20)}…` : val
-										})
-										.join(", ")})`
-								: ""
-							setStatus(
-								ev.result.isError
-									? chalk.red(`✗ ${ev.result.tool}${args}`)
-									: chalk.green(`✓ ${ev.result.tool}${args}`),
-							)
-						}
+						commitMsg(ev.result)
+						setStatus(
+							ev.result.isError
+								? chalk.red(`✗ ${ev.result.tool}`)
+								: chalk.green(`✓ ${ev.result.tool}`),
+						)
 						break
 					case "turn_end":
 						setStatus("")
@@ -290,77 +263,62 @@ function App({
 						if (ev.usage) setUsage(ev.usage)
 				}
 			}
-			abortCtrl.current = null
-			setBusy(false)
-			setStatus("")
-			setStream("")
-			setThinkStream("")
-		})().catch((err) => {
+		} catch (err) {
 			const errMsg: Msg = {
 				role: "assistant",
 				model: "system",
 				provider: "system",
-				content: [{ type: "text", text: chalk.red(`Error: ${err.message}`) }],
+				content: [{ type: "text", text: chalk.red(`Error: ${(err as Error).message}`) }],
 				usage: { in: 0, out: 0 },
 				stop: "error",
 				ts: Date.now(),
 			}
-			setMsgs((prev) => [...prev, errMsg])
+			commitMsg(errMsg)
+		} finally {
+			abortCtrl.current = null
 			setBusy(false)
-		})
-
-		// Record user msg immediately
-		const userMsg: Msg = { role: "user", content: line, ts: Date.now() }
-		setMsgs((prev) => {
-			const updated = [...prev, userMsg]
-			agent.setMessages(updated)
-			return updated
-		})
-		store.append(sessionId, userMsg)
-	})
+			setStream("")
+			setThinkStream("")
+			setStatus("")
+		}
+	}
 
-	if (cmdRunning) return null
+	if (mode.type === "select") {
+		return (
+			<SelectPrompt
+				message={mode.message}
+				options={mode.options}
+				header={mode.header}
+				onSelect={resolvePrompt}
+			/>
+		)
+	}
+	if (mode.type === "password") {
+		return (
+			<PasswordPrompt message={mode.message} validate={mode.validate} onSubmit={resolvePrompt} />
+		)
+	}
+	if (mode.type === "confirm") {
+		return <ConfirmPrompt message={mode.message} onConfirm={resolvePrompt} />
+	}
 
 	const visibleMsgs = msgs.filter(hasMeaningfulContent)
 	const isLiveActive = !!(stream || thinkStream || busy)
 
 	return (
 		<Box flexDirection="column" paddingX={1}>
-			{/* Messages - pushed to scrollback as they finish */}
 			<Static items={visibleMsgs}>
 				{(m, i) => <Message key={`${m.ts}-${i}`} msg={m} isFirst={i === 0} />}
 			</Static>
 
-			{/* Live Area (Streaming, active tool calls, working indicator) */}
-			{isLiveActive && (
-				<Box flexDirection="column" marginTop={visibleMsgs.length > 0 ? 1 : 0}>
-					{thinkStream && (
-						<Text dimColor italic>
-							{thinkStream}
-						</Text>
-					)}
-					{stream && (
-						<Box flexDirection="row">
-							<Box flexGrow={1} flexShrink={1}>
-								<Text>
-									{formatMarkdown(stream)}
-									{!input && <Cursor />}
-								</Text>
-							</Box>
-						</Box>
-					)}
-					{busy && !stream && (
-						<Box flexDirection="row">
-							<Box marginRight={1}>
-								<Spinner />
-							</Box>
-							<Text dimColor>{status ? status.replace("⏳ ", "") : chalk.yellow("working…")}</Text>
-						</Box>
-					)}
-				</Box>
-			)}
+			<LiveArea
+				stream={stream}
+				thinkStream={thinkStream}
+				busy={busy}
+				status={status}
+				hasMessages={visibleMsgs.length > 0}
+			/>
 
-			{/* Input & Footer (Live) */}
 			<Box flexDirection="column" marginTop={visibleMsgs.length > 0 || isLiveActive ? 1 : 0}>
 				{updateInfo && (
 					<Box
@@ -393,155 +351,14 @@ function App({
 					</Box>
 				</Box>
 
-				{/* Dynamic Status / Info Line */}
-				<Box justifyContent="space-between">
-					<Box>
-						{suggestions.length > 0 ? (
-							<Box flexDirection="column" marginLeft={2}>
-								{suggestions.map((s, i) => (
-									<Box key={s.name}>
-										<Text
-											color={i === selCmdIdx ? "black" : "yellow"}
-											backgroundColor={i === selCmdIdx ? "yellow" : undefined}
-										>
-											/{s.name.padEnd(10)}
-										</Text>
-										<Text dimColor> {s.desc}</Text>
-									</Box>
-								))}
-							</Box>
-						) : (
-							<Text dimColor>Enter to send · /help for commands</Text>
-						)}
-					</Box>
-
-					<Box>
-						<Text dimColor>{formatTokenUsage(usage.in, agent.model.contextWindow)}</Text>
-						<Text dimColor> │ </Text>
-						<Text dimColor>{agent.model.id}</Text>
-						{busy && <Text dimColor> │ Esc to stop</Text>}
-					</Box>
-				</Box>
+				<StatusBar
+					model={agent.model}
+					usage={usage}
+					busy={busy}
+					suggestions={suggestions}
+					selCmdIdx={selCmdIdx}
+				/>
 			</Box>
 		</Box>
 	)
 }
-
-function fmtK(n: number): string {
-	const k = n / 1000
-	return k >= 100 ? `${Math.round(k)}K` : `${k.toFixed(1)}K`
-}
-
-function formatTokenUsage(used: number, contextWindow: number): string {
-	if (used === 0) return `0/${fmtK(contextWindow)}`
-	const pct = Math.round((used / contextWindow) * 100)
-	return `${fmtK(used)}/${fmtK(contextWindow)} (${pct}%)`
-}
-
-const TOOL_STYLE: Record<string, string> = {
-	read: "blue",
-	write: "magenta",
-	edit: "yellow",
-	bash: "cyan",
-	glob: "green",
-	find: "green",
-	grep: "green",
-}
-
-function hasMeaningfulContent(msg: Msg): boolean {
-	if (msg.role === "user") return true
-	if (msg.role === "tool_result") return true
-	if (msg.role === "assistant") {
-		if (msg.model === "system") return true
-		return msg.content.some((c) => {
-			if (c.type === "thinking") return c.text.trim().length > 0
-			if (c.type === "text") return c.text.trim().length > 0
-			return false
-		})
-	}
-	return false
-}
-
-function Message({ msg, isFirst }: { msg: Msg; isFirst: boolean }) {
-	if (msg.role === "user") {
-		return (
-			<Box marginTop={isFirst ? 0 : 1} flexDirection="row">
-				<Box flexShrink={0} marginRight={1}>
-					<Text bold color="green">
-						{">"}
-					</Text>
-				</Box>
-				<Box flexGrow={1} flexShrink={1}>
-					<Text>
-						{typeof msg.content === "string"
-							? msg.content
-							: msg.content.map((c) => (c.type === "text" ? c.text : "")).join("")}
-					</Text>
-				</Box>
-			</Box>
-		)
-	}
-
-	if (msg.role === "assistant") {
-		if (msg.model === "system") {
-			return (
-				<Box flexDirection="column" marginTop={0}>
-					{msg.content.map((c, i) =>
-						// biome-ignore lint/suspicious/noArrayIndexKey: stable turn content
-						c.type === "text" ? <Text key={i}>{formatMarkdown(c.text)}</Text> : null,
-					)}
-				</Box>
-			)
-		}
-
-		// Don't render empty assistant messages (often just tool call containers)
-		const hasVisibleContent = msg.content.some((c) => c.type === "text" || c.type === "thinking")
-		if (!hasVisibleContent) return null
-
-		return (
-			<Box flexDirection="column" marginTop={0}>
-				{msg.content.map((c, i) => {
-					if (c.type === "thinking") {
-						return (
-							// biome-ignore lint/suspicious/noArrayIndexKey: stable turn content
-							<Text key={i} dimColor italic>
-								{c.text}
-							</Text>
-						)
-					}
-					if (c.type === "text") {
-						// biome-ignore lint/suspicious/noArrayIndexKey: stable turn content
-						return <Text key={i}>{formatMarkdown(c.text)}</Text>
-					}
-					return null
-				})}
-			</Box>
-		)
-	}
-
-	if (msg.role === "tool_result") {
-		const args = msg.args ? formatToolArgs(msg.args, true) : ""
-
-		const resText = msg.content
-			.map((c) => (c.type === "text" ? c.text : ""))
-			.join("")
-			.trim()
-
-		const isRead = msg.tool === "read"
-		const lineCount = isRead ? resText.split("\n").length : 0
-		const color = TOOL_STYLE[msg.tool] || "white"
-
-		return (
-			<Box flexDirection="row">
-				<Text color={msg.isError ? "red" : "green"}>{msg.isError ? "✗" : "✓"} </Text>
-				<Text color={color} bold>
-					{msg.tool}
-				</Text>
-				{args && <Text> {args}</Text>}
-				{isRead && !msg.isError && <Text dimColor> ({lineCount} lines)</Text>}
-				{msg.isError && resText && <Text color="red"> {resText.slice(0, 80)}</Text>}
-			</Box>
-		)
-	}
-	return null
-}

package/src/tui/components/liveArea.tsx

@@ -0,0 +1,73 @@
+import chalk from "chalk"
+import { Box, Text } from "ink"
+import { useEffect, useState } from "react"
+import { formatMarkdown } from "../markdown.ts"
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+
+export function Spinner() {
+	const [frame, setFrame] = useState(0)
+
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setFrame((f) => (f + 1) % SPINNER_FRAMES.length)
+		}, 80)
+		return () => clearInterval(timer)
+	}, [])
+
+	return <Text color="yellow">{SPINNER_FRAMES[frame]}</Text>
+}
+
+export function Cursor() {
+	const [visible, setVisible] = useState(true)
+	useEffect(() => {
+		const timer = setInterval(() => setVisible((v) => !v), 530)
+		return () => clearInterval(timer)
+	}, [])
+	return <Text color="green">{visible ? "│" : " "}</Text>
+}
+
+export function LiveArea({
+	stream,
+	thinkStream,
+	busy,
+	status,
+	hasMessages,
+}: {
+	stream: string
+	thinkStream: string
+	busy: boolean
+	status: string
+	hasMessages: boolean
+}) {
+	const isActive = !!(stream || thinkStream || busy)
+	if (!isActive) return null
+
+	return (
+		<Box flexDirection="column" marginTop={hasMessages ? 1 : 0}>
+			{thinkStream && (
+				<Text dimColor italic>
+					{thinkStream}
+				</Text>
+			)}
+			{stream && (
+				<Box flexDirection="row">
+					<Box flexGrow={1} flexShrink={1}>
+						<Text>
+							{formatMarkdown(stream)}
+							<Cursor />
+						</Text>
+					</Box>
+				</Box>
+			)}
+			{busy && !stream && (
+				<Box flexDirection="row">
+					<Box marginRight={1}>
+						<Spinner />
+					</Box>
+					<Text dimColor>{status ? status.replace("⏳ ", "") : chalk.yellow("working…")}</Text>
+				</Box>
+			)}
+		</Box>
+	)
+}