testio-tailwind 3.25.0 → 3.26.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:**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.25.0",
+	"version": "3.26.1",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",
@@ -42,7 +42,7 @@
 		"hamljs": "^0.6.2",
 		"html-minifier-terser": "^7.2.0",
 		"jquery": "^3.6.0",
-		"markdown-it": "^14.1.0",
+		"markdown-it": "^14.1.1",
 		"select2": "^4.1.0-rc.0",
 		"tailwindcss": "^4.1.11",
 		"tom-select": "^2.3.1",

package/src/assets/stylesheets/components/radio_tabs.css

@@ -57,3 +57,7 @@
 .radio-tab:checked + .radio-tab-btn + .radio-tab-content {
   @apply block; 
 }
+
+.radio-tab-form {
+  @apply bg-transparent p-0 rounded-none;
+}

package/src/pages/agenticqa/assets.haml

@@ -3,6 +3,7 @@ tags: agenticqa
 title: Agentic QA assets
 ---
 
+%p.mb-heading Image assets for Agentic QA
 .grid.gap-md.grid-cols-2{class:"xl:grid-cols-3 2xl:grid-cols-4"}
   %a.block{href:"/assets/images/assets_agenticqa/agenticqa_email_header.png"}
     %img.bg-gray-lightest.p-md{src:"/assets/images/assets_agenticqa/agenticqa_email_header.png"}

package/src/pages/agenticqa/chat_collapsable.haml

@@ -3,6 +3,7 @@ tags: agenticqa
 title: Chat collapsable
 ---
 
+%p.mb-heading Collapsable chat message items for the chat thread.
 .list-chat-messages.full-width
   .chat-message-item.collapsable
     %details

package/src/pages/agenticqa/chat_form.haml

@@ -3,6 +3,7 @@ tags: agenticqa
 title: Chat form
 ---
 
+%p.mb-heading Chat form component for re-running checks with additional instructions or containing other forms in the chat thread.
 .chat-form-row
   %form.chat-form
     %h5.text-card-header.mb-xxs Re-Run this check

package/src/pages/agenticqa/chat_history.haml

@@ -3,6 +3,7 @@ tags: agenticqa
 title: Chat history
 ---
 
+%p.mb-heading Collapsable chat history component to show/hide the complete chat thread.
 .card.p-card-padding
   %details.chat-history-collapsable
     %summary.chat-history-header

package/src/pages/agenticqa/chat_messages.haml

@@ -3,6 +3,7 @@ tags: agenticqa
 title: Chat messages
 ---
 
+%p.mb-heading A set of chat message items for the chat thread, including standard and collapsable messages. Add action buttons at the end of the chat.
 .list-chat-messages.full-width
   .chat-message-item
     %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}

package/src/pages/agenticqa/header.haml

@@ -3,6 +3,7 @@ tags: agenticqa
 title: Header
 ---
 
+%p.mb-heading Agentic QA header with navigation links, dropdowns and mobile menu.
 %nav.header.agenticqa
   .header-wrapper
     .navlinks.logo-wrapper

package/src/pages/agenticqa/listitem.haml

@@ -3,6 +3,7 @@ tags: agenticqa
 title: list item
 ---
 
+%p.mb-heading Collapsable list item component with listitem-card and listitem-attachments.
 .list-listitems
   %details.listitem
     %summary.listitem-header

package/src/pages/agenticqa/logo.haml

@@ -3,6 +3,7 @@ tags: agenticqa
 title: Agentic QA logo
 ---
 
+%p.mb-heading Logo assets for Agentic QA
 .grid.gap-md.grid-cols-2{class:"xl:grid-cols-3 2xl:grid-cols-4"}
   %a.block{href:"/assets/images/logo_agenticqa/agenticqa_logo_purpleteal_white_1000px.png"}
     %img.bg-gray-lightest.p-md{src:"/assets/images/logo_agenticqa/agenticqa_logo_purpleteal_white_1000px.png"}

package/src/pages/agenticqa/pageheader.haml

@@ -3,6 +3,8 @@ tags: agenticqa
 title: Pageheader
 ---
 
+%p.mb-heading Page header components in different variations for Agentic QA including session details, actions and charts.
+%p.mb-heading Page header with form inputs for creating or editing.
 .page-header
   .card.page-maincard.p-card-padding
     .form-grid
@@ -29,6 +31,7 @@ title: Pageheader
       Save draft
     %a.btn.btn-secondary{href:""}
       Cancel
+%p.mb-heading Page header showing session details with actions and optional chart.
 .page-header
   .card.page-maincard.p-card-padding
     %h1.text-card-header Session details
@@ -49,6 +52,7 @@ title: Pageheader
     %a.btn.btn-primary.btn-main{href:""}
       %span.icon.icon-test-running-xl
       Start test
+%p.mb-heading Page header showing session details with chart and actions.
 .page-header.with-chart
   .card.page-maincard.p-card-padding
     %h1.text-card-header Session details
@@ -73,6 +77,7 @@ title: Pageheader
       Show report
     %a.btn.btn-secondary{href:""}
       Re-run all checks
+%p.mb-heading Page header showing session details with empty chart and disabled action.
 .page-header.with-chart
   .card.page-maincard.p-card-padding
     %h1.text-card-header Session details

