Agentic

Terminal

A shell command the agent runs, as one line: what it ran, how long it took, and how it ended. It opens to the output, which streams in with the newest line in view.

idle

Usage

import { Terminal } from "@mizen-labs/ui";

With the AI SDK

A tool result arrives only when the command exits. To stream the output while it runs, write it from the tool as a data part with the tool call's id; the AI SDK replaces a part with the same id, so the output grows in place.

// app/api/chat/route.ts: stream output while the command runs.
execute: async ({ command }, { toolCallId }) => {
	let output = "";
	for await (const chunk of run(command)) {
		output += chunk;
		// The same id replaces the part, so the output grows in place.
		writer.write({ data: { output }, id: toolCallId, type: "data-output" });
	}
	return { exitCode: await exitCodeOf(command), output };
},

import { useChat } from "@ai-sdk/react";
import { Terminal } from "@mizen-labs/ui";

export function CommandRun({ part, message }: { message: UIMessage; part: RunCommandPart }) {
	const live = message.parts.findLast(
		(other) => other.type === "data-output" && other.id === part.toolCallId
	);
	if (part.state === "output-available") {
		return (
			<Terminal
				command={part.input.command}
				exitCode={part.output.exitCode}
				output={part.output.output}
				status={part.output.exitCode === 0 ? "complete" : "error"}
			/>
		);
	}
	return (
		<Terminal
			command={part.input?.command ?? ""}
			output={live?.data.output}
			status="running"
		/>
	);
}

With TanStack AI

Read the command from the tool-call part's input, and the output and exit code from its result once it completes.

import { Terminal } from "@mizen-labs/ui";

export function CommandRun({ part }: { part: { input: { command: string }; output?: { exitCode: number; output: string } } }) {
	const result = part.output;
	return (
		<Terminal
			command={part.input.command}
			exitCode={result?.exitCode}
			output={result?.output}
			status={result ? (result.exitCode === 0 ? "complete" : "error") : "running"}
		/>
	);
}

Examples

Failed command

A non-zero exit opens the output, with terminal red kept for errors, and Retry.

Recommendations

Guidance	Practice
Do	Pass the output as it grows and the exit code once it ends, so a failure opens on its own. Put a turn's commands next to its tool calls, in the order they ran.

Usage boundaries

Guidance	Boundary
Scope	The application runs the command and streams its output. Terminal shows it; it never runs anything.
Scope	Output renders as text with red, bold, and dim kept. Other terminal colors show as plain text, and cursor moves are dropped.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`command`	`string`	`—`	The command as typed, shown in mono in the line.
`status`	`"running" \| "complete" \| "error"`	`—`	running while it runs; complete for exit 0, error otherwise. The output opens on its own once it starts and when the command fails.
`output`	`string`	`""`	Everything printed so far. Up to 16 lines show before it scrolls, the newest line stays in view unless the reader scrolls up, terminal red, bold, and dim are kept, and lines that redraw themselves keep their last state.
`exitCode / onRetry`	`number / () => void`	`—`	The exit code of a failed command, shown in the line, and Retry under it.
`duration`	`number`	`Measured`	Seconds it ran. Measured while the component watches it run; pass it for a command from history.