@agent-ui-kit/web-components 0.0.3 → 0.0.4

package/dist/docs/blocks/status-card.yaml

@@ -0,0 +1,40 @@
+name: status-card
+type: block
+summary: Centered confirmation or alert card with icon and CTA.
+description: >
+  A card surface for status messages — confirmations, success states,
+  or error alerts. Centered layout with icon, heading, description,
+  and a primary call-to-action. Uses intent to set the color family.
+
+components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-button]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered shadow="2" success max-width="md">
+        <aui-inset>
+          <aui-stack gap="4" align-items="center" text="center">
+            <aui-icon name="check-circle" size="2xl"></aui-icon>
+            <aui-heading size="xl">Payment Successful</aui-heading>
+            <aui-text muted>Your subscription has been renewed. You'll receive a confirmation email shortly.</aui-text>
+            <aui-button primary width="full">Go to Dashboard</aui-button>
+          </aui-stack>
+        </aui-inset>
+      </aui-container>
+    description: Success confirmation after payment.
+
+  - html: |
+      <aui-container kind="card" bordered shadow="2" danger max-width="md">
+        <aui-inset>
+          <aui-stack gap="4" align-items="center" text="center">
+            <aui-icon name="warning-circle" size="2xl"></aui-icon>
+            <aui-heading size="xl">Something went wrong</aui-heading>
+            <aui-text muted>We couldn't process your request. Please try again or contact support if the issue persists.</aui-text>
+            <aui-stack direction="row" gap="2" width="full">
+              <aui-button outline width="full">Contact Support</aui-button>
+              <aui-button primary width="full">Try Again</aui-button>
+            </aui-stack>
+          </aui-stack>
+        </aui-inset>
+      </aui-container>
+    description: Error state with retry and support actions.

package/dist/docs/blocks/suggested-labs.yaml

@@ -0,0 +1,79 @@
+name: suggested-labs
+type: block
+summary: Lab order card with categorized tests and routing actions.
+description: >
+  A clinical decision-support card listing suggested laboratory tests.
+  Each row shows the test panel name, a brief rationale, and a condition
+  badge. A primary action routes the order to the assigned physician,
+  with secondary actions for drafting or staging.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-badge, aui-button, aui-divider]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="lg">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Suggested Labs</aui-heading>
+              <aui-text muted size="sm">Based on your symptoms and family history</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="3">
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="md">RF + Anti-CCP</aui-heading>
+                  <aui-text muted size="sm">Rheumatoid Arthritis markers</aui-text>
+                </aui-stack>
+                <aui-badge accent>RA</aui-badge>
+              </aui-stack>
+              <aui-divider></aui-divider>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="md">ESR + CRP</aui-heading>
+                  <aui-text muted size="sm">Inflammation levels</aui-text>
+                </aui-stack>
+                <aui-badge accent>RA / Lupus</aui-badge>
+              </aui-stack>
+              <aui-divider></aui-divider>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="md">TSH + Free T4</aui-heading>
+                  <aui-text muted size="sm">Thyroid function</aui-text>
+                </aui-stack>
+                <aui-badge accent>Hypothyroidism</aui-badge>
+              </aui-stack>
+              <aui-divider></aui-divider>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="md">ANA</aui-heading>
+                  <aui-text muted size="sm">Autoimmune screen</aui-text>
+                </aui-stack>
+                <aui-badge accent>Lupus</aui-badge>
+              </aui-stack>
+              <aui-divider></aui-divider>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="md">CBC + Ferritin</aui-heading>
+                  <aui-text muted size="sm">Anemia workup</aui-text>
+                </aui-stack>
+                <aui-badge accent>Iron Deficiency</aui-badge>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-stack gap="2">
+            <aui-button primary width="full">Order Now — Route to Dr. Martinez</aui-button>
+            <aui-stack direction="row" gap="2">
+              <aui-button scrim grow="1">Add to Draft Order</aui-button>
+              <aui-button scrim grow="1">Build Draft for Doctor</aui-button>
+            </aui-stack>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>
+    description: Suggested lab panel card with condition badges and physician routing actions.

package/dist/docs/blocks/supply-chain.yaml

@@ -0,0 +1,7 @@
+name: supply-chain
+type: block
+summary: Supply Chain Network — 12 nodes, 13 connections.
+description: >
+  Visual graph block rendered from the Supply Chain Network dataset using
+  aui-graph components with port-selector noodle connections.
+components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]

