testio-tailwind 3.24.0 → 3.25.1

package/AI_DESIGN_SYSTEM_REFERENCE.md

@@ -1,14 +1,26 @@
 # Test IO Tailwind Design System - AI Reference Guide
 
-**Version:** 3.22.0
+**Version:** 3.23.0
 **Framework:** Tailwind CSS 4.x
 **Package:** `testio-tailwind`
-**Last Updated:** January 2026
+**Last Updated:** February 2026
 **Node Version:** v23.11.0
 
 This document serves as a comprehensive reference for AI Agents to utilize the Test IO Tailwind design system when building pages and components in other projects.
 
-## Recent Updates (January 2026)
+## Recent Updates (February 2026)
+
+- 📚 **AgenticQA Documentation Expansion**: Comprehensive documentation for all AgenticQA components with use cases and patterns
+- ✨ **Enhanced Chat Components**: Detailed documentation for chat messages, collapsable messages, history, and forms
+- 🎯 **Splitview Components**: Complete documentation for grouped check display with turbo-frame support
+- 📊 **Grid & Form Row Tables**: Comprehensive table documentation with grid layout and inline editing patterns
+- 📋 **List Items with Attachments**: Enhanced documentation for collapsable list items with screenshot support
+- 🎨 **Navigation Headers**: Complete AgenticQA header documentation with profile menu and mobile support
+- ✨ **Status Tracking**: Detailed status stepper and progress tracking component documentation
+- 📱 **Responsive Patterns**: Mobile-first responsive design patterns for all AgenticQA components
+- 🌙 **Dark Mode Integration**: Full dark mode support across all AgenticQA components
+
+## Version 3.22.0 - January 2026
 
 - ✨ **Centered Layout**: New centered application layout documentation and examples
 - ✨ **Dark Mode Examples**: Comprehensive dark mode layout examples and documentation
@@ -2406,9 +2418,45 @@ A horizontal stepper component for visualizing multi-step processes.
 
 ## AgenticQA Components
 
-Product-specific components for the AgenticQA platform.
+Comprehensive component library specifically designed for the AgenticQA platform. These components provide AI-driven quality assurance workflow interfaces with sophisticated chat, progress tracking, and detailed testing result displays.
+
+**View Live Examples:** `http://localhost:8080/agenticqa/`
+
+### Recent AgenticQA Updates (February 2026)
+
+- ✨ **Enhanced Chat Components**: Improved collapsable chat messages with better visual hierarchy
+- ✨ **Splitview Items**: Advanced component for displaying grouped checks with status tracking and turbo-frame support
+- 🎯 **Form Row Tables**: Grid-based table with integrated form controls for inline editing
+- 📊 **Grid Tables**: Flexible grid-based table layout with URL collapsables and action menus
+- 📋 **List Items**: Collapsable list items with attachments support for AI screenshots
+- 🎨 **Chat Form Component**: Specialized form for check re-runs with additional instructions
+- 🔄 **Status Stepper**: Progress tracking component showing completed, active, and pending states
+- 📱 **Responsive Layouts**: All components optimized for mobile and desktop viewing
+- 🌙 **Dark Mode Support**: Full dark mode styling across all AgenticQA components
+
+---
 
 ### AgenticQA Page Header
