Use agent plan preview when an AI agent will execute a multi-step plan and users need to inspect, edit, approve, or constrain the plan before execution; task list for known user-owned tasks; recommended next action for one contextual suggestion; human approval gate for a paused runtime authorization point; and step navigation for a fixed user journey.
Use agent plan preview when an AI agent will execute a multi-step plan and users need to inspect, edit, approve, or constrain the plan before execution; task list for known user-owned tasks; recommended next action for one contextual suggestion; human approval gate for a paused runtime authorization point; and step navigation for a fixed user journey.
Practice the judgment: Imagine this situation: The agent runs a multi-step plan after showing only a one-line summary. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Agent plan preview | Task list | Recommended next action | Human approval gate | Step navigation / step indicator |
|---|---|---|---|---|---|
| UI or UX | UI + UX - Pre-execution preview of an AI agent's proposed multi-step plan, tools, data access, and expected outputs | UI + UX - Component-level list of linked task rows with names, hints, and statuses | UI + UX - Context-sensitive workflow action suggested for the user's current record, case, conversation, or task | UI + UX - Runtime checkpoint that pauses AI or automation until an eligible human authorizes the next step | UI + UX - Linear multistep task progress indicator |
| UI guidance | Render agent plan preview as a pre-run plan with objective, ordered steps, planned tools, data sources, permissions, assumptions, dependencies, approval gates, expected outputs, and controls to edit, approve, run, save, or cancel. | Give each control a clear label and visible state. | Render the recommended next action as a bounded suggestion card or action slot that names the action, trigger context, expected outcome, owner, due time or urgency, eligibility status, and why the system is suggesting it now. | Render a human approval gate as a paused automation checkpoint with the proposed action, tool or workflow step, triggering rule, risk level, payload snapshot, requester or agent, approver eligibility, timeout, and explicit approve, reject, edit, cancel, or bypass controls. | Show a compact ordered list of named steps near the task heading, with visually distinct completed, current, upcoming, optional, and error states. |
| UX guidance | Use agent plan preview when users need to understand and shape what an AI agent will do before it starts calling tools, changing records, sending messages, spending budget, or making external side effects. | Use task list when users need to scan a known set of service tasks, understand what each task is, choose a task to start or resume, and see each task's current status. | Keep recommended next action separate from broad recommendations, task lists, primary buttons, assignments, approvals, and review queues because it is optional, contextual, explainable, and directly tied to the current work state. | Use human approval gate when automation is ready to act but policy, risk, confidence, cost, access, publication, deployment, customer impact, or legal consequence requires a human decision before execution continues. | Use step navigation to reduce uncertainty in long linear tasks by showing where users are, what is done, and what remains. |
| Good UI | A sales assistant previews a six-step account-research plan with CRM lookup, web search, draft email, approval gate before send, estimated sources, and editable recipient scope. | A task list row for Upload evidence shows the task name, a short hint, a linked row, and a Needs attention status with the unavailable reason in the row text. | A support case sidebar recommends Send refund-policy article because the customer asked about a refund twice, shows confidence, source snippets, and opens a draft for review. | An AI support agent pauses before issuing a refund, shows the proposed amount, customer, policy match, confidence, source grounding, approver role, timeout, Approve refund, Edit amount, Reject, and Stop run controls. | A five-step application shows Eligibility complete, Contact details current, Documents upcoming, Review upcoming, and Submit upcoming, with the current step emphasized and a matching page heading. |
| Bad UI | A list of completed tool events is titled Plan preview, confusing proposed work with already executed work. | A task list uses uppercase button-like status pills and users click the status instead of the row. | Required onboarding tasks and optional suggestions are mixed in one list labelled Next best actions. | A reviewer can approve an automation run after the action already executed, making the gate only decorative audit text. | All future steps look clickable and complete even though required earlier fields are blank. |
| Good UX | A manager removes the Send email step, narrows the data source to approved knowledge, approves the remaining plan, and sees execution start from the revised version. | A user scans five task rows, sees that Financial history is incomplete, selects anywhere on that row, completes the section, and returns to find the row status changed to Completed. | A representative reviews the suggested reply, sees that it was triggered by customer intent and a matching knowledge article, edits the draft, and sends it. | A billing lead opens the paused refund gate, sees that the amount is under policy but source grounding is partial, edits the refund to the verified amount, approves, and the agent resumes only that step. | After a user enters valid contact details and continues, Contact details becomes complete and Documents becomes current. |
| Bad UX | Users approve a plan that says Research account but the agent also updates the opportunity stage. | A completed row has the strongest colour treatment, so users repeatedly revisit it instead of incomplete rows. | A user accepts a suggested discount and only afterward learns it changed contract terms. | A human approves a stale agent action from email and the agent applies it to a different customer state. | The indicator says Step 4 of 5 while the page content and route still show Step 2. |
| Best fit | An AI agent or automation can show a proposed multi-step plan before execution. | A page needs to display a known set of tasks with status and links to start or resume them. | Users are working in a record, case, conversation, or workflow where choosing the next action is costly or error-prone. | An AI agent, workflow, deployment, or automation is ready to perform a high-impact step and must pause for human authorization. | A linear form, application, checkout, or setup flow has three or more meaningful steps. |
| Avoid when | The work is a simple single recommended action. | Users are browsing arbitrary records rather than completing a fixed set of service tasks. | The action is always required and should be a task, validation, or workflow gate. | The action has already happened and users only need an audit log. | The journey has only one or two screens. |
| Required state | Draft plan state with objective, ordered steps, planned tools, and expected output. | Linked startable task row. | Recommended action state with action title, reason, evidence, trigger, consequence, and accept or review path. | Paused gate state with proposed action, payload snapshot, reason for gate, and run context. | Default state with completed, current, and upcoming steps. |
| Accessibility burden | Expose objective, plan version, step order, step status, tool, data access, side effect, and expected output as text. | Use list semantics for the collection of task rows and clear heading structure for grouped task lists. | Use a labelled region or card heading that identifies the suggestion as recommended, optional, and scoped to the current work object. | Expose gate status, proposed action, target, payload summary, risk, approver rule, timeout, and current run state as text. | Use aria-current on the current labeled step and include hidden or visible status text for completed, current, upcoming, optional, and error states. |
| Common misuse | Showing a vague plan summary while hiding planned tool calls, data access, and side effects. | Using task list as an answer summary. | Hiding why the action was suggested, what evidence was used, or what will change. | Using a post-action audit record as if it were a pre-action human gate. | Using a step indicator as breadcrumbs, tabs, side navigation, or pagination. |