Screenshots – Noch zu erstellen / Still to Create

Stand: Juli 2026
Checkliste (Mitwirkende, nur Repository): screenshot-checklist.en.md | screenshot-checklist.de.md – nicht auf der öffentlichen Docs-Website veröffentlicht.
Abgleich: Screenshotliste mit Vistameet-Teams-Konzeptdokumenten abgeglichen (u. a. KONZEPT_MATRIX_MEETING_CHAT_ERSATZ: Meeting-Chat-Screens in Config/Checkliste). Geplante Erweiterung: Google als Kalender-/Todo-/Kontakte-Provider → siehe docs/PLAN_GOOGLE_KALENDER_TODO_KONTAKTE_DATEIEN.md; bei Umsetzung optionale Screens für Einstellungen/Konten und Badge-Ansichten ergänzen.

Übersicht

[x] = Vorhanden in docs/screenshots/
[~] = In screenshot-config.json konfiguriert, per npm run screenshots erzeugbar
[ ] = Noch zu erstellen

Wartezeiten für Datenladen

Nach Login und Seitenwechsel muss genug Zeit für asynchrone Datenladung sein (Matrix, Kalender-Provider, MS Graph, Call-Log-API). In screenshot-config.json steuern delayAfterNavigation (global 4000 ms) und delayBeforeCapture (pro Screenshot 4500–7500 ms) die Wartezeiten. Zu geringe Werte führen zu Ladeblumen. Empfehlungen und Tabelle: SETUP.md.

Vollständige Liste – Screenshots noch zu erstellen

Getting Started

Screenshot	Beschreibung	Hinweise
`initialization-screen.png`	Initialisierungsbildschirm	Nach Login
`desktop-app-interface.png`	Desktop-App-Oberfläche	Desktop-App
`mobile-app-interface.png`	Mobile-App-Oberfläche	iOS/Android
`web-app-interface.png`	Web-App im Browser

Screenshot	Beschreibung	Hinweise
`sidebar-customization.png`	Sidebar-Anpassung (Drag & Drop, Rechtsklick)	Dialog/Modal

Chat & Messaging

Screenshot	Beschreibung	Hinweise
`message-input.png`	Nachrichteneingabe
`message-context-menu.png`	Kontextmenü (Reply, Edit, Delete)	Rechtsklick auf Nachricht
`create-room-dialog.png`	Raum erstellen
`room-settings.png`	Raumeinstellungen / Room settings drawer
`add-people-dialog.png`	Personen hinzufügen (People Picker: Matrix + MS Entra)	Neu – Chat öffnen → Personen hinzufügen
`invite-external-user-dialog.png`	Per E-Mail oder Teams einladen (MS-Nutzer ohne Matrix)	Neu – Nach Add People bei MS-Nutzern
[~] `add-tab-dialog.png`	Tab hinzufügen (Integrierte Tabs: Befragung, Whiteboard)	`add-tab-dialog`
`whiteboard-tab.png`	Whiteboard-Tab (Excalidraw)	Neu
[~] `polls-tab.png`	Befragung/Polls-Tab (Kurzumfrage)	`polls-tab`
`ms-chat-interface.png`	Microsoft Teams Chat	/ms-chat
`ms-channels-interface.png`	Microsoft Teams Channels	/ms-channels
`advanced-search-dialog.png`	Erweiterte Suche	Ctrl+K
`search-results-filters.png`	Suchergebnisse mit Filtern

Befragung & Umfragen (R2.8, Juli 2026)

Vorgaben: POLLS_SCREENSHOTS.md

Screenshot	Beschreibung	Hinweise
[~] `polls-tab-questionnaires.png`	Befragung-Tab, Unter-Tab Fragebögen	`polls-tab-questionnaires`
[~] `create-poll-dialog.png`	Dialog Umfrage erstellen (Entwurf/Start)	`create-poll-dialog`
[~] `create-questionnaire-dialog.png`	Dialog Fragebogen erstellen (Fragetypen)	`create-questionnaire-dialog`
`calendar-polls-prep-panel.png`	Termin bearbeiten → Umfragen vorbereiten	Manuell
`calendar-poll-results-dialog.png`	Kalender-Kontextmenü → Umfrage-Ergebnisse	Manuell
`call-log-poll-results-dialog.png`	Anrufe → Umfrage-Ergebnisse	Manuell
`meeting-polls-drawer.png`	Meeting-Drawer mit Umfragen-Panel	Config, Join + `__MEETING_PREJOIN_PATH__`
`meeting-poll-stage-dialog.png`	Stage-Overlay aktive Schnellumfrage	Manuell / E2E `meeting-polls-stage.spec.ts`

