Foundation — Agentic Design Language
Multi-Agent Coordination
When agents work together — or disagree — the interface must reveal the coordination topology, not hide it. Three patterns cover all multi-agent interaction modes: conflict resolution, task delegation, and human override. Each mode has distinct color semantics and a mandatory audit trail.
Components: AgentConflictPanel · A2AHandoff · AgentGraph · AgentTimeline · TaskQueue
Three Coordination Modes
AgentConflictPanel handles all three modes. Each mode has a dedicated color rule and audit requirement. Never render multi-agent coordination as a black box.
Two agents, two positions. Human adjudicates.
When two or more agents hold opposing recommendations, the conflict must be surfaced side-by-side with equal visual weight. Neither agent's position should appear preferred until the human has selected a winner. The human's selection is the only source of resolution — never auto-resolve based on confidence scores alone.
Human routes a task. Routing is explicit before it is committed.
Delegation is not invisible background routing. When a human assigns a task to an agent, the routing decision must be legible before it is committed. Show both paths: explicit assignment to a named agent, or escalation to the orchestrator. The human confirms which path to take.
Human overrides an already-executed agent action.
Override is the highest-consequence coordination mode. An agent action has already occurred — the human wants to reverse or supersede it. The original agent action must be shown verbatim. The consequence of the override must be disclosed before the human commits. This is the approval ceremony for reversal.
AgentConflictPanel — Live Preview
Design Rules
Conflicting positions must have equal visual weight before resolution.
If one agent's position looks more prominent than another's before the human decides, the UI is biasing the outcome. Both positions get identical layout, identical density.
Never auto-resolve a conflict based on confidence scores alone.
A 92% confidence score is not the same as human authorization. Auto-resolution based on confidence removes the human from the loop for the exact decisions where they need to be in it.
Show delegation routing before committing it.
Routing is an observable decision. Present the options, confirm the selection, then execute. Silent routing erases accountability.
Always show the original agent action verbatim in override mode.
The human must know exactly what they are overriding. Paraphrasing or summarizing the original action obscures consequence.
Disclosure before consequence on every override.
What will happen when this override is committed? Who will be notified? What records will be affected? This must be surfaced before the confirm action — never after.
Both the original action and the override event are permanent audit records.
An override does not erase the original action. Both events exist in the audit trail. Designing for deletion or suppression of the original action violates the accountability contract.
Anatomy
AgentConflictPanel is structured as a header + mode-specific body. Each interactive zone is driven by a distinct semantic token — the zone color communicates what kind of action is required.
Panel Header
--ds-border-structureMode label, subject/task title, and mode badge. Separated from the body by a 1px structural border.
Agent Position Cards (conflict)
--ds-color-agencyEach agent's recommendation rendered at equal visual weight. Agency red left border on each card. Confidence bar uses outcome tokens (green→gold→red).
Resolution Controls (conflict)
--ds-color-validationGold CTA: 'Select as winner'. Deferred path uses muted secondary action. Resolution is the only place agency red appears on a button.
Delegation Target List
--ds-color-temporalAvailable agents use temporal blue border on hover/selection. Unavailable agents render muted with no interactive affordance.
Override Consequence Block
--ds-color-outcome-negativeDeep red background for the consequence string — communicates irreversibility. Gold validation border for the pre-commit confirmation state.
Reason Selector (override)
--ds-color-validationGold left border on selected reason chip. Reason selection is required before the override commit button activates.
Token Reference
| Token | Meaning | Mode | Use |
|---|---|---|---|
| --ds-color-agency | Agent authority / agent-initiated position | CONFLICT | Position headers for each agent in conflict view |
| --ds-color-temporal | Routing in-flight, pending resolution | DELEGATION | Routing indicator, available-agent border on selection hover |
| --ds-color-validation | Human decision required, override caution | CONFLICT / OVERRIDE | Resolution prompt border, override caution banner |
| --ds-color-outcome-positive | Resolution committed — winning position | POST-RESOLUTION | Accepted position badge, confirmed delegation indicator |
| --ds-color-outcome-negative | Deferred / overridden / consequence disclosed | POST-RESOLUTION | Deferred position badge, override consequence text |
| --ds-text-muted | Passive, no current authority | POST-RESOLUTION | Deferred agent position after resolution, unavailable delegation targets |
Do / Don't
DO
Render conflicting positions side-by-side with equal weight
Each agent's reasoning, confidence, and identity must occupy identical visual real estate before resolution. Visual precedence implies a winner.
DON'T
Auto-resolve conflicts on confidence threshold
Auto-resolution removes the human from a decision that required multi-agent escalation in the first place. If two agents disagreed, that is a signal the situation is ambiguous — humans resolve ambiguity.
DO
Use gold (--ds-color-validation) for the human decision prompt
Gold is the semantic token for 'this requires human review.' The resolution step in a conflict panel should always be marked with validation gold to signal the human's role.
DON'T
Route delegation silently in the background
Delegation routing is an observable event. If an orchestrator re-routes a task to a different agent without surfacing the decision, the human loses accountability for where their task went.
DO
Disclose override consequences before commit
The override confirmation must include: what records will change, who will be notified, and what the effective state will be post-override. Consequence disclosure is not optional.
DON'T
Allow override to erase the original agent action from the audit trail
Override creates two records: the original action and the override event. Both are permanent. The design must reflect this — there is no 'undo' in an accountability system.
Usage
import { AgentConflictPanel } from "@/components/patterns/AgentConflictPanel";
// Conflict mode — agents disagree; human adjudicates
<AgentConflictPanel
mode="conflict"
title="EUR/USD rebalancing — agents disagree"
positions={[
{ id: "a", agentName: "Risk Analyzer", agentRole: "ADVISOR",
summary: "Reduce position immediately", confidence: 0.88 },
{ id: "b", agentName: "Portfolio Optimizer", agentRole: "ADVISOR",
summary: "Hold — crystallizes loss", confidence: 0.76 },
]}
onResolve={(winnerId) => resolveConflict(winnerId)}
/>
// Delegation mode — route task to a specific agent
<AgentConflictPanel
mode="delegation"
title="Assign EUR/USD execution task"
task="Execute €4.2M EUR/USD sell order"
delegationTargets={[
{ id: "fx", agentName: "FX Execution Agent", agentRole: "EXECUTOR",
rationale: "Specializes in FX routing", available: true },
]}
onDelegate={(targetId) => delegateTo(targetId)}
/>
// Override mode — human reverses an already-executed agent action
<AgentConflictPanel
mode="override"
title="Override trade execution"
overrideContext={{
agentAction: "FX Execution Agent placed €4.2M sell at 1.0847",
agentName: "FX Execution Agent",
agentRole: "EXECUTOR",
executedAt: timestamp,
consequence: "Break fee: €12,400. Exposure stays at 18.4% of AUM.",
}}
onOverride={(reason) => submitOverride(reason)}
/>Component API
AgentConflictPanel prop reference. The mode prop is required and determines which other props are active.
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "conflict" | "delegation" | "override" | — | Required. Selects the interaction pattern. Each mode renders a distinct layout and set of controls. |
| positions | AgentPosition[] | — | Conflict mode: the competing agent recommendations. Minimum 2 entries. Each has id, agentName, agentRole, summary, confidence, and optional reasoning. |
| conflictSubject | string | — | Conflict mode: subject line displayed as the panel heading (e.g. 'EUR/USD rebalancing — agents disagree'). |
| conflictLayout | "parallel" | "ranked" | "auto" | "auto" | Conflict mode layout. parallel: side-by-side equal columns (2 agents). ranked: full-width sorted by confidence (3+ agents). auto: selects based on position count. |
| onResolve | (winnerId: string, outcome: ResolutionOutcome) => void | — | Conflict mode: called when the human selects a winning agent position. |
| onDefer | () => void | — | Conflict mode: called when the human chooses to defer without selecting a winner. |
| taskDescription | string | — | Delegation mode: the task being routed to an agent. |
| delegationTargets | DelegationTarget[] | — | Delegation mode: available agents the task can be routed to. Each has id, agentName, agentRole, rationale, available flag. |
| onDelegate | (targetId: string, explicit: boolean) => void | — | Delegation mode: called when the human commits a delegation decision. |
| overrideContext | OverrideContext | — | Override mode: describes the already-executed agent action. Includes agentAction, agentName, agentRole, takenAt (ISO), and consequence string. |
| overrideReasons | string[] | — | Override mode: selectable justification options for the override audit trail. |
| onOverride | (reason: string, note?: string) => void | — | Override mode: called when the human commits the override with a selected reason. |
| style | CSSProperties | — | Inline style overrides for the root container. |