package/dist/docs/blocks/survey-card.yaml

@@ -0,0 +1,52 @@
+name: survey-card
+type: block
+summary: Survey question card with checkbox options and submit action.
+description: >
+  A card presenting a multiple-choice survey question. Each option is
+  a labeled checkbox that users can toggle. Includes a submit button
+  so the card feels complete and actionable — not just a floating
+  question. Useful for onboarding flows, feedback, or preference selection.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-checkbox, aui-button]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="prose" style="min-width: 22rem;">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">How did you hear about us?</aui-heading>
+              <aui-text muted size="sm">Select all that apply.</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="3">
+              <aui-field>
+                <aui-checkbox>Social Media</aui-checkbox>
+              </aui-field>
+              <aui-field>
+                <aui-checkbox>Search Engine</aui-checkbox>
+              </aui-field>
+              <aui-field>
+                <aui-checkbox>Friend or Colleague</aui-checkbox>
+              </aui-field>
+              <aui-field>
+                <aui-checkbox>Blog or Article</aui-checkbox>
+              </aui-field>
+              <aui-field>
+                <aui-checkbox>Other</aui-checkbox>
+              </aui-field>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2">
+            <aui-button scrim grow="1">Skip</aui-button>
+            <aui-button primary grow="1">Continue</aui-button>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>
+    description: Survey with checkbox options, header/content/footer structure, and skip/continue actions.

package/dist/docs/blocks/tabbed-panel.yaml

@@ -0,0 +1,53 @@
+name: tabbed-panel
+type: block
+summary: Segmented control card with tab-switched content panels.
+description: >
+  A panel using a segmented control to switch between two views. Demonstrates
+  tabs with header actions and distinct empty/content states per tab. Use for
+  settings panels, repository browsers, or any dual-view UI.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-button, aui-segmented-control, aui-segment]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="md">
+        <aui-header>
+          <span slot="content">
+            <aui-segmented-control value="codespaces">
+              <aui-segment value="codespaces">Codespaces</aui-segment>
+              <aui-segment value="local">Local</aui-segment>
+            </aui-segmented-control>
+          </span>
+        </aui-header>
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="md">Codespaces</aui-heading>
+              <aui-text muted size="sm">Your workspaces in the cloud</aui-text>
+            </aui-stack>
+          </span>
+          <span slot="trailing">
+            <aui-button label="Add" icon-leading="plus" scrim hide-label></aui-button>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="6" align-items="center" text="center" style="padding: 1.5rem 0;">
+              <div style="width: 6rem; height: 6rem; border-radius: var(--aui-radius); background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%); display: flex; align-items: center; justify-content: center;">
+                <aui-icon name="gear" style="--aui-icon-size: 3rem;" muted></aui-icon>
+              </div>
+              <aui-stack gap="1">
+                <aui-heading size="md">No codespaces</aui-heading>
+                <aui-text muted size="sm">You don't have any codespaces with this repository checked out</aui-text>
+              </aui-stack>
+              <aui-button primary accent>Create Codespace</aui-button>
+              <aui-text muted size="xs"><a href="#">Learn more about codespaces</a></aui-text>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <span slot="content"><aui-text muted size="xs">Codespace usage for this repository is paid for by <strong>AgentOS</strong>.</aui-text></span>
+        </aui-footer>
+      </aui-container>
+    description: Codespaces panel with tab selector and empty state.

package/dist/docs/blocks/team-empty.yaml

@@ -0,0 +1,27 @@
+name: team-empty
+type: block
+summary: Empty state for team member lists with invite action.
+description: >
+  An inviting empty state shown when a team or project has no members
+  yet. Features a large user icon in a contained avatar, a clear
+  heading, helpful description, and an invite action button. Simpler
+  than the generic empty-state block — purpose-built for team contexts.
+
+components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-button]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="prose">
+        <aui-inset>
+          <aui-stack gap="4" align-items="center" text="center">
+            <aui-avatar size="xl" square><aui-icon name="user"></aui-icon></aui-avatar>
+            <aui-stack gap="1">
+              <aui-heading size="lg">No Team Members</aui-heading>
+              <aui-text muted size="sm">Invite your team to collaborate on this project.</aui-text>
+            </aui-stack>
+            <aui-button primary accent>Invite Members</aui-button>
+          </aui-stack>
+        </aui-inset>
+      </aui-container>
+    description: Team empty state with icon, heading, description, and invite button.

