@agent-ui-kit/web-components 0.0.15 → 0.0.17

package/dist/docs/blocks/agent-context-panel.yaml

@@ -0,0 +1,96 @@
+name: agent-context-panel
+type: block
+summary: Sidebar context panel with file/link items, token usage bar, and add action.
+description: |
+  A sidebar-style panel for managing AI context. Header has title heading, muted xs text count (e.g. "4 items" — plain text, not a badge), spacer, and ghost close button in a vertically centered row stack. Content is split into Files and Links sections using aui-heading group labels. Each context item has a type-colored solid avatar, truncated file/link name (using truncate attr on heading, min-width="0" on stack), metadata, and a ghost remove button. File and link lists use gap="4" between items. Links show URL in mono font with truncate. Footer shows token usage label with spacer and mono counter, a progress bar, and a scrim add button.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-button
+  - aui-progress
+  - aui-divider
+kind: card
+examples:
+  - description: Sidebar context panel with file/link items, token usage bar, and add action.
+    html: |-
+      <aui-container kind="card" bordered max-width="sm" style="min-height: 24rem;">
+        <aui-header>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-heading size="md">Context</aui-heading>
+            <aui-text muted size="xs">4 items</aui-text>
+            <aui-text spacer></aui-text>
+            <aui-button ghost hide-label label="Close" icon-leading="x"></aui-button>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+
+              <aui-stack gap="4">
+                <aui-heading group>Files</aui-heading>
+                <aui-stack gap="4">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-avatar size="xs" accent solid><aui-icon name="file-text" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="0" spacer min-width="0">
+                      <aui-heading size="sm" truncate>tokens.config.json</aui-heading>
+                      <aui-text muted size="xs">2.1 KB · Added 2m ago</aui-text>
+                    </aui-stack>
+                    <aui-button ghost hide-label label="Remove" icon-leading="x" size="sm"></aui-button>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-avatar size="xs" success solid><aui-icon name="file-text" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="0" spacer min-width="0">
+                      <aui-heading size="sm" truncate>README.md</aui-heading>
+                      <aui-text muted size="xs">4.8 KB · Added 5m ago</aui-text>
+                    </aui-stack>
+                    <aui-button ghost hide-label label="Remove" icon-leading="x" size="sm"></aui-button>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-avatar size="xs" warning solid><aui-icon name="image" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="0" spacer min-width="0">
+                      <aui-heading size="sm" truncate>architecture-diagram.png</aui-heading>
+                      <aui-text muted size="xs">128 KB · Added 12m ago</aui-text>
+                    </aui-stack>
+                    <aui-button ghost hide-label label="Remove" icon-leading="x" size="sm"></aui-button>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+
+              <aui-divider></aui-divider>
+
+              <aui-stack gap="4">
+                <aui-heading group>Links</aui-heading>
+                <aui-stack gap="4">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-avatar size="xs" info solid><aui-icon name="globe-simple" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="0" spacer min-width="0">
+                      <aui-heading size="sm" truncate>Style Dictionary Docs</aui-heading>
+                      <aui-text muted size="xs" font="mono" truncate>styledictionary.dev/guides</aui-text>
+                    </aui-stack>
+                    <aui-button ghost hide-label label="Remove" icon-leading="x" size="sm"></aui-button>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-stack gap="2">
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-text size="xs" muted spacer>Token usage</aui-text>
+              <aui-text size="xs" muted>12.4K / 128K</aui-text>
+            </aui-stack>
+            <aui-progress value="10"></aui-progress>
+            <aui-button scrim width="full" icon-leading="plus" size="sm">Add file or URL</aui-button>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/agent-feedback-controls.yaml

