testio-tailwind 3.27.2 → 3.27.4

package/ai-reference/11-agenticqa.md

@@ -0,0 +1,538 @@
+# AgenticQA Components
+
+Comprehensive component library specifically designed for the AgenticQA platform. These components provide AI-driven quality assurance workflow interfaces.
+
+**Live Examples:** `http://localhost:8080/agenticqa/`
+
+---
+
+## AgenticQA Page Header
+
+**Purpose:** Display session/test details with metadata and action buttons.
+
+**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
+- `.page-actions` - Container for action buttons
+- `.with-chart` - Modifier for charts display
+- `.page-chart` - Chart container
+- `.btn-main` - Main action button (primary CTA)
+
+```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 10:45 AM</dd>
+      <dt class="label">Last test:</dt>
+      <dd>2025-07-23 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:** Conversational exchanges between users and the AI system.
+
+**Key Classes:**
+- `.list-chat-messages` - Container
+- `.chat-message-item` - Individual message wrapper
+- `.your-message` - User messages (right-aligned)
+- `.chat-avatar` - User profile image
+- `.chat-header` - Message header with title and timestamp
+- `.chat-message` - Message body content
+- `.collapsable` - Modifier for expandable messages
+- `.chat-action-row` - Container for action buttons after messages
+
+### Standard Chat Messages (HAML)
+```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 (HAML)
+```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 content...
+```
+
+### Chat History (HAML)
+```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 (HAML)
+```haml
+.chat-form-row
+  %form.chat-form
+    %h5.text-card-header.mb-xxs Re-Run this check
+    %p.font-light.mb-md Add additional instructions for re-running this check.
+    %textarea.form-control{placeholder:"Add your instructions or feedback"}
+    .form-actions
+      %a.btn.btn-primary.rounded-full
+        %span.icon.icon-sync.mr-icon-spacing
+        re-run check
+      %button.btn.btn-secondary.rounded-full Cancel
+```
+
+---
+
+## AgenticQA Status Stepper
+
+**Key Classes:** `.status-stepper`, `.status-step`, `.completed`, `.active`, `.counter`, `.icon`
+
+```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 individual test results in an expandable interface.
+
+**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
+- `.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
+%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:**
+```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:** Detailed check results with expandable content and screenshots.
+
+**Key Classes:**
+- `.list-listitems` - Container
+- `.listitem` - Individual item 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
+.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
+
+### Grid Table (Read-Only)
+
+**Key Classes:** `.table-grid`, `.table-rowgroups`, `.thead`, `.tbody`, `.tr`, `.th`, `.td`, `.checkbox-column`, `.action-column`, `.url-collapsable`
+
+**Grid Configuration:**
+```
+grid-template-columns: repeat(2, auto) repeat(2, minmax(12rem, 1fr)) repeat(5, auto);
+```
+
+```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
+      .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)
+
+**Purpose:** Inline editing of check parameters.
+
+**Key Classes:** `.formrow`, `.form-group`, `.formrow-actions`
+
+```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
+    %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
+      .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
+```haml
+%details.url-collapsable
+  %summary
+    %p https://example.invalid/long/url/path
+    .trigger
+      .text-closed Show 6 more
+      .text-open Show less
+  %p https://example.invalid/path/1
+  %p https://example.invalid/path/2
+```
+
+---
+
+## AgenticQA Header
+
+**Key Classes:**
+- `.header.agenticqa` - AgenticQA header variant
+- `.header-wrapper` - Header content wrapper
+- `.navlinks` - Link group container
+- `.navlink` - Navigation link
+- `.header-dropdown` - Dropdown menu
+- `.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
+- `.profile-role` - User role text
+- `.profile-name` - User name text
+
+```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
+      %details.header-dropdown
+        %summary.navlink Collapsable
+        .dropdown-menu
+          %a.navlink{href:'#'}
+            %span.icon.icon-user
+            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
+    .navlinks.right
+      %details.header-dropdown.user-menu
+        %summary.btn-profile.navlink
+          %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-shutdown
+            Sign out
+```
+
+---
+
+## AgenticQA Layout Structure
+
+All AgenticQA pages use a dark sidebar layout:
+
+```html
+<body class="app-body">
+  <header class="header agenticqa">
+    <!-- AgenticQA navigation -->
+  </header>
+  <main class="main-content">
+    <div class="app-layout">
+      <aside class="sidebar dark">
+        <!-- Dark sidebar navigation -->
+      </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 Asset References
+
+- **Logo:** `/src/assets/images/logo_agenticqa/` (PNG + SVG, Purple/Teal variants)
+- **Email templates:** `/src/assets/images/assets_agenticqa/`
+- **Email styling:** `src/pages/agenticqa/email.njk`
+
+---
+
+## AgenticQA Best Practices
+
+1. **Chat** — Use collapsable messages for long content; always include timestamps and speaker identification
+2. **Status Tracking** — Use status stepper for overall progress; splitview for URL/page grouping
+3. **Tables** — Grid tables for read-only; form row tables for inline editing; status column first
+4. **List Items** — Collapsable structure with attachments/screenshots; consistent styling for findings
+5. **Navigation** — Include user profile top-right; support mobile menu; highlight active item
+6. **Dark Mode** — All AgenticQA components include dark mode; dark sidebar is the primary pattern

package/ai-reference/12-dark-mode.md

@@ -0,0 +1,111 @@
+# Dark Mode
+
+---
+
+## Enabling Dark Mode
+
+```html
+<body class="app-body dark">
+  <!-- All dark mode styles applied automatically -->
+</body>
+```
+
+---
+
+## Dark Mode Layout Structure
+
+```html
+<body class="app-body dark">
+  <header class="header"></header>
+  <main class="main-content centered">
+    <div class="centered-content">
+      <!-- Centered content with dark mode styling -->
+    </div>
+  </main>
+  <footer class="actionbar centered"></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 work automatically in dark mode -->
+<div class="dark">
+  <button class="btn btn-primary">Automatically styled for dark mode</button>
+</div>
+```
+
+---
+
+## Dark Mode Differences from Light Mode
+
+| Property | Light | Dark |
+|---|---|---|
+| Border radius | 5px | 12px |
+| Grid gutters | 20px | 40px |
+| Table cell padding | py-xs | py-md |
+| Chat layout | 3 columns | 2 columns (actions hidden) |
+| Link color | Petrol | Purple (#8988eb) |
+| Link hover | — | Dark Purple (#7954ff) |
+| Text color | System | Light gray (#f2f2f2) |
+| Label font size | 0.8125rem | 0.75rem |
+| Card headers | default | 1.125rem |
+
+---
+
+## Dark Mode Best Practices
+
+1. Always preview components with `.dark` class applied
+2. Test contrast ratios for accessibility compliance
+3. Use inverted button variants on dark backgrounds
+4. Use Tailwind's `dark:` prefix for conditional styles — e.g., `bg-white dark:bg-gray-800`
+5. Combine `dark:` prefix with CSS variables for consistency
+6. Centered dark mode layout is optimal for documentation/form interfaces