Build an Autonomous Agent Live Log Terminal UI on iOS

A live log terminal for an autonomous agent is a streaming, monospaced list that pins to the newest line while the agent runs, then gets out of the way the moment a user scrolls up to read. In SwiftUI that is a ScrollView with a LazyVStack and a ScrollViewReader that scrolls to the last line as new ones arrive, plus a capped buffer so thousands of lines stay smooth. The screen itself, the terminal panel, the status header, the color-coded levels, is the fastest part to get right by starting from a free VP0 design and building it with Claude Code or Cursor. The agent runtime and the streaming transport are your code; the interface is the design’s job.

What does an agent live log terminal UI need to do?

It needs to stream lines as they happen, stay readable, and respect where the user is looking. An autonomous agent emits a steady feed of steps, tool calls, and output, so the view has to append continuously without flicker, render in a monospaced font so columns and code line up, and auto-scroll to the newest line while work is in progress. The moment a user scrolls up to read something, auto-scroll has to pause, or the log yanks them back to the bottom and becomes unusable.

Three more things separate a real agent console from a plain text dump. Lines carry a level, an informational step, a tool call, or an error, and color makes the feed scannable at a glance. Long runs produce a lot of output, so the view has to handle thousands of lines without stutter. And tool calls often have structured input and output worth collapsing, so the log reads as a summary by default and expands on demand.

Building the auto-scrolling log in SwiftUI

The core is a ScrollViewReader wrapped around a ScrollView and a LazyVStack, scrolling to the last line whenever the line count changes. LazyVStack only builds the rows that are visible, which is what keeps a long log cheap to render, and ScrollViewReader gives you the scrollTo call that pins the view to the newest entry.

ScrollViewReader { proxy in
    ScrollView {
        LazyVStack(alignment: .leading, spacing: 2) {
            ForEach(lines) { line in
                Text(line.text)
                    .font(.system(.footnote, design: .monospaced))
                    .foregroundStyle(line.level.color)
                    .id(line.id)
            }
        }
        .padding(.horizontal, 12)
    }
    .onChange(of: lines.count) { _, _ in
        guard stickToBottom else { return }
        withAnimation(.easeOut(duration: 0.15)) {
            proxy.scrollTo(lines.last?.id, anchor: .bottom)
        }
    }
}

Each line needs a stable id so the ScrollView can target it and so the list does not rebuild rows it already has. The monospaced design parameter is what makes the panel read as a terminal rather than body text, in line with Apple’s typography guidance on using monospaced styles for code and aligned data.

Wiring the stream to the view

The view is only half the job; it needs a source that pushes lines as the agent produces them. Model the feed as an async sequence the screen consumes in a Task, where each element is a chunk the agent emitted and the task appends it to the line buffer. For a remote agent, that source is usually a server-sent events stream or a chunked HTTP response read through URLSession bytes; for a local loop, it is an AsyncStream your agent yields into.

Two rules keep it robust. Start the consumer in a .task {} modifier so it cancels automatically when the screen goes away, which stops a finished or abandoned run from leaking work in the background. And apply the same batching on the input side, accumulating a few chunks before touching @State, so a fast stream does not push the view into hundreds of updates a second. With the source and the view both batched, the log stays smooth from the first token to the last.

Keeping auto-scroll from fighting the user

The single detail that makes or breaks the experience is a stickToBottom flag that turns auto-scroll off when the user scrolls away from the latest line. Without it, every new agent line drags the viewport back to the bottom, so anyone trying to read an earlier step gets pulled forward mid-sentence. The fix is to track whether the user is at the bottom and only auto-scroll while that is true.

When auto-scroll is paused, show a small “jump to latest” control so the user can return with one tap, and re-enable sticking once they are back at the bottom. This is exactly how a healthy tail -f or the Xcode console behaves: it follows new output until you take manual control, then waits for you. The same pattern is worth its own treatment in the terminal log auto-scroll UI breakdown, since getting the stick-and-release logic right is most of the work.

Handling thousands of streaming lines without jank

A long agent run can produce tens of thousands of lines, so the view needs a capped buffer and batched updates to stay smooth. Keep only the most recent lines in memory, a cap around 5,000 lines works well for a console, and drop older ones from the front as new ones arrive; if the full history matters, persist it to disk or a file and keep the live view bounded. An unbounded array is the most common reason an agent log starts smooth and slowly grinds to a halt.

How you append matters as much as how many you keep. Updating state on every single token forces SwiftUI to re-evaluate the list constantly, so coalesce rapid output into small batches, for example flushing on a short timer or per line rather than per character. Combined with LazyVStack and stable ids, batching keeps scrolling fluid even while the agent floods the feed. For logging the same events on the system side, Apple’s Logger API is the native way to record structured messages outside the on-screen view.

Color, levels, and collapsible tool calls

Structure is what turns a wall of text into something a user can actually follow. Give each line a level and a color: a neutral tone for ordinary steps, an accent for tool calls, and a clear warning color for errors, so the eye finds the important lines without reading every word. A muted timestamp at the start of each line helps users correlate the log with what the agent was doing.