@@ -0,0 +1,101 @@
+name: agent-feedback-controls
+type: block
+summary: Feedback toolbar with like/dislike, copy, retry, share, and version navigation.
+description: |
+  Three variants of a chat message action toolbar. Default shows thumbs up/down in aui-button-group inline, divider, copy/retry in aui-button-group inline, spacer, share + aui-dropdown-menu (More) in aui-button-group inline. Liked state has the thumbs-up colored with success intent. Multi-version adds prev/next navigation in aui-button-group inline with a mono counter before the feedback buttons. Copy action uses aui-copy-button; all other actions use ghost icon-only buttons with vertical dividers between groups. All button-groups use the inline attribute for tight spacing.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-text
+  - aui-button
+  - aui-copy-button
+  - aui-button-group
+  - aui-dropdown-menu
+  - aui-option
+  - aui-divider
+kind: widget
+examples:
+  - description: Feedback toolbar with like/dislike, copy, retry, share, and version navigation.
+    html: |-
+      <aui-stack>
+
+        <!-- Default state -->
+        <aui-container kind="widget" bordered>
+          <aui-inset>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Good response" icon-leading="thumbs-up" density="compact"></aui-button>
+                <aui-button ghost hide-label label="Bad response" icon-leading="thumbs-down" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button-group inline>
+                <aui-copy-button density="compact"></aui-copy-button>
+                <aui-button ghost hide-label label="Retry" icon-leading="arrow-clockwise" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-text spacer></aui-text>
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Share" icon-leading="arrow-up" density="compact"></aui-button>
+                <aui-dropdown-menu label="More" ghost hide-label density="compact">
+                  <aui-option value="view-source">View source</aui-option>
+                  <aui-option value="report">Report issue</aui-option>
+                </aui-dropdown-menu>
+              </aui-button-group>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+
+        <!-- Liked state -->
+        <aui-container kind="widget" bordered>
+          <aui-inset>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Good response" icon-leading="thumbs-up" density="compact" success style="color: var(--aui-solid);"></aui-button>
+                <aui-button ghost hide-label label="Bad response" icon-leading="thumbs-down" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button-group inline>
+                <aui-copy-button density="compact"></aui-copy-button>
+                <aui-button ghost hide-label label="Retry" icon-leading="arrow-clockwise" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-text spacer></aui-text>
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Share" icon-leading="arrow-up" density="compact"></aui-button>
+                <aui-dropdown-menu label="More" ghost hide-label density="compact">
+                  <aui-option value="view-source">View source</aui-option>
+                  <aui-option value="report">Report issue</aui-option>
+                </aui-dropdown-menu>
+              </aui-button-group>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+
+        <!-- Multi-version navigation -->
+        <aui-container kind="widget" bordered>
+          <aui-inset>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Previous" icon-leading="caret-left" density="compact"></aui-button>
+                <aui-text size="xs" muted font="mono">2 / 3</aui-text>
+                <aui-button ghost hide-label label="Next" icon-leading="caret-right" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Good response" icon-leading="thumbs-up" density="compact"></aui-button>
+                <aui-button ghost hide-label label="Bad response" icon-leading="thumbs-down" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button-group inline>
+                <aui-copy-button density="compact"></aui-copy-button>
+                <aui-button ghost hide-label label="Retry" icon-leading="arrow-clockwise" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-text spacer></aui-text>
+              <aui-dropdown-menu label="More" ghost hide-label density="compact">
+                <aui-option value="view-source">View source</aui-option>
+                <aui-option value="report">Report issue</aui-option>
+              </aui-dropdown-menu>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+
+      </aui-stack>

package/dist/docs/blocks/agent-follow-up-chips.yaml

