From 3e2fa1a9ffaa1e8603b2312fdc771c49f522d158 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Tue, 17 Feb 2026 11:23:18 +0100
Subject: [PATCH] feat: show multiple step screenshots per test variant

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/api/teamsbotApi.ts                        |  6 +++
 src/pages/views/teamsbot/Teamsbot.module.css  |  8 +++-
 .../views/teamsbot/TeamsbotSettingsView.tsx   | 39 +++++++++++++------
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/api/teamsbotApi.ts b/src/api/teamsbotApi.ts
index e9f4595..e03994a 100644
--- a/src/api/teamsbotApi.ts
+++ b/src/api/teamsbotApi.ts
@@ -116,6 +116,11 @@ export interface VoiceOption {
 }
 
 // Auth Detection Test Types
+export interface StepScreenshot {
+  label: string;
+  data: string;
+}
+
 export interface AuthTestResult {
   variantId: string;
   variantName: string;
@@ -128,6 +133,7 @@ export interface AuthTestResult {
   authAttempted: boolean;
   authSuccess: boolean | null;
   screenshot?: string;
+  screenshots?: StepScreenshot[];
   durationMs: number;
   error?: string;
   detectedSignals: string[];
diff --git a/src/pages/views/teamsbot/Teamsbot.module.css b/src/pages/views/teamsbot/Teamsbot.module.css
index af8e16f..e282c09 100644
--- a/src/pages/views/teamsbot/Teamsbot.module.css
+++ b/src/pages/views/teamsbot/Teamsbot.module.css
@@ -659,13 +659,19 @@
   border-left: 3px solid var(--primary-color, #4A90D9);
 }
 
+.testScreenshotButtons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
 .testScreenshotButton {
   padding: 0.15rem 0.5rem;
   border: 1px solid var(--border-color, #e0e0e0);
   border-radius: 4px;
   background: var(--surface-color, #fff);
   color: var(--primary-color, #4A90D9);
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   cursor: pointer;
   white-space: nowrap;
 }
diff --git a/src/pages/views/teamsbot/TeamsbotSettingsView.tsx b/src/pages/views/teamsbot/TeamsbotSettingsView.tsx
index 37296ef..e8560e9 100644
--- a/src/pages/views/teamsbot/TeamsbotSettingsView.tsx
+++ b/src/pages/views/teamsbot/TeamsbotSettingsView.tsx
@@ -342,17 +342,34 @@ export const TeamsbotSettingsView: React.FC = () => {
                         </td>
                         <td><span className={styles.testDuration}>{_formatDuration(result.durationMs)}</span></td>
                         <td>
-                          {result.screenshot && (
-                            <button
-                              className={styles.testScreenshotButton}
-                              onClick={() => setScreenshotPreview({
-                                src: `data:image/jpeg;base64,${result.screenshot}`,
-                                caption: result.variantName,
-                              })}
-                            >
-                              <FaImage /> Bild
-                            </button>
-                          )}
+                          <div className={styles.testScreenshotButtons}>
+                            {result.screenshots && result.screenshots.length > 0
+                              ? result.screenshots.map((ss, idx) => (
+                                <button
+                                  key={idx}
+                                  className={styles.testScreenshotButton}
+                                  onClick={() => setScreenshotPreview({
+                                    src: `data:image/jpeg;base64,${ss.data}`,
+                                    caption: `${result.variantName} — ${ss.label}`,
+                                  })}
+                                  title={ss.label}
+                                >
+                                  <FaImage /> {ss.label}
+                                </button>
+                              ))
+                              : result.screenshot && (
+                                <button
+                                  className={styles.testScreenshotButton}
+                                  onClick={() => setScreenshotPreview({
+                                    src: `data:image/jpeg;base64,${result.screenshot}`,
+                                    caption: result.variantName,
+                                  })}
+                                >
+                                  <FaImage /> Bild
+                                </button>
+                              )
+                            }
+                          </div>
                         </td>
                       </tr>
                       {expandedLogs.has(result.variantId) && result.logs && result.logs.length > 0 && (