+
+**Purpose:** Display session/test details with metadata and action buttons. Includes optional chart display for progress visualization.
+
+**Use Cases:**
+- Test session overview with metadata (creation date, last run, session ID)
+- Test suite information and status display
+- Session control actions (start test, re-run tests, show report)
+- Optional progress chart visualization
+
+**Key Classes:**
+- `.page-header` - Main container
+- `.page-maincard` - Primary information card (use with `.p-card-padding`)
+- `.page-session-title` - Large session title text
+- `.page-meta-info` - Definition list for metadata display
+- `.page-actions` - Container for action buttons
+- `.with-chart` - Modifier for charts display
+- `.page-chart` - Chart container
+- `.btn-main` - Main action button (primary CTA)
+
+**HTML Structure:**
 ```html
 <div class="page-header">
   <div class="card page-maincard p-card-padding">
@@ -2416,7 +2464,13 @@ Product-specific components for the AgenticQA platform.
     <h2 class="page-session-title">Test Session title</h2>
     <dl class="page-meta-info">
       <dt class="label">Created on:</dt>
-      <dd>2025-07-23 19:11</dd>
+      <dd>2025-07-23 19:11 10:45 AM</dd>
+      <dt class="label">Last test:</dt>
+      <dd>2025-07-23 19:11 10:45 AM</dd>
+      <dt class="label">ID:</dt>
+      <dd>321456987</dd>
+      <dt class="label">URL:</dt>
+      <dd><a class="label" href="">Test Suite name</a></dd>
       <dt class="label">Status:</dt>
       <dd class="text-white">Running</dd>
     </dl>
@@ -2430,37 +2484,689 @@ Product-specific components for the AgenticQA platform.
 </div>
 ```
 
-### AgenticQA Status Stepper
+**With Chart:**
 ```html
-<div class="status-stepper">
-  <div class="status-step completed">
-    <div class="icon icon-check-thick-centered"></div>
-    3 done
-  </div>
-  <div class="status-step active">
-    <div class="icon icon-sync"></div>
-    Executing checks
+<div class="page-header with-chart">
+  <!-- ... main card ... -->
+  <div class="page-chart card p-card-padding">
+    <div class="echarts-container" id="echarts-testinator"></div>
   </div>
-  <div class="status-step">
-    + 3 to do
+  <div class="page-actions">
+    <a class="btn btn-primary btn-main" href="">
+      <span class="icon icon-review-xl"></span>
+      Show report
+    </a>
   </div>
 </div>
 ```
 
