npm - testio-tailwind - Versions diffs - 3.27.1 → 3.27.4 - Mend

testio-tailwind 3.27.1 → 3.27.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/AI_DESIGN_SYSTEM_REFERENCE.md +20 -3454
package/CLAUDE.md +41 -0
package/Dockerfile +4 -8
package/README.md +1 -5
package/ai-reference/00-index.md +54 -0
package/ai-reference/01-setup-colors-typography.md +164 -0
package/ai-reference/02-layout-patterns.md +253 -0
package/ai-reference/03-buttons.md +106 -0
package/ai-reference/04-cards.md +104 -0
package/ai-reference/05-forms.md +414 -0
package/ai-reference/06-overlays.md +119 -0
package/ai-reference/07-feedback.md +147 -0
package/ai-reference/08-data-display.md +106 -0
package/ai-reference/09-lists-splitview.md +233 -0
package/ai-reference/10-chat-charts-status.md +311 -0
package/ai-reference/11-agenticqa.md +538 -0
package/ai-reference/12-dark-mode.md +111 -0
package/ai-reference/13-best-practices.md +73 -0
package/package.json +1 -1
package/src/assets/fonts/testio.eot +0 -0
package/src/assets/fonts/testio.svg +1 -0
package/src/assets/fonts/testio.ttf +0 -0
package/src/assets/fonts/testio.woff +0 -0
package/src/assets/fonts/testio.woff2 +0 -0
package/src/assets/scripts/modules/colors.js +28 -2
package/src/assets/stylesheets/components/iconfont.css +4 -1

package/AI_DESIGN_SYSTEM_REFERENCE.md CHANGED Viewed

@@ -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 |