Components › Agent Activity › Process vs Result Layout
AG04 · Activity

Process vs Result Layout

Purpose Separates agent reasoning/process from final outputs or artifacts. Users should be able to skip to the result while process remains auditable.
Use when An agent produces both reasoning/intermediate work AND a final deliverable — a report, an answer, a generated artifact. The user's primary interest is the deliverable; the reasoning is secondary but must not be discarded.
Do not use When the process and result are the same thing — for example, a short conversational answer where there is no separate artifact to present.
Failure mode prevented Agent reasoning dominates the UI and the actual result is buried. Users must scroll past verbose thinking to find the output. Power users cannot audit reasoning because it is mixed into the result.
Example Dark Academia
Dark Academia
The Atelier
Neon Tide
The Archive
Candlelight
The Conservatory
Complete Q1 Pipeline Error Analysis
6.3% Salesforce err rate
4.1% Workday err rate
211 records analyzed

Salesforce connector has the highest error rate at 6.3% (above the 5% threshold). Primary failure mode: OAuth token expiry not handled gracefully. Recommended: implement token refresh with exponential backoff retry on both connectors.

Overview
process-result-split — two-panel layout with process on left, result on rightprocess-result-stacked — process above result, visually separated, process collapsed by defaultprocess-result-tabbed — tab bar switches between "Process" and "Result" views
Design rule

The result is always primary. The process view is always available. Defaulting to the process view is an error — it prioritizes the agent's work over the user's goal.

Theming API

Override these CSS custom properties to apply your own visual treatment without touching the component's behavioral contracts.

Shared semantic tokens

Token Controls
--rad-surface-card Panel background
--rad-border-subtle Card and tab border
--rad-color-text-primary Result title and active tab
--rad-color-text-secondary Result body and process steps
--rad-color-text-meta Tab inactive and process note
--rad-color-approve Active tab indicator and focus ring
--rad-color-approve-hover Primary button hover
--rad-radius-card Card border radius

Component-scoped tokens

Token Controls
--rad-pr-tab-bg Tab bar background
--rad-pr-tab-color Inactive tab text
--rad-pr-tab-active-color Active tab text
--rad-pr-tab-active-border Active tab underline
--rad-pr-tab-border Tab bar bottom border
--rad-pr-panel-bg Panel content background
--rad-pr-process-note-color Process view note text

"*The result is what the user came for. The process is what the auditor needs. Design for both, but lead with the result.*"

← Previous Collapsible Agent Steps Next → Context Sources

Intellectual Property

RAD is the original work of Jackie Curry. All rights reserved. No portion may be reproduced, adapted, or incorporated into any product or system without express written permission.

Permitted: citation in academic or editorial contexts with full attribution.

Licensing

© 2025 Jackie Curry. All rights reserved. Publication date: 2025.

For licensing inquiries, connect on LinkedIn →