package/src/pages/agenticqa/splitview_items.haml

@@ -3,89 +3,88 @@ tags: agenticqa
 title: Splitview items
 ---
 
-.card.p-card-padding
-  %nav.nav-tabs
-    .navlink.active{href:""} 11 Pages
-    .navlink{href:""} 6 Checks
-  %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.bando.com/collections/writing-supplies/products/retro-pen-set
-      .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
+%p.mb-heading Splitview items for displaying grouped checks and their statuses in the Agentic QA interface. 
+%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.bando.com/collections/writing-supplies/products/retro-pen-set
+    .splitview-item-status
+      .text-with-icon
         .icon.icon-sync
-        Executing checks
-      .status-step
-        + 3 to do
-    .splitview-item.selected
+        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 an endless amount of really long lorem ipsum
+  .splitview-item.unread
+    .splitview-item-icon.icon.icon-blocked.blocked
+    .splitview-item-text Check title with a lot of lorem ipsum
+  .splitview-item.unread
+    .splitview-item-icon
+      .icon.icon-sync.pending.w-icon.animate-spin
+    .splitview-item-text Check title with a lot of lorem ipsum
+%p.my-heading Splitview with turbo-frames.
+%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 Check title
-    .splitview-item.unread
+      .splitview-item-text No Results Message
+  %turbo-frame.turbo-wrapper
+    %a.splitview-item
       .splitview-item-icon.icon.icon-check-circle-filled.success
-      .splitview-item-text Check title with an endless amount of really long lorem ipsum
-    .splitview-item.unread
-      .splitview-item-icon.icon.icon-blocked.blocked
-      .splitview-item-text Check title with a lot of lorem ipsum
-    .splitview-item.unread
+      .splitview-item-text Main Product Image
+  %btn.btn.splitview-btn Show 99 dismissed checks
+%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.completed
+      .icon.icon-check-thick-centered
+      3 done
+    .status-step.active
+      .icon.icon-sync
+      Executing checks
+    .status-step
+      + 3 to do
+  %turbo-frame.turbo-wrapper
+    %a.splitview-item
       .splitview-item-icon
         .icon.icon-sync.pending.w-icon.animate-spin
-      .splitview-item-text Check title with a lot of lorem ipsum
-  %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
-    %turbo-frame.turbo-wrapper
-      %a.splitview-item
-        .splitview-item-icon.icon.icon-check-circle-filled.success
-        .splitview-item-text Main Product Image
-    %btn.btn.splitview-btn Show 99 dismissed checks
-  %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.completed
-        .icon.icon-check-thick-centered
-        3 done
-      .status-step.active
-        .icon.icon-sync
-        Executing checks
-      .status-step
-        + 3 to do
-    %turbo-frame.turbo-wrapper
-      %a.splitview-item
-        .splitview-item-icon
-          .icon.icon-sync.pending.w-icon.animate-spin
-        .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
-    %turbo-frame.turbo-wrapper
-      %a.splitview-item.selected
-        .splitview-item-icon.icon.icon-check-circle-filled.success
-        .splitview-item-text Last selected child will have no rounded border on the right
-  %btn.btn.splitview-btn Show 99 dismissed pages
+      .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
+  %turbo-frame.turbo-wrapper
+    %a.splitview-item.selected
+      .splitview-item-icon.icon.icon-check-circle-filled.success
+      .splitview-item-text Last selected child will have no rounded border on the right
+%p.my-heading Button for showing dismissed pages and checks.
+%btn.btn.splitview-btn Show 99 dismissed pages

package/src/pages/agenticqa/status_stepper.haml

@@ -3,6 +3,7 @@ tags: agenticqa
 title: Status stepper
 ---
 
+%p.mb-heading Status stepper component for tracking the progress of checks in Agentic QA.
 .status-stepper
   .status-step.completed
     .icon.icon-check-thick-centered
@@ -13,6 +14,7 @@ title: Status stepper
   .status-step
     + 3 to do
 .py-md
+%p.mb-heading Status stepper component with counters.
 .status-stepper
   .status-step.completed
     .counter 99

package/src/pages/agenticqa/tables-formrow.haml

@@ -3,6 +3,7 @@ tags: ['agenticqa']
 title: Tables - form row
 ---
 
+%p.mb-heading A grid based table with form rows used in Agentic QA.
 .table-grid.table-rowgroups{style:"grid-template-columns: repeat(3, auto) repeat(1, minmax(12rem, 1fr)) auto;"}
   .thead
     .tr

package/src/pages/agenticqa/tables-grid.haml

@@ -3,6 +3,7 @@ tags: ['agenticqa']
 title: Tables - Grid
 ---
 
+%p.mb-heading Table grid layout for displaying checks in the Agentic QA interface.
 .table-grid.table-rowgroups{style:"grid-template-columns: repeat(2, auto) repeat(2, minmax(12rem, 1fr)) repeat(5, auto);"}
   .thead
     .tr

package/src/pages/agenticqa/url_collapsable.haml

@@ -3,6 +3,7 @@ tags: ['agenticqa']
 title: URL collapsable
 ---
 
+%p.mb-heading Collapsable list for long URLs to save space in the UI.
 %details.url-collapsable
   %summary
     %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/phase-2/results/compiled/overview/report-final