Calendar

Screenshot	Beschreibung	Hinweise
`new-event-dialog.png`	Neuer Termin / Create event
`event-details.png`	Termindetails
`scheduling-assistant.png`	Scheduling Assistant	Bei Terminen mit Teilnehmern

Planner

Screenshot	Beschreibung	Hinweise
`create-task-dialog.png`	Aufgabe erstellen
`task-card.png`	Aufgabenkarte mit Aktionen
`planner-filters.png`	Filteroptionen

Teams & Channels

Screenshot	Beschreibung	Hinweise
`channels-list.png`	Kanalliste	Nach Team-Auswahl
`channel-conversation.png`	Kanal-Unterhaltung

Calls

Screenshot	Beschreibung	Hinweise
[x] `call-log.png`	Anrufverlauf / Call Log	Tab Besprechungen in Calls (`call-log`)
[x] `call-log-share-panel.png`	Freigabe nach Meeting	Detail-Drawer, Moderator (`call-log-share-panel`)
[x] `meeting-options-post-meeting-share.png`	Termin-Optionen Freigabe	Neues Meeting, Protokoll/Mitschrift (`meeting-options-post-meeting-share`)
[x] `incoming-call-dialog.png`	Eingehender Anruf (neu: Audio/Video/Ablehnen)	Juni 2026
[x] `incoming-call-dialog-video.png`	Eingehender Videoanruf	Juni 2026
[x] `incoming-call-standalone-window.png`	Tauri: separates Anruf-Fenster	Juni 2026 (`--only=standalone`)
`active-call-interface.png`	Aktiver Anruf
`meeting-room.png`	Meeting-Raum
`meeting-toolbar.png`	Meeting-Toolbar (Chat, Q&A, Polls, Whiteboard)
`participant-list.png`	Teilnehmerliste
`meeting-controls.png`	Meeting-Steuerung
`pre-join-page.png`	Pre-Join (Kamera/Mikro prüfen)
`join-meeting-dialog.png`	Meeting beitreten
`whiteboard-in-meeting.png`	Whiteboard im Meeting geöffnet

Meeting-Hilfe & Verbindung (Juni 2026)

Vorgaben: MEETING_HELP_SCREENSHOTS.md · Artikel: Meeting-Verbindungsprobleme, Parallele Meeting-Apps

Screenshot	Beschreibung	Hinweise
`prejoin-parallel-apps-warning.png`	Pre-Join: blauer Hinweis parallele Apps (Teams/Zoom)	Kamera oder Mikro an; `preJoinParallelMeetingWarning`
`prejoin-join-error-device.png`	Pre-Join: roter Beitrittsfehler (Gerät belegt)	Parallel Teams/Zoom oder Kamera blockiert
`meeting-health-help-banner.png`	Gelbes Hilfe-Banner im Meeting	~15 s nach Join; 2 Nutzer, Remote ohne Video
`meeting-media-recovery-overlay.png`	Wiederherstellen-Overlay nach Abbruch	`MeetingMediaRecoveryOverlay`
`meeting-more-menu-connection-status.png`	⋯ Mehr → Verbindungsstatus	Menü geöffnet
`meeting-connection-status-dialog.png`	Dialog Verbindungsstatus + Problem melden	`teams-meeting-connection-status-dialog`

Benachrichtigungen & KI (Juli 2026)

Vorgaben: NOTIFICATIONS_CALLS_SCREENSHOTS.md

Screenshot	Beschreibung	Hinweise
[x] `notification-toast-message.png`	Teams-Style Toast (Chat/@Mention)	Juni 2026
[x] `notification-toast-meeting-reminder.png`	Meeting-Erinnerung mit „Beitreten“	Juni 2026
[x] `notification-toast-reaction.png`	Reaktion auf eigene Nachricht (👍)	Juli 2026 `--only=reaction`
[x] `notification-overlay-desktop.png`	Tauri Overlay (Hintergrund)	Juni 2026
[x] `ai-quota-recovery-dialog.png`	KI-Kontingent aufgebraucht	Juni 2026
[x] `account-team-ai-usage.png`	Account → Team → KI-Nutzung	Juni 2026
[x] `settings-notifications.png`	Desktop + Push + Berechtigung	Juli 2026 `--only=settings`
[x] `settings-notifications-chats.png`	Kategorien (Reaktionen, Threads, …)	Juli 2026

