feat: show multiple step screenshots per test variant

Co-authored-by: Cursor <cursoragent@cursor.com>

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[];

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;
 }

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 && (
+                          <div className={styles.testScreenshotButtons}>
-                            <button
+                            {result.screenshots && result.screenshots.length > 0
-                              className={styles.testScreenshotButton}
+                              ? result.screenshots.map((ss, idx) => (
-                              onClick={() => setScreenshotPreview({
+                                <button
-                                src: `data:image/jpeg;base64,${result.screenshot}`,
+                                  key={idx}
-                                caption: result.variantName,
+                                  className={styles.testScreenshotButton}
-                              })}
+                                  onClick={() => setScreenshotPreview({
-                            >
+                                    src: `data:image/jpeg;base64,${ss.data}`,
-                              <FaImage /> Bild
+                                    caption: `${result.variantName} — ${ss.label}`,
-                            </button>
+                                  })}
-                          )}
+                                  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 && (