package/dist/docs/blocks/usage-billing.yaml

@@ -0,0 +1,99 @@
+name: usage-billing
+type: block
+summary: Billing usage panel with SVG progress rings and cost breakdown.
+description: >
+  A card showing current billing cycle usage broken down by service line item.
+  Each row has a circular SVG progress ring showing utilization, a service
+  name, and a cost or usage/limit value. Rings use stroke-dashoffset to render
+  accurate fill levels. Use for billing dashboards, plan overviews, or
+  resource monitoring.
+
+components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-divider]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="sm">
+        <aui-header>
+          <span slot="content"><aui-text muted size="sm">5 days remaining in cycle</aui-text></span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="0">
+
+              <!-- Edge Requests: 91% -->
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
+                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
+                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
+                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-1);" stroke-width="2"
+                    stroke-dasharray="50.3" stroke-dashoffset="4.5" stroke-linecap="round"/>
+                </svg>
+                <aui-text size="sm" spacer>Edge Requests</aui-text>
+                <aui-text size="sm" weight="medium">$1.83K</aui-text>
+              </aui-stack>
+              <aui-divider></aui-divider>
+
+              <!-- Fast Data Transfer: 73% -->
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
+                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
+                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
+                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-2);" stroke-width="2"
+                    stroke-dasharray="50.3" stroke-dashoffset="13.6" stroke-linecap="round"/>
+                </svg>
+                <aui-text size="sm" spacer>Fast Data Transfer</aui-text>
+                <aui-text size="sm" weight="medium">$952.51</aui-text>
+              </aui-stack>
+              <aui-divider></aui-divider>
+
+              <!-- Monitoring Data Points: 58% -->
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
+                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
+                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
+                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-3);" stroke-width="2"
+                    stroke-dasharray="50.3" stroke-dashoffset="21.1" stroke-linecap="round"/>
+                </svg>
+                <aui-text size="sm" spacer>Monitoring Data Points</aui-text>
+                <aui-text size="sm" weight="medium">$901.20</aui-text>
+              </aui-stack>
+              <aui-divider></aui-divider>
+
+              <!-- Web Analytics Events: 42% -->
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
+                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
+                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
+                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-4);" stroke-width="2"
+                    stroke-dasharray="50.3" stroke-dashoffset="29.2" stroke-linecap="round"/>
+                </svg>
+                <aui-text size="sm" spacer>Web Analytics Events</aui-text>
+                <aui-text size="sm" weight="medium">$603.71</aui-text>
+              </aui-stack>
+              <aui-divider></aui-divider>
+
+              <!-- ISR Writes: 26% (524K / 2M) -->
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
+                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
+                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
+                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-5);" stroke-width="2"
+                    stroke-dasharray="50.3" stroke-dashoffset="37.2" stroke-linecap="round"/>
+                </svg>
+                <aui-text size="sm" spacer>ISR Writes</aui-text>
+                <aui-text muted size="sm">524.52K / 2M</aui-text>
+              </aui-stack>
+              <aui-divider></aui-divider>
+
+              <!-- Function Duration: 0.5% (5.11 / 1K GB Hrs) -->
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
+                <svg width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0;" transform="rotate(-90)">
+                  <circle cx="10" cy="10" r="8" fill="none" stroke="var(--aui-border-muted)" stroke-width="2"/>
+                  <circle cx="10" cy="10" r="8" fill="none" style="stroke: var(--aui-chart-6);" stroke-width="2"
+                    stroke-dasharray="50.3" stroke-dashoffset="50" stroke-linecap="round"/>
+                </svg>
+                <aui-text size="sm" spacer>Function Duration</aui-text>
+                <aui-text muted size="sm">5.11 GB Hrs / 1K GB Hrs</aui-text>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>
+    description: Six billing line items with SVG progress rings at varied fill levels across the color spectrum.

package/dist/docs/components/accordion-item.yaml