@@ -0,0 +1,37 @@
+name: agent-follow-up-chips
+type: block
+summary: Follow-up question suggestions and action chips with group label and divider.
+description: |
+  A suggestion area below an agent response. Top section has an aui-heading group label ("Continue exploring") and wrapping outline buttons with lightbulb icons for follow-up questions. A divider separates questions from action chips (copy, save, share) using scrim buttons. Both sections use flex-wrap for responsive layout.
+components:
+  - aui-stack
+  - aui-heading
+  - aui-button
+  - aui-button-group
+  - aui-divider
+kind: widget
+examples:
+  - description: Follow-up question suggestions and action chips with group label and divider.
+    html: |-
+      <aui-stack>
+
+        <!-- Question suggestions -->
+        <aui-stack gap="2">
+          <aui-heading group>Continue exploring</aui-heading>
+          <aui-stack direction="row" gap="2" wrap>
+            <aui-button outline size="sm" icon-leading="lightbulb">How does the token pipeline handle theme variants?</aui-button>
+            <aui-button outline size="sm" icon-leading="lightbulb">What are the performance implications of this approach?</aui-button>
+            <aui-button outline size="sm" icon-leading="lightbulb">Can you show me a test example for the store?</aui-button>
+          </aui-stack>
+        </aui-stack>
+
+        <aui-divider></aui-divider>
+
+        <!-- Action chips -->
+        <aui-button-group>
+          <aui-button scrim size="sm" icon-leading="copy">Copy response</aui-button>
+          <aui-button scrim size="sm" icon-leading="star">Save to notes</aui-button>
+          <aui-button scrim size="sm" icon-leading="arrow-up">Share</aui-button>
+        </aui-button-group>
+
+      </aui-stack>

package/dist/docs/blocks/agent-model-selector.yaml

@@ -0,0 +1,83 @@
+name: agent-model-selector
+type: block
+summary: Model selection panel with capability tags, context usage, and active state.
+description: |
+  A card-based model picker using aui-select mode="list" inside a container with max-width="sm". Header has title heading with spacer and ghost close button. Each option shows a colored dot badge with align-items="start" and margin-top: 0.375rem to vertically align with the first line of text, model name heading with optional "New" accent badge, muted xs description, and flex-wrapped capability tag badges. Inner stacks use min-width="0" attr for truncation. The selected option gets a checkmark. Footer shows context token usage label with spacer and mono counter.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-select
+  - aui-option
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-badge
+  - aui-button
+kind: card
+examples:
+  - description: Model selection panel with capability tags, context usage, and active state.
+    html: |-
+      <aui-container kind="card" bordered max-width="sm">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-heading size="md" spacer>Select model</aui-heading>
+            <aui-button ghost hide-label label="Close" icon-leading="x" size="sm"></aui-button>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-select mode="list">
+            <aui-option value="opus" selected>
+              <aui-stack direction="row" gap="3" align-items="start" width="full">
+                <aui-badge accent dot style="margin-top: 0.375rem;"></aui-badge>
+                <aui-stack gap="1" spacer min-width="0">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-heading size="sm">Claude Opus 4</aui-heading>
+                    <aui-badge accent>New</aui-badge>
+                  </aui-stack>
+                  <aui-text muted size="xs">Most capable model for complex reasoning and analysis.</aui-text>
+                  <aui-stack direction="row" gap="1" wrap>
+                    <aui-badge>200K context</aui-badge>
+                    <aui-badge>Vision</aui-badge>
+                    <aui-badge>Code</aui-badge>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+            </aui-option>
+            <aui-option value="sonnet">
+              <aui-stack direction="row" gap="3" align-items="start" width="full">
+                <aui-badge success dot style="margin-top: 0.375rem;"></aui-badge>
+                <aui-stack gap="1" spacer min-width="0">
+                  <aui-heading size="sm">Claude Sonnet 4</aui-heading>
+                  <aui-text muted size="xs">Balanced performance and speed for everyday tasks.</aui-text>
+                  <aui-stack direction="row" gap="1" wrap>
+                    <aui-badge>200K context</aui-badge>
+                    <aui-badge>Vision</aui-badge>
+                    <aui-badge>Code</aui-badge>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+            </aui-option>
+            <aui-option value="haiku">
+              <aui-stack direction="row" gap="3" align-items="start" width="full">
+                <aui-badge warning dot style="margin-top: 0.375rem;"></aui-badge>
+                <aui-stack gap="1" spacer min-width="0">
+                  <aui-heading size="sm">Claude Haiku 4</aui-heading>
+                  <aui-text muted size="xs">Fastest response times for simple tasks.</aui-text>
+                  <aui-stack direction="row" gap="1" wrap>
+                    <aui-badge>200K context</aui-badge>
+                    <aui-badge>Code</aui-badge>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+            </aui-option>
+          </aui-select>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-text size="xs" muted spacer>Context usage</aui-text>
+            <aui-text size="xs" muted font="mono">24K / 200K</aui-text>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/agent-prompt-input.yaml

