Patterns from production · Agents

The agent’s line leaves the work in view

One line above the work, four states.

The agent’s line leaves the work in viewLive demo

Try the controls to see the rule.

The rule

While an agent works on something the person is looking at (a space, a document, a page), its state is one line above the work, not a cover over it: a live dot while it builds, amber while it asks, green when done, red when stuck, with the Dock one tap away. The person watches the work change as the agent makes it.

Tokens used

  • motion.duration.base260ms
  • size.tap44px
  • space.md12px

Native spec · generated from this pattern and the shared token registry

SwiftUI
struct OvAgentLine: View {
    let status: String
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    var body: some View {
        HStack(spacing: OvScale.spaceMd) {
            Text(status).font(.body)
        }
        .frame(minHeight: OvScale.sizeTap)
        .animation(reduceMotion ? .none : .easeOut(duration: OvScale.motionDurationBase), value: status)
    }
}
// Tokens: motion.duration.base=260ms, size.tap=44px, space.md=12px
Compose
@Composable
fun OvAgentLine(status: String, reduceMotion: Boolean) {
    Row(
        modifier = Modifier.defaultMinSize(minHeight = OvScale.SizeTap),
        horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceMd),
    ) {
        Text(status, style = MaterialTheme.typography.bodyMedium)
    }
    // Apply motion only when !reduceMotion.
}
// Tokens: motion.duration.base=260ms, size.tap=44px, space.md=12px