@@ -0,0 +1,52 @@
+name: aui-accordion-item
+tag: aui-accordion-item
+type: component
+summary: Collapsible section with trigger and content panel.
+description: >
+  Uses native details/summary for baseline accessibility. Chevron
+  indicator rotates on open. Can be used standalone or inside
+  aui-accordion for coordinated single-open behavior.
+
+base: AgentElement
+
+attributes:
+  open:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Whether the content is expanded.
+
+  disabled:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Prevents toggling.
+
+a11y:
+  role: Uses native details/summary semantics.
+  keyboard:
+    Enter: Toggle open/closed.
+    Space: Toggle open/closed.
+
+events:
+  toggle:
+    description: Fired when open state changes. detail.open is the new state.
+
+composition:
+  parents: [aui-accordion, any]
+  children: [any]
+
+examples:
+  - html: |
+      <aui-accordion-item>
+        <span data-trigger>Section Title</span>
+        <p>Collapsible content here.</p>
+      </aui-accordion-item>
+    description: Single collapsible section.
+
+  - html: |
+      <aui-accordion-item open>
+        <span data-trigger>Initially Open</span>
+        <p>This section starts expanded.</p>
+      </aui-accordion-item>
+    description: Pre-opened section.

package/dist/docs/components/accordion.yaml

@@ -0,0 +1,69 @@
+name: aui-accordion
+tag: aui-accordion
+type: component
+summary: Collapsible section group with optional single-open mode.
+description: >
+  Container for aui-accordion-item children. By default, only one
+  item can be open at a time. Set `multiple` to allow several.
+
+base: AgentElement
+
+attributes:
+  multiple:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Allow multiple items open simultaneously.
+
+  caret:
+    syntax: key-value
+    type: enum
+    values: [leading, trailing]
+    default: leading
+    description: >
+      Position of the expand/collapse chevron.
+      Leading places it before the label, trailing after.
+
+composition:
+  parents: [any]
+  children: [aui-accordion-item]
+
+examples:
+  - html: |
+      <aui-accordion>
+        <aui-accordion-item>
+          <span data-trigger>Section 1</span>
+          <p>Content 1</p>
+        </aui-accordion-item>
+        <aui-accordion-item>
+          <span data-trigger>Section 2</span>
+          <p>Content 2</p>
+        </aui-accordion-item>
+      </aui-accordion>
+    description: Single-open accordion.
+
+  - html: |
+      <aui-accordion multiple>
+        <aui-accordion-item open>
+          <span data-trigger>FAQ 1</span>
+          <p>Answer 1</p>
+        </aui-accordion-item>
+        <aui-accordion-item open>
+          <span data-trigger>FAQ 2</span>
+          <p>Answer 2</p>
+        </aui-accordion-item>
+      </aui-accordion>
+    description: Multiple-open accordion.
+
+  - html: |
+      <aui-accordion caret="trailing">
+        <aui-accordion-item open>
+          <span data-trigger>Trailing caret</span>
+          <p>Chevron on the right side.</p>
+        </aui-accordion-item>
+        <aui-accordion-item>
+          <span data-trigger>Another section</span>
+          <p>More content here.</p>
+        </aui-accordion-item>
+      </aui-accordion>
+    description: Trailing caret position.

package/dist/docs/components/agent-activity.yaml

@@ -0,0 +1,79 @@
+name: aui-agent-activity
+tag: aui-agent-activity
+type: component
+summary: Streaming activity indicator with typing dots and elapsed timer.
+description: >
+  When active, shows an animated indicator with elapsed time.
+  When expandable, clicking toggles visibility of slotted trace content
+  (e.g. reasoning trace, tool calls).
+
+base: AgentElement
+
+attributes:
+  type:
+    syntax: key-value
+    type: string
+    default: typing
+    description: Activity type — typing, thinking, or tool-use.
+
+  label:
+    syntax: key-value
+    type: string
+    default: ""
+    description: Custom label text (overrides default per-type label).
+
+  active:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Currently streaming / in progress.
+
+  expandable:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Allow click to expand trace content.
+
+  expanded:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Whether trace content is visible.
+
+events:
+  aui:activity-toggle:
+    description: >
+      Fired when trace is expanded/collapsed.
+      detail contains expanded boolean.
+
+composition:
+  parents: [aui-agent-message]
+  children: [pre, div, any]
+
+examples:
+  - html: |
+      <aui-agent-activity type="typing" active></aui-agent-activity>
+    description: Typing indicator — animated dots signaling the assistant is composing a response.
+
+  - html: |
+      <aui-agent-activity type="thinking" active label="Reasoning"></aui-agent-activity>
+    description: Thinking indicator with custom label and elapsed timer — used during extended reasoning or chain-of-thought processing.
+
+  - html: |
+      <aui-agent-activity type="thinking" expandable expanded>
+        <div data-role="trace">
+          <aui-text muted size="sm">The user is asking about onboarding drop-off. I should consider:</aui-text>
+          <aui-text muted size="sm">1. Funnel analysis — where exactly are users leaving?</aui-text>
+          <aui-text muted size="sm">2. Session recordings — qualitative signals</aui-text>
+          <aui-text muted size="sm">3. Survey data — self-reported friction points</aui-text>
+          <aui-text muted size="sm">Let me structure a response around these three data sources.</aui-text>
+        </div>
+      </aui-agent-activity>
+    description: Expandable reasoning trace — completed thinking step with visible chain-of-thought. Click toggles the trace content open/closed.
+
+  - html: |
+      <aui-agent-activity type="tool-use" active label="Searching codebase" expandable>
+        <pre>search_files("auth middleware", include=["*.ts", "*.tsx"])
+        → Found 12 matches in 5 files</pre>
+      </aui-agent-activity>
+    description: Tool-use activity with live trace — shows the tool call and partial results while the operation is in progress.

