| 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. | Render a task list as a set of row-level tasks where each row has a short task name, optional single-sentence hint, link target when startable, and status text that indicates whether the task is completed, incomplete, in progress, not started, unavailable, optional, or ready. | 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. | Use recommended next action when the user is already working in a case, conversation, record, or workflow and the system can propose the next concrete step that reduces decision effort without removing user judgment. | 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 | The UI says I have a plan and immediately starts executing without showing steps, tools, data access, or external side effects. | A task list uses uppercase button-like status pills and users click the status instead of the row. | A large Continue button is labelled Recommended without any trigger, reason, consequence, or alternative. | A banner says Human approval needed but does not show the tool call, payload, approver, timeout, or resume consequence. | A two-page form adds a large stepper that consumes space without explaining meaningful progress. |
| 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 user returns to a list of internal section codes and cannot tell which task relates to evidence upload. | 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. | Clicking Review skips Documents, clears the contact form, and then blocks final submission without explaining the skipped prerequisite. |
| 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 system cannot generate a reliable plan before execution. | 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. | No recommendation state with normal workflow controls still available. | 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 the whole service architecture without defining saved progress, dependencies, or final readiness elsewhere. | Calling a static primary button a recommended next action without context-sensitive logic or reason. | Showing Approve without the exact action, payload, target, risk, or resume consequence. | Using a step indicator as breadcrumbs, tabs, side navigation, or pagination. |