testio-tailwind 3.27.2 → 3.27.5

package/AI_DESIGN_SYSTEM_REFERENCE.md

@@ -1,3460 +1,26 @@
-# Test IO Tailwind Design System - AI Reference Guide
+# Test IO Tailwind Design System — AI Reference
 
-**Version:** 3.23.0
-**Framework:** Tailwind CSS 4.x
-**Package:** `testio-tailwind`
-**Last Updated:** February 2026
-**Node Version:** v23.11.0
+**Version:** 3.23.0 | **Framework:** Tailwind CSS 4.x | **Package:** `testio-tailwind`
 
-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 (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
-- ✨ **Centered Actionbar**: Added centered variant for action bars with proper styling
-- ✨ **Centered Header**: New header variant optimized for centered layouts
-- 🎨 **Layout Examples**: Added `/pages/layouts/` section with layout examples (centered, darkmode, full-width)
-- 📐 **Centered Content**: Proper max-width capped centered content containers
-- 🌙 **Dark Mode Support**: Complete dark mode documentation with implementation examples
-- ✨ **HAML Preview**: New HAML preview functionality for live component viewing
-- ✨ **HAML Converter**: Added HAML conversion utility for template processing
-- ✨ **AI Documentation**: Comprehensive AI documentation across all component pages
-- ✨ **Date & Time Picker**: Flatpickr integration for date and time selection
-- 📊 **Tables Reorganization**: Tables moved to dedicated `/pages/tables/` section
-- 🎨 **Table Striped Style**: Fixed table alternating row styling with proper dark mode support
-- 📝 **Component Descriptions**: All component pages now include descriptions and use cases
-- 🎯 **Button Documentation**: Updated button pages with detailed descriptions
-- 🔄 **Drawer Fixes**: Improved drawer footer padding and responsive behavior
-- 🛡️ **Security Updates**: Addressed npm vulnerabilities
-- 🔧 **Splitview Improvements**: Fixed splitview details close button and responsive behavior
-- 🏷️ **Image Tags**: Added support for image tagging in components
-- 🔧 **HAML Conversion**: Tables documentation files converted to HAML format
-- ✨ **Form Group Enhancements**: Added vertical form groups, form addons with text/icons, and form card component
-- 📋 **Form Hints**: Expanded form hints with collapsable help text and learn more triggers
-- 🌐 **Multi-language Support**: Added optional-non-en attribute for internationalized optional labels
-
----
-
-## Table of Contents
-1. [Installation & Setup](#installation--setup)
-2. [Component Library Structure](#component-library-structure)
-3. [Color System](#color-system)
-4. [Typography](#typography)
-5. [Spacing & Layout](#spacing--layout)
-6. [Layout Patterns](#layout-patterns)
-7. [Button Components](#button-components)
-8. [Card Components](#card-components)
-9. [Form Components](#form-components)
-10. [Overlay Components (Modal & Drawer)](#overlay-components-modal--drawer)
-11. [Page Layout Components](#page-layout-components)
-12. [Navigation Components](#navigation-components)
-13. [Feedback Components](#feedback-components)
-14. [Data Display Components](#data-display-components)
-15. [List Components](#list-components)
-16. [Splitview Components](#splitview-components)
-17. [Chat Components](#chat-components)
-18. [Chart Components](#chart-components)
-19. [Status & Progress Components](#status--progress-components)
-20. [Utility Components](#utility-components)
-21. [AgenticQA Components](#agenticqa-components)
-22. [Dark Mode](#dark-mode)
-23. [Best Practices for AI Agents](#best-practices-for-ai-agents)
-
----
-
-## Installation & Setup
-
-### NPM Installation
-```bash
-npm install testio-tailwind
-```
-
-### CSS Import
-```css
-@import 'testio-tailwind/dist/static/app.compiled.css';
-```
-
-### JavaScript Import
-```javascript
-import 'testio-tailwind/dist/static/app.bundled.js';
-```
-
----
-
-## Component Library Structure
-
-The design system includes a comprehensive component library organized by category. All components are documented with live examples in the `src/pages/` directory.
-
-### Directory Organization
-
-```
-src/pages/
-├── agenticqa/           # AgenticQA-specific components
-│   ├── assets.haml
-│   ├── chat_*.haml      # Chat variants
-│   ├── header.haml
-│   ├── listitem.haml
-│   ├── pageheader.haml
-│   ├── splitview_items.haml
-│   ├── status_stepper.haml
-│   └── tables-*.haml
-├── buttons/             # Button components and variants
-│   ├── buttons.haml     # Standard buttons
-│   ├── buttons-sm.haml  # Small buttons
-│   ├── buttons-lg.haml  # Large buttons
-│   ├── buttons-xl.haml  # Extra large buttons
-│   ├── buttons-round.haml
-│   ├── square-buttons.haml
-│   ├── block.haml
-│   ├── button_group.haml
-│   ├── buttons_input.haml
-│   └── dropdown-menu.haml
-├── charts/              # ECharts data visualization
-│   ├── area.haml
-│   ├── bar_horizontal.haml
-│   ├── bar_vertical.haml
-│   ├── colors.haml
-│   ├── donut.haml
-│   ├── gauge.haml
-│   ├── legend.haml
-│   └── line.haml
-├── components/          # UI components
-│   ├── alerts.haml
-│   ├── cards.haml
-│   ├── cards_*.haml     # Card variants
-│   ├── chat_window.haml
-│   ├── drawer.haml
-│   ├── drawer_filter.haml
-│   ├── emptystate.haml
-│   ├── info_popover.haml
-│   ├── listitems.haml
-│   ├── listitems_*.haml # List item variants
-│   ├── loading_spinner.haml
-│   ├── modal_details.haml
-│   ├── notifications.haml
-│   ├── pagination.haml
-│   ├── progress.haml
-│   ├── splitview_*.haml
-│   └── tags.haml
-├── forms/               # Form components
-│   ├── forms.haml       # Basic inputs
-│   ├── checkboxes.haml
-│   ├── radiobuttons.haml
-│   ├── toggle-switch.haml
-│   ├── toggle-buttons.haml
-│   ├── select2.haml
-│   ├── tomselect.haml
-│   ├── flatpickr.haml   # Date/time picker
-│   ├── date-time.haml
-│   ├── textarea.haml
-│   ├── rating_scale.haml
-│   ├── selectable_token.haml
-│   └── form_grid.haml
-├── layout/              # Layout utilities
-│   ├── app_layout.haml
-│   ├── spacing.haml
-│   ├── paddings.haml
-│   ├── margins.haml
-│   ├── max_width.haml
-│   ├── centered_layout.haml     # Centered layout documentation
-│   └── darkmode.haml            # Dark mode layout documentation
-├── layouts/             # Full layout examples
-│   ├── layout-full.haml
-│   ├── layout-centered.haml     # Centered layout example
-│   └── layout-darkmode.haml     # Dark mode layout example
-├── navigation/          # Navigation components
-│   ├── header.haml
-│   ├── header_*.haml    # Portal-specific headers
-│   ├── header-centered.haml     # Centered layout header
-│   ├── sidebar.haml
-│   ├── sidebar_*.haml   # Portal-specific sidebars
-│   ├── tabnavigation.haml
-│   ├── tabnavigation_*.haml
-│   └── radio_tabs.haml
-├── tables/              # Table components
-│   ├── tables.haml
-│   ├── tables_alternating.haml
-│   ├── tables_borders.haml
-│   ├── tables_cells.haml
-│   ├── tables_footer.haml
-│   ├── tables_header.haml
-│   ├── tables_linked.haml
-│   ├── tables-cellstyle.haml
-│   └── tables-grid.haml
-└── typography/          # Typography examples
-    ├── headings.haml
-    ├── section_header.haml
-    └── text_with_icon.haml
-```
-
-### How to Use Components
-
-#### 1. **View Live Examples**
-All components have live documentation available at the local development server:
-```bash
-npm start
-# Visit: http://localhost:8080/buttons/
-# Visit: http://localhost:8080/components/
-# Visit: http://localhost:8080/forms/
-# Visit: http://localhost:8080/tables/
-# Visit: http://localhost:8080/charts/
-# Visit: http://localhost:8080/layout/
-```
-
-#### 2. **Layout Examples**
-Complete layout examples with live previews:
-```
-# Full-width layout example
-http://localhost:8080/pages/layouts/layout-full
-
-# Centered layout example (recommended for documentation and forms)
-http://localhost:8080/pages/layouts/layout-centered
-
-# Dark mode layout example
-http://localhost:8080/pages/layouts/layout-darkmode
-```
-
-**Layout Documentation:**
-- [centered_layout.haml](src/pages/layout/centered_layout.haml) - Centered layout structure and documentation
-- [darkmode.haml](src/pages/layout/darkmode.haml) - Dark mode implementation guide
-
-#### 3. **HAML to HTML Reference**
-
-```haml
-<!-- HAML -->
-%button.btn.btn-primary{type:'submit', disabled:''}
-  %i.icon.icon-save.mr-xs
-  Save Changes
-
-<!-- Renders as -->
-<button class="btn btn-primary" type="submit" disabled="">
-  <i class="icon icon-save mr-xs"></i>
-  Save Changes
-</button>
-```
-
-**HAML Attribute Format:**
-- Use curly braces for attributes: `{key:'value'}`
-- Boolean attributes: `{checked:''}` or `{disabled:''}`
-- Multiple attributes: `{type:'checkbox', id:'check1'}`
-
----
-
-## Color System
-
-### Semantic Colors
-Use these color utilities for consistent semantic meaning:
-
-```html
-<!-- Primary Actions -->
-<div class="bg-primary text-white">Primary action</div>
-<div class="bg-link text-white">Link color</div>
-
-<!-- Status Colors -->
-<div class="bg-success text-white">Success state</div>
-<div class="bg-danger text-white">Error/danger state</div>
-<div class="bg-info text-white">Information</div>
-<div class="bg-blocked text-white">Warning/blocked</div>
-<div class="bg-pending text-gray-darker">Pending state</div>
-
-<!-- Functional Colors -->
-<div class="bg-appbody text-appbody-textcolor">App background</div>
-<div class="bg-card">Card background</div>
-<div class="bg-header text-white">Header background</div>
-<div class="bg-listitem">List item background</div>
-<div class="bg-actionbar">Action bar (dark)</div>
-<div class="border-bordercolor">Standard border</div>
-```
-
-### Color Palette
-
-**Grays:** `gray-100` through `gray-900`, plus `gray-lightest`, `gray-lighter`, `gray-light`, `gray-dark`, `gray-darker`, `gray-darkest`
-
-**Brand Colors:**
-- **Primary (Petrol):** `petrol` (#236a84 light, #78eac1 dark)
-- **Success:** `green` (#8cbd24 light, #33BA9E dark)
-- **Danger/Critical:** `red` (#ec0404 light, #FF3131 dark)
-- **Warning:** `orange` (#f48d21)
-- **Info:** `blue` (#326dd1)
-- **Accent Colors:** `teal`, `purple`, `pink`, `yellow`
-
-**Priority Levels:**
-- `critical` - Red (#FF3131)
-- `high` - Yellow (#d8ce0d)
-- `low` - Gray (#9fa2a8)
-
-**Issue Types:**
-- `visual` - Orange (#f48d21)
-- `content` - Blue (#326dd1)
-- `usability` - Petrol dark (#263340)
-
----
-
-## Typography
-
-### Font Families
-- **Body/Sans:** `font-sans` - Source Sans 3
-- **Monospace:** `font-mono` - Source Code Pro
-
-### Headings
-```html
-<h1 class="text-heading-1 font-light">Main Title (2.25rem)</h1>
-<h2 class="text-heading-2 font-light">Section Title (1.875rem)</h2>
-<h3 class="text-heading-3 font-light">Subsection (1.563rem)</h3>
-<h4 class="text-heading-4 font-light">Sub-heading (1.375rem)</h4>
-<h5 class="text-heading-5 font-light">Minor heading (1.125rem)</h5>
-<h6 class="text-heading-6 font-light">Smallest heading (1rem)</h6>
-```
-
-### Display Text
-```html
-<h1 class="text-display-1 font-extralight">Hero Text (3.25rem)</h1>
-<h2 class="text-display-2 font-extralight">Large Display (3rem)</h2>
-<h3 class="text-display-3 font-extralight">Medium Display (2.75rem)</h3>
-<h4 class="text-display-4 font-extralight">Small Display (2.5rem)</h4>
-```
-
-### Body Text Sizes
-```html
-<p class="text-base">Base text (0.875rem - default)</p>
-<p class="text-lg">Large text (1.25rem)</p>
-<p class="text-sm">Small text (0.813rem)</p>
-<p class="text-xs">Extra small (0.6875rem)</p>
-<p class="text-xxs">Tiny text (0.625rem)</p>
-```
-
-### Labels & Special Text
-```html
-<label class="text-label">Form Label (0.8125rem, 0.75rem in dark)</label>
-<label class="text-label-sm">Small Label (0.75rem)</label>
-<h3 class="text-card-header">Card Header (1.125rem in dark)</h3>
-```
-
----
-
-## Spacing & Layout
-
-### Spacing Scale
-- `xxs` - 0.3125rem (5px)
-- `xs` - 0.625rem (10px)
-- `sm` - 0.9375rem (15px)
-- `md` - 1.25rem (20px)
-- `spacing` - 1.875rem (30px) - **base unit**
-- `lg` - 3.125rem (50px)
-- `xl` - 3.75rem (60px)
-- `xxl` - 5.625rem (90px)
-
-### Common Spacing Patterns
-```html
-<!-- Padding -->
-<div class="p-md">Standard padding (20px)</div>
-<div class="p-card-padding">Card padding (30px)</div>
-<div class="px-md py-sm">Mixed padding</div>
-
-<!-- Margins -->
-<div class="mb-spacing">Standard margin bottom (30px)</div>
-<div class="mt-xxs">Tiny margin top (5px)</div>
-<div class="mb-heading">Bottom margin for headings</div>
-
-<!-- Gaps (for flexbox/grid) -->
-<div class="flex gap-xs">Flex with 10px gap</div>
-<div class="grid gap-grid-gutter">Grid with gutter (20px light, 40px dark)</div>
-```
-
-### Breakpoints
-```css
-xs: 30rem (480px)
-sm: 640px (default Tailwind)
-md: 768px (default Tailwind)
-lg: 70rem (1120px)
-xl: 90rem (1440px)
-2xl: 100rem (1600px)
-3xl: 1930px
-```
-
----
-
-## Layout Patterns
-
-### Standard Application Layout Structure
-The application uses a consistent layout structure across all pages:
-
-```html
-<body class="app-body">
-  <header class="header">
-    <!-- Navigation and branding -->
-  </header>
-  <main class="main-content">
-    <!-- Page content -->
-  </main>
-  <footer class="actionbar">
-    <!-- Actions and controls -->
-  </footer>
-</body>
-```
-
-### Full-Width Layout
-Standard layout with content spanning the full width of the viewport:
-
-```html
-<body class="app-body">
-  <header class="header">
-    <!-- Full-width header -->
-  </header>
-  <main class="main-content">
-    <div class="page-content">
-      <!-- Content fills available space -->
-    </div>
-  </main>
-  <footer class="actionbar">
-    <!-- Full-width footer -->
-  </footer>
-</body>
-```
-
-**Use Case:** Dashboard layouts, full-width data displays, and responsive mobile views.
-
-### Centered Layout
-Centered layout with max-width constraints for optimal readability on widescreen screens:
-
-```html
-<body class="app-body">
-  <header class="header">
-    <!-- Centered header -->
-  </header>
-  <main class="main-content centered">
-    <div class="centered-content">
-      <!-- Content centered with max-width -->
-    </div>
-  </main>
-  <footer class="actionbar centered">
-    <!-- Centered footer -->
-  </footer>
-</body>
-```
-
-**Key Classes:**
-- `.main-content.centered` - Centers the main content
-- `.centered-content` - Wrapper for centered content with max-width constraint
-- `.actionbar.centered` - Centered variant of action bar
-
-**Use Case:** Documentation pages, information displays, form submissions, and content with optimal line length requirements.
-
-**Max-Width Values:**
-- `.max-w-capped` - Standard max-width for centered content (typically 800px)
-- Ensures readability on widescreen displays while maintaining responsive behavior
-
-**Example Centered Actionbar:**
-```html
-<footer class="actionbar centered">
-  <div class="flex justify-center gap-md">
-    <button class="btn btn-secondary">Cancel</button>
-    <button class="btn btn-primary">Submit</button>
-  </div>
-</footer>
-```
-
----
-
-## Button Components
-
-### Basic Buttons
-```html
-<!-- Primary button -->
-<button class="btn btn-primary">Primary Action</button>
-
-<!-- Secondary (outline) button -->
-<button class="btn btn-secondary">Secondary Action</button>
-
-<!-- Ghost button (no border/background) -->
-<button class="btn btn-ghost">Ghost Action</button>
-
-<!-- Link button (text style) -->
-<button class="btn btn-link">Link Style</button>
-
-<!-- Dashed border button -->
-<button class="btn btn-dashed">Add New</button>
-```
-
-### Semantic Button Variants
-```html
-<button class="btn btn-success">Success Action</button>
-<button class="btn btn-danger">Delete/Danger</button>
-<button class="btn btn-warning">Warning Action</button>
-<button class="btn btn-info">Info Action</button>
-```
-
-### Button Sizes
-```html
-<!-- Small button -->
-<button class="btn btn-sm btn-primary">Small</button>
-
-<!-- Default button (h-btn = 2.5rem/40px) -->
-<button class="btn btn-primary">Default</button>
-
-<!-- Large button (for icon buttons) -->
-<button class="btn btn-lg btn-primary">
-  <i class="icon icon-star"></i>
-</button>
-
-<!-- Extra large button with label -->
-<button class="btn btn-xl btn-primary">
-  <i class="icon icon-upload"></i>
-  Upload
-</button>
-```
-
-### Button Shapes
-```html
-<!-- Square icon button -->
-<button class="btn btn-square btn-primary">
-  <i class="icon icon-search"></i>
-</button>
-
-<!-- Circle button -->
-<button class="btn btn-circle btn-primary">
-  <i class="icon icon-add"></i>
-</button>
-
-<!-- Block button (full width) -->
-<button class="btn btn-block btn-primary">Full Width</button>
-```
-
-### Inverted Buttons (for dark backgrounds)
-```html
-<div class="bg-actionbar p-md">
-  <button class="btn btn-primary-inverted">Primary Inverted</button>
-  <button class="btn btn-inverted">Inverted</button>
-  <button class="btn btn-secondary-inverted">Secondary Inverted</button>
-  <button class="btn btn-outline-primary-inverted">Outline Primary Inverted</button>
-  <button class="btn btn-ghost-inverted">Ghost Inverted</button>
-</div>
-```
-
-### Buttons with Icons
-```html
-<button class="btn btn-primary">
-  <i class="icon icon-save mr-icon-spacing"></i>
-  Save Changes
-</button>
-
-<button class="btn btn-secondary">
-  <i class="icon icon-download mr-icon-spacing"></i>
-  Download
-</button>
-```
-
-### Dropdown Menu Button
-```html
-<details class="dropdown-actions">
-  <summary>
-    <div class="btn btn-square btn-primary">
-      <span class="icon icon-more"></span>
-    </div>
-  </summary>
-  <div class="popover-menu">
-    <a class="popover-action" href="#">
-      <span class="icon icon-pencil"></span>
-      Edit
-    </a>
-    <a class="popover-action" href="#">
-      <span class="icon icon-duplicate"></span>
-      Duplicate
-    </a>
-    <a class="popover-action" href="#">
-      <span class="icon icon-remove"></span>
-      Delete
-    </a>
-  </div>
-</details>
-
-<!-- Direction variants -->
-<details class="dropdown-actions dropright"><!-- Opens to right --></details>
-<details class="dropdown-actions dropup dropright"><!-- Opens up and right --></details>
-```
-
-### Button Groups
-```html
-<div class="btn-group">
-  <button class="btn btn-primary">Left</button>
-  <button class="btn btn-primary">Center</button>
-  <button class="btn btn-primary">Right</button>
-</div>
-```
-
----
-
-## Card Components
-
-### Basic Card Structure
-```html
-<div class="card">
-  <div class="card-header">
-    <h3 class="card-title">Card Title</h3>
-  </div>
-  <div class="card-body">
-    <p>Card content goes here</p>
-  </div>
-  <div class="card-footer">
-    <button class="btn btn-primary btn-block">Action</button>
-    <button class="btn btn-secondary btn-block">Cancel</button>
-  </div>
-</div>
-```
-
-### Card Sizes
-```html
-<!-- Small card (11.25rem on sm+ screens) -->
-<div class="card card-sm">...</div>
-
-<!-- Medium card (17.5rem) -->
-<div class="card card-md">...</div>
-
-<!-- Large card (23.75rem) -->
-<div class="card card-lg">...</div>
-```
-
-### Card Variants
-```html
-<!-- Highlighted card (info blue background) -->
-<div class="card highlight">...</div>
-
-<!-- Card with highlighted header only -->
-<div class="card">
-  <div class="card-header highlight">
-    <h3 class="card-title">Highlighted Header</h3>
-  </div>
-  <div class="card-body">Regular content</div>
-</div>
-
-<!-- Card with image -->
-<div class="card">
-  <img src="image.jpg" alt="Card image" class="card-image">
-  <div class="card-header">
-    <h3 class="card-title">Card with Image</h3>
-  </div>
-  <div class="card-body">Content</div>
-</div>
-
-<!-- Card with icon header -->
-<div class="card">
-  <div class="card-icon-header">
-    <i class="icon icon-star"></i>
-  </div>
-  <div class="card-body">
-    <h3 class="card-title">Icon Card</h3>
-    <p>Content below icon</p>
-  </div>
-</div>
-
-<!-- Centered card content -->
-<div class="card text-center">...</div>
-```
-
-### Card with Info Popover
-```html
-<div class="card">
-  <details class="popover-wrapper dropright card-info-popover">
-    <summary>
-      <div class="btn btn-sm btn-square">
-        <div class="icon icon-info"></div>
-      </div>
-    </summary>
-    <div class="popover-menu info">
-      <div class="popover-title">Popover title</div>
-      <div class="popover-content">Popover content...</div>
-    </div>
-  </details>
-  <div class="card-header">
-    <h3 class="card-title">Card with info popover</h3>
-  </div>
-  <div class="card-body">Content</div>
-</div>
-```
-
-### Card Layouts
-```html
-<!-- Grid of cards (responsive) -->
-<div class="grid-cards">
-  <div class="card">...</div>
-  <div class="card">...</div>
-  <div class="card">...</div>
-</div>
-
-<!-- List of cards (horizontal wrap) -->
-<div class="list-cards">
-  <div class="card card-sm">...</div>
-  <div class="card card-sm">...</div>
-</div>
-
-<!-- Achievements grid (6 columns on 2xl screens) -->
-<div class="grid-cards-achievements">
-  <div class="card">...</div>
-</div>
-```
-
----
-
-## Form Components
-
-### Form Group Structure
-
-#### Horizontal Form Group (Default)
-```html
-<div class="form-group">
-  <label class="form-label">Email Address</label>
-  <input type="email" class="form-control" placeholder="Enter email">
-</div>
-
-<!-- Optional field -->
-<div class="form-group">
-  <label class="form-label optional">Phone Number</label>
-  <input type="tel" class="form-control">
-</div>
-
-<!-- Optional field with custom translation -->
-<div class="form-group">
-  <label class="form-label optional-non-en" data-optional-non-en="(freiwillig)">Phone Number</label>
-  <input type="tel" class="form-control">
-</div>
-
-<!-- Inverted (for dark backgrounds) -->
-<div class="form-group inverted">
-  <label class="form-label">Email Address</label>
-  <input type="email" class="form-control" placeholder="Enter email">
-</div>
-```
-
-#### Vertical Form Group
-Use vertical form groups in tight spaces and narrow containers where horizontal layout cannot fit:
-
-```html
-<div class="form-group vertical">
-  <label class="form-label">Email Address</label>
-  <input type="email" class="form-control" placeholder="Enter email">
-</div>
-
-<!-- Optional field with custom translation -->
-<div class="form-group vertical">
-  <label class="form-label optional-non-en" data-optional-non-en="(freiwillig)">Phone Number</label>
-  <input type="tel" class="form-control">
-</div>
-
-<!-- Inverted (for dark backgrounds) -->
-<div class="form-group vertical inverted">
-  <label class="form-label">Email Address</label>
-  <input type="email" class="form-control" placeholder="Enter email">
-</div>
-```
-
-### Form Inputs
-```html
-<!-- Text input -->
-<input type="text" class="form-control" placeholder="Enter text">
-
-<!-- Textarea -->
-<textarea class="form-control" rows="4" placeholder="Enter description"></textarea>
-
-<!-- Disabled input -->
-<input type="text" class="form-control" disabled value="Read only">
-
-<!-- With validation error -->
-<div class="form-group">
-  <label class="form-label">Username</label>
-  <div class="field_with_errors">
-    <input type="text" class="form-control">
-  </div>
-  <div class="form-hint error">Username is required</div>
-</div>
-```
-
-### Form Hints
-```html
-<!-- Standard hint -->
-<div class="form-hint">This field is optional</div>
-
-<!-- Error hint -->
-<div class="form-hint error">Please enter a valid email</div>
-```
-
-#### Collapsable Form Hints
-```html
-<!-- Collapsable form hint with learn more trigger -->
-<div class="form-group">
-  <label class="form-label">Your Project</label>
-  <div class="col">
-    <input class="form-control" type="text" placeholder="Some delicious placeholder text">
-    <details class="form-hint-collapsable">
-      <summary>
-        <div class="form-hint">
-          <span>
-            This is a help text.
-            <span class="form-hint-trigger form-hint-collapsed-text">Learn more</span>
-            <span class="form-hint-trigger form-hint-expanded-text">Close</span>
-          </span>
-        </div>
-      </summary>
-      <div class="form-hint-collapsable-message">Good examples are "Java wrapper lib for our 5-endpoint REST API" or "Help integration Intercom into our web interface"</div>
-    </details>
-  </div>
-</div>
-```
-
-### Form Grid Layout
-```html
-<!-- Standard form grid -->
-<div class="form-grid">
-  <div class="form-group">...</div>
-  <div class="form-group">...</div>
-</div>
-
-<!-- Single column form grid -->
-<div class="form-grid single">
-  <div class="form-group">...</div>
-</div>
-
-<!-- Narrow single column -->
-<div class="form-grid single narrow">
-  <div class="form-group">...</div>
-</div>
-```
-
-### Checkboxes
-```html
-<!-- Default checkbox -->
-<div class="form-check">
-  <input id="check1" type="checkbox">
-  <label for="check1">Checkbox</label>
-</div>
-
-<!-- Checked checkbox -->
-<div class="form-check">
-  <input id="check2" type="checkbox" checked="true">
-  <label for="check2">Checked</label>
-</div>
-
-<!-- Small checkbox -->
-<div class="form-check sm">
-  <input id="check3" type="checkbox">
-  <label for="check3">Checkbox SM</label>
-</div>
-
-<!-- Disabled checkbox -->
-<div class="form-check disabled">
-  <input id="check4" type="checkbox" disabled="true">
-  <label for="check4">Disabled</label>
-</div>
-
-<!-- With error state -->
-<div class="form-check">
-  <div class="field_with_errors">
-    <input id="check5" type="checkbox">
-  </div>
-  <label for="check5">Checkbox with error</label>
-</div>
-
-<!-- Inverted (for dark backgrounds) -->
-<div class="form-check inverted">
-  <input id="check6" type="checkbox">
-  <label for="check6">Inverted</label>
-</div>
-```
-
-### Radio Buttons
-```html
-<!-- Radio group -->
-<div class="form-radio">
-  <input id="radio1" type="radio" name="radio-group" value="1" checked="true">
-  <label for="radio1">Option 1</label>
-</div>
-<div class="form-radio">
-  <input id="radio2" type="radio" name="radio-group" value="2">
-  <label for="radio2">Option 2</label>
-</div>
-<div class="form-radio">
-  <input id="radio3" type="radio" name="radio-group" value="3">
-  <label for="radio3">Option 3</label>
-</div>
-
-<!-- Small radio -->
-<div class="form-radio sm">
-  <input id="radio4" type="radio" name="radio-sm" value="1">
-  <label for="radio4">SM Option 1</label>
-</div>
-
-<!-- Disabled radio -->
-<div class="form-radio disabled">
-  <input id="radio5" type="radio" name="radio-group" value="4" disabled="true">
-  <label for="radio5">Disabled</label>
-</div>
-
-<!-- Inverted (for dark backgrounds) -->
-<div class="form-radio inverted">
-  <input id="radio6" type="radio" name="radio-inv" value="1">
-  <label for="radio6">Inverted Option</label>
-</div>
-```
-
-### Toggle Switch
-```html
-<!-- Toggle switch -->
-<div class="form-toggle">
-  <label class="toggle-switch" for="toggle1">
-    <input id="toggle1" type="checkbox">
-    <span class="slider"></span>
-  </label>
-  <label class="toggle-switch-label" for="toggle1">Toggle Switch</label>
-</div>
-
-<!-- Active toggle -->
-<div class="form-toggle">
-  <label class="toggle-switch" for="toggle2">
-    <input id="toggle2" type="checkbox" checked="true">
-    <span class="slider"></span>
-  </label>
-  <label class="toggle-switch-label" for="toggle2">Active Toggle</label>
-</div>
-
-<!-- Small toggle -->
-<div class="form-toggle sm">
-  <label class="toggle-switch" for="toggle3">
-    <input id="toggle3" type="checkbox">
-    <span class="slider"></span>
-  </label>
-  <label class="toggle-switch-label" for="toggle3">Toggle SM</label>
-</div>
-
-<!-- Disabled toggle -->
-<div class="form-toggle">
-  <label class="toggle-switch disabled" for="toggle4">
-    <input id="toggle4" type="checkbox" disabled="disabled">
-    <span class="slider"></span>
-  </label>
-  <label class="toggle-switch-label" for="toggle4">Disabled</label>
-</div>
-```
-
-### Select Inputs
-
-#### Native Select
-```html
-<select class="form-control">
-  <option>Choose an option</option>
-  <option value="1">Option 1</option>
-  <option value="2">Option 2</option>
-</select>
-```
-
-#### Select2 Enhanced Select
-```html
-<div class="form-group form-select">
-  <label class="form-label">Select</label>
-  <select class="select2" placeholder="Please select">
-    <option value="Option 1">Option 1</option>
-    <option value="Option 2">Option 2</option>
-    <option value="Option 3">Option 3</option>
-  </select>
-</div>
-
-<!-- Multi-select -->
-<div class="form-group multi-select">
-  <label class="form-label">Select multiple</label>
-  <select class="select2" multiple="true" placeholder="Please select">
-    <option>Option 1</option>
-    <option>Option 2</option>
-    <option>Option 3</option>
-  </select>
-</div>
-
-<!-- With optgroup -->
-<div class="form-group form-select">
-  <label class="form-label">Optgroup select</label>
-  <select class="select2" placeholder="Please select">
-    <optgroup label="Category Label">
-      <option>Option 1</option>
-      <option>Option 2</option>
-    </optgroup>
-  </select>
-</div>
-```
-
-#### Tom Select Enhanced Select
-```html
-<div class="form-group form-select">
-  <label class="form-label">Select</label>
-  <select class="tom-select" placeholder="Please select">
-    <option value=""></option>
-    <option value="Option 1">Option 1</option>
-    <option value="Option 2">Option 2</option>
-  </select>
-</div>
-
-<!-- Multi-select -->
-<div class="form-group multi-select">
-  <label class="form-label">Select multiple</label>
-  <select class="tom-select-multi" multiple="true" placeholder="Please select">
-    <option>Option 1</option>
-    <option>Option 2</option>
-  </select>
-</div>
-```
-
-### Date & Time Picker (Flatpickr)
-```html
-<!-- Date picker -->
-<div class="form-group">
-  <label class="form-label">Select Date</label>
-  <div class="form-date">
-    <input class="form-control flatpickr" type="date" placeholder="Choose a date">
-  </div>
-</div>
-
-<!-- Date and time picker -->
-<div class="form-group">
-  <label class="form-label">Select Date & Time</label>
-  <div class="form-date">
-    <input class="form-control flatpickr-time" type="datetime-local" placeholder="Choose date and time">
-  </div>
-</div>
-```
-
-### Selectable Tokens
-```html
-<ul class="list-inline flex">
-  <li class="selectable-token">
-    <input id="token1" type="checkbox" checked="true">
-    <label for="token1">
-      <span class="icon icon-chrome mr-icon-spacing"></span>
-      Selectable token
-    </label>
-  </li>
-  <li class="selectable-token">
-    <input id="token2" type="checkbox">
-    <label for="token2">
-      <span class="icon icon-firefox mr-icon-spacing"></span>
-      Another token
-    </label>
-  </li>
-  <li class="selectable-token disabled">
-    <input id="token3" type="checkbox" disabled="true">
-    <label for="token3">Disabled token</label>
-  </li>
-</ul>
-
-<!-- Inverted (for dark backgrounds) -->
-<li class="selectable-token inverted">...</li>
-```
-
-### Rating Scale
-```html
-<div class="rating-scale">
-  <!-- Rating scale component -->
-</div>
-```
-
-### Form with Addon
-```html
-<!-- Text addon (e.g., currency) -->
-<div class="form-group with-addon">
-  <label class="form-label">Price</label>
-  <input type="number" class="form-control" placeholder="0.00">
-  <div class="form-addon">
-    <span class="text-label">EUR</span>
-  </div>
-</div>
-
-<!-- Icon addon (e.g., validation status) -->
-<div class="form-group with-addon">
-  <label class="form-label">Email Address</label>
-  <input type="email" class="form-control" placeholder="Enter email">
-  <div class="form-addon">
-    <span class="icon icon-check-circle-filled text-success"></span>
-  </div>
-</div>
-```
-
-### Form Card
-A card component containing a form with various input elements. Useful for collapsable form sections or multi-form layouts.
-
-```html
-<div class="form-card">
-  <div class="form-card-heading">
-    <div class="form-card-title">Form Card Title</div>
-    <div class="form-card-actions">
-      <button class="btn btn-square btn-sm btn-primary">
-        <i class="icon icon-arrow-upward"></i>
-      </button>
-      <button class="btn btn-square btn-sm btn-primary">
-        <i class="icon icon-arrow-downward"></i>
-      </button>
-      <button class="btn btn-square btn-sm btn-primary">
-        <i class="icon icon-remove"></i>
-      </button>
-    </div>
-  </div>
-  <div class="form-grid">
-    <div class="form-group">
-      <label class="form-label">Input</label>
-      <input class="form-control" type="text" placeholder="Enter text">
-    </div>
-    <div class="form-group">
-      <label class="form-label">Textarea</label>
-      <textarea class="form-control" rows="4" placeholder="Enter description"></textarea>
-    </div>
-    <div class="form-group form-select">
-      <label class="form-label">Select</label>
-      <select class="tom-select" placeholder="Please select">
-        <option value=""></option>
-        <option value="Option 1">Option 1</option>
-        <option value="Option 2">Option 2</option>
-      </select>
-    </div>
-  </div>
-</div>
-```
-
-### Inverted Forms (for dark backgrounds)
-```html
-<div class="form-group inverted">
-  <label class="form-label">Email</label>
-  <input type="email" class="form-control" placeholder="Enter email">
-  <div class="form-hint">We'll never share your email</div>
-</div>
-```
-
----
-
-## Overlay Components (Modal & Drawer)
-
-### Modal Component
-
-Modals are used to display content in a layer above the main content. They can contain forms, confirmations, and other interactive content.
-
-#### Basic Modal
-```html
-<details class="modal-wrapper">
-  <summary class="modal-trigger">
-    <div class="btn btn-primary">Open modal</div>
-  </summary>
-  <div class="modal-container">
-    <div class="modal">
-      <div class="modal-header">
-        <h2 class="modal-title">Modal Title</h2>
-        <div class="btn btn-square close-btn">
-          <div class="icon icon-cross"></div>
-        </div>
-      </div>
-      <div class="modal-content">
-        <p>Modal content goes here...</p>
-        <div class="form-grid">
-          <div class="form-group">
-            <label class="form-label">Input</label>
-            <input class="form-control" type="text" placeholder="">
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <a class="btn btn-primary" href="">Primary</a>
-        <a class="btn btn-secondary close-btn" href="">Close</a>
-      </div>
-    </div>
-  </div>
-</details>
-```
-
-#### Modal Sizes
-```html
-<!-- Large modal -->
-<div class="modal modal-lg">...</div>
-
-<!-- Small modal (confirmation dialog) -->
-<div class="modal modal-sm">...</div>
-```
-
-#### Modal with Disabled Background Close
-```html
-<!-- Prevents closing when clicking outside the modal -->
-<details class="modal-wrapper fade-close-disabled">
-  <summary class="modal-trigger">
-    <div class="btn btn-primary">Open modal</div>
-  </summary>
-  <div class="modal-container">
-    <div class="modal">...</div>
-  </div>
-</details>
-```
-
-### Drawer Component
-
-Drawers are side panels that slide in from the edge of the screen. They're an alternative to modals for displaying additional content.
-
-#### Basic Drawer
-```html
-<details class="drawer-wrapper">
-  <summary class="drawer-trigger">
-    <div class="btn btn-primary">Open Drawer</div>
-  </summary>
-  <div class="drawer">
-    <div class="drawer-header">
-      <div class="drawer-title">Drawer title</div>
-    </div>
-    <div class="drawer-content">
-      <p>Drawer content goes here...</p>
-    </div>
-    <div class="drawer-footer">
-      <div class="btn btn-primary">Primary</div>
-      <div class="btn btn-secondary">Secondary</div>
-    </div>
-  </div>
-</details>
-```
-
-#### Drawer with Close Button
-```html
-<details class="drawer-wrapper">
-  <summary class="drawer-trigger">
-    <div class="btn btn-primary">Open Drawer</div>
-    <button class="btn btn-square close-btn">
-      <div class="icon icon-cross"></div>
-    </button>
-  </summary>
-  <div class="drawer">
-    <!-- Drawer content -->
-    <div class="drawer-footer">
-      <div class="btn btn-primary">Primary</div>
-      <div class="btn btn-secondary close-btn">Close</div>
-    </div>
-  </div>
-</details>
-```
-
-#### Filter Drawer
-```html
-<details class="drawer-wrapper">
-  <summary class="drawer-trigger">
-    <div class="btn btn-secondary">
-      <span class="icon icon-filter mr-icon-spacing"></span>
-      Filter
-    </div>
-  </summary>
-  <div class="drawer drawer-filter">
-    <!-- Filter form content -->
-  </div>
-</details>
-```
-
----
-
-## Page Layout Components
-
-### Page Header Component
-
-A responsive grid layout component for dashboard and session management pages.
-
-#### Basic Page Header
-```html
-<div class="page-header">
-  <div class="card page-maincard p-card-padding">
-    <h1 class="text-card-header">Session Details</h1>
-    <h2 class="page-session-title">Test Session Title</h2>
-
-    <dl class="page-meta-info">
-      <dt class="label">Created on:</dt>
-      <dd>2025-10-21 10:45 AM</dd>
-
-      <dt class="label">Last test:</dt>
-      <dd>2025-10-21 11:30 AM</dd>
-
-      <dt class="label">ID:</dt>
-      <dd>321456987</dd>
-
-      <dt class="label">URL:</dt>
-      <dd class="row-testsuite">
-        <a href="#" class="label">Test Suite Name</a>
-      </dd>
-
-      <dt class="label">Status:</dt>
-      <dd class="text-white">Active</dd>
-    </dl>
-  </div>
-
-  <div class="page-actions">
-    <a href="#" class="btn btn-primary btn-main">
-      <span class="icon icon-test-running-xl"></span>
-      Start Test
-    </a>
-  </div>
-</div>
-```
-
-#### Page Header with Chart
-```html
-<div class="page-header with-chart">
-  <div class="card page-maincard p-card-padding">
-    <!-- Main card content -->
-  </div>
-
-  <div class="page-chart card p-card-padding">
-    <div class="echarts-container" id="chart"></div>
-  </div>
-
-  <div class="page-actions">
-    <a href="#" class="btn btn-primary btn-main">
-      <span class="icon icon-review-xl"></span>
-      Show Report
-    </a>
-    <a href="#" class="btn btn-secondary">Re-run All Checks</a>
-  </div>
-</div>
-```
-
-#### Page Header with Forms
-```html
-<div class="page-header">
-  <div class="card page-maincard p-card-padding">
-    <div class="form-grid">
-      <div class="form-group">
-        <label class="form-label">Test Name</label>
-        <input type="text" class="form-control" placeholder="Enter test name">
-      </div>
-      <div class="form-group">
-        <label class="form-label">URL for Testing</label>
-        <input type="url" class="form-control" placeholder="https://example.com">
-      </div>
-    </div>
-  </div>
-
-  <div class="page-actions">
-    <a href="#" class="btn btn-primary btn-xl">
-      <span class="icon icon-test-running-xl"></span>
-      Save and Run Test
-    </a>
-    <a href="#" class="btn btn-secondary">Save Draft</a>
-    <a href="#" class="btn btn-secondary">Cancel</a>
-  </div>
-</div>
-```
-
-**Key Classes:**
-- `.page-header` - Main grid container with responsive columns
-- `.page-maincard` - Primary content card (spans 2-4 columns based on screen size)
-- `.page-actions` - Action buttons column (vertical on md+, horizontal on mobile)
-- `.page-session-title` - Session/test title with bottom margin
-- `.page-meta-info` - Metadata grid (2 cols mobile, 6 cols xl)
-- `.row-testsuite` - Special metadata row that spans 5 columns on xl
-- `.with-chart` - Modifier for including chart column
-- `.btn-main` - Primary action button that grows to fill available space
-
----
-
-## Navigation Components
-
-### Header Navigation
-```html
-<header class="header">
-  <div class="header-logo">
-    <img src="logo.svg" alt="Logo">
-  </div>
-  <nav class="header-nav">
-    <a href="#" class="nav-link">Dashboard</a>
-    <a href="#" class="nav-link active">Projects</a>
-    <a href="#" class="nav-link">Settings</a>
-  </nav>
-  <div class="header-actions">
-    <button class="btn btn-sm btn-primary">New Project</button>
-  </div>
-</header>
-```
-
-### Sidebar Navigation
-```html
-<aside class="sidebar">
-  <nav class="sidebar-nav">
-    <a href="#" class="sidebar-link active">
-      <i class="icon icon-home"></i>
-      Dashboard
-    </a>
-    <a href="#" class="sidebar-link">
-      <i class="icon icon-folder"></i>
-      Projects
-    </a>
-    <a href="#" class="sidebar-link">
-      <i class="icon icon-settings"></i>
-      Settings
-    </a>
-  </nav>
-</aside>
-```
-
-### Tab Navigation
-```html
-<nav class="nav-tabs">
-  <div class="navlink active" href="">Navlink active</div>
-  <div class="navlink" href="">Navlink</div>
-  <div class="navlink" href="">Navlink</div>
-  <div class="navlink" href="">
-    Counter
-    <div class="counter">99</div>
-  </div>
-  <div class="navlink disabled" href="">Disabled</div>
-</nav>
-```
-
-### Tab Navigation Variants
-```html
-<!-- Pills style -->
-<nav class="nav-tabs pills">...</nav>
-
-<!-- Small tabs -->
-<nav class="nav-tabs sm">...</nav>
-
-<!-- Tabs with actions -->
-<nav class="nav-tabs with-actions">
-  <div class="navlink active">Tab 1</div>
-  <div class="navlink">Tab 2</div>
-  <div class="tab-actions">
-    <button class="btn btn-sm btn-primary">Action</button>
-  </div>
-</nav>
-```
-
-### Radio Tabs
-```html
-<div class="radio-tabs">
-  <input type="radio" id="tab1" name="tabs" checked>
-  <label for="tab1">Tab 1</label>
-  <input type="radio" id="tab2" name="tabs">
-  <label for="tab2">Tab 2</label>
-</div>
-```
-
-### Product-Specific Headers
-```html
-<!-- Customer portal header -->
-<header class="header customer_header">...</header>
-
-<!-- Tester portal header -->
-<header class="header tester_header">...</header>
-
-<!-- Manager portal header -->
-<header class="header manager_header">...</header>
-
-<!-- AgenticQA header -->
-<header class="header agenticqa_header">...</header>
-```
-
----
-
-## Feedback Components
-
-### Alerts
-
-Alerts notify users about important information or actions that require their attention.
-
-```html
-<!-- Default alert -->
-<div class="alert">
-  <div class="alert-message">Alert message</div>
-  <button class="close">
-    <div class="icon icon-cross"></div>
-  </button>
-</div>
-
-<!-- Alert with button -->
-<div class="alert">
-  <div class="alert-message">
-    Alert with a button
-    <button class="btn btn-white">Alert action</button>
-  </div>
-  <button class="close">
-    <div class="icon icon-cross"></div>
-  </button>
-</div>
-
-<!-- Info alert -->
-<div class="alert alert-info">
-  <div class="alert-message">Info Alert</div>
-  <button class="close">
-    <div class="icon icon-cross"></div>
-  </button>
-</div>
-
-<!-- Success alert -->
-<div class="alert alert-success">
-  <div class="alert-message">Success Alert</div>
-  <button class="close">
-    <div class="icon icon-cross"></div>
-  </button>
-</div>
-
-<!-- Warning alert -->
-<div class="alert alert-warning">
-  <div class="alert-message">Warning Alert</div>
-  <button class="close">
-    <div class="icon icon-cross"></div>
-  </button>
-</div>
-
-<!-- Error alert -->
-<div class="alert alert-error">
-  <div class="alert-message">Error Alert</div>
-  <button class="close">
-    <div class="icon icon-cross"></div>
-  </button>
-</div>
-```
-
-### Notifications
-
-Notifications inform users about important updates. They can replace alerts and support various styles.
-
-```html
-<!-- Notification container -->
-<div class="notification-container">
-  <!-- Basic notification -->
-  <a class="notification" href="">
-    <div class="notification-title">Linked Info Notification</div>
-    <div class="notification-content">
-      <div class="notification-message">You have 60 min left to finish this task.</div>
-    </div>
-    <button class="btn btn-close">
-      <span class="icon icon-cross"></span>
-    </button>
-  </a>
-
-  <!-- Notification with icon -->
-  <a class="notification" href="">
-    <div class="notification-badge">
-      <div class="icon icon-bug-fix-confirmation-lg"></div>
-    </div>
-    <div class="notification-content">
-      <div class="notification-title">Notification with icon</div>
-      <div class="notification-message">Message content...</div>
-    </div>
-    <button class="btn btn-close">
-      <span class="icon icon-cross"></span>
-    </button>
-  </a>
-
-  <!-- Success notification -->
-  <a class="notification success" href="">...</a>
-
-  <!-- Warning notification -->
-  <a class="notification warning" href="">...</a>
-
-  <!-- Error notification -->
-  <a class="notification error" href="">...</a>
-
-  <!-- Notification with badge image -->
-  <a class="notification badges" href="">
-    <div class="notification-badge">
-      <img src="/assets/images/badge.svg">
-    </div>
-    <div class="notification-title">New badge received</div>
-    <div class="notification-content">Badge description</div>
-    <button class="btn btn-close">
-      <span class="icon icon-cross"></span>
-    </button>
-  </a>
-
-  <!-- Notification with dedicated button -->
-  <div class="notification">
-    <div class="notification-title">Notification with button</div>
-    <div class="notification-content">
-      <div class="notification-message">Message content...</div>
-      <a class="btn btn-sm btn-inverted" href="">Go to page</a>
-    </div>
-    <button class="btn btn-close">
-      <span class="icon icon-cross"></span>
-    </button>
-  </div>
-</div>
-```
-
-### Progress Bars
-
-```html
-<!-- Default progress bar -->
-<progress class="progress" value="32" max="100">32%</progress>
-
-<!-- Success progress bar -->
-<progress class="progress progress-bar-success" value="32" max="100">32%</progress>
-
-<!-- Danger progress bar -->
-<progress class="progress progress-bar-danger" value="32" max="100">32%</progress>
-
-<!-- Test progress (special styling) -->
-<progress class="progress test-progress" value="32" max="100">32%</progress>
-
-<!-- Thick progress bar -->
-<progress class="progress thick" value="32" max="100">32%</progress>
-```
-
-### Loading Spinner
-```html
-<div class="loading-spinner">
-  <div class="spinner"></div>
-  <p class="loading-text">Loading...</p>
-</div>
-```
-
-### Empty State
-
-Empty state messages inform users when there is no data to display.
-
-```html
-<!-- Default empty state -->
-<div class="empty-state-message">
-  No items here yet.
-</div>
-
-<!-- Search empty state -->
-<div class="empty-state-message search">
-  No search results found.
-</div>
-
-<!-- Sad empty state -->
-<div class="empty-state-message sad">
-  Something went wrong.
-</div>
-
-<!-- Smiling empty state -->
-<div class="empty-state-message smile">
-  All caught up!
-</div>
-
-<!-- Deceased empty state -->
-<div class="empty-state-message deceased">
-  This item has been archived.
-</div>
-
-<!-- Chat empty state -->
-<div class="empty-state-message chat">
-  No messages yet.
-</div>
-
-<!-- Bell empty state -->
-<div class="empty-state-message bell">
-  No notifications.
-</div>
-
-<!-- Horizontal empty state -->
-<div class="empty-state-message horizontal">
-  Horizontal layout message.
-</div>
-```
-
----
-
-## Data Display Components
-
-### Tables
-
-The design system includes several table variants with comprehensive dark mode support.
-
-#### Basic Table
-```html
-<table class="table">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Status</th>
-      <th>Actions</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>John Doe</td>
-      <td>
-        <span class="badge badge-success">Active</span>
-      </td>
-      <td>
-        <button class="btn btn-sm btn-ghost">Edit</button>
-      </td>
-    </tr>
-  </tbody>
-</table>
-```
-
-#### Table Variants
-```html
-<!-- Bordered table -->
-<table class="table table-bordered">...</table>
-
-<!-- Borderless table -->
-<table class="table table-borderless">...</table>
-
-<!-- Striped/alternating rows -->
-<table class="table table-striped">...</table>
-
-<!-- Compact table -->
-<table class="table table-sm">...</table>
-
-<!-- Standard table (key-value style) -->
-<table class="table-standard">
-  <tbody>
-    <tr>
-      <td>Property</td>
-      <td>Value</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-#### Cell Style Table (Status Tracking)
-```html
-<table class="table-cellstyle">
-  <thead>
-    <tr>
-      <th class="completed">Feature A</th>
-      <th class="inprogress">Feature B</th>
-      <th class="missing">Feature C</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td class="completed">Implementation done</td>
-      <td class="inprogress">Working on it...</td>
-      <td class="missing">Not started</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-**Status Classes:**
-- `.completed` - Green checkmark icon
-- `.inprogress` - Clock icon, gray background, italic text
-- `.missing` - Exclamation icon, transparent bg, disabled text
-
-#### Table Cell Utilities
-```html
-<!-- Fixed width cell -->
-<td class="td-fixed-width">Limited to 150px</td>
-
-<!-- Actions cell (right-aligned) -->
-<td class="action-cell">
-  <button class="btn btn-sm btn-ghost">Edit</button>
-</td>
-
-<!-- Title cell (max 500px) -->
-<td class="title">Long title...</td>
-
-<!-- Full width cell -->
-<td class="cell-full-width">Takes all space</td>
-
-<!-- Text wrapping -->
-<td class="wrap">This text will wrap</td>
-<td class="pre">Preserves   whitespace</td>
-```
-
-#### Interactive Table Rows
-```html
-<!-- Hover to highlight row -->
-<tr class="linked-row">...</tr>
-
-<!-- Hover to highlight cell -->
-<td class="linked-cell">...</td>
-
-<!-- Highlight parent row on child hover -->
-<tr>
-  <td>
-    <a class="highlight-parent-row" href="#">Link</a>
-  </td>
-</tr>
-```
-
----
-
-## List Components
-
-### Basic List Items
-
-```html
-<div class="list-listitems">
-  <div class="listitem">
-    <div class="listitem-title">List item title</div>
-  </div>
-
-  <!-- List item with badge -->
-  <div class="listitem">
-    <div class="listitem-badge">
-      <div class="icon icon-feature"></div>
-    </div>
-    <div class="listitem-title">
-      List-item title
-      <div class="listitem-label">Label</div>
-    </div>
-    <div class="listitem-metrics">
-      <div class="listitem-metric">
-        <div class="icon icon-critical"></div>
-        99
-      </div>
-      <div class="listitem-metric">
-        <div class="icon icon-high"></div>
-        99
-      </div>
-    </div>
-  </div>
-
-  <!-- List item with actions -->
-  <div class="listitem">
-    <div class="listitem-title">List-item with action</div>
-    <div class="listitem-actions">
-      <a class="btn btn-primary">Action</a>
-    </div>
-  </div>
-
-  <!-- Linked list item -->
-  <a class="listitem" href="#">
-    <div class="listitem-title">
-      <span class="icon icon-user-story mr-icon-spacing"></span>
-      Linked list item
-    </div>
-  </a>
-</div>
-```
-
-### List Item Variants
-
-```html
-<!-- With action bar -->
-<div class="listitem with-actionbar">...</div>
-
-<!-- With footer -->
-<div class="listitem with-footer">
-  <div class="listitem-title">Title</div>
-  <div class="listitem-footer">Footer content</div>
-</div>
-
-<!-- Collapsable list item -->
-<details class="listitem collapsable">
-  <summary class="listitem-header">
-    <div class="listitem-title">Collapsable Title</div>
-    <div class="btn collapse-btn"></div>
-  </summary>
-  <div class="listitem-content">Hidden content</div>
-</details>
-
-<!-- Nested list items -->
-<div class="listitem nested">
-  <div class="listitem-title">Parent</div>
-  <div class="list-listitems nested">
-    <div class="listitem">Child 1</div>
-    <div class="listitem">Child 2</div>
-  </div>
-</div>
-
-<!-- Selectable list item -->
-<div class="listitem selectable">
-  <input type="checkbox" id="select1">
-  <label for="select1">
-    <div class="listitem-title">Selectable Item</div>
-  </label>
-</div>
-
-<!-- White background list item -->
-<div class="listitem white">...</div>
-```
-
-### User Item
-```html
-<div class="user-item">
-  <div class="user-item-avatar">
-    <img src="avatar.jpg" alt="User">
-  </div>
-  <div class="user-item-info">
-    <h4 class="user-item-name">Jane Smith</h4>
-    <p class="user-item-email">jane@example.com</p>
-  </div>
-  <div class="user-item-actions">
-    <button class="btn btn-sm btn-secondary">Message</button>
-  </div>
-</div>
-```
-
-### Task/Issue Item
-```html
-<div class="task-item">
-  <div class="task-item-header">
-    <h4 class="task-item-title">Fix login bug</h4>
-    <span class="badge badge-danger">High</span>
-  </div>
-  <div class="task-item-body">
-    <p class="task-item-description">Description</p>
-  </div>
-  <div class="task-item-footer">
-    <span class="task-item-meta">Due: Oct 25, 2025</span>
-  </div>
-</div>
-```
-
----
-
-## Splitview Components
-
-Two-pane layout for list and detail views with responsive behavior.
-
-### Basic Splitview
-```html
-<div class="splitview">
-  <div class="splitview-list">
-    <div class="splitview-item">
-      <div class="splitview-item-title">Item 1</div>
-    </div>
-  </div>
-  <div class="splitview-detail">
-    <h2>Detail View</h2>
-    <p>Selected item details</p>
-  </div>
-</div>
-```
-
-### Splitview List Header
-```html
-<div class="splitview-list-header">
-  <div class="form-check sm">
-    <input type="checkbox">
-  </div>
-  <h3 class="splitview-list-header-title">18 Bugs</h3>
-  <div class="splitview-list-header-actions">
-    <details class="dropdown-actions dropright">
-      <summary>
-        <a class="link-with-icon" href="">
-          <div class="icon icon-sort-descending"></div>
-          Severity (desc)
-        </a>
-      </summary>
-      <div class="popover-menu">
-        <a class="popover-action" href="#">Sort option 1</a>
-        <a class="popover-action" href="#">Sort option 2</a>
-      </div>
-    </details>
-    <a class="linked-icon" href="">
-      <div class="icon icon-filter"></div>
-    </a>
-    <a class="linked-icon" href="">
-      <div class="icon icon-search"></div>
-    </a>
-  </div>
-</div>
-```
-
-### Splitview Item
-```html
-<div class="splitview-list">
-  <div class="splitview-item">
-    <div class="splitview-item-checkbox form-check sm">
-      <input type="checkbox">
-    </div>
-    <div class="splitview-item-icon icon icon-critical"></div>
-    <div class="splitview-item-text">
-      <div class="splitview-item-title">Item title</div>
-      <div class="splitview-item-metainfo">
-        #123321321 | Product Detail Page
-      </div>
-    </div>
-    <div class="splitview-item-status">
-      <div class="status-icon status-submitted"></div>
-      <div class="status-icon status-manager-approved"></div>
-    </div>
-  </div>
-
-  <!-- Selected state -->
-  <div class="splitview-item selected">...</div>
-</div>
-```
-
-### Splitview with Status Groups
-```html
-<div class="splitview">
-  <div class="splitview-list">
-    <details class="splitview-group" open>
-      <summary class="splitview-group-header">
-        <h3 class="splitview-group-title">Test Group 1</h3>
-        <i class="icon icon-chevron-down"></i>
-      </summary>
-
-      <div class="splitview-group-status">
-        <div class="status-stepper">
-          <div class="status-step completed">
-            <i class="icon icon-check-thick-centered"></i>
-            3 done
-          </div>
-          <div class="status-step active">
-            <i class="icon icon-sync"></i>
-            Executing
-          </div>
-          <div class="status-step">
-            + 3 to do
-          </div>
-        </div>
-      </div>
-
-      <div class="splitview-item">...</div>
-      <div class="splitview-item">...</div>
-
-      <button class="splitview-btn">
-        Show 5 dismissed items
-      </button>
-    </details>
-  </div>
-</div>
-```
-
-### Collapsable Splitview Item
-```html
-<details class="splitview-item collapsable">
-  <summary class="splitview-item-header">
-    <div class="splitview-item-title">Collapsable Item</div>
-    <div class="btn collapse-btn"></div>
-  </summary>
-  <div class="splitview-item-content">
-    Expanded content
-  </div>
-</details>
-```
-
----
-
-## Chat Components
-
-Comprehensive chat interface components with full dark mode support.
-
-### Chat Message List
-```html
-<div class="list-chat-messages">
-  <div class="chat-message-item">
-    <img src="avatar.jpg" alt="User" class="chat-avatar">
-
-    <div class="chat-header">
-      <span class="chat-title">
-        <span class="chat-author">John Doe</span>
-      </span>
-      <span class="chat-time">2 hours ago</span>
-    </div>
-
-    <div class="chat-message">
-      <p>This is a chat message with some content.</p>
-    </div>
-
-    <div class="chat-actions">
-      <button class="btn btn-ghost btn-sm">
-        <i class="icon icon-reply"></i>
-      </button>
-    </div>
-  </div>
-</div>
-```
-
-### Full Width Chat
-```html
-<div class="list-chat-messages full-width">
-  <div class="chat-message-item">...</div>
-</div>
-```
-
-### Chat Message Variants
-
-```html
-<!-- Announcement message -->
-<div class="chat-message">
-  <div class="message-banner announcement">
-    System Announcement: Maintenance scheduled
-  </div>
-  <p>The system will be down for maintenance on Saturday.</p>
-</div>
-
-<!-- Mentioned message -->
-<div class="chat-message">
-  <div class="message-banner mentioned">
-    <span class="text-mentioned">@YourName</span> mentioned you
-  </div>
-  <p>Hey, can you take a look at this?</p>
-</div>
-```
-
-### Chat Window Component
-```html
-<div class="chat-window">
-  <div class="chat-window-header">
-    <h3>Chat</h3>
-  </div>
-  <div class="chat-window-messages">
-    <div class="list-chat-messages">
-      <!-- Messages -->
-    </div>
-  </div>
-  <div class="chat-window-input">
-    <textarea class="form-control" placeholder="Type a message..."></textarea>
-    <button class="btn btn-primary">Send</button>
-  </div>
-</div>
-```
-
----
-
-## Chart Components
-
-The design system integrates ECharts for data visualization with design system colors.
-
-### Chart Container
-```html
-<div class="echarts-container" id="my-chart"></div>
-```
-
-### Chart Types
-
-#### Horizontal Bar Chart
-```javascript
-import { createChartHorizontal } from './modules/echarts_horizontal';
-
-createChartHorizontal(
-  "element-id",      // Target element ID
-  dataArray,         // Data labels array
-  seriesArray,       // Series configuration
-  showLegend,        // Boolean: show legend
-  labelColor,        // Color for labels
-  valueColor         // Color for values
-);
-```
-
-#### Donut Chart
-```javascript
-import { createChartDonut } from './modules/echarts_donut';
-
-createChartDonut(
-  "element-id",      // Target element ID
-  dataArray,         // Data array with values
-  valueText,         // Center value text
-  labelText,         // Center label text
-  showLegend,        // Boolean: show legend
-  labelColor,        // Color for labels
-  valueColor         // Color for values
-);
-```
-
-#### Vertical Bar Chart
-```javascript
-import { createChartVertical } from './modules/echarts_vertical';
-```
-
-#### Line Chart
-```javascript
-import { createChartLine } from './modules/echarts_line';
-```
-
-#### Area Chart
-```javascript
-import { createChartArea } from './modules/echarts_area';
-```
-
-#### Gauge Chart
-```javascript
-import { createChartGauge } from './modules/echarts_gauge';
-```
-
-### Chart Colors
-```javascript
-// Available chart colors
-export const colorCritical = '#FF3131';
-export const colorHigh = '#d8ce0d';
-export const colorLow = '#9fa2a8';
-export const colorVisual = '#f48d21';
-export const colorContent = '#326dd1';
-export const colorUX = '#263340';
-export const colorSuccess = '#8cbd24';
-export const colorDanger = '#FF3131';
-export const colorNeutral = '#e6e6e6';
-export const colorInfo = '#326dd1';
-export const colorBlueLight = '#21bef4';
-```
-
-### Chart Data Examples
-```javascript
-// Bug distribution data
-export let dataBugs = [
-  { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
-  { value: 37, name: 'High', itemStyle: {color: colorHigh}},
-  { value: 19, name: 'Low', itemStyle: {color: colorLow}},
-];
-
-// Test case status
-export let dataTestCases = [
-  { value: 50, name: 'Passed', itemStyle: {color: colorSuccess}},
-  { value: 23, name: 'Failed', itemStyle: {color: colorDanger}},
-  { value: 27, name: 'Open', itemStyle: {color: colorNeutral}},
-];
-```
-
----
-
-## Status & Progress Components
-
-### Status Stepper
-
-A horizontal stepper component for visualizing multi-step processes.
-
-#### Icon-based Status Stepper
-```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>
-  <div class="status-step">
-    + 3 to do
-  </div>
-</div>
-```
-
-#### Counter-based Status Stepper
-```html
-<div class="status-stepper">
-  <div class="status-step completed">
-    <div class="counter">99</div>
-    Completed
-  </div>
-  <div class="status-step active">
-    <div class="counter">12</div>
-    Active
-  </div>
-  <div class="status-step">
-    <div class="counter">5</div>
-    Pending
-  </div>
-</div>
-```
-
-**Component Classes:**
-- `.status-stepper` - Container (flex row, items-stretch, full width)
-- `.status-step` - Individual step (flex row, centered, rounded, px-md py-xs, bg-black)
-- `.status-step.active` - Active step (grow-1, white text, bg-gray-750)
-- `.status-step.completed` - Completed state (can combine with custom styling)
-- `.status-step .icon` - Icon within step (mr-xs, text-label-color)
-- `.status-step .counter` - Numeric counter (pr-xs, text-lg, font-bold)
-
----
-
-## Utility Components
-
-### Tags
-```html
-<div class="list-tags">
-  <!-- Basic tag -->
-  <div class="tag">Tag</div>
-
-  <!-- Small tag -->
-  <div class="tag sm">Tag sm</div>
-
-  <!-- Focus group tag -->
-  <div class="tag focus-group">Focus-group</div>
-
-  <!-- Verified tag -->
-  <div class="tag teamleader-verified">
-    <div class="icon icon-verify-check mr-xxs"></div>
-    TL
-  </div>
-
-  <!-- Status tags -->
-  <div class="tag success">
-    <div class="icon icon-check-circle"></div>
-    Success
-  </div>
-  <div class="tag danger">
-    <div class="icon icon-cross-circle"></div>
-    Danger
-  </div>
-  <div class="tag pending">
-    <div class="icon icon-sync"></div>
-    Pending
-  </div>
-</div>
-```
-
-### Tag with Popover
-```html
-<details class="popover-wrapper">
-  <summary>
-    <div class="tag popover-tag">
-      <div class="icon icon-clock"></div>
-      Popover-tag
-    </div>
-  </summary>
-  <div class="popover-menu info">
-    <div class="popover-title">Popover title</div>
-    <div class="popover-content">Content...</div>
-    <div class="popover-actions">
-      <div class="btn btn-sm btn-inverted">Action</div>
-    </div>
-  </div>
-</details>
-
-<!-- Light popover tag -->
-<div class="tag popover-tag light">...</div>
-
-<!-- Colored popover tags -->
-<div class="tag popover-tag bg-info text-white">...</div>
-<div class="tag popover-tag bg-black text-white">...</div>
-<div class="tag popover-tag bg-danger text-white">...</div>
-```
-
-### Info Popover
-```html
-<details class="popover-wrapper">
-  <summary>
-    <div class="btn btn-sm btn-square">
-      <div class="icon icon-info"></div>
-    </div>
-  </summary>
-  <div class="popover-menu info">
-    <div class="popover-title">Popover title</div>
-    <div class="popover-content">Popover content...</div>
-    <div class="text-with-icon mt-xs">
-      <div class="icon icon-lock text-disabled mr-icon-spacing"></div>
-      <div class="text-sm">0/100 Completed</div>
-    </div>
-    <div class="text-with-icon mt-xs">
-      <div class="icon icon-unlock text-success mr-icon-spacing"></div>
-      <div class="text-sm">50/50 Done</div>
-    </div>
-    <div class="popover-actions">
-      <div class="btn btn-sm btn-inverted">Action</div>
-    </div>
-  </div>
-</details>
-```
-
-### Pagination
-```html
-<nav class="pagy-bootstrap nav">
-  <ul class="pagination">
-    <li class="page-item prev">
-      <a class="page-link" href="#">&lt;</a>
-    </li>
-    <li class="page-item">
-      <a class="page-link" href="#">1</a>
-    </li>
-    <li class="page-item active">
-      <a class="page-link" href="#">2</a>
-    </li>
-    <li class="page-item">
-      <a class="page-link" href="#">3</a>
-    </li>
-    <li class="page-item next disabled">
-      <a class="page-link" href="#">&gt;</a>
-    </li>
-  </ul>
-</nav>
-```
-
-### Badges
-```html
-<span class="badge badge-primary">New</span>
-<span class="badge badge-success">Active</span>
-<span class="badge badge-danger">Urgent</span>
-<span class="badge badge-warning">Pending</span>
-<span class="badge badge-info">Info</span>
-```
-
-### Icon Sizes
-```html
-<i class="icon icon-star text-icon-xxxs"></i>  <!-- 10px -->
-<i class="icon icon-star text-icon-xxs"></i>   <!-- 0.625rem -->
-<i class="icon icon-star text-icon-xs"></i>    <!-- 16px -->
-<i class="icon icon-star text-icon-sm"></i>    <!-- 18px -->
-<i class="icon icon-star text-icon"></i>       <!-- 20px - default -->
-<i class="icon icon-star text-icon-lg"></i>    <!-- 40px -->
-<i class="icon icon-star text-icon-xl"></i>    <!-- 60px -->
-<i class="icon icon-star text-icon-xxl"></i>   <!-- 90px -->
-```
-
-### Text with Icon
-```html
-<div class="text-with-icon">
-  <div class="icon icon-check text-success mr-icon-spacing"></div>
-  <span>Text with icon</span>
-</div>
-
-<div class="link-with-icon">
-  <div class="icon icon-external-link mr-icon-spacing"></div>
-  <a href="#">Link with icon</a>
-</div>
-```
-
-### Description List
-```html
-<dl class="description-list">
-  <dt>Term</dt>
-  <dd>Definition</dd>
-  <dt>Another term</dt>
-  <dd>Another definition</dd>
-</dl>
-
-<!-- Inline description list -->
-<dl class="list-inline">
-  <dt>Property</dt>
-  <dd>Value</dd>
-</dl>
-```
-
----
-
-## AgenticQA Components
-
-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">
-    <h1 class="text-card-header">Session details</h1>
-    <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 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>
-  </div>
-  <div class="page-actions">
-    <a class="btn btn-primary btn-main" href="">
-      <span class="icon icon-test-running-xl"></span>
-      Start test
-    </a>
-  </div>
-</div>
-```
-
-**With Chart:**
-```html
-<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="page-actions">
-    <a class="btn btn-primary btn-main" href="">
-      <span class="icon icon-review-xl"></span>
-      Show report
-    </a>
-  </div>
-</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
-```
+The full reference has been split into focused topic files in `ai-reference/` to save tokens. Load only the file(s) you need.
 
 ---
 
-### 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
-<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
-
-The design system includes comprehensive dark mode support with customized theme variables and a centered layout variant for dark mode displays.
-
-### Enabling Dark Mode
-
-```html
-<!-- Apply dark class to body or container -->
-<body class="app-body dark">
-  <!-- All dark mode styles will be applied -->
-</body>
-```
-
-### Dark Mode Layout Structure
-
-```html
-<body class="app-body dark">
-  <header class="header">
-    <!-- Dark mode header -->
-  </header>
-  <main class="main-content centered">
-    <div class="centered-content">
-      <!-- Centered content with dark mode styling -->
-    </div>
-  </main>
-  <footer class="actionbar centered">
-    <!-- Centered actionbar for dark mode -->
-  </footer>
-</body>
-```
-
-### Dark Mode Color Palette
-```css
-.dark {
-  /* Core Colors */
-  --color-appbody: #181818;
-  --color-appbody-textcolor: #f2f2f2;
-  --color-header: #1d1d1d;
-  --color-card: #1D1D1D;
-  --color-listitem: #262626;
-
-  /* Interactive Colors */
-  --color-primary: #78eac1;
-  --color-link: #8988eb;
-  --color-link-hover: #7954ff;
-
-  /* Status Colors */
-  --color-success: #33BA9E;
-  --color-danger: #FF3131;
-  --color-bordercolor: #2E2E2E;
-
-  /* Spacing & Style Adjustments */
-  --radius: 12px;              /* Increased from 5px */
-  --spacing-grid-gutter: 40px; /* Increased from 20px */
-  --card-padding: 30px;
-  --fontsize-card-header: 1.125rem;
-  --font-size-label: 0.75rem;
-}
-```
-
-### Using Dark Mode
-```html
-<!-- Apply dark class to container -->
-<div class="dark">
-  <div class="bg-appbody text-appbody-textcolor">
-    <div class="card p-card-padding">
-      <p>Content with dark mode styling</p>
-    </div>
-  </div>
-</div>
-
-<!-- Conditional dark mode classes -->
-<div class="bg-card dark:bg-listitem">
-  <!-- Light mode: #e6e6e6, Dark mode: #262626 -->
-</div>
-
-<!-- Buttons with dark mode -->
-<div class="dark">
-  <button class="btn btn-primary">
-    <!-- Automatically styled for dark mode -->
-  </button>
-</div>
-```
-
-### Dark Mode Layout Examples
-
-**Centered Dark Mode Layout:**
-- Optimal for documentation or form-based interfaces
-- Content is centered with max-width constraint
-- Footer actionbar is also centered
-- View live example: `/pages/layouts/layout-darkmode`
-
-**Dark Mode with Forms:**
-- Form controls are optimized for dark backgrounds
-- Input fields have proper contrast
-- Labels and hints are readable
-- Error states are clearly visible
-
-### Dark Mode Differences from Light Mode
-- Border radius: `5px` → `12px`
-- Grid gutters: `20px` → `40px`
-- Table cell padding: `py-xs` → `py-md`
-- Chat layout: 3 columns → 2 columns (actions hidden)
-- Link colors: Petrol → Purple (#8988eb), Hover: Dark Purple (#7954ff)
-- Text color: System colors → Light gray (#f2f2f2)
-- Font sizes: Labels reduced to 0.75rem (from 0.8125rem)
-- Card headers: 1.125rem in dark mode
-
-### Dark Mode Best Practices
-
-1. **Testing Dark Mode**
-   - Always preview components with the `.dark` class applied
-   - Test contrast ratios for accessibility compliance
-   - Verify all interactive elements are clearly visible
-
-2. **Component-Specific Adjustments**
-   - Buttons: Use inverted variants for dark backgrounds
-   - Cards: Ensure sufficient contrast with dark background
-   - Text: Use light colors for readability
-   - Borders: Use subdued colors that don't overpower the dark background
-
-3. **Dark Mode CSS Utilities**
-   - Use Tailwind's `dark:` prefix for conditional dark mode styles
-   - Example: `bg-white dark:bg-gray-800`
-   - Combine with custom CSS variables for consistency
-
----
-
-## Best Practices for AI Agents
-
-### When Building Pages:
-
-1. **Start with Layout Structure**
-   - Use semantic HTML5 elements
-   - Apply layout classes: `header`, `sidebar`, `main`, `section`
-   - Use grid or flex utilities for responsive layouts
-   - Consider using `.page-header` for dashboard pages
-   - Choose between standard full-width or centered layout
-
-2. **Component Selection**
-   - Choose the appropriate component variant for the use case
-   - Use semantic button/alert types (primary, success, danger, etc.)
-   - Apply consistent spacing using the spacing scale
-
-3. **Responsive Design**
-   - Use responsive grid classes: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
-   - Apply responsive utilities: `hidden md:block`, `flex-col md:flex-row`
-   - Consider mobile-first approach
-
-4. **Accessibility**
-   - Include proper ARIA labels
-   - Use semantic HTML elements
-   - Ensure proper heading hierarchy
-   - Include alt text for images
-   - Use `<label>` elements with `for` attributes
-
-5. **Layout Pattern Selection**
-   - **Full-Width Layout**: Use for dashboards and data displays
-   - **Centered Layout**: Use for documentation and forms
-   - Both support dark mode with proper styling
-   - Choose based on content type and readability requirements
-
-6. **Dark Mode Considerations**
-   - Always test components with `.dark` class applied
-   - Border radius is larger in dark mode (12px vs 5px)
-   - Grid gutters are larger in dark mode (40px vs 20px)
-   - Use `dark:` prefix for conditional dark mode styles
-   - Ensure sufficient contrast for readability
-   - Test with actual dark mode enabled in browsers
-
-7. **Form Best Practices**
-   - Use `.form-grid` for form layouts
-   - Apply `.form-group` wrapper around each field
-   - Use `.form-hint` for helper text
-   - Use `.field_with_errors` for validation states
-   - Forms work well in both centered and full-width layouts
-
-8. **Table Best Practices**
-   - Use `.table` for standard data tables
-   - Use `.table-standard` for key-value style tables
-   - Use `.table-cellstyle` for status tracking tables
-   - Use `.action-cell` for right-aligned action buttons
-   - Tables automatically adapt to dark mode
-
-9. **Page Header Best Practices**
-   - Use `.page-header` for dashboard/session pages
-   - Main card should have `.page-maincard` and `p-card-padding`
-   - Add `.with-chart` modifier when including charts
-   - Actions go in `.page-actions`
-   - Supports dark mode styling
-
----
-
-## 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:**
-- ✨ Centered layout documentation and examples for improved readability
-- ✨ Dark mode layout examples and enhanced dark mode documentation
-- ✨ Centered actionbar variant for dark mode and standard layouts
-- ✨ Centered header styling for consistent layout patterns
-- ✨ HAML Preview functionality for live component viewing
-- ✨ HAML Converter utility for template processing
-- ✨ Comprehensive AI documentation across all component pages
-
-**Enhancements:**
-- 📐 New layout patterns section with centered and full-width examples
-- 🌙 Enhanced dark mode documentation with implementation examples
-- 📋 All component pages now include descriptions and use cases
-- 🎯 Updated layout documentation with max-width constraints
-- 🎨 Form and table components optimized for dark mode
-- 📝 Added layout selection guidelines for AI agents
-
-**Layout Updates:**
-- Added `/pages/layouts/layout-centered` for centered layout examples
-- Added `/pages/layouts/layout-darkmode` for dark mode examples
-- Added `/pages/layout/centered_layout.haml` documentation
-- Added `/pages/layout/darkmode.haml` documentation
-- Added `/pages/navigation/header-centered.haml` for centered headers
-- Improved layout documentation with examples
-- Typography pages updated with link and icon examples
-
-**Documentation:**
-- Added descriptions to all forms pages
-- Updated textarea documentation
-- Enhanced typography component examples
-
-### Version 3.13.1 - January 21, 2026
-
-**Documentation Updates:**
-- Converted table example files from Pug to HAML format
-- Standardized HAML attribute syntax across all table examples
-
-### Version 3.13.0 - January 20, 2026
-
-**New Components:**
-- Date & Time Picker (Flatpickr integration)
-- Enhanced table variants with striped/alternating row styles
-
-**Reorganization:**
-- Tables section moved to dedicated `/pages/tables/` directory
-- Improved table documentation
-
-**Enhancements:**
-- Fixed table striped row styling
-- Improved drawer footer padding
-- Better splitview details close button
-- Added image tagging capability
-
----
-
-## Version & Support
-
-**Current Version:** 3.22.0
-**Tailwind Version:** 4.1.11
-**Node Version:** v23.11.0
-**Template Language:** HAML (primary) and Pug formats supported
-
-For updates and examples, refer to:
-- NPM: `npm install testio-tailwind@latest`
-- Documentation: Included in package under `/dist/`
-- Source: GitHub repository (test-IO/testio-tailwind)
-
----
+## Reference Files
 
-**END OF REFERENCE GUIDE**
+| File | Topics |
+|---|---|
+| [ai-reference/00-index.md](ai-reference/00-index.md) | **Start here** — full index with load guidance and quick reference |
+| [ai-reference/01-setup-colors-typography.md](ai-reference/01-setup-colors-typography.md) | Installation, CSS/JS imports, color palette, typography, spacing, breakpoints |
+| [ai-reference/02-layout-patterns.md](ai-reference/02-layout-patterns.md) | Full-width & centered layouts, page header, navigation (header, sidebar, tabs) |
+| [ai-reference/03-buttons.md](ai-reference/03-buttons.md) | All button variants, sizes, shapes, icons, inverted, dropdown menus, groups |
+| [ai-reference/04-cards.md](ai-reference/04-cards.md) | Card structure, sizes, variants, card grid/list layouts |
+| [ai-reference/05-forms.md](ai-reference/05-forms.md) | Inputs, hints, grid, checkboxes, radios, toggles, selects, date picker, addons |
+| [ai-reference/06-overlays.md](ai-reference/06-overlays.md) | Modal (sizes, variants), Drawer (basic, filter) |
+| [ai-reference/07-feedback.md](ai-reference/07-feedback.md) | Alerts, notifications, progress bars, loading spinner, empty states |
+| [ai-reference/08-data-display.md](ai-reference/08-data-display.md) | Tables (basic, variants, cell-style, utilities, interactive rows) |
+| [ai-reference/09-lists-splitview.md](ai-reference/09-lists-splitview.md) | List items (variants, collapsable, nested), splitview two-pane layout |
+| [ai-reference/10-chat-charts-status.md](ai-reference/10-chat-charts-status.md) | Chat UI, ECharts integration, status stepper, tags, badges, pagination, popovers |
+| [ai-reference/11-agenticqa.md](ai-reference/11-agenticqa.md) | AgenticQA platform: chat, splitview, tables, header, layout, best practices |
+| [ai-reference/12-dark-mode.md](ai-reference/12-dark-mode.md) | Dark mode setup, CSS variables, color palette, differences from light mode |
+| [ai-reference/13-best-practices.md](ai-reference/13-best-practices.md) | AI agent guidelines, layout selection, accessibility, version & support |