render pasted images inline with lightbox expansion (T-236, T-254, D-89)

A pasted-image @<path> token now renders as an inline, keyboard-activatable
thumbnail in the Claude conversation that opens the full image in the lightbox;
the composer's attachment chips use the same (larger, 44px) thumbnail. New
ImageThumbnail + openImageLightbox in the Claude layer; ClideMarkdown gains an
onImageToken builder seam (mirroring onRecordTap) that drops a WidgetSpan into
the text flow — it owns no Image.file/lightbox, staying generic. Missing files
degrade to a placeholder; render-only (the sent text + copyText are unchanged).

Resolves the conflicting T-236 (inline thumbnail) / T-254 (image card) designs
into the hybrid the user chose; recorded as D-89.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-09 17:54:55 +02:00
co-authored by Claude Opus 4.8
parent 6f67757240
commit 529f40996d
9 changed files with 237 additions and 39 deletions
@@ -10,6 +10,7 @@ import 'package:clide/builtin/claude/src/activity_cluster.dart';
import 'package:clide/builtin/claude/src/claude_banner.dart';
import 'package:clide/builtin/claude/src/conversation_controller.dart';
import 'package:clide/builtin/claude/src/conversation_view.dart';
import 'package:clide/builtin/claude/src/image_thumbnail.dart';
import 'package:clide/builtin/claude/src/transcript_publisher.dart';
import 'package:clide/builtin/claude/src/transcript_reader.dart';
import 'package:clide/kernel/src/events/message_bus.dart';
@@ -229,6 +230,23 @@ void main() {
expect(opened!.data['id'], 'D-77');
});
testWidgets('a pasted-image @path token renders an inline thumbnail (T-236/T-254)', (tester) async {
await pumpWith(tester, [_user('look at this @/tmp/clide/paste-1.png please')]);
expect(find.byType(ImageThumbnail), findsOneWidget);
// The prose around the token still renders.
expect(find.textContaining('look at this'), findsWidgets);
});
testWidgets('multiple image tokens each render a thumbnail (T-236)', (tester) async {
await pumpWith(tester, [_user('@/tmp/a.png and @/tmp/b.jpg')]);
expect(find.byType(ImageThumbnail), findsNWidgets(2));
});
testWidgets('a non-image @path stays literal text (T-236)', (tester) async {
await pumpWith(tester, [_user('see @/tmp/notes.txt for details')]);
expect(find.byType(ImageThumbnail), findsNothing);
});
testWidgets('meta items fold into a collapsed activity card; tap expands (T-230)', (tester) async {
await pumpWith(
tester,
@@ -0,0 +1,42 @@
/// Tests for ImageThumbnail (T-236 / T-254): a bounded, keyboard-activatable
/// image preview that opens the lightbox and degrades gracefully.
library;
import 'package:clide/builtin/claude/src/image_thumbnail.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_test/flutter_test.dart';
import '../../helpers/kernel_fixture.dart';
import '../../helpers/widget_harness.dart';
void main() {
group('ImageThumbnail', () {
late KernelFixture f;
setUp(() async => f = await KernelFixture.create());
tearDown(() => f.dispose());
testWidgets('carries an a11y label from the file name', (tester) async {
await tester.pumpWidget(harness(f, const ImageThumbnail(path: '/tmp/clide/paste-9.png')));
await tester.pump();
expect(find.bySemanticsLabel('Image paste-9.png'), findsOneWidget);
});
testWidgets('a missing file degrades to a placeholder without throwing', (tester) async {
await tester.pumpWidget(harness(f, const ImageThumbnail(path: '/no/such/file.png')));
await tester.pumpAndSettle();
expect(find.byType(ImageThumbnail), findsOneWidget);
expect(tester.takeException(), isNull);
});
testWidgets('tapping opens the lightbox via the dialog router', (tester) async {
await tester.pumpWidget(harness(f, const ImageThumbnail(path: '/no/such/file.png')));
await tester.pump();
expect(f.services.dialog.isOpen, isFalse);
await tester.tap(find.byType(ImageThumbnail));
await tester.pump();
expect(f.services.dialog.isOpen, isTrue);
});
});
}