Contacts

Screenshot	Beschreibung	Hinweise
`contacts-search.png`	Kontakte mit Suche
`priority-contacts.png`	Prioritätskontakte	/contacts?tab=priority
`blocked-contacts.png`	Blockierte Kontakte

Settings

Screenshot	Beschreibung	Hinweise
`settings-general-language.png`	Allgemein mit Sprachoptionen
`settings-chat.png`	Chat-Einstellungen
`settings-notifications.png`	Benachrichtigungen (Desktop, Push)	Tab Aktivität
`settings-notifications-chats.png`	Kategorien Chats/Kanäle	Tab Aktivität
`settings-keyboard-shortcuts.png`	Tastenkürzel
`settings-account.png`	Konto-Einstellungen
`provider-accounts-tab.png`	Provider-Konten / Konten & Organisationen

Security

Screenshot	Beschreibung	Hinweise
`encryption-setup-wizard.png`	Verschlüsselungs-Setup
`recovery-key-display.png`	Recovery-Key anzeigen
`device-verification.png`	Geräteverifizierung
`user-verification.png`	Benutzerverifizierung
`key-backup-creation.png`	Key-Backup erstellen
`key-backup-restoration.png`	Key-Backup wiederherstellen
`encryption-status.png`	Verschlüsselungsstatus
`migration-progress.png`	Migrationsfortschritt	Falls sichtbar

Spaces

Screenshot	Beschreibung	Hinweise
`space-hierarchy.png`	Space-Hierarchie / Baumansicht
`space-settings.png`	Space-Einstellungen
`create-space-dialog.png`	Space erstellen
`space-nested-rooms.png`	Space mit verschachtelten Räumen

User Profiles

Screenshot	Beschreibung	Hinweise
`profile-own.png`	Eigenes Profil
`profile-other.png`	Profil anderer Nutzer
`profile-editor.png`	Profil bearbeiten
`device-list.png`	Geräteverwaltung

Troubleshooting

Screenshot	Beschreibung	Hinweise
`login-error.png`	Anmeldefehler
`encryption-validation.png`	Verschlüsselungs-Validierung
`error-messages.png`	Fehlermeldungen (Beispiele)
`permission-dialogs.png`	Plattform-Berechtigungsdialoge
`mobile-accessibility.png`	Mobile Barrierefreiheit

Platform-Specific

Screenshot	Beschreibung	Hinweise
`desktop-windows.png`	Desktop-App Windows
`desktop-macos.png`	Desktop-App macOS
`desktop-linux.png`	Desktop-App Linux
`mobile-ios.png`	Mobile-App iOS
`mobile-android.png`	Mobile-App Android
`web-browser.png`	Web-App im Browser

Google als Provider (optional, nach Umsetzung in Vistameet-Teams)

Screenshot	Beschreibung	Hinweise
`settings-accounts-google.png`	Konten & Organisationen mit verbundenem Google-Account	Einstellungen → Konten; wenn Google OAuth integriert
Kalender/Planner/Kontakte mit Google-Badge	Ansichten mit aktivem Google-Provider	Badge „Google“ an Terminen, Aufgaben, Kontakten

Konfigurierbar (screenshot-config.json)

Diese Screenshots können per npm run screenshots automatisch erzeugt werden (falls Login in .env):

login-screen, keycloak-login-page

Global: delayAfterNavigation 4000 ms, waitTimeout 20000 ms
main-interface, chat-list (5–6 s für Matrix-/Chat-Daten)
calendar-month-view, calendar-week-view (6,5 s für Kalender-Provider)
planner-board-view (6 s für Task-Provider)
teams-list (5,5 s)
calls-page, call-log (7–7,5 s für Call-Log-API)
contacts-page (6 s für Kontakt-Provider)
priority-contacts, blocked-contacts (4,5 s)
activity (6 s für Activity-Feed)
assistant (4,5 s)
Einstellungs-Tabs (3,5–4 s, nach Tab-Klick 1,5 s)
ms-chat, ms-channels (7 s für MS Graph API)
Marketing-Varianten: gleiche Wartezeiten wie oben (marketing-main-interface, marketing-ms-chat, …)

Wichtig – Wartezeiten: Nach Login und Seitenwechsel wartet das Skript automatisch (delayAfterNavigation 4000 ms, delayBeforeCapture pro Screenshot 4500–7500 ms), damit Kalender, Planner, Kontakte, Calls und MS-Chat ihre Daten laden. Zu kurze Wartezeiten führen zu Ladeblumen oder leeren Screenshots. Details: SETUP.md.