Tool calls deserve special handling because their input and output can be long. Render the call as a single summary row by default, the tool name and a short result, and let the user expand it to see the full arguments and response. That keeps the feed legible during a busy run while preserving the detail for debugging. The related AI agent thinking animation covers the in-between state, showing the agent is working before a line resolves, which pairs naturally with a streaming log. When the agent proposes a consequential action, a human-in-the-loop approval swipe UI gates it before it runs.

Designing the screen fast

The terminal panel, status header, and controls are a known layout, so starting from a finished design beats positioning a monospaced stack by hand. A complete agent console screen has the scrolling log, a header with run status and a stop control, the jump-to-latest button, and often a compact input for steering the agent. Spacing, contrast for the color levels, and a readable monospaced size are fiddly to tune, which is where a design starting point saves real time.

The VP0 library fits this handoff because every design has a hidden source page an AI builder reads from a pasted link, so you can open a terminal or agent layout, copy its link, and prompt your tool:

Build this as a SwiftUI agent log terminal screen.
Read the layout and tokens from this VP0 source page: <pasted VP0 link>.
Use a ScrollViewReader that sticks to the newest line, a 5,000-line cap,
and color the rows by log level.

For the surrounding pieces, the AI agent chat UI components cover the conversational side many agent apps pair with a log. VP0 gives you the interface and the structure; the agent loop, the tool execution, and the streaming transport stay your code, which is where the actual product lives.

Common mistakes building an agent log UI

Most agent logs fail on a handful of issues. Calling scrollTo on every token, instead of when the line count changes and only while sticking to the bottom, makes the view jitter and burns CPU. Letting the line array grow without a cap turns a smooth console into a slideshow after a few minutes of output. And rebuilding rows because lines lack stable ids forces SwiftUI to re-diff the whole list on every append.

Two more are about feel. Auto-scrolling while the user is reading an earlier line is the fastest way to make the log frustrating, so the stick-to-bottom logic is not optional. And rendering every line in the same color leaves users scanning text for errors that a single red row would have surfaced instantly. None of these need exotic code, just the count-based scroll trigger, a bounded buffer, stable ids, and a level on each line.

The SwiftUI piece that makes the pin-to-bottom work

The auto-follow behavior is a documented SwiftUI capability, not a hand-rolled hack. Apple’s ScrollViewReader documentation provides a proxy that programmatically scrolls to a given view id, which is exactly what pins the terminal to the newest line: append a row, then scroll to its id as it arrives. Pairing that with a LazyVStack so thousands of lines render lazily, and a capped buffer so the list stays bounded, is what keeps a high-rate log smooth on device. Knowing the pin-to-bottom is one ScrollViewReader call, and that it should yield the moment the user scrolls up, is the difference between a terminal that follows the agent and one that fights the reader.

What to choose

For almost every agent console, choose the native SwiftUI path: a ScrollViewReader over a LazyVStack, a count-based auto-scroll that respects a stick-to-bottom flag, a capped buffer around 5,000 lines, and a color per log level. It handles real-time output, stays smooth under load, and reads like a proper terminal without any third-party dependency. Reach for a heavier text engine only if you need full ANSI rendering or selection behavior beyond what Text gives you.

Build the streaming and the buffer first as a small prototype, then put a real interface on it: start from a free VP0 design, generate the SwiftUI screen with Claude Code or Cursor, and keep your effort on the agent loop and the transport, which are the parts that make the console worth watching.

Frequently asked questions

How do I build an autonomous agent live log terminal UI on iOS?

Use a SwiftUI ScrollView with a LazyVStack of monospaced lines inside a ScrollViewReader, and call scrollTo the newest line whenever the line count changes, but only while the user is at the bottom. Cap the in-memory buffer to around 5,000 lines, batch rapid updates, and color each line by level. Start the screen from a free VP0 terminal design and build it with Claude Code or Cursor, then wire it to your agent’s stream.

How do I make a SwiftUI log auto-scroll to the latest line?

Wrap the list in a ScrollViewReader, give every line a stable id, and use onChange(of: lines.count) to call proxy.scrollTo(lines.last?.id, anchor: .bottom). Gate that call behind a flag that is true only when the user is already at the bottom, so reading an earlier line is not interrupted. A short animation makes the follow smooth without feeling jumpy.

How do I keep a streaming log fast with thousands of lines?

Cap the live buffer to a few thousand lines and drop older entries from the front, since an unbounded array is what makes a log slowly freeze. Use LazyVStack so only visible rows render, give lines stable ids so rows are not rebuilt, and batch rapid output instead of updating state on every token. Persist the full history to a file if you need it beyond the live view.

Should the log auto-scroll while the user is scrolling up?

No. Auto-scroll should pause the moment the user moves away from the latest line, then resume when they return to the bottom. Show a “jump to latest” button while paused so returning is one tap. This stick-and-release behavior is how a terminal tail and the Xcode console work, and it is the difference between a log that is usable during a run and one that fights the reader.

Where can I get a free template for an agent terminal screen?

VP0 is a free iOS design library where each screen has an AI-readable source page, so you can browse a terminal or agent-console layout, copy its link, and have Claude Code or Cursor build it as a SwiftUI screen with the scrolling log, status header, and color levels wired up. You supply the agent loop and the streaming transport; the interface comes from the design.