Agent Status

Last updated

2026-10-15 UTC

Demo

agent-status/demo.vue

OfflineConnectingReadyRunningAwaiting approvalConnection failedUnverified

<script setup lang="ts">
const states = [
  {
    state: 'offline',
    label: 'Offline',
  },
  {
    state: 'connecting',
    label: 'Connecting',
  },
  {
    state: 'ready',
    label: 'Ready',
  },
  {
    state: 'working',
    label: 'Running',
  },
  {
    state: 'waiting',
    label: 'Awaiting approval',
  },
  {
    state: 'error',
    label: 'Connection failed',
  },
  {
    state: 'unknown',
    label: 'Unverified',
  },
] as const
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: var(--ylf-space-3)">
    <YlfAgentStatus v-for="item in states" :key="item.state" :state="item.state" :label="item.label" />
  </div>
</template>

Show agent connection and task states with semantic colors, shapes and explicit text. The application supplies the state; this component does not infer connectivity or run continuous animations.

state is a presentation role: offline, connecting, ready (ready or successful), working, waiting (human action required), error, or unknown (unverified). Always supply a localized label. A listening HTTP callback can use waiting and “Callback listening”; do not claim that it is connected.

Props

Property	Description	Type	Default
state	Presentation state	YlfAgentState	Required
label	Localized, truthful status text	string	Required
live	Politely announce a single summary	boolean	false

Live announcements are disabled by default to avoid repeated announcements in polled lists. Enable live on a single summary only.

Source and Registry changes are pending publication. See agent components.