Input & Rendering

The two ends of every conversation turn — how your keystrokes enter the system, and how the AI's response appears on screen.

A Full Turn

Here's what a real turn looks like in the terminal. Notice how text streams in, tools show inline, the permission dialog appears, and diffs render — all before the final response:

Illustration

This mockup is a stylized explainer for the rendering flow, not a pixel-accurate reproduction of the current Claude Code CLI UI.

claude — ~/my-project

You Fix the null check bug in src/auth.ts

Claude I'll look at the auth file to understand the issue.

⏺Readsrc/auth.ts142 lines

⎿ Found it — line 42 accesses `user.email` without a null check.

Claude wants to edit src/auth.ts

y Allown Denya Always allow

⏺Editsrc/auth.ts

41 │ const token = generateToken(user);

42 │ - return { token, email: user.email };

42 │ + return { token, email: user?.email ?? "" };

43 │ }

⏺Bashnpm test -- --filter authexit 0

⎿ Fixed the null check on line 42. The issue was that

`user.email` could be undefined when the user

authenticates via SSO without an email. Tests pass.

> █

How Input Enters

⌨️

You press Enter

❓

Starts with / ?

📋

Yes → Command system

📨

No → UserMessage

📎

Attach files, images, URLs

🚀

Hand off to Query Engine

The PromptInput component handles multi-line input, command history (up/down arrows), tab completion, and slash command detection. See Command System for the / path.

How Output Renders

Rendering is progressive — text appears as it streams, not all at once. The pipeline:

Rendering Pipeline

AppState ─── message added ───────────── trigger

↓

React ─── reconciler diffs props ──── what changed?

↓

Ink ─── Yoga computes layout ───── where does it go?

↓

Diff ─── only changed cells ──────── minimal writes

↓

ANSI ─── escape codes to stdout ─── pixels on screen

This is the same idea as a web browser's rendering pipeline, but for terminal characters instead of DOM elements.

Interrupt Handling

Press Ctrl+C at any point during a turn to:

• Cancel running tools
• Abort the API stream
• Return to the input prompt
• Conversation history is preserved up to the interruption

Key Components

Component	Role
PromptInput	Text input, history, tab completion
Messages	Scrollable conversation view
MessageResponse	Markdown formatting for AI responses
PermissionRequest	Allow / Deny / Always Allow dialog
Spinner	Activity indicator during tool execution

Key Source Files

File	Purpose
src/screens/REPL.tsx	Main REPL screen
src/components/PromptInput/	User input handling
src/components/Messages/	Message display and scrolling
src/components/PermissionRequest/	Tool approval dialog