-### AgenticQA List Item
-```html
-<div class="listitem agenticqa">
-  <!-- AgenticQA-specific list item styling -->
-</div>
+---
+
+### AgenticQA Chat Components
+
+**Purpose:** Display conversational exchanges between users and the AI system for test instructions, feedback, and results discussion.
+
+#### Chat Messages (Standard)
+
+Display chat message items in a thread format with user identification and timestamps.
+
+**Use Cases:**
+- AI justifications for test results
+- User feedback and instructions
+- Test check descriptions and explanations
+- Bidirectional message threads
+
+**Key Classes:**
+- `.list-chat-messages` - Container for message list
+- `.chat-message-item` - Individual message wrapper
+- `.your-message` - Modifier for user messages (right-aligned)
+- `.chat-avatar` - User profile image
+- `.chat-header` - Message header with title and timestamp
+- `.chat-title` - Message title/label
+- `.chat-message` - Message body content
+- `.collapsable` - Modifier for expandable messages
+- `.chat-action-row` - Container for action buttons after messages
+
+**HAML Structure:**
+```haml
+.list-chat-messages.full-width
+  .chat-message-item
+    %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+    .chat-header
+      %span.chat-title.label Justification
+      %span.label 5 mins ago
+    .chat-message
+      Here's a message with analysis...
+  .chat-message-item.your-message
+    %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+    .chat-header
+      %span.chat-title.label Your message
+      %span.label 5 mins ago
+    .chat-message
+      Here's your feedback...
+  .chat-action-row
+    %a.btn.btn-primary.rounded-full re-run check
+    %a.btn.btn-secondary.rounded-full update check
+```
+
+#### Collapsable Chat Messages
+
+Expandable chat messages for long content with `<details>` element.
+
+**Use Cases:**
+- Long AI justifications or explanations
+- Detailed test results or error messages
+- Optional content expansion to save space
+
+**Key Classes:**
+- `.collapsable` - Modifier for expandable messages
+- `details` - HTML details element for collapse functionality
+- `.chat-header` - Summary header inside details
+
+```haml
+.chat-message-item.collapsable
+  %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+  %details
+    %summary.chat-header
+      %span.chat-title.label Collapsable message
+      %span.label 5 mins ago
+    .chat-message
+      Here's a long message with extensive lorem ipsum...
+```
+
+#### Chat History
+
+Collapsable container for viewing full conversation history.
+
+**Purpose:** Show/hide complete chat thread to reduce visual clutter while maintaining access to full context.
+
+**Use Cases:**
+- Full conversation history display
+- Context for test decisions
+- Audit trail of AI reasoning
+
+```haml
+.card.p-card-padding
+  %details.chat-history-collapsable
+    %summary.chat-history-header
+      .chat-history-title Show complete history
+    .list-chat-messages.full-width
+      .chat-message-item
+        %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
+        .chat-header
+          %span.chat-title.label Justification
+          %span.label 5 mins ago
+        .chat-message
+          Historical message content...
+```
+
+#### Chat Form
+
+**Purpose:** Allow users to re-run checks or update test parameters with additional instructions.
+
+**Use Cases:**
+- Re-running a failed check with new instructions
+- Providing additional context for test execution
+- Sending feedback to AI system
+
+**Key Classes:**
+- `.chat-form-row` - Container for form
+- `.chat-form` - Form element
+- `.form-actions` - Button container
+
+```haml
+.chat-form-row
+  %form.chat-form
+    %h5.text-card-header.mb-xxs Re-Run this check
+    %p.font-light.mb-md Add additional instructions for re-running this check.
+    %textarea.form-control{placeholder:"Add your instructions or feedback"}
+    .form-actions
+      %a.btn.btn-primary.rounded-full
+        %span.icon.icon-sync.mr-icon-spacing
+        re-run check
+      %button.btn.btn-secondary.rounded-full Cancel
+```
+
+---
+
+### AgenticQA Status Stepper
+
+**Purpose:** Display progress of test execution with completed, active, and pending states.
+
+**Use Cases:**
+- Overall progress tracking in splitview
+- Check execution status summary
+- Visual progress indicator
+
+**Key Classes:**
+- `.status-stepper` - Main container
+- `.status-step` - Individual step
+- `.completed` - Modifier for completed steps
+- `.active` - Modifier for active step
+- `.counter` - Optional counter display
+- `.icon` - Status icon
+
+**HAML Structure:**
+```haml
+.status-stepper
+  .status-step.completed
+    .icon.icon-check-thick-centered
+    3 done
+  .status-step.active
+    .icon.icon-sync
+    Executing checks
+  .status-step
+    + 3 to do
+```
+
+**With Counters:**
+```haml
+.status-stepper
+  .status-step.completed
+    .counter 99
+    Completed
+  .status-step.active
+    .counter 99
+    Active
+  .status-step
+    .counter 99
+    Initial
+```
+
+---
+
+### AgenticQA Splitview Components
+
+**Purpose:** Display grouped checks and their individual test results in an expandable/collapsable interface.
+
+**Use Cases:**
+- List of checks for a specific URL/page
+- Detailed check results with status indicators
+- Grouped by page/URL for organization
+- Turbo-frame integration for dynamic updates
+
+**Key Classes:**
+- `.splitview-group` - Collapsable group container
+- `.splitview-item` - Individual check item
+- `.splitview-item-icon` - Status icon
+- `.splitview-item-text` - Check description
+- `.splitview-item-title` - URL or group title
+- `.splitview-item-status` - Status label/icon
+- `.splitview-group-status` - Group-level status stepper
+- `.selected` - Modifier for selected item
+- `.unread` - Modifier for unread items
+- `.text-with-icon` - Icon + text combination
+- `.splitview-btn` - Show more button
+- `.turbo-frame` - Turbo frame wrapper
+
+**Status Icons:**
+- `.icon-check-circle-filled.success` - Passed check
+- `.icon-cross-circle-filled.danger` - Failed check
+- `.icon-blocked.blocked` - Blocked/skipped check
+- `.icon-sync.pending` - Pending/executing check
+- `.icon-circle-empty` - Not started/placeholder
+
+**HAML Structure:**
+```haml
+%details.splitview-group
+  %summary.splitview-item.unread
+    .splitview-item-icon.icon.icon-circle-empty.text-chart-empty
+    .splitview-item-text
+      .splitview-item-title https://www.example.com/product
+    .splitview-item-status
+      .text-with-icon
+        .icon.icon-sync
+        executing checks
+  .splitview-group-status.status-stepper
+    .status-step.completed
+      .icon.icon-check-thick-centered
+      3 done
+    .status-step.active
+      .icon.icon-sync
+      Executing checks
+    .status-step
+      + 3 to do
+  .splitview-item.selected
+    .splitview-item-icon.icon.icon-cross-circle-filled.danger
+    .splitview-item-text Check title
+  .splitview-item.unread
+    .splitview-item-icon.icon.icon-check-circle-filled.success
+    .splitview-item-text Check title
+```
+
+**With Turbo Frames (Dynamic Updates):**
+```haml
+%details.splitview-group
+  %summary.splitview-item
+    .splitview-item-icon.icon.icon-circle-empty.text-chart-empty
+    .splitview-item-text
+      .splitview-item-title https://url.com
+  .splitview-group-status.status-stepper
+    .status-step.active
+      Pending start
+    .status-step
+      + 6 to do
+  %turbo-frame.turbo-wrapper
+    %a.splitview-item
+      .splitview-item-icon.icon.icon-check-circle-filled.success
+      .splitview-item-text Navigation Menu Hover
+  %turbo-frame.turbo-wrapper
+    %a.splitview-item
+      .splitview-item-icon.icon.icon-cross-circle-filled.danger
+      .splitview-item-text No Results Message
+  %btn.btn.splitview-btn Show 99 dismissed checks
+```
+
+---
+
+### AgenticQA List Items
+
+**Purpose:** Display detailed check results or findings with expandable content and attachments (screenshots).
+
+**Use Cases:**
+- Individual bug/issue details
+- Screenshot and evidence display
+- Detailed findings with descriptions
+- AI analysis and justification
+
+**Key Classes:**
+- `.list-listitems` - Container
+- `.listitem` - Individual item wrapper
+- `details` - Collapsable wrapper
+- `.listitem-header` - Header with title and expand button
+- `.listitem-badge` - Number/index badge
+- `.listitem-title` - Item title
+- `.listitem-actions` - Header actions
+- `.collapse-btn` - Expand/collapse button
+- `.listitem-content` - Expanded content
+- `.listitem-subheadline` - Section subheading
+- `.listitem-card` - Text content wrapper
+- `.listitem-attachments` - Attachments container
+- `.attachment` - Individual attachment
+- `.attachment-thumb` - Attachment preview image
+
+**HAML Structure:**
+```haml
+.list-listitems
+  %details.listitem
+    %summary.listitem-header
+      .listitem-badge 1
+      .listitem-title List item collapsable
+      .listitem-actions
+        .btn.collapse-btn
+    .listitem-content
+      .listitem-subheadline Subheadline
+      .listitem-card
+        %p Here's a detailed message with findings and analysis...
+      .listitem-subheadline AI Screenshots
+      .listitem-attachments
+        .attachment
+          %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
+            %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
+        .attachment
+          %a.attachment-thumb{href:"/assets/images/placeholders/screenshot.png"}
+            %img{src:'/assets/images/placeholders/screenshot.png', alt:'Screenshot'}
+```
+
+---
+
+### AgenticQA Tables
+
+**Purpose:** Display test checks in organized grid format with filtering, editing, and status tracking.
+
+#### Grid Table (Read-Only)
+
+Display checks in a grid layout with status icons, URLs, results, and action buttons.
+
+**Use Cases:**
+- Overview of all checks for a test suite
+- Status tracking and filtering
+- Quick actions (edit, duplicate, delete)
+- URL grouping and expansion
+
+**Key Classes:**
+- `.table-grid` - Grid-based table container
+- `.table-rowgroups` - Modifier for grouped styling
+- `.thead` - Header row group
+- `.tbody` - Body rows
+- `.tr` - Table row
+- `.th` - Header cell
+- `.td` - Data cell
+- `.checkbox-column` - Checkbox cell
+- `.action-column` - Actions cell (right-aligned)
+- `.url-collapsable` - Collapsable URL list
+- `.dropdown-actions` - Dropdown menu for actions
+- `.form-check` - Checkbox wrapper
+- `.text-with-icon` - Icon + text combination
+
+**Grid Configuration:**
+```
+grid-template-columns: repeat(2, auto) repeat(2, minmax(12rem, 1fr)) repeat(5, auto);
+```
+
+**HAML Structure:**
+```haml
+.table-grid.table-rowgroups{style:"grid-template-columns: repeat(2, auto) repeat(2, minmax(12rem, 1fr)) repeat(5, auto);"}
+  .thead
+    .tr
+      .th
+        .form-check.sm
+          %input#check1sm{type:'checkbox'}
+      .th status
+      .th title
+      .th urls
+      .th check suite
+      .th results
+      .th executions
+      .th executed
+      .th
+  .tbody
+    .tr
+      .btn.btn-sm.btn-block.btn-subtile.mb-xxs.col-span-9
+        .icon.icon-plus.mr-icon-spacing
+        Add new check
+    .tr
+      .td.checkbox-column
+        .form-check.sm
+          %input#check1sm{type:'checkbox'}
+      .td status
+      .td
+        %a.white.font-normal{href:"#"} Short Title
+      .td
+        %details.url-collapsable
+          %summary
+            %p https://url.com
+            .trigger
+              .text-closed Show 3 more
+              .text-open Show less
+          %p https://url.com/1
+          %p https://url.com/2
+          %p https://url.com/3
+      .td
+        %a.white.font-normal{href:"#"} Check suite title
+      .td
+        .flex.flex-row
+          .text-with-icon.mr-sm
+            .icon.icon-check-circle-filled.text-success
+            999
+          .text-with-icon.mr-sm
+            .icon.icon-cross-circle-filled.text-danger
+            999
+          .text-with-icon
+            .icon.icon-blocked.text-blocked
+            999
+      .td 6
+      .td 13h ago
+      .td.action-column
+        %a.btn.btn-square{href:'#'}
+          .icon.icon-pencil
+        %details.dropdown-actions.dropright
+          %summary
+            .btn.btn-square
+              .icon.icon-more
+          .popover-menu
+            %a.popover-action{href:'#'}
+              .icon.icon-pencil
+              Edit
+            %a.popover-action{href:'#'}
+              .icon.icon-copy
+              Duplicate
+            %a.popover-action{href:'#'}
+              .icon.icon-delete
+              Delete
+```
+
+#### Form Row Table (Editable)
+
+Grid-based table with inline form controls for editing check parameters.
+
+**Purpose:** Create or edit multiple checks in a structured table layout with form validation.
+
+**Use Cases:**
+- Creating new checks for a test suite
+- Editing existing check parameters
+- Inline validation and feedback
+- Responsive mobile-friendly editing
+
+**Key Classes:**
+- `.formrow` - Form-based table row
+- `.form-group` - Form field wrapper
+- `.formrow-actions` - Button actions for save/discard
+- Responsive modifiers: `col-span-4 lg:col-span-1`
+
+**HAML Structure:**
+```haml
+.table-grid.table-rowgroups{style:"grid-template-columns: repeat(3, auto) repeat(1, minmax(12rem, 1fr)) auto;"}
+  .thead
+    .tr
+      .th
+        .form-check.sm
+          %input{type:'checkbox'}
+      .th check title
+      .th page type
+      .th check description
+      .th
+  .tbody
+    .tr
+      .btn.btn-sm.btn-block.btn-subtile.mb-xxs.col-span-5
+        .icon.icon-plus.mr-icon-spacing
+        Add new check
+    %form.formrow.tr
+      .td.checkbox-column.row-span-4{class:"lg:row-span-1"}
+        .form-check.sm
+          %input{type:'checkbox', disabled:"true"}
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Check title
+        %input.form-control{type:'text', placeholder:"An input field"}
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Page type
+        %select.tom-select{placeholder: "Please select"}
+          %option{value: ""}
+          %option{value:"Option 1"} Option 1
+          %option{value:"Option 2"} Option 2
+      .td.col-span-4{class:"lg:col-span-1"}
+        .label.mb-xxs{class:"lg:hidden"} Check description
+        %textarea.form-control{rows:'1', placeholder:"Textarea"}
+      .td.formrow-actions.col-span-4{class:"lg:col-span-1"}
+        %button.btn.btn-sm.btn-block.btn-primary Save changes  
+        %button.btn.btn-sm.btn-block.btn-danger Discard
+```
+
+#### URL Collapsable
+
+**Purpose:** Expand/collapse long URLs to save table space.
+
+**Use Cases:**
+- Multiple URLs per check
+- Long domain paths
+- Grouped URL display
+
+```haml
+%details.url-collapsable
+  %summary
+    %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/phase-2
+    .trigger
+      .text-closed Show 6 more
+      .text-open Show less
+  %p https://example.invalid/data/sets/long-format/experimental/1
+  %p https://example.invalid/data/sets/long-format/experimental/2
+  %p https://example.invalid/data/sets/long-format/experimental/3
 ```
 
+---
+
 ### AgenticQA Header
+
+**Purpose:** Navigation header for AgenticQA application with user profile, dropdowns, and mobile menu.
+
+**Use Cases:**
+- Main application navigation
+- User profile and settings access
+- Quick navigation links
+- Responsive mobile menu
+
+**Key Classes:**
+- `.header.agenticqa` - AgenticQA header variant
+- `.header-wrapper` - Header content wrapper
+- `.navlinks` - Link group container
+- `.navlink` - Navigation link
+- `.active` - Modifier for active link
+- `.header-logo` - Logo link
+- `.header-dropdown` - Dropdown menu
+- `.dropdown-menu` - Dropdown content
+- `.mobile-links` - Mobile menu container
+- `.mobile-menu` - Mobile menu content
+- `.mobile-menu-btn` - Mobile menu toggle
+- `.user-menu` - User profile menu
+- `.btn-profile` - Profile button
+- `.user-profile` - Profile image
+- `.user-details` - User info (role, name)
+- `.profile-role` - User role text
+- `.profile-name` - User name text
+
+**HAML Structure:**
+```haml
+%nav.header.agenticqa
+  .header-wrapper
+    .navlinks.logo-wrapper
+      %a.navlink.header-logo{href:'#'}
+    .navlinks.left
+      %a.navlink.active{href:'#'} Navlink active
+      %a.navlink{href:'#'} Navlink
+      %a.navlink{href:'#'}
+        %span.icon.icon-check-circle-filled 
+        %span Navlink
+      %details.header-dropdown
+        %summary.navlink Collapsable
+        .dropdown-menu
+          %a.navlink{href:'#'}
+            %span.icon.icon-user  
+            Dropdown-item
+          %a.navlink{href:'#'}
+            %span.icon.icon-cog  
+            Dropdown-item
+          %a.navlink{href:'#'}
+            %span.icon.icon-shutdown 
+            Sign out
+    %details.mobile-links
+      %summary.mobile-menu-btn
+        .navlink
+          %span.sr-only Open main menu
+          %span.icon.icon-menu
+      .mobile-menu.sidebar
+        %a.navlink.active{href:'#'}
+          %span.navlink-badge.icon.icon-home
+          Navlink active
+        %details
+          %summary.navlink
+            %span.icon.icon-product
+            Collapsable
+          %a.navlink{href:'#'}
+            %span.icon.icon-test
+            Navlink child
+    .navlinks.right
+      %details.header-dropdown.user-menu
+        %summary.btn-profile.navlink
+          %span.sr-only Open user menu
+          %img.user-profile{src:'/assets/images/placeholders/profile_supergirl.png'}
+          .user-details
+            .profile-role Admin
+            .profile-name Anja Berger
+        .dropdown-menu.profile-dropdown
+          %a.dropdown-link{href:'#'}
+            %span.icon.icon-user  
+            Your Profile
+          %a.dropdown-link{href:'#'}
+            %span.icon.icon-cog  
+            Settings
+          %a.dropdown-link{href:'#'}
+            %span.icon.icon-shutdown
+            Sign out
+```
+
+---
+
+### AgenticQA Asset References
+
+**Logo Assets:**
+- Logo files: `/src/assets/images/logo_agenticqa/`
+- Formats: PNG (raster) and SVG (vector)
+- Variants: Purple/Teal with white/black text
+
+**Email Header Assets:**
+- Email templates: `/src/assets/images/assets_agenticqa/`
+- Email styling: `src/pages/agenticqa/email.njk`
+
+---
+
+### AgenticQA Layout Structure
+
+All AgenticQA pages use a dark sidebar layout structure:
+
 ```html