add-tab-dialog, polls-tab, polls-tab-questionnaires, create-poll-dialog, create-questionnaire-dialog (Chat mit Befragung-Tab; Moderator PL ≥ 50)
meeting-polls-drawer, meeting-poll-stage-dialog (Platzhalter __MEETING_PREJOIN_PATH__)
calendar-polls-prep-panel, calendar-poll-results-dialog, call-log-poll-results-dialog (manuell)

Für Tabs (Add Tab, Whiteboard, Polls) sind teils Aktionen nötig (Chat öffnen → Tab hinzufügen); siehe scripts/screenshot-config.json und POLLS_SCREENSHOTS.md.

E2E-Demo (Vistameet-Teams)

Aus tests/e2e/demo/screenshots/ übernehmen:

3-participants-grid.png
3-participants-speaker.png
10-participants-grid.png
10-participants-grid-scrolled.png
10-participants-speaker.png
10-participants-controls.png

Marketing / Sparks-Website (aus Vistameet-Teams)

Diese Screenshots aus der laufenden Vistameet-Teams-App eignen sich für die Sparks-Marketing-Website und Dokumentation. Sie können per Playwright-Script oder manuell erstellt werden.

Priorität Hoch – für Sparks-Website Feature-Seiten

Screenshot	Beschreibung	URL/Quelle	Verwendung
`marketing-main-interface.png`	Hauptoberfläche mit Sidebar	`/` (nach Login)	Homepage, Übersicht
`marketing-meeting-room.png`	Meeting-Raum mit Teilnehmern	Meeting beitreten	Besprechungen-Seite
`marketing-meeting-toolbar.png`	Meeting-Toolbar (Chat, Whiteboard, Polls)	Im Meeting	Besprechungen: Features
`marketing-breakout-rooms.png`	Breakout-Räume-UI	Im Meeting → Breakout	Besprechungen
`marketing-screen-share.png`	Bildschirmfreigabe aktiv	Im Meeting	Besprechungen
`marketing-whiteboard-tab.png`	Whiteboard-Tab (Excalidraw)	Chat → Tab hinzufügen	Besprechungen, Zusammenarbeit
`marketing-polls-tab.png`	Befragung/Polls-Tab	Chat → Tab hinzufügen	Besprechungen
`marketing-chat-list.png`	Chat-Liste mit Räumen	`/`	Chat-Seite
`marketing-ms-chat.png`	Microsoft Teams Chat	`/ms-chat`	Chat: MS-Integration
`marketing-ms-channels.png`	Microsoft Teams Channels	`/ms-channels`	Zusammenarbeit
`marketing-planner-board.png`	Planner Board-Ansicht	`/planner`	Zusammenarbeit
`marketing-calendar-view.png`	Kalender Monatsansicht	`/calendar`	Zusammenarbeit
`marketing-contacts.png`	Kontakte mit Prioritäten	`/contacts`	Zusammenarbeit
`marketing-assistant.png`	KI-Assistent / Assistant	`/` oder Assistant-Bereich	KI-Assistent-Seite
`marketing-pre-join.png`	Pre-Join (Kamera/Mikro prüfen)	Meeting-Link vor Beitritt	Besprechungen
`marketing-e2ee-setup.png`	E2EE-Setup / Verschlüsselung	Einstellungen → Sicherheit	Chat: E2EE

Priorität Mittel – für Detail-Seiten und Docs

Screenshot	Beschreibung	URL/Quelle	Verwendung
`marketing-create-room.png`	Raum erstellen-Dialog	Chat → Raum erstellen	Docs
`marketing-add-people-dialog.png`	Personen hinzufügen (Matrix + MS Entra)	Chat → Raum öffnen → Personen hinzufügen	Docs
`marketing-add-tab-dialog.png`	Tab hinzufügen (Whiteboard, Polls)	Chat → Tab hinzufügen	Docs
`marketing-new-event.png`	Neuer Termin-Dialog	Kalender → Neuer Termin	Docs
`marketing-create-task.png`	Aufgabe erstellen	Planner → Aufgabe	Docs
`marketing-advanced-search.png`	Erweiterte Suche (Ctrl+K)	Suche öffnen	Docs
`marketing-settings-accounts.png`	Provider-Konten (Kalender, etc.)	Einstellungen → Konten	Docs
`marketing-call-log.png`	Anrufverlauf	`/calls` → Tab	Docs

Screenshot	Beschreibung	URL/Quelle	Verwendung
`marketing-sidebar-navigation.png`	Sidebar mit allen Bereichen (Chat, Kalender, Planner, Teams, Calls, Kontakte)	`/`	Übersicht, Onboarding
`marketing-chat-thread.png`	Chat mit Thread-Antworten	Chat-Raum mit Thread	Chat-Seite
`marketing-calendar-week.png`	Kalender Wochenansicht	`/calendar` → Week	Zusammenarbeit
`marketing-planner-task-detail.png`	Aufgabenkarte mit Details	Planner → Karte öffnen	Zusammenarbeit
`marketing-assistant-chat.png`	KI-Assistent mit Konversation	Assistant-Panel	KI-Assistent-Seite
`marketing-settings-security.png`	Sicherheitseinstellungen (E2EE)	Einstellungen → Sicherheit	Chat: E2EE
`marketing-mobile-view.png`	Responsive Ansicht (falls vorhanden)	Mobile Viewport	Plattformübersicht

Konfiguration für screenshot-config.json

Neue Einträge für Marketing-Screenshots (falls noch nicht vorhanden):

{"name":"marketing-main-interface","url":"/","waitFor":".sidebar, main","description":"Main interface for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-ms-chat","url":"/ms-chat","waitFor":"main","description":"MS Teams Chat for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-ms-channels","url":"/ms-channels","waitFor":"main","description":"MS Teams Channels for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-planner-board","url":"/planner","waitFor":".planner, main","description":"Planner for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-calendar-view","url":"/calendar","waitFor":".calendar, main","description":"Calendar for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-contacts","url":"/contacts","waitFor":"main","description":"Contacts for marketing","fullPage":false,"requiresLogin":true},
{"name":"marketing-sidebar-navigation","url":"/","waitFor":".sidebar","description":"Sidebar with all sections","fullPage":false,"requiresLogin":true},
{"name":"marketing-calendar-week","url":"/calendar","waitFor":".calendar, main","description":"Calendar week view for marketing","fullPage":false,"requiresLogin":true,"actions":[{"type":"click","selector":"button:has-text('Week'), [aria-label*='Week']"},{"type":"wait","timeout":1000}]},
{"name":"marketing-settings-security","url":"/settings","waitFor":".settings-page","description":"Security settings for marketing","fullPage":false,"requiresLogin":true,"actions":[{"type":"click","selector":"button:has-text('Security'), button:has-text('Sicherheit')"},{"type":"wait","timeout":500}]}

Verweis: Sparks-Website Marketing-Images

Die Sparks-Website (sparks-website) nutzt zusätzlich generierte Illustrationen (keine App-Screenshots) in public/images/:

hero-sparks.png, feature-meetings.png, feature-chat.png, feature-collab.png, feature-ai.png
meetings-screenshare.png, meetings-breakout.png, chat-matrix-e2ee.png

Vollständige Analyse: sparks-website/docs/MARKETING-IMAGES-MICROSOFT-TEAMS-ANALYSE.md

Zusammenfassung – Marketing-Screenshots gesamt

Priorität	Anzahl	Status
Hoch	16	Noch zu erstellen
Mittel	7	Noch zu erstellen
Niedrig	7	Noch zu erstellen
Gesamt	30

Übersicht​

Wartezeiten für Datenladen​

Vollständige Liste – Screenshots noch zu erstellen​

Getting Started​

Navigation​

Chat & Messaging​

Befragung & Umfragen (R2.8, Juli 2026)​

Calendar​

Planner​

Teams & Channels​

Calls​

Meeting-Hilfe & Verbindung (Juni 2026)​

Benachrichtigungen & KI (Juli 2026)​

Contacts​

Settings​

Security​

Spaces​

User Profiles​

Troubleshooting​

Platform-Specific​

Google als Provider (optional, nach Umsetzung in Vistameet-Teams)​

Konfigurierbar (screenshot-config.json)​

Ohne Login​

Mit Login (E2E_USER1/E2E_PASSWORD1)​

E2E-Demo (Vistameet-Teams)​

Marketing / Sparks-Website (aus Vistameet-Teams)​

Priorität Hoch – für Sparks-Website Feature-Seiten​

Priorität Mittel – für Detail-Seiten und Docs​

Priorität Niedrig – für Social Media, Blog, Detail-Dokumentation​

Konfiguration für screenshot-config.json​

Verweis: Sparks-Website Marketing-Images​

Zusammenfassung – Marketing-Screenshots gesamt​