Screen · AI

Agent Task

An agent task screen with a live timeline of tool calls, durations and expandable results.

An agent task screen: a heavy uppercase task title, progress and elapsed time, and an activity timeline with morphing status glyphs, live counting durations, a sheen on the running step, expandable input and output blocks and a collapsing summary with rolling counts.

SwiftUIiOS 17.0+tool-execution-card

Get Swift Pieces Pro

$199 once, every piece included. See how installing works · Sign in

What's included

SwiftUI source you own, built on Apple frameworks only.

A task screen with progress, elapsed time and actions
Morphing status glyphs and live counting durations
Expandable input and output blocks
A collapsing summary with rolling counts

In the Build Kit

AI Assistant (recipe). Your agent builds around this screen in the same design.

Implementation notes

How it behaves, what it handles, and the decisions behind it.

An agent task screen: a heavy uppercase task title, context chips, a progress block with the step count, elapsed time and a dial, and ToolExecutionCard as the activity timeline. Tool calls are a vertical timeline: a glyph that morphs pending → running → done or failed with symbolEffect(.replace), the name in monospace, and a duration that counts up from startedAt while running and settles to the final value. The running step carries a soft sheen. Tap a step to reveal its input and output in a monospaced block; tap the header and the card collapses into a one-line summary whose counts roll with numericText. Haptics fire on completion and failure.

Notes

Feed it [ToolStep] and update statuses, startedAt and duration as your agent reports progress; identity comes from id, so rows animate in place.
The connector line between glyphs tints once a step is done, so the timeline reads as progress at a glance.
isExpanded is optional: pass a binding to collapse from outside, or let the card manage it.
Reduce Motion stops the sheen and arc, drops the glyph bounce and uses ease-outs for expansion.
Rows are buttons with the status in their label and the duration as their value; the header announces the count and whether it is expanded.
On the screen, the dial and elapsed time read the same steps inside one TimelineView that pauses when nothing runs. The floating bar pauses the run or stops it, which fails the running step and shows a retry in place of the drafted reply.
ToolExecutionCardExample at the end of ToolExecutionCard.swift is the Agent Task screen from the preview.

Keep building

Pieces that work well next to this one.

Screen · AI

Chat

A complete AI chat with streaming replies, a composer that stops generation and follow-scroll.

Screen · AI

Research

A research answer that writes itself word by word, with sources and a follow-up bar.

Screen · AI

Ask

An assistant home with a briefing, suggested prompts and a composer that grows, attaches and records.

Agent Task

An agent task screen with a live timeline of tool calls, durations and expandable results.

SwiftUIiOS 17.0+tool-execution-card

Notes

Feed it [ToolStep] and update statuses, startedAt and duration as your agent reports progress; identity comes from id, so rows animate in place.

The connector line between glyphs tints once a step is done, so the timeline reads as progress at a glance.

isExpanded is optional: pass a binding to collapse from outside, or let the card manage it.

Reduce Motion stops the sheen and arc, drops the glyph bounce and uses ease-outs for expansion.

Rows are buttons with the status in their label and the duration as their value; the header announces the count and whether it is expanded.

On the screen, the dial and elapsed time read the same steps inside one TimelineView that pauses when nothing runs. The floating bar pauses the run or stops it, which fails the running step and shows a retry in place of the drafted reply.

ToolExecutionCardExample at the end of ToolExecutionCard.swift is the Agent Task screen from the preview.