{
  "name": "AgentActivityStep",
  "source": "src/components/AgentActivity.tsx",
  "propsType": "AgentActivityStepProps",
  "import": "import { AgentActivityStep } from 'ionbase-ui';",
  "status": "stable",
  "summary": "One step in an activity log: what happened, in the user's language, with a status carried by shape and text.",
  "useWhen": [
    "a child of AgentActivity — it is not usable elsewhere"
  ],
  "useInstead": [
    {
      "when": "it is a row in a dropdown",
      "use": "MenuItem"
    },
    {
      "when": "it is a data row",
      "use": "TableRow"
    }
  ],
  "variants": {
    "status": {
      "pending": {
        "use": "the default — queued, not started"
      },
      "active": {
        "use": "happening now. Only one step should carry it"
      },
      "done": {
        "use": "finished successfully"
      },
      "failed": {
        "use": "did not finish. Say why in `detail`"
      },
      "skipped": {
        "use": "deliberately not run — a branch not taken, a cached result"
      }
    }
  },
  "slots": {
    "children": {
      "accepts": "text",
      "note": "the step in plain language"
    },
    "detail": {
      "accepts": "text, ToolCall, ApprovalGate",
      "note": "the result, a count, a tool name — whatever makes the step checkable. Block content is valid here: a ToolCall as evidence under the step, or the ApprovalGate the step is waiting on"
    }
  },
  "a11y": {
    "guarantees": [
      "the status name is rendered as visually hidden text, so it is never carried by the glyph's colour alone",
      "each status has a differently shaped glyph, which survives greyscale and forced-colours mode"
    ]
  },
  "antiPatterns": [
    {
      "dont": "`failed` with no `detail`",
      "why": "a failure the reader cannot diagnose is just a red mark"
    },
    {
      "dont": "using it outside AgentActivity",
      "why": "it renders an <li>, which is only valid inside a list"
    }
  ],
  "stylesheet": "src/styles/agent-activity.css",
  "tokens": [
    "--font-family-sans",
    "--icon-error",
    "--icon-primary",
    "--icon-size-sm",
    "--icon-success",
    "--icon-tertiary",
    "--ion-duration-cycle",
    "--ion-ease-linear",
    "--spacing-2",
    "--spacing-8",
    "--text-default",
    "--text-error",
    "--text-secondary",
    "--text-tertiary",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {
    "children": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "What the agent did, in the user's language. Not a function name."
    },
    "status": {
      "type": "AgentActivityStatus | undefined",
      "required": false,
      "origin": "own",
      "values": [
        "pending",
        "active",
        "done",
        "failed",
        "skipped"
      ]
    },
    "detail": {
      "type": "React.ReactNode",
      "required": false,
      "origin": "own",
      "description": "The result, a tool name, a count — whatever makes the step checkable."
    },
    "statusLabel": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "The status in words, read after the step's label — \"Not started\", \"In\nprogress\", \"Done\", \"Failed\", \"Skipped\" in English. Pass the translation\nfor `status`."
    }
  },
  "propCounts": {
    "own": 4,
    "aria": 0,
    "dom": 278,
    "other": 0
  }
}