promptfoo--promptfoo/site/blog/a2a/components/A2ATaskSimulator.module.css

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}

.taskSelector {
  margin-bottom: 24px;
}

.taskSelector h4 {
  margin: 0 0 12px;
  font-size: 1.125rem;
  color: #111827;
}

.taskButtons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.taskButton {
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
}

.taskButton:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.taskButton.active {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 500;
}

.startButton {
  display: block;
  width: 100%;
  padding: 12px 24px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.startButton:hover:not(:disabled) {
  background: #2563eb;
}

.startButton:disabled {
  background: #93c5fd;
  cursor: not-allowed;
}

.simulator {
  display: grid;
  gap: 24px;
  padding: 24px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.stateVisualizer {
  margin-bottom: 24px;
}

.stateVisualizer h5 {
  margin: 0 0 16px;
  font-size: 1rem;
  color: #111827;
}

.states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.state {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  transition: all 0.2s;
}

.state.active {
  border-color: var(--state-color);
  background: color-mix(in srgb, var(--state-color) 10%, white);
}

.stateHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.stateDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--state-color);
}

.stateName {
  font-weight: 500;
  color: #111827;
}

.stateDescription {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.4;
}

.controls {
  margin-bottom: 24px;
}

.controls h5 {
  margin: 0 0 16px;
  font-size: 1rem;
  color: #111827;
}

.transitionButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.transitionButton {
  padding: 8px 16px;
  border: 1px solid var(--state-color);
  border-radius: 6px;
  background: white;
  color: var(--state-color);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.875rem;
}

.transitionButton:hover {
  background: color-mix(in srgb, var(--state-color) 10%, white);
}

.transitionButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.taskDetails {
  display: grid;
  gap: 24px;
}

.section {
  padding: 20px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.section h5 {
  margin: 0 0 16px;
  font-size: 1rem;
  color: #111827;
}

.statusCard {
  padding: 16px;
  background: #f9fafb;
  border-radius: 6px;
}

.statusHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.statusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.statusState {
  font-weight: 500;
  color: #111827;
}

.statusMessage {
  margin: 0 0 8px;
  color: #4b5563;
  font-size: 0.875rem;
}

.statusTime {
  font-size: 0.75rem;
  color: #6b7280;
}

.history {
  display: grid;
  gap: 12px;
}

.historyEntry {
  padding: 12px;
  background: #f9fafb;
  border-radius: 6px;
}

.historyHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.historyDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.historyState {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.historyMessage {
  margin: 0 0 4px;
  font-size: 0.875rem;
  color: #4b5563;
}

.historyTime {
  font-size: 0.75rem;
  color: #6b7280;
}

.artifacts {
  display: grid;
  gap: 16px;
}

.artifact {
  padding: 16px;
  background: #f9fafb;
  border-radius: 6px;
}

.artifactHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.artifactName {
  font-weight: 500;
  color: #111827;
}

.artifactIndex {
  font-size: 0.75rem;
  color: #6b7280;
}

.artifactDescription {
  margin: 0 0 12px;
  font-size: 0.875rem;
  color: #4b5563;
}

.artifactPart {
  padding: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

.partType {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  color: #6b7280;
  font-family: monospace;
}

.partContent {
  font-size: 0.875rem;
  color: #111827;
  line-height: 1.5;
}

/* Dark mode adjustments */
html[data-theme='dark'] .container {
  background: var(--ifm-background-surface-color);
}

html[data-theme='dark'] .taskSelector h4 {
  color: var(--ifm-color-white);
}

html[data-theme='dark'] .taskButton {
  background: var(--ifm-card-background-color);
  border-color: var(--ifm-color-emphasis-300);
  color: var(--ifm-color-emphasis-700);
}

html[data-theme='dark'] .taskButton:hover {
  border-color: var(--ifm-color-primary);
  background: var(--ifm-color-emphasis-100);
  color: var(--ifm-color-white);
}

html[data-theme='dark'] .taskButton.active {
  border-color: var(--ifm-color-primary);
  background: var(--ifm-color-primary);
  color: var(--ifm-color-white);
}

html[data-theme='dark'] .simulator {
  background: var(--ifm-card-background-color);
  border-color: var(--ifm-color-emphasis-300);
}

html[data-theme='dark'] .stateVisualizer h5,
html[data-theme='dark'] .controls h5,
html[data-theme='dark'] .section h5 {
  color: var(--ifm-color-white);
}

html[data-theme='dark'] .state {
  background: var(--ifm-card-background-color);
  border-color: var(--ifm-color-emphasis-300);
}

html[data-theme='dark'] .state.active {
  background: color-mix(in srgb, var(--state-color) 15%, var(--ifm-card-background-color));
}

html[data-theme='dark'] .stateName {
  color: var(--ifm-color-white);
}

html[data-theme='dark'] .stateDescription {
  color: var(--ifm-color-emphasis-600);
}

html[data-theme='dark'] .transitionButton {
  background: var(--ifm-card-background-color);
}

html[data-theme='dark'] .transitionButton:hover:not(:disabled) {
  background: color-mix(in srgb, var(--state-color) 15%, var(--ifm-card-background-color));
}

html[data-theme='dark'] .section {
  background: var(--ifm-card-background-color);
  border-color: var(--ifm-color-emphasis-300);
}

html[data-theme='dark'] .statusCard,
html[data-theme='dark'] .historyEntry {
  background: var(--ifm-color-emphasis-100);
}

html[data-theme='dark'] .statusState {
  color: var(--ifm-color-white);
}

html[data-theme='dark'] .statusMessage {
  color: var(--ifm-color-emphasis-600);
}

html[data-theme='dark'] .statusTime,
html[data-theme='dark'] .historyTime {
  color: var(--ifm-color-emphasis-500);
}

html[data-theme='dark'] .artifactName {
  color: var(--ifm-color-white);
}

html[data-theme='dark'] .artifactDescription {
  color: var(--ifm-color-emphasis-600);
}

html[data-theme='dark'] .partType {
  color: var(--ifm-color-emphasis-700);
}

html[data-theme='dark'] .partContent {
  color: var(--ifm-color-emphasis-800);
  background: var(--ifm-color-emphasis-100);
}