@@ -0,0 +1,49 @@
+name: agent-prompt-input
+type: block
+summary: Chat composer with file attachment chips, expandable textarea, and toolbar with send button.
+description: |
+  A chat input widget for agent conversations. Top section shows removable file attachment aui-chip elements (icon + filename, removable) in a flex-wrap row. Middle section has an expandable aui-textarea with width="full" and placeholder hint. Bottom toolbar has ghost icon-only buttons (attach, search, model) on the left, spacer, and a primary accent send button on the right. All wrapped in a bordered widget container with max-width="lg" and aui-inset padding.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-textarea
+  - aui-chip
+  - aui-icon
+  - aui-text
+  - aui-button
+kind: widget
+examples:
+  - description: Chat composer with file attachment chips, expandable textarea, and toolbar with send button.
+    html: |-
+      <aui-container kind="widget" bordered max-width="lg">
+        <aui-inset>
+          <aui-stack>
+
+            <!-- Attached files -->
+            <aui-stack direction="row" gap="2" wrap>
+              <aui-chip removable>
+                <aui-icon name="file-text" size="xs"></aui-icon>
+                config.json
+              </aui-chip>
+              <aui-chip removable>
+                <aui-icon name="image" size="xs"></aui-icon>
+                screenshot.png
+              </aui-chip>
+            </aui-stack>
+
+            <!-- Textarea -->
+            <aui-textarea placeholder="Ask anything… Use / for commands" width="full" style="min-height: 3.5rem;"></aui-textarea>
+
+            <!-- Toolbar -->
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-button ghost hide-label label="Attach file" icon-leading="paperclip"></aui-button>
+              <aui-button ghost hide-label label="Search" icon-leading="magnifying-glass"></aui-button>
+              <aui-button ghost hide-label label="Model" icon-leading="robot"></aui-button>
+              <aui-text spacer></aui-text>
+              <aui-button primary accent hide-label label="Send" icon-leading="arrow-up"></aui-button>
+            </aui-stack>
+
+          </aui-stack>
+        </aui-inset>
+      </aui-container>

package/dist/docs/blocks/agent-streaming-message.yaml

@@ -0,0 +1,46 @@
+name: agent-streaming-message
+type: block
+summary: Agent streaming response with identity row, prose + code block mid-stream, and stop button.
+description: |
+  A chat message being actively generated. Identity row has an accent solid avatar, assistant name heading with spacer, "Generating" accent badge, elapsed time in mono font, and a ghost hide-label stop button (icon-leading="stop") — all in the same header row. Content interleaves prose text with a mid-stream aui-code-block (with language attribute). No separate stop button below; it lives in the identity row.
+components:
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-button
+  - aui-code-block
+kind: widget
+examples:
+  - description: Agent streaming response with identity row, prose + code block mid-stream, and stop button.
+    html: |-
+      <aui-stack>
+
+        <!-- Identity row -->
+        <aui-stack direction="row" gap="3" align-items="center">
+          <aui-avatar size="sm" accent solid><aui-icon name="sparkle"></aui-icon></aui-avatar>
+          <aui-heading size="sm" spacer>Assistant</aui-heading>
+          <aui-badge accent>Generating</aui-badge>
+          <aui-text size="xs" muted font="mono">8s</aui-text>
+          <aui-button ghost hide-label label="Stop generating" icon-leading="stop" size="sm"></aui-button>
+        </aui-stack>
+
+        <!-- Streaming content -->
+        <aui-stack>
+          <aui-text size="sm">The recommended approach for <strong>token pipeline optimization</strong> involves three stages. First, we normalize all source tokens into a canonical format…</aui-text>
+
+          <!-- Code block mid-stream -->
+          <aui-code-block language="typescript">export function normalizeTokens(raw: RawTokens): Token[] {
+        return Object.entries(raw).map(([key, def]) => ({
+          name: key,
+          value: resolveAlias(def.$value, raw),
+          type: def.$type ?? inferType(def.$value),
+        }))
+      }</aui-code-block>
+
+          <aui-text size="sm">Next, the transform stage applies platform-specific conversions. Each platform registers its own…</aui-text>
+        </aui-stack>
+
+      </aui-stack>