-<header class="header agenticqa_header">
-  <!-- AgenticQA navigation -->
-</header>
+<body class="app-body">
+  <header class="header agenticqa">
+    <!-- AgenticQA navigation -->
+  </header>
+  <main class="main-content">
+    <div class="app-layout">
+      <aside class="sidebar dark">
+        <!-- Sidebar navigation with dark background -->
+      </aside>
+      <div class="content-area">
+        <!-- Main content area -->
+      </div>
+    </div>
+  </main>
+</body>
 ```
 
+**Layout Classes:**
+- `.page-with-sidebar-dark` - Dark sidebar layout (AgenticQA standard)
+- `.page-with-sidebar-nocode` - Sidebar without code blocks
+- `.page-with-sidebar` - Standard sidebar layout
+
+---
+
+### AgenticQA Best Practices
+
+1. **Chat Interactions**
+   - Keep messages concise and focused
+   - Use collapsable messages for long content
+   - Always include timestamps and speaker identification
+   - Use appropriate icons for message context
+
+2. **Status Tracking**
+   - Use status stepper for overall progress
+   - Use splitview for URL/page grouping
+   - Provide clear status indicators (completed, active, pending)
+   - Include counter badges for progress
+
+3. **Table Design**
+   - Use grid tables for read-only displays
+   - Use form row tables for inline editing
+   - Always include status column first
+   - Provide expandable URL/details sections
+   - Include action buttons for quick operations
+
+4. **List Items**
+   - Use collapsable structure for detail preservation
+   - Include attachments/screenshots for evidence
+   - Provide clear subheadings and sections
+   - Use consistent styling for findings
+
+5. **Navigation**
+   - Follow AgenticQA header pattern for consistency
+   - Include user profile in top-right
+   - Support mobile menu for responsive design
+   - Highlight active navigation item
+
+6. **Dark Mode**
+   - All AgenticQA components include dark mode support
+   - Dark sidebar is primary navigation pattern
+   - Sufficient contrast for readability
+   - Test on actual dark backgrounds
+
 ---
 
 ## Dark Mode
@@ -2658,6 +3364,28 @@ The design system includes comprehensive dark mode support with customized theme
 
 ## Change Log
 
+### Version 3.23.0 - February 2026
+
+**AgenticQA Documentation:**
+- 📚 Comprehensive expansion of AgenticQA components section
+- ✨ Detailed use cases for all AgenticQA components
+- 🎯 Chat components documentation (standard, collapsable, history, form)
+- 📊 Table components documentation (grid layout and form row editing)
+- 📋 List items with attachment support documentation
+- 🎨 Navigation header with user profile and mobile menu documentation
+- 📱 Status stepper and progress tracking component documentation
+- 🌙 Dark mode integration across all AgenticQA components
+- 🔗 Splitview components with turbo-frame support documentation
+- 📐 URL collapsable component for space-efficient display
+- ✅ AgenticQA best practices for AI agents
+
+**Features:**
+- Live example links for all AgenticQA components
+- Complete HAML/HTML structure examples for each component
+- Key classes and modifiers documented
+- Responsive design patterns for mobile and desktop
+- Status icon reference and usage guide
+
 ### Version 3.22.0 - January 2026
 
 **New Features:**