package/dist/docs/components/agent-feed.yaml

@@ -0,0 +1,83 @@
+name: aui-agent-feed
+tag: aui-agent-feed
+type: component
+summary: Scrollable chat thread coordinator with auto-scroll and token definitions.
+description: >
+  Wraps aui-agent-thread groups and manages auto-scroll behavior.
+  When pinned to bottom, new content automatically scrolls into view.
+  Defines CSS custom properties (tokens) for the entire agent chat system.
+
+base: AgentElement
+
+attributes:
+  auto-scroll:
+    syntax: boolean
+    type: boolean
+    default: true
+    description: Enable auto-scroll to bottom on new content.
+
+  scrollable:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Enable scroll container. Remove to delegate scrolling to a parent.
+
+a11y:
+  role: log
+  aria-live: polite
+
+events:
+  aui:feed-scroll:
+    description: >
+      Fired when scroll pinned state changes.
+      detail contains isPinned and scrollTop.
+
+composition:
+  parents: [aui-content, aui-pane, div, any]
+  children: [aui-agent-thread]
+
+examples:
+  - html: |
+      <aui-agent-feed auto-scroll scrollable style="height: 24rem;">
+        <aui-agent-thread role="user" sender="You">
+          <aui-agent-message role="user">
+            <aui-agent-text format="plain">Can you help me write a Python script that reads a CSV file and groups rows by the "department" column?</aui-agent-text>
+          </aui-agent-message>
+        </aui-agent-thread>
+        <aui-agent-thread role="assistant" sender="Claude">
+          <aui-avatar>C</aui-avatar>
+          <aui-agent-message role="assistant">
+            <aui-agent-text>Sure! Here's a script using `pandas` to group CSV rows by department:
+
+      ```python
+      import pandas as pd
+
+      df = pd.read_csv("data.csv")
+      grouped = df.groupby("department")
+
+      for name, group in grouped:
+          print(f"\n--- {name} ---")
+          print(group.to_string(index=False))
+      ```
+
+      This reads `data.csv`, groups by the **department** column, and prints each group. Want me to add export to separate files?</aui-agent-text>
+          </aui-agent-message>
+        </aui-agent-thread>
+      </aui-agent-feed>
+    description: Chat conversation with a user question and an assistant response containing a code block.
+
+  - html: |
+      <aui-agent-feed auto-scroll scrollable style="height: 20rem;">
+        <aui-agent-thread role="user" sender="You">
+          <aui-agent-message role="user">
+            <aui-agent-text format="plain">What are the key differences between REST and GraphQL?</aui-agent-text>
+          </aui-agent-message>
+        </aui-agent-thread>
+        <aui-agent-thread role="assistant" sender="Claude">
+          <aui-avatar>C</aui-avatar>
+          <aui-agent-message role="assistant" status="streaming">
+            <aui-agent-activity type="thinking" active></aui-agent-activity>
+          </aui-agent-message>
+        </aui-agent-thread>
+      </aui-agent-feed>
+    description: Feed with an active thinking indicator — the assistant is processing the user's question.