package/dist/docs/blocks/agent-suggestion-card.yaml

@@ -0,0 +1,68 @@
+name: agent-suggestion-card
+type: block
+summary: Agent code suggestion with diff preview, impact tags, and accept/edit/dismiss actions.
+description: |
+  A suggestion card from an AI agent proposing a code refactor. Header has a lightbulb avatar, suggestion title, rationale text, and a confidence badge. Content shows an explanation with inline mono code references, a bordered widget with a diff-style aui-code preview (showing removed/added lines), and impact tags. Footer has three equal buttons (Dismiss ghost, Edit scrim, Accept primary accent) using grow="1" basis="0".
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-button
+  - aui-button-group
+  - aui-code
+kind: card
+examples:
+  - description: Agent code suggestion with diff preview, impact tags, and accept/edit/dismiss actions.
+    html: |-
+      <aui-container kind="card" bordered max-width="lg">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-avatar size="sm" accent solid><aui-icon name="lightbulb"></aui-icon></aui-avatar>
+            <aui-stack gap="1" spacer min-width="0">
+              <aui-heading size="md">Extract shared validation logic</aui-heading>
+              <aui-text muted size="xs">Reduces duplication across 3 form handlers</aui-text>
+            </aui-stack>
+            <aui-stack direction="row" gap="1">
+              <aui-badge success>High</aui-badge>
+            </aui-stack>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack>
+              <aui-text muted size="sm">The validation logic in <aui-text font="mono" size="sm" inline>handleSubmit</aui-text>, <aui-text font="mono" size="sm" inline>handleUpdate</aui-text>, and <aui-text font="mono" size="sm" inline>handleCreate</aui-text> can be unified into a single <aui-text font="mono" size="sm" inline>validateFields()</aui-text> function.</aui-text>
+
+              <!-- Diff preview -->
+              <aui-code-block filename="src/handlers/validation.ts">- function handleSubmit(data) {
+      -   if (!data.email) throw new Error('Email required')
+      -   if (!data.name) throw new Error('Name required')
+      + function validateFields(data, required) {
+      +   for (const field of required) {
+      +     if (!data[field]) throw new Error(\`\${field} required\`)
+      +   }
+        }</aui-code-block>
+
+              <!-- Impact tags -->
+              <aui-stack direction="row" gap="2">
+                <aui-badge>3 files affected</aui-badge>
+                <aui-badge success>−24 lines</aui-badge>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-button-group>
+            <aui-button scrim grow="1" basis="0">Dismiss</aui-button>
+            <aui-button scrim grow="1" basis="0">Edit</aui-button>
+            <aui-button primary accent grow="1" basis="0">Accept</aui-button>
+          </aui-button-group>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/agent-task-card.yaml

@@ -0,0 +1,112 @@
+name: agent-task-card
+type: block
+summary: Multi-step agent task card with timeline, log output, approval gate, and cancel action.
+description: |
+  A compound task execution card showing an agent running through a multi-step pipeline. Header uses aui-heading group for the uppercase "Agent Task" category label, with the task title as aui-heading size="lg" below, and a running status badge in the trailing slot. The content area uses aui-stepper with aui-step children for a vertical timeline of steps, each with a state-driven indicator avatar using solid attribute and shrink="0" (done=success with check, running=accent with aui-spinner, gate=warning with warning icon, pending=--aui-neutral-highest with --aui-ink-muted circle icon). Step titles use aui-heading size="sm". The running step includes an aui-code block for log output with spacer and min-width="0" on its stack. The gate step wraps its approval prompt and grow="1" action buttons in a bordered widget container. The footer uses a direction="row" stack with spacer for left-right alignment of elapsed time and a scrim danger cancel button. Connector lines between steps are handled by the aui-stepper/aui-step elements.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stepper
+  - aui-step
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-spinner
+  - aui-badge
+  - aui-button
+  - aui-button-group
+  - aui-code
+kind: card
+examples:
+  - description: Multi-step agent task card with timeline, log output, approval gate, and cancel action.
+    html: |-
+      <aui-container kind="card" bordered max-width="lg">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading group>Agent Task</aui-heading>
+              <aui-heading size="lg">Deploy token pipeline to staging</aui-heading>
+            </aui-stack>
+          </span>
+          <span slot="trailing">
+            <aui-badge accent>Running</aui-badge>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stepper>
+
+              <!-- Step 1: Done -->
+              <aui-step state="done">
+                <aui-avatar size="xs" success shrink="0" solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1">
+                  <aui-heading size="sm">Pull latest from main</aui-heading>
+                  <aui-text muted size="xs">Completed in 4s</aui-text>
+                </aui-stack>
+              </aui-step>
+
+              <!-- Step 2: Done -->
+              <aui-step state="done">
+                <aui-avatar size="xs" success shrink="0" solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1">
+                  <aui-heading size="sm">Run test suite</aui-heading>
+                  <aui-text muted size="xs">142 tests passed · 0 failed · 12s</aui-text>
+                </aui-stack>
+              </aui-step>
+
+              <!-- Step 3: Running -->
+              <aui-step state="running">
+                <aui-avatar size="xs" accent shrink="0" solid><aui-spinner size="xs"></aui-spinner></aui-avatar>
+                <aui-stack gap="2" spacer min-width="0">
+                  <aui-stack gap="1">
+                    <aui-heading size="sm">Build Docker image</aui-heading>
+                    <aui-text muted size="xs">Building layers…</aui-text>
+                  </aui-stack>
+      <aui-code>Step 1/5 : FROM node:20-alpine
+      Step 2/5 : COPY package*.json ./
+      Step 3/5 : RUN npm ci --production</aui-code>
+                </aui-stack>
+              </aui-step>
+
+              <!-- Step 4: Gate -->
+              <aui-step>
+                <aui-avatar size="xs" warning shrink="0" solid><aui-icon name="warning" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="3" spacer min-width="0">
+                  <aui-heading size="sm">Approval required</aui-heading>
+                  <aui-container kind="widget" bordered>
+                    <aui-inset>
+                      <aui-stack gap="3">
+                        <aui-text size="sm">Deploy build <strong>#847</strong> to staging environment?</aui-text>
+                        <aui-button-group>
+                          <aui-button primary accent grow="1" basis="0">Approve</aui-button>
+                          <aui-button scrim grow="1" basis="0">Skip</aui-button>
+                        </aui-button-group>
+                      </aui-stack>
+                    </aui-inset>
+                  </aui-container>
+                </aui-stack>
+              </aui-step>
+
+              <!-- Step 5: Pending -->
+              <aui-step>
+                <aui-avatar size="xs" shrink="0" style="background: var(--aui-neutral-highest); color: var(--aui-ink-muted);"><aui-icon name="circle" size="xs" muted></aui-icon></aui-avatar>
+                <aui-stack gap="1">
+                  <aui-text size="sm" muted>Health check</aui-text>
+                </aui-stack>
+              </aui-step>
+
+            </aui-stepper>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-text muted size="xs" spacer>Elapsed: 0:42</aui-text>
+            <aui-button scrim danger>Cancel Task</aui-button>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>