fix: image flicker, screenshot indicator, cross-session message storage

Matthias Nott

2026-03-22 69c37c43074ad20ab9c7a5b7f4464863c4d298d4

fix: image flicker, screenshot indicator, cross-session message storage

- Cache decoded image bytes to prevent flicker on widget rebuild
- gaplessPlayback prevents blank flash during Image.memory rebuild
- Screenshot button shows snackbar feedback
- Cross-session messages stored to disk immediately (not just toast)
- Messages available when user switches to that session

 lib/screens/chat_screen.dart
..
..
@@ -13,6 +13,7 @@
13
13
 import '../models/server_config.dart';
14
14
 import '../providers/providers.dart';
15
15
 import '../services/audio_service.dart';
16
+import '../services/message_store.dart';
16
17
 import '../services/websocket_service.dart';
17
18
 import '../theme/app_theme.dart';
18
19
 import '../widgets/command_bar.dart';
..
..
@@ -264,6 +265,8 @@
264
265
 
265
266
     final activeId = ref.read(activeSessionIdProvider);
266
267
     if (sessionId != null && sessionId != activeId) {
268
+      // Store message for the other session so it's there when user switches
269
+      _storeForSession(sessionId, message);
267
270
       _incrementUnread(sessionId);
268
271
       final sessions = ref.read(sessionsProvider);
269
272
       final session = sessions.firstWhere(
..
..
@@ -304,6 +307,7 @@
304
307
 
305
308
     final activeId = ref.read(activeSessionIdProvider);
306
309
     if (sessionId != null && sessionId != activeId) {
310
+      _storeForSession(sessionId, message);
307
311
       _incrementUnread(sessionId);
308
312
       final sessions = ref.read(sessionsProvider);
309
313
       final session = sessions.firstWhere(
..
..
@@ -366,6 +370,13 @@
366
370
     ref.read(messagesProvider.notifier).addMessage(message);
367
371
     ref.read(isTypingProvider.notifier).state = false;
368
372
     _scrollToBottom();
373
+  }
374
+
375
+  /// Store a message for a non-active session so it persists when the user switches to it.
376
+  void _storeForSession(String sessionId, Message message) {
377
+    MessageStore.loadAll(sessionId).then((existing) {
378
+      MessageStore.save(sessionId, [...existing, message]);
379
+    });
369
380
   }
370
381
 
371
382
   void _incrementUnread(String sessionId) {
..
..
@@ -525,6 +536,15 @@
525
536
   void _requestScreenshot() {
526
537
     _screenshotForChat = true;
527
538
     _sendCommand('screenshot');
539
+    if (mounted) {
540
+      ScaffoldMessenger.of(context).showSnackBar(
541
+        const SnackBar(
542
+          content: Text('Capturing screenshot...'),
543
+          duration: Duration(seconds: 2),
544
+          behavior: SnackBarBehavior.floating,
545
+        ),
546
+      );
547
+    }
528
548
   }
529
549
 
530
550
   void _navigateToTerminal() {
 lib/widgets/message_bubble.dart
..
..
@@ -1,5 +1,6 @@
1
1
 import 'dart:convert';
2
2
 import 'dart:math';
3
+import 'dart:typed_data';
3
4
 
4
5
 import 'package:flutter/material.dart';
5
6
 import 'package:flutter/services.dart';
..
..
@@ -8,6 +9,9 @@
8
9
 import '../models/message.dart';
9
10
 import '../theme/app_theme.dart';
10
11
 import 'image_viewer.dart';
12
+
13
+// Cache decoded image bytes to prevent flicker on widget rebuild
14
+final Map<String, Uint8List> _imageCache = {};
11
15
 
12
16
 /// Chat message bubble with support for text, voice, and image types.
13
17
 class MessageBubble extends StatelessWidget {
..
..
@@ -208,11 +212,13 @@
208
212
       return const Text('Image unavailable');
209
213
     }
210
214
 
211
-    final bytes = base64Decode(
212
-      message.imageBase64!.contains(',')
213
-          ? message.imageBase64!.split(',').last
214
-          : message.imageBase64!,
215
-    );
215
+    // Cache decoded bytes to prevent flicker on rebuild
216
+    final bytes = _imageCache.putIfAbsent(message.id, () {
217
+      final raw = message.imageBase64!;
218
+      return Uint8List.fromList(base64Decode(
219
+        raw.contains(',') ? raw.split(',').last : raw,
220
+      ));
221
+    });
216
222
 
217
223
     return Column(
218
224
       crossAxisAlignment: CrossAxisAlignment.start,
..
..
@@ -232,6 +238,7 @@
232
238
               width: 260,
233
239
               height: 180,
234
240
               fit: BoxFit.cover,
241
+              gaplessPlayback: true,
235
242
               errorBuilder: (_, e, st) => const SizedBox(
236
243
                 width: 260,
